@lumx/react 4.3.2-alpha.13 → 4.3.2-alpha.14

package/_internal/BCgo9dYV.js

@@ -0,0 +1,1805 @@
+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';
+import isNil from 'lodash/isNil';
+import groupBy from 'lodash/groupBy';
+
+const DisabledStateContext = /*#__PURE__*/React__default.createContext({
+  state: null
+});
+/**
+ * Disabled state provider.
+ * All nested LumX Design System components inherit this disabled state.
+ */
+function DisabledStateProvider({
+  children,
+  ...value
+}) {
+  return /*#__PURE__*/jsx(DisabledStateContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+
+/**
+ * Get DisabledState context value
+ */
+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.
+  return !refs.some(ref => targets.some(target => ref?.current?.contains(target)));
+}
+/**
+ * Listen to clicks away from the given elements and callback the passed in function.
+ *
+ * Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
+ */
+function useClickAway({
+  callback,
+  childrenRefs
+}) {
+  useEffect(() => {
+    const {
+      current: currentRefs
+    } = childrenRefs;
+    if (!callback || !currentRefs || isEmpty(currentRefs)) {
+      return undefined;
+    }
+    const listener = evt => {
+      const targets = [evt.composedPath?.()[0], evt.target];
+      if (isClickAway(targets, currentRefs)) {
+        callback(evt);
+      }
+    };
+    EVENT_TYPES.forEach(evtType => document.addEventListener(evtType, listener));
+    return () => {
+      EVENT_TYPES.forEach(evtType => document.removeEventListener(evtType, listener));
+    };
+  }, [callback, childrenRefs]);
+}
+
+const ClickAwayAncestorContext = /*#__PURE__*/createContext(null);
+/**
+ * Component combining the `useClickAway` hook with a React context to hook into the React component tree and make sure
+ * we take into account both the DOM tree and the React tree to detect click away.
+ *
+ * @return the react component.
+ */
+const ClickAwayProvider = ({
+  children,
+  callback,
+  childrenRefs,
+  parentRef
+}) => {
+  const parentContext = useContext(ClickAwayAncestorContext);
+  const currentContext = useMemo(() => {
+    const context = {
+      childrenRefs: [],
+      /**
+       * Add element refs to the current context and propagate to the parent context.
+       */
+      addRefs(...newChildrenRefs) {
+        // Add element refs that should be considered as inside the click away context.
+        context.childrenRefs.push(...newChildrenRefs);
+        if (parentContext) {
+          // Also add then to the parent context
+          parentContext.addRefs(...newChildrenRefs);
+          if (parentRef) {
+            // The parent element is also considered as inside the parent click away context but not inside the current context
+            parentContext.addRefs(parentRef);
+          }
+        }
+      }
+    };
+    return context;
+  }, [parentContext, parentRef]);
+  useEffect(() => {
+    const {
+      current: currentRefs
+    } = childrenRefs;
+    if (!currentRefs) {
+      return;
+    }
+    currentContext.addRefs(...currentRefs);
+  }, [currentContext, childrenRefs]);
+  useClickAway({
+    callback,
+    childrenRefs: useRef(currentContext.childrenRefs)
+  });
+  return /*#__PURE__*/jsx(ClickAwayAncestorContext.Provider, {
+    value: currentContext,
+    children: children
+  });
+};
+ClickAwayProvider.displayName = 'ClickAwayProvider';
+
+/**
+ * Live region to read a message to screen readers.
+ * Messages can be "polite" and be read when possible or
+ * "assertive" and interrupt any message currently be read. (To be used sparingly)
+ *
+ * More information here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+ *
+ * @family A11Y
+ * @param A11YLiveMessageProps
+ * @returns A11YLiveMessage
+ */
+const A11YLiveMessage = ({
+  type = 'polite',
+  atomic,
+  role,
+  hidden,
+  relevant,
+  children,
+  className,
+  ...forwardedProps
+}) => {
+  return /*#__PURE__*/jsx("div", {
+    ...forwardedProps,
+    className: join(hidden ? visuallyHidden() : undefined, className),
+    role: role,
+    "aria-live": type,
+    "aria-atomic": atomic,
+    "aria-relevant": relevant,
+    children: children
+  });
+};
+
+/**
+ * Portal initializing function.
+ * If it does not provide a container, the Portal children will render in classic React tree and not in a portal.
+ */
+
+const PortalContext = /*#__PURE__*/React__default.createContext(() => ({
+  container: document.body
+}));
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+const PortalProvider = PortalContext.Provider;
+
+/**
+ * Render children in a portal outside the current DOM position
+ * (defaults to `document.body` but can be customized with the PortalContextProvider)
+ */
+const Portal = ({
+  children,
+  enabled = true
+}) => {
+  const init = React__default.useContext(PortalContext);
+  const context = React__default.useMemo(() => {
+    return enabled ? init() : null;
+  },
+  // Only update on 'enabled'
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [enabled]);
+  React__default.useLayoutEffect(() => {
+    return context?.teardown;
+  }, [context?.teardown, enabled]);
+  if (!context?.container) {
+    return /*#__PURE__*/jsx(Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/createPortal(children, context.container);
+};
+
+/**
+ * Create a map from the given tab stop to sort them by rowKey;
+ */
+function createGridMap(tabStops) {
+  /** Group all tabStop by rows to easily access them by their row keys */
+  const tabStopsByRowKey = groupBy(tabStops, 'rowKey');
+  /**
+   * An array with each row key in the order set in the tabStops array.
+   * Each rowKey will only appear once.
+   */
+  const rowKeys = tabStops.reduce((acc, {
+    rowKey
+  }) => {
+    if (!isNil(rowKey) && !acc.includes(rowKey)) {
+      return [...acc, rowKey];
+    }
+    return acc;
+  }, []);
+  return {
+    tabStopsByRowKey,
+    rowKeys
+  };
+}
+
+/** Check if the given tab stop is enabled */
+const tabStopIsEnabled = tabStop => !tabStop.disabled;
+
+const LOOP_AROUND_TYPES = {
+  /**
+   * Will continue navigation to the next row or column and loop back to the start
+   * when the last tab stop is reached
+   */
+  nextLoop: 'next-loop',
+  /**
+   * Will continue navigation to the next row or column until
+   * the last tab stop is reached
+   */
+  nextEnd: 'next-end',
+  /**
+   * Will loop within the current row or column
+   */
+  inside: 'inside'
+};
+const CELL_SEARCH_DIRECTION = {
+  /** Look ahead of the given position */
+  asc: 'asc',
+  /** Look before the given position */
+  desc: 'desc'
+};
+
+/**
+ * Build a loopAround configuration to ensure both row and col behavior are set.
+ *
+ * Setting a boolean will set the following behaviors:
+ *
+ * * true => { row: 'next-loop', col: 'next-loop' }
+ * * false => { row: 'next-end', col: 'next-end' }
+ */
+function buildLoopAroundObject(loopAround) {
+  if (typeof loopAround === 'boolean' || loopAround === undefined) {
+    const newLoopAround = loopAround ? {
+      row: LOOP_AROUND_TYPES.nextLoop,
+      col: LOOP_AROUND_TYPES.nextLoop
+    } : {
+      row: LOOP_AROUND_TYPES.nextEnd,
+      col: LOOP_AROUND_TYPES.nextEnd
+    };
+    return newLoopAround;
+  }
+  return loopAround;
+}
+
+/**
+ * Check that the given coordinate is a simple number
+ */
+const isNumberCoords = coords => typeof coords === 'number';
+
+/**
+ * Check that the given coordinate is a direction
+ */
+function isDirectionCoords(coords) {
+  return Boolean(typeof coords !== 'number' && typeof coords?.from === 'number');
+}
+
+/**
+ * Search the given column of a grid map for a cell.
+ */
+function findCellInCol(gridMap, col, rowCoords, cellSelector = tabStopIsEnabled) {
+  /** The rowIndex might not be strictly successive, so we need to use the actual row index keys. */
+  const {
+    rowKeys,
+    tabStopsByRowKey
+  } = gridMap;
+  const lastIndex = rowKeys.length - 1;
+  /**
+   * If the rowCoords.from is set at -1, it means we should search from the start/end.
+   */
+  let searchIndex = rowCoords.from;
+  if (searchIndex === -1) {
+    searchIndex = rowCoords.direction === CELL_SEARCH_DIRECTION.desc ? lastIndex : 0;
+  }
+  const searchCellFunc = rowCoords.direction === CELL_SEARCH_DIRECTION.desc ? findLast : find;
+  const rowKeyWithEnabledCell = searchCellFunc(rowKeys, (rowKey, index) => {
+    const row = tabStopsByRowKey[rowKey];
+    const cell = row[col];
+    const hasCell = Boolean(cell);
+    const cellRowIndex = index;
+
+    /** Check that the target row index is in the right direction of the search  */
+    const correctRowIndex = rowCoords.direction === CELL_SEARCH_DIRECTION.desc ? cellRowIndex <= searchIndex : cellRowIndex >= searchIndex;
+    if (cell && correctRowIndex) {
+      return cellSelector ? hasCell && cellSelector(cell) : hasCell;
+    }
+    return false;
+  });
+  const row = rowKeyWithEnabledCell !== undefined ? tabStopsByRowKey[rowKeyWithEnabledCell] : undefined;
+  return row?.[col];
+}
+
+/**
+ * Search the given column of a grid map for a cell.
+ */
+function findCellInRow(gridMap, row, colCoords, cellSelector = tabStopIsEnabled) {
+  const {
+    direction,
+    from
+  } = colCoords || {};
+  const {
+    rowKeys,
+    tabStopsByRowKey
+  } = gridMap;
+  const rowKey = rowKeys[row];
+  const currentRow = tabStopsByRowKey[rowKey];
+  if (!currentRow) {
+    return undefined;
+  }
+  const searchCellFunc = direction === CELL_SEARCH_DIRECTION.desc ? findLast : find;
+  const cell = searchCellFunc(currentRow, cellSelector, from);
+  return cell;
+}
+
+/**
+ * Parse each column of the given gridMap to find the first cell matching the selector.
+ * The direction and starting point of the search can be set using the coordinates attribute.
+ */
+function parseColsForCell(/** The gridMap to search */
+gridMap, /** The coordinate to search */
+{
+  direction = CELL_SEARCH_DIRECTION.asc,
+  from
+}, cellSelector = tabStopIsEnabled) {
+  if (from === undefined) {
+    return undefined;
+  }
+  const {
+    rowKeys,
+    tabStopsByRowKey
+  } = gridMap;
+
+  /** As we cannot know for certain when to stop, we need to know which column is the last column */
+  const maxColIndex = rowKeys.reduce((maxLength, rowIndex) => {
+    const rowLength = tabStopsByRowKey[rowIndex].length;
+    return rowLength > maxLength ? rowLength - 1 : maxLength;
+  }, 0);
+
+  /** If "from" is set as -1, start from the end. */
+  const fromIndex = from === -1 ? maxColIndex : from || 0;
+  for (let index = fromIndex; direction === CELL_SEARCH_DIRECTION.desc ? index > -1 : index <= maxColIndex; direction === CELL_SEARCH_DIRECTION.desc ? index -= 1 : index += 1) {
+    const rowWithEnabledCed = findCellInCol(gridMap, index, {
+      direction,
+      from: direction === CELL_SEARCH_DIRECTION.desc ? -1 : 0
+    }, cellSelector);
+    if (rowWithEnabledCed) {
+      return rowWithEnabledCed;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * Search for a cell in a gridMap
+ *
+ * This allows you to
+ * * Select a cell at a specific coordinate
+ * * Search for a cell from a specific column in any direction
+ * * Search for a cell from a specific row in any direction
+ *
+ * If no cell is found, returns undefined
+ */
+function getCell(/** The gridMap object to search in. */
+gridMap, /** The coordinates of the cell to select */
+coords,
+/**
+ * A selector function to select the cell.
+ * Selects enabled cells by default.
+ */
+cellSelector = tabStopIsEnabled) {
+  const {
+    row,
+    col
+  } = coords || {};
+  const {
+    rowKeys,
+    tabStopsByRowKey
+  } = gridMap || {};
+
+  /** Defined row and col */
+  if (isNumberCoords(row) && isNumberCoords(col)) {
+    const rowKey = rowKeys[row];
+    return tabStopsByRowKey[rowKey][col];
+  }
+
+  /** Defined row but variable col */
+  if (isDirectionCoords(col) && isNumberCoords(row)) {
+    return findCellInRow(gridMap, row, col, cellSelector);
+  }
+  if (isDirectionCoords(row)) {
+    if (isDirectionCoords(col)) {
+      return parseColsForCell(gridMap, col, cellSelector);
+    }
+    return findCellInCol(gridMap, col, row, cellSelector);
+  }
+  return undefined;
+}
+
+function getCellCoordinates(gridMap, tabStop) {
+  const currentRowKey = tabStop.rowKey;
+  if (isNil(currentRowKey)) {
+    return undefined;
+  }
+  const {
+    rowKeys,
+    tabStopsByRowKey
+  } = gridMap;
+  const rowIndex = rowKeys.findIndex(rowKey => rowKey === currentRowKey);
+  const row = tabStopsByRowKey[currentRowKey];
+  const columnOffset = row.findIndex(ts => ts.id === tabStop.id);
+  return {
+    rowIndex,
+    row,
+    columnOffset
+  };
+}
+
+/** Check whether the list should vertically loop with the given configuration  */
+function shouldLoopListVertically(direction, loopAround) {
+  return direction === 'vertical' && loopAround?.col !== 'next-end' || direction === 'both' && loopAround?.col !== 'next-end';
+}
+
+/** Check whether the list should horizontally loop with the given configuration  */
+function shouldLoopListHorizontally(direction, loopAround) {
+  return direction === 'horizontal' && loopAround?.row !== 'next-end' || direction === 'both' && loopAround?.row !== 'next-end';
+}
+
+/**
+ * Get the correct pointer type from the given event.
+ * This is used when a tab stop is selected, to check if is has been selected using a keyboard or a pointer
+ * (pen / mouse / touch)
+ */
+function getPointerTypeFromEvent(event) {
+  return event && 'pointerType' in event && Boolean(event.pointerType) ? 'pointer' : 'keyboard';
+}
+
+// Event keys used for keyboard navigation.
+const VERTICAL_NAV_KEYS = ['ArrowUp', 'ArrowDown', 'Home', 'End'];
+const HORIZONTAL_NAV_KEYS = ['ArrowLeft', 'ArrowRight', 'Home', 'End'];
+const KEY_NAV_KEYS = [...HORIZONTAL_NAV_KEYS, ...VERTICAL_NAV_KEYS];
+const NAV_KEYS = {
+  both: KEY_NAV_KEYS,
+  vertical: VERTICAL_NAV_KEYS,
+  horizontal: HORIZONTAL_NAV_KEYS
+};
+
+// Event keys union type
+
+// Handle all navigation moves resulting in a new state.
+const MOVES = {
+  // Move to the next item.
+  // The grid is flatten so the item after the last of a row will be the
+  // first item of the next row.
+  NEXT(state, _, index) {
+    for (let i = index + 1; i < state.tabStops.length; ++i) {
+      const tabStop = state.tabStops[i];
+      if (!tabStop.disabled) {
+        return {
+          ...state,
+          allowFocusing: true,
+          selectedId: tabStop.id
+        };
+      }
+    }
+    return state;
+  },
+  // Move to the previous item.
+  // The grid is flatten so the item before the first of a row will be the
+  // last item of the previous row.
+  PREVIOUS(state, _, index) {
+    for (let i = index - 1; i >= 0; --i) {
+      const tabStop = state.tabStops[i];
+      if (!tabStop.disabled) {
+        return {
+          ...state,
+          allowFocusing: true,
+          selectedId: tabStop.id
+        };
+      }
+    }
+    return state;
+  },
+  // Moving to the next row
+  // We move to the next row, and we stay in the same column.
+  // If we are in the last row, then we move to the first not disabled item of the next column.
+  NEXT_ROW(state, currentTabStop) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      rowIndex,
+      columnOffset
+    } = cellCoordinates;
+    const nextRow = rowIndex + 1;
+
+    /** First try to get the next cell in the current column */
+    let tabStop = getCell(gridMap, {
+      row: {
+        from: nextRow,
+        direction: 'asc'
+      },
+      col: columnOffset
+    });
+
+    // If none were found, search for the next cell depending on the loop around parameter
+    if (!tabStop) {
+      switch (state.loopAround.col) {
+        /**
+         * If columns are configured to be looped inside,
+         * get the first enabled cell of the current column
+         */
+        case LOOP_AROUND_TYPES.inside:
+          tabStop = getCell(gridMap, {
+            col: columnOffset,
+            row: {
+              from: 0,
+              direction: 'asc'
+            }
+          });
+          break;
+        /**
+         * If columns are configured to be go to the next,
+         * search for the next enabled cell from the next column
+         */
+        case LOOP_AROUND_TYPES.nextEnd:
+        case LOOP_AROUND_TYPES.nextLoop:
+        default:
+          tabStop = getCell(gridMap, {
+            row: {
+              from: 0,
+              direction: 'asc'
+            },
+            col: {
+              from: columnOffset + 1,
+              direction: 'asc'
+            }
+          });
+          break;
+      }
+    }
+
+    /**
+     * If still none is found and the columns are configured to loop
+     * search starting from the start
+     */
+    if (!tabStop && state.loopAround.col === LOOP_AROUND_TYPES.nextLoop) {
+      tabStop = getCell(gridMap, {
+        row: {
+          from: 0,
+          direction: 'asc'
+        },
+        col: {
+          from: 0,
+          direction: 'asc'
+        }
+      });
+    }
+    if (tabStop) {
+      return {
+        ...state,
+        allowFocusing: true,
+        selectedId: tabStop.id,
+        gridMap
+      };
+    }
+    return {
+      ...state,
+      allowFocusing: true,
+      gridMap
+    };
+  },
+  // Moving to the previous row
+  // We move to the previous row, and we stay in the same column.
+  // If we are in the first row, then we move to the last not disabled item of the previous column.
+  PREVIOUS_ROW(state, currentTabStop) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      rowIndex,
+      columnOffset
+    } = cellCoordinates;
+    const previousRow = rowIndex - 1;
+    let tabStop;
+    /** Search for the previous enabled cell in the current column */
+    if (previousRow >= 0) {
+      tabStop = getCell(gridMap, {
+        row: {
+          from: previousRow,
+          direction: 'desc'
+        },
+        col: columnOffset
+      });
+    }
+
+    // If none were found, search for the previous cell depending on the loop around parameter
+    if (!tabStop) {
+      switch (state.loopAround.col) {
+        /**
+         * If columns are configured to be looped inside,
+         * get the last enabled cell of the current column
+         */
+        case LOOP_AROUND_TYPES.inside:
+          tabStop = getCell(gridMap, {
+            col: columnOffset,
+            row: {
+              from: -1,
+              direction: 'desc'
+            }
+          });
+          break;
+        /**
+         * If columns are configured to be go to the previous,
+         * search for the last enabled cell from the previous column
+         */
+        case LOOP_AROUND_TYPES.nextEnd:
+        case LOOP_AROUND_TYPES.nextLoop:
+        default:
+          if (columnOffset - 1 >= 0) {
+            tabStop = getCell(gridMap, {
+              row: {
+                from: -1,
+                direction: 'desc'
+              },
+              col: {
+                from: columnOffset - 1,
+                direction: 'desc'
+              }
+            });
+            break;
+          }
+      }
+    }
+    /**
+     * If still none is found and the columns are configured to loop
+     * search starting from the end
+     */
+    if (!tabStop && state.loopAround.col === LOOP_AROUND_TYPES.nextLoop) {
+      tabStop = getCell(gridMap, {
+        row: {
+          from: -1,
+          direction: 'desc'
+        },
+        col: {
+          from: -1,
+          direction: 'desc'
+        }
+      });
+    }
+    if (tabStop) {
+      return {
+        ...state,
+        allowFocusing: true,
+        selectedId: tabStop.id,
+        gridMap
+      };
+    }
+    return {
+      ...state,
+      allowFocusing: true,
+      gridMap
+    };
+  },
+  // Moving to the very first not disabled item of the list
+  VERY_FIRST(state) {
+    // The very first not disabled item' index.
+    const tabStop = state.tabStops.find(tabStopIsEnabled);
+    if (tabStop) {
+      return {
+        ...state,
+        allowFocusing: true,
+        selectedId: tabStop.id
+      };
+    }
+    return state;
+  },
+  // Moving to the very last not disabled item of the list
+  VERY_LAST(state) {
+    // The very last not disabled item' index.
+    const tabStop = findLast(state.tabStops, tabStopIsEnabled);
+    if (tabStop) {
+      return {
+        ...state,
+        allowFocusing: true,
+        selectedId: tabStop.id
+      };
+    }
+    return state;
+  },
+  NEXT_COLUMN(state, currentTabStop, index) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      rowIndex,
+      columnOffset
+    } = cellCoordinates;
+    // Parse the current row and look for the next enabled cell
+    let tabStop = getCell(gridMap, {
+      row: rowIndex,
+      col: {
+        from: columnOffset + 1,
+        direction: 'asc'
+      }
+    });
+
+    // If none were found, search for the next cell depending on the loop around parameter
+    if (!tabStop) {
+      switch (state.loopAround.row) {
+        /**
+         * If rows are configured to be looped inside,
+         * get the first enabled cell of the current rows
+         */
+        case LOOP_AROUND_TYPES.inside:
+          tabStop = getCell(gridMap, {
+            row: rowIndex,
+            col: {
+              from: 0,
+              direction: 'asc'
+            }
+          });
+          break;
+        /**
+         * If rows are configured to be go to the next,
+         * search for the next enabled cell from the next row
+         */
+        case LOOP_AROUND_TYPES.nextEnd:
+        case LOOP_AROUND_TYPES.nextLoop:
+        default:
+          tabStop = find(state.tabStops, tabStopIsEnabled, index + 1);
+          break;
+      }
+    }
+    /**
+     * If still none is found and the row are configured to loop
+     * search starting from the start
+     */
+    if (!tabStop && state.loopAround.row === LOOP_AROUND_TYPES.nextLoop) {
+      tabStop = find(state.tabStops, tabStopIsEnabled);
+    }
+    return {
+      ...state,
+      allowFocusing: true,
+      selectedId: tabStop?.id || state.selectedId,
+      gridMap
+    };
+  },
+  PREVIOUS_COLUMN(state, currentTabStop, index) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      rowIndex,
+      columnOffset
+    } = cellCoordinates;
+    const previousColumn = columnOffset - 1;
+    let tabStop;
+    if (previousColumn >= 0) {
+      // Parse the current row and look for the next enable cell
+      tabStop = getCell(gridMap, {
+        row: rowIndex,
+        col: {
+          from: previousColumn,
+          direction: 'desc'
+        }
+      });
+    }
+    if (!tabStop) {
+      switch (state.loopAround.row) {
+        /**
+         * If rows are configured to be looped inside,
+         * get the last enabled cell of the current row
+         */
+        case LOOP_AROUND_TYPES.inside:
+          tabStop = getCell(gridMap, {
+            row: rowIndex,
+            col: {
+              from: -1,
+              direction: 'desc'
+            }
+          });
+          break;
+        /**
+         * If rows are configured to be go to the next,
+         * search for the previous enabled cell from the previous row
+         */
+        case LOOP_AROUND_TYPES.nextEnd:
+        case LOOP_AROUND_TYPES.nextLoop:
+        default:
+          if (index - 1 >= 0) {
+            tabStop = findLast(state.tabStops, tabStopIsEnabled, index - 1);
+          }
+          break;
+      }
+    }
+    /**
+     * If still none is found and the rows are configured to loop
+     * search starting from the end
+     */
+    if (!tabStop && state.loopAround.row === LOOP_AROUND_TYPES.nextLoop) {
+      tabStop = findLast(state.tabStops, tabStopIsEnabled);
+    }
+    return {
+      ...state,
+      allowFocusing: true,
+      selectedId: tabStop?.id || state.selectedId,
+      gridMap
+    };
+  },
+  FIRST_IN_COLUMN(state, currentTabStop) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      columnOffset
+    } = cellCoordinates;
+    const tabStop = getCell(gridMap, {
+      col: columnOffset,
+      row: {
+        from: 0,
+        direction: 'asc'
+      }
+    });
+    return {
+      ...state,
+      allowFocusing: true,
+      selectedId: tabStop?.id || state.selectedId,
+      gridMap
+    };
+  },
+  LAST_IN_COLUMN(state, currentTabStop) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      columnOffset
+    } = cellCoordinates;
+    const tabStop = getCell(gridMap, {
+      col: columnOffset,
+      row: {
+        from: -1,
+        direction: 'desc'
+      }
+    });
+    return {
+      ...state,
+      allowFocusing: true,
+      selectedId: tabStop?.id || state.selectedId,
+      gridMap
+    };
+  },
+  // Moving to the first item in row
+  FIRST_IN_ROW(state, currentTabStop) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      rowIndex
+    } = cellCoordinates;
+    const tabStop = getCell(gridMap, {
+      row: rowIndex,
+      col: {
+        from: 0,
+        direction: 'asc'
+      }
+    });
+    return {
+      ...state,
+      allowFocusing: true,
+      selectedId: tabStop?.id || state.selectedId,
+      gridMap
+    };
+  },
+  // Moving to the last item in row
+  LAST_IN_ROW(state, currentTabStop) {
+    const currentRowKey = currentTabStop.rowKey;
+    if (isNil(currentRowKey)) {
+      return state;
+    }
+    const gridMap = state.gridMap || createGridMap(state.tabStops);
+    const cellCoordinates = getCellCoordinates(gridMap, currentTabStop);
+    if (!cellCoordinates) {
+      return state;
+    }
+    const {
+      rowIndex
+    } = cellCoordinates;
+    const tabStop = getCell(gridMap, {
+      row: rowIndex,
+      col: {
+        from: -1,
+        direction: 'desc'
+      }
+    });
+    return {
+      ...state,
+      allowFocusing: true,
+      selectedId: tabStop?.id || state.selectedId,
+      gridMap
+    };
+  }
+};
+
+/** Handle `KEY_NAV` action to update */
+const KEY_NAV = (state, action) => {
+  const {
+    id = state.selectedId || state.tabStops[0]?.id,
+    key,
+    ctrlKey
+  } = action.payload;
+  const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+  if (index === -1) {
+    // tab stop not registered
+    return state;
+  }
+  const currentTabStop = state.tabStops[index];
+  if (currentTabStop.disabled) {
+    return state;
+  }
+  const isGrid = currentTabStop.rowKey !== null;
+  const isFirst = index === state.tabStops.findIndex(tabStopIsEnabled);
+  const isLast = index === findLastIndex(state.tabStops, tabStopIsEnabled);
+  // Translates the user key down event info into a navigation instruction.
+  let navigation = null;
+  // eslint-disable-next-line default-case
+  switch (key) {
+    case 'ArrowLeft':
+      if (isGrid) {
+        navigation = 'PREVIOUS_COLUMN';
+      } else if (state.direction === 'horizontal' || state.direction === 'both') {
+        navigation = shouldLoopListHorizontally(state.direction, state.loopAround) && isFirst ? 'VERY_LAST' : 'PREVIOUS';
+      }
+      break;
+    case 'ArrowRight':
+      if (isGrid) {
+        navigation = 'NEXT_COLUMN';
+      } else if (state.direction === 'horizontal' || state.direction === 'both') {
+        navigation = shouldLoopListHorizontally(state.direction, state.loopAround) && isLast ? 'VERY_FIRST' : 'NEXT';
+      }
+      break;
+    case 'ArrowUp':
+      if (isGrid) {
+        navigation = 'PREVIOUS_ROW';
+      } else if (state.direction === 'vertical' || state.direction === 'both') {
+        navigation = shouldLoopListVertically(state.direction, state.loopAround) && isFirst ? 'VERY_LAST' : 'PREVIOUS';
+      }
+      break;
+    case 'ArrowDown':
+      if (isGrid) {
+        navigation = 'NEXT_ROW';
+      } else if (state.direction === 'vertical' || state.direction === 'both') {
+        navigation = shouldLoopListVertically(state.direction, state.loopAround) && isLast ? 'VERY_FIRST' : 'NEXT';
+      }
+      break;
+    case 'Home':
+      if (isGrid && !ctrlKey) {
+        navigation = state.gridJumpToShortcutDirection === 'vertical' ? 'FIRST_IN_COLUMN' : 'FIRST_IN_ROW';
+      } else {
+        navigation = 'VERY_FIRST';
+      }
+      break;
+    case 'End':
+      if (isGrid && !ctrlKey) {
+        navigation = state.gridJumpToShortcutDirection === 'vertical' ? 'LAST_IN_COLUMN' : 'LAST_IN_ROW';
+      } else {
+        navigation = 'VERY_LAST';
+      }
+      break;
+  }
+  if (!navigation) {
+    return state;
+  }
+  const newState = MOVES[navigation](state, currentTabStop, index);
+  return {
+    ...newState,
+    isUsingKeyboard: true
+  };
+};
+
+/** Determine the updated value for selectedId: */
+const getUpdatedSelectedId = (tabStops, currentSelectedId, defaultSelectedId = null) => {
+  // Get tab stop by id
+  const tabStop = currentSelectedId && tabStops.find(ts => ts.id === currentSelectedId && !ts.disabled);
+  if (!tabStop) {
+    // Fallback to default selected id if available, or first enabled tab stop if not
+    return tabStops.find(ts => ts.id === defaultSelectedId)?.id || tabStops.find(tabStopIsEnabled)?.id || null;
+  }
+  return tabStop?.id || defaultSelectedId;
+};
+
+/** Handle `REGISTER_TAB_STOP` action registering a new tab stop. */
+const REGISTER_TAB_STOP = (state, action) => {
+  const newTabStop = action.payload;
+  const newTabStopElement = newTabStop.domElementRef.current;
+  if (!newTabStopElement) {
+    return state;
+  }
+
+  // Find index of tab stop that
+  const indexToInsertAt = findLastIndex(state.tabStops, tabStop => {
+    if (tabStop.id === newTabStop.id) {
+      // tab stop already registered
+      return false;
+    }
+    const domTabStop = tabStop.domElementRef.current;
+
+    // New tab stop is following the current tab stop
+    return domTabStop?.compareDocumentPosition(newTabStopElement) === Node.DOCUMENT_POSITION_FOLLOWING;
+  });
+  const insertIndex = indexToInsertAt + 1;
+
+  // Insert new tab stop at position `indexToInsertAt`.
+  const newTabStops = [...state.tabStops];
+  newTabStops.splice(insertIndex, 0, newTabStop);
+
+  // Handle autofocus if needed
+  let {
+    selectedId,
+    allowFocusing
+  } = state;
+  if (state.autofocus === 'first' && insertIndex === 0 || state.autofocus === 'last' && insertIndex === newTabStops.length - 1 || newTabStop.autofocus) {
+    allowFocusing = true;
+    selectedId = newTabStop.id;
+  }
+  const newSelectedId = newTabStop.id === state.defaultSelectedId && !newTabStop.disabled ? newTabStop.id : getUpdatedSelectedId(newTabStops, selectedId, state.defaultSelectedId);
+  return {
+    ...state,
+    /**
+     * If the tab currently being registered is enabled and set as default selected,
+     * set as selected.
+     *
+     */
+    selectedId: newSelectedId,
+    tabStops: newTabStops,
+    gridMap: null,
+    allowFocusing
+  };
+};
+
+/** Handle `UNREGISTER_TAB_STOP` action un-registering a new tab stop. */
+const UNREGISTER_TAB_STOP = (state, action) => {
+  const {
+    id
+  } = action.payload;
+  const newTabStops = state.tabStops.filter(tabStop => tabStop.id !== id);
+  if (newTabStops.length === state.tabStops.length) {
+    // tab stop already unregistered
+    return state;
+  }
+
+  /** Get the previous enabled tab stop */
+  const previousTabStopIndex = state.tabStops.findIndex(tabStop => tabStop.id === state.selectedId && tabStopIsEnabled(tabStop));
+  const newLocal = previousTabStopIndex - 1 > -1;
+  const previousTabStop = newLocal ? findLast(newTabStops, tabStopIsEnabled, previousTabStopIndex - 1) : undefined;
+  return {
+    ...state,
+    /** Set the focus on either the previous tab stop if found or the one set as default */
+    selectedId: getUpdatedSelectedId(newTabStops, state.selectedId, previousTabStop?.id || state.defaultSelectedId),
+    tabStops: newTabStops,
+    gridMap: null
+  };
+};
+
+/** Handle `UPDATE_TAB_STOP` action updating properties of a tab stop. */
+const UPDATE_TAB_STOP = (state, action) => {
+  const {
+    id,
+    rowKey,
+    disabled
+  } = action.payload;
+  const index = state.tabStops.findIndex(tabStop => tabStop.id === id);
+  if (index === -1) {
+    // tab stop not registered
+    return state;
+  }
+  const tabStop = state.tabStops[index];
+  if (tabStop.disabled === disabled && tabStop.rowKey === rowKey) {
+    // Nothing to do so short-circuit.
+    return state;
+  }
+  const newTabStop = {
+    ...tabStop,
+    rowKey,
+    disabled
+  };
+  const newTabStops = [...state.tabStops];
+  newTabStops.splice(index, 1, newTabStop);
+  return {
+    ...state,
+    selectedId: getUpdatedSelectedId(newTabStops, state.selectedId, state.defaultSelectedId),
+    tabStops: newTabStops,
+    gridMap: null
+  };
+};
+
+/** Handle `SELECT_TAB_STOP` action selecting a tab stop. */
+const SELECT_TAB_STOP = (state, action) => {
+  const {
+    id,
+    type
+  } = action.payload;
+  const tabStop = state.tabStops.find(ts => ts.id === id);
+  if (!tabStop || tabStop.disabled) {
+    return state;
+  }
+  return {
+    ...state,
+    allowFocusing: true,
+    selectedId: tabStop.id,
+    isUsingKeyboard: type === 'keyboard'
+  };
+};
+const SET_ALLOW_FOCUSING = (state, action) => {
+  return {
+    ...state,
+    selectedId: getUpdatedSelectedId(state.tabStops, null, state.defaultSelectedId),
+    allowFocusing: action.payload.allow,
+    isUsingKeyboard: Boolean(action.payload.isKeyboardNavigation)
+  };
+};
+
+/** Handle `RESET_SELECTED_TAB_STOP` action reseting the selected tab stop. */
+const RESET_SELECTED_TAB_STOP = state => {
+  return {
+    ...state,
+    allowFocusing: false,
+    selectedId: getUpdatedSelectedId(state.tabStops, null, state.defaultSelectedId),
+    defaultSelectedId: getUpdatedSelectedId(state.tabStops, null, state.defaultSelectedId),
+    isUsingKeyboard: false
+  };
+};
+
+const INITIAL_STATE = {
+  selectedId: null,
+  allowFocusing: false,
+  tabStops: [],
+  direction: 'horizontal',
+  loopAround: buildLoopAroundObject(false),
+  gridMap: null,
+  defaultSelectedId: null,
+  autofocus: undefined,
+  isUsingKeyboard: false
+};
+const OPTIONS_UPDATED = (state, action) => {
+  const {
+    autofocus
+  } = action.payload;
+  let {
+    selectedId,
+    allowFocusing
+  } = state;
+
+  // Update selectedId when updating the `autofocus` option.
+  if (!state.autofocus && autofocus) {
+    if (autofocus === 'first') {
+      selectedId = state.tabStops.find(tabStopIsEnabled)?.id || null;
+    } else if (autofocus === 'last') {
+      selectedId = findLast(state.tabStops, tabStopIsEnabled)?.id || null;
+    }
+    allowFocusing = true;
+  }
+  return {
+    ...state,
+    ...action.payload,
+    selectedId,
+    allowFocusing: action.payload.allowFocusing || allowFocusing,
+    loopAround: buildLoopAroundObject(action.payload.loopAround)
+  };
+};
+
+/** Reducers for each action type: */
+const REDUCERS$1 = {
+  REGISTER_TAB_STOP,
+  UNREGISTER_TAB_STOP,
+  UPDATE_TAB_STOP,
+  SELECT_TAB_STOP,
+  OPTIONS_UPDATED,
+  KEY_NAV,
+  SET_ALLOW_FOCUSING,
+  RESET_SELECTED_TAB_STOP
+};
+
+/** Main reducer */
+const reducer$1 = (state, action) => {
+  return REDUCERS$1[action.type]?.(state, action) || state;
+};
+
+const MovingFocusContext = /*#__PURE__*/React__default.createContext({
+  state: INITIAL_STATE,
+  dispatch: noop
+});
+
+/**
+ * Creates a roving tabindex context.
+ */
+const MovingFocusProvider = ({
+  children,
+  options
+}) => {
+  const [state, dispatch] = React__default.useReducer(reducer$1, INITIAL_STATE, st => ({
+    ...st,
+    ...options,
+    direction: options?.direction || st.direction,
+    loopAround: buildLoopAroundObject(options?.loopAround),
+    selectedId: options?.defaultSelectedId || INITIAL_STATE.selectedId
+  }));
+  const isMounted = React__default.useRef(false);
+
+  // Update the options whenever they change:
+  React__default.useEffect(() => {
+    // Skip update on mount (already up to date)
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    dispatch({
+      type: 'OPTIONS_UPDATED',
+      payload: {
+        direction: options?.direction || INITIAL_STATE.direction,
+        loopAround: buildLoopAroundObject(options?.loopAround || INITIAL_STATE.loopAround),
+        defaultSelectedId: options?.defaultSelectedId || INITIAL_STATE.defaultSelectedId,
+        autofocus: options?.autofocus || INITIAL_STATE.autofocus,
+        allowFocusing: options?.allowFocusing || INITIAL_STATE.allowFocusing,
+        listKey: options?.listKey || INITIAL_STATE.listKey,
+        firstFocusDirection: options?.firstFocusDirection || INITIAL_STATE.firstFocusDirection,
+        gridJumpToShortcutDirection: options?.gridJumpToShortcutDirection || INITIAL_STATE.gridJumpToShortcutDirection
+      }
+    });
+  }, [isMounted, options?.allowFocusing, options?.autofocus, options?.defaultSelectedId, options?.direction, options?.loopAround, options?.listKey, options?.firstFocusDirection, options?.gridJumpToShortcutDirection]);
+
+  // Create a cached object to use as the context value:
+  const context = React__default.useMemo(() => ({
+    state,
+    dispatch
+  }), [state]);
+  return /*#__PURE__*/jsx(MovingFocusContext.Provider, {
+    value: context,
+    children: children
+  });
+};
+
+/**
+ * Hook options
+ */
+
+/**
+ * Hook to use in tab stop element of a virtual focus (ex: options of a listbox in a combobox).
+ *
+ * @returns true if the current tab stop has virtual focus
+ */
+const useVirtualFocus = (id, domElementRef, disabled = false, rowKey = null, autofocus = false) => {
+  const isMounted = React__default.useRef(false);
+  const {
+    state,
+    dispatch
+  } = React__default.useContext(MovingFocusContext);
+
+  // Register the tab stop on mount and unregister it on unmount:
+  React__default.useEffect(() => {
+    const {
+      current: domElement
+    } = domElementRef;
+    if (!domElement) {
+      return undefined;
+    }
+    // Select tab stop on click
+    const onClick = event => {
+      dispatch({
+        type: 'SELECT_TAB_STOP',
+        payload: {
+          id,
+          type: getPointerTypeFromEvent(event)
+        }
+      });
+    };
+    domElement.addEventListener('click', onClick);
+
+    // Register tab stop in context
+    dispatch({
+      type: 'REGISTER_TAB_STOP',
+      payload: {
+        id,
+        domElementRef,
+        rowKey,
+        disabled,
+        autofocus
+      }
+    });
+    return () => {
+      domElement.removeEventListener('click', onClick);
+      dispatch({
+        type: 'UNREGISTER_TAB_STOP',
+        payload: {
+          id
+        }
+      });
+    };
+  },
+  /**
+   * Pass the list key as dependency to make tab stops
+   * re-register when it changes.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [state.listKey]);
+
+  /*
+   * Update the tab stop data if `rowKey` or `disabled` change.
+   * The isMounted flag is used to prevent this effect running on mount, which is benign but redundant (as the
+   * REGISTER_TAB_STOP action would have just been dispatched).
+   */
+  React__default.useEffect(() => {
+    if (isMounted.current) {
+      dispatch({
+        type: 'UPDATE_TAB_STOP',
+        payload: {
+          id,
+          rowKey,
+          disabled
+        }
+      });
+    } else {
+      isMounted.current = true;
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [disabled, rowKey]);
+  const isActive = id === state.selectedId;
+
+  // Scroll element into view when highlighted
+  useEffect(() => {
+    const {
+      current
+    } = domElementRef;
+    if (isActive && current && current.scrollIntoView) {
+      /**
+       * In some cases, the selected item is contained in a popover
+       * that won't be immediately set in the correct position.
+       * Setting a small timeout before scroll the item into view
+       * leaves it time to settle at the correct position.
+       */
+      const timeout = setTimeout(() => {
+        current.scrollIntoView({
+          block: 'nearest'
+        });
+      }, 10);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    return undefined;
+  }, [domElementRef, isActive]);
+  const focused = isActive && state.allowFocusing;
+
+  // Determine if the current tab stop is the currently active one:
+  return focused;
+};
+
+/**
+ * Hook to use in a virtual focus parent (ex: `aria-activedescendant` on the input of a combobox).
+ * * @returns the id of the currently active tab stop (virtual focus)
+ */
+const useVirtualFocusParent = ref => {
+  const {
+    state,
+    dispatch
+  } = React__default.useContext(MovingFocusContext);
+  React__default.useEffect(() => {
+    const {
+      current: element
+    } = ref;
+    if (!element) {
+      return undefined;
+    }
+    function handleKeyDown(evt) {
+      const eventKey = evt.key;
+      if (
+      // Don't move if the current direction doesn't allow key
+      !NAV_KEYS[state.direction].includes(eventKey) ||
+      // Don't move if alt key is pressed
+      evt.altKey ||
+      // Don't move the focus if it hasn't been set yet and `firstFocusDirection` doesn't allow key
+      !state.allowFocusing && state.firstFocusDirection && !NAV_KEYS[state.firstFocusDirection].includes(eventKey)) {
+        return;
+      }
+      // If focus isn't allowed yet, simply enable it to stay on first item
+      if (!state.allowFocusing && eventKey === 'ArrowDown') {
+        dispatch({
+          type: 'SET_ALLOW_FOCUSING',
+          payload: {
+            allow: true,
+            isKeyboardNavigation: true
+          }
+        });
+      } else {
+        dispatch({
+          type: 'KEY_NAV',
+          payload: {
+            key: eventKey,
+            ctrlKey: evt.ctrlKey
+          }
+        });
+      }
+      evt.preventDefault();
+    }
+    element.addEventListener('keydown', handleKeyDown);
+    return () => {
+      element.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [dispatch, ref, state.allowFocusing, state.direction, state.firstFocusDirection]);
+  const focused = state.allowFocusing && state.selectedId || undefined;
+  return focused;
+};
+
+/** 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