@perses-dev/components 0.55.0-rc.1 → 0.55.1

package/dist/FormEditor/form-editor-handle.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Imperative handle exposed by editor forms, allowing their parent to request closing them, e.g. when the user clicks
+ * outside of the Drawer containing the form. The form is responsible for closing itself, after asking for confirmation
+ * if there are unsaved changes.
+ */
+export interface FormEditorHandle {
+    requestClose: () => void;
+}
+//# sourceMappingURL=form-editor-handle.d.ts.map

package/dist/FormEditor/form-editor-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-editor-handle.d.ts","sourceRoot":"","sources":["../../src/FormEditor/form-editor-handle.ts"],"names":[],"mappings":"AAaA;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B"}

package/dist/FormEditor/form-editor-handle.js

@@ -0,0 +1,19 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+/**
+ * Imperative handle exposed by editor forms, allowing their parent to request closing them, e.g. when the user clicks
+ * outside of the Drawer containing the form. The form is responsible for closing itself, after asking for confirmation
+ * if there are unsaved changes.
+ */ export { };
+
+//# sourceMappingURL=form-editor-handle.js.map

package/dist/FormEditor/form-editor-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/FormEditor/form-editor-handle.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\n/**\n * Imperative handle exposed by editor forms, allowing their parent to request closing them, e.g. when the user clicks\n * outside of the Drawer containing the form. The form is responsible for closing itself, after asking for confirmation\n * if there are unsaved changes.\n */\nexport interface FormEditorHandle {\n  requestClose: () => void;\n}\n"],"names":[],"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;;;;CAIC,GACD,WAEC"}

package/dist/FormEditor/index.d.ts

@@ -1,2 +1,3 @@
 export * from './FormActions';
+export * from './form-editor-handle';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC"}

package/dist/FormEditor/index.js

@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from "./FormActions.js";
+export * from "./form-editor-handle.js";
 
 //# sourceMappingURL=index.js.map

package/dist/FormEditor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FormEditor/index.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\nexport * from './FormActions';\n"],"names":[],"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,cAAc,mBAAgB"}
+{"version":3,"sources":["../../src/FormEditor/index.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\nexport * from './FormActions';\nexport * from './form-editor-handle';\n"],"names":[],"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,cAAc,mBAAgB;AAC9B,cAAc,0BAAuB"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAoBtF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGtC,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;IACjH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,mBAAmB,EACnB,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,eAAe,EACf,QAAQ,EACR,sBAAsB,EACtB,GAAG,UAAU,EACd,EAAE,cAAc,GAAG,YAAY,CAiH/B"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../src/Table/TableCell.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,QAAQ,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAoBtF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IACnF,OAAO,EAAE,YAAY,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGtC,YAAY,EAAE,OAAO,CAAC;IACtB,aAAa,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAE3B;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,eAAe,GAAG,YAAY,GAAG,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,KAAK,IAAI,CAAC;IACjH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,KAAK,EACL,mBAAmB,EACnB,UAAmB,EACnB,cAAc,EACd,aAAa,EACb,YAAY,EACZ,WAAW,EACX,KAAK,EACL,KAAK,EACL,eAAe,EACf,QAAQ,EACR,sBAAsB,EACtB,GAAG,UAAU,EACd,EAAE,cAAc,GAAG,YAAY,CAmH/B"}

package/dist/Table/TableCell.js

@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Link, TableCell as MuiTableCell, styled, useTheme } from "@mui/material";
 import { useEffect, useMemo, useRef } from "react";
 import { hasDataFieldPatterns, replaceDataFields } from "../utils/data-field-interpolation.js";
+import { sanitizeUrl } from "../utils/url.js";
 import { getTableCellLayout } from "./model/table-model.js";
 const StyledMuiTableCell = styled(MuiTableCell)(({ theme })=>({
         padding: 0,
@@ -60,16 +61,18 @@ export function TableCell({ children, density, variant, width, defaultColumnHeig
     };
     const modifiedDataLink = useMemo(()=>{
         if (!dataLink) return undefined;
-        if (adjacentCellsValuesMap && hasDataFieldPatterns(dataLink.url)) {
-            const { text } = replaceDataFields(dataLink.url, adjacentCellsValuesMap, {
+        let url = dataLink.url;
+        if (adjacentCellsValuesMap && hasDataFieldPatterns(url)) {
+            url = replaceDataFields(url, adjacentCellsValuesMap, {
                 urlEncode: true
-            });
-            return {
-                ...dataLink,
-                url: text
-            };
+            }).text;
         }
-        return dataLink;
+        const safeUrl = sanitizeUrl(url);
+        if (safeUrl === undefined) return undefined;
+        return {
+            ...dataLink,
+            url: safeUrl
+        };
     }, [
         dataLink,
         adjacentCellsValuesMap

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.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 type { TableCellProps as MuiTableCellProps } from '@mui/material';\nimport { Box, Link, TableCell as MuiTableCell, styled, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { hasDataFieldPatterns, replaceDataFields } from '../utils/data-field-interpolation';\nimport type { DataLink, TableCellAlignment, TableDensity } from './model/table-model';\nimport { getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n  defaultColumnHeight?: 'auto' | number;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n  color?: string;\n  backgroundColor?: string;\n  dataLink?: DataLink;\n  adjacentCellsValuesMap?: Record<string, string>;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  defaultColumnHeight,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  align,\n  color,\n  backgroundColor,\n  dataLink,\n  adjacentCellsValuesMap,\n  ...otherProps\n}: TableCellProps): ReactElement {\n  const theme = useTheme();\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]',\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  const modifiedDataLink = useMemo((): DataLink | undefined => {\n    if (!dataLink) return undefined;\n\n    if (adjacentCellsValuesMap && hasDataFieldPatterns(dataLink.url)) {\n      const { text } = replaceDataFields(dataLink.url, adjacentCellsValuesMap, { urlEncode: true });\n      return { ...dataLink, url: text };\n    }\n    return dataLink;\n  }, [dataLink, adjacentCellsValuesMap]);\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      style={{ width: width }}\n      sx={{\n        position: 'relative',\n        borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,\n        '&:hover #original-cell': {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 10,\n          width: 'fit-content',\n          minWidth: '100%',\n          whiteSpace: 'nowrap',\n          overflow: 'visible',\n          backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,\n          outline: `solid 1px ${theme.palette.info.main}`,\n          outlineOffset: '-1px',\n        },\n      }}\n      ref={elRef}\n    >\n      <Box\n        id=\"original-cell\"\n        sx={{\n          ...getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        style={{\n          backgroundColor: backgroundColor ?? 'inherit',\n          color: color ?? 'inherit',\n        }}\n        title={description}\n        aria-label={description}\n        textAlign={align}\n      >\n        {modifiedDataLink ? (\n          <Link\n            href={modifiedDataLink.url}\n            target={modifiedDataLink.targetBlank ? '_blank' : '_self'}\n            rel={modifiedDataLink.targetBlank ? 'noopener noreferrer' : undefined}\n          >\n            {children}\n          </Link>\n        ) : (\n          children\n        )}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["Box","Link","TableCell","MuiTableCell","styled","useTheme","useEffect","useMemo","useRef","hasDataFieldPatterns","replaceDataFields","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","defaultColumnHeight","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","align","color","dataLink","adjacentCellsValuesMap","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","modifiedDataLink","undefined","url","text","urlEncode","tabIndex","onFocus","onClick","onKeyUp","style","sx","position","borderBottom","grey","top","left","zIndex","minWidth","whiteSpace","overflow","info","ref","id","textOverflow","flexDirection","title","aria-label","textAlign","href","target","targetBlank","rel"],"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,GAAG,EAAEC,IAAI,EAAEC,aAAaC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AAEvF,SAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAEnD,SAASC,oBAAoB,EAAEC,iBAAiB,QAAQ,uCAAoC;AAE5F,SAASC,kBAAkB,QAAQ,yBAAsB;AAEzD,MAAMC,qBAAqBR,OAAOD,cAAc,CAAC,EAAEU,KAAK,EAAE,GAAM,CAAA;QAC9DC,SAAS;QACTC,iBAAiB;QAEjB,uBAAuB;YACrB,kEAAkE;YAClEA,iBAAiBF,MAAMG,OAAO,CAACC,UAAU,CAACC,OAAO;QACnD;QACA,mBAAmB;YACjBC,SAAS,CAAC,UAAU,EAAEN,MAAMG,OAAO,CAACI,OAAO,CAACC,IAAI,EAAE;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,eAAe;YACfC,cAAc;QAChB;IACF,CAAA;AAuCA,OAAO,SAASrB,UAAU,EACxBsB,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,mBAAmB,EACnBC,aAAa,MAAM,EACnBC,cAAc,EACdC,aAAa,EACbC,YAAY,EACZC,WAAW,EACXC,KAAK,EACLC,KAAK,EACLpB,eAAe,EACfqB,QAAQ,EACRC,sBAAsB,EACtB,GAAGC,YACY;IACf,MAAMzB,QAAQR;IACd,MAAMkC,QAAQ/B;IAEd,MAAMgC,WAAWd,YAAY;IAE7BpB,UAAU;QACR,IAAIuB,eAAe,mBAAmBU,MAAME,OAAO,EAAE;YACnDF,MAAME,OAAO,CAACC,KAAK;QACrB;IACF,GAAG;QAACb;KAAW;IAEf,MAAMc,cAA6D,CAACC;QAClE,4DAA4D;QAC5D,MAAMC,oBAAoBD,EAAEE,aAAa,EAAEC,cACzC;QAEF,IAAIF,mBAAmB;YACrB,uEAAuE;YACvE,6CAA6C;YAC7CA,kBAAkBH,KAAK;QACzB;IACF;IAEA,MAAMM,gCAAkE,CAACJ;QACvE,wEAAwE;QACxE,uEAAuE;QACvE,iEAAiE;QACjE,yEAAyE;QACzE,0CAA0C;QAC1Cd,iBAAiBc;IACnB;IAEA,MAAMK,mBAAmB1C,QAAQ;QAC/B,IAAI,CAAC6B,UAAU,OAAOc;QAEtB,IAAIb,0BAA0B5B,qBAAqB2B,SAASe,GAAG,GAAG;YAChE,MAAM,EAAEC,IAAI,EAAE,GAAG1C,kBAAkB0B,SAASe,GAAG,EAAEd,wBAAwB;gBAAEgB,WAAW;YAAK;YAC3F,OAAO;gBAAE,GAAGjB,QAAQ;gBAAEe,KAAKC;YAAK;QAClC;QACA,OAAOhB;IACT,GAAG;QAACA;QAAUC;KAAuB;IAErC,qBACE,KAACzB;QACE,GAAG0B,UAAU;QACd,2EAA2E;QAC3E,wEAAwE;QACxE,qEAAqE;QACrE,QAAQ;QACRgB,UAAUzB,eAAe,SAAS,IAAI,CAAC;QACvC0B,SAASZ;QACTa,SAASR;QACTS,SAAST;QACTU,OAAO;YAAE/B,OAAOA;QAAM;QACtBgC,IAAI;YACFC,UAAU;YACVC,cAAcrB,WAAW,CAAC,UAAU,EAAE3B,MAAMG,OAAO,CAAC8C,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,UAAU,EAAEjD,MAAMG,OAAO,CAAC8C,IAAI,CAAC,GAAG,EAAE;YACvG,0BAA0B;gBACxBF,UAAU;gBACVG,KAAK;gBACLC,MAAM;gBACNC,QAAQ;gBACRtC,OAAO;gBACPuC,UAAU;gBACVC,YAAY;gBACZC,UAAU;gBACVrD,iBAAiB,GAAGA,mBAAmBF,MAAMG,OAAO,CAACC,UAAU,CAACC,OAAO,CAAC,WAAW,CAAC;gBACpFC,SAAS,CAAC,UAAU,EAAEN,MAAMG,OAAO,CAACqD,IAAI,CAAChD,IAAI,EAAE;gBAC/CC,eAAe;YACjB;QACF;QACAgD,KAAK/B;kBAEL,cAAA,KAACvC;YACCuE,IAAG;YACHZ,IAAI;gBACF,GAAGhD,mBAAmBE,OAAOY,SAAS;oBAAEe;oBAAUR;oBAAcD;oBAAeH;gBAAoB,EAAE;gBACrGgC,UAAU;gBAEV,mEAAmE;gBACnE,mDAAmD;gBACnDO,YAAY;gBACZC,UAAU;gBACVI,cAAc;gBAEd,uEAAuE;gBACvE,uEAAuE;gBACvE,cAAc;gBACdC,eAAe;YACjB;YACAf,OAAO;gBACL3C,iBAAiBA,mBAAmB;gBACpCoB,OAAOA,SAAS;YAClB;YACAuC,OAAOzC;YACP0C,cAAY1C;YACZ2C,WAAW1C;sBAEVe,iCACC,KAAChD;gBACC4E,MAAM5B,iBAAiBE,GAAG;gBAC1B2B,QAAQ7B,iBAAiB8B,WAAW,GAAG,WAAW;gBAClDC,KAAK/B,iBAAiB8B,WAAW,GAAG,wBAAwB7B;0BAE3D1B;iBAGHA;;;AAKV"}
+{"version":3,"sources":["../../src/Table/TableCell.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 type { TableCellProps as MuiTableCellProps } from '@mui/material';\nimport { Box, Link, TableCell as MuiTableCell, styled, useTheme } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\n\nimport { hasDataFieldPatterns, replaceDataFields } from '../utils/data-field-interpolation';\nimport { sanitizeUrl } from '../utils/url';\nimport type { DataLink, TableCellAlignment, TableDensity } from './model/table-model';\nimport { getTableCellLayout } from './model/table-model';\n\nconst StyledMuiTableCell = styled(MuiTableCell)(({ theme }) => ({\n  padding: 0,\n  backgroundColor: 'inherit',\n\n  '&.MuiTableCell-head': {\n    // Important to avoid scrolling behind the header showing through.\n    backgroundColor: theme.palette.background.default,\n  },\n  '&:focus-visible': {\n    outline: `solid 1px ${theme.palette.primary.main}`,\n    // Move inward a little to avoid getting cut off when focusing on items\n    // at the edge of the table.\n    outlineOffset: '-1px',\n    borderRadius: 0,\n  },\n}));\n\nexport interface TableCellProps extends Omit<MuiTableCellProps, 'tabIndex' | 'align'> {\n  density: TableDensity;\n  defaultColumnHeight?: 'auto' | number;\n\n  // These values are used to adjust the spacing for the first/last columns.\n  isLastColumn: boolean;\n  isFirstColumn: boolean;\n\n  align?: TableCellAlignment;\n\n  /**\n   * Additional information to be displayed when hovering over the cell. This\n   * may be the full cell value (e.g. to enable the user to see the full value\n   * if it is ellipsized to fit into the space) or some other descriptive text\n   * that is useful for the user.\n   *\n   * The hover behavior is currently managed with the `title` attribute, but this\n   * may be changed to a tooltip in the future.\n   */\n  description?: string;\n\n  /**\n   * How the cell should behave related to focus.\n   * - `trigger-focus`: the cell should be auto-focused when it renders.\n   * - `focus-next`: the cell should have tabindex=\"0\", so that it will be\n   *   focused the next time someone tabs with a keyboard.\n   * - `none`: the cell should have tabindex=\"-1\", so it is not focused by\n   *   keyboard interactions at this time.\n   */\n  focusState?: 'trigger-focus' | 'focus-next' | 'none';\n  onFocusTrigger?: (e: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;\n  color?: string;\n  backgroundColor?: string;\n  dataLink?: DataLink;\n  adjacentCellsValuesMap?: Record<string, string>;\n}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  defaultColumnHeight,\n  focusState = 'none',\n  onFocusTrigger,\n  isFirstColumn,\n  isLastColumn,\n  description,\n  align,\n  color,\n  backgroundColor,\n  dataLink,\n  adjacentCellsValuesMap,\n  ...otherProps\n}: TableCellProps): ReactElement {\n  const theme = useTheme();\n  const elRef = useRef<HTMLTableCellElement>();\n\n  const isHeader = variant === 'head';\n\n  useEffect(() => {\n    if (focusState === 'trigger-focus' && elRef.current) {\n      elRef.current.focus();\n    }\n  }, [focusState]);\n\n  const handleFocus: React.FocusEventHandler<HTMLTableCellElement> = (e) => {\n    // From https://zellwk.com/blog/keyboard-focusable-elements/\n    const nestedFocusTarget = e.currentTarget?.querySelector<HTMLElement>(\n      'a[href], button, input, textarea, select, details,[role=\"button\"]',\n    );\n    if (nestedFocusTarget) {\n      // If the cell has a focusable child, focus it instead. Mostly used for\n      // checkbox cells, but could have other uses.\n      nestedFocusTarget.focus();\n    }\n  };\n\n  const handleInteractionFocusTrigger: TableCellProps['onFocusTrigger'] = (e) => {\n    // We use `onClick` and `onKeyUp` events instead of `onFocus` because of\n    // some ordering issues with when the browser calls events and how this\n    // plays with the triggering of focus with keyboard interactions.\n    // These report that a focus event happened, so we can adjust the current\n    // tabindex and focuses to the right cell.\n    onFocusTrigger?.(e);\n  };\n\n  const modifiedDataLink = useMemo((): DataLink | undefined => {\n    if (!dataLink) return undefined;\n\n    let url = dataLink.url;\n    if (adjacentCellsValuesMap && hasDataFieldPatterns(url)) {\n      url = replaceDataFields(url, adjacentCellsValuesMap, { urlEncode: true }).text;\n    }\n    const safeUrl = sanitizeUrl(url);\n    if (safeUrl === undefined) return undefined;\n    return { ...dataLink, url: safeUrl };\n  }, [dataLink, adjacentCellsValuesMap]);\n\n  return (\n    <StyledMuiTableCell\n      {...otherProps}\n      // Modify the tab index based on the currently focused cell. It's important\n      // to avoid having tabindex 0 on everything because it essentially traps\n      // a keyboard user in the table until they hit \"tab\" for every single\n      // cell.\n      tabIndex={focusState !== 'none' ? 0 : -1}\n      onFocus={handleFocus}\n      onClick={handleInteractionFocusTrigger}\n      onKeyUp={handleInteractionFocusTrigger}\n      style={{ width: width }}\n      sx={{\n        position: 'relative',\n        borderBottom: isHeader ? `solid 1px ${theme.palette.grey[100]}` : `solid 1px ${theme.palette.grey[50]}`,\n        '&:hover #original-cell': {\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          zIndex: 10,\n          width: 'fit-content',\n          minWidth: '100%',\n          whiteSpace: 'nowrap',\n          overflow: 'visible',\n          backgroundColor: `${backgroundColor ?? theme.palette.background.default} !important`,\n          outline: `solid 1px ${theme.palette.info.main}`,\n          outlineOffset: '-1px',\n        },\n      }}\n      ref={elRef}\n    >\n      <Box\n        id=\"original-cell\"\n        sx={{\n          ...getTableCellLayout(theme, density, { isHeader, isLastColumn, isFirstColumn, defaultColumnHeight }),\n          position: 'relative',\n\n          // Text truncation. Currently enforced on all cells. We may control\n          // this with a prop on column config in the future.\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n\n          // Need to inherit from the MUI cell because this manages some ordering\n          // that the `TableSortLabel` uses to determine the location of the icon\n          // in headers.\n          flexDirection: 'inherit',\n        }}\n        style={{\n          backgroundColor: backgroundColor ?? 'inherit',\n          color: color ?? 'inherit',\n        }}\n        title={description}\n        aria-label={description}\n        textAlign={align}\n      >\n        {modifiedDataLink ? (\n          <Link\n            href={modifiedDataLink.url}\n            target={modifiedDataLink.targetBlank ? '_blank' : '_self'}\n            rel={modifiedDataLink.targetBlank ? 'noopener noreferrer' : undefined}\n          >\n            {children}\n          </Link>\n        ) : (\n          children\n        )}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["Box","Link","TableCell","MuiTableCell","styled","useTheme","useEffect","useMemo","useRef","hasDataFieldPatterns","replaceDataFields","sanitizeUrl","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","defaultColumnHeight","focusState","onFocusTrigger","isFirstColumn","isLastColumn","description","align","color","dataLink","adjacentCellsValuesMap","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","modifiedDataLink","undefined","url","urlEncode","text","safeUrl","tabIndex","onFocus","onClick","onKeyUp","style","sx","position","borderBottom","grey","top","left","zIndex","minWidth","whiteSpace","overflow","info","ref","id","textOverflow","flexDirection","title","aria-label","textAlign","href","target","targetBlank","rel"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEhH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AASxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IACvC,YAAY,EAAE,iBAAiB,CAAC;IAChC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAyRjD"}
+{"version":3,"file":"VirtualizedTable.d.ts","sourceRoot":"","sources":["../../src/Table/VirtualizedTable.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAEhH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAqB,MAAM,qBAAqB,CAAC;AAQ3F,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AA2DxD,MAAM,MAAM,qBAAqB,CAAC,SAAS,IAAI,QAAQ,CACrD,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,qBAAqB,GAAG,oBAAoB,CAAC,CAC3G,GACC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,gBAAgB,GAAG,eAAe,GAAG,YAAY,GAAG,oBAAoB,CAAC,GAAG;IACtG,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClF,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;IACvC,YAAY,EAAE,iBAAiB,CAAC;IAChC,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,IAAI,CACjB,iBAAiB,CAAC,SAAS,CAAC,EAC1B,iBAAiB,GACjB,cAAc,GACd,sBAAsB,GACtB,uBAAuB,GACvB,SAAS,GACT,2BAA2B,GAC3B,oBAAoB,GACpB,eAAe,GACf,mBAAmB,CACtB,CAAC;CACH,CAAC;AAKJ,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,EAC1C,KAAK,EACL,MAAM,EACN,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,QAAQ,EACR,aAAa,GACd,EAAE,qBAAqB,CAAC,SAAS,CAAC,GAAG,YAAY,CAmPjD"}

package/dist/Table/VirtualizedTable.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // limitations under the License.
 import { Box, TablePagination, TableRow as MuiTableRow } from "@mui/material";
 import { flexRender } from "@tanstack/react-table";
-import { useMemo, useRef } from "react";
+import { forwardRef, useMemo, useRef } from "react";
 import { TableVirtuoso } from "react-virtuoso";
 import { useVirtualizedTableKeyboardNav } from "./hooks/useVirtualizedTableKeyboardNav.js";
 import { InnerTable } from "./InnerTable.js";
@@ -25,6 +25,54 @@ import { TableHeaderCell } from "./TableHeaderCell.js";
 import { TableRow } from "./TableRow.js";
 import { TableToolbar } from "./TableToolbar.js";
 import { VirtualizedTableContainer } from "./VirtualizedTableContainer.js";
+// Defined outside VirtualizedTable so the object reference is stable and
+// TableVirtuoso never remounts its internal components due to a changed prop.
+// Props that vary per-render are passed via the `context` prop instead.
+const VirtuosoTableComponents = {
+    Scroller: /*#__PURE__*/ forwardRef(({ context: _, ...props }, ref)=>/*#__PURE__*/ _jsx(VirtualizedTableContainer, {
+            ...props,
+            ref: ref
+        })),
+    Table: ({ context, ...props })=>/*#__PURE__*/ _jsx(InnerTable, {
+            ...props,
+            width: context.width,
+            density: context.density,
+            onKeyDown: context.onTableKeyDown,
+            onBlur: context.onTableBlur
+        }),
+    TableHead: /*#__PURE__*/ forwardRef(({ context: _, ...props }, ref)=>/*#__PURE__*/ _jsx(TableHead, {
+            ...props,
+            ref: ref
+        })),
+    TableFoot: /*#__PURE__*/ forwardRef(({ context: _, ...props }, ref)=>/*#__PURE__*/ _jsx(TableFoot, {
+            ...props,
+            ref: ref
+        })),
+    TableRow: ({ item, context, ...props })=>{
+        if (!item) {
+            return null;
+        }
+        const rowEventOpts = {
+            id: item.id,
+            index: item.index
+        };
+        return /*#__PURE__*/ _jsx(TableRow, {
+            ...props,
+            onClick: (e)=>context.onRowClick(e, item.id),
+            density: context.density,
+            onMouseOver: (e)=>{
+                context.onRowMouseOver?.(e, rowEventOpts);
+            },
+            onMouseOut: (e)=>{
+                context.onRowMouseOut?.(e, rowEventOpts);
+            }
+        });
+    },
+    TableBody: /*#__PURE__*/ forwardRef(({ context: _, ...props }, ref)=>/*#__PURE__*/ _jsx(TableBody, {
+            ...props,
+            ref: ref
+        }))
+};
 // Separating out the virtualized table because we may want a paginated table
 // in the future that does not need virtualization, and we'd likely lay them
 // out differently.
@@ -54,53 +102,22 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
         }
         return 'none';
     };
-    const VirtuosoTableComponents = useMemo(()=>{
-        return {
-            Scroller: VirtualizedTableContainer,
-            Table: (props)=>{
-                return /*#__PURE__*/ _jsx(InnerTable, {
-                    ...props,
-                    width: width,
-                    density: density,
-                    onKeyDown: keyboardNav.onTableKeyDown,
-                    onBlur: keyboardNav.onTableBlur
-                });
-            },
-            TableHead,
-            TableFoot,
-            TableRow: ({ item: _item, ...props })=>{
-                const index = props['data-index'];
-                const row = rows[index];
-                if (!row) {
-                    return null;
-                }
-                const rowEventOpts = {
-                    id: row.id,
-                    index: row.index
-                };
-                return /*#__PURE__*/ _jsx(TableRow, {
-                    ...props,
-                    onClick: (e)=>onRowClick(e, row.id),
-                    density: density,
-                    onMouseOver: (e)=>{
-                        onRowMouseOver?.(e, rowEventOpts);
-                    },
-                    onMouseOut: (e)=>{
-                        onRowMouseOut?.(e, rowEventOpts);
-                    }
-                });
-            },
-            TableBody
-        };
-    }, [
+    const tableContext = useMemo(()=>({
+            width,
+            density,
+            onTableKeyDown: keyboardNav.onTableKeyDown,
+            onTableBlur: keyboardNav.onTableBlur,
+            onRowClick,
+            onRowMouseOver,
+            onRowMouseOut
+        }), [
+        width,
         density,
         keyboardNav.onTableKeyDown,
         keyboardNav.onTableBlur,
         onRowClick,
-        onRowMouseOut,
         onRowMouseOver,
-        rows,
-        width
+        onRowMouseOut
     ]);
     const handleChangePage = (_event, newPage)=>{
         if (!pagination || !onPaginationChange) return;
@@ -141,8 +158,9 @@ export function VirtualizedTable({ width, height, density, defaultColumnWidth, d
             }),
             /*#__PURE__*/ _jsx(TableVirtuoso, {
                 ref: virtuosoRef,
-                totalCount: rows.length,
+                data: rows,
                 components: VirtuosoTableComponents,
+                context: tableContext,
                 // Note: this value is impacted by overscan. See this issue if overscan
                 // is added.
                 // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138

package/dist/Table/VirtualizedTable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport type { Column, ColumnSizingInfoState, ColumnSizingState, HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef } from 'react';\nimport type { TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { InnerTable } from './InnerTable';\nimport type { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { TableBody } from './TableBody';\nimport type { TableCellProps } from './TableCell';\nimport { TableCell } from './TableCell';\nimport { TableFoot } from './TableFoot';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableRow } from './TableRow';\nimport type { TableToolbarProps } from './TableToolbar';\nimport { TableToolbar } from './TableToolbar';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnHeight' | 'defaultColumnWidth'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n    rows: Array<Row<TableData>>;\n    columns: Array<Column<TableData, unknown>>;\n    headers: Array<HeaderGroup<TableData>>;\n    columnSizing: ColumnSizingState;\n    columnSizingInfo: ColumnSizingInfoState;\n    cellConfigs?: TableCellConfigs;\n    rowCount: number;\n    toolbarConfig: Pick<\n      TableToolbarProps<TableData>,\n      | 'isSearchEnabled'\n      | 'globalFilter'\n      | 'onGlobalFilterChange'\n      | 'isColumnFilterEnabled'\n      | 'columns'\n      | 'columnFilterMenuMaxHeight'\n      | 'isExpandAllEnabled'\n      | 'isAllExpanded'\n      | 'onExpandAllChange'\n    >;\n  };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  'use no memo'; // TanStack Table row and column getters read mutable state behind stable identities.\n\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const VirtuosoTableComponents: TableComponents<TableData> = useMemo(() => {\n    return {\n      Scroller: VirtualizedTableContainer,\n      Table: (props): ReactElement => {\n        return (\n          <InnerTable\n            {...props}\n            width={width}\n            density={density}\n            onKeyDown={keyboardNav.onTableKeyDown}\n            onBlur={keyboardNav.onTableBlur}\n          />\n        );\n      },\n      TableHead,\n      TableFoot,\n      TableRow: ({ item: _item, ...props }): ReactElement | null => {\n        const index = props['data-index'];\n        const row = rows[index];\n        if (!row) {\n          return null;\n        }\n\n        const rowEventOpts: TableRowEventOpts = { id: row.id, index: row.index };\n\n        return (\n          <TableRow\n            {...props}\n            onClick={(e) => onRowClick(e, row.id)}\n            density={density}\n            onMouseOver={(e) => {\n              onRowMouseOver?.(e, rowEventOpts);\n            }}\n            onMouseOut={(e) => {\n              onRowMouseOut?.(e, rowEventOpts);\n            }}\n          />\n        );\n      },\n      TableBody,\n    };\n  }, [\n    density,\n    keyboardNav.onTableKeyDown,\n    keyboardNav.onTableBlur,\n    onRowClick,\n    onRowMouseOut,\n    onRowMouseOver,\n    rows,\n    width,\n  ]);\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we calculate all column sizes once per render at the root table level\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars: { [key: string]: number } = {};\n  headers.forEach((headerGroup) => {\n    headerGroup.headers\n      .filter((header) => header.column.getCanResize())\n      .forEach((header) => {\n        columnSizeVars[`--header-${header.id}-size`] = header.getSize();\n        columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();\n      });\n  });\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\n      <TableToolbar {...toolbarConfig} width={width} />\n      <TableVirtuoso\n        ref={virtuosoRef}\n        totalCount={rows.length}\n        components={VirtuosoTableComponents}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={\n                            header.column.getCanResize()\n                              ? `calc(var(--header-${header?.id}-size) * 1px)`\n                              : column.getSize() || defaultColumnWidth\n                          }\n                          defaultColumnHeight={defaultColumnHeight}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                          resizeConfig={\n                            header.column.getCanResize()\n                              ? {\n                                  resizeHandler: header.getResizeHandler(),\n                                  resetSizeHandler: header.column.resetSize,\n                                  isResizing: header.column.getIsResizing(),\n                                }\n                              : undefined\n                          }\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        fixedFooterContent={\n          pagination\n            ? (): ReactElement => (\n                <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                  <TablePagination\n                    colSpan={columns.length}\n                    count={rowCount}\n                    page={pagination.pageIndex}\n                    rowsPerPage={pagination.pageSize}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                  />\n                </MuiTableRow>\n              )\n            : undefined\n        }\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                /*\n                     IMPORTANT:\n                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)\n                     Components have no access to any context (Which is intentional and correct)\n                     We may want to add parameters to a link from neighboring cells in the future as well.\n                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)\n                  */\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                /* this has been specifically added for the data link,\n                     therefore, non string and numeric values should be excluded\n                  */\n                const adjacentCellsValuesMap = Object.entries(row.original as Record<string, unknown>)\n                  ?.filter(([_, value]) => ['string', 'number'].includes(typeof value))\n                  .reduce(\n                    (acc, [key, value]) => ({\n                      ...acc,\n                      [key]: String(value),\n                    }),\n                    {},\n                  );\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={\n                      cell.column.getCanResize()\n                        ? `calc(var(--col-${cell.column.id}-size) * 1px)`\n                        : cell.column.getSize() || defaultColumnWidth\n                    }\n                    defaultColumnHeight={defaultColumnHeight}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                    dataLink={cell.column.columnDef.meta?.dataLink}\n                    adjacentCellsValuesMap={adjacentCellsValuesMap}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","TablePagination","TableRow","MuiTableRow","flexRender","useMemo","useRef","TableVirtuoso","useVirtualizedTableKeyboardNav","InnerTable","TableBody","TableCell","TableFoot","TableHead","TableHeaderCell","TableToolbar","VirtualizedTableContainer","VirtualizedTable","width","height","density","defaultColumnWidth","defaultColumnHeight","onRowClick","onRowMouseOver","onRowMouseOut","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","toolbarConfig","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","VirtuosoTableComponents","Scroller","Table","props","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","_item","index","rowEventOpts","id","onClick","e","onMouseOver","onMouseOut","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","columnSizeVars","forEach","headerGroup","filter","header","getCanResize","getSize","style","ref","totalCount","components","rangeChanged","fixedHeaderContent","map","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","resizeConfig","resizeHandler","getResizeHandler","resetSizeHandler","resetSize","isResizing","getIsResizing","getContext","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","adjacentCellsValuesMap","Object","entries","original","_","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,eAAe,EAAEC,YAAYC,WAAW,QAAQ,gBAAgB;AAE9E,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,OAAO,EAAEC,MAAM,QAAQ,QAAQ;AAExC,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,4CAAyC;AACxF,SAASC,UAAU,QAAQ,kBAAe;AAE1C,SAASC,SAAS,QAAQ,iBAAc;AAExC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,SAAS,QAAQ,iBAAc;AACxC,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASZ,QAAQ,QAAQ,gBAAa;AAEtC,SAASa,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,yBAAyB,QAAQ,iCAA8B;AAiCxE,6EAA6E;AAC7E,4EAA4E;AAC5E,mBAAmB;AACnB,OAAO,SAASC,iBAA4B,EAC1CC,KAAK,EACLC,MAAM,EACNC,OAAO,EACPC,kBAAkB,EAClBC,mBAAmB,EACnBC,UAAU,EACVC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,WAAW,EACXC,UAAU,EACVC,kBAAkB,EAClBC,QAAQ,EACRC,aAAa,EACoB;IACjC,eAAe,qFAAqF;IAEpG,MAAMC,cAAc5B,OAA4B;IAChD,uEAAuE;IACvE,0EAA0E;IAC1E,oCAAoC;IACpC,MAAM6B,eAAe7B,OAAO;QAC1B8B,YAAY;QACZC,UAAU;IACZ;IAEA,MAAMC,kBAA0E,CAACC;QAC/EJ,aAAaK,OAAO,GAAGD;IACzB;IAEA,MAAME,cAAcjC,+BAA+B;QACjD2B,cAAcA;QACdO,cAAcR;QAEd,gCAAgC;QAChCS,SAASjB,KAAKkB,MAAM,GAAG;QACvBC,YAAYlB,QAAQiB,MAAM;IAC5B;IAEA,MAAME,gBAAgB,CAACC;QACrB,IAAIA,aAAaC,GAAG,KAAKP,YAAYQ,UAAU,CAACD,GAAG,IAAID,aAAaG,MAAM,KAAKT,YAAYQ,UAAU,CAACC,MAAM,EAAE;YAC5G,OAAOT,YAAYU,QAAQ,GAAG,kBAAkB;QAClD;QAEA,OAAO;IACT;IAEA,MAAMC,0BAAsD/C,QAAQ;QAClE,OAAO;YACLgD,UAAUrC;YACVsC,OAAO,CAACC;gBACN,qBACE,KAAC9C;oBACE,GAAG8C,KAAK;oBACTrC,OAAOA;oBACPE,SAASA;oBACToC,WAAWf,YAAYgB,cAAc;oBACrCC,QAAQjB,YAAYkB,WAAW;;YAGrC;YACA9C;YACAD;YACAV,UAAU,CAAC,EAAE0D,MAAMC,KAAK,EAAE,GAAGN,OAAO;gBAClC,MAAMO,QAAQP,KAAK,CAAC,aAAa;gBACjC,MAAMP,MAAMtB,IAAI,CAACoC,MAAM;gBACvB,IAAI,CAACd,KAAK;oBACR,OAAO;gBACT;gBAEA,MAAMe,eAAkC;oBAAEC,IAAIhB,IAAIgB,EAAE;oBAAEF,OAAOd,IAAIc,KAAK;gBAAC;gBAEvE,qBACE,KAAC5D;oBACE,GAAGqD,KAAK;oBACTU,SAAS,CAACC,IAAM3C,WAAW2C,GAAGlB,IAAIgB,EAAE;oBACpC5C,SAASA;oBACT+C,aAAa,CAACD;wBACZ1C,iBAAiB0C,GAAGH;oBACtB;oBACAK,YAAY,CAACF;wBACXzC,gBAAgByC,GAAGH;oBACrB;;YAGN;YACArD;QACF;IACF,GAAG;QACDU;QACAqB,YAAYgB,cAAc;QAC1BhB,YAAYkB,WAAW;QACvBpC;QACAE;QACAD;QACAE;QACAR;KACD;IAED,MAAMmD,mBAAmB,CAACC,QAAoDC;QAC5E,IAAI,CAACzC,cAAc,CAACC,oBAAoB;QACxCA,mBAAmB;YAAE,GAAGD,UAAU;YAAE0C,WAAWD;QAAQ;IACzD;IAEA,MAAME,0BAA0B,CAACC;QAC/B,IAAI,CAAC5C,cAAc,CAACC,oBAAoB;QACxCA,mBAAmB;YAAEyC,WAAW;YAAGG,UAAUC,SAASF,MAAMG,MAAM,CAACC,KAAK,EAAE;QAAI;IAChF;IAEA;;;;;GAKC,GACD,MAAMC,iBAA4C,CAAC;IACnDnD,QAAQoD,OAAO,CAAC,CAACC;QACfA,YAAYrD,OAAO,CAChBsD,MAAM,CAAC,CAACC,SAAWA,OAAOjC,MAAM,CAACkC,YAAY,IAC7CJ,OAAO,CAAC,CAACG;YACRJ,cAAc,CAAC,CAAC,SAAS,EAAEI,OAAOnB,EAAE,CAAC,KAAK,CAAC,CAAC,GAAGmB,OAAOE,OAAO;YAC7DN,cAAc,CAAC,CAAC,MAAM,EAAEI,OAAOjC,MAAM,CAACc,EAAE,CAAC,KAAK,CAAC,CAAC,GAAGmB,OAAOjC,MAAM,CAACmC,OAAO;QAC1E;IACJ;IAEA,qBACE,MAACrF;QAAIsF,OAAO;YAAEpE;YAAOC;YAAQ,GAAG4D,cAAc;QAAC;;0BAC7C,KAAChE;gBAAc,GAAGkB,aAAa;gBAAEf,OAAOA;;0BACxC,KAACX;gBACCgF,KAAKrD;gBACLsD,YAAY9D,KAAKkB,MAAM;gBACvB6C,YAAYrC;gBACZ,uEAAuE;gBACvE,YAAY;gBACZ,8EAA8E;gBAC9EsC,cAAcpD;gBACdqD,oBAAoB;oBAClB,qBACE;kCACG/D,QAAQgE,GAAG,CAAC,CAACX;4BACZ,qBACE,KAAC/E;gCAA8BkB,SAASA;0CACrC6D,YAAYrD,OAAO,CAACgE,GAAG,CAAC,CAACT,QAAQU,GAAGjE;oCACnC,MAAMsB,SAASiC,OAAOjC,MAAM;oCAC5B,MAAM4C,WAA8B;wCAClC9C,KAAK;wCACLE,QAAQ2C;oCACV;oCAEA,MAAME,WAAW7C,OAAO8C,WAAW;oCACnC,MAAMC,cAAc/C,OAAOgD,mBAAmB;oCAE9C,qBACE,KAACpF;wCAECqF,QAAQjD,OAAOkD,UAAU,KAAKlD,OAAOmD,uBAAuB,KAAKC;wCACjEC,eAAe,OAAOR,aAAa,WAAWA,WAAWO;wCACzDE,mBAAmB,OAAOP,gBAAgB,WAAWA,cAAcK;wCACnEpF,OACEiE,OAAOjC,MAAM,CAACkC,YAAY,KACtB,CAAC,kBAAkB,EAAED,QAAQnB,GAAG,aAAa,CAAC,GAC9Cd,OAAOmC,OAAO,MAAMhE;wCAE1BC,qBAAqBA;wCACrBmF,OAAOvD,OAAOwD,SAAS,CAACC,IAAI,EAAEF;wCAC9BG,SAAQ;wCACRxF,SAASA;wCACTyF,aAAa3D,OAAOwD,SAAS,CAACC,IAAI,EAAEG;wCACpCC,YAAYjE,cAAcgD;wCAC1BkB,gBAAgB,IAAMvE,YAAYwE,WAAW,CAACnB;wCAC9CoB,eAAerB,MAAM;wCACrBsB,cAActB,MAAMjE,QAAQgB,MAAM,GAAG;wCACrCwE,cACEjC,OAAOjC,MAAM,CAACkC,YAAY,KACtB;4CACEiC,eAAelC,OAAOmC,gBAAgB;4CACtCC,kBAAkBpC,OAAOjC,MAAM,CAACsE,SAAS;4CACzCC,YAAYtC,OAAOjC,MAAM,CAACwE,aAAa;wCACzC,IACApB;kDAGLlG,WAAW8C,OAAOwD,SAAS,CAACvB,MAAM,EAAEA,OAAOwC,UAAU;uCA5BjDxC,OAAOnB,EAAE;gCA+BpB;+BA5CaiB,YAAYjB,EAAE;wBA+CjC;;gBAGN;gBACA4D,oBACE9F,aACI,kBACE,KAAC3B;wBAAY0H,IAAI;4BAAEC,iBAAiB,CAACC,QAAUA,MAAMC,OAAO,CAACC,UAAU,CAACC,OAAO;wBAAC;kCAC9E,cAAA,KAACjI;4BACCkI,SAASxG,QAAQiB,MAAM;4BACvBwF,OAAOpG;4BACPqG,MAAMvG,WAAW0C,SAAS;4BAC1B8D,aAAaxG,WAAW6C,QAAQ;4BAChC4D,cAAclE;4BACdmE,qBAAqB/D;;yBAI3B6B;gBAENmC,aAAa,CAAC3E;oBACZ,MAAMd,MAAMtB,IAAI,CAACoC,MAAM;oBACvB,IAAI,CAACd,KAAK;wBACR,OAAO;oBACT;oBAEA,qBACE;kCACGA,IAAI0F,eAAe,GAAG9C,GAAG,CAAC,CAAC+C,MAAM9C,GAAG+C;4BACnC,MAAM9C,WAA8B;gCAClC9C,KAAKc,QAAQ;gCACbZ,QAAQ2C;4BACV;4BAEA,MAAMgD,cAAcF,KAAKhB,UAAU;4BACnC,MAAMmB,aAAajH,aAAa,CAACgH,YAAYF,IAAI,CAAC3E,EAAE,CAAC;4BAErD,MAAM+E,eAAeJ,KAAKzF,MAAM,CAACwD,SAAS,CAACiC,IAAI;4BAC/C,MAAMK,cAAc,OAAOD,iBAAiB,aAAaA,aAAaF,eAAe;4BAErF;;;;;;kBAME,GAEF,MAAMI,qBAAqBN,KAAKzF,MAAM,CAACwD,SAAS,CAACC,IAAI,EAAEuC;4BACvD,IAAIrC,cAAkCP;4BACtC,IAAI,OAAO2C,uBAAuB,YAAY;gCAC5C,6DAA6D;gCAC7D,gBAAgB;gCAChBpC,cAAcoC,mBAAmBJ;4BACnC,OAAO,IAAII,sBAAsB,OAAOD,gBAAgB,UAAU;gCAChE,4DAA4D;gCAC5D,6DAA6D;gCAC7D,gBAAgB;gCAChBnC,cAAcmC;4BAChB;4BAEA;;kBAEE,GACF,MAAMG,yBAAyBC,OAAOC,OAAO,CAACrG,IAAIsG,QAAQ,GACtDpE,OAAO,CAAC,CAACqE,GAAGzE,MAAM,GAAK;oCAAC;oCAAU;iCAAS,CAAC0E,QAAQ,CAAC,OAAO1E,QAC7D2E,OACC,CAACC,KAAK,CAACC,KAAK7E,MAAM,GAAM,CAAA;oCACtB,GAAG4E,GAAG;oCACN,CAACC,IAAI,EAAEC,OAAO9E;gCAChB,CAAA,GACA,CAAC;4BAGL,qBACE,KAACnE;gCAECkJ,eAAalB,KAAK3E,EAAE;gCACpB8F,OAAOjD,eAAeiC,YAAYiB,QAAQf;gCAC1C9H,OACEyH,KAAKzF,MAAM,CAACkC,YAAY,KACpB,CAAC,eAAe,EAAEuD,KAAKzF,MAAM,CAACc,EAAE,CAAC,aAAa,CAAC,GAC/C2E,KAAKzF,MAAM,CAACmC,OAAO,MAAMhE;gCAE/BC,qBAAqBA;gCACrBmF,OAAOkC,KAAKzF,MAAM,CAACwD,SAAS,CAACC,IAAI,EAAEF;gCACnCrF,SAASA;gCACT2F,YAAYjE,cAAcgD;gCAC1BkB,gBAAgB,IAAMvE,YAAYwE,WAAW,CAACnB;gCAC9CoB,eAAerB,MAAM;gCACrBsB,cAActB,MAAM+C,MAAMhG,MAAM,GAAG;gCACnCiE,aAAaA;gCACbmD,OAAOlB,YAAYmB,aAAa3D;gCAChCwB,iBAAiBgB,YAAYhB,mBAAmBxB;gCAChD4D,UAAUvB,KAAKzF,MAAM,CAACwD,SAAS,CAACC,IAAI,EAAEuD;gCACtCf,wBAAwBA;0CAEvBL,YAAYiB,QAAQf;+BArBhBL,KAAK3E,EAAE;wBAwBlB;;gBAGN;;;;AAIR"}
+{"version":3,"sources":["../../src/Table/VirtualizedTable.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, TablePagination, TableRow as MuiTableRow } from '@mui/material';\nimport type { Column, ColumnSizingInfoState, ColumnSizingState, HeaderGroup, Row } from '@tanstack/react-table';\nimport { flexRender } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { forwardRef, useMemo, useRef } from 'react';\nimport type { TableComponents, TableVirtuosoHandle, TableVirtuosoProps } from 'react-virtuoso';\nimport { TableVirtuoso } from 'react-virtuoso';\n\nimport { useVirtualizedTableKeyboardNav } from './hooks/useVirtualizedTableKeyboardNav';\nimport { InnerTable } from './InnerTable';\nimport type { TableCellConfigs, TableProps, TableRowEventOpts } from './model/table-model';\nimport { TableBody } from './TableBody';\nimport type { TableCellProps } from './TableCell';\nimport { TableCell } from './TableCell';\nimport { TableFoot } from './TableFoot';\nimport { TableHead } from './TableHead';\nimport { TableHeaderCell } from './TableHeaderCell';\nimport { TableRow } from './TableRow';\nimport type { TableToolbarProps } from './TableToolbar';\nimport { TableToolbar } from './TableToolbar';\nimport { VirtualizedTableContainer } from './VirtualizedTableContainer';\n\ntype TableCellPosition = {\n  row: number;\n  column: number;\n};\n\ntype TableContext<TableData> = {\n  width: number | string;\n  density: VirtualizedTableProps<TableData>['density'];\n  onTableKeyDown: React.KeyboardEventHandler<HTMLTableElement>;\n  onTableBlur: React.FocusEventHandler<HTMLTableElement>;\n  onRowClick: VirtualizedTableProps<TableData>['onRowClick'];\n  onRowMouseOver: VirtualizedTableProps<TableData>['onRowMouseOver'];\n  onRowMouseOut: VirtualizedTableProps<TableData>['onRowMouseOut'];\n};\n\n// Defined outside VirtualizedTable so the object reference is stable and\n// TableVirtuoso never remounts its internal components due to a changed prop.\n// Props that vary per-render are passed via the `context` prop instead.\nconst VirtuosoTableComponents: TableComponents<Row<unknown>, TableContext<unknown>> = {\n  Scroller: forwardRef(({ context: _, ...props }, ref) => <VirtualizedTableContainer {...props} ref={ref} />),\n  Table: ({ context, ...props }): ReactElement => (\n    <InnerTable\n      {...props}\n      width={context.width}\n      density={context.density}\n      onKeyDown={context.onTableKeyDown}\n      onBlur={context.onTableBlur}\n    />\n  ),\n  TableHead: forwardRef(({ context: _, ...props }, ref) => <TableHead {...props} ref={ref} />),\n  TableFoot: forwardRef(({ context: _, ...props }, ref) => <TableFoot {...props} ref={ref} />),\n  TableRow: ({ item, context, ...props }): ReactElement | null => {\n    if (!item) {\n      return null;\n    }\n\n    const rowEventOpts: TableRowEventOpts = { id: item.id, index: item.index };\n\n    return (\n      <TableRow\n        {...props}\n        onClick={(e) => context.onRowClick(e, item.id)}\n        density={context.density}\n        onMouseOver={(e) => {\n          context.onRowMouseOver?.(e, rowEventOpts);\n        }}\n        onMouseOut={(e) => {\n          context.onRowMouseOut?.(e, rowEventOpts);\n        }}\n      />\n    );\n  },\n  TableBody: forwardRef(({ context: _, ...props }, ref) => <TableBody {...props} ref={ref} />),\n};\n\nexport type VirtualizedTableProps<TableData> = Required<\n  Pick<TableProps<TableData>, 'height' | 'width' | 'density' | 'defaultColumnHeight' | 'defaultColumnWidth'>\n> &\n  Pick<TableProps<TableData>, 'onRowMouseOver' | 'onRowMouseOut' | 'pagination' | 'onPaginationChange'> & {\n    onRowClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, id: string) => void;\n    rows: Array<Row<TableData>>;\n    columns: Array<Column<TableData, unknown>>;\n    headers: Array<HeaderGroup<TableData>>;\n    columnSizing: ColumnSizingState;\n    columnSizingInfo: ColumnSizingInfoState;\n    cellConfigs?: TableCellConfigs;\n    rowCount: number;\n    toolbarConfig: Pick<\n      TableToolbarProps<TableData>,\n      | 'isSearchEnabled'\n      | 'globalFilter'\n      | 'onGlobalFilterChange'\n      | 'isColumnFilterEnabled'\n      | 'columns'\n      | 'columnFilterMenuMaxHeight'\n      | 'isExpandAllEnabled'\n      | 'isAllExpanded'\n      | 'onExpandAllChange'\n    >;\n  };\n\n// Separating out the virtualized table because we may want a paginated table\n// in the future that does not need virtualization, and we'd likely lay them\n// out differently.\nexport function VirtualizedTable<TableData>({\n  width,\n  height,\n  density,\n  defaultColumnWidth,\n  defaultColumnHeight,\n  onRowClick,\n  onRowMouseOver,\n  onRowMouseOut,\n  rows,\n  columns,\n  headers,\n  cellConfigs,\n  pagination,\n  onPaginationChange,\n  rowCount,\n  toolbarConfig,\n}: VirtualizedTableProps<TableData>): ReactElement {\n  'use no memo'; // TanStack Table row and column getters read mutable state behind stable identities.\n\n  const virtuosoRef = useRef<TableVirtuosoHandle>(null);\n  // Use a ref for these values because they are only needed for keyboard\n  // focus interactions and setting them on state will lead to a significant\n  // amount of unnecessary re-renders.\n  const visibleRange = useRef({\n    startIndex: 0,\n    endIndex: 0,\n  });\n\n  const setVisibleRange: TableVirtuosoProps<TableData, unknown>['rangeChanged'] = (newVisibleRange) => {\n    visibleRange.current = newVisibleRange;\n  };\n\n  const keyboardNav = useVirtualizedTableKeyboardNav({\n    visibleRange: visibleRange,\n    virtualTable: virtuosoRef,\n\n    // We add 1 here for the header.\n    maxRows: rows.length + 1,\n    maxColumns: columns.length,\n  });\n\n  const getFocusState = (cellPosition: TableCellPosition): TableCellProps['focusState'] => {\n    if (cellPosition.row === keyboardNav.activeCell.row && cellPosition.column === keyboardNav.activeCell.column) {\n      return keyboardNav.isActive ? 'trigger-focus' : 'focus-next';\n    }\n\n    return 'none';\n  };\n\n  const tableContext: TableContext<TableData> = useMemo(\n    () => ({\n      width,\n      density,\n      onTableKeyDown: keyboardNav.onTableKeyDown,\n      onTableBlur: keyboardNav.onTableBlur,\n      onRowClick,\n      onRowMouseOver,\n      onRowMouseOut,\n    }),\n    [width, density, keyboardNav.onTableKeyDown, keyboardNav.onTableBlur, onRowClick, onRowMouseOver, onRowMouseOut],\n  );\n\n  const handleChangePage = (_event: React.MouseEvent<HTMLButtonElement> | null, newPage: number): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ ...pagination, pageIndex: newPage });\n  };\n\n  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>): void => {\n    if (!pagination || !onPaginationChange) return;\n    onPaginationChange({ pageIndex: 0, pageSize: parseInt(event.target.value, 10) });\n  };\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we calculate all column sizes once per render at the root table level\n   * and pass the column sizes down as CSS variables to the <table> element.\n   */\n  const columnSizeVars: { [key: string]: number } = {};\n  headers.forEach((headerGroup) => {\n    headerGroup.headers\n      .filter((header) => header.column.getCanResize())\n      .forEach((header) => {\n        columnSizeVars[`--header-${header.id}-size`] = header.getSize();\n        columnSizeVars[`--col-${header.column.id}-size`] = header.column.getSize();\n      });\n  });\n\n  return (\n    <Box style={{ width, height, ...columnSizeVars }}>\n      <TableToolbar {...toolbarConfig} width={width} />\n      <TableVirtuoso\n        ref={virtuosoRef}\n        data={rows}\n        components={VirtuosoTableComponents as TableComponents<Row<TableData>, TableContext<TableData>>}\n        context={tableContext}\n        // Note: this value is impacted by overscan. See this issue if overscan\n        // is added.\n        // https://github.com/petyosi/react-virtuoso/issues/118#issuecomment-642156138\n        rangeChanged={setVisibleRange}\n        fixedHeaderContent={() => {\n          return (\n            <>\n              {headers.map((headerGroup) => {\n                return (\n                  <TableRow key={headerGroup.id} density={density}>\n                    {headerGroup.headers.map((header, i, headers) => {\n                      const column = header.column;\n                      const position: TableCellPosition = {\n                        row: 0,\n                        column: i,\n                      };\n\n                      const isSorted = column.getIsSorted();\n                      const nextSorting = column.getNextSortingOrder();\n\n                      return (\n                        <TableHeaderCell\n                          key={header.id}\n                          onSort={column.getCanSort() ? column.getToggleSortingHandler() : undefined}\n                          sortDirection={typeof isSorted === 'string' ? isSorted : undefined}\n                          nextSortDirection={typeof nextSorting === 'string' ? nextSorting : undefined}\n                          width={\n                            header.column.getCanResize()\n                              ? `calc(var(--header-${header?.id}-size) * 1px)`\n                              : column.getSize() || defaultColumnWidth\n                          }\n                          defaultColumnHeight={defaultColumnHeight}\n                          align={column.columnDef.meta?.align}\n                          variant=\"head\"\n                          density={density}\n                          description={column.columnDef.meta?.headerDescription}\n                          focusState={getFocusState(position)}\n                          onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                          isFirstColumn={i === 0}\n                          isLastColumn={i === headers.length - 1}\n                          resizeConfig={\n                            header.column.getCanResize()\n                              ? {\n                                  resizeHandler: header.getResizeHandler(),\n                                  resetSizeHandler: header.column.resetSize,\n                                  isResizing: header.column.getIsResizing(),\n                                }\n                              : undefined\n                          }\n                        >\n                          {flexRender(column.columnDef.header, header.getContext())}\n                        </TableHeaderCell>\n                      );\n                    })}\n                  </TableRow>\n                );\n              })}\n            </>\n          );\n        }}\n        fixedFooterContent={\n          pagination\n            ? (): ReactElement => (\n                <MuiTableRow sx={{ backgroundColor: (theme) => theme.palette.background.default }}>\n                  <TablePagination\n                    colSpan={columns.length}\n                    count={rowCount}\n                    page={pagination.pageIndex}\n                    rowsPerPage={pagination.pageSize}\n                    onPageChange={handleChangePage}\n                    onRowsPerPageChange={handleChangeRowsPerPage}\n                  />\n                </MuiTableRow>\n              )\n            : undefined\n        }\n        itemContent={(index) => {\n          const row = rows[index];\n          if (!row) {\n            return null;\n          }\n\n          return (\n            <>\n              {row.getVisibleCells().map((cell, i, cells) => {\n                const position: TableCellPosition = {\n                  row: index + 1,\n                  column: i,\n                };\n\n                const cellContext = cell.getContext();\n                const cellConfig = cellConfigs?.[cellContext.cell.id];\n\n                const cellRenderFn = cell.column.columnDef.cell;\n                const cellContent = typeof cellRenderFn === 'function' ? cellRenderFn(cellContext) : null;\n\n                /*\n                     IMPORTANT:\n                     If Variables exist in the link, they should have been translated by the plugin already. (Being developed at the moment)\n                     Components have no access to any context (Which is intentional and correct)\n                     We may want to add parameters to a link from neighboring cells in the future as well.\n                     If this is the case, the value of the neighboring cells should be read from here and be replaced. (Bing discussed at the moment, not decided yet)\n                  */\n\n                const cellDescriptionDef = cell.column.columnDef.meta?.cellDescription;\n                let description: string | undefined = undefined;\n                if (typeof cellDescriptionDef === 'function') {\n                  // If the cell description is a function, set the value using\n                  // the function.\n                  description = cellDescriptionDef(cellContext);\n                } else if (cellDescriptionDef && typeof cellContent === 'string') {\n                  // If the cell description is `true` AND the cell content is\n                  // a string (and thus viable as a `title` attribute), use the\n                  // cell content.\n                  description = cellContent;\n                }\n\n                /* this has been specifically added for the data link,\n                     therefore, non string and numeric values should be excluded\n                  */\n                const adjacentCellsValuesMap = Object.entries(row.original as Record<string, unknown>)\n                  ?.filter(([_, value]) => ['string', 'number'].includes(typeof value))\n                  .reduce(\n                    (acc, [key, value]) => ({\n                      ...acc,\n                      [key]: String(value),\n                    }),\n                    {},\n                  );\n\n                return (\n                  <TableCell\n                    key={cell.id}\n                    data-testid={cell.id}\n                    title={description || cellConfig?.text || cellContent}\n                    width={\n                      cell.column.getCanResize()\n                        ? `calc(var(--col-${cell.column.id}-size) * 1px)`\n                        : cell.column.getSize() || defaultColumnWidth\n                    }\n                    defaultColumnHeight={defaultColumnHeight}\n                    align={cell.column.columnDef.meta?.align}\n                    density={density}\n                    focusState={getFocusState(position)}\n                    onFocusTrigger={() => keyboardNav.onCellFocus(position)}\n                    isFirstColumn={i === 0}\n                    isLastColumn={i === cells.length - 1}\n                    description={description}\n                    color={cellConfig?.textColor ?? undefined}\n                    backgroundColor={cellConfig?.backgroundColor ?? undefined}\n                    dataLink={cell.column.columnDef.meta?.dataLink}\n                    adjacentCellsValuesMap={adjacentCellsValuesMap}\n                  >\n                    {cellConfig?.text || cellContent}\n                  </TableCell>\n                );\n              })}\n            </>\n          );\n        }}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","TablePagination","TableRow","MuiTableRow","flexRender","forwardRef","useMemo","useRef","TableVirtuoso","useVirtualizedTableKeyboardNav","InnerTable","TableBody","TableCell","TableFoot","TableHead","TableHeaderCell","TableToolbar","VirtualizedTableContainer","VirtuosoTableComponents","Scroller","context","_","props","ref","Table","width","density","onKeyDown","onTableKeyDown","onBlur","onTableBlur","item","rowEventOpts","id","index","onClick","e","onRowClick","onMouseOver","onRowMouseOver","onMouseOut","onRowMouseOut","VirtualizedTable","height","defaultColumnWidth","defaultColumnHeight","rows","columns","headers","cellConfigs","pagination","onPaginationChange","rowCount","toolbarConfig","virtuosoRef","visibleRange","startIndex","endIndex","setVisibleRange","newVisibleRange","current","keyboardNav","virtualTable","maxRows","length","maxColumns","getFocusState","cellPosition","row","activeCell","column","isActive","tableContext","handleChangePage","_event","newPage","pageIndex","handleChangeRowsPerPage","event","pageSize","parseInt","target","value","columnSizeVars","forEach","headerGroup","filter","header","getCanResize","getSize","style","data","components","rangeChanged","fixedHeaderContent","map","i","position","isSorted","getIsSorted","nextSorting","getNextSortingOrder","onSort","getCanSort","getToggleSortingHandler","undefined","sortDirection","nextSortDirection","align","columnDef","meta","variant","description","headerDescription","focusState","onFocusTrigger","onCellFocus","isFirstColumn","isLastColumn","resizeConfig","resizeHandler","getResizeHandler","resetSizeHandler","resetSize","isResizing","getIsResizing","getContext","fixedFooterContent","sx","backgroundColor","theme","palette","background","default","colSpan","count","page","rowsPerPage","onPageChange","onRowsPerPageChange","itemContent","getVisibleCells","cell","cells","cellContext","cellConfig","cellRenderFn","cellContent","cellDescriptionDef","cellDescription","adjacentCellsValuesMap","Object","entries","original","includes","reduce","acc","key","String","data-testid","title","text","color","textColor","dataLink"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"useVirtualizedTableKeyboardNav.d.ts","sourceRoot":"","sources":["../../../src/Table/hooks/useVirtualizedTableKeyboardNav.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAGtE,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,KAAK,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElG,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AAGtE,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,CAmFA"}

package/dist/Table/hooks/useVirtualizedTableKeyboardNav.js

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

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 type { FocusEventHandler, KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport type { TableVirtuosoHandle } from 'react-virtuoso';\n\nimport type { UseTableKeyboardNavProps } from './useTableKeyboardNav';\nimport { useTableKeyboardNav } 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;AAMjC,SAASA,mBAAmB,QAAQ,2BAAwB;AAiB5D;;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 type { FocusEventHandler, KeyboardEventHandler, MutableRefObject, RefObject } from 'react';\nimport React, { useCallback } from 'react';\nimport type { TableVirtuosoHandle } from 'react-virtuoso';\n\nimport type { UseTableKeyboardNavProps } from './useTableKeyboardNav';\nimport { useTableKeyboardNav } 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 onActiveCellChange = useCallback(\n    (\n      e: React.KeyboardEvent<HTMLTableElement>,\n      currentPosition: TableCellPosition,\n      defaultNewPosition: TableCellPosition | undefined,\n    ) => {\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    [maxRows, visibleRange, virtualTable],\n  );\n\n  return useTableKeyboardNav({\n    maxRows,\n    maxColumns,\n    onActiveCellChange,\n  });\n}\n"],"names":["React","useCallback","useTableKeyboardNav","useVirtualizedTableKeyboardNav","visibleRange","virtualTable","maxRows","maxColumns","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;AAGjC,OAAOA,SAASC,WAAW,QAAQ,QAAQ;AAI3C,SAASC,mBAAmB,QAAQ,2BAAwB;AAiB5D;;CAEC,GACD,OAAO,SAASC,+BAA+B,EAC7CC,YAAY,EACZC,YAAY,EACZC,OAAO,EACPC,UAAU,EAC0B;IAOpC,MAAMC,qBAAqBP,YACzB,CACEQ,GACAC,iBACAC;QAEA,MAAMC,MAAMH,EAAEG,GAAG;QAEjB,MAAMC,sBACJF,sBACCD,CAAAA,gBAAgBI,MAAM,KAAKH,mBAAmBG,MAAM,IAAIJ,gBAAgBK,GAAG,KAAKJ,mBAAmBI,GAAG,AAAD;QACxG,MAAMC,UAAUL,oBAAoBI,OAAOL,gBAAgBK,GAAG;QAE9D,IAAIH,QAAQ,eAAeC,qBAAqB;YAC9C,qEAAqE;YACrE,+CAA+C;YAC/C,IAAIG,UAAU,IAAIZ,aAAaa,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIZ,aAAaa,OAAO,CAACE,QAAQ,EAAE;gBAChGd,aAAaY,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;YACF;QACF,OAAO,IAAIV,QAAQ,aAAaC,qBAAqB;YACnD,qEAAqE;YACrE,+CAA+C;YAC/C,IAAIG,UAAU,IAAIZ,aAAaa,OAAO,CAACC,UAAU,IAAIF,UAAU,IAAIZ,aAAaa,OAAO,CAACE,QAAQ,EAAE;gBAChGd,aAAaY,OAAO,EAAEG,cAAc;oBAClCC,OAAOL,UAAU;oBACjBM,OAAO;gBACT;YACF;QACF,OAAO,IAAIT,uBAAwBD,CAAAA,QAAQ,UAAUA,QAAQ,KAAI,GAAI;YACnE,qEAAqE;YACrE,+CAA+C;YAC/CP,aAAaY,OAAO,EAAEG,cAAc;gBAClCC,OAAOE,KAAKC,GAAG,CAACR,UAAU,GAAG;gBAC7BM,OAAO;YACT;QACF,OAAO,IAAIV,QAAQ,YAAY;YAC7B,qEAAqE;YACrEH,EAAEgB,cAAc;YAEhB,IAAIT,UAAUN,gBAAgBK,GAAG;YACjC,8BAA8B;YAE9BC,UAAUO,KAAKG,GAAG,CAACpB,UAAU,GAAGF,aAAaa,OAAO,CAACE,QAAQ,GAAG;YAEhEd,aAAaY,OAAO,EAAEG,cAAc;gBAClCC,OAAOL,UAAU;gBACjBM,OAAO;YACT;YAEA,OAAO;gBACLP,KAAKC;gBACLF,QAAQJ,gBAAgBI,MAAM;YAChC;QACF,OAAO,IAAIF,QAAQ,UAAU;YAC3B,mEAAmE;YACnE,IAAII,UAAUN,gBAAgBK,GAAG;YACjC,gCAAgC;YAChCC,UAAUO,KAAKC,GAAG,CAAC,GAAGpB,aAAaa,OAAO,CAACC,UAAU,GAAG;YACxDb,aAAaY,OAAO,EAAEG,cAAc;gBAClCC,OAAOL,UAAU;gBACjBM,OAAO;YACT;YAEA,OAAO;gBACLP,KAAKC;gBACLF,QAAQJ,gBAAgBI,MAAM;YAChC;QACF;QAEA,OAAOH;IACT,GACA;QAACL;QAASF;QAAcC;KAAa;IAGvC,OAAOH,oBAAoB;QACzBI;QACAC;QACAC;IACF;AACF"}

package/dist/TimeRangeSelector/TimeRangeSelector.js

@@ -53,6 +53,7 @@ import { buildCustomTimeOption, formatTimeRange } from "./utils.js";
             label: o.display
         }));
     const tzAutocompleteValue = tzAutocompleteOptions.find((option)=>option.id === timeZone);
+    const displayValue = timeOptions.find((opt)=>formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))?.display ?? formatTimeRange(value, timeZone);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Popover, {
@@ -132,7 +133,7 @@ import { buildCustomTimeOption, formatTimeRange } from "./utils.js";
                             spacing: 1,
                             children: [
                                 /*#__PURE__*/ _jsx("span", {
-                                    children: timeOptions.find((opt)=>formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))?.display ?? formatTimeRange(value, timeZone)
+                                    children: displayValue
                                 }),
                                 tzOffset !== localOffset && /*#__PURE__*/ _jsxs(Box, {
                                     sx: {
@@ -147,7 +148,7 @@ import { buildCustomTimeOption, formatTimeRange } from "./utils.js";
                             ]
                         }),
                     inputProps: {
-                        'aria-label': `Select time range. Currently set to ${value}`
+                        'aria-label': `Select time range. Currently set to ${displayValue}`
                     },
                     sx: {
                         '.MuiSelect-icon': {

package/dist/TimeRangeSelector/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, MenuItem, Popover, Select, IconButton, TextField, Stack } from '@mui/material';\nimport type { TimeRangeValue, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport type { ReactElement } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport { useTimeZone } from '../context';\nimport type { TimeOption } from '../model';\nimport type { TimeZoneOption } from '../model/timeZoneOption';\nimport { getTimeZoneOptions } from '../model/timeZoneOption';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { getGMTOffset } from '../utils/format';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n  /** Optional explicit timezone and change handler to enable changing tz from the selector */\n  timeZone?: string;\n  timeZoneOptions?: TimeZoneOption[];\n  onTimeZoneChange?: (timeZone: TimeZoneOption) => void;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n  timeZone: timeZoneProp,\n  timeZoneOptions,\n  onTimeZoneChange,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone: ctxTimeZone } = useTimeZone();\n  const timeZone = timeZoneProp ?? ctxTimeZone;\n\n  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone],\n  );\n\n  const [open, setOpen] = useState(false);\n  const tzOptions = timeZoneOptions ?? getTimeZoneOptions();\n  const [tzAnchorEl, setTzAnchorEl] = useState<HTMLElement | null>(null);\n  const tzOpen = Boolean(tzAnchorEl);\n  const tzLabel = tzOptions.find((o) => o.value === timeZone)?.display ?? timeZone;\n  const tzOffset = getGMTOffset(timeZone);\n  const localOffset = getGMTOffset('local');\n  const tzAutocompleteOptions = tzOptions.map((o) => ({ id: o.value, label: o.display }));\n  const tzAutocompleteValue = tzAutocompleteOptions.find((option) => option.id === timeZone);\n\n  return (\n    <>\n      <Popover\n        anchorEl={tzAnchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        open={tzOpen}\n        onClose={() => setTzAnchorEl(null)}\n        sx={(theme) => ({ padding: theme.spacing(1) })}\n      >\n        <Box\n          sx={{ p: 1, minWidth: 260 }}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n        >\n          <SettingsAutocomplete\n            options={tzAutocompleteOptions}\n            value={tzAutocompleteValue}\n            onChange={(_e, option) => {\n              if (option) {\n                const selected = tzOptions.find((o) => o.value === option.id);\n                if (selected) onTimeZoneChange?.(selected);\n              }\n              setTzAnchorEl(null);\n            }}\n            disableClearable\n            renderInput={(params) => <TextField {...params} placeholder=\"Search timezones\" size=\"small\" />}\n          />\n        </Box>\n      </Popover>\n      <Popover\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({ padding: theme.spacing(2) })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n          timeZone={timeZone}\n        />\n      </Popover>\n      <Box ref={setAnchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          renderValue={() => (\n            <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n              <span>\n                {timeOptions.find((opt) => formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))\n                  ?.display ?? formatTimeRange(value, timeZone)}\n              </span>\n              {tzOffset !== localOffset && (\n                <Box sx={{ typography: 'caption', color: 'text.secondary' }}>· {tzOffset}</Box>\n              )}\n            </Stack>\n          )}\n          inputProps={{ 'aria-label': `Select time range. Currently set to ${value}` }}\n          sx={{\n            '.MuiSelect-icon': { marginTop: '1px', transform: 'none' },\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': { paddingRight: '36px' },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          <MenuItem\n            disableRipple\n            onClick={(e: React.MouseEvent) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            sx={{ cursor: 'default', '&:hover': { backgroundColor: 'transparent' }, py: 0.5, px: 1 }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>\n                <Box sx={{ typography: 'subtitle1' }}>Time Range</Box>\n                <Box sx={{ color: 'text.secondary', typography: 'caption', mt: 0.25 }}>Timezone: {tzLabel}</Box>\n              </Box>\n              <Box sx={{ display: 'flex', alignItems: 'center', pr: 1, ml: 1.5 }}>\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Select timezone\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setTzAnchorEl(e.currentTarget);\n                  }}\n                >\n                  <EarthIcon fontSize=\"small\" />\n                </IconButton>\n              </Box>\n            </Box>\n          </MenuItem>\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","IconButton","TextField","Stack","isRelativeTimeRange","toAbsoluteTimeRange","Calendar","EarthIcon","useMemo","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","setAnchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","option","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","selected","disableClearable","renderInput","params","placeholder","size","initialTimeRange","onCancel","ref","IconComponent","renderValue","direction","alignItems","span","opt","typography","color","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","disableRipple","preventDefault","cursor","backgroundColor","py","px","width","justifyContent","flexDirection","mt","pr","ml","aria-label","currentTarget","fontSize","item","idx"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, MenuItem, Popover, Select, IconButton, TextField, Stack } from '@mui/material';\nimport type { TimeRangeValue, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport type { ReactElement } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport { useTimeZone } from '../context';\nimport type { TimeOption } from '../model';\nimport type { TimeZoneOption } from '../model/timeZoneOption';\nimport { getTimeZoneOptions } from '../model/timeZoneOption';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { getGMTOffset } from '../utils/format';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n  /** Optional explicit timezone and change handler to enable changing tz from the selector */\n  timeZone?: string;\n  timeZoneOptions?: TimeZoneOption[];\n  onTimeZoneChange?: (timeZone: TimeZoneOption) => void;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n  timeZone: timeZoneProp,\n  timeZoneOptions,\n  onTimeZoneChange,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone: ctxTimeZone } = useTimeZone();\n  const timeZone = timeZoneProp ?? ctxTimeZone;\n\n  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone],\n  );\n\n  const [open, setOpen] = useState(false);\n  const tzOptions = timeZoneOptions ?? getTimeZoneOptions();\n  const [tzAnchorEl, setTzAnchorEl] = useState<HTMLElement | null>(null);\n  const tzOpen = Boolean(tzAnchorEl);\n  const tzLabel = tzOptions.find((o) => o.value === timeZone)?.display ?? timeZone;\n  const tzOffset = getGMTOffset(timeZone);\n  const localOffset = getGMTOffset('local');\n  const tzAutocompleteOptions = tzOptions.map((o) => ({ id: o.value, label: o.display }));\n  const tzAutocompleteValue = tzAutocompleteOptions.find((option) => option.id === timeZone);\n  const displayValue =\n    timeOptions.find((opt) => formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))?.display ??\n    formatTimeRange(value, timeZone);\n\n  return (\n    <>\n      <Popover\n        anchorEl={tzAnchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        open={tzOpen}\n        onClose={() => setTzAnchorEl(null)}\n        sx={(theme) => ({ padding: theme.spacing(1) })}\n      >\n        <Box\n          sx={{ p: 1, minWidth: 260 }}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n        >\n          <SettingsAutocomplete\n            options={tzAutocompleteOptions}\n            value={tzAutocompleteValue}\n            onChange={(_e, option) => {\n              if (option) {\n                const selected = tzOptions.find((o) => o.value === option.id);\n                if (selected) onTimeZoneChange?.(selected);\n              }\n              setTzAnchorEl(null);\n            }}\n            disableClearable\n            renderInput={(params) => <TextField {...params} placeholder=\"Search timezones\" size=\"small\" />}\n          />\n        </Box>\n      </Popover>\n      <Popover\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({ padding: theme.spacing(2) })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n          timeZone={timeZone}\n        />\n      </Popover>\n      <Box ref={setAnchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          renderValue={() => (\n            <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n              <span>{displayValue}</span>\n              {tzOffset !== localOffset && (\n                <Box sx={{ typography: 'caption', color: 'text.secondary' }}>· {tzOffset}</Box>\n              )}\n            </Stack>\n          )}\n          inputProps={{ 'aria-label': `Select time range. Currently set to ${displayValue}` }}\n          sx={{\n            '.MuiSelect-icon': { marginTop: '1px', transform: 'none' },\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': { paddingRight: '36px' },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          <MenuItem\n            disableRipple\n            onClick={(e: React.MouseEvent) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            sx={{ cursor: 'default', '&:hover': { backgroundColor: 'transparent' }, py: 0.5, px: 1 }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>\n                <Box sx={{ typography: 'subtitle1' }}>Time Range</Box>\n                <Box sx={{ color: 'text.secondary', typography: 'caption', mt: 0.25 }}>Timezone: {tzLabel}</Box>\n              </Box>\n              <Box sx={{ display: 'flex', alignItems: 'center', pr: 1, ml: 1.5 }}>\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Select timezone\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setTzAnchorEl(e.currentTarget);\n                  }}\n                >\n                  <EarthIcon fontSize=\"small\" />\n                </IconButton>\n              </Box>\n            </Box>\n          </MenuItem>\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","IconButton","TextField","Stack","isRelativeTimeRange","toAbsoluteTimeRange","Calendar","EarthIcon","useMemo","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","setAnchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","option","displayValue","opt","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","selected","disableClearable","renderInput","params","placeholder","size","initialTimeRange","onCancel","ref","IconComponent","renderValue","direction","alignItems","span","typography","color","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","disableRipple","preventDefault","cursor","backgroundColor","py","px","width","justifyContent","flexDirection","mt","pr","ml","aria-label","currentTarget","fontSize","item","idx"],"mappings":"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"}

package/dist/TimeSeriesTooltip/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AASrE;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,GAChC,MAAM,GAAG,SAAS,CAuDpB;AASD;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAwBzB;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,CAO1F;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAC/B,MAAM,CAcR;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM,CAiCnH;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAQjC;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,eAAe,GACrB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAexC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AASrE;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,GAChC,MAAM,GAAG,SAAS,CAmEpB;AASD;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAwBzB;AAED,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,CAO1F;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,sBAAsB,EACrC,WAAW,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAC/B,MAAM,CAcR;AAED,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,eAAe,GAAG,MAAM,CAiCnH;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,cAAc,EAAE,MAAM,EACtB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GACf;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAQjC;AAED,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,eAAe,GACrB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAexC"}

package/dist/TimeSeriesTooltip/utils.js

@@ -28,20 +28,32 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_BG_CO
     const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : TOOLTIP_MAX_WIDTH;
     let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor
     let y = mousePos.page.y + cursorPaddingY;
+    let cursorBaseY = mousePos.page.y;
     // If containerElement is defined, adjust coordinates relative to the container
     if (containerElement) {
         const containerRect = containerElement.getBoundingClientRect();
         x = x - containerRect.left + containerElement.scrollLeft;
         y = y - containerRect.top + containerElement.scrollTop;
-        // Ensure tooltip does not go out of the container's bottom
+        cursorBaseY = cursorBaseY - containerRect.top + containerElement.scrollTop;
+        // Ensure tooltip does not go out of the container's bottom: flip it above the
+        // cursor so it keeps pointing at the hovered marker instead of covering it.
         const containerBottom = containerRect.top + containerElement.scrollHeight;
         if (y + effectiveHeight > containerBottom) {
-            y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
+            y = cursorBaseY - effectiveHeight - cursorPaddingY;
+            // When it does not fit above the cursor either, fall back to the container bottom.
+            if (y < containerElement.scrollTop + TOOLTIP_PADDING / 2 || y + effectiveHeight > containerBottom) {
+                y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
+            }
         }
     } else {
-        // Ensure tooltip does not go out of the screen on the bottom
+        // Ensure tooltip does not go out of the screen on the bottom: flip it above the
+        // cursor so it keeps pointing at the hovered marker instead of covering it.
         if (y + effectiveHeight > window.innerHeight + window.scrollY) {
-            y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
+            y = cursorBaseY - effectiveHeight - cursorPaddingY;
+            // When it does not fit above the cursor either, fall back to the screen bottom.
+            if (y < window.scrollY + TOOLTIP_PADDING / 2 || y + effectiveHeight > window.innerHeight + window.scrollY) {
+                y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);
+            }
         }
     }
     // Ensure tooltip does not go out of the screen on the right

package/dist/TimeSeriesTooltip/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { Theme } from '@mui/material';\nimport type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\n\nimport type { TimeChartSeriesMapping } from '../model';\nimport type { CursorCoordinates, CursorData } from './tooltip-model';\nimport {\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_PADDING,\n} from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series.\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number,\n  containerElement?: Element | null,\n): string | undefined {\n  if (mousePos === null) {\n    return undefined;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  if (mousePos.plotCanvas.x === undefined) return undefined;\n\n  // Fall back to max size before the resize observer reports a real measurement.\n  const effectiveHeight = tooltipHeight > 0 ? tooltipHeight : TOOLTIP_MAX_HEIGHT;\n  const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : TOOLTIP_MAX_WIDTH;\n\n  let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // If containerElement is defined, adjust coordinates relative to the container\n  if (containerElement) {\n    const containerRect = containerElement.getBoundingClientRect();\n    x = x - containerRect.left + containerElement.scrollLeft;\n    y = y - containerRect.top + containerElement.scrollTop;\n\n    // Ensure tooltip does not go out of the container's bottom\n    const containerBottom = containerRect.top + containerElement.scrollHeight;\n    if (y + effectiveHeight > containerBottom) {\n      y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n    }\n  } else {\n    // Ensure tooltip does not go out of the screen on the bottom\n    if (y + effectiveHeight > window.innerHeight + window.scrollY) {\n      y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n    }\n  }\n\n  // Ensure tooltip does not go out of the screen on the right\n  if (x + effectiveWidth > window.innerWidth) {\n    x = mousePos.page.x - effectiveWidth - cursorPaddingX; // Move to the left of the cursor\n  }\n\n  // Ensure tooltip does not go out of the screen on the left\n  if (x < cursorPaddingX) {\n    x = cursorPaddingX;\n  }\n\n  // Ensure tooltip does not go out of the screen on the top\n  if (y < TOOLTIP_PADDING / 2) {\n    y = TOOLTIP_PADDING / 2;\n  }\n\n  return `translate3d(${x}px, ${y}px, 0)`;\n}\n\n/**\n * Stacking level of a pinned tooltip. It must cover the table legend's sticky header, which\n * react-virtuoso renders at z-index 2, and stay below PanelHeader (5, in @perses-dev/dashboards),\n * the drawer and the sticky dashboard header.\n */\nconst PINNED_TOOLTIP_Z_INDEX = 3;\n\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(\n  theme: Theme,\n  pinnedPos: CursorCoordinates | null,\n  maxHeight?: number,\n): Record<string, unknown> {\n  const adjustedMaxHeight = maxHeight ? maxHeight - TOOLTIP_PADDING : undefined;\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: adjustedMaxHeight ?? TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    // Animating transform causes intermediate positions outside the viewport; animate opacity/visibility instead.\n    transition: 'opacity 0.1s ease-out, visibility 0.1s ease-out',\n    zIndex: pinnedPos !== null ? PINNED_TOOLTIP_Z_INDEX : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n\nexport function getPixelXFromGrid(timestamp: number, chart: EChartsInstance): number | null {\n  try {\n    const pixelCoords = chart.convertToPixel('grid', [timestamp, 0]);\n    return pixelCoords?.[0] ?? null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Returns the cumulative (visual) Y for a series, accumulating stack totals in-place.\n * For non-stacked series, returns the raw yValue unchanged.\n * Mutates `stackTotals` — pass a fresh Map for each cursor evaluation.\n */\nexport function calculateVisualYForSeries(\n  seriesIdx: number,\n  yValue: number,\n  seriesMapping: TimeChartSeriesMapping,\n  stackTotals: Map<string, number>,\n): number {\n  const currentSeries = seriesMapping[seriesIdx];\n  if (!currentSeries) return yValue;\n\n  const stackId = (currentSeries as LineSeriesOption | BarSeriesOption).stack;\n  if (!stackId) {\n    return yValue;\n  }\n\n  const stackIdStr = stackId.toString();\n  const currentTotal = stackTotals.get(stackIdStr) ?? 0;\n  const newTotal = currentTotal + yValue;\n  stackTotals.set(stackIdStr, newTotal);\n  return newTotal;\n}\n\nexport function calculateBarBandwidth(timestamp: number, sortedTimestamps: number[], chart: EChartsInstance): number {\n  const currentIdx = sortedTimestamps.indexOf(timestamp);\n  if (currentIdx === -1) {\n    return 20;\n  }\n\n  const prevTimestamp = currentIdx > 0 ? (sortedTimestamps[currentIdx - 1] ?? null) : null;\n  const nextTimestamp = currentIdx < sortedTimestamps.length - 1 ? (sortedTimestamps[currentIdx + 1] ?? null) : null;\n\n  const currentPixelX = getPixelXFromGrid(timestamp, chart);\n  if (currentPixelX === null) return 20;\n\n  let leftBound: number;\n  let rightBound: number;\n\n  if (prevTimestamp !== null && nextTimestamp !== null) {\n    const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;\n    const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;\n    leftBound = (currentPixelX + prevPixelX) / 2;\n    rightBound = (currentPixelX + nextPixelX) / 2;\n  } else if (prevTimestamp !== null) {\n    const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;\n    leftBound = (currentPixelX + prevPixelX) / 2;\n    rightBound = currentPixelX + (currentPixelX - leftBound);\n  } else if (nextTimestamp !== null) {\n    const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;\n    rightBound = (currentPixelX + nextPixelX) / 2;\n    leftBound = currentPixelX - (rightBound - currentPixelX);\n  } else {\n    return 20;\n  }\n\n  return Math.max(1, rightBound - leftBound);\n}\n\n/**\n * Computes the pixel left/right bounds of one bar segment within a group.\n * @param barRelativeIdx - zero-based index among bar-only series\n * @param bandwidth      - total pixel width for the bar group\n * @param centerPixelX   - pixel X of the bar group centre\n * @param barCount       - total bar series count (lines excluded)\n */\nexport function calculateBarSegmentBounds(\n  barRelativeIdx: number,\n  bandwidth: number,\n  centerPixelX: number,\n  barCount: number,\n): { left: number; right: number } {\n  const count = Math.max(1, barCount);\n  const segmentWidth = bandwidth / count;\n  const segmentLeft = centerPixelX - bandwidth / 2 + barRelativeIdx * segmentWidth;\n  return {\n    left: segmentLeft,\n    right: segmentLeft + segmentWidth,\n  };\n}\n\nexport function calculateBarYBounds(\n  visualYBottom: number,\n  visualYTop: number,\n  chart: EChartsInstance,\n): { top: number; bottom: number } | null {\n  try {\n    const bottomPixel = chart.convertToPixel('grid', [0, visualYBottom]);\n    const topPixel = chart.convertToPixel('grid', [0, visualYTop]);\n\n    if (!bottomPixel || !topPixel || bottomPixel[1] === undefined || topPixel[1] === undefined) return null;\n\n    // Y increases downward in pixels; min/max normalizes the mapping for negative bar values.\n    return {\n      top: Math.min(topPixel[1], bottomPixel[1]),\n      bottom: Math.max(topPixel[1], bottomPixel[1]),\n    };\n  } catch {\n    return null;\n  }\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_PADDING","assembleTransform","mousePos","pinnedPos","tooltipHeight","tooltipWidth","containerElement","undefined","cursorPaddingX","cursorPaddingY","plotCanvas","x","effectiveHeight","effectiveWidth","page","y","containerRect","getBoundingClientRect","left","scrollLeft","top","scrollTop","containerBottom","scrollHeight","Math","max","window","innerHeight","scrollY","innerWidth","PINNED_TOOLTIP_Z_INDEX","getTooltipStyles","theme","maxHeight","adjustedMaxHeight","minWidth","maxWidth","padding","position","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","getPixelXFromGrid","timestamp","chart","pixelCoords","convertToPixel","calculateVisualYForSeries","seriesIdx","yValue","seriesMapping","stackTotals","currentSeries","stackId","stack","stackIdStr","toString","currentTotal","get","newTotal","set","calculateBarBandwidth","sortedTimestamps","currentIdx","indexOf","prevTimestamp","nextTimestamp","length","currentPixelX","leftBound","rightBound","prevPixelX","nextPixelX","calculateBarSegmentBounds","barRelativeIdx","bandwidth","centerPixelX","barCount","count","segmentWidth","segmentLeft","right","calculateBarYBounds","visualYBottom","visualYTop","bottomPixel","topPixel","min","bottom"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { Theme } from '@mui/material';\nimport type { BarSeriesOption, LineSeriesOption } from 'echarts/charts';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\n\nimport type { TimeChartSeriesMapping } from '../model';\nimport type { CursorCoordinates, CursorData } from './tooltip-model';\nimport {\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_PADDING,\n} from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series.\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number,\n  containerElement?: Element | null,\n): string | undefined {\n  if (mousePos === null) {\n    return undefined;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  if (mousePos.plotCanvas.x === undefined) return undefined;\n\n  // Fall back to max size before the resize observer reports a real measurement.\n  const effectiveHeight = tooltipHeight > 0 ? tooltipHeight : TOOLTIP_MAX_HEIGHT;\n  const effectiveWidth = tooltipWidth > 0 ? tooltipWidth : TOOLTIP_MAX_WIDTH;\n\n  let x = mousePos.page.x + cursorPaddingX; // Default to right side of the cursor\n  let y = mousePos.page.y + cursorPaddingY;\n  let cursorBaseY = mousePos.page.y;\n\n  // If containerElement is defined, adjust coordinates relative to the container\n  if (containerElement) {\n    const containerRect = containerElement.getBoundingClientRect();\n    x = x - containerRect.left + containerElement.scrollLeft;\n    y = y - containerRect.top + containerElement.scrollTop;\n    cursorBaseY = cursorBaseY - containerRect.top + containerElement.scrollTop;\n\n    // Ensure tooltip does not go out of the container's bottom: flip it above the\n    // cursor so it keeps pointing at the hovered marker instead of covering it.\n    const containerBottom = containerRect.top + containerElement.scrollHeight;\n    if (y + effectiveHeight > containerBottom) {\n      y = cursorBaseY - effectiveHeight - cursorPaddingY;\n      // When it does not fit above the cursor either, fall back to the container bottom.\n      if (y < containerElement.scrollTop + TOOLTIP_PADDING / 2 || y + effectiveHeight > containerBottom) {\n        y = Math.max(containerBottom - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n      }\n    }\n  } else {\n    // Ensure tooltip does not go out of the screen on the bottom: flip it above the\n    // cursor so it keeps pointing at the hovered marker instead of covering it.\n    if (y + effectiveHeight > window.innerHeight + window.scrollY) {\n      y = cursorBaseY - effectiveHeight - cursorPaddingY;\n      // When it does not fit above the cursor either, fall back to the screen bottom.\n      if (y < window.scrollY + TOOLTIP_PADDING / 2 || y + effectiveHeight > window.innerHeight + window.scrollY) {\n        y = Math.max(window.innerHeight + window.scrollY - effectiveHeight - cursorPaddingY, TOOLTIP_PADDING / 2);\n      }\n    }\n  }\n\n  // Ensure tooltip does not go out of the screen on the right\n  if (x + effectiveWidth > window.innerWidth) {\n    x = mousePos.page.x - effectiveWidth - cursorPaddingX; // Move to the left of the cursor\n  }\n\n  // Ensure tooltip does not go out of the screen on the left\n  if (x < cursorPaddingX) {\n    x = cursorPaddingX;\n  }\n\n  // Ensure tooltip does not go out of the screen on the top\n  if (y < TOOLTIP_PADDING / 2) {\n    y = TOOLTIP_PADDING / 2;\n  }\n\n  return `translate3d(${x}px, ${y}px, 0)`;\n}\n\n/**\n * Stacking level of a pinned tooltip. It must cover the table legend's sticky header, which\n * react-virtuoso renders at z-index 2, and stay below PanelHeader (5, in @perses-dev/dashboards),\n * the drawer and the sticky dashboard header.\n */\nconst PINNED_TOOLTIP_Z_INDEX = 3;\n\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(\n  theme: Theme,\n  pinnedPos: CursorCoordinates | null,\n  maxHeight?: number,\n): Record<string, unknown> {\n  const adjustedMaxHeight = maxHeight ? maxHeight - TOOLTIP_PADDING : undefined;\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: adjustedMaxHeight ?? TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    // Animating transform causes intermediate positions outside the viewport; animate opacity/visibility instead.\n    transition: 'opacity 0.1s ease-out, visibility 0.1s ease-out',\n    zIndex: pinnedPos !== null ? PINNED_TOOLTIP_Z_INDEX : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n\nexport function getPixelXFromGrid(timestamp: number, chart: EChartsInstance): number | null {\n  try {\n    const pixelCoords = chart.convertToPixel('grid', [timestamp, 0]);\n    return pixelCoords?.[0] ?? null;\n  } catch {\n    return null;\n  }\n}\n\n/**\n * Returns the cumulative (visual) Y for a series, accumulating stack totals in-place.\n * For non-stacked series, returns the raw yValue unchanged.\n * Mutates `stackTotals` — pass a fresh Map for each cursor evaluation.\n */\nexport function calculateVisualYForSeries(\n  seriesIdx: number,\n  yValue: number,\n  seriesMapping: TimeChartSeriesMapping,\n  stackTotals: Map<string, number>,\n): number {\n  const currentSeries = seriesMapping[seriesIdx];\n  if (!currentSeries) return yValue;\n\n  const stackId = (currentSeries as LineSeriesOption | BarSeriesOption).stack;\n  if (!stackId) {\n    return yValue;\n  }\n\n  const stackIdStr = stackId.toString();\n  const currentTotal = stackTotals.get(stackIdStr) ?? 0;\n  const newTotal = currentTotal + yValue;\n  stackTotals.set(stackIdStr, newTotal);\n  return newTotal;\n}\n\nexport function calculateBarBandwidth(timestamp: number, sortedTimestamps: number[], chart: EChartsInstance): number {\n  const currentIdx = sortedTimestamps.indexOf(timestamp);\n  if (currentIdx === -1) {\n    return 20;\n  }\n\n  const prevTimestamp = currentIdx > 0 ? (sortedTimestamps[currentIdx - 1] ?? null) : null;\n  const nextTimestamp = currentIdx < sortedTimestamps.length - 1 ? (sortedTimestamps[currentIdx + 1] ?? null) : null;\n\n  const currentPixelX = getPixelXFromGrid(timestamp, chart);\n  if (currentPixelX === null) return 20;\n\n  let leftBound: number;\n  let rightBound: number;\n\n  if (prevTimestamp !== null && nextTimestamp !== null) {\n    const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;\n    const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;\n    leftBound = (currentPixelX + prevPixelX) / 2;\n    rightBound = (currentPixelX + nextPixelX) / 2;\n  } else if (prevTimestamp !== null) {\n    const prevPixelX = getPixelXFromGrid(prevTimestamp, chart) ?? currentPixelX;\n    leftBound = (currentPixelX + prevPixelX) / 2;\n    rightBound = currentPixelX + (currentPixelX - leftBound);\n  } else if (nextTimestamp !== null) {\n    const nextPixelX = getPixelXFromGrid(nextTimestamp, chart) ?? currentPixelX;\n    rightBound = (currentPixelX + nextPixelX) / 2;\n    leftBound = currentPixelX - (rightBound - currentPixelX);\n  } else {\n    return 20;\n  }\n\n  return Math.max(1, rightBound - leftBound);\n}\n\n/**\n * Computes the pixel left/right bounds of one bar segment within a group.\n * @param barRelativeIdx - zero-based index among bar-only series\n * @param bandwidth      - total pixel width for the bar group\n * @param centerPixelX   - pixel X of the bar group centre\n * @param barCount       - total bar series count (lines excluded)\n */\nexport function calculateBarSegmentBounds(\n  barRelativeIdx: number,\n  bandwidth: number,\n  centerPixelX: number,\n  barCount: number,\n): { left: number; right: number } {\n  const count = Math.max(1, barCount);\n  const segmentWidth = bandwidth / count;\n  const segmentLeft = centerPixelX - bandwidth / 2 + barRelativeIdx * segmentWidth;\n  return {\n    left: segmentLeft,\n    right: segmentLeft + segmentWidth,\n  };\n}\n\nexport function calculateBarYBounds(\n  visualYBottom: number,\n  visualYTop: number,\n  chart: EChartsInstance,\n): { top: number; bottom: number } | null {\n  try {\n    const bottomPixel = chart.convertToPixel('grid', [0, visualYBottom]);\n    const topPixel = chart.convertToPixel('grid', [0, visualYTop]);\n\n    if (!bottomPixel || !topPixel || bottomPixel[1] === undefined || topPixel[1] === undefined) return null;\n\n    // Y increases downward in pixels; min/max normalizes the mapping for negative bar values.\n    return {\n      top: Math.min(topPixel[1], bottomPixel[1]),\n      bottom: Math.max(topPixel[1], bottomPixel[1]),\n    };\n  } catch {\n    return null;\n  }\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_PADDING","assembleTransform","mousePos","pinnedPos","tooltipHeight","tooltipWidth","containerElement","undefined","cursorPaddingX","cursorPaddingY","plotCanvas","x","effectiveHeight","effectiveWidth","page","y","cursorBaseY","containerRect","getBoundingClientRect","left","scrollLeft","top","scrollTop","containerBottom","scrollHeight","Math","max","window","innerHeight","scrollY","innerWidth","PINNED_TOOLTIP_Z_INDEX","getTooltipStyles","theme","maxHeight","adjustedMaxHeight","minWidth","maxWidth","padding","position","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","getPixelXFromGrid","timestamp","chart","pixelCoords","convertToPixel","calculateVisualYForSeries","seriesIdx","yValue","seriesMapping","stackTotals","currentSeries","stackId","stack","stackIdStr","toString","currentTotal","get","newTotal","set","calculateBarBandwidth","sortedTimestamps","currentIdx","indexOf","prevTimestamp","nextTimestamp","length","currentPixelX","leftBound","rightBound","prevPixelX","nextPixelX","calculateBarSegmentBounds","barRelativeIdx","bandwidth","centerPixelX","barCount","count","segmentWidth","segmentLeft","right","calculateBarYBounds","visualYBottom","visualYTop","bottomPixel","topPixel","min","bottom"],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -15,4 +15,5 @@ export * from './time-series-data';
 export * from './trace-data';
 export * from './types';
 export * from './text';
+export * from './url';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,UAAU,CAAC;AACzB,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC;AACzC,cAAc,iBAAiB,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC"}

package/dist/utils/index.js

@@ -27,5 +27,6 @@ export * from "./time-series-data.js";
 export * from "./trace-data.js";
 export * from "./types.js";
 export * from "./text.js";
+export * from "./url.js";
 
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.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\nexport * from './axis';\nexport * from './browser-storage';\nexport * from './chart-actions';\nexport * from './combine-sx';\nexport * from './data-field-interpolation';\nexport * from './format';\nexport * from './request-interpolation';\nexport * from './selection-interpolation';\nexport * from './theme-gen';\nexport * from './variable-interpolation';\nexport * from './value-mapping';\nexport * from './regexp';\nexport * from './transform-data';\nexport * from './time-series-data';\nexport * from './trace-data';\nexport * from './types';\nexport * from './text';\n"],"names":[],"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,cAAc,YAAS;AACvB,cAAc,uBAAoB;AAClC,cAAc,qBAAkB;AAChC,cAAc,kBAAe;AAC7B,cAAc,gCAA6B;AAC3C,cAAc,cAAW;AACzB,cAAc,6BAA0B;AACxC,cAAc,+BAA4B;AAC1C,cAAc,iBAAc;AAC5B,cAAc,8BAA2B;AACzC,cAAc,qBAAkB;AAChC,cAAc,cAAW;AACzB,cAAc,sBAAmB;AACjC,cAAc,wBAAqB;AACnC,cAAc,kBAAe;AAC7B,cAAc,aAAU;AACxB,cAAc,YAAS"}
+{"version":3,"sources":["../../src/utils/index.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\nexport * from './axis';\nexport * from './browser-storage';\nexport * from './chart-actions';\nexport * from './combine-sx';\nexport * from './data-field-interpolation';\nexport * from './format';\nexport * from './request-interpolation';\nexport * from './selection-interpolation';\nexport * from './theme-gen';\nexport * from './variable-interpolation';\nexport * from './value-mapping';\nexport * from './regexp';\nexport * from './transform-data';\nexport * from './time-series-data';\nexport * from './trace-data';\nexport * from './types';\nexport * from './text';\nexport * from './url';\n"],"names":[],"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,cAAc,YAAS;AACvB,cAAc,uBAAoB;AAClC,cAAc,qBAAkB;AAChC,cAAc,kBAAe;AAC7B,cAAc,gCAA6B;AAC3C,cAAc,cAAW;AACzB,cAAc,6BAA0B;AACxC,cAAc,+BAA4B;AAC1C,cAAc,iBAAc;AAC5B,cAAc,8BAA2B;AACzC,cAAc,qBAAkB;AAChC,cAAc,cAAW;AACzB,cAAc,sBAAmB;AACjC,cAAc,wBAAqB;AACnC,cAAc,kBAAe;AAC7B,cAAc,aAAU;AACxB,cAAc,YAAS;AACvB,cAAc,WAAQ"}

package/dist/utils/time-series-data.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-series-data.d.ts","sourceRoot":"","sources":["../../src/utils/time-series-data.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAqB,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAIvH,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,GAAG,oBAAoB,EAAE,CAyBpG;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,GACzE,SAAS,GAAG,SAAS,CAgFvB"}
+{"version":3,"file":"time-series-data.d.ts","sourceRoot":"","sources":["../../src/utils/time-series-data.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAqB,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAIvH,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,GAAG,oBAAoB,EAAE,CAyBpG;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,KAAK,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,GAAG,SAAS,CAAC,GACzE,SAAS,GAAG,SAAS,CAiFvB"}

package/dist/utils/time-series-data.js

@@ -58,9 +58,12 @@ export const MIN_STEP_INTERVAL_MS = 10;
             if (data === undefined || data.timeRange === undefined || data.stepMs === undefined) continue;
             // Keep track of query steps so we can calculate a common one for the graph
             steps.push(data.stepMs);
-            // If we don't have an overall time range yet, just start with this one
+            // If we don't have an overall time range yet, start with a copy of this one.
+            // Copy to avoid mutating the input (e.g. cached query results) when widening the range below.
             if (timeRange === undefined) {
-                timeRange = data.timeRange;
+                timeRange = {
+                    ...data.timeRange
+                };
                 continue;
             }
             // Otherwise, see if this query has a start or end outside of the current

package/dist/utils/time-series-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/time-series-data.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { AbsoluteTimeRange, TimeScale, TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';\n\nimport { gcd } from './mathjs';\n\nexport const MIN_STEP_INTERVAL_MS = 10;\n\n/**\n * Given a TimeSeries from a query and a common time scale (see `getCommonTimeScale`),\n * processes the time series values, filling in any timestamps that are missing\n * from the time series data with `null` values.\n */\nexport function getTimeSeriesValues(series: TimeSeries, timeScale: TimeScale): TimeSeriesValueTuple[] {\n  let timestamp = timeScale.startMs;\n\n  const values = series.values;\n  const processedValues: TimeSeriesValueTuple[] = [];\n\n  for (const valueTuple of values) {\n    // Fill in values up to the current series value timestamp with nulls\n    while (timestamp < valueTuple[0]) {\n      processedValues.push([timestamp, null]);\n      timestamp += timeScale.stepMs;\n    }\n\n    // Now add the current value since timestamp should match\n    processedValues.push([timestamp, valueTuple[1]]);\n    timestamp += timeScale.stepMs;\n  }\n\n  // Add null values at the end of the series if necessary\n  while (timestamp <= timeScale.endMs) {\n    processedValues.push([timestamp, null]);\n    timestamp += timeScale.stepMs;\n  }\n\n  return processedValues;\n}\n\n/**\n * Given a list of running queries, calculates a common time scale for use on\n * the x axis (i.e. start/end dates and a step that is divisible into all of\n * the queries' steps).\n */\nexport function getCommonTimeScale(\n  seriesData: Array<TimeSeriesData | Pick<TimeSeries, 'values'> | undefined>,\n): TimeScale | undefined {\n  let timeRange: AbsoluteTimeRange | undefined = undefined;\n  const steps: number[] = [];\n\n  for (const data of seriesData) {\n    if (data && 'timeRange' in data) {\n      if (data === undefined || data.timeRange === undefined || data.stepMs === undefined) continue;\n\n      // Keep track of query steps so we can calculate a common one for the graph\n      steps.push(data.stepMs);\n\n      // If we don't have an overall time range yet, just start with this one\n      if (timeRange === undefined) {\n        timeRange = data.timeRange;\n        continue;\n      }\n\n      // Otherwise, see if this query has a start or end outside of the current\n      // time range\n      if (data.timeRange.start < timeRange.start) {\n        timeRange.start = data.timeRange.start;\n      }\n      if (data.timeRange.end > timeRange.end) {\n        timeRange.end = data.timeRange.end;\n      }\n    } else if (data && 'values' in data) {\n      for (let i = 0; i < data.values.length; i++) {\n        const values = data.values[i];\n        if (values === undefined) {\n          continue;\n        }\n\n        const [timestamp] = values;\n        const start = new Date(timestamp);\n        const end = new Date(timestamp);\n\n        if (timeRange === undefined) {\n          timeRange = {\n            start,\n            end,\n          };\n          continue;\n        }\n\n        if (start < timeRange.start) {\n          timeRange.start = start;\n        }\n\n        if (end > timeRange.end) {\n          timeRange.end = end;\n        }\n      }\n\n      if (timeRange === undefined) return undefined;\n\n      const startMs = timeRange.start.valueOf();\n      const endMs = timeRange.end.valueOf();\n      const rangeMs = endMs - startMs;\n\n      return { startMs, endMs, rangeMs, stepMs: MIN_STEP_INTERVAL_MS };\n    }\n  }\n\n  if (timeRange === undefined) return undefined;\n\n  // Use the greatest common divisor of all step values as the overall step\n  // for the x axis (or if only one query, just use that query's step value)\n  let stepMs: number;\n  if (steps.length === 1) {\n    stepMs = steps[0] as number;\n  } else {\n    const calculatedStepMs = gcd(...steps);\n    stepMs = calculatedStepMs < MIN_STEP_INTERVAL_MS ? MIN_STEP_INTERVAL_MS : calculatedStepMs;\n  }\n\n  const startMs = timeRange.start.valueOf();\n  const endMs = timeRange.end.valueOf();\n  const rangeMs = endMs - startMs;\n\n  return { startMs, endMs, stepMs, rangeMs };\n}\n"],"names":["gcd","MIN_STEP_INTERVAL_MS","getTimeSeriesValues","series","timeScale","timestamp","startMs","values","processedValues","valueTuple","push","stepMs","endMs","getCommonTimeScale","seriesData","timeRange","undefined","steps","data","start","end","i","length","Date","valueOf","rangeMs","calculatedStepMs"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/time-series-data.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport type { AbsoluteTimeRange, TimeScale, TimeSeries, TimeSeriesData, TimeSeriesValueTuple } from '@perses-dev/spec';\n\nimport { gcd } from './mathjs';\n\nexport const MIN_STEP_INTERVAL_MS = 10;\n\n/**\n * Given a TimeSeries from a query and a common time scale (see `getCommonTimeScale`),\n * processes the time series values, filling in any timestamps that are missing\n * from the time series data with `null` values.\n */\nexport function getTimeSeriesValues(series: TimeSeries, timeScale: TimeScale): TimeSeriesValueTuple[] {\n  let timestamp = timeScale.startMs;\n\n  const values = series.values;\n  const processedValues: TimeSeriesValueTuple[] = [];\n\n  for (const valueTuple of values) {\n    // Fill in values up to the current series value timestamp with nulls\n    while (timestamp < valueTuple[0]) {\n      processedValues.push([timestamp, null]);\n      timestamp += timeScale.stepMs;\n    }\n\n    // Now add the current value since timestamp should match\n    processedValues.push([timestamp, valueTuple[1]]);\n    timestamp += timeScale.stepMs;\n  }\n\n  // Add null values at the end of the series if necessary\n  while (timestamp <= timeScale.endMs) {\n    processedValues.push([timestamp, null]);\n    timestamp += timeScale.stepMs;\n  }\n\n  return processedValues;\n}\n\n/**\n * Given a list of running queries, calculates a common time scale for use on\n * the x axis (i.e. start/end dates and a step that is divisible into all of\n * the queries' steps).\n */\nexport function getCommonTimeScale(\n  seriesData: Array<TimeSeriesData | Pick<TimeSeries, 'values'> | undefined>,\n): TimeScale | undefined {\n  let timeRange: AbsoluteTimeRange | undefined = undefined;\n  const steps: number[] = [];\n\n  for (const data of seriesData) {\n    if (data && 'timeRange' in data) {\n      if (data === undefined || data.timeRange === undefined || data.stepMs === undefined) continue;\n\n      // Keep track of query steps so we can calculate a common one for the graph\n      steps.push(data.stepMs);\n\n      // If we don't have an overall time range yet, start with a copy of this one.\n      // Copy to avoid mutating the input (e.g. cached query results) when widening the range below.\n      if (timeRange === undefined) {\n        timeRange = { ...data.timeRange };\n        continue;\n      }\n\n      // Otherwise, see if this query has a start or end outside of the current\n      // time range\n      if (data.timeRange.start < timeRange.start) {\n        timeRange.start = data.timeRange.start;\n      }\n      if (data.timeRange.end > timeRange.end) {\n        timeRange.end = data.timeRange.end;\n      }\n    } else if (data && 'values' in data) {\n      for (let i = 0; i < data.values.length; i++) {\n        const values = data.values[i];\n        if (values === undefined) {\n          continue;\n        }\n\n        const [timestamp] = values;\n        const start = new Date(timestamp);\n        const end = new Date(timestamp);\n\n        if (timeRange === undefined) {\n          timeRange = {\n            start,\n            end,\n          };\n          continue;\n        }\n\n        if (start < timeRange.start) {\n          timeRange.start = start;\n        }\n\n        if (end > timeRange.end) {\n          timeRange.end = end;\n        }\n      }\n\n      if (timeRange === undefined) return undefined;\n\n      const startMs = timeRange.start.valueOf();\n      const endMs = timeRange.end.valueOf();\n      const rangeMs = endMs - startMs;\n\n      return { startMs, endMs, rangeMs, stepMs: MIN_STEP_INTERVAL_MS };\n    }\n  }\n\n  if (timeRange === undefined) return undefined;\n\n  // Use the greatest common divisor of all step values as the overall step\n  // for the x axis (or if only one query, just use that query's step value)\n  let stepMs: number;\n  if (steps.length === 1) {\n    stepMs = steps[0] as number;\n  } else {\n    const calculatedStepMs = gcd(...steps);\n    stepMs = calculatedStepMs < MIN_STEP_INTERVAL_MS ? MIN_STEP_INTERVAL_MS : calculatedStepMs;\n  }\n\n  const startMs = timeRange.start.valueOf();\n  const endMs = timeRange.end.valueOf();\n  const rangeMs = endMs - startMs;\n\n  return { startMs, endMs, stepMs, rangeMs };\n}\n"],"names":["gcd","MIN_STEP_INTERVAL_MS","getTimeSeriesValues","series","timeScale","timestamp","startMs","values","processedValues","valueTuple","push","stepMs","endMs","getCommonTimeScale","seriesData","timeRange","undefined","steps","data","start","end","i","length","Date","valueOf","rangeMs","calculatedStepMs"],"mappings":"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"}

package/dist/utils/url.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Returns true when the URL is relative or uses one of the allowed schemes (`http:`, `https:`, `mailto:`, `tel:`,
+ * `sms:`, `slack:`, `msteams:`, `vscode:`, `vscode-insiders:`, `zoommtg:`),
+ * i.e. when it is safe to use as the `href` of a link built from user-provided data.
+ * Any other scheme, such as `javascript:`, `data:` or `vbscript:`, is considered unsafe.
+ *
+ * The check relies on the WHATWG URL parser, the one browsers use to resolve an `href`,
+ * so obfuscated schemes (mixed case, leading whitespace or control characters, tabs or newlines inside the scheme, ...)
+ * are normalized before being verified.
+ */
+export declare function isSafeUrl(url: string): boolean;
+/**
+ * Returns the URL when it is safe to use as the `href` of a link (see {@link isSafeUrl}), undefined otherwise.
+ * It must be applied to the final URL, after any interpolation (variables, data fields, ...).
+ */
+export declare function sanitizeUrl(url: string | undefined): string | undefined;
+//# sourceMappingURL=url.d.ts.map

package/dist/utils/url.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/utils/url.ts"],"names":[],"mappings":"AAgCA;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAM9C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKvE"}

package/dist/utils/url.js

@@ -0,0 +1,56 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// None of these schemes can execute a script in the current origin. Besides the web and communication schemes, it
+// includes the deep links of applications commonly used from dashboards, which are handed off to the operating system.
+// Keep it aligned with the list of the Perses API (internal/api/validate/link.go in perses/perses).
+const SAFE_URL_PROTOCOLS = new Set([
+    'http:',
+    'https:',
+    'mailto:',
+    'tel:',
+    'sms:',
+    'slack:',
+    'msteams:',
+    'vscode:',
+    'vscode-insiders:',
+    'zoommtg:'
+]);
+// Only used to resolve relative URLs, so that they are parsed the way a browser resolves them against the page.
+const RELATIVE_URL_BASE = 'http://perses.local';
+/**
+ * Returns true when the URL is relative or uses one of the allowed schemes (`http:`, `https:`, `mailto:`, `tel:`,
+ * `sms:`, `slack:`, `msteams:`, `vscode:`, `vscode-insiders:`, `zoommtg:`),
+ * i.e. when it is safe to use as the `href` of a link built from user-provided data.
+ * Any other scheme, such as `javascript:`, `data:` or `vbscript:`, is considered unsafe.
+ *
+ * The check relies on the WHATWG URL parser, the one browsers use to resolve an `href`,
+ * so obfuscated schemes (mixed case, leading whitespace or control characters, tabs or newlines inside the scheme, ...)
+ * are normalized before being verified.
+ */ export function isSafeUrl(url) {
+    try {
+        return SAFE_URL_PROTOCOLS.has(new URL(url, RELATIVE_URL_BASE).protocol);
+    } catch  {
+        return false;
+    }
+}
+/**
+ * Returns the URL when it is safe to use as the `href` of a link (see {@link isSafeUrl}), undefined otherwise.
+ * It must be applied to the final URL, after any interpolation (variables, data fields, ...).
+ */ export function sanitizeUrl(url) {
+    if (url === undefined || !isSafeUrl(url)) {
+        return undefined;
+    }
+    return url;
+}
+
+//# sourceMappingURL=url.js.map

package/dist/utils/url.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/url.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\n// None of these schemes can execute a script in the current origin. Besides the web and communication schemes, it\n// includes the deep links of applications commonly used from dashboards, which are handed off to the operating system.\n// Keep it aligned with the list of the Perses API (internal/api/validate/link.go in perses/perses).\nconst SAFE_URL_PROTOCOLS = new Set([\n  'http:',\n  'https:',\n  'mailto:',\n  'tel:',\n  'sms:',\n  'slack:',\n  'msteams:',\n  'vscode:',\n  'vscode-insiders:',\n  'zoommtg:',\n]);\n\n// Only used to resolve relative URLs, so that they are parsed the way a browser resolves them against the page.\nconst RELATIVE_URL_BASE = 'http://perses.local';\n\n/**\n * Returns true when the URL is relative or uses one of the allowed schemes (`http:`, `https:`, `mailto:`, `tel:`,\n * `sms:`, `slack:`, `msteams:`, `vscode:`, `vscode-insiders:`, `zoommtg:`),\n * i.e. when it is safe to use as the `href` of a link built from user-provided data.\n * Any other scheme, such as `javascript:`, `data:` or `vbscript:`, is considered unsafe.\n *\n * The check relies on the WHATWG URL parser, the one browsers use to resolve an `href`,\n * so obfuscated schemes (mixed case, leading whitespace or control characters, tabs or newlines inside the scheme, ...)\n * are normalized before being verified.\n */\nexport function isSafeUrl(url: string): boolean {\n  try {\n    return SAFE_URL_PROTOCOLS.has(new URL(url, RELATIVE_URL_BASE).protocol);\n  } catch {\n    return false;\n  }\n}\n\n/**\n * Returns the URL when it is safe to use as the `href` of a link (see {@link isSafeUrl}), undefined otherwise.\n * It must be applied to the final URL, after any interpolation (variables, data fields, ...).\n */\nexport function sanitizeUrl(url: string | undefined): string | undefined {\n  if (url === undefined || !isSafeUrl(url)) {\n    return undefined;\n  }\n  return url;\n}\n"],"names":["SAFE_URL_PROTOCOLS","Set","RELATIVE_URL_BASE","isSafeUrl","url","has","URL","protocol","sanitizeUrl","undefined"],"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,kHAAkH;AAClH,uHAAuH;AACvH,oGAAoG;AACpG,MAAMA,qBAAqB,IAAIC,IAAI;IACjC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED,gHAAgH;AAChH,MAAMC,oBAAoB;AAE1B;;;;;;;;;CASC,GACD,OAAO,SAASC,UAAUC,GAAW;IACnC,IAAI;QACF,OAAOJ,mBAAmBK,GAAG,CAAC,IAAIC,IAAIF,KAAKF,mBAAmBK,QAAQ;IACxE,EAAE,OAAM;QACN,OAAO;IACT;AACF;AAEA;;;CAGC,GACD,OAAO,SAASC,YAAYJ,GAAuB;IACjD,IAAIA,QAAQK,aAAa,CAACN,UAAUC,MAAM;QACxC,OAAOK;IACT;IACA,OAAOL;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.55.0-rc.1",
+  "version": "0.55.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -34,8 +34,8 @@
     "@date-fns/tz": "^1.4.1",
     "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
-    "@perses-dev/spec": "0.3.0-rc.1",
-    "@perses-dev/client": "0.55.0-rc.1",
+    "@perses-dev/spec": "0.3.0",
+    "@perses-dev/client": "0.55.1",
     "numbro": "^2.3.6",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",