@perses-dev/components 0.30.0 → 0.32.0

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":"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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.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 { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n  maxRows: number;\n  maxColumns: number;\n\n  /**\n   * Function used to modify the active table cell based on the keyboard event,\n   * the current position, and the default recommended next position (this value\n   * will be `undefined` in cases where there is no default handler like `PageUp`\n   * and `PageDown`). This can be used to modify the next position that will be\n   * used and/or to handle side effects related to the new position (e.g.\n   * pagination, scrolling the active cell into view).\n   */\n  onActiveCellChange?: (\n    e: React.KeyboardEvent<HTMLTableElement>,\n    currentActiveCell: TableCellPosition,\n    defaultNextActiveCell: TableCellPosition | undefined\n  ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n  row: 0,\n  column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string) {\n  return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps) {\n  const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n  const [isActive, setIsActive] = useState(false);\n\n  const handleCellFocus = (cellPosition: TableCellPosition) => {\n    if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n      return;\n    }\n    setIsActive(true);\n    setActiveCell(cellPosition);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n    (e) => {\n      // Including some of the basic a11y keyboard interaction patterns from:\n      // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n      // TODO: add other keyboard combos.\n      const key = e.key;\n\n      if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n        setActiveCell((curActiveCell) => {\n          let nextRow: number = curActiveCell.row;\n          let nextColumn: number = curActiveCell.column;\n\n          if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n            e.preventDefault();\n            nextColumn += 1;\n          } else if (key === 'ArrowLeft' && nextColumn > 0) {\n            e.preventDefault();\n            nextColumn -= 1;\n          } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n            e.preventDefault();\n            nextRow += 1;\n          } else if (key === 'ArrowUp' && nextRow > 0) {\n            e.preventDefault();\n            nextRow -= 1;\n          } else if (key === 'Home') {\n            e.preventDefault();\n            nextRow = 0;\n            nextColumn = 0;\n          } else if (key === 'End') {\n            e.preventDefault();\n            nextRow = maxRows - 1;\n            nextColumn = maxColumns - 1;\n          }\n\n          const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n          const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n          if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n            // Return original to avoid creating a new object if nothing\n            // changed.\n            return curActiveCell;\n          }\n\n          return newPosition;\n        });\n      }\n    },\n    [maxColumns, maxRows, onActiveCellChange]\n  );\n\n  return {\n    activeCell,\n    isActive,\n    onTableKeyDown: handleKeyDown,\n    onCellFocus: handleCellFocus,\n  };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"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"}

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

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { TableVirtuosoHandle } from 'react-virtuoso';
+import { UseTableKeyboardNavProps } from './useTableKeyboardNav';
+interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {
+    visibleRange: React.MutableRefObject<{
+        startIndex: number;
+        endIndex: number;
+    }>;
+    virtualTable: React.RefObject<TableVirtuosoHandle>;
+    maxRows: number;
+    maxColumns: number;
+}
+/**
+ * Hook for managing keyboard navigation when using a virtualized table.
+ */
+export declare function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns, }: UseVirtualizedTableKeyboardNavProps): {
+    activeCell: {
+        row: number;
+        column: number;
+    };
+    isActive: boolean;
+    onTableKeyDown: import("react").KeyboardEventHandler<HTMLTableElement>;
+    onCellFocus: (cellPosition: {
+        row: number;
+        column: number;
+    }) => void;
+};
+export {};
+//# sourceMappingURL=useVirtualizedTableKeyboardNav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAC;QACnC,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC;;;;;;;;;;;EA4ErC"}

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -0,0 +1,89 @@
+// 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 { useTableKeyboardNav } from './useTableKeyboardNav';
+/**
+ * Hook for managing keyboard navigation when using a virtualized table.
+ */ export function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+    const baseKeyboard = useTableKeyboardNav({
+        maxRows,
+        maxColumns,
+        onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
+            const key = e.key;
+            const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
+            var ref;
+            const nextRow = (ref = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && ref !== void 0 ? ref : currentPosition.row;
+            if (key === 'ArrowDown' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref1;
+                    (ref1 = virtualTable.current) === null || ref1 === void 0 ? void 0 : ref1.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'end'
+                    });
+                }
+            } else if (key === 'ArrowUp' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref2;
+                    (ref2 = virtualTable.current) === null || ref2 === void 0 ? void 0 : ref2.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'start'
+                    });
+                }
+            } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
+                var // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                ref3;
+                (ref3 = virtualTable.current) === null || ref3 === void 0 ? void 0 : ref3.scrollToIndex({
+                    index: Math.max(nextRow - 1, 0),
+                    align: 'start'
+                });
+            } else if (key === 'PageDown') {
+                var ref4;
+                // Full handling of logic for `PageDown` because there is no default.
+                e.preventDefault();
+                let nextRow1 = currentPosition.row;
+                // Add 1 to account for header
+                nextRow1 = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
+                (ref4 = virtualTable.current) === null || ref4 === void 0 ? void 0 : ref4.scrollToIndex({
+                    index: nextRow1 - 1,
+                    align: 'start'
+                });
+                return {
+                    row: nextRow1,
+                    column: currentPosition.column
+                };
+            } else if (key === 'PageUp') {
+                var ref5;
+                // Full handling of logic for `PageUp` because there is no default.
+                let nextRow2 = currentPosition.row;
+                // Minus 1 to account for header
+                nextRow2 = Math.max(0, visibleRange.current.startIndex - 1);
+                (ref5 = virtualTable.current) === null || ref5 === void 0 ? void 0 : ref5.scrollToIndex({
+                    index: nextRow2 - 1,
+                    align: 'end'
+                });
+                return {
+                    row: nextRow2,
+                    column: currentPosition.column
+                };
+            }
+            return defaultNewPosition;
+        }
+    });
+    return baseKeyboard;
+}
+
+//# sourceMappingURL=useVirtualizedTableKeyboardNav.js.map

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.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 { TableVirtuosoHandle } from 'react-virtuoso';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n  visibleRange: React.MutableRefObject<{\n    startIndex: number;\n    endIndex: number;\n  }>;\n  virtualTable: React.RefObject<TableVirtuosoHandle>;\n  maxRows: number;\n  maxColumns: number;\n}\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n  visibleRange,\n  virtualTable,\n  maxRows,\n  maxColumns,\n}: UseVirtualizedTableKeyboardNavProps) {\n  const baseKeyboard = useTableKeyboardNav({\n    maxRows,\n    maxColumns,\n    onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n      const key = e.key;\n\n      const defaultValueChanged =\n        defaultNewPosition &&\n        (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n      const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n      if (key === 'ArrowDown' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'end',\n          });\n        }\n      } else if (key === 'ArrowUp' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'start',\n          });\n        }\n      } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        virtualTable.current?.scrollToIndex({\n          index: Math.max(nextRow - 1, 0),\n          align: 'start',\n        });\n      } else if (key === 'PageDown') {\n        // Full handling of logic for `PageDown` because there is no default.\n        e.preventDefault();\n\n        let nextRow = currentPosition.row;\n        // Add 1 to account for header\n\n        nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'start',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      } else if (key === 'PageUp') {\n        // Full handling of logic for `PageUp` because there is no default.\n        let nextRow = currentPosition.row;\n        // Minus 1 to account for header\n        nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'end',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      }\n\n      return defaultNewPosition;\n    },\n  });\n\n  return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"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"}

package/dist/Table/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Table';
+export { getTableCellLayout } from './model/table-model';
+export type { TableColumnConfig, TableProps, TableDensity } from './model/table-model';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/Table/index.js

@@ -0,0 +1,16 @@
+// 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.
+export * from './Table';
+export { getTableCellLayout } from './model/table-model';
+
+//# sourceMappingURL=index.js.map

package/dist/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Table/index.ts"],"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\nexport * from './Table';\nexport { getTableCellLayout } from './model/table-model';\nexport type { TableColumnConfig, TableProps, TableDensity } from './model/table-model';\n"],"names":["getTableCellLayout"],"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,cAAc,SAAS,CAAC;AACxB,SAASA,kBAAkB,QAAQ,qBAAqB,CAAC"}