Improve KuiContextMenu keyboard navigation UX

docs/src/views/context_menu/context_menu.js

@@ -11,34 +11,19 @@ import {
  EuiSwitch,
 } from '../../../../src/components';
 
-function convertPanelTreeToMap(panel, map = {}) {
- if (panel) {
- map[panel.id] = panel;
+function flattenPanelTree(tree, array = []) {
+ array.push(tree);
 
- if (panel.items) {
- panel.items.forEach(item => convertPanelTreeToMap(item.panel, map));
- }
+ if (tree.items) {
+ tree.items.forEach(item => {
+ if (item.panel) {
+ flattenPanelTree(item.panel, array);
+ item.panel = item.panel.id;
+ }
+ });
  }
 
- return map;
-}
-
-function extractPreviousIds(panels) {
- const idToPreviousPanelIdMap = {};
-
- Object.keys(panels).forEach(panelId => {
- const panel = panels[panelId];
- if (Array.isArray(panel.items)) {
- panel.items.forEach(item => {
- const isCloseable = Boolean(item.panel);
- if (isCloseable) {
- idToPreviousPanelIdMap[item.panel.id] = panel.id;
- }
- });
- }
- });
-
- return idToPreviousPanelIdMap;
+ return array;
 }
 
 export default class extends Component {
@@ -60,7 +45,7 @@ export default class extends Component {
  size="medium"
  />
  ),
- onClick: () => window.alert('Show fullscreen'),
+ onClick: () => { this.closePopover(); window.alert('Show fullscreen'); },
  }, {
  name: 'Share this dasbhoard',
  icon: 'user',
@@ -70,17 +55,17 @@ export default class extends Component {
  items: [{
  name: 'PDF reports',
  icon: 'user',
- onClick: () => window.alert('PDF reports'),
+ onClick: () => { this.closePopover(); window.alert('PDF reports'); },
  }, {
  name: 'CSV reports',
  icon: 'user',
- onClick: () => window.alert('CSV reports'),
+ onClick: () => { this.closePopover(); window.alert('CSV reports'); },
  }, {
  name: 'Embed code',
  icon: 'user',
  panel: {
  id: 2,
- title: 'Share this dashboard',
+ title: 'Embed code',
  content: (
  <div style={{ padding: 16 }}>
  <EuiFormRow
@@ -108,39 +93,42 @@ export default class extends Component {
  }, {
  name: 'Permalinks',
  icon: 'user',
- onClick: () => window.alert('Permalinks'),
+ onClick: () => { this.closePopover(); window.alert('Permalinks'); },
  }],
  },
  }, {
  name: 'Edit / add panels',
  icon: 'user',
- onClick: () => window.alert('Edit / add panels'),
+ onClick: () => { this.closePopover(); window.alert('Edit / add panels'); },
  }, {
  name: 'Display options',
  icon: 'user',
- onClick: () => window.alert('Display options'),
+ onClick: () => { this.closePopover(); window.alert('Display options'); },
  }],
  };
 
- this.idToPanelMap = convertPanelTreeToMap(panelTree);
- this.idToPreviousPanelIdMap = extractPreviousIds(this.idToPanelMap);
+ this.panels = flattenPanelTree(panelTree);
  }
 
- onButtonClick() {
- this.setState({
- isPopoverOpen: !this.state.isPopoverOpen,
- });
- }
+ onButtonClick = () => {
+ this.setState(prevState => ({
+ isPopoverOpen: !prevState.isPopoverOpen,
+ }));
+ };
 
- closePopover() {
+ closePopover = () => {
  this.setState({
  isPopoverOpen: false,
  });
- }
+ };
 
  render() {
  const button = (
- <EuiButton iconType="arrowDown" iconSide="right" onClick={this.onButtonClick.bind(this)}>
+ <EuiButton
+ iconType="arrowDown"
+ iconSide="right"
+ onClick={this.onButtonClick}
+ >
  Click me to load a context menu
  </EuiButton>
  );
@@ -149,15 +137,14 @@ export default class extends Component {
  <EuiPopover
  button={button}
  isOpen={this.state.isPopoverOpen}
- closePopover={this.closePopover.bind(this)}
+ closePopover={this.closePopover}
  panelPaddingSize="none"
  withTitle
+ anchorPosition="downLeft"
  >
  <EuiContextMenu
  initialPanelId={0}
- isVisible={this.state.isPopoverOpen}
- idToPanelMap={this.idToPanelMap}
- idToPreviousPanelIdMap={this.idToPreviousPanelIdMap}
+ panels={this.panels}
  />
  </EuiPopover>
  );

docs/src/views/context_menu/context_menu_example.js

@@ -16,9 +16,9 @@ import ContextMenu from './context_menu';
 const contextMenuSource = require('!!raw-loader!./context_menu');
 const contextMenuHtml = renderToHtml(ContextMenu);
 
-import ContextMenuSimple from './context_menu_simple';
-const contextMenuSimpleSource = require('!!raw-loader!./context_menu_simple');
-const contextMenuSimpleHtml = renderToHtml(ContextMenuSimple);
+import SinglePanel from './single_panel';
+const singlePanelSource = require('!!raw-loader!./single_panel');
+const singlePanelHtml = renderToHtml(SinglePanel);
 
 export default props => (
  <GuidePage title={props.route.name}>
@@ -46,10 +46,10 @@ export default props => (
  title="Context menu doesn't need to nest"
  source={[{
  type: GuideSectionTypes.JS,
- code: contextMenuSimpleSource,
+ code: singlePanelSource,
  }, {
  type: GuideSectionTypes.HTML,
- code: contextMenuSimpleHtml,
+ code: singlePanelHtml,
  }]}
  text={
  <p>
@@ -59,7 +59,7 @@ export default props => (
 
  }
  demo={
- <ContextMenuSimple />
+ <SinglePanel />
  }
  />
  </GuidePage>

docs/src/views/context_menu/single_panel.js

@@ -0,0 +1,94 @@
+import React, {
+ Component,
+} from 'react';
+
+import {
+ EuiButtonEmpty,
+ EuiContextMenuPanel,
+ EuiContextMenuItem,
+ EuiPopover,
+} from '../../../../src/components';
+
+export default class extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isPopoverOpen: false,
+ };
+ }
+
+ onButtonClick = () => {
+ this.setState(prevState => ({
+ isPopoverOpen: !prevState.isPopoverOpen,
+ }));
+ };
+
+ closePopover = () => {
+ this.setState({
+ isPopoverOpen: false,
+ });
+ };
+
+ render() {
+ const button = (
+ <EuiButtonEmpty
+ size="small"
+ type="text"
+ iconType="arrowDown"
+ iconSide="right"
+ onClick={this.onButtonClick}
+ >
+ Rows per page: 50
+ </EuiButtonEmpty>
+ );
+
+ const items = [(
+ <EuiContextMenuItem
+ key="10 rows"
+ icon="empty"
+ onClick={() => { this.closePopover(); window.alert('10 rows'); }}
+ >
+ 10 rows
+ </EuiContextMenuItem>
+ ), (
+ <EuiContextMenuItem
+ key="20 rows"
+ icon="empty"
+ onClick={() => { this.closePopover(); window.alert('20 rows'); }}
+ >
+ 20 rows
+ </EuiContextMenuItem>
+ ), (
+ <EuiContextMenuItem
+ key="50 rows"
+ icon="check"
+ onClick={() => { this.closePopover(); window.alert('50 rows'); }}
+ >
+ 50 rows
+ </EuiContextMenuItem>
+ ), (
+ <EuiContextMenuItem
+ key="100 rows"
+ icon="empty"
+ onClick={() => { this.closePopover(); window.alert('100 rows'); }}
+ >
+ 100 rows
+ </EuiContextMenuItem>
+ )];
+
+ return (
+ <EuiPopover
+ button={button}
+ isOpen={this.state.isPopoverOpen}
+ closePopover={this.closePopover}
+ panelPaddingSize="none"
+ anchorPosition="downLeft"
+ >
+ <EuiContextMenuPanel
+ items={items}
+ />
+ </EuiPopover>
+ );
+ }
+}

docs/src/views/popover/popover.js

@@ -41,6 +41,7 @@ export default class extends Component {
 
  return (
  <EuiPopover
+ ownFocus
  button={button}
  isOpen={this.state.isPopoverOpen}
  closePopover={this.closePopover.bind(this)}