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

package/lib/components/Dropdown/Dropdown.stories.js

@@ -0,0 +1,729 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithSimpleMenuTooltip = exports._WithSimpleMenu = exports._WithSearch = exports._WithRadioMenu = exports._WithHeaderAndFooter = exports._WithGroupTitleMenu = exports._WithComposeMenu = exports._WithCheckboxMenu = exports.WithHeaderAndFooter = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _menu = require("../../utils/menu");
+var _Button = require("../Button");
+var _Icon = require("../Icon");
+var _Menu = require("../Menu/Menu.stories");
+var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
+var _Dropdown = require("./Dropdown");
+var _DropdownStoriesModule = _interopRequireDefault(require("./Dropdown.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 options = [{
+  key: '1',
+  label: 'Option one',
+  iconLeft: 'coffee'
+}, {
+  key: '2',
+  label: 'Option two',
+  iconLeft: 'user'
+}, {
+  key: '4',
+  label: 'Option three is a very long option that would truncate and keep going to make it even longer than before. You can hover over the label to see the full text. ShowLabelTooltip maxLines is used to define the number of lines to show in the tooltip.',
+  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'
+}, {
+  key: '7',
+  label: 'Option seven',
+  iconLeft: 'coffee'
+}, {
+  key: '8',
+  label: 'Option eight',
+  iconLeft: 'user'
+}, {
+  key: '9',
+  label: 'Option nine',
+  iconLeft: 'face-party'
+}];
+const elevationOptions = [...Object.values(_Tooltip.ELEVATION_TYPES)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Form Components/Dropdown/Generic Dropdown',
+  component: _Dropdown.Dropdown,
+  argTypes: {
+    size: {
+      description: 'Dropdown supports only two size variants namely small and medium. `small` < `medium`',
+      options: ['medium', 'small'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    menu: {
+      description: 'Menu props to use',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'MenuProps'
+        }
+      }
+    },
+    name: {
+      description: 'Name of the Dropdown',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    elevation: {
+      description: 'Elevation level for the dropdown menu. This controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
+      control: {
+        type: 'select'
+      },
+      options: elevationOptions,
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'modal'
+        }
+      }
+    },
+    disabled: {
+      description: 'if **true**, the component is disabled',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    placeholder: {
+      description: 'Placeholder of dropdown. This appears inside the input box',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    locked: {
+      description: 'if **true**, the component is locked, Locked state is the readonly state of the dropdown',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    error: {
+      description: 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    errorText: {
+      description: 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    label: {
+      description: 'Primary label of the dropdown. This appears on top of dropdown input',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    helperText: {
+      description: 'Secondary label of the dropdown. This appears on bottom of dropdown input, if the dropdown is in `error` state the priority is given to `errorText`, in such cases secondary label wont be displayed',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    dropdownInputText: {
+      description: 'Text that appears inside the top input. Since Dropdown is a controlled component, this has to be set by caller',
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{wrapper?: string, box?: string}'
+        }
+      }
+    },
+    required: {
+      description: 'if **true**, a red star would be added to the label',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    onChange: {
+      description: '**onChange** handler is triggered when there is a selection of an option from dropdown',
+      action: 'changed',
+      table: {
+        type: {
+          summary: '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    onMenuOpen: {
+      description: '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    onMenuClose: {
+      description: '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    onFocus: {
+      description: '**onFocus** handler is triggered when dropdown is focussed',
+      action: 'focussed',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    onBlur: {
+      description: '**onBlur** handler is triggered when dropdown is blurred',
+      action: 'blurred',
+      table: {
+        type: {
+          summary: '(e: SyntheticInputEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    clickAwayRef: {
+      type: {
+        optional: true
+      },
+      description: 'ref that contains the functions to open or close the child',
+      table: {
+        type: {
+          summary: 'ClickAwayRefType'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Dropdown component',
+      description: {
+        component: `
+\`\`\`js
+import { Dropdown } from "@spaced-out/ui-design-system/lib/components/Dropdown";
+\`\`\`
+**Dropdown** is implemented as a combination of **<a href="../?path=/docs/form-components-input--docs">Input</a>** and **<a href="../?path=/docs/components-menu--docs">Menu</a>**
+components. It internally uses **Floating UI** to
+position itself in context of DOM. Supports a bunch of callbacks listed below.
+This is a controlled component. You would need to pass and set \`selectedKeys\` and \`dropdownInputText\`  by handling \`onChange\` in order to set/reset the selection state
+of menu item and input value respectively.
+
+- Supports passing a \`clickAwayRef\` prop to the component.
+- You can always force Open the instance from ref by using \`clickAwayRef.current?.forceOpen()\`. This might be useful when want to force Open as per you needs.
+- You can always force Close the instance from ref by using \`clickAwayRef.current?.forceClose()\`. This might be useful when want to force Close as per you needs.
+
+**Note: ** For **checkbox** type option set you can make use of \`getSelectedKeysFromSelectedOption\` and \`getTextLabelFromSelectedKeys\` from \`utils/menu\`
+to populate \`selectedKeys\` and \`dropdownInputText\` respectively.
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Dropdown/Dropdown.jsx'
+    }
+  }
+};
+const menuProps = {
+  options
+};
+const _WithSimpleMenu = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const handleChange = option => {
+    setSelectedKeys([option.key]);
+    setDropdownText(option.label);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithSimpleMenu = _WithSimpleMenu;
+_WithSimpleMenu.args = {
+  label: 'Form Label',
+  menu: menuProps
+};
+const _WithSimpleMenuTooltip = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const handleChange = option => {
+    setSelectedKeys([option.key]);
+    setDropdownText(option.label);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithSimpleMenuTooltip = _WithSimpleMenuTooltip;
+_WithSimpleMenuTooltip.args = {
+  label: 'Form Label',
+  menu: {
+    ...menuProps,
+    showLabelTooltip: {
+      maxLines: 6
+    }
+  }
+};
+const _WithSearch = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const handleChange = option => {
+    setSelectedKeys([option.key]);
+    setDropdownText(option.label);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithSearch = _WithSearch;
+_WithSearch.args = {
+  label: 'Form Label',
+  menu: {
+    ...menuProps,
+    allowSearch: true
+  }
+};
+const checkboxMenuProps = {
+  options,
+  optionsVariant: 'checkbox',
+  selectedKeys: ['4']
+};
+const _WithCheckboxMenu = args => {
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  React.useEffect(() => {
+    setSelectedKeys(args.menu?.selectedKeys || []);
+    const newDropdownText = (0, _menu.getTextLabelFromSelectedKeys)(args.menu?.selectedKeys, args.menu?.options);
+    setDropdownText(newDropdownText);
+  }, [args.menu?.selectedKeys]);
+  const handleChange = option => {
+    const newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(option, selectedKeys);
+    const newDropdownText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, args.menu?.options);
+    setSelectedKeys(newSelectedKeys);
+    setDropdownText(newDropdownText);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithCheckboxMenu = _WithCheckboxMenu;
+_WithCheckboxMenu.args = {
+  label: 'Form Label',
+  menu: checkboxMenuProps
+};
+const radioMenuProps = {
+  options,
+  optionsVariant: 'radio',
+  selectedKeys: ['2']
+};
+const _WithRadioMenu = args => {
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  React.useEffect(() => {
+    setSelectedKeys(args.menu?.selectedKeys || []);
+  }, [args.menu?.selectedKeys]);
+  const handleChange = option => {
+    setSelectedKeys([option.key]);
+    setDropdownText(option.label);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithRadioMenu = _WithRadioMenu;
+_WithRadioMenu.args = {
+  label: 'Form Label',
+  menu: radioMenuProps
+};
+const composeOptions = [[{
+  key: '1',
+  label: 'Option one',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '2',
+  label: 'Option two',
+  secondaryLabel: 'Sub Text'
+}, {
+  key: '3',
+  label: 'Option three',
+  secondaryLabel: 'Sub Text'
+}], [{
+  iconLeft: 'coffee',
+  key: '4',
+  label: 'Option one'
+}], [{
+  iconLeft: 'coffee',
+  key: '5',
+  label: 'Option one'
+}]];
+const composeMenuProps = {
+  composeOptions
+};
+const _WithComposeMenu = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const handleChange = option => {
+    setSelectedKeys([option.key]);
+    setDropdownText(option.label);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithComposeMenu = _WithComposeMenu;
+_WithComposeMenu.args = {
+  label: 'Form Label',
+  menu: composeMenuProps
+};
+const groupTitleOptions = [{
+  groupTitle: /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.titleWrapper
+  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: "tertiary"
+  }, "Fast Food"), /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.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'
+  }]
+}, {
+  groupTitle: /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.titleWrapper
+  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: "tertiary"
+  }, "Fruits"), /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.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 groupTitleMenuProps = {
+  groupTitleOptions
+};
+const _WithGroupTitleMenu = args => {
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const handleChange = option => {
+    setSelectedKeys([option.key]);
+    setDropdownText(option.label);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports._WithGroupTitleMenu = _WithGroupTitleMenu;
+_WithGroupTitleMenu.args = {
+  label: 'Form Label',
+  menu: {
+    ...groupTitleMenuProps
+  }
+};
+const _WithHeaderAndFooter = args => /*#__PURE__*/React.createElement(WithHeaderAndFooter, args);
+exports._WithHeaderAndFooter = _WithHeaderAndFooter;
+const WithHeaderAndFooter = args => {
+  const clickAwayRef = React.useRef(null);
+  const [dropDownText, setDropdownText] = React.useState(args.dropdownInputText);
+  const [selectedKeys, setSelectedKeys] = React.useState(args.menu?.selectedKeys || []);
+  React.useEffect(() => {
+    setSelectedKeys(args.menu?.selectedKeys || []);
+    const newDropdownText = (0, _menu.getTextLabelFromSelectedKeys)(args.menu?.selectedKeys, args.menu?.options);
+    setDropdownText(newDropdownText);
+  }, [args.menu?.selectedKeys]);
+  const handleChange = option => {
+    const newSelectedKeys = (0, _menu.getSelectedKeysFromSelectedOption)(option, selectedKeys);
+    const newDropdownText = (0, _menu.getTextLabelFromSelectedKeys)(newSelectedKeys, args.menu?.options);
+    setSelectedKeys(newSelectedKeys);
+    setDropdownText(newDropdownText);
+  };
+  const onClear = () => {
+    setSelectedKeys([]);
+    setDropdownText('');
+  };
+  const onSave = () => {
+    if (clickAwayRef.current) {
+      // @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
+      clickAwayRef.current.forceClose();
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.dropdownWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _DropdownStoriesModule.default.content
+  }, /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, args, {
+    dropdownInputText: dropDownText,
+    menu: {
+      ...args.menu,
+      selectedKeys,
+      header: /*#__PURE__*/React.createElement(_Menu.MenuHeader, null),
+      footer: /*#__PURE__*/React.createElement(_Menu.MenuFooter, {
+        onSave: onSave
+      })
+    }
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onChange: handleChange,
+    clickAwayRef: clickAwayRef
+  })), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: onClear
+  }, "Clear")));
+};
+exports.WithHeaderAndFooter = WithHeaderAndFooter;
+const menuPropsWithHeaderAndFooter = {
+  options,
+  optionsVariant: 'checkbox'
+};
+_WithHeaderAndFooter.args = {
+  label: 'Form Label',
+  menu: menuPropsWithHeaderAndFooter
+};