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

package/build/es/multi-select/input.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { SelectionList } from './selection-list.js';
-
 const Input = _ref => {
   let {
     selected,
@@ -22,7 +21,6 @@ const Input = _ref => {
     inputMaxHeight
   } = _ref;
   const hasSelection = selected.length > 0;
-
   const onClear = e => {
     const data = {
       selected: []
@@ -30,15 +28,14 @@ const Input = _ref => {
     e.stopPropagation();
     onChange(data, e);
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
-    dataTest: "".concat(dataTest, "-prefix")
+    dataTest: `${dataTest}-prefix`
   }), !hasSelection && !prefix && /*#__PURE__*/React.createElement(InputPlaceholder, {
     placeholder: placeholder,
-    dataTest: "".concat(dataTest, "-placeholder")
+    dataTest: `${dataTest}-placeholder`
   }), hasSelection && /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(SelectionList, {
@@ -51,16 +48,15 @@ const Input = _ref => {
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
-    dataTest: "".concat(dataTest, "-clear")
+    dataTest: `${dataTest}-clear`
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "64009541",
     dynamic: [colors.grey900]
-  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`.root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${colors.grey900};font-size:14px;line-height:16px;}`, ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
-  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
+  }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
 };
-
 Input.defaultProps = {
   inputMaxHeight: '100px'
 };

package/build/es/multi-select/menu.js

@@ -1,12 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Empty, filterIgnored, checkIfValidOption, removeOption, findOption } from '../select/index.js';
-
 const onDisabledClick = (_, e) => {
   e.stopPropagation();
   e.preventDefault();
 };
-
 const createHandler = _ref => {
   let {
     isActive,
@@ -15,24 +13,24 @@ const createHandler = _ref => {
     value
   } = _ref;
   return (_, e) => {
-    e.stopPropagation(); // If the option is currently selected remove it from the array of selected options
+    e.stopPropagation();
 
+    // If the option is currently selected remove it from the array of selected options
     if (isActive) {
       const filtered = removeOption(value, selected);
       const data = {
         selected: filtered
       };
       return onChange(data, e);
-    } // Otherwise, add it to selected
-
+    }
 
+    // Otherwise, add it to selected
     const data = {
       selected: selected.concat([value])
     };
     return onChange(data, e);
   };
 };
-
 const Menu = _ref2 => {
   let {
     options,
@@ -42,35 +40,35 @@ const Menu = _ref2 => {
     dataTest
   } = _ref2;
   const renderedOptions = filterIgnored(options);
-
   if (React.Children.count(renderedOptions) === 0) {
     // If it's a string, supply it to our <Empty> component so it looks better
     if (typeof empty === 'string') {
       return /*#__PURE__*/React.createElement(Empty, {
         message: empty,
-        dataTest: "".concat(dataTest, "-empty")
+        dataTest: `${dataTest}-empty`
       });
-    } // Otherwise just render the supplied markup
-
+    }
 
+    // Otherwise just render the supplied markup
     return empty;
   }
-
   const children = React.Children.map(options, child => {
-    const isValidOption = checkIfValidOption(child); // Return early if the child isn't an option, to prevent attaching handlers etc.
+    const isValidOption = checkIfValidOption(child);
 
+    // Return early if the child isn't an option, to prevent attaching handlers etc.
     if (!isValidOption) {
       return child;
     }
-
     const {
       value,
       label,
       disabled: isDisabled
-    } = child.props; // Active means the option is currently selected
+    } = child.props;
 
-    const isActive = !!findOption(value, selected); // Create the appropriate click handler for the option
+    // Active means the option is currently selected
+    const isActive = !!findOption(value, selected);
 
+    // Create the appropriate click handler for the option
     const onClick = isDisabled ? onDisabledClick : createHandler({
       isActive,
       onChange,
@@ -78,14 +76,14 @@ const Menu = _ref2 => {
       value,
       label
     });
-    return /*#__PURE__*/React.cloneElement(child, { ...child.props,
+    return /*#__PURE__*/React.cloneElement(child, {
+      ...child.props,
       onClick,
       active: isActive
     });
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-
 Menu.defaultProps = {
   empty: ''
 };

package/build/es/multi-select/{multi-select.stories.e2e.js → multi-select.e2e.stories.js}

@@ -1,7 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import { Button } from '@dhis2-ui/button';
 import { Modal, ModalTitle, ModalContent } from '@dhis2-ui/modal';
-import { storiesOf } from '@storybook/react';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { MultiSelectOption } from '../index.js';
@@ -9,7 +8,6 @@ import { MultiSelect } from './multi-select.js';
 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,
@@ -19,7 +17,6 @@ const CustomMultiSelectOption = _ref => {
     onClick: e => onClick({}, e)
   }, label);
 };
-
 CustomMultiSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -37,7 +34,10 @@ const options = [{
   name: 'bar',
   id: '4'
 }];
-storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.createElement(MultiSelect, {
+export default {
+  title: 'MultiSelect'
+};
+export const WithOptions = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -48,7 +48,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options and onChange', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsAndOnChange = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   onChange: window.onChange
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -60,7 +61,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With onFocus', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOnFocus = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   onFocus: window.onFocus
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -72,7 +74,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With onBlur', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOnBlur = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   onBlur: window.onBlur
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -84,7 +87,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With custom options and onChange', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithCustomOptionsAndOnChange = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   onChange: window.onChange
 }, /*#__PURE__*/React.createElement(CustomMultiSelectOption, {
@@ -96,7 +100,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(CustomMultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With invalid options', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithInvalidOptions = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement("div", null, "invalid one"), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -107,7 +112,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement("div", null, "invalid three"), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}), null, undefined, false)).add('With invalid filterable options', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}), null, undefined, false);
+export const WithInvalidFilterableOptions = () => /*#__PURE__*/React.createElement(MultiSelect, {
   filterable: true,
   className: "select",
   noMatchText: "No match"
@@ -120,20 +126,25 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement("div", null, "invalid three"), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With initialFocus', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithInitialFocus = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   initialFocus: true
-})).add('Empty', () => /*#__PURE__*/React.createElement(MultiSelect, {
+});
+export const Empty = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
-})).add('Empty with empty text', () => /*#__PURE__*/React.createElement(MultiSelect, {
+});
+export const EmptyWithEmptyText = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   empty: "Custom empty text"
-})).add('Empty with empty component', () => /*#__PURE__*/React.createElement(MultiSelect, {
+});
+export const EmptyWithEmptyComponent = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   empty: /*#__PURE__*/React.createElement("div", {
     className: "custom-empty"
   }, "Custom empty component")
-})).add('With options and loading', () => /*#__PURE__*/React.createElement(MultiSelect, {
+});
+export const WithOptionsAndLoading = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   loading: true
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -145,7 +156,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options, loading and loading text', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsLoadingAndLoadingText = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   loadingText: "Loading options",
   loading: true
@@ -158,7 +170,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With more than ten options', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithMoreThanTenOptions = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -196,7 +209,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "12",
   label: "option twelve"
-}))).add('With more than three options and a 100px max-height', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithMoreThanThreeOptionsAndA100pxMaxHeight = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   maxHeight: "100px"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -235,7 +249,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "12",
   label: "option twelve"
-}))).add('With options, a selection and disabled', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsASelectionAndDisabled = () => /*#__PURE__*/React.createElement(MultiSelect, {
   disabled: true,
   className: "select",
   selected: ['1']
@@ -248,7 +263,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options and disabled', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsAndDisabled = () => /*#__PURE__*/React.createElement(MultiSelect, {
   disabled: true,
   className: "select"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -260,7 +276,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With prefix', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithPrefix = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   prefix: "Prefix text"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -272,7 +289,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With prefix and selection', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithPrefixAndSelection = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   prefix: "Prefix text",
   selected: ['1']
@@ -285,7 +303,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With placeholder', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithPlaceholder = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   placeholder: "Placeholder text"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -297,7 +316,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With placeholder and selection', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithPlaceholderAndSelection = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   selected: ['1'],
   placeholder: "Placeholder text"
@@ -310,7 +330,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With disabled option and onChange', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithDisabledOptionAndOnChange = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   onChange: window.onChange
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -326,7 +347,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
   value: "4",
   label: "disabled option",
   disabled: true
-}))).add('With options and a selection', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsAndASelection = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   selected: ['1']
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -338,7 +360,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options, a selection and onChange', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsASelectionAndOnChange = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   selected: ['1'],
   onChange: window.onChange
@@ -351,7 +374,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options and multiple selections', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithOptionsAndMultipleSelections = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   selected: ['1', '2']
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -363,7 +387,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With clear button, selection and onChange', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithClearButtonSelectionAndOnChange = () => /*#__PURE__*/React.createElement(MultiSelect, {
   clearable: true,
   clearText: "Clear",
   className: "select",
@@ -378,7 +403,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With filter field', () => /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const WithFilterField = () => /*#__PURE__*/React.createElement(MultiSelect, {
   filterable: true,
   noMatchText: "No match found",
   className: "select"
@@ -391,7 +417,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('Default position', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
+}));
+export const DefaultPosition = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -430,8 +457,9 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
   value: "12",
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2721172199"
-}, ["#root{height:2000px !important;}"]))).add('Flipped position', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
+  id: "2883393180"
+}, ["#storybook-root{height:2000px !important;}"]));
+export const FlippedPosition = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -470,8 +498,9 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
   value: "12",
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3289429748"
-}, ["html,body,#root{position:relative;height:500px;max-height:500px;}", "#root{padding-top:400px !important;}"]))).add('Shifted into view', () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
+  id: "979451016"
+}, ["html,body,#storybook-root{position:relative;height:500px;max-height:500px;}", "#storybook-root{padding-top:400px !important;}"]));
+export const ShiftedIntoView = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select"
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "1",
@@ -510,8 +539,9 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
   value: "12",
   label: "option twelve"
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
-  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__*/React.createElement(MultiSelect, {
+  id: "438540012"
+}, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+export const WithDuplicateSelectedOptionValues = () => /*#__PURE__*/React.createElement(MultiSelect, {
   className: "select",
   selected: ['1']
 }, /*#__PURE__*/React.createElement(MultiSelectOption, {
@@ -526,7 +556,8 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
 }), /*#__PURE__*/React.createElement(MultiSelectOption, {
   value: "3",
   label: "option three"
-}))).add('With options that can be added to the input', () => {
+}));
+export const WithOptionsThatCanBeAddedToTheInput = () => {
   const [values, setValues] = React.useState([]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
     className: "select",
@@ -550,9 +581,10 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
     value: "3",
     label: "option three"
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1880313934"
-  }, ["#root{height:2000px !important;}"]));
-}).add('Menu width changing', () => {
+    id: "4252233386"
+  }, ["#storybook-root{height:2000px !important;}"]));
+};
+export const MenuWidthChanging = () => {
   const [toggle, setToggle] = useState(false);
   return /*#__PURE__*/React.createElement("div", {
     className: "App"
@@ -598,4 +630,4 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
   }, "Stuff")), /*#__PURE__*/React.createElement(Button, {
     onClick: () => setToggle(!toggle)
   }, "Toggle"))));
-});
+};

package/build/es/multi-select/multi-select.js

@@ -1,14 +1,13 @@
 import _JSXStyle from "styled-jsx/style";
-import { StatusIcon } from '@dhis2-ui/status-icon';
 import { requiredIf } from '@dhis2/prop-types';
 import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Loading as CommonLoading, Select } from '../select/index.js';
 import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
-
 const MultiSelect = _ref => {
   let {
     className,
@@ -80,7 +79,7 @@ const MultiSelect = _ref => {
     dense: dense
   }, children, loading && /*#__PURE__*/React.createElement(CommonLoading, {
     message: loadingText,
-    dataTest: "".concat(dataTest, "-loading")
+    dataTest: `${dataTest}-loading`
   }))), /*#__PURE__*/React.createElement(StatusIcon, {
     error: error,
     valid: valid,
@@ -88,9 +87,8 @@ const MultiSelect = _ref => {
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2180377457",
     dynamic: [spacers.dp8]
-  }, [".root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";}"), ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
+  }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
-
 MultiSelect.defaultProps = {
   selected: [],
   dataTest: 'dhis2-uicore-multiselect'
@@ -98,10 +96,8 @@ MultiSelect.defaultProps = {
 MultiSelect.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-
   /** Required if `clearable` prop is `true` */
   clearText: requiredIf(props => props.clearable, PropTypes.string),
-
   /** Adds a 'clear' option to the menu */
   clearable: PropTypes.bool,
   dataTest: PropTypes.string,
@@ -110,7 +106,6 @@ MultiSelect.propTypes = {
   empty: PropTypes.node,
   error: sharedPropTypes.statusPropType,
   filterPlaceholder: PropTypes.string,
-
   /** Adds a 'filter' field to the menu */
   filterable: PropTypes.bool,
   initialFocus: PropTypes.bool,
@@ -118,7 +113,6 @@ MultiSelect.propTypes = {
   loading: PropTypes.bool,
   loadingText: PropTypes.string,
   maxHeight: PropTypes.string,
-
   /** Required if `filterable` prop is `true` */
   noMatchText: requiredIf(props => props.filterable, PropTypes.string),
   placeholder: PropTypes.string,