@cloudscape-design/components 3.0.500 → 3.0.502

package/table/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler, CancelableEventHandler } from '../internal/events';\nimport { Optional } from '../internal/types';\nimport ColumnDisplayProperties = TableProps.ColumnDisplayProperties;\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface TableForwardRefType {\n  <T>(props: TableProps<T> & { ref?: React.Ref<TableProps.Ref> }): JSX.Element;\n}\n\nexport interface TableProps<T = any> extends BaseComponentProps {\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Footer of the table container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Displayed when the `items` property is an empty array. Use it to render an empty or no-match state.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Specifies the data that's displayed in the table rows. Each item contains the data for one row. The display of a row is handled\n   * by the `cell` property of each column definition in the `columnDefinitions` property.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the table in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text that's displayed when the table is in a loading state.\n   */\n  loadingText?: string;\n\n  /**\n   * Specifies a property that uniquely identifies an individual item.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used to connect `items` and `selectedItems` values when they reference different objects.\n   */\n  trackBy?: TableProps.TrackBy<T>;\n\n  /**\n   * The columns configuration object\n   * * `id` (string) - Specifies a unique column identifier. The property is used 1) as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering,\n   *   and 2) to match entries in the `columnDisplay` property, if defined.\n   * * `header` (ReactNode) - Determines the display of the column header.\n   * * `cell` ((item) => ReactNode) - Determines the display of a cell's content. You receive the current table row\n   *   item as an argument.\n   * * `width` (string | number) - Specifies the column width. Corresponds to the `width` css-property. If the width is not set,\n   *   the browser automatically adjusts the column width based on the content. When `resizableColumns` property is\n   *   set to `true`, additional constraints apply: 1) string values are not allowed, and 2) the last visible column always\n   *   fills the remaining space of the table so the specified width is ignored.\n   * * `minWidth` (string | number) - Specifies the minimum column width. Corresponds to the `min-width` css-property. When\n   *   `resizableColumns` property is set to `true`, additional constraints apply: 1) string values are not allowed,\n   *   and 2) the column can't resize below than the specified width (defaults to \"120px\"). We recommend that you set a minimum width\n   *   of at least 176px for columns that are editable.\n   * * `maxWidth` (string | number) - Specifies the maximum column width. Corresponds to the `max-width` css-property.\n   *   Note that when the `resizableColumns` property is set to `true` this property is ignored.\n   * * `ariaLabel` (LabelData => string) - An optional function that's called to provide an `aria-label` for the cell header.\n   *   It receives the current sorting state of this column, the direction it's sorted in, and an indication of\n   *   whether the sorting is disabled, as three Boolean values: `sorted`, `descending` and `disabled`.\n   *   We recommend that you use this for sortable columns to provide more meaningful labels based on the\n   *   current sorting direction.\n   * * `sortingField` (string) - Enables default column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. Provide the name of the property within each item that should be used for sorting by this column.\n   *   For more complex sorting use `sortingComparator` instead.\n   * * `sortingComparator` ((T, T) => number) - Enables custom column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. This property accepts a custom comparator that is used to compare two items.\n   *   The comparator must implement ascending ordering, and the output is inverted automatically in case of descending order.\n   *   If present, the `sortingField` property is ignored.\n   * * `editConfig` (EditConfig) - Enables inline editing in column when present. The value is used to configure the editing behavior.\n   * * * `editConfig.ariaLabel` (string) - Specifies a label for the edit control. Visually hidden but read by screen readers.\n   * * * `editConfig.errorIconAriaLabel` (string) - Specifies an ariaLabel for the error icon that is displayed when the validation fails.\n   * * * `editConfig.editIconAriaLabel` (string) - Specifies an alternate text for the edit icon used in column header.\n   * * * `editConfig.constraintText` (string) - Constraint text that is displayed below the edit control.\n   * * * `editConfig.validation` ((item, value) => string) - A function that allows you to validate the value of the edit control.\n   *            Return a string from the function to display an error message. Return `undefined` (or no return) from the function to indicate that the value is valid.\n   * * * `editConfig.editingCell` ((item, cellContext) => ReactNode) - Determines the display of a cell's content when inline editing is active on a cell;\n   *        You receive the current table row `item` and a `cellContext` object as arguments.\n   *        The `cellContext` object contains the following properties:\n   *  *  * `cellContext.currentValue` - State to keep track of a value in input fields while editing.\n   *  *  * `cellContext.setValue` - Function to update `currentValue`. This should be called when the value in input field changes.\n   *  * `isRowHeader` (boolean) - Specifies that cells in this column should be used as row headers.\n   */\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>;\n  /**\n   * Specifies the selection type (`'single' | 'multi'`).\n   */\n  selectionType?: TableProps.SelectionType;\n  /**\n   * List of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n\n  /**\n   * Use this slot to add filtering controls to the table.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the table.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the table.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Determines whether a given item is disabled. If an item is disabled, the user can't select it.\n   */\n  isItemDisabled?: TableProps.IsItemDisabled<T>;\n\n  /**\n   * Specifies if text wraps within table cells. If set to `true`, long text within cells may wrap onto\n   * multiple lines instead of being truncated with an ellipsis.\n   */\n  wrapLines?: boolean;\n\n  /**\n   * Specifies if table rows alternate being shaded and unshaded. If set to `true`, every other row will be shaded.\n   */\n  stripedRows?: boolean;\n\n  /**\n   * Toggles the content density of the table. Defaults to `'comfortable'`.\n   */\n  contentDensity?: 'comfortable' | 'compact';\n\n  /**\n   * Specifies if columns can be resized. If set to `true`, users can resize the columns in the table.\n   */\n  resizableColumns?: boolean;\n\n  /**\n   * Specifies alternative text for the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Specifies the alternative text for an item.\n   * * `allItemsSelectionLabel` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.\n   * * `selectionGroupLabel` (string) - Specifies the alternative text for the whole selection and single-selection column header.\n   *                                    It is prefixed to `itemSelectionLabel` and `allItemsSelectionLabel` when they are set.\n   * You can use the first argument of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The `itemSelectionLabel` for individual\n   * items also receives the corresponding  `Item` object. You can use the `selectionGroupLabel` to\n   * add a meaningful description to the whole selection.\n   * * `tableLabel` (string) - Provides an alternative text for the table. If you use a header for this table, you may reuse the string\n   *                           to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.\n   * * `resizerRoleDescription` (string) - Provides role description for table column resizer buttons.\n   * * `activateEditLabel` (EditableColumnDefinition, Item) => string -\n   *                      Specifies an alternative text for the edit button in editable cells.\n   * * `cancelEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the cancel button in editable cells.\n   * * `submitEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the submit button in editable cells.\n   * * `successfulEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the success icon in editable cells. This text is also announced to screen readers.\n   * * `submittingEditText` (EditableColumnDefinition) => string -\n   *                      Specifies a text that is announced to screen readers when a cell edit operation is submitted.\n   * @i18n\n   */\n  ariaLabels?: TableProps.AriaLabels<T>;\n\n  /**\n   * Specifies the definition object of the currently sorted column. Make sure you pass an object that's\n   * present in the `columnDefinitions` array.\n   */\n  sortingColumn?: TableProps.SortingColumn<T>;\n  /**\n   * Specifies whether to use a descending sort order.\n   */\n  sortingDescending?: boolean;\n  /**\n   * Specifies if sorting buttons are disabled. For example, use this property\n   * to prevent the user from sorting before items are fully loaded.\n   */\n  sortingDisabled?: boolean;\n\n  /**\n   * Specifies the number of first and/or last columns that should be sticky.\n   *\n   * If the available scrollable space is less than a certain threshold, the feature is deactivated.\n   *\n   * Use it in conjunction with the sticky columns preference of the\n   * [collection preferences](/components/collection-preferences/) component.\n   *\n   */\n  stickyColumns?: TableProps.StickyColumns;\n\n  /**\n   * Specifies an array that represents the table columns in the order in which they will be displayed, together with their visibility.\n   *\n   * If not set, all columns are displayed and the order is dictated by the `columnDefinitions` property.\n   *\n   * Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.\n   */\n  columnDisplay?: ReadonlyArray<ColumnDisplayProperties>;\n\n  /**\n   * Specifies an array containing the `id`s of visible columns. If not set, all columns are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of ids doesn't influence the order in which columns are displayed - this is dictated by the `columnDefinitions` property.\n   *\n   * @deprecated Replaced by `columnDisplay`.\n   */\n  visibleColumns?: ReadonlyArray<string>;\n\n  /**\n   * Fired when the user resizes a table column. The event detail contains an array of column widths in pixels,\n   * including the hidden via preferences columns. Use this event to persist the column widths.\n   */\n  onColumnWidthsChange?: NonCancelableEventHandler<TableProps.ColumnWidthsChangeDetail>;\n\n  /**\n   * Called when either the column to sort by or the direction of sorting changes upon user interaction.\n   * The event detail contains the current sortingColumn and isDescending.\n   */\n  onSortingChange?: NonCancelableEventHandler<TableProps.SortingState<T>>;\n\n  /**\n   * Fired when a user interaction triggers a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<TableProps.SelectionChangeDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row. The event detail contains the index of the\n   * clicked row and the row object itself. Use this event to define a row click behavior.\n   */\n  onRowClick?: NonCancelableEventHandler<TableProps.OnRowClickDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row with the right mouse click. The event detail\n   * contains the index of the clicked row and the row object itself. Use this event to override\n   * the default browser context menu behavior.\n   */\n  onRowContextMenu?: CancelableEventHandler<TableProps.OnRowContextMenuDetail<T>>;\n\n  /**\n   * If set to `true`, the table header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n\n  /**\n   * Specifies a vertical offset (in pixels) for the sticky header. For example, use this if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Specify a table variant with one of the following:\n   * * `container` - Use this variant to have the table displayed within a container.\n   * * `borderless` - Use this variant when the table should have no outer borders or shadow\n   *                  (such as in a dashboard item container).\n   * * `embedded` - Use this variant within a parent container (such as a modal, expandable\n   *                section, container or split panel).\n   *                **Deprecated**, replaced by `borderless` and `container`.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * * `full-page` – Use this variant when the table is the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `embedded`, `stacked`, and `full-page` variants\n   */\n  variant?: TableProps.Variant;\n\n  /**\n   * Use this property to inform screen readers how many items there are in a table.\n   * It specifies the total count of all items in a table.\n   * If there is an unknown total of items in a table, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of items is currently displayed in the table.\n   *  It specifies the index (1-based) of the first item in the table.\n   *  If the table has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: TableProps.LiveAnnouncement) => string;\n  /**\n   * Specifies a function that will be called after user submits an inline edit.\n   * Return a promise to keep loading state while the submit request is in progress.\n   */\n  submitEdit?: TableProps.SubmitEditFunction<T>;\n\n  /**\n   * Called whenever user cancels an inline edit. Use this function to reset any\n   * validation states, or show warning for unsaved changes.\n   */\n  onEditCancel?: CancelableEventHandler;\n}\n\nexport namespace TableProps {\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export interface CellContext<V> {\n    currentValue: Optional<V>;\n    setValue: (value: V | undefined) => void;\n  }\n\n  export interface EditConfig<T, V = any> {\n    /**\n     * Specifies a label for the edit control. Visually hidden but read\n     * by screen readers.\n     */\n    ariaLabel?: string;\n    /**\n     * Specifies an ariaLabel for the error icon that is displayed when\n     * the validation fails.\n     */\n    errorIconAriaLabel?: string;\n    /**\n     * Specifies an alternate text for the edit icon used in column header.\n     */\n    editIconAriaLabel?: string;\n    /**\n     * Constraint text that is displayed below the edit control.\n     */\n    constraintText?: string;\n    /**\n     * A function that allows you to validate the value of the edit control. Return\n     * a string from the function to display an error message. Return\n     * `undefined` (or no return) from the function to indicate that the value is valid.\n     * @param item - The item that is being edited.\n     * @param value - The current value of the edit control.\n     */\n    validation?: (item: T, value: Optional<V>) => Optional<string>;\n\n    /**\n     * Determines the display of a cell's content when inline edit is active.\n     */\n    editingCell(item: T, ctx: TableProps.CellContext<any>): React.ReactNode;\n  }\n\n  export type ColumnDefinition<ItemType> = {\n    id?: string;\n    header: React.ReactNode;\n    ariaLabel?(data: LabelData): string;\n    width?: number | string;\n    minWidth?: number | string;\n    maxWidth?: number | string;\n    editConfig?: EditConfig<ItemType>;\n    isRowHeader?: boolean;\n    cell(item: ItemType): React.ReactNode;\n  } & SortingColumn<ItemType>;\n\n  export interface StickyColumns {\n    first?: number;\n    last?: number;\n  }\n\n  export type SelectionType = 'single' | 'multi';\n  export type Variant = 'container' | 'embedded' | 'borderless' | 'stacked' | 'full-page';\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n  export type IsItemDisabled<T> = (item: T) => boolean;\n  export interface AriaLabels<T> {\n    allItemsSelectionLabel?: (data: TableProps.SelectionState<T>) => string;\n    itemSelectionLabel?: (data: TableProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel?: string;\n    tableLabel?: string;\n    resizerRoleDescription?: string;\n    // do not use <T> to prevent overly strict validation on consumer end\n    // it works, practically, we are only interested in `id` and `header` properties only\n    activateEditLabel?: (column: ColumnDefinition<any>, item: T) => string;\n    cancelEditLabel?: (column: ColumnDefinition<any>) => string;\n    submitEditLabel?: (column: ColumnDefinition<any>) => string;\n    submittingEditText?: (column: ColumnDefinition<any>) => string;\n    successfulEditLabel?: (column: ColumnDefinition<any>) => string;\n  }\n  export interface SortingState<T> {\n    isDescending?: boolean;\n    sortingColumn: SortingColumn<T>;\n  }\n  export interface SortingColumn<T> {\n    sortingField?: string;\n    sortingComparator?: (a: T, b: T) => number;\n  }\n  export interface LabelData {\n    sorted: boolean;\n    descending: boolean;\n    disabled: boolean;\n  }\n  export interface OnRowClickDetail<T> {\n    rowIndex: number;\n    item: T;\n  }\n  export interface OnRowContextMenuDetail<T> {\n    rowIndex: number;\n    item: T;\n    clientX: number;\n    clientY: number;\n  }\n\n  export interface ColumnWidthsChangeDetail {\n    widths: ReadonlyArray<number>;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled and you call this function, the table\n     * scroll parent scrolls to reveal the first row of the table.\n     */\n    scrollToTop(): void;\n\n    /**\n     * Dismiss an inline edit if currently active.\n     */\n    cancelEdit?(): void;\n  }\n\n  export type SubmitEditFunction<ItemType, ValueType = unknown> = (\n    item: ItemType,\n    column: ColumnDefinition<ItemType>,\n    newValue: ValueType\n  ) => Promise<void> | void;\n\n  export interface ColumnDisplayProperties {\n    id: string;\n    visible: boolean;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler, CancelableEventHandler } from '../internal/events';\nimport { Optional } from '../internal/types';\nimport ColumnDisplayProperties = TableProps.ColumnDisplayProperties;\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface TableForwardRefType {\n  <T>(props: TableProps<T> & { ref?: React.Ref<TableProps.Ref> }): JSX.Element;\n}\n\nexport interface TableProps<T = any> extends BaseComponentProps {\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Footer of the table container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Displayed when the `items` property is an empty array. Use it to render an empty or no-match state.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Specifies the data that's displayed in the table rows. Each item contains the data for one row. The display of a row is handled\n   * by the `cell` property of each column definition in the `columnDefinitions` property.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the table in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text that's displayed when the table is in a loading state.\n   */\n  loadingText?: string;\n\n  /**\n   * Specifies a property that uniquely identifies an individual item.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used to connect `items` and `selectedItems` values when they reference different objects.\n   */\n  trackBy?: TableProps.TrackBy<T>;\n\n  /**\n   * The columns configuration object\n   * * `id` (string) - Specifies a unique column identifier. The property is used 1) as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering,\n   *   and 2) to match entries in the `columnDisplay` property, if defined.\n   * * `header` (ReactNode) - Determines the display of the column header.\n   * * `cell` ((item) => ReactNode) - Determines the display of a cell's content. You receive the current table row\n   *   item as an argument.\n   * * `width` (string | number) - Specifies the column width. Corresponds to the `width` css-property. If the width is not set,\n   *   the browser automatically adjusts the column width based on the content. When `resizableColumns` property is\n   *   set to `true`, additional constraints apply: 1) string values are not allowed, and 2) the last visible column always\n   *   fills the remaining space of the table so the specified width is ignored.\n   * * `minWidth` (string | number) - Specifies the minimum column width. Corresponds to the `min-width` css-property. When\n   *   `resizableColumns` property is set to `true`, additional constraints apply: 1) string values are not allowed,\n   *   and 2) the column can't resize below than the specified width (defaults to \"120px\"). We recommend that you set a minimum width\n   *   of at least 176px for columns that are editable.\n   * * `maxWidth` (string | number) - Specifies the maximum column width. Corresponds to the `max-width` css-property.\n   *   Note that when the `resizableColumns` property is set to `true` this property is ignored.\n   * * `ariaLabel` (LabelData => string) - An optional function that's called to provide an `aria-label` for the cell header.\n   *   It receives the current sorting state of this column, the direction it's sorted in, and an indication of\n   *   whether the sorting is disabled, as three Boolean values: `sorted`, `descending` and `disabled`.\n   *   We recommend that you use this for sortable columns to provide more meaningful labels based on the\n   *   current sorting direction.\n   * * `sortingField` (string) - Enables default column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. Provide the name of the property within each item that should be used for sorting by this column.\n   *   For more complex sorting use `sortingComparator` instead.\n   * * `sortingComparator` ((T, T) => number) - Enables custom column sorting. The value is used in [collection hooks](/get-started/dev-guides/collection-hooks/)\n   *   to reorder the items. This property accepts a custom comparator that is used to compare two items.\n   *   The comparator must implement ascending ordering, and the output is inverted automatically in case of descending order.\n   *   If present, the `sortingField` property is ignored.\n   * * `editConfig` (EditConfig) - Enables inline editing in column when present. The value is used to configure the editing behavior.\n   * * * `editConfig.ariaLabel` (string) - Specifies a label for the edit control. Visually hidden but read by screen readers.\n   * * * `editConfig.errorIconAriaLabel` (string) - Specifies an ariaLabel for the error icon that is displayed when the validation fails.\n   * * * `editConfig.editIconAriaLabel` (string) - Specifies an alternate text for the edit icon used in column header.\n   * * * `editConfig.constraintText` (string) - Constraint text that is displayed below the edit control.\n   * * * `editConfig.disabledReason` ((item) => string | undefined) - A function that determines whether inline edit for certain items is disabled, and provides a reason why.\n   *            Return a string from the function to disable inline edit with a reason. Return `undefined` (or no return) from the function allow inline edit.\n   * * * `editConfig.validation` ((item, value) => string) - A function that allows you to validate the value of the edit control.\n   *            Return a string from the function to display an error message. Return `undefined` (or no return) from the function to indicate that the value is valid.\n   * * * `editConfig.editingCell` ((item, cellContext) => ReactNode) - Determines the display of a cell's content when inline editing is active on a cell;\n   *        You receive the current table row `item` and a `cellContext` object as arguments.\n   *        The `cellContext` object contains the following properties:\n   *  *  * `cellContext.currentValue` - State to keep track of a value in input fields while editing.\n   *  *  * `cellContext.setValue` - Function to update `currentValue`. This should be called when the value in input field changes.\n   *  * `isRowHeader` (boolean) - Specifies that cells in this column should be used as row headers.\n   */\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<T>>;\n  /**\n   * Specifies the selection type (`'single' | 'multi'`).\n   */\n  selectionType?: TableProps.SelectionType;\n  /**\n   * List of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n\n  /**\n   * Use this slot to add filtering controls to the table.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the table.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the table.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Determines whether a given item is disabled. If an item is disabled, the user can't select it.\n   */\n  isItemDisabled?: TableProps.IsItemDisabled<T>;\n\n  /**\n   * Specifies if text wraps within table cells. If set to `true`, long text within cells may wrap onto\n   * multiple lines instead of being truncated with an ellipsis.\n   */\n  wrapLines?: boolean;\n\n  /**\n   * Specifies if table rows alternate being shaded and unshaded. If set to `true`, every other row will be shaded.\n   */\n  stripedRows?: boolean;\n\n  /**\n   * Toggles the content density of the table. Defaults to `'comfortable'`.\n   */\n  contentDensity?: 'comfortable' | 'compact';\n\n  /**\n   * Specifies if columns can be resized. If set to `true`, users can resize the columns in the table.\n   */\n  resizableColumns?: boolean;\n\n  /**\n   * Specifies alternative text for the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Specifies the alternative text for an item.\n   * * `allItemsSelectionLabel` ((SelectionState) => string) - Specifies the alternative text for multi-selection column header.\n   * * `selectionGroupLabel` (string) - Specifies the alternative text for the whole selection and single-selection column header.\n   *                                    It is prefixed to `itemSelectionLabel` and `allItemsSelectionLabel` when they are set.\n   * You can use the first argument of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The `itemSelectionLabel` for individual\n   * items also receives the corresponding  `Item` object. You can use the `selectionGroupLabel` to\n   * add a meaningful description to the whole selection.\n   * * `tableLabel` (string) - Provides an alternative text for the table. If you use a header for this table, you may reuse the string\n   *                           to provide a caption-like description. For example, tableLabel=Instances will be announced as 'Instances table'.\n   * * `resizerRoleDescription` (string) - Provides role description for table column resizer buttons.\n   * * `activateEditLabel` (EditableColumnDefinition, Item) => string -\n   *                      Specifies an alternative text for the edit button in editable cells.\n   * * `cancelEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the cancel button in editable cells.\n   * * `submitEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the submit button in editable cells.\n   * * `successfulEditLabel` (EditableColumnDefinition) => string -\n   *                      Specifies an alternative text for the success icon in editable cells. This text is also announced to screen readers.\n   * * `submittingEditText` (EditableColumnDefinition) => string -\n   *                      Specifies a text that is announced to screen readers when a cell edit operation is submitted.\n   * @i18n\n   */\n  ariaLabels?: TableProps.AriaLabels<T>;\n\n  /**\n   * Specifies the definition object of the currently sorted column. Make sure you pass an object that's\n   * present in the `columnDefinitions` array.\n   */\n  sortingColumn?: TableProps.SortingColumn<T>;\n  /**\n   * Specifies whether to use a descending sort order.\n   */\n  sortingDescending?: boolean;\n  /**\n   * Specifies if sorting buttons are disabled. For example, use this property\n   * to prevent the user from sorting before items are fully loaded.\n   */\n  sortingDisabled?: boolean;\n\n  /**\n   * Specifies the number of first and/or last columns that should be sticky.\n   *\n   * If the available scrollable space is less than a certain threshold, the feature is deactivated.\n   *\n   * Use it in conjunction with the sticky columns preference of the\n   * [collection preferences](/components/collection-preferences/) component.\n   *\n   */\n  stickyColumns?: TableProps.StickyColumns;\n\n  /**\n   * Specifies an array that represents the table columns in the order in which they will be displayed, together with their visibility.\n   *\n   * If not set, all columns are displayed and the order is dictated by the `columnDefinitions` property.\n   *\n   * Use it in conjunction with the content display preference of the [collection preferences](/components/collection-preferences/) component.\n   */\n  columnDisplay?: ReadonlyArray<ColumnDisplayProperties>;\n\n  /**\n   * Specifies an array containing the `id`s of visible columns. If not set, all columns are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of ids doesn't influence the order in which columns are displayed - this is dictated by the `columnDefinitions` property.\n   *\n   * @deprecated Replaced by `columnDisplay`.\n   */\n  visibleColumns?: ReadonlyArray<string>;\n\n  /**\n   * Fired when the user resizes a table column. The event detail contains an array of column widths in pixels,\n   * including the hidden via preferences columns. Use this event to persist the column widths.\n   */\n  onColumnWidthsChange?: NonCancelableEventHandler<TableProps.ColumnWidthsChangeDetail>;\n\n  /**\n   * Called when either the column to sort by or the direction of sorting changes upon user interaction.\n   * The event detail contains the current sortingColumn and isDescending.\n   */\n  onSortingChange?: NonCancelableEventHandler<TableProps.SortingState<T>>;\n\n  /**\n   * Fired when a user interaction triggers a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<TableProps.SelectionChangeDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row. The event detail contains the index of the\n   * clicked row and the row object itself. Use this event to define a row click behavior.\n   */\n  onRowClick?: NonCancelableEventHandler<TableProps.OnRowClickDetail<T>>;\n\n  /**\n   * Note: This feature is provided for backwards compatibility. Its use is not recommended,\n   * and it may be deprecated in the future.\n   *\n   * Called when the user clicked at a table row with the right mouse click. The event detail\n   * contains the index of the clicked row and the row object itself. Use this event to override\n   * the default browser context menu behavior.\n   */\n  onRowContextMenu?: CancelableEventHandler<TableProps.OnRowContextMenuDetail<T>>;\n\n  /**\n   * If set to `true`, the table header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n\n  /**\n   * Specifies a vertical offset (in pixels) for the sticky header. For example, use this if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Specify a table variant with one of the following:\n   * * `container` - Use this variant to have the table displayed within a container.\n   * * `borderless` - Use this variant when the table should have no outer borders or shadow\n   *                  (such as in a dashboard item container).\n   * * `embedded` - Use this variant within a parent container (such as a modal, expandable\n   *                section, container or split panel).\n   *                **Deprecated**, replaced by `borderless` and `container`.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * * `full-page` – Use this variant when the table is the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `embedded`, `stacked`, and `full-page` variants\n   */\n  variant?: TableProps.Variant;\n\n  /**\n   * Use this property to inform screen readers how many items there are in a table.\n   * It specifies the total count of all items in a table.\n   * If there is an unknown total of items in a table, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of items is currently displayed in the table.\n   *  It specifies the index (1-based) of the first item in the table.\n   *  If the table has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: TableProps.LiveAnnouncement) => string;\n  /**\n   * Specifies a function that will be called after user submits an inline edit.\n   * Return a promise to keep loading state while the submit request is in progress.\n   */\n  submitEdit?: TableProps.SubmitEditFunction<T>;\n\n  /**\n   * Called whenever user cancels an inline edit. Use this function to reset any\n   * validation states, or show warning for unsaved changes.\n   */\n  onEditCancel?: CancelableEventHandler;\n}\n\nexport namespace TableProps {\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export interface CellContext<V> {\n    currentValue: Optional<V>;\n    setValue: (value: V | undefined) => void;\n  }\n\n  export interface EditConfig<T, V = any> {\n    /**\n     * Specifies a label for the edit control. Visually hidden but read\n     * by screen readers.\n     */\n    ariaLabel?: string;\n    /**\n     * Specifies an ariaLabel for the error icon that is displayed when\n     * the validation fails.\n     */\n    errorIconAriaLabel?: string;\n    /**\n     * Specifies an alternate text for the edit icon used in column header.\n     */\n    editIconAriaLabel?: string;\n    /**\n     * Constraint text that is displayed below the edit control.\n     */\n    constraintText?: string;\n    /**\n     * A function that allows you to validate the value of the edit control. Return\n     * a string from the function to display an error message. Return\n     * `undefined` (or no return) from the function to indicate that the value is valid.\n     * @param item - The item that is being edited.\n     * @param value - The current value of the edit control.\n     */\n    validation?: (item: T, value: Optional<V>) => Optional<string>;\n\n    /**\n     * Determines the display of a cell's content when inline edit is active.\n     */\n    editingCell(item: T, ctx: TableProps.CellContext<any>): React.ReactNode;\n\n    /**\n     * Determines whether inline edit for certain items is disabled, and provides a reason why.\n     */\n    disabledReason?: (item: T) => string | undefined;\n  }\n\n  export type ColumnDefinition<ItemType> = {\n    id?: string;\n    header: React.ReactNode;\n    ariaLabel?(data: LabelData): string;\n    width?: number | string;\n    minWidth?: number | string;\n    maxWidth?: number | string;\n    editConfig?: EditConfig<ItemType>;\n    isRowHeader?: boolean;\n    cell(item: ItemType): React.ReactNode;\n  } & SortingColumn<ItemType>;\n\n  export interface StickyColumns {\n    first?: number;\n    last?: number;\n  }\n\n  export type SelectionType = 'single' | 'multi';\n  export type Variant = 'container' | 'embedded' | 'borderless' | 'stacked' | 'full-page';\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n  export type IsItemDisabled<T> = (item: T) => boolean;\n  export interface AriaLabels<T> {\n    allItemsSelectionLabel?: (data: TableProps.SelectionState<T>) => string;\n    itemSelectionLabel?: (data: TableProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel?: string;\n    tableLabel?: string;\n    resizerRoleDescription?: string;\n    // do not use <T> to prevent overly strict validation on consumer end\n    // it works, practically, we are only interested in `id` and `header` properties only\n    activateEditLabel?: (column: ColumnDefinition<any>, item: T) => string;\n    cancelEditLabel?: (column: ColumnDefinition<any>) => string;\n    submitEditLabel?: (column: ColumnDefinition<any>) => string;\n    submittingEditText?: (column: ColumnDefinition<any>) => string;\n    successfulEditLabel?: (column: ColumnDefinition<any>) => string;\n  }\n  export interface SortingState<T> {\n    isDescending?: boolean;\n    sortingColumn: SortingColumn<T>;\n  }\n  export interface SortingColumn<T> {\n    sortingField?: string;\n    sortingComparator?: (a: T, b: T) => number;\n  }\n  export interface LabelData {\n    sorted: boolean;\n    descending: boolean;\n    disabled: boolean;\n  }\n  export interface OnRowClickDetail<T> {\n    rowIndex: number;\n    item: T;\n  }\n  export interface OnRowContextMenuDetail<T> {\n    rowIndex: number;\n    item: T;\n    clientX: number;\n    clientY: number;\n  }\n\n  export interface ColumnWidthsChangeDetail {\n    widths: ReadonlyArray<number>;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled and you call this function, the table\n     * scroll parent scrolls to reveal the first row of the table.\n     */\n    scrollToTop(): void;\n\n    /**\n     * Dismiss an inline edit if currently active.\n     */\n    cancelEdit?(): void;\n  }\n\n  export type SubmitEditFunction<ItemType, ValueType = unknown> = (\n    item: ItemType,\n    column: ColumnDefinition<ItemType>,\n    newValue: ValueType\n  ) => Promise<void> | void;\n\n  export interface ColumnDisplayProperties {\n    id: string;\n    visible: boolean;\n  }\n}\n"]}

package/table/table-role/grid-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-navigation.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/grid-navigation.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAe,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAWhE;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,eAoC/G"}
+{"version":3,"file":"grid-navigation.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/grid-navigation.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAe,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAUhE;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,mBAAmB,eAoC/G"}

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import { useEffect, useMemo } from 'react';
-import { defaultIsSuppressed, findTableRowByAriaRowIndex, findTableRowCellByAriaColIndex } from './utils';
+import { defaultIsSuppressed, findTableRowByAriaRowIndex, findTableRowCellByAriaColIndex, getClosestCell, } from './utils';
 import { KeyCode } from '../../internal/keycode';
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 import { nodeBelongs } from '../../internal/utils/node-belongs';
@@ -51,13 +51,17 @@ class GridNavigationProcessor {
         this._table = null;
         // State
         this.focusedCell = null;
-        this.focusables = new Set();
+        this.focusables = new Map();
         this.focusHandlers = new Map();
         this.focusTarget = null;
         this.registerFocusable = (focusable, changeHandler) => {
-            this.focusables.add(focusable);
+            this.focusables.set(focusable, false);
             this.focusHandlers.set(focusable, changeHandler);
-            changeHandler(this.focusTarget, this.isSuppressed(focusable.current));
+            const isFocusable = this.focusTarget === focusable || this.isSuppressed(focusable);
+            if (isFocusable) {
+                this.focusables.set(focusable, isFocusable);
+                changeHandler(isFocusable);
+            }
             return () => this.unregisterFocusable(focusable);
         };
         this.unregisterFocusable = (focusable) => {
@@ -69,16 +73,16 @@ class GridNavigationProcessor {
             if (!(event.target instanceof HTMLElement)) {
                 return;
             }
-            const cell = this.findFocusedCell(event.target);
-            if (!cell) {
+            this.updateFocusedCell(event.target);
+            if (!this.focusedCell) {
                 return;
             }
-            this.focusedCell = cell;
             this.updateFocusTarget();
             // 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) {
-                (_a = this.getFocusablesFrom(cell.cellElement)[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            const cellElement = getClosestCell(this.focusedCell.element);
+            if (this.focusedCell.element === cellElement) {
+                (_a = this.getFocusablesFrom(cellElement)[0]) === null || _a === void 0 ? void 0 : _a.focus();
             }
         };
         this.onFocusout = () => {
@@ -147,15 +151,6 @@ class GridNavigationProcessor {
                     return;
             }
         };
-        this.getRegisteredElements = () => {
-            const registeredElements = new Set();
-            for (const focusable of this.focusables) {
-                if (focusable.current) {
-                    registeredElements.add(focusable.current);
-                }
-            }
-            return registeredElements;
-        };
     }
     init(table) {
         this._table = table;
@@ -167,7 +162,7 @@ class GridNavigationProcessor {
             this.table.removeEventListener('focusin', this.onFocusin);
             this.table.removeEventListener('focusout', this.onFocusout);
             this.table.removeEventListener('keydown', this.onKeydown);
-            this.focusables.forEach(this.unregisterFocusable);
+            [...this.focusables.keys()].forEach(this.unregisterFocusable);
         };
     }
     cleanup() {
@@ -179,11 +174,10 @@ class GridNavigationProcessor {
     refresh() {
         // Timeout ensures the newly rendered content elements are registered.
         setTimeout(() => {
+            var _a;
             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);
-                }
+                this.updateFocusedCell((_a = this.focusedCell) === null || _a === void 0 ? void 0 : _a.element);
                 this.updateFocusTarget();
             }
         }, 0);
@@ -203,33 +197,38 @@ class GridNavigationProcessor {
     }
     updateFocusTarget() {
         this.focusTarget = this.getSingleFocusable();
-        this.focusables.forEach(focusable => {
-            const element = focusable.current;
-            const handler = this.focusHandlers.get(focusable);
-            handler(this.focusTarget, this.isSuppressed(element));
-        });
+        for (const [focusableElement, isFocusable] of this.focusables) {
+            const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);
+            if (newIsFocusable !== isFocusable) {
+                this.focusables.set(focusableElement, newIsFocusable);
+                this.focusHandlers.get(focusableElement)(newIsFocusable);
+            }
+        }
     }
     isSuppressed(element) {
         return !element || defaultIsSuppressed(element);
     }
     isRegistered(element) {
-        return !element || this.getRegisteredElements().has(element);
+        return !element || this.focusables.has(element);
     }
-    findFocusedCell(focusedElement) {
+    updateFocusedCell(focusedElement) {
         var _a, _b;
-        const cellElement = focusedElement.closest('td,th');
+        if (!focusedElement) {
+            return;
+        }
+        const cellElement = getClosestCell(focusedElement);
         const rowElement = cellElement === null || cellElement === void 0 ? void 0 : cellElement.closest('tr');
         if (!cellElement || !rowElement) {
-            return this.focusedCell;
+            return;
         }
         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 this.focusedCell;
+            return;
         }
         const cellFocusables = this.getFocusablesFrom(cellElement);
         const elementIndex = cellFocusables.indexOf(focusedElement);
-        return { rowIndex, colIndex, rowElement, cellElement, element: focusedElement, elementIndex };
+        this.focusedCell = { rowIndex, colIndex, element: focusedElement, elementIndex };
     }
     getNextFocusable(from, delta) {
         var _a;
@@ -240,7 +239,8 @@ class GridNavigationProcessor {
             return null;
         }
         // Return next interactive cell content element if available.
-        const cellFocusables = this.getFocusablesFrom(from.cellElement);
+        const cellElement = getClosestCell(from.element);
+        const cellFocusables = cellElement ? this.getFocusablesFrom(cellElement) : [];
         const nextElementIndex = from.elementIndex + delta.x;
         if (delta.x && from.elementIndex !== -1 && 0 <= nextElementIndex && nextElementIndex < cellFocusables.length) {
             return cellFocusables[nextElementIndex];
@@ -252,7 +252,7 @@ class GridNavigationProcessor {
             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) {
+        if (targetCell === cellElement && delta.x !== 0) {
             return null;
         }
         // Return cell interactive content or the cell itself.
@@ -275,8 +275,7 @@ class GridNavigationProcessor {
         return focusTarget;
     }
     getFocusablesFrom(target) {
-        const registeredElements = this.getRegisteredElements();
-        return getAllFocusables(target).filter(el => registeredElements.has(el));
+        return getAllFocusables(target).filter(el => this.focusables.has(el));
     }
 }
 //# 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 React from 'react';\nimport { useEffect, useMemo } from 'react';\nimport { defaultIsSuppressed, findTableRowByAriaRowIndex, findTableRowCellByAriaColIndex } from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { getAllFocusables } from '../../internal/components/focus-lock/utils';\nimport {\n  SingleTabStopNavigationContext,\n  FocusableDefinition,\n  FocusableChangeHandler,\n} from '../../internal/context/single-tab-stop-navigation-context';\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 (\n    <SingleTabStopNavigationContext.Provider\n      value={{\n        navigationActive: keyboardNavigation,\n        registerFocusable: gridNavigation.registerFocusable,\n      }}\n    >\n      {children}\n    </SingleTabStopNavigationContext.Provider>\n  );\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  private focusables = new Set<FocusableDefinition>();\n  private focusHandlers = new Map<FocusableDefinition, FocusableChangeHandler>();\n  private focusTarget: null | Element = 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.updateFocusTarget();\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      this.focusables.forEach(this.unregisterFocusable);\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    // Timeout ensures the newly rendered content elements are registered.\n    setTimeout(() => {\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        this.updateFocusTarget();\n      }\n    }, 0);\n  }\n\n  public registerFocusable = (focusable: FocusableDefinition, changeHandler: FocusableChangeHandler) => {\n    this.focusables.add(focusable);\n    this.focusHandlers.set(focusable, changeHandler);\n    changeHandler(this.focusTarget, this.isSuppressed(focusable.current));\n    return () => this.unregisterFocusable(focusable);\n  };\n\n  public unregisterFocusable = (focusable: FocusableDefinition) => {\n    this.focusables.delete(focusable);\n    this.focusHandlers.delete(focusable);\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 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.updateFocusTarget();\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      this.getFocusablesFrom(cell.cellElement)[0]?.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    if (this.isSuppressed(document.activeElement) || !this.isRegistered(document.activeElement)) {\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  private updateFocusTarget() {\n    this.focusTarget = this.getSingleFocusable();\n    this.focusables.forEach(focusable => {\n      const element = focusable.current;\n      const handler = this.focusHandlers.get(focusable)!;\n      handler(this.focusTarget, this.isSuppressed(element));\n    });\n  }\n\n  private isSuppressed(element: null | Element) {\n    return !element || defaultIsSuppressed(element);\n  }\n\n  private isRegistered(element: null | Element) {\n    return !element || this.getRegisteredElements().has(element);\n  }\n\n  private getRegisteredElements = (): Set<Element> => {\n    const registeredElements = new Set<Element>();\n    for (const focusable of this.focusables) {\n      if (focusable.current) {\n        registeredElements.add(focusable.current);\n      }\n    }\n    return registeredElements;\n  };\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 this.focusedCell;\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 this.focusedCell;\n    }\n\n    const cellFocusables = this.getFocusablesFrom(cellElement);\n    const elementIndex = cellFocusables.indexOf(focusedElement);\n\n    return { rowIndex, colIndex, rowElement, cellElement, element: focusedElement, elementIndex };\n  }\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 = this.getFocusablesFrom(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 = this.getFocusablesFrom(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  private getSingleFocusable() {\n    const cell = this.focusedCell;\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 =\n      (firstTableCell && this.getFocusablesFrom(firstTableCell)[0]) ?? firstTableCell;\n\n    // When a navigation-focused element is present in the table it is used for user-navigation instead.\n    if (cell) {\n      focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });\n    }\n\n    return focusTarget;\n  }\n\n  private getFocusablesFrom(target: HTMLElement) {\n    const registeredElements = this.getRegisteredElements();\n    return getAllFocusables(target).filter(el => registeredElements.has(el));\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 React from 'react';\nimport { useEffect, useMemo } from 'react';\nimport {\n  defaultIsSuppressed,\n  findTableRowByAriaRowIndex,\n  findTableRowCellByAriaColIndex,\n  getClosestCell,\n} from './utils';\nimport { FocusedCell, GridNavigationProps } from './interfaces';\nimport { KeyCode } from '../../internal/keycode';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { nodeBelongs } from '../../internal/utils/node-belongs';\nimport { getAllFocusables } from '../../internal/components/focus-lock/utils';\nimport {\n  SingleTabStopNavigationContext,\n  FocusableChangeHandler,\n} from '../../internal/context/single-tab-stop-navigation-context';\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 (\n    <SingleTabStopNavigationContext.Provider\n      value={{\n        navigationActive: keyboardNavigation,\n        registerFocusable: gridNavigation.registerFocusable,\n      }}\n    >\n      {children}\n    </SingleTabStopNavigationContext.Provider>\n  );\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  private focusables = new Map<Element, boolean>();\n  private focusHandlers = new Map<Element, FocusableChangeHandler>();\n  private focusTarget: null | Element = 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.updateFocusTarget();\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      [...this.focusables.keys()].forEach(this.unregisterFocusable);\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    // Timeout ensures the newly rendered content elements are registered.\n    setTimeout(() => {\n      if (this._table) {\n        // Update focused cell indices in case table rows, columns, or firstIndex change.\n        this.updateFocusedCell(this.focusedCell?.element);\n        this.updateFocusTarget();\n      }\n    }, 0);\n  }\n\n  public registerFocusable = (focusable: Element, changeHandler: FocusableChangeHandler) => {\n    this.focusables.set(focusable, false);\n    this.focusHandlers.set(focusable, changeHandler);\n    const isFocusable = this.focusTarget === focusable || this.isSuppressed(focusable);\n    if (isFocusable) {\n      this.focusables.set(focusable, isFocusable);\n      changeHandler(isFocusable);\n    }\n    return () => this.unregisterFocusable(focusable);\n  };\n\n  public unregisterFocusable = (focusable: Element) => {\n    this.focusables.delete(focusable);\n    this.focusHandlers.delete(focusable);\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 onFocusin = (event: FocusEvent) => {\n    if (!(event.target instanceof HTMLElement)) {\n      return;\n    }\n\n    this.updateFocusedCell(event.target);\n    if (!this.focusedCell) {\n      return;\n    }\n\n    this.updateFocusTarget();\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    const cellElement = getClosestCell(this.focusedCell.element);\n    if (this.focusedCell.element === cellElement) {\n      this.getFocusablesFrom(cellElement)[0]?.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    if (this.isSuppressed(document.activeElement) || !this.isRegistered(document.activeElement)) {\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  private updateFocusTarget() {\n    this.focusTarget = this.getSingleFocusable();\n    for (const [focusableElement, isFocusable] of this.focusables) {\n      const newIsFocusable = this.focusTarget === focusableElement || this.isSuppressed(focusableElement);\n      if (newIsFocusable !== isFocusable) {\n        this.focusables.set(focusableElement, newIsFocusable);\n        this.focusHandlers.get(focusableElement)!(newIsFocusable);\n      }\n    }\n  }\n\n  private isSuppressed(element: null | Element) {\n    return !element || defaultIsSuppressed(element);\n  }\n\n  private isRegistered(element: null | Element) {\n    return !element || this.focusables.has(element);\n  }\n\n  private updateFocusedCell(focusedElement?: HTMLElement): void {\n    if (!focusedElement) {\n      return;\n    }\n\n    const cellElement = getClosestCell(focusedElement);\n    const rowElement = cellElement?.closest('tr');\n    if (!cellElement || !rowElement) {\n      return;\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;\n    }\n\n    const cellFocusables = this.getFocusablesFrom(cellElement);\n    const elementIndex = cellFocusables.indexOf(focusedElement);\n    this.focusedCell = { rowIndex, colIndex, element: focusedElement, elementIndex };\n  }\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 cellElement = getClosestCell(from.element);\n    const cellFocusables = cellElement ? this.getFocusablesFrom(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 === cellElement && delta.x !== 0) {\n      return null;\n    }\n\n    // Return cell interactive content or the cell itself.\n    const targetCellFocusables = this.getFocusablesFrom(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  private getSingleFocusable() {\n    const cell = this.focusedCell;\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 =\n      (firstTableCell && this.getFocusablesFrom(firstTableCell)[0]) ?? firstTableCell;\n\n    // When a navigation-focused element is present in the table it is used for user-navigation instead.\n    if (cell) {\n      focusTarget = this.getNextFocusable(cell, { x: 0, y: 0 });\n    }\n\n    return focusTarget;\n  }\n\n  private getFocusablesFrom(target: HTMLElement) {\n    return getAllFocusables(target).filter(el => this.focusables.has(el));\n  }\n}\n"]}

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

@@ -10,8 +10,6 @@ export interface FocusedCell {
     rowIndex: number;
     colIndex: number;
     elementIndex: number;
-    rowElement: HTMLTableRowElement;
-    cellElement: HTMLTableCellElement;
     element: HTMLElement;
 }
 //# sourceMappingURL=interfaces.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,GAAG,gBAAgB,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,mBAAmB,CAAC;IAChC,WAAW,EAAE,oBAAoB,CAAC;IAClC,OAAO,EAAE,WAAW,CAAC;CACtB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,cAAc,CAAC;AAE1D,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,OAAO,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,GAAG,gBAAgB,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,WAAW,CAAC;CACtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type TableRole = 'table' | 'grid' | 'grid-default';\n\nexport interface GridNavigationProps {\n  keyboardNavigation: boolean;\n  pageSize: number;\n  getTable: () => null | HTMLTableElement;\n  children: React.ReactNode;\n}\n\nexport interface FocusedCell {\n  rowIndex: number;\n  colIndex: number;\n  elementIndex: number;\n  rowElement: HTMLTableRowElement;\n  cellElement: HTMLTableCellElement;\n  element: HTMLElement;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["table/table-role/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type TableRole = 'table' | 'grid' | 'grid-default';\n\nexport interface GridNavigationProps {\n  keyboardNavigation: boolean;\n  pageSize: number;\n  getTable: () => null | HTMLTableElement;\n  children: React.ReactNode;\n}\n\nexport interface FocusedCell {\n  rowIndex: number;\n  colIndex: number;\n  elementIndex: number;\n  element: HTMLElement;\n}\n"]}

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

@@ -1,3 +1,4 @@
+export declare function getClosestCell(element: Element): HTMLTableCellElement | null;
 /**
  * Returns true if the target element or one of its parents is a dialog or is marked with data-awsui-table-suppress-navigation attribute.
  * This is used to suppress navigation for interactive content without a need to use a custom suppression check.

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":"AAGA;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,OAAO,WAiBlD;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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAGA,wBAAgB,cAAc,CAAC,OAAO,EAAE,OAAO,+BAE9C;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,OAAO,WAiBlD;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"}

package/table/table-role/utils.js

@@ -1,5 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+export function getClosestCell(element) {
+    return element.closest('td,th');
+}
 /**
  * Returns true if the target element or one of its parents is a dialog or is marked with data-awsui-table-suppress-navigation attribute.
  * This is used to suppress navigation for interactive content without a need to use a custom suppression check.

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAAe;IACjD,IAAI,OAAO,GAAmB,MAAM,CAAC;IACrC,OAAO,OAAO,EAAE;QACd,0GAA0G;QAC1G,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC9C,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE;YACxC,OAAO,KAAK,CAAC;SACd;QACD,IACE,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ;YACzC,OAAO,CAAC,YAAY,CAAC,sCAAsC,CAAC,KAAK,MAAM,EACvE;YACA,OAAO,IAAI,CAAC;SACb;QACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;KACjC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,0BAA0B,CAAC,KAAuB,EAAE,kBAA0B,EAAE,KAAa;;IAC3G,IAAI,SAAS,GAA+B,IAAI,CAAC;IACjD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC5E,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,WAAW,CAAC,OAAO,EAAE,CAAC;KACvB;IACD,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE;QACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAA,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;QACvE,SAAS,GAAG,OAA8B,CAAC;QAE3C,IAAI,QAAQ,KAAK,kBAAkB,EAAE;YACnC,MAAM;SACP;QACD,IAAI,KAAK,IAAI,CAAC,IAAI,QAAQ,GAAG,kBAAkB,EAAE;YAC/C,MAAM;SACP;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,QAAQ,GAAG,kBAAkB,EAAE;YAC9C,MAAM;SACP;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,8BAA8B,CAC5C,QAA6B,EAC7B,kBAA0B,EAC1B,KAAa;;IAEb,IAAI,UAAU,GAAgC,IAAI,CAAC;IACnD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qCAAqC,CAAC,CAAC,CAAC;IAClG,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,YAAY,CAAC,OAAO,EAAE,CAAC;KACxB;IACD,KAAK,MAAM,OAAO,IAAI,YAAY,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAA,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;QAC1E,UAAU,GAAG,OAA+B,CAAC;QAE7C,IAAI,WAAW,KAAK,kBAAkB,EAAE;YACtC,MAAM;SACP;QACD,IAAI,KAAK,IAAI,CAAC,IAAI,WAAW,GAAG,kBAAkB,EAAE;YAClD,MAAM;SACP;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,WAAW,GAAG,kBAAkB,EAAE;YACjD,MAAM;SACP;KACF;IACD,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * Returns true if the target element or one of its parents is a dialog or is marked with data-awsui-table-suppress-navigation attribute.\n * This is used to suppress navigation for interactive content without a need to use a custom suppression check.\n */\nexport function defaultIsSuppressed(target: Element) {\n  let current: null | Element = target;\n  while (current) {\n    // Stop checking for parents upon reaching the cell element as the function only aims at the cell content.\n    const tagName = current.tagName.toLowerCase();\n    if (tagName === 'td' || tagName === 'th') {\n      return false;\n    }\n    if (\n      current.getAttribute('role') === 'dialog' ||\n      current.getAttribute('data-awsui-table-suppress-navigation') === 'true'\n    ) {\n      return true;\n    }\n    current = current.parentElement;\n  }\n  return false;\n}\n\n/**\n * Finds the closest row to the targetAriaRowIndex+delta in the direction of delta.\n */\nexport function findTableRowByAriaRowIndex(table: HTMLTableElement, targetAriaRowIndex: number, delta: number) {\n  let targetRow: null | HTMLTableRowElement = null;\n  const rowElements = Array.from(table.querySelectorAll('tr[aria-rowindex]'));\n  if (delta < 0) {\n    rowElements.reverse();\n  }\n  for (const element of rowElements) {\n    const rowIndex = parseInt(element.getAttribute('aria-rowindex') ?? '');\n    targetRow = element as HTMLTableRowElement;\n\n    if (rowIndex === targetAriaRowIndex) {\n      break;\n    }\n    if (delta >= 0 && rowIndex > targetAriaRowIndex) {\n      break;\n    }\n    if (delta < 0 && rowIndex < targetAriaRowIndex) {\n      break;\n    }\n  }\n  return targetRow;\n}\n\n/**\n * Finds the closest column to the targetAriaColIndex+delta in the direction of delta.\n */\nexport function findTableRowCellByAriaColIndex(\n  tableRow: HTMLTableRowElement,\n  targetAriaColIndex: number,\n  delta: number\n) {\n  let targetCell: null | HTMLTableCellElement = null;\n  const cellElements = Array.from(tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]'));\n  if (delta < 0) {\n    cellElements.reverse();\n  }\n  for (const element of cellElements) {\n    const columnIndex = parseInt(element.getAttribute('aria-colindex') ?? '');\n    targetCell = element as HTMLTableCellElement;\n\n    if (columnIndex === targetAriaColIndex) {\n      break;\n    }\n    if (delta >= 0 && columnIndex > targetAriaColIndex) {\n      break;\n    }\n    if (delta < 0 && columnIndex < targetAriaColIndex) {\n      break;\n    }\n  }\n  return targetCell;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"lib/default/","sources":["table/table-role/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,cAAc,CAAC,OAAgB;IAC7C,OAAO,OAAO,CAAC,OAAO,CAAC,OAAO,CAAgC,CAAC;AACjE,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,MAAe;IACjD,IAAI,OAAO,GAAmB,MAAM,CAAC;IACrC,OAAO,OAAO,EAAE;QACd,0GAA0G;QAC1G,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAC9C,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,IAAI,EAAE;YACxC,OAAO,KAAK,CAAC;SACd;QACD,IACE,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ;YACzC,OAAO,CAAC,YAAY,CAAC,sCAAsC,CAAC,KAAK,MAAM,EACvE;YACA,OAAO,IAAI,CAAC;SACb;QACD,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;KACjC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,0BAA0B,CAAC,KAAuB,EAAE,kBAA0B,EAAE,KAAa;;IAC3G,IAAI,SAAS,GAA+B,IAAI,CAAC;IACjD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC5E,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,WAAW,CAAC,OAAO,EAAE,CAAC;KACvB;IACD,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE;QACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAA,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;QACvE,SAAS,GAAG,OAA8B,CAAC;QAE3C,IAAI,QAAQ,KAAK,kBAAkB,EAAE;YACnC,MAAM;SACP;QACD,IAAI,KAAK,IAAI,CAAC,IAAI,QAAQ,GAAG,kBAAkB,EAAE;YAC/C,MAAM;SACP;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,QAAQ,GAAG,kBAAkB,EAAE;YAC9C,MAAM;SACP;KACF;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,8BAA8B,CAC5C,QAA6B,EAC7B,kBAA0B,EAC1B,KAAa;;IAEb,IAAI,UAAU,GAAgC,IAAI,CAAC;IACnD,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qCAAqC,CAAC,CAAC,CAAC;IAClG,IAAI,KAAK,GAAG,CAAC,EAAE;QACb,YAAY,CAAC,OAAO,EAAE,CAAC;KACxB;IACD,KAAK,MAAM,OAAO,IAAI,YAAY,EAAE;QAClC,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAA,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,mCAAI,EAAE,CAAC,CAAC;QAC1E,UAAU,GAAG,OAA+B,CAAC;QAE7C,IAAI,WAAW,KAAK,kBAAkB,EAAE;YACtC,MAAM;SACP;QACD,IAAI,KAAK,IAAI,CAAC,IAAI,WAAW,GAAG,kBAAkB,EAAE;YAClD,MAAM;SACP;QACD,IAAI,KAAK,GAAG,CAAC,IAAI,WAAW,GAAG,kBAAkB,EAAE;YACjD,MAAM;SACP;KACF;IACD,OAAO,UAAU,CAAC;AACpB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function getClosestCell(element: Element) {\n  return element.closest('td,th') as null | HTMLTableCellElement;\n}\n\n/**\n * Returns true if the target element or one of its parents is a dialog or is marked with data-awsui-table-suppress-navigation attribute.\n * This is used to suppress navigation for interactive content without a need to use a custom suppression check.\n */\nexport function defaultIsSuppressed(target: Element) {\n  let current: null | Element = target;\n  while (current) {\n    // Stop checking for parents upon reaching the cell element as the function only aims at the cell content.\n    const tagName = current.tagName.toLowerCase();\n    if (tagName === 'td' || tagName === 'th') {\n      return false;\n    }\n    if (\n      current.getAttribute('role') === 'dialog' ||\n      current.getAttribute('data-awsui-table-suppress-navigation') === 'true'\n    ) {\n      return true;\n    }\n    current = current.parentElement;\n  }\n  return false;\n}\n\n/**\n * Finds the closest row to the targetAriaRowIndex+delta in the direction of delta.\n */\nexport function findTableRowByAriaRowIndex(table: HTMLTableElement, targetAriaRowIndex: number, delta: number) {\n  let targetRow: null | HTMLTableRowElement = null;\n  const rowElements = Array.from(table.querySelectorAll('tr[aria-rowindex]'));\n  if (delta < 0) {\n    rowElements.reverse();\n  }\n  for (const element of rowElements) {\n    const rowIndex = parseInt(element.getAttribute('aria-rowindex') ?? '');\n    targetRow = element as HTMLTableRowElement;\n\n    if (rowIndex === targetAriaRowIndex) {\n      break;\n    }\n    if (delta >= 0 && rowIndex > targetAriaRowIndex) {\n      break;\n    }\n    if (delta < 0 && rowIndex < targetAriaRowIndex) {\n      break;\n    }\n  }\n  return targetRow;\n}\n\n/**\n * Finds the closest column to the targetAriaColIndex+delta in the direction of delta.\n */\nexport function findTableRowCellByAriaColIndex(\n  tableRow: HTMLTableRowElement,\n  targetAriaColIndex: number,\n  delta: number\n) {\n  let targetCell: null | HTMLTableCellElement = null;\n  const cellElements = Array.from(tableRow.querySelectorAll('td[aria-colindex],th[aria-colindex]'));\n  if (delta < 0) {\n    cellElements.reverse();\n  }\n  for (const element of cellElements) {\n    const columnIndex = parseInt(element.getAttribute('aria-colindex') ?? '');\n    targetCell = element as HTMLTableCellElement;\n\n    if (columnIndex === targetAriaColIndex) {\n      break;\n    }\n    if (delta >= 0 && columnIndex > targetAriaColIndex) {\n      break;\n    }\n    if (delta < 0 && columnIndex < targetAriaColIndex) {\n      break;\n    }\n  }\n  return targetCell;\n}\n"]}