@dhis2-ui/select 9.10.3 → 9.11.1-beta.1

package/build/cjs/multi-select/multi-select.e2e.stories.js

@@ -0,0 +1,675 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsThatCanBeAddedToTheInput = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndOnChange = exports.WithOptionsASelectionAndDisabled = exports.WithOptions = exports.WithOnFocus = exports.WithOnBlur = exports.WithMoreThanThreeOptionsAndA100pxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDuplicateSelectedOptionValues = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.MenuWidthChanging = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DefaultPosition = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _button = require("@dhis2-ui/button");
+var _modal = require("@dhis2-ui/modal");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = require("../index.js");
+var _multiSelect = require("./multi-select.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onChange = window.Cypress && window.Cypress.cy.stub();
+window.onFocus = window.Cypress && window.Cypress.cy.stub();
+window.onBlur = window.Cypress && window.Cypress.cy.stub();
+const CustomMultiSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
+CustomMultiSelectOption.propTypes = {
+  label: _propTypes.default.string,
+  onClick: _propTypes.default.func
+};
+const options = [{
+  name: 'Hello',
+  id: '1'
+}, {
+  name: 'world',
+  id: '2'
+}, {
+  name: 'foo',
+  id: '3'
+}, {
+  name: 'bar',
+  id: '4'
+}];
+var _default = exports.default = {
+  title: 'MultiSelect'
+};
+const WithOptions = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptions = WithOptions;
+const WithOptionsAndOnChange = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  onChange: window.onChange
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsAndOnChange = WithOptionsAndOnChange;
+const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  onFocus: window.onFocus
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOnFocus = WithOnFocus;
+const WithOnBlur = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  onBlur: window.onBlur
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOnBlur = WithOnBlur;
+const WithCustomOptionsAndOnChange = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  onChange: window.onChange
+}, /*#__PURE__*/_react.default.createElement(CustomMultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(CustomMultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(CustomMultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithCustomOptionsAndOnChange = WithCustomOptionsAndOnChange;
+const WithInvalidOptions = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement("div", null, "invalid one"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement("div", null, "invalid two"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement("div", null, "invalid three"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), null, undefined, false);
+exports.WithInvalidOptions = WithInvalidOptions;
+const WithInvalidFilterableOptions = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  filterable: true,
+  className: "select",
+  noMatchText: "No match"
+}, /*#__PURE__*/_react.default.createElement("div", null, "invalid one"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement("div", null, "invalid two"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement("div", null, "invalid three"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithInvalidFilterableOptions = WithInvalidFilterableOptions;
+const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  initialFocus: true
+});
+exports.WithInitialFocus = WithInitialFocus;
+const Empty = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+});
+exports.Empty = Empty;
+const EmptyWithEmptyText = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  empty: "Custom empty text"
+});
+exports.EmptyWithEmptyText = EmptyWithEmptyText;
+const EmptyWithEmptyComponent = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  empty: /*#__PURE__*/_react.default.createElement("div", {
+    className: "custom-empty"
+  }, "Custom empty component")
+});
+exports.EmptyWithEmptyComponent = EmptyWithEmptyComponent;
+const WithOptionsAndLoading = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  loading: true
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsAndLoading = WithOptionsAndLoading;
+const WithOptionsLoadingAndLoadingText = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  loadingText: "Loading options",
+  loading: true
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsLoadingAndLoadingText = WithOptionsLoadingAndLoadingText;
+const WithMoreThanTenOptions = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "option four"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "5",
+  label: "option five"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "6",
+  label: "option six"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "7",
+  label: "option seven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "8",
+  label: "option eight"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "9",
+  label: "option nine"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "10",
+  label: "option ten"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "11",
+  label: "option eleven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "12",
+  label: "option twelve"
+}));
+exports.WithMoreThanTenOptions = WithMoreThanTenOptions;
+const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  maxHeight: "100px"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "option four"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "5",
+  label: "option five"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "6",
+  label: "option six"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "7",
+  label: "option seven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "8",
+  label: "option eight"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "9",
+  label: "option nine"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "10",
+  label: "option ten"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "11",
+  label: "option eleven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "12",
+  label: "option twelve"
+}));
+exports.WithMoreThanThreeOptionsAndA100pxMaxHeight = WithMoreThanThreeOptionsAndA100pxMaxHeight;
+const WithOptionsASelectionAndDisabled = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  disabled: true,
+  className: "select",
+  selected: ['1']
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsASelectionAndDisabled = WithOptionsASelectionAndDisabled;
+const WithOptionsAndDisabled = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  disabled: true,
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsAndDisabled = WithOptionsAndDisabled;
+const WithPrefix = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  prefix: "Prefix text"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithPrefix = WithPrefix;
+const WithPrefixAndSelection = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  prefix: "Prefix text",
+  selected: ['1']
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithPrefixAndSelection = WithPrefixAndSelection;
+const WithPlaceholder = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  placeholder: "Placeholder text"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithPlaceholder = WithPlaceholder;
+const WithPlaceholderAndSelection = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  selected: ['1'],
+  placeholder: "Placeholder text"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithPlaceholderAndSelection = WithPlaceholderAndSelection;
+const WithDisabledOptionAndOnChange = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  onChange: window.onChange
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "disabled option",
+  disabled: true
+}));
+exports.WithDisabledOptionAndOnChange = WithDisabledOptionAndOnChange;
+const WithOptionsAndASelection = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  selected: ['1']
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsAndASelection = WithOptionsAndASelection;
+const WithOptionsASelectionAndOnChange = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  selected: ['1'],
+  onChange: window.onChange
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsASelectionAndOnChange = WithOptionsASelectionAndOnChange;
+const WithOptionsAndMultipleSelections = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  selected: ['1', '2']
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithOptionsAndMultipleSelections = WithOptionsAndMultipleSelections;
+const WithClearButtonSelectionAndOnChange = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  clearable: true,
+  clearText: "Clear",
+  className: "select",
+  selected: ['1'],
+  onChange: window.onChange
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithClearButtonSelectionAndOnChange = WithClearButtonSelectionAndOnChange;
+const WithFilterField = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  filterable: true,
+  noMatchText: "No match found",
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithFilterField = WithFilterField;
+const DefaultPosition = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "option four"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "5",
+  label: "option five"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "6",
+  label: "option six"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "7",
+  label: "option seven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "8",
+  label: "option eight"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "9",
+  label: "option nine"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "10",
+  label: "option ten"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "11",
+  label: "option eleven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "12",
+  label: "option twelve"
+})), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2883393180"
+}, ["#storybook-root{height:2000px !important;}"]));
+exports.DefaultPosition = DefaultPosition;
+const FlippedPosition = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "option four"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "5",
+  label: "option five"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "6",
+  label: "option six"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "7",
+  label: "option seven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "8",
+  label: "option eight"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "9",
+  label: "option nine"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "10",
+  label: "option ten"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "11",
+  label: "option eleven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "12",
+  label: "option twelve"
+})), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "979451016"
+}, ["html,body,#storybook-root{position:relative;height:500px;max-height:500px;}", "#storybook-root{padding-top:400px !important;}"]));
+exports.FlippedPosition = FlippedPosition;
+const ShiftedIntoView = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select"
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "4",
+  label: "option four"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "5",
+  label: "option five"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "6",
+  label: "option six"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "7",
+  label: "option seven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "8",
+  label: "option eight"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "9",
+  label: "option nine"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "10",
+  label: "option ten"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "11",
+  label: "option eleven"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "12",
+  label: "option twelve"
+})), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "438540012"
+}, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+exports.ShiftedIntoView = ShiftedIntoView;
+const WithDuplicateSelectedOptionValues = () => /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+  className: "select",
+  selected: ['1']
+}, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "1",
+  label: "option one a"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "2",
+  label: "option two"
+}), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+  value: "3",
+  label: "option three"
+}));
+exports.WithDuplicateSelectedOptionValues = WithDuplicateSelectedOptionValues;
+const WithOptionsThatCanBeAddedToTheInput = () => {
+  const [values, setValues] = _react.default.useState([]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+    className: "select",
+    selected: values,
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      window.onChange && window.onChange({
+        selected
+      });
+      setValues(selected);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "3",
+    label: "option three"
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4252233386"
+  }, ["#storybook-root{height:2000px !important;}"]));
+};
+exports.WithOptionsThatCanBeAddedToTheInput = WithOptionsThatCanBeAddedToTheInput;
+const MenuWidthChanging = () => {
+  const [toggle, setToggle] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "App"
+  }, /*#__PURE__*/_react.default.createElement(_modal.Modal, {
+    dataTest: 'myModal'
+  }, /*#__PURE__*/_react.default.createElement(_modal.ModalTitle, null, "Modal"), /*#__PURE__*/_react.default.createElement(_modal.ModalContent, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, toggle && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '30px',
+      border: '1px solid green'
+    },
+    className: "toggler"
+  }, "Stuff"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flexGrow: 1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_multiSelect.MultiSelect, {
+    onChange: _ref3 => {
+      let {
+        selected
+      } = _ref3;
+      return console.log('size changed to ' + selected);
+    }
+  }, options.map(_ref4 => {
+    let {
+      name,
+      id
+    } = _ref4;
+    return /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+      key: id,
+      value: id,
+      label: name
+    });
+  }))), toggle && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '30px',
+      border: '1px solid green'
+    },
+    className: "toggler"
+  }, "Stuff")), /*#__PURE__*/_react.default.createElement(_button.Button, {
+    onClick: () => setToggle(!toggle)
+  }, "Toggle"))));
+};
+exports.MenuWidthChanging = MenuWidthChanging;