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

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/__tests__/multi-select-field.test.js

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

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/__tests__/select.test.js

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

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/__tests__/selection.test.js

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

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

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

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/__tests__/single-select-field.test.js

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

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": "9.12.0-alpha.4",
+    "version": "9.13.0",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -28,26 +28,26 @@
     },
     "peerDependencies": {
         "@dhis2/d2-i18n": "^1",
-        "react": "^16.13",
-        "react-dom": "^16.13",
+        "react": "^16.13 || ^18",
+        "react-dom": "^16.13 || ^18",
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "9.12.0-alpha.4",
-        "@dhis2-ui/button": "9.12.0-alpha.4",
-        "@dhis2-ui/card": "9.12.0-alpha.4",
-        "@dhis2-ui/checkbox": "9.12.0-alpha.4",
-        "@dhis2-ui/chip": "9.12.0-alpha.4",
-        "@dhis2-ui/field": "9.12.0-alpha.4",
-        "@dhis2-ui/input": "9.12.0-alpha.4",
-        "@dhis2-ui/layer": "9.12.0-alpha.4",
-        "@dhis2-ui/loader": "9.12.0-alpha.4",
-        "@dhis2-ui/popper": "9.12.0-alpha.4",
-        "@dhis2-ui/status-icon": "9.12.0-alpha.4",
-        "@dhis2-ui/tooltip": "9.12.0-alpha.4",
+        "@dhis2-ui/box": "9.13.0",
+        "@dhis2-ui/button": "9.13.0",
+        "@dhis2-ui/card": "9.13.0",
+        "@dhis2-ui/checkbox": "9.13.0",
+        "@dhis2-ui/chip": "9.13.0",
+        "@dhis2-ui/field": "9.13.0",
+        "@dhis2-ui/input": "9.13.0",
+        "@dhis2-ui/layer": "9.13.0",
+        "@dhis2-ui/loader": "9.13.0",
+        "@dhis2-ui/popper": "9.13.0",
+        "@dhis2-ui/status-icon": "9.13.0",
+        "@dhis2-ui/tooltip": "9.13.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.12.0-alpha.4",
-        "@dhis2/ui-icons": "9.12.0-alpha.4",
+        "@dhis2/ui-constants": "9.13.0",
+        "@dhis2/ui-icons": "9.13.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
@@ -57,8 +57,8 @@
     ],
     "devDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
-        "react": "16.13",
-        "react-dom": "16.13",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "styled-jsx": "^4.0.1"
     },
     "types": "types"

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