@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/utils/index.js

@@ -1,1440 +1,12 @@
-import React__default, { useEffect } from 'react';
-import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
-import { jsx } from 'react/jsx-runtime';
-export { C as ClickAwayProvider, D as DisabledStateProvider, I as InfiniteScroll, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/BvaFEHZn.js';
-import noop from 'lodash/noop.js';
-import findLast from 'lodash/findLast.js';
-import find from 'lodash/find.js';
-import findLastIndex from 'lodash/findLastIndex.js';
-import isNil from 'lodash/isNil.js';
-import groupBy from 'lodash/groupBy.js';
-import uniqueId from 'lodash/uniqueId.js';
-
-/**
- * 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
-  });
-};
-
-/**
- * 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 = {
-  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 = (state, action) => {
-  return REDUCERS[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, 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;
-};
-
-/**
- * A tuple of values to be applied by the containing component for the roving tabindex to work correctly.
- */
-
-/**
- * Includes the given DOM element in the current roving tabindex.
- */
-const useRovingTabIndex = (ref, disabled = false, rowKey = null, autofocus = false) => {
-  // Create a stable ID for the lifetime of the component:
-  const idRef = React__default.useRef(null);
-  function getId() {
-    if (!idRef.current) {
-      idRef.current = uniqueId('rti_');
-    }
-    return idRef.current;
-  }
-  const isMounted = React__default.useRef(false);
-  const {
-    dispatch,
-    state
-  } = React__default.useContext(MovingFocusContext);
-  const {
-    direction
-  } = state;
-
-  // Register the tab stop on mount and unregister it on unmount:
-  React__default.useEffect(() => {
-    const id = getId();
-    dispatch({
-      type: 'REGISTER_TAB_STOP',
-      payload: {
-        id,
-        domElementRef: ref,
-        rowKey,
-        disabled,
-        autofocus
-      }
-    });
-    return () => {
-      dispatch({
-        type: 'UNREGISTER_TAB_STOP',
-        payload: {
-          id
-        }
-      });
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [state.listKey]);
-
-  /*
-   * Update the tab stop data if `rowIndex` 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: getId(),
-          rowKey,
-          disabled
-        }
-      });
-    } else {
-      isMounted.current = true;
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [rowKey, disabled]);
-
-  // Create a stable callback function for handling key down events:
-  const handleKeyDown = React__default.useCallback(evt => {
-    const trueDirection = !isNil(rowKey) ? 'both' : direction;
-    if (!NAV_KEYS[trueDirection].includes(evt.key)) {
-      return;
-    }
-    dispatch({
-      type: 'KEY_NAV',
-      payload: {
-        id: getId(),
-        key: evt.key,
-        ctrlKey: evt.ctrlKey
-      }
-    });
-    evt.preventDefault();
-    evt.stopPropagation();
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-
-  // Create a stable callback function for handling click events:
-  const handleClick = React__default.useCallback(event => {
-    dispatch({
-      type: 'SELECT_TAB_STOP',
-      payload: {
-        id: getId(),
-        type: getPointerTypeFromEvent(event)
-      }
-    });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
-
-  // Determine if the current tab stop is the currently active one:
-  const selected = getId() === state.selectedId;
-  const tabIndex = selected ? 0 : -1;
-  const focused = selected && state.allowFocusing;
-  return [tabIndex, focused, handleKeyDown, handleClick];
-};
-
-export { A11YLiveMessage, MovingFocusContext, MovingFocusProvider, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
-//# sourceMappingURL=index.js.map
+import { DisabledStateProvider, useDisabledStateContext } from "../_internal/utils/disabled/DisabledStateContext.js";
+import { ClickAwayProvider } from "../_internal/utils/ClickAwayProvider/ClickAwayProvider.js";
+import { InfiniteScroll } from "../_internal/utils/InfiniteScroll/InfiniteScroll.js";
+import { A11YLiveMessage } from "../_internal/utils/A11YLiveMessage/index.js";
+import { PortalProvider } from "../_internal/utils/Portal/PortalProvider.js";
+import { Portal } from "../_internal/utils/Portal/Portal.js";
+import { MovingFocusContext } from "../_internal/utils/moving-focus/components/MovingFocusProvider/context.js";
+import { MovingFocusProvider } from "../_internal/utils/moving-focus/components/MovingFocusProvider/index.js";
+import { useVirtualFocus } from "../_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocus.js";
+import { useVirtualFocusParent } from "../_internal/utils/moving-focus/hooks/useVirtualFocus/useVirtualFocusParent.js";
+import { useRovingTabIndex } from "../_internal/utils/moving-focus/hooks/useRovingTabIndex/useRovingTabIndex.js";
+export { A11YLiveMessage, ClickAwayProvider, DisabledStateProvider, InfiniteScroll, MovingFocusContext, MovingFocusProvider, Portal, PortalProvider, useDisabledStateContext, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };