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

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

@@ -1,36 +1,31 @@
-export function isEnabled(_ref) {
-  let {
-    disabled
-  } = _ref;
+export function isEnabled({
+  disabled
+}) {
   return !disabled;
 }
-export function findNextOptionIndex(_ref2) {
-  let {
-    options,
-    activeIndex
-  } = _ref2;
+export function findNextOptionIndex({
+  options,
+  activeIndex
+}) {
   const startIndex = activeIndex + 1;
   const optionsToSearch = options.slice(startIndex);
 
   // Need to add back the count we removed by slicing the options array
   return startIndex + optionsToSearch.findIndex(isEnabled);
 }
-export function findPrevOptionIndex(_ref3) {
-  let {
-    options,
-    activeIndex
-  } = _ref3;
+export function findPrevOptionIndex({
+  options,
+  activeIndex
+}) {
   return options.slice(0, activeIndex).findLastIndex(isEnabled);
 }
-export function findFirstOptionIndex(_ref4) {
-  let {
-    options
-  } = _ref4;
+export function findFirstOptionIndex({
+  options
+}) {
   return options.findIndex(isEnabled);
 }
-export function findLastOptionIndex(_ref5) {
-  let {
-    options
-  } = _ref5;
+export function findLastOptionIndex({
+  options
+}) {
   return options.findLastIndex(isEnabled);
 }

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

@@ -128,12 +128,9 @@ SimpleSingleSelectField.propTypes = {
    * be used to supply the text to be shown.
    **/
   valueLabel: requiredIf(props => {
-    if (props.options.find(_ref2 => {
-      let {
-        value
-      } = _ref2;
-      return props.value === value;
-    })) {
+    if (props.options.find(({
+      value
+    }) => props.value === value)) {
       return false;
     }
     return props.value;

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

@@ -8,12 +8,9 @@ jest.mock('../simple-single-select/simple-single-select.js', () => ({
   SimpleSingleSelect: jest.fn(() => /*#__PURE__*/React.createElement("div", null))
 }));
 jest.mock('@dhis2-ui/field', () => ({
-  Field: jest.fn(_ref => {
-    let {
-      children
-    } = _ref;
-    return children;
-  })
+  Field: jest.fn(({
+    children
+  }) => children)
 }));
 describe('<SimpleSingleSelectField />', () => {
   afterEach(() => {

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

@@ -23,8 +23,7 @@ When('the SingleSelect menu is open', () => {
 Then('the SingleSelect input is left aligned with the menu', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(_ref => {
-    let [inputs, menus] = _ref;
+  cy.getAll(selectDataTest, menuDataTest).should(([inputs, menus]) => {
     expect(inputs.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $input = inputs[0];
@@ -37,8 +36,7 @@ Then('the SingleSelect input is left aligned with the menu', () => {
 When('the SingleSelect input and menu have the same width', () => {
   const inputSelector = '[data-test="dhis2-uicore-select"]';
   const menuSelector = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(inputSelector, menuSelector).should(_ref2 => {
-    let [$input, $menu] = _ref2;
+  cy.getAll(inputSelector, menuSelector).should(([$input, $menu]) => {
     const inputWidth = Math.round($input.outerWidth());
     const menuWidth = Math.round($menu.outerWidth());
     expect(inputWidth).to.equal(menuWidth);

package/build/es/single-select/features/position/index.js

@@ -21,8 +21,7 @@ When('the window is scrolled down', () => {
 Then('the top of the menu is aligned with the bottom of the input', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(_ref => {
-    let [selects, menus] = _ref;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -35,8 +34,7 @@ Then('the top of the menu is aligned with the bottom of the input', () => {
 Then('the bottom of the menu is aligned with the top of the input', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(_ref2 => {
-    let [selects, menus] = _ref2;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -49,8 +47,7 @@ Then('the bottom of the menu is aligned with the top of the input', () => {
 Then('it is rendered on top of the SingleSelect', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(_ref3 => {
-    let [selects, menus] = _ref3;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];
@@ -64,8 +61,7 @@ Then('it is rendered on top of the SingleSelect', () => {
 Then('the left of the SingleSelect is aligned with the left of the anchor', () => {
   const selectDataTest = '[data-test="dhis2-uicore-singleselect"]';
   const menuDataTest = '[data-test="dhis2-uicore-select-menu-menuwrapper"]';
-  cy.getAll(selectDataTest, menuDataTest).should(_ref4 => {
-    let [selects, menus] = _ref4;
+  cy.getAll(selectDataTest, menuDataTest).should(([selects, menus]) => {
     expect(selects.length).to.equal(1);
     expect(menus.length).to.equal(1);
     const $select = selects[0];

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

@@ -2,31 +2,28 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { FilterableMenu as CommonFilterableMenu } from '../select/index.js';
 import { Menu } from './menu.js';
-export const FilterableMenu = _ref => {
-  let {
-    dataTest,
-    options,
-    onChange,
-    selected,
-    empty,
-    handleClose,
-    handleFocusInput,
-    placeholder,
-    noMatchText
-  } = _ref;
-  return /*#__PURE__*/React.createElement(CommonFilterableMenu, {
-    dataTest: dataTest,
-    options: options,
-    onChange: onChange,
-    selected: selected,
-    empty: empty,
-    handleClose: handleClose,
-    handleFocusInput: handleFocusInput,
-    placeholder: placeholder,
-    noMatchText: noMatchText,
-    Menu: Menu
-  });
-};
+export const FilterableMenu = ({
+  dataTest,
+  options,
+  onChange,
+  selected,
+  empty,
+  handleClose,
+  handleFocusInput,
+  placeholder,
+  noMatchText
+}) => /*#__PURE__*/React.createElement(CommonFilterableMenu, {
+  dataTest: dataTest,
+  options: options,
+  onChange: onChange,
+  selected: selected,
+  empty: empty,
+  handleClose: handleClose,
+  handleFocusInput: handleFocusInput,
+  placeholder: placeholder,
+  noMatchText: noMatchText,
+  Menu: Menu
+});
 FilterableMenu.propTypes = {
   dataTest: PropTypes.string.isRequired,
   noMatchText: PropTypes.string.isRequired,

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

@@ -6,20 +6,19 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { Selection } from './selection.js';
-const Input = _ref => {
-  let {
-    selected,
-    onChange,
-    clearable,
-    clearText,
-    placeholder,
-    dataTest,
-    prefix,
-    options,
-    className,
-    disabled,
-    inputMaxHeight = '100px'
-  } = _ref;
+const Input = ({
+  selected,
+  onChange,
+  clearable,
+  clearText,
+  placeholder,
+  dataTest,
+  prefix,
+  options,
+  className,
+  disabled,
+  inputMaxHeight = '100px'
+}) => {
   const hasSelection = selected && typeof selected === 'string';
   const onClear = e => {
     const data = {

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

@@ -5,16 +5,15 @@ const onIgnoredClick = (_, e) => {
   e.stopPropagation();
   e.preventDefault();
 };
-const Menu = _ref => {
-  let {
-    options,
-    onChange,
-    selected,
-    empty = '',
-    handleFocusInput,
-    handleClose,
-    dataTest
-  } = _ref;
+const Menu = ({
+  options,
+  onChange,
+  selected,
+  empty = '',
+  handleFocusInput,
+  handleClose,
+  dataTest
+}) => {
   const renderedOptions = filterIgnored(options);
   if (React.Children.count(renderedOptions) === 0) {
     // If it's a string, supply it to our <Empty> component so it looks better

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

@@ -4,12 +4,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { findOptionChild } from '../select/index.js';
-const Selection = _ref => {
-  let {
-    options,
-    selected,
-    className
-  } = _ref;
+const Selection = ({
+  options,
+  selected,
+  className
+}) => {
   const isProduction = process.env.NODE_ENV === 'production';
   const selectedOption = findOptionChild(selected, options);
   if (!selectedOption) {

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

@@ -8,15 +8,12 @@ import { SingleSelect } from './index.js';
 window.onChange = window.Cypress && window.Cypress.cy.stub();
 window.onFocus = window.Cypress && window.Cypress.cy.stub();
 window.onBlur = window.Cypress && window.Cypress.cy.stub();
-const CustomSingleSelectOption = _ref => {
-  let {
-    label,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: e => onClick({}, e)
-  }, label);
-};
+const CustomSingleSelectOption = ({
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: e => onClick({}, e)
+}, label);
 CustomSingleSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func
@@ -565,23 +562,17 @@ export const MenuWidthChanging = () => {
       flexGrow: 1
     }
   }, /*#__PURE__*/React.createElement(SingleSelect, {
-    onChange: _ref2 => {
-      let {
-        selected
-      } = _ref2;
-      return console.log('size changed to ' + selected);
-    }
-  }, options.map(_ref3 => {
-    let {
-      name,
-      id
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(SingleSelectOption, {
-      key: id,
-      value: id,
-      label: name
-    });
-  }))), toggle && /*#__PURE__*/React.createElement("div", {
+    onChange: ({
+      selected
+    }) => console.log('size changed to ' + selected)
+  }, options.map(({
+    name,
+    id
+  }) => /*#__PURE__*/React.createElement(SingleSelectOption, {
+    key: id,
+    value: id,
+    label: name
+  })))), toggle && /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '30px',
       border: '1px solid green'

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

@@ -8,36 +8,35 @@ 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';
-const SingleSelect = _ref => {
-  let {
-    className,
-    selected = '',
-    tabIndex,
-    maxHeight,
-    inputMaxHeight,
-    onChange,
-    onFocus,
-    onKeyDown,
-    onBlur,
-    loading,
-    error,
-    warning,
-    valid,
-    disabled,
-    children,
-    clearable,
-    clearText,
-    filterable,
-    filterPlaceholder,
-    placeholder,
-    prefix,
-    empty,
-    loadingText,
-    noMatchText,
-    initialFocus,
-    dense,
-    dataTest = 'dhis2-uicore-singleselect'
-  } = _ref;
+const SingleSelect = ({
+  className,
+  selected = '',
+  tabIndex,
+  maxHeight,
+  inputMaxHeight,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onBlur,
+  loading,
+  error,
+  warning,
+  valid,
+  disabled,
+  children,
+  clearable,
+  clearText,
+  filterable,
+  filterPlaceholder,
+  placeholder,
+  prefix,
+  empty,
+  loadingText,
+  noMatchText,
+  initialFocus,
+  dense,
+  dataTest = 'dhis2-uicore-singleselect'
+}) => {
   // If the select is filterable, use a filterable menu
   const menu = filterable ? /*#__PURE__*/React.createElement(FilterableMenu, {
     dataTest: dataTest,

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

@@ -22,15 +22,12 @@ const eventHandler = handlerName => (payload, event) => {
 const onChange = eventHandler('onChange');
 const onFocus = eventHandler('onFocus');
 const onBlur = eventHandler('onBlur');
-const CustomSingleSelectOption = _ref => {
-  let {
-    label,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: e => onClick({}, e)
-  }, label);
-};
+const CustomSingleSelectOption = ({
+  label,
+  onClick
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: e => onClick({}, e)
+}, label);
 CustomSingleSelectOption.propTypes = {
   label: PropTypes.string,
   onClick: PropTypes.func

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

@@ -3,35 +3,32 @@ import { colors, spacers } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-const SingleSelectOption = _ref => {
-  let {
-    label,
-    active,
+const SingleSelectOption = ({
+  label,
+  active,
+  disabled,
+  onClick,
+  className,
+  dataTest = 'dhis2-uicore-singleselectoption',
+  value
+}) => /*#__PURE__*/React.createElement("div", {
+  onClick: e => onClick({}, e),
+  "data-test": dataTest,
+  "data-value": value,
+  "data-label": label,
+  className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + (cx(className, {
     disabled,
-    onClick,
-    className,
-    dataTest = 'dhis2-uicore-singleselectoption',
-    value
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    onClick: e => onClick({}, e),
-    "data-test": dataTest,
-    "data-value": value,
-    "data-label": label,
-    className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + (cx(className, {
-      disabled,
-      active
-    }) || "")
-  }, /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": "true",
-    className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "checkmark"
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "content"
-  }, label), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1307386342",
-    dynamic: [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']
-  }, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding-block:${spacers.dp8};padding-inline:6px ${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.teal050};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;}", `div.__jsx-style-dynamic-selector .checkmark.__jsx-style-dynamic-selector{width:16px;height:16px;margin-inline-end:6px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-image:${active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none'};}`]));
-};
+    active
+  }) || "")
+}, /*#__PURE__*/React.createElement("span", {
+  "aria-hidden": "true",
+  className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "checkmark"
+}), /*#__PURE__*/React.createElement("span", {
+  className: _JSXStyle.dynamic([["1307386342", [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']]]) + " " + "content"
+}, label), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1307386342",
+  dynamic: [colors.grey900, spacers.dp8, spacers.dp12, colors.grey200, colors.teal050, colors.grey500, active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none']
+}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding-block:${spacers.dp8};padding-inline:6px ${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.teal050};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;}", `div.__jsx-style-dynamic-selector .checkmark.__jsx-style-dynamic-selector{width:16px;height:16px;margin-inline-end:6px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-image:${active ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')` : 'none'};}`]));
 SingleSelectOption.propTypes = {
   label: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,

package/package.json

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