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

package/build/cjs/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/cjs/multi-select/input.js

@@ -10,7 +10,8 @@ var _uiConstants = require("@dhis2/ui-constants");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _index = require("../select/index.js");
+var _index = _interopRequireDefault(require("../locales/index.js"));
+var _index2 = require("../select/index.js");
 var _selectionList = require("./selection-list.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Input = _ref => {
@@ -25,9 +26,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: []
@@ -36,30 +39,35 @@ const Input = _ref => {
     onChange(data, e);
   };
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
-  }, /*#__PURE__*/_react.default.createElement(_index.InputPrefix, {
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + ((0, _classnames.default)('root', className) || "")
+  }, /*#__PURE__*/_react.default.createElement(_index2.InputPrefix, {
     prefix: prefix,
     dataTest: `${dataTest}-prefix`
-  }), !hasSelection && !prefix && /*#__PURE__*/_react.default.createElement(_index.InputPlaceholder, {
+  }), !hasSelection && !prefix && /*#__PURE__*/_react.default.createElement(_index2.InputPlaceholder, {
     placeholder: placeholder,
     dataTest: `${dataTest}-placeholder`
-  }), hasSelection && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+  }), hasSelection && shouldCollapse && /*#__PURE__*/_react.default.createElement("span", {
+    "data-test": `${dataTest}-selection-count`,
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "collapsed-selection-text"
+  }, _index.default.t('{{count}} selected', {
+    count: selected.length
+  })), hasSelection && !shouldCollapse && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/_react.default.createElement(_selectionList.SelectionList, {
     selected: selected,
     onChange: onChange,
     options: options,
     disabled: disabled
   })), hasSelection && clearable && !disabled && /*#__PURE__*/_react.default.createElement("div", {
-    className: _style.default.dynamic([["64009541", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
-  }, /*#__PURE__*/_react.default.createElement(_index.InputClearButton, {
+    className: _style.default.dynamic([["3188585639", [_uiConstants.colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+  }, /*#__PURE__*/_react.default.createElement(_index2.InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: `${dataTest}-clear`
   })), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "64009541",
+    id: "3188585639",
     dynamic: [_uiConstants.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:${_uiConstants.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.default.createElement(_style.default, {
+  }, [`.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:${_uiConstants.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.default.createElement(_style.default, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [`.root-input.__jsx-style-dynamic-selector{max-height:${inputMaxHeight};}`]));
@@ -70,6 +78,7 @@ Input.propTypes = {
   className: _propTypes2.default.string,
   clearText: (0, _propTypes.requiredIf)(props => props.clearable, _propTypes2.default.string),
   clearable: _propTypes2.default.bool,
+  collapseSelectionAfter: _propTypes2.default.number,
   disabled: _propTypes2.default.bool,
   inputMaxHeight: _propTypes2.default.string,
   options: _propTypes2.default.node,

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMultipleSelectionsWrapped = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = void 0;
+exports.default = exports.WithPrefixAndSelection = exports.WithPrefix = exports.WithPlaceholderAndSelection = exports.WithPlaceholder = exports.WithOptionsLoadingAndLoadingText = exports.WithOptionsAndOnChange = exports.WithOptionsAndMultipleSelections = exports.WithOptionsAndLoading = exports.WithOptionsAndDisabled = exports.WithOptionsAndASelection = exports.WithOptionsASelectionAndDisabled = exports.WithOnFocus = exports.WithOnBlur = exports.WithMultipleSelectionsWrapped = exports.WithMoreThanThreeOptionsAndA100PxMaxHeight = exports.WithMoreThanTenOptions = exports.WithInvalidOptions = exports.WithInvalidFilterableOptions = exports.WithInitialFocus = exports.WithFilterField = exports.WithDisabledOptionAndOnChange = exports.WithCustomOptionsAndOnChange = exports.WithClearButtonSelectionAndOnChange = exports.ShiftedIntoView = exports.RTL = exports.FlippedPosition = exports.EmptyWithEmptyText = exports.EmptyWithEmptyComponent = exports.Empty = exports.DenseWithSelections = exports.Dense = exports.DefaultPosition = exports.CollapseSelectionAfterThreshold = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _uiConstants = require("@dhis2/ui-constants");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -513,6 +513,47 @@ const ShiftedIntoView = args => /*#__PURE__*/_react.default.createElement(_react
   id: "1828862170"
 }, ["html,body,#root{position:relative;height:300px !important;max-height:300px;}", "#root{padding-top:130px !important;}"]));
 exports.ShiftedIntoView = ShiftedIntoView;
+const CollapseSelectionAfterThreshold = () => {
+  const [selected, setSelected] = _react.default.useState(['1', '3', '5']);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: 400
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index2.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.default.createElement(_index.MultiSelectOption, {
+    value: "1",
+    label: "option one"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "2",
+    label: "option two"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "3",
+    label: "option three"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "4",
+    label: "option four"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "5",
+    label: "option five"
+  }), /*#__PURE__*/_react.default.createElement(_index.MultiSelectOption, {
+    value: "6",
+    label: "option six"
+  })));
+};
+exports.CollapseSelectionAfterThreshold = CollapseSelectionAfterThreshold;
+CollapseSelectionAfterThreshold.storyName = 'Collapse selection after threshold';
 const RTL = args => {
   (0, _react.useEffect)(() => {
     document.body.dir = 'rtl';

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

@@ -3,64 +3,51 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Filter = void 0;
+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 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../../locales/index.js"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Filter = exports.Filter = /*#__PURE__*/(0, _react.forwardRef)(function Filter(_ref, ref) {
+function Filter(_ref) {
   let {
     ariaControls,
     dataTest,
+    inputRef,
     label,
     placeholder,
-    tabIndex,
     value,
     onChange,
-    onKeyDown,
-    onFocus
+    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,
-    ref: ref,
-    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),
-    onFocus: onFocus
+    "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,
-  onFocus: _propTypes.default.func,
   onKeyDown: _propTypes.default.func
 };

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

@@ -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,14 +40,9 @@ function Menu(_ref) {
     optionUpdateStrategy,
     selectRef,
     selectedValue,
-    tabIndex,
     onBlur,
     onClose,
-    onEndReached,
-    onFilterChange,
-    onFilterInputKeyDown,
-    filterRef,
-    onOptionsKeyDown
+    onEndReached
   } = _ref;
   const [menuWidth, setWidth] = (0, _react.useState)('auto');
   const dataTestPrefix = `${dataTest}-menu`;
@@ -85,25 +76,12 @@ 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, {
-    ref: filterRef,
-    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"
   }, /*#__PURE__*/_react.default.createElement(_optionsList.OptionsList, {
     ref: listBoxRef,
-    onKeyDown: onOptionsKeyDown,
     comboBoxId: comboBoxId,
     optionComponent: optionComponent,
     dataTest: `${dataTestPrefix}-list`,
@@ -135,16 +113,11 @@ Menu.propTypes = {
   }).isRequired,
   name: _propTypes.default.string.isRequired,
   options: _propTypes.default.arrayOf(_sharedPropTypes.optionProp).isRequired,
+  onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   empty: _propTypes.default.node,
-  filterLabel: _propTypes.default.string,
-  filterPlaceholder: _propTypes.default.string,
-  filterRef: _propTypes.default.shape({
-    current: _propTypes.default.instanceOf(HTMLElement)
-  }),
   filterValue: _propTypes.default.string,
-  filterable: _propTypes.default.bool,
   hidden: _propTypes.default.bool,
   labelledBy: _propTypes.default.string,
   loading: _propTypes.default.bool,
@@ -155,12 +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,
-  onChange: _propTypes.default.func,
   onClose: _propTypes.default.func,
-  onEndReached: _propTypes.default.func,
-  onFilterChange: _propTypes.default.func,
-  onFilterInputKeyDown: _propTypes.default.func,
-  onOptionsKeyDown: _propTypes.default.func
+  onEndReached: _propTypes.default.func
 };

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.OptionsList = void 0;
-var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _isOptionHidden = require("../is-option-hidden.js");
@@ -28,8 +27,7 @@ const OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(fu
     loading,
     onChange,
     onBlur,
-    onEndReached,
-    onKeyDown
+    onEndReached
   } = _ref;
   // scrolls the highlighted option into view when:
   // * the highlighted option changes
@@ -50,15 +48,12 @@ const OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(fu
   return /*#__PURE__*/_react.default.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,
@@ -82,15 +77,14 @@ const OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(fu
       component: component || optionComponent,
       onBecameVisible: isLast ? onEndReached : undefined
     });
-  }), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "233683301"
-  }, ["div.jsx-233683301{outline:none;}"]));
+  }));
 });
 OptionsList.propTypes = {
   comboBoxId: _propTypes.default.string.isRequired,
   focussedOptionIndex: _propTypes.default.number.isRequired,
   id: _propTypes.default.string.isRequired,
   options: _propTypes.default.arrayOf(_sharedPropTypes.optionProp).isRequired,
+  onChange: _propTypes.default.func.isRequired,
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   labelledBy: _propTypes.default.string,
@@ -99,7 +93,5 @@ OptionsList.propTypes = {
   optionUpdateStrategy: _propTypes.default.oneOf(['off', 'polite', 'assertive']),
   selectedValue: _propTypes.default.string,
   onBlur: _propTypes.default.func,
-  onChange: _propTypes.default.func,
-  onEndReached: _propTypes.default.func,
-  onKeyDown: _propTypes.default.func
+  onEndReached: _propTypes.default.func
 };

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

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

@@ -67,7 +67,6 @@ function SimpleSingleSelect(_ref2) {
     disabled = false,
     empty: _empty = false,
     error = false,
-    filterHelpText = '',
     filterLabel = '',
     filterPlaceholder: _filterPlaceholder = '',
     filterValue = '',
@@ -104,7 +103,7 @@ function SimpleSingleSelect(_ref2) {
   const comboBoxId = `${name}-combo`;
   const comboBoxRef = (0, _react.useRef)();
   const listBoxRef = (0, _react.useRef)();
-  const filterRef = (0, _react.useRef)();
+  const filterInputRef = (0, _react.useRef)();
   const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
     filterable,
     filterValue,
@@ -112,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,9 +162,10 @@ function SimpleSingleSelect(_ref2) {
     focussedOptionIndex,
     setFocussedOptionIndex,
     selectFocussedOption,
-    filterRef,
     clearable,
-    onClear
+    onClear,
+    filterable,
+    onFilterChange
   });
   const handleKeyDownOnFilterInput = (0, _index4.useHandleKeyPressOnFilterInput)({
     value: selectedValue,
@@ -197,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,
@@ -210,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, {
@@ -217,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,
@@ -236,17 +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,
-    filterRef: filterRef,
-    onOptionsKeyDown: handleKeyDown
+    onEndReached: onEndReached
   }));
 }
 SimpleSingleSelect.propTypes = {
@@ -274,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 **/