@dhis2-ui/select 9.12.0-alpha.4 → 9.13.0

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

@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('<MultiSelect />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_multiSelect.MultiSelect, {
       placeholder: "placeholder",
       onKeyDown: onKeyDown
     }));

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

@@ -35,7 +35,7 @@ describe('<SelectionList />', () => {
       });
       const selected = ['value'];
       expect(() => {
-        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+        (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
           selected: selected,
           options: options,
           disabled: false,
@@ -53,7 +53,7 @@ describe('<SelectionList />', () => {
       const selected = ['value'];
       const {
         getByText
-      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+      } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
         selected: selected,
         options: options,
         disabled: false,
@@ -69,7 +69,7 @@ describe('<SelectionList />', () => {
         value: "1"
       });
       const selected = ['value'];
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
         selected: selected,
         options: options,
         disabled: false,
@@ -88,7 +88,7 @@ describe('<SelectionList />', () => {
       });
       const selected = ['value'];
       expect(() => {
-        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
+        (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selectionList.SelectionList, {
           selected: selected,
           options: options,
           disabled: false,

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

@@ -25,7 +25,7 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight
+    inputMaxHeight = '100px'
   } = _ref;
   const hasSelection = selected.length > 0;
   const onClear = e => {
@@ -65,9 +65,6 @@ const Input = _ref => {
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
 };
 exports.Input = Input;
-Input.defaultProps = {
-  inputMaxHeight: '100px'
-};
 Input.propTypes = {
   dataTest: _propTypes2.default.string.isRequired,
   className: _propTypes2.default.string,

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

@@ -43,7 +43,7 @@ const Menu = _ref2 => {
     options,
     onChange,
     selected,
-    empty,
+    empty = '',
     dataTest
   } = _ref2;
   const renderedOptions = (0, _index.filterIgnored)(options);
@@ -92,9 +92,6 @@ const Menu = _ref2 => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 exports.Menu = Menu;
-Menu.defaultProps = {
-  empty: ''
-};
 Menu.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
   empty: _propTypes.default.node,

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

@@ -15,10 +15,12 @@ var _filterableMenu = require("./filterable-menu.js");
 var _input = require("./input.js");
 var _menu = require("./menu.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// stable object reference
+const staticArr = [];
 const MultiSelect = _ref => {
   let {
     className,
-    selected,
+    selected = staticArr,
     tabIndex,
     maxHeight,
     inputMaxHeight,
@@ -43,7 +45,7 @@ const MultiSelect = _ref => {
     noMatchText,
     initialFocus,
     dense,
-    dataTest
+    dataTest = 'dhis2-uicore-multiselect'
   } = _ref;
   // If the select is filterable, use a filterable menu
   const menu = filterable ? /*#__PURE__*/_react.default.createElement(_filterableMenu.FilterableMenu, {
@@ -97,10 +99,6 @@ const MultiSelect = _ref => {
   }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_uiConstants.spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 exports.MultiSelect = MultiSelect;
-MultiSelect.defaultProps = {
-  selected: [],
-  dataTest: 'dhis2-uicore-multiselect'
-};
 MultiSelect.propTypes = {
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,

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

@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('<MultiSelect />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_multiSelectField.MultiSelectField, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_multiSelectField.MultiSelectField, {
       label: "label",
       placeholder: "placeholder",
       onKeyDown: onKeyDown

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

@@ -12,6 +12,9 @@ var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../locales/index.js"));
 var _index2 = require("../multi-select/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // TODO: translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
@@ -34,7 +37,7 @@ class MultiSelectField extends _react.default.Component {
       disabled,
       warning,
       loading,
-      selected,
+      selected = MultiSelectField.defaultProps.selected,
       tabIndex,
       helpText,
       validationText,
@@ -43,17 +46,17 @@ class MultiSelectField extends _react.default.Component {
       inputWidth,
       children,
       clearable,
-      clearText,
+      clearText = MultiSelectField.defaultProps.clearText,
       filterable,
-      filterPlaceholder,
+      filterPlaceholder = MultiSelectField.defaultProps.filterPlaceholder,
       placeholder,
       prefix,
-      empty,
-      loadingText,
-      noMatchText,
+      empty = MultiSelectField.defaultProps.empty,
+      loadingText = MultiSelectField.defaultProps.loadingText,
+      noMatchText = MultiSelectField.defaultProps.noMatchText,
       initialFocus,
       dense,
-      dataTest
+      dataTest = MultiSelectField.defaultProps.dataTest
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_field.Field, {
       className: className,
@@ -98,7 +101,7 @@ class MultiSelectField extends _react.default.Component {
   }
 }
 exports.MultiSelectField = MultiSelectField;
-MultiSelectField.defaultProps = {
+_defineProperty(MultiSelectField, "defaultProps", {
   selected: [],
   dataTest: 'dhis2-uiwidgets-multiselectfield',
   clearText: () => _index.default.t('Clear'),
@@ -106,7 +109,7 @@ MultiSelectField.defaultProps = {
   filterPlaceholder: () => _index.default.t('Type to filter options'),
   loadingText: () => _index.default.t('Loading options'),
   noMatchText: () => _index.default.t('No options found')
-};
+});
 MultiSelectField.propTypes = {
   /** Should be `MultiSelectOption` components */
   children: _propTypes.default.node,

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

@@ -78,7 +78,12 @@ var _default = exports.default = {
   // default args for stories
   args: {
     // Fix default prop issues - causes 'i18n is not defined' error
-    ..._index2.MultiSelectField.defaultProps,
+    dataTest: 'dhis2-uiwidgets-multiselectfield',
+    clearText: 'Clear',
+    empty: 'No data found',
+    filterPlaceholder: 'Type to filter options',
+    loadingText: 'Loading options',
+    noMatchText: 'No options found',
     label: 'Default label',
     selected: ['1'],
     children: options,

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

@@ -28,7 +28,7 @@ const MultiSelectOption = _ref => {
     disabled,
     onClick,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-multiselectoption',
     value
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -52,9 +52,6 @@ const MultiSelectOption = _ref => {
   }, [`div.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
 };
 exports.MultiSelectOption = MultiSelectOption;
-MultiSelectOption.defaultProps = {
-  dataTest: 'dhis2-uicore-multiselectoption'
-};
 MultiSelectOption.propTypes = {
   label: _propTypes.default.string.isRequired,
   value: _propTypes.default.string.isRequired,

package/build/cjs/select/__tests__/select.test.js

@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('<Select />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_select.Select, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_select.Select, {
       input: /*#__PURE__*/_react2.default.createElement("input", {
         type: "text"
       }),

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

@@ -16,7 +16,7 @@ const InputWrapper = _ref => {
     dataTest,
     onToggle,
     children,
-    tabIndex,
+    tabIndex = '0',
     error,
     warning,
     valid,
@@ -48,9 +48,6 @@ const InputWrapper = _ref => {
   }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:white;border-radius:3px;border:1px solid ${_uiConstants.colors.grey500};box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);}`, `.root.__jsx-style-dynamic-selector:not(.disabled):focus,.root.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `.root.valid.__jsx-style-dynamic-selector{border-color:${_uiConstants.theme.valid};}`, `.root.warning.__jsx-style-dynamic-selector{border-color:${_uiConstants.theme.warning};}`, `.root.error.__jsx-style-dynamic-selector{border-color:${_uiConstants.theme.error};}`, `.root.disabled.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`, ".root.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}", ".root-children.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".root-right.__jsx-style-dynamic-selector{margin-block-start:4px;margin-inline-start:8px;}"]));
 };
 exports.InputWrapper = InputWrapper;
-InputWrapper.defaultProps = {
-  tabIndex: '0'
-};
 InputWrapper.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
   inputRef: _propTypes.default.object.isRequired,

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

@@ -15,15 +15,14 @@ const MenuWrapper = _ref => {
   let {
     children,
     dataTest,
-    maxHeight,
+    maxHeight = '280px',
     menuWidth,
     onClick,
     selectRef
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
     onBackdropClick: onClick,
-    transparent: true,
-    disablePortal: true
+    transparent: true
   }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
     reference: selectRef,
     placement: "bottom-start",
@@ -37,9 +36,6 @@ const MenuWrapper = _ref => {
   }, [`div.__jsx-style-dynamic-selector{width:${menuWidth};height:auto;max-height:${maxHeight};overflow:auto;background:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey200};border-radius:3px;box-shadow:${_uiConstants.elevations.e300};}`]))));
 };
 exports.MenuWrapper = MenuWrapper;
-MenuWrapper.defaultProps = {
-  maxHeight: '280px'
-};
 MenuWrapper.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
   menuWidth: _propTypes.default.string.isRequired,

package/build/cjs/select/select.js

@@ -219,9 +219,9 @@ class Select extends _react.Component {
   }
 }
 exports.Select = Select;
-Select.defaultProps = {
+_defineProperty(Select, "defaultProps", {
   dataTest: 'dhis2-uicore-select'
-};
+});
 Select.propTypes = {
   input: _propTypes.default.element.isRequired,
   menu: _propTypes.default.element.isRequired,

package/build/cjs/single-select/__tests__/selection.test.js

@@ -35,7 +35,7 @@ describe('<Selection />', () => {
       });
       const selected = 'value';
       expect(() => {
-        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+        (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selection.Selection, {
           selected: selected,
           options: options,
           disabled: false,
@@ -53,7 +53,7 @@ describe('<Selection />', () => {
       const selected = 'value';
       const {
         getByText
-      } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+      } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selection.Selection, {
         selected: selected,
         options: options,
         disabled: false,
@@ -69,7 +69,7 @@ describe('<Selection />', () => {
         value: "1"
       });
       const selected = 'value';
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+      (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selection.Selection, {
         selected: selected,
         options: options,
         disabled: false,
@@ -88,7 +88,7 @@ describe('<Selection />', () => {
       });
       const selected = 'value';
       expect(() => {
-        (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_selection.Selection, {
+        (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_selection.Selection, {
           selected: selected,
           options: options,
           disabled: false,

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

@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('<SingleSelect />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_singleSelect.SingleSelect, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_singleSelect.SingleSelect, {
       placeholder: "placeholder",
       onKeyDown: onKeyDown
     }));

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

@@ -25,7 +25,7 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight
+    inputMaxHeight = '100px'
   } = _ref;
   const hasSelection = selected && typeof selected === 'string';
   const onClear = e => {
@@ -63,9 +63,6 @@ const Input = _ref => {
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
 };
 exports.Input = Input;
-Input.defaultProps = {
-  inputMaxHeight: '100px'
-};
 Input.propTypes = {
   dataTest: _propTypes2.default.string.isRequired,
   className: _propTypes2.default.string,

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

@@ -17,7 +17,7 @@ const Menu = _ref => {
     options,
     onChange,
     selected,
-    empty,
+    empty = '',
     handleFocusInput,
     handleClose,
     dataTest
@@ -70,9 +70,6 @@ const Menu = _ref => {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 };
 exports.Menu = Menu;
-Menu.defaultProps = {
-  empty: ''
-};
 Menu.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
   empty: _propTypes.default.node,

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

@@ -18,7 +18,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 const SingleSelect = _ref => {
   let {
     className,
-    selected,
+    selected = '',
     tabIndex,
     maxHeight,
     inputMaxHeight,
@@ -43,7 +43,7 @@ const SingleSelect = _ref => {
     noMatchText,
     initialFocus,
     dense,
-    dataTest
+    dataTest = 'dhis2-uicore-singleselect'
   } = _ref;
   // If the select is filterable, use a filterable menu
   const menu = filterable ? /*#__PURE__*/_react.default.createElement(_filterableMenu.FilterableMenu, {
@@ -97,10 +97,6 @@ const SingleSelect = _ref => {
   }, [`.root.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_uiConstants.spacers.dp8};}`, ".root-input.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;}"]));
 };
 exports.SingleSelect = SingleSelect;
-SingleSelect.defaultProps = {
-  selected: '',
-  dataTest: 'dhis2-uicore-singleselect'
-};
 SingleSelect.propTypes = {
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,

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

@@ -7,7 +7,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 describe('<SingleSelect />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_singleSelectField.SingleSelectField, {
+    (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_singleSelectField.SingleSelectField, {
       label: "label",
       placeholder: "placeholder",
       onKeyDown: onKeyDown

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

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutOptions = exports.WithValidationText = exports.WithLoading = exports.WithLabelAndRequiredStatus = exports.WithLabel = exports.WithHiddenParent = exports.WithHelpText = exports.WithFilterable = exports.WithClearableAndSelectedOption = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
+exports.default = exports.WithoutOptions = exports.WithValidationText = exports.WithLoading = exports.WithLabelAndRequiredStatus = exports.WithLabel = exports.WithHelpText = exports.WithFilterable = exports.WithClearableAndSelectedOption = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../index.js");
 var _index2 = require("./index.js");
@@ -87,28 +86,4 @@ const WithLoading = () => /*#__PURE__*/_react.default.createElement(_index2.Sing
 });
 exports.WithLoading = WithLoading;
 const WithoutOptions = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, null);
-exports.WithoutOptions = WithoutOptions;
-const WithHiddenParent = () => {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-3657609608" + " " + "container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-3657609608" + " " + "hoverSpan"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "jsx-3657609608"
-  }, "Hover over me"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "jsx-3657609608" + " " + "hiddenSelect"
-  }, /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
-    dataTest: "hoverable-select-field",
-    label: "Choose something",
-    onChange: () => {}
-  }, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
-    value: "1",
-    label: "one"
-  }), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
-    value: "2",
-    label: "two"
-  }))))), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3657609608"
-  }, [".container.jsx-3657609608{width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:1rem;}", ".hiddenSelect.jsx-3657609608{display:none;}", ".hoverSpan.jsx-3657609608:hover .hiddenSelect.jsx-3657609608{display:block;}"]));
-};
-exports.WithHiddenParent = WithHiddenParent;
+exports.WithoutOptions = WithoutOptions;

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

@@ -12,6 +12,9 @@ var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../locales/index.js"));
 var _index2 = require("../single-select/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // TODO: translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
@@ -34,7 +37,7 @@ class SingleSelectField extends _react.default.Component {
       warning,
       disabled,
       loading,
-      selected,
+      selected = SingleSelectField.defaultProps.selected,
       tabIndex,
       helpText,
       validationText,
@@ -43,17 +46,17 @@ class SingleSelectField extends _react.default.Component {
       inputWidth,
       children,
       clearable,
-      clearText,
+      clearText = SingleSelectField.defaultProps.clearText,
       filterable,
-      filterPlaceholder,
+      filterPlaceholder = SingleSelectField.defaultProps.filterPlaceholder,
       placeholder,
       prefix,
-      empty,
-      loadingText,
-      noMatchText,
+      empty = SingleSelectField.defaultProps.empty,
+      loadingText = SingleSelectField.defaultProps.loadingText,
+      noMatchText = SingleSelectField.defaultProps.noMatchText,
       initialFocus,
       dense,
-      dataTest
+      dataTest = SingleSelectField.defaultProps.dataTest
     } = this.props;
     return /*#__PURE__*/_react.default.createElement(_field.Field, {
       className: className,
@@ -98,7 +101,7 @@ class SingleSelectField extends _react.default.Component {
   }
 }
 exports.SingleSelectField = SingleSelectField;
-SingleSelectField.defaultProps = {
+_defineProperty(SingleSelectField, "defaultProps", {
   dataTest: 'dhis2-uiwidgets-singleselectfield',
   selected: '',
   clearText: () => _index.default.t('Clear'),
@@ -106,7 +109,7 @@ SingleSelectField.defaultProps = {
   filterPlaceholder: () => _index.default.t('Type to filter options'),
   loadingText: () => _index.default.t('Loading options'),
   noMatchText: () => _index.default.t('No options found')
-};
+});
 SingleSelectField.propTypes = {
   /** Should be `SingleSelectOption` components */
   children: _propTypes.default.node,

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

@@ -78,7 +78,13 @@ var _default = exports.default = {
   // default args for stories
   args: {
     // Fix default prop issues - causes 'i18n is not defined' error
-    ..._index2.SingleSelectField.defaultProps,
+    dataTest: 'dhis2-uiwidgets-singleselectfield',
+    selected: '',
+    clearText: 'Clear',
+    empty: 'No data found',
+    filterPlaceholder: 'Type to filter options',
+    loadingText: 'Loading options',
+    noMatchText: 'No options found',
     label: 'Default label',
     children: options,
     onChange: onChange

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

@@ -17,7 +17,7 @@ const SingleSelectOption = _ref => {
     disabled,
     onClick,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-singleselectoption',
     value
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -35,9 +35,6 @@ const SingleSelectOption = _ref => {
   }, [`div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${_uiConstants.colors.grey900};padding-block:${_uiConstants.spacers.dp8};padding-inline:${_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;}"]));
 };
 exports.SingleSelectOption = SingleSelectOption;
-SingleSelectOption.defaultProps = {
-  dataTest: 'dhis2-uicore-singleselectoption'
-};
 SingleSelectOption.propTypes = {
   label: _propTypes.default.string.isRequired,
   value: _propTypes.default.string.isRequired,

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

@@ -4,7 +4,7 @@ import { MultiSelect } from '../multi-select.js';
 describe('<MultiSelect />', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
-    render( /*#__PURE__*/React.createElement(MultiSelect, {
+    render(/*#__PURE__*/React.createElement(MultiSelect, {
       placeholder: "placeholder",
       onKeyDown: onKeyDown
     }));

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

@@ -32,7 +32,7 @@ describe('<SelectionList />', () => {
       });
       const selected = ['value'];
       expect(() => {
-        render( /*#__PURE__*/React.createElement(SelectionList, {
+        render(/*#__PURE__*/React.createElement(SelectionList, {
           selected: selected,
           options: options,
           disabled: false,
@@ -50,7 +50,7 @@ describe('<SelectionList />', () => {
       const selected = ['value'];
       const {
         getByText
-      } = render( /*#__PURE__*/React.createElement(SelectionList, {
+      } = render(/*#__PURE__*/React.createElement(SelectionList, {
         selected: selected,
         options: options,
         disabled: false,
@@ -66,7 +66,7 @@ describe('<SelectionList />', () => {
         value: "1"
       });
       const selected = ['value'];
-      render( /*#__PURE__*/React.createElement(SelectionList, {
+      render(/*#__PURE__*/React.createElement(SelectionList, {
         selected: selected,
         options: options,
         disabled: false,
@@ -85,7 +85,7 @@ describe('<SelectionList />', () => {
       });
       const selected = ['value'];
       expect(() => {
-        render( /*#__PURE__*/React.createElement(SelectionList, {
+        render(/*#__PURE__*/React.createElement(SelectionList, {
           selected: selected,
           options: options,
           disabled: false,

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

@@ -18,7 +18,7 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight
+    inputMaxHeight = '100px'
   } = _ref;
   const hasSelection = selected.length > 0;
   const onClear = e => {
@@ -57,9 +57,6 @@ const Input = _ref => {
     dynamic: [inputMaxHeight]
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
 };
-Input.defaultProps = {
-  inputMaxHeight: '100px'
-};
 Input.propTypes = {
   dataTest: PropTypes.string.isRequired,
   className: PropTypes.string,

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

@@ -36,7 +36,7 @@ const Menu = _ref2 => {
     options,
     onChange,
     selected,
-    empty,
+    empty = '',
     dataTest
   } = _ref2;
   const renderedOptions = filterIgnored(options);
@@ -84,9 +84,6 @@ const Menu = _ref2 => {
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
-Menu.defaultProps = {
-  empty: ''
-};
 Menu.propTypes = {
   dataTest: PropTypes.string.isRequired,
   empty: PropTypes.node,