@dhis2-ui/select 8.2.0 → 8.2.1

package/build/cjs/multi-select/features/menu_width_matches_input/index.js

@@ -28,7 +28,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the MultiSelect input is left aligned with the menu', () => {
   const selectDataTest = '[data-test="dhis2-uicore-multiselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(([inputs, menus]) => {
+  cy.getAll(selectDataTest, menuDataTest).should(_ref => {
+    let [inputs, menus] = _ref;
     expect(inputs.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $input = inputs[0];
@@ -41,7 +42,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.When)('the MultiSelect input and menu have the same width', () => {
   const inputSelector = '[data-test="dhis2-uicore-select"]';
   const menuSelector = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(inputSelector, menuSelector).should(([$input, $menu]) => {
+  cy.getAll(inputSelector, menuSelector).should(_ref2 => {
+    let [$input, $menu] = _ref2;
     const inputWidth = Math.round($input.outerWidth());
     const menuWidth = Math.round($menu.outerWidth());
     expect(inputWidth).to.equal(menuWidth);

package/build/cjs/multi-select/features/position/index.js

@@ -36,7 +36,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the Input remains the same height', () => {
   const emptyInputHeight = '@emptyInputHeight';
   const inputDataTest = '[data-test="dhis2-uicore-select-input"]';
-  cy.getAll(emptyInputHeight, inputDataTest).should(([emptyInputHeight, inputs]) => {
+  cy.getAll(emptyInputHeight, inputDataTest).should(_ref => {
+    let [emptyInputHeight, inputs] = _ref;
     expect(inputs.length).to.equal(1);
     const $input = inputs[0];
     const inputRect = $input.getBoundingClientRect();
@@ -46,7 +47,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the top of the menu is aligned with the bottom of the input', () => {
   const selectDataTest = '[data-test="dhis2-uicore-multiselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+  cy.getAll(selectDataTest, menuDataTest).should(_ref2 => {
+    let [selects, menus] = _ref2;
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -59,7 +61,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the bottom of the menu is aligned with the top of the input', () => {
   const selectDataTest = '[data-test="dhis2-uicore-multiselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+  cy.getAll(selectDataTest, menuDataTest).should(_ref3 => {
+    let [selects, menus] = _ref3;
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -72,7 +75,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('it is rendered on top of the MultiSelect', () => {
   const selectDataTest = '[data-test="dhis2-uicore-multiselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+  cy.getAll(selectDataTest, menuDataTest).should(_ref4 => {
+    let [selects, menus] = _ref4;
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -86,7 +90,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the left of the Menu is aligned with the left of the Input', () => {
   const selectDataTest = '[data-test="dhis2-uicore-multiselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+  cy.getAll(selectDataTest, menuDataTest).should(_ref5 => {
+    let [selects, menus] = _ref5;
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -99,7 +104,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the Menu and the Input have an equal width', () => {
   const inputDataTest = '[data-test="dhis2-uicore-multiselect"] .root-input';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(inputDataTest, menuDataTest).should(([inputs, menus]) => {
+  cy.getAll(inputDataTest, menuDataTest).should(_ref6 => {
+    let [inputs, menus] = _ref6;
     expect(inputs.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $input = inputs[0];

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

@@ -15,28 +15,31 @@ var _menu = require("./menu.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FilterableMenu = ({
-  dataTest,
-  options,
-  onChange,
-  selected,
-  empty,
-  handleClose,
-  handleFocusInput,
-  placeholder,
-  noMatchText
-}) => /*#__PURE__*/_react.default.createElement(_index.FilterableMenu, {
-  dataTest: dataTest,
-  options: options,
-  onChange: onChange,
-  selected: selected,
-  empty: empty,
-  handleClose: handleClose,
-  handleFocusInput: handleFocusInput,
-  placeholder: placeholder,
-  noMatchText: noMatchText,
-  Menu: _menu.Menu
-});
+const FilterableMenu = _ref => {
+  let {
+    dataTest,
+    options,
+    onChange,
+    selected,
+    empty,
+    handleClose,
+    handleFocusInput,
+    placeholder,
+    noMatchText
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_index.FilterableMenu, {
+    dataTest: dataTest,
+    options: options,
+    onChange: onChange,
+    selected: selected,
+    empty: empty,
+    handleClose: handleClose,
+    handleFocusInput: handleFocusInput,
+    placeholder: placeholder,
+    noMatchText: noMatchText,
+    Menu: _menu.Menu
+  });
+};
 
 exports.FilterableMenu = FilterableMenu;
 FilterableMenu.propTypes = {

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

@@ -23,19 +23,20 @@ var _selectionList = require("./selection-list.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Input = ({
-  selected,
-  onChange,
-  clearable,
-  clearText,
-  placeholder,
-  dataTest,
-  prefix,
-  options,
-  className,
-  disabled,
-  inputMaxHeight
-}) => {
+const Input = _ref => {
+  let {
+    selected,
+    onChange,
+    clearable,
+    clearText,
+    placeholder,
+    dataTest,
+    prefix,
+    options,
+    className,
+    disabled,
+    inputMaxHeight
+  } = _ref;
   const hasSelection = selected.length > 0;
 
   const onClear = (_, e) => {
@@ -50,10 +51,10 @@ const Input = ({
     className: _style.default.dynamic([["1360178250", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
   }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
     prefix: prefix,
-    dataTest: `${dataTest}-prefix`
+    dataTest: "".concat(dataTest, "-prefix")
   }), !hasSelection && !prefix && /*#__PURE__*/_react.default.createElement(_index.InputPlaceholder, {
     placeholder: placeholder,
-    dataTest: `${dataTest}-placeholder`
+    dataTest: "".concat(dataTest, "-placeholder")
   }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["1360178250", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/_react.default.createElement(_selectionList.SelectionList, {
@@ -66,14 +67,14 @@ const Input = ({
   }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
     onClear: onClear,
     clearText: clearText,
-    dataTest: `${dataTest}-clear`
+    dataTest: "".concat(dataTest, "-clear")
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1360178250",
     dynamic: [_uiConstants.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:${_uiConstants.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;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, [".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(_uiConstants.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;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
-  }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
+  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
 };
 
 exports.Input = Input;

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

@@ -18,36 +18,40 @@ const onDisabledClick = (_, e) => {
   e.preventDefault();
 };
 
-const createHandler = ({
-  isActive,
-  onChange,
-  selected,
-  value
-}) => (_, e) => {
-  e.stopPropagation(); // If the option is currently selected remove it from the array of selected options
-
-  if (isActive) {
-    const filtered = (0, _index.removeOption)(value, selected);
+const createHandler = _ref => {
+  let {
+    isActive,
+    onChange,
+    selected,
+    value
+  } = _ref;
+  return (_, e) => {
+    e.stopPropagation(); // If the option is currently selected remove it from the array of selected options
+
+    if (isActive) {
+      const filtered = (0, _index.removeOption)(value, selected);
+      const data = {
+        selected: filtered
+      };
+      return onChange(data, e);
+    } // Otherwise, add it to selected
+
+
     const data = {
-      selected: filtered
+      selected: selected.concat([value])
     };
     return onChange(data, e);
-  } // Otherwise, add it to selected
-
-
-  const data = {
-    selected: selected.concat([value])
   };
-  return onChange(data, e);
 };
 
-const Menu = ({
-  options,
-  onChange,
-  selected,
-  empty,
-  dataTest
-}) => {
+const Menu = _ref2 => {
+  let {
+    options,
+    onChange,
+    selected,
+    empty,
+    dataTest
+  } = _ref2;
   const renderedOptions = (0, _index.filterIgnored)(options);
 
   if (_react.default.Children.count(renderedOptions) === 0) {
@@ -55,7 +59,7 @@ const Menu = ({
     if (typeof empty === 'string') {
       return /*#__PURE__*/_react.default.createElement(_index.Empty, {
         message: empty,
-        dataTest: `${dataTest}-empty`
+        dataTest: "".concat(dataTest, "-empty")
       });
     } // Otherwise just render the supplied markup
 

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

@@ -27,34 +27,35 @@ var _menu = require("./menu.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MultiSelect = ({
-  className,
-  selected,
-  tabIndex,
-  maxHeight,
-  inputMaxHeight,
-  onChange,
-  onFocus,
-  onBlur,
-  loading,
-  error,
-  warning,
-  valid,
-  disabled,
-  children,
-  clearable,
-  clearText,
-  filterable,
-  filterPlaceholder,
-  placeholder,
-  prefix,
-  empty,
-  loadingText,
-  noMatchText,
-  initialFocus,
-  dense,
-  dataTest
-}) => {
+const MultiSelect = _ref => {
+  let {
+    className,
+    selected,
+    tabIndex,
+    maxHeight,
+    inputMaxHeight,
+    onChange,
+    onFocus,
+    onBlur,
+    loading,
+    error,
+    warning,
+    valid,
+    disabled,
+    children,
+    clearable,
+    clearText,
+    filterable,
+    filterPlaceholder,
+    placeholder,
+    prefix,
+    empty,
+    loadingText,
+    noMatchText,
+    initialFocus,
+    dense,
+    dataTest
+  } = _ref;
   // If the select is filterable, use a filterable menu
   const menu = filterable ? /*#__PURE__*/_react.default.createElement(_filterableMenu.FilterableMenu, {
     dataTest: dataTest,
@@ -95,7 +96,7 @@ const MultiSelect = ({
     dense: dense
   }, children, loading && /*#__PURE__*/_react.default.createElement(_index.Loading, {
     message: loadingText,
-    dataTest: `${dataTest}-loading`
+    dataTest: "".concat(dataTest, "-loading")
   }))), /*#__PURE__*/_react.default.createElement(_statusIcon.StatusIcon, {
     error: error,
     valid: valid,
@@ -103,7 +104,7 @@ const MultiSelect = ({
   }), /*#__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:${_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:".concat(_uiConstants.spacers.dp8, ";}"), ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 exports.MultiSelect = MultiSelect;

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

@@ -26,12 +26,15 @@ 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 = ({
-  label,
-  onClick
-}) => /*#__PURE__*/_react2.default.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomMultiSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react2.default.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomMultiSelectOption.propTypes = {
   label: _propTypes.default.string,
@@ -545,9 +548,10 @@ const options = [{
   return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
     className: "select",
     selected: values,
-    onChange: ({
-      selected
-    }) => {
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
       window.onChange && window.onChange({
         selected
       });
@@ -586,17 +590,23 @@ const options = [{
       flexGrow: 1
     }
   }, /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
-    onChange: ({
-      selected
-    }) => console.log('size changed to ' + selected)
-  }, options.map(({
-    name,
-    id
-  }) => /*#__PURE__*/_react2.default.createElement(_index.MultiSelectOption, {
-    key: id,
-    value: id,
-    label: name
-  })))), toggle && /*#__PURE__*/_react2.default.createElement("div", {
+    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'

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShiftedIntoView = exports.FlippedPosition = exports.DefaultPosition = exports.WithFilterField = exports.WithClearButtonSelectionAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithDisabledOptionAndOnChange = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithOptionsASelectionAndDisabled = exports.WithOptionsAndDisabled = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndLoading = exports.EmptyWithEmptyComponent = exports.EmptyWithEmptyText = exports.Empty = exports.WithInitialFocus = exports.WithInvalidFilterableOptions = exports.WithInvalidOptions = exports.WithCustomOptionsAndOnChange = exports.WithOnBlur = exports.WithOnFocus = exports.WithOptionsAndASelection = exports.WithOptionsAndOnChange = exports.default = void 0;
+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.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DefaultPosition = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -19,35 +19,26 @@ var _index2 = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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.
-
-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.
-
-Read more about using \`Select\` components at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
-
-\`\`\`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 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";
 
 const eventHandler = handlerName => (payload, event) => {
-  console.log(`${handlerName} payload`, payload);
-  console.log(`${handlerName} event`, event);
+  console.log("".concat(handlerName, " payload"), payload);
+  console.log("".concat(handlerName, " event"), event);
 };
 
 const onChange = eventHandler('onChange');
 const onFocus = eventHandler('onFocus');
 const onBlur = eventHandler('onBlur');
 
-const CustomMultiSelectOption = ({
-  label,
-  onClick
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomMultiSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomMultiSelectOption.propTypes = {
   label: _propTypes.default.string,
@@ -64,7 +55,7 @@ const requiredIfArgType = {
   }
 };
 var _default = {
-  title: 'Forms/Multi Select/Multi Select',
+  title: 'Multi Select',
   component: _index2.MultiSelect,
   parameters: {
     docs: {

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

@@ -15,50 +15,56 @@ var _index = require("../select/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const createRemoveHandler = ({
-  selected,
-  onChange,
-  value
-}) => (_, e) => {
-  const filtered = (0, _index.removeOption)(value, selected);
-  const data = {
-    selected: filtered
+const createRemoveHandler = _ref => {
+  let {
+    selected,
+    onChange,
+    value
+  } = _ref;
+  return (_, e) => {
+    const filtered = (0, _index.removeOption)(value, selected);
+    const data = {
+      selected: filtered
+    };
+    onChange(data, e);
   };
-  onChange(data, e);
 };
 
-const SelectionList = ({
-  selected,
-  onChange,
-  disabled,
-  options
-}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selected.map(value => {
-  const selectedOption = (0, _index.findOptionChild)(value, options);
+const SelectionList = _ref2 => {
+  let {
+    selected,
+    onChange,
+    disabled,
+    options
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, selected.map(value => {
+    const selectedOption = (0, _index.findOptionChild)(value, options);
 
-  if (!selectedOption) {
-    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.';
-    throw new Error(message);
-  } // The chip should be disabled if the option or the select are disabled
+    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.';
+      throw new Error(message);
+    } // The chip should be disabled if the option or the select are disabled
 
 
-  const isDisabled = selectedOption.props.disabled || disabled; // Create an onRemove handler, but only if it's not disabled
+    const isDisabled = selectedOption.props.disabled || disabled; // Create an onRemove handler, but only if it's not disabled
 
-  const onRemove = isDisabled ? undefined : createRemoveHandler({
-    selected,
-    onChange,
-    value
-  });
-  return /*#__PURE__*/_react.default.createElement(_chip.Chip, {
-    key: value,
-    onRemove: onRemove,
-    disabled: isDisabled,
-    marginBottom: "0",
-    marginLeft: "0",
-    marginTop: "0",
-    overflow: true,
-    dense: true
-  }, selectedOption.props.label);
-}));
+    const onRemove = isDisabled ? undefined : createRemoveHandler({
+      selected,
+      onChange,
+      value
+    });
+    return /*#__PURE__*/_react.default.createElement(_chip.Chip, {
+      key: value,
+      onRemove: onRemove,
+      disabled: isDisabled,
+      marginBottom: "0",
+      marginLeft: "0",
+      marginTop: "0",
+      overflow: true,
+      dense: true
+    }, selectedOption.props.label);
+  }));
+};
 
 exports.SelectionList = SelectionList;
 SelectionList.propTypes = {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.InputWidth = exports.Required = exports.StatusError = exports.StatusWarning = exports.StatusValid = exports.WithHelpText = exports.Default = exports.default = void 0;
+exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -15,19 +15,9 @@ var _index2 = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const description = `
-\`MultiSelectField\` is a wrapper around a \`MultiSelect\` component that adds a label, help text, validation text, and other features.
+const description = "\n`MultiSelectField` is a wrapper around a `MultiSelect` component that adds a label, help text, validation text, and other features.\n\nSee the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).\n\n```js\nimport { MultiSelectField, MultiSelectOption } from '@dhis2/ui'\n```\n\n_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._\n";
 
-See the MultiSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).
-
-\`\`\`js
-import { MultiSelectField, MultiSelectOption } from '@dhis2/ui'
-\`\`\`
-
-_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
-`;
-
-const onChange = selected => alert(`Selected changed to: ${JSON.stringify(selected, null, 2)}`);
+const onChange = selected => alert("Selected changed to: ".concat(JSON.stringify(selected, null, 2)));
 
 const options = [/*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
   key: "1",
@@ -71,7 +61,7 @@ const options = [/*#__PURE__*/_react.default.createElement(_index.MultiSelectOpt
   label: "ten"
 })];
 var _default = {
-  title: 'Forms/Multi Select/Multi Select Field',
+  title: 'Multi Select Field',
   component: _index2.MultiSelectField,
   subcomponents: {
     MultiSelectOption: _index.MultiSelectOption
@@ -114,7 +104,7 @@ WithHelpText.args = {
 WithHelpText.parameters = {
   docs: {
     description: {
-      story: `_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._`
+      story: "_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._"
     }
   }
 };