@lumx/react 4.3.2-alpha.10 → 4.3.2-alpha.11

package/index.js

@@ -16,7 +16,7 @@ import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { u as useDisabledStateContext, M as MovingFocusContext, a as useVirtualFocusParent, b as useVirtualFocus, A as A11YLiveMessage, c as MovingFocusProvider, P as Portal, C as ClickAwayProvider } from './_internal/BcRzrT9Y.js';
+import { u as useDisabledStateContext, a as useVirtualFocusParent, M as MovingFocusContext, i as isComboboxValue, b as useComboboxRefs, c as useCombobox, S as SectionContext, g as generateOptionId, d as useVirtualFocus, A as A11YLiveMessage, C as ComboboxContext, e as MovingFocusProvider, r as reducer$1, f as initialState, h as ComboboxRefsProvider, P as Portal, j as ClickAwayProvider } from './_internal/BCgo9dYV.js';
 import isEmpty from 'lodash/isEmpty';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
@@ -24,15 +24,14 @@ import memoize from 'lodash/memoize';
 import { mdiClose } from '@lumx/icons/esm/close';
 import isFunction from 'lodash/isFunction';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken';
+import noop from 'lodash/noop';
+import castArray from 'lodash/castArray';
 import { mdiCheck } from '@lumx/icons/esm/check';
 import { mdiMinus } from '@lumx/icons/esm/minus';
 import { visuallyHidden, bem as bem$1 } from '@lumx/core/js/utils/classNames';
-import noop from 'lodash/noop';
-import uniqueId from 'lodash/uniqueId';
 import debounce$1 from 'lodash/debounce';
 import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
 import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
-import castArray from 'lodash/castArray';
 import { mdiInformationOutline } from '@lumx/icons/esm/information-outline';
 import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left';
 import { mdiChevronRight } from '@lumx/icons/esm/chevron-right';
@@ -105,10 +104,10 @@ const COMPONENT_NAME$1l = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1o = 'lumx-alert-dialog';
+const CLASSNAME$1n = 'lumx-alert-dialog';
 const {
   block: block$19
-} = classNames.bem(CLASSNAME$1o);
+} = classNames.bem(CLASSNAME$1n);
 
 /**
  * Component default props.
@@ -222,7 +221,7 @@ const AlertDialog = forwardRef((props, ref) => {
   });
 });
 AlertDialog.displayName = COMPONENT_NAME$1l;
-AlertDialog.className = CLASSNAME$1o;
+AlertDialog.className = CLASSNAME$1n;
 AlertDialog.defaultProps = DEFAULT_PROPS$1b;
 
 /**
@@ -320,7 +319,7 @@ const COMPONENT_NAME$1k = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1n = 'lumx-autocomplete';
+const CLASSNAME$1m = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -387,7 +386,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1n),
+    className: classNames.join(className, CLASSNAME$1m),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -428,7 +427,7 @@ const Autocomplete = forwardRef((props, ref) => {
   });
 });
 Autocomplete.displayName = COMPONENT_NAME$1k;
-Autocomplete.className = CLASSNAME$1n;
+Autocomplete.className = CLASSNAME$1m;
 Autocomplete.defaultProps = DEFAULT_PROPS$1a;
 
 /**
@@ -439,7 +438,7 @@ const COMPONENT_NAME$1j = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1m = 'lumx-autocomplete-multiple';
+const CLASSNAME$1l = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -519,7 +518,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1m),
+    className: classNames.join(className, CLASSNAME$1l),
     name: name,
     value: value,
     onChange: onChange,
@@ -553,7 +552,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
   });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
-AutocompleteMultiple.className = CLASSNAME$1m;
+AutocompleteMultiple.className = CLASSNAME$1l;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$19;
 
 /**
@@ -564,11 +563,11 @@ const COMPONENT_NAME$1i = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1l = 'lumx-avatar';
+const CLASSNAME$1k = 'lumx-avatar';
 const {
   block: block$18,
   element: element$S
-} = classNames.bem(CLASSNAME$1l);
+} = classNames.bem(CLASSNAME$1k);
 
 /**
  * Component default props.
@@ -630,7 +629,7 @@ const Avatar = forwardRef((props, ref) => {
   });
 });
 Avatar.displayName = COMPONENT_NAME$1i;
-Avatar.className = CLASSNAME$1l;
+Avatar.className = CLASSNAME$1k;
 Avatar.defaultProps = DEFAULT_PROPS$18;
 
 /**
@@ -932,10 +931,10 @@ const COMPONENT_NAME$1h = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-badge';
+const CLASSNAME$1j = 'lumx-badge';
 const {
   block: block$16
-} = bem(CLASSNAME$1k);
+} = bem(CLASSNAME$1j);
 
 /**
  * Component default props.
@@ -968,7 +967,7 @@ const Badge$1 = props => {
   });
 };
 Badge$1.displayName = COMPONENT_NAME$1h;
-Badge$1.className = CLASSNAME$1k;
+Badge$1.className = CLASSNAME$1j;
 Badge$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
@@ -993,11 +992,11 @@ Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
 const COMPONENT_NAME$1g = 'BadgeWrapper';
-const CLASSNAME$1j = 'lumx-badge-wrapper';
+const CLASSNAME$1i = 'lumx-badge-wrapper';
 const {
   block: block$15,
   element: element$Q
-} = bem(CLASSNAME$1j);
+} = bem(CLASSNAME$1i);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1024,7 +1023,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
   });
 });
 BadgeWrapper.displayName = COMPONENT_NAME$1g;
-BadgeWrapper.className = CLASSNAME$1j;
+BadgeWrapper.className = CLASSNAME$1i;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1185,10 +1184,10 @@ const COMPONENT_NAME$1e = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-button';
+const CLASSNAME$1h = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1i);
+} = bem(CLASSNAME$1h);
 
 /**
  * Component default props.
@@ -1226,7 +1225,7 @@ const Button$1 = props => {
   });
 };
 Button$1.displayName = COMPONENT_NAME$1e;
-Button$1.className = CLASSNAME$1i;
+Button$1.className = CLASSNAME$1h;
 Button$1.defaultProps = DEFAULT_PROPS$16;
 
 /**
@@ -1294,7 +1293,7 @@ const Button = forwardRef((props, ref) => {
   });
 });
 Button.displayName = COMPONENT_NAME$1e;
-Button.className = CLASSNAME$1i;
+Button.className = CLASSNAME$1h;
 Button.defaultProps = DEFAULT_PROPS$16;
 
 const COMPONENT_NAME$1d = 'Icon';
@@ -1304,10 +1303,10 @@ const IconClassName = 'lumx-icon';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1h = IconClassName;
+const CLASSNAME$1g = IconClassName;
 const {
   block: block$14
-} = bem(CLASSNAME$1h);
+} = bem(CLASSNAME$1g);
 
 /**
  * Component default props.
@@ -1391,7 +1390,7 @@ const Icon$1 = props => {
   });
 };
 Icon$1.displayName = COMPONENT_NAME$1d;
-Icon$1.className = CLASSNAME$1h;
+Icon$1.className = CLASSNAME$1g;
 Icon$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
@@ -1402,7 +1401,7 @@ const COMPONENT_NAME$1c = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-icon-button';
+const CLASSNAME$1f = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1444,7 +1443,7 @@ const IconButton$1 = props => {
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1c;
-IconButton$1.className = CLASSNAME$1g;
+IconButton$1.className = CLASSNAME$1f;
 IconButton$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
@@ -1481,7 +1480,7 @@ const IconButton = forwardRef((props, ref) => {
   });
 });
 IconButton.displayName = COMPONENT_NAME$1c;
-IconButton.className = CLASSNAME$1g;
+IconButton.className = CLASSNAME$1f;
 IconButton.defaultProps = DEFAULT_PROPS$14;
 
 /**
@@ -1492,7 +1491,7 @@ const COMPONENT_NAME$1b = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-button-group';
+const CLASSNAME$1e = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1513,12 +1512,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1f),
+    className: classnames(className, CLASSNAME$1e),
     children: children
   });
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1b;
-ButtonGroup$1.className = CLASSNAME$1f;
+ButtonGroup$1.className = CLASSNAME$1e;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
@@ -1535,15 +1534,15 @@ const ButtonGroup = forwardRef((props, ref) => {
   });
 });
 ButtonGroup.displayName = COMPONENT_NAME$1b;
-ButtonGroup.className = CLASSNAME$1f;
+ButtonGroup.className = CLASSNAME$1e;
 ButtonGroup.defaultProps = DEFAULT_PROPS$13;
 
 const COMPONENT_NAME$1a = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1e = InputLabelClassName;
+const CLASSNAME$1d = InputLabelClassName;
 const {
   block: block$13
-} = bem(CLASSNAME$1e);
+} = bem(CLASSNAME$1d);
 const DEFAULT_PROPS$12 = {};
 
 /**
@@ -1573,7 +1572,7 @@ function InputLabel$1(props) {
   });
 }
 InputLabel$1.displayName = COMPONENT_NAME$1a;
-InputLabel$1.className = CLASSNAME$1e;
+InputLabel$1.className = CLASSNAME$1d;
 InputLabel$1.defaultProps = DEFAULT_PROPS$12;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -1595,10 +1594,10 @@ const InputHelperClassName = 'lumx-input-helper';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1d = InputHelperClassName;
+const CLASSNAME$1c = InputHelperClassName;
 const {
   block: block$12
-} = bem(CLASSNAME$1d);
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
@@ -1633,7 +1632,7 @@ function InputHelper$1(props) {
   });
 }
 InputHelper$1.displayName = COMPONENT_NAME$19;
-InputHelper$1.className = CLASSNAME$1d;
+InputHelper$1.className = CLASSNAME$1c;
 InputHelper$1.defaultProps = DEFAULT_PROPS$11;
 
 const INTERMEDIATE_STATE = 'intermediate';
@@ -1650,11 +1649,11 @@ const COMPONENT_NAME$18 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-checkbox';
+const CLASSNAME$1b = 'lumx-checkbox';
 const {
   block: block$11,
   element: element$P
-} = bem(CLASSNAME$1c);
+} = bem(CLASSNAME$1b);
 
 /**
  * Checkbox component.
@@ -1810,7 +1809,7 @@ const Checkbox = forwardRef((props, ref) => {
   });
 });
 Checkbox.displayName = COMPONENT_NAME$18;
-Checkbox.className = CLASSNAME$1c;
+Checkbox.className = CLASSNAME$1b;
 Checkbox.defaultProps = DEFAULT_PROPS$10;
 
 /**
@@ -1837,11 +1836,11 @@ const COMPONENT_NAME$17 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-chip';
+const CLASSNAME$1a = 'lumx-chip';
 const {
   block: block$10,
   element: element$O
-} = classNames.bem(CLASSNAME$1b);
+} = classNames.bem(CLASSNAME$1a);
 
 /**
  * Component default props.
@@ -1947,7 +1946,7 @@ const Chip = forwardRef((props, ref) => {
   );
 });
 Chip.displayName = COMPONENT_NAME$17;
-Chip.className = CLASSNAME$1b;
+Chip.className = CLASSNAME$1a;
 Chip.defaultProps = DEFAULT_PROPS$$;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
@@ -2014,7 +2013,7 @@ const COMPONENT_NAME$16 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-chip-group';
+const CLASSNAME$19 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -2033,12 +2032,12 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1a),
+    className: classNames.join(className, CLASSNAME$19),
     children: children
   });
 });
 InternalChipGroup.displayName = COMPONENT_NAME$16;
-InternalChipGroup.className = CLASSNAME$1a;
+InternalChipGroup.className = CLASSNAME$19;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$_;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
@@ -2129,11 +2128,11 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-selection-chip-group';
+const CLASSNAME$18 = 'lumx-selection-chip-group';
 const {
   block: block$$,
   element: element$N
-} = classNames.bem(CLASSNAME$19);
+} = classNames.bem(CLASSNAME$18);
 
 /**
  * SelectionChipGroup component.
@@ -2222,330 +2221,6 @@ const SelectionChipGroup = ({
   });
 };
 
-/** Context to store the refs of the combobox elements */
-const ComboboxRefsContext = /*#__PURE__*/createContext({
-  triggerRef: {
-    current: null
-  },
-  anchorRef: {
-    current: null
-  }
-});
-/** Provider to store the required refs for the Combobox */
-const ComboboxRefsProvider = ({
-  triggerRef,
-  anchorRef,
-  children
-}) => {
-  const value = useMemo(() => ({
-    triggerRef,
-    anchorRef
-  }), [triggerRef, anchorRef]);
-  return /*#__PURE__*/jsx(ComboboxRefsContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-
-/** Retrieves the combobox elements references from context */
-const useComboboxRefs = () => {
-  const refs = useContext(ComboboxRefsContext);
-  if (!refs) {
-    throw new Error('The useComboboxRefs hook must be called within a ComboboxRefsProvider');
-  }
-  return refs;
-};
-
-/** Generate the combobox option id from the combobox id and the given id */
-const generateOptionId = (comboboxId, optionId) => `${comboboxId}-option-${optionId}`;
-
-/** Verifies that the combobox registered option is an action */
-const isComboboxAction = option => Boolean(option?.isAction);
-
-/** Verifies that the combobox registered option is the option's value */
-const isComboboxValue = option => {
-  return !isComboboxAction(option);
-};
-
-const comboboxId = `combobox-${uniqueId()}`;
-const initialState = {
-  comboboxId,
-  listboxId: `${comboboxId}-popover`,
-  status: 'idle',
-  isOpen: false,
-  inputValue: '',
-  showAll: true,
-  options: {},
-  type: 'listbox',
-  optionsLength: 0
-};
-
-/** Actions when the combobox opens. */
-const OPEN_COMBOBOX = (state, action) => {
-  const {
-    manual
-  } = action.payload || {};
-  // If the combobox was manually opened, show all suggestions
-  return {
-    ...state,
-    showAll: Boolean(manual),
-    isOpen: true
-  };
-};
-
-/** Actions when the combobox closes */
-const CLOSE_COMBOBOX = state => {
-  return {
-    ...state,
-    showAll: true,
-    isOpen: false
-  };
-};
-
-/** Actions on input update. */
-const SET_INPUT_VALUE = (state, action) => {
-  return {
-    ...state,
-    inputValue: action.payload,
-    // When the user is changing the value, show only values that are related to the input value.
-    showAll: false,
-    isOpen: true
-  };
-};
-
-/** Register an option to the state */
-const ADD_OPTION = (state, action) => {
-  const {
-    id,
-    option
-  } = action.payload;
-  const {
-    options
-  } = state;
-  if (options[id]) {
-    // Option already exists, return state unchanged
-    return state;
-  }
-  const newOptions = {
-    ...options,
-    [id]: option
-  };
-  let newType = state.type;
-  if (isComboboxAction(option)) {
-    newType = 'grid';
-  }
-  let newOptionsLength = state.optionsLength;
-  if (isComboboxValue(option)) {
-    newOptionsLength += 1;
-  }
-  return {
-    ...state,
-    options: newOptions,
-    type: newType,
-    optionsLength: newOptionsLength
-  };
-};
-
-/** Remove an option from the state */
-const REMOVE_OPTION = (state, action) => {
-  const {
-    id
-  } = action.payload;
-  const {
-    options
-  } = state;
-  const option = options[id];
-  if (!options[id]) {
-    // Option doesn't exist, return state unchanged
-    return state;
-  }
-  const newOptions = {
-    ...options
-  };
-  delete newOptions[id];
-  let newOptionsLength = state.optionsLength;
-  if (isComboboxValue(option)) {
-    newOptionsLength -= 1;
-  }
-  return {
-    ...state,
-    options: newOptions,
-    optionsLength: newOptionsLength
-  };
-};
-
-/** Reducers for each action type: */
-const REDUCERS = {
-  OPEN_COMBOBOX,
-  CLOSE_COMBOBOX,
-  SET_INPUT_VALUE,
-  ADD_OPTION,
-  REMOVE_OPTION
-};
-
-/** Main reducer */
-const reducer$1 = (state, action) => {
-  return REDUCERS[action.type]?.(state, action) || state;
-};
-
-/** Dispatch for the combobox component */
-
-/** Context for the Combobox component */
-const ComboboxContext = /*#__PURE__*/React__default.createContext({
-  ...initialState,
-  openOnFocus: false,
-  openOnClick: false,
-  selectionType: 'single',
-  optionsLength: 0,
-  onSelect: noop,
-  onInputChange: noop,
-  onOpen: noop,
-  dispatch: noop,
-  translations: {
-    clearLabel: '',
-    tryReloadLabel: '',
-    showSuggestionsLabel: '',
-    noResultsForInputLabel: input => input || '',
-    loadingLabel: '',
-    serviceUnavailableLabel: '',
-    nbOptionsLabel: options => `${options}`
-  }
-});
-
-/** Context for a combobox section to store its unique id */
-const SectionContext = /*#__PURE__*/React__default.createContext({
-  sectionId: ''
-});
-
-/** Retrieve the current combobox state and actions */
-const useCombobox = () => {
-  const comboboxContext = React__default.useContext(ComboboxContext);
-  const {
-    dispatch: movingFocusDispatch
-  } = React__default.useContext(MovingFocusContext);
-  const {
-    onSelect,
-    onInputChange,
-    onOpen,
-    dispatch,
-    inputValue,
-    ...contextValues
-  } = comboboxContext;
-  const {
-    triggerRef
-  } = useComboboxRefs();
-
-  /** Action triggered when the listBox is closed without selecting any option */
-  const handleClose = React__default.useCallback(() => {
-    dispatch({
-      type: 'CLOSE_COMBOBOX'
-    });
-    // Reset visual focus
-    movingFocusDispatch({
-      type: 'RESET_SELECTED_TAB_STOP'
-    });
-  }, [dispatch, movingFocusDispatch]);
-
-  // Handle callbacks on options mounted
-  const [optionsMountedCallbacks, setOptionsMountedCallback] = React__default.useState();
-  React__default.useEffect(() => {
-    if (comboboxContext.optionsLength > 0 && optionsMountedCallbacks?.length) {
-      const optionsArray = Object.values(comboboxContext.options);
-      // Execute callbacks
-      for (const callback of optionsMountedCallbacks) {
-        callback(optionsArray);
-      }
-      setOptionsMountedCallback(undefined);
-    }
-  }, [comboboxContext.options, comboboxContext.optionsLength, optionsMountedCallbacks]);
-
-  /** Callback for when an option is selected */
-  const handleSelected = React__default.useCallback((option, source) => {
-    if (option?.isDisabled) {
-      return;
-    }
-    if (isComboboxValue(option)) {
-      /**
-       * We only close the list if the selection type is single.
-       * If it is multiple, we want to allow the user to continue
-       * selecting multiple options.
-       */
-      if (comboboxContext.selectionType !== 'multiple') {
-        handleClose();
-      }
-      /** Call parent onSelect callback  */
-      if (onSelect) {
-        onSelect(option);
-      }
-    }
-
-    /** If the option itself has a custom action, also call it */
-    if (option?.onSelect) {
-      option.onSelect(option, source);
-    }
-
-    /** Reset focus on input */
-    if (triggerRef?.current) {
-      triggerRef.current?.focus();
-    }
-  }, [comboboxContext.selectionType, handleClose, onSelect, triggerRef]);
-
-  /** Callback for when the input must be updated */
-  const handleInputChange = React__default.useCallback((value, ...args) => {
-    // Update the local state
-    dispatch({
-      type: 'SET_INPUT_VALUE',
-      payload: value
-    });
-    // If a callback if given, call it with the value
-    if (onInputChange) {
-      onInputChange(value, ...args);
-    }
-    // Reset visual focus
-    movingFocusDispatch({
-      type: 'RESET_SELECTED_TAB_STOP'
-    });
-  }, [dispatch, movingFocusDispatch, onInputChange]);
-
-  /**
-   * Open the popover
-   *
-   * @returns a promise with the updated context once all options are mounted
-   */
-  const handleOpen = React__default.useCallback(params => {
-    /** update the local state */
-    dispatch({
-      type: 'OPEN_COMBOBOX',
-      payload: params
-    });
-    /** If a parent callback was given, trigger it with state information */
-    if (onOpen) {
-      onOpen({
-        currentValue: inputValue,
-        manual: Boolean(params?.manual)
-      });
-    }
-
-    // Promise resolving options on mount
-    return new Promise(resolve => {
-      // Append to the list of callback on options mounted
-      setOptionsMountedCallback((callbacks = []) => {
-        callbacks.push(resolve);
-        return callbacks;
-      });
-    });
-  }, [dispatch, inputValue, onOpen]);
-  return React__default.useMemo(() => ({
-    handleClose,
-    handleOpen,
-    handleInputChange,
-    handleSelected,
-    dispatch,
-    inputValue,
-    ...contextValues
-  }), [contextValues, dispatch, handleClose, handleInputChange, handleOpen, handleSelected, inputValue]);
-};
-
 /**
  * Provide props for the semantic and behaviors the combobox trigger.
  *
@@ -2889,12 +2564,12 @@ const ComboboxButton = forwardRef((props, ref) => {
   });
 });
 
-const CLASSNAME$18 = 'lumx-combobox-divider';
+const CLASSNAME$17 = 'lumx-combobox-divider';
 
 /** Combobox option divider */
 function ComboboxDivider() {
   return /*#__PURE__*/jsx(ListDivider, {
-    className: CLASSNAME$18,
+    className: CLASSNAME$17,
     role: "presentation"
   });
 }
@@ -3094,12 +2769,12 @@ const useRegisterOption = (registerId, option, shouldRegister) => {
 };
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-const CLASSNAME$17 = 'lumx-combobox-option';
+const COMBOBOX_OPTION_CLASSNAME = 'lumx-combobox-option';
 const LUMX_CLASSNAME = 'lumx-list-item';
 const {
   block: block$_,
   element: element$M
-} = classNames.bem(CLASSNAME$17);
+} = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
 const lumxListItem = classNames.bem(LUMX_CLASSNAME);
 
 /**
@@ -3298,7 +2973,7 @@ const defaultWidths = [REAL_SIZE_FOR_LUMX_SIZE.xxl, REAL_SIZE_FOR_LUMX_SIZE.xl,
 const {
   block: block$Z,
   element: element$L
-} = classNames.bem(CLASSNAME$17);
+} = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
 
 /**
  * Skeleton for a combobox option.
@@ -17002,5 +16677,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, ComboboxButton, ComboboxDivider, ComboboxInput, ComboboxListBox, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, ComboboxSection, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, LUMX_CLASSNAME, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, SUB_COMPONENTS, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1h as CLASSNAME, COMBOBOX_OPTION_CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, ComboboxButton, ComboboxDivider, ComboboxInput, ComboboxListBox, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, ComboboxSection, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, LUMX_CLASSNAME, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, SUB_COMPONENTS, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map