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

package/lib/components/Menu/Menu.stories.tsx

@@ -1,1046 +0,0 @@
-import * as React from 'react';
-import {difference, union} from 'lodash';
-
-import {getFilteredOptionsFromSearchText} from '../../utils/menu';
-import {Avatar} from '../Avatar';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
-import {SearchInput} from '../SearchInput';
-import {
-  ButtonTextMedium,
-  ButtonTextSmallUnderline,
-  FormLabelMedium,
-  FormLabelSmall,
-  SubTitleSmall,
-} from '../Text';
-import {Tooltip} from '../Tooltip';
-import {Truncate} from '../Truncate';
-
-import type {MenuGroupTitleOption, MenuOption, MenuProps} from './Menu';
-import {Menu} from './Menu';
-
-import css from './Menu.stories.module.css';
-
-
-const textOptions: MenuOption[] = [
-  {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: MenuOption[] = [
-  {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: MenuOption[] = [
-  {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: MenuOption[] = [
-  {
-    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: MenuOption[] = [
-  {
-    key: '1',
-    label: 'Edit',
-    iconLeft: 'pen',
-  },
-  {
-    key: '2',
-    label: 'Delete',
-    iconLeft: 'trash',
-    classNames: {wrapper: css.dangerText},
-  },
-];
-
-const iconRightOptions: MenuOption[] = [
-  {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: MenuOption[] = [
-  {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',
-  },
-];
-
-export 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',
-    },
-  },
-};
-
-export const _TextOnly = (args: MenuProps) => <Menu {...args} />;
-
-_TextOnly.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-  selectedKeys: ['2'],
-};
-export const _TextWithTooltip = (args: MenuProps) => (<Menu {...args} />);
-
-_TextWithTooltip.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-  selectedKeys: ['2'],
-  showLabelTooltip: {maxLines: 2},
-};
-
-export const _MenuWithWrap = (args: MenuProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.selectedKeys || [],
-  );
-  const selectKeys = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-  };
-
-  return <Menu {...args} selectedKeys={selectedKeys} onSelect={selectKeys} />;
-};
-
-_MenuWithWrap.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-  selectedKeys: ['2'],
-  allowWrap: true,
-};
-
-export const _WithSearch = (args: MenuProps) => <Menu {...args} />;
-
-_WithSearch.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-  allowSearch: true,
-};
-
-export const _TextAndIconLeft = (args: MenuProps) => (<Menu {...args} />);
-
-_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;
- * }
- * ```
- */
-export const _ColoredOption = (args: MenuProps) => (<Menu {...args} />);
-
-_ColoredOption.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: coloredOptions,
-};
-
-export const _TextAndIconRight = (args: MenuProps) => (<Menu {...args} />);
-
-_TextAndIconRight.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: iconRightOptions,
-  selectedKeys: ['2'],
-};
-
-export const _TextAndDualIcon = (args: MenuProps) => (<Menu {...args} />);
-
-_TextAndDualIcon.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: iconLeftRightOptions,
-  selectedKeys: ['2'],
-};
-
-export const _DualText = (args: MenuProps) => <Menu {...args} />;
-
-_DualText.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptionsWithSecondaryLabel,
-  selectedKeys: ['2'],
-};
-
-export const _WithResolvers = (args: MenuProps) => {
-  const resolveLabel = (option: MenuOption) => (
-    <div className={css.customComponent}>
-      {parseInt(option.key) < 6 ? (
-        <Avatar
-          imageSrc={`https://cdn.sensehq.com/genesis/hashed/static/images/personas/${option.key}.png`}
-        />
-      ) : (
-        <Avatar iconName="user" />
-      )}
-
-      <ButtonTextMedium className={css.text} color="secondary">
-        <Truncate>{option.label}</Truncate>
-      </ButtonTextMedium>
-    </div>
-  );
-
-  return <Menu {...args} resolveLabel={resolveLabel} />;
-};
-
-_WithResolvers.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-};
-
-const composeMenuOptions: Array<Array<MenuOption>> = [
-  [
-    {
-      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',
-    },
-  ],
-];
-
-export const _ComposeMenu = (args: MenuProps) => <Menu {...args} />;
-
-_ComposeMenu.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  composeOptions: composeMenuOptions,
-  selectedKeys: ['2'],
-};
-
-const customComponentMenuOptions: Array<MenuOption> = [
-  {
-    key: '1',
-    customComponent: (
-      <div className={css.customComponent}>
-        <Avatar
-          color="blue"
-          imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/1.png"
-          iconName="face-party"
-          iconType="regular"
-          size="medium"
-        />
-        <ButtonTextMedium className={css.text}>Angelina White</ButtonTextMedium>
-      </div>
-    ),
-  },
-  {
-    key: '2',
-    customComponent: (
-      <div className={css.customComponent}>
-        <Avatar
-          imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/4.png"
-          color="green"
-          size="medium"
-          text="John"
-        />
-        <ButtonTextMedium className={css.text}>John Smith</ButtonTextMedium>
-      </div>
-    ),
-  },
-  {
-    key: '3',
-
-    customComponent: (
-      <div className={css.customComponent}>
-        <Avatar
-          imageSrc="https://cdn.sensehq.com/genesis/hashed/static/images/personas/6.png"
-          color="orange"
-          size="medium"
-          text="Jacobs Marley"
-        />
-        <ButtonTextMedium className={css.text}>Sarah Parker</ButtonTextMedium>
-      </div>
-    ),
-  },
-];
-
-export const _CustomComponentMenu = (args: MenuProps) => (<Menu {...args} />);
-
-_CustomComponentMenu.args = {
-  isFluid: false,
-  menuDisabled: false,
-  classNames: {option: css.optionText},
-  size: 'medium',
-  options: customComponentMenuOptions,
-  selectedKeys: ['2'],
-};
-
-const groupTitleComponentMenuOptions: Array<MenuGroupTitleOption> = [
-  {
-    groupTitle: (
-      <div className={css.titleWrapper}>
-        <FormLabelSmall color="tertiary">Fast Food</FormLabelSmall>
-        <div className={css.infoContainer}>
-          <Tooltip title="Hello!" elevation="menu">
-            <Icon name="circle-info" size="small" color="tertiary" />
-          </Tooltip>
-        </div>
-      </div>
-    ),
-    options: [
-      {
-        key: '1',
-        iconLeft: 'burger',
-        label: 'Burger',
-      },
-      {
-        key: '2',
-        iconLeft: 'pizza',
-        label: 'Pizza',
-      },
-      {
-        key: '3',
-        iconLeft: 'french-fries',
-        label: 'Fries',
-      },
-    ],
-  },
-  {
-    showLineDivider: true,
-    groupTitle: (
-      <div className={css.titleWrapper}>
-        <FormLabelSmall color="tertiary">Fruits</FormLabelSmall>
-        <div className={css.infoContainer}>
-          <Tooltip title="Hello!" elevation="menu">
-            <Icon name="circle-info" size="small" color="tertiary" />
-          </Tooltip>
-        </div>
-      </div>
-    ),
-    options: [
-      {
-        key: '7',
-        iconLeft: 'banana',
-        label: 'Banana',
-      },
-      {
-        key: '8',
-        iconLeft: 'pear',
-        label: 'Pear',
-      },
-      {
-        key: '9',
-        iconLeft: 'lemon',
-        label: 'Lemon',
-      },
-    ],
-  },
-];
-
-export const _GroupTitleMenu = (args: MenuProps) => (<Menu {...args} classNames={{groupTitle: css.gpTitle}} />);
-
-_GroupTitleMenu.args = {
-  isFluid: false,
-  menuDisabled: false,
-  classNames: {option: css.optionText},
-  size: 'medium',
-  groupTitleOptions: groupTitleComponentMenuOptions,
-  selectedKeys: ['2'],
-};
-
-const GroupTitleActionMenu = (args: MenuProps) => {
-  const [searchText, setSearchText] = React.useState<string>('');
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.selectedKeys || [],
-  );
-  const optionsFiltered = getFilteredOptionsFromSearchText(
-    textOptions,
-    searchText,
-  );
-  const optionsFilteredKeys = optionsFiltered
-    .filter(({disabled}) => !disabled)
-    .map(({key}) => key);
-
-  React.useEffect(() => {
-    setSelectedKeys(args.selectedKeys || []);
-  }, [args.selectedKeys]);
-
-  const selectKeys = (option: MenuOption) => {
-    if (selectedKeys.includes(option.key)) {
-      setSelectedKeys(difference(selectedKeys, [option.key]));
-    } else {
-      setSelectedKeys(union(selectedKeys, [option.key]));
-    }
-  };
-
-  const selectAllKeys = () => {
-    setSelectedKeys(union(selectedKeys, optionsFilteredKeys));
-  };
-
-  const clearSelectedKeys = () => {
-    setSelectedKeys(difference(selectedKeys, optionsFilteredKeys));
-  };
-
-  return (
-    <Menu
-      {...args}
-      optionsVariant="checkbox"
-      selectedKeys={selectedKeys}
-      onSelect={selectKeys}
-      classNames={{
-        header: css.groupTitleActionHeader,
-        groupTitle: css.groupTitle,
-      }}
-      header={
-        <SearchInput
-          value={searchText}
-          onChange={(e) => setSearchText(e.target.value)}
-          onClear={() => setSearchText('')}
-          size={args.size}
-        />
-      }
-      groupTitleOptions={[
-        {
-          groupTitle: (
-            <>
-              <FormLabelMedium color="tertiary">
-                {`Values (${optionsFiltered.length})`}
-              </FormLabelMedium>
-              <div className={css.groupTitleActions}>
-                <ButtonTextSmallUnderline
-                  className={css.groupTitleAction}
-// @ts-ignore - TS2769 - No overload matches this call.
-                  onClick={clearSelectedKeys}
-                >
-                  Clear
-                </ButtonTextSmallUnderline>
-                <ButtonTextSmallUnderline
-                  color="clickable"
-                  className={css.groupTitleAction}
-// @ts-ignore - TS2769 - No overload matches this call.
-                  onClick={selectAllKeys}
-                >
-                  Select All
-                </ButtonTextSmallUnderline>
-              </div>
-            </>
-          ),
-          options: optionsFiltered,
-        },
-      ]}
-    />
-  );
-};
-
-export const _GroupTitleActionMenu = (args: MenuProps) => (<GroupTitleActionMenu {...args} />);
-
-_GroupTitleActionMenu.args = {
-  isFluid: false,
-  menuDisabled: false,
-  classNames: {option: css.optionText},
-  size: 'medium',
-  selectedKeys: ['2'],
-};
-
-export const _CheckboxMenu = (args: MenuProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.selectedKeys || []);
-  }, [args.selectedKeys]);
-
-  const selectKeys = (option: MenuOption) => {
-    if (selectedKeys.includes(option.key)) {
-      setSelectedKeys(selectedKeys.filter((item) => item !== option.key));
-    } else {
-      setSelectedKeys([...selectedKeys, option.key]);
-    }
-  };
-
-  return <Menu {...args} selectedKeys={selectedKeys} onSelect={selectKeys} />;
-};
-
-_CheckboxMenu.args = {
-  isFluid: false,
-  menuDisabled: false,
-  classNames: {option: css.optionText},
-  size: 'medium',
-  options: checkboxOptions,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['1', '4'],
-};
-
-export const _RadioMenu = (args: MenuProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.selectedKeys || []);
-  }, [args.selectedKeys]);
-
-  const selectKeys = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-  };
-
-  return <Menu {...args} selectedKeys={selectedKeys} onSelect={selectKeys} />;
-};
-
-_RadioMenu.args = {
-  isFluid: false,
-  menuDisabled: false,
-  classNames: {option: css.optionText},
-  size: 'medium',
-  options: textOptions,
-  optionsVariant: 'radio',
-  selectedKeys: ['1'],
-};
-
-export const MenuHeader = () => (<div className={css.headerComponent}>
-  <SubTitleSmall>Menu Header</SubTitleSmall>
-</div>);
-
-export const MenuFooter = (
-  {
-    onSave,
-    onCancel,
-  }: {
-    onSave?: () => void;
-    onCancel?: () => void;
-  },
-) => (<div className={css.footerComponent}>
-  <Button size="small" type="ghost" onClick={onCancel}>
-    Cancel
-  </Button>
-  <Button size="small" type="secondary" onClick={onSave}>
-    Save
-  </Button>
-</div>);
-
-export const _WithHeader = (args: MenuProps) => (<Menu {...args} header={<MenuHeader />} />);
-
-_WithHeader.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'small',
-  options: textOptions,
-  selectedKeys: ['2'],
-};
-
-export const _WithFooter = (args: MenuProps) => (<Menu {...args} footer={<MenuFooter />} />);
-
-_WithFooter.args = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'small',
-  options: textOptions,
-  selectedKeys: ['2'],
-};
-
-export const _WithHeaderAndFooter = (args: MenuProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.selectedKeys || []);
-  }, [args.selectedKeys]);
-
-  const selectKeys = (option: MenuOption) => {
-    if (selectedKeys.includes(option.key)) {
-      setSelectedKeys(selectedKeys.filter((item) => item !== option.key));
-    } else {
-      setSelectedKeys([...selectedKeys, option.key]);
-    }
-  };
-
-  return (
-    <Menu
-      {...args}
-      selectedKeys={selectedKeys}
-      onSelect={selectKeys}
-      header={<MenuHeader />}
-      footer={<MenuFooter />}
-    />
-  );
-};
-
-_WithHeaderAndFooter.args = {
-  isFluid: false,
-  menuDisabled: false,
-  classNames: {option: css.optionText},
-  options: textOptions,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['1', '4'],
-};