@dhis2-ui/select 10.16.3 → 10.16.5

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

@@ -2,11 +2,10 @@ import { useDataEngine, useDataQuery } from '@dhis2/app-runtime';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { SimpleSingleSelect } from '../simple-single-select.js';
 import { CustomDataProvider } from './simple-single-select-server-side-filtering/index.js';
-function dataElementToOption(_ref) {
-  let {
-    id,
-    displayName
-  } = _ref;
+function dataElementToOption({
+  id,
+  displayName
+}) {
   return {
     value: id,
     label: displayName
@@ -16,12 +15,9 @@ function useLoadDataElementQuery(options) {
   return useDataQuery({
     result: {
       resource: 'dataElements',
-      id: _ref2 => {
-        let {
-          id
-        } = _ref2;
-        return id;
-      }
+      id: ({
+        id
+      }) => id
     }
   }, {
     ...options,
@@ -32,15 +28,12 @@ function useLoadDataElementsQuery(options) {
   return useDataQuery({
     result: {
       resource: 'dataElements',
-      params: _ref3 => {
-        let {
-          page
-        } = _ref3;
-        return {
-          page,
-          pageSize: 10
-        };
-      }
+      params: ({
+        page
+      }) => ({
+        page,
+        pageSize: 10
+      })
     }
   }, options);
 }
@@ -50,15 +43,14 @@ function useLoadFilteredDataElementsQuery(customOptions) {
   const abortController = useRef();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
-  const refetch = useCallback(_ref4 => {
-    let {
-      searchTerm,
-      page
-    } = _ref4;
+  const refetch = useCallback(({
+    searchTerm,
+    page
+  }) => {
     if (timeout.current) {
       var _abortController$curr;
       clearTimeout(timeout.current);
-      (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 ? void 0 : _abortController$curr.abort();
+      (_abortController$curr = abortController.current) === null || _abortController$curr === void 0 || _abortController$curr.abort();
     }
     return new Promise((resolve, reject) => {
       timeout.current = setTimeout(async () => {
@@ -135,10 +127,9 @@ function ServerSideFilteringSelect() {
     }
   });
   const loadDataElementsQuery = useLoadDataElementsQuery({
-    onComplete: _ref5 => {
-      let {
-        result
-      } = _ref5;
+    onComplete: ({
+      result
+    }) => {
       setDefaultPager(result.pager);
       setLoadedOptions(prevLoadedOptions => [...prevLoadedOptions, ...result.dataElements.map(dataElementToOption)]);
     },
@@ -151,10 +142,9 @@ function ServerSideFilteringSelect() {
     }
   });
   const loadFilteredDataElementsQuery = useLoadFilteredDataElementsQuery({
-    onComplete: _ref6 => {
-      let {
-        result
-      } = _ref6;
+    onComplete: ({
+      result
+    }) => {
       setFilterPager(result.pager);
       setFilteredOptions(prevFilteredOptions => {
         const newOptions = result.dataElements.map(dataElementToOption);

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

@@ -24,10 +24,9 @@ function filterOptions(options, searchTerm) {
 
   // We're transform both the label and the search term to
   // lower-case strings so the search is case-insensitive
-  return options.filter(_ref => {
-    let {
-      label
-    } = _ref;
+  return options.filter(({
+    label
+  }) => {
     return label.toLowerCase().startsWith(searchTerm.toLowerCase());
   });
 }

package/build/es/simple-single-select/__stories__/simple-single-select-server-side-filtering/CustomDataProvider.js

@@ -5,12 +5,11 @@ import { dataElements as allDataElements } from './dataElements.js';
 function randomBetween(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
 }
-const fakeNetworkDelay = _ref => {
-  let {
-    pager,
-    dataElements,
-    signal
-  } = _ref;
+const fakeNetworkDelay = ({
+  pager,
+  dataElements,
+  signal
+}) => {
   const delay = randomBetween(750, 1550);
   const response = {
     dataElements
@@ -23,26 +22,23 @@ const fakeNetworkDelay = _ref => {
       clearTimeout(timeout);
       reject('Aborted');
     };
-    signal === null || signal === void 0 ? void 0 : signal.addEventListener('abort', onAbort);
+    signal === null || signal === void 0 || signal.addEventListener('abort', onAbort);
     const timeout = setTimeout(() => {
-      signal === null || signal === void 0 ? void 0 : signal.removeEventListener('abort', onAbort);
+      signal === null || signal === void 0 || signal.removeEventListener('abort', onAbort);
       resolve(response);
     }, delay);
   });
 };
-const Provider = _ref2 => {
-  let {
-    children
-  } = _ref2;
+const Provider = ({
+  children
+}) => {
   const data = {
-    dataElements: (_, _ref3, _ref4) => {
-      let {
-        id,
-        params = {}
-      } = _ref3;
-      let {
-        signal
-      } = _ref4;
+    dataElements: (_, {
+      id,
+      params = {}
+    }, {
+      signal
+    }) => {
       if (id) {
         const dataElement = allDataElements.find(curDE => id === curDE.id);
         return fakeNetworkDelay({
@@ -53,12 +49,9 @@ const Provider = _ref2 => {
 
       // Only this specific filter is supported by this server-mock
       const searchTerm = params.filter ? params.filter[0].split(':')[2] : '';
-      const filteredDataElements = searchTerm ? allDataElements.filter(_ref5 => {
-        let {
-          displayName
-        } = _ref5;
-        return displayName.startsWith(searchTerm);
-      }) : allDataElements;
+      const filteredDataElements = searchTerm ? allDataElements.filter(({
+        displayName
+      }) => displayName.startsWith(searchTerm)) : allDataElements;
       const page = params.page || 1;
       const total = filteredDataElements.length;
       const pageSize = params.pageSize || 50;

package/build/es/simple-single-select/features/keyboard-interactions.test.e2e.js

@@ -165,8 +165,7 @@ describe('<SimpleSingleSelect/>', () => {
     cy.wait(1);
     cy.all(() => cy.findAllByRole('option').invoke('get', 0), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref => {
-      let [firstOption, highlightedOption] = _ref;
+    }).invoke('get', 0)).then(([firstOption, highlightedOption]) => {
       expect(highlightedOption).to.equal(firstOption);
     });
   });
@@ -205,8 +204,7 @@ describe('<SimpleSingleSelect/>', () => {
     cy.wait(1);
     cy.all(() => cy.findAllByRole('option').invoke('get', 1), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref2 => {
-      let [firstOption, highlightedOption] = _ref2;
+    }).invoke('get', 0)).then(([firstOption, highlightedOption]) => {
       expect(highlightedOption).to.equal(firstOption);
     });
   });
@@ -229,8 +227,7 @@ describe('<SimpleSingleSelect/>', () => {
     cy.wait(1);
     cy.all(() => cy.get('[role="option"]:visible').last().invoke('get', 0), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref3 => {
-      let [lastVisibleOption, highlightedOption] = _ref3;
+    }).invoke('get', 0)).then(([lastVisibleOption, highlightedOption]) => {
       expect(highlightedOption).to.equal(lastVisibleOption);
     });
   });
@@ -259,15 +256,13 @@ describe('<SimpleSingleSelect/>', () => {
     cy.log('**Then the first enabled option after last option on the currently displayed page is highlighted**');
     cy.all(() => cy.findAllByRole('option').invoke('get', 19), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref4 => {
-      let [eighteensOptions, highlightedOption] = _ref4;
+    }).invoke('get', 0)).then(([eighteensOptions, highlightedOption]) => {
       expect(highlightedOption).to.equal(eighteensOptions);
     });
     cy.log('**And the first enabled option after last option on the currently displayed page is the first visible option**');
     cy.all(() => cy.get('[role="option"]:visible').invoke('get', 0), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref5 => {
-      let [lastVisibleOption, highlightedOption] = _ref5;
+    }).invoke('get', 0)).then(([lastVisibleOption, highlightedOption]) => {
       expect(highlightedOption).to.equal(lastVisibleOption);
     });
   });
@@ -321,8 +316,7 @@ describe('<SimpleSingleSelect/>', () => {
     // scrollable div
     () => cy.findByRole('option', {
       selected: true
-    }).invoke('parent').invoke('parent')).then(_ref6 => {
-      let [nextTopOption, listBoxParent] = _ref6;
+    }).invoke('parent').invoke('parent')).then(([nextTopOption, listBoxParent]) => {
       const {
         offsetTop
       } = nextTopOption.get(0);
@@ -383,8 +377,7 @@ describe('<SimpleSingleSelect/>', () => {
     cy.wait(1);
     cy.all(() => cy.findAllByRole('option').last().invoke('get', 0), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref7 => {
-      let [lastOption, highlightedOption] = _ref7;
+    }).invoke('get', 0)).then(([lastOption, highlightedOption]) => {
       expect(highlightedOption).to.equal(lastOption);
     });
     cy.log('**And the last option is visible**');
@@ -407,8 +400,7 @@ describe('<SimpleSingleSelect/>', () => {
     }).should('be.visible');
     cy.log('**And the 3rd-last option is the last option on the current page**');
     cy.all(() => cy.findAllByRole('option').eq(89), () => cy.findByRole('listbox').invoke('parent') // scrollable div
-    ).then(_ref8 => {
-      let [nextTopOption, listBoxParent] = _ref8;
+    ).then(([nextTopOption, listBoxParent]) => {
       const {
         offsetTop
       } = nextTopOption.get(0);
@@ -427,8 +419,7 @@ describe('<SimpleSingleSelect/>', () => {
     cy.wait(1);
     cy.all(() => cy.findAllByRole('option').invoke('get', 98), () => cy.findByRole('option', {
       selected: true
-    }).invoke('get', 0)).then(_ref9 => {
-      let [secondLastOption, highlightedOption] = _ref9;
+    }).invoke('get', 0)).then(([secondLastOption, highlightedOption]) => {
       expect(highlightedOption).to.equal(secondLastOption);
     });
     cy.log('**And the second last option is visible**');

package/build/es/simple-single-select/features/menu-positioning.test.e2e.js

@@ -7,8 +7,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     cy.findByRole('combobox').click();
 
     // Then the top of the menu is aligned with the bottom of the input
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref => {
-      let [selectedValue, menu] = _ref;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -22,8 +21,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     });
 
     // And the left of the SingleSelect is aligned with the left of the anchor
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref2 => {
-      let [selectedValue, menu] = _ref2;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -47,8 +45,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     cy.all(() => cy.findByRole('combobox'),
     // We need to get the parent as the menu itself
     // extends withing the div container
-    () => cy.findByRole('listbox').invoke('parent')).should(_ref3 => {
-      let [selectedValue, menu] = _ref3;
+    () => cy.findByRole('listbox').invoke('parent')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -59,8 +56,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     });
 
     // And the left of the SingleSelect is aligned with the left of the anchor
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref4 => {
-      let [selectedValue, menu] = _ref4;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -81,8 +77,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     cy.findByRole('combobox').click();
 
     // Then it is rendered on top of the SingleSelect
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref5 => {
-      let [selectedValue, menu] = _ref5;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -94,8 +89,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     });
 
     // And the left of the SingleSelect is aligned with the left of the anchor
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref6 => {
-      let [selectedValue, menu] = _ref6;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -118,8 +112,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     cy.scrollTo(0, 800);
 
     // Then the top of the menu is aligned with the bottom of the input
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref7 => {
-      let [selectedValue, menu] = _ref7;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];
@@ -133,8 +126,7 @@ describe('SimpleSingleSelect: Menu positioning', () => {
     });
 
     // And the left of the SingleSelect is aligned with the left of the anchor
-    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(_ref8 => {
-      let [selectedValue, menu] = _ref8;
+    cy.all(() => cy.findByRole('combobox'), () => cy.findByRole('listbox')).should(([selectedValue, menu]) => {
       expect(selectedValue.length).to.equal(1);
       expect(menu.length).to.equal(1);
       const $selectedValue = selectedValue[0];

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

@@ -2,17 +2,14 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const Empty = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3788156646",
-    dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
-};
+const Empty = ({
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "3788156646",
+  dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+}, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
 Empty.propTypes = {
   children: PropTypes.string.isRequired
 };

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

@@ -2,17 +2,16 @@ import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
-export function Filter(_ref) {
-  let {
-    ariaControls,
-    dataTest,
-    inputRef,
-    label,
-    placeholder,
-    value,
-    onChange,
-    onKeyDown
-  } = _ref;
+export function Filter({
+  ariaControls,
+  dataTest,
+  inputRef,
+  label,
+  placeholder,
+  value,
+  onChange,
+  onKeyDown
+}) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     ref: inputRef,
     type: "text",
@@ -27,7 +26,7 @@ export function Filter(_ref) {
     onClick: e => e.stopPropagation(),
     onKeyDown: e => {
       e.stopPropagation();
-      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+      onKeyDown === null || onKeyDown === void 0 || onKeyDown(e);
     },
     className: "jsx-1122123784" + " " + "filter-input"
   }), /*#__PURE__*/React.createElement(_JSXStyle, {

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

@@ -3,10 +3,9 @@ import { colors, spacers, theme } from '@dhis2/ui-constants';
 import { CircularLoader } from '@dhis2-ui/loader';
 import PropTypes from 'prop-types';
 import React from 'react';
-export function Loading(_ref) {
-  let {
-    message
-  } = _ref;
+export function Loading({
+  message
+}) {
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["316664301", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + "container"
   }, /*#__PURE__*/React.createElement("div", {

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

@@ -9,32 +9,31 @@ import { Empty } from './empty.js';
 import { Loading } from './loading.js';
 import { NoMatch } from './no-match.js';
 import { OptionsList } from './options-list.js';
-export function Menu(_ref) {
-  let {
-    comboBoxId,
-    focussedOptionIndex,
-    name,
-    options,
-    onChange,
-    optionComponent,
-    dataTest,
-    disabled,
-    empty,
-    filterValue,
-    hidden,
-    labelledBy,
-    listBoxRef,
-    loading,
-    loadingText,
-    maxHeight,
-    noMatchText,
-    optionUpdateStrategy,
-    selectRef,
-    selectedValue,
-    onBlur,
-    onClose,
-    onEndReached
-  } = _ref;
+export function Menu({
+  comboBoxId,
+  focussedOptionIndex,
+  name,
+  options,
+  onChange,
+  optionComponent,
+  dataTest,
+  disabled,
+  empty,
+  filterValue,
+  hidden,
+  labelledBy,
+  listBoxRef,
+  loading,
+  loadingText,
+  maxHeight,
+  noMatchText,
+  optionUpdateStrategy,
+  selectRef,
+  selectedValue,
+  onBlur,
+  onClose,
+  onEndReached
+}) {
   const [menuWidth, setWidth] = useState('auto');
   const dataTestPrefix = `${dataTest}-menu`;
   useEffect(() => {

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

@@ -2,18 +2,15 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-const NoMatch = _ref => {
-  let {
-    children,
-    className
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3788156646",
-    dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
-  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
-};
+const NoMatch = ({
+  children,
+  className
+}) => /*#__PURE__*/React.createElement("div", {
+  className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "3788156646",
+  dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+}, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
 NoMatch.propTypes = {
   children: PropTypes.string.isRequired,
   className: PropTypes.string

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

@@ -5,12 +5,11 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 const VISIBILE_INTERSECTION_RATIO = 0.99;
-function DefaultStyle(_ref) {
-  let {
-    label,
-    disabled,
-    highlighted
-  } = _ref;
+function DefaultStyle({
+  label,
+  disabled,
+  highlighted
+}) {
   return /*#__PURE__*/React.createElement("span", {
     className: _JSXStyle.dynamic([["4038065645", [colors.grey900, spacers.dp8, spacers.dp12, spacers.dp16, colors.grey200, colors.teal700, colors.white, colors.grey500]]]) + " " + (cx('option', {
       disabled,
@@ -26,21 +25,20 @@ DefaultStyle.propTypes = {
   disabled: PropTypes.bool,
   highlighted: PropTypes.bool
 };
-export function Option(_ref2) {
-  let {
-    comboBoxId,
-    index,
-    label,
-    value,
-    onClick,
-    component: StyleComponent = DefaultStyle,
-    dataTest,
-    disabled,
-    highlighted,
-    listBoxRef,
-    onBecameVisible,
-    ...rest
-  } = _ref2;
+export function Option({
+  comboBoxId,
+  index,
+  label,
+  value,
+  onClick,
+  component: StyleComponent = DefaultStyle,
+  dataTest,
+  disabled,
+  highlighted,
+  listBoxRef,
+  onBecameVisible,
+  ...rest
+}) {
   const buttonRef = useRef();
   useEffect(() => {
     if (onBecameVisible) {

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

@@ -3,23 +3,22 @@ import React, { forwardRef, useEffect } from 'react';
 import { isOptionHidden } from '../is-option-hidden.js';
 import { optionProp } from '../shared-prop-types.js';
 import { Option } from './option.js';
-export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, ref) {
-  let {
-    comboBoxId,
-    optionComponent,
-    focussedOptionIndex,
-    id,
-    labelledBy,
-    optionUpdateStrategy,
-    options,
-    selectedValue,
-    dataTest,
-    disabled,
-    loading,
-    onChange,
-    onBlur,
-    onEndReached
-  } = _ref;
+export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList({
+  comboBoxId,
+  optionComponent,
+  focussedOptionIndex,
+  id,
+  labelledBy,
+  optionUpdateStrategy,
+  options,
+  selectedValue,
+  dataTest,
+  disabled,
+  loading,
+  onChange,
+  onBlur,
+  onEndReached
+}, ref) {
   // scrolls the highlighted option into view when:
   // * the highlighted option changes
   // * the menu opens
@@ -45,13 +44,12 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
     "aria-busy": loading.toString(),
     "data-test": dataTest,
     onBlur: onBlur
-  }, options.map((_ref2, index) => {
-    let {
-      value,
-      label,
-      component,
-      disabled: optionDisabled = false
-    } = _ref2;
+  }, options.map(({
+    value,
+    label,
+    component,
+    disabled: optionDisabled = false
+  }, index) => {
     const isSelected = value === selectedValue;
     const isLast = index === options.length - 1;
     return /*#__PURE__*/React.createElement(Option, {

package/build/es/simple-single-select/selected-value/clear-button.js

@@ -3,12 +3,11 @@ import { colors, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
-function ClearButton(_ref) {
-  let {
-    onClear,
-    clearText,
-    dataTest
-  } = _ref;
+function ClearButton({
+  onClear,
+  clearText,
+  dataTest
+}) {
   return /*#__PURE__*/React.createElement("button", {
     "aria-label": i18n.t('{{clearText}}', {
       clearText