@dhis2-ui/select 10.0.0-alpha.6 → 10.0.0-alpha.7

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/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/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/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/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/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,

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

@@ -8,10 +8,13 @@ import { Loading as CommonLoading, Select } from '../select/index.js';
 import { FilterableMenu } from './filterable-menu.js';
 import { Input } from './input.js';
 import { Menu } from './menu.js';
+
+// stable object reference
+const staticArr = [];
 const MultiSelect = _ref => {
   let {
     className,
-    selected,
+    selected = staticArr,
     tabIndex,
     maxHeight,
     inputMaxHeight,
@@ -36,7 +39,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.createElement(FilterableMenu, {
@@ -89,10 +92,6 @@ const MultiSelect = _ref => {
     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;}"]));
 };
-MultiSelect.defaultProps = {
-  selected: [],
-  dataTest: 'dhis2-uicore-multiselect'
-};
 MultiSelect.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

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

@@ -1,3 +1,6 @@
+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); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Field } from '@dhis2-ui/field';
@@ -28,7 +31,7 @@ class MultiSelectField extends React.Component {
       disabled,
       warning,
       loading,
-      selected,
+      selected = MultiSelectField.defaultProps.selected,
       tabIndex,
       helpText,
       validationText,
@@ -37,17 +40,17 @@ class MultiSelectField extends React.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.createElement(Field, {
       className: className,
@@ -91,7 +94,7 @@ class MultiSelectField extends React.Component {
     }, children)));
   }
 }
-MultiSelectField.defaultProps = {
+_defineProperty(MultiSelectField, "defaultProps", {
   selected: [],
   dataTest: 'dhis2-uiwidgets-multiselectfield',
   clearText: () => i18n.t('Clear'),
@@ -99,7 +102,7 @@ MultiSelectField.defaultProps = {
   filterPlaceholder: () => i18n.t('Type to filter options'),
   loadingText: () => i18n.t('Loading options'),
   noMatchText: () => i18n.t('No options found')
-};
+});
 MultiSelectField.propTypes = {
   /** Should be `MultiSelectOption` components */
   children: PropTypes.node,

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

@@ -71,7 +71,12 @@ export default {
   // default args for stories
   args: {
     // Fix default prop issues - causes 'i18n is not defined' error
-    ...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/es/multi-select-option/multi-select-option.js

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

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

@@ -9,7 +9,7 @@ const InputWrapper = _ref => {
     dataTest,
     onToggle,
     children,
-    tabIndex,
+    tabIndex = '0',
     error,
     warning,
     valid,
@@ -40,9 +40,6 @@ const InputWrapper = _ref => {
     dynamic: [colors.grey500, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]
   }, [`.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 ${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 ${theme.focus};border-color:${theme.focus};}`, `.root.valid.__jsx-style-dynamic-selector{border-color:${theme.valid};}`, `.root.warning.__jsx-style-dynamic-selector{border-color:${theme.warning};}`, `.root.error.__jsx-style-dynamic-selector{border-color:${theme.error};}`, `.root.disabled.__jsx-style-dynamic-selector{background-color:${colors.grey100};border-color:${colors.grey500};color:${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;}"]));
 };
-InputWrapper.defaultProps = {
-  tabIndex: '0'
-};
 InputWrapper.propTypes = {
   dataTest: PropTypes.string.isRequired,
   inputRef: PropTypes.object.isRequired,

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

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

package/build/es/select/select.js

@@ -210,9 +210,9 @@ export class Select extends Component {
     }, menu));
   }
 }
-Select.defaultProps = {
+_defineProperty(Select, "defaultProps", {
   dataTest: 'dhis2-uicore-select'
-};
+});
 Select.propTypes = {
   input: PropTypes.element.isRequired,
   menu: PropTypes.element.isRequired,

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

@@ -18,7 +18,7 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight
+    inputMaxHeight = '100px'
   } = _ref;
   const hasSelection = selected && typeof selected === 'string';
   const onClear = e => {
@@ -55,9 +55,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/single-select/menu.js

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

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

@@ -11,7 +11,7 @@ import { Menu } from './menu.js';
 const SingleSelect = _ref => {
   let {
     className,
-    selected,
+    selected = '',
     tabIndex,
     maxHeight,
     inputMaxHeight,
@@ -36,7 +36,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.createElement(FilterableMenu, {
@@ -89,10 +89,6 @@ const SingleSelect = _ref => {
     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;}"]));
 };
-SingleSelect.defaultProps = {
-  selected: '',
-  dataTest: 'dhis2-uicore-singleselect'
-};
 SingleSelect.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

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

@@ -1,4 +1,3 @@
-import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import { SingleSelectOption } from '../index.js';
 import { SingleSelectField } from './index.js';
@@ -72,27 +71,4 @@ export const WithFilterable = () => /*#__PURE__*/React.createElement(SingleSelec
 export const WithLoading = () => /*#__PURE__*/React.createElement(SingleSelectField, {
   loading: true
 });
-export const WithoutOptions = () => /*#__PURE__*/React.createElement(SingleSelectField, null);
-export const WithHiddenParent = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-3657609608" + " " + "container"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "jsx-3657609608" + " " + "hoverSpan"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "jsx-3657609608"
-  }, "Hover over me"), /*#__PURE__*/React.createElement("div", {
-    className: "jsx-3657609608" + " " + "hiddenSelect"
-  }, /*#__PURE__*/React.createElement(SingleSelectField, {
-    dataTest: "hoverable-select-field",
-    label: "Choose something",
-    onChange: () => {}
-  }, /*#__PURE__*/React.createElement(SingleSelectOption, {
-    value: "1",
-    label: "one"
-  }), /*#__PURE__*/React.createElement(SingleSelectOption, {
-    value: "2",
-    label: "two"
-  }))))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    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;}"]));
-};
+export const WithoutOptions = () => /*#__PURE__*/React.createElement(SingleSelectField, null);

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

@@ -1,3 +1,6 @@
+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); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Field } from '@dhis2-ui/field';
@@ -28,7 +31,7 @@ class SingleSelectField extends React.Component {
       warning,
       disabled,
       loading,
-      selected,
+      selected = SingleSelectField.defaultProps.selected,
       tabIndex,
       helpText,
       validationText,
@@ -37,17 +40,17 @@ class SingleSelectField extends React.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.createElement(Field, {
       className: className,
@@ -91,7 +94,7 @@ class SingleSelectField extends React.Component {
     }, children)));
   }
 }
-SingleSelectField.defaultProps = {
+_defineProperty(SingleSelectField, "defaultProps", {
   dataTest: 'dhis2-uiwidgets-singleselectfield',
   selected: '',
   clearText: () => i18n.t('Clear'),
@@ -99,7 +102,7 @@ SingleSelectField.defaultProps = {
   filterPlaceholder: () => i18n.t('Type to filter options'),
   loadingText: () => i18n.t('Loading options'),
   noMatchText: () => i18n.t('No options found')
-};
+});
 SingleSelectField.propTypes = {
   /** Should be `SingleSelectOption` components */
   children: PropTypes.node,

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

@@ -71,7 +71,13 @@ export default {
   // default args for stories
   args: {
     // Fix default prop issues - causes 'i18n is not defined' error
-    ...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/es/single-select-option/single-select-option.js

@@ -10,7 +10,7 @@ const SingleSelectOption = _ref => {
     disabled,
     onClick,
     className,
-    dataTest,
+    dataTest = 'dhis2-uicore-singleselectoption',
     value
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -27,9 +27,6 @@ const SingleSelectOption = _ref => {
     dynamic: [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal700, colors.white, colors.grey500]
   }, [`div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding-block:${spacers.dp8};padding-inline:${spacers.dp12};}`, `div.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, `div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:${colors.teal700};color:${colors.white};cursor:auto;}`, `div.disabled.__jsx-style-dynamic-selector{color:${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;}"]));
 };
-SingleSelectOption.defaultProps = {
-  dataTest: 'dhis2-uicore-singleselectoption'
-};
 SingleSelectOption.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.0.0-alpha.6",
+    "version": "10.0.0-alpha.7",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.0.0-alpha.6",
-        "@dhis2-ui/button": "10.0.0-alpha.6",
-        "@dhis2-ui/card": "10.0.0-alpha.6",
-        "@dhis2-ui/checkbox": "10.0.0-alpha.6",
-        "@dhis2-ui/chip": "10.0.0-alpha.6",
-        "@dhis2-ui/field": "10.0.0-alpha.6",
-        "@dhis2-ui/input": "10.0.0-alpha.6",
-        "@dhis2-ui/layer": "10.0.0-alpha.6",
-        "@dhis2-ui/loader": "10.0.0-alpha.6",
-        "@dhis2-ui/popper": "10.0.0-alpha.6",
-        "@dhis2-ui/status-icon": "10.0.0-alpha.6",
-        "@dhis2-ui/tooltip": "10.0.0-alpha.6",
+        "@dhis2-ui/box": "10.0.0-alpha.7",
+        "@dhis2-ui/button": "10.0.0-alpha.7",
+        "@dhis2-ui/card": "10.0.0-alpha.7",
+        "@dhis2-ui/checkbox": "10.0.0-alpha.7",
+        "@dhis2-ui/chip": "10.0.0-alpha.7",
+        "@dhis2-ui/field": "10.0.0-alpha.7",
+        "@dhis2-ui/input": "10.0.0-alpha.7",
+        "@dhis2-ui/layer": "10.0.0-alpha.7",
+        "@dhis2-ui/loader": "10.0.0-alpha.7",
+        "@dhis2-ui/popper": "10.0.0-alpha.7",
+        "@dhis2-ui/status-icon": "10.0.0-alpha.7",
+        "@dhis2-ui/tooltip": "10.0.0-alpha.7",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.0.0-alpha.6",
-        "@dhis2/ui-icons": "10.0.0-alpha.6",
+        "@dhis2/ui-constants": "10.0.0-alpha.7",
+        "@dhis2/ui-icons": "10.0.0-alpha.7",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/single-select-field/features/can_show_conditionally/index.js

@@ -1,23 +0,0 @@
-"use strict";
-
-var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-(0, _cypressCucumberPreprocessor.Given)('a Select is hidden initially', () => {
-  cy.visitStory('SingleSelectField', 'With hidden parent');
-});
-(0, _cypressCucumberPreprocessor.When)('someone hovers over it to show it', () => {
-  cy.get('.container .hiddenSelect').invoke('attr', 'style', 'display: block');
-});
-(0, _cypressCucumberPreprocessor.When)('clicks the select', () => {
-  cy.get('[data-test="dhis2-uicore-select"]').click();
-});
-(0, _cypressCucumberPreprocessor.Then)('the select dropdown should be in the correct position', () => {
-  cy.get('[data-test="hoverable-select-field"]').should('be.visible');
-  cy.get('[data-test="dhis2-uicore-singleselectoption"]').should($selectField => {
-    const {
-      top,
-      left
-    } = $selectField.offset();
-    expect(top).to.be.greaterThan(0);
-    expect(left).to.be.greaterThan(0);
-  });
-});

package/build/cjs/single-select-field/features/can_show_conditionally.feature

@@ -1,7 +0,0 @@
-Feature: Position of SelectField
-
-    Scenario: Keeps position when parent is hidden initially
-        Given a Select is hidden initially
-        When someone hovers over it to show it
-        And clicks the select
-        Then the select dropdown should be in the correct position

package/build/es/single-select-field/features/can_show_conditionally/index.js

@@ -1,21 +0,0 @@
-import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
-Given('a Select is hidden initially', () => {
-  cy.visitStory('SingleSelectField', 'With hidden parent');
-});
-When('someone hovers over it to show it', () => {
-  cy.get('.container .hiddenSelect').invoke('attr', 'style', 'display: block');
-});
-When('clicks the select', () => {
-  cy.get('[data-test="dhis2-uicore-select"]').click();
-});
-Then('the select dropdown should be in the correct position', () => {
-  cy.get('[data-test="hoverable-select-field"]').should('be.visible');
-  cy.get('[data-test="dhis2-uicore-singleselectoption"]').should($selectField => {
-    const {
-      top,
-      left
-    } = $selectField.offset();
-    expect(top).to.be.greaterThan(0);
-    expect(left).to.be.greaterThan(0);
-  });
-});

package/build/es/single-select-field/features/can_show_conditionally.feature

@@ -1,7 +0,0 @@
-Feature: Position of SelectField
-
-    Scenario: Keeps position when parent is hidden initially
-        Given a Select is hidden initially
-        When someone hovers over it to show it
-        And clicks the select
-        Then the select dropdown should be in the correct position