@perses-dev/components 0.55.0-beta.3 → 0.55.0-beta.6

package/dist/cjs/Table/TableToolbar.js

@@ -1,151 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "TableToolbar", {
-    enumerable: true,
-    get: function() {
-        return TableToolbar;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
-const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
-const _UnfoldLessHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldLessHorizontal"));
-const _UnfoldMoreHorizontal = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/UnfoldMoreHorizontal"));
-const _ViewColumn = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ViewColumn"));
-const _react = require("react");
-const _controls = require("../controls");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
-function TableToolbar({ isSearchEnabled, globalFilter, onGlobalFilterChange, isColumnFilterEnabled, columns, width, columnFilterMenuMaxHeight = 400, isExpandAllEnabled, isAllExpanded, onExpandAllChange }) {
-    const [colMenuAnchor, setColMenuAnchor] = (0, _react.useState)(null);
-    const colMenuOpen = Boolean(colMenuAnchor);
-    const [searchResetKey, setSearchResetKey] = (0, _react.useState)(0);
-    const handleSearchClear = (0, _react.useCallback)(()=>{
-        onGlobalFilterChange('');
-        setSearchResetKey((prev)=>prev + 1);
-    }, [
-        onGlobalFilterChange
-    ]);
-    if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {
-        return null;
-    }
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        direction: "row",
-        gap: 1,
-        alignItems: "center",
-        justifyContent: "flex-end",
-        width: width,
-        padding: "0.5rem",
-        sx: {
-            backgroundColor: (theme)=>theme.palette.background.default
-        },
-        children: [
-            isSearchEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_controls.TextField, {
-                placeholder: "Search...",
-                value: globalFilter,
-                onChange: onGlobalFilterChange,
-                variant: "standard",
-                slotProps: {
-                    htmlInput: {
-                        'aria-label': 'search table'
-                    },
-                    input: {
-                        startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
-                            position: "start",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {
-                                fontSize: "small"
-                            })
-                        }),
-                        endAdornment: globalFilter !== '' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
-                            position: "end",
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                                onClick: handleSearchClear,
-                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {
-                                    fontSize: "small"
-                                })
-                            })
-                        })
-                    }
-                },
-                sx: {
-                    flexGrow: 1
-                }
-            }, searchResetKey),
-            isExpandAllEnabled && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                title: isAllExpanded ? 'Collapse all' : 'Expand all',
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                    onClick: onExpandAllChange,
-                    color: "info",
-                    "aria-label": isAllExpanded ? 'collapse all rows' : 'expand all rows',
-                    children: isAllExpanded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldLessHorizontal.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_UnfoldMoreHorizontal.default, {})
-                })
-            }),
-            isColumnFilterEnabled && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
-                        onClick: (e)=>setColMenuAnchor(e.currentTarget),
-                        "aria-haspopup": "listbox",
-                        "aria-expanded": colMenuOpen,
-                        color: "info",
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewColumn.default, {})
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
-                        anchorEl: colMenuAnchor,
-                        open: colMenuOpen,
-                        onClose: ()=>setColMenuAnchor(null),
-                        slotProps: {
-                            list: {
-                                dense: true
-                            }
-                        },
-                        sx: {
-                            maxHeight: columnFilterMenuMaxHeight
-                        },
-                        children: columns.map((column)=>{
-                            const header = column.columnDef.header;
-                            const label = typeof header === 'string' ? header : column.id;
-                            return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
-                                disabled: !column.getCanHide(),
-                                onClick: column.getCanHide() ? column.getToggleVisibilityHandler() : undefined,
-                                dense: true,
-                                children: [
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
-                                        checked: column.getIsVisible(),
-                                        disabled: !column.getCanHide(),
-                                        size: "small",
-                                        disableRipple: true,
-                                        sx: {
-                                            p: 0,
-                                            mr: 1
-                                        }
-                                    }),
-                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
-                                        primary: label
-                                    })
-                                ]
-                            }, column.id);
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}

package/dist/cjs/Table/VirtualizedTable.js

@@ -1,284 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "VirtualizedTable", {
-    enumerable: true,
-    get: function() {
-        return VirtualizedTable;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _reacttable = require("@tanstack/react-table");
-const _react = require("react");
-const _reactvirtuoso = require("react-virtuoso");
-const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-const _InnerTable = require("./InnerTable");
-const _TableBody = require("./TableBody");
-const _TableCell = require("./TableCell");
-const _TableFoot = require("./TableFoot");
-const _TableHead = require("./TableHead");
-const _TableHeaderCell = require("./TableHeaderCell");
-const _TableRow = require("./TableRow");
-const _TableToolbar = require("./TableToolbar");
-const _VirtualizedTableContainer = require("./VirtualizedTableContainer");
-function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, columnSizing, columnSizingInfo, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
-    const virtuosoRef = (0, _react.useRef)(null);
-    // Use a ref for these values because they are only needed for keyboard
-    // focus interactions and setting them on state will lead to a significant
-    // amount of unnecessary re-renders.
-    const visibleRange = (0, _react.useRef)({
-        startIndex: 0,
-        endIndex: 0
-    });
-    const setVisibleRange = (newVisibleRange)=>{
-        visibleRange.current = newVisibleRange;
-    };
-    const keyboardNav = (0, _useVirtualizedTableKeyboardNav.useVirtualizedTableKeyboardNav)({
-        visibleRange: visibleRange,
-        virtualTable: virtuosoRef,
-        // We add 1 here for the header.
-        maxRows: rows.length + 1,
-        maxColumns: columns.length
-    });
-    const getFocusState = (cellPosition)=>{
-        if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {
-            return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';
-        }
-        return 'none';
-    };
-    const VirtuosoTableComponents = (0, _react.useMemo)(()=>{
-        return {
-            Scroller: _VirtualizedTableContainer.VirtualizedTableContainer,
-            Table: (props)=>{
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_InnerTable.InnerTable, {
-                    ...props,
-                    width: width,
-                    density: density,
-                    onKeyDown: keyboardNav.onTableKeyDown,
-                    onBlur: keyboardNav.onTableBlur
-                });
-            },
-            TableHead: _TableHead.TableHead,
-            TableFoot: _TableFoot.TableFoot,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            TableRow: ({ item, ...props })=>{
-                const index = props['data-index'];
-                const row = rows[index];
-                if (!row) {
-                    return null;
-                }
-                const rowEventOpts = {
-                    id: row.id,
-                    index: row.index
-                };
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableRow.TableRow, {
-                    ...props,
-                    onClick: (e)=>onRowClick(e, row.id),
-                    density: density,
-                    onMouseOver: (e)=>{
-                        onRowMouseOver?.(e, rowEventOpts);
-                    },
-                    onMouseOut: (e)=>{
-                        onRowMouseOut?.(e, rowEventOpts);
-                    }
-                });
-            },
-            TableBody: _TableBody.TableBody
-        };
-    }, [
-        density,
-        keyboardNav.onTableKeyDown,
-        keyboardNav.onTableBlur,
-        onRowClick,
-        onRowMouseOut,
-        onRowMouseOver,
-        rows,
-        width
-    ]);
-    const handleChangePage = (_event, newPage)=>{
-        if (!pagination || !onPaginationChange) return;
-        onPaginationChange({
-            ...pagination,
-            pageIndex: newPage
-        });
-    };
-    const handleChangeRowsPerPage = (event)=>{
-        if (!pagination || !onPaginationChange) return;
-        onPaginationChange({
-            pageIndex: 0,
-            pageSize: parseInt(event.target.value, 10)
-        });
-    };
-    /**
-   * Instead of calling `column.getSize()` on every render for every header
-   * and especially every data cell (very expensive),
-   * we will calculate all column sizes at once at the root table level in a useMemo
-   * and pass the column sizes down as CSS variables to the <table> element.
-   */ const columnSizeVars = (0, _react.useMemo)(()=>{
-        const colSizes = {};
-        headers.forEach((headerGroup)=>{
-            headerGroup.headers.filter((header)=>header.column.getCanResize()).forEach((header)=>{
-                colSizes[`--header-${header.id}-size`] = header.getSize();
-                colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
-            });
-        });
-        return colSizes;
-    // We want to recalculate column sizes whenever column sizes or column resizing info changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        columnSizingInfo,
-        columnSizing,
-        headers
-    ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
-        style: {
-            width,
-            height,
-            ...columnSizeVars
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableToolbar.TableToolbar, {
-                ...toolbarConfig,
-                width: width
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactvirtuoso.TableVirtuoso, {
-                ref: virtuosoRef,
-                totalCount: rows.length,
-                components: VirtuosoTableComponents,
-                // Note: this value is impacted by overscan. See this issue if overscan
-                // is added.
-                // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138
-                rangeChanged: setVisibleRange,
-                fixedHeaderContent: ()=>{
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                        children: headers.map((headerGroup)=>{
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableRow.TableRow, {
-                                density: density,
-                                children: headerGroup.headers.map((header, i, headers)=>{
-                                    const column = header.column;
-                                    const position = {
-                                        row: 0,
-                                        column: i
-                                    };
-                                    const isSorted = column.getIsSorted();
-                                    const nextSorting = column.getNextSortingOrder();
-                                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableHeaderCell.TableHeaderCell, {
-                                        onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
-                                        sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
-                                        nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
-                                        width: header.column.getCanResize() ? `calc(var(--header-${header?.id}-size) * 1px)` : column.getSize() || defaultColumnWidth,
-                                        defaultColumnHeight: defaultColumnHeight,
-                                        align: column.columnDef.meta?.align,
-                                        variant: "head",
-                                        density: density,
-                                        description: column.columnDef.meta?.headerDescription,
-                                        focusState: getFocusState(position),
-                                        onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                                        isFirstColumn: i === 0,
-                                        isLastColumn: i === headers.length - 1,
-                                        resizeConfig: header.column.getCanResize() ? {
-                                            resizeHandler: header.getResizeHandler(),
-                                            resetSizeHandler: header.column.resetSize,
-                                            isResizing: header.column.getIsResizing()
-                                        } : undefined,
-                                        children: (0, _reacttable.flexRender)(column.columnDef.header, header.getContext())
-                                    }, header.id);
-                                })
-                            }, headerGroup.id);
-                        })
-                    });
-                },
-                fixedFooterContent: pagination ? ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
-                        sx: {
-                            backgroundColor: (theme)=>theme.palette.background.default
-                        },
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TablePagination, {
-                            colSpan: columns.length,
-                            count: rowCount,
-                            page: pagination.pageIndex,
-                            rowsPerPage: pagination.pageSize,
-                            onPageChange: handleChangePage,
-                            onRowsPerPageChange: handleChangeRowsPerPage
-                        })
-                    }) : undefined,
-                itemContent: (index)=>{
-                    const row = rows[index];
-                    if (!row) {
-                        return null;
-                    }
-                    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-                        children: row.getVisibleCells().map((cell, i, cells)=>{
-                            const position = {
-                                row: index + 1,
-                                column: i
-                            };
-                            const cellContext = cell.getContext();
-                            const cellConfig = cellConfigs?.[cellContext.cell.id];
-                            const cellRenderFn = cell.column.columnDef.cell;
-                            const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;
-                            /*
-                     IMPORTANT:
-                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)
-                     Components have no access to any context (Which is intentional and correct)
-                     We may want to add parameters to a link from neighboring cells in the future as well.
-                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)
-                  */ const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;
-                            let description = undefined;
-                            if (typeof cellDescriptionDef === 'function') {
-                                // If the cell description is a function, set the value using
-                                // the function.
-                                description = cellDescriptionDef(cellContext);
-                            } else if (cellDescriptionDef && typeof cellContent === 'string') {
-                                // If the cell description is `true` AND the cell content is
-                                // a string (and thus viable as a `title` attribute), use the
-                                // cell content.
-                                description = cellContent;
-                            }
-                            /* this has been specifically added for the data link,
-                     therefore, non string and numeric values should be excluded
-                  */ const adjacentCellsValuesMap = Object.entries(row.original)?.filter(([_, value])=>[
-                                    'string',
-                                    'number'
-                                ].includes(typeof value)).reduce((acc, [key, value])=>({
-                                    ...acc,
-                                    [key]: String(value)
-                                }), {});
-                            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableCell.TableCell, {
-                                "data-testid": cell.id,
-                                title: description || cellConfig?.text || cellContent,
-                                width: cell.column.getCanResize() ? `calc(var(--col-${cell.column.id}-size) * 1px)` : cell.column.getSize() || defaultColumnWidth,
-                                defaultColumnHeight: defaultColumnHeight,
-                                align: cell.column.columnDef.meta?.align,
-                                density: density,
-                                focusState: getFocusState(position),
-                                onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
-                                isFirstColumn: i === 0,
-                                isLastColumn: i === cells.length - 1,
-                                description: description,
-                                color: cellConfig?.textColor ?? undefined,
-                                backgroundColor: cellConfig?.backgroundColor ?? undefined,
-                                dataLink: cell.column.columnDef.meta?.dataLink,
-                                adjacentCellsValuesMap: adjacentCellsValuesMap,
-                                children: cellConfig?.text || cellContent
-                            }, cell.id);
-                        })
-                    });
-                }
-            })
-        ]
-    });
-}

package/dist/cjs/Table/VirtualizedTableContainer.js

@@ -1,36 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "VirtualizedTableContainer", {
-    enumerable: true,
-    get: function() {
-        return VirtualizedTableContainer;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _react = require("react");
-const _combinesx = require("../utils/combine-sx");
-const VirtualizedTableContainer = /*#__PURE__*/ (0, _react.forwardRef)(function VirtualizedTableContainer(props, ref) {
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
-        ...props,
-        tabIndex: -1,
-        ref: ref,
-        sx: (0, _combinesx.combineSx)({
-            flexGrow: 1
-        }, props.sx)
-    });
-});

package/dist/cjs/Table/hooks/useFuzzySearch.js

@@ -1,67 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useFuzzySearch", {
-    enumerable: true,
-    get: function() {
-        return useFuzzySearch;
-    }
-});
-const _matchsorterutils = require("@tanstack/match-sorter-utils");
-const _reacttable = require("@tanstack/react-table");
-const _react = require("react");
-const getFuzzyFilterFunction = (threshold)=>(row, columnId, value, addMeta)=>{
-        const itemRank = (0, _matchsorterutils.rankItem)(row.getValue(columnId), value, {
-            threshold: _matchsorterutils.rankings[threshold]
-        });
-        addMeta({
-            itemRank
-        });
-        return itemRank.passed;
-    };
-function useFuzzySearch(isSearchEnabled, threshold, expanded, setExpanded) {
-    const [globalFilter, setGlobalFilter] = (0, _react.useState)('');
-    const [prevExpandedState, setPrevExpandedState] = (0, _react.useState)(expanded);
-    // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared
-    const handleGlobalFilterChange = (0, _react.useCallback)((value)=>{
-        setGlobalFilter((prev)=>{
-            if (!prev) {
-                setPrevExpandedState(expanded);
-                setExpanded(true);
-            } else if (prev && !value) {
-                setExpanded(prevExpandedState);
-            }
-            return value;
-        });
-    }, [
-        expanded,
-        prevExpandedState,
-        setExpanded
-    ]);
-    return {
-        globalFilter,
-        setGlobalFilter: handleGlobalFilterChange,
-        fuzzySearchOptions: {
-            filterFns: {
-                fuzzy: getFuzzyFilterFunction(threshold)
-            },
-            globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,
-            getFilteredRowModel: isSearchEnabled ? (0, _reacttable.getFilteredRowModel)() : undefined,
-            filterFromLeafRows: isSearchEnabled,
-            onGlobalFilterChange: handleGlobalFilterChange
-        }
-    };
-}

package/dist/cjs/Table/hooks/useTableKeyboardNav.js

@@ -1,108 +0,0 @@
-// Copyright The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "useTableKeyboardNav", {
-    enumerable: true,
-    get: function() {
-        return useTableKeyboardNav;
-    }
-});
-const _react = require("react");
-const DEFAULT_ACTIVE_CELL = {
-    row: 0,
-    column: 0
-};
-const ARROW_KEYS = [
-    'ArrowRight',
-    'ArrowLeft',
-    'ArrowUp',
-    'ArrowDown'
-];
-function isArrowKey(key) {
-    return ARROW_KEYS.includes(key);
-}
-function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
-    const [activeCell, setActiveCell] = (0, _react.useState)(DEFAULT_ACTIVE_CELL);
-    const [isActive, setIsActive] = (0, _react.useState)(false);
-    const handleCellFocus = (cellPosition)=>{
-        if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
-            return;
-        }
-        setIsActive(true);
-        setActiveCell(cellPosition);
-    };
-    const handleKeyDown = (0, _react.useCallback)((e)=>{
-        // Including some of the basic a11y keyboard interaction patterns from:
-        // https://www.w3.org/WAI/ARIA/apg/patterns/grid/
-        // TODO: add other keyboard combos.
-        const key = e.key;
-        if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {
-            setActiveCell((curActiveCell)=>{
-                let nextRow = curActiveCell.row;
-                let nextColumn = curActiveCell.column;
-                if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {
-                    e.preventDefault();
-                    nextColumn += 1;
-                } else if (key === 'ArrowLeft' && nextColumn > 0) {
-                    e.preventDefault();
-                    nextColumn -= 1;
-                } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {
-                    e.preventDefault();
-                    nextRow += 1;
-                } else if (key === 'ArrowUp' && nextRow > 0) {
-                    e.preventDefault();
-                    nextRow -= 1;
-                } else if (key === 'Home') {
-                    e.preventDefault();
-                    nextRow = 0;
-                    nextColumn = 0;
-                } else if (key === 'End') {
-                    e.preventDefault();
-                    nextRow = maxRows - 1;
-                    nextColumn = maxColumns - 1;
-                }
-                const defaultNewPosition = {
-                    column: nextColumn,
-                    row: nextRow
-                };
-                const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;
-                if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {
-                    // Return original to avoid creating a new object if nothing
-                    // changed.
-                    return curActiveCell;
-                }
-                return newPosition;
-            });
-        }
-    }, [
-        maxColumns,
-        maxRows,
-        onActiveCellChange
-    ]);
-    const handleTableBlur = (0, _react.useCallback)((e)=>{
-        if (!e.currentTarget.contains(e.relatedTarget)) {
-            setIsActive(false);
-            setActiveCell(DEFAULT_ACTIVE_CELL);
-        }
-    }, []);
-    return {
-        activeCell,
-        isActive,
-        onTableKeyDown: handleKeyDown,
-        onCellFocus: handleCellFocus,
-        onTableBlur: handleTableBlur
-    };
-}