@perses-dev/components 0.55.0-beta.2 → 0.55.0-beta.3

package/dist/Table/VirtualizedTableContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTableContainer.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 { TableContainer as MuiTableContainer, TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { combineSx } from '../utils/combine-sx';\n\ntype VirtualizedTableContainerProps = MuiTableContainerProps;\n\nexport const VirtualizedTableContainer = forwardRef<HTMLDivElement, VirtualizedTableContainerProps>(\n  function VirtualizedTableContainer(props, ref) {\n    return <MuiTableContainer {...props} tabIndex={-1} ref={ref} sx={combineSx({ flexGrow: 1 }, props.sx)} />;\n  }\n);\n"],"names":["TableContainer","MuiTableContainer","forwardRef","combineSx","VirtualizedTableContainer","props","ref","tabIndex","sx","flexGrow"],"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,kBAAkBC,iBAAiB,QAAuD,gBAAgB;AACnH,SAASC,UAAU,QAAQ,QAAQ;AACnC,SAASC,SAAS,QAAQ,sBAAsB;AAIhD,OAAO,MAAMC,0CAA4BF,WACvC,SAASE,0BAA0BC,KAAK,EAAEC,GAAG;IAC3C,qBAAO,KAACL;QAAmB,GAAGI,KAAK;QAAEE,UAAU,CAAC;QAAGD,KAAKA;QAAKE,IAAIL,UAAU;YAAEM,UAAU;QAAE,GAAGJ,MAAMG,EAAE;;AACtG,GACA"}
+{"version":3,"sources":["../../src/Table/VirtualizedTableContainer.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 { TableContainer as MuiTableContainer, TableContainerProps as MuiTableContainerProps } from '@mui/material';\nimport { forwardRef } from 'react';\n\nimport { combineSx } from '../utils/combine-sx';\n\ntype VirtualizedTableContainerProps = MuiTableContainerProps;\n\nexport const VirtualizedTableContainer = forwardRef<HTMLDivElement, VirtualizedTableContainerProps>(\n  function VirtualizedTableContainer(props, ref) {\n    return <MuiTableContainer {...props} tabIndex={-1} ref={ref} sx={combineSx({ flexGrow: 1 }, props.sx)} />;\n  },\n);\n"],"names":["TableContainer","MuiTableContainer","forwardRef","combineSx","VirtualizedTableContainer","props","ref","tabIndex","sx","flexGrow"],"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,kBAAkBC,iBAAiB,QAAuD,gBAAgB;AACnH,SAASC,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAAQ,sBAAsB;AAIhD,OAAO,MAAMC,0CAA4BF,WACvC,SAASE,0BAA0BC,KAAK,EAAEC,GAAG;IAC3C,qBAAO,KAACL;QAAmB,GAAGI,KAAK;QAAEE,UAAU,CAAC;QAAGD,KAAKA;QAAKE,IAAIL,UAAU;YAAEM,UAAU;QAAE,GAAGJ,MAAMG,EAAE;;AACtG,GACA"}

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

@@ -1,6 +1,6 @@
+import { FuzzyMatchThreshold } from '@perses-dev/components';
 import { ExpandedState, TableOptions } from '@tanstack/react-table';
 import { SetStateAction } from 'react';
-import { FuzzyMatchThreshold } from '@perses-dev/components';
 export interface UseFuzzySearchResult<TableData> {
     globalFilter: string;
     setGlobalFilter: (value: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"useFuzzySearch.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAiC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEnG,OAAO,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAU7D,MAAM,WAAW,oBAAoB,CAAC,SAAS;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,EAAE,IAAI,CACtB,YAAY,CAAC,SAAS,CAAC,EACvB,WAAW,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,sBAAsB,CACvG,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,EACtC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,aAAa,EACvB,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,aAAa,CAAC,KAAK,IAAI,GAC1D,oBAAoB,CAAC,SAAS,CAAC,CA8BjC"}
+{"version":3,"file":"useFuzzySearch.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useFuzzySearch.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAiC,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAE,cAAc,EAAyB,MAAM,OAAO,CAAC;AAU9D,MAAM,WAAW,oBAAoB,CAAC,SAAS;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,kBAAkB,EAAE,IAAI,CACtB,YAAY,CAAC,SAAS,CAAC,EACvB,WAAW,GAAG,gBAAgB,GAAG,qBAAqB,GAAG,oBAAoB,GAAG,sBAAsB,CACvG,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,SAAS,EACtC,eAAe,EAAE,OAAO,GAAG,SAAS,EACpC,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,aAAa,EACvB,WAAW,EAAE,CAAC,KAAK,EAAE,cAAc,CAAC,aAAa,CAAC,KAAK,IAAI,GAC1D,oBAAoB,CAAC,SAAS,CAAC,CA8BjC"}

package/dist/Table/hooks/useFuzzySearch.js

@@ -10,8 +10,8 @@
 // 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 { getFilteredRowModel } from '@tanstack/react-table';
 import { rankings, rankItem } from '@tanstack/match-sorter-utils';
+import { getFilteredRowModel } from '@tanstack/react-table';
 import { useCallback, useState } from 'react';
 const getFuzzyFilterFunction = (threshold)=>(row, columnId, value, addMeta)=>{
         const itemRank = rankItem(row.getValue(columnId), value, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/hooks/useFuzzySearch.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 { ExpandedState, FilterFn, getFilteredRowModel, TableOptions } from '@tanstack/react-table';\nimport { rankings, rankItem } from '@tanstack/match-sorter-utils';\nimport { SetStateAction, useCallback, useState } from 'react';\nimport { FuzzyMatchThreshold } from '@perses-dev/components';\n\nconst getFuzzyFilterFunction =\n  (threshold: FuzzyMatchThreshold): FilterFn<unknown> =>\n  (row, columnId, value, addMeta) => {\n    const itemRank = rankItem(row.getValue(columnId), value, { threshold: rankings[threshold] });\n    addMeta({ itemRank });\n    return itemRank.passed;\n  };\n\nexport interface UseFuzzySearchResult<TableData> {\n  globalFilter: string;\n  setGlobalFilter: (value: string) => void;\n  fuzzySearchOptions: Pick<\n    TableOptions<TableData>,\n    'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'\n  >;\n}\n\n/**\n * Returns fuzzy search state and the corresponding `useReactTable` options.\n * Filter options are disabled when `showSearch` is falsy.\n */\nexport function useFuzzySearch<TableData>(\n  isSearchEnabled: boolean | undefined,\n  threshold: FuzzyMatchThreshold,\n  expanded: ExpandedState,\n  setExpanded: (value: SetStateAction<ExpandedState>) => void\n): UseFuzzySearchResult<TableData> {\n  const [globalFilter, setGlobalFilter] = useState('');\n  const [prevExpandedState, setPrevExpandedState] = useState<ExpandedState>(expanded);\n\n  // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared\n  const handleGlobalFilterChange = useCallback(\n    (value: string): void => {\n      setGlobalFilter((prev) => {\n        if (!prev) {\n          setPrevExpandedState(expanded);\n          setExpanded(true);\n        } else if (prev && !value) {\n          setExpanded(prevExpandedState);\n        }\n        return value;\n      });\n    },\n    [expanded, prevExpandedState, setExpanded]\n  );\n  return {\n    globalFilter,\n    setGlobalFilter: handleGlobalFilterChange,\n    fuzzySearchOptions: {\n      filterFns: { fuzzy: getFuzzyFilterFunction(threshold) },\n      globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,\n      getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,\n      filterFromLeafRows: isSearchEnabled,\n      onGlobalFilterChange: handleGlobalFilterChange,\n    },\n  };\n}\n"],"names":["getFilteredRowModel","rankings","rankItem","useCallback","useState","getFuzzyFilterFunction","threshold","row","columnId","value","addMeta","itemRank","getValue","passed","useFuzzySearch","isSearchEnabled","expanded","setExpanded","globalFilter","setGlobalFilter","prevExpandedState","setPrevExpandedState","handleGlobalFilterChange","prev","fuzzySearchOptions","filterFns","fuzzy","globalFilterFn","undefined","filterFromLeafRows","onGlobalFilterChange"],"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,mBAAmB,QAAsB,wBAAwB;AACnG,SAASC,QAAQ,EAAEC,QAAQ,QAAQ,+BAA+B;AAClE,SAAyBC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAG9D,MAAMC,yBACJ,CAACC,YACD,CAACC,KAAKC,UAAUC,OAAOC;QACrB,MAAMC,WAAWT,SAASK,IAAIK,QAAQ,CAACJ,WAAWC,OAAO;YAAEH,WAAWL,QAAQ,CAACK,UAAU;QAAC;QAC1FI,QAAQ;YAAEC;QAAS;QACnB,OAAOA,SAASE,MAAM;IACxB;AAWF;;;CAGC,GACD,OAAO,SAASC,eACdC,eAAoC,EACpCT,SAA8B,EAC9BU,QAAuB,EACvBC,WAA2D;IAE3D,MAAM,CAACC,cAAcC,gBAAgB,GAAGf,SAAS;IACjD,MAAM,CAACgB,mBAAmBC,qBAAqB,GAAGjB,SAAwBY;IAE1E,iHAAiH;IACjH,MAAMM,2BAA2BnB,YAC/B,CAACM;QACCU,gBAAgB,CAACI;YACf,IAAI,CAACA,MAAM;gBACTF,qBAAqBL;gBACrBC,YAAY;YACd,OAAO,IAAIM,QAAQ,CAACd,OAAO;gBACzBQ,YAAYG;YACd;YACA,OAAOX;QACT;IACF,GACA;QAACO;QAAUI;QAAmBH;KAAY;IAE5C,OAAO;QACLC;QACAC,iBAAiBG;QACjBE,oBAAoB;YAClBC,WAAW;gBAAEC,OAAOrB,uBAAuBC;YAAW;YACtDqB,gBAAgBZ,kBAAkB,UAAUa;YAC5C5B,qBAAqBe,kBAAkBf,wBAAwB4B;YAC/DC,oBAAoBd;YACpBe,sBAAsBR;QACxB;IACF;AACF"}
+{"version":3,"sources":["../../../src/Table/hooks/useFuzzySearch.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 { FuzzyMatchThreshold } from '@perses-dev/components';\nimport { rankings, rankItem } from '@tanstack/match-sorter-utils';\nimport { ExpandedState, FilterFn, getFilteredRowModel, TableOptions } from '@tanstack/react-table';\nimport { SetStateAction, useCallback, useState } from 'react';\n\nconst getFuzzyFilterFunction =\n  (threshold: FuzzyMatchThreshold): FilterFn<unknown> =>\n  (row, columnId, value, addMeta) => {\n    const itemRank = rankItem(row.getValue(columnId), value, { threshold: rankings[threshold] });\n    addMeta({ itemRank });\n    return itemRank.passed;\n  };\n\nexport interface UseFuzzySearchResult<TableData> {\n  globalFilter: string;\n  setGlobalFilter: (value: string) => void;\n  fuzzySearchOptions: Pick<\n    TableOptions<TableData>,\n    'filterFns' | 'globalFilterFn' | 'getFilteredRowModel' | 'filterFromLeafRows' | 'onGlobalFilterChange'\n  >;\n}\n\n/**\n * Returns fuzzy search state and the corresponding `useReactTable` options.\n * Filter options are disabled when `showSearch` is falsy.\n */\nexport function useFuzzySearch<TableData>(\n  isSearchEnabled: boolean | undefined,\n  threshold: FuzzyMatchThreshold,\n  expanded: ExpandedState,\n  setExpanded: (value: SetStateAction<ExpandedState>) => void,\n): UseFuzzySearchResult<TableData> {\n  const [globalFilter, setGlobalFilter] = useState('');\n  const [prevExpandedState, setPrevExpandedState] = useState<ExpandedState>(expanded);\n\n  // expand all rows when a search query is entered, and restore previous expansion state when the query is cleared\n  const handleGlobalFilterChange = useCallback(\n    (value: string): void => {\n      setGlobalFilter((prev) => {\n        if (!prev) {\n          setPrevExpandedState(expanded);\n          setExpanded(true);\n        } else if (prev && !value) {\n          setExpanded(prevExpandedState);\n        }\n        return value;\n      });\n    },\n    [expanded, prevExpandedState, setExpanded],\n  );\n  return {\n    globalFilter,\n    setGlobalFilter: handleGlobalFilterChange,\n    fuzzySearchOptions: {\n      filterFns: { fuzzy: getFuzzyFilterFunction(threshold) },\n      globalFilterFn: isSearchEnabled ? 'fuzzy' : undefined,\n      getFilteredRowModel: isSearchEnabled ? getFilteredRowModel() : undefined,\n      filterFromLeafRows: isSearchEnabled,\n      onGlobalFilterChange: handleGlobalFilterChange,\n    },\n  };\n}\n"],"names":["rankings","rankItem","getFilteredRowModel","useCallback","useState","getFuzzyFilterFunction","threshold","row","columnId","value","addMeta","itemRank","getValue","passed","useFuzzySearch","isSearchEnabled","expanded","setExpanded","globalFilter","setGlobalFilter","prevExpandedState","setPrevExpandedState","handleGlobalFilterChange","prev","fuzzySearchOptions","filterFns","fuzzy","globalFilterFn","undefined","filterFromLeafRows","onGlobalFilterChange"],"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;AAGjC,SAASA,QAAQ,EAAEC,QAAQ,QAAQ,+BAA+B;AAClE,SAAkCC,mBAAmB,QAAsB,wBAAwB;AACnG,SAAyBC,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AAE9D,MAAMC,yBACJ,CAACC,YACD,CAACC,KAAKC,UAAUC,OAAOC;QACrB,MAAMC,WAAWV,SAASM,IAAIK,QAAQ,CAACJ,WAAWC,OAAO;YAAEH,WAAWN,QAAQ,CAACM,UAAU;QAAC;QAC1FI,QAAQ;YAAEC;QAAS;QACnB,OAAOA,SAASE,MAAM;IACxB;AAWF;;;CAGC,GACD,OAAO,SAASC,eACdC,eAAoC,EACpCT,SAA8B,EAC9BU,QAAuB,EACvBC,WAA2D;IAE3D,MAAM,CAACC,cAAcC,gBAAgB,GAAGf,SAAS;IACjD,MAAM,CAACgB,mBAAmBC,qBAAqB,GAAGjB,SAAwBY;IAE1E,iHAAiH;IACjH,MAAMM,2BAA2BnB,YAC/B,CAACM;QACCU,gBAAgB,CAACI;YACf,IAAI,CAACA,MAAM;gBACTF,qBAAqBL;gBACrBC,YAAY;YACd,OAAO,IAAIM,QAAQ,CAACd,OAAO;gBACzBQ,YAAYG;YACd;YACA,OAAOX;QACT;IACF,GACA;QAACO;QAAUI;QAAmBH;KAAY;IAE5C,OAAO;QACLC;QACAC,iBAAiBG;QACjBE,oBAAoB;YAClBC,WAAW;gBAAEC,OAAOrB,uBAAuBC;YAAW;YACtDqB,gBAAgBZ,kBAAkB,UAAUa;YAC5C1B,qBAAqBa,kBAAkBb,wBAAwB0B;YAC/DC,oBAAoBd;YACpBe,sBAAsBR;QACxB;IACF;AACF"}

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 { 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"}
+{"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 { FocusEventHandler, KeyboardEventHandler, MutableRefObject, RefObject } from 'react';
+import { TableVirtuosoHandle } from 'react-virtuoso';
 import { UseTableKeyboardNavProps } from './useTableKeyboardNav';
 interface UseVirtualizedTableKeyboardNavProps extends Omit<UseTableKeyboardNavProps, 'onActiveCellChange'> {
     visibleRange: MutableRefObject<{

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,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"}
+{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,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 { 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"}
+{"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 { FocusEventHandler, KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport { TableVirtuosoHandle } from 'react-virtuoso';\n\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;AAKjC,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/Table/model/table-model.d.ts

@@ -1,8 +1,8 @@
 import { Theme } from '@mui/material';
 import { Link } from '@perses-dev/spec';
+import { rankings } from '@tanstack/match-sorter-utils';
 import { AccessorKeyColumnDef, CellContext, ColumnDef, CoreOptions, FilterFn, PaginationState, RowData, RowSelectionState, SortingState } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import { rankings } from '@tanstack/match-sorter-utils';
 export declare const DEFAULT_COLUMN_WIDTH = 150;
 export declare const DEFAULT_COLUMN_MIN_WIDTH = 60;
 export declare const DEFAULT_COLUMN_MAX_WIDTH = 1000;

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { Link } from '@perses-dev/spec';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  FilterFn,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties, ReactNode } from 'react';\nimport { rankings } from '@tanstack/match-sorter-utils';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_MIN_WIDTH = 60;\nexport const DEFAULT_COLUMN_MAX_WIDTH = 1000;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number | string;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   *  When using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n\n  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n\n  /**\n   * Returns the sub rows for a given row, or `undefined` if there are none.\n   */\n  getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];\n\n  /**\n   * List of column ids that should be hidden when the table is initially rendered.\n   */\n  hiddenColumns?: string[];\n\n  /**\n   * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.\n   * If not provided, the toolbar will not be rendered.\n   */\n  tableToolbarConfig?: TableToolbarConfig;\n\n  /**\n   * Determines when column resizing updates the column width.\n   * When set to `onChange`, the column width will update as the user drags the resize handle.\n   * When set to `onEnd`, the column width will only update when the user releases the resize handle.\n   * @default 'onChange'\n   */\n  columnResizeMode?: 'onChange' | 'onEnd';\n\n  /**\n   * Default configuration applied to all columns in the table. Individual\n   * column configurations can override these values. Useful for setting\n   * consistent constraints (e.g. min/max width) or enabling resizing across\n   * all columns without repeating the configuration per column.\n   */\n  defaultColumnConfig?: DefaultColumnConfig;\n}\n\nexport interface DefaultColumnConfig {\n  /**\n   * Minimum width of a column in pixels.\n   * @default 60\n   */\n  minWidth?: number;\n\n  /**\n   * Maximum width of a column in pixels.\n   * @default 1000\n   */\n  maxWidth?: number;\n\n  /**\n   * When `true`, columns will be resizable by dragging the column header border.\n   * @default false\n   */\n  enableResizing?: boolean;\n}\n\nexport type FuzzyMatchThreshold = keyof typeof rankings;\n\nexport type TableToolbarConfig = {\n  /**\n   * When `true`, a search bar will be rendered above the table that allows\n   * the user to filter rows using a fuzzy global filter.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * When `isSearchEnabled` is `true`, this determines how fuzzy the matching should be when filtering results.\n   * @default 'CONTAINS'\n   */\n  fuzzyMatchThreshold?: FuzzyMatchThreshold;\n\n  /**\n   * When `true`, a \"Columns\" button will be rendered above the table that\n   * opens a dropdown allowing the user to toggle column visibility.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | string;\n};\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {}\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\ndeclare module '@tanstack/react-table' {\n  //add fuzzy filter to the filterFns. Allows us to use \"fuzzy\" as a value for `globalFilterFn` in our table options.\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>;\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>,\n  defaultColumnConfig?: DefaultColumnConfig\n): Array<ColumnDef<TableData>> {\n  return columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps }) => {\n      const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth)\n          : getUserProvidedSizeProps(\n              isResizingEnabled,\n              width,\n              defaultColumnConfig?.minWidth,\n              defaultColumnConfig?.maxWidth\n            );\n\n      return {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n        enableResizing: isResizingEnabled,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n          dataLink,\n        },\n      };\n    }\n  );\n}\n\nfunction getUserProvidedSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  width: number,\n  minWidth?: number,\n  maxWidth?: number\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.\n  return isResizingEnabled\n    ? {\n        size: width,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\n    : {\n        size: width,\n      };\n}\n\nfunction getDefaultSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  minWidth?: number,\n  maxWidth?: number\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  return isResizingEnabled\n    ? {\n        // When resizing is enabled, we need to set a default size for the column\n        // so that relative value can be calculated when resizing and column is visible.\n        size: DEFAULT_COLUMN_WIDTH,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\n    : // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      {\n        // All zero values are used as shorthand for \"auto\" when rendering\n        // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n        size: 0,\n        minSize: 0,\n        maxSize: 0,\n      };\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MIN_WIDTH","DEFAULT_COLUMN_MAX_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","defaultColumnConfig","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","enableResizing","otherProps","isResizingEnabled","sizeProps","undefined","getDefaultSizeProps","minWidth","maxWidth","getUserProvidedSizeProps","meta","size","minSize","maxSize"],"mappings":"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"}
+{"version":3,"sources":["../../../src/Table/model/table-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Theme } from '@mui/material';\nimport { Link } from '@perses-dev/spec';\nimport { rankings } from '@tanstack/match-sorter-utils';\nimport {\n  AccessorKeyColumnDef,\n  CellContext,\n  ColumnDef,\n  CoreOptions,\n  FilterFn,\n  PaginationState,\n  RowData,\n  RowSelectionState,\n  SortingState,\n} from '@tanstack/react-table';\nimport { CSSProperties, ReactNode } from 'react';\n\nexport const DEFAULT_COLUMN_WIDTH = 150;\nexport const DEFAULT_COLUMN_MIN_WIDTH = 60;\nexport const DEFAULT_COLUMN_MAX_WIDTH = 1000;\nexport const DEFAULT_COLUMN_HEIGHT = 40;\n\nexport type TableDensity = 'compact' | 'standard' | 'comfortable';\nexport type SortDirection = 'asc' | 'desc' | undefined;\n\nexport type TableRowEventOpts = {\n  /**\n   * Unique identifier for the row.\n   */\n  id: string;\n\n  /**\n   * Index of the row in the original data.\n   */\n  index: number;\n};\n\nexport interface TableProps<TableData> {\n  /**\n   * Height of the table.\n   */\n  height: number;\n\n  /**\n   * Width of the table.\n   */\n  width: number | string;\n\n  /**\n   * Array of data to render in the table. Each entry in the array will be\n   * rendered as a row in the table.\n   */\n  data: TableData[];\n\n  /**\n   * Array of column configuration for the table. Each entry in the array will\n   * be rendered as a column header and impact the rendering of cells within\n   * table rows.\n   */\n  columns: Array<TableColumnConfig<TableData>>;\n\n  /**\n   * Custom render cell configurations. Each entry of the object should be an\n   * id for cell `${rowIndex}_${columnIndex}`, can apply custom text, text color\n   * and background color.\n   */\n  cellConfigs?: TableCellConfigs;\n\n  /**\n   * The density of the table layout. This impacts the size and space taken up\n   * by content in the table (e.g. font size, padding).\n   */\n  density?: TableDensity;\n\n  /**\n   *  When using \"auto\", the table will try to automatically adjust the width of columns to fit without overflowing.\n   *  If there is not enough width for each column, the display can unreadable.\n   */\n  defaultColumnWidth?: 'auto' | number;\n\n  /**\n   *  When using \"auto\", the table will calculate the cell height based on the line height of the theme and the density setting of the table.\n   */\n  defaultColumnHeight?: 'auto' | number;\n\n  /**\n   * When `true`, the first column of the table will include checkboxes.\n   */\n  checkboxSelection?: boolean;\n\n  /**\n   * Determines the behavior of row selection.\n   *\n   * - `standard`: clicking a checkbox will toggle that rows's selected/unselected\n   *    state and will not impact other rows.\n   * - `legend`: clicking a checkbox will \"focus\" that row by selecting it and\n   *    unselecting other rows. Clicking a checkbox with a modifier key pressed,\n   *    will change this behavior to behave like `standard`.\n   *\n   * @default 'standard'\n   */\n  rowSelectionVariant?: 'standard' | 'legend';\n\n  /**\n   * State of selected rows in the table when `checkboxSelection` is enabled.\n   *\n   * Selected row state is a controlled value that should be managed using a\n   * combination of this prop and `onRowSelectionChange`.\n   */\n  rowSelection?: RowSelectionState;\n\n  /**\n   * Callback fired when the mouse is moved over a table row.\n   */\n  onRowMouseOver?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * Callback fired when the mouse is moved out of a table row.\n   */\n  onRowMouseOut?: (e: React.MouseEvent, opts: TableRowEventOpts) => void;\n\n  /**\n   * State of the column sorting in the table.\n   *\n   * The column sorting is a controlled value that should be managed using a\n   * combination fo this prop and `onSortingChange`.\n   */\n  sorting?: SortingState;\n\n  /**\n   * Callback fired when the selected rows in the table changes.\n   */\n  onRowSelectionChange?: (rowSelection: RowSelectionState) => void;\n\n  /**\n   * Callback fired when the table sorting changes.\n   */\n  onSortingChange?: (sorting: SortingState) => void;\n\n  /**\n   * State of the pagination in the table.\n   * Default: undefined, i.e. pagination is disabled.\n   */\n  pagination?: PaginationState;\n\n  /**\n   * Callback fired when the table pagination changes.\n   */\n  onPaginationChange?: (pagination: PaginationState) => void;\n\n  /**\n   * Function used to determine the unique identifier used for each row. This\n   * value is used to key `rowSelection`. If this value is not set, the index\n   * is used as the unique identifier.\n   */\n  getRowId?: CoreOptions<TableData>['getRowId'];\n\n  /**\n   * Function used to determine the color of the checkbox when `checkboxSelection`\n   * is enabled. If not set, a default color is used.\n   */\n  getCheckboxColor?: (rowData: TableData) => string;\n\n  /**\n   * Item actions to render for each row.\n   */\n  getItemActions?: ({ id, data }: { id: string; data: unknown }) => ReactNode[];\n\n  /**\n   * Item actions should be created\n   */\n  hasItemActions?: boolean;\n\n  /**\n   * Returns the sub rows for a given row, or `undefined` if there are none.\n   */\n  getSubRows?: (originalRow: TableData, index: number) => undefined | TableData[];\n\n  /**\n   * List of column ids that should be hidden when the table is initially rendered.\n   */\n  hiddenColumns?: string[];\n\n  /**\n   * Configuration for the table toolbar at the top of table, which includes the search input and column filter button.\n   * If not provided, the toolbar will not be rendered.\n   */\n  tableToolbarConfig?: TableToolbarConfig;\n\n  /**\n   * Determines when column resizing updates the column width.\n   * When set to `onChange`, the column width will update as the user drags the resize handle.\n   * When set to `onEnd`, the column width will only update when the user releases the resize handle.\n   * @default 'onChange'\n   */\n  columnResizeMode?: 'onChange' | 'onEnd';\n\n  /**\n   * Default configuration applied to all columns in the table. Individual\n   * column configurations can override these values. Useful for setting\n   * consistent constraints (e.g. min/max width) or enabling resizing across\n   * all columns without repeating the configuration per column.\n   */\n  defaultColumnConfig?: DefaultColumnConfig;\n}\n\nexport interface DefaultColumnConfig {\n  /**\n   * Minimum width of a column in pixels.\n   * @default 60\n   */\n  minWidth?: number;\n\n  /**\n   * Maximum width of a column in pixels.\n   * @default 1000\n   */\n  maxWidth?: number;\n\n  /**\n   * When `true`, columns will be resizable by dragging the column header border.\n   * @default false\n   */\n  enableResizing?: boolean;\n}\n\nexport type FuzzyMatchThreshold = keyof typeof rankings;\n\nexport type TableToolbarConfig = {\n  /**\n   * When `true`, a search bar will be rendered above the table that allows\n   * the user to filter rows using a fuzzy global filter.\n   */\n  isSearchEnabled?: boolean;\n\n  /**\n   * When `isSearchEnabled` is `true`, this determines how fuzzy the matching should be when filtering results.\n   * @default 'CONTAINS'\n   */\n  fuzzyMatchThreshold?: FuzzyMatchThreshold;\n\n  /**\n   * When `true`, a \"Columns\" button will be rendered above the table that\n   * opens a dropdown allowing the user to toggle column visibility.\n   */\n  isColumnFilterEnabled?: boolean;\n\n  /**\n   * Max height for the column filter menu.\n   */\n  columnFilterMenuMaxHeight?: number | string;\n};\n\nfunction calculateTableCellHeight(lineHeight: CSSProperties['lineHeight'], paddingY: string): number {\n  // Doing a bunch of math to enforce height to avoid weirdness with mismatched\n  // heights based on customization of cell contents.\n  const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : (lineHeight ?? 0);\n  const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;\n\n  return lineHeightNum + verticalPaddingNum * 2;\n}\n\ntype TableCellLayout = NonNullable<Pick<React.CSSProperties, 'padding' | 'fontSize' | 'lineHeight'>> & {\n  height: number;\n};\n\ntype GetTableCellLayoutOpts = {\n  isHeader?: boolean;\n  isLastColumn?: boolean;\n  isFirstColumn?: boolean;\n  defaultColumnHeight?: 'auto' | number;\n};\n\n/**\n * Returns the properties to lay out the content of table cells based on the\n * theme and density.\n */\nexport function getTableCellLayout(\n  theme: Theme,\n  density: TableDensity,\n  { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }: GetTableCellLayoutOpts = {},\n): TableCellLayout {\n  // Density Standard\n  let paddingY = theme.spacing(1);\n  let basePaddingX = theme.spacing(1.25);\n  let edgePaddingX = theme.spacing(2);\n  let paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n  let paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n  let lineHeight = theme.typography.body1.lineHeight;\n  let fontSize = theme.typography.body1.fontSize;\n\n  if (density === 'compact') {\n    paddingY = theme.spacing(0.5);\n    basePaddingX = theme.spacing(0.5);\n    edgePaddingX = theme.spacing(1);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body2.lineHeight;\n    fontSize = theme.typography.body2.fontSize;\n  }\n\n  if (density === 'comfortable') {\n    paddingY = theme.spacing(2);\n    basePaddingX = theme.spacing(1.5);\n    edgePaddingX = theme.spacing(2);\n    paddingLeft = isFirstColumn ? edgePaddingX : basePaddingX;\n    paddingRight = isLastColumn ? edgePaddingX : basePaddingX;\n    lineHeight = theme.typography.body1.lineHeight;\n    fontSize = theme.typography.body1.fontSize;\n  }\n\n  const height =\n    isHeader || !defaultColumnHeight || defaultColumnHeight === 'auto'\n      ? calculateTableCellHeight(lineHeight, paddingY)\n      : defaultColumnHeight;\n\n  return {\n    padding: `${paddingY} ${paddingRight} ${paddingY} ${paddingLeft}`,\n    height: height,\n    fontSize: fontSize,\n    lineHeight: lineHeight,\n  };\n}\n\nexport type TableCellAlignment = 'left' | 'right' | 'center';\n\nexport interface TableCellConfigs {\n  [id: string]: TableCellConfig;\n}\n\nexport interface TableCellConfig {\n  text?: string;\n  textColor?: string;\n  backgroundColor?: string;\n}\n\n// Overrides of meta value, so it can have a meaningful type in our code instead\n// of `any`. Putting this in the model instead of a separate .d.ts file because\n// I couldn't get it to work properly that way and punted on figuring it out\n// after trying several things.\ndeclare module '@tanstack/table-core' {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: TableColumnConfig<TData>['align'];\n    headerDescription?: TableColumnConfig<TData>['headerDescription'];\n    cellDescription?: TableColumnConfig<TData>['cellDescription'];\n    dataLink?: TableColumnConfig<TData>['dataLink'];\n  }\n}\n\ndeclare module '@tanstack/react-table' {\n  //add fuzzy filter to the filterFns. Allows us to use \"fuzzy\" as a value for `globalFilterFn` in our table options.\n  interface FilterFns {\n    fuzzy: FilterFn<unknown>;\n  }\n}\n\n// Column link settings\n// The URL could be set to a static link or could be constructed dynamically\n// The URL may include reference to the variables or neighboring cells in the row\nexport type DataLink = Omit<Link, 'name'>;\n\n// Only exposing a very simplified version of the very extensive column definitions\n// possible with tanstack table to make it easier for us to control rendering\n// and functionality.\nexport interface TableColumnConfig<TableData>\n  // Any needed to work around some typing issues with tanstack query.\n  // https://github.com/TanStack/table/issues/4241\n  // TODO: revisit issue thread and see if there are any workarounds we can\n  // use.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  extends Pick<AccessorKeyColumnDef<TableData, any>, 'accessorKey' | 'cell' | 'sortingFn' | 'id' | 'enableResizing'> {\n  /**\n   * Text to display in the header for the column.\n   */\n  header: string;\n\n  /**\n   * Alignment of the content in the cell.\n   */\n  align?: TableCellAlignment;\n\n  /**\n   * Text to display when hovering over a cell. This can be useful for\n   * providing additional information about the column when the content is\n   * ellipsized to fit in the space.\n   *\n   * If set to `true`, it will use the value generated by the `cell` prop if it\n   * can be treated as a string.\n   */\n  // `any` needed for same reason as no-explicit-any higher up in this type.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  cellDescription?: ((props: CellContext<TableData, any>) => string) | boolean | undefined;\n\n  /**\n   * When `true`, the column will be sortable.\n   * @default false\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Text to display when hovering over the header text. This can be useful for\n   * providing additional information about the column when you want to keep the\n   * header text relatively short to manage the column width.\n   */\n  headerDescription?: string;\n\n  // Tanstack Table does not support an \"auto\" value to naturally size to fit\n  // the space in a table. Adding a custom setting to manage this ourselves.\n  /**\n   * Width of the column when rendered in a table. It should be a number in pixels\n   * or \"auto\" to allow the table to automatically adjust the width to fill\n   * space.\n   * @default 'auto'\n   */\n  width?: number | 'auto';\n\n  /**\n   * Dynamic link setting. If available the the cell content should turn into\n   * a link with the value of the cell as the dynamic section\n   */\n  dataLink?: DataLink;\n}\n\n/**\n * Takes in a perses table column and transforms it into a tanstack column.\n */\nexport function persesColumnsToTanstackColumns<TableData>(\n  columns: Array<TableColumnConfig<TableData>>,\n  defaultColumnConfig?: DefaultColumnConfig,\n): Array<ColumnDef<TableData>> {\n  return columns.map(\n    ({ width, align, headerDescription, cellDescription, enableSorting, dataLink, enableResizing, ...otherProps }) => {\n      const isResizingEnabled = enableResizing ?? defaultColumnConfig?.enableResizing ?? false;\n      const sizeProps =\n        width === 'auto' || width === undefined\n          ? getDefaultSizeProps(isResizingEnabled, defaultColumnConfig?.minWidth, defaultColumnConfig?.maxWidth)\n          : getUserProvidedSizeProps(\n              isResizingEnabled,\n              width,\n              defaultColumnConfig?.minWidth,\n              defaultColumnConfig?.maxWidth,\n            );\n\n      return {\n        ...otherProps,\n        ...sizeProps,\n\n        // Default sorting to false, so it is very explicitly set per column.\n        enableSorting: !!enableSorting,\n        enableResizing: isResizingEnabled,\n\n        // Open-ended store for extra metadata in TanStack Table, so you can bake\n        // in your own features.\n        meta: {\n          align,\n          headerDescription,\n          cellDescription,\n          dataLink,\n        },\n      };\n    },\n  );\n}\n\nfunction getUserProvidedSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  width: number,\n  minWidth?: number,\n  maxWidth?: number,\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  // When resizing is enabled, we need to set min and max size to ensure the column can be resized within a reasonable range.\n  return isResizingEnabled\n    ? {\n        size: width,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\n    : {\n        size: width,\n      };\n}\n\nfunction getDefaultSizeProps<TableData>(\n  isResizingEnabled: boolean,\n  minWidth?: number,\n  maxWidth?: number,\n): Pick<ColumnDef<TableData>, 'size' | 'minSize' | 'maxSize'> {\n  return isResizingEnabled\n    ? {\n        // When resizing is enabled, we need to set a default size for the column\n        // so that relative value can be calculated when resizing and column is visible.\n        size: DEFAULT_COLUMN_WIDTH,\n        minSize: minWidth ?? DEFAULT_COLUMN_MIN_WIDTH,\n        maxSize: maxWidth ?? DEFAULT_COLUMN_MAX_WIDTH,\n      }\n    : // Tanstack Table does not support an \"auto\" value to naturally size to fit\n      // the space in a table. We translate our custom \"auto\" setting to 0 size\n      // for these columns, so it is easy to fall back to auto when rendering.\n      // Taking from a recommendation in this github discussion:\n      // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326\n      {\n        // All zero values are used as shorthand for \"auto\" when rendering\n        // because it makes it easy to fall back. (e.g. `row.size || \"auto\"`)\n        size: 0,\n        minSize: 0,\n        maxSize: 0,\n      };\n}\n"],"names":["DEFAULT_COLUMN_WIDTH","DEFAULT_COLUMN_MIN_WIDTH","DEFAULT_COLUMN_MAX_WIDTH","DEFAULT_COLUMN_HEIGHT","calculateTableCellHeight","lineHeight","paddingY","lineHeightNum","parseInt","verticalPaddingNum","getTableCellLayout","theme","density","isHeader","isLastColumn","isFirstColumn","defaultColumnHeight","spacing","basePaddingX","edgePaddingX","paddingLeft","paddingRight","typography","body1","fontSize","body2","height","padding","persesColumnsToTanstackColumns","columns","defaultColumnConfig","map","width","align","headerDescription","cellDescription","enableSorting","dataLink","enableResizing","otherProps","isResizingEnabled","sizeProps","undefined","getDefaultSizeProps","minWidth","maxWidth","getUserProvidedSizeProps","meta","size","minSize","maxSize"],"mappings":"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"}

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

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

package/dist/ThresholdsEditor/ThresholdInput.js

@@ -11,9 +11,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { useState } from 'react';
 import { Stack, FormLabel, TextField, IconButton, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
+import { useState } from 'react';
 import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 export function ThresholdInput({ inputRef, label, color, value, mode, onChange, onColorChange, onBlur, onDelete }) {
     const [key, setKey] = useState(0); // use key to cause input to lose focus when pressing enter

package/dist/ThresholdsEditor/ThresholdInput.js.map

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

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,EAAqB,MAAM,OAAO,CAAC;AAS/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,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"}
+{"version":3,"file":"ThresholdsEditor.d.ts","sourceRoot":"","sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"names":[],"mappings":"AAiBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAI5C,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,15 +11,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 React, { useEffect, useRef } from 'react';
-import { produce } from 'immer';
 import { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
-import PlusIcon from 'mdi-material-ui/Plus';
 import { Stack } from '@mui/system';
+import { produce } from 'immer';
+import PlusIcon from 'mdi-material-ui/Plus';
+import React, { useEffect, useRef } from 'react';
+import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
 import { useChartsTheme } from '../context/ChartsProvider';
-import { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';
 import { InfoTooltip } from '../InfoTooltip';
-import { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';
+import { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';
 import { ThresholdInput } from './ThresholdInput';
 const DEFAULT_STEP = 10;
 export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePercentMode }) {

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 } 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 { useChartsTheme } from '../context/ChartsProvider';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { ThresholdOptions } from '../model';\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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"}
+{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport React, { ReactElement, useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n  onChange: (thresholds: ThresholdOptions) => void;\n  thresholds?: ThresholdOptions;\n  hideDefault?: boolean;\n  disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n  thresholds,\n  onChange,\n  hideDefault,\n  disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const {\n    thresholds: { defaultColor, palette },\n  } = chartsTheme;\n  const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n  const steps = thresholds?.steps;\n  // every time a new threshold is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [steps?.length]);\n\n  const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          const step = draft.steps?.[i];\n          if (step) {\n            step.value = Number(e.target.value);\n          }\n        }),\n      );\n    }\n  };\n\n  const handleThresholdColorChange = (color: string, i: number): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          if (draft.steps !== undefined) {\n            const step = draft.steps[i];\n            if (step) {\n              step.color = color;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleDefaultColorChange = (color: string): void => {\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.defaultColor = color;\n        }),\n      );\n    } else {\n      onChange({\n        defaultColor: color,\n      });\n    }\n  };\n\n  // sort thresholds in ascending order every time an input blurs\n  const handleThresholdBlur = (): void => {\n    if (steps !== undefined) {\n      const sortedSteps = [...steps];\n      sortedSteps.sort((a, b) => a.value - b.value);\n      if (thresholds !== undefined) {\n        onChange(\n          produce(thresholds, (draft) => {\n            draft.steps = sortedSteps;\n          }),\n        );\n      }\n    }\n  };\n\n  const deleteThreshold = (i: number): void => {\n    if (thresholds !== undefined) {\n      const updatedThresholds = produce(thresholds, (draft) => {\n        if (draft.steps) {\n          draft.steps.splice(i, 1);\n        }\n      });\n      onChange(updatedThresholds);\n    }\n  };\n\n  const addThresholdInput = (): void => {\n    focusRef.current = true;\n    if (thresholds === undefined) {\n      onChange({\n        steps: [{ value: DEFAULT_STEP }],\n      });\n    } else if (thresholds && thresholds.steps === undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.steps = [{ value: DEFAULT_STEP }];\n        }),\n      );\n    } else {\n      onChange(\n        produce(thresholds, (draft) => {\n          const steps = draft.steps;\n          if (steps?.length) {\n            const lastStep = steps[steps.length - 1];\n            const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n            steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n          } else if (steps) {\n            steps.push({ value: DEFAULT_STEP });\n          }\n        }),\n      );\n    }\n  };\n\n  const handleModeChange = (event: React.MouseEvent, value: string): void => {\n    const mode = value === 'percent' ? 'percent' : undefined;\n    if (thresholds !== undefined) {\n      onChange(\n        produce(thresholds, (draft) => {\n          draft.mode = mode;\n        }),\n      );\n    } else {\n      onChange({ mode });\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Thresholds\"\n      icon={\n        <InfoTooltip description=\"Add threshold\">\n          <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n            <PlusIcon />\n          </IconButton>\n        </InfoTooltip>\n      }\n    >\n      <OptionsEditorControl\n        label=\"Mode\"\n        description=\"Percentage means thresholds relative to min & max\"\n        control={\n          <ToggleButtonGroup\n            exclusive\n            disabled={disablePercentMode}\n            value={thresholds?.mode ?? 'absolute'}\n            onChange={handleModeChange}\n            sx={{ height: '36px', marginLeft: 'auto' }}\n          >\n            <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n              Absolute\n            </ToggleButton>\n            <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n              Percent\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {steps &&\n        steps\n          .map((step, i) => (\n            <ThresholdInput\n              inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n              key={i}\n              label={`T${i + 1}`}\n              color={step.color ?? palette[i] ?? defaultThresholdColor}\n              value={step.value}\n              mode={thresholds?.mode}\n              onColorChange={(color) => handleThresholdColorChange(color, i)}\n              onChange={(e) => {\n                handleThresholdValueChange(e, i);\n              }}\n              onDelete={() => {\n                deleteThreshold(i);\n              }}\n              onBlur={handleThresholdBlur}\n            />\n          ))\n          .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":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}

package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
 import { AbsoluteTimeRange } from '@perses-dev/spec';
+import { ReactElement } from 'react';
 export interface AbsoluteTimeFormProps {
     initialTimeRange: AbsoluteTimeRange;
     onChange: (timeRange: AbsoluteTimeRange) => void;

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,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,MAAM,WAAW,qBAAqB;IACpC,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,YAuJ1B,CAAC"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAM/C,MAAM,WAAW,qBAAqB;IACpC,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,GAAI,qDAKjC,qBAAqB,KAAG,YAuJ1B,CAAC"}

package/dist/TimeRangeSelector/DateTimeRangePicker.js

@@ -11,13 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { useState } from 'react';
+import { TZDate } from '@date-fns/tz';
 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 { useState } from 'react';
 import { ErrorAlert } from '../ErrorAlert';
+import { ErrorBoundary } from '../ErrorBoundary';
 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.

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, 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/spec';\nimport { TZDate } from '@date-fns/tz';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { ErrorAlert } from '../ErrorAlert';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\nexport interface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: string;\n}\n\n/**\n * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.\n * TODO: Use directly the MUI X ``DateTimePicker`` for datetime selection which is better. https://next.mui.com/x/react-date-pickers/date-time-picker/\n *   Use ``DateTimeRangePicker`` directly would be cool but paid https://next.mui.com/x/react-date-pickers/date-time-range-picker/\n * @param initialTimeRange initial time range to pre-select.\n * @param onChange event received when start and end has been selected (click on apply)\n * @param onCancel event received when user click on cancel\n * @constructor\n */\nexport const DateTimeRangePicker = ({\n  initialTimeRange,\n  onChange,\n  onCancel,\n  timeZone,\n}: AbsoluteTimeFormProps): ReactElement => {\n  const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())\n    ? Intl.DateTimeFormat().resolvedOptions().timeZone\n    : timeZone;\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: Date, segment: keyof AbsoluteTimeRange): void => {\n    setTimeRange((prevTimeRange) => {\n      return {\n        ...prevTimeRange,\n        [segment]: newTime,\n      };\n    });\n  };\n\n  const onChangeStartTime = (newStartTime: Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: timeRange.start,\n      end: timeRange.end,\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      return newDates;\n    }\n  };\n\n  const onApply = (): void => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              minDateTime={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"start_time_input\"\n              timezone={stdTimeZone}\n              label=\"Start Time\"\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeStartTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"end_time_input\"\n              timezone={stdTimeZone}\n              label=\"End Time\"\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeEndTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["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","data-testid","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TZDate } from '@date-fns/tz';\nimport { Box, Stack, Typography, Button } from '@mui/material';\nimport { DateTimeField, LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\nimport { AbsoluteTimeRange } from '@perses-dev/spec';\nimport { ReactElement, useState } from 'react';\n\nimport { ErrorAlert } from '../ErrorAlert';\nimport { ErrorBoundary } from '../ErrorBoundary';\nimport { DATE_TIME_FORMAT, validateDateRange } from './utils';\n\nexport interface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n  onCancel: () => void;\n  timeZone: string;\n}\n\n/**\n * Start and End datetime picker, allowing use to select a specific time range selecting two absolute dates and times.\n * TODO: Use directly the MUI X ``DateTimePicker`` for datetime selection which is better. https://next.mui.com/x/react-date-pickers/date-time-picker/\n *   Use ``DateTimeRangePicker`` directly would be cool but paid https://next.mui.com/x/react-date-pickers/date-time-range-picker/\n * @param initialTimeRange initial time range to pre-select.\n * @param onChange event received when start and end has been selected (click on apply)\n * @param onCancel event received when user click on cancel\n * @constructor\n */\nexport const DateTimeRangePicker = ({\n  initialTimeRange,\n  onChange,\n  onCancel,\n  timeZone,\n}: AbsoluteTimeFormProps): ReactElement => {\n  const stdTimeZone = ['local', 'browser'].includes(timeZone.toLowerCase())\n    ? Intl.DateTimeFormat().resolvedOptions().timeZone\n    : timeZone;\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  const changeTimeRange = (newTime: Date, segment: keyof AbsoluteTimeRange): void => {\n    setTimeRange((prevTimeRange) => {\n      return {\n        ...prevTimeRange,\n        [segment]: newTime,\n      };\n    });\n  };\n\n  const onChangeStartTime = (newStartTime: Date): void => {\n    changeTimeRange(newStartTime, 'start');\n  };\n\n  const onChangeEndTime = (newEndTime: Date): void => {\n    changeTimeRange(newEndTime, 'end');\n  };\n\n  const updateDateRange = (): { start: Date; end: Date } | undefined => {\n    const newDates = {\n      start: timeRange.start,\n      end: timeRange.end,\n    };\n    const isValidDateRange = validateDateRange(newDates.start, newDates.end);\n    if (isValidDateRange) {\n      return newDates;\n    }\n  };\n\n  const onApply = (): void => {\n    const newDates = updateDateRange();\n    if (newDates) {\n      onChange(newDates);\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeStartTime(newValue);\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickersLayout-contentWrapper': {\n                backgroundColor: theme.palette.background.default,\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1} paddingLeft={2}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              timezone={stdTimeZone}\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              minDateTime={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                onChangeEndTime(newValue);\n              }}\n              onAccept={(newValue) => {\n                if (newValue === null) return;\n                setShowStartCalendar(true);\n                onChangeEndTime(newValue);\n              }}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"start_time_input\"\n              timezone={stdTimeZone}\n              label=\"Start Time\"\n              value={new TZDate(timeRange.start, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeStartTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <DateTimeField\n              data-testid=\"end_time_input\"\n              timezone={stdTimeZone}\n              label=\"End Time\"\n              value={new TZDate(timeRange.end, stdTimeZone)}\n              onChange={(event: Date | null) => {\n                if (event) {\n                  onChangeEndTime(event);\n                }\n              }}\n              onBlur={() => updateDateRange()}\n              format={DATE_TIME_FORMAT}\n            />\n          </ErrorBoundary>\n        </Stack>\n        <Stack direction=\"row\" sx={{ padding: (theme) => theme.spacing(0, 1) }} gap={1}>\n          <Button variant=\"contained\" onClick={() => onApply()} fullWidth>\n            Apply\n          </Button>\n          <Button variant=\"outlined\" onClick={() => onCancel()} fullWidth>\n            Cancel\n          </Button>\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["TZDate","Box","Stack","Typography","Button","DateTimeField","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useState","ErrorAlert","ErrorBoundary","DATE_TIME_FORMAT","validateDateRange","DateTimeRangePicker","initialTimeRange","onChange","onCancel","timeZone","stdTimeZone","includes","toLowerCase","Intl","DateTimeFormat","resolvedOptions","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","changeTimeRange","newTime","segment","prevTimeRange","onChangeStartTime","newStartTime","onChangeEndTime","newEndTime","updateDateRange","newDates","start","end","isValidDateRange","onApply","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","variant","paddingLeft","timezone","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","minDateTime","direction","alignItems","gap","pl","pr","FallbackComponent","data-testid","label","event","onBlur","format","onClick","fullWidth"],"mappings":"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"}

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts

@@ -1,7 +1,7 @@
 import { TimeRangeValue } from '@perses-dev/spec';
 import { ReactElement } from 'react';
-import { TimeZoneOption } from '../model/timeZoneOption';
 import { TimeOption } from '../model';
+import { TimeZoneOption } from '../model/timeZoneOption';
 interface TimeRangeSelectorProps {
     /**
      * The current value of the time range.

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,cAAc,EAA+D,MAAM,kBAAkB,CAAC;AAC/G,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAsB,MAAM,yBAAyB,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMtC,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACvD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,mBAA0B,EAC1B,QAAQ,EAAE,YAAY,EACtB,eAAe,EACf,gBAAgB,GACjB,EAAE,sBAAsB,GAAG,YAAY,CA0JvC"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAA+D,MAAM,kBAAkB,CAAC;AAG/G,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAGhE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,cAAc,EAAsB,MAAM,yBAAyB,CAAC;AAM7E,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACvD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,mBAA0B,EAC1B,QAAQ,EAAE,YAAY,EACtB,eAAe,EACf,gBAAgB,GACjB,EAAE,sBAAsB,GAAG,YAAY,CA0JvC"}