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

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

@@ -4,29 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiSelect = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _statusIcon = require("@dhis2-ui/status-icon");
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _statusIcon = require("@dhis2-ui/status-icon");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../select/index.js");
-
 var _filterableMenu = require("./filterable-menu.js");
-
 var _input = require("./input.js");
-
 var _menu = require("./menu.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MultiSelect = _ref => {
   let {
     className,
@@ -98,7 +86,7 @@ const MultiSelect = _ref => {
     dense: dense
   }, children, loading && /*#__PURE__*/_react.default.createElement(_index.Loading, {
     message: loadingText,
-    dataTest: "".concat(dataTest, "-loading")
+    dataTest: `${dataTest}-loading`
   }))), /*#__PURE__*/_react.default.createElement(_statusIcon.StatusIcon, {
     error: error,
     valid: valid,
@@ -106,9 +94,8 @@ const MultiSelect = _ref => {
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2180377457",
     dynamic: [_uiConstants.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(_uiConstants.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:${_uiConstants.spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
-
 exports.MultiSelect = MultiSelect;
 MultiSelect.defaultProps = {
   selected: [],
@@ -117,10 +104,8 @@ MultiSelect.defaultProps = {
 MultiSelect.propTypes = {
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,
-
   /** Required if `clearable` prop is `true` */
   clearText: (0, _propTypes.requiredIf)(props => props.clearable, _propTypes2.default.string),
-
   /** Adds a 'clear' option to the menu */
   clearable: _propTypes2.default.bool,
   dataTest: _propTypes2.default.string,
@@ -129,7 +114,6 @@ MultiSelect.propTypes = {
   empty: _propTypes2.default.node,
   error: _uiConstants.sharedPropTypes.statusPropType,
   filterPlaceholder: _propTypes2.default.string,
-
   /** Adds a 'filter' field to the menu */
   filterable: _propTypes2.default.bool,
   initialFocus: _propTypes2.default.bool,
@@ -137,7 +121,6 @@ MultiSelect.propTypes = {
   loading: _propTypes2.default.bool,
   loadingText: _propTypes2.default.string,
   maxHeight: _propTypes2.default.string,
-
   /** Required if `filterable` prop is `true` */
   noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
   placeholder: _propTypes2.default.string,

package/build/cjs/multi-select/{multi-select.stories.js → multi-select.prod.stories.js}

@@ -4,36 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMultipleSelectionsWrapped = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _index = require("../index.js");
-
 var _index2 = require("./index.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 }; }
+const description = `
+Multiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.
 
-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; }
+Use multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Read more about using \`Select\` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
 
-const description = "\nMultiple selection allows the user to select more than one option from the list. Checkboxes are used to highlight the possibility of making more than one selection. Selected options are displayed as chips inside the input. Make sure to communicate clearly to the user if there is a limit to the number of selectable elements.\n\nUse multiple selection wherever the user needs to make more than one selection. If the multiple selection is complex, requires a defined order or needs to made from different groups, consider using a transfer component instead.\n\nRead more about using `Select` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { MultiSelect, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._\n";
+\`\`\`js
+import { MultiSelect, MultiSelectOption } from '@dhis2/ui'
+\`\`\`
 
+_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (props-interactive) examples, see individual stories in the 'Canvas' tab._
+`;
 const eventHandler = handlerName => (payload, event) => {
-  console.log("".concat(handlerName, " payload"), payload);
-  console.log("".concat(handlerName, " event"), event);
+  console.log(`${handlerName} payload`, payload);
+  console.log(`${handlerName} event`, event);
 };
-
 const onChange = eventHandler('onChange');
 const onFocus = eventHandler('onFocus');
 const onBlur = eventHandler('onBlur');
-
 const CustomMultiSelectOption = _ref => {
   let {
     label,
@@ -43,7 +42,6 @@ const CustomMultiSelectOption = _ref => {
     onClick: e => onClick({}, e)
   }, label);
 };
-
 CustomMultiSelectOption.propTypes = {
   label: _propTypes.default.string,
   onClick: _propTypes.default.func
@@ -58,7 +56,7 @@ const requiredIfArgType = {
     }
   }
 };
-var _default = {
+var _default = exports.default = {
   title: 'Multi Select',
   component: _index2.MultiSelect,
   parameters: {
@@ -80,20 +78,23 @@ var _default = {
     onChange
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    clearText: { ...requiredIfArgType
+    clearText: {
+      ...requiredIfArgType
     },
-    noMatchText: { ...requiredIfArgType
+    noMatchText: {
+      ...requiredIfArgType
     }
   }
 };
-exports.default = _default;
-
 const WithOptionsTemplate = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -104,37 +105,30 @@ const WithOptionsTemplate = args => /*#__PURE__*/_react.default.createElement(_i
   value: "3",
   label: "option three"
 }));
-
 const EmptyTemplate = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args);
-
-const WithOptionsAndOnChange = WithOptionsTemplate.bind({});
-exports.WithOptionsAndOnChange = WithOptionsAndOnChange;
+const WithOptionsAndOnChange = exports.WithOptionsAndOnChange = WithOptionsTemplate.bind({});
 WithOptionsAndOnChange.storyName = 'With options and onChange';
-const WithOptionsAndASelection = WithOptionsTemplate.bind({});
-exports.WithOptionsAndASelection = WithOptionsAndASelection;
+const WithOptionsAndASelection = exports.WithOptionsAndASelection = WithOptionsTemplate.bind({});
 WithOptionsAndASelection.args = {
   selected: ['1']
-}; // Enable this story as the primary for the docs page
-
+};
+// Enable this story as the primary for the docs page
 WithOptionsAndASelection.parameters = {
   docs: {
     disable: false
   }
 };
 WithOptionsAndASelection.storyName = 'With options and a selection';
-const WithOnFocus = WithOptionsTemplate.bind({});
-exports.WithOnFocus = WithOnFocus;
+const WithOnFocus = exports.WithOnFocus = WithOptionsTemplate.bind({});
 WithOnFocus.args = {
   onFocus
 };
-WithOnFocus.storyName = 'With onFocus';
-const WithOnBlur = WithOptionsTemplate.bind({});
-exports.WithOnBlur = WithOnBlur;
+WithOnFocus.storyName = 'With on focus';
+const WithOnBlur = exports.WithOnBlur = WithOptionsTemplate.bind({});
 WithOnBlur.args = {
   onBlur
 };
 WithOnBlur.storyName = 'With onBlur';
-
 const WithCustomOptionsAndOnChange = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(CustomMultiSelectOption, {
   value: "1",
   label: "option one"
@@ -145,10 +139,8 @@ const WithCustomOptionsAndOnChange = args => /*#__PURE__*/_react.default.createE
   value: "3",
   label: "option three"
 }));
-
 exports.WithCustomOptionsAndOnChange = WithCustomOptionsAndOnChange;
 WithCustomOptionsAndOnChange.storyName = 'With custom options and onChange';
-
 const WithInvalidOptions = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement("div", null, "invalid one"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -159,9 +151,7 @@ const WithInvalidOptions = args => /*#__PURE__*/_react.default.createElement(_in
   value: "3",
   label: "option three"
 }), null, undefined, false);
-
 exports.WithInvalidOptions = WithInvalidOptions;
-
 const WithInvalidFilterableOptions = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement("div", null, "invalid one"), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -172,14 +162,12 @@ const WithInvalidFilterableOptions = args => /*#__PURE__*/_react.default.createE
   value: "3",
   label: "option three"
 }));
-
 exports.WithInvalidFilterableOptions = WithInvalidFilterableOptions;
 WithInvalidFilterableOptions.args = {
   filterable: true,
   noMatchText: 'No match found'
 };
-const WithInitialFocus = EmptyTemplate.bind({});
-exports.WithInitialFocus = WithInitialFocus;
+const WithInitialFocus = exports.WithInitialFocus = EmptyTemplate.bind({});
 WithInitialFocus.args = {
   initialFocus: true
 };
@@ -188,47 +176,40 @@ WithInitialFocus.parameters = {
     disable: true
   }
 };
-WithInitialFocus.storyName = 'With initialFocus';
-const Dense = WithOptionsTemplate.bind({});
-exports.Dense = Dense;
+WithInitialFocus.storyName = 'With initial focus';
+const Dense = exports.Dense = WithOptionsTemplate.bind({});
 Dense.args = {
   dense: true,
   placeholder: 'Dense sized multi select'
 };
 Dense.storyName = 'Dense';
-const DenseWithSelections = WithOptionsTemplate.bind({});
-exports.DenseWithSelections = DenseWithSelections;
+const DenseWithSelections = exports.DenseWithSelections = WithOptionsTemplate.bind({});
 DenseWithSelections.args = {
   dense: true,
   selected: ['1', '2']
 };
 DenseWithSelections.storyName = 'Dense with selections';
-const Empty = EmptyTemplate.bind({});
-exports.Empty = Empty;
-const EmptyWithEmptyText = EmptyTemplate.bind({});
-exports.EmptyWithEmptyText = EmptyWithEmptyText;
+const Empty = exports.Empty = EmptyTemplate.bind({});
+const EmptyWithEmptyText = exports.EmptyWithEmptyText = EmptyTemplate.bind({});
 EmptyWithEmptyText.args = {
   empty: 'Custom empty text'
 };
-const EmptyWithEmptyComponent = EmptyTemplate.bind({});
-exports.EmptyWithEmptyComponent = EmptyWithEmptyComponent;
+const EmptyWithEmptyComponent = exports.EmptyWithEmptyComponent = EmptyTemplate.bind({});
 EmptyWithEmptyComponent.args = {
   empty: /*#__PURE__*/_react.default.createElement("div", {
     className: "custom-empty"
   }, "Custom empty component")
 };
-const WithOptionsAndLoading = WithOptionsTemplate.bind({});
-exports.WithOptionsAndLoading = WithOptionsAndLoading;
+const WithOptionsAndLoading = exports.WithOptionsAndLoading = WithOptionsTemplate.bind({});
 WithOptionsAndLoading.args = {
   loading: true
 };
-const WithOptionsLoadingAndLoadingText = WithOptionsTemplate.bind({});
-exports.WithOptionsLoadingAndLoadingText = WithOptionsLoadingAndLoadingText;
-WithOptionsLoadingAndLoadingText.args = { ...WithOptionsAndLoading.args,
+const WithOptionsLoadingAndLoadingText = exports.WithOptionsLoadingAndLoadingText = WithOptionsTemplate.bind({});
+WithOptionsLoadingAndLoadingText.args = {
+  ...WithOptionsAndLoading.args,
   loadingText: 'Loading options'
 };
 WithOptionsLoadingAndLoadingText.storyName = 'With options, loading and loading text';
-
 const WithMoreThanTenOptions = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -266,9 +247,7 @@ const WithMoreThanTenOptions = args => /*#__PURE__*/_react.default.createElement
   value: "12",
   label: "option twelve"
 }));
-
 exports.WithMoreThanTenOptions = WithMoreThanTenOptions;
-
 const WithMoreThanThreeOptionsAndA100PxMaxHeight = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -306,45 +285,40 @@ const WithMoreThanThreeOptionsAndA100PxMaxHeight = args => /*#__PURE__*/_react.d
   value: "12",
   label: "option twelve"
 }));
-
 exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = WithMoreThanThreeOptionsAndA100PxMaxHeight;
 WithMoreThanThreeOptionsAndA100PxMaxHeight.args = {
   maxHeight: '100px'
 };
 WithMoreThanThreeOptionsAndA100PxMaxHeight.storyName = 'With more than three options and a 100px max-height';
-const WithOptionsAndDisabled = WithOptionsTemplate.bind({});
-exports.WithOptionsAndDisabled = WithOptionsAndDisabled;
+const WithOptionsAndDisabled = exports.WithOptionsAndDisabled = WithOptionsTemplate.bind({});
 WithOptionsAndDisabled.args = {
   disabled: true
 };
 WithOptionsAndDisabled.storyName = 'With options and disabled';
-const WithOptionsASelectionAndDisabled = WithOptionsTemplate.bind({});
-exports.WithOptionsASelectionAndDisabled = WithOptionsASelectionAndDisabled;
-WithOptionsASelectionAndDisabled.args = { ...WithOptionsAndDisabled.args,
+const WithOptionsASelectionAndDisabled = exports.WithOptionsASelectionAndDisabled = WithOptionsTemplate.bind({});
+WithOptionsASelectionAndDisabled.args = {
+  ...WithOptionsAndDisabled.args,
   ...WithOptionsAndASelection.args
 };
 WithOptionsASelectionAndDisabled.storyName = 'With options, a selection and disabled';
-const WithPrefix = WithOptionsTemplate.bind({});
-exports.WithPrefix = WithPrefix;
+const WithPrefix = exports.WithPrefix = WithOptionsTemplate.bind({});
 WithPrefix.args = {
   prefix: 'Prefix text'
 };
-const WithPrefixAndSelection = WithOptionsTemplate.bind({});
-exports.WithPrefixAndSelection = WithPrefixAndSelection;
-WithPrefixAndSelection.args = { ...WithPrefix.args,
+const WithPrefixAndSelection = exports.WithPrefixAndSelection = WithOptionsTemplate.bind({});
+WithPrefixAndSelection.args = {
+  ...WithPrefix.args,
   ...WithOptionsAndASelection.args
 };
-const WithPlaceholder = WithOptionsTemplate.bind({});
-exports.WithPlaceholder = WithPlaceholder;
+const WithPlaceholder = exports.WithPlaceholder = WithOptionsTemplate.bind({});
 WithPlaceholder.args = {
   placeholder: 'Placeholder text'
 };
-const WithPlaceholderAndSelection = WithOptionsTemplate.bind({});
-exports.WithPlaceholderAndSelection = WithPlaceholderAndSelection;
-WithPlaceholderAndSelection.args = { ...WithPlaceholder.args,
+const WithPlaceholderAndSelection = exports.WithPlaceholderAndSelection = WithOptionsTemplate.bind({});
+WithPlaceholderAndSelection.args = {
+  ...WithPlaceholder.args,
   ...WithOptionsAndASelection.args
 };
-
 const WithDisabledOptionAndOnChange = args => /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -359,18 +333,14 @@ const WithDisabledOptionAndOnChange = args => /*#__PURE__*/_react.default.create
   label: "disabled option",
   disabled: true
 }));
-
 exports.WithDisabledOptionAndOnChange = WithDisabledOptionAndOnChange;
 WithDisabledOptionAndOnChange.storyName = 'With disabled option and onChange';
-const WithOptionsAndMultipleSelections = WithOptionsTemplate.bind({});
-exports.WithOptionsAndMultipleSelections = WithOptionsAndMultipleSelections;
+const WithOptionsAndMultipleSelections = exports.WithOptionsAndMultipleSelections = WithOptionsTemplate.bind({});
 WithOptionsAndMultipleSelections.args = {
   selected: ['1', '2']
 };
-
 const WithMultipleSelectionsWrapped = () => {
   const [selected, setSelected] = _react.default.useState(['1', '2', '4', '6']);
-
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: 300
@@ -411,20 +381,18 @@ const WithMultipleSelectionsWrapped = () => {
     label: "option seven"
   })));
 };
-
 exports.WithMultipleSelectionsWrapped = WithMultipleSelectionsWrapped;
-const WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({});
-exports.WithClearButtonSelectionAndOnChange = WithClearButtonSelectionAndOnChange;
-WithClearButtonSelectionAndOnChange.args = { ...WithOptionsAndASelection.args,
+const WithClearButtonSelectionAndOnChange = exports.WithClearButtonSelectionAndOnChange = WithOptionsTemplate.bind({});
+WithClearButtonSelectionAndOnChange.args = {
+  ...WithOptionsAndASelection.args,
   clearable: true,
   clearText: 'Clear'
 };
 WithClearButtonSelectionAndOnChange.storyName = 'With clear button, selection and onChange';
-const WithFilterField = WithOptionsTemplate.bind({});
-exports.WithFilterField = WithFilterField;
-WithFilterField.args = { ...WithInvalidFilterableOptions.args
+const WithFilterField = exports.WithFilterField = WithOptionsTemplate.bind({});
+WithFilterField.args = {
+  ...WithInvalidFilterableOptions.args
 };
-
 const DefaultPosition = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -464,9 +432,7 @@ const DefaultPosition = args => /*#__PURE__*/_react.default.createElement(_react
 })), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "2006483503"
 }, ["#root{margin-bottom:2000px;}"]));
-
 exports.DefaultPosition = DefaultPosition;
-
 const FlippedPosition = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -506,9 +472,7 @@ const FlippedPosition = args => /*#__PURE__*/_react.default.createElement(_react
 })), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "1520050670"
 }, ["html,body,#root{position:relative;height:500px;max-height:500px;}", "#root{padding-top:400px !important;}"]));
-
 exports.FlippedPosition = FlippedPosition;
-
 const ShiftedIntoView = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index2.MultiSelect, args, /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   value: "1",
   label: "option one"
@@ -548,9 +512,7 @@ const ShiftedIntoView = args => /*#__PURE__*/_react.default.createElement(_react
 })), /*#__PURE__*/_react.default.createElement(_style.default, {
   id: "1828862170"
 }, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
-
 exports.ShiftedIntoView = ShiftedIntoView;
-
 const RTL = args => {
   (0, _react.useEffect)(() => {
     document.body.dir = 'rtl';
@@ -562,7 +524,6 @@ const RTL = args => {
     dir: "rtl"
   }, /*#__PURE__*/_react.default.createElement(WithOptionsTemplate, args));
 };
-
 exports.RTL = RTL;
 RTL.args = {
   selected: ['1', '2'],

package/build/cjs/multi-select/selection-list.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectionList = void 0;
-
 var _chip = require("@dhis2-ui/chip");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../select/index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const createRemoveHandler = _ref => {
   let {
     selected,
@@ -29,7 +23,6 @@ const createRemoveHandler = _ref => {
     onChange(data, e);
   };
 };
-
 const SelectionList = _ref2 => {
   let {
     selected,
@@ -40,10 +33,8 @@ const SelectionList = _ref2 => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selected.map(value => {
     const isProduction = process.env.NODE_ENV === 'production';
     const selectedOption = (0, _index.findOptionChild)(value, options);
-
     if (!selectedOption) {
-      const message = "There is no option with the value: \"".concat(value, "\". ") + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
-
+      const message = `There is no option with the value: "${value}". ` + 'Make sure that all the values passed to the selected ' + 'prop match the value of an existing option.';
       if (isProduction) {
         // Don't crash the app if in production
         console.error(message);
@@ -52,13 +43,15 @@ const SelectionList = _ref2 => {
         throw new Error(message);
       }
     }
+    const isDisabled = selectedOption ?
+    // The chip should be disabled if the option or the select are disabled
+    selectedOption.props.disabled || disabled :
+    // If there is no selected option, just look at the select
+    disabled;
+    // Use the selected value if we do not have a label
+    const label = selectedOption ? selectedOption.props.label : value;
 
-    const isDisabled = selectedOption ? // The chip should be disabled if the option or the select are disabled
-    selectedOption.props.disabled || disabled : // If there is no selected option, just look at the select
-    disabled; // Use the selected value if we do not have a label
-
-    const label = selectedOption ? selectedOption.props.label : value; // Create an onRemove handler, but only if it's not disabled
-
+    // Create an onRemove handler, but only if it's not disabled
     const onRemove = isDisabled ? undefined : createRemoveHandler({
       selected,
       onChange,
@@ -77,7 +70,6 @@ const SelectionList = _ref2 => {
     }, label);
   }));
 };
-
 exports.SelectionList = SelectionList;
 SelectionList.propTypes = {
   disabled: _propTypes.default.bool,

package/build/cjs/multi-select-field/__tests__/multi-select-field.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _multiSelectField = require("../multi-select-field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<MultiSelect />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -16,13 +12,11 @@ describe('<MultiSelect />', () => {
       placeholder: "placeholder",
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByTestId('dhis2-uicore-multiselect-placeholder'), {
       key: 'Enter',
       code: 'Enter',
       charCode: 13
     });
-
     expect(onKeyDown).toHaveBeenCalledWith({
       selected: []
     }, expect.objectContaining({}));

package/build/cjs/multi-select-field/features/accepts_help_text/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MultiSelectField with help text is rendered', () => {
   cy.visitStory('MultiSelectField', 'With help text');
 });

package/build/cjs/multi-select-field/features/accepts_label/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MultiSelectField with a label is rendered', () => {
   cy.visitStory('MultiSelectField', 'With label');
 });

package/build/cjs/multi-select-field/features/accepts_validation_text/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MultiSelectField with validation text is rendered', () => {
   cy.visitStory('MultiSelectField', 'With validation text');
 });

package/build/cjs/multi-select-field/features/can_be_required/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a MultiSelectField with label and a required flag is rendered', () => {
   cy.visitStory('MultiSelectField', 'With label and required status');
 });

package/build/cjs/multi-select-field/features/has_default_clear_text/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a clearable MultiSelectField with selected option is rendered', () => {
   cy.visitStory('MultiSelectField', 'With clearable and selected option');
 });

package/build/cjs/multi-select-field/features/has_default_empty_text/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an empty MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'Without options');
 });

package/build/cjs/multi-select-field/features/has_default_filter_nomatch_text/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a filterable MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'With filterable');
 });

package/build/cjs/multi-select-field/features/has_default_filter_placeholder/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a filterable MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'With filterable');
 });

package/build/cjs/multi-select-field/features/has_default_loading_text/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a loading MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'With loading');
 });

package/build/cjs/multi-select-field/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "MultiSelectField", {
     return _multiSelectField.MultiSelectField;
   }
 });
-
 var _multiSelectField = require("./multi-select-field.js");