@dhis2-ui/select 8.1.11 → 8.2.2

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

@@ -3,28 +3,31 @@ import React from 'react';
 import { FilterableMenu as CommonFilterableMenu } from '../select/index.js';
 import { Menu } from './menu.js';
 
-const FilterableMenu = ({
-  dataTest,
-  options,
-  onChange,
-  selected,
-  empty,
-  handleClose,
-  handleFocusInput,
-  placeholder,
-  noMatchText
-}) => /*#__PURE__*/React.createElement(CommonFilterableMenu, {
-  dataTest: dataTest,
-  options: options,
-  onChange: onChange,
-  selected: selected,
-  empty: empty,
-  handleClose: handleClose,
-  handleFocusInput: handleFocusInput,
-  placeholder: placeholder,
-  noMatchText: noMatchText,
-  Menu: Menu
-});
+const FilterableMenu = _ref => {
+  let {
+    dataTest,
+    options,
+    onChange,
+    selected,
+    empty,
+    handleClose,
+    handleFocusInput,
+    placeholder,
+    noMatchText
+  } = _ref;
+  return /*#__PURE__*/React.createElement(CommonFilterableMenu, {
+    dataTest: dataTest,
+    options: options,
+    onChange: onChange,
+    selected: selected,
+    empty: empty,
+    handleClose: handleClose,
+    handleFocusInput: handleFocusInput,
+    placeholder: placeholder,
+    noMatchText: noMatchText,
+    Menu: Menu
+  });
+};
 
 FilterableMenu.propTypes = {
   dataTest: PropTypes.string.isRequired,

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

@@ -7,19 +7,20 @@ import React from 'react';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { SelectionList } from './selection-list.js';
 
-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) => {
@@ -34,10 +35,10 @@ const Input = ({
     className: _JSXStyle.dynamic([["1360178250", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
-    dataTest: `${dataTest}-prefix`
+    dataTest: "".concat(dataTest, "-prefix")
   }), !hasSelection && !prefix && /*#__PURE__*/React.createElement(InputPlaceholder, {
     placeholder: placeholder,
-    dataTest: `${dataTest}-placeholder`
+    dataTest: "".concat(dataTest, "-placeholder")
   }), hasSelection && /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["1360178250", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(SelectionList, {
@@ -50,14 +51,14 @@ const Input = ({
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
-    dataTest: `${dataTest}-clear`
+    dataTest: "".concat(dataTest, "-clear")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1360178250",
     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:${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.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:".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;}", ".root-right.__jsx-style-dynamic-selector{margin-left:auto;margin-right:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
-  }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
+  }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));
 };
 
 Input.defaultProps = {

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

@@ -7,36 +7,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
+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 = removeOption(value, selected);
+      const data = {
+        selected: filtered
+      };
+      return onChange(data, e);
+    } // Otherwise, add it to selected
+
 
-  if (isActive) {
-    const filtered = removeOption(value, 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 = filterIgnored(options);
 
   if (React.Children.count(renderedOptions) === 0) {
@@ -44,7 +48,7 @@ const Menu = ({
     if (typeof empty === 'string') {
       return /*#__PURE__*/React.createElement(Empty, {
         message: empty,
-        dataTest: `${dataTest}-empty`
+        dataTest: "".concat(dataTest, "-empty")
       });
     } // Otherwise just render the supplied markup
 

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

@@ -9,34 +9,35 @@ import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
 
-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.createElement(FilterableMenu, {
     dataTest: dataTest,
@@ -77,7 +78,7 @@ const MultiSelect = ({
     dense: dense
   }, children, loading && /*#__PURE__*/React.createElement(CommonLoading, {
     message: loadingText,
-    dataTest: `${dataTest}-loading`
+    dataTest: "".concat(dataTest, "-loading")
   }))), /*#__PURE__*/React.createElement(StatusIcon, {
     error: error,
     valid: valid,
@@ -85,7 +86,7 @@ const MultiSelect = ({
   }), /*#__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:${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(spacers.dp8, ";}"), ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 
 MultiSelect.defaultProps = {

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

@@ -10,12 +10,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__*/React.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomMultiSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomMultiSelectOption.propTypes = {
   label: PropTypes.string,
@@ -528,9 +531,10 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
     className: "select",
     selected: values,
-    onChange: ({
-      selected
-    }) => {
+    onChange: _ref2 => {
+      let {
+        selected
+      } = _ref2;
       window.onChange && window.onChange({
         selected
       });
@@ -569,17 +573,23 @@ storiesOf('MultiSelect', module).add('With options', () => /*#__PURE__*/React.cr
       flexGrow: 1
     }
   }, /*#__PURE__*/React.createElement(MultiSelect, {
-    onChange: ({
-      selected
-    }) => console.log('size changed to ' + selected)
-  }, options.map(({
-    name,
-    id
-  }) => /*#__PURE__*/React.createElement(MultiSelectOption, {
-    key: id,
-    value: id,
-    label: name
-  })))), toggle && /*#__PURE__*/React.createElement("div", {
+    onChange: _ref3 => {
+      let {
+        selected
+      } = _ref3;
+      return console.log('size changed to ' + selected);
+    }
+  }, options.map(_ref4 => {
+    let {
+      name,
+      id
+    } = _ref4;
+    return /*#__PURE__*/React.createElement(MultiSelectOption, {
+      key: id,
+      value: id,
+      label: name
+    });
+  }))), toggle && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '30px',
       border: '1px solid green'

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

@@ -4,35 +4,26 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { MultiSelectOption } from '../index.js';
 import { MultiSelect } from './index.js';
-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.createElement("div", {
-  onClick: e => onClick({}, e)
-}, label);
+const CustomMultiSelectOption = _ref => {
+  let {
+    label,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: e => onClick({}, e)
+  }, label);
+};
 
 CustomMultiSelectOption.propTypes = {
   label: PropTypes.string,
@@ -49,7 +40,7 @@ const requiredIfArgType = {
   }
 };
 export default {
-  title: 'Forms/Multi Select/Multi Select',
+  title: 'Multi Select',
   component: MultiSelect,
   parameters: {
     docs: {

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

@@ -3,50 +3,56 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { removeOption, findOptionChild } from '../select/index.js';
 
-const createRemoveHandler = ({
-  selected,
-  onChange,
-  value
-}) => (_, e) => {
-  const filtered = removeOption(value, selected);
-  const data = {
-    selected: filtered
+const createRemoveHandler = _ref => {
+  let {
+    selected,
+    onChange,
+    value
+  } = _ref;
+  return (_, e) => {
+    const filtered = removeOption(value, selected);
+    const data = {
+      selected: filtered
+    };
+    onChange(data, e);
   };
-  onChange(data, e);
 };
 
-const SelectionList = ({
-  selected,
-  onChange,
-  disabled,
-  options
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(value => {
-  const selectedOption = findOptionChild(value, options);
+const SelectionList = _ref2 => {
+  let {
+    selected,
+    onChange,
+    disabled,
+    options
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selected.map(value => {
+    const selectedOption = 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.createElement(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.createElement(Chip, {
+      key: value,
+      onRemove: onRemove,
+      disabled: isDisabled,
+      marginBottom: "0",
+      marginLeft: "0",
+      marginTop: "0",
+      overflow: true,
+      dense: true
+    }, selectedOption.props.label);
+  }));
+};
 
 SelectionList.propTypes = {
   disabled: PropTypes.bool,

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

@@ -2,19 +2,9 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { MultiSelectOption } from '../index.js';
 import { MultiSelectField } from './index.js';
-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.createElement(MultiSelectOption, {
   key: "1",
@@ -58,7 +48,7 @@ const options = [/*#__PURE__*/React.createElement(MultiSelectOption, {
   label: "ten"
 })];
 export default {
-  title: 'Forms/Multi Select/Multi Select Field',
+  title: 'Multi Select Field',
   component: MultiSelectField,
   subcomponents: {
     MultiSelectOption
@@ -98,7 +88,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/es/multi-select-option/multi-select-option.js

@@ -11,37 +11,40 @@ const {
 } = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2013783366"
-  }, [`.jsx-2013783366{padding:${spacers.dp8} ${spacers.dp12};}`]),
+  }, [".jsx-2013783366{padding:".concat(spacers.dp8, " ").concat(spacers.dp12, ";}")]),
   className: "jsx-2013783366"
 };
 
-const MultiSelectOption = ({
-  label,
-  active,
-  disabled,
-  onClick,
-  className,
-  dataTest,
-  value
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": dataTest,
-  "data-value": value,
-  "data-label": label,
-  className: _JSXStyle.dynamic([["3813980210", [colors.grey200]]]) + " " + (cx(className, {
-    disabled
-  }) || "")
-}, /*#__PURE__*/React.createElement(Checkbox, {
-  name: label,
-  className: checkboxClassname,
-  checked: active,
-  label: label,
-  onChange: onClick,
-  disabled: disabled,
-  dense: true
-}), styles, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "3813980210",
-  dynamic: [colors.grey200]
-}, [`div.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+const MultiSelectOption = _ref => {
+  let {
+    label,
+    active,
+    disabled,
+    onClick,
+    className,
+    dataTest,
+    value
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    "data-value": value,
+    "data-label": label,
+    className: _JSXStyle.dynamic([["3813980210", [colors.grey200]]]) + " " + (cx(className, {
+      disabled
+    }) || "")
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    name: label,
+    className: checkboxClassname,
+    checked: active,
+    label: label,
+    onChange: onClick,
+    disabled: disabled,
+    dense: true
+  }), styles, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3813980210",
+    dynamic: [colors.grey200]
+  }, ["div.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey200, ";}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+};
 
 MultiSelectOption.defaultProps = {
   dataTest: 'dhis2-uicore-multiselectoption'

package/build/es/select/debounce/debounce.js

@@ -1,3 +1,5 @@
+var _this = this;
+
 /**
  * Returns a function, that, as long as it continues to be invoked, will not be triggered. The
  * function will be called after it stops being called for N milliseconds. If `immediate` is
@@ -5,8 +7,12 @@
  */
 export const debounce = (func, wait, immediate) => {
   let timeout;
-  return (...args) => {
-    const context = this;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    const context = _this;
 
     const later = () => {
       timeout = null;