@dhis2-ui/select 10.16.3-alpha.1 → 10.16.4

package/build/es/locales/index.js

@@ -41,37 +41,74 @@ import viTranslations from './vi/translations.json';
 import zhTranslations from './zh/translations.json';
 import zh_CNTranslations from './zh_CN/translations.json';
 const namespace = 'default';
-i18n.addResources('ar', namespace, arTranslations);
-i18n.addResources('ar_IQ', namespace, ar_IQTranslations);
-i18n.addResources('ckb', namespace, ckbTranslations);
-i18n.addResources('cs', namespace, csTranslations);
-i18n.addResources('da', namespace, daTranslations);
-i18n.addResources('en', namespace, enTranslations);
-i18n.addResources('en_US', namespace, en_USTranslations);
-i18n.addResources('es', namespace, esTranslations);
-i18n.addResources('es_419', namespace, es_419Translations);
-i18n.addResources('fr', namespace, frTranslations);
-i18n.addResources('hi_IN', namespace, hi_INTranslations);
-i18n.addResources('id', namespace, idTranslations);
-i18n.addResources('km', namespace, kmTranslations);
-i18n.addResources('lo', namespace, loTranslations);
-i18n.addResources('my', namespace, myTranslations);
-i18n.addResources('nb', namespace, nbTranslations);
-i18n.addResources('nl', namespace, nlTranslations);
-i18n.addResources('prs', namespace, prsTranslations);
-i18n.addResources('ps', namespace, psTranslations);
-i18n.addResources('pt', namespace, ptTranslations);
-i18n.addResources('pt_BR', namespace, pt_BRTranslations);
-i18n.addResources('ru', namespace, ruTranslations);
-i18n.addResources('sv', namespace, svTranslations);
-i18n.addResources('tet', namespace, tetTranslations);
-i18n.addResources('tg', namespace, tgTranslations);
-i18n.addResources('uk', namespace, ukTranslations);
-i18n.addResources('ur', namespace, urTranslations);
-i18n.addResources('uz_Latn', namespace, uz_LatnTranslations);
-i18n.addResources('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations);
-i18n.addResources('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations);
-i18n.addResources('vi', namespace, viTranslations);
-i18n.addResources('zh', namespace, zhTranslations);
-i18n.addResources('zh_CN', namespace, zh_CNTranslations);
+
+// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
+// custom translations from the datastore (added by the app adapter)
+
+i18n.addResourceBundle('ar', namespace, arTranslations, true, false);
+i18n.addResourceBundle('ar', namespace, arTranslations, true, false);
+i18n.addResourceBundle('ar_IQ', namespace, ar_IQTranslations, true, false);
+i18n.addResourceBundle('ar-IQ', namespace, ar_IQTranslations, true, false);
+i18n.addResourceBundle('ckb', namespace, ckbTranslations, true, false);
+i18n.addResourceBundle('ckb', namespace, ckbTranslations, true, false);
+i18n.addResourceBundle('cs', namespace, csTranslations, true, false);
+i18n.addResourceBundle('cs', namespace, csTranslations, true, false);
+i18n.addResourceBundle('da', namespace, daTranslations, true, false);
+i18n.addResourceBundle('da', namespace, daTranslations, true, false);
+i18n.addResourceBundle('en', namespace, enTranslations, true, false);
+i18n.addResourceBundle('en', namespace, enTranslations, true, false);
+i18n.addResourceBundle('en_US', namespace, en_USTranslations, true, false);
+i18n.addResourceBundle('en-US', namespace, en_USTranslations, true, false);
+i18n.addResourceBundle('es', namespace, esTranslations, true, false);
+i18n.addResourceBundle('es', namespace, esTranslations, true, false);
+i18n.addResourceBundle('es_419', namespace, es_419Translations, true, false);
+i18n.addResourceBundle('es-419', namespace, es_419Translations, true, false);
+i18n.addResourceBundle('fr', namespace, frTranslations, true, false);
+i18n.addResourceBundle('fr', namespace, frTranslations, true, false);
+i18n.addResourceBundle('hi_IN', namespace, hi_INTranslations, true, false);
+i18n.addResourceBundle('hi-IN', namespace, hi_INTranslations, true, false);
+i18n.addResourceBundle('id', namespace, idTranslations, true, false);
+i18n.addResourceBundle('id', namespace, idTranslations, true, false);
+i18n.addResourceBundle('km', namespace, kmTranslations, true, false);
+i18n.addResourceBundle('km', namespace, kmTranslations, true, false);
+i18n.addResourceBundle('lo', namespace, loTranslations, true, false);
+i18n.addResourceBundle('lo', namespace, loTranslations, true, false);
+i18n.addResourceBundle('my', namespace, myTranslations, true, false);
+i18n.addResourceBundle('my', namespace, myTranslations, true, false);
+i18n.addResourceBundle('nb', namespace, nbTranslations, true, false);
+i18n.addResourceBundle('nb', namespace, nbTranslations, true, false);
+i18n.addResourceBundle('nl', namespace, nlTranslations, true, false);
+i18n.addResourceBundle('nl', namespace, nlTranslations, true, false);
+i18n.addResourceBundle('prs', namespace, prsTranslations, true, false);
+i18n.addResourceBundle('prs', namespace, prsTranslations, true, false);
+i18n.addResourceBundle('ps', namespace, psTranslations, true, false);
+i18n.addResourceBundle('ps', namespace, psTranslations, true, false);
+i18n.addResourceBundle('pt', namespace, ptTranslations, true, false);
+i18n.addResourceBundle('pt', namespace, ptTranslations, true, false);
+i18n.addResourceBundle('pt_BR', namespace, pt_BRTranslations, true, false);
+i18n.addResourceBundle('pt-BR', namespace, pt_BRTranslations, true, false);
+i18n.addResourceBundle('ru', namespace, ruTranslations, true, false);
+i18n.addResourceBundle('ru', namespace, ruTranslations, true, false);
+i18n.addResourceBundle('sv', namespace, svTranslations, true, false);
+i18n.addResourceBundle('sv', namespace, svTranslations, true, false);
+i18n.addResourceBundle('tet', namespace, tetTranslations, true, false);
+i18n.addResourceBundle('tet', namespace, tetTranslations, true, false);
+i18n.addResourceBundle('tg', namespace, tgTranslations, true, false);
+i18n.addResourceBundle('tg', namespace, tgTranslations, true, false);
+i18n.addResourceBundle('uk', namespace, ukTranslations, true, false);
+i18n.addResourceBundle('uk', namespace, ukTranslations, true, false);
+i18n.addResourceBundle('ur', namespace, urTranslations, true, false);
+i18n.addResourceBundle('ur', namespace, urTranslations, true, false);
+i18n.addResourceBundle('uz_Latn', namespace, uz_LatnTranslations, true, false);
+i18n.addResourceBundle('uz-Latn', namespace, uz_LatnTranslations, true, false);
+i18n.addResourceBundle('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations, true, false);
+i18n.addResourceBundle('uz-Cyrl-UZ', namespace, uz_UZ_CyrlTranslations, true, false);
+i18n.addResourceBundle('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations, true, false);
+i18n.addResourceBundle('uz-Latn-UZ', namespace, uz_UZ_LatnTranslations, true, false);
+i18n.addResourceBundle('vi', namespace, viTranslations, true, false);
+i18n.addResourceBundle('vi', namespace, viTranslations, true, false);
+i18n.addResourceBundle('zh', namespace, zhTranslations, true, false);
+i18n.addResourceBundle('zh', namespace, zhTranslations, true, false);
+i18n.addResourceBundle('zh_CN', namespace, zh_CNTranslations, true, false);
+i18n.addResourceBundle('zh-CN', namespace, zh_CNTranslations, true, false);
 export default i18n;

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

@@ -23,8 +23,7 @@ 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(_ref => {
-    let [inputs, menus] = _ref;
+  cy.getAll(selectDataTest, menuDataTest).should(([inputs, menus]) => {
     expect(inputs.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $input = inputs[0];
@@ -37,8 +36,7 @@ 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(_ref2 => {
-    let [$input, $menu] = _ref2;
+  cy.getAll(inputSelector, menuSelector).should(([$input, $menu]) => {
     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

@@ -31,8 +31,7 @@ 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(_ref => {
-    let [emptyInputHeight, inputs] = _ref;
+  cy.getAll(emptyInputHeight, inputDataTest).should(([emptyInputHeight, inputs]) => {
     expect(inputs.length).to.equal(1);
     const $input = inputs[0];
     const inputRect = $input.getBoundingClientRect();
@@ -42,8 +41,7 @@ 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(_ref2 => {
-    let [selects, menus] = _ref2;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -56,8 +54,7 @@ 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(_ref3 => {
-    let [selects, menus] = _ref3;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -70,8 +67,7 @@ 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(_ref4 => {
-    let [selects, menus] = _ref4;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -85,8 +81,7 @@ 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(_ref5 => {
-    let [selects, menus] = _ref5;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -99,8 +94,7 @@ 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(_ref6 => {
-    let [inputs, menus] = _ref6;
+  cy.getAll(inputDataTest, menuDataTest).should(([inputs, menus]) => {
     expect(inputs.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $input = inputs[0];

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

@@ -2,31 +2,28 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { FilterableMenu as CommonFilterableMenu } from '../select/index.js';
 import { Menu } from './menu.js';
-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
-  });
-};
+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
+});
 FilterableMenu.propTypes = {
   dataTest: PropTypes.string.isRequired,
   noMatchText: PropTypes.string.isRequired,

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

@@ -7,21 +7,20 @@ import React from 'react';
 import i18n from '../locales/index.js';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { SelectionList } from './selection-list.js';
-const Input = _ref => {
-  let {
-    selected,
-    onChange,
-    clearable,
-    clearText,
-    placeholder,
-    dataTest,
-    prefix,
-    options,
-    className,
-    disabled,
-    inputMaxHeight = '100px',
-    collapseSelectionAfter
-  } = _ref;
+const Input = ({
+  selected,
+  onChange,
+  clearable,
+  clearText,
+  placeholder,
+  dataTest,
+  prefix,
+  options,
+  className,
+  disabled,
+  inputMaxHeight = '100px',
+  collapseSelectionAfter
+}) => {
   const hasSelection = selected.length > 0;
   const shouldCollapse = hasSelection && typeof collapseSelectionAfter === 'number' && selected.length > collapseSelectionAfter;
   const onClear = e => {

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

@@ -5,40 +5,36 @@ const onDisabledClick = (_, e) => {
   e.stopPropagation();
   e.preventDefault();
 };
-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);
-    }
+const createHandler = ({
+  isActive,
+  onChange,
+  selected,
+  value
+}) => (_, e) => {
+  e.stopPropagation();
 
-    // Otherwise, add it to selected
+  // If the option is currently selected remove it from the array of selected options
+  if (isActive) {
+    const filtered = removeOption(value, selected);
     const data = {
-      selected: selected.concat([value])
+      selected: filtered
     };
     return onChange(data, e);
+  }
+
+  // Otherwise, add it to selected
+  const data = {
+    selected: selected.concat([value])
   };
+  return onChange(data, e);
 };
-const Menu = _ref2 => {
-  let {
-    options,
-    onChange,
-    selected,
-    empty = '',
-    dataTest
-  } = _ref2;
+const Menu = ({
+  options,
+  onChange,
+  selected,
+  empty = '',
+  dataTest
+}) => {
   const renderedOptions = filterIgnored(options);
   if (React.Children.count(renderedOptions) === 0) {
     // If it's a string, supply it to our <Empty> component so it looks better

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

@@ -8,15 +8,12 @@ import { MultiSelect } from './multi-select.js';
 window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
-const CustomMultiSelectOption = _ref => {
-  let {
-    label,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: e => onClick({}, e)
-  }, label);
-};
+const CustomMultiSelectOption = ({
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: e => onClick({}, e)
+}, label);
 CustomMultiSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -562,10 +559,9 @@ export const WithOptionsThatCanBeAddedToTheInput = () => {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelect, {
     className: "select",
     selected: values,
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
+    onChange: ({
+      selected
+    }) => {
       window.onChange && window.onChange({
         selected
       });
@@ -605,23 +601,17 @@ export const MenuWidthChanging = () => {
       flexGrow: 1
     }
   }, /*#__PURE__*/React.createElement(MultiSelect, {
-    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", {
+    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", {
     style: {
       padding: '30px',
       border: '1px solid green'

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

@@ -11,37 +11,36 @@ import { Menu } from './menu.js';
 
 // stable object reference
 const staticArr = [];
-const MultiSelect = _ref => {
-  let {
-    className,
-    selected = staticArr,
-    tabIndex,
-    maxHeight,
-    inputMaxHeight,
-    onChange,
-    onFocus,
-    onKeyDown,
-    onBlur,
-    loading,
-    error,
-    warning,
-    valid,
-    disabled,
-    children,
-    clearable,
-    clearText,
-    filterable,
-    filterPlaceholder,
-    placeholder,
-    prefix,
-    empty,
-    loadingText,
-    noMatchText,
-    initialFocus,
-    dense,
-    collapseSelectionAfter,
-    dataTest = 'dhis2-uicore-multiselect'
-  } = _ref;
+const MultiSelect = ({
+  className,
+  selected = staticArr,
+  tabIndex,
+  maxHeight,
+  inputMaxHeight,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onBlur,
+  loading,
+  error,
+  warning,
+  valid,
+  disabled,
+  children,
+  clearable,
+  clearText,
+  filterable,
+  filterPlaceholder,
+  placeholder,
+  prefix,
+  empty,
+  loadingText,
+  noMatchText,
+  initialFocus,
+  dense,
+  collapseSelectionAfter,
+  dataTest = 'dhis2-uicore-multiselect'
+}) => {
   // If the select is filterable, use a filterable menu
   const menu = filterable ? /*#__PURE__*/React.createElement(FilterableMenu, {
     dataTest: dataTest,

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

@@ -24,15 +24,12 @@ const eventHandler = handlerName => (payload, event) => {
 const onChange = eventHandler('onChange');
 const onFocus = eventHandler('onFocus');
 const onBlur = eventHandler('onBlur');
-const CustomMultiSelectOption = _ref => {
-  let {
-    label,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: e => onClick({}, e)
-  }, label);
-};
+const CustomMultiSelectOption = ({
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: e => onClick({}, e)
+}, label);
 CustomMultiSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -333,10 +330,9 @@ export const WithMultipleSelectionsWrapped = () => {
   }, /*#__PURE__*/React.createElement(MultiSelect, {
     className: "select",
     selected: selected,
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
+    onChange: ({
+      selected
+    }) => {
       console.log({
         selected
       });
@@ -503,12 +499,9 @@ export const CollapseSelectionAfterThreshold = () => {
   }, /*#__PURE__*/React.createElement(MultiSelect, {
     className: "select",
     selected: selected,
-    onChange: _ref3 => {
-      let {
-        selected
-      } = _ref3;
-      return setSelected(selected);
-    },
+    onChange: ({
+      selected
+    }) => setSelected(selected),
     collapseSelectionAfter: 2,
     prefix: "Prefix text",
     clearable: true,