@lumx/react 4.3.2-alpha.21 → 4.3.2-alpha.23

package/index.js

@@ -2,7 +2,7 @@ import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasi
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useCallback, useContext, createContext, Children, useLayoutEffect, cloneElement, isValidElement, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
@@ -16,7 +16,7 @@ import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
 import partition from 'lodash/partition.js';
 import reduce from 'lodash/reduce.js';
-import { u as useDisabledStateContext, M as MovingFocusContext, a as useVirtualFocus, A as A11YLiveMessage, P as Portal, C as ClickAwayProvider } from './_internal/CzTdCnO5.js';
+import { u as useDisabledStateContext, a as useComboboxSectionId, b as useCombobox, c as useRegisterOption, g as generateOptionId, M as MovingFocusContext, d as useVirtualFocus, C as ComboboxOptionContextProvider, e as useComboboxOptionContext, f as useComboboxRefs, A as A11YLiveMessage, P as Portal, h as ClickAwayProvider } from './_internal/BSETDrpT.js';
 import isEmpty from 'lodash/isEmpty.js';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
@@ -25,7 +25,6 @@ import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction.js';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
 import noop from 'lodash/noop.js';
-import uniqueId from 'lodash/uniqueId.js';
 import castArray from 'lodash/castArray.js';
 import { mdiCheck } from '@lumx/icons/esm/check.js';
 import { mdiMinus } from '@lumx/icons/esm/minus.js';
@@ -2220,275 +2219,6 @@ const SelectionChipGroup = ({
   });
 };
 
-const ComboboxOptionContext = /*#__PURE__*/createContext({});
-/** Context Provider to store the current combobox option id. */
-const ComboboxOptionContextProvider = ({
-  optionId,
-  isKeyboardHighlighted,
-  children
-}) => {
-  const value = React__default.useMemo(() => ({
-    optionId,
-    isKeyboardHighlighted
-  }), [optionId, isKeyboardHighlighted]);
-  return /*#__PURE__*/jsx(ComboboxOptionContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-
-/**
- * Retrieve the current combobox option id.
- * Must be used within a ComboboxOptionIdProvider
- */
-const useComboboxOptionContext = () => {
-  const comboboxOption = useContext(ComboboxOptionContext);
-  if (!comboboxOption?.optionId) {
-    throw new Error('This hook must be used within a ComboboxOptionIdProvider');
-  }
-  return comboboxOption;
-};
-
-/** 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
-};
-
-/** 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: ''
-});
-
-/** Context to store the refs of the combobox elements */
-const ComboboxRefsContext = /*#__PURE__*/createContext({
-  triggerRef: {
-    current: null
-  },
-  anchorRef: {
-    current: null
-  }
-});
-
-/** 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;
-};
-
-/** 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]);
-};
-
-/** Retrieve the current combobox section id */
-const useComboboxSectionId = () => {
-  return useContext(SectionContext);
-};
-
-/**
- * Register the given option to the context
- */
-const useRegisterOption = (registerId, option, shouldRegister) => {
-  const {
-    dispatch
-  } = useCombobox();
-
-  /** Register the given options */
-  React__default.useEffect(() => {
-    if (option && shouldRegister) {
-      dispatch({
-        type: 'ADD_OPTION',
-        payload: {
-          id: registerId,
-          option
-        }
-      });
-    }
-
-    // Unregister ids if/when the component unmounts or if option changes
-    return () => {
-      if (option) {
-        dispatch({
-          type: 'REMOVE_OPTION',
-          payload: {
-            id: registerId
-          }
-        });
-      }
-    };
-  }, [dispatch, option, registerId, shouldRegister]);
-};
-
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 const COMBOBOX_OPTION_CLASSNAME = 'lumx-combobox-option';
 const LUMX_CLASSNAME = 'lumx-list-item';