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

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

@@ -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,
@@ -46,10 +55,11 @@ function useHandleKeyPressOnCombobox(_ref2) {
     setFocussedOptionIndex,
     selectFocussedOption,
     onChange,
-    filterRef,
     clearable,
-    onClear
-  } = _ref2;
+    onClear,
+    filterable,
+    onFilterChange
+  } = _ref3;
   const {
     onTyping,
     typing
@@ -104,9 +114,7 @@ function useHandleKeyPressOnCombobox(_ref2) {
   const handleKeyPress = (0, _react.useCallback)(event => {
     const {
       key,
-      altKey,
-      ctrlKey,
-      metaKey
+      altKey
     } = event;
     if (disabled || loading) {
       return;
@@ -160,10 +168,6 @@ function useHandleKeyPressOnCombobox(_ref2) {
       return;
     }
     if (key === 'ArrowUp') {
-      if (filterRef !== null && filterRef !== void 0 && filterRef.current && focussedOptionIndex === 0) {
-        filterRef.current.focus();
-        return;
-      }
       focusPrevOption();
       return;
     }
@@ -175,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;
     }
@@ -189,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, 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/cjs/simple-single-select/use-handle-key-press/use-handle-key-press-on-filter-input.js

@@ -72,10 +72,8 @@ 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') {
@@ -103,6 +101,6 @@ 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/cjs/simple-single-select-field/simple-single-select-field.js

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

@@ -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/locales/en/translations.json

@@ -1,4 +1,6 @@
 {
+    "{{count}} selected": "{{count}} selected",
+    "{{count}} selected_plural": "{{count}} selected",
     "Clear": "Clear",
     "No data found": "No data found",
     "Type to filter options": "Type to filter options",

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

@@ -4,6 +4,7 @@ import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import i18n from '../locales/index.js';
 import { InputClearButton, InputPlaceholder, InputPrefix } from '../select/index.js';
 import { SelectionList } from './selection-list.js';
 const Input = _ref => {
@@ -18,9 +19,11 @@ const Input = _ref => {
     options,
     className,
     disabled,
-    inputMaxHeight = '100px'
+    inputMaxHeight = '100px',
+    collapseSelectionAfter
   } = _ref;
   const hasSelection = selected.length > 0;
+  const shouldCollapse = hasSelection && typeof collapseSelectionAfter === 'number' && selected.length > collapseSelectionAfter;
   const onClear = e => {
     const data = {
       selected: []
@@ -29,30 +32,35 @@ const Input = _ref => {
     onChange(data, e);
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
     dataTest: `${dataTest}-prefix`
   }), !hasSelection && !prefix && /*#__PURE__*/React.createElement(InputPlaceholder, {
     placeholder: placeholder,
     dataTest: `${dataTest}-placeholder`
-  }), hasSelection && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+  }), hasSelection && shouldCollapse && /*#__PURE__*/React.createElement("span", {
+    "data-test": `${dataTest}-selection-count`,
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "collapsed-selection-text"
+  }, i18n.t('{{count}} selected', {
+    count: selected.length
+  })), hasSelection && !shouldCollapse && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(SelectionList, {
     selected: selected,
     onChange: onChange,
     options: options,
     disabled: disabled
   })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+    className: _JSXStyle.dynamic([["3188585639", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: `${dataTest}-clear`
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "64009541",
+    id: "3188585639",
     dynamic: [colors.grey900]
-  }, [`.root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${colors.grey900};font-size:14px;line-height:16px;}`, ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`.root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${colors.grey900};font-size:14px;line-height:16px;}`, ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}", ".collapsed-selection-text.__jsx-style-dynamic-selector{-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
@@ -62,6 +70,7 @@ Input.propTypes = {
   className: PropTypes.string,
   clearText: requiredIf(props => props.clearable, PropTypes.string),
   clearable: PropTypes.bool,
+  collapseSelectionAfter: PropTypes.number,
   disabled: PropTypes.bool,
   inputMaxHeight: PropTypes.string,
   options: PropTypes.node,

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

@@ -39,6 +39,7 @@ const MultiSelect = _ref => {
     noMatchText,
     initialFocus,
     dense,
+    collapseSelectionAfter,
     dataTest = 'dhis2-uicore-multiselect'
   } = _ref;
   // If the select is filterable, use a filterable menu
@@ -65,7 +66,8 @@ const MultiSelect = _ref => {
       dataTest: dataTest,
       placeholder: placeholder,
       prefix: prefix,
-      inputMaxHeight: inputMaxHeight
+      inputMaxHeight: inputMaxHeight,
+      collapseSelectionAfter: collapseSelectionAfter
     }),
     menu: menu,
     tabIndex: tabIndex,
@@ -99,6 +101,8 @@ MultiSelect.propTypes = {
   clearText: requiredIf(props => props.clearable, PropTypes.string),
   /** Adds a 'clear' option to the menu */
   clearable: PropTypes.bool,
+  /** When the number of selected items exceeds this threshold, chips are replaced with "X selected" text */
+  collapseSelectionAfter: PropTypes.number,
   dataTest: PropTypes.string,
   dense: PropTypes.bool,
   disabled: PropTypes.bool,

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

@@ -494,6 +494,46 @@ export const ShiftedIntoView = args => /*#__PURE__*/React.createElement(React.Fr
 })), /*#__PURE__*/React.createElement(_JSXStyle, {
   id: "1828862170"
 }, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
+export const CollapseSelectionAfterThreshold = () => {
+  const [selected, setSelected] = React.useState(['1', '3', '5']);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/React.createElement(MultiSelect, {
+    className: "select",
+    selected: selected,
+    onChange: _ref3 => {
+      let {
+        selected
+      } = _ref3;
+      return setSelected(selected);
+    },
+    collapseSelectionAfter: 2,
+    prefix: "Prefix text",
+    clearable: true,
+    clearText: "Clear all"
+  }, /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "4",
+    label: "option four"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "5",
+    label: "option five"
+  }), /*#__PURE__*/React.createElement(MultiSelectOption, {
+    value: "6",
+    label: "option six"
+  })));
+};
+CollapseSelectionAfterThreshold.storyName = 'Collapse selection after threshold';
 export const RTL = args => {
   useEffect(() => {
     document.body.dir = 'rtl';

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

@@ -1,57 +1,46 @@
 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, { forwardRef } from 'react';
+import React from 'react';
 import i18n from '../../locales/index.js';
-export const Filter = /*#__PURE__*/forwardRef(function Filter(_ref, ref) {
+export function Filter(_ref) {
   let {
     ariaControls,
     dataTest,
+    inputRef,
     label,
     placeholder,
-    tabIndex,
     value,
     onChange,
-    onKeyDown,
-    onFocus
+    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,
-    ref: ref,
-    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),
-    onFocus: onFocus
+    "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,
-  onFocus: PropTypes.func,
   onKeyDown: PropTypes.func
 };

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

@@ -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,14 +31,9 @@ export function Menu(_ref) {
     optionUpdateStrategy,
     selectRef,
     selectedValue,
-    tabIndex,
     onBlur,
     onClose,
-    onEndReached,
-    onFilterChange,
-    onFilterInputKeyDown,
-    filterRef,
-    onOptionsKeyDown
+    onEndReached
   } = _ref;
   const [menuWidth, setWidth] = useState('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -76,25 +67,12 @@ 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, {
-    ref: filterRef,
-    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"
   }, /*#__PURE__*/React.createElement(OptionsList, {
     ref: listBoxRef,
-    onKeyDown: onOptionsKeyDown,
     comboBoxId: comboBoxId,
     optionComponent: optionComponent,
     dataTest: `${dataTestPrefix}-list`,
@@ -126,16 +104,11 @@ Menu.propTypes = {
   }).isRequired,
   name: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(optionProp).isRequired,
+  onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
   empty: PropTypes.node,
-  filterLabel: PropTypes.string,
-  filterPlaceholder: PropTypes.string,
-  filterRef: PropTypes.shape({
-    current: PropTypes.instanceOf(HTMLElement)
-  }),
   filterValue: PropTypes.string,
-  filterable: PropTypes.bool,
   hidden: PropTypes.bool,
   labelledBy: PropTypes.string,
   loading: PropTypes.bool,
@@ -146,12 +119,7 @@ Menu.propTypes = {
   optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
   selectRef: PropTypes.instanceOf(HTMLElement),
   selectedValue: PropTypes.string,
-  tabIndex: PropTypes.string,
   onBlur: PropTypes.func,
-  onChange: PropTypes.func,
   onClose: PropTypes.func,
-  onEndReached: PropTypes.func,
-  onFilterChange: PropTypes.func,
-  onFilterInputKeyDown: PropTypes.func,
-  onOptionsKeyDown: PropTypes.func
+  onEndReached: PropTypes.func
 };

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

@@ -1,4 +1,3 @@
-import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React, { forwardRef, useEffect } from 'react';
 import { isOptionHidden } from '../is-option-hidden.js';
@@ -19,8 +18,7 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
     loading,
     onChange,
     onBlur,
-    onEndReached,
-    onKeyDown
+    onEndReached
   } = _ref;
   // scrolls the highlighted option into view when:
   // * the highlighted option changes
@@ -41,15 +39,12 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     role: "listbox",
-    tabIndex: "-1",
     id: id,
     "aria-labelledby": labelledBy,
     "aria-live": optionUpdateStrategy,
     "aria-busy": loading.toString(),
     "data-test": dataTest,
-    onBlur: onBlur,
-    onKeyDown: onKeyDown,
-    className: "jsx-233683301"
+    onBlur: onBlur
   }, options.map((_ref2, index) => {
     let {
       value,
@@ -73,15 +68,14 @@ export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, re
       component: component || optionComponent,
       onBecameVisible: isLast ? onEndReached : undefined
     });
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "233683301"
-  }, ["div.jsx-233683301{outline:none;}"]));
+  }));
 });
 OptionsList.propTypes = {
   comboBoxId: PropTypes.string.isRequired,
   focussedOptionIndex: PropTypes.number.isRequired,
   id: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(optionProp).isRequired,
+  onChange: PropTypes.func.isRequired,
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
   labelledBy: PropTypes.string,
@@ -90,7 +84,5 @@ OptionsList.propTypes = {
   optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
   selectedValue: PropTypes.string,
   onBlur: PropTypes.func,
-  onChange: PropTypes.func,
-  onEndReached: PropTypes.func,
-  onKeyDown: PropTypes.func
+  onEndReached: PropTypes.func
 };

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

@@ -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
 };