@lumx/react 4.3.2-alpha.9 → 4.4.1-alpha.0

package/utils/index.js

@@ -1,9 +1,14 @@
-import { M as MovingFocusContext, N as NAV_KEYS, g as getPointerTypeFromEvent } from '../_internal/BcRzrT9Y.js';
-export { A as A11YLiveMessage, C as ClickAwayProvider, D as DisabledStateProvider, c as MovingFocusProvider, P as Portal, d as PortalProvider, u as useDisabledStateContext, b as useVirtualFocus, a as useVirtualFocusParent } from '../_internal/BcRzrT9Y.js';
 import React__default, { useEffect } from 'react';
+import { join, visuallyHidden } from '@lumx/core/js/utils/classNames';
 import { jsx } from 'react/jsx-runtime';
-import isNil from 'lodash/isNil';
-import uniqueId from 'lodash/uniqueId';
+export { C as ClickAwayProvider, D as DisabledStateProvider, P as Portal, a as PortalProvider, u as useDisabledStateContext } from '../_internal/DpdvhbTO.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';
 
 // The error margin in px we want to have for triggering infinite scroll
 const CLASSNAME = 'lumx-infinite-scroll-anchor';
@@ -58,6 +63,1320 @@ const InfiniteScroll = ({
   });
 };
 
+/**
+ * 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.
  */
@@ -170,5 +1489,5 @@ const useRovingTabIndex = (ref, disabled = false, rowKey = null, autofocus = fal
   return [tabIndex, focused, handleKeyDown, handleClick];
 };
 
-export { InfiniteScroll, MovingFocusContext, useRovingTabIndex };
+export { A11YLiveMessage, InfiniteScroll, MovingFocusContext, MovingFocusProvider, useRovingTabIndex, useVirtualFocus, useVirtualFocusParent };
 //# sourceMappingURL=index.js.map