@perses-dev/components 0.30.0 → 0.31.0

package/dist/Table/TableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableDensity, getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.paper,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex'> {\n  density: TableDensity;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details'\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","paper","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"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"}

package/dist/Table/TableCheckbox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CheckboxProps } from '@mui/material';
+import { TableDensity } from './model/table-model';
+export interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {
+    color?: string;
+    density: TableDensity;
+}
+export declare function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps): JSX.Element;
+//# sourceMappingURL=TableCheckbox.d.ts.map

package/dist/Table/TableCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCheckbox.d.ts","sourceRoot":"","sources":["../../src/Table/TableCheckbox.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAY,aAAa,EAAS,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,UAAU,EAAE,EAAE,kBAAkB,eAsClF"}

package/dist/Table/TableCheckbox.js

@@ -0,0 +1,49 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, alpha } from '@mui/material';
+export function TableCheckbox({ color , density , ...otherProps }) {
+    const isCompact = density === 'compact';
+    return /*#__PURE__*/ _jsx(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 ? alpha(color, 0.5) : undefined
+            },
+            '& .MuiSvgIcon-root': {
+                fontSize: isCompact ? 14 : 16
+            }
+        }
+    });
+}
+
+//# sourceMappingURL=TableCheckbox.js.map

package/dist/Table/TableCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableCheckbox.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, CheckboxProps, alpha } from '@mui/material';\nimport { TableDensity } from './model/table-model';\n\nexport interface TableCheckboxProps extends Pick<CheckboxProps, 'checked' | 'indeterminate' | 'onChange'> {\n  color?: string;\n  density: TableDensity;\n}\n\nexport function TableCheckbox({ color, density, ...otherProps }: TableCheckboxProps) {\n  const isCompact = density === 'compact';\n\n  return (\n    <Checkbox\n      size={isCompact ? 'small' : 'medium'}\n      {...otherProps}\n      // Disable ripple and set background color below because of some issues\n      // with re-rendering with the keyboard interactions that causes the ripple\n      // animation to stutter.\n      focusRipple={false}\n      // Tab index is handled by the overall keyboard interactions for the table\n      // to avoid trapping a keyboard user in a table by requiring them to tab\n      // through every single checkbox.\n      tabIndex={-1}\n      sx={{\n        color: color,\n\n        padding: (theme) => theme.spacing(isCompact ? 0.25 : 0.5),\n\n        // Centering.\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        transform: 'translate(-50%, -50%)',\n\n        '&.Mui-checked': {\n          color: color,\n        },\n\n        '&.Mui-focusVisible': {\n          background: color ? alpha(color, 0.5) : undefined,\n        },\n\n        '& .MuiSvgIcon-root': { fontSize: isCompact ? 14 : 16 },\n      }}\n    />\n  );\n}\n"],"names":["Checkbox","alpha","TableCheckbox","color","density","otherProps","isCompact","size","focusRipple","tabIndex","sx","padding","theme","spacing","position","top","left","transform","background","undefined","fontSize"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAiBC,KAAK,QAAQ,eAAe,CAAC;AAQ/D,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAEC,OAAO,CAAA,EAAE,GAAGC,UAAU,EAAsB,EAAE;IACnF,MAAMC,SAAS,GAAGF,OAAO,KAAK,SAAS,AAAC;IAExC,qBACE,KAACJ,QAAQ;QACPO,IAAI,EAAED,SAAS,GAAG,OAAO,GAAG,QAAQ;QACnC,GAAGD,UAAU;QACd,uEAAuE;QACvE,0EAA0E;QAC1E,wBAAwB;QACxBG,WAAW,EAAE,KAAK;QAClB,0EAA0E;QAC1E,wEAAwE;QACxE,iCAAiC;QACjCC,QAAQ,EAAE,CAAC,CAAC;QACZC,EAAE,EAAE;YACFP,KAAK,EAAEA,KAAK;YAEZQ,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACP,SAAS,GAAG,IAAI,GAAG,GAAG,CAAC;YAEzD,aAAa;YACbQ,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,IAAI,EAAE,KAAK;YACXC,SAAS,EAAE,uBAAuB;YAElC,eAAe,EAAE;gBACfd,KAAK,EAAEA,KAAK;aACb;YAED,oBAAoB,EAAE;gBACpBe,UAAU,EAAEf,KAAK,GAAGF,KAAK,CAACE,KAAK,EAAE,GAAG,CAAC,GAAGgB,SAAS;aAClD;YAED,oBAAoB,EAAE;gBAAEC,QAAQ,EAAEd,SAAS,GAAG,EAAE,GAAG,EAAE;aAAE;SACxD;MACD,CACF;AACJ,CAAC"}

package/dist/Table/TableHead.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TableHeadProps as MuiTableHeadProps } from '@mui/material';
+declare type TableHeadProps = MuiTableHeadProps;
+export declare const TableHead: import("react").ForwardRefExoticComponent<Pick<TableHeadProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export {};
+//# sourceMappingURL=TableHead.d.ts.map

package/dist/Table/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../src/Table/TableHead.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6B,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAG/F,aAAK,cAAc,GAAG,iBAAiB,CAAC;AAExC,eAAO,MAAM,SAAS,gqJAEpB,CAAC"}

package/dist/Table/TableHead.js

@@ -0,0 +1,23 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableHead as MuiTableHead } from '@mui/material';
+import { forwardRef } from 'react';
+export const TableHead = /*#__PURE__*/ forwardRef(function TableHead(props, ref) {
+    return /*#__PURE__*/ _jsx(MuiTableHead, {
+        ...props,
+        ref: ref
+    });
+});
+
+//# sourceMappingURL=TableHead.js.map

package/dist/Table/TableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableHead.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableHead as MuiTableHead, TableHeadProps as MuiTableHeadProps } from '@mui/material';\nimport { forwardRef } from 'react';\n\ntype TableHeadProps = MuiTableHeadProps;\n\nexport const TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(function TableHead(props, ref) {\n  return <MuiTableHead {...props} ref={ref} />;\n});\n"],"names":["TableHead","MuiTableHead","forwardRef","props","ref"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,IAAIC,YAAY,QAA6C,eAAe,CAAC;AAC/F,SAASC,UAAU,QAAQ,OAAO,CAAC;AAInC,OAAO,MAAMF,SAAS,iBAAGE,UAAU,CAA0C,SAASF,SAAS,CAACG,KAAK,EAAEC,GAAG,EAAE;IAC1G,qBAAO,KAACH,YAAY;QAAE,GAAGE,KAAK;QAAEC,GAAG,EAAEA,GAAG;MAAI,CAAC;AAC/C,CAAC,CAAC,CAAC"}

package/dist/Table/TableRow.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TableRowProps as MuiTableRowProps } from '@mui/material';
+import { TableDensity } from './model/table-model';
+interface TableRowProps extends MuiTableRowProps<'div'> {
+    density: TableDensity;
+}
+export declare const TableRow: import("react").ForwardRefExoticComponent<Pick<TableRowProps, "classes" | "className" | "style" | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "selected" | "hover" | "density"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export {};
+//# sourceMappingURL=TableRow.d.ts.map

package/dist/Table/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}

package/dist/Table/TableRow.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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableRow as MuiTableRow } from '@mui/material';
+import { forwardRef } from 'react';
+export const TableRow = /*#__PURE__*/ forwardRef(function TableRow(props, ref) {
+    return /*#__PURE__*/ _jsx(MuiTableRow, {
+        ...props,
+        ref: ref,
+        sx: {
+            backgroundColor: (theme)=>theme.palette.background.paper,
+            '&:hover': {
+                backgroundColor: (theme)=>theme.palette.primary.light
+            }
+        }
+    });
+});
+
+//# sourceMappingURL=TableRow.js.map

package/dist/Table/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/TableRow.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.paper,\n        '&:hover': {\n          backgroundColor: (theme) => theme.palette.primary.light,\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","paper","primary","light"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,IAAIC,WAAW,QAA2C,eAAe,CAAC;AAC3F,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMF,QAAQ,iBAAGE,UAAU,CAAqC,SAASF,QAAQ,CAACG,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACH,WAAW;QACT,GAAGE,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;YAC1D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,KAAK;aACxD;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/Table/VirtualizedTable.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Column, HeaderGroup, Row } from '@tanstack/react-table';
+import { TableProps } from './model/table-model';
+export declare type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {
+    onRowClick: (id: string) => void;
+    rows: Array<Row<TableData>>;
+    columns: Array<Column<TableData, unknown>>;
+    headers: Array<HeaderGroup<TableData>>;
+};
+export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, rows, columns, headers, }: VirtualizedTableProps<TableData>): JSX.Element;
+//# sourceMappingURL=VirtualizedTable.d.ts.map

package/dist/Table/VirtualizedTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAU7E,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAQjD,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAAG;IACrH,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CACxC,CAAC;AAKF,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA+HlC"}

package/dist/Table/VirtualizedTable.js

@@ -0,0 +1,152 @@
+// 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.
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { flexRender } from '@tanstack/react-table';
+import { Box } from '@mui/material';
+import { TableVirtuoso } from 'react-virtuoso';
+import { useRef, useMemo } from 'react';
+import { TableRow } from './TableRow';
+import { TableBody } from './TableBody';
+import { InnerTable } from './InnerTable';
+import { TableHead } from './TableHead';
+import { TableCell } from './TableCell';
+import { VirtualizedTableContainer } from './VirtualizedTableContainer';
+import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';
+// Separating out the virtualized table because we may want a paginated table
+// in the future that does not need virtualization, and we'd likely lay them
+// out differently.
+export function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+    const virtuosoRef = 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 = useRef({
+        startIndex: 0,
+        endIndex: 0
+    });
+    const setVisibleRange = (newVisibleRange)=>{
+        visibleRange.current = newVisibleRange;
+    };
+    const keyboardNav = 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 = useMemo(()=>{
+        return {
+            Scroller: VirtualizedTableContainer,
+            Table: (props)=>{
+                return /*#__PURE__*/ _jsx(InnerTable, {
+                    ...props,
+                    width: width,
+                    density: density,
+                    onKeyDown: keyboardNav.onTableKeyDown
+                });
+            },
+            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__*/ _jsx(TableRow, {
+                    ...props,
+                    onClick: ()=>onRowClick(row.id),
+                    density: density
+                });
+            },
+            TableBody
+        };
+    }, [
+        density,
+        keyboardNav.onTableKeyDown,
+        onRowClick,
+        rows,
+        width
+    ]);
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            width,
+            height
+        },
+        children: /*#__PURE__*/ _jsx(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__*/ _jsx(_Fragment, {
+                    children: headers.map((headerGroup)=>{
+                        return /*#__PURE__*/ _jsx(TableRow, {
+                            density: density,
+                            children: headerGroup.headers.map((header, i)=>{
+                                const column = header.column;
+                                const position = {
+                                    row: 0,
+                                    column: i
+                                };
+                                return /*#__PURE__*/ _jsx(TableCell, {
+                                    width: column.getSize() || 'auto',
+                                    variant: "head",
+                                    density: density,
+                                    focusState: getFocusState(position),
+                                    onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                                    children: flexRender(column.columnDef.header, header.getContext())
+                                }, header.id);
+                            })
+                        }, headerGroup.id);
+                    })
+                });
+            },
+            itemContent: (index)=>{
+                const row = rows[index];
+                if (!row) {
+                    return null;
+                }
+                return /*#__PURE__*/ _jsx(_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__*/ _jsx(TableCell, {
+                            sx: {
+                                width: cell.column.getSize() || 'auto'
+                            },
+                            density: density,
+                            focusState: getFocusState(position),
+                            onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
+                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                        }, cell.id);
+                    })
+                });
+            }
+        })
+    });
+}
+
+//# sourceMappingURL=VirtualizedTable.js.map

package/dist/Table/VirtualizedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & {\n  onRowClick: (id: string) => void;\n  rows: Array<Row<TableData>>;\n  columns: Array<Column<TableData, unknown>>;\n  headers: Array<HeaderGroup<TableData>>;\n};\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  onRowClick,\n  rows,\n  columns,\n  headers,\n}: VirtualizedTableProps<TableData>) {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props) => {\n        return <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\n      },\n      TableHead,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }) => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        return <TableRow {...props} onClick={() => onRowClick(row.id)} density={density} />;\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, rows, width]);\n\n  return (\n    <Box sx={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      return (\n                        <TableCell\n                          key={header.id}\n                          width={column.getSize() || 'auto'}\n                          variant=\"head\"\n                          density={density}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i) => {\n                const position: TableCellPosition = {\n                  // Add 1 to the row index because the header is row 0\n                  row: index + 1,\n                  column: i,\n                };\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    sx={{ width: cell.column.getSize() || 'auto' }}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                  >\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","rows","columns","headers","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","onClick","id","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","getSize","variant","focusState","onFocusTrigger","onCellFocus","columnDef","getContext","itemContent","getVisibleCells","cell"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAAmCA,UAAU,QAAQ,uBAAuB,CAAC;AAC7E,SAASC,GAAG,QAAQ,eAAe,CAAC;AACpC,SAASC,aAAa,QAAkE,gBAAgB,CAAC;AACzG,SAASC,MAAM,EAAEC,OAAO,QAAQ,OAAO,CAAC;AACxC,SAASC,QAAQ,QAAQ,YAAY,CAAC;AACtC,SAASC,SAAS,QAAQ,aAAa,CAAC;AACxC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,SAAS,QAAQ,aAAa,CAAC;AACxC,SAASC,SAAS,QAAwB,aAAa,CAAC;AACxD,SAASC,yBAAyB,QAAQ,6BAA6B,CAAC;AAExE,SAASC,8BAA8B,QAAQ,wCAAwC,CAAC;AAcxF,6EAA6E;AAC7E,4EAA4E;AAC5E,mBAAmB;AACnB,OAAO,SAASC,gBAAgB,CAAY,EAC1CC,KAAK,CAAA,EACLC,MAAM,CAAA,EACNC,OAAO,CAAA,EACPC,UAAU,CAAA,EACVC,IAAI,CAAA,EACJC,OAAO,CAAA,EACPC,OAAO,CAAA,EAC0B,EAAE;IACnC,MAAMC,WAAW,GAAGjB,MAAM,CAAsB,IAAI,CAAC,AAAC;IAEtD,uEAAuE;IACvE,0EAA0E;IAC1E,oCAAoC;IACpC,MAAMkB,YAAY,GAAGlB,MAAM,CAAC;QAC1BmB,UAAU,EAAE,CAAC;QACbC,QAAQ,EAAE,CAAC;KACZ,CAAC,AAAC;IACH,MAAMC,eAAe,GAA2D,CAACC,eAAe,GAAK;QACnGJ,YAAY,CAACK,OAAO,GAAGD,eAAe,CAAC;IACzC,CAAC,AAAC;IAEF,MAAME,WAAW,GAAGhB,8BAA8B,CAAC;QACjDU,YAAY,EAAEA,YAAY;QAC1BO,YAAY,EAAER,WAAW;QAEzB,gCAAgC;QAChCS,OAAO,EAAEZ,IAAI,CAACa,MAAM,GAAG,CAAC;QACxBC,UAAU,EAAEb,OAAO,CAACY,MAAM;KAC3B,CAAC,AAAC;IAEH,MAAME,aAAa,GAAG,CAACC,YAA+B,GAAmC;QACvF,IAAIA,YAAY,CAACC,GAAG,KAAKP,WAAW,CAACQ,UAAU,CAACD,GAAG,IAAID,YAAY,CAACG,MAAM,KAAKT,WAAW,CAACQ,UAAU,CAACC,MAAM,EAAE;YAC5G,OAAOT,WAAW,CAACU,QAAQ,GAAG,eAAe,GAAG,YAAY,CAAC;QAC/D,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,AAAC;IAEF,MAAMC,uBAAuB,GAA+BlC,OAAO,CAAC,IAAM;QACxE,OAAO;YACLmC,QAAQ,EAAE7B,yBAAyB;YACnC8B,KAAK,EAAE,CAACC,KAAK,GAAK;gBAChB,qBAAO,KAAClC,UAAU;oBAAE,GAAGkC,KAAK;oBAAE5B,KAAK,EAAEA,KAAK;oBAAEE,OAAO,EAAEA,OAAO;oBAAE2B,SAAS,EAAEf,WAAW,CAACgB,cAAc;kBAAI,CAAC;YAC1G,CAAC;YACDnC,SAAS;YACT,6DAA6D;YAC7DH,QAAQ,EAAE,CAAC,EAAEuC,IAAI,CAAA,EAAE,GAAGH,KAAK,EAAE,GAAK;gBAChC,MAAMI,KAAK,GAAGJ,KAAK,CAAC,YAAY,CAAC,AAAC;gBAClC,MAAMP,GAAG,GAAGjB,IAAI,CAAC4B,KAAK,CAAC,AAAC;gBACxB,IAAI,CAACX,GAAG,EAAE;oBACR,OAAO,IAAI,CAAC;gBACd,CAAC;gBAED,qBAAO,KAAC7B,QAAQ;oBAAE,GAAGoC,KAAK;oBAAEK,OAAO,EAAE,IAAM9B,UAAU,CAACkB,GAAG,CAACa,EAAE,CAAC;oBAAEhC,OAAO,EAAEA,OAAO;kBAAI,CAAC;YACtF,CAAC;YACDT,SAAS;SACV,CAAC;IACJ,CAAC,EAAE;QAACS,OAAO;QAAEY,WAAW,CAACgB,cAAc;QAAE3B,UAAU;QAAEC,IAAI;QAAEJ,KAAK;KAAC,CAAC,AAAC;IAEnE,qBACE,KAACZ,GAAG;QAAC+C,EAAE,EAAE;YAAEnC,KAAK;YAAEC,MAAM;SAAE;kBACxB,cAAA,KAACZ,aAAa;YACZ+C,GAAG,EAAE7B,WAAW;YAChB8B,UAAU,EAAEjC,IAAI,CAACa,MAAM;YACvBqB,UAAU,EAAEb,uBAAuB;YACnC,uEAAuE;YACvE,YAAY;YACZ,8EAA8E;YAC9Ec,YAAY,EAAE5B,eAAe;YAC7B6B,kBAAkB,EAAE,IAAM;gBACxB,qBACE;8BACGlC,OAAO,CAACmC,GAAG,CAAC,CAACC,WAAW,GAAK;wBAC5B,qBACE,KAAClD,QAAQ;4BAAsBU,OAAO,EAAEA,OAAO;sCAC5CwC,WAAW,CAACpC,OAAO,CAACmC,GAAG,CAAC,CAACE,MAAM,EAAEC,CAAC,GAAK;gCACtC,MAAMrB,MAAM,GAAGoB,MAAM,CAACpB,MAAM,AAAC;gCAC7B,MAAMsB,QAAQ,GAAsB;oCAClCxB,GAAG,EAAE,CAAC;oCACNE,MAAM,EAAEqB,CAAC;iCACV,AAAC;gCAEF,qBACE,KAAChD,SAAS;oCAERI,KAAK,EAAEuB,MAAM,CAACuB,OAAO,EAAE,IAAI,MAAM;oCACjCC,OAAO,EAAC,MAAM;oCACd7C,OAAO,EAAEA,OAAO;oCAChB8C,UAAU,EAAE7B,aAAa,CAAC0B,QAAQ,CAAC;oCACnCI,cAAc,EAAE,IAAMnC,WAAW,CAACoC,WAAW,CAACL,QAAQ,CAAC;8CAEtD1D,UAAU,CAACoC,MAAM,CAAC4B,SAAS,CAACR,MAAM,EAAEA,MAAM,CAACS,UAAU,EAAE,CAAC;mCAPpDT,MAAM,CAACT,EAAE,CAQJ,CACZ;4BACJ,CAAC,CAAC;2BApBWQ,WAAW,CAACR,EAAE,CAqBlB,CACX;oBACJ,CAAC,CAAC;kBACD,CACH;YACJ,CAAC;YACDmB,WAAW,EAAE,CAACrB,KAAK,GAAK;gBACtB,MAAMX,GAAG,GAAGjB,IAAI,CAAC4B,KAAK,CAAC,AAAC;gBACxB,IAAI,CAACX,GAAG,EAAE;oBACR,OAAO,IAAI,CAAC;gBACd,CAAC;gBAED,qBACE;8BACGA,GAAG,CAACiC,eAAe,EAAE,CAACb,GAAG,CAAC,CAACc,IAAI,EAAEX,CAAC,GAAK;wBACtC,MAAMC,QAAQ,GAAsB;4BAClC,qDAAqD;4BACrDxB,GAAG,EAAEW,KAAK,GAAG,CAAC;4BACdT,MAAM,EAAEqB,CAAC;yBACV,AAAC;wBAEF,qBACE,KAAChD,SAAS;4BAERuC,EAAE,EAAE;gCAAEnC,KAAK,EAAEuD,IAAI,CAAChC,MAAM,CAACuB,OAAO,EAAE,IAAI,MAAM;6BAAE;4BAC9C5C,OAAO,EAAEA,OAAO;4BAChB8C,UAAU,EAAE7B,aAAa,CAAC0B,QAAQ,CAAC;4BACnCI,cAAc,EAAE,IAAMnC,WAAW,CAACoC,WAAW,CAACL,QAAQ,CAAC;sCAEtD1D,UAAU,CAACoE,IAAI,CAAChC,MAAM,CAAC4B,SAAS,CAACI,IAAI,EAAEA,IAAI,CAACH,UAAU,EAAE,CAAC;2BANrDG,IAAI,CAACrB,EAAE,CAOF,CACZ;oBACJ,CAAC,CAAC;kBACD,CACH;YACJ,CAAC;UACD;MACE,CACN;AACJ,CAAC"}

package/dist/Table/VirtualizedTableContainer.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TableContainerProps as MuiTableContainerProps } from '@mui/material';
+declare type VirtualizedTableContainerProps = MuiTableContainerProps;
+export declare const VirtualizedTableContainer: import("react").ForwardRefExoticComponent<Pick<VirtualizedTableContainerProps, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=VirtualizedTableContainer.d.ts.map

package/dist/Table/VirtualizedTableContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedTableContainer.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTableContainer.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuC,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAGnH,aAAK,8BAA8B,GAAG,sBAAsB,CAAC;AAE7D,eAAO,MAAM,yBAAyB,uqJAIrC,CAAC"}

package/dist/Table/VirtualizedTableContainer.js

@@ -0,0 +1,24 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TableContainer as MuiTableContainer } from '@mui/material';
+import { forwardRef } from 'react';
+export const VirtualizedTableContainer = /*#__PURE__*/ forwardRef(function VirtualizedTableContainer(props, ref) {
+    return /*#__PURE__*/ _jsx(MuiTableContainer, {
+        ...props,
+        tabIndex: -1,
+        ref: ref
+    });
+});
+
+//# sourceMappingURL=VirtualizedTableContainer.js.map

package/dist/Table/VirtualizedTableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/VirtualizedTableContainer.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableContainer as MuiTableContainer, TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { forwardRef } from 'react';\n\ntype VirtualizedTableContainerProps = MuiTableContainerProps;\n\nexport const VirtualizedTableContainer = forwardRef<HTMLDivElement, VirtualizedTableContainerProps>(\n  function VirtualizedTableContainer(props, ref) {\n    return <MuiTableContainer {...props} tabIndex={-1} ref={ref} />;\n  }\n);\n"],"names":["TableContainer","MuiTableContainer","forwardRef","VirtualizedTableContainer","props","ref","tabIndex"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,cAAc,IAAIC,iBAAiB,QAAuD,eAAe,CAAC;AACnH,SAASC,UAAU,QAAQ,OAAO,CAAC;AAInC,OAAO,MAAMC,yBAAyB,iBAAGD,UAAU,CACjD,SAASC,yBAAyB,CAACC,KAAK,EAAEC,GAAG,EAAE;IAC7C,qBAAO,KAACJ,iBAAiB;QAAE,GAAGG,KAAK;QAAEE,QAAQ,EAAE,CAAC,CAAC;QAAED,GAAG,EAAEA,GAAG;MAAI,CAAC;AAClE,CAAC,CACF,CAAC"}

package/dist/Table/hooks/useTableKeyboardNav.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export interface UseTableKeyboardNavProps {
+    maxRows: number;
+    maxColumns: number;
+    /**
+     * Function used to modify the active table cell based on the keyboard event,
+     * the current position, and the default recommended next position (this value
+     * will be `undefined` in cases where there is no default handler like `PageUp`
+     * and `PageDown`). This can be used to modify the next position that will be
+     * used and/or to handle side effects related to the new position (e.g.
+     * pagination, scrolling the active cell into view).
+     */
+    onActiveCellChange?: (e: React.KeyboardEvent<HTMLTableElement>, currentActiveCell: TableCellPosition, defaultNextActiveCell: TableCellPosition | undefined) => TableCellPosition | undefined;
+}
+declare type TableCellPosition = {
+    row: number;
+    column: number;
+};
+/**
+ * Hook for managing keyboard navigation for table components. It is intended
+ * to be wrapped by implementation-specific tables to account for differences
+ * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`
+ * for an example.
+ */
+export declare function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {
+    activeCell: TableCellPosition;
+    isActive: boolean;
+    onTableKeyDown: import("react").KeyboardEventHandler<HTMLTableElement>;
+    onCellFocus: (cellPosition: TableCellPosition) => void;
+};
+export {};
+//# sourceMappingURL=useTableKeyboardNav.d.ts.map

package/dist/Table/hooks/useTableKeyboardNav.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":";AAeA,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CACnB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,KACjD,iBAAiB,GAAG,SAAS,CAAC;CACpC;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,wBAAwB;;;;gCAIhE,iBAAiB;EAiEzD"}

package/dist/Table/hooks/useTableKeyboardNav.js

@@ -0,0 +1,98 @@
+// 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.
+import { useCallback, useState } from 'react';
+const DEFAULT_ACTIVE_CELL = {
+    row: 0,
+    column: 0
+};
+const ARROW_KEYS = [
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowUp',
+    'ArrowDown'
+];
+function isArrowKey(key) {
+    return ARROW_KEYS.includes(key);
+}
+/**
+ * Hook for managing keyboard navigation for table components. It is intended
+ * to be wrapped by implementation-specific tables to account for differences
+ * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`
+ * for an example.
+ */ export function useTableKeyboardNav({ maxRows , maxColumns , onActiveCellChange  }) {
+    const [activeCell, setActiveCell] = useState(DEFAULT_ACTIVE_CELL);
+    const [isActive, setIsActive] = useState(false);
+    const handleCellFocus = (cellPosition)=>{
+        if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {
+            return;
+        }
+        setIsActive(true);
+        setActiveCell(cellPosition);
+    };
+    const handleKeyDown = 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
+    };
+}
+
+//# sourceMappingURL=useTableKeyboardNav.js.map