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

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

@@ -58,7 +58,6 @@ export function SimpleSingleSelect(_ref2) {
     disabled = false,
     empty: _empty = false,
     error = false,
-    filterHelpText = '',
     filterLabel = '',
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
@@ -95,7 +94,7 @@ export function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = useRef();
   const listBoxRef = useRef();
-  const filterRef = useRef();
+  const filterInputRef = useRef();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -103,6 +102,14 @@ export function SimpleSingleSelect(_ref2) {
   });
   const [selectRef, setSelectRef] = useState();
   const [expanded, setExpanded] = useState(false);
+  useEffect(() => {
+    if (expanded && filterable) {
+      requestAnimationFrame(() => {
+        var _filterInputRef$curre;
+        (_filterInputRef$curre = filterInputRef.current) === null || _filterInputRef$curre === void 0 ? void 0 : _filterInputRef$curre.focus();
+      });
+    }
+  }, [expanded, filterable]);
   const closeMenu = useCallback(() => setExpanded(false), []);
   const selectedValue = (selected === null || selected === void 0 ? void 0 : selected.value) || '';
   const selectedLabel = (selected === null || selected === void 0 ? void 0 : selected.label) || '';
@@ -146,9 +153,10 @@ export function SimpleSingleSelect(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
-    filterRef,
     clearable,
-    onClear
+    onClear,
+    filterable,
+    onFilterChange
   });
   const handleKeyDownOnFilterInput = useHandleKeyPressOnFilterInput({
     value: selectedValue,
@@ -188,6 +196,11 @@ export function SimpleSingleSelect(_ref2) {
     disabled: disabled,
     error: error,
     expanded: expanded,
+    filterLabel: filterLabel,
+    filterPlaceholder: filterPlaceholder,
+    filterRef: filterInputRef,
+    filterable: filterable,
+    filterValue: filterValue,
     hasSelection: !!selectedValue,
     inputMaxHeight: inputMaxHeight,
     labelledBy: labelledBy,
@@ -201,6 +214,8 @@ export function SimpleSingleSelect(_ref2) {
     onBlur: onBlur,
     onClear: onClear,
     onClick: toggleMenu,
+    onFilterChange: onFilterChange,
+    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     onFocus: onFocus,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/React.createElement(Menu, {
@@ -208,13 +223,8 @@ export function SimpleSingleSelect(_ref2) {
     optionComponent: optionComponent,
     disabled: disabled,
     empty: empty,
-    filterHelpText: filterHelpText,
-    filterLabel: filterLabel,
-    filterable: filterable,
     filterValue: filterValue,
-    filterPlaceholder: filterPlaceholder,
     focussedOptionIndex: focussedOptionIndex,
-    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     hidden: !expanded,
     name: name,
     labelledBy: labelledBy,
@@ -227,17 +237,13 @@ export function SimpleSingleSelect(_ref2) {
     options: options,
     selectRef: selectRef,
     selectedValue: selectedValue,
-    tabIndex: tabIndex.toString(),
     onBlur: onBlur,
     onChange: nextValue => {
       onChange(nextValue);
       closeMenu();
     },
     onClose: closeMenu,
-    onEndReached: onEndReached,
-    onFilterChange: onFilterChange,
-    filterRef: filterRef,
-    onOptionsKeyDown: handleKeyDown
+    onEndReached: onEndReached
   }));
 }
 SimpleSingleSelect.propTypes = {
@@ -265,8 +271,6 @@ SimpleSingleSelect.propTypes = {
   empty: PropTypes.node,
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
   error: sharedPropTypes.statusPropType,
-  /** Help text that will be displayed below the input **/
-  filterHelpText: PropTypes.string,
   /** Value will be used as aria-label attribute on the filter input **/
   filterLabel: PropTypes.string,
   /** Placeholder for the filter input **/

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

@@ -4,12 +4,21 @@ 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 useSelectOption(findIndexCallback, _ref) {
+function isUnmodifiedCharacterKey(_ref) {
+  let {
+    key,
+    altKey,
+    ctrlKey,
+    metaKey
+  } = _ref;
+  return key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
+}
+function useSelectOption(findIndexCallback, _ref2) {
   let {
     options,
     onChange,
     value
-  } = _ref;
+  } = _ref2;
   return useCallback(() => {
     const currentOptionIndex = options.findIndex(option => option.value === value);
     const nextSelectedOptionIndex = findIndexCallback({
@@ -26,7 +35,7 @@ function useSelectOption(findIndexCallback, _ref) {
     });
   }, [findIndexCallback, options, onChange, value]);
 }
-export function useHandleKeyPressOnCombobox(_ref2) {
+export function useHandleKeyPressOnCombobox(_ref3) {
   let {
     value,
     disabled,
@@ -40,10 +49,11 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     onChange,
-    filterRef,
     clearable,
-    onClear
-  } = _ref2;
+    onClear,
+    filterable,
+    onFilterChange
+  } = _ref3;
   const {
     onTyping,
     typing
@@ -98,9 +108,7 @@ export function useHandleKeyPressOnCombobox(_ref2) {
   const handleKeyPress = useCallback(event => {
     const {
       key,
-      altKey,
-      ctrlKey,
-      metaKey
+      altKey
     } = event;
     if (disabled || loading) {
       return;
@@ -154,10 +162,6 @@ export function useHandleKeyPressOnCombobox(_ref2) {
       return;
     }
     if (key === 'ArrowUp') {
-      if (filterRef !== null && filterRef !== void 0 && filterRef.current && focussedOptionIndex === 0) {
-        filterRef.current.focus();
-        return;
-      }
       focusPrevOption();
       return;
     }
@@ -169,7 +173,12 @@ export function useHandleKeyPressOnCombobox(_ref2) {
       focusLastOption();
       return;
     }
-    if (key === 'Backspace' || key === 'Clear' || key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey || key === ' ' && typing) {
+    if (filterable && !expanded && isUnmodifiedCharacterKey(event)) {
+      openMenu();
+      onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(key);
+      return;
+    }
+    if (key === 'Backspace' || key === 'Clear' || isUnmodifiedCharacterKey(event) || key === ' ' && typing) {
       onTyping(key);
       return;
     }
@@ -183,6 +192,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, filterRef]);
+  }, [closeMenu, disabled, expanded, loading, openMenu, options, value, typing, focussedOptionIndex, selectFocussedOption, selectNextOption, selectPrevOption, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, onTyping, filterable, onFilterChange]);
   return handleKeyPress;
 }

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

@@ -66,10 +66,8 @@ 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') {
@@ -97,6 +95,6 @@ export function useHandleKeyPressOnFilterInput(_ref) {
     }
 
     // Do nothing
-  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp, listBoxRef]);
+  }, [closeMenu, options, value, loading, focussedOptionIndex, selectFocussedOption, focusComboBox, focusNextOption, focusPrevOption, focusFirstOption, focusLastOption, pageDown, pageUp]);
   return handleKeyPress;
 }

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

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { SimpleSingleSelect, optionProp } from '../simple-single-select/index.js';
 export function SimpleSingleSelectField(props) {
+  var _ref, _selectedOption$label;
   const {
     className,
     dataTest,
@@ -14,12 +15,28 @@ export function SimpleSingleSelectField(props) {
     helpText,
     label,
     name,
+    onChange,
+    options,
     required,
     valid,
     validationText,
+    value,
+    valueLabel,
     warning
   } = props;
   const labelId = `${name}-label`;
+  const selectedOption = options.find(opt => opt.value === value);
+  const selected = value != null && value !== '' ? {
+    value,
+    label: (_ref = (_selectedOption$label = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _selectedOption$label !== void 0 ? _selectedOption$label : valueLabel) !== null && _ref !== void 0 ? _ref : ''
+  } : undefined;
+  const handleChange = option => {
+    var _option$value;
+    onChange((_option$value = option === null || option === void 0 ? void 0 : option.value) !== null && _option$value !== void 0 ? _option$value : '');
+  };
+  const handleClear = () => {
+    onChange('');
+  };
   return /*#__PURE__*/React.createElement(Field, {
     className: className,
     dataTest: dataTest,
@@ -33,7 +50,10 @@ export function SimpleSingleSelectField(props) {
     warning: warning,
     valid: valid
   }, /*#__PURE__*/React.createElement(SimpleSingleSelect, _extends({}, props, {
-    labelledBy: labelId
+    labelledBy: labelId,
+    selected: selected,
+    onChange: handleChange,
+    onClear: handleClear
   })));
 }
 SimpleSingleSelectField.propTypes = {
@@ -108,10 +128,10 @@ SimpleSingleSelectField.propTypes = {
    * be used to supply the text to be shown.
    **/
   valueLabel: requiredIf(props => {
-    if (props.options.find(_ref => {
+    if (props.options.find(_ref2 => {
       let {
         value
-      } = _ref;
+      } = _ref2;
       return props.value === value;
     })) {
       return false;

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

@@ -23,7 +23,7 @@ describe('<SimpleSingleSelectField />', () => {
   it('should forward props to the SimpleSingleSelect component', () => {
     const options = [];
     const optionComponent = () => null;
-    const onChange = () => null;
+    const onChange = jest.fn();
     const onBlur = () => null;
     const onEndReached = () => null;
     const onFilterChange = () => null;
@@ -67,7 +67,10 @@ describe('<SimpleSingleSelectField />', () => {
     }));
     expect(SimpleSingleSelect.mock.calls[0][0].name).toBe('foo');
     expect(SimpleSingleSelect.mock.calls[0][0].options).toBe(options);
-    expect(SimpleSingleSelect.mock.calls[0][0].onChange).toBe(onChange);
+    SimpleSingleSelect.mock.calls[0][0].onChange({
+      value: 'test'
+    });
+    expect(onChange).toHaveBeenCalledWith('test');
     expect(SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false);
     expect(SimpleSingleSelect.mock.calls[0][0].className).toBe('');
     expect(SimpleSingleSelect.mock.calls[0][0].clearText).toBe('');

package/package.json

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

package/types/index.d.ts

@@ -51,6 +51,10 @@ export interface MultiSelectProps {
      * Adds a 'clear' option to the menu
      */
     clearable?: boolean
+    /**
+     * When the number of selected items exceeds this threshold, chips are replaced with "X selected" text
+     */
+    collapseSelectionAfter?: number
     dataTest?: string
     dense?: boolean
     disabled?: boolean