@cloudscape-design/components 3.0.0

package/table/use-column-widths.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TableProps } from './interfaces';
+export declare const DEFAULT_WIDTH = 120;
+export declare function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>): void;
+interface WidthsContext {
+    totalWidth: number;
+    columnWidths: Record<string, number>;
+    updateColumn: (colIndex: number, newWidth: number) => void;
+}
+declare const WidthsContext: React.Context<WidthsContext>;
+interface WidthProviderProps {
+    tableRef: React.MutableRefObject<HTMLElement | null>;
+    visibleColumnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;
+    resizableColumns: boolean | undefined;
+    hasSelection: boolean;
+    children: React.ReactNode;
+}
+export declare function ColumnWidthsProvider({ tableRef, visibleColumnDefinitions, resizableColumns, hasSelection, children, }: WidthProviderProps): JSX.Element;
+export declare function useColumnWidths(): WidthsContext;
+export {};
+//# sourceMappingURL=use-column-widths.d.ts.map

package/table/use-column-widths.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-column-widths.d.ts","sourceRoot":"","sources":["../../../src/table/use-column-widths.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,eAAO,MAAM,aAAa,MAAM,CAAC;AAajC,wBAAgB,iBAAiB,CAAC,iBAAiB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,QAKnG;AA0CD,UAAU,aAAa;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5D;AAED,QAAA,MAAM,aAAa,8BAIjB,CAAC;AAEH,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACrD,wBAAwB,EAAE,aAAa,CAAC,UAAU,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1E,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,wBAAwB,EACxB,gBAAgB,EAChB,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,eA2CpB;AAED,wBAAgB,eAAe,kBAE9B"}

package/table/use-column-widths.js

@@ -0,0 +1,103 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState, createContext, useContext } from 'react';
+import { getColumnKey } from './utils';
+import headerCellStyles from './header-cell/styles.css.js';
+import { warnOnce } from '../internal/logging';
+export var DEFAULT_WIDTH = 120;
+var SELECTION_CELL_WIDTH = 54;
+function checkProperty(column, name) {
+    var value = column[name];
+    if (typeof value !== 'number' && typeof value !== 'undefined') {
+        warnOnce('Table', "resizableColumns feature requires ".concat(name, " property to be a number, got ").concat(value, ". The component may work incorrectly."));
+    }
+}
+export function checkColumnWidths(columnDefinitions) {
+    for (var _i = 0, columnDefinitions_1 = columnDefinitions; _i < columnDefinitions_1.length; _i++) {
+        var column = columnDefinitions_1[_i];
+        checkProperty(column, 'minWidth');
+        checkProperty(column, 'width');
+    }
+}
+function readWidths(headerEl, columnDefinitions, hasSelection) {
+    var result = {};
+    for (var index = 0; index < columnDefinitions.length; index++) {
+        var column = columnDefinitions[index];
+        var id = getColumnKey(columnDefinitions[index], index);
+        var width = column.width || 0;
+        var minWidth = column.minWidth || width || DEFAULT_WIDTH;
+        if (!width && // read width from the DOM if it is missing in the config
+            index !== columnDefinitions.length - 1 // skip reading for the last column, because it expands to fully fit the container
+        ) {
+            var colIndex = hasSelection ? index + 2 : index + 1;
+            var colEl = headerEl.querySelector(".".concat(headerCellStyles['header-cell'], ":nth-child(").concat(colIndex, ")"));
+            width = colEl.getBoundingClientRect().width;
+        }
+        result[id] = Math.max(width, minWidth);
+    }
+    return result;
+}
+function updateWidths(columnDefinitions, oldWidths, newWidth, colIndex) {
+    var _a;
+    var definition = columnDefinitions[colIndex];
+    var id = getColumnKey(definition, colIndex);
+    var minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;
+    newWidth = Math.max(newWidth, minWidth);
+    if (oldWidths[id] === newWidth) {
+        return oldWidths;
+    }
+    return __assign(__assign({}, oldWidths), (_a = {}, _a[id] = newWidth, _a));
+}
+var WidthsContext = createContext({
+    totalWidth: 0,
+    columnWidths: {},
+    updateColumn: function () { }
+});
+export function ColumnWidthsProvider(_a) {
+    var tableRef = _a.tableRef, visibleColumnDefinitions = _a.visibleColumnDefinitions, resizableColumns = _a.resizableColumns, hasSelection = _a.hasSelection, children = _a.children;
+    var visibleColumns = useRef(null);
+    var _b = useState({}), columnWidths = _b[0], setColumnWidths = _b[1];
+    useEffect(function () {
+        if (!resizableColumns) {
+            return;
+        }
+        var lastVisible = visibleColumns.current;
+        if (lastVisible) {
+            var _loop_1 = function (index) {
+                var column = visibleColumnDefinitions[index];
+                var id = getColumnKey(column, index);
+                if (!columnWidths[id] && lastVisible.indexOf(column.id) === -1) {
+                    setColumnWidths(function (columnWidths) {
+                        var _a;
+                        return (__assign(__assign({}, columnWidths), (_a = {}, _a[id] = column.width || DEFAULT_WIDTH, _a)));
+                    });
+                }
+            };
+            for (var index = 0; index < visibleColumnDefinitions.length; index++) {
+                _loop_1(index);
+            }
+        }
+        visibleColumns.current = visibleColumnDefinitions.map(function (column) { return column.id; });
+    }, [columnWidths, resizableColumns, visibleColumnDefinitions]);
+    useEffect(function () {
+        if (!resizableColumns) {
+            return;
+        }
+        setColumnWidths(function () { return readWidths(tableRef.current, visibleColumnDefinitions, hasSelection); });
+        // This code is intended to run only at the first render and should not re-run when table props change
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    function updateColumn(colIndex, newWidth) {
+        setColumnWidths(function (columnWidths) { return updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex); });
+    }
+    var totalWidth = visibleColumnDefinitions.reduce(function (total, column, index) { return total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH); }, 0);
+    if (hasSelection) {
+        totalWidth += SELECTION_CELL_WIDTH;
+    }
+    return React.createElement(WidthsContext.Provider, { value: { columnWidths: columnWidths, totalWidth: totalWidth, updateColumn: updateColumn } }, children);
+}
+export function useColumnWidths() {
+    return useContext(WidthsContext);
+}
+//# sourceMappingURL=use-column-widths.js.map

package/table/use-column-widths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-column-widths.js","sourceRoot":"","sources":["../../../src/table/use-column-widths.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\nimport React, { useEffect, useRef, useState, createContext, useContext } from 'react';\nimport { TableProps } from './interfaces';\nimport { getColumnKey } from './utils';\nimport headerCellStyles from './header-cell/styles.css.js';\nimport { warnOnce } from '../internal/logging';\n\nexport const DEFAULT_WIDTH = 120;\nconst SELECTION_CELL_WIDTH = 54;\n\nfunction checkProperty(column: TableProps.ColumnDefinition<any>, name: 'width' | 'minWidth') {\n  const value = column[name];\n  if (typeof value !== 'number' && typeof value !== 'undefined') {\n    warnOnce(\n      'Table',\n      `resizableColumns feature requires ${name} property to be a number, got ${value}. The component may work incorrectly.`\n    );\n  }\n}\n\nexport function checkColumnWidths(columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>) {\n  for (const column of columnDefinitions) {\n    checkProperty(column, 'minWidth');\n    checkProperty(column, 'width');\n  }\n}\n\nfunction readWidths(\n  headerEl: HTMLElement,\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>,\n  hasSelection: boolean\n) {\n  const result: Record<string, number> = {};\n  for (let index = 0; index < columnDefinitions.length; index++) {\n    const column = columnDefinitions[index];\n    const id = getColumnKey(columnDefinitions[index], index);\n    let width = (column.width as number) || 0;\n    const minWidth = (column.minWidth as number) || width || DEFAULT_WIDTH;\n    if (\n      !width && // read width from the DOM if it is missing in the config\n      index !== columnDefinitions.length - 1 // skip reading for the last column, because it expands to fully fit the container\n    ) {\n      const colIndex = hasSelection ? index + 2 : index + 1;\n      const colEl = headerEl.querySelector<HTMLElement>(`.${headerCellStyles['header-cell']}:nth-child(${colIndex})`)!;\n      width = colEl.getBoundingClientRect().width;\n    }\n    result[id] = Math.max(width, minWidth);\n  }\n  return result;\n}\n\nfunction updateWidths(\n  columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>,\n  oldWidths: Record<string, number>,\n  newWidth: number,\n  colIndex: number\n) {\n  const definition = columnDefinitions[colIndex];\n  const id = getColumnKey(definition, colIndex);\n  const minWidth = typeof definition.minWidth === 'number' ? definition.minWidth : DEFAULT_WIDTH;\n  newWidth = Math.max(newWidth, minWidth);\n  if (oldWidths[id] === newWidth) {\n    return oldWidths;\n  }\n  return { ...oldWidths, [id]: newWidth };\n}\n\ninterface WidthsContext {\n  totalWidth: number;\n  columnWidths: Record<string, number>;\n  updateColumn: (colIndex: number, newWidth: number) => void;\n}\n\nconst WidthsContext = createContext<WidthsContext>({\n  totalWidth: 0,\n  columnWidths: {},\n  updateColumn: () => {},\n});\n\ninterface WidthProviderProps {\n  tableRef: React.MutableRefObject<HTMLElement | null>;\n  visibleColumnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;\n  resizableColumns: boolean | undefined;\n  hasSelection: boolean;\n  children: React.ReactNode;\n}\n\nexport function ColumnWidthsProvider({\n  tableRef,\n  visibleColumnDefinitions,\n  resizableColumns,\n  hasSelection,\n  children,\n}: WidthProviderProps) {\n  const visibleColumns = useRef<(string | undefined)[] | null>(null);\n  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});\n\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    const lastVisible = visibleColumns.current;\n    if (lastVisible) {\n      for (let index = 0; index < visibleColumnDefinitions.length; index++) {\n        const column = visibleColumnDefinitions[index];\n        const id = getColumnKey(column, index);\n        if (!columnWidths[id] && lastVisible.indexOf(column.id) === -1) {\n          setColumnWidths(columnWidths => ({ ...columnWidths, [id]: (column.width as number) || DEFAULT_WIDTH }));\n        }\n      }\n    }\n    visibleColumns.current = visibleColumnDefinitions.map(column => column.id);\n  }, [columnWidths, resizableColumns, visibleColumnDefinitions]);\n\n  useEffect(() => {\n    if (!resizableColumns) {\n      return;\n    }\n    setColumnWidths(() => readWidths(tableRef.current!, visibleColumnDefinitions, hasSelection));\n    // This code is intended to run only at the first render and should not re-run when table props change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  function updateColumn(colIndex: number, newWidth: number) {\n    setColumnWidths(columnWidths => updateWidths(visibleColumnDefinitions, columnWidths, newWidth, colIndex));\n  }\n\n  let totalWidth = visibleColumnDefinitions.reduce(\n    (total, column, index) => total + (columnWidths[getColumnKey(column, index)] || DEFAULT_WIDTH),\n    0\n  );\n  if (hasSelection) {\n    totalWidth += SELECTION_CELL_WIDTH;\n  }\n\n  return <WidthsContext.Provider value={{ columnWidths, totalWidth, updateColumn }}>{children}</WidthsContext.Provider>;\n}\n\nexport function useColumnWidths() {\n  return useContext(WidthsContext);\n}\n"]}

package/table/use-row-events.d.ts

@@ -0,0 +1,6 @@
+import { TableProps } from './interfaces';
+export declare function useRowEvents<T>({ onRowClick, onRowContextMenu }: Pick<TableProps, 'onRowClick' | 'onRowContextMenu'>): {
+    onRowClickHandler: ((rowIndex: number, item: T, event: React.MouseEvent) => void) | undefined;
+    onRowContextMenuHandler: ((rowIndex: number, item: T, event: React.MouseEvent) => void) | undefined;
+};
+//# sourceMappingURL=use-row-events.d.ts.map

package/table/use-row-events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-row-events.d.ts","sourceRoot":"","sources":["../../../src/table/use-row-events.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,gBAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,YAAY,GAAG,kBAAkB,CAAC;mCAC9E,MAAM,QAAQ,CAAC,SAAS,gBAAgB;yCAOlC,MAAM,QAAQ,CAAC,SAAS,gBAAgB;EAcpF"}

package/table/use-row-events.js

@@ -0,0 +1,29 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { fireNonCancelableEvent, fireCancelableEvent } from '../internal/events/index';
+import { findUpUntil } from '../internal/utils/dom';
+import styles from './styles.css.js';
+export function useRowEvents(_a) {
+    var onRowClick = _a.onRowClick, onRowContextMenu = _a.onRowContextMenu;
+    var onRowClickHandler = function (rowIndex, item, event) {
+        var tableCell = findUpUntil(event.target, function (element) { return element.tagName.toLowerCase() === 'td'; });
+        if (!tableCell || !tableCell.classList.contains(styles['selection-control'])) {
+            var details = { rowIndex: rowIndex, item: item };
+            fireNonCancelableEvent(onRowClick, details);
+        }
+    };
+    var onRowContextMenuHandler = function (rowIndex, item, event) {
+        var details = {
+            rowIndex: rowIndex,
+            item: item,
+            clientX: event.clientX,
+            clientY: event.clientY
+        };
+        fireCancelableEvent(onRowContextMenu, details, event);
+    };
+    return {
+        onRowClickHandler: onRowClick && onRowClickHandler,
+        onRowContextMenuHandler: onRowContextMenu && onRowContextMenuHandler
+    };
+}
+//# sourceMappingURL=use-row-events.js.map

package/table/use-row-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-row-events.js","sourceRoot":"","sources":["../../../src/table/use-row-events.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAEvF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,YAAY,CAAI,EAAqF;QAAnF,UAAU,gBAAA,EAAE,gBAAgB,sBAAA;IAC5D,IAAM,iBAAiB,GAAG,UAAC,QAAgB,EAAE,IAAO,EAAE,KAAuB;QAC3E,IAAM,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAqB,EAAE,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI,EAAtC,CAAsC,CAAC,CAAC;QAC9G,IAAI,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE;YAC5E,IAAM,OAAO,GAAmC,EAAE,QAAQ,UAAA,EAAE,IAAI,MAAA,EAAE,CAAC;YACnE,sBAAsB,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;SAC7C;IACH,CAAC,CAAC;IACF,IAAM,uBAAuB,GAAG,UAAC,QAAgB,EAAE,IAAO,EAAE,KAAuB;QACjF,IAAM,OAAO,GAAyC;YACpD,QAAQ,UAAA;YACR,IAAI,MAAA;YACJ,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,OAAO,EAAE,KAAK,CAAC,OAAO;SACvB,CAAC;QACF,mBAAmB,CAAC,gBAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,OAAO;QACL,iBAAiB,EAAE,UAAU,IAAI,iBAAiB;QAClD,uBAAuB,EAAE,gBAAgB,IAAI,uBAAuB;KACrE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { fireNonCancelableEvent, fireCancelableEvent } from '../internal/events/index';\nimport { TableProps } from './interfaces';\nimport { findUpUntil } from '../internal/utils/dom';\nimport styles from './styles.css.js';\n\nexport function useRowEvents<T>({ onRowClick, onRowContextMenu }: Pick<TableProps, 'onRowClick' | 'onRowContextMenu'>) {\n  const onRowClickHandler = (rowIndex: number, item: T, event: React.MouseEvent) => {\n    const tableCell = findUpUntil(event.target as HTMLElement, element => element.tagName.toLowerCase() === 'td');\n    if (!tableCell || !tableCell.classList.contains(styles['selection-control'])) {\n      const details: TableProps.OnRowClickDetail<T> = { rowIndex, item };\n      fireNonCancelableEvent(onRowClick, details);\n    }\n  };\n  const onRowContextMenuHandler = (rowIndex: number, item: T, event: React.MouseEvent) => {\n    const details: TableProps.OnRowContextMenuDetail<T> = {\n      rowIndex,\n      item,\n      clientX: event.clientX,\n      clientY: event.clientY,\n    };\n    fireCancelableEvent(onRowContextMenu, details, event);\n  };\n\n  return {\n    onRowClickHandler: onRowClick && onRowClickHandler,\n    onRowContextMenuHandler: onRowContextMenu && onRowContextMenuHandler,\n  };\n}\n"]}

package/table/use-selection.d.ts

@@ -0,0 +1,44 @@
+import { KeyboardEvent } from 'react';
+import { TableProps } from './interfaces';
+export declare function useFocusMove(selectionType: TableProps['selectionType'], totalItems: number): {
+    moveFocusDown?: undefined;
+    moveFocusUp?: undefined;
+    moveFocus?: undefined;
+} | {
+    moveFocusDown: (event: KeyboardEvent) => void;
+    moveFocusUp: (event: KeyboardEvent) => void;
+    moveFocus: (sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) => void;
+};
+export declare const focusMarkers: {
+    item: {
+        [x: string]: string;
+    };
+    all: {
+        [x: string]: string;
+    };
+    root: {
+        [x: string]: string;
+    };
+};
+export declare function useSelection<T>({ items, selectedItems, selectionType, isItemDisabled, trackBy, onSelectionChange, ariaLabels, }: Pick<TableProps<T>, 'ariaLabels' | 'items' | 'selectedItems' | 'selectionType' | 'isItemDisabled' | 'trackBy' | 'onSelectionChange'>): {
+    isItemSelected: (item: T) => boolean;
+    selectAllProps: {
+        name: string;
+        disabled: boolean;
+        selectionType: TableProps.SelectionType | undefined;
+        indeterminate: boolean;
+        checked: boolean;
+        onChange: () => void;
+        ariaLabel: string | undefined;
+    };
+    getItemSelectionProps: (item: T) => {
+        name: string;
+        selectionType: TableProps.SelectionType | undefined;
+        ariaLabel: string | undefined;
+        onChange: () => void;
+        checked: boolean;
+        disabled: boolean;
+    };
+    updateShiftToggle: (value: boolean) => void;
+};
+//# sourceMappingURL=use-selection.d.ts.map

package/table/use-selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection.d.ts","sourceRoot":"","sources":["../../../src/table/use-selection.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAY,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAwB1C,wBAAgB,YAAY,CAAC,aAAa,EAAE,UAAU,CAAC,eAAe,CAAC,EAAE,UAAU,EAAE,MAAM;;;;;2BAkBxE,aAAa;yBAAb,aAAa;+BAdI,WAAW,aAAa,MAAM,aAAa,CAAC,CAAC,GAAG,CAAC;EA0BpF;AAeD,eAAO,MAAM,YAAY;;;;;;;;;;CAIxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,aAAkB,EAClB,aAAa,EACb,cAA4B,EAC5B,OAAO,EACP,iBAAiB,EACjB,UAAU,GACX,EAAE,IAAI,CACL,UAAU,CAAC,CAAC,CAAC,EACb,YAAY,GAAG,OAAO,GAAG,eAAe,GAAG,eAAe,GAAG,gBAAgB,GAAG,SAAS,GAAG,mBAAmB,CAChH;;;;;;;;;;;kCAqGiC,CAAC;;;;;;;;+BAWJ,OAAO;EAIrC"}

package/table/use-selection.js

@@ -0,0 +1,185 @@
+var _a, _b, _c;
+import { __spreadArray } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from 'react';
+import { fireNonCancelableEvent } from '../internal/events';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { findUpUntil } from '../internal/utils/dom';
+import { getTrackableValue } from './utils';
+import selectionStyles from './selection-control/styles.css.js';
+import { joinStrings } from '../internal/utils/strings';
+var SELECTION_ITEM = 'selection-item';
+var SELECTION_ROOT = 'selection-root';
+function findSelectionControlByIndex(rootContainer, index) {
+    if (index === -1) {
+        // find "select all" checkbox
+        return rootContainer.querySelector("[data-".concat(SELECTION_ITEM, "=\"all\"] .").concat(selectionStyles.root, " input"));
+    }
+    return rootContainer.querySelectorAll("[data-".concat(SELECTION_ITEM, "=\"item\"] .").concat(selectionStyles.root, " input"))[index];
+}
+function findRootContainer(element) {
+    return findUpUntil(element, function (node) { return node.dataset.selectionRoot === 'true'; });
+}
+export function useFocusMove(selectionType, totalItems) {
+    if (selectionType !== 'multi') {
+        return {};
+    }
+    function moveFocus(sourceElement, fromIndex, direction) {
+        var index = fromIndex;
+        var rootContainer = findRootContainer(sourceElement);
+        while (index >= -1 && index < totalItems) {
+            index += direction;
+            var control = findSelectionControlByIndex(rootContainer, index);
+            if (control && !control.disabled) {
+                control.focus();
+                break;
+            }
+        }
+    }
+    var _a = [1, -1].map(function (direction) {
+        return function (event) {
+            var target = event.currentTarget;
+            var itemNode = findUpUntil(target, function (node) { return node.dataset.selectionItem === 'item'; });
+            var fromIndex = Array.prototype.indexOf.call(itemNode.parentElement.children, itemNode);
+            moveFocus(target, fromIndex, direction);
+        };
+    }), moveFocusDown = _a[0], moveFocusUp = _a[1];
+    return {
+        moveFocusDown: moveFocusDown,
+        moveFocusUp: moveFocusUp,
+        moveFocus: moveFocus
+    };
+}
+// A set, that compares items by their "trackables" (the results of applying `trackBy` to them)
+var ItemSet = /** @class */ (function () {
+    function ItemSet(trackBy, items) {
+        var _this = this;
+        this.map = new Map();
+        this.put = function (item) { return _this.map.set.call(_this.map, getTrackableValue(_this.trackBy, item), item); };
+        this.has = function (item) { return _this.map.has.call(_this.map, getTrackableValue(_this.trackBy, item)); };
+        this.forEach = this.map.forEach.bind(this.map);
+        this.trackBy = trackBy;
+        items.forEach(this.put);
+    }
+    return ItemSet;
+}());
+export var focusMarkers = {
+    item: (_a = {}, _a['data-' + SELECTION_ITEM] = 'item', _a),
+    all: (_b = {}, _b['data-' + SELECTION_ITEM] = 'all', _b),
+    root: (_c = {}, _c['data-' + SELECTION_ROOT] = 'true', _c)
+};
+export function useSelection(_a) {
+    var _b;
+    var items = _a.items, _c = _a.selectedItems, selectedItems = _c === void 0 ? [] : _c, selectionType = _a.selectionType, _d = _a.isItemDisabled, isItemDisabled = _d === void 0 ? function () { return false; } : _d, trackBy = _a.trackBy, onSelectionChange = _a.onSelectionChange, ariaLabels = _a.ariaLabels;
+    var _e = useState(false), shiftPressed = _e[0], setShiftPressed = _e[1];
+    var _f = useState(null), lastClickedItem = _f[0], setLastClickedItem = _f[1];
+    var selectionName = useUniqueId();
+    var finalSelectedItems = selectionType === 'single' ? selectedItems.slice(0, 1) : selectedItems;
+    var selectedSet = new ItemSet(trackBy, finalSelectedItems);
+    var itemIndexesMap = new Map();
+    items.forEach(function (item, i) { return itemIndexesMap.set(getTrackableValue(trackBy, item), i); });
+    var isItemSelected = selectedSet.has.bind(selectedSet);
+    var getItemState = function (item) { return ({
+        disabled: isItemDisabled(item),
+        selected: isItemSelected(item)
+    }); };
+    var _g = selectionType
+        ? items.reduce(function (_a, item) {
+            var allDisabled = _a[0], allEnabledSelected = _a[1], hasSelected = _a[2];
+            var _b = getItemState(item), disabled = _b.disabled, selected = _b.selected;
+            return [
+                // all items are disabled (or none are present)
+                allDisabled && disabled,
+                // all enabled items are selected (or none are present)
+                allEnabledSelected && (selected || disabled),
+                // the page has at least one selected item
+                hasSelected || selected,
+            ];
+        }, [true, true, false])
+        : [true, true, false], allDisabled = _g[0], allEnabledSelected = _g[1], hasSelected = _g[2];
+    var handleToggleAll = function () {
+        var requestedItems = new ItemSet(trackBy, items);
+        var newSelectedItems = allEnabledSelected ? deselectItems(requestedItems) : selectItems(requestedItems);
+        fireNonCancelableEvent(onSelectionChange, { selectedItems: newSelectedItems });
+    };
+    var getRequestedItems = function (item) {
+        var requestedItems = new ItemSet(trackBy, [item]);
+        var lastClickedItemIndex = lastClickedItem ? itemIndexesMap.get(getTrackableValue(trackBy, lastClickedItem)) : -1;
+        if (lastClickedItemIndex === undefined) {
+            lastClickedItemIndex = -1;
+        }
+        // we use lastClickedItemIndex to determine if filtering/sorting/pagination
+        // made previously selected item invisible, therefore we reset state for shift-select
+        if (shiftPressed && lastClickedItemIndex !== -1) {
+            // item is always in items
+            var currentItemIndex = itemIndexesMap.get(getTrackableValue(trackBy, item));
+            var start = Math.min(currentItemIndex, lastClickedItemIndex);
+            var end = Math.max(currentItemIndex, lastClickedItemIndex);
+            items.slice(start, end + 1).forEach(function (item) { return requestedItems.put(item); });
+        }
+        return requestedItems;
+    };
+    var deselectItems = function (requestedItems) {
+        var newSelectedItems = [];
+        selectedItems.forEach(function (selectedItem) {
+            var toUnselect = requestedItems.has(selectedItem);
+            if (!toUnselect || isItemDisabled(selectedItem)) {
+                newSelectedItems.push(selectedItem);
+            }
+        });
+        return newSelectedItems;
+    };
+    var selectItems = function (requestedItems) {
+        var newSelectedItems = __spreadArray([], selectedItems, true);
+        requestedItems.forEach(function (newItem) {
+            var _a = getItemState(newItem), selected = _a.selected, disabled = _a.disabled;
+            if (!selected && !disabled) {
+                newSelectedItems.push(newItem);
+            }
+        });
+        return newSelectedItems;
+    };
+    var handleToggleItem = function (item) { return function () {
+        var _a = getItemState(item), disabled = _a.disabled, selected = _a.selected;
+        if (disabled || (selectionType === 'single' && selected)) {
+            return;
+        }
+        if (selectionType === 'single') {
+            fireNonCancelableEvent(onSelectionChange, { selectedItems: [item] });
+        }
+        else {
+            var requestedItems = getRequestedItems(item);
+            var selectedItems_1 = selected ? deselectItems(requestedItems) : selectItems(requestedItems);
+            fireNonCancelableEvent(onSelectionChange, { selectedItems: selectedItems_1 });
+            setLastClickedItem(item);
+        }
+    }; };
+    return {
+        isItemSelected: isItemSelected,
+        selectAllProps: {
+            name: selectionName,
+            disabled: allDisabled,
+            selectionType: selectionType,
+            indeterminate: hasSelected && !allEnabledSelected,
+            checked: hasSelected && allEnabledSelected,
+            onChange: handleToggleAll,
+            ariaLabel: joinStrings(ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.selectionGroupLabel, (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.allItemsSelectionLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, { selectedItems: selectedItems }))
+        },
+        getItemSelectionProps: function (item) {
+            var _a;
+            return ({
+                name: selectionName,
+                selectionType: selectionType,
+                ariaLabel: joinStrings(ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.selectionGroupLabel, (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.itemSelectionLabel) === null || _a === void 0 ? void 0 : _a.call(ariaLabels, { selectedItems: selectedItems }, item)),
+                onChange: handleToggleItem(item),
+                checked: isItemSelected(item),
+                disabled: isItemDisabled(item)
+            });
+        },
+        updateShiftToggle: function (value) {
+            setShiftPressed(value);
+        }
+    };
+}
+//# sourceMappingURL=use-selection.js.map

package/table/use-selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-selection.js","sourceRoot":"","sources":["../../../src/table/use-selection.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\nimport { KeyboardEvent, useState } from 'react';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { findUpUntil } from '../internal/utils/dom';\nimport { TableProps } from './interfaces';\nimport { getTrackableValue } from './utils';\nimport selectionStyles from './selection-control/styles.css.js';\nimport { joinStrings } from '../internal/utils/strings';\n\nconst SELECTION_ITEM = 'selection-item';\nconst SELECTION_ROOT = 'selection-root';\n\nfunction findSelectionControlByIndex(rootContainer: HTMLElement, index: number) {\n  if (index === -1) {\n    // find \"select all\" checkbox\n    return rootContainer.querySelector<HTMLInputElement>(\n      `[data-${SELECTION_ITEM}=\"all\"] .${selectionStyles.root} input`\n    );\n  }\n  return rootContainer.querySelectorAll<HTMLInputElement>(\n    `[data-${SELECTION_ITEM}=\"item\"] .${selectionStyles.root} input`\n  )[index];\n}\n\nfunction findRootContainer(element: HTMLElement) {\n  return findUpUntil(element, node => node.dataset.selectionRoot === 'true')!;\n}\n\nexport function useFocusMove(selectionType: TableProps['selectionType'], totalItems: number) {\n  if (selectionType !== 'multi') {\n    return {};\n  }\n  function moveFocus(sourceElement: HTMLElement, fromIndex: number, direction: -1 | 1) {\n    let index = fromIndex;\n    const rootContainer = findRootContainer(sourceElement);\n\n    while (index >= -1 && index < totalItems) {\n      index += direction;\n      const control = findSelectionControlByIndex(rootContainer, index);\n      if (control && !control.disabled) {\n        control.focus();\n        break;\n      }\n    }\n  }\n  const [moveFocusDown, moveFocusUp] = ([1, -1] as const).map(direction => {\n    return (event: KeyboardEvent) => {\n      const target = event.currentTarget as HTMLElement;\n      const itemNode = findUpUntil(target, node => node.dataset.selectionItem === 'item')!;\n      const fromIndex = Array.prototype.indexOf.call(itemNode.parentElement!.children, itemNode);\n      moveFocus(target, fromIndex, direction);\n    };\n  });\n  return {\n    moveFocusDown,\n    moveFocusUp,\n    moveFocus,\n  };\n}\n\n// A set, that compares items by their \"trackables\" (the results of applying `trackBy` to them)\nclass ItemSet<T> {\n  constructor(trackBy: TableProps.TrackBy<T> | undefined, items: ReadonlyArray<T>) {\n    this.trackBy = trackBy;\n    items.forEach(this.put);\n  }\n  private trackBy: TableProps.TrackBy<T> | undefined;\n  private map: Map<unknown, T> = new Map();\n  put = (item: T) => this.map.set.call(this.map, getTrackableValue(this.trackBy, item), item);\n  has = (item: T) => this.map.has.call(this.map, getTrackableValue(this.trackBy, item));\n  forEach = this.map.forEach.bind(this.map);\n}\n\nexport const focusMarkers = {\n  item: { ['data-' + SELECTION_ITEM]: 'item' },\n  all: { ['data-' + SELECTION_ITEM]: 'all' },\n  root: { ['data-' + SELECTION_ROOT]: 'true' },\n};\n\nexport function useSelection<T>({\n  items,\n  selectedItems = [],\n  selectionType,\n  isItemDisabled = () => false,\n  trackBy,\n  onSelectionChange,\n  ariaLabels,\n}: Pick<\n  TableProps<T>,\n  'ariaLabels' | 'items' | 'selectedItems' | 'selectionType' | 'isItemDisabled' | 'trackBy' | 'onSelectionChange'\n>) {\n  const [shiftPressed, setShiftPressed] = useState(false);\n  const [lastClickedItem, setLastClickedItem] = useState<T | null>(null);\n  const selectionName = useUniqueId();\n  const finalSelectedItems = selectionType === 'single' ? selectedItems.slice(0, 1) : selectedItems;\n  const selectedSet = new ItemSet(trackBy, finalSelectedItems);\n  const itemIndexesMap = new Map();\n  items.forEach((item, i) => itemIndexesMap.set(getTrackableValue(trackBy, item), i));\n  const isItemSelected = selectedSet.has.bind(selectedSet);\n  const getItemState = (item: T) => ({\n    disabled: isItemDisabled(item),\n    selected: isItemSelected(item),\n  });\n  const [allDisabled, allEnabledSelected, hasSelected] = selectionType\n    ? items.reduce(\n        ([allDisabled, allEnabledSelected, hasSelected], item) => {\n          const { disabled, selected } = getItemState(item);\n          return [\n            // all items are disabled (or none are present)\n            allDisabled && disabled,\n            // all enabled items are selected (or none are present)\n            allEnabledSelected && (selected || disabled),\n            // the page has at least one selected item\n            hasSelected || selected,\n          ];\n        },\n        [true, true, false]\n      )\n    : [true, true, false];\n\n  const handleToggleAll = () => {\n    const requestedItems = new ItemSet(trackBy, items);\n    const newSelectedItems = allEnabledSelected ? deselectItems(requestedItems) : selectItems(requestedItems);\n    fireNonCancelableEvent(onSelectionChange, { selectedItems: newSelectedItems });\n  };\n\n  const getRequestedItems = (item: T) => {\n    const requestedItems = new ItemSet(trackBy, [item]);\n    let lastClickedItemIndex = lastClickedItem ? itemIndexesMap.get(getTrackableValue(trackBy, lastClickedItem)) : -1;\n    if (lastClickedItemIndex === undefined) {\n      lastClickedItemIndex = -1;\n    }\n    // we use lastClickedItemIndex to determine if filtering/sorting/pagination\n    // made previously selected item invisible, therefore we reset state for shift-select\n    if (shiftPressed && lastClickedItemIndex !== -1) {\n      // item is always in items\n      const currentItemIndex = itemIndexesMap.get(getTrackableValue(trackBy, item)) as number;\n      const start = Math.min(currentItemIndex, lastClickedItemIndex);\n      const end = Math.max(currentItemIndex, lastClickedItemIndex);\n      items.slice(start, end + 1).forEach(item => requestedItems.put(item));\n    }\n    return requestedItems;\n  };\n\n  const deselectItems = (requestedItems: ItemSet<T>) => {\n    const newSelectedItems: Array<T> = [];\n    selectedItems.forEach(selectedItem => {\n      const toUnselect = requestedItems.has(selectedItem);\n      if (!toUnselect || isItemDisabled(selectedItem)) {\n        newSelectedItems.push(selectedItem);\n      }\n    });\n    return newSelectedItems;\n  };\n\n  const selectItems = (requestedItems: ItemSet<T>) => {\n    const newSelectedItems = [...selectedItems];\n    requestedItems.forEach(newItem => {\n      const { selected, disabled } = getItemState(newItem);\n      if (!selected && !disabled) {\n        newSelectedItems.push(newItem);\n      }\n    });\n    return newSelectedItems;\n  };\n\n  const handleToggleItem = (item: T) => () => {\n    const { disabled, selected } = getItemState(item);\n    if (disabled || (selectionType === 'single' && selected)) {\n      return;\n    }\n    if (selectionType === 'single') {\n      fireNonCancelableEvent(onSelectionChange, { selectedItems: [item] });\n    } else {\n      const requestedItems = getRequestedItems(item);\n      const selectedItems = selected ? deselectItems(requestedItems) : selectItems(requestedItems);\n      fireNonCancelableEvent(onSelectionChange, { selectedItems });\n      setLastClickedItem(item);\n    }\n  };\n  return {\n    isItemSelected,\n    selectAllProps: {\n      name: selectionName,\n      disabled: allDisabled,\n      selectionType: selectionType,\n      indeterminate: hasSelected && !allEnabledSelected,\n      checked: hasSelected && allEnabledSelected,\n      onChange: handleToggleAll,\n      ariaLabel: joinStrings(ariaLabels?.selectionGroupLabel, ariaLabels?.allItemsSelectionLabel?.({ selectedItems })),\n    },\n    getItemSelectionProps: (item: T) => ({\n      name: selectionName,\n      selectionType: selectionType,\n      ariaLabel: joinStrings(\n        ariaLabels?.selectionGroupLabel,\n        ariaLabels?.itemSelectionLabel?.({ selectedItems }, item)\n      ),\n      onChange: handleToggleItem(item),\n      checked: isItemSelected(item),\n      disabled: isItemDisabled(item),\n    }),\n    updateShiftToggle: (value: boolean) => {\n      setShiftPressed(value);\n    },\n  };\n}\n"]}

package/table/use-sticky-header.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+export declare const useStickyHeader: (tableRef: RefObject<HTMLElement>, theadRef: RefObject<HTMLElement>, secondaryTheadRef: RefObject<HTMLElement>, secondaryTableRef: RefObject<HTMLElement>, tableWrapperRef: RefObject<HTMLElement>) => {
+    scrollToRow: (itemNode: HTMLElement | null) => void;
+    scrollToTop: () => void;
+};
+//# sourceMappingURL=use-sticky-header.d.ts.map

package/table/use-sticky-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/table/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAe,MAAM,OAAO,CAAC;AAkBhE,eAAO,MAAM,eAAe,aAChB,UAAU,WAAW,CAAC,YACtB,UAAU,WAAW,CAAC,qBACb,UAAU,WAAW,CAAC,qBACtB,UAAU,WAAW,CAAC,mBACxB,UAAU,WAAW,CAAC;4BAgDR,WAAW,GAAG,IAAI;;CAMlD,CAAC"}

package/table/use-sticky-header.js

@@ -0,0 +1,69 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useLayoutEffect, useCallback } from 'react';
+import { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';
+import stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';
+import { useMobile } from '../internal/hooks/use-mobile';
+function syncSizes(from, to) {
+    var fromCells = Array.prototype.slice.apply(from.children);
+    var toCells = Array.prototype.slice.apply(to.children);
+    for (var i = 0; i < fromCells.length; i++) {
+        var width = fromCells[i].style.width;
+        // use auto if it is set by resizable columns or real size otherwise
+        if (width !== 'auto') {
+            width = "".concat(fromCells[i].offsetWidth, "px");
+        }
+        toCells[i].style.width = width;
+    }
+}
+export var useStickyHeader = function (tableRef, theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef) {
+    var isMobile = useMobile();
+    // Sync the sizes of the column header copies in the sticky header with the originals
+    var syncColumnHeaderWidths = useCallback(function () {
+        if (tableRef.current &&
+            theadRef.current &&
+            secondaryTheadRef.current &&
+            secondaryTableRef.current &&
+            tableWrapperRef.current) {
+            syncSizes(theadRef.current, secondaryTheadRef.current);
+            // Using the tableRef offsetWidth instead of the theadRef because in VR
+            // the tableRef adds extra padding to the table and by default the theadRef will have a width
+            // without the padding and will make the sticky header width incorrect.
+            secondaryTableRef.current.style.width = "".concat(tableRef.current.offsetWidth, "px");
+            tableWrapperRef.current.style.marginTop = "-".concat(theadRef.current.offsetHeight, "px");
+        }
+    }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);
+    useLayoutEffect(function () {
+        syncColumnHeaderWidths();
+        // Content is not going to be layed out until the next frame in angular,
+        // so we need to sync the column headers again.
+        setTimeout(function () { return syncColumnHeaderWidths(); }, 0);
+        var secondaryTable = secondaryTableRef.current;
+        var primaryTable = tableWrapperRef.current;
+        return function () {
+            if (secondaryTable) {
+                secondaryTable.style.width = '';
+            }
+            if (primaryTable) {
+                primaryTable.style.marginTop = '';
+            }
+        };
+    });
+    useResizeObserver(theadRef, syncColumnHeaderWidths);
+    var scrollToTop = function () {
+        if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {
+            var scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);
+            if (scrollDist > 0) {
+                scrollUpBy(scrollDist, tableWrapperRef.current);
+            }
+        }
+    };
+    var scrollToItem = stickyScrolling(tableWrapperRef, secondaryTheadRef).scrollToItem;
+    var scrollToRow = function (itemNode) {
+        if (!isMobile) {
+            scrollToItem(itemNode);
+        }
+    };
+    return { scrollToRow: scrollToRow, scrollToTop: scrollToTop };
+};
+//# sourceMappingURL=use-sticky-header.js.map

package/table/use-sticky-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/table/use-sticky-header.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\nimport { useLayoutEffect, RefObject, useCallback } from 'react';\nimport { useResizeObserver } from '../internal/hooks/container-queries/use-resize-observer';\nimport stickyScrolling, { calculateScrollingOffset, scrollUpBy } from './sticky-scrolling';\nimport { useMobile } from '../internal/hooks/use-mobile';\n\nfunction syncSizes(from: HTMLElement, to: HTMLElement) {\n  const fromCells = Array.prototype.slice.apply(from.children);\n  const toCells = Array.prototype.slice.apply(to.children);\n  for (let i = 0; i < fromCells.length; i++) {\n    let width = fromCells[i].style.width;\n    // use auto if it is set by resizable columns or real size otherwise\n    if (width !== 'auto') {\n      width = `${fromCells[i].offsetWidth}px`;\n    }\n    toCells[i].style.width = width;\n  }\n}\n\nexport const useStickyHeader = (\n  tableRef: RefObject<HTMLElement>,\n  theadRef: RefObject<HTMLElement>,\n  secondaryTheadRef: RefObject<HTMLElement>,\n  secondaryTableRef: RefObject<HTMLElement>,\n  tableWrapperRef: RefObject<HTMLElement>\n) => {\n  const isMobile = useMobile();\n  // Sync the sizes of the column header copies in the sticky header with the originals\n  const syncColumnHeaderWidths = useCallback(() => {\n    if (\n      tableRef.current &&\n      theadRef.current &&\n      secondaryTheadRef.current &&\n      secondaryTableRef.current &&\n      tableWrapperRef.current\n    ) {\n      syncSizes(theadRef.current, secondaryTheadRef.current);\n\n      // Using the tableRef offsetWidth instead of the theadRef because in VR\n      // the tableRef adds extra padding to the table and by default the theadRef will have a width\n      // without the padding and will make the sticky header width incorrect.\n      secondaryTableRef.current.style.width = `${tableRef.current.offsetWidth}px`;\n\n      tableWrapperRef.current.style.marginTop = `-${theadRef.current.offsetHeight}px`;\n    }\n  }, [theadRef, secondaryTheadRef, secondaryTableRef, tableWrapperRef, tableRef]);\n  useLayoutEffect(() => {\n    syncColumnHeaderWidths();\n    // Content is not going to be layed out until the next frame in angular,\n    // so we need to sync the column headers again.\n    setTimeout(() => syncColumnHeaderWidths(), 0);\n    const secondaryTable = secondaryTableRef.current;\n    const primaryTable = tableWrapperRef.current;\n    return () => {\n      if (secondaryTable) {\n        secondaryTable.style.width = '';\n      }\n      if (primaryTable) {\n        primaryTable.style.marginTop = '';\n      }\n    };\n  });\n  useResizeObserver(theadRef, syncColumnHeaderWidths);\n  const scrollToTop = () => {\n    if (!isMobile && theadRef.current && secondaryTheadRef.current && tableWrapperRef.current) {\n      const scrollDist = calculateScrollingOffset(theadRef.current, secondaryTheadRef.current);\n      if (scrollDist > 0) {\n        scrollUpBy(scrollDist, tableWrapperRef.current);\n      }\n    }\n  };\n  const { scrollToItem } = stickyScrolling(tableWrapperRef, secondaryTheadRef);\n  const scrollToRow = (itemNode: HTMLElement | null) => {\n    if (!isMobile) {\n      scrollToItem(itemNode);\n    }\n  };\n  return { scrollToRow, scrollToTop };\n};\n"]}

package/table/use-sticky-scrollbar.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare function useStickyScrollbar(scrollbarRef: RefObject<HTMLDivElement>, scrollbarContentRef: RefObject<HTMLDivElement>, tableRef: RefObject<HTMLTableElement>, wrapperRef: RefObject<HTMLDivElement>, footerHeight: number): void;
+//# sourceMappingURL=use-sticky-scrollbar.d.ts.map

package/table/use-sticky-scrollbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-scrollbar.d.ts","sourceRoot":"","sources":["../../../src/table/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AA6EvD,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,EACvC,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC9C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACrC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,EACrC,YAAY,EAAE,MAAM,QA4ErB"}