@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

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

@@ -1,1048 +0,0 @@
-"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']
-};