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

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

@@ -0,0 +1,112 @@
+import _JSXStyle from "styled-jsx/style";
+import { IconChevronDown16 } from '@dhis2/ui-icons';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { ClearButton } from './clear-button.js';
+import { Container } from './container.js';
+import { Placeholder } from './placeholder.js';
+import { Prefix } from './prefix.js';
+export function SelectedValue(_ref) {
+  let {
+    clearText,
+    comboBoxId,
+    name,
+    selectedLabel,
+    onKeyDown,
+    autoFocus,
+    clearable,
+    comboBoxRef,
+    dataTest,
+    dense,
+    disabled,
+    error,
+    expanded,
+    hasSelection,
+    inputMaxHeight,
+    labelledBy,
+    placeholder,
+    prefix,
+    tabIndex,
+    valid,
+    warning,
+    onBlur,
+    onClear,
+    onClick,
+    onFocus
+  } = _ref;
+  const dataTestPrefix = `${dataTest}-selectedvalue`;
+  return /*#__PURE__*/React.createElement(Container, {
+    dataTest: `${dataTestPrefix}-container`,
+    ref: comboBoxRef,
+    comboBoxId: comboBoxId,
+    autoFocus: autoFocus,
+    dense: dense,
+    disabled: disabled,
+    error: error,
+    expanded: expanded,
+    labelledBy: labelledBy,
+    name: name,
+    placeholder: placeholder,
+    tabIndex: tabIndex,
+    valid: valid,
+    warning: warning,
+    onBlur: onBlur,
+    onClick: onClick,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  }, prefix && /*#__PURE__*/React.createElement(Prefix, {
+    dataTest: `${dataTestPrefix}-prefix`,
+    prefix: prefix
+  }), /*#__PURE__*/React.createElement("div", {
+    tabIndex: "-1",
+    className: _JSXStyle.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "selected-option-label"
+  }, !selectedLabel && !prefix && placeholder && /*#__PURE__*/React.createElement(Placeholder, {
+    dataTest: `${dataTestPrefix}-placeholder`,
+    placeholder: placeholder
+  }), selectedLabel), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "clear-button-container"
+  }, /*#__PURE__*/React.createElement(ClearButton, {
+    clearText: clearText,
+    dataTest: `${dataTestPrefix}-clear`,
+    onClear: onClear
+  })), /*#__PURE__*/React.createElement("span", {
+    "aria-label": "Open select",
+    onClick: () => {
+      comboBoxRef.current.focus();
+      onClick();
+    },
+    className: _JSXStyle.dynamic([["3226769786", [inputMaxHeight]]]) + " " + "toggle-icon"
+  }, /*#__PURE__*/React.createElement(IconChevronDown16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3226769786",
+    dynamic: [inputMaxHeight]
+  }, [`.selected-option-label.__jsx-style-dynamic-selector{overflow-y:auto;max-height:${inputMaxHeight};-webkit-flex:1;-ms-flex:1;flex:1;}`, ".clear-button-container.__jsx-style-dynamic-selector{margin-inline-start:auto;}", ".toggle-icon.__jsx-style-dynamic-selector{display:block;background:none;padding:0;border:0;}"]));
+}
+SelectedValue.propTypes = {
+  clearText: PropTypes.string.isRequired,
+  comboBoxId: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  selectedLabel: PropTypes.string.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  autoFocus: PropTypes.bool,
+  clearable: PropTypes.bool,
+  comboBoxRef: PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLElement)
+  }),
+  dataTest: PropTypes.string,
+  dense: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  expanded: PropTypes.bool,
+  hasSelection: PropTypes.bool,
+  inputMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  labelledBy: PropTypes.string,
+  placeholder: PropTypes.string,
+  prefix: PropTypes.string,
+  tabIndex: PropTypes.string,
+  valid: PropTypes.bool,
+  warning: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onClear: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func
+};

package/build/es/simple-single-select/shared-prop-types.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+export const optionProp = PropTypes.shape({
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  component: PropTypes.elementType,
+  disabled: PropTypes.bool
+});

package/build/es/simple-single-select/simple-single-select.e2e.stories.js

@@ -0,0 +1,142 @@
+import _JSXStyle from "styled-jsx/style";
+import React, { useState } from 'react';
+import { SimpleSingleSelect } from './simple-single-select.js';
+export default {
+  title: 'Simple Single Select',
+  component: SimpleSingleSelect
+};
+const options = [{
+  label: 'ANC 1st visit',
+  value: 'anc_1st_visit'
+}, {
+  label: 'ANC 2nd visit',
+  value: 'anc_2nd_visit'
+}, {
+  label: 'ANC 3rd visit',
+  value: 'anc_3rd_visit'
+}, {
+  label: 'ANC 4th or more visits',
+  value: 'anc_4th_or_more_visits'
+}, {
+  label: 'ARI treated with antibiotics (pneumonia) follow-up',
+  value: 'ari_treated_with_antibiotics_(pneumonia)_follow-up'
+}, {
+  label: 'ARI treated with antibiotics (pneumonia) new',
+  value: 'ari_treated_with_antibiotics_(pneumonia)_new'
+}, {
+  label: 'ARI treated with antibiotics (pneumonia) referrals',
+  value: 'ari_treated_with_antibiotics_(pneumonia)_referrals'
+}, {
+  label: 'ARI treated without antibiotics (cough) follow-up',
+  value: 'ari_treated_without_antibiotics_(cough)_follow-up'
+}, {
+  label: 'ARI treated without antibiotics (cough) new',
+  value: 'ari_treated_without_antibiotics_(cough)_new'
+}, {
+  label: 'ARI treated without antibiotics (cough) referrals',
+  value: 'ari_treated_without_antibiotics_(cough)_referrals'
+}, {
+  label: 'ART No clients who stopped TRT due to TRT failure',
+  value: 'art_no_clients_who_stopped_trt_due_to_trt_failure'
+}, {
+  label: 'ART No clients who stopped TRT due to adverse clinical status/event',
+  value: 'art_no_clients_who_stopped_trt_due_to_adverse_clinical_status/event'
+}, {
+  label: 'ART No clients with change of regimen due to drug toxicity',
+  value: 'art_no_clients_with_change_of_regimen_due_to_drug_toxicity'
+}, {
+  label: 'ART No clients with new adverse drug reaction',
+  value: 'art_no_clients_with_new_adverse_drug_reaction'
+}, {
+  label: 'ART No started Opportunist Infection prophylaxis',
+  value: 'art_no_started_opportunist_infection_prophylaxis'
+}, {
+  label: 'ART clients with new adverse clinical event',
+  value: 'art_clients_with_new_adverse_clinical_event'
+}, {
+  label: 'ART defaulters',
+  value: 'art_defaulters'
+}, {
+  label: 'ART enrollment stage 1',
+  value: 'art_enrollment_stage_1'
+}, {
+  label: 'ART enrollment stage 2',
+  value: 'art_enrollment_stage_2'
+}, {
+  label: 'ART enrollment stage 3',
+  value: 'art_enrollment_stage_3'
+}, {
+  label: 'ART enrollment stage 4',
+  value: 'art_enrollment_stage_4'
+}, {
+  label: 'ART entry point: No PMTCT',
+  value: 'art_entry_point:_no_pmtct'
+}];
+const fiveOptions = options.slice(0, 5);
+export const DefaultPosition = () => /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+  name: "Simple",
+  selected: {
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  },
+  onChange: () => null,
+  options: fiveOptions
+});
+export const FlippedPosition = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+  name: "Simple",
+  selected: {
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  },
+  onChange: () => null,
+  options: options
+}), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "979451016"
+}, ["html,body,#storybook-root{position:relative;height:500px;max-height:500px;}", "#storybook-root{padding-top:400px !important;}"]));
+export const ShiftedIntoView = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+  name: "Simple",
+  selected: {
+    label: 'ANC 1st visit',
+    value: 'anc_1st_visit'
+  },
+  onChange: () => null,
+  options: options
+}), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "438540012"
+}, ["html,body,#storybook-root{position:relative;height:300px !important;max-height:300px;}", "#storybook-root{padding-top:130px !important;}"]));
+export const HundretOptions = () => {
+  const [selected, setSelected] = useState({
+    value: '0',
+    label: `Select option 0`
+  });
+  const [hundretOptions] = useState(Array.apply(null, Array(100)).map((x, i) => ({
+    value: `${i}`,
+    label: `Select option ${i}`
+  })));
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "Simple",
+    selected: selected,
+    onChange: setSelected,
+    options: hundretOptions
+  });
+};
+export const HundretOptionsWithDisabled = () => {
+  const [selected, setSelected] = useState({
+    value: '10',
+    label: `Select option 10`
+  });
+  const [hundretOptions] = useState(Array.apply(null, Array(100)).map((x, i) => ({
+    value: `${i}`,
+    label: `Select option ${i}`,
+    disabled: [0,
+    // first otpion
+    17, 18, 99 // last otpion
+    ].includes(i)
+  })));
+  return /*#__PURE__*/React.createElement(SimpleSingleSelect, {
+    name: "Simple",
+    selected: selected,
+    onChange: setSelected,
+    options: hundretOptions
+  });
+};

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

@@ -0,0 +1,310 @@
+import { requiredIf } from '@dhis2/prop-types';
+import { sharedPropTypes } from '@dhis2/ui-constants';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import i18n from '../locales/index.js';
+import { Menu } from './menu/index.js';
+import { SelectedValue } from './selected-value/index.js';
+import { optionProp } from './shared-prop-types.js';
+import { useHandleKeyPressOnCombobox, useHandleKeyPressOnFilterInput } from './use-handle-key-press/index.js';
+function useFocussedOptionIndex(_ref) {
+  let {
+    filterable,
+    filterValue,
+    options
+  } = _ref;
+  const [defaultFocussedOptionIndex, setDefaultFocussedOptionIndex] = useState(0);
+  const [searchFocussedOptionIndex, setSearchFocussedOptionIndex] = 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 = useRef(false);
+  const prevFirstOption = useRef();
+  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 = useMemo(() => {
+    return filterValue ? searchFocussedOptionIndex : defaultFocussedOptionIndex;
+  }, [defaultFocussedOptionIndex, searchFocussedOptionIndex, filterValue]);
+  const setFocussedOptionIndex = useMemo(() => {
+    return filterValue ? setSearchFocussedOptionIndex : setDefaultFocussedOptionIndex;
+  }, [filterValue]);
+  return [focussedOptionIndex, setFocussedOptionIndex];
+}
+export 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 || i18n.t('Clear');
+  const empty = _empty || i18n.t('No data found');
+  const filterPlaceholder = _filterPlaceholder || i18n.t('Type to filter options');
+  const menuLoadingText = _menuLoadingText || i18n.t('Loading options');
+  const noMatchText = _noMatchText || i18n.t('No options found');
+  const comboBoxId = `${name}-combo`;
+  const comboBoxRef = useRef();
+  const listBoxRef = useRef();
+  const [focussedOptionIndex, setFocussedOptionIndex] = useFocussedOptionIndex({
+    filterable,
+    filterValue,
+    options
+  });
+  const [selectRef, setSelectRef] = useState();
+  const [expanded, setExpanded] = useState(false);
+  const closeMenu = useCallback(() => setExpanded(false), []);
+  const selectedValue = (selected === null || selected === void 0 ? void 0 : selected.value) || '';
+  const selectedLabel = (selected === null || selected === void 0 ? void 0 : selected.label) || '';
+  const openMenu = useCallback(() => {
+    const selectedOptionIndex = options.findIndex(option => option.value === selectedValue);
+    if (selectedOptionIndex !== focussedOptionIndex) {
+      setFocussedOptionIndex(selectedOptionIndex);
+    }
+    setExpanded(true);
+  }, [options, selectedValue, focussedOptionIndex, setFocussedOptionIndex]);
+  const toggleMenu = useCallback(() => {
+    if (expanded) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }, [expanded, openMenu, closeMenu]);
+  const selectFocussedOption = useCallback(() => {
+    const option = options[focussedOptionIndex];
+    if (option) {
+      onChange(option);
+    }
+  }, [focussedOptionIndex, options, onChange]);
+  const focusComboBox = useCallback(() => {
+    var _comboBoxRef$current;
+    return (_comboBoxRef$current = comboBoxRef.current) === null || _comboBoxRef$current === void 0 ? void 0 : _comboBoxRef$current.focus();
+  }, [comboBoxRef]);
+  const handleKeyDown = useHandleKeyPressOnCombobox({
+    value: selectedValue,
+    disabled,
+    onChange,
+    expanded,
+    loading,
+    options,
+    openMenu,
+    closeMenu,
+    listBoxRef,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption
+  });
+  const handleKeyDownOnFilterInput = useHandleKeyPressOnFilterInput({
+    value: selectedValue,
+    options,
+    loading,
+    closeMenu,
+    listBoxRef,
+    focusComboBox,
+    focussedOptionIndex,
+    setFocussedOptionIndex,
+    selectFocussedOption
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: cx('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.createElement(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.createElement(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: PropTypes.string.isRequired,
+  /** An array of options **/
+  options: PropTypes.arrayOf(optionProp).isRequired,
+  /** A callback that will be called with the new value or an empty string **/
+  onChange: PropTypes.func.isRequired,
+  /** Will focus the select initially **/
+  autoFocus: PropTypes.bool,
+  /** Additional class names that will be applied to the root element **/
+  className: PropTypes.string,
+  /** This will allow us to put an aria-label on the clear button **/
+  clearText: requiredIf(props => props.clearable, PropTypes.string),
+  /** Whether a clear button should be displayed or not **/
+  clearable: PropTypes.bool,
+  /** A value for a `data-test` attribute on the root element **/
+  dataTest: PropTypes.string,
+  /** Renders a select with lower height **/
+  dense: PropTypes.bool,
+  /** Disables all interactions with the select (except focussing) **/
+  disabled: PropTypes.bool,
+  /** Text or component to display when there are no options **/
+  empty: PropTypes.node,
+  /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  error: sharedPropTypes.statusPropType,
+  /** Help text that will be displayed below the input **/
+  filterHelpText: PropTypes.string,
+  /** Value will be used as aria-label attribute on the filter input **/
+  filterLabel: PropTypes.string,
+  /** Placeholder for the filter input **/
+  filterPlaceholder: PropTypes.string,
+  /** Value of the filter input **/
+  filterValue: PropTypes.string,
+  /** Whether the select should display a filter input **/
+  filterable: PropTypes.bool,
+  /** Max height of the container displaying the selected value **/
+  inputMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Should contain the id of the element that labels the select, if applicable **/
+  labelledBy: PropTypes.string,
+  /** Will show a loading indicator at the end of the options-list **/
+  loading: PropTypes.bool,
+  /** Text that will be displayed next to the loading indicator **/
+  menuLoadingText: PropTypes.string,
+  /** Allows to modify the max height of the menu **/
+  menuMaxHeight: PropTypes.string,
+  /** String that will be displayed when the select is being filtered but the options array is empty **/
+  noMatchText: requiredIf(props => props.filterable, PropTypes.string),
+  /** Allows to override what's rendered inside the `button[role="option"]`.
+   * Can be overriden on an individual option basis **/
+  optionComponent: PropTypes.elementType,
+  /** For a11y: How aggressively the user should be updated about changes in options **/
+  optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
+  /** String to show when there's no selected option **/
+  placeholder: PropTypes.string,
+  /** String that will be displayed before the label of the selected option **/
+  prefix: PropTypes.string,
+  selected: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired
+  }),
+  /** Standard HTML tab-index attribute that will be put on the combobox's root element **/
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  valid: sharedPropTypes.statusPropType,
+  /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  warning: sharedPropTypes.statusPropType,
+  /** Will be called when the combobox is loses focus **/
+  onBlur: PropTypes.func,
+  /** Will be called when the combobox is loses focus **/
+  onClear: PropTypes.func,
+  /** Will be called when the last option is scrolled into the visible area **/
+  onEndReached: PropTypes.func,
+  /** Will be called when the filter value changes **/
+  onFilterChange: PropTypes.func,
+  /** Will be called when the combobox is being focused **/
+  onFocus: PropTypes.func
+};

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

@@ -0,0 +1,36 @@
+import { SimpleSingleSelect } from './simple-single-select.js';
+export default {
+  title: 'Simple Single Select',
+  component: SimpleSingleSelect
+};
+export { WithoutSelection } from './__stories__/WithoutSelection.js';
+export { WithSelection } from './__stories__/WithSelection.js';
+export { WithOnFocus } from './__stories__/WithOnFocus.js';
+export { WithOnBlur } from './__stories__/WithOnBlur.js';
+export { WithCustomOptions } from './__stories__/WithCustomOptions.js';
+export { WithInitialFocus } from './__stories__/WithInitialFocus.js';
+export { Dense } from './__stories__/Dense.js';
+export { Empty } from './__stories__/Empty.js';
+export { Loading } from './__stories__/Loading.js';
+export { InfiniteLoading } from './__stories__/InfiniteLoading.js';
+export { EmptyWithEmptyText } from './__stories__/EmptyWithEmptyText.js';
+export { EmptyWithEmptyNode } from './__stories__/EmptyWithEmptyNode.js';
+export { WithOptionsAndLoading } from './__stories__/WithOptionsAndLoading.js';
+export { WithOptionsAndLoadingText } from './__stories__/WithOptionsAndLoadingText.js';
+export { WithoutOptionsAndLoading } from './__stories__/WithoutOptionsAndLoading.js';
+export { WithManyOptions } from './__stories__/WithManyOptions.js';
+export { WithCustomLowMaxHeight } from './__stories__/WithCustomLowMaxHeight.js';
+export { WithOptionsAndDisabled } from './__stories__/WithOptionsAndDisabled.js';
+export { WithSelectionAndDisabled } from './__stories__/WithSelectionAndDisabled.js';
+export { WithPrefix } from './__stories__/WithPrefix.js';
+export { WithPrefixAndSelection } from './__stories__/WithPrefixAndSelection.js';
+export { WithRTL } from './__stories__/WithRTL.js';
+export { WithPlaceholder } from './__stories__/WithPlaceholder.js';
+export { WithPlaceholderAndSelection } from './__stories__/WithPlaceholderAndSelection.js';
+export { WithDisabledOption } from './__stories__/WithDisabledOption.js';
+export { WithClearButton } from './__stories__/WithClearButton.js';
+export { WithFilterField } from './__stories__/WithFilterField.js';
+export { WithNoMatchText } from './__stories__/WithNoMatchText.js';
+export { DefaultPosition } from './__stories__/DefaultPosition.js';
+export { FlippedPosition } from './__stories__/FlippedPosition.js';
+export { ShiftedIntoView } from './__stories__/ShiftedIntoView.js';