@perses-dev/components 0.43.0 → 0.44.0-rc1

package/dist/Table/TableRow.d.ts

@@ -4,6 +4,6 @@ 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 declare const TableRow: import("react").ForwardRefExoticComponent<Omit<TableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
 export {};
 //# sourceMappingURL=TableRow.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,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"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,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,4HAanB,CAAC"}

package/dist/Table/TableRow.js.map

@@ -1 +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, alpha } 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.default,\n        '&:hover': {\n          backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"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,SAASA,YAAYC,WAAW,EAAqCC,KAAK,QAAQ,gBAAgB;AAClG,SAASC,UAAU,QAAQ,QAAQ;AAOnC,OAAO,MAAMH,yBAAWG,WAA+C,SAASH,SAASI,KAAK,EAAEC,GAAG;IACjG,qBACE,KAACJ;QACE,GAAGG,KAAK;QACTC,KAAKA;QACLC,IAAI;YACFC,iBAAiB,CAACC,QAAUA,MAAMC,QAAQC,WAAWC;YACrD,WAAW;gBACTJ,iBAAiB,CAACC,QAAUN,MAAMM,MAAMC,QAAQG,QAAQC,MAAML,MAAMC,QAAQK,OAAOC;YACrF;QACF;;AAGN,GAAG"}
+{"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, alpha } 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.default,\n        '&:hover': {\n          backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"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,SAASA,YAAYC,WAAW,EAAqCC,KAAK,QAAQ,gBAAgB;AAClG,SAASC,UAAU,QAAQ,QAAQ;AAOnC,OAAO,MAAMH,yBAAWG,WAA+C,SAASH,SAASI,KAAK,EAAEC,GAAG;IACjG,qBACE,KAACJ;QACE,GAAGG,KAAK;QACTC,KAAKA;QACLC,IAAI;YACFC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;YAC5D,WAAW;gBACTJ,iBAAiB,CAACC,QAAUN,MAAMM,MAAMC,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEL,MAAMC,OAAO,CAACK,MAAM,CAACC,YAAY;YACjG;QACF;;AAGN,GAAG"}

package/dist/Table/VirtualizedTable.d.ts

@@ -1,11 +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'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
+export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableData>, 'height' | 'width' | 'density'>> & Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {
     onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, 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, onRowMouseOver, onRowMouseOut, rows, columns, headers, }: VirtualizedTableProps<TableData>): JSX.Element;
+export declare function VirtualizedTable<TableData>({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, }: VirtualizedTableProps<TableData>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=VirtualizedTable.d.ts.map

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

@@ -1 +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;AAW7E,OAAO,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQpE,oBAAY,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAClH,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,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;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,eA4KlC"}
+{"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;AAW7E,OAAO,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQpE,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC,CAAC,GAClH,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,CAAC,GAAG;IAChE,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,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;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,GACR,EAAE,qBAAqB,CAAC,SAAS,CAAC,2CA4KlC"}

package/dist/Table/VirtualizedTable.js

@@ -26,7 +26,7 @@ import { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeybo
 // 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 , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
+export function VirtualizedTable({ width, height, density, onRowClick, onRowMouseOver, onRowMouseOut, 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
@@ -64,7 +64,7 @@ export function VirtualizedTable({ width , height , density , onRowClick , onRow
             },
             TableHead,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            TableRow: ({ item , ...props })=>{
+            TableRow: ({ item, ...props })=>{
                 const index = props['data-index'];
                 const row = rows[index];
                 if (!row) {

package/dist/Table/VirtualizedTable.js.map

@@ -1 +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 { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps, TableRowEventOpts } 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  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, 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  onRowMouseOver,\n  onRowMouseOut,\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        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, 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, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || 'auto'}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\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, cells) => {\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                const cellContext = cell.getContext();\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    width={cell.column.getSize() || 'auto'}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                  >\n                    {cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","onRowMouseOver","onRowMouseOut","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","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellRenderFn","cellContent","cellDescriptionDef","cellDescription"],"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,SAAmCA,UAAU,QAAQ,wBAAwB;AAC7E,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,aAAa,QAAkE,iBAAiB;AACzG,SAASC,MAAM,EAAEC,OAAO,QAAQ,QAAQ;AACxC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,SAAS,QAAwB,cAAc;AACxD,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE,SAASC,8BAA8B,QAAQ,yCAAyC;AAexF,6EAA6E;AAC7E,4EAA4E;AAC5E,mBAAmB;AACnB,OAAO,SAASC,iBAA4B,EAC1CC,MAAK,EACLC,OAAM,EACNC,QAAO,EACPC,WAAU,EACVC,eAAc,EACdC,cAAa,EACbC,KAAI,EACJC,QAAO,EACPC,QAAO,EAC0B;IACjC,MAAMC,cAAcpB,OAA4B;IAEhD,uEAAuE;IACvE,0EAA0E;IAC1E,oCAAoC;IACpC,MAAMqB,eAAerB,OAAO;QAC1BsB,YAAY;QACZC,UAAU;IACZ;IACA,MAAMC,kBAA0E,CAACC;QAC/EJ,aAAaK,UAAUD;IACzB;IAEA,MAAME,cAAclB,+BAA+B;QACjDY,cAAcA;QACdO,cAAcR;QAEd,gCAAgC;QAChCS,SAASZ,KAAKa,SAAS;QACvBC,YAAYb,QAAQY;IACtB;IAEA,MAAME,gBAAgB,CAACC;QACrB,IAAIA,aAAaC,QAAQP,YAAYQ,WAAWD,OAAOD,aAAaG,WAAWT,YAAYQ,WAAWC,QAAQ;YAC5G,OAAOT,YAAYU,WAAW,kBAAkB;QAClD;QAEA,OAAO;IACT;IAEA,MAAMC,0BAAsDrC,QAAQ;QAClE,OAAO;YACLsC,UAAU/B;YACVgC,OAAO,CAACC;gBACN,qBAAO,KAACrC;oBAAY,GAAGqC,KAAK;oBAAE9B,OAAOA;oBAAOE,SAASA;oBAAS6B,WAAWf,YAAYgB;;YACvF;YACAtC;YACA,6DAA6D;YAC7DH,UAAU,CAAC,EAAE0C,KAAI,EAAE,GAAGH,OAAO;gBAC3B,MAAMI,QAAQJ,KAAK,CAAC,aAAa;gBACjC,MAAMP,MAAMjB,IAAI,CAAC4B,MAAM;gBACvB,IAAI,CAACX,KAAK;oBACR,OAAO;gBACT;gBAEA,MAAMY,eAAkC;oBAAEC,IAAIb,IAAIa;oBAAIF,OAAOX,IAAIW;gBAAM;gBAEvE,qBACE,KAAC3C;oBACE,GAAGuC,KAAK;oBACTO,SAAS,CAACC,IAAMnC,WAAWmC,GAAGf,IAAIa;oBAClClC,SAASA;oBACTqC,aAAa,CAACD;wBACZlC,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAiBkC,GAAGH;oBACtB;oBACAK,YAAY,CAACF;wBACXjC,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAgBiC,GAAGH;oBACrB;;YAGN;YACA3C;QACF;IACF,GAAG;QAACU;QAASc,YAAYgB;QAAgB7B;QAAYE;QAAeD;QAAgBE;QAAMN;KAAM;IAEhG,qBACE,KAACb;QAAIsD,IAAI;YAAEzC;YAAOC;QAAO;kBACvB,cAAA,KAACb;YACCsD,KAAKjC;YACLkC,YAAYrC,KAAKa;YACjByB,YAAYjB;YACZ,uEAAuE;YACvE,YAAY;YACZ,8EAA8E;YAC9EkB,cAAchC;YACdiC,oBAAoB;gBAClB,qBACE;8BACGtC,QAAQuC,IAAI,CAACC;wBACZ,qBACE,KAACzD;4BAA8BW,SAASA;sCACrC8C,YAAYxC,QAAQuC,IAAI,CAACE,QAAQC,GAAG1C;oCAiBxBiB,wBAGMA;gCAnBjB,MAAMA,SAASwB,OAAOxB;gCACtB,MAAM0B,WAA8B;oCAClC5B,KAAK;oCACLE,QAAQyB;gCACV;gCAEA,MAAME,WAAW3B,OAAO4B;gCACxB,MAAMC,cAAc7B,OAAO8B;gCAE3B,qBACE,KAAC5D;oCAEC6D,QAAQ/B,OAAOgC,eAAehC,OAAOiC,4BAA4BC;oCACjEC,eAAe,OAAOR,aAAa,WAAWA,WAAWO;oCACzDE,mBAAmB,OAAOP,gBAAgB,WAAWA,cAAcK;oCACnE3D,OAAOyB,OAAOqC,aAAa;oCAC3BC,OAAOtC,CAAAA,yBAAAA,OAAOuC,UAAUC,kBAAjBxC,oCAAAA,KAAAA,IAAAA,uBAAuBsC;oCAC9BG,SAAQ;oCACRhE,SAASA;oCACTiE,aAAa1C,CAAAA,0BAAAA,OAAOuC,UAAUC,kBAAjBxC,qCAAAA,KAAAA,IAAAA,wBAAuB2C;oCACpCC,YAAYhD,cAAc8B;oCAC1BmB,gBAAgB,IAAMtD,YAAYuD,YAAYpB;oCAC9CqB,eAAetB,MAAM;oCACrBuB,cAAcvB,MAAM1C,QAAQW,SAAS;8CAEpCjC,WAAWuC,OAAOuC,UAAUf,QAAQA,OAAOyB;mCAdvCzB,OAAOb;4BAiBlB;2BA9BaY,YAAYZ;oBAiC/B;;YAGN;YACAuC,aAAa,CAACzC;gBACZ,MAAMX,MAAMjB,IAAI,CAAC4B,MAAM;gBACvB,IAAI,CAACX,KAAK;oBACR,OAAO;gBACT;gBAEA,qBACE;8BACGA,IAAIqD,kBAAkB7B,IAAI,CAAC8B,MAAM3B,GAAG4B;4BAWRD,6BAiBhBA;wBA3BX,MAAM1B,WAA8B;4BAClC,qDAAqD;4BACrD5B,KAAKW,QAAQ;4BACbT,QAAQyB;wBACV;wBAEA,MAAM6B,cAAcF,KAAKH;wBACzB,MAAMM,eAAeH,KAAKpD,OAAOuC,UAAUa;wBAC3C,MAAMI,cAAc,OAAOD,gBAAgB,aAAaA,aAAaD,eAAe;wBAEpF,MAAMG,qBAAqBL,CAAAA,8BAAAA,KAAKpD,OAAOuC,UAAUC,kBAAtBY,yCAAAA,KAAAA,IAAAA,4BAA4BM;wBACvD,IAAIhB,cAAkCR;wBACtC,IAAI,OAAOuB,uBAAuB,YAAY;4BAC5C,6DAA6D;4BAC7D,gBAAgB;4BAChBf,cAAce,mBAAmBH;wBACnC,OAAO,IAAIG,sBAAsB,OAAOD,gBAAgB,UAAU;4BAChE,4DAA4D;4BAC5D,6DAA6D;4BAC7D,gBAAgB;4BAChBd,cAAcc;wBAChB;wBAEA,qBACE,KAACrF;4BAECI,OAAO6E,KAAKpD,OAAOqC,aAAa;4BAChCC,OAAOc,CAAAA,+BAAAA,KAAKpD,OAAOuC,UAAUC,kBAAtBY,0CAAAA,KAAAA,IAAAA,6BAA4Bd;4BACnC7D,SAASA;4BACTmE,YAAYhD,cAAc8B;4BAC1BmB,gBAAgB,IAAMtD,YAAYuD,YAAYpB;4BAC9CqB,eAAetB,MAAM;4BACrBuB,cAAcvB,MAAM4B,MAAM3D,SAAS;4BACnCgD,aAAaA;sCAEZc;2BAVIJ,KAAKzC;oBAahB;;YAGN;;;AAIR"}
+{"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 { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableProps, TableRowEventOpts } 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  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, 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  onRowMouseOver,\n  onRowMouseOut,\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        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, 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, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || 'auto'}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\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, cells) => {\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                const cellContext = cell.getContext();\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    width={cell.column.getSize() || 'auto'}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                  >\n                    {cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["flexRender","Box","TableVirtuoso","useRef","useMemo","TableRow","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","VirtualizedTable","width","height","density","onRowClick","onRowMouseOver","onRowMouseOut","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","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","sx","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","itemContent","getVisibleCells","cell","cells","cellContext","cellRenderFn","cellContent","cellDescriptionDef","cellDescription"],"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,SAAmCA,UAAU,QAAQ,wBAAwB;AAC7E,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,aAAa,QAAkE,iBAAiB;AACzG,SAASC,MAAM,EAAEC,OAAO,QAAQ,QAAQ;AACxC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,SAAS,QAAwB,cAAc;AACxD,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE,SAASC,8BAA8B,QAAQ,yCAAyC;AAexF,6EAA6E;AAC7E,4EAA4E;AAC5E,mBAAmB;AACnB,OAAO,SAASC,iBAA4B,EAC1CC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,OAAO,EACPC,OAAO,EAC0B;IACjC,MAAMC,cAAcpB,OAA4B;IAEhD,uEAAuE;IACvE,0EAA0E;IAC1E,oCAAoC;IACpC,MAAMqB,eAAerB,OAAO;QAC1BsB,YAAY;QACZC,UAAU;IACZ;IACA,MAAMC,kBAA0E,CAACC;QAC/EJ,aAAaK,OAAO,GAAGD;IACzB;IAEA,MAAME,cAAclB,+BAA+B;QACjDY,cAAcA;QACdO,cAAcR;QAEd,gCAAgC;QAChCS,SAASZ,KAAKa,MAAM,GAAG;QACvBC,YAAYb,QAAQY,MAAM;IAC5B;IAEA,MAAME,gBAAgB,CAACC;QACrB,IAAIA,aAAaC,GAAG,KAAKP,YAAYQ,UAAU,CAACD,GAAG,IAAID,aAAaG,MAAM,KAAKT,YAAYQ,UAAU,CAACC,MAAM,EAAE;YAC5G,OAAOT,YAAYU,QAAQ,GAAG,kBAAkB;QAClD;QAEA,OAAO;IACT;IAEA,MAAMC,0BAAsDrC,QAAQ;QAClE,OAAO;YACLsC,UAAU/B;YACVgC,OAAO,CAACC;gBACN,qBAAO,KAACrC;oBAAY,GAAGqC,KAAK;oBAAE9B,OAAOA;oBAAOE,SAASA;oBAAS6B,WAAWf,YAAYgB,cAAc;;YACrG;YACAtC;YACA,6DAA6D;YAC7DH,UAAU,CAAC,EAAE0C,IAAI,EAAE,GAAGH,OAAO;gBAC3B,MAAMI,QAAQJ,KAAK,CAAC,aAAa;gBACjC,MAAMP,MAAMjB,IAAI,CAAC4B,MAAM;gBACvB,IAAI,CAACX,KAAK;oBACR,OAAO;gBACT;gBAEA,MAAMY,eAAkC;oBAAEC,IAAIb,IAAIa,EAAE;oBAAEF,OAAOX,IAAIW,KAAK;gBAAC;gBAEvE,qBACE,KAAC3C;oBACE,GAAGuC,KAAK;oBACTO,SAAS,CAACC,IAAMnC,WAAWmC,GAAGf,IAAIa,EAAE;oBACpClC,SAASA;oBACTqC,aAAa,CAACD;wBACZlC,2BAAAA,qCAAAA,eAAiBkC,GAAGH;oBACtB;oBACAK,YAAY,CAACF;wBACXjC,0BAAAA,oCAAAA,cAAgBiC,GAAGH;oBACrB;;YAGN;YACA3C;QACF;IACF,GAAG;QAACU;QAASc,YAAYgB,cAAc;QAAE7B;QAAYE;QAAeD;QAAgBE;QAAMN;KAAM;IAEhG,qBACE,KAACb;QAAIsD,IAAI;YAAEzC;YAAOC;QAAO;kBACvB,cAAA,KAACb;YACCsD,KAAKjC;YACLkC,YAAYrC,KAAKa,MAAM;YACvByB,YAAYjB;YACZ,uEAAuE;YACvE,YAAY;YACZ,8EAA8E;YAC9EkB,cAAchC;YACdiC,oBAAoB;gBAClB,qBACE;8BACGtC,QAAQuC,GAAG,CAAC,CAACC;wBACZ,qBACE,KAACzD;4BAA8BW,SAASA;sCACrC8C,YAAYxC,OAAO,CAACuC,GAAG,CAAC,CAACE,QAAQC,GAAG1C;oCAiBxBiB,wBAGMA;gCAnBjB,MAAMA,SAASwB,OAAOxB,MAAM;gCAC5B,MAAM0B,WAA8B;oCAClC5B,KAAK;oCACLE,QAAQyB;gCACV;gCAEA,MAAME,WAAW3B,OAAO4B,WAAW;gCACnC,MAAMC,cAAc7B,OAAO8B,mBAAmB;gCAE9C,qBACE,KAAC5D;oCAEC6D,QAAQ/B,OAAOgC,UAAU,KAAKhC,OAAOiC,uBAAuB,KAAKC;oCACjEC,eAAe,OAAOR,aAAa,WAAWA,WAAWO;oCACzDE,mBAAmB,OAAOP,gBAAgB,WAAWA,cAAcK;oCACnE3D,OAAOyB,OAAOqC,OAAO,MAAM;oCAC3BC,KAAK,GAAEtC,yBAAAA,OAAOuC,SAAS,CAACC,IAAI,cAArBxC,6CAAAA,uBAAuBsC,KAAK;oCACnCG,SAAQ;oCACRhE,SAASA;oCACTiE,WAAW,GAAE1C,0BAAAA,OAAOuC,SAAS,CAACC,IAAI,cAArBxC,8CAAAA,wBAAuB2C,iBAAiB;oCACrDC,YAAYhD,cAAc8B;oCAC1BmB,gBAAgB,IAAMtD,YAAYuD,WAAW,CAACpB;oCAC9CqB,eAAetB,MAAM;oCACrBuB,cAAcvB,MAAM1C,QAAQW,MAAM,GAAG;8CAEpCjC,WAAWuC,OAAOuC,SAAS,CAACf,MAAM,EAAEA,OAAOyB,UAAU;mCAdjDzB,OAAOb,EAAE;4BAiBpB;2BA9BaY,YAAYZ,EAAE;oBAiCjC;;YAGN;YACAuC,aAAa,CAACzC;gBACZ,MAAMX,MAAMjB,IAAI,CAAC4B,MAAM;gBACvB,IAAI,CAACX,KAAK;oBACR,OAAO;gBACT;gBAEA,qBACE;8BACGA,IAAIqD,eAAe,GAAG7B,GAAG,CAAC,CAAC8B,MAAM3B,GAAG4B;4BAWRD,6BAiBhBA;wBA3BX,MAAM1B,WAA8B;4BAClC,qDAAqD;4BACrD5B,KAAKW,QAAQ;4BACbT,QAAQyB;wBACV;wBAEA,MAAM6B,cAAcF,KAAKH,UAAU;wBACnC,MAAMM,eAAeH,KAAKpD,MAAM,CAACuC,SAAS,CAACa,IAAI;wBAC/C,MAAMI,cAAc,OAAOD,gBAAgB,aAAaA,aAAaD,eAAe;wBAEpF,MAAMG,sBAAqBL,8BAAAA,KAAKpD,MAAM,CAACuC,SAAS,CAACC,IAAI,cAA1BY,kDAAAA,4BAA4BM,eAAe;wBACtE,IAAIhB,cAAkCR;wBACtC,IAAI,OAAOuB,uBAAuB,YAAY;4BAC5C,6DAA6D;4BAC7D,gBAAgB;4BAChBf,cAAce,mBAAmBH;wBACnC,OAAO,IAAIG,sBAAsB,OAAOD,gBAAgB,UAAU;4BAChE,4DAA4D;4BAC5D,6DAA6D;4BAC7D,gBAAgB;4BAChBd,cAAcc;wBAChB;wBAEA,qBACE,KAACrF;4BAECI,OAAO6E,KAAKpD,MAAM,CAACqC,OAAO,MAAM;4BAChCC,KAAK,GAAEc,+BAAAA,KAAKpD,MAAM,CAACuC,SAAS,CAACC,IAAI,cAA1BY,mDAAAA,6BAA4Bd,KAAK;4BACxC7D,SAASA;4BACTmE,YAAYhD,cAAc8B;4BAC1BmB,gBAAgB,IAAMtD,YAAYuD,WAAW,CAACpB;4BAC9CqB,eAAetB,MAAM;4BACrBuB,cAAcvB,MAAM4B,MAAM3D,MAAM,GAAG;4BACnCgD,aAAaA;sCAEZc;2BAVIJ,KAAKzC,EAAE;oBAalB;;YAGN;;;AAIR"}

package/dist/Table/VirtualizedTableContainer.d.ts

@@ -1,6 +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>>;
+type VirtualizedTableContainerProps = MuiTableContainerProps;
+export declare const VirtualizedTableContainer: import("react").ForwardRefExoticComponent<Omit<VirtualizedTableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export {};
 //# sourceMappingURL=VirtualizedTableContainer.d.ts.map

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

@@ -1 +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"}
+{"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,KAAK,8BAA8B,GAAG,sBAAsB,CAAC;AAE7D,eAAO,MAAM,yBAAyB,wIAIrC,CAAC"}

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

@@ -12,7 +12,7 @@ export interface UseTableKeyboardNavProps {
      */
     onActiveCellChange?: (e: React.KeyboardEvent<HTMLTableElement>, currentActiveCell: TableCellPosition, defaultNextActiveCell: TableCellPosition | undefined) => TableCellPosition | undefined;
 }
-declare type TableCellPosition = {
+type TableCellPosition = {
     row: number;
     column: number;
 };

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

@@ -1 +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"}
+{"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,KAAK,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

@@ -29,7 +29,7 @@ function isArrowKey(key) {
  * 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  }) {
+ */ export function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
     const [activeCell, setActiveCell] = useState(DEFAULT_ACTIVE_CELL);
     const [isActive, setIsActive] = useState(false);
     const handleCellFocus = (cellPosition)=>{

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

@@ -1 +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":"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,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0B9C,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,SAASD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,QAAO,EAAEC,WAAU,EAAEC,mBAAkB,EAA4B;IACvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,WAAWS,WAAWT,UAAUc,aAAaf,QAAQU,WAAWV,OAAOY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb;QAEd,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB;gBACpC,IAAIoB,aAAqBF,cAAcjB;gBAEvC,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI;oBACFD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI;oBACFD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI;oBACFF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI;oBACFF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI;oBACFF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI;oBACFF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,CAAAA,+BAAAA,gCAAAA,KAAAA,IAAAA,mBAAqBQ,GAAGC,eAAeI,wBAAuBA;gBAElF,IAAIC,YAAYvB,QAAQkB,cAAclB,OAAOuB,YAAYtB,WAAWiB,cAAcjB,QAAQ;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,OAAO;QACLC;QACAE;QACAY,gBAAgBR;QAChBS,aAAaX;IACf;AACF"}
+{"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":"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,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0B9C,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,QAAQ,CAACD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IACvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,MAAM,KAAKS,WAAWT,MAAM,IAAIc,aAAaf,GAAG,KAAKU,WAAWV,GAAG,IAAIY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB,GAAG;gBACvC,IAAIoB,aAAqBF,cAAcjB,MAAM;gBAE7C,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,CAAAA,+BAAAA,yCAAAA,mBAAqBQ,GAAGC,eAAeI,wBAAuBA;gBAElF,IAAIC,YAAYvB,GAAG,KAAKkB,cAAclB,GAAG,IAAIuB,YAAYtB,MAAM,KAAKiB,cAAcjB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,OAAO;QACLC;QACAE;QACAY,gBAAgBR;QAChBS,aAAaX;IACf;AACF"}

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -13,7 +13,7 @@
 import { useTableKeyboardNav } from './useTableKeyboardNav';
 /**
  * Hook for managing keyboard navigation when using a virtualized table.
- */ export function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+ */ export function useVirtualizedTableKeyboardNav({ visibleRange, virtualTable, maxRows, maxColumns }) {
     const baseKeyboard = useTableKeyboardNav({
         maxRows,
         maxColumns,

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

@@ -1 +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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAYtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,aAAY,EACZC,aAAY,EACZC,QAAO,EACPC,WAAU,EAC0B;IACpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG;YAEd,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,WAAWH,mBAAmBG,UAAUJ,gBAAgBK,QAAQJ,mBAAmBI,GAAE;gBACxFJ;YAAhB,MAAMK,UAAUL,CAAAA,0BAAAA,+BAAAA,gCAAAA,KAAAA,IAAAA,mBAAoBI,iBAApBJ,qCAAAA,0BAA2BD,gBAAgBK;YAE3D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,QAAQC,cAAcF,UAAU,IAAIb,aAAac,QAAQE,UAAU;wBAChGf;oBAAAA,CAAAA,wBAAAA,aAAaa,qBAAbb,mCAAAA,KAAAA,IAAAA,sBAAsBgB,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,QAAQC,cAAcF,UAAU,IAAIb,aAAac,QAAQE,UAAU;wBAChGf;oBAAAA,CAAAA,yBAAAA,aAAaa,qBAAbb,oCAAAA,KAAAA,IAAAA,uBAAsBgB,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;oBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR;gBAAAA,CAAAA,yBAAAA,aAAaa,qBAAbb,oCAAAA,KAAAA,IAAAA,uBAAsBgB,cAAc;oBAClCC,OAAOE,KAAKC,IAAIR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;oBAS7BR;gBARA,qEAAqE;gBACrEK,EAAEgB;gBAEF,IAAIT,UAAUN,gBAAgBK;gBAC9B,8BAA8B;gBAE9BC,UAAUO,KAAKG,IAAIrB,UAAU,GAAGF,aAAac,QAAQE,WAAW;gBAEhEf,CAAAA,yBAAAA,aAAaa,qBAAbb,oCAAAA,KAAAA,IAAAA,uBAAsBgB,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI;gBAC1B;YACF,OAAO,IAAIF,QAAQ,UAAU;oBAK3BR;gBAJA,mEAAmE;gBACnE,IAAIY,UAAUN,gBAAgBK;gBAC9B,gCAAgC;gBAChCC,UAAUO,KAAKC,IAAI,GAAGrB,aAAac,QAAQC,aAAa;gBACxDd,CAAAA,yBAAAA,aAAaa,qBAAbb,oCAAAA,KAAAA,IAAAA,uBAAsBgB,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI;gBAC1B;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}
+{"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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAYtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IACpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG,GAAG;YAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;gBACxFJ;YAAhB,MAAMK,UAAUL,CAAAA,0BAAAA,+BAAAA,yCAAAA,mBAAoBI,GAAG,cAAvBJ,qCAAAA,0BAA2BD,gBAAgBK,GAAG;YAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;wBAChGf;qBAAAA,wBAAAA,aAAaa,OAAO,cAApBb,4CAAAA,sBAAsBgB,aAAa,CAAC;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;wBAChGf;qBAAAA,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;oBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR;iBAAAA,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;oBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;oBAS7BR;gBARA,qEAAqE;gBACrEK,EAAEgB,cAAc;gBAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;gBACjC,8BAA8B;gBAE9BC,UAAUO,KAAKG,GAAG,CAACrB,UAAU,GAAGF,aAAac,OAAO,CAACE,QAAQ,GAAG;iBAEhEf,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF,OAAO,IAAIF,QAAQ,UAAU;oBAK3BR;gBAJA,mEAAmE;gBACnE,IAAIY,UAAUN,gBAAgBK,GAAG;gBACjC,gCAAgC;gBAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGrB,aAAac,OAAO,CAACC,UAAU,GAAG;iBACxDd,yBAAAA,aAAaa,OAAO,cAApBb,6CAAAA,uBAAsBgB,aAAa,CAAC;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}

package/dist/Table/model/table-model.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { Theme } from '@mui/material';
 import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
-export declare type TableDensity = 'compact' | 'standard';
-export declare type SortDirection = 'asc' | 'desc' | undefined;
-export declare type TableRowEventOpts = {
+export type TableDensity = 'compact' | 'standard';
+export type SortDirection = 'asc' | 'desc' | undefined;
+export type TableRowEventOpts = {
     /**
      * Unique identifier for the row.
      */
@@ -96,10 +96,10 @@ export interface TableProps<TableData> {
      */
     getCheckboxColor?: (rowData: TableData) => string;
 }
-declare type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
+type TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {
     height: number;
 };
-declare type GetTableCellLayoutOpts = {
+type GetTableCellLayoutOpts = {
     isLastColumn?: boolean;
     isFirstColumn?: boolean;
 };
@@ -108,7 +108,7 @@ declare type GetTableCellLayoutOpts = {
  * theme and density.
  */
 export declare function getTableCellLayout(theme: Theme, density: TableDensity, { isLastColumn, isFirstColumn }?: GetTableCellLayoutOpts): TableCellLayout;
-export declare type TableCellAlignment = 'left' | 'right' | 'center';
+export type TableCellAlignment = 'left' | 'right' | 'center';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
         align?: TableColumnConfig<TData>['align'];

package/dist/Table/model/table-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"table-model.d.ts","sourceRoot":"","sources":["../../../src/Table/model/table-model.ts"],"names":[],"mappings":"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"}

package/dist/Table/model/table-model.js

@@ -20,7 +20,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Returns the properties to lay out the content of table cells based on the
  * theme and density.
- */ export function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } = {}) {
+ */ export function getTableCellLayout(theme, density, { isLastColumn, isFirstColumn } = {}) {
     if (density === 'compact') {
         const paddingY = theme.spacing(0.5);
         const basePaddingX = theme.spacing(0.5);
@@ -52,7 +52,7 @@ function calculateTableCellHeight(lineHeight, paddingY) {
 /**
  * Takes in a perses table column and transforms it into a tanstack column.
  */ export function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
+    const tableCols = columns.map(({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.

package/dist/Table/model/table-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.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\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"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;AA+HjC,SAASA,yBAAyBC,UAAuC,EAAEC,QAAgB;IACzF,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,gBAAgB,OAAOF,eAAe,WAAWG,SAASH,YAAY,MAAMA,uBAAAA,wBAAAA,aAAc;IAChG,MAAMI,qBAAqB,OAAOH,aAAa,WAAWE,SAASF,UAAU,MAAMA;IAEnF,OAAOC,gBAAgBE,qBAAqB;AAC9C;AAWA;;;CAGC,GACD,OAAO,SAASC,mBACdC,KAAY,EACZC,OAAqB,EACrB,EAAEC,aAAY,EAAEC,cAAa,EAA0B,GAAG,CAAC,CAAC;IAE5D,IAAIF,YAAY,WAAW;QACzB,MAAMN,WAAWK,MAAMI,QAAQ;QAE/B,MAAMC,eAAeL,MAAMI,QAAQ;QACnC,MAAME,eAAeN,MAAMI,QAAQ;QACnC,MAAMG,cAAcJ,gBAAgBG,eAAeD;QACnD,MAAMG,eAAeN,eAAeI,eAAeD;QAEnD,MAAMX,aAAaM,MAAMS,WAAWC,MAAMhB;QAE1C,OAAO;YACLiB,SAAS,CAAC,EAAEhB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;YACjEK,QAAQnB,yBAAyBC,YAAYC;YAC7CkB,UAAUb,MAAMS,WAAWC,MAAMG;YACjCnB,YAAYA;QACd;IACF;IAEA,mBAAmB;IACnB,MAAMC,WAAWK,MAAMI,QAAQ;IAC/B,MAAMC,eAAeL,MAAMI,QAAQ;IACnC,MAAME,eAAeN,MAAMI,QAAQ;IACnC,MAAMG,cAAcJ,gBAAgBG,eAAeD;IACnD,MAAMG,eAAeN,eAAeI,eAAeD;IACnD,MAAMX,aAAaM,MAAMS,WAAWK,MAAMpB;IAE1C,OAAO;QACLiB,SAAS,CAAC,EAAEhB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;QACjEK,QAAQnB,yBAAyBC,YAAYC;QAC7CkB,UAAUb,MAAMS,WAAWK,MAAMD;QACjCnB,YAAYA;IACd;AACF;AAyEA;;CAEC,GACD,OAAO,SAASqB,+BAA0CC,OAA4C;IACpG,MAAMC,YAAyCD,QAAQE,IACrD,CAAC,EAAEC,MAAK,EAAEC,MAAK,EAAEC,kBAAiB,EAAEC,gBAAe,EAAEC,cAAa,EAAE,GAAGC,YAAY;QACjF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,YACJN,UAAU,UAAUA,UAAUO,YAC1B;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,MAAM;YACNC,SAAS;YACTC,SAAS;QACX,IACA;YACEF,MAAMR;QACR;QAEN,MAAMW,SAAS;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,qEAAqE;YACrEF,eAAe,CAAC,CAACA;YAEjB,yEAAyE;YACzE,wBAAwB;YACxBQ,MAAM;gBACJX;gBACAC;gBACAC;YACF;QACF;QAEA,OAAOQ;IACT;IAGF,OAAOb;AACT"}
+{"version":3,"sources":["../../../src/Table/model/table-model.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\nimport { Theme } from '@mui/material';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties } from 'react';\n\nexport type TableDensity = 'compact' | 'standard';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n}\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight ?? 0;\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isLastColumn, isFirstColumn }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  if (density === 'compact') {\n    const paddingY = theme.spacing(0.5);\n\n    const basePaddingX = theme.spacing(0.5);\n    const edgePaddingX = theme.spacing(1);\n    const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n\n    const lineHeight = theme.typography.body2.lineHeight;\n\n    return {\n      padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n      height: calculateTableCellHeight(lineHeight, paddingY),\n      fontSize: theme.typography.body2.fontSize,\n      lineHeight: lineHeight,\n    };\n  }\n\n  // standard density\n  const paddingY = theme.spacing(1);\n  const basePaddingX = theme.spacing(1.25);\n  const edgePaddingX = theme.spacing(2);\n  const paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  const paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  const lineHeight = theme.typography.body1.lineHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: calculateTableCellHeight(lineHeight, paddingY),\n    fontSize: theme.typography.body1.fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n  }\n}\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(columns: Array<TableColumnConfig<TableData>>) {\n  const tableCols: Array<ColumnDef<TableData>> = columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, ...otherProps }) => {\n      // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? {\n              // All zero values are used as shorthand for \"auto\" when rendering\n              // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n              size: 0,\n              minSize: 0,\n              maxSize: 0,\n            }\n          : {\n              size: width,\n            };\n\n      const result = {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n        },\n      };\n\n      return result;\n    }\n  );\n\n  return tableCols;\n}\n"],"names":["calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isLastColumn","isFirstColumn","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body2","padding","height","fontSize","body1","persesColumnsToTanstackColumns","columns","tableCols","map","width","align","headerDescription","cellDescription","enableSorting","otherProps","sizeProps","undefined","size","minSize","maxSize","result","meta"],"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;AA+HjC,SAASA,yBAAyBC,UAAuC,EAAEC,QAAgB;IACzF,6EAA6E;IAC7E,mDAAmD;IACnD,MAAMC,gBAAgB,OAAOF,eAAe,WAAWG,SAASH,YAAY,MAAMA,uBAAAA,wBAAAA,aAAc;IAChG,MAAMI,qBAAqB,OAAOH,aAAa,WAAWE,SAASF,UAAU,MAAMA;IAEnF,OAAOC,gBAAgBE,qBAAqB;AAC9C;AAWA;;;CAGC,GACD,OAAO,SAASC,mBACdC,KAAY,EACZC,OAAqB,EACrB,EAAEC,YAAY,EAAEC,aAAa,EAA0B,GAAG,CAAC,CAAC;IAE5D,IAAIF,YAAY,WAAW;QACzB,MAAMN,WAAWK,MAAMI,OAAO,CAAC;QAE/B,MAAMC,eAAeL,MAAMI,OAAO,CAAC;QACnC,MAAME,eAAeN,MAAMI,OAAO,CAAC;QACnC,MAAMG,cAAcJ,gBAAgBG,eAAeD;QACnD,MAAMG,eAAeN,eAAeI,eAAeD;QAEnD,MAAMX,aAAaM,MAAMS,UAAU,CAACC,KAAK,CAAChB,UAAU;QAEpD,OAAO;YACLiB,SAAS,CAAC,EAAEhB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;YACjEK,QAAQnB,yBAAyBC,YAAYC;YAC7CkB,UAAUb,MAAMS,UAAU,CAACC,KAAK,CAACG,QAAQ;YACzCnB,YAAYA;QACd;IACF;IAEA,mBAAmB;IACnB,MAAMC,WAAWK,MAAMI,OAAO,CAAC;IAC/B,MAAMC,eAAeL,MAAMI,OAAO,CAAC;IACnC,MAAME,eAAeN,MAAMI,OAAO,CAAC;IACnC,MAAMG,cAAcJ,gBAAgBG,eAAeD;IACnD,MAAMG,eAAeN,eAAeI,eAAeD;IACnD,MAAMX,aAAaM,MAAMS,UAAU,CAACK,KAAK,CAACpB,UAAU;IAEpD,OAAO;QACLiB,SAAS,CAAC,EAAEhB,SAAS,CAAC,EAAEa,aAAa,CAAC,EAAEb,SAAS,CAAC,EAAEY,YAAY,CAAC;QACjEK,QAAQnB,yBAAyBC,YAAYC;QAC7CkB,UAAUb,MAAMS,UAAU,CAACK,KAAK,CAACD,QAAQ;QACzCnB,YAAYA;IACd;AACF;AAyEA;;CAEC,GACD,OAAO,SAASqB,+BAA0CC,OAA4C;IACpG,MAAMC,YAAyCD,QAAQE,GAAG,CACxD,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGC,YAAY;QACjF,2EAA2E;QAC3E,yEAAyE;QACzE,wEAAwE;QACxE,0DAA0D;QAC1D,+EAA+E;QAC/E,MAAMC,YACJN,UAAU,UAAUA,UAAUO,YAC1B;YACE,kEAAkE;YAClE,qEAAqE;YACrEC,MAAM;YACNC,SAAS;YACTC,SAAS;QACX,IACA;YACEF,MAAMR;QACR;QAEN,MAAMW,SAAS;YACb,GAAGN,UAAU;YACb,GAAGC,SAAS;YAEZ,qEAAqE;YACrEF,eAAe,CAAC,CAACA;YAEjB,yEAAyE;YACzE,wBAAwB;YACxBQ,MAAM;gBACJX;gBACAC;gBACAC;YACF;QACF;QAEA,OAAOQ;IACT;IAGF,OAAOb;AACT"}

package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ThresholdInputProps } from './ThresholdInput';
-export declare function ThresholdColorPicker({ color, onColorChange, label, }: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>): JSX.Element;
+export declare function ThresholdColorPicker({ color, onColorChange, label, }: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThresholdColorPicker.d.ts.map

package/dist/ThresholdsEditor/ThresholdColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdColorPicker.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdColorPicker.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,KAAK,GACN,EAAE,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAAC,eA8ChE"}
+{"version":3,"file":"ThresholdColorPicker.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdColorPicker.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAEvD,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,aAAa,EACb,KAAK,GACN,EAAE,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,eAAe,GAAG,OAAO,CAAC,2CA8ChE"}

package/dist/ThresholdsEditor/ThresholdColorPicker.js

@@ -16,7 +16,7 @@ import { styled, IconButton, Popover } from '@mui/material';
 import CircleIcon from 'mdi-material-ui/Circle';
 import { useChartsTheme } from '../context/ChartsProvider';
 import { ColorPicker } from '../ColorPicker';
-export function ThresholdColorPicker({ color , onColorChange , label  }) {
+export function ThresholdColorPicker({ color, onColorChange, label }) {
     const [anchorEl, setAnchorEl] = React.useState(null);
     const isOpen = Boolean(anchorEl);
     const openColorPicker = (event)=>{
@@ -25,7 +25,7 @@ export function ThresholdColorPicker({ color , onColorChange , label  }) {
     const closeColorPicker = ()=>{
         setAnchorEl(null);
     };
-    const { thresholds: { defaultColor , palette  }  } = useChartsTheme();
+    const { thresholds: { defaultColor, palette } } = useChartsTheme();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(ColorIconButton, {
@@ -68,7 +68,7 @@ export function ThresholdColorPicker({ color , onColorChange , label  }) {
 }
 const ColorIconButton = styled(IconButton, {
     shouldForwardProp: (props)=>props !== 'isSelected' && props !== 'iconColor'
-})(({ iconColor , isSelected  })=>({
+})(({ iconColor, isSelected })=>({
         backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined',
         color: iconColor
     }));

package/dist/ThresholdsEditor/ThresholdColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdColorPicker.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 React from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { ColorPicker } from '../ColorPicker';\nimport { ThresholdInputProps } from './ThresholdInput';\n\nexport function ThresholdColorPicker({\n  color,\n  onColorChange,\n  label,\n}: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>) {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = () => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change threshold ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"threshold color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        PaperProps={{ sx: { padding: (theme) => theme.spacing(2) } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} onChange={onColorChange} palette={[defaultColor, ...palette]} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["React","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","ThresholdColorPicker","color","onColorChange","label","anchorEl","setAnchorEl","useState","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","PaperProps","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,OAAOA,WAAW,QAAQ;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,iBAAiB;AAG7C,OAAO,SAASC,qBAAqB,EACnCC,MAAK,EACLC,cAAa,EACbC,MAAK,EAC0D;IAC/D,MAAM,CAACC,UAAUC,YAAY,GAAGZ,MAAMa,SAAmC;IACzE,MAAMC,SAASC,QAAQJ;IAEvB,MAAMK,kBAAkB,CAACC;QACvBL,YAAYK,MAAMC;IACpB;IAEA,MAAMC,mBAAmB;QACvBP,YAAY;IACd;IAEA,MAAM,EACJQ,YAAY,EAAEC,aAAY,EAAEC,QAAO,EAAE,CAAA,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,iBAAiB,EAAEf,MAAM,MAAM,CAAC;gBAC7CgB,YAAYZ;gBACZa,WAAWnB;gBACXoB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNH,UAAUA;gBACVoB,SAASZ;gBACTa,YAAY;oBAAEC,IAAI;wBAAEC,SAAS,CAACC,QAAUA,MAAMC,QAAQ;oBAAG;gBAAE;gBAC3DC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACjC;oBAAYE,OAAOA;oBAAOiC,UAAUhC;oBAAea,SAAS;wBAACD;2BAAiBC;qBAAQ;;;;;AAI/F;AAEA,MAAMC,kBAAkBtB,OAAOC,YAAY;IACzCwC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEhB,UAAS,EAAED,WAAU,EAAE,GAAM,CAAA;QACjCkB,iBAAiBlB,cAAcC,YAAY,CAAC,EAAEA,UAAU,EAAE,CAAC,GAAG;QAC9DnB,OAAOmB;IACT,CAAA"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdColorPicker.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 React from 'react';\nimport { styled, IconButton, Popover } from '@mui/material';\nimport CircleIcon from 'mdi-material-ui/Circle';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { ColorPicker } from '../ColorPicker';\nimport { ThresholdInputProps } from './ThresholdInput';\n\nexport function ThresholdColorPicker({\n  color,\n  onColorChange,\n  label,\n}: Pick<ThresholdInputProps, 'color' | 'onColorChange' | 'label'>) {\n  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);\n  const isOpen = Boolean(anchorEl);\n\n  const openColorPicker = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const closeColorPicker = () => {\n    setAnchorEl(null);\n  };\n\n  const {\n    thresholds: { defaultColor, palette },\n  } = useChartsTheme();\n\n  return (\n    <>\n      <ColorIconButton\n        size=\"small\"\n        aria-label={`change threshold ${label} color`}\n        isSelected={isOpen}\n        iconColor={color}\n        onClick={openColorPicker}\n      >\n        <CircleIcon />\n      </ColorIconButton>\n      <Popover\n        data-testid=\"threshold color picker\"\n        open={isOpen}\n        anchorEl={anchorEl}\n        onClose={closeColorPicker}\n        PaperProps={{ sx: { padding: (theme) => theme.spacing(2) } }}\n        anchorOrigin={{\n          vertical: 'top',\n          horizontal: 'left',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'right',\n        }}\n      >\n        <ColorPicker color={color} onChange={onColorChange} palette={[defaultColor, ...palette]} />\n      </Popover>\n    </>\n  );\n}\n\nconst ColorIconButton = styled(IconButton, {\n  shouldForwardProp: (props) => props !== 'isSelected' && props !== 'iconColor',\n})<{\n  iconColor?: string;\n  isSelected?: boolean;\n}>(({ iconColor, isSelected }) => ({\n  backgroundColor: isSelected && iconColor ? `${iconColor}3F` : 'undefined', // 3F represents 25% opacity\n  color: iconColor,\n}));\n"],"names":["React","styled","IconButton","Popover","CircleIcon","useChartsTheme","ColorPicker","ThresholdColorPicker","color","onColorChange","label","anchorEl","setAnchorEl","useState","isOpen","Boolean","openColorPicker","event","currentTarget","closeColorPicker","thresholds","defaultColor","palette","ColorIconButton","size","aria-label","isSelected","iconColor","onClick","data-testid","open","onClose","PaperProps","sx","padding","theme","spacing","anchorOrigin","vertical","horizontal","transformOrigin","onChange","shouldForwardProp","props","backgroundColor"],"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,OAAOA,WAAW,QAAQ;AAC1B,SAASC,MAAM,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AAC5D,OAAOC,gBAAgB,yBAAyB;AAChD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,iBAAiB;AAG7C,OAAO,SAASC,qBAAqB,EACnCC,KAAK,EACLC,aAAa,EACbC,KAAK,EAC0D;IAC/D,MAAM,CAACC,UAAUC,YAAY,GAAGZ,MAAMa,QAAQ,CAA2B;IACzE,MAAMC,SAASC,QAAQJ;IAEvB,MAAMK,kBAAkB,CAACC;QACvBL,YAAYK,MAAMC,aAAa;IACjC;IAEA,MAAMC,mBAAmB;QACvBP,YAAY;IACd;IAEA,MAAM,EACJQ,YAAY,EAAEC,YAAY,EAAEC,OAAO,EAAE,EACtC,GAAGjB;IAEJ,qBACE;;0BACE,KAACkB;gBACCC,MAAK;gBACLC,cAAY,CAAC,iBAAiB,EAAEf,MAAM,MAAM,CAAC;gBAC7CgB,YAAYZ;gBACZa,WAAWnB;gBACXoB,SAASZ;0BAET,cAAA,KAACZ;;0BAEH,KAACD;gBACC0B,eAAY;gBACZC,MAAMhB;gBACNH,UAAUA;gBACVoB,SAASZ;gBACTa,YAAY;oBAAEC,IAAI;wBAAEC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;oBAAG;gBAAE;gBAC3DC,cAAc;oBACZC,UAAU;oBACVC,YAAY;gBACd;gBACAC,iBAAiB;oBACfF,UAAU;oBACVC,YAAY;gBACd;0BAEA,cAAA,KAACjC;oBAAYE,OAAOA;oBAAOiC,UAAUhC;oBAAea,SAAS;wBAACD;2BAAiBC;qBAAQ;;;;;AAI/F;AAEA,MAAMC,kBAAkBtB,OAAOC,YAAY;IACzCwC,mBAAmB,CAACC,QAAUA,UAAU,gBAAgBA,UAAU;AACpE,GAGG,CAAC,EAAEhB,SAAS,EAAED,UAAU,EAAE,GAAM,CAAA;QACjCkB,iBAAiBlB,cAAcC,YAAY,CAAC,EAAEA,UAAU,EAAE,CAAC,GAAG;QAC9DnB,OAAOmB;IACT,CAAA"}

package/dist/ThresholdsEditor/ThresholdInput.d.ts

@@ -11,5 +11,5 @@ export interface ThresholdInputProps {
     inputRef?: RefObject<HTMLInputElement | null>;
     mode?: ThresholdOptions['mode'];
 }
-export declare function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): JSX.Element;
+export declare function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete, }: ThresholdInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ThresholdInput.d.ts.map

package/dist/ThresholdsEditor/ThresholdInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,eA8BrB"}
+{"version":3,"file":"ThresholdInput.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdInput.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,KAAK,EACL,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,2CA8BrB"}

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -15,7 +15,7 @@ import { useState } from 'react';
 import { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import { ThresholdColorPicker } from './ThresholdColorPicker';
-export function ThresholdInput({ inputRef , label , color , value , mode , onChange , onColorChange , onBlur , onDelete  }) {
+export function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
     const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter
     return /*#__PURE__*/ _jsxs(Stack, {
         flex: 1,

package/dist/ThresholdsEditor/ThresholdInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.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 { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <ThresholdColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"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,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,oBAAoB,QAAQ,yBAAyB;AAc9D,OAAO,SAASC,eAAe,EAC7BC,SAAQ,EACRC,MAAK,EACLC,MAAK,EACLC,MAAK,EACLC,KAAI,EACJC,SAAQ,EACRC,cAAa,EACbC,OAAM,EACNC,SAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAqBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BACjE,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,QAAQ,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,MAAM,CAAC;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdInput.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 { RefObject, useState } from 'react';\nimport { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { ThresholdColorPicker } from './ThresholdColorPicker';\n\nexport interface ThresholdInputProps {\n  label: string;\n  color: string;\n  value: number;\n  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorChange: (color: string) => void;\n  onBlur: () => void;\n  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  mode?: ThresholdOptions['mode'];\n}\n\nexport function ThresholdInput({\n  inputRef,\n  label,\n  color,\n  value,\n  mode,\n  onChange,\n  onColorChange,\n  onBlur,\n  onDelete,\n}: ThresholdInputProps) {\n  const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <ThresholdColorPicker label={label} color={color} onColorChange={onColorChange} />\n      <FormLabel htmlFor={label}>{label}</FormLabel>\n      <TextField\n        id={label}\n        key={key}\n        inputRef={inputRef}\n        type=\"number\"\n        value={value === 0 ? '' : value}\n        placeholder=\"0\"\n        onChange={onChange}\n        onBlur={onBlur}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onBlur();\n            setKey(key + 1);\n          }\n        }}\n        InputProps={{\n          endAdornment: mode === 'percent' ? <Box paddingX={1}>%</Box> : undefined,\n        }}\n      />\n      <IconButton aria-label={`delete threshold ${label}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["useState","Stack","FormLabel","TextField","IconButton","Box","DeleteIcon","ThresholdColorPicker","ThresholdInput","inputRef","label","color","value","mode","onChange","onColorChange","onBlur","onDelete","key","setKey","flex","direction","alignItems","justifyContent","spacing","htmlFor","id","type","placeholder","onKeyDown","e","InputProps","endAdornment","paddingX","undefined","aria-label","size","onClick"],"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,SAAoBA,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,KAAK,EAAEC,SAAS,EAAEC,SAAS,EAAEC,UAAU,EAAEC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AAEvD,SAASC,oBAAoB,QAAQ,yBAAyB;AAc9D,OAAO,SAASC,eAAe,EAC7BC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,KAAK,EACLC,IAAI,EACJC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,QAAQ,EACY;IACpB,MAAM,CAACC,KAAKC,OAAO,GAAGnB,SAAS,IAAI,2DAA2D;IAC9F,qBACE,MAACC;QAAMmB,MAAM;QAAGC,WAAU;QAAMC,YAAW;QAASC,gBAAe;QAAgBC,SAAS;;0BAC1F,KAACjB;gBAAqBG,OAAOA;gBAAOC,OAAOA;gBAAOI,eAAeA;;0BACjE,KAACb;gBAAUuB,SAASf;0BAAQA;;0BAC5B,KAACP;gBACCuB,IAAIhB;gBAEJD,UAAUA;gBACVkB,MAAK;gBACLf,OAAOA,UAAU,IAAI,KAAKA;gBAC1BgB,aAAY;gBACZd,UAAUA;gBACVE,QAAQA;gBACRa,WAAW,CAACC;oBACV,IAAIA,EAAEZ,GAAG,KAAK,SAAS;wBACrBF;wBACAG,OAAOD,MAAM;oBACf;gBACF;gBACAa,YAAY;oBACVC,cAAcnB,SAAS,0BAAY,KAACR;wBAAI4B,UAAU;kCAAG;yBAAUC;gBACjE;eAfKhB;0BAiBP,KAACd;gBAAW+B,cAAY,CAAC,iBAAiB,EAAEzB,MAAM,CAAC;gBAAE0B,MAAK;gBAAQC,SAASpB;0BACzE,cAAA,KAACX;;;;AAIT"}