@cloudscape-design/components 3.0.473 → 3.0.475

package/table/table-role/grid-navigation.js

@@ -1,22 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useEffect, useMemo } from 'react';
-import { defaultIsSuppressed, findFocusinCell, moveFocusBy, muteElementFocusables, restoreElementFocusables, ensureSingleFocusable, getFirstFocusable, } from './utils';
+import { defaultIsSuppressed, muteElementFocusables, restoreElementFocusables, getFirstFocusable, getFocusables, findTableRowByAriaRowIndex, findTableRowCellByAriaColIndex, setTabIndex, } from './utils';
 import { KeyCode } from '../../internal/keycode';
-import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import React from 'react';
+import { nodeBelongs } from '../../internal/utils/node-belongs';
 /**
  * Makes table navigable with keyboard commands.
- * See https://www.w3.org/WAI/ARIA/apg/patterns/grid
- *
- * The hook attaches the GridNavigationHelper helper when active=true.
- * See GridNavigationHelper for more details.
+ * See grid-navigation.md
  */
 export function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }) {
-    const gridNavigation = useMemo(() => new GridNavigationHelper(), []);
+    const gridNavigation = useMemo(() => new GridNavigationProcessor(), []);
     const getTableStable = useStableCallback(getTable);
-    // Initialize the helper with the table container assuming it is mounted synchronously and only once.
+    // Initialize the processor with the table container assuming it is mounted synchronously and only once.
     useEffect(() => {
         if (keyboardNavigation) {
             const table = getTableStable();
@@ -24,43 +21,42 @@ export function GridNavigationProvider({ keyboardNavigation, pageSize, getTable,
         }
         return () => gridNavigation.cleanup();
     }, [keyboardNavigation, gridNavigation, getTableStable]);
-    // Notify the helper of the props change.
+    // Notify the processor of the props change.
     useEffect(() => {
         gridNavigation.update({ pageSize });
     }, [gridNavigation, pageSize]);
+    // Notify the processor of the new render.
+    useEffect(() => {
+        if (keyboardNavigation) {
+            gridNavigation.refresh();
+        }
+    });
     return React.createElement(React.Fragment, null, children);
 }
 /**
  * This helper encapsulates the grid navigation behaviors which are:
  * 1. Responding to keyboard commands and moving the focus accordingly;
  * 2. Muting table interactive elements for only one to be user-focusable at a time;
- * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed by the isSuppressed callback.
- *
- * All behaviors are attached upon initialization and are re-evaluated with every focusin, focusout, and keydown events,
- * and also when a node removal inside the table is observed to ensure consistency at any given moment.
- *
- * When the navigation is suppressed the keyboard commands are no longer intercepted and all table interactive elements are made
- * user-focusable to unblock the Tab navigation. The suppression should only be used for interactive elements inside the table that would
- * otherwise conflict with the navigation. Once the interactive element is deactivated or lose focus the table navigation becomes active again.
+ * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.
  */
-class GridNavigationHelper {
+class GridNavigationProcessor {
     constructor() {
         // Props
         this._pageSize = 0;
         this._table = null;
         // State
-        this.prevFocusedCell = null;
         this.focusedCell = null;
         this.onFocusin = (event) => {
             var _a;
-            const cell = findFocusinCell(event);
+            if (!(event.target instanceof HTMLElement)) {
+                return;
+            }
+            const cell = this.findFocusedCell(event.target);
             if (!cell) {
                 return;
             }
-            this.prevFocusedCell = cell;
             this.focusedCell = cell;
-            muteElementFocusables(this.table, this.isSuppressed(cell.element));
-            ensureSingleFocusable(this.table, cell);
+            this.ensureSingleFocusable();
             // Focusing on cell is not eligible when it contains focusable elements in the content.
             // If content focusables are available - move the focus to the first one.
             if (cell.element === cell.cellElement) {
@@ -68,7 +64,13 @@ class GridNavigationHelper {
             }
         };
         this.onFocusout = () => {
-            this.focusedCell = null;
+            // When focus leaves the cell and the cell no longer belong to the table it indicates the focused element has been unmounted.
+            // In that case the focus needs to be restored on the same coordinates.
+            setTimeout(() => {
+                if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {
+                    this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });
+                }
+            }, 0);
         };
         this.onKeydown = (event) => {
             if (!this.focusedCell) {
@@ -96,79 +98,49 @@ class GridNavigationHelper {
             switch (key) {
                 case KeyCode.up:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: -1, x: 0 });
+                    return this.moveFocusBy(from, { y: -1, x: 0 });
                 case KeyCode.down:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: 1, x: 0 });
+                    return this.moveFocusBy(from, { y: 1, x: 0 });
                 case KeyCode.left:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: 0, x: -1 });
+                    return this.moveFocusBy(from, { y: 0, x: -1 });
                 case KeyCode.right:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: 0, x: 1 });
+                    return this.moveFocusBy(from, { y: 0, x: 1 });
                 case KeyCode.pageUp:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: -this.pageSize, x: 0 });
+                    return this.moveFocusBy(from, { y: -this.pageSize, x: 0 });
                 case KeyCode.pageDown:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: this.pageSize, x: 0 });
+                    return this.moveFocusBy(from, { y: this.pageSize, x: 0 });
                 case KeyCode.home:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: 0, x: minExtreme });
+                    return this.moveFocusBy(from, { y: 0, x: minExtreme });
                 case KeyCode.end:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: 0, x: maxExtreme });
+                    return this.moveFocusBy(from, { y: 0, x: maxExtreme });
                 case -KeyCode.home:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: minExtreme, x: minExtreme });
+                    return this.moveFocusBy(from, { y: minExtreme, x: minExtreme });
                 case -KeyCode.end:
                     event.preventDefault();
-                    return moveFocusBy(this.table, from, { y: maxExtreme, x: maxExtreme });
+                    return this.moveFocusBy(from, { y: maxExtreme, x: maxExtreme });
                 default:
                     return;
             }
         };
-        this.onTableNodeMutation = (mutationRecords) => {
-            var _a;
-            // When focused cell is un-mounted the focusout event handler removes this.cell,
-            // while this.prevFocusedCell is retained until the next focusin event.
-            const cell = (_a = this.focusedCell) !== null && _a !== void 0 ? _a : this.prevFocusedCell;
-            const cellSuppressed = cell ? this.isSuppressed(cell.element) : false;
-            // Update table elements focus if new nodes were added.
-            if (mutationRecords.some(record => record.addedNodes.length > 0)) {
-                muteElementFocusables(this.table, cellSuppressed);
-                ensureSingleFocusable(this.table, cell);
-            }
-            if (cell) {
-                for (const record of mutationRecords) {
-                    if (record.type === 'childList') {
-                        // The lost focus in an unmount event is reapplied to the table using the previous cell position.
-                        // The moveFocusBy takes care of finding the closest position if the previous one no longer exists.
-                        for (const removedNode of Array.from(record.removedNodes)) {
-                            if (removedNode === cell.element || nodeContains(removedNode, cell.element)) {
-                                ensureSingleFocusable(this.table, cell);
-                                moveFocusBy(this.table, cell, { y: 0, x: 0 });
-                            }
-                        }
-                    }
-                }
-            }
-        };
     }
     init(table) {
         this._table = table;
         this.table.addEventListener('focusin', this.onFocusin);
         this.table.addEventListener('focusout', this.onFocusout);
         this.table.addEventListener('keydown', this.onKeydown);
-        const tableNodesObserver = new MutationObserver(this.onTableNodeMutation);
-        tableNodesObserver.observe(table, { childList: true, subtree: true });
-        muteElementFocusables(this.table, false);
-        ensureSingleFocusable(this.table, null);
+        this.ensureSingleFocusable();
         this.cleanup = () => {
             this.table.removeEventListener('focusin', this.onFocusin);
             this.table.removeEventListener('focusout', this.onFocusout);
             this.table.removeEventListener('keydown', this.onKeydown);
-            tableNodesObserver.disconnect();
             restoreElementFocusables(this.table);
         };
     }
@@ -178,17 +150,101 @@ class GridNavigationHelper {
     update({ pageSize }) {
         this._pageSize = pageSize;
     }
+    refresh() {
+        if (this._table) {
+            // Update focused cell indices in case table rows, columns, or firstIndex change.
+            if (this.focusedCell) {
+                this.focusedCell = this.findFocusedCell(this.focusedCell.element);
+            }
+            // Ensure newly added elements if any are muted.
+            this.ensureSingleFocusable();
+        }
+    }
     get pageSize() {
         return this._pageSize;
     }
     get table() {
         if (!this._table) {
-            throw new Error('Invariant violation: GridNavigationHelper is used before initialization.');
+            throw new Error('Invariant violation: GridNavigationProcessor is used before initialization.');
         }
         return this._table;
     }
     isSuppressed(focusedElement) {
         return defaultIsSuppressed(focusedElement);
     }
+    moveFocusBy(cell, delta) {
+        var _a;
+        (_a = this.getNextFocusable(cell, delta)) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Finds focused cell props corresponding the focused element inside the table.
+     * The function relies on ARIA colindex/rowindex attributes being correctly applied.
+     */
+    findFocusedCell(focusedElement) {
+        var _a, _b;
+        const cellElement = focusedElement.closest('td,th');
+        const rowElement = cellElement === null || cellElement === void 0 ? void 0 : cellElement.closest('tr');
+        if (!cellElement || !rowElement) {
+            return null;
+        }
+        const colIndex = parseInt((_a = cellElement.getAttribute('aria-colindex')) !== null && _a !== void 0 ? _a : '');
+        const rowIndex = parseInt((_b = rowElement.getAttribute('aria-rowindex')) !== null && _b !== void 0 ? _b : '');
+        if (isNaN(colIndex) || isNaN(rowIndex)) {
+            return null;
+        }
+        const cellFocusables = getFocusables(cellElement);
+        const elementIndex = cellFocusables.indexOf(focusedElement);
+        return { rowIndex, colIndex, rowElement, cellElement, element: focusedElement, elementIndex };
+    }
+    /**
+     * Finds element to be focused next. The focus can transition between cells or interactive elements inside cells.
+     */
+    getNextFocusable(from, delta) {
+        var _a;
+        // Find next row to move focus into (can be null if the top/bottom is reached).
+        const targetAriaRowIndex = from.rowIndex + delta.y;
+        const targetRow = findTableRowByAriaRowIndex(this.table, targetAriaRowIndex, delta.y);
+        if (!targetRow) {
+            return null;
+        }
+        // Return next interactive cell content element if available.
+        const cellFocusables = getFocusables(from.cellElement);
+        const nextElementIndex = from.elementIndex + delta.x;
+        if (delta.x && from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length) {
+            return cellFocusables[nextElementIndex];
+        }
+        // Find next cell to focus or move focus into (can be null if the left/right edge is reached).
+        const targetAriaColIndex = from.colIndex + delta.x;
+        const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);
+        if (!targetCell) {
+            return null;
+        }
+        // When target cell matches the current cell it means we reached the left or right boundary.
+        if (targetCell === from.cellElement && delta.x !== 0) {
+            return null;
+        }
+        // Return cell interactive content or the cell itself.
+        const targetCellFocusables = getFocusables(targetCell);
+        const focusIndex = delta.x < 0 ? targetCellFocusables.length - 1 : delta.x > 0 ? 0 : from.elementIndex;
+        const focusTarget = (_a = targetCellFocusables[focusIndex]) !== null && _a !== void 0 ? _a : targetCell;
+        return focusTarget;
+    }
+    /**
+     * Makes the cell element, the first interactive element or the first cell of the table user-focusable.
+     */
+    ensureSingleFocusable() {
+        var _a;
+        const cellSuppressed = this.focusedCell ? this.isSuppressed(this.focusedCell.element) : false;
+        muteElementFocusables(this.table, cellSuppressed);
+        const firstTableCell = this.table.querySelector('td,th');
+        // A single element of the table is made user-focusable.
+        // It defaults to the first interactive element of the first cell or the first cell itself otherwise.
+        let focusTarget = (_a = (firstTableCell && getFocusables(firstTableCell)[0])) !== null && _a !== void 0 ? _a : firstTableCell;
+        // When a navigation-focused element is present in the table it is used for user-navigation instead.
+        if (this.focusedCell) {
+            focusTarget = this.getNextFocusable(this.focusedCell, { x: 0, y: 0 });
+        }
+        setTabIndex(focusTarget, 0);
+    }
 }
 //# sourceMappingURL=grid-navigation.js.map

package/table/table-role/grid-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid-navigation.js","sourceRoot":"lib/default/","sources":["table/table-role/grid-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useMemo } from 'react';\nimport {\n  defaultIsSuppressed,\n  findFocusinCell,\n  moveFocusBy,\n  muteElementFocusables,\n  restoreElementFocusables,\n  ensureSingleFocusable,\n  getFirstFocusable,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport React from 'react';\n\n/**\n * Makes table navigable with keyboard commands.\n * See https://www.w3.org/WAI/ARIA/apg/patterns/grid\n *\n * The hook attaches the GridNavigationHelper helper when active=true.\n * See GridNavigationHelper for more details.\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n  const gridNavigation = useMemo(() => new GridNavigationHelper(), []);\n\n  const getTableStable = useStableCallback(getTable);\n\n  // Initialize the helper with the table container assuming it is mounted synchronously and only once.\n  useEffect(() => {\n    if (keyboardNavigation) {\n      const table = getTableStable();\n      table && gridNavigation.init(table);\n    }\n    return () => gridNavigation.cleanup();\n  }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n  // Notify the helper of the props change.\n  useEffect(() => {\n    gridNavigation.update({ pageSize });\n  }, [gridNavigation, pageSize]);\n\n  return <>{children}</>;\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed by the isSuppressed callback.\n *\n * All behaviors are attached upon initialization and are re-evaluated with every focusin, focusout, and keydown events,\n * and also when a node removal inside the table is observed to ensure consistency at any given moment.\n *\n * When the navigation is suppressed the keyboard commands are no longer intercepted and all table interactive elements are made\n * user-focusable to unblock the Tab navigation. The suppression should only be used for interactive elements inside the table that would\n * otherwise conflict with the navigation. Once the interactive element is deactivated or lose focus the table navigation becomes active again.\n */\nclass GridNavigationHelper {\n  // Props\n  private _pageSize = 0;\n  private _table: null | HTMLTableElement = null;\n\n  // State\n  private prevFocusedCell: null | FocusedCell = null;\n  private focusedCell: null | FocusedCell = null;\n\n  public init(table: HTMLTableElement) {\n    this._table = table;\n\n    this.table.addEventListener('focusin', this.onFocusin);\n    this.table.addEventListener('focusout', this.onFocusout);\n    this.table.addEventListener('keydown', this.onKeydown);\n\n    const tableNodesObserver = new MutationObserver(this.onTableNodeMutation);\n    tableNodesObserver.observe(table, { childList: true, subtree: true });\n\n    muteElementFocusables(this.table, false);\n    ensureSingleFocusable(this.table, null);\n\n    this.cleanup = () => {\n      this.table.removeEventListener('focusin', this.onFocusin);\n      this.table.removeEventListener('focusout', this.onFocusout);\n      this.table.removeEventListener('keydown', this.onKeydown);\n\n      tableNodesObserver.disconnect();\n\n      restoreElementFocusables(this.table);\n    };\n  }\n\n  public cleanup() {\n    // Do nothing before initialized.\n  }\n\n  public update({ pageSize }: { pageSize: number }) {\n    this._pageSize = pageSize;\n  }\n\n  private get pageSize() {\n    return this._pageSize;\n  }\n\n  private get table(): HTMLTableElement {\n    if (!this._table) {\n      throw new Error('Invariant violation: GridNavigationHelper is used before initialization.');\n    }\n    return this._table;\n  }\n\n  private isSuppressed(focusedElement: HTMLElement): boolean {\n    return defaultIsSuppressed(focusedElement);\n  }\n\n  private onFocusin = (event: FocusEvent) => {\n    const cell = findFocusinCell(event);\n    if (!cell) {\n      return;\n    }\n\n    this.prevFocusedCell = cell;\n    this.focusedCell = cell;\n\n    muteElementFocusables(this.table, this.isSuppressed(cell.element));\n    ensureSingleFocusable(this.table, cell);\n\n    // Focusing on cell is not eligible when it contains focusable elements in the content.\n    // If content focusables are available - move the focus to the first one.\n    if (cell.element === cell.cellElement) {\n      getFirstFocusable(cell.cellElement)?.focus();\n    }\n  };\n\n  private onFocusout = () => {\n    this.focusedCell = null;\n  };\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (!this.focusedCell) {\n      return;\n    }\n\n    const ctrlKey = event.ctrlKey ? 1 : 0;\n    const altKey = event.altKey ? 1 : 0;\n    const shiftKey = event.shiftKey ? 1 : 0;\n    const metaKey = event.metaKey ? 1 : 0;\n    const numModifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n\n    let key = event.keyCode;\n    if (numModifiersPressed === 1 && event.ctrlKey) {\n      key = -key;\n    } else if (numModifiersPressed) {\n      return;\n    }\n\n    const from = this.focusedCell;\n    const minExtreme = Number.NEGATIVE_INFINITY;\n    const maxExtreme = Number.POSITIVE_INFINITY;\n\n    // Do not intercept any keys when the navigation is suppressed.\n    if (this.isSuppressed(from.element)) {\n      return;\n    }\n\n    switch (key) {\n      case KeyCode.up:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: -1, x: 0 });\n\n      case KeyCode.down:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: 1, x: 0 });\n\n      case KeyCode.left:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: 0, x: -1 });\n\n      case KeyCode.right:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: 0, x: 1 });\n\n      case KeyCode.pageUp:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: -this.pageSize, x: 0 });\n\n      case KeyCode.pageDown:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: this.pageSize, x: 0 });\n\n      case KeyCode.home:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: 0, x: minExtreme });\n\n      case KeyCode.end:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: 0, x: maxExtreme });\n\n      case -KeyCode.home:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: minExtreme, x: minExtreme });\n\n      case -KeyCode.end:\n        event.preventDefault();\n        return moveFocusBy(this.table, from, { y: maxExtreme, x: maxExtreme });\n\n      default:\n        return;\n    }\n  };\n\n  private onTableNodeMutation = (mutationRecords: MutationRecord[]) => {\n    // When focused cell is un-mounted the focusout event handler removes this.cell,\n    // while this.prevFocusedCell is retained until the next focusin event.\n    const cell = this.focusedCell ?? this.prevFocusedCell;\n    const cellSuppressed = cell ? this.isSuppressed(cell.element) : false;\n\n    // Update table elements focus if new nodes were added.\n    if (mutationRecords.some(record => record.addedNodes.length > 0)) {\n      muteElementFocusables(this.table, cellSuppressed);\n      ensureSingleFocusable(this.table, cell);\n    }\n\n    if (cell) {\n      for (const record of mutationRecords) {\n        if (record.type === 'childList') {\n          // The lost focus in an unmount event is reapplied to the table using the previous cell position.\n          // The moveFocusBy takes care of finding the closest position if the previous one no longer exists.\n          for (const removedNode of Array.from(record.removedNodes)) {\n            if (removedNode === cell.element || nodeContains(removedNode, cell.element)) {\n              ensureSingleFocusable(this.table, cell);\n              moveFocusBy(this.table, cell, { y: 0, x: 0 });\n            }\n          }\n        }\n      }\n    }\n  };\n}\n"]}
+{"version":3,"file":"grid-navigation.js","sourceRoot":"lib/default/","sources":["table/table-role/grid-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { useEffect, useMemo } from 'react';\nimport {\n  defaultIsSuppressed,\n  muteElementFocusables,\n  restoreElementFocusables,\n  getFirstFocusable,\n  getFocusables,\n  findTableRowByAriaRowIndex,\n  findTableRowCellByAriaColIndex,\n  setTabIndex,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport React from 'react';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\n\n/**\n * Makes table navigable with keyboard commands.\n * See grid-navigation.md\n */\nexport function GridNavigationProvider({ keyboardNavigation, pageSize, getTable, children }: GridNavigationProps) {\n  const gridNavigation = useMemo(() => new GridNavigationProcessor(), []);\n\n  const getTableStable = useStableCallback(getTable);\n\n  // Initialize the processor with the table container assuming it is mounted synchronously and only once.\n  useEffect(() => {\n    if (keyboardNavigation) {\n      const table = getTableStable();\n      table && gridNavigation.init(table);\n    }\n    return () => gridNavigation.cleanup();\n  }, [keyboardNavigation, gridNavigation, getTableStable]);\n\n  // Notify the processor of the props change.\n  useEffect(() => {\n    gridNavigation.update({ pageSize });\n  }, [gridNavigation, pageSize]);\n\n  // Notify the processor of the new render.\n  useEffect(() => {\n    if (keyboardNavigation) {\n      gridNavigation.refresh();\n    }\n  });\n\n  return <>{children}</>;\n}\n\n/**\n * This helper encapsulates the grid navigation behaviors which are:\n * 1. Responding to keyboard commands and moving the focus accordingly;\n * 2. Muting table interactive elements for only one to be user-focusable at a time;\n * 3. Suppressing the above behaviors when focusing an element inside a dialog or when instructed explicitly.\n */\nclass GridNavigationProcessor {\n  // Props\n  private _pageSize = 0;\n  private _table: null | HTMLTableElement = null;\n\n  // State\n  private focusedCell: null | FocusedCell = null;\n\n  public init(table: HTMLTableElement) {\n    this._table = table;\n\n    this.table.addEventListener('focusin', this.onFocusin);\n    this.table.addEventListener('focusout', this.onFocusout);\n    this.table.addEventListener('keydown', this.onKeydown);\n\n    this.ensureSingleFocusable();\n\n    this.cleanup = () => {\n      this.table.removeEventListener('focusin', this.onFocusin);\n      this.table.removeEventListener('focusout', this.onFocusout);\n      this.table.removeEventListener('keydown', this.onKeydown);\n\n      restoreElementFocusables(this.table);\n    };\n  }\n\n  public cleanup() {\n    // Do nothing before initialized.\n  }\n\n  public update({ pageSize }: { pageSize: number }) {\n    this._pageSize = pageSize;\n  }\n\n  public refresh() {\n    if (this._table) {\n      // Update focused cell indices in case table rows, columns, or firstIndex change.\n      if (this.focusedCell) {\n        this.focusedCell = this.findFocusedCell(this.focusedCell.element);\n      }\n\n      // Ensure newly added elements if any are muted.\n      this.ensureSingleFocusable();\n    }\n  }\n\n  private get pageSize() {\n    return this._pageSize;\n  }\n\n  private get table(): HTMLTableElement {\n    if (!this._table) {\n      throw new Error('Invariant violation: GridNavigationProcessor is used before initialization.');\n    }\n    return this._table;\n  }\n\n  private isSuppressed(focusedElement: HTMLElement): boolean {\n    return defaultIsSuppressed(focusedElement);\n  }\n\n  private onFocusin = (event: FocusEvent) => {\n    if (!(event.target instanceof HTMLElement)) {\n      return;\n    }\n\n    const cell = this.findFocusedCell(event.target);\n    if (!cell) {\n      return;\n    }\n\n    this.focusedCell = cell;\n\n    this.ensureSingleFocusable();\n\n    // Focusing on cell is not eligible when it contains focusable elements in the content.\n    // If content focusables are available - move the focus to the first one.\n    if (cell.element === cell.cellElement) {\n      getFirstFocusable(cell.cellElement)?.focus();\n    }\n  };\n\n  private onFocusout = () => {\n    // When focus leaves the cell and the cell no longer belong to the table it indicates the focused element has been unmounted.\n    // In that case the focus needs to be restored on the same coordinates.\n    setTimeout(() => {\n      if (this.focusedCell && !nodeBelongs(this.table, this.focusedCell.element)) {\n        this.moveFocusBy(this.focusedCell, { x: 0, y: 0 });\n      }\n    }, 0);\n  };\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (!this.focusedCell) {\n      return;\n    }\n\n    const ctrlKey = event.ctrlKey ? 1 : 0;\n    const altKey = event.altKey ? 1 : 0;\n    const shiftKey = event.shiftKey ? 1 : 0;\n    const metaKey = event.metaKey ? 1 : 0;\n    const numModifiersPressed = ctrlKey + altKey + shiftKey + metaKey;\n\n    let key = event.keyCode;\n    if (numModifiersPressed === 1 && event.ctrlKey) {\n      key = -key;\n    } else if (numModifiersPressed) {\n      return;\n    }\n\n    const from = this.focusedCell;\n    const minExtreme = Number.NEGATIVE_INFINITY;\n    const maxExtreme = Number.POSITIVE_INFINITY;\n\n    // Do not intercept any keys when the navigation is suppressed.\n    if (this.isSuppressed(from.element)) {\n      return;\n    }\n\n    switch (key) {\n      case KeyCode.up:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: -1, x: 0 });\n\n      case KeyCode.down:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: 1, x: 0 });\n\n      case KeyCode.left:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: 0, x: -1 });\n\n      case KeyCode.right:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: 0, x: 1 });\n\n      case KeyCode.pageUp:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: -this.pageSize, x: 0 });\n\n      case KeyCode.pageDown:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: this.pageSize, x: 0 });\n\n      case KeyCode.home:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: 0, x: minExtreme });\n\n      case KeyCode.end:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: 0, x: maxExtreme });\n\n      case -KeyCode.home:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: minExtreme, x: minExtreme });\n\n      case -KeyCode.end:\n        event.preventDefault();\n        return this.moveFocusBy(from, { y: maxExtreme, x: maxExtreme });\n\n      default:\n        return;\n    }\n  };\n\n  private moveFocusBy(cell: FocusedCell, delta: { x: number; y: number }) {\n    this.getNextFocusable(cell, delta)?.focus();\n  }\n\n  /**\n   * Finds focused cell props corresponding the focused element inside the table.\n   * The function relies on ARIA colindex/rowindex attributes being correctly applied.\n   */\n  private findFocusedCell(focusedElement: HTMLElement): null | FocusedCell {\n    const cellElement = focusedElement.closest('td,th') as null | HTMLTableCellElement;\n    const rowElement = cellElement?.closest('tr');\n\n    if (!cellElement || !rowElement) {\n      return null;\n    }\n\n    const colIndex = parseInt(cellElement.getAttribute('aria-colindex') ?? '');\n    const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex') ?? '');\n    if (isNaN(colIndex) || isNaN(rowIndex)) {\n      return null;\n    }\n\n    const cellFocusables = getFocusables(cellElement);\n    const elementIndex = cellFocusables.indexOf(focusedElement);\n\n    return { rowIndex, colIndex, rowElement, cellElement, element: focusedElement, elementIndex };\n  }\n\n  /**\n   * Finds element to be focused next. The focus can transition between cells or interactive elements inside cells.\n   */\n  private getNextFocusable(from: FocusedCell, delta: { y: number; x: number }) {\n    // Find next row to move focus into (can be null if the top/bottom is reached).\n    const targetAriaRowIndex = from.rowIndex + delta.y;\n    const targetRow = findTableRowByAriaRowIndex(this.table, targetAriaRowIndex, delta.y);\n    if (!targetRow) {\n      return null;\n    }\n\n    // Return next interactive cell content element if available.\n    const cellFocusables = getFocusables(from.cellElement);\n    const nextElementIndex = from.elementIndex + delta.x;\n    if (delta.x && from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length) {\n      return cellFocusables[nextElementIndex];\n    }\n\n    // Find next cell to focus or move focus into (can be null if the left/right edge is reached).\n    const targetAriaColIndex = from.colIndex + delta.x;\n    const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);\n    if (!targetCell) {\n      return null;\n    }\n\n    // When target cell matches the current cell it means we reached the left or right boundary.\n    if (targetCell === from.cellElement && delta.x !== 0) {\n      return null;\n    }\n\n    // Return cell interactive content or the cell itself.\n    const targetCellFocusables = getFocusables(targetCell);\n    const focusIndex = delta.x < 0 ? targetCellFocusables.length - 1 : delta.x > 0 ? 0 : from.elementIndex;\n    const focusTarget = targetCellFocusables[focusIndex] ?? targetCell;\n    return focusTarget;\n  }\n\n  /**\n   * Makes the cell element, the first interactive element or the first cell of the table user-focusable.\n   */\n  private ensureSingleFocusable() {\n    const cellSuppressed = this.focusedCell ? this.isSuppressed(this.focusedCell.element) : false;\n    muteElementFocusables(this.table, cellSuppressed);\n\n    const firstTableCell = this.table.querySelector('td,th') as null | HTMLTableCellElement;\n\n    // A single element of the table is made user-focusable.\n    // It defaults to the first interactive element of the first cell or the first cell itself otherwise.\n    let focusTarget: null | HTMLElement = (firstTableCell && getFocusables(firstTableCell)[0]) ?? firstTableCell;\n\n    // When a navigation-focused element is present in the table it is used for user-navigation instead.\n    if (this.focusedCell) {\n      focusTarget = this.getNextFocusable(this.focusedCell, { x: 0, y: 0 });\n    }\n\n    setTabIndex(focusTarget, 0);\n  }\n}\n"]}

package/table/table-role/table-role-helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-role-helper.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/table-role-helper.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,KAAK,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;AAa7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAuB9C;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAWpH;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,uDAS3E;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,uDAa5G;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE;IAClD,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,0DAcA;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,0DAY/G"}
+{"version":3,"file":"table-role-helper.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/table-role-helper.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,KAAK,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC;AAa7D,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,SAAS,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,GAAG,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAuB9C;AAED,wBAAgB,wBAAwB,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,YAAY,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,kDAWpH;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAA;CAAE,uDAS3E;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,uDAa5G;AAED,wBAAgB,0BAA0B,CAAC,OAAO,EAAE;IAClD,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,0DAeA;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE;IAAE,SAAS,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,0DAa/G"}

package/table/table-role/table-role-helper.js

@@ -61,6 +61,7 @@ export function getTableColHeaderRoleProps(options) {
     const nativeProps = {};
     nativeProps.scope = 'col';
     if (options.tableRole === 'grid') {
+        nativeProps.tabIndex = -1;
         nativeProps['aria-colindex'] = options.colIndex + 1;
     }
     if (options.sortingStatus) {
@@ -71,6 +72,7 @@ export function getTableColHeaderRoleProps(options) {
 export function getTableCellRoleProps(options) {
     const nativeProps = {};
     if (options.tableRole === 'grid') {
+        nativeProps.tabIndex = -1;
         nativeProps['aria-colindex'] = options.colIndex + 1;
     }
     if (options.isRowHeader) {

package/table/table-role/table-role-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-role-helper.js","sourceRoot":"lib/default/","sources":["table/table-role/table-role-helper.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { TableRole } from './interfaces';\n\ntype SortingStatus = 'sortable' | 'ascending' | 'descending';\n\nconst stateToAriaSort = {\n  sortable: 'none',\n  ascending: 'ascending',\n  descending: 'descending',\n} as const;\nconst getAriaSort = (sortingState: SortingStatus) => stateToAriaSort[sortingState];\n\n// Depending on its content the table can have different semantic representation which includes the\n// ARIA role of the table component (\"table\", \"grid\", \"treegrid\") but also roles and other semantic attributes\n// of the child elements. The TableRole helper encapsulates table's semantic structure.\n\nexport function getTableRoleProps(options: {\n  tableRole: TableRole;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  totalItemsCount?: number;\n  totalColumnsCount?: number;\n}): React.TableHTMLAttributes<HTMLTableElement> {\n  const nativeProps: React.TableHTMLAttributes<HTMLTableElement> = {};\n\n  // Browsers have weird mechanism to guess whether it's a data table or a layout table.\n  // If we state explicitly, they get it always correctly even with low number of rows.\n  nativeProps.role = options.tableRole === 'grid-default' ? 'grid' : options.tableRole;\n\n  nativeProps['aria-label'] = options.ariaLabel;\n  nativeProps['aria-labelledby'] = options.ariaLabelledBy;\n\n  // Incrementing the total count by one to account for the header row.\n  nativeProps['aria-rowcount'] = options.totalItemsCount ? options.totalItemsCount + 1 : -1;\n\n  if (options.tableRole === 'grid') {\n    nativeProps['aria-colcount'] = options.totalColumnsCount;\n  }\n\n  // Make table component programmatically focusable to attach focusin/focusout for keyboard navigation.\n  if (options.tableRole === 'grid') {\n    nativeProps.tabIndex = -1;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableWrapperRoleProps(options: { tableRole: TableRole; isScrollable: boolean; ariaLabel?: string }) {\n  const nativeProps: React.HTMLAttributes<HTMLDivElement> = {};\n\n  // When the table is scrollable, the wrapper is made focusable so that keyboard users can scroll it horizontally with arrow keys.\n  if (options.isScrollable && options.tableRole !== 'grid') {\n    nativeProps.role = 'region';\n    nativeProps.tabIndex = 0;\n    nativeProps['aria-label'] = options.ariaLabel;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableHeaderRowRoleProps(options: { tableRole: TableRole }) {\n  const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n  // For grids headers are treated similar to data rows and are indexed accordingly.\n  if (options.tableRole === 'grid' || options.tableRole === 'grid-default') {\n    nativeProps['aria-rowindex'] = 1;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableRowRoleProps(options: { tableRole: TableRole; rowIndex: number; firstIndex?: number }) {\n  const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n  // The data cell indices are incremented by 1 to account for the header cells.\n  if (options.tableRole === 'grid') {\n    nativeProps['aria-rowindex'] = (options.firstIndex || 1) + options.rowIndex + 1;\n  }\n  // For tables indices are only added when the first index is not 0 (not the first page/frame).\n  else if (options.firstIndex !== undefined) {\n    nativeProps['aria-rowindex'] = options.firstIndex + options.rowIndex + 1;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableColHeaderRoleProps(options: {\n  tableRole: TableRole;\n  colIndex: number;\n  sortingStatus?: SortingStatus;\n}) {\n  const nativeProps: React.ThHTMLAttributes<HTMLTableCellElement> = {};\n\n  nativeProps.scope = 'col';\n\n  if (options.tableRole === 'grid') {\n    nativeProps['aria-colindex'] = options.colIndex + 1;\n  }\n\n  if (options.sortingStatus) {\n    nativeProps['aria-sort'] = getAriaSort(options.sortingStatus);\n  }\n\n  return nativeProps;\n}\n\nexport function getTableCellRoleProps(options: { tableRole: TableRole; colIndex: number; isRowHeader?: boolean }) {\n  const nativeProps: React.TdHTMLAttributes<HTMLTableCellElement> = {};\n\n  if (options.tableRole === 'grid') {\n    nativeProps['aria-colindex'] = options.colIndex + 1;\n  }\n\n  if (options.isRowHeader) {\n    nativeProps.scope = 'row';\n  }\n\n  return nativeProps;\n}\n"]}
+{"version":3,"file":"table-role-helper.js","sourceRoot":"lib/default/","sources":["table/table-role/table-role-helper.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { TableRole } from './interfaces';\n\ntype SortingStatus = 'sortable' | 'ascending' | 'descending';\n\nconst stateToAriaSort = {\n  sortable: 'none',\n  ascending: 'ascending',\n  descending: 'descending',\n} as const;\nconst getAriaSort = (sortingState: SortingStatus) => stateToAriaSort[sortingState];\n\n// Depending on its content the table can have different semantic representation which includes the\n// ARIA role of the table component (\"table\", \"grid\", \"treegrid\") but also roles and other semantic attributes\n// of the child elements. The TableRole helper encapsulates table's semantic structure.\n\nexport function getTableRoleProps(options: {\n  tableRole: TableRole;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  totalItemsCount?: number;\n  totalColumnsCount?: number;\n}): React.TableHTMLAttributes<HTMLTableElement> {\n  const nativeProps: React.TableHTMLAttributes<HTMLTableElement> = {};\n\n  // Browsers have weird mechanism to guess whether it's a data table or a layout table.\n  // If we state explicitly, they get it always correctly even with low number of rows.\n  nativeProps.role = options.tableRole === 'grid-default' ? 'grid' : options.tableRole;\n\n  nativeProps['aria-label'] = options.ariaLabel;\n  nativeProps['aria-labelledby'] = options.ariaLabelledBy;\n\n  // Incrementing the total count by one to account for the header row.\n  nativeProps['aria-rowcount'] = options.totalItemsCount ? options.totalItemsCount + 1 : -1;\n\n  if (options.tableRole === 'grid') {\n    nativeProps['aria-colcount'] = options.totalColumnsCount;\n  }\n\n  // Make table component programmatically focusable to attach focusin/focusout for keyboard navigation.\n  if (options.tableRole === 'grid') {\n    nativeProps.tabIndex = -1;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableWrapperRoleProps(options: { tableRole: TableRole; isScrollable: boolean; ariaLabel?: string }) {\n  const nativeProps: React.HTMLAttributes<HTMLDivElement> = {};\n\n  // When the table is scrollable, the wrapper is made focusable so that keyboard users can scroll it horizontally with arrow keys.\n  if (options.isScrollable && options.tableRole !== 'grid') {\n    nativeProps.role = 'region';\n    nativeProps.tabIndex = 0;\n    nativeProps['aria-label'] = options.ariaLabel;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableHeaderRowRoleProps(options: { tableRole: TableRole }) {\n  const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n  // For grids headers are treated similar to data rows and are indexed accordingly.\n  if (options.tableRole === 'grid' || options.tableRole === 'grid-default') {\n    nativeProps['aria-rowindex'] = 1;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableRowRoleProps(options: { tableRole: TableRole; rowIndex: number; firstIndex?: number }) {\n  const nativeProps: React.HTMLAttributes<HTMLTableRowElement> = {};\n\n  // The data cell indices are incremented by 1 to account for the header cells.\n  if (options.tableRole === 'grid') {\n    nativeProps['aria-rowindex'] = (options.firstIndex || 1) + options.rowIndex + 1;\n  }\n  // For tables indices are only added when the first index is not 0 (not the first page/frame).\n  else if (options.firstIndex !== undefined) {\n    nativeProps['aria-rowindex'] = options.firstIndex + options.rowIndex + 1;\n  }\n\n  return nativeProps;\n}\n\nexport function getTableColHeaderRoleProps(options: {\n  tableRole: TableRole;\n  colIndex: number;\n  sortingStatus?: SortingStatus;\n}) {\n  const nativeProps: React.ThHTMLAttributes<HTMLTableCellElement> = {};\n\n  nativeProps.scope = 'col';\n\n  if (options.tableRole === 'grid') {\n    nativeProps.tabIndex = -1;\n    nativeProps['aria-colindex'] = options.colIndex + 1;\n  }\n\n  if (options.sortingStatus) {\n    nativeProps['aria-sort'] = getAriaSort(options.sortingStatus);\n  }\n\n  return nativeProps;\n}\n\nexport function getTableCellRoleProps(options: { tableRole: TableRole; colIndex: number; isRowHeader?: boolean }) {\n  const nativeProps: React.TdHTMLAttributes<HTMLTableCellElement> = {};\n\n  if (options.tableRole === 'grid') {\n    nativeProps.tabIndex = -1;\n    nativeProps['aria-colindex'] = options.colIndex + 1;\n  }\n\n  if (options.isRowHeader) {\n    nativeProps.scope = 'row';\n  }\n\n  return nativeProps;\n}\n"]}

package/table/table-role/utils.d.ts

@@ -1,20 +1,3 @@
-import { FocusedCell } from './interfaces';
-/**
- * Finds focused cell props corresponding the focused element inside the table.
- * The function relies on ARIA colindex/rowindex attributes being correctly applied.
- */
-export declare function findFocusinCell(event: FocusEvent): null | FocusedCell;
-/**
- * Moves table focus in the provided direction. The focus can transition between cells or interactive elements inside cells.
- */
-export declare function moveFocusBy(table: HTMLTableElement, from: FocusedCell, delta: {
-    y: number;
-    x: number;
-}): void;
-/**
- * Makes the cell element, the first interactive element or the first cell of the table user-focusable.
- */
-export declare function ensureSingleFocusable(table: HTMLElement, cell: null | FocusedCell): void;
 /**
  * Makes all element focusable children pseudo-focusable unless the grid navigation is suppressed.
  */
@@ -34,4 +17,13 @@ export declare function defaultIsSuppressed(target: HTMLElement): boolean;
  */
 export declare function getFocusables(element: HTMLElement): HTMLElement[];
 export declare function getFirstFocusable(element: HTMLElement): HTMLElement | null;
+/**
+ * Finds the closest row to the targetAriaRowIndex+delta in the direction of delta.
+ */
+export declare function findTableRowByAriaRowIndex(table: HTMLTableElement, targetAriaRowIndex: number, delta: number): HTMLTableRowElement | null;
+/**
+ * Finds the closest column to the targetAriaColIndex+delta in the direction of delta.
+ */
+export declare function findTableRowCellByAriaColIndex(tableRow: HTMLTableRowElement, targetAriaColIndex: number, delta: number): HTMLTableCellElement | null;
+export declare function setTabIndex(element: null | HTMLElement, tabIndex: number): void;
 //# sourceMappingURL=utils.d.ts.map

package/table/table-role/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAO3C;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,WAAW,CAuBrE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,QAiCtG;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,GAAG,WAAW,QAajF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,QAiB9E;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,gBAAgB,QAQjE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,WAAW,WAiBtD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,iBAEjD;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,sBAErD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,QAiB9E;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,EAAE,gBAAgB,QAQjE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,WAAW,WAiBtD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,WAAW,iBAEjD;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,sBAErD;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,8BAqB5G;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAC5C,QAAQ,EAAE,mBAAmB,EAC7B,kBAAkB,EAAE,MAAM,EAC1B,KAAK,EAAE,MAAM,+BAsBd;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,IAAI,GAAG,WAAW,EAAE,QAAQ,EAAE,MAAM,QAIxE"}

package/table/table-role/utils.js

@@ -5,79 +5,6 @@ import { getFocusables as getActualFocusables } from '../../internal/components/
 // The elements having tab index -999 are eligible for keyboard navigation but not for Tab navigation.
 const PSEUDO_FOCUSABLE_TAB_INDEX = -999;
 const FOCUSABLES_SELECTOR = `[tabIndex="0"],[tabIndex="${PSEUDO_FOCUSABLE_TAB_INDEX}"]`;
-/**
- * Finds focused cell props corresponding the focused element inside the table.
- * The function relies on ARIA colindex/rowindex attributes being correctly applied.
- */
-export function findFocusinCell(event) {
-    var _a, _b;
-    if (!(event.target instanceof HTMLElement)) {
-        return null;
-    }
-    const element = event.target;
-    const cellElement = element.closest('td,th');
-    const rowElement = cellElement === null || cellElement === void 0 ? void 0 : cellElement.closest('tr');
-    if (!cellElement || !rowElement) {
-        return null;
-    }
-    const colIndex = parseInt((_a = cellElement.getAttribute('aria-colindex')) !== null && _a !== void 0 ? _a : '');
-    const rowIndex = parseInt((_b = rowElement.getAttribute('aria-rowindex')) !== null && _b !== void 0 ? _b : '');
-    if (isNaN(colIndex) || isNaN(rowIndex)) {
-        return null;
-    }
-    const cellFocusables = getFocusables(cellElement);
-    const elementIndex = cellFocusables.indexOf(element);
-    return { rowIndex, colIndex, rowElement, cellElement, element, elementIndex };
-}
-/**
- * Moves table focus in the provided direction. The focus can transition between cells or interactive elements inside cells.
- */
-export function moveFocusBy(table, from, delta) {
-    var _a;
-    // Find next row to move focus into (can be null if the top/bottom is reached).
-    const targetAriaRowIndex = from.rowIndex + delta.y;
-    const targetRow = findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta.y);
-    if (!targetRow) {
-        return;
-    }
-    // Move focus to the next interactive cell content element if available.
-    const cellFocusables = getFocusables(from.cellElement);
-    const nextElementIndex = from.elementIndex + delta.x;
-    if (delta.x && from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length) {
-        focus(cellFocusables[nextElementIndex]);
-        return;
-    }
-    // Find next cell to focus or move focus into (can be null if the left/right edge is reached).
-    const targetAriaColIndex = from.colIndex + delta.x;
-    const targetCell = findTableRowCellByAriaColIndex(targetRow, targetAriaColIndex, delta.x);
-    if (!targetCell) {
-        return;
-    }
-    // When target cell matches the current cell it means we reached the left or right boundary.
-    if (targetCell === from.cellElement) {
-        return;
-    }
-    // Move focus on the cell interactive content or the cell itself.
-    const targetCellFocusables = getFocusables(targetCell);
-    const focusIndex = delta.x < 0 ? targetCellFocusables.length - 1 : delta.x > 0 ? 0 : from.elementIndex;
-    const focusTarget = (_a = targetCellFocusables[focusIndex]) !== null && _a !== void 0 ? _a : targetCell;
-    focus(focusTarget);
-}
-/**
- * Makes the cell element, the first interactive element or the first cell of the table user-focusable.
- */
-export function ensureSingleFocusable(table, cell) {
-    var _a;
-    const firstTableCell = table.querySelector('td,th');
-    // A single element of the table is made user-focusable.
-    // It defaults to the first interactive element of the first cell or the first cell itself otherwise.
-    let focusTarget = (_a = (firstTableCell && getFocusables(firstTableCell)[0])) !== null && _a !== void 0 ? _a : firstTableCell;
-    // When a navigation-focused element is present in the table it is used for user-navigation instead.
-    if (cell && table.contains(cell.element) && isUserFocusable(cell.element)) {
-        focusTarget = cell.element;
-    }
-    setTabIndex(focusTarget, 0);
-}
 /**
  * Makes all element focusable children pseudo-focusable unless the grid navigation is suppressed.
  */
@@ -144,7 +71,7 @@ export function getFirstFocusable(element) {
 /**
  * Finds the closest row to the targetAriaRowIndex+delta in the direction of delta.
  */
-function findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta) {
+export function findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta) {
     var _a;
     let targetRow = null;
     const rowElements = Array.from(table.querySelectorAll('tr[aria-rowindex]'));
@@ -169,7 +96,7 @@ function findTableRowByAriaRowIndex(table, targetAriaRowIndex, delta) {
 /**
  * Finds the closest column to the targetAriaColIndex+delta in the direction of delta.
  */
-function findTableRowCellByAriaColIndex(tableRow, targetAriaColIndex, delta) {
+export function findTableRowCellByAriaColIndex(tableRow, targetAriaColIndex, delta) {
     var _a;
     let targetCell = null;
     const cellElements = Array.from(tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]'));
@@ -191,16 +118,9 @@ function findTableRowCellByAriaColIndex(tableRow, targetAriaColIndex, delta) {
     }
     return targetCell;
 }
-function focus(element) {
-    setTabIndex(element, 0);
-    element === null || element === void 0 ? void 0 : element.focus();
-}
-function setTabIndex(element, tabIndex) {
+export function setTabIndex(element, tabIndex) {
     if (element && element.tabIndex !== tabIndex) {
         element.tabIndex = tabIndex;
     }
 }
-function isUserFocusable(element) {
-    return element.matches(FOCUSABLES_SELECTOR);
-}
 //# sourceMappingURL=utils.js.map