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

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

@@ -3,27 +3,26 @@ import { colors, theme } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useCallback, useEffect } from 'react';
-export const Container = /*#__PURE__*/forwardRef(function Container(_ref, ref) {
-  let {
-    children,
-    comboBoxId,
-    autoFocus,
-    dataTest,
-    dense,
-    disabled,
-    error,
-    expanded,
-    labelledBy,
-    name,
-    placeholder,
-    tabIndex,
-    valid,
-    warning,
-    onBlur,
-    onClick: _onClick,
-    onFocus,
-    onKeyDown
-  } = _ref;
+export const Container = /*#__PURE__*/forwardRef(function Container({
+  children,
+  comboBoxId,
+  autoFocus,
+  dataTest,
+  dense,
+  disabled,
+  error,
+  expanded,
+  labelledBy,
+  name,
+  placeholder,
+  tabIndex,
+  valid,
+  warning,
+  onBlur,
+  onClick: _onClick,
+  onFocus,
+  onKeyDown
+}, ref) {
   // Using useEffect so we have access to the ref, which will be set before
   // the first call to the useEffect's callback
   useEffect(() => {
@@ -34,9 +33,9 @@ export const Container = /*#__PURE__*/forwardRef(function Container(_ref, ref) {
   // We want to run this only once:
   // eslint-disable-next-line react-hooks/exhaustive-deps
   []);
-  const onClick = useCallback(function () {
+  const onClick = useCallback((...args) => {
     if (!disabled) {
-      _onClick(...arguments);
+      _onClick(...args);
     }
   }, [disabled, _onClick]);
   return /*#__PURE__*/React.createElement("div", {

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

@@ -2,12 +2,11 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-export function Placeholder(_ref) {
-  let {
-    placeholder,
-    className,
-    dataTest
-  } = _ref;
+export function Placeholder({
+  placeholder,
+  className,
+  dataTest
+}) {
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1027033961", [colors.grey600]]]) + " " + (className || "")

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

@@ -2,12 +2,11 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-export function Prefix(_ref) {
-  let {
-    prefix,
-    className,
-    dataTest
-  } = _ref;
+export function Prefix({
+  prefix,
+  className,
+  dataTest
+}) {
   return /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1343055987", [colors.grey600, spacers.dp12]]]) + " " + (className || "")

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

@@ -7,41 +7,40 @@ import { ClearButton } from './clear-button.js';
 import { Container } from './container.js';
 import { Placeholder } from './placeholder.js';
 import { Prefix } from './prefix.js';
-export function SelectedValue(_ref) {
-  let {
-    clearText,
-    comboBoxId,
-    name,
-    selectedLabel,
-    onKeyDown,
-    autoFocus,
-    clearable,
-    comboBoxRef,
-    dataTest,
-    dense,
-    disabled,
-    error,
-    expanded,
-    filterLabel,
-    filterPlaceholder,
-    filterRef,
-    filterable,
-    filterValue,
-    hasSelection,
-    inputMaxHeight,
-    labelledBy,
-    placeholder,
-    prefix,
-    tabIndex,
-    valid,
-    warning,
-    onBlur,
-    onClear,
-    onClick,
-    onFilterChange,
-    onFilterInputKeyDown,
-    onFocus
-  } = _ref;
+export function SelectedValue({
+  clearText,
+  comboBoxId,
+  name,
+  selectedLabel,
+  onKeyDown,
+  autoFocus,
+  clearable,
+  comboBoxRef,
+  dataTest,
+  dense,
+  disabled,
+  error,
+  expanded,
+  filterLabel,
+  filterPlaceholder,
+  filterRef,
+  filterable,
+  filterValue,
+  hasSelection,
+  inputMaxHeight,
+  labelledBy,
+  placeholder,
+  prefix,
+  tabIndex,
+  valid,
+  warning,
+  onBlur,
+  onClear,
+  onClick,
+  onFilterChange,
+  onFilterInputKeyDown,
+  onFocus
+}) {
   const dataTestPrefix = `${dataTest}-selectedvalue`;
   const showFilter = filterable && expanded;
   return /*#__PURE__*/React.createElement(Container, {

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

@@ -8,12 +8,11 @@ import { Menu } from './menu/index.js';
 import { SelectedValue } from './selected-value/index.js';
 import { optionProp } from './shared-prop-types.js';
 import { useHandleKeyPressOnCombobox, useHandleKeyPressOnFilterInput } from './use-handle-key-press/index.js';
-function useFocussedOptionIndex(_ref) {
-  let {
-    filterable,
-    filterValue,
-    options
-  } = _ref;
+function useFocussedOptionIndex({
+  filterable,
+  filterValue,
+  options
+}) {
   const [defaultFocussedOptionIndex, setDefaultFocussedOptionIndex] = useState(0);
   const [searchFocussedOptionIndex, setSearchFocussedOptionIndex] = useState(0);
 
@@ -43,47 +42,46 @@ function useFocussedOptionIndex(_ref) {
   }, [filterValue]);
   return [focussedOptionIndex, setFocussedOptionIndex];
 }
-export function SimpleSingleSelect(_ref2) {
-  let {
-    name,
-    options,
-    onChange,
-    autoFocus = false,
-    className = '',
-    clearText: _clearText = '',
-    clearable = false,
-    optionComponent = undefined,
-    dataTest = 'dhis2-simplesingleselect',
-    dense = false,
-    disabled = false,
-    empty: _empty = false,
-    error = false,
-    filterLabel = '',
-    filterPlaceholder: _filterPlaceholder = '',
-    filterValue = '',
-    filterable = false,
-    inputMaxHeight = '',
-    labelledBy = '',
-    loading = false,
-    menuLoadingText: _menuLoadingText = '',
-    menuMaxHeight = '288px',
-    noMatchText: _noMatchText = '',
-    optionUpdateStrategy = 'polite',
-    placeholder = '',
-    prefix = '',
-    selected = {
-      label: '',
-      value: ''
-    },
-    tabIndex = '0',
-    valid = false,
-    warning = false,
-    onBlur = () => undefined,
-    onClear = () => undefined,
-    onEndReached = () => undefined,
-    onFilterChange = () => undefined,
-    onFocus = () => undefined
-  } = _ref2;
+export function SimpleSingleSelect({
+  name,
+  options,
+  onChange,
+  autoFocus = false,
+  className = '',
+  clearText: _clearText = '',
+  clearable = false,
+  optionComponent = undefined,
+  dataTest = 'dhis2-simplesingleselect',
+  dense = false,
+  disabled = false,
+  empty: _empty = false,
+  error = false,
+  filterLabel = '',
+  filterPlaceholder: _filterPlaceholder = '',
+  filterValue = '',
+  filterable = false,
+  inputMaxHeight = '',
+  labelledBy = '',
+  loading = false,
+  menuLoadingText: _menuLoadingText = '',
+  menuMaxHeight = '288px',
+  noMatchText: _noMatchText = '',
+  optionUpdateStrategy = 'polite',
+  placeholder = '',
+  prefix = '',
+  selected = {
+    label: '',
+    value: ''
+  },
+  tabIndex = '0',
+  valid = false,
+  warning = false,
+  onBlur = () => undefined,
+  onClear = () => undefined,
+  onEndReached = () => undefined,
+  onFilterChange = () => undefined,
+  onFocus = () => undefined
+}) {
   // We can't translate with default props as the translation function would
   // be called before we get any translations from the consuming app/lib
   const clearText = _clearText || i18n.t('Clear');
@@ -106,7 +104,7 @@ export function SimpleSingleSelect(_ref2) {
     if (expanded && filterable) {
       requestAnimationFrame(() => {
         var _filterInputRef$curre;
-        (_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0 ? void 0 : _filterInputRef$curre.focus();
+        (_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0 || _filterInputRef$curre.focus();
       });
     }
   }, [expanded, filterable]);

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

@@ -5,10 +5,7 @@ import { SimpleSingleSelect } from './simple-single-select.js';
 describe('<SimpleSingleSelect />', () => {
   beforeAll(() => {
     const consoleError = console.error;
-    jest.spyOn(console, 'error').mockImplementation(function () {
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
       const [message, dynamicContent] = args;
       if (message.startsWith('Warning: An update to %s inside a test was not wrapped in act(...)') && dynamicContent === 'Popper') {
         return;
@@ -209,15 +206,12 @@ describe('<SimpleSingleSelect />', () => {
     const onChange = jest.fn();
 
     // eslint-disable-next-line react/prop-types
-    const CustomOption = _ref => {
-      let {
-        value,
-        label
-      } = _ref;
-      return /*#__PURE__*/React.createElement("span", {
-        "data-test": `custom-option-${value}`
-      }, label);
-    };
+    const CustomOption = ({
+      value,
+      label
+    }) => /*#__PURE__*/React.createElement("span", {
+      "data-test": `custom-option-${value}`
+    }, label);
     render(/*#__PURE__*/React.createElement(SimpleSingleSelect, {
       name: "simple",
       selected: null,
@@ -247,15 +241,12 @@ describe('<SimpleSingleSelect />', () => {
     const onChange = jest.fn();
 
     // eslint-disable-next-line react/prop-types
-    const CustomOption = _ref2 => {
-      let {
-        value,
-        label
-      } = _ref2;
-      return /*#__PURE__*/React.createElement("span", {
-        "data-test": `custom-option-${value}`
-      }, label);
-    };
+    const CustomOption = ({
+      value,
+      label
+    }) => /*#__PURE__*/React.createElement("span", {
+      "data-test": `custom-option-${value}`
+    }, label);
     render(/*#__PURE__*/React.createElement(SimpleSingleSelect, {
       name: "simple",
       selected: null,

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

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-export function useFocusOption(findIndexCallback, _ref) {
-  let {
-    options,
-    focussedOptionIndex,
-    setFocussedOptionIndex
-  } = _ref;
+export function useFocusOption(findIndexCallback, {
+  options,
+  focussedOptionIndex,
+  setFocussedOptionIndex
+}) {
   return useCallback(() => {
     const nextFocussedIndex = findIndexCallback({
       options,

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

@@ -4,21 +4,19 @@ import { useHandleTyping } from './use-handle-typing.js';
 import { usePageDown } from './use-page-down.js';
 import { usePageUp } from './use-page-up.js';
 import { findNextOptionIndex, findPrevOptionIndex, findFirstOptionIndex, findLastOptionIndex } from './utils.js';
-function isUnmodifiedCharacterKey(_ref) {
-  let {
-    key,
-    altKey,
-    ctrlKey,
-    metaKey
-  } = _ref;
+function isUnmodifiedCharacterKey({
+  key,
+  altKey,
+  ctrlKey,
+  metaKey
+}) {
   return key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
 }
-function useSelectOption(findIndexCallback, _ref2) {
-  let {
-    options,
-    onChange,
-    value
-  } = _ref2;
+function useSelectOption(findIndexCallback, {
+  options,
+  onChange,
+  value
+}) {
   return useCallback(() => {
     const currentOptionIndex = options.findIndex(option => option.value === value);
     const nextSelectedOptionIndex = findIndexCallback({
@@ -35,25 +33,24 @@ function useSelectOption(findIndexCallback, _ref2) {
     });
   }, [findIndexCallback, options, onChange, value]);
 }
-export function useHandleKeyPressOnCombobox(_ref3) {
-  let {
-    value,
-    disabled,
-    expanded,
-    loading,
-    options,
-    openMenu,
-    closeMenu,
-    listBoxRef,
-    focussedOptionIndex,
-    setFocussedOptionIndex,
-    selectFocussedOption,
-    onChange,
-    clearable,
-    onClear,
-    filterable,
-    onFilterChange
-  } = _ref3;
+export function useHandleKeyPressOnCombobox({
+  value,
+  disabled,
+  expanded,
+  loading,
+  options,
+  openMenu,
+  closeMenu,
+  listBoxRef,
+  focussedOptionIndex,
+  setFocussedOptionIndex,
+  selectFocussedOption,
+  onChange,
+  clearable,
+  onClear,
+  filterable,
+  onFilterChange
+}) {
   const {
     onTyping,
     typing
@@ -142,7 +139,7 @@ export function useHandleKeyPressOnCombobox(_ref3) {
       return;
     }
     if (!expanded && clearable && key === 'Escape') {
-      onClear === null || onClear === void 0 ? void 0 : onClear();
+      onClear === null || onClear === void 0 || onClear();
       return;
     }
     if (!expanded && (key === ' ' && !typing || key === 'Enter' || key === 'ArrowUp' && altKey || key === 'ArrowDown' && altKey)) {
@@ -175,7 +172,7 @@ export function useHandleKeyPressOnCombobox(_ref3) {
     }
     if (filterable && !expanded && isUnmodifiedCharacterKey(event)) {
       openMenu();
-      onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(key);
+      onFilterChange === null || onFilterChange === void 0 || onFilterChange(key);
       return;
     }
     if (key === 'Backspace' || key === 'Clear' || isUnmodifiedCharacterKey(event) || key === ' ' && typing) {

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

@@ -3,18 +3,17 @@ import { useFocusOption } from './use-focus-option.js';
 import { usePageDown } from './use-page-down.js';
 import { usePageUp } from './use-page-up.js';
 import { findNextOptionIndex, findPrevOptionIndex, findFirstOptionIndex, findLastOptionIndex } from './utils.js';
-export function useHandleKeyPressOnFilterInput(_ref) {
-  let {
-    value,
-    options,
-    loading,
-    closeMenu,
-    listBoxRef,
-    focusComboBox,
-    focussedOptionIndex,
-    setFocussedOptionIndex,
-    selectFocussedOption
-  } = _ref;
+export function useHandleKeyPressOnFilterInput({
+  value,
+  options,
+  loading,
+  closeMenu,
+  listBoxRef,
+  focusComboBox,
+  focussedOptionIndex,
+  setFocussedOptionIndex,
+  selectFocussedOption
+}) {
   const pageDown = usePageDown({
     options,
     focussedOptionIndex,

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

@@ -1,13 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 const TYPING_DEBOUNCE_TIME = 300; // ms
 
-export function useHandleTyping(_ref) {
-  let {
-    expanded,
-    options,
-    setFocussedOptionIndex,
-    onChange
-  } = _ref;
+export function useHandleTyping({
+  expanded,
+  options,
+  setFocussedOptionIndex,
+  onChange
+}) {
   const [value, setValue] = useState('');
   const [typing, setTyping] = useState(false);
 
@@ -36,13 +35,10 @@ export function useHandleTyping(_ref) {
     if (value && value !== prevValueRef.current) {
       // We only want to do this when the value changed
       prevValueRef.current = value;
-      const optionIndex = options.findIndex(_ref2 => {
-        let {
-          disabled,
-          label
-        } = _ref2;
-        return !disabled && label.toLowerCase().startsWith(value.toLowerCase());
-      });
+      const optionIndex = options.findIndex(({
+        disabled,
+        label
+      }) => !disabled && label.toLowerCase().startsWith(value.toLowerCase()));
       if (optionIndex !== -1) {
         if (expanded) {
           setFocussedOptionIndex(optionIndex);

package/build/es/simple-single-select/use-handle-key-press/use-highlight-first-option-on-previous-page.js

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
-export function useHighlightFirstOptionOnPreviousPage(_ref) {
-  let {
-    options,
-    focussedOptionIndex,
-    setFocussedOptionIndex,
-    listBoxRef
-  } = _ref;
+export function useHighlightFirstOptionOnPreviousPage({
+  options,
+  focussedOptionIndex,
+  setFocussedOptionIndex,
+  listBoxRef
+}) {
   return useCallback(() => {
     const listBoxParent = listBoxRef.current.parentNode;
     const optionElements = Array.from(listBoxRef.current.childNodes);

package/build/es/simple-single-select/use-handle-key-press/use-highlight-first-visible-option.js

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-export function useHighlightFirstVisibleOption(_ref) {
-  let {
-    options,
-    focussedOptionIndex,
-    setFocussedOptionIndex
-  } = _ref;
+export function useHighlightFirstVisibleOption({
+  options,
+  focussedOptionIndex,
+  setFocussedOptionIndex
+}) {
   return useCallback(lowestVisibleIndex => {
     if (!options[lowestVisibleIndex].disabled) {
       setFocussedOptionIndex(lowestVisibleIndex);

package/build/es/simple-single-select/use-handle-key-press/use-highlight-last-option-on-next-page.js

@@ -1,11 +1,10 @@
 import { useCallback } from 'react';
-export function useHighlightLastOptionOnNextPage(_ref) {
-  let {
-    options,
-    focussedOptionIndex,
-    setFocussedOptionIndex,
-    listBoxRef
-  } = _ref;
+export function useHighlightLastOptionOnNextPage({
+  options,
+  focussedOptionIndex,
+  setFocussedOptionIndex,
+  listBoxRef
+}) {
   return useCallback(() => {
     const listBoxParent = listBoxRef.current.parentNode;
     const optionElements = Array.from(listBoxRef.current.childNodes);

package/build/es/simple-single-select/use-handle-key-press/use-highlight-last-visible-option.js

@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-export function useHighlightLastVisibleOption(_ref) {
-  let {
-    options,
-    focussedOptionIndex,
-    setFocussedOptionIndex
-  } = _ref;
+export function useHighlightLastVisibleOption({
+  options,
+  focussedOptionIndex,
+  setFocussedOptionIndex
+}) {
   return useCallback(highestVisibleIndex => {
     if (!options[highestVisibleIndex].disabled) {
       setFocussedOptionIndex(highestVisibleIndex);

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

@@ -2,13 +2,12 @@ import { useCallback } from 'react';
 import { isOptionHidden } from '../is-option-hidden.js';
 import { useHighlightLastOptionOnNextPage } from './use-highlight-last-option-on-next-page.js';
 import { useHighlightLastVisibleOption } from './use-highlight-last-visible-option.js';
-export function usePageDown(_ref) {
-  let {
-    options,
-    focussedOptionIndex,
-    setFocussedOptionIndex,
-    listBoxRef
-  } = _ref;
+export function usePageDown({
+  options,
+  focussedOptionIndex,
+  setFocussedOptionIndex,
+  listBoxRef
+}) {
   const highlightLastVisibleOption = useHighlightLastVisibleOption({
     options,
     focussedOptionIndex,

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

@@ -2,13 +2,12 @@ import { useCallback } from 'react';
 import { isOptionHidden } from '../is-option-hidden.js';
 import { useHighlightFirstOptionOnPreviousPage } from './use-highlight-first-option-on-previous-page.js';
 import { useHighlightFirstVisibleOption } from './use-highlight-first-visible-option.js';
-export function usePageUp(_ref) {
-  let {
-    options,
-    listBoxRef,
-    focussedOptionIndex,
-    setFocussedOptionIndex
-  } = _ref;
+export function usePageUp({
+  options,
+  listBoxRef,
+  focussedOptionIndex,
+  setFocussedOptionIndex
+}) {
   const highlightFirstVisibleOption = useHighlightFirstVisibleOption({
     options,
     focussedOptionIndex,