@perses-dev/components 0.30.0 → 0.31.0

package/dist/cjs/Table/Table.js

@@ -0,0 +1,102 @@
+// Copyright 2023 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, "Table", {
+    enumerable: true,
+    get: ()=>Table
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactTable = require("@tanstack/react-table");
+const _material = require("@mui/material");
+const _react = require("react");
+const _virtualizedTable = require("./VirtualizedTable");
+const _tableCheckbox = require("./TableCheckbox");
+const _tableModel = require("./model/table-model");
+const DEFAULT_GET_ROW_ID = (data, index)=>{
+    return `${index}`;
+};
+function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection ={} , ...otherProps }) {
+    const theme = (0, _material.useTheme)();
+    const handleRowSelectionChange = (rowSelectionUpdater)=>{
+        const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
+        onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
+    };
+    const checkboxColumn = (0, _react.useMemo)(()=>{
+        return {
+            id: 'checkboxRowSelect',
+            size: 32,
+            header: ({ table  })=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
+                    checked: table.getIsAllRowsSelected(),
+                    indeterminate: table.getIsSomeRowsSelected(),
+                    onChange: table.getToggleAllRowsSelectedHandler(),
+                    color: theme.palette.text.primary,
+                    density: density
+                });
+            },
+            cell: ({ row  })=>{
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
+                    checked: row.getIsSelected(),
+                    indeterminate: row.getIsSomeSelected(),
+                    onChange: (e)=>{
+                        row.getToggleSelectedHandler()(e);
+                    },
+                    color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
+                    density: density
+                });
+            }
+        };
+    }, [
+        density,
+        getCheckboxColor,
+        theme.palette.text.primary
+    ]);
+    const tableColumns = (0, _react.useMemo)(()=>{
+        const initTableColumns = (0, _tableModel.persesColumnsToTanstackColumns)(columns);
+        if (checkboxSelection) {
+            initTableColumns.unshift(checkboxColumn);
+        }
+        return initTableColumns;
+    }, [
+        checkboxColumn,
+        checkboxSelection,
+        columns
+    ]);
+    const table = (0, _reactTable.useReactTable)({
+        data,
+        columns: tableColumns,
+        getRowId,
+        getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+        enableRowSelection: !!checkboxSelection,
+        onRowSelectionChange: handleRowSelectionChange,
+        state: {
+            rowSelection
+        }
+    });
+    const handleRowClick = (0, _react.useCallback)((rowId)=>{
+        table.getRow(rowId).toggleSelected();
+    }, [
+        table
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_virtualizedTable.VirtualizedTable, {
+        ...otherProps,
+        density: density,
+        onRowClick: handleRowClick,
+        rows: table.getRowModel().rows,
+        columns: table.getAllFlatColumns(),
+        headers: table.getHeaderGroups()
+    });
+}

package/dist/cjs/Table/TableBody.js

@@ -0,0 +1,29 @@
+// Copyright 2023 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, "TableBody", {
+    enumerable: true,
+    get: ()=>TableBody
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableBody = /*#__PURE__*/ (0, _react.forwardRef)(function TableBody(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+        ...props,
+        ref: ref
+    });
+});

package/dist/cjs/Table/TableCell.js

@@ -0,0 +1,97 @@
+// Copyright 2023 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, "TableCell", {
+    enumerable: true,
+    get: ()=>TableCell
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const _tableModel = require("./model/table-model");
+const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+        padding: 0,
+        backgroundColor: 'inherit',
+        '&.MuiTableCell-head': {
+            // Important to avoid scrolling behind the header showing through.
+            backgroundColor: theme.palette.background.paper
+        },
+        '&:focus-visible': {
+            outline: `solid 1px ${theme.palette.primary.main}`,
+            // Move inward a little to avoid getting cut off when focusing on items
+            // at the edge of the table.
+            outlineOffset: '-1px',
+            borderRadius: 0
+        }
+    }));
+function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...otherProps }) {
+    const theme = (0, _material.useTheme)();
+    const elRef = (0, _react.useRef)();
+    const isHeader = variant === 'head';
+    (0, _react.useEffect)(()=>{
+        if (focusState === 'trigger-focus' && elRef.current) {
+            elRef.current.focus();
+        }
+    }, [
+        focusState
+    ]);
+    const handleFocus = (e)=>{
+        var ref;
+        // From https://zellwk.com/blog/keyboard-focusable-elements/
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        if (nestedFocusTarget) {
+            // If the cell has a focusable child, focus it instead. Mostly used for
+            // checkbox cells, but could have other uses.
+            nestedFocusTarget.focus();
+        }
+    };
+    const handleInteractionFocusTrigger = (e)=>{
+        // We use `onClick` and `onKeyUp` events instead of `onFocus` because of
+        // some ordering issues with when the browser calls events and how this
+        // plays with the triggering of focus with keyboard interactions.
+        // These report that a focus event happened, so we can adjust the current
+        // tabindex and focuses to the right cell.
+        onFocusTrigger === null || onFocusTrigger === void 0 ? void 0 : onFocusTrigger(e);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTableCell, {
+        ...otherProps,
+        // Modify the tab index based on the currently focused cell. It's important
+        // to avoid having tabindex 0 on everything because it essentially traps
+        // a keyboard user in the table until they hit "tab" for every single
+        // cell.
+        tabIndex: focusState !== 'none' ? 0 : -1,
+        onFocus: handleFocus,
+        onClick: handleInteractionFocusTrigger,
+        onKeyUp: handleInteractionFocusTrigger,
+        sx: {
+            width: width,
+            borderBottom: isHeader ? (theme)=>`solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`
+        },
+        ref: elRef,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+                ...(0, _tableModel.getTableCellLayout)(theme, density),
+                position: 'relative',
+                // Text truncation. Currently enforced on all cells. We may control
+                // this with a prop on column config in the future.
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: children
+        })
+    });
+}

package/dist/cjs/Table/TableCheckbox.js

@@ -0,0 +1,55 @@
+// Copyright 2023 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, "TableCheckbox", {
+    enumerable: true,
+    get: ()=>TableCheckbox
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function TableCheckbox({ color , density , ...otherProps }) {
+    const isCompact = density === 'compact';
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
+        size: isCompact ? 'small' : 'medium',
+        ...otherProps,
+        // Disable ripple and set background color below because of some issues
+        // with re-rendering with the keyboard interactions that causes the ripple
+        // animation to stutter.
+        focusRipple: false,
+        // Tab index is handled by the overall keyboard interactions for the table
+        // to avoid trapping a keyboard user in a table by requiring them to tab
+        // through every single checkbox.
+        tabIndex: -1,
+        sx: {
+            color: color,
+            padding: (theme)=>theme.spacing(isCompact ? 0.25 : 0.5),
+            // Centering.
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            '&.Mui-checked': {
+                color: color
+            },
+            '&.Mui-focusVisible': {
+                background: color ? (0, _material.alpha)(color, 0.5) : undefined
+            },
+            '& .MuiSvgIcon-root': {
+                fontSize: isCompact ? 14 : 16
+            }
+        }
+    });
+}

package/dist/cjs/Table/TableHead.js

@@ -0,0 +1,29 @@
+// Copyright 2023 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, "TableHead", {
+    enumerable: true,
+    get: ()=>TableHead
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableHead = /*#__PURE__*/ (0, _react.forwardRef)(function TableHead(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+        ...props,
+        ref: ref
+    });
+});

package/dist/cjs/Table/TableRow.js

@@ -0,0 +1,35 @@
+// Copyright 2023 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, "TableRow", {
+    enumerable: true,
+    get: ()=>TableRow
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const TableRow = /*#__PURE__*/ (0, _react.forwardRef)(function TableRow(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableRow, {
+        ...props,
+        ref: ref,
+        sx: {
+            backgroundColor: (theme)=>theme.palette.background.paper,
+            '&:hover': {
+                backgroundColor: (theme)=>theme.palette.primary.light
+            }
+        }
+    });
+});

package/dist/cjs/Table/VirtualizedTable.js

@@ -0,0 +1,155 @@
+// Copyright 2023 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: ()=>VirtualizedTable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactTable = require("@tanstack/react-table");
+const _material = require("@mui/material");
+const _reactVirtuoso = require("react-virtuoso");
+const _react = require("react");
+const _tableRow = require("./TableRow");
+const _tableBody = require("./TableBody");
+const _innerTable = require("./InnerTable");
+const _tableHead = require("./TableHead");
+const _tableCell = require("./TableCell");
+const _virtualizedTableContainer = require("./VirtualizedTableContainer");
+const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
+function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+    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
+                });
+            },
+            TableHead: _tableHead.TableHead,
+            // 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;
+                }
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
+                    ...props,
+                    onClick: ()=>onRowClick(row.id),
+                    density: density
+                });
+            },
+            TableBody: _tableBody.TableBody
+        };
+    }, [
+        density,
+        keyboardNav.onTableKeyDown,
+        onRowClick,
+        rows,
+        width
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            width,
+            height
+        },
+        children: /*#__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)=>{
+                                const column = header.column;
+                                const position = {
+                                    row: 0,
+                                    column: i
+                                };
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+                                    width: column.getSize() || 'auto',
+                                    variant: "head",
+                                    density: density,
+                                    focusState: getFocusState(position),
+                                    onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    children: (0, _reactTable.flexRender)(column.columnDef.header, header.getContext())
+                                }, header.id);
+                            })
+                        }, headerGroup.id);
+                    })
+                });
+            },
+            itemContent: (index)=>{
+                const row = rows[index];
+                if (!row) {
+                    return null;
+                }
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+                    children: row.getVisibleCells().map((cell, i)=>{
+                        const position = {
+                            // Add 1 to the row index because the header is row 0
+                            row: index + 1,
+                            column: i
+                        };
+                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+                            sx: {
+                                width: cell.column.getSize() || 'auto'
+                            },
+                            density: density,
+                            focusState: getFocusState(position),
+                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                            children: (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                        }, cell.id);
+                    })
+                });
+            }
+        })
+    });
+}

package/dist/cjs/Table/VirtualizedTableContainer.js

@@ -0,0 +1,30 @@
+// Copyright 2023 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: ()=>VirtualizedTableContainer
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+const VirtualizedTableContainer = /*#__PURE__*/ (0, _react.forwardRef)(function VirtualizedTableContainer(props, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+        ...props,
+        tabIndex: -1,
+        ref: ref
+    });
+});

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

@@ -0,0 +1,99 @@
+// Copyright 2023 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: ()=>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 === null || onActiveCellChange === void 0 ? void 0 : 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
+    ]);
+    return {
+        activeCell,
+        isActive,
+        onTableKeyDown: handleKeyDown,
+        onCellFocus: handleCellFocus
+    };
+}