npm - @dhis2-ui/select - Versions diffs - 10.12.9 → 10.12.10 - Mend

@dhis2-ui/select 10.12.9 → 10.12.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

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

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Filter = Filter;
 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 _index = _interopRequireDefault(require("../../locales/index.js"));
@@ -15,46 +13,41 @@ function Filter(_ref) {
   let {
     ariaControls,
     dataTest,
+    inputRef,
     label,
     placeholder,
-    tabIndex,
     value,
     onChange,
     onKeyDown
   } = _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,
-    tabIndex: tabIndex,
-    ariaControls: ariaControls,
-    ariaHaspopup: "listbox",
-    ariaLabel: label || _index.default.t('Search options'),
-    dataTest: `${dataTest}-input`,
-    value: value,
-    onChange: _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return onChange(value);
-    },
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
+    ref: inputRef,
     type: "text",
     name: "filter",
+    value: value,
     placeholder: placeholder,
-    onKeyDown: (_, e) => onKeyDown(e)
+    "aria-label": label || _index.default.t('Search options'),
+    "aria-controls": ariaControls,
+    "aria-haspopup": "listbox",
+    "data-test": dataTest,
+    onChange: e => onChange(e.target.value),
+    onClick: e => e.stopPropagation(),
+    onKeyDown: e => {
+      e.stopPropagation();
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    },
+    className: "jsx-1122123784" + " " + "filter-input"
   }), /*#__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};}`]));
+    id: "1122123784"
+  }, [".filter-input.jsx-1122123784{-webkit-flex:1;-ms-flex:1;flex:1;border:none;outline:none;background:transparent;font-size:14px;line-height:16px;color:inherit;padding:0;min-width:0;}"]));
 }
 Filter.propTypes = {
   ariaControls: _propTypes.default.string.isRequired,
+  inputRef: _propTypes.default.object.isRequired,
   value: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   label: _propTypes.default.string,
   placeholder: _propTypes.default.string,
-  tabIndex: _propTypes.default.string,
   onKeyDown: _propTypes.default.func
 };

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

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _sharedPropTypes = require("../shared-prop-types.js");
 var _empty = require("./empty.js");
-var _filter = require("./filter.js");
 var _loading = require("./loading.js");
 var _noMatch = require("./no-match.js");
 var _optionsList = require("./options-list.js");
@@ -30,10 +29,7 @@ function Menu(_ref) {
     dataTest,
     disabled,
     empty,
-    filterLabel,
-    filterPlaceholder,
     filterValue,
-    filterable,
     hidden,
     labelledBy,
     listBoxRef,
@@ -44,12 +40,9 @@ function Menu(_ref) {
     optionUpdateStrategy,
     selectRef,
     selectedValue,
-    tabIndex,
     onBlur,
     onClose,
-    onEndReached,
-    onFilterChange,
-    onFilterInputKeyDown
+    onEndReached
   } = _ref;
   const [menuWidth, setWidth] = (0, _react.useState)('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -83,18 +76,7 @@ function Menu(_ref) {
       maxHeight
     },
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "menu"
-  }, 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, {
-    dataTest: `${dataTestPrefix}-filter`,
-    value: filterValue,
-    label: filterLabel,
-    ariaControls: `${name}-listbox`,
-    placeholder: filterPlaceholder,
-    tabIndex: tabIndex,
-    onChange: onFilterChange,
-    onKeyDown: onFilterInputKeyDown
-  })), isEmpty && /*#__PURE__*/_react.default.createElement(_empty.Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/_react.default.createElement(_noMatch.NoMatch, null, noMatchText), /*#__PURE__*/_react.default.createElement("div", {
+  }, isEmpty && /*#__PURE__*/_react.default.createElement(_empty.Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/_react.default.createElement(_noMatch.NoMatch, null, noMatchText), /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "listbox-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "listbox-wrapper"
@@ -135,10 +117,7 @@ Menu.propTypes = {
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   empty: _propTypes.default.node,
-  filterLabel: _propTypes.default.string,
-  filterPlaceholder: _propTypes.default.string,
   filterValue: _propTypes.default.string,
-  filterable: _propTypes.default.bool,
   hidden: _propTypes.default.bool,
   labelledBy: _propTypes.default.string,
   loading: _propTypes.default.bool,
@@ -149,10 +128,7 @@ Menu.propTypes = {
   optionUpdateStrategy: _propTypes.default.oneOf(['off', 'polite', 'assertive']),
   selectRef: _propTypes.default.instanceOf(HTMLElement),
   selectedValue: _propTypes.default.string,
-  tabIndex: _propTypes.default.string,
   onBlur: _propTypes.default.func,
   onClose: _propTypes.default.func,
-  onEndReached: _propTypes.default.func,
-  onFilterChange: _propTypes.default.func,
-  onFilterInputKeyDown: _propTypes.default.func
+  onEndReached: _propTypes.default.func
 };

package/build/cjs/simple-single-select/selected-value/selected-value.js CHANGED Viewed

@@ -8,6 +8,7 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiIcons = require("@dhis2/ui-icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
+var _filter = require("../menu/filter.js");
 var _clearButton = require("./clear-button.js");
 var _container = require("./container.js");
 var _placeholder = require("./placeholder.js");
@@ -28,6 +29,11 @@ function SelectedValue(_ref) {
     disabled,
     error,
     expanded,
+    filterLabel,
+    filterPlaceholder,
+    filterRef,
+    filterable,
+    filterValue,
     hasSelection,
     inputMaxHeight,
     labelledBy,
@@ -39,9 +45,12 @@ function SelectedValue(_ref) {
     onBlur,
     onClear,
     onClick,
+    onFilterChange,
+    onFilterInputKeyDown,
     onFocus
   } = _ref;
   const dataTestPrefix = `${dataTest}-selectedvalue`;
+  const showFilter = filterable && expanded;
   return /*#__PURE__*/_react.default.createElement(_container.Container, {
     dataTest: `${dataTestPrefix}-container`,
     ref: comboBoxRef,
@@ -64,7 +73,16 @@ function SelectedValue(_ref) {
   }, prefix && /*#__PURE__*/_react.default.createElement(_prefix.Prefix, {
     dataTest: `${dataTestPrefix}-prefix`,
     prefix: prefix
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), showFilter ? /*#__PURE__*/_react.default.createElement(_filter.Filter, {
+    inputRef: filterRef,
+    ariaControls: `${name}-listbox`,
+    dataTest: `${dataTestPrefix}-filter`,
+    label: filterLabel,
+    placeholder: filterPlaceholder,
+    value: filterValue,
+    onChange: onFilterChange,
+    onKeyDown: onFilterInputKeyDown
+  }) : /*#__PURE__*/_react.default.createElement("div", {
     tabIndex: "-1",
     className: _style.default.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "selected-option-label"
   }, !selectedLabel && !prefix && placeholder && /*#__PURE__*/_react.default.createElement(_placeholder.Placeholder, {
@@ -91,6 +109,7 @@ function SelectedValue(_ref) {
 SelectedValue.propTypes = {
   clearText: _propTypes.default.string.isRequired,
   comboBoxId: _propTypes.default.string.isRequired,
+  filterRef: _propTypes.default.object.isRequired,
   name: _propTypes.default.string.isRequired,
   selectedLabel: _propTypes.default.string.isRequired,
   onKeyDown: _propTypes.default.func.isRequired,
@@ -104,6 +123,10 @@ SelectedValue.propTypes = {
   disabled: _propTypes.default.bool,
   error: _propTypes.default.bool,
   expanded: _propTypes.default.bool,
+  filterLabel: _propTypes.default.string,
+  filterPlaceholder: _propTypes.default.string,
+  filterValue: _propTypes.default.string,
+  filterable: _propTypes.default.bool,
   hasSelection: _propTypes.default.bool,
   inputMaxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   labelledBy: _propTypes.default.string,
@@ -115,5 +138,7 @@ SelectedValue.propTypes = {
   onBlur: _propTypes.default.func,
   onClear: _propTypes.default.func,
   onClick: _propTypes.default.func,
+  onFilterChange: _propTypes.default.func,
+  onFilterInputKeyDown: _propTypes.default.func,
   onFocus: _propTypes.default.func
 };

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

@@ -67,7 +67,6 @@ function SimpleSingleSelect(_ref2) {
     disabled = false,
     empty: _empty = false,
     error = false,
-    filterHelpText = '',
     filterLabel = '',
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
@@ -104,6 +103,7 @@ function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = (0, _react.useRef)();
   const listBoxRef = (0, _react.useRef)();
+  const filterInputRef = (0, _react.useRef)();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -111,6 +111,14 @@ function SimpleSingleSelect(_ref2) {
   });
   const [selectRef, setSelectRef] = (0, _react.useState)();
   const [expanded, setExpanded] = (0, _react.useState)(false);
+  (0, _react.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 = (0, _react.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) || '';
@@ -155,7 +163,9 @@ function SimpleSingleSelect(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     clearable,
-    onClear
+    onClear,
+    filterable,
+    onFilterChange
   });
   const handleKeyDownOnFilterInput = (0, _index4.useHandleKeyPressOnFilterInput)({
     value: selectedValue,
@@ -195,6 +205,11 @@ 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,
@@ -208,6 +223,8 @@ function SimpleSingleSelect(_ref2) {
     onBlur: onBlur,
     onClear: onClear,
     onClick: toggleMenu,
+    onFilterChange: onFilterChange,
+    onFilterInputKeyDown: handleKeyDownOnFilterInput,
     onFocus: onFocus,
     onKeyDown: handleKeyDown
   }), /*#__PURE__*/_react.default.createElement(_index2.Menu, {
@@ -215,13 +232,8 @@ 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,
@@ -234,15 +246,13 @@ 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
+    onEndReached: onEndReached
   }));
 }
 SimpleSingleSelect.propTypes = {
@@ -270,8 +280,6 @@ SimpleSingleSelect.propTypes = {
   empty: _propTypes2.default.node,
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
   error: _uiConstants.sharedPropTypes.statusPropType,
-  /** Help text that will be displayed below the input **/
-  filterHelpText: _propTypes2.default.string,
   /** Value will be used as aria-label attribute on the filter input **/
   filterLabel: _propTypes2.default.string,
   /** Placeholder for the filter input **/

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

@@ -10,12 +10,21 @@ var _useHandleTyping = require("./use-handle-typing.js");
 var _usePageDown = require("./use-page-down.js");
 var _usePageUp = require("./use-page-up.js");
 var _utils = require("./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 (0, _react.useCallback)(() => {
     const currentOptionIndex = options.findIndex(option => option.value === value);
     const nextSelectedOptionIndex = findIndexCallback({
@@ -32,7 +41,7 @@ function useSelectOption(findIndexCallback, _ref) {
     });
   }, [findIndexCallback, options, onChange, value]);
 }
-function useHandleKeyPressOnCombobox(_ref2) {
+function useHandleKeyPressOnCombobox(_ref3) {
   let {
     value,
     disabled,
@@ -47,8 +56,10 @@ function useHandleKeyPressOnCombobox(_ref2) {
     selectFocussedOption,
     onChange,
     clearable,
-    onClear
-  } = _ref2;
+    onClear,
+    filterable,
+    onFilterChange
+  } = _ref3;
   const {
     onTyping,
     typing
@@ -103,9 +114,7 @@ function useHandleKeyPressOnCombobox(_ref2) {
   const handleKeyPress = (0, _react.useCallback)(event => {
     const {
       key,
-      altKey,
-      ctrlKey,
-      metaKey
+      altKey
     } = event;
     if (disabled || loading) {
       return;
@@ -170,7 +179,12 @@ 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;
     }
@@ -184,6 +198,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, filterable, onFilterChange]);
   return handleKeyPress;
 }

package/build/cjs/simple-single-select-field/simple-single-select-field.js CHANGED Viewed

@@ -13,6 +13,7 @@ var _index = require("../simple-single-select/index.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function SimpleSingleSelectField(props) {
+  var _ref, _selectedOption$label;
   const {
     className,
     dataTest,
@@ -21,12 +22,28 @@ 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.default.createElement(_field.Field, {
     className: className,
     dataTest: dataTest,
@@ -40,7 +57,10 @@ function SimpleSingleSelectField(props) {
     warning: warning,
     valid: valid
   }, /*#__PURE__*/_react.default.createElement(_index.SimpleSingleSelect, _extends({}, props, {
-    labelledBy: labelId
+    labelledBy: labelId,
+    selected: selected,
+    onChange: handleChange,
+    onClear: handleClear
   })));
 }
 SimpleSingleSelectField.propTypes = {
@@ -115,10 +135,10 @@ SimpleSingleSelectField.propTypes = {
    * be used to supply the text to be shown.
    **/
   valueLabel: (0, _propTypes.requiredIf)(props => {
-    if (props.options.find(_ref => {
+    if (props.options.find(_ref2 => {
       let {
         value
-      } = _ref;
+      } = _ref2;
       return props.value === value;
     })) {
       return false;

package/build/cjs/simple-single-select-field/simple-single-select-field.test.js CHANGED Viewed

@@ -26,7 +26,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;
@@ -70,7 +70,10 @@ describe('<SimpleSingleSelectField />', () => {
     }));
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].name).toBe('foo');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].options).toBe(options);
-    expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onChange).toBe(onChange);
+    _simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].onChange({
+      value: 'test'
+    });
+    expect(onChange).toHaveBeenCalledWith('test');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false);
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].className).toBe('');
     expect(_simpleSingleSelect.SimpleSingleSelect.mock.calls[0][0].clearText).toBe('');

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

@@ -1,6 +1,4 @@
 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 i18n from '../../locales/index.js';
@@ -8,46 +6,41 @@ export function Filter(_ref) {
   let {
     ariaControls,
     dataTest,
+    inputRef,
     label,
     placeholder,
-    tabIndex,
     value,
     onChange,
     onKeyDown
   } = _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,
-    tabIndex: tabIndex,
-    ariaControls: ariaControls,
-    ariaHaspopup: "listbox",
-    ariaLabel: label || i18n.t('Search options'),
-    dataTest: `${dataTest}-input`,
-    value: value,
-    onChange: _ref2 => {
-      let {
-        value
-      } = _ref2;
-      return onChange(value);
-    },
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    ref: inputRef,
     type: "text",
     name: "filter",
+    value: value,
     placeholder: placeholder,
-    onKeyDown: (_, e) => onKeyDown(e)
+    "aria-label": label || i18n.t('Search options'),
+    "aria-controls": ariaControls,
+    "aria-haspopup": "listbox",
+    "data-test": dataTest,
+    onChange: e => onChange(e.target.value),
+    onClick: e => e.stopPropagation(),
+    onKeyDown: e => {
+      e.stopPropagation();
+      onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    },
+    className: "jsx-1122123784" + " " + "filter-input"
   }), /*#__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};}`]));
+    id: "1122123784"
+  }, [".filter-input.jsx-1122123784{-webkit-flex:1;-ms-flex:1;flex:1;border:none;outline:none;background:transparent;font-size:14px;line-height:16px;color:inherit;padding:0;min-width:0;}"]));
 }
 Filter.propTypes = {
   ariaControls: PropTypes.string.isRequired,
+  inputRef: PropTypes.object.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   label: PropTypes.string,
   placeholder: PropTypes.string,
-  tabIndex: PropTypes.string,
   onKeyDown: PropTypes.func
 };

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

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState } from 'react';
 import { optionProp } from '../shared-prop-types.js';
 import { Empty } from './empty.js';
-import { Filter } from './filter.js';
 import { Loading } from './loading.js';
 import { NoMatch } from './no-match.js';
 import { OptionsList } from './options-list.js';
@@ -21,10 +20,7 @@ export function Menu(_ref) {
     dataTest,
     disabled,
     empty,
-    filterLabel,
-    filterPlaceholder,
     filterValue,
-    filterable,
     hidden,
     labelledBy,
     listBoxRef,
@@ -35,12 +31,9 @@ export function Menu(_ref) {
     optionUpdateStrategy,
     selectRef,
     selectedValue,
-    tabIndex,
     onBlur,
     onClose,
-    onEndReached,
-    onFilterChange,
-    onFilterInputKeyDown
+    onEndReached
   } = _ref;
   const [menuWidth, setWidth] = useState('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -74,18 +67,7 @@ export function Menu(_ref) {
       maxHeight
     },
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "menu"
-  }, filterable && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "filter-container"
-  }, /*#__PURE__*/React.createElement(Filter, {
-    dataTest: `${dataTestPrefix}-filter`,
-    value: filterValue,
-    label: filterLabel,
-    ariaControls: `${name}-listbox`,
-    placeholder: filterPlaceholder,
-    tabIndex: tabIndex,
-    onChange: onFilterChange,
-    onKeyDown: onFilterInputKeyDown
-  })), isEmpty && /*#__PURE__*/React.createElement(Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/React.createElement(NoMatch, null, noMatchText), /*#__PURE__*/React.createElement("div", {
+  }, isEmpty && /*#__PURE__*/React.createElement(Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/React.createElement(NoMatch, null, noMatchText), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-container"
   }, /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-wrapper"
@@ -126,10 +108,7 @@ Menu.propTypes = {
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
   empty: PropTypes.node,
-  filterLabel: PropTypes.string,
-  filterPlaceholder: PropTypes.string,
   filterValue: PropTypes.string,
-  filterable: PropTypes.bool,
   hidden: PropTypes.bool,
   labelledBy: PropTypes.string,
   loading: PropTypes.bool,
@@ -140,10 +119,7 @@ Menu.propTypes = {
   optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
   selectRef: PropTypes.instanceOf(HTMLElement),
   selectedValue: PropTypes.string,
-  tabIndex: PropTypes.string,
   onBlur: PropTypes.func,
   onClose: PropTypes.func,
-  onEndReached: PropTypes.func,
-  onFilterChange: PropTypes.func,
-  onFilterInputKeyDown: PropTypes.func
+  onEndReached: PropTypes.func
 };

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

@@ -2,6 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 import { IconChevronDown16 } from '@dhis2/ui-icons';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { Filter } from '../menu/filter.js';
 import { ClearButton } from './clear-button.js';
 import { Container } from './container.js';
 import { Placeholder } from './placeholder.js';
@@ -21,6 +22,11 @@ export function SelectedValue(_ref) {
     disabled,
     error,
     expanded,
+    filterLabel,
+    filterPlaceholder,
+    filterRef,
+    filterable,
+    filterValue,
     hasSelection,
     inputMaxHeight,
     labelledBy,
@@ -32,9 +38,12 @@ export function SelectedValue(_ref) {
     onBlur,
     onClear,
     onClick,
+    onFilterChange,
+    onFilterInputKeyDown,
     onFocus
   } = _ref;
   const dataTestPrefix = `${dataTest}-selectedvalue`;
+  const showFilter = filterable && expanded;
   return /*#__PURE__*/React.createElement(Container, {
     dataTest: `${dataTestPrefix}-container`,
     ref: comboBoxRef,
@@ -57,7 +66,16 @@ export function SelectedValue(_ref) {
   }, prefix && /*#__PURE__*/React.createElement(Prefix, {
     dataTest: `${dataTestPrefix}-prefix`,
     prefix: prefix
-  }), /*#__PURE__*/React.createElement("div", {
+  }), showFilter ? /*#__PURE__*/React.createElement(Filter, {
+    inputRef: filterRef,
+    ariaControls: `${name}-listbox`,
+    dataTest: `${dataTestPrefix}-filter`,
+    label: filterLabel,
+    placeholder: filterPlaceholder,
+    value: filterValue,
+    onChange: onFilterChange,
+    onKeyDown: onFilterInputKeyDown
+  }) : /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: _JSXStyle.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "selected-option-label"
   }, !selectedLabel && !prefix && placeholder && /*#__PURE__*/React.createElement(Placeholder, {
@@ -84,6 +102,7 @@ export function SelectedValue(_ref) {
 SelectedValue.propTypes = {
   clearText: PropTypes.string.isRequired,
   comboBoxId: PropTypes.string.isRequired,
+  filterRef: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   selectedLabel: PropTypes.string.isRequired,
   onKeyDown: PropTypes.func.isRequired,
@@ -97,6 +116,10 @@ SelectedValue.propTypes = {
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   expanded: PropTypes.bool,
+  filterLabel: PropTypes.string,
+  filterPlaceholder: PropTypes.string,
+  filterValue: PropTypes.string,
+  filterable: PropTypes.bool,
   hasSelection: PropTypes.bool,
   inputMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   labelledBy: PropTypes.string,
@@ -108,5 +131,7 @@ SelectedValue.propTypes = {
   onBlur: PropTypes.func,
   onClear: PropTypes.func,
   onClick: PropTypes.func,
+  onFilterChange: PropTypes.func,
+  onFilterInputKeyDown: PropTypes.func,
   onFocus: PropTypes.func
 };

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

@@ -58,7 +58,6 @@ export function SimpleSingleSelect(_ref2) {
     disabled = false,
     empty: _empty = false,
     error = false,
-    filterHelpText = '',
     filterLabel = '',
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
@@ -95,6 +94,7 @@ export function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = useRef();
   const listBoxRef = useRef();
+  const filterInputRef = useRef();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -102,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,7 +154,9 @@ export function SimpleSingleSelect(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     clearable,
-    onClear
+    onClear,
+    filterable,
+    onFilterChange
   });
   const handleKeyDownOnFilterInput = useHandleKeyPressOnFilterInput({
     value: selectedValue,
@@ -186,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,
@@ -199,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, {
@@ -206,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,
@@ -225,15 +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
+    onEndReached: onEndReached
   }));
 }
 SimpleSingleSelect.propTypes = {
@@ -261,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 CHANGED Viewed

@@ -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,
@@ -41,8 +50,10 @@ export function useHandleKeyPressOnCombobox(_ref2) {
     selectFocussedOption,
     onChange,
     clearable,
-    onClear
-  } = _ref2;
+    onClear,
+    filterable,
+    onFilterChange
+  } = _ref3;
   const {
     onTyping,
     typing
@@ -97,9 +108,7 @@ export function useHandleKeyPressOnCombobox(_ref2) {
   const handleKeyPress = useCallback(event => {
     const {
       key,
-      altKey,
-      ctrlKey,
-      metaKey
+      altKey
     } = event;
     if (disabled || loading) {
       return;
@@ -164,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;
     }
@@ -178,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]);
+  }, [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-field/simple-single-select-field.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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