@perses-dev/components 0.55.0-beta.8 → 0.55.0-rc.0

package/dist/Table/TableToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableToolbar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack, Tooltip } from '@mui/material';\nimport type { Column } from '@tanstack/react-table';\nimport Close from 'mdi-material-ui/Close';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport UnfoldLess from 'mdi-material-ui/UnfoldLessHorizontal';\nimport UnfoldMore from 'mdi-material-ui/UnfoldMoreHorizontal';\nimport ViewColumn from 'mdi-material-ui/ViewColumn';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\nimport { TextField } from '../controls';\n\nexport interface TableToolbarProps<TableData> {\n  /**\n   * When `true`, a search input is rendered.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * Current value of the global filter / search query.\n   */\n  globalFilter: string;\n\n  /**\n   * Callback fired when the search query changes.\n   */\n  onGlobalFilterChange: (value: string) => void;\n\n  /**\n   * When `true`, a \"Columns\" button is rendered that opens a column visibility dropdown.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * All columns from the table instance, used to build the visibility menu.\n   */\n  columns: Array<Column<TableData>>;\n  /**\n   * The width of the toolbar, used to determine when to switch to a more compact layout.\n   */\n  width: number | string;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | string;\n\n  /**\n   * When `true`, an \"Expand All\" / \"Collapse All\" toggle button is rendered.\n   */\n  isExpandAllEnabled?: boolean;\n\n  /**\n   * Whether all rows are currently expanded.\n   */\n  isAllExpanded?: boolean;\n\n  /**\n   * Callback to toggle expand/collapse all rows.\n   */\n  onExpandAllChange?: (event: unknown) => void;\n}\n\nexport function TableToolbar<TableData>({\n  isSearchEnabled,\n  globalFilter,\n  onGlobalFilterChange,\n  isColumnFilterEnabled,\n  columns,\n  width,\n  columnFilterMenuMaxHeight = 400,\n  isExpandAllEnabled,\n  isAllExpanded,\n  onExpandAllChange,\n}: TableToolbarProps<TableData>): ReactElement | null {\n  const [colMenuAnchor, setColMenuAnchor] = useState<null | HTMLElement>(null);\n  const colMenuOpen = Boolean(colMenuAnchor);\n  const [searchResetKey, setSearchResetKey] = useState(0);\n\n  const handleSearchClear = useCallback(() => {\n    onGlobalFilterChange('');\n    setSearchResetKey((prev) => prev + 1);\n  }, [onGlobalFilterChange]);\n\n  if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      gap={1}\n      alignItems=\"center\"\n      justifyContent=\"flex-end\"\n      width={width}\n      padding=\"0.5rem\"\n      sx={{ backgroundColor: (theme) => theme.palette.background.default }}\n    >\n      {isSearchEnabled && (\n        <TextField\n          key={searchResetKey}\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={onGlobalFilterChange}\n          variant=\"standard\"\n          slotProps={{\n            htmlInput: { 'aria-label': 'search table' },\n            input: {\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <Magnify fontSize=\"small\" />\n                </InputAdornment>\n              ),\n              endAdornment: globalFilter !== '' && (\n                <InputAdornment position=\"end\">\n                  <IconButton onClick={handleSearchClear}>\n                    <Close fontSize=\"small\" />\n                  </IconButton>\n                </InputAdornment>\n              ),\n            },\n          }}\n          sx={{ flexGrow: 1 }}\n        />\n      )}\n      {isExpandAllEnabled && (\n        <Tooltip title={isAllExpanded ? 'Collapse all' : 'Expand all'}>\n          <IconButton\n            onClick={onExpandAllChange}\n            color=\"info\"\n            aria-label={isAllExpanded ? 'collapse all rows' : 'expand all rows'}\n          >\n            {isAllExpanded ? <UnfoldLess /> : <UnfoldMore />}\n          </IconButton>\n        </Tooltip>\n      )}\n      {isColumnFilterEnabled && (\n        <>\n          <IconButton\n            onClick={(e) => setColMenuAnchor(e.currentTarget)}\n            aria-haspopup=\"listbox\"\n            aria-expanded={colMenuOpen}\n            color=\"info\"\n          >\n            <ViewColumn />\n          </IconButton>\n          <Menu\n            anchorEl={colMenuAnchor}\n            open={colMenuOpen}\n            onClose={() => setColMenuAnchor(null)}\n            slotProps={{ list: { dense: true } }}\n            sx={{ maxHeight: columnFilterMenuMaxHeight }}\n          >\n            {columns.map((column) => {\n              const header = column.columnDef.header;\n              const label = typeof header === 'string' ? header : column.id;\n              return (\n                <MenuItem\n                  key={column.id}\n                  disabled={!column.getCanHide()}\n                  onClick={column.getCanHide() ? column.getToggleVisibilityHandler() : undefined}\n                  dense\n                >\n                  <Checkbox\n                    checked={column.getIsVisible()}\n                    disabled={!column.getCanHide()}\n                    size=\"small\"\n                    disableRipple\n                    sx={{ p: 0, mr: 1 }}\n                  />\n                  <ListItemText primary={label} />\n                </MenuItem>\n              );\n            })}\n          </Menu>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Checkbox","IconButton","InputAdornment","ListItemText","Menu","MenuItem","Stack","Tooltip","Close","Magnify","UnfoldLess","UnfoldMore","ViewColumn","useCallback","useState","TextField","TableToolbar","isSearchEnabled","globalFilter","onGlobalFilterChange","isColumnFilterEnabled","columns","width","columnFilterMenuMaxHeight","isExpandAllEnabled","isAllExpanded","onExpandAllChange","colMenuAnchor","setColMenuAnchor","colMenuOpen","Boolean","searchResetKey","setSearchResetKey","handleSearchClear","prev","direction","gap","alignItems","justifyContent","padding","sx","backgroundColor","theme","palette","background","default","placeholder","value","onChange","variant","slotProps","htmlInput","input","startAdornment","position","fontSize","endAdornment","onClick","flexGrow","title","color","aria-label","e","currentTarget","aria-haspopup","aria-expanded","anchorEl","open","onClose","list","dense","maxHeight","map","column","header","columnDef","label","id","disabled","getCanHide","getToggleVisibilityHandler","undefined","checked","getIsVisible","size","disableRipple","p","mr","primary"],"mappings":"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"}
+{"version":3,"sources":["../../src/Table/TableToolbar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Checkbox, IconButton, InputAdornment, ListItemText, Menu, MenuItem, Stack, Tooltip } from '@mui/material';\nimport type { Column } from '@tanstack/react-table';\nimport Close from 'mdi-material-ui/Close';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport UnfoldLess from 'mdi-material-ui/UnfoldLessHorizontal';\nimport UnfoldMore from 'mdi-material-ui/UnfoldMoreHorizontal';\nimport ViewColumn from 'mdi-material-ui/ViewColumn';\nimport type { ReactElement } from 'react';\nimport { useCallback, useState } from 'react';\n\nimport { TextField } from '../controls';\n\nexport interface TableToolbarProps<TableData> {\n  /**\n   * When `true`, a search input is rendered.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * Current value of the global filter / search query.\n   */\n  globalFilter: string;\n\n  /**\n   * Callback fired when the search query changes.\n   */\n  onGlobalFilterChange: (value: string) => void;\n\n  /**\n   * When `true`, a \"Columns\" button is rendered that opens a column visibility dropdown.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * All columns from the table instance, used to build the visibility menu.\n   */\n  columns: Array<Column<TableData>>;\n  /**\n   * The width of the toolbar, used to determine when to switch to a more compact layout.\n   */\n  width: number | string;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | string;\n\n  /**\n   * When `true`, an \"Expand All\" / \"Collapse All\" toggle button is rendered.\n   */\n  isExpandAllEnabled?: boolean;\n\n  /**\n   * Whether all rows are currently expanded.\n   */\n  isAllExpanded?: boolean;\n\n  /**\n   * Callback to toggle expand/collapse all rows.\n   */\n  onExpandAllChange?: (event: unknown) => void;\n}\n\nexport function TableToolbar<TableData>({\n  isSearchEnabled,\n  globalFilter,\n  onGlobalFilterChange,\n  isColumnFilterEnabled,\n  columns,\n  width,\n  columnFilterMenuMaxHeight = 400,\n  isExpandAllEnabled,\n  isAllExpanded,\n  onExpandAllChange,\n}: TableToolbarProps<TableData>): ReactElement | null {\n  'use no memo'; // TanStack Table columns retain their identity when visibility changes.\n\n  const [colMenuAnchor, setColMenuAnchor] = useState<null | HTMLElement>(null);\n  const colMenuOpen = Boolean(colMenuAnchor);\n  const [searchResetKey, setSearchResetKey] = useState(0);\n\n  const handleSearchClear = useCallback(() => {\n    onGlobalFilterChange('');\n    setSearchResetKey((prev) => prev + 1);\n  }, [onGlobalFilterChange]);\n\n  if (!isSearchEnabled && !isColumnFilterEnabled && !isExpandAllEnabled) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      gap={1}\n      alignItems=\"center\"\n      justifyContent=\"flex-end\"\n      width={width}\n      padding=\"0.5rem\"\n      sx={{ backgroundColor: (theme) => theme.palette.background.default }}\n    >\n      {isSearchEnabled && (\n        <TextField\n          key={searchResetKey}\n          placeholder=\"Search...\"\n          value={globalFilter}\n          onChange={onGlobalFilterChange}\n          variant=\"standard\"\n          slotProps={{\n            htmlInput: { 'aria-label': 'search table' },\n            input: {\n              startAdornment: (\n                <InputAdornment position=\"start\">\n                  <Magnify fontSize=\"small\" />\n                </InputAdornment>\n              ),\n              endAdornment: globalFilter !== '' && (\n                <InputAdornment position=\"end\">\n                  <IconButton onClick={handleSearchClear}>\n                    <Close fontSize=\"small\" />\n                  </IconButton>\n                </InputAdornment>\n              ),\n            },\n          }}\n          sx={{ flexGrow: 1 }}\n        />\n      )}\n      {isExpandAllEnabled && (\n        <Tooltip title={isAllExpanded ? 'Collapse all' : 'Expand all'}>\n          <IconButton\n            onClick={onExpandAllChange}\n            color=\"info\"\n            aria-label={isAllExpanded ? 'collapse all rows' : 'expand all rows'}\n          >\n            {isAllExpanded ? <UnfoldLess /> : <UnfoldMore />}\n          </IconButton>\n        </Tooltip>\n      )}\n      {isColumnFilterEnabled && (\n        <>\n          <IconButton\n            onClick={(e) => setColMenuAnchor(e.currentTarget)}\n            aria-haspopup=\"listbox\"\n            aria-expanded={colMenuOpen}\n            color=\"info\"\n          >\n            <ViewColumn />\n          </IconButton>\n          <Menu\n            anchorEl={colMenuAnchor}\n            open={colMenuOpen}\n            onClose={() => setColMenuAnchor(null)}\n            slotProps={{ list: { dense: true } }}\n            sx={{ maxHeight: columnFilterMenuMaxHeight }}\n          >\n            {columns.map((column) => {\n              const header = column.columnDef.header;\n              const label = typeof header === 'string' ? header : column.id;\n              return (\n                <MenuItem\n                  key={column.id}\n                  disabled={!column.getCanHide()}\n                  onClick={column.getCanHide() ? column.getToggleVisibilityHandler() : undefined}\n                  dense\n                >\n                  <Checkbox\n                    checked={column.getIsVisible()}\n                    disabled={!column.getCanHide()}\n                    size=\"small\"\n                    disableRipple\n                    sx={{ p: 0, mr: 1 }}\n                  />\n                  <ListItemText primary={label} />\n                </MenuItem>\n              );\n            })}\n          </Menu>\n        </>\n      )}\n    </Stack>\n  );\n}\n"],"names":["Checkbox","IconButton","InputAdornment","ListItemText","Menu","MenuItem","Stack","Tooltip","Close","Magnify","UnfoldLess","UnfoldMore","ViewColumn","useCallback","useState","TextField","TableToolbar","isSearchEnabled","globalFilter","onGlobalFilterChange","isColumnFilterEnabled","columns","width","columnFilterMenuMaxHeight","isExpandAllEnabled","isAllExpanded","onExpandAllChange","colMenuAnchor","setColMenuAnchor","colMenuOpen","Boolean","searchResetKey","setSearchResetKey","handleSearchClear","prev","direction","gap","alignItems","justifyContent","padding","sx","backgroundColor","theme","palette","background","default","placeholder","value","onChange","variant","slotProps","htmlInput","input","startAdornment","position","fontSize","endAdornment","onClick","flexGrow","title","color","aria-label","e","currentTarget","aria-haspopup","aria-expanded","anchorEl","open","onClose","list","dense","maxHeight","map","column","header","columnDef","label","id","disabled","getCanHide","getToggleVisibilityHandler","undefined","checked","getIsVisible","size","disableRipple","p","mr","primary"],"mappings":"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"}

package/dist/Table/VirtualizedTable.d.ts

@@ -13,5 +13,5 @@ export type VirtualizedTableProps<TableData> = Required<Pick<TableProps<TableDat
     rowCount: number;
     toolbarConfig: Pick<TableToolbarProps<TableData>, 'isSearchEnabled' | 'globalFilter' | 'onGlobalFilterChange' | 'isColumnFilterEnabled' | 'columns' | 'columnFilterMenuMaxHeight' | 'isExpandAllEnabled' | 'isAllExpanded' | 'onExpandAllChange'>;
 };
-export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, columnSizing, columnSizingInfo, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig, }: VirtualizedTableProps<TableData>): ReactElement;
+export declare function VirtualizedTable<TableData>({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig, }: VirtualizedTableProps<TableData>): ReactElement;
 //# 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":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEhH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,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;IACvC,YAAY,EAAE,iBAAiB,CAAC;IAChC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CA6RjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEhH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,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;IACvC,YAAY,EAAE,iBAAiB,CAAC;IAChC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAyRjD"}

package/dist/Table/VirtualizedTable.js

@@ -28,7 +28,8 @@ import { VirtualizedTableContainer } from "./VirtualizedTableContainer.js";
 // 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, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, columnSizing, columnSizingInfo, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
+export function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultColumnHeight, onRowClick, onRowMouseOver, onRowMouseOut, rows, columns, headers, cellConfigs, pagination, onPaginationChange, rowCount, toolbarConfig }) {
+    'use no memo'; // TanStack Table row and column getters read mutable state behind stable identities.
     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
@@ -67,8 +68,7 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
             },
             TableHead,
             TableFoot,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            TableRow: ({ item, ...props })=>{
+            TableRow: ({ item: _item, ...props })=>{
                 const index = props['data-index'];
                 const row = rows[index];
                 if (!row) {
@@ -119,24 +119,15 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
     /**
    * Instead of calling `column.getSize()` on every render for every header
    * and especially every data cell (very expensive),
-   * we will calculate all column sizes at once at the root table level in a useMemo
+   * we calculate all column sizes once per render at the root table level
    * and pass the column sizes down as CSS variables to the <table> element.
-   */ const columnSizeVars = useMemo(()=>{
-        const colSizes = {};
-        headers.forEach((headerGroup)=>{
-            headerGroup.headers.filter((header)=>header.column.getCanResize()).forEach((header)=>{
-                colSizes[`--header-${header.id}-size`] = header.getSize();
-                colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
-            });
+   */ const columnSizeVars = {};
+    headers.forEach((headerGroup)=>{
+        headerGroup.headers.filter((header)=>header.column.getCanResize()).forEach((header)=>{
+            columnSizeVars[`--header-${header.id}-size`] = header.getSize();
+            columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();
         });
-        return colSizes;
-    // We want to recalculate column sizes whenever column sizes or column resizing info changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        columnSizingInfo,
-        columnSizing,
-        headers
-    ]);
+    });
     return /*#__PURE__*/ _jsxs(Box, {
         style: {
             width,

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 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 { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport type { Column, ColumnSizingInfoState, ColumnSizingState, HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef } from 'react';\nimport type { TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { InnerTable } from './InnerTable';\nimport type { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { TableBody } from './TableBody';\nimport type { TableCellProps } from './TableCell';\nimport { TableCell } from './TableCell';\nimport { TableFoot } from './TableFoot';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableRow } from './TableRow';\nimport type { TableToolbarProps } from './TableToolbar';\nimport { TableToolbar } from './TableToolbar';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnHeight' | 'defaultColumnWidth'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\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    columnSizing: ColumnSizingState;\n    columnSizingInfo: ColumnSizingInfoState;\n    cellConfigs?: TableCellConfigs;\n    rowCount: number;\n    toolbarConfig: Pick<\n      TableToolbarProps<TableData>,\n      | 'isSearchEnabled'\n      | 'globalFilter'\n      | 'onGlobalFilterChange'\n      | 'isColumnFilterEnabled'\n      | 'columns'\n      | 'columnFilterMenuMaxHeight'\n      | 'isExpandAllEnabled'\n      | 'isAllExpanded'\n      | 'onExpandAllChange'\n    >;\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  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  columnSizing,\n  columnSizingInfo,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\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\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): ReactElement => {\n        return (\n          <InnerTable\n            {...props}\n            width={width}\n            density={density}\n            onKeyDown={keyboardNav.onTableKeyDown}\n            onBlur={keyboardNav.onTableBlur}\n          />\n        );\n      },\n      TableHead,\n      TableFoot,\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      TableRow: ({ item, ...props }): ReactElement | null => {\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  }, [\n    density,\n    keyboardNav.onTableKeyDown,\n    keyboardNav.onTableBlur,\n    onRowClick,\n    onRowMouseOut,\n    onRowMouseOver,\n    rows,\n    width,\n  ]);\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars = useMemo(() => {\n    const colSizes: { [key: string]: number } = {};\n    headers.forEach((headerGroup) => {\n      headerGroup.headers\n        .filter((header) => header.column.getCanResize())\n        .forEach((header) => {\n          colSizes[`--header-${header.id}-size`] = header.getSize();\n          colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n        });\n    });\n    return colSizes;\n    // We want to recalculate column sizes whenever column sizes or column resizing info changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [columnSizingInfo, columnSizing, headers]);\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\n      <TableToolbar {...toolbarConfig} width={width} />\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={\n                            header.column.getCanResize()\n                              ? `calc(var(--header-${header?.id}-size) * 1px)`\n                              : column.getSize() || defaultColumnWidth\n                          }\n                          defaultColumnHeight={defaultColumnHeight}\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                          resizeConfig={\n                            header.column.getCanResize()\n                              ? {\n                                  resizeHandler: header.getResizeHandler(),\n                                  resetSizeHandler: header.column.resetSize,\n                                  isResizing: header.column.getIsResizing(),\n                                }\n                              : undefined\n                          }\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        fixedFooterContent={\n          pagination\n            ? (): ReactElement => (\n                <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                  <TablePagination\n                    colSpan={columns.length}\n                    count={rowCount}\n                    page={pagination.pageIndex}\n                    rowsPerPage={pagination.pageSize}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                  />\n                </MuiTableRow>\n              )\n            : undefined\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                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                /*\n                     IMPORTANT:\n                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)\n                     Components have no access to any context (Which is intentional and correct)\n                     We may want to add parameters to a link from neighboring cells in the future as well.\n                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)\n                  */\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                /* this has been specifically added for the data link,\n                     therefore, non string and numeric values should be excluded\n                  */\n                const adjacentCellsValuesMap = Object.entries(row.original as Record<string, unknown>)\n                  ?.filter(([_, value]) => ['string', 'number'].includes(typeof value))\n                  .reduce(\n                    (acc, [key, value]) => ({\n                      ...acc,\n                      [key]: String(value),\n                    }),\n                    {},\n                  );\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={\n                      cell.column.getCanResize()\n                        ? `calc(var(--col-${cell.column.id}-size) * 1px)`\n                        : cell.column.getSize() || defaultColumnWidth\n                    }\n                    defaultColumnHeight={defaultColumnHeight}\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                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                    dataLink={cell.column.columnDef.meta?.dataLink}\n                    adjacentCellsValuesMap={adjacentCellsValuesMap}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","TablePagination","TableRow","MuiTableRow","flexRender","useMemo","useRef","TableVirtuoso","useVirtualizedTableKeyboardNav","InnerTable","TableBody","TableCell","TableFoot","TableHead","TableHeaderCell","TableToolbar","VirtualizedTableContainer","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","columnSizing","columnSizingInfo","cellConfigs","pagination","onPaginationChange","rowCount","toolbarConfig","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","columnSizeVars","colSizes","forEach","headerGroup","filter","header","getCanResize","getSize","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","resizeConfig","resizeHandler","getResizeHandler","resetSizeHandler","resetSize","isResizing","getIsResizing","getContext","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","adjacentCellsValuesMap","Object","entries","original","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,eAAe,EAAEC,YAAYC,WAAW,QAAQ,gBAAgB;AAE9E,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAExC,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,4CAAyC;AACxF,SAASC,UAAU,QAAQ,kBAAe;AAE1C,SAASC,SAAS,QAAQ,iBAAc;AAExC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASZ,QAAQ,QAAQ,gBAAa;AAEtC,SAASa,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,yBAAyB,QAAQ,iCAA8B;AAiCxE,6EAA6E;AAC7E,4EAA4E;AAC5E,mBAAmB;AACnB,OAAO,SAASC,iBAA4B,EAC1CC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,kBAAkB,EAClBC,mBAAmB,EACnBC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,YAAY,EACZC,gBAAgB,EAChBC,WAAW,EACXC,UAAU,EACVC,kBAAkB,EAClBC,QAAQ,EACRC,aAAa,EACoB;IACjC,MAAMC,cAAc9B,OAA4B;IAChD,uEAAuE;IACvE,0EAA0E;IAC1E,oCAAoC;IACpC,MAAM+B,eAAe/B,OAAO;QAC1BgC,YAAY;QACZC,UAAU;IACZ;IAEA,MAAMC,kBAA0E,CAACC;QAC/EJ,aAAaK,OAAO,GAAGD;IACzB;IAEA,MAAME,cAAcnC,+BAA+B;QACjD6B,cAAcA;QACdO,cAAcR;QAEd,gCAAgC;QAChCS,SAASnB,KAAKoB,MAAM,GAAG;QACvBC,YAAYpB,QAAQmB,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,0BAAsDjD,QAAQ;QAClE,OAAO;YACLkD,UAAUvC;YACVwC,OAAO,CAACC;gBACN,qBACE,KAAChD;oBACE,GAAGgD,KAAK;oBACTvC,OAAOA;oBACPE,SAASA;oBACTsC,WAAWf,YAAYgB,cAAc;oBACrCC,QAAQjB,YAAYkB,WAAW;;YAGrC;YACAhD;YACAD;YACA,6DAA6D;YAC7DV,UAAU,CAAC,EAAE4D,IAAI,EAAE,GAAGL,OAAO;gBAC3B,MAAMM,QAAQN,KAAK,CAAC,aAAa;gBACjC,MAAMP,MAAMxB,IAAI,CAACqC,MAAM;gBACvB,IAAI,CAACb,KAAK;oBACR,OAAO;gBACT;gBAEA,MAAMc,eAAkC;oBAAEC,IAAIf,IAAIe,EAAE;oBAAEF,OAAOb,IAAIa,KAAK;gBAAC;gBAEvE,qBACE,KAAC7D;oBACE,GAAGuD,KAAK;oBACTS,SAAS,CAACC,IAAM5C,WAAW4C,GAAGjB,IAAIe,EAAE;oBACpC7C,SAASA;oBACTgD,aAAa,CAACD;wBACZ3C,iBAAiB2C,GAAGH;oBACtB;oBACAK,YAAY,CAACF;wBACX1C,gBAAgB0C,GAAGH;oBACrB;;YAGN;YACAtD;QACF;IACF,GAAG;QACDU;QACAuB,YAAYgB,cAAc;QAC1BhB,YAAYkB,WAAW;QACvBtC;QACAE;QACAD;QACAE;QACAR;KACD;IAED,MAAMoD,mBAAmB,CAACC,QAAoDC;QAC5E,IAAI,CAACxC,cAAc,CAACC,oBAAoB;QACxCA,mBAAmB;YAAE,GAAGD,UAAU;YAAEyC,WAAWD;QAAQ;IACzD;IAEA,MAAME,0BAA0B,CAACC;QAC/B,IAAI,CAAC3C,cAAc,CAACC,oBAAoB;QACxCA,mBAAmB;YAAEwC,WAAW;YAAGG,UAAUC,SAASF,MAAMG,MAAM,CAACC,KAAK,EAAE;QAAI;IAChF;IAEA;;;;;GAKC,GACD,MAAMC,iBAAiB3E,QAAQ;QAC7B,MAAM4E,WAAsC,CAAC;QAC7CrD,QAAQsD,OAAO,CAAC,CAACC;YACfA,YAAYvD,OAAO,CAChBwD,MAAM,CAAC,CAACC,SAAWA,OAAOjC,MAAM,CAACkC,YAAY,IAC7CJ,OAAO,CAAC,CAACG;gBACRJ,QAAQ,CAAC,CAAC,SAAS,EAAEI,OAAOpB,EAAE,CAAC,KAAK,CAAC,CAAC,GAAGoB,OAAOE,OAAO;gBACvDN,QAAQ,CAAC,CAAC,MAAM,EAAEI,OAAOjC,MAAM,CAACa,EAAE,CAAC,KAAK,CAAC,CAAC,GAAGoB,OAAOjC,MAAM,CAACmC,OAAO;YACpE;QACJ;QACA,OAAON;IACP,6FAA6F;IAC7F,uDAAuD;IACzD,GAAG;QAACnD;QAAkBD;QAAcD;KAAQ;IAE5C,qBACE,MAAC5B;QAAIwF,OAAO;YAAEtE;YAAOC;YAAQ,GAAG6D,cAAc;QAAC;;0BAC7C,KAACjE;gBAAc,GAAGoB,aAAa;gBAAEjB,OAAOA;;0BACxC,KAACX;gBACCkF,KAAKrD;gBACLsD,YAAYhE,KAAKoB,MAAM;gBACvB6C,YAAYrC;gBACZ,uEAAuE;gBACvE,YAAY;gBACZ,8EAA8E;gBAC9EsC,cAAcpD;gBACdqD,oBAAoB;oBAClB,qBACE;kCACGjE,QAAQkE,GAAG,CAAC,CAACX;4BACZ,qBACE,KAACjF;gCAA8BkB,SAASA;0CACrC+D,YAAYvD,OAAO,CAACkE,GAAG,CAAC,CAACT,QAAQU,GAAGnE;oCACnC,MAAMwB,SAASiC,OAAOjC,MAAM;oCAC5B,MAAM4C,WAA8B;wCAClC9C,KAAK;wCACLE,QAAQ2C;oCACV;oCAEA,MAAME,WAAW7C,OAAO8C,WAAW;oCACnC,MAAMC,cAAc/C,OAAOgD,mBAAmB;oCAE9C,qBACE,KAACtF;wCAECuF,QAAQjD,OAAOkD,UAAU,KAAKlD,OAAOmD,uBAAuB,KAAKC;wCACjEC,eAAe,OAAOR,aAAa,WAAWA,WAAWO;wCACzDE,mBAAmB,OAAOP,gBAAgB,WAAWA,cAAcK;wCACnEtF,OACEmE,OAAOjC,MAAM,CAACkC,YAAY,KACtB,CAAC,kBAAkB,EAAED,QAAQpB,GAAG,aAAa,CAAC,GAC9Cb,OAAOmC,OAAO,MAAMlE;wCAE1BC,qBAAqBA;wCACrBqF,OAAOvD,OAAOwD,SAAS,CAACC,IAAI,EAAEF;wCAC9BG,SAAQ;wCACR1F,SAASA;wCACT2F,aAAa3D,OAAOwD,SAAS,CAACC,IAAI,EAAEG;wCACpCC,YAAYjE,cAAcgD;wCAC1BkB,gBAAgB,IAAMvE,YAAYwE,WAAW,CAACnB;wCAC9CoB,eAAerB,MAAM;wCACrBsB,cAActB,MAAMnE,QAAQkB,MAAM,GAAG;wCACrCwE,cACEjC,OAAOjC,MAAM,CAACkC,YAAY,KACtB;4CACEiC,eAAelC,OAAOmC,gBAAgB;4CACtCC,kBAAkBpC,OAAOjC,MAAM,CAACsE,SAAS;4CACzCC,YAAYtC,OAAOjC,MAAM,CAACwE,aAAa;wCACzC,IACApB;kDAGLpG,WAAWgD,OAAOwD,SAAS,CAACvB,MAAM,EAAEA,OAAOwC,UAAU;uCA5BjDxC,OAAOpB,EAAE;gCA+BpB;+BA5CakB,YAAYlB,EAAE;wBA+CjC;;gBAGN;gBACA6D,oBACE9F,aACI,kBACE,KAAC7B;wBAAY4H,IAAI;4BAAEC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;wBAAC;kCAC9E,cAAA,KAACnI;4BACCoI,SAAS1G,QAAQmB,MAAM;4BACvBwF,OAAOpG;4BACPqG,MAAMvG,WAAWyC,SAAS;4BAC1B+D,aAAaxG,WAAW4C,QAAQ;4BAChC6D,cAAcnE;4BACdoE,qBAAqBhE;;yBAI3B8B;gBAENmC,aAAa,CAAC5E;oBACZ,MAAMb,MAAMxB,IAAI,CAACqC,MAAM;oBACvB,IAAI,CAACb,KAAK;wBACR,OAAO;oBACT;oBAEA,qBACE;kCACGA,IAAI0F,eAAe,GAAG9C,GAAG,CAAC,CAAC+C,MAAM9C,GAAG+C;4BACnC,MAAM9C,WAA8B;gCAClC9C,KAAKa,QAAQ;gCACbX,QAAQ2C;4BACV;4BAEA,MAAMgD,cAAcF,KAAKhB,UAAU;4BACnC,MAAMmB,aAAajH,aAAa,CAACgH,YAAYF,IAAI,CAAC5E,EAAE,CAAC;4BAErD,MAAMgF,eAAeJ,KAAKzF,MAAM,CAACwD,SAAS,CAACiC,IAAI;4BAC/C,MAAMK,cAAc,OAAOD,iBAAiB,aAAaA,aAAaF,eAAe;4BAErF;;;;;;kBAME,GAEF,MAAMI,qBAAqBN,KAAKzF,MAAM,CAACwD,SAAS,CAACC,IAAI,EAAEuC;4BACvD,IAAIrC,cAAkCP;4BACtC,IAAI,OAAO2C,uBAAuB,YAAY;gCAC5C,6DAA6D;gCAC7D,gBAAgB;gCAChBpC,cAAcoC,mBAAmBJ;4BACnC,OAAO,IAAII,sBAAsB,OAAOD,gBAAgB,UAAU;gCAChE,4DAA4D;gCAC5D,6DAA6D;gCAC7D,gBAAgB;gCAChBnC,cAAcmC;4BAChB;4BAEA;;kBAEE,GACF,MAAMG,yBAAyBC,OAAOC,OAAO,CAACrG,IAAIsG,QAAQ,GACtDpE,OAAO,CAAC,CAACqE,GAAG1E,MAAM,GAAK;oCAAC;oCAAU;iCAAS,CAAC2E,QAAQ,CAAC,OAAO3E,QAC7D4E,OACC,CAACC,KAAK,CAACC,KAAK9E,MAAM,GAAM,CAAA;oCACtB,GAAG6E,GAAG;oCACN,CAACC,IAAI,EAAEC,OAAO/E;gCAChB,CAAA,GACA,CAAC;4BAGL,qBACE,KAACpE;gCAECoJ,eAAalB,KAAK5E,EAAE;gCACpB+F,OAAOjD,eAAeiC,YAAYiB,QAAQf;gCAC1ChI,OACE2H,KAAKzF,MAAM,CAACkC,YAAY,KACpB,CAAC,eAAe,EAAEuD,KAAKzF,MAAM,CAACa,EAAE,CAAC,aAAa,CAAC,GAC/C4E,KAAKzF,MAAM,CAACmC,OAAO,MAAMlE;gCAE/BC,qBAAqBA;gCACrBqF,OAAOkC,KAAKzF,MAAM,CAACwD,SAAS,CAACC,IAAI,EAAEF;gCACnCvF,SAASA;gCACT6F,YAAYjE,cAAcgD;gCAC1BkB,gBAAgB,IAAMvE,YAAYwE,WAAW,CAACnB;gCAC9CoB,eAAerB,MAAM;gCACrBsB,cAActB,MAAM+C,MAAMhG,MAAM,GAAG;gCACnCiE,aAAaA;gCACbmD,OAAOlB,YAAYmB,aAAa3D;gCAChCwB,iBAAiBgB,YAAYhB,mBAAmBxB;gCAChD4D,UAAUvB,KAAKzF,MAAM,CAACwD,SAAS,CAACC,IAAI,EAAEuD;gCACtCf,wBAAwBA;0CAEvBL,YAAYiB,QAAQf;+BArBhBL,KAAK5E,EAAE;wBAwBlB;;gBAGN;;;;AAIR"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright 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 { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport type { Column, ColumnSizingInfoState, ColumnSizingState, HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef } from 'react';\nimport type { TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { InnerTable } from './InnerTable';\nimport type { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { TableBody } from './TableBody';\nimport type { TableCellProps } from './TableCell';\nimport { TableCell } from './TableCell';\nimport { TableFoot } from './TableFoot';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableRow } from './TableRow';\nimport type { TableToolbarProps } from './TableToolbar';\nimport { TableToolbar } from './TableToolbar';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnHeight' | 'defaultColumnWidth'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\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    columnSizing: ColumnSizingState;\n    columnSizingInfo: ColumnSizingInfoState;\n    cellConfigs?: TableCellConfigs;\n    rowCount: number;\n    toolbarConfig: Pick<\n      TableToolbarProps<TableData>,\n      | 'isSearchEnabled'\n      | 'globalFilter'\n      | 'onGlobalFilterChange'\n      | 'isColumnFilterEnabled'\n      | 'columns'\n      | 'columnFilterMenuMaxHeight'\n      | 'isExpandAllEnabled'\n      | 'isAllExpanded'\n      | 'onExpandAllChange'\n    >;\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  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  'use no memo'; // TanStack Table row and column getters read mutable state behind stable identities.\n\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\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\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): ReactElement => {\n        return (\n          <InnerTable\n            {...props}\n            width={width}\n            density={density}\n            onKeyDown={keyboardNav.onTableKeyDown}\n            onBlur={keyboardNav.onTableBlur}\n          />\n        );\n      },\n      TableHead,\n      TableFoot,\n      TableRow: ({ item: _item, ...props }): ReactElement | null => {\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  }, [\n    density,\n    keyboardNav.onTableKeyDown,\n    keyboardNav.onTableBlur,\n    onRowClick,\n    onRowMouseOut,\n    onRowMouseOver,\n    rows,\n    width,\n  ]);\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we calculate all column sizes once per render at the root table level\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars: { [key: string]: number } = {};\n  headers.forEach((headerGroup) => {\n    headerGroup.headers\n      .filter((header) => header.column.getCanResize())\n      .forEach((header) => {\n        columnSizeVars[`--header-${header.id}-size`] = header.getSize();\n        columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();\n      });\n  });\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\n      <TableToolbar {...toolbarConfig} width={width} />\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={\n                            header.column.getCanResize()\n                              ? `calc(var(--header-${header?.id}-size) * 1px)`\n                              : column.getSize() || defaultColumnWidth\n                          }\n                          defaultColumnHeight={defaultColumnHeight}\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                          resizeConfig={\n                            header.column.getCanResize()\n                              ? {\n                                  resizeHandler: header.getResizeHandler(),\n                                  resetSizeHandler: header.column.resetSize,\n                                  isResizing: header.column.getIsResizing(),\n                                }\n                              : undefined\n                          }\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        fixedFooterContent={\n          pagination\n            ? (): ReactElement => (\n                <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                  <TablePagination\n                    colSpan={columns.length}\n                    count={rowCount}\n                    page={pagination.pageIndex}\n                    rowsPerPage={pagination.pageSize}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                  />\n                </MuiTableRow>\n              )\n            : undefined\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                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                /*\n                     IMPORTANT:\n                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)\n                     Components have no access to any context (Which is intentional and correct)\n                     We may want to add parameters to a link from neighboring cells in the future as well.\n                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)\n                  */\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                /* this has been specifically added for the data link,\n                     therefore, non string and numeric values should be excluded\n                  */\n                const adjacentCellsValuesMap = Object.entries(row.original as Record<string, unknown>)\n                  ?.filter(([_, value]) => ['string', 'number'].includes(typeof value))\n                  .reduce(\n                    (acc, [key, value]) => ({\n                      ...acc,\n                      [key]: String(value),\n                    }),\n                    {},\n                  );\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={\n                      cell.column.getCanResize()\n                        ? `calc(var(--col-${cell.column.id}-size) * 1px)`\n                        : cell.column.getSize() || defaultColumnWidth\n                    }\n                    defaultColumnHeight={defaultColumnHeight}\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                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                    dataLink={cell.column.columnDef.meta?.dataLink}\n                    adjacentCellsValuesMap={adjacentCellsValuesMap}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","TablePagination","TableRow","MuiTableRow","flexRender","useMemo","useRef","TableVirtuoso","useVirtualizedTableKeyboardNav","InnerTable","TableBody","TableCell","TableFoot","TableHead","TableHeaderCell","TableToolbar","VirtualizedTableContainer","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","toolbarConfig","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","_item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","columnSizeVars","forEach","headerGroup","filter","header","getCanResize","getSize","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","resizeConfig","resizeHandler","getResizeHandler","resetSizeHandler","resetSize","isResizing","getIsResizing","getContext","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","adjacentCellsValuesMap","Object","entries","original","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":"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"}

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

@@ -240,7 +240,11 @@ declare module '@tanstack/react-table' {
     }
 }
 export type DataLink = Omit<Link, 'name'>;
-export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'> {
+/**
+ * Cell values default to `unknown`. In cell callbacks, use `getValue<ValueType>()`
+ * when the column's value type is known, or narrow the value before using it.
+ */
+export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<TableData>, 'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'> {
     /**
      * Text to display in the header for the column.
      */
@@ -257,7 +261,7 @@ export interface TableColumnConfig<TableData> extends Pick<AccessorKeyColumnDef<
      * If set to `true`, it will use the value generated by the `cell` prop if it
      * can be treated as a string.
      */
-    cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;
+    cellDescription?: ((props: CellContext<TableData, unknown>) => string) | boolean | undefined;
     /**
      * When `true`, the column will be sortable.
      * @default false

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.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 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 type { Theme } from '@mui/material';\nimport type { Link } from '@perses-dev/spec';\nimport type { rankings } from '@tanstack/match-sorter-utils';\nimport type {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  FilterFn,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport type { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_MIN_WIDTH = 60;\nexport const DEFAULT_COLUMN_MAX_WIDTH = 1000;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\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 | string;\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   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\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 using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\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   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => 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  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n\n  /**\n   * Returns the sub rows for a given row, or `undefined` if there are none.\n   */\n  getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];\n\n  /**\n   * List of column ids that should be hidden when the table is initially rendered.\n   */\n  hiddenColumns?: string[];\n\n  /**\n   * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.\n   * If not provided, the toolbar will not be rendered.\n   */\n  tableToolbarConfig?: TableToolbarConfig;\n\n  /**\n   * Determines when column resizing updates the column width.\n   * When set to `onChange`, the column width will update as the user drags the resize handle.\n   * When set to `onEnd`, the column width will only update when the user releases the resize handle.\n   * @default 'onChange'\n   */\n  columnResizeMode?: 'onChange' | 'onEnd';\n\n  /**\n   * Default configuration applied to all columns in the table. Individual\n   * column configurations can override these values. Useful for setting\n   * consistent constraints (e.g. min/max width) or enabling resizing across\n   * all columns without repeating the configuration per column.\n   */\n  defaultColumnConfig?: DefaultColumnConfig;\n}\n\nexport interface DefaultColumnConfig {\n  /**\n   * Minimum width of a column in pixels.\n   * @default 60\n   */\n  minWidth?: number;\n\n  /**\n   * Maximum width of a column in pixels.\n   * @default 1000\n   */\n  maxWidth?: number;\n\n  /**\n   * When `true`, columns will be resizable by dragging the column header border.\n   * @default false\n   */\n  enableResizing?: boolean;\n}\n\nexport type FuzzyMatchThreshold = keyof typeof rankings;\n\nexport type TableToolbarConfig = {\n  /**\n   * When `true`, a search bar will be rendered above the table that allows\n   * the user to filter rows using a fuzzy global filter.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * When `isSearchEnabled` is `true`, this determines how fuzzy the matching should be when filtering results.\n   * @default 'CONTAINS'\n   */\n  fuzzyMatchThreshold?: FuzzyMatchThreshold;\n\n  /**\n   * When `true`, a \"Columns\" button will be rendered above the table that\n   * opens a dropdown allowing the user to toggle column visibility.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | 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  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\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  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {},\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\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    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\ndeclare module '@tanstack/react-table' {\n  //add fuzzy filter to the filterFns. Allows us to use \"fuzzy\" as a value for `globalFilterFn` in our table options.\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>;\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\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' | 'id' | 'enableResizing'> {\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   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>,\n  defaultColumnConfig?: DefaultColumnConfig,\n): Array<ColumnDef<TableData>> {\n  return columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps }) => {\n      const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth)\n          : getUserProvidedSizeProps(\n              isResizingEnabled,\n              width,\n              defaultColumnConfig?.minWidth,\n              defaultColumnConfig?.maxWidth,\n            );\n\n      return {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n        enableResizing: isResizingEnabled,\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          dataLink,\n        },\n      };\n    },\n  );\n}\n\nfunction getUserProvidedSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  width: number,\n  minWidth?: number,\n  maxWidth?: number,\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.\n  return isResizingEnabled\n    ? {\n        size: width,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\n    : {\n        size: width,\n      };\n}\n\nfunction getDefaultSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  minWidth?: number,\n  maxWidth?: number,\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  return isResizingEnabled\n    ? {\n        // When resizing is enabled, we need to set a default size for the column\n        // so that relative value can be calculated when resizing and column is visible.\n        size: DEFAULT_COLUMN_WIDTH,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\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      {\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"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MIN_WIDTH","DEFAULT_COLUMN_MAX_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","defaultColumnConfig","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","enableResizing","otherProps","isResizingEnabled","sizeProps","undefined","getDefaultSizeProps","minWidth","maxWidth","getUserProvidedSizeProps","meta","size","minSize","maxSize"],"mappings":"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"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright 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 type { Theme } from '@mui/material';\nimport type { Link } from '@perses-dev/spec';\nimport type { rankings } from '@tanstack/match-sorter-utils';\nimport type {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  FilterFn,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport type { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_MIN_WIDTH = 60;\nexport const DEFAULT_COLUMN_MAX_WIDTH = 1000;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\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 | string;\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   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\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 using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\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   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => 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  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n\n  /**\n   * Returns the sub rows for a given row, or `undefined` if there are none.\n   */\n  getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];\n\n  /**\n   * List of column ids that should be hidden when the table is initially rendered.\n   */\n  hiddenColumns?: string[];\n\n  /**\n   * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.\n   * If not provided, the toolbar will not be rendered.\n   */\n  tableToolbarConfig?: TableToolbarConfig;\n\n  /**\n   * Determines when column resizing updates the column width.\n   * When set to `onChange`, the column width will update as the user drags the resize handle.\n   * When set to `onEnd`, the column width will only update when the user releases the resize handle.\n   * @default 'onChange'\n   */\n  columnResizeMode?: 'onChange' | 'onEnd';\n\n  /**\n   * Default configuration applied to all columns in the table. Individual\n   * column configurations can override these values. Useful for setting\n   * consistent constraints (e.g. min/max width) or enabling resizing across\n   * all columns without repeating the configuration per column.\n   */\n  defaultColumnConfig?: DefaultColumnConfig;\n}\n\nexport interface DefaultColumnConfig {\n  /**\n   * Minimum width of a column in pixels.\n   * @default 60\n   */\n  minWidth?: number;\n\n  /**\n   * Maximum width of a column in pixels.\n   * @default 1000\n   */\n  maxWidth?: number;\n\n  /**\n   * When `true`, columns will be resizable by dragging the column header border.\n   * @default false\n   */\n  enableResizing?: boolean;\n}\n\nexport type FuzzyMatchThreshold = keyof typeof rankings;\n\nexport type TableToolbarConfig = {\n  /**\n   * When `true`, a search bar will be rendered above the table that allows\n   * the user to filter rows using a fuzzy global filter.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * When `isSearchEnabled` is `true`, this determines how fuzzy the matching should be when filtering results.\n   * @default 'CONTAINS'\n   */\n  fuzzyMatchThreshold?: FuzzyMatchThreshold;\n\n  /**\n   * When `true`, a \"Columns\" button will be rendered above the table that\n   * opens a dropdown allowing the user to toggle column visibility.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | 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  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\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  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {},\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\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  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\ndeclare module '@tanstack/react-table' {\n  //add fuzzy filter to the filterFns. Allows us to use \"fuzzy\" as a value for `globalFilterFn` in our table options.\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>;\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\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.\n/**\n * Cell values default to `unknown`. In cell callbacks, use `getValue<ValueType>()`\n * when the column's value type is known, or narrow the value before using it.\n */\nexport interface TableColumnConfig<TableData> extends Pick<\n  AccessorKeyColumnDef<TableData>,\n  'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'\n> {\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  cellDescription?: ((props: CellContext<TableData, unknown>) => 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   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>,\n  defaultColumnConfig?: DefaultColumnConfig,\n): Array<ColumnDef<TableData>> {\n  return columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps }) => {\n      const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth)\n          : getUserProvidedSizeProps(\n              isResizingEnabled,\n              width,\n              defaultColumnConfig?.minWidth,\n              defaultColumnConfig?.maxWidth,\n            );\n\n      return {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n        enableResizing: isResizingEnabled,\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          dataLink,\n        },\n      };\n    },\n  );\n}\n\nfunction getUserProvidedSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  width: number,\n  minWidth?: number,\n  maxWidth?: number,\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.\n  return isResizingEnabled\n    ? {\n        size: width,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\n    : {\n        size: width,\n      };\n}\n\nfunction getDefaultSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  minWidth?: number,\n  maxWidth?: number,\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  return isResizingEnabled\n    ? {\n        // When resizing is enabled, we need to set a default size for the column\n        // so that relative value can be calculated when resizing and column is visible.\n        size: DEFAULT_COLUMN_WIDTH,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\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      {\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"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MIN_WIDTH","DEFAULT_COLUMN_MAX_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","defaultColumnConfig","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","enableResizing","otherProps","isResizingEnabled","sizeProps","undefined","getDefaultSizeProps","minWidth","maxWidth","getUserProvidedSizeProps","meta","size","minSize","maxSize"],"mappings":"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"}

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -34,9 +34,7 @@ export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePer
         if (!recentlyAddedInputRef.current || !focusRef.current) return;
         recentlyAddedInputRef.current?.focus();
         focusRef.current = false;
-    }, [
-        steps?.length
-    ]);
+    });
     const handleThresholdValueChange = (e, i)=>{
         if (thresholds !== undefined) {
             onChange(produce(thresholds, (draft)=>{

package/dist/ThresholdsEditor/ThresholdsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 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 { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport type { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        }),\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        }),\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          }),\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        }),\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        }),\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        }),\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .toReversed()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","toReversed","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 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 { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport type { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  });\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        }),\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        }),\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          }),\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        }),\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        }),\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        }),\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .toReversed()}\n      {!hideDefault && (\n        <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n          <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n          <Typography>Default</Typography>\n        </Stack>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n  return (\n    '#' +\n    Math.floor(Math.random() * 16777216)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"names":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","length","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","toReversed","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/TimeRangeSelector/DateTimeRangePicker.js

@@ -31,7 +31,7 @@ import { DATE_TIME_FORMAT, validateDateRange } from "./utils.js";
     const stdTimeZone = [
         'local',
         'browser'
-    ].includes(timeZone.toLowerCase()) ? Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
+    ].includes(timeZone.toLowerCase()) ? new Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
     const [timeRange, setTimeRange] = useState(initialTimeRange);
     const [showStartCalendar, setShowStartCalendar] = useState(true);
     const changeTimeRange = (newTime, segment)=>{

package/dist/TimeRangeSelector/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 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 { TZDate } from '@date-fns/tz';\nimport { Box, Stack, Typography, Button } from '@mui/material';\nimport { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\nimport type { AbsoluteTimeRange } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport { ErrorAlert } from '../ErrorAlert';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\nexport interface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: string;\n}\n\n/**\n * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.\n * TODO: Use directly the MUI X ``DateTimePicker`` for datetime selection which is better. https://next.mui.com/x/react-date-pickers/date-time-picker/\n *   Use ``DateTimeRangePicker`` directly would be cool but paid https://next.mui.com/x/react-date-pickers/date-time-range-picker/\n * @param initialTimeRange initial time range to pre-select.\n * @param onChange event received when start and end has been selected (click on apply)\n * @param onCancel event received when user click on cancel\n * @constructor\n */\nexport const DateTimeRangePicker = ({\n  initialTimeRange,\n  onChange,\n  onCancel,\n  timeZone,\n}: AbsoluteTimeFormProps): ReactElement => {\n  const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())\n    ? Intl.DateTimeFormat().resolvedOptions().timeZone\n    : timeZone;\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: Date, segment: keyof AbsoluteTimeRange): void => {\n    setTimeRange((prevTimeRange) => {\n      return {\n        ...prevTimeRange,\n        [segment]: newTime,\n      };\n    });\n  };\n\n  const onChangeStartTime = (newStartTime: Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: timeRange.start,\n      end: timeRange.end,\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      return newDates;\n    }\n  };\n\n  const onApply = (): void => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              minDateTime={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"start_time_input\"\n              timezone={stdTimeZone}\n              label=\"Start Time\"\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeStartTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"end_time_input\"\n              timezone={stdTimeZone}\n              label=\"End Time\"\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeEndTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["TZDate","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useState","ErrorAlert","ErrorBoundary","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","timeZone","stdTimeZone","includes","toLowerCase","Intl","DateTimeFormat","resolvedOptions","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","start","end","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","timezone","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","data-testid","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright 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 { TZDate } from '@date-fns/tz';\nimport { Box, Stack, Typography, Button } from '@mui/material';\nimport { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\nimport type { AbsoluteTimeRange } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useState } from 'react';\n\nimport { ErrorAlert } from '../ErrorAlert';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\nexport interface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: string;\n}\n\n/**\n * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.\n * TODO: Use directly the MUI X ``DateTimePicker`` for datetime selection which is better. https://next.mui.com/x/react-date-pickers/date-time-picker/\n *   Use ``DateTimeRangePicker`` directly would be cool but paid https://next.mui.com/x/react-date-pickers/date-time-range-picker/\n * @param initialTimeRange initial time range to pre-select.\n * @param onChange event received when start and end has been selected (click on apply)\n * @param onCancel event received when user click on cancel\n * @constructor\n */\nexport const DateTimeRangePicker = ({\n  initialTimeRange,\n  onChange,\n  onCancel,\n  timeZone,\n}: AbsoluteTimeFormProps): ReactElement => {\n  const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())\n    ? new Intl.DateTimeFormat().resolvedOptions().timeZone\n    : timeZone;\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: Date, segment: keyof AbsoluteTimeRange): void => {\n    setTimeRange((prevTimeRange) => {\n      return {\n        ...prevTimeRange,\n        [segment]: newTime,\n      };\n    });\n  };\n\n  const onChangeStartTime = (newStartTime: Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: timeRange.start,\n      end: timeRange.end,\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      return newDates;\n    }\n  };\n\n  const onApply = (): void => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              minDateTime={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"start_time_input\"\n              timezone={stdTimeZone}\n              label=\"Start Time\"\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeStartTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"end_time_input\"\n              timezone={stdTimeZone}\n              label=\"End Time\"\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeEndTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["TZDate","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useState","ErrorAlert","ErrorBoundary","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","timeZone","stdTimeZone","includes","toLowerCase","Intl","DateTimeFormat","resolvedOptions","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","start","end","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","timezone","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","data-testid","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}