@lumx/react 4.3.2-alpha.22 → 4.3.2-alpha.24

package/_internal/{CzTdCnO5.js → BQFZG9jO.js}

@@ -4,6 +4,7 @@ import isEmpty from 'lodash/isEmpty.js';
 import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
 import { createPortal } from 'react-dom';
 import noop from 'lodash/noop.js';
+import uniqueId from 'lodash/uniqueId.js';
 import findLast from 'lodash/findLast.js';
 import find from 'lodash/find.js';
 import findLastIndex from 'lodash/findLastIndex.js';
@@ -1234,7 +1235,7 @@ const OPTIONS_UPDATED = (state, action) => {
 };
 
 /** Reducers for each action type: */
-const REDUCERS = {
+const REDUCERS$1 = {
   REGISTER_TAB_STOP,
   UNREGISTER_TAB_STOP,
   UPDATE_TAB_STOP,
@@ -1246,8 +1247,8 @@ const REDUCERS = {
 };
 
 /** Main reducer */
-const reducer = (state, action) => {
-  return REDUCERS[action.type]?.(state, action) || state;
+const reducer$1 = (state, action) => {
+  return REDUCERS$1[action.type]?.(state, action) || state;
 };
 
 const MovingFocusContext = /*#__PURE__*/React__default.createContext({
@@ -1371,5 +1372,397 @@ const useVirtualFocus = (id, domElementRef, disabled = false, rowKey = null, aut
   return focused;
 };
 
-export { A11YLiveMessage as A, ClickAwayProvider as C, DisabledStateProvider as D, INITIAL_STATE as I, MovingFocusContext as M, NAV_KEYS as N, Portal as P, useVirtualFocus as a, buildLoopAroundObject as b, PortalProvider as c, getPointerTypeFromEvent as g, reducer as r, useDisabledStateContext as u };
-//# sourceMappingURL=CzTdCnO5.js.map
+/** 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 = (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: ''
+});
+
+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;
+};
+
+/** 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;
+};
+
+/** 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]);
+};
+
+export { A11YLiveMessage as A, ComboboxOptionContextProvider as C, DisabledStateProvider as D, INITIAL_STATE as I, MovingFocusContext as M, NAV_KEYS as N, Portal as P, SectionContext as S, useComboboxSectionId as a, useCombobox as b, useRegisterOption as c, useVirtualFocus as d, useComboboxOptionContext as e, useComboboxRefs as f, generateOptionId as g, ClickAwayProvider as h, buildLoopAroundObject as i, getPointerTypeFromEvent as j, ComboboxContext as k, isComboboxValue as l, initialState as m, ComboboxOptionContext as n, reducer as o, ComboboxRefsProvider as p, PortalProvider as q, reducer$1 as r, useDisabledStateContext as u };
+//# sourceMappingURL=BQFZG9jO.js.map