@perses-dev/components 0.53.0-rc.3 → 0.53.1

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAmB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQtD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAStF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,GAAG,qBAAqB,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,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,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,GACT,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAqOjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,EAAc,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EAAmB,YAAY,EAAE,MAAM,OAAO,CAAC;AAQtD,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAStF,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,oBAAoB,GAAG,qBAAqB,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,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;CAClB,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,GACT,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAsPjD"}

package/dist/Table/VirtualizedTable.js

@@ -60,7 +60,8 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
                     ...props,
                     width: width,
                     density: density,
-                    onKeyDown: keyboardNav.onTableKeyDown
+                    onKeyDown: keyboardNav.onTableKeyDown,
+                    onBlur: keyboardNav.onTableBlur
                 });
             },
             TableHead,
@@ -93,6 +94,7 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
     }, [
         density,
         keyboardNav.onTableKeyDown,
+        keyboardNav.onTableBlur,
         onRowClick,
         onRowMouseOut,
         onRowMouseOver,

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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { TableFoot } from './TableFoot';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>\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    cellConfigs?: TableCellConfigs;\n    rowCount: number;\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}: 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 <InnerTable {...props} width={width} density={density} onKeyDown={keyboardNav.onTableKeyDown} />;\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  }, [density, keyboardNav.onTableKeyDown, onRowClick, onRowMouseOut, onRowMouseOver, rows, width]);\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  return (\n    <Box style={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || defaultColumnWidth}\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                        >\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={cell.column.getSize() || defaultColumnWidth}\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":["flexRender","Box","TablePagination","TableRow","MuiTableRow","TableVirtuoso","useRef","useMemo","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","TableFoot","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","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","filter","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":"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"}
+{"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 { Column, HeaderGroup, Row, flexRender } from '@tanstack/react-table';\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport { TableVirtuoso, TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { useRef, useMemo, ReactElement } from 'react';\nimport { TableRow } from './TableRow';\nimport { TableBody } from './TableBody';\nimport { InnerTable } from './InnerTable';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableCell, TableCellProps } from './TableCell';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\nimport { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { TableFoot } from './TableFoot';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnWidth' | 'defaultColumnHeight'>\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    cellConfigs?: TableCellConfigs;\n    rowCount: number;\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}: 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  return (\n    <Box style={{ width, height }}>\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={column.getSize() || defaultColumnWidth}\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                        >\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={cell.column.getSize() || defaultColumnWidth}\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":["flexRender","Box","TablePagination","TableRow","MuiTableRow","TableVirtuoso","useRef","useMemo","TableBody","InnerTable","TableHead","TableHeaderCell","TableCell","VirtualizedTableContainer","useVirtualizedTableKeyboardNav","TableFoot","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","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","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","headerGroup","header","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","getSize","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","getContext","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","filter","_","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,SAAmCA,UAAU,QAAQ,wBAAwB;AAC7E,SAASC,GAAG,EAAEC,eAAe,EAAEC,YAAYC,WAAW,QAAQ,gBAAgB;AAC9E,SAASC,aAAa,QAAkE,iBAAiB;AACzG,SAASC,MAAM,EAAEC,OAAO,QAAsB,QAAQ;AACtD,SAASJ,QAAQ,QAAQ,aAAa;AACtC,SAASK,SAAS,QAAQ,cAAc;AACxC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,SAAS,QAAwB,cAAc;AACxD,SAASC,yBAAyB,QAAQ,8BAA8B;AAExE,SAASC,8BAA8B,QAAQ,yCAAyC;AACxF,SAASC,SAAS,QAAQ,cAAc;AAmBxC,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,WAAW,EACXC,UAAU,EACVC,kBAAkB,EAClBC,QAAQ,EACyB;IACjC,MAAMC,cAAc1B,OAA4B;IAChD,uEAAuE;IACvE,0EAA0E;IAC1E,oCAAoC;IACpC,MAAM2B,eAAe3B,OAAO;QAC1B4B,YAAY;QACZC,UAAU;IACZ;IAEA,MAAMC,kBAA0E,CAACC;QAC/EJ,aAAaK,OAAO,GAAGD;IACzB;IAEA,MAAME,cAAczB,+BAA+B;QACjDmB,cAAcA;QACdO,cAAcR;QAEd,gCAAgC;QAChCS,SAAShB,KAAKiB,MAAM,GAAG;QACvBC,YAAYjB,QAAQgB,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,0BAAsD3C,QAAQ;QAClE,OAAO;YACL4C,UAAUtC;YACVuC,OAAO,CAACC;gBACN,qBACE,KAAC5C;oBACE,GAAG4C,KAAK;oBACTpC,OAAOA;oBACPE,SAASA;oBACTmC,WAAWf,YAAYgB,cAAc;oBACrCC,QAAQjB,YAAYkB,WAAW;;YAGrC;YACA/C;YACAK;YACA,6DAA6D;YAC7DZ,UAAU,CAAC,EAAEuD,IAAI,EAAE,GAAGL,OAAO;gBAC3B,MAAMM,QAAQN,KAAK,CAAC,aAAa;gBACjC,MAAMP,MAAMrB,IAAI,CAACkC,MAAM;gBACvB,IAAI,CAACb,KAAK;oBACR,OAAO;gBACT;gBAEA,MAAMc,eAAkC;oBAAEC,IAAIf,IAAIe,EAAE;oBAAEF,OAAOb,IAAIa,KAAK;gBAAC;gBAEvE,qBACE,KAACxD;oBACE,GAAGkD,KAAK;oBACTS,SAAS,CAACC,IAAMzC,WAAWyC,GAAGjB,IAAIe,EAAE;oBACpC1C,SAASA;oBACT6C,aAAa,CAACD;wBACZxC,iBAAiBwC,GAAGH;oBACtB;oBACAK,YAAY,CAACF;wBACXvC,gBAAgBuC,GAAGH;oBACrB;;YAGN;YACApD;QACF;IACF,GAAG;QACDW;QACAoB,YAAYgB,cAAc;QAC1BhB,YAAYkB,WAAW;QACvBnC;QACAE;QACAD;QACAE;QACAR;KACD;IAED,MAAMiD,mBAAmB,CAACC,QAAoDC;QAC5E,IAAI,CAACvC,cAAc,CAACC,oBAAoB;QACxCA,mBAAmB;YAAE,GAAGD,UAAU;YAAEwC,WAAWD;QAAQ;IACzD;IAEA,MAAME,0BAA0B,CAACC;QAC/B,IAAI,CAAC1C,cAAc,CAACC,oBAAoB;QACxCA,mBAAmB;YAAEuC,WAAW;YAAGG,UAAUC,SAASF,MAAMG,MAAM,CAACC,KAAK,EAAE;QAAI;IAChF;IAEA,qBACE,KAAC1E;QAAI2E,OAAO;YAAE3D;YAAOC;QAAO;kBAC1B,cAAA,KAACb;YACCwE,KAAK7C;YACL8C,YAAYrD,KAAKiB,MAAM;YACvBqC,YAAY7B;YACZ,uEAAuE;YACvE,YAAY;YACZ,8EAA8E;YAC9E8B,cAAc5C;YACd6C,oBAAoB;gBAClB,qBACE;8BACGtD,QAAQuD,GAAG,CAAC,CAACC;wBACZ,qBACE,KAAChF;4BAA8BgB,SAASA;sCACrCgE,YAAYxD,OAAO,CAACuD,GAAG,CAAC,CAACE,QAAQC,GAAG1D;gCACnC,MAAMqB,SAASoC,OAAOpC,MAAM;gCAC5B,MAAMsC,WAA8B;oCAClCxC,KAAK;oCACLE,QAAQqC;gCACV;gCAEA,MAAME,WAAWvC,OAAOwC,WAAW;gCACnC,MAAMC,cAAczC,OAAO0C,mBAAmB;gCAE9C,qBACE,KAAC/E;oCAECgF,QAAQ3C,OAAO4C,UAAU,KAAK5C,OAAO6C,uBAAuB,KAAKC;oCACjEC,eAAe,OAAOR,aAAa,WAAWA,WAAWO;oCACzDE,mBAAmB,OAAOP,gBAAgB,WAAWA,cAAcK;oCACnE7E,OAAO+B,OAAOiD,OAAO,MAAM7E;oCAC3BC,qBAAqBA;oCACrB6E,OAAOlD,OAAOmD,SAAS,CAACC,IAAI,EAAEF;oCAC9BG,SAAQ;oCACRlF,SAASA;oCACTmF,aAAatD,OAAOmD,SAAS,CAACC,IAAI,EAAEG;oCACpCC,YAAY5D,cAAc0C;oCAC1BmB,gBAAgB,IAAMlE,YAAYmE,WAAW,CAACpB;oCAC9CqB,eAAetB,MAAM;oCACrBuB,cAAcvB,MAAM1D,QAAQe,MAAM,GAAG;8CAEpC1C,WAAWgD,OAAOmD,SAAS,CAACf,MAAM,EAAEA,OAAOyB,UAAU;mCAfjDzB,OAAOvB,EAAE;4BAkBpB;2BA/BasB,YAAYtB,EAAE;oBAkCjC;;YAGN;YACAiD,oBACEjF,aACI,kBACE,KAACzB;oBAAY2G,IAAI;wBAAEC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;oBAAC;8BAC9E,cAAA,KAAClH;wBACCmH,SAAS3F,QAAQgB,MAAM;wBACvB4E,OAAOvF;wBACPwF,MAAM1F,WAAWwC,SAAS;wBAC1BmD,aAAa3F,WAAW2C,QAAQ;wBAChCiD,cAAcvD;wBACdwD,qBAAqBpD;;qBAI3BwB;YAEN6B,aAAa,CAAChE;gBACZ,MAAMb,MAAMrB,IAAI,CAACkC,MAAM;gBACvB,IAAI,CAACb,KAAK;oBACR,OAAO;gBACT;gBAEA,qBACE;8BACGA,IAAI8E,eAAe,GAAG1C,GAAG,CAAC,CAAC2C,MAAMxC,GAAGyC;wBACnC,MAAMxC,WAA8B;4BAClCxC,KAAKa,QAAQ;4BACbX,QAAQqC;wBACV;wBAEA,MAAM0C,cAAcF,KAAKhB,UAAU;wBACnC,MAAMmB,aAAapG,aAAa,CAACmG,YAAYF,IAAI,CAAChE,EAAE,CAAC;wBAErD,MAAMoE,eAAeJ,KAAK7E,MAAM,CAACmD,SAAS,CAAC0B,IAAI;wBAC/C,MAAMK,cAAc,OAAOD,iBAAiB,aAAaA,aAAaF,eAAe;wBAErF;;;;;;gBAMA,GAEA,MAAMI,qBAAqBN,KAAK7E,MAAM,CAACmD,SAAS,CAACC,IAAI,EAAEgC;wBACvD,IAAI9B,cAAkCR;wBACtC,IAAI,OAAOqC,uBAAuB,YAAY;4BAC5C,6DAA6D;4BAC7D,gBAAgB;4BAChB7B,cAAc6B,mBAAmBJ;wBACnC,OAAO,IAAII,sBAAsB,OAAOD,gBAAgB,UAAU;4BAChE,4DAA4D;4BAC5D,6DAA6D;4BAC7D,gBAAgB;4BAChB5B,cAAc4B;wBAChB;wBAEA;;gBAEA,GACA,MAAMG,yBAAyBC,OAAOC,OAAO,CAACzF,IAAI0F,QAAQ,GACtDC,OAAO,CAAC,CAACC,GAAG/D,MAAM,GAAK;gCAAC;gCAAU;6BAAS,CAACgE,QAAQ,CAAC,OAAOhE,QAC7DiE,OACC,CAACC,KAAK,CAACC,KAAKnE,MAAM,GAAM,CAAA;gCACtB,GAAGkE,GAAG;gCACN,CAACC,IAAI,EAAEC,OAAOpE;4BAChB,CAAA,GACA,CAAC;wBAGL,qBACE,KAAC/D;4BAECoI,eAAanB,KAAKhE,EAAE;4BACpBoF,OAAO3C,eAAe0B,YAAYkB,QAAQhB;4BAC1CjH,OAAO4G,KAAK7E,MAAM,CAACiD,OAAO,MAAM7E;4BAChCC,qBAAqBA;4BACrB6E,OAAO2B,KAAK7E,MAAM,CAACmD,SAAS,CAACC,IAAI,EAAEF;4BACnC/E,SAASA;4BACTqF,YAAY5D,cAAc0C;4BAC1BmB,gBAAgB,IAAMlE,YAAYmE,WAAW,CAACpB;4BAC9CqB,eAAetB,MAAM;4BACrBuB,cAAcvB,MAAMyC,MAAMpF,MAAM,GAAG;4BACnC4D,aAAaA;4BACb6C,OAAOnB,YAAYoB,aAAatD;4BAChCkB,iBAAiBgB,YAAYhB,mBAAmBlB;4BAChDuD,UAAUxB,KAAK7E,MAAM,CAACmD,SAAS,CAACC,IAAI,EAAEiD;4BACtChB,wBAAwBA;sCAEvBL,YAAYkB,QAAQhB;2BAjBhBL,KAAKhE,EAAE;oBAoBlB;;YAGN;;;AAIR"}

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

@@ -1,4 +1,4 @@
-import { KeyboardEventHandler } from 'react';
+import { FocusEventHandler, KeyboardEventHandler } from 'react';
 export interface UseTableKeyboardNavProps {
     maxRows: number;
     maxColumns: number;
@@ -27,6 +27,7 @@ export declare function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellC
     isActive: boolean;
     onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;
     onCellFocus: (cellPosition: TableCellPosition) => void;
+    onTableBlur: FocusEventHandler<HTMLTableElement>;
 };
 export {};
 //# sourceMappingURL=useTableKeyboardNav.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAyB,MAAM,OAAO,CAAC;AAEpE,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CACnB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,KACjD,iBAAiB,GAAG,SAAS,CAAC;CACpC;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,wBAAwB,GAAG;IAC1G,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACxD,CAqEA"}
+{"version":3,"file":"useTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAyB,MAAM,OAAO,CAAC;AAEvF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,kBAAkB,CAAC,EAAE,CACnB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,EACxC,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,iBAAiB,GAAG,SAAS,KACjD,iBAAiB,GAAG,SAAS,CAAC;CACpC;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,EAAE,wBAAwB,GAAG;IAC1G,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAClD,CA6EA"}

package/dist/Table/hooks/useTableKeyboardNav.js

@@ -87,11 +87,18 @@ function isArrowKey(key) {
         maxRows,
         onActiveCellChange
     ]);
+    const handleTableBlur = useCallback((e)=>{
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsActive(false);
+            setActiveCell(DEFAULT_ACTIVE_CELL);
+        }
+    }, []);
     return {
         activeCell,
         isActive,
         onTableKeyDown: handleKeyDown,
-        onCellFocus: handleCellFocus
+        onCellFocus: handleCellFocus,
+        onTableBlur: handleTableBlur
     };
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.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 { KeyboardEventHandler, useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n  maxRows: number;\n  maxColumns: number;\n\n  /**\n   * Function used to modify the active table cell based on the keyboard event,\n   * the current position, and the default recommended next position (this value\n   * will be `undefined` in cases where there is no default handler like `PageUp`\n   * and `PageDown`). This can be used to modify the next position that will be\n   * used and/or to handle side effects related to the new position (e.g.\n   * pagination, scrolling the active cell into view).\n   */\n  onActiveCellChange?: (\n    e: React.KeyboardEvent<HTMLTableElement>,\n    currentActiveCell: TableCellPosition,\n    defaultNextActiveCell: TableCellPosition | undefined\n  ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n  row: 0,\n  column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string): boolean {\n  return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n  activeCell: TableCellPosition;\n  isActive: boolean;\n  onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n  onCellFocus: (cellPosition: TableCellPosition) => void;\n} {\n  const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n  const [isActive, setIsActive] = useState(false);\n\n  const handleCellFocus = (cellPosition: TableCellPosition): void => {\n    if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n      return;\n    }\n    setIsActive(true);\n    setActiveCell(cellPosition);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n    (e) => {\n      // Including some of the basic a11y keyboard interaction patterns from:\n      // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n      // TODO: add other keyboard combos.\n      const key = e.key;\n\n      if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n        setActiveCell((curActiveCell) => {\n          let nextRow: number = curActiveCell.row;\n          let nextColumn: number = curActiveCell.column;\n\n          if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n            e.preventDefault();\n            nextColumn += 1;\n          } else if (key === 'ArrowLeft' && nextColumn > 0) {\n            e.preventDefault();\n            nextColumn -= 1;\n          } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n            e.preventDefault();\n            nextRow += 1;\n          } else if (key === 'ArrowUp' && nextRow > 0) {\n            e.preventDefault();\n            nextRow -= 1;\n          } else if (key === 'Home') {\n            e.preventDefault();\n            nextRow = 0;\n            nextColumn = 0;\n          } else if (key === 'End') {\n            e.preventDefault();\n            nextRow = maxRows - 1;\n            nextColumn = maxColumns - 1;\n          }\n\n          const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n          const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n          if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n            // Return original to avoid creating a new object if nothing\n            // changed.\n            return curActiveCell;\n          }\n\n          return newPosition;\n        });\n      }\n    },\n    [maxColumns, maxRows, onActiveCellChange]\n  );\n\n  return {\n    activeCell,\n    isActive,\n    onTableKeyDown: handleKeyDown,\n    onCellFocus: handleCellFocus,\n  };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","onTableKeyDown","onCellFocus"],"mappings":"AAAA,+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,SAA+BA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0BpE,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,QAAQ,CAACD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IAMvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,MAAM,KAAKS,WAAWT,MAAM,IAAIc,aAAaf,GAAG,KAAKU,WAAWV,GAAG,IAAIY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB,GAAG;gBACvC,IAAIoB,aAAqBF,cAAcjB,MAAM;gBAE7C,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,qBAAqBQ,GAAGC,eAAeI,uBAAuBA;gBAElF,IAAIC,YAAYvB,GAAG,KAAKkB,cAAclB,GAAG,IAAIuB,YAAYtB,MAAM,KAAKiB,cAAcjB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,OAAO;QACLC;QACAE;QACAY,gBAAgBR;QAChBS,aAAaX;IACf;AACF"}
+{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.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 { FocusEventHandler, KeyboardEventHandler, useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n  maxRows: number;\n  maxColumns: number;\n\n  /**\n   * Function used to modify the active table cell based on the keyboard event,\n   * the current position, and the default recommended next position (this value\n   * will be `undefined` in cases where there is no default handler like `PageUp`\n   * and `PageDown`). This can be used to modify the next position that will be\n   * used and/or to handle side effects related to the new position (e.g.\n   * pagination, scrolling the active cell into view).\n   */\n  onActiveCellChange?: (\n    e: React.KeyboardEvent<HTMLTableElement>,\n    currentActiveCell: TableCellPosition,\n    defaultNextActiveCell: TableCellPosition | undefined\n  ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n  row: 0,\n  column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string): boolean {\n  return ARROW_KEYS.includes(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n  activeCell: TableCellPosition;\n  isActive: boolean;\n  onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n  onCellFocus: (cellPosition: TableCellPosition) => void;\n  onTableBlur: FocusEventHandler<HTMLTableElement>;\n} {\n  const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n  const [isActive, setIsActive] = useState(false);\n\n  const handleCellFocus = (cellPosition: TableCellPosition): void => {\n    if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n      return;\n    }\n    setIsActive(true);\n    setActiveCell(cellPosition);\n  };\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n    (e) => {\n      // Including some of the basic a11y keyboard interaction patterns from:\n      // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n      // TODO: add other keyboard combos.\n      const key = e.key;\n\n      if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n        setActiveCell((curActiveCell) => {\n          let nextRow: number = curActiveCell.row;\n          let nextColumn: number = curActiveCell.column;\n\n          if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n            e.preventDefault();\n            nextColumn += 1;\n          } else if (key === 'ArrowLeft' && nextColumn > 0) {\n            e.preventDefault();\n            nextColumn -= 1;\n          } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n            e.preventDefault();\n            nextRow += 1;\n          } else if (key === 'ArrowUp' && nextRow > 0) {\n            e.preventDefault();\n            nextRow -= 1;\n          } else if (key === 'Home') {\n            e.preventDefault();\n            nextRow = 0;\n            nextColumn = 0;\n          } else if (key === 'End') {\n            e.preventDefault();\n            nextRow = maxRows - 1;\n            nextColumn = maxColumns - 1;\n          }\n\n          const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n          const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n          if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n            // Return original to avoid creating a new object if nothing\n            // changed.\n            return curActiveCell;\n          }\n\n          return newPosition;\n        });\n      }\n    },\n    [maxColumns, maxRows, onActiveCellChange]\n  );\n\n  const handleTableBlur: FocusEventHandler<HTMLTableElement> = useCallback((e) => {\n    if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n      setIsActive(false);\n      setActiveCell(DEFAULT_ACTIVE_CELL);\n    }\n  }, []);\n\n  return {\n    activeCell,\n    isActive,\n    onTableKeyDown: handleKeyDown,\n    onCellFocus: handleCellFocus,\n    onTableBlur: handleTableBlur,\n  };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","isArrowKey","key","includes","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","handleTableBlur","currentTarget","contains","relatedTarget","onTableKeyDown","onCellFocus","onTableBlur"],"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,SAAkDA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0BvF,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa;IAAC;IAAc;IAAa;IAAW;CAAY;AAEtE,SAASC,WAAWC,GAAW;IAC7B,OAAOF,WAAWG,QAAQ,CAACD;AAC7B;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IAOvG,MAAM,CAACC,YAAYC,cAAc,GAAGb,SAA4BC;IAChE,MAAM,CAACa,UAAUC,YAAY,GAAGf,SAAS;IAEzC,MAAMgB,kBAAkB,CAACC;QACvB,IAAIA,aAAad,MAAM,KAAKS,WAAWT,MAAM,IAAIc,aAAaf,GAAG,KAAKU,WAAWV,GAAG,IAAIY,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DnB,YAClE,CAACoB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAclB,GAAG;gBACvC,IAAIoB,aAAqBF,cAAcjB,MAAM;gBAE7C,IAAIG,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAErB,QAAQmB;oBAAYpB,KAAKmB;gBAAQ;gBAE9D,MAAMI,cAAcd,qBAAqBQ,GAAGC,eAAeI,uBAAuBA;gBAElF,IAAIC,YAAYvB,GAAG,KAAKkB,cAAclB,GAAG,IAAIuB,YAAYtB,MAAM,KAAKiB,cAAcjB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOiB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,MAAMe,kBAAuD3B,YAAY,CAACoB;QACxE,IAAI,CAACA,EAAEQ,aAAa,CAACC,QAAQ,CAACT,EAAEU,aAAa,GAAW;YACtDd,YAAY;YACZF,cAAcZ;QAChB;IACF,GAAG,EAAE;IAEL,OAAO;QACLW;QACAE;QACAgB,gBAAgBZ;QAChBa,aAAaf;QACbgB,aAAaN;IACf;AACF"}

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

@@ -1,5 +1,5 @@
 import { TableVirtuosoHandle } from 'react-virtuoso';
-import { KeyboardEventHandler, MutableRefObject, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MutableRefObject, RefObject } from 'react';
 import { UseTableKeyboardNavProps } from './useTableKeyboardNav';
 interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {
     visibleRange: MutableRefObject<{
@@ -22,6 +22,7 @@ export declare function useVirtualizedTableKeyboardNav({ visibleRange, virtualTa
     isActive: boolean;
     onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;
     onCellFocus: (cellPosition: TableCellPosition) => void;
+    onTableBlur: FocusEventHandler<HTMLTableElement>;
 };
 export {};
 //# sourceMappingURL=useVirtualizedTableKeyboardNav.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,gBAAgB,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC,GAAG;IACvC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACxD,CA4EA"}
+{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAuB,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAEtF,UAAU,mCAAoC,SAAQ,IAAI,CAAC,wBAAwB,EAAE,oBAAoB,CAAC;IACxG,YAAY,EAAE,gBAAgB,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC,CAAC;IACH,YAAY,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,iBAAiB,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,wBAAgB,8BAA8B,CAAC,EAC7C,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,UAAU,GACX,EAAE,mCAAmC,GAAG;IACvC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,oBAAoB,CAAC,gBAAgB,CAAC,CAAC;IACvD,WAAW,EAAE,CAAC,YAAY,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAClD,CA4EA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.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 { TableVirtuosoHandle } from 'react-virtuoso';\nimport { KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n  visibleRange: MutableRefObject<{\n    startIndex: number;\n    endIndex: number;\n  }>;\n  virtualTable: RefObject<TableVirtuosoHandle>;\n  maxRows: number;\n  maxColumns: number;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n  visibleRange,\n  virtualTable,\n  maxRows,\n  maxColumns,\n}: UseVirtualizedTableKeyboardNavProps): {\n  activeCell: TableCellPosition;\n  isActive: boolean;\n  onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n  onCellFocus: (cellPosition: TableCellPosition) => void;\n} {\n  const baseKeyboard = useTableKeyboardNav({\n    maxRows,\n    maxColumns,\n    onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n      const key = e.key;\n\n      const defaultValueChanged =\n        defaultNewPosition &&\n        (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n      const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n      if (key === 'ArrowDown' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'end',\n          });\n        }\n      } else if (key === 'ArrowUp' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'start',\n          });\n        }\n      } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        virtualTable.current?.scrollToIndex({\n          index: Math.max(nextRow - 1, 0),\n          align: 'start',\n        });\n      } else if (key === 'PageDown') {\n        // Full handling of logic for `PageDown` because there is no default.\n        e.preventDefault();\n\n        let nextRow = currentPosition.row;\n        // Add 1 to account for header\n\n        nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'start',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      } else if (key === 'PageUp') {\n        // Full handling of logic for `PageUp` because there is no default.\n        let nextRow = currentPosition.row;\n        // Minus 1 to account for header\n        nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'end',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      }\n\n      return defaultNewPosition;\n    },\n  });\n\n  return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"AAAA,+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;AAIjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAiBtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IAMpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG,GAAG;YAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;YACxG,MAAMC,UAAUL,oBAAoBI,OAAOL,gBAAgBK,GAAG;YAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;gBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;gBAC7B,qEAAqE;gBACrEH,EAAEgB,cAAc;gBAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;gBACjC,8BAA8B;gBAE9BC,UAAUO,KAAKG,GAAG,CAACrB,UAAU,GAAGF,aAAac,OAAO,CAACE,QAAQ,GAAG;gBAEhEf,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF,OAAO,IAAIF,QAAQ,UAAU;gBAC3B,mEAAmE;gBACnE,IAAII,UAAUN,gBAAgBK,GAAG;gBACjC,gCAAgC;gBAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGrB,aAAac,OAAO,CAACC,UAAU,GAAG;gBACxDd,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}
+{"version":3,"sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.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 { TableVirtuosoHandle } from 'react-virtuoso';\nimport { FocusEventHandler, KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport { useTableKeyboardNav, UseTableKeyboardNavProps } from './useTableKeyboardNav';\n\ninterface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {\n  visibleRange: MutableRefObject<{\n    startIndex: number;\n    endIndex: number;\n  }>;\n  virtualTable: RefObject<TableVirtuosoHandle>;\n  maxRows: number;\n  maxColumns: number;\n}\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\n/**\n * Hook for managing keyboard navigation when using a virtualized table.\n */\nexport function useVirtualizedTableKeyboardNav({\n  visibleRange,\n  virtualTable,\n  maxRows,\n  maxColumns,\n}: UseVirtualizedTableKeyboardNavProps): {\n  activeCell: TableCellPosition;\n  isActive: boolean;\n  onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n  onCellFocus: (cellPosition: TableCellPosition) => void;\n  onTableBlur: FocusEventHandler<HTMLTableElement>;\n} {\n  const baseKeyboard = useTableKeyboardNav({\n    maxRows,\n    maxColumns,\n    onActiveCellChange: (e, currentPosition, defaultNewPosition) => {\n      const key = e.key;\n\n      const defaultValueChanged =\n        defaultNewPosition &&\n        (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);\n      const nextRow = defaultNewPosition?.row ?? currentPosition.row;\n\n      if (key === 'ArrowDown' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'end',\n          });\n        }\n      } else if (key === 'ArrowUp' && defaultValueChanged) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {\n          virtualTable.current?.scrollToIndex({\n            index: nextRow - 1,\n            align: 'start',\n          });\n        }\n      } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {\n        // Use default cell position. Shift the virtual table scroll position\n        // when needed to make the active cell visible.\n        virtualTable.current?.scrollToIndex({\n          index: Math.max(nextRow - 1, 0),\n          align: 'start',\n        });\n      } else if (key === 'PageDown') {\n        // Full handling of logic for `PageDown` because there is no default.\n        e.preventDefault();\n\n        let nextRow = currentPosition.row;\n        // Add 1 to account for header\n\n        nextRow = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);\n\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'start',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      } else if (key === 'PageUp') {\n        // Full handling of logic for `PageUp` because there is no default.\n        let nextRow = currentPosition.row;\n        // Minus 1 to account for header\n        nextRow = Math.max(0, visibleRange.current.startIndex - 1);\n        virtualTable.current?.scrollToIndex({\n          index: nextRow - 1,\n          align: 'end',\n        });\n\n        return {\n          row: nextRow,\n          column: currentPosition.column,\n        };\n      }\n\n      return defaultNewPosition;\n    },\n  });\n\n  return baseKeyboard;\n}\n"],"names":["useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","baseKeyboard","onActiveCellChange","e","currentPosition","defaultNewPosition","key","defaultValueChanged","column","row","nextRow","current","startIndex","endIndex","scrollToIndex","index","align","Math","max","preventDefault","min"],"mappings":"AAAA,+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;AAIjC,SAASA,mBAAmB,QAAkC,wBAAwB;AAiBtF;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IAOpC,MAAMC,eAAeN,oBAAoB;QACvCI;QACAC;QACAE,oBAAoB,CAACC,GAAGC,iBAAiBC;YACvC,MAAMC,MAAMH,EAAEG,GAAG;YAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;YACxG,MAAMC,UAAUL,oBAAoBI,OAAOL,gBAAgBK,GAAG;YAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;gBAC9C,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;gBACnD,qEAAqE;gBACrE,+CAA+C;gBAC/C,IAAIG,UAAU,IAAIb,aAAac,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIb,aAAac,OAAO,CAACE,QAAQ,EAAE;oBAChGf,aAAaa,OAAO,EAAEG,cAAc;wBAClCC,OAAOL,UAAU;wBACjBM,OAAO;oBACT;gBACF;YACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;gBACnE,qEAAqE;gBACrE,+CAA+C;gBAC/CR,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;oBAC7BM,OAAO;gBACT;YACF,OAAO,IAAIV,QAAQ,YAAY;gBAC7B,qEAAqE;gBACrEH,EAAEgB,cAAc;gBAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;gBACjC,8BAA8B;gBAE9BC,UAAUO,KAAKG,GAAG,CAACrB,UAAU,GAAGF,aAAac,OAAO,CAACE,QAAQ,GAAG;gBAEhEf,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF,OAAO,IAAIF,QAAQ,UAAU;gBAC3B,mEAAmE;gBACnE,IAAII,UAAUN,gBAAgBK,GAAG;gBACjC,gCAAgC;gBAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGrB,aAAac,OAAO,CAACC,UAAU,GAAG;gBACxDd,aAAaa,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;gBAEA,OAAO;oBACLP,KAAKC;oBACLF,QAAQJ,gBAAgBI,MAAM;gBAChC;YACF;YAEA,OAAOH;QACT;IACF;IAEA,OAAOJ;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAA+B,MAAM,OAAO,CAAC;AAKzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,QAAQ,EACR,WAAW,EACX,kBAAkB,GACnB,EAAE,qBAAqB,GAAG,YAAY,CA4LtC"}
+{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACjD,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAID,wBAAgB,gBAAgB,CAAC,EAC/B,UAAU,EACV,QAAQ,EACR,WAAW,EACX,kBAAkB,GACnB,EAAE,qBAAqB,GAAG,YAAY,CA0LtC"}

package/dist/ThresholdsEditor/ThresholdsEditor.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { produce } from 'immer';
 import { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
 import PlusIcon from 'mdi-material-ui/Plus';
@@ -26,12 +26,7 @@ export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePer
     const chartsTheme = useChartsTheme();
     const { thresholds: { defaultColor, palette } } = chartsTheme;
     const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;
-    const [steps, setSteps] = useState(thresholds?.steps);
-    useEffect(()=>{
-        setSteps(thresholds?.steps);
-    }, [
-        thresholds?.steps
-    ]);
+    const steps = thresholds?.steps;
     // every time a new threshold is added, we want to focus the recently added input
     const recentlyAddedInputRef = useRef(null);
     const focusRef = useRef(false);
@@ -43,12 +38,14 @@ export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePer
         steps?.length
     ]);
     const handleThresholdValueChange = (e, i)=>{
-        setSteps(produce(steps, (draft)=>{
-            const step = draft?.[i];
-            if (step) {
-                step.value = Number(e.target.value);
-            }
-        }));
+        if (thresholds !== undefined) {
+            onChange(produce(thresholds, (draft)=>{
+                const step = draft.steps?.[i];
+                if (step) {
+                    step.value = Number(e.target.value);
+                }
+            }));
+        }
     };
     const handleThresholdColorChange = (color, i)=>{
         if (thresholds !== undefined) {

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 React, { ReactElement, useEffect, useRef, useState } from 'react';\nimport { produce } from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\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, setSteps] = useState(thresholds?.steps);\n  useEffect(() => {\n    setSteps(thresholds?.steps);\n  }, [thresholds?.steps]);\n\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    setSteps(\n      produce(steps, (draft) => {\n        const step = draft?.[i];\n        if (step) {\n          step.value = Number(e.target.value);\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          .reverse()}\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":["React","useEffect","useRef","useState","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","OptionsColorPicker","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","setSteps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","draft","step","value","Number","target","handleThresholdColorChange","color","undefined","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","reverse","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 React, { ReactElement, useEffect, useRef } from 'react';\nimport { produce } from 'immer';\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { Stack } from '@mui/system';\nimport { ThresholdOptions } from '@perses-dev/core';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\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          .reverse()}\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":["React","useEffect","useRef","produce","IconButton","ToggleButton","ToggleButtonGroup","Typography","PlusIcon","Stack","useChartsTheme","OptionsEditorControl","OptionsEditorGroup","InfoTooltip","OptionsColorPicker","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","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAIxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAMD;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wDAK7B,qBAAqB,KAAG,YAsJ1B,CAAC"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wDAK7B,qBAAqB,KAAG,YAsJ1B,CAAC"}

package/dist/TimeRangeSelector/DateTimeRangePicker.js

@@ -11,13 +11,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import { Box, Stack, Typography, Button } from '@mui/material';
 import { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { TZDate } from '@date-fns/tz';
 import { ErrorBoundary } from '../ErrorBoundary';
 import { ErrorAlert } from '../ErrorAlert';
-import { formatWithTimeZone } from '../utils/format';
 import { DATE_TIME_FORMAT, validateDateRange } from './utils';
 /**
  * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.
@@ -28,18 +28,11 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
  * @param onCancel event received when user click on cancel
  * @constructor
  */ export const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
-    // Time range values as dates that can be used as a time range.
+    const stdTimeZone = [
+        'local',
+        'browser'
+    ].includes(timeZone.toLowerCase()) ? Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
     const [timeRange, setTimeRange] = useState(initialTimeRange);
-    const timeRangeInputs = useMemo(()=>{
-        return {
-            start: formatWithTimeZone(timeRange.start, DATE_TIME_FORMAT, timeZone),
-            end: formatWithTimeZone(timeRange.end, DATE_TIME_FORMAT, timeZone)
-        };
-    }, [
-        timeRange.start,
-        timeRange.end,
-        timeZone
-    ]);
     const [showStartCalendar, setShowStartCalendar] = useState(true);
     const changeTimeRange = (newTime, segment)=>{
         setTimeRange((prevTimeRange)=>{
@@ -94,10 +87,11 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
                             children: "Select Start Time"
                         }),
                         /*#__PURE__*/ _jsx(StaticDateTimePicker, {
+                            timezone: stdTimeZone,
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
-                            value: timeRange.start,
+                            value: new TZDate(timeRange.start, stdTimeZone),
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
                                 onChangeStartTime(newValue);
@@ -122,11 +116,12 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
                             children: "Select End Time"
                         }),
                         /*#__PURE__*/ _jsx(StaticDateTimePicker, {
+                            timezone: stdTimeZone,
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
-                            value: timeRange.end,
-                            minDateTime: timeRange.start,
+                            value: new TZDate(timeRange.end, stdTimeZone),
+                            minDateTime: new TZDate(timeRange.start, stdTimeZone),
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
                                 onChangeEndTime(newValue);
@@ -149,8 +144,9 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(DateTimeField, {
+                                timezone: stdTimeZone,
                                 label: "Start Time",
-                                value: new Date(timeRangeInputs.start),
+                                value: new TZDate(timeRange.start, stdTimeZone),
                                 onChange: (event)=>{
                                     if (event) {
                                         onChangeStartTime(event);
@@ -163,8 +159,9 @@ import { DATE_TIME_FORMAT, validateDateRange } from './utils';
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(DateTimeField, {
+                                timezone: stdTimeZone,
                                 label: "End Time",
-                                value: new Date(timeRangeInputs.end),
+                                value: new TZDate(timeRange.end, stdTimeZone),
                                 onChange: (event)=>{
                                     if (event) {
                                         onChangeEndTime(event);

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 { ReactElement, useMemo, useState } from 'react';\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 { AbsoluteTimeRange } from '@perses-dev/core';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { ErrorAlert } from '../ErrorAlert';\nimport { formatWithTimeZone } from '../utils/format';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: string;\n}\n\ntype AbsoluteTimeRangeInputValue = {\n  [Property in keyof AbsoluteTimeRange]: 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  // Time range values as dates that can be used as a time range.\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const timeRangeInputs = useMemo<AbsoluteTimeRangeInputValue>(() => {\n    return {\n      start: formatWithTimeZone(timeRange.start, DATE_TIME_FORMAT, timeZone),\n      end: formatWithTimeZone(timeRange.end, DATE_TIME_FORMAT, timeZone),\n    };\n  }, [timeRange.start, timeRange.end, timeZone]);\n\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              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={timeRange.start}\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              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={timeRange.end}\n              minDateTime={timeRange.start}\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              label=\"Start Time\"\n              value={new Date(timeRangeInputs.start)}\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              label=\"End Time\"\n              value={new Date(timeRangeInputs.end)}\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":["useMemo","useState","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","ErrorBoundary","ErrorAlert","formatWithTimeZone","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","timeZone","timeRange","setTimeRange","timeRangeInputs","start","end","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","label","Date","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 { ReactElement, useState } from 'react';\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 { AbsoluteTimeRange } from '@perses-dev/core';\nimport { TZDate } from '@date-fns/tz';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { ErrorAlert } from '../ErrorAlert';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\ninterface 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\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              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              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":["useState","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","TZDate","ErrorBoundary","ErrorAlert","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","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}

package/dist/TimeZoneSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2026 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/TimeZoneSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TimeZoneSelector.tsx"],"sourcesContent":["// Copyright 2026 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 { ReactElement, ReactNode, useMemo } from 'react';\nimport { Select, MenuItem, SelectProps, SelectChangeEvent } from '@mui/material';\nimport { TimeZoneOption, getTimeZoneOptions } from './model/timeZoneOption';\n\nexport interface TimeZoneSelectorProps extends Omit<SelectProps, 'onChange' | 'variant' | 'value'> {\n  value: string;\n  onChange?: (timeZoneOption: TimeZoneOption) => void;\n  timeZoneOptions?: TimeZoneOption[];\n  variant?: 'standard' | 'compact';\n  heightPx?: string | number;\n}\n\n/**\n * Timezone selector component\n * Allows users to select a timezone from a dropdown list\n */\nexport function TimeZoneSelector({\n  value,\n  onChange,\n  timeZoneOptions,\n  variant = 'standard',\n  heightPx,\n  ...selectProps\n}: TimeZoneSelectorProps): ReactElement {\n  const options = useMemo(() => timeZoneOptions ?? getTimeZoneOptions(), [timeZoneOptions]);\n\n  const height = heightPx ? (typeof heightPx === 'number' ? `${heightPx}px` : heightPx) : undefined;\n\n  const handleChange = (selectedValue: string): void => {\n    const selectedOption = options.find((opt: TimeZoneOption) => opt.value === selectedValue);\n    if (selectedOption && onChange) {\n      onChange(selectedOption);\n    }\n  };\n\n  const sxStyles = useMemo(\n    () => ({\n      minWidth: variant === 'compact' ? '80px' : '150px',\n      ...(height && { lineHeight: height, paddingY: 0 }),\n      ...selectProps.sx,\n    }),\n    [variant, height, selectProps.sx]\n  );\n\n  return (\n    <Select\n      {...selectProps}\n      value={value}\n      onChange={(event: SelectChangeEvent<unknown>, _child: ReactNode) => {\n        handleChange(event.target.value as string);\n      }}\n      sx={sxStyles}\n      size={variant === 'compact' ? 'small' : 'medium'}\n    >\n      {options.map((option: TimeZoneOption) => (\n        <MenuItem key={option.value} value={option.value}>\n          {option.display}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n"],"names":["useMemo","Select","MenuItem","getTimeZoneOptions","TimeZoneSelector","value","onChange","timeZoneOptions","variant","heightPx","selectProps","options","height","undefined","handleChange","selectedValue","selectedOption","find","opt","sxStyles","minWidth","lineHeight","paddingY","sx","event","_child","target","size","map","option","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAkCA,OAAO,QAAQ,QAAQ;AACzD,SAASC,MAAM,EAAEC,QAAQ,QAAwC,gBAAgB;AACjF,SAAyBC,kBAAkB,QAAQ,yBAAyB;AAU5E;;;CAGC,GACD,OAAO,SAASC,iBAAiB,EAC/BC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,UAAU,UAAU,EACpBC,QAAQ,EACR,GAAGC,aACmB;IACtB,MAAMC,UAAUX,QAAQ,IAAMO,mBAAmBJ,sBAAsB;QAACI;KAAgB;IAExF,MAAMK,SAASH,WAAY,OAAOA,aAAa,WAAW,GAAGA,SAAS,EAAE,CAAC,GAAGA,WAAYI;IAExF,MAAMC,eAAe,CAACC;QACpB,MAAMC,iBAAiBL,QAAQM,IAAI,CAAC,CAACC,MAAwBA,IAAIb,KAAK,KAAKU;QAC3E,IAAIC,kBAAkBV,UAAU;YAC9BA,SAASU;QACX;IACF;IAEA,MAAMG,WAAWnB,QACf,IAAO,CAAA;YACLoB,UAAUZ,YAAY,YAAY,SAAS;YAC3C,GAAII,UAAU;gBAAES,YAAYT;gBAAQU,UAAU;YAAE,CAAC;YACjD,GAAGZ,YAAYa,EAAE;QACnB,CAAA,GACA;QAACf;QAASI;QAAQF,YAAYa,EAAE;KAAC;IAGnC,qBACE,KAACtB;QACE,GAAGS,WAAW;QACfL,OAAOA;QACPC,UAAU,CAACkB,OAAmCC;YAC5CX,aAAaU,MAAME,MAAM,CAACrB,KAAK;QACjC;QACAkB,IAAIJ;QACJQ,MAAMnB,YAAY,YAAY,UAAU;kBAEvCG,QAAQiB,GAAG,CAAC,CAACC,uBACZ,KAAC3B;gBAA4BG,OAAOwB,OAAOxB,KAAK;0BAC7CwB,OAAOC,OAAO;eADFD,OAAOxB,KAAK;;AAMnC"}
+{"version":3,"sources":["../src/TimeZoneSelector.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 { ReactElement, ReactNode, useMemo } from 'react';\nimport { Select, MenuItem, SelectProps, SelectChangeEvent } from '@mui/material';\nimport { TimeZoneOption, getTimeZoneOptions } from './model/timeZoneOption';\n\nexport interface TimeZoneSelectorProps extends Omit<SelectProps, 'onChange' | 'variant' | 'value'> {\n  value: string;\n  onChange?: (timeZoneOption: TimeZoneOption) => void;\n  timeZoneOptions?: TimeZoneOption[];\n  variant?: 'standard' | 'compact';\n  heightPx?: string | number;\n}\n\n/**\n * Timezone selector component\n * Allows users to select a timezone from a dropdown list\n */\nexport function TimeZoneSelector({\n  value,\n  onChange,\n  timeZoneOptions,\n  variant = 'standard',\n  heightPx,\n  ...selectProps\n}: TimeZoneSelectorProps): ReactElement {\n  const options = useMemo(() => timeZoneOptions ?? getTimeZoneOptions(), [timeZoneOptions]);\n\n  const height = heightPx ? (typeof heightPx === 'number' ? `${heightPx}px` : heightPx) : undefined;\n\n  const handleChange = (selectedValue: string): void => {\n    const selectedOption = options.find((opt: TimeZoneOption) => opt.value === selectedValue);\n    if (selectedOption && onChange) {\n      onChange(selectedOption);\n    }\n  };\n\n  const sxStyles = useMemo(\n    () => ({\n      minWidth: variant === 'compact' ? '80px' : '150px',\n      ...(height && { lineHeight: height, paddingY: 0 }),\n      ...selectProps.sx,\n    }),\n    [variant, height, selectProps.sx]\n  );\n\n  return (\n    <Select\n      {...selectProps}\n      value={value}\n      onChange={(event: SelectChangeEvent<unknown>, _child: ReactNode) => {\n        handleChange(event.target.value as string);\n      }}\n      sx={sxStyles}\n      size={variant === 'compact' ? 'small' : 'medium'}\n    >\n      {options.map((option: TimeZoneOption) => (\n        <MenuItem key={option.value} value={option.value}>\n          {option.display}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n"],"names":["useMemo","Select","MenuItem","getTimeZoneOptions","TimeZoneSelector","value","onChange","timeZoneOptions","variant","heightPx","selectProps","options","height","undefined","handleChange","selectedValue","selectedOption","find","opt","sxStyles","minWidth","lineHeight","paddingY","sx","event","_child","target","size","map","option","display"],"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,SAAkCA,OAAO,QAAQ,QAAQ;AACzD,SAASC,MAAM,EAAEC,QAAQ,QAAwC,gBAAgB;AACjF,SAAyBC,kBAAkB,QAAQ,yBAAyB;AAU5E;;;CAGC,GACD,OAAO,SAASC,iBAAiB,EAC/BC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACfC,UAAU,UAAU,EACpBC,QAAQ,EACR,GAAGC,aACmB;IACtB,MAAMC,UAAUX,QAAQ,IAAMO,mBAAmBJ,sBAAsB;QAACI;KAAgB;IAExF,MAAMK,SAASH,WAAY,OAAOA,aAAa,WAAW,GAAGA,SAAS,EAAE,CAAC,GAAGA,WAAYI;IAExF,MAAMC,eAAe,CAACC;QACpB,MAAMC,iBAAiBL,QAAQM,IAAI,CAAC,CAACC,MAAwBA,IAAIb,KAAK,KAAKU;QAC3E,IAAIC,kBAAkBV,UAAU;YAC9BA,SAASU;QACX;IACF;IAEA,MAAMG,WAAWnB,QACf,IAAO,CAAA;YACLoB,UAAUZ,YAAY,YAAY,SAAS;YAC3C,GAAII,UAAU;gBAAES,YAAYT;gBAAQU,UAAU;YAAE,CAAC;YACjD,GAAGZ,YAAYa,EAAE;QACnB,CAAA,GACA;QAACf;QAASI;QAAQF,YAAYa,EAAE;KAAC;IAGnC,qBACE,KAACtB;QACE,GAAGS,WAAW;QACfL,OAAOA;QACPC,UAAU,CAACkB,OAAmCC;YAC5CX,aAAaU,MAAME,MAAM,CAACrB,KAAK;QACjC;QACAkB,IAAIJ;QACJQ,MAAMnB,YAAY,YAAY,UAAU;kBAEvCG,QAAQiB,GAAG,CAAC,CAACC,uBACZ,KAAC3B;gBAA4BG,OAAOwB,OAAOxB,KAAK;0BAC7CwB,OAAOC,OAAO;eADFD,OAAOxB,KAAK;;AAMnC"}

package/dist/cjs/Table/VirtualizedTable.js

@@ -67,7 +67,8 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
                     ...props,
                     width: width,
                     density: density,
-                    onKeyDown: keyboardNav.onTableKeyDown
+                    onKeyDown: keyboardNav.onTableKeyDown,
+                    onBlur: keyboardNav.onTableBlur
                 });
             },
             TableHead: _TableHead.TableHead,
@@ -100,6 +101,7 @@ function VirtualizedTable({ width, height, density, defaultColumnWidth, defaultC
     }, [
         density,
         keyboardNav.onTableKeyDown,
+        keyboardNav.onTableBlur,
         onRowClick,
         onRowMouseOut,
         onRowMouseOver,

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

@@ -92,10 +92,17 @@ function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }) {
         maxRows,
         onActiveCellChange
     ]);
+    const handleTableBlur = (0, _react.useCallback)((e)=>{
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsActive(false);
+            setActiveCell(DEFAULT_ACTIVE_CELL);
+        }
+    }, []);
     return {
         activeCell,
         isActive,
         onTableKeyDown: handleKeyDown,
-        onCellFocus: handleCellFocus
+        onCellFocus: handleCellFocus,
+        onTableBlur: handleTableBlur
     };
 }

package/dist/cjs/ThresholdsEditor/ThresholdsEditor.js

@@ -82,12 +82,7 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
     const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     const { thresholds: { defaultColor, palette } } = chartsTheme;
     const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;
-    const [steps, setSteps] = (0, _react.useState)(thresholds?.steps);
-    (0, _react.useEffect)(()=>{
-        setSteps(thresholds?.steps);
-    }, [
-        thresholds?.steps
-    ]);
+    const steps = thresholds?.steps;
     // every time a new threshold is added, we want to focus the recently added input
     const recentlyAddedInputRef = (0, _react.useRef)(null);
     const focusRef = (0, _react.useRef)(false);
@@ -99,12 +94,14 @@ function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMod
         steps?.length
     ]);
     const handleThresholdValueChange = (e, i)=>{
-        setSteps((0, _immer.produce)(steps, (draft)=>{
-            const step = draft?.[i];
-            if (step) {
-                step.value = Number(e.target.value);
-            }
-        }));
+        if (thresholds !== undefined) {
+            onChange((0, _immer.produce)(thresholds, (draft)=>{
+                const step = draft.steps?.[i];
+                if (step) {
+                    step.value = Number(e.target.value);
+                }
+            }));
+        }
     };
     const handleThresholdColorChange = (color, i)=>{
         if (thresholds !== undefined) {

package/dist/cjs/TimeRangeSelector/DateTimeRangePicker.js

@@ -25,23 +25,16 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
 const _AdapterDateFnsV3 = require("@mui/x-date-pickers/AdapterDateFnsV3");
+const _tz = require("@date-fns/tz");
 const _ErrorBoundary = require("../ErrorBoundary");
 const _ErrorAlert = require("../ErrorAlert");
-const _format = require("../utils/format");
 const _utils = require("./utils");
 const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
-    // Time range values as dates that can be used as a time range.
+    const stdTimeZone = [
+        'local',
+        'browser'
+    ].includes(timeZone.toLowerCase()) ? Intl.DateTimeFormat().resolvedOptions().timeZone : timeZone;
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
-    const timeRangeInputs = (0, _react.useMemo)(()=>{
-        return {
-            start: (0, _format.formatWithTimeZone)(timeRange.start, _utils.DATE_TIME_FORMAT, timeZone),
-            end: (0, _format.formatWithTimeZone)(timeRange.end, _utils.DATE_TIME_FORMAT, timeZone)
-        };
-    }, [
-        timeRange.start,
-        timeRange.end,
-        timeZone
-    ]);
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
         setTimeRange((prevTimeRange)=>{
@@ -96,10 +89,11 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })
                             children: "Select Start Time"
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.StaticDateTimePicker, {
+                            timezone: stdTimeZone,
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
-                            value: timeRange.start,
+                            value: new _tz.TZDate(timeRange.start, stdTimeZone),
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
                                 onChangeStartTime(newValue);
@@ -124,11 +118,12 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })
                             children: "Select End Time"
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.StaticDateTimePicker, {
+                            timezone: stdTimeZone,
                             displayStaticWrapperAs: "desktop",
                             openTo: "day",
                             disableHighlightToday: true,
-                            value: timeRange.end,
-                            minDateTime: timeRange.start,
+                            value: new _tz.TZDate(timeRange.end, stdTimeZone),
+                            minDateTime: new _tz.TZDate(timeRange.start, stdTimeZone),
                             onChange: (newValue)=>{
                                 if (newValue === null) return;
                                 onChangeEndTime(newValue);
@@ -151,8 +146,9 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
                             FallbackComponent: _ErrorAlert.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                timezone: stdTimeZone,
                                 label: "Start Time",
-                                value: new Date(timeRangeInputs.start),
+                                value: new _tz.TZDate(timeRange.start, stdTimeZone),
                                 onChange: (event)=>{
                                     if (event) {
                                         onChangeStartTime(event);
@@ -165,8 +161,9 @@ const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_ErrorBoundary.ErrorBoundary, {
                             FallbackComponent: _ErrorAlert.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_xdatepickers.DateTimeField, {
+                                timezone: stdTimeZone,
                                 label: "End Time",
-                                value: new Date(timeRangeInputs.end),
+                                value: new _tz.TZDate(timeRange.end, stdTimeZone),
                                 onChange: (event)=>{
                                     if (event) {
                                         onChangeEndTime(event);

package/dist/cjs/TimeZoneSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2026 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/cjs/utils/format.js

@@ -34,7 +34,7 @@ _export(exports, {
         return getFormattedAxisLabel;
     }
 });
-const _datefnstz = require("date-fns-tz");
+const _tz = require("@date-fns/tz");
 const _datefns = require("date-fns");
 function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
     /*
@@ -61,7 +61,9 @@ function formatWithTimeZone(date, formatString, timeZone) {
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return (0, _datefns.format)(date, formatString);
     } else {
-        return (0, _datefnstz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+        return (0, _datefns.format)(date, formatString, {
+            in: (0, _tz.tz)(lowerTimeZone === 'utc' ? 'UTC' : timeZone)
+        });
     }
 }
 function getFormattedAxisLabel(rangeMs) {

package/dist/utils/format.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { formatInTimeZone } from 'date-fns-tz';
+import { tz } from '@date-fns/tz';
 import { format } from 'date-fns';
 export function dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone) {
     /*
@@ -37,7 +37,9 @@ export function formatWithTimeZone(date, formatString, timeZone) {
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return format(date, formatString);
     } else {
-        return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
+        return format(date, formatString, {
+            in: tz(lowerTimeZone === 'utc' ? 'UTC' : timeZone)
+        });
     }
 }
 // https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter

package/dist/utils/format.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/format.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 { formatInTimeZone } from 'date-fns-tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(\n  dateFormatOptions: Intl.DateTimeFormatOptions,\n  timeZone?: string\n): Intl.DateTimeFormatOptions {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, default to browser timeZone setting\n   */\n  if (timeZone) {\n    const lowerTimeZone = timeZone.toLowerCase();\n    if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {\n      return {\n        ...dateFormatOptions,\n        timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone,\n      };\n    }\n  }\n  return dateFormatOptions;\n}\n\nexport function formatWithTimeZone(date: Date, formatString: string, timeZone?: string): string {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, format without timeZone option, defaulting to browser timeZone setting\n   */\n  const lowerTimeZone = timeZone?.toLowerCase();\n  if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {\n    return format(date, formatString);\n  } else {\n    return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);\n  }\n}\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedAxisLabel(rangeMs: number):\n  | string\n  | {\n      month: '{MMM}';\n      year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}';\n      day: '{MM}/{dd}';\n    } {\n  const dayMs = 86400000;\n  const monthMs = 2629440000;\n  const yearMs = 31536000000;\n\n  // more than 5 years\n  if (rangeMs > yearMs * 5) {\n    return '{yyyy}';\n  }\n\n  // more than 2 years\n  if (rangeMs > yearMs * 2) {\n    return '{MMM} {yyyy}';\n  }\n\n  // between 5 days to 6 months\n  if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {\n    return '{MM}/{dd}'; // 12/01\n  }\n\n  // between 2 and 5 days\n  if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {\n    return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30\n  }\n\n  return {\n    year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n    month: '{MMM}', // Jan, Feb, ...\n    day: '{MM}/{dd}',\n  };\n}\n\ninterface FormattedDateTime {\n  formattedDate: string;\n  formattedTime: string;\n}\n\nexport const getDateAndTime = (timeMs?: number): FormattedDateTime => {\n  if (!timeMs) {\n    return { formattedDate: '', formattedTime: '' };\n  }\n  const date = new Date(timeMs);\n  const formattedDate = format(date, 'MMM dd, yyyy - ');\n  const formattedTime = format(date, 'HH:mm:ss');\n  return {\n    formattedDate,\n    formattedTime,\n  };\n};\n"],"names":["formatInTimeZone","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString","getFormattedAxisLabel","rangeMs","dayMs","monthMs","yearMs","year","month","day","getDateAndTime","timeMs","formattedDate","formattedTime","Date"],"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,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,SAASC,8BACdC,iBAA6C,EAC7CC,QAAiB;IAEjB;;;;GAIC,GACD,IAAIA,UAAU;QACZ,MAAMC,gBAAgBD,SAASE,WAAW;QAC1C,IAAID,kBAAkB,WAAWA,kBAAkB,WAAW;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,UAAUC,kBAAkB,QAAQ,QAAQD;YAC9C;QACF;IACF;IACA,OAAOD;AACT;AAEA,OAAO,SAASI,mBAAmBC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB;IACpF;;;;GAIC,GACD,MAAMC,gBAAgBD,UAAUE;IAChC,IAAI,CAACF,YAAYC,kBAAkB,WAAWA,kBAAkB,WAAW;QACzE,OAAOJ,OAAOO,MAAMC;IACtB,OAAO;QACL,OAAOT,iBAAiBQ,MAAMH,kBAAkB,QAAQ,QAAQD,UAAUK;IAC5E;AACF;AAEA,sEAAsE;AACtE,OAAO,SAASC,sBAAsBC,OAAe;IAOnD,MAAMC,QAAQ;IACd,MAAMC,UAAU;IAChB,MAAMC,SAAS;IAEf,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,6BAA6B;IAC7B,IAAIH,UAAUC,QAAQ,KAAKD,UAAUE,UAAU,GAAG;QAChD,OAAO,aAAa,QAAQ;IAC9B;IAEA,uBAAuB;IACvB,IAAIF,UAAUC,QAAQ,KAAKD,WAAWC,QAAQ,GAAG;QAC/C,OAAO,uBAAuB,cAAc;IAC9C;IAEA,OAAO;QACLG,MAAM;QACNC,OAAO;QACPC,KAAK;IACP;AACF;AAOA,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX,OAAO;YAAEC,eAAe;YAAIC,eAAe;QAAG;IAChD;IACA,MAAMb,OAAO,IAAIc,KAAKH;IACtB,MAAMC,gBAAgBnB,OAAOO,MAAM;IACnC,MAAMa,gBAAgBpB,OAAOO,MAAM;IACnC,OAAO;QACLY;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/utils/format.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 { tz } from '@date-fns/tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(\n  dateFormatOptions: Intl.DateTimeFormatOptions,\n  timeZone?: string\n): Intl.DateTimeFormatOptions {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, default to browser timeZone setting\n   */\n  if (timeZone) {\n    const lowerTimeZone = timeZone.toLowerCase();\n    if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {\n      return {\n        ...dateFormatOptions,\n        timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone,\n      };\n    }\n  }\n  return dateFormatOptions;\n}\n\nexport function formatWithTimeZone(date: Date, formatString: string, timeZone?: string): string {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, format without timeZone option, defaulting to browser timeZone setting\n   */\n  const lowerTimeZone = timeZone?.toLowerCase();\n  if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {\n    return format(date, formatString);\n  } else {\n    return format(date, formatString, { in: tz(lowerTimeZone === 'utc' ? 'UTC' : timeZone) });\n  }\n}\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedAxisLabel(rangeMs: number):\n  | string\n  | {\n      month: '{MMM}';\n      year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}';\n      day: '{MM}/{dd}';\n    } {\n  const dayMs = 86400000;\n  const monthMs = 2629440000;\n  const yearMs = 31536000000;\n\n  // more than 5 years\n  if (rangeMs > yearMs * 5) {\n    return '{yyyy}';\n  }\n\n  // more than 2 years\n  if (rangeMs > yearMs * 2) {\n    return '{MMM} {yyyy}';\n  }\n\n  // between 5 days to 6 months\n  if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {\n    return '{MM}/{dd}'; // 12/01\n  }\n\n  // between 2 and 5 days\n  if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {\n    return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30\n  }\n\n  return {\n    year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n    month: '{MMM}', // Jan, Feb, ...\n    day: '{MM}/{dd}',\n  };\n}\n\ninterface FormattedDateTime {\n  formattedDate: string;\n  formattedTime: string;\n}\n\nexport const getDateAndTime = (timeMs?: number): FormattedDateTime => {\n  if (!timeMs) {\n    return { formattedDate: '', formattedTime: '' };\n  }\n  const date = new Date(timeMs);\n  const formattedDate = format(date, 'MMM dd, yyyy - ');\n  const formattedTime = format(date, 'HH:mm:ss');\n  return {\n    formattedDate,\n    formattedTime,\n  };\n};\n"],"names":["tz","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString","in","getFormattedAxisLabel","rangeMs","dayMs","monthMs","yearMs","year","month","day","getDateAndTime","timeMs","formattedDate","formattedTime","Date"],"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,EAAE,QAAQ,eAAe;AAClC,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,SAASC,8BACdC,iBAA6C,EAC7CC,QAAiB;IAEjB;;;;GAIC,GACD,IAAIA,UAAU;QACZ,MAAMC,gBAAgBD,SAASE,WAAW;QAC1C,IAAID,kBAAkB,WAAWA,kBAAkB,WAAW;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,UAAUC,kBAAkB,QAAQ,QAAQD;YAC9C;QACF;IACF;IACA,OAAOD;AACT;AAEA,OAAO,SAASI,mBAAmBC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB;IACpF;;;;GAIC,GACD,MAAMC,gBAAgBD,UAAUE;IAChC,IAAI,CAACF,YAAYC,kBAAkB,WAAWA,kBAAkB,WAAW;QACzE,OAAOJ,OAAOO,MAAMC;IACtB,OAAO;QACL,OAAOR,OAAOO,MAAMC,cAAc;YAAEC,IAAIV,GAAGK,kBAAkB,QAAQ,QAAQD;QAAU;IACzF;AACF;AAEA,sEAAsE;AACtE,OAAO,SAASO,sBAAsBC,OAAe;IAOnD,MAAMC,QAAQ;IACd,MAAMC,UAAU;IAChB,MAAMC,SAAS;IAEf,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,oBAAoB;IACpB,IAAIH,UAAUG,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,6BAA6B;IAC7B,IAAIH,UAAUC,QAAQ,KAAKD,UAAUE,UAAU,GAAG;QAChD,OAAO,aAAa,QAAQ;IAC9B;IAEA,uBAAuB;IACvB,IAAIF,UAAUC,QAAQ,KAAKD,WAAWC,QAAQ,GAAG;QAC/C,OAAO,uBAAuB,cAAc;IAC9C;IAEA,OAAO;QACLG,MAAM;QACNC,OAAO;QACPC,KAAK;IACP;AACF;AAOA,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX,OAAO;YAAEC,eAAe;YAAIC,eAAe;QAAG;IAChD;IACA,MAAMd,OAAO,IAAIe,KAAKH;IACtB,MAAMC,gBAAgBpB,OAAOO,MAAM;IACnC,MAAMc,gBAAgBrB,OAAOO,MAAM;IACnC,OAAO;QACLa;QACAC;IACF;AACF,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.53.0-rc.3",
+  "version": "0.53.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -31,13 +31,13 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@codemirror/lang-json": "^6.0.1",
+    "@date-fns/tz": "^1.4.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/core": "0.53.0-rc.1",
+    "@perses-dev/core": "0.53.0",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^4.1.0",
-    "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
@@ -54,9 +54,9 @@
   },
   "peerDependencies": {
     "@mui/material": "^6.1.10",
+    "lodash": "^4.17.21",
     "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
-    "lodash": "^4.17.21"
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "files": [
     "dist"