@dhis2-ui/select 10.12.8 → 10.13.0-alpha.1

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

@@ -3,15 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Filter = Filter;
+exports.Filter = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _input = require("@dhis2-ui/input");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _index = _interopRequireDefault(require("../../locales/index.js"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function Filter(_ref) {
+const Filter = exports.Filter = /*#__PURE__*/(0, _react.forwardRef)(function Filter(_ref, ref) {
   let {
     ariaControls,
     dataTest,
@@ -20,13 +22,15 @@ function Filter(_ref) {
     tabIndex,
     value,
     onChange,
-    onKeyDown
+    onKeyDown,
+    onFocus
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest,
     className: _style.default.dynamic([["3850436710", [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]]])
   }, /*#__PURE__*/_react.default.createElement(_input.Input, {
     dense: true,
+    ref: ref,
     tabIndex: tabIndex,
     ariaControls: ariaControls,
     ariaHaspopup: "listbox",
@@ -42,12 +46,13 @@ function Filter(_ref) {
     type: "text",
     name: "filter",
     placeholder: placeholder,
-    onKeyDown: (_, e) => onKeyDown(e)
+    onKeyDown: (_, e) => onKeyDown(e),
+    onFocus: onFocus
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3850436710",
     dynamic: [_uiConstants.colors.white, _uiConstants.spacers.dp8, _uiConstants.spacers.dp8, _uiConstants.spacers.dp4, _uiConstants.spacers.dp8]
   }, [`div.__jsx-style-dynamic-selector{height:100%;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${_uiConstants.colors.white};}`]));
-}
+});
 Filter.propTypes = {
   ariaControls: _propTypes.default.string.isRequired,
   value: _propTypes.default.string.isRequired,
@@ -56,5 +61,6 @@ Filter.propTypes = {
   label: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   tabIndex: _propTypes.default.string,
+  onFocus: _propTypes.default.func,
   onKeyDown: _propTypes.default.func
 };

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

@@ -49,7 +49,9 @@ function Menu(_ref) {
     onClose,
     onEndReached,
     onFilterChange,
-    onFilterInputKeyDown
+    onFilterInputKeyDown,
+    filterRef,
+    onOptionsKeyDown
   } = _ref;
   const [menuWidth, setWidth] = (0, _react.useState)('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -86,6 +88,7 @@ function Menu(_ref) {
   }, filterable && /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "filter-container"
   }, /*#__PURE__*/_react.default.createElement(_filter.Filter, {
+    ref: filterRef,
     dataTest: `${dataTestPrefix}-filter`,
     value: filterValue,
     label: filterLabel,
@@ -100,6 +103,7 @@ function Menu(_ref) {
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "listbox-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_optionsList.OptionsList, {
     ref: listBoxRef,
+    onKeyDown: onOptionsKeyDown,
     comboBoxId: comboBoxId,
     optionComponent: optionComponent,
     dataTest: `${dataTestPrefix}-list`,
@@ -131,12 +135,14 @@ Menu.propTypes = {
   }).isRequired,
   name: _propTypes.default.string.isRequired,
   options: _propTypes.default.arrayOf(_sharedPropTypes.optionProp).isRequired,
-  onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   empty: _propTypes.default.node,
   filterLabel: _propTypes.default.string,
   filterPlaceholder: _propTypes.default.string,
+  filterRef: _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(HTMLElement)
+  }),
   filterValue: _propTypes.default.string,
   filterable: _propTypes.default.bool,
   hidden: _propTypes.default.bool,
@@ -151,8 +157,10 @@ Menu.propTypes = {
   selectedValue: _propTypes.default.string,
   tabIndex: _propTypes.default.string,
   onBlur: _propTypes.default.func,
+  onChange: _propTypes.default.func,
   onClose: _propTypes.default.func,
   onEndReached: _propTypes.default.func,
   onFilterChange: _propTypes.default.func,
-  onFilterInputKeyDown: _propTypes.default.func
+  onFilterInputKeyDown: _propTypes.default.func,
+  onOptionsKeyDown: _propTypes.default.func
 };

package/build/cjs/simple-single-select/menu/options-list.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OptionsList = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _isOptionHidden = require("../is-option-hidden.js");
@@ -27,7 +28,8 @@ const OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(fu
     loading,
     onChange,
     onBlur,
-    onEndReached
+    onEndReached,
+    onKeyDown
   } = _ref;
   // scrolls the highlighted option into view when:
   // * the highlighted option changes
@@ -48,12 +50,15 @@ const OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(fu
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     role: "listbox",
+    tabIndex: "-1",
     id: id,
     "aria-labelledby": labelledBy,
     "aria-live": optionUpdateStrategy,
     "aria-busy": loading.toString(),
     "data-test": dataTest,
-    onBlur: onBlur
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    className: "jsx-233683301"
   }, options.map((_ref2, index) => {
     let {
       value,
@@ -77,14 +82,15 @@ const OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(fu
       component: component || optionComponent,
       onBecameVisible: isLast ? onEndReached : undefined
     });
-  }));
+  }), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "233683301"
+  }, ["div.jsx-233683301{outline:none;}"]));
 });
 OptionsList.propTypes = {
   comboBoxId: _propTypes.default.string.isRequired,
   focussedOptionIndex: _propTypes.default.number.isRequired,
   id: _propTypes.default.string.isRequired,
   options: _propTypes.default.arrayOf(_sharedPropTypes.optionProp).isRequired,
-  onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   labelledBy: _propTypes.default.string,
@@ -93,5 +99,7 @@ OptionsList.propTypes = {
   optionUpdateStrategy: _propTypes.default.oneOf(['off', 'polite', 'assertive']),
   selectedValue: _propTypes.default.string,
   onBlur: _propTypes.default.func,
-  onEndReached: _propTypes.default.func
+  onChange: _propTypes.default.func,
+  onEndReached: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func
 };

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

@@ -104,6 +104,7 @@ function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = (0, _react.useRef)();
   const listBoxRef = (0, _react.useRef)();
+  const filterRef = (0, _react.useRef)();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -154,6 +155,7 @@ function SimpleSingleSelect(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
+    filterRef,
     clearable,
     onClear
   });
@@ -242,7 +244,9 @@ function SimpleSingleSelect(_ref2) {
     },
     onClose: closeMenu,
     onEndReached: onEndReached,
-    onFilterChange: onFilterChange
+    onFilterChange: onFilterChange,
+    filterRef: filterRef,
+    onOptionsKeyDown: handleKeyDown
   }));
 }
 SimpleSingleSelect.propTypes = {

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -46,6 +46,7 @@ function useHandleKeyPressOnCombobox(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     onChange,
+    filterRef,
     clearable,
     onClear
   } = _ref2;
@@ -159,6 +160,10 @@ function useHandleKeyPressOnCombobox(_ref2) {
       return;
     }
     if (key === 'ArrowUp') {
+      if (filterRef !== null && filterRef !== void 0 && filterRef.current && focussedOptionIndex === 0) {
+        filterRef.current.focus();
+        return;
+      }
       focusPrevOption();
       return;
     }
@@ -184,6 +189,6 @@ function useHandleKeyPressOnCombobox(_ref2) {
     }
 
     // Do nothing
-  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping]);
+  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping, filterRef]);
   return handleKeyPress;
 }

package/build/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -72,8 +72,10 @@ function useHandleKeyPressOnFilterInput(_ref) {
       return;
     }
     if (key === 'ArrowDown') {
+      var _listBoxRef$current;
       e.preventDefault(); // Disable moving cursor to end
       focusNextOption();
+      (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.focus();
       return;
     }
     if (key === 'ArrowUp') {
@@ -101,6 +103,6 @@ function useHandleKeyPressOnFilterInput(_ref) {
     }
 
     // Do nothing
-  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp]);
+  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, listBoxRef]);
   return handleKeyPress;
 }

package/build/es/simple-single-select/menu/filter.js

@@ -2,9 +2,9 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
 import { Input } from '@dhis2-ui/input';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import i18n from '../../locales/index.js';
-export function Filter(_ref) {
+export const Filter = /*#__PURE__*/forwardRef(function Filter(_ref, ref) {
   let {
     ariaControls,
     dataTest,
@@ -13,13 +13,15 @@ export function Filter(_ref) {
     tabIndex,
     value,
     onChange,
-    onKeyDown
+    onKeyDown,
+    onFocus
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["3850436710", [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]]])
   }, /*#__PURE__*/React.createElement(Input, {
     dense: true,
+    ref: ref,
     tabIndex: tabIndex,
     ariaControls: ariaControls,
     ariaHaspopup: "listbox",
@@ -35,12 +37,13 @@ export function Filter(_ref) {
     type: "text",
     name: "filter",
     placeholder: placeholder,
-    onKeyDown: (_, e) => onKeyDown(e)
+    onKeyDown: (_, e) => onKeyDown(e),
+    onFocus: onFocus
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3850436710",
     dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
   }, [`div.__jsx-style-dynamic-selector{height:100%;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${colors.white};}`]));
-}
+});
 Filter.propTypes = {
   ariaControls: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
@@ -49,5 +52,6 @@ Filter.propTypes = {
   label: PropTypes.string,
   placeholder: PropTypes.string,
   tabIndex: PropTypes.string,
+  onFocus: PropTypes.func,
   onKeyDown: PropTypes.func
 };

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

@@ -40,7 +40,9 @@ export function Menu(_ref) {
     onClose,
     onEndReached,
     onFilterChange,
-    onFilterInputKeyDown
+    onFilterInputKeyDown,
+    filterRef,
+    onOptionsKeyDown
   } = _ref;
   const [menuWidth, setWidth] = useState('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -77,6 +79,7 @@ export function Menu(_ref) {
   }, filterable && /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "filter-container"
   }, /*#__PURE__*/React.createElement(Filter, {
+    ref: filterRef,
     dataTest: `${dataTestPrefix}-filter`,
     value: filterValue,
     label: filterLabel,
@@ -91,6 +94,7 @@ export function Menu(_ref) {
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-wrapper"
   }, /*#__PURE__*/React.createElement(OptionsList, {
     ref: listBoxRef,
+    onKeyDown: onOptionsKeyDown,
     comboBoxId: comboBoxId,
     optionComponent: optionComponent,
     dataTest: `${dataTestPrefix}-list`,
@@ -122,12 +126,14 @@ Menu.propTypes = {
   }).isRequired,
   name: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(optionProp).isRequired,
-  onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
   empty: PropTypes.node,
   filterLabel: PropTypes.string,
   filterPlaceholder: PropTypes.string,
+  filterRef: PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLElement)
+  }),
   filterValue: PropTypes.string,
   filterable: PropTypes.bool,
   hidden: PropTypes.bool,
@@ -142,8 +148,10 @@ Menu.propTypes = {
   selectedValue: PropTypes.string,
   tabIndex: PropTypes.string,
   onBlur: PropTypes.func,
+  onChange: PropTypes.func,
   onClose: PropTypes.func,
   onEndReached: PropTypes.func,
   onFilterChange: PropTypes.func,
-  onFilterInputKeyDown: PropTypes.func
+  onFilterInputKeyDown: PropTypes.func,
+  onOptionsKeyDown: PropTypes.func
 };

package/build/es/simple-single-select/menu/options-list.js

@@ -1,3 +1,4 @@
+import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React, { forwardRef, useEffect } from 'react';
 import { isOptionHidden } from '../is-option-hidden.js';
@@ -18,7 +19,8 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
     loading,
     onChange,
     onBlur,
-    onEndReached
+    onEndReached,
+    onKeyDown
   } = _ref;
   // scrolls the highlighted option into view when:
   // * the highlighted option changes
@@ -39,12 +41,15 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     role: "listbox",
+    tabIndex: "-1",
     id: id,
     "aria-labelledby": labelledBy,
     "aria-live": optionUpdateStrategy,
     "aria-busy": loading.toString(),
     "data-test": dataTest,
-    onBlur: onBlur
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    className: "jsx-233683301"
   }, options.map((_ref2, index) => {
     let {
       value,
@@ -68,14 +73,15 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
       component: component || optionComponent,
       onBecameVisible: isLast ? onEndReached : undefined
     });
-  }));
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "233683301"
+  }, ["div.jsx-233683301{outline:none;}"]));
 });
 OptionsList.propTypes = {
   comboBoxId: PropTypes.string.isRequired,
   focussedOptionIndex: PropTypes.number.isRequired,
   id: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(optionProp).isRequired,
-  onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
   labelledBy: PropTypes.string,
@@ -84,5 +90,7 @@ OptionsList.propTypes = {
   optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
   selectedValue: PropTypes.string,
   onBlur: PropTypes.func,
-  onEndReached: PropTypes.func
+  onChange: PropTypes.func,
+  onEndReached: PropTypes.func,
+  onKeyDown: PropTypes.func
 };

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

@@ -95,6 +95,7 @@ export function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = useRef();
   const listBoxRef = useRef();
+  const filterRef = useRef();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -145,6 +146,7 @@ export function SimpleSingleSelect(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
+    filterRef,
     clearable,
     onClear
   });
@@ -233,7 +235,9 @@ export function SimpleSingleSelect(_ref2) {
     },
     onClose: closeMenu,
     onEndReached: onEndReached,
-    onFilterChange: onFilterChange
+    onFilterChange: onFilterChange,
+    filterRef: filterRef,
+    onOptionsKeyDown: handleKeyDown
   }));
 }
 SimpleSingleSelect.propTypes = {

package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-combobox.js

@@ -40,6 +40,7 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     onChange,
+    filterRef,
     clearable,
     onClear
   } = _ref2;
@@ -153,6 +154,10 @@ export function useHandleKeyPressOnCombobox(_ref2) {
       return;
     }
     if (key === 'ArrowUp') {
+      if (filterRef !== null && filterRef !== void 0 && filterRef.current && focussedOptionIndex === 0) {
+        filterRef.current.focus();
+        return;
+      }
       focusPrevOption();
       return;
     }
@@ -178,6 +183,6 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     }
 
     // Do nothing
-  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping]);
+  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping, filterRef]);
   return handleKeyPress;
 }

package/build/es/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -66,8 +66,10 @@ export function useHandleKeyPressOnFilterInput(_ref) {
       return;
     }
     if (key === 'ArrowDown') {
+      var _listBoxRef$current;
       e.preventDefault(); // Disable moving cursor to end
       focusNextOption();
+      (_listBoxRef$current = listBoxRef.current) === null || _listBoxRef$current === void 0 ? void 0 : _listBoxRef$current.focus();
       return;
     }
     if (key === 'ArrowUp') {
@@ -95,6 +97,6 @@ export function useHandleKeyPressOnFilterInput(_ref) {
     }
 
     // Do nothing
-  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp]);
+  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, listBoxRef]);
   return handleKeyPress;
 }

package/package.json

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