@dhis2-ui/select 9.11.0 → 9.11.1-beta.2

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

@@ -1,618 +0,0 @@
-"use strict";
-
-var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _button = require("@dhis2-ui/button");
-
-var _modal = require("@dhis2-ui/modal");
-
-var _react = require("@storybook/react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = _interopRequireWildcard(require("react"));
-
-var _index = require("../index.js");
-
-var _multiSelect = require("./multi-select.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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__*/_react2.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'
-}];
-(0, _react.storiesOf)('MultiSelect', module).add('With options', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With options and onChange', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  onChange: window.onChange
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  onFocus: window.onFocus
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With onBlur', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  onBlur: window.onBlur
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With custom options and onChange', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  onChange: window.onChange
-}, /*#__PURE__*/_react2.default.createElement(CustomMultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(CustomMultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(CustomMultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With invalid options', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement("div", null, "invalid one"), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement("div", null, "invalid two"), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement("div", null, "invalid three"), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), null, undefined, false)).add('With invalid filterable options', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  filterable: true,
-  className: "select",
-  noMatchText: "No match"
-}, /*#__PURE__*/_react2.default.createElement("div", null, "invalid one"), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement("div", null, "invalid two"), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement("div", null, "invalid three"), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With initialFocus', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  initialFocus: true
-})).add('Empty', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-})).add('Empty with empty text', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  empty: "Custom empty text"
-})).add('Empty with empty component', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  empty: /*#__PURE__*/_react2.default.createElement("div", {
-    className: "custom-empty"
-  }, "Custom empty component")
-})).add('With options and loading', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  loading: true
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With options, loading and loading text', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  loadingText: "Loading options",
-  loading: true
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With more than ten options', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "4",
-  label: "option four"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "5",
-  label: "option five"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "6",
-  label: "option six"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "7",
-  label: "option seven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "8",
-  label: "option eight"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "9",
-  label: "option nine"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "10",
-  label: "option ten"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "11",
-  label: "option eleven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "12",
-  label: "option twelve"
-}))).add('With more than three options and a 100px max-height', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  maxHeight: "100px"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "4",
-  label: "option four"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "5",
-  label: "option five"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "6",
-  label: "option six"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "7",
-  label: "option seven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "8",
-  label: "option eight"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "9",
-  label: "option nine"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "10",
-  label: "option ten"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "11",
-  label: "option eleven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "12",
-  label: "option twelve"
-}))).add('With options, a selection and disabled', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  disabled: true,
-  className: "select",
-  selected: ['1']
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With options and disabled', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  disabled: true,
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With prefix', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  prefix: "Prefix text"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With prefix and selection', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  prefix: "Prefix text",
-  selected: ['1']
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With placeholder', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  placeholder: "Placeholder text"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With placeholder and selection', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  selected: ['1'],
-  placeholder: "Placeholder text"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With disabled option and onChange', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  onChange: window.onChange
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "4",
-  label: "disabled option",
-  disabled: true
-}))).add('With options and a selection', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  selected: ['1']
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With options, a selection and onChange', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  selected: ['1'],
-  onChange: window.onChange
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With options and multiple selections', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  selected: ['1', '2']
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With clear button, selection and onChange', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  clearable: true,
-  clearText: "Clear",
-  className: "select",
-  selected: ['1'],
-  onChange: window.onChange
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With filter field', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  filterable: true,
-  noMatchText: "No match found",
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('Default position', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "4",
-  label: "option four"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "5",
-  label: "option five"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "6",
-  label: "option six"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "7",
-  label: "option seven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "8",
-  label: "option eight"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "9",
-  label: "option nine"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "10",
-  label: "option ten"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "11",
-  label: "option eleven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "12",
-  label: "option twelve"
-})), /*#__PURE__*/_react2.default.createElement(_style.default, {
-  id: "2721172199"
-}, ["#root{height:2000px !important;}"]))).add('Flipped position', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "4",
-  label: "option four"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "5",
-  label: "option five"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "6",
-  label: "option six"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "7",
-  label: "option seven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "8",
-  label: "option eight"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "9",
-  label: "option nine"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "10",
-  label: "option ten"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "11",
-  label: "option eleven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "12",
-  label: "option twelve"
-})), /*#__PURE__*/_react2.default.createElement(_style.default, {
-  id: "3289429748"
-}, ["html,body,#root{position:relative;height:500px;max-height:500px;}", "#root{padding-top:400px !important;}"]))).add('Shifted into view', () => /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select"
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "4",
-  label: "option four"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "5",
-  label: "option five"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "6",
-  label: "option six"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "7",
-  label: "option seven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "8",
-  label: "option eight"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "9",
-  label: "option nine"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "10",
-  label: "option ten"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "11",
-  label: "option eleven"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "12",
-  label: "option twelve"
-})), /*#__PURE__*/_react2.default.createElement(_style.default, {
-  id: "4250794773"
-}, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]))).add('With duplicate selected option values', () => /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-  className: "select",
-  selected: ['1']
-}, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "1",
-  label: "option one a"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "2",
-  label: "option two"
-}), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-  value: "3",
-  label: "option three"
-}))).add('With options that can be added to the input', () => {
-  const [values, setValues] = _react2.default.useState([]);
-
-  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-    className: "select",
-    selected: values,
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
-      window.onChange && window.onChange({
-        selected
-      });
-      setValues(selected);
-    }
-  }, /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-    value: "1",
-    label: "option one"
-  }), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-    value: "2",
-    label: "option two"
-  }), /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-    value: "3",
-    label: "option three"
-  })), /*#__PURE__*/_react2.default.createElement(_style.default, {
-    id: "1880313934"
-  }, ["#root{height:2000px !important;}"]));
-}).add('Menu width changing', () => {
-  const [toggle, setToggle] = (0, _react2.useState)(false);
-  return /*#__PURE__*/_react2.default.createElement("div", {
-    className: "App"
-  }, /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
-    dataTest: 'myModal'
-  }, /*#__PURE__*/_react2.default.createElement(_modal.ModalTitle, null, "Modal"), /*#__PURE__*/_react2.default.createElement(_modal.ModalContent, null, /*#__PURE__*/_react2.default.createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, toggle && /*#__PURE__*/_react2.default.createElement("div", {
-    style: {
-      padding: '30px',
-      border: '1px solid green'
-    },
-    className: "toggler"
-  }, "Stuff"), /*#__PURE__*/_react2.default.createElement("div", {
-    style: {
-      flexGrow: 1
-    }
-  }, /*#__PURE__*/_react2.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__*/_react2.default.createElement(_index.MultiSelectOption, {
-      key: id,
-      value: id,
-      label: name
-    });
-  }))), toggle && /*#__PURE__*/_react2.default.createElement("div", {
-    style: {
-      padding: '30px',
-      border: '1px solid green'
-    },
-    className: "toggler"
-  }, "Stuff")), /*#__PURE__*/_react2.default.createElement(_button.Button, {
-    onClick: () => setToggle(!toggle)
-  }, "Toggle"))));
-});