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

package/_internal/{BcRzrT9Y.js → BCgo9dYV.js}

@@ -1,9 +1,10 @@
-import React__default, { useContext, useEffect, useMemo, useRef, createContext } from 'react';
+import React__default, { useContext, useMemo, createContext, useEffect, useRef } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import isEmpty from 'lodash/isEmpty';
 import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
 import { createPortal } from 'react-dom';
 import noop from 'lodash/noop';
+import uniqueId from 'lodash/uniqueId';
 import findLast from 'lodash/findLast';
 import find from 'lodash/find';
 import findLastIndex from 'lodash/findLastIndex';
@@ -34,6 +35,40 @@ function useDisabledStateContext() {
   return useContext(DisabledStateContext);
 }
 
+/** 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;
+};
+
 const EVENT_TYPES = ['mousedown', 'touchstart'];
 function isClickAway(targets, refs) {
   // The targets elements are not contained in any of the listed element references.
@@ -1234,7 +1269,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 +1281,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({
@@ -1262,7 +1297,7 @@ const MovingFocusProvider = ({
   children,
   options
 }) => {
-  const [state, dispatch] = React__default.useReducer(reducer, INITIAL_STATE, st => ({
+  const [state, dispatch] = React__default.useReducer(reducer$1, INITIAL_STATE, st => ({
     ...st,
     ...options,
     direction: options?.direction || st.direction,
@@ -1476,5 +1511,295 @@ const useVirtualFocusParent = ref => {
   return focused;
 };
 
-export { A11YLiveMessage as A, ClickAwayProvider as C, DisabledStateProvider as D, MovingFocusContext as M, NAV_KEYS as N, Portal as P, useVirtualFocusParent as a, useVirtualFocus as b, MovingFocusProvider as c, PortalProvider as d, getPointerTypeFromEvent as g, useDisabledStateContext as u };
-//# sourceMappingURL=BcRzrT9Y.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: ''
+});
+
+/** 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]);
+};
+
+export { A11YLiveMessage as A, ComboboxContext as C, DisabledStateProvider as D, MovingFocusContext as M, NAV_KEYS as N, Portal as P, SectionContext as S, useVirtualFocusParent as a, useComboboxRefs as b, useCombobox as c, useVirtualFocus as d, MovingFocusProvider as e, initialState as f, generateOptionId as g, ComboboxRefsProvider as h, isComboboxValue as i, ClickAwayProvider as j, getPointerTypeFromEvent as k, PortalProvider as l, reducer as r, useDisabledStateContext as u };
+//# sourceMappingURL=BCgo9dYV.js.map