@dhis2-ui/select 10.9.1 → 10.10.0-alpha.1

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Filter(_ref) {
+  let {
+    ariaControls,
+    dataTest,
+    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);
+    },
+    type: "text",
+    name: "filter",
+    placeholder: placeholder,
+    onKeyDown: (_, e) => onKeyDown(e)
+  }), /*#__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};}`]));
+}
+Filter.propTypes = {
+  ariaControls: _propTypes.default.string.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/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Menu", {
+  enumerable: true,
+  get: function () {
+    return _menu.Menu;
+  }
+});
+var _menu = require("./menu.js");

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Loading = Loading;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _loader = require("@dhis2-ui/loader");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function Loading(_ref) {
+  let {
+    message
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["316664301", [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + "container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["316664301", [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]])
+  }, /*#__PURE__*/_react.default.createElement(_loader.CircularLoader, {
+    small: true
+  })), message, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "316664301",
+    dynamic: [_uiConstants.spacers.dp16, _uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
+  }, [`.container.__jsx-style-dynamic-selector{box-sizing:border-box;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${_uiConstants.spacers.dp16};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:${_uiConstants.colors.grey700};font-family:${_uiConstants.theme.fonts};font-size:13px;padding-block:${_uiConstants.spacers.dp8};padding-inline:${_uiConstants.spacers.dp24};background:rgba(255,255,255,0.8);}`]));
+}
+Loading.propTypes = {
+  message: _propTypes.default.string
+};

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

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = Menu;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _layer = require("@dhis2-ui/layer");
+var _popper = require("@dhis2-ui/popper");
+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");
+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 }; }
+function Menu(_ref) {
+  let {
+    comboBoxId,
+    focussedOptionIndex,
+    name,
+    options,
+    onChange,
+    optionComponent,
+    dataTest,
+    disabled,
+    empty,
+    filterLabel,
+    filterPlaceholder,
+    filterValue,
+    filterable,
+    hidden,
+    labelledBy,
+    listBoxRef,
+    loading,
+    loadingText,
+    maxHeight,
+    noMatchText,
+    optionUpdateStrategy,
+    selectRef,
+    selectedValue,
+    tabIndex,
+    onBlur,
+    onClose,
+    onEndReached,
+    onFilterChange,
+    onFilterInputKeyDown
+  } = _ref;
+  const [menuWidth, setWidth] = (0, _react.useState)('auto');
+  const dataTestPrefix = `${dataTest}-menu`;
+  (0, _react.useEffect)(() => {
+    if (selectRef) {
+      const callback = () => setWidth(`${selectRef.offsetWidth}px`);
+      callback(); // We want to know the width as soon as the
+
+      selectRef.addEventListener('resize', callback);
+      return () => selectRef.removeEventListener('resize', callback);
+    }
+  }, [selectRef]);
+  if (hidden) {
+    return null;
+  }
+  const hasNoFilterMatch = !options.length && filterValue &&
+  // We don't want to show the noMatchText when
+  // we're in the process of loading options
+  !loading;
+  const isEmpty = !options.length && !filterValue;
+  return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
+    onBackdropClick: onClose,
+    transparent: true
+  }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    reference: selectRef,
+    placement: "bottom-start",
+    observeReferenceResize: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: menuWidth,
+      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", {
+    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,
+    comboBoxId: comboBoxId,
+    optionComponent: optionComponent,
+    dataTest: `${dataTestPrefix}-list`,
+    disabled: disabled,
+    focussedOptionIndex: focussedOptionIndex,
+    labelledBy: labelledBy,
+    loading: loading,
+    id: `${name}-listbox`,
+    optionUpdateStrategy: optionUpdateStrategy,
+    options: options,
+    selectedValue: selectedValue,
+    onBlur: onBlur,
+    onChange: onChange,
+    onEndReached: onEndReached
+  })), loading && /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["2949029222", [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]]]) + " " + "menu-loading-container"
+  }, /*#__PURE__*/_react.default.createElement(_loading.Loading, {
+    message: loadingText
+  }))), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2949029222",
+    dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey200, _uiConstants.elevations.e300]
+  }, [`.menu.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:auto;background:${_uiConstants.colors.white};border:1px solid ${_uiConstants.colors.grey200};border-radius:3px;box-shadow:${_uiConstants.elevations.e300};box-sizing:content-box;}`, ".listbox-container.__jsx-style-dynamic-selector{position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}", ".listbox-wrapper.__jsx-style-dynamic-selector{overflow:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".menu-loading-container.__jsx-style-dynamic-selector{position:absolute;left:0;top:0;width:100%;height:100%;}"]))));
+}
+Menu.propTypes = {
+  comboBoxId: _propTypes.default.string.isRequired,
+  focussedOptionIndex: _propTypes.default.number.isRequired,
+  listBoxRef: _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(HTMLElement)
+  }).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,
+  filterValue: _propTypes.default.string,
+  filterable: _propTypes.default.bool,
+  hidden: _propTypes.default.bool,
+  labelledBy: _propTypes.default.string,
+  loading: _propTypes.default.bool,
+  loadingText: _propTypes.default.string,
+  maxHeight: _propTypes.default.string,
+  noMatchText: _propTypes.default.string,
+  optionComponent: _propTypes.default.elementType,
+  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
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoMatch = void 0;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const NoMatch = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.dynamic([["3788156646", [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]]]) + " " + (className || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "3788156646",
+    dynamic: [_uiConstants.colors.grey700, _uiConstants.theme.fonts, _uiConstants.spacers.dp8, _uiConstants.spacers.dp24]
+  }, [`div.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey700};font-family:${_uiConstants.theme.fonts};font-size:13px;line-height:16px;padding-block:${_uiConstants.spacers.dp8};padding-inline:${_uiConstants.spacers.dp24};text-align:center;}`]));
+};
+exports.NoMatch = NoMatch;
+NoMatch.propTypes = {
+  children: _propTypes.default.string.isRequired,
+  className: _propTypes.default.string
+};

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Option = Option;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+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 }; }
+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); }
+const VISIBILE_INTERSECTION_RATIO = 0.99;
+function DefaultStyle(_ref) {
+  let {
+    label,
+    disabled,
+    highlighted
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["4038065645", [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)('option', {
+      disabled,
+      active: highlighted
+    }) || "")
+  }, label, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4038065645",
+    dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.spacers.dp16, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]
+  }, [`span.__jsx-style-dynamic-selector{display:block;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${_uiConstants.colors.grey900};padding-block:${_uiConstants.spacers.dp8};padding-inline:${_uiConstants.spacers.dp12};line-height:${_uiConstants.spacers.dp16};}`, `span.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};}`, `span.__jsx-style-dynamic-selector:active,span.active.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.teal700};color:${_uiConstants.colors.white};cursor:auto;}`, `span.disabled.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "span.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+}
+DefaultStyle.propTypes = {
+  label: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool,
+  highlighted: _propTypes.default.bool
+};
+function Option(_ref2) {
+  let {
+    comboBoxId,
+    index,
+    label,
+    value,
+    onClick,
+    component: StyleComponent = DefaultStyle,
+    dataTest,
+    disabled,
+    highlighted,
+    listBoxRef,
+    onBecameVisible,
+    ...rest
+  } = _ref2;
+  const buttonRef = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    if (onBecameVisible) {
+      const scrollableContainer = listBoxRef.current.parentNode;
+      const intersectionOptions = {
+        root: scrollableContainer,
+        threshold: VISIBILE_INTERSECTION_RATIO
+      };
+      const intersectionHandler = entries => {
+        entries.forEach(result => {
+          const {
+            intersectionRatio
+          } = result;
+          if (intersectionRatio >= VISIBILE_INTERSECTION_RATIO) {
+            onBecameVisible();
+          }
+        });
+      };
+      const observer = new IntersectionObserver(intersectionHandler, intersectionOptions);
+      observer.observe(buttonRef.current);
+      return () => observer.disconnect();
+    }
+  }, [onBecameVisible, listBoxRef]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    ref: buttonRef,
+    id: `${comboBoxId}-${index}`,
+    "data-test": dataTest,
+    disabled: disabled,
+    role: "option",
+    "aria-selected": highlighted || 'false',
+    "aria-disabled": disabled,
+    "aria-label": label,
+    onClick: () => {
+      if (!disabled) {
+        onClick({
+          value,
+          label
+        });
+      }
+    },
+    className: "jsx-4228237498"
+  }, /*#__PURE__*/_react.default.createElement(StyleComponent, _extends({
+    value: value,
+    label: label,
+    index: index,
+    disabled: disabled,
+    highlighted: highlighted
+  }, rest, {
+    className: "jsx-4228237498" + " " + (rest && rest.className != null && rest.className || "")
+  }), label), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "4228237498"
+  }, ["button.jsx-4228237498{display:block;width:100%;padding:0;border:0;background:0;outline:0;text-align:start;}"]));
+}
+Option.propTypes = {
+  comboBoxId: _propTypes.default.string.isRequired,
+  index: _propTypes.default.number.isRequired,
+  label: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  component: _propTypes.default.elementType,
+  dataTest: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  highlighted: _propTypes.default.bool,
+  listBoxRef: _propTypes.default.shape({
+    current: _propTypes.default.instanceOf(HTMLElement)
+  }),
+  onBecameVisible: _propTypes.default.func
+};

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

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionsList = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _isOptionHidden = require("../is-option-hidden.js");
+var _sharedPropTypes = require("../shared-prop-types.js");
+var _option = require("./option.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 OptionsList = exports.OptionsList = /*#__PURE__*/(0, _react.forwardRef)(function OptionsList(_ref, ref) {
+  let {
+    comboBoxId,
+    optionComponent,
+    focussedOptionIndex,
+    id,
+    labelledBy,
+    optionUpdateStrategy,
+    options,
+    selectedValue,
+    dataTest,
+    disabled,
+    loading,
+    onChange,
+    onBlur,
+    onEndReached
+  } = _ref;
+  // scrolls the highlighted option into view when:
+  // * the highlighted option changes
+  // * the menu opens
+  (0, _react.useEffect)(() => {
+    const {
+      current: listBox
+    } = ref;
+    const highlightedOption = listBox.childNodes[focussedOptionIndex];
+    if (highlightedOption) {
+      const listBoxParent = listBox.parentNode;
+      const optionHidden = (0, _isOptionHidden.isOptionHidden)(highlightedOption, listBoxParent);
+      if (optionHidden) {
+        highlightedOption.scrollIntoView();
+      }
+    }
+  }, [focussedOptionIndex, ref]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    role: "listbox",
+    id: id,
+    "aria-labelledby": labelledBy,
+    "aria-live": optionUpdateStrategy,
+    "aria-busy": loading.toString(),
+    "data-test": dataTest,
+    onBlur: onBlur
+  }, options.map((_ref2, index) => {
+    let {
+      value,
+      label,
+      component,
+      disabled: optionDisabled = false
+    } = _ref2;
+    const isSelected = value === selectedValue;
+    const isLast = index === options.length - 1;
+    return /*#__PURE__*/_react.default.createElement(_option.Option, {
+      listBoxRef: ref,
+      dataTest: `${dataTest}-option`,
+      highlighted: focussedOptionIndex === index,
+      key: value,
+      value: value,
+      label: label,
+      index: index,
+      comboBoxId: comboBoxId,
+      disabled: disabled || optionDisabled,
+      onClick: isSelected ? () => null : onChange,
+      component: component || optionComponent,
+      onBecameVisible: isLast ? onEndReached : undefined
+    });
+  }));
+});
+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,
+  loading: _propTypes.default.bool,
+  optionComponent: _propTypes.default.elementType,
+  optionUpdateStrategy: _propTypes.default.oneOf(['off', 'polite', 'assertive']),
+  selectedValue: _propTypes.default.string,
+  onBlur: _propTypes.default.func,
+  onEndReached: _propTypes.default.func
+};

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClearButton = ClearButtonWithTooltip;
+var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _uiConstants = require("@dhis2/ui-constants");
+var _tooltip = require("@dhis2-ui/tooltip");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../../locales/index.js"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ClearButton(_ref) {
+  let {
+    onClear,
+    clearText,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    "aria-label": _index.default.t('{{clearText}}', {
+      clearText
+    }),
+    "data-test": dataTest,
+    onClick: e => {
+      e.stopPropagation();
+      onClear();
+    },
+    className: _style.default.dynamic([["2606883952", [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]]])
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: _style.default.dynamic([["2606883952", [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]]])
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
+    fill: "none",
+    className: _style.default.dynamic([["2606883952", [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]]])
+  })), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2606883952",
+    dynamic: [_uiConstants.colors.grey500, _uiConstants.colors.grey800, _uiConstants.colors.grey200, _uiConstants.theme.focus]
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:none;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;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;height:24px;width:24px;border-radius:3px;}", `button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey500};}`, `button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey800};}`, `button.__jsx-style-dynamic-selector:hover{background:${_uiConstants.colors.grey200};}`, `button.__jsx-style-dynamic-selector:focus{outline:2px solid ${_uiConstants.theme.focus};}`]));
+}
+ClearButton.propTypes = {
+  clearText: _propTypes.default.string.isRequired,
+  onClear: _propTypes.default.func.isRequired,
+  dataTest: _propTypes.default.string
+};
+function ClearButtonWithTooltip(_ref2) {
+  let {
+    onClear,
+    clearText,
+    dataTest
+  } = _ref2;
+  const clearButton = /*#__PURE__*/_react.default.createElement(ClearButton, {
+    onClear: onClear,
+    dataTest: dataTest,
+    clearText: clearText
+  });
+  if (!clearText) {
+    return clearButton;
+  }
+  return /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
+    openDelay: 500,
+    content: clearText
+  }, clearButton);
+}
+ClearButtonWithTooltip.propTypes = {
+  clearText: _propTypes.default.string.isRequired,
+  onClear: _propTypes.default.func.isRequired,
+  dataTest: _propTypes.default.string
+};