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

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

@@ -0,0 +1,319 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleSingleSelect = SimpleSingleSelect;
+var _propTypes = require("@dhis2/prop-types");
+var _uiConstants = require("@dhis2/ui-constants");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _index = _interopRequireDefault(require("../locales/index.js"));
+var _index2 = require("./menu/index.js");
+var _index3 = require("./selected-value/index.js");
+var _sharedPropTypes = require("./shared-prop-types.js");
+var _index4 = require("./use-handle-key-press/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 }; }
+function useFocussedOptionIndex(_ref) {
+  let {
+    filterable,
+    filterValue,
+    options
+  } = _ref;
+  const [defaultFocussedOptionIndex, setDefaultFocussedOptionIndex] = (0, _react.useState)(0);
+  const [searchFocussedOptionIndex, setSearchFocussedOptionIndex] = (0, _react.useState)(0);
+
+  // We want to reset the focussed option index when searching when the
+  // options change BUT we don't want to reset options when adding more
+  // options by using the "infinite scrolling" strategy
+  const initialized = (0, _react.useRef)(false);
+  const prevFirstOption = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    var _options$2;
+    // Ignore first call to prevent unnecessary re-render
+    if (!initialized.current) {
+      var _options$;
+      initialized.current = true;
+      prevFirstOption.current = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value;
+    } else if (filterable && prevFirstOption.current !== ((_options$2 = options[0]) === null || _options$2 === void 0 ? void 0 : _options$2.value)) {
+      var _options$3;
+      prevFirstOption.current = (_options$3 = options[0]) === null || _options$3 === void 0 ? void 0 : _options$3.value;
+      setSearchFocussedOptionIndex(0);
+    }
+  }, [options, filterable, initialized, prevFirstOption]);
+  const focussedOptionIndex = (0, _react.useMemo)(() => {
+    return filterValue ? searchFocussedOptionIndex : defaultFocussedOptionIndex;
+  }, [defaultFocussedOptionIndex, searchFocussedOptionIndex, filterValue]);
+  const setFocussedOptionIndex = (0, _react.useMemo)(() => {
+    return filterValue ? setSearchFocussedOptionIndex : setDefaultFocussedOptionIndex;
+  }, [filterValue]);
+  return [focussedOptionIndex, setFocussedOptionIndex];
+}
+function SimpleSingleSelect(_ref2) {
+  let {
+    name,
+    options,
+    onChange,
+    autoFocus = false,
+    className = '',
+    clearText: _clearText = '',
+    clearable = false,
+    optionComponent = undefined,
+    dataTest = 'dhis2-simplesingleselect',
+    dense = false,
+    disabled = false,
+    empty: _empty = false,
+    error = false,
+    filterHelpText = '',
+    filterLabel = '',
+    filterPlaceholder: _filterPlaceholder = '',
+    filterValue = '',
+    filterable = false,
+    inputMaxHeight = '',
+    labelledBy = '',
+    loading = false,
+    menuLoadingText: _menuLoadingText = '',
+    menuMaxHeight = '288px',
+    noMatchText: _noMatchText = '',
+    optionUpdateStrategy = 'polite',
+    placeholder = '',
+    prefix = '',
+    selected = {
+      label: '',
+      value: ''
+    },
+    tabIndex = '0',
+    valid = false,
+    warning = false,
+    onBlur = () => undefined,
+    onClear = () => undefined,
+    onEndReached = () => undefined,
+    onFilterChange = () => undefined,
+    onFocus = () => undefined
+  } = _ref2;
+  // We can't translate with default props as the translation function would
+  // be called before we get any translations from the consuming app/lib
+  const clearText = _clearText || _index.default.t('Clear');
+  const empty = _empty || _index.default.t('No data found');
+  const filterPlaceholder = _filterPlaceholder || _index.default.t('Type to filter options');
+  const menuLoadingText = _menuLoadingText || _index.default.t('Loading options');
+  const noMatchText = _noMatchText || _index.default.t('No options found');
+  const comboBoxId = `${name}-combo`;
+  const comboBoxRef = (0, _react.useRef)();
+  const listBoxRef = (0, _react.useRef)();
+  const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
+    filterable,
+    filterValue,
+    options
+  });
+  const [selectRef, setSelectRef] = (0, _react.useState)();
+  const [expanded, setExpanded] = (0, _react.useState)(false);
+  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) || '';
+  const openMenu = (0, _react.useCallback)(() => {
+    const selectedOptionIndex = options.findIndex(option => option.value === selectedValue);
+    if (selectedOptionIndex !== focussedOptionIndex) {
+      setFocussedOptionIndex(selectedOptionIndex);
+    }
+    setExpanded(true);
+  }, [options, selectedValue, focussedOptionIndex, setFocussedOptionIndex]);
+  const toggleMenu = (0, _react.useCallback)(() => {
+    if (expanded) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }, [expanded, openMenu, closeMenu]);
+  const selectFocussedOption = (0, _react.useCallback)(() => {
+    const option = options[focussedOptionIndex];
+    if (option) {
+      onChange(option);
+    }
+  }, [focussedOptionIndex, options, onChange]);
+  const focusComboBox = (0, _react.useCallback)(() => {
+    var _comboBoxRef$current;
+    return (_comboBoxRef$current = comboBoxRef.current) === null || _comboBoxRef$current === void 0 ? void 0 : _comboBoxRef$current.focus();
+  }, [comboBoxRef]);
+  const handleKeyDown = (0, _index4.useHandleKeyPressOnCombobox)({
+    value: selectedValue,
+    disabled,
+    onChange,
+    expanded,
+    loading,
+    options,
+    openMenu,
+    closeMenu,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption
+  });
+  const handleKeyDownOnFilterInput = (0, _index4.useHandleKeyPressOnFilterInput)({
+    value: selectedValue,
+    options,
+    loading,
+    closeMenu,
+    listBoxRef,
+    focusComboBox,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('simple-single-select', className),
+    "data-test": dataTest,
+    ref: div => {
+      if (
+      // when setting the state (with `setSelectRef), this
+      // component will rerender and this function will be run
+      // again twice. The first call will provide a null-value
+      !div ||
+      // Making sure we're not setting state
+      // if we already have the correct element
+      div === selectRef) {
+        return;
+      }
+      setSelectRef(div);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_index3.SelectedValue, {
+    autoFocus: autoFocus,
+    clearText: clearText,
+    clearable: clearable,
+    comboBoxRef: comboBoxRef,
+    comboBoxId: comboBoxId,
+    dataTest: dataTest,
+    dense: dense,
+    disabled: disabled,
+    error: error,
+    expanded: expanded,
+    hasSelection: !!selectedValue,
+    inputMaxHeight: inputMaxHeight,
+    labelledBy: labelledBy,
+    name: name,
+    placeholder: placeholder,
+    prefix: prefix,
+    tabIndex: tabIndex.toString(),
+    warning: warning,
+    valid: valid,
+    selectedLabel: selectedLabel,
+    onBlur: onBlur,
+    onClear: onClear,
+    onClick: toggleMenu,
+    onFocus: onFocus,
+    onKeyDown: handleKeyDown
+  }), /*#__PURE__*/_react.default.createElement(_index2.Menu, {
+    comboBoxId: comboBoxId,
+    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,
+    listBoxRef: listBoxRef,
+    loading: loading,
+    loadingText: menuLoadingText,
+    maxHeight: menuMaxHeight,
+    noMatchText: noMatchText,
+    optionUpdateStrategy: optionUpdateStrategy,
+    options: options,
+    selectRef: selectRef,
+    selectedValue: selectedValue,
+    tabIndex: tabIndex.toString(),
+    onBlur: onBlur,
+    onChange: nextValue => {
+      onChange(nextValue);
+      closeMenu();
+    },
+    onClose: closeMenu,
+    onEndReached: onEndReached,
+    onFilterChange: onFilterChange
+  }));
+}
+SimpleSingleSelect.propTypes = {
+  /** necessary for IDs that are required for accessibility **/
+  name: _propTypes2.default.string.isRequired,
+  /** An array of options **/
+  options: _propTypes2.default.arrayOf(_sharedPropTypes.optionProp).isRequired,
+  /** A callback that will be called with the new value or an empty string **/
+  onChange: _propTypes2.default.func.isRequired,
+  /** Will focus the select initially **/
+  autoFocus: _propTypes2.default.bool,
+  /** Additional class names that will be applied to the root element **/
+  className: _propTypes2.default.string,
+  /** This will allow us to put an aria-label on the clear button **/
+  clearText: (0, _propTypes.requiredIf)(props => props.clearable, _propTypes2.default.string),
+  /** Whether a clear button should be displayed or not **/
+  clearable: _propTypes2.default.bool,
+  /** A value for a `data-test` attribute on the root element **/
+  dataTest: _propTypes2.default.string,
+  /** Renders a select with lower height **/
+  dense: _propTypes2.default.bool,
+  /** Disables all interactions with the select (except focussing) **/
+  disabled: _propTypes2.default.bool,
+  /** Text or component to display when there are no options **/
+  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 **/
+  filterPlaceholder: _propTypes2.default.string,
+  /** Value of the filter input **/
+  filterValue: _propTypes2.default.string,
+  /** Whether the select should display a filter input **/
+  filterable: _propTypes2.default.bool,
+  /** Max height of the container displaying the selected value **/
+  inputMaxHeight: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  /** Should contain the id of the element that labels the select, if applicable **/
+  labelledBy: _propTypes2.default.string,
+  /** Will show a loading indicator at the end of the options-list **/
+  loading: _propTypes2.default.bool,
+  /** Text that will be displayed next to the loading indicator **/
+  menuLoadingText: _propTypes2.default.string,
+  /** Allows to modify the max height of the menu **/
+  menuMaxHeight: _propTypes2.default.string,
+  /** String that will be displayed when the select is being filtered but the options array is empty **/
+  noMatchText: (0, _propTypes.requiredIf)(props => props.filterable, _propTypes2.default.string),
+  /** Allows to override what's rendered inside the `button[role="option"]`.
+   * Can be overriden on an individual option basis **/
+  optionComponent: _propTypes2.default.elementType,
+  /** For a11y: How aggressively the user should be updated about changes in options **/
+  optionUpdateStrategy: _propTypes2.default.oneOf(['off', 'polite', 'assertive']),
+  /** String to show when there's no selected option **/
+  placeholder: _propTypes2.default.string,
+  /** String that will be displayed before the label of the selected option **/
+  prefix: _propTypes2.default.string,
+  selected: _propTypes2.default.shape({
+    label: _propTypes2.default.string.isRequired,
+    value: _propTypes2.default.string.isRequired
+  }),
+  /** Standard HTML tab-index attribute that will be put on the combobox's root element **/
+  tabIndex: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  valid: _uiConstants.sharedPropTypes.statusPropType,
+  /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  warning: _uiConstants.sharedPropTypes.statusPropType,
+  /** Will be called when the combobox is loses focus **/
+  onBlur: _propTypes2.default.func,
+  /** Will be called when the combobox is loses focus **/
+  onClear: _propTypes2.default.func,
+  /** Will be called when the last option is scrolled into the visible area **/
+  onEndReached: _propTypes2.default.func,
+  /** Will be called when the filter value changes **/
+  onFilterChange: _propTypes2.default.func,
+  /** Will be called when the combobox is being focused **/
+  onFocus: _propTypes2.default.func
+};

package/build/cjs/simple-single-select/simple-single-select.prod.stories.js

@@ -0,0 +1,228 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DefaultPosition", {
+  enumerable: true,
+  get: function () {
+    return _DefaultPosition.DefaultPosition;
+  }
+});
+Object.defineProperty(exports, "Dense", {
+  enumerable: true,
+  get: function () {
+    return _Dense.Dense;
+  }
+});
+Object.defineProperty(exports, "Empty", {
+  enumerable: true,
+  get: function () {
+    return _Empty.Empty;
+  }
+});
+Object.defineProperty(exports, "EmptyWithEmptyNode", {
+  enumerable: true,
+  get: function () {
+    return _EmptyWithEmptyNode.EmptyWithEmptyNode;
+  }
+});
+Object.defineProperty(exports, "EmptyWithEmptyText", {
+  enumerable: true,
+  get: function () {
+    return _EmptyWithEmptyText.EmptyWithEmptyText;
+  }
+});
+Object.defineProperty(exports, "FlippedPosition", {
+  enumerable: true,
+  get: function () {
+    return _FlippedPosition.FlippedPosition;
+  }
+});
+Object.defineProperty(exports, "InfiniteLoading", {
+  enumerable: true,
+  get: function () {
+    return _InfiniteLoading.InfiniteLoading;
+  }
+});
+Object.defineProperty(exports, "Loading", {
+  enumerable: true,
+  get: function () {
+    return _Loading.Loading;
+  }
+});
+Object.defineProperty(exports, "ShiftedIntoView", {
+  enumerable: true,
+  get: function () {
+    return _ShiftedIntoView.ShiftedIntoView;
+  }
+});
+Object.defineProperty(exports, "WithClearButton", {
+  enumerable: true,
+  get: function () {
+    return _WithClearButton.WithClearButton;
+  }
+});
+Object.defineProperty(exports, "WithCustomLowMaxHeight", {
+  enumerable: true,
+  get: function () {
+    return _WithCustomLowMaxHeight.WithCustomLowMaxHeight;
+  }
+});
+Object.defineProperty(exports, "WithCustomOptions", {
+  enumerable: true,
+  get: function () {
+    return _WithCustomOptions.WithCustomOptions;
+  }
+});
+Object.defineProperty(exports, "WithDisabledOption", {
+  enumerable: true,
+  get: function () {
+    return _WithDisabledOption.WithDisabledOption;
+  }
+});
+Object.defineProperty(exports, "WithFilterField", {
+  enumerable: true,
+  get: function () {
+    return _WithFilterField.WithFilterField;
+  }
+});
+Object.defineProperty(exports, "WithInitialFocus", {
+  enumerable: true,
+  get: function () {
+    return _WithInitialFocus.WithInitialFocus;
+  }
+});
+Object.defineProperty(exports, "WithManyOptions", {
+  enumerable: true,
+  get: function () {
+    return _WithManyOptions.WithManyOptions;
+  }
+});
+Object.defineProperty(exports, "WithNoMatchText", {
+  enumerable: true,
+  get: function () {
+    return _WithNoMatchText.WithNoMatchText;
+  }
+});
+Object.defineProperty(exports, "WithOnBlur", {
+  enumerable: true,
+  get: function () {
+    return _WithOnBlur.WithOnBlur;
+  }
+});
+Object.defineProperty(exports, "WithOnFocus", {
+  enumerable: true,
+  get: function () {
+    return _WithOnFocus.WithOnFocus;
+  }
+});
+Object.defineProperty(exports, "WithOptionsAndDisabled", {
+  enumerable: true,
+  get: function () {
+    return _WithOptionsAndDisabled.WithOptionsAndDisabled;
+  }
+});
+Object.defineProperty(exports, "WithOptionsAndLoading", {
+  enumerable: true,
+  get: function () {
+    return _WithOptionsAndLoading.WithOptionsAndLoading;
+  }
+});
+Object.defineProperty(exports, "WithOptionsAndLoadingText", {
+  enumerable: true,
+  get: function () {
+    return _WithOptionsAndLoadingText.WithOptionsAndLoadingText;
+  }
+});
+Object.defineProperty(exports, "WithPlaceholder", {
+  enumerable: true,
+  get: function () {
+    return _WithPlaceholder.WithPlaceholder;
+  }
+});
+Object.defineProperty(exports, "WithPlaceholderAndSelection", {
+  enumerable: true,
+  get: function () {
+    return _WithPlaceholderAndSelection.WithPlaceholderAndSelection;
+  }
+});
+Object.defineProperty(exports, "WithPrefix", {
+  enumerable: true,
+  get: function () {
+    return _WithPrefix.WithPrefix;
+  }
+});
+Object.defineProperty(exports, "WithPrefixAndSelection", {
+  enumerable: true,
+  get: function () {
+    return _WithPrefixAndSelection.WithPrefixAndSelection;
+  }
+});
+Object.defineProperty(exports, "WithRTL", {
+  enumerable: true,
+  get: function () {
+    return _WithRTL.WithRTL;
+  }
+});
+Object.defineProperty(exports, "WithSelection", {
+  enumerable: true,
+  get: function () {
+    return _WithSelection.WithSelection;
+  }
+});
+Object.defineProperty(exports, "WithSelectionAndDisabled", {
+  enumerable: true,
+  get: function () {
+    return _WithSelectionAndDisabled.WithSelectionAndDisabled;
+  }
+});
+Object.defineProperty(exports, "WithoutOptionsAndLoading", {
+  enumerable: true,
+  get: function () {
+    return _WithoutOptionsAndLoading.WithoutOptionsAndLoading;
+  }
+});
+Object.defineProperty(exports, "WithoutSelection", {
+  enumerable: true,
+  get: function () {
+    return _WithoutSelection.WithoutSelection;
+  }
+});
+exports.default = void 0;
+var _simpleSingleSelect = require("./simple-single-select.js");
+var _WithoutSelection = require("./__stories__/WithoutSelection.js");
+var _WithSelection = require("./__stories__/WithSelection.js");
+var _WithOnFocus = require("./__stories__/WithOnFocus.js");
+var _WithOnBlur = require("./__stories__/WithOnBlur.js");
+var _WithCustomOptions = require("./__stories__/WithCustomOptions.js");
+var _WithInitialFocus = require("./__stories__/WithInitialFocus.js");
+var _Dense = require("./__stories__/Dense.js");
+var _Empty = require("./__stories__/Empty.js");
+var _Loading = require("./__stories__/Loading.js");
+var _InfiniteLoading = require("./__stories__/InfiniteLoading.js");
+var _EmptyWithEmptyText = require("./__stories__/EmptyWithEmptyText.js");
+var _EmptyWithEmptyNode = require("./__stories__/EmptyWithEmptyNode.js");
+var _WithOptionsAndLoading = require("./__stories__/WithOptionsAndLoading.js");
+var _WithOptionsAndLoadingText = require("./__stories__/WithOptionsAndLoadingText.js");
+var _WithoutOptionsAndLoading = require("./__stories__/WithoutOptionsAndLoading.js");
+var _WithManyOptions = require("./__stories__/WithManyOptions.js");
+var _WithCustomLowMaxHeight = require("./__stories__/WithCustomLowMaxHeight.js");
+var _WithOptionsAndDisabled = require("./__stories__/WithOptionsAndDisabled.js");
+var _WithSelectionAndDisabled = require("./__stories__/WithSelectionAndDisabled.js");
+var _WithPrefix = require("./__stories__/WithPrefix.js");
+var _WithPrefixAndSelection = require("./__stories__/WithPrefixAndSelection.js");
+var _WithRTL = require("./__stories__/WithRTL.js");
+var _WithPlaceholder = require("./__stories__/WithPlaceholder.js");
+var _WithPlaceholderAndSelection = require("./__stories__/WithPlaceholderAndSelection.js");
+var _WithDisabledOption = require("./__stories__/WithDisabledOption.js");
+var _WithClearButton = require("./__stories__/WithClearButton.js");
+var _WithFilterField = require("./__stories__/WithFilterField.js");
+var _WithNoMatchText = require("./__stories__/WithNoMatchText.js");
+var _DefaultPosition = require("./__stories__/DefaultPosition.js");
+var _FlippedPosition = require("./__stories__/FlippedPosition.js");
+var _ShiftedIntoView = require("./__stories__/ShiftedIntoView.js");
+var _default = exports.default = {
+  title: 'Simple Single Select',
+  component: _simpleSingleSelect.SimpleSingleSelect
+};