@spaced-out/ui-design-system 0.4.11 → 0.4.13-beta.0

package/lib/components/Menu/Menu.stories.js

@@ -0,0 +1,1048 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithSearch = exports._WithResolvers = exports._WithHeaderAndFooter = exports._WithHeader = exports._WithFooter = exports._TextWithTooltip = exports._TextOnly = exports._TextAndIconRight = exports._TextAndIconLeft = exports._TextAndDualIcon = exports._RadioMenu = exports._MenuWithWrap = exports._GroupTitleMenu = exports._GroupTitleActionMenu = exports._DualText = exports._CustomComponentMenu = exports._ComposeMenu = exports._ColoredOption = exports._CheckboxMenu = exports.MenuHeader = exports.MenuFooter = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
+var _menu = require("../../utils/menu");
+var _Avatar = require("../Avatar");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _SearchInput = require("../SearchInput");
+var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
+var _Truncate = require("../Truncate");
+var _Menu = require("./Menu");
+var _MenuStoriesModule = _interopRequireDefault(require("./Menu.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const textOptions = [{
+  key: '1',
+  label: 'Option one'
+}, {
+  key: '2',
+  label: 'Option two with some extra words to increase length'
+}, {
+  key: '3',
+  label: 'Option three with more content to demonstrate truncation and test three lines wrap.'
+}, {
+  key: '4',
+  label: 'Option four very long option that would truncate and now it is even longer than before to ensure truncation happens'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true
+}, {
+  key: '7',
+  label: 'Option Seven'
+}, {
+  key: '8',
+  label: 'Option Eight'
+}, {
+  key: '9',
+  label: 'Option Nine'
+}, {
+  key: '10',
+  label: 'Option Ten'
+}, {
+  key: '11',
+  label: 'Option Eleven'
+}, {
+  key: '12',
+  label: 'Option Twelve'
+}, {
+  key: '13',
+  label: 'Option Thirteen'
+}];
+const checkboxOptions = [{
+  key: '1',
+  label: 'Option one',
+  indeterminate: true
+}, {
+  key: '2',
+  label: 'Option two'
+}, {
+  key: '3',
+  label: 'Option three',
+  indeterminate: true
+}, {
+  key: '4',
+  label: 'Option four very long option that would truncate'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true
+}, {
+  key: '7',
+  label: 'Option Seven'
+}];
+const textOptionsWithSecondaryLabel = [{
+  key: '1',
+  label: 'Option one',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '2',
+  label: 'Option two',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '3',
+  label: 'Option three',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '4',
+  label: 'Option four very long option that would truncate',
+  secondaryLabel: 'Option four very long option that would truncate'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true,
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true,
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '7',
+  label: 'Option Seven',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '8',
+  label: 'Option Eight',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '9',
+  label: 'Option Nine',
+  secondaryLabel: 'Sub Text'
+}];
+const iconLeftOptions = [{
+  key: '1',
+  label: 'Option one',
+  iconLeft: 'coffee'
+}, {
+  key: '2',
+  label: 'Option two',
+  iconLeft: 'user'
+}, {
+  key: '4',
+  label: 'Option four very long option that would truncate',
+  iconLeft: 'face-party'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true,
+  iconLeft: 'flag'
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true,
+  iconLeft: 'camera'
+}];
+const coloredOptions = [{
+  key: '1',
+  label: 'Edit',
+  iconLeft: 'pen'
+}, {
+  key: '2',
+  label: 'Delete',
+  iconLeft: 'trash',
+  classNames: {
+    wrapper: _MenuStoriesModule.default.dangerText
+  }
+}];
+const iconRightOptions = [{
+  key: '1',
+  label: 'Option one',
+  iconRight: 'coffee'
+}, {
+  key: '2',
+  label: 'Option two',
+  iconRight: 'user'
+}, {
+  key: '4',
+  label: 'Option four very long option that would truncate',
+  iconRight: 'face-party'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true,
+  iconRight: 'flag'
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true,
+  iconRight: 'camera'
+}];
+const iconLeftRightOptions = [{
+  key: '1',
+  label: 'Option one',
+  iconRight: 'coffee',
+  iconLeft: 'coffee'
+}, {
+  key: '2',
+  label: 'Option two',
+  iconRight: 'user',
+  iconLeft: 'coffee'
+}, {
+  key: '4',
+  label: 'Option four very long option that would truncate',
+  iconRight: 'face-party',
+  iconLeft: 'coffee'
+}, {
+  key: '5',
+  label: 'Option five(disabled)',
+  disabled: true,
+  iconRight: 'flag',
+  iconLeft: 'coffee'
+}, {
+  key: '6',
+  label: 'Option six(disabled) very long option that would truncate',
+  disabled: true,
+  iconRight: 'camera',
+  iconLeft: 'coffee'
+}];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Menu',
+  argTypes: {
+    resolveLabel: {
+      description: 'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',
+      table: {
+        type: {
+          summary: '(option: MenuOption) => string | React.ReactNode'
+        }
+      }
+    },
+    resolveSecondaryLabel: {
+      description: 'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',
+      table: {
+        type: {
+          summary: '(option: MenuOption) => string | React.ReactNode'
+        }
+      }
+    },
+    onSelect: {
+      description: '**onSelect** handler is triggered when there is a change in selected option',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    onTabOut: {
+      description: '**onTabOut** callback is triggered when the user navigates outside of the menu using the tab key',
+      action: 'tabout',
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    options: {
+      description: `list of Options to be displayed in the menu.
+      Menu component accepts options / composeOptions / groupTitleOptions whatever is available first and not all.`,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: `Array<{
+          key?: string,
+          label: React.ReactNode,
+          customComponent?: React.ReactNode,
+          secondaryLabel?: React.ReactNode,
+          iconLeft?: string,
+          iconLeftType?: IconType,
+          iconRight?: string,
+          iconRightType?: IconType,
+          disabled?: boolean,
+          optionSize?: MenuSizeTypes,
+          indeterminate?: boolean,
+        }>`
+        }
+      }
+    },
+    composeOptions: {
+      description: `list of list of Options are grouped and displayed in the menu.
+        Menu component accepts options / composeOptions / groupTitleOptions whatever is available first and not all.`,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: `Array<Array<{
+          key?: string,
+          label: React.ReactNode,
+          customComponent?: React.ReactNode,
+          secondaryLabel?: React.ReactNode,
+          iconLeft?: string,
+          iconLeftType?: IconType,
+          iconRight?: string,
+          iconRightType?: IconType,
+          disabled?: boolean,
+          optionSize?: MenuSizeTypes,
+          indeterminate?: boolean,
+        }>>`
+        }
+      }
+    },
+    groupTitleOptions: {
+      description: `List of Options are grouped with a title(each group contains a set of options) and displayed in the menu.
+        Menu component accepts options / composeOptions / groupTitleOptions whatever is available first and not all.`,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: `Array<{
+          groupTitle?: React.ReactNode,
+          options?: Array<MenuOption>
+        }>`
+        }
+      }
+    },
+    selectedOption: {
+      description: `Used in cases where you want to pre-select an option as soon as the component renders.
+      Selection is triggered when the selected option exactly matches one of the passed option.
+      **Note:** This prop would be deprecated soon. Please use \`selectedKeys\` instead
+      `,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'MenuOption'
+        }
+      }
+    },
+    optionsVariant: {
+      description: 'Menu supports multiple options variant',
+      control: {
+        type: 'select'
+      },
+      options: ['checkbox', 'radio', 'normal'],
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'normal'
+        }
+      }
+    },
+    selectedKeys: {
+      description: 'Selected keys corresponding to options. These options are shown as selected in UI',
+      control: {
+        type: 'array'
+      },
+      table: {
+        type: {
+          summary: 'Array<string>'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string, header?: string, footer?: string}'
+        }
+      }
+    },
+    size: {
+      description: 'Menu supports only two size variants namely small and medium. `small` < `medium`',
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'medium'],
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    width: {
+      description: 'Manual width control. This overrides the default width considerations of Menu',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    menuDisabled: {
+      description: 'if **true**, the option is disabled',
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    isFluid: {
+      description: 'if **true**, the component would take the width of the container it is placed in',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    allowSearch: {
+      description: `if **true**, the component would show a search input on top of menu.
+        This is a simple **static search**
+        which filter options by **matching search text to option label**`,
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    },
+    virtualization: {
+      description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight and itemHeight** accept numerical input, interpreted as pixel values.`,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{enable: boolean, menuHeight?: number, itemHeight?: number}'
+        }
+      }
+    },
+    header: {
+      description: 'Custom Header For the Menu',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    footer: {
+      description: 'Custom Header For the Menu',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    showResultText: {
+      description: `if **true**, shows result text below **search input**.
+      **Note:** For the result text to be displayed below the search input, please ensure that allowSearch is set to true.`,
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: true
+        }
+      }
+    },
+    staticLabels: {
+      description: 'External labels to be assigned to static text displayed in the UI.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{[key: string]: string}'
+        },
+        defaultValue: {
+          summary: `{RESULT: 'result', RESULTS: 'results', SEARCH_PLACEHOLDER: 'Search...'}`
+        }
+      }
+    },
+    showLabelTooltip: {
+      description: 'Show Tooltip on the label of the menu option if truncated',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'MenuLabelTooltip'
+        }
+      }
+    },
+    allowWrap: {
+      description: 'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: false
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Menu component',
+      description: {
+        component: `
+\`\`\`js
+import { Menu } from "@spaced-out/ui-design-system/lib/components/Menu";
+\`\`\`
+**Menu** is a list of choices on a temporary surface. It appears on interacts with a button, or other control. This is a standalone Menu component,
+in real world use cases Menu component would be used in conjunction with other component like Button, Input, Typeahead, etc. Each option in the Menu
+component is implemented as an \`UnstyledButton\`.
+- The component also supports custom **header** as \`React Component\` and this is then passed in
+the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component.
+- The component also supports custom **footer** as \`React Component\` and this is then passed in
+the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component. This might be useful when you need
+to save some state in the parent component.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Menu/Menu.jsx'
+    }
+  }
+};
+const _TextOnly = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._TextOnly = _TextOnly;
+_TextOnly.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: textOptions,
+  selectedKeys: ['2']
+};
+const _TextWithTooltip = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._TextWithTooltip = _TextWithTooltip;
+_TextWithTooltip.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: textOptions,
+  selectedKeys: ['2'],
+  showLabelTooltip: {
+    maxLines: 2
+  }
+};
+const _MenuWithWrap = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.selectedKeys || []);
+  const selectKeys = option => {
+    setSelectedKeys([option.key]);
+  };
+  return /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+    selectedKeys: selectedKeys,
+    onSelect: selectKeys
+  }));
+};
+exports._MenuWithWrap = _MenuWithWrap;
+_MenuWithWrap.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: textOptions,
+  selectedKeys: ['2'],
+  allowWrap: true
+};
+const _WithSearch = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._WithSearch = _WithSearch;
+_WithSearch.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: textOptions,
+  allowSearch: true
+};
+const _TextAndIconLeft = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._TextAndIconLeft = _TextAndIconLeft;
+_TextAndIconLeft.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: iconLeftOptions,
+  selectedKeys: ['2']
+};
+
+/**
+ * To make one of the options colored, you can set the classNames wrapper property in the option object.
+ * Eg:
+ * You would need to set the color of the option and manage the hover, focus and active state yourself.
+ * ### JS
+ * ```
+ * const coloredOptions: MenuOption[] = [
+ *   {
+ *     key: '1',
+ *     label: 'Edit',
+ *     iconLeft: 'coffee',
+ *   },
+ *   {
+ *     key: '2',
+ *     label: 'Delete',
+ *     iconLeft: 'trash',
+ *     classNames: { wrapper: css.dangerText },
+ *   },
+ * ];
+ * ```
+ * ### CSS
+ * ```
+ * .dangerText:hover,
+ * .dangerText:active,
+ * .dangerText:focus {
+ *   color: colorTextDanger;
+ * }
+ * ```
+ */
+const _ColoredOption = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._ColoredOption = _ColoredOption;
+_ColoredOption.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: coloredOptions
+};
+const _TextAndIconRight = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._TextAndIconRight = _TextAndIconRight;
+_TextAndIconRight.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: iconRightOptions,
+  selectedKeys: ['2']
+};
+const _TextAndDualIcon = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._TextAndDualIcon = _TextAndDualIcon;
+_TextAndDualIcon.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: iconLeftRightOptions,
+  selectedKeys: ['2']
+};
+const _DualText = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._DualText = _DualText;
+_DualText.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: textOptionsWithSecondaryLabel,
+  selectedKeys: ['2']
+};
+const _WithResolvers = args => {
+  const resolveLabel = option => /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.customComponent
+  }, parseInt(option.key) < 6 ? /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    imageSrc: `https://cdn.sensehq.com/genesis/hashed/static/images/personas/${option.key}.png`
+  }) : /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    iconName: "user"
+  }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    className: _MenuStoriesModule.default.text,
+    color: "secondary"
+  }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, option.label)));
+  return /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+    resolveLabel: resolveLabel
+  }));
+};
+exports._WithResolvers = _WithResolvers;
+_WithResolvers.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  options: textOptions
+};
+const composeMenuOptions = [[{
+  key: '1',
+  label: 'Option one',
+  secondaryLabel: 'Sub Text',
+  optionSize: 'small'
+}, {
+  key: '2',
+  label: 'Option two',
+  secondaryLabel: 'Sub Text',
+  optionSize: 'small'
+}, {
+  key: '3',
+  label: 'Option three',
+  secondaryLabel: 'Sub Text',
+  optionSize: 'small'
+}], [{
+  iconLeft: 'coffee',
+  key: '4',
+  label: 'Option one',
+  optionSize: 'medium'
+}], [{
+  iconLeft: 'coffee',
+  key: '5',
+  label: 'Option one',
+  optionSize: 'medium'
+}]];
+const _ComposeMenu = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._ComposeMenu = _ComposeMenu;
+_ComposeMenu.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'medium',
+  composeOptions: composeMenuOptions,
+  selectedKeys: ['2']
+};
+const customComponentMenuOptions = [{
+  key: '1',
+  customComponent: /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.customComponent
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    color: "blue",
+    imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png",
+    iconName: "face-party",
+    iconType: "regular",
+    size: "medium"
+  }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    className: _MenuStoriesModule.default.text
+  }, "Angelina White"))
+}, {
+  key: '2',
+  customComponent: /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.customComponent
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/4.png",
+    color: "green",
+    size: "medium",
+    text: "John"
+  }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    className: _MenuStoriesModule.default.text
+  }, "John Smith"))
+}, {
+  key: '3',
+  customComponent: /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.customComponent
+  }, /*#__PURE__*/React.createElement(_Avatar.Avatar, {
+    imageSrc: "https://cdn.sensehq.com/genesis/hashed/static/images/personas/6.png",
+    color: "orange",
+    size: "medium",
+    text: "Jacobs Marley"
+  }), /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+    className: _MenuStoriesModule.default.text
+  }, "Sarah Parker"))
+}];
+const _CustomComponentMenu = args => /*#__PURE__*/React.createElement(_Menu.Menu, args);
+exports._CustomComponentMenu = _CustomComponentMenu;
+_CustomComponentMenu.args = {
+  isFluid: false,
+  menuDisabled: false,
+  classNames: {
+    option: _MenuStoriesModule.default.optionText
+  },
+  size: 'medium',
+  options: customComponentMenuOptions,
+  selectedKeys: ['2']
+};
+const groupTitleComponentMenuOptions = [{
+  groupTitle: /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.titleWrapper
+  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: "tertiary"
+  }, "Fast Food"), /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.infoContainer
+  }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+    title: "Hello!",
+    elevation: "menu"
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "circle-info",
+    size: "small",
+    color: "tertiary"
+  })))),
+  options: [{
+    key: '1',
+    iconLeft: 'burger',
+    label: 'Burger'
+  }, {
+    key: '2',
+    iconLeft: 'pizza',
+    label: 'Pizza'
+  }, {
+    key: '3',
+    iconLeft: 'french-fries',
+    label: 'Fries'
+  }]
+}, {
+  showLineDivider: true,
+  groupTitle: /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.titleWrapper
+  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: "tertiary"
+  }, "Fruits"), /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.infoContainer
+  }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+    title: "Hello!",
+    elevation: "menu"
+  }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: "circle-info",
+    size: "small",
+    color: "tertiary"
+  })))),
+  options: [{
+    key: '7',
+    iconLeft: 'banana',
+    label: 'Banana'
+  }, {
+    key: '8',
+    iconLeft: 'pear',
+    label: 'Pear'
+  }, {
+    key: '9',
+    iconLeft: 'lemon',
+    label: 'Lemon'
+  }]
+}];
+const _GroupTitleMenu = args => /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+  classNames: {
+    groupTitle: _MenuStoriesModule.default.gpTitle
+  }
+}));
+exports._GroupTitleMenu = _GroupTitleMenu;
+_GroupTitleMenu.args = {
+  isFluid: false,
+  menuDisabled: false,
+  classNames: {
+    option: _MenuStoriesModule.default.optionText
+  },
+  size: 'medium',
+  groupTitleOptions: groupTitleComponentMenuOptions,
+  selectedKeys: ['2']
+};
+const GroupTitleActionMenu = args => {
+  const [searchText, setSearchText] = React.useState('');
+  const [selectedKeys, setSelectedKeys] = React.useState(args.selectedKeys || []);
+  const optionsFiltered = (0, _menu.getFilteredOptionsFromSearchText)(textOptions, searchText);
+  const optionsFilteredKeys = optionsFiltered.filter(_ref => {
+    let {
+      disabled
+    } = _ref;
+    return !disabled;
+  }).map(_ref2 => {
+    let {
+      key
+    } = _ref2;
+    return key;
+  });
+  React.useEffect(() => {
+    setSelectedKeys(args.selectedKeys || []);
+  }, [args.selectedKeys]);
+  const selectKeys = option => {
+    if (selectedKeys.includes(option.key)) {
+      setSelectedKeys((0, _lodash.difference)(selectedKeys, [option.key]));
+    } else {
+      setSelectedKeys((0, _lodash.union)(selectedKeys, [option.key]));
+    }
+  };
+  const selectAllKeys = () => {
+    setSelectedKeys((0, _lodash.union)(selectedKeys, optionsFilteredKeys));
+  };
+  const clearSelectedKeys = () => {
+    setSelectedKeys((0, _lodash.difference)(selectedKeys, optionsFilteredKeys));
+  };
+  return /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+    optionsVariant: "checkbox",
+    selectedKeys: selectedKeys,
+    onSelect: selectKeys,
+    classNames: {
+      header: _MenuStoriesModule.default.groupTitleActionHeader,
+      groupTitle: _MenuStoriesModule.default.groupTitle
+    },
+    header: /*#__PURE__*/React.createElement(_SearchInput.SearchInput, {
+      value: searchText,
+      onChange: e => setSearchText(e.target.value),
+      onClear: () => setSearchText(''),
+      size: args.size
+    }),
+    groupTitleOptions: [{
+      groupTitle: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Text.FormLabelMedium, {
+        color: "tertiary"
+      }, `Values (${optionsFiltered.length})`), /*#__PURE__*/React.createElement("div", {
+        className: _MenuStoriesModule.default.groupTitleActions
+      }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmallUnderline, {
+        className: _MenuStoriesModule.default.groupTitleAction
+        // @ts-ignore - TS2769 - No overload matches this call.
+        ,
+        onClick: clearSelectedKeys
+      }, "Clear"), /*#__PURE__*/React.createElement(_Text.ButtonTextSmallUnderline, {
+        color: "clickable",
+        className: _MenuStoriesModule.default.groupTitleAction
+        // @ts-ignore - TS2769 - No overload matches this call.
+        ,
+        onClick: selectAllKeys
+      }, "Select All"))),
+      options: optionsFiltered
+    }]
+  }));
+};
+const _GroupTitleActionMenu = args => /*#__PURE__*/React.createElement(GroupTitleActionMenu, args);
+exports._GroupTitleActionMenu = _GroupTitleActionMenu;
+_GroupTitleActionMenu.args = {
+  isFluid: false,
+  menuDisabled: false,
+  classNames: {
+    option: _MenuStoriesModule.default.optionText
+  },
+  size: 'medium',
+  selectedKeys: ['2']
+};
+const _CheckboxMenu = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.selectedKeys || []);
+  React.useEffect(() => {
+    setSelectedKeys(args.selectedKeys || []);
+  }, [args.selectedKeys]);
+  const selectKeys = option => {
+    if (selectedKeys.includes(option.key)) {
+      setSelectedKeys(selectedKeys.filter(item => item !== option.key));
+    } else {
+      setSelectedKeys([...selectedKeys, option.key]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+    selectedKeys: selectedKeys,
+    onSelect: selectKeys
+  }));
+};
+exports._CheckboxMenu = _CheckboxMenu;
+_CheckboxMenu.args = {
+  isFluid: false,
+  menuDisabled: false,
+  classNames: {
+    option: _MenuStoriesModule.default.optionText
+  },
+  size: 'medium',
+  options: checkboxOptions,
+  optionsVariant: 'checkbox',
+  selectedKeys: ['1', '4']
+};
+const _RadioMenu = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.selectedKeys || []);
+  React.useEffect(() => {
+    setSelectedKeys(args.selectedKeys || []);
+  }, [args.selectedKeys]);
+  const selectKeys = option => {
+    setSelectedKeys([option.key]);
+  };
+  return /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+    selectedKeys: selectedKeys,
+    onSelect: selectKeys
+  }));
+};
+exports._RadioMenu = _RadioMenu;
+_RadioMenu.args = {
+  isFluid: false,
+  menuDisabled: false,
+  classNames: {
+    option: _MenuStoriesModule.default.optionText
+  },
+  size: 'medium',
+  options: textOptions,
+  optionsVariant: 'radio',
+  selectedKeys: ['1']
+};
+const MenuHeader = () => /*#__PURE__*/React.createElement("div", {
+  className: _MenuStoriesModule.default.headerComponent
+}, /*#__PURE__*/React.createElement(_Text.SubTitleSmall, null, "Menu Header"));
+exports.MenuHeader = MenuHeader;
+const MenuFooter = _ref3 => {
+  let {
+    onSave,
+    onCancel
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _MenuStoriesModule.default.footerComponent
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    size: "small",
+    type: "ghost",
+    onClick: onCancel
+  }, "Cancel"), /*#__PURE__*/React.createElement(_Button.Button, {
+    size: "small",
+    type: "secondary",
+    onClick: onSave
+  }, "Save"));
+};
+exports.MenuFooter = MenuFooter;
+const _WithHeader = args => /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+  header: /*#__PURE__*/React.createElement(MenuHeader, null)
+}));
+exports._WithHeader = _WithHeader;
+_WithHeader.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'small',
+  options: textOptions,
+  selectedKeys: ['2']
+};
+const _WithFooter = args => /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+  footer: /*#__PURE__*/React.createElement(MenuFooter, null)
+}));
+exports._WithFooter = _WithFooter;
+_WithFooter.args = {
+  isFluid: false,
+  menuDisabled: false,
+  size: 'small',
+  options: textOptions,
+  selectedKeys: ['2']
+};
+const _WithHeaderAndFooter = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.selectedKeys || []);
+  React.useEffect(() => {
+    setSelectedKeys(args.selectedKeys || []);
+  }, [args.selectedKeys]);
+  const selectKeys = option => {
+    if (selectedKeys.includes(option.key)) {
+      setSelectedKeys(selectedKeys.filter(item => item !== option.key));
+    } else {
+      setSelectedKeys([...selectedKeys, option.key]);
+    }
+  };
+  return /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, args, {
+    selectedKeys: selectedKeys,
+    onSelect: selectKeys,
+    header: /*#__PURE__*/React.createElement(MenuHeader, null),
+    footer: /*#__PURE__*/React.createElement(MenuFooter, null)
+  }));
+};
+exports._WithHeaderAndFooter = _WithHeaderAndFooter;
+_WithHeaderAndFooter.args = {
+  isFluid: false,
+  menuDisabled: false,
+  classNames: {
+    option: _MenuStoriesModule.default.optionText
+  },
+  options: textOptions,
+  optionsVariant: 'checkbox',
+  selectedKeys: ['1', '4']
+};