@dhis2-ui/select 8.2.0 → 8.2.1

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

@@ -28,7 +28,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the SingleSelect input is left aligned with the menu', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   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 SingleSelect 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/single-select/features/position/index.js

@@ -24,7 +24,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-singleselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
+  cy.getAll(selectDataTest, menuDataTest).should(_ref => {
+    let [selects, menus] = _ref;
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -37,7 +38,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-singleselect"]';
   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];
@@ -50,7 +52,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('it is rendered on top of the SingleSelect', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   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];
@@ -64,7 +67,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
 (0, _steps.Then)('the left of the SingleSelect is aligned with the left of the anchor', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   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];

package/build/cjs/single-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/single-select/input.js

@@ -23,19 +23,20 @@ var _selection = require("./selection.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 && typeof selected === 'string';
 
   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(_selection.Selection, {
@@ -64,14 +65,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/single-select/menu.js

@@ -18,15 +18,16 @@ const onIgnoredClick = (_, e) => {
   e.preventDefault();
 };
 
-const Menu = ({
-  options,
-  onChange,
-  selected,
-  empty,
-  handleFocusInput,
-  handleClose,
-  dataTest
-}) => {
+const Menu = _ref => {
+  let {
+    options,
+    onChange,
+    selected,
+    empty,
+    handleFocusInput,
+    handleClose,
+    dataTest
+  } = _ref;
   const renderedOptions = (0, _index.filterIgnored)(options);
 
   if (_react.default.Children.count(renderedOptions) === 0) {
@@ -34,7 +35,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/single-select/selection.js

@@ -19,15 +19,16 @@ var _index = require("../select/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Selection = ({
-  options,
-  selected,
-  className
-}) => {
+const Selection = _ref => {
+  let {
+    options,
+    selected,
+    className
+  } = _ref;
   const selectedOption = (0, _index.findOptionChild)(selected, options);
 
   if (!selectedOption) {
-    const message = `There is no option with the value: "${selected}". ` + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
+    const message = "There is no option with the value: \"".concat(selected, "\". ") + 'Make sure that the value passed to the selected ' + 'prop matches the value of an existing option.';
     throw new Error(message);
   }
 
@@ -40,7 +41,7 @@ const Selection = ({
   }, icon), label, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2368250986",
     dynamic: [_uiConstants.spacers.dp8, _uiConstants.spacers.dp16, _uiConstants.spacers.dp16]
-  }, [".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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", `.root-icon.__jsx-style-dynamic-selector{margin-right:${_uiConstants.spacers.dp8};width:${_uiConstants.spacers.dp16};height:${_uiConstants.spacers.dp16};overflow:hidden;}`]));
+  }, [".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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".root-icon.__jsx-style-dynamic-selector{margin-right:".concat(_uiConstants.spacers.dp8, ";width:").concat(_uiConstants.spacers.dp16, ";height:").concat(_uiConstants.spacers.dp16, ";overflow:hidden;}")]));
 };
 
 exports.Selection = Selection;

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

@@ -27,34 +27,35 @@ var _menu = require("./menu.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const SingleSelect = ({
-  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 SingleSelect = _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 SingleSelect = ({
     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 SingleSelect = ({
   }), /*#__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.SingleSelect = SingleSelect;

package/build/cjs/single-select/single-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 CustomSingleSelectOption = ({
-  label,
-  onClick
-}) => /*#__PURE__*/_react2.default.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomSingleSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react2.default.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomSingleSelectOption.propTypes = {
   label: _propTypes.default.string,
@@ -548,17 +551,23 @@ const options = [{
       flexGrow: 1
     }
   }, /*#__PURE__*/_react2.default.createElement(_index2.SingleSelect, {
-    onChange: ({
-      selected
-    }) => console.log('size changed to ' + selected)
-  }, options.map(({
-    name,
-    id
-  }) => /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
-    key: id,
-    value: id,
-    label: name
-  })))), toggle && /*#__PURE__*/_react2.default.createElement("div", {
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
+      return console.log('size changed to ' + selected);
+    }
+  }, options.map(_ref3 => {
+    let {
+      name,
+      id
+    } = _ref3;
+    return /*#__PURE__*/_react2.default.createElement(_index.SingleSelectOption, {
+      key: id,
+      value: id,
+      label: name
+    });
+  }))), toggle && /*#__PURE__*/_react2.default.createElement("div", {
     style: {
       padding: '30px',
       border: '1px solid green'

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShiftedIntoView = exports.FlippedPosition = exports.DefaultPosition = exports.WithFilterField = exports.WithClearButtonSelectionAndOnChange = 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.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,33 +19,26 @@ var _index2 = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const description = `
-Use a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.
-
-Learn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
-
-\`\`\`js
-import { SingleSelect, SingleSelectOption } from '@dhis2/ui'
-\`\`\`
-
-_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (interactive) examples, see individual stories in the 'Canvas' tab._
-`;
+const description = "\nUse a select component wherever the user needs to make a selection of one or more options from a list of 6 or more options. If there are less than 6 options to choose from and space permits, use checkboxes for multiple selection and radio buttons for single selection. If the user needs to make a complex selection with a specific ordering, use a transfer instead.\n\nLearn more about using Selects at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).\n\n```js\nimport { SingleSelect, SingleSelectOption } from '@dhis2/ui'\n```\n\n_**Note:** Due to demo limitations on this page, only one representative example is rendered here. For more (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 CustomSingleSelectOption = ({
-  label,
-  onClick
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomSingleSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomSingleSelectOption.propTypes = {
   label: _propTypes.default.string,
@@ -62,7 +55,7 @@ const requiredIfArgType = {
   }
 };
 var _default = {
-  title: 'Forms/Single Select/Single Select',
+  title: 'Single Select',
   component: _index2.SingleSelect,
   parameters: {
     docs: {

package/build/cjs/single-select-field/single-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 = `
-\`SingleSelectField\` is a wrapper around a \`SingleSelect\` component that adds a label, help text, validation text, and other features.
+const description = "\n`SingleSelectField` is a wrapper around a `SingleSelect` component that adds a label, help text, validation text, and other features.\n\nSee the SingleSelect 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 { SingleSelectField, SingleSelectOption } 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 SingleSelect 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 { SingleSelectField, SingleSelectOption } 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.SingleSelectOption, {
   key: "1",
@@ -71,7 +61,7 @@ const options = [/*#__PURE__*/_react.default.createElement(_index.SingleSelectOp
   label: "ten"
 })];
 var _default = {
-  title: 'Forms/Single Select/Single Select Field',
+  title: 'Single Select Field',
   component: _index2.SingleSelectField,
   subcomponents: {
     SingleSelectOption: _index.SingleSelectOption
@@ -113,7 +103,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._"
     }
   }
 };

package/build/cjs/single-select-option/single-select-option.js

@@ -17,27 +17,30 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const SingleSelectOption = ({
-  label,
-  active,
-  disabled,
-  onClick,
-  className,
-  dataTest,
-  value
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  onClick: e => onClick({}, e),
-  "data-test": dataTest,
-  "data-value": value,
-  "data-label": label,
-  className: _style.default.dynamic([["2046100779", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)(className, {
+const SingleSelectOption = _ref => {
+  let {
+    label,
+    active,
     disabled,
-    active
-  }) || "")
-}, label, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2046100779",
-  dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]
-}, [`div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${_uiConstants.colors.grey900};padding:${_uiConstants.spacers.dp8} ${_uiConstants.spacers.dp12};}`, `div.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};}`, `div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.teal700};color:${_uiConstants.colors.white};cursor:auto;}`, `div.disabled.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+    onClick,
+    className,
+    dataTest,
+    value
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: e => onClick({}, e),
+    "data-test": dataTest,
+    "data-value": value,
+    "data-label": label,
+    className: _style.default.dynamic([["2046100779", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)(className, {
+      disabled,
+      active
+    }) || "")
+  }, label, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2046100779",
+    dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]
+  }, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(_uiConstants.colors.grey900, ";padding:").concat(_uiConstants.spacers.dp8, " ").concat(_uiConstants.spacers.dp12, ";}"), "div.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.teal700, ";color:").concat(_uiConstants.colors.white, ";cursor:auto;}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+};
 
 exports.SingleSelectOption = SingleSelectOption;
 SingleSelectOption.defaultProps = {

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

@@ -24,7 +24,8 @@ When('the MultiSelect menu is open', () => {
 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];
@@ -37,7 +38,8 @@ Then('the MultiSelect input is left aligned with the menu', () => {
 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/es/multi-select/features/position/index.js

@@ -32,7 +32,8 @@ When('an option is clicked', () => {
 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();
@@ -42,7 +43,8 @@ Then('the Input remains the same height', () => {
 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];
@@ -55,7 +57,8 @@ Then('the top of the menu is aligned with the bottom of the input', () => {
 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];
@@ -68,7 +71,8 @@ Then('the bottom of the menu is aligned with the top of the input', () => {
 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];
@@ -82,7 +86,8 @@ Then('it is rendered on top of the MultiSelect', () => {
 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];
@@ -95,7 +100,8 @@ Then('the left of the Menu is aligned with the left of the Input', () => {
 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];