@perses-dev/components 0.31.0 → 0.33.0

package/dist/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableDensity, 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.paper,\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'> {\n  density: TableDensity;\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}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\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'\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  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      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density),\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      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","paper","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,IAAIC,YAAY,EAAEC,MAAM,EAAuCC,GAAG,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AACtH,SAASC,SAAS,EAAEC,MAAM,QAAQ,OAAO,CAAC;AAC1C,SAAuBC,kBAAkB,QAAQ,qBAAqB,CAAC;AAEvE,MAAMC,kBAAkB,GAAGN,MAAM,CAACD,YAAY,CAAC,CAAC,CAAC,EAAEQ,KAAK,CAAA,EAAE,GAAM,CAAA;QAC9DC,OAAO,EAAE,CAAC;QACVC,eAAe,EAAE,SAAS;QAE1B,qBAAqB,EAAE;YACrB,kEAAkE;YAClEA,eAAe,EAAEF,KAAK,CAACG,OAAO,CAACC,UAAU,CAACC,KAAK;SAChD;QACD,iBAAiB,EAAE;YACjBC,OAAO,EAAE,CAAC,UAAU,EAAEN,KAAK,CAACG,OAAO,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;YAClD,uEAAuE;YACvE,4BAA4B;YAC5BC,aAAa,EAAE,MAAM;YACrBC,YAAY,EAAE,CAAC;SAChB;KACF,CAAA,AAAC,CAAC,AAAC;AAiBJ,OAAO,SAASnB,SAAS,CAAC,EACxBoB,QAAQ,CAAA,EACRC,OAAO,CAAA,EACPC,OAAO,CAAA,EACPC,KAAK,CAAA,EACLC,UAAU,EAAG,MAAM,CAAA,EACnBC,cAAc,CAAA,EACd,GAAGC,UAAU,EACE,EAAE;IACjB,MAAMjB,KAAK,GAAGL,QAAQ,EAAE,AAAC;IAEzB,MAAMuB,KAAK,GAAGrB,MAAM,EAAwB,AAAC;IAE7C,MAAMsB,QAAQ,GAAGN,OAAO,KAAK,MAAM,AAAC;IAEpCjB,SAAS,CAAC,IAAM;QACd,IAAImB,UAAU,KAAK,eAAe,IAAIG,KAAK,CAACE,OAAO,EAAE;YACnDF,KAAK,CAACE,OAAO,CAACC,KAAK,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,EAAE;QAACN,UAAU;KAAC,CAAC,CAAC;IAEjB,MAAMO,WAAW,GAAkD,CAACC,CAAC,GAAK;YAE9CA,GAAe;QADzC,4DAA4D;QAC5D,MAAMC,iBAAiB,GAAGD,CAAAA,GAAe,GAAfA,CAAC,CAACE,aAAa,cAAfF,GAAe,WAAe,GAA9BA,KAAAA,CAA8B,GAA9BA,GAAe,CAAEG,aAAa,CACtD,mDAAmD,CACpD,AAAC;QACF,IAAIF,iBAAiB,EAAE;YACrB,uEAAuE;YACvE,6CAA6C;YAC7CA,iBAAiB,CAACH,KAAK,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,AAAC;IAEF,MAAMM,6BAA6B,GAAqC,CAACJ,CAAC,GAAK;QAC7E,wEAAwE;QACxE,uEAAuE;QACvE,iEAAiE;QACjE,yEAAyE;QACzE,0CAA0C;QAC1CP,cAAc,aAAdA,cAAc,WAAK,GAAnBA,KAAAA,CAAmB,GAAnBA,cAAc,CAAGO,CAAC,CAAC,CAAC;IACtB,CAAC,AAAC;IAEF,qBACE,KAACxB,kBAAkB;QAChB,GAAGkB,UAAU;QACd,2EAA2E;QAC3E,wEAAwE;QACxE,qEAAqE;QACrE,QAAQ;QACRW,QAAQ,EAAEb,UAAU,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;QACxCc,OAAO,EAAEP,WAAW;QACpBQ,OAAO,EAAEH,6BAA6B;QACtCI,OAAO,EAAEJ,6BAA6B;QACtCK,EAAE,EAAE;YACFlB,KAAK,EAAEA,KAAK;YACZmB,YAAY,EAAEd,QAAQ,GAClB,CAACnB,KAAK,GAAK,CAAC,UAAU,EAAEA,KAAK,CAACG,OAAO,CAAC+B,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GACjD,CAAC,UAAU,EAAElC,KAAK,CAACG,OAAO,CAAC+B,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;SAC1C;QACDC,GAAG,EAAEjB,KAAK;kBAEV,cAAA,KAACxB,GAAG;YACFsC,EAAE,EAAE;gBACF,GAAGlC,kBAAkB,CAACE,KAAK,EAAEY,OAAO,CAAC;gBACrCwB,QAAQ,EAAE,UAAU;gBAEpB,mEAAmE;gBACnE,mDAAmD;gBACnDC,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEA5B,QAAQ;UACL;MACa,CACrB;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Table/TableCell.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableCell as MuiTableCell, styled, TableCellProps as MuiTableCellProps, Box, useTheme } from '@mui/material';\nimport { useEffect, useRef } from 'react';\nimport { TableDensity, 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'> {\n  density: TableDensity;\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}\n\nexport function TableCell({\n  children,\n  density,\n  variant,\n  width,\n  focusState = 'none',\n  onFocusTrigger,\n  ...otherProps\n}: TableCellProps) {\n  const theme = useTheme();\n\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'\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  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      sx={{\n        width: width,\n        borderBottom: isHeader\n          ? (theme) => `solid 1px ${theme.palette.grey[100]}`\n          : `solid 1px ${theme.palette.grey[50]}`,\n      }}\n      ref={elRef}\n    >\n      <Box\n        sx={{\n          ...getTableCellLayout(theme, density),\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      >\n        {children}\n      </Box>\n    </StyledMuiTableCell>\n  );\n}\n"],"names":["TableCell","MuiTableCell","styled","Box","useTheme","useEffect","useRef","getTableCellLayout","StyledMuiTableCell","theme","padding","backgroundColor","palette","background","default","outline","primary","main","outlineOffset","borderRadius","children","density","variant","width","focusState","onFocusTrigger","otherProps","elRef","isHeader","current","focus","handleFocus","e","nestedFocusTarget","currentTarget","querySelector","handleInteractionFocusTrigger","tabIndex","onFocus","onClick","onKeyUp","sx","borderBottom","grey","ref","position","whiteSpace","overflow","textOverflow"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../src/Table/TableRow.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA2B,aAAa,IAAI,gBAAgB,EAAS,MAAM,eAAe,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,aAAc,SAAQ,gBAAgB,CAAC,KAAK,CAAC;IACrD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,eAAO,MAAM,QAAQ,iqJAanB,CAAC"}

package/dist/Table/TableRow.js

@@ -11,16 +11,16 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TableRow as MuiTableRow } from '@mui/material';
+import { TableRow as MuiTableRow, alpha } from '@mui/material';
 import { forwardRef } from 'react';
 export const TableRow = /*#__PURE__*/ forwardRef(function TableRow(props, ref) {
     return /*#__PURE__*/ _jsx(MuiTableRow, {
         ...props,
         ref: ref,
         sx: {
-            backgroundColor: (theme)=>theme.palette.background.paper,
+            backgroundColor: (theme)=>theme.palette.background.default,
             '&:hover': {
-                backgroundColor: (theme)=>theme.palette.primary.light
+                backgroundColor: (theme)=>alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
             }
         }
     });

package/dist/Table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Table/TableRow.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.paper,\n        '&:hover': {\n          backgroundColor: (theme) => theme.palette.primary.light,\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","paper","primary","light"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,IAAIC,WAAW,QAA2C,eAAe,CAAC;AAC3F,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMF,QAAQ,iBAAGE,UAAU,CAAqC,SAASF,QAAQ,CAACG,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACH,WAAW;QACT,GAAGE,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;YAC1D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,KAAK;aACxD;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Table/TableRow.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TableRow as MuiTableRow, TableRowProps as MuiTableRowProps, alpha } from '@mui/material';\nimport { forwardRef } from 'react';\nimport { TableDensity } from './model/table-model';\n\ninterface TableRowProps extends MuiTableRowProps<'div'> {\n  density: TableDensity;\n}\n\nexport const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(props, ref) {\n  return (\n    <MuiTableRow\n      {...props}\n      ref={ref}\n      sx={{\n        backgroundColor: (theme) => theme.palette.background.default,\n        '&:hover': {\n          backgroundColor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity),\n        },\n      }}\n    />\n  );\n});\n"],"names":["TableRow","MuiTableRow","alpha","forwardRef","props","ref","sx","backgroundColor","theme","palette","background","default","primary","main","action","hoverOpacity"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,IAAIC,WAAW,EAAqCC,KAAK,QAAQ,eAAe,CAAC;AAClG,SAASC,UAAU,QAAQ,OAAO,CAAC;AAOnC,OAAO,MAAMH,QAAQ,iBAAGG,UAAU,CAAqC,SAASH,QAAQ,CAACI,KAAK,EAAEC,GAAG,EAAE;IACnG,qBACE,KAACJ,WAAW;QACT,GAAGG,KAAK;QACTC,GAAG,EAAEA,GAAG;QACRC,EAAE,EAAE;YACFC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,UAAU,CAACC,OAAO;YAC5D,SAAS,EAAE;gBACTJ,eAAe,EAAE,CAACC,KAAK,GAAKN,KAAK,CAACM,KAAK,CAACC,OAAO,CAACG,OAAO,CAACC,IAAI,EAAEL,KAAK,CAACC,OAAO,CAACK,MAAM,CAACC,YAAY,CAAC;aACjG;SACF;MACD,CACF;AACJ,CAAC,CAAC,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts

@@ -1,14 +1,14 @@
+/// <reference types="react" />
 import { ECharts as EChartsInstance } from 'echarts/core';
-import React from 'react';
 import { EChartsDataFormat, UnitOptions } from '../model';
-interface TimeSeriesTooltipProps {
+import { CursorCoordinates } from './tooltip-model';
+export interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
-    isTooltipPinned: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
     onUnpinClick?: () => void;
+    pinnedPos: CursorCoordinates | null;
 }
-export declare const TimeSeriesTooltip: React.NamedExoticComponent<TimeSeriesTooltipProps>;
-export {};
+export declare const TimeSeriesTooltip: import("react").NamedExoticComponent<TimeSeriesTooltipProps>;
 //# sourceMappingURL=TimeSeriesTooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAa1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,oDAwG5B,CAAC"}
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAI1D,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB,8DAiF5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -11,27 +11,28 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Portal, Typography, Stack, Switch } from '@mui/material';
-import React, { useState } from 'react';
+import { Box, Portal, Stack } from '@mui/material';
+import { memo, useState } from 'react';
 import useResizeObserver from 'use-resize-observer';
 import { TooltipContent } from './TooltipContent';
+import { TooltipHeader } from './TooltipHeader';
 import { getNearbySeriesData } from './nearby-series';
-import { FALLBACK_CHART_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
+import { FALLBACK_CHART_WIDTH, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, TOOLTIP_MIN_WIDTH, useMousePosition } from './tooltip-model';
 import { assembleTransform } from './utils';
-export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , unit , onUnpinClick , pinnedPos  }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
-    const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     const { height , width , ref: tooltipRef  } = useResizeObserver();
+    const isTooltipPinned = pinnedPos !== null;
     if (mousePos === null || mousePos.target === null) return null;
     // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.
     const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     // Get series nearby the cursor and pass into tooltip content children.
-    const focusedSeries = getNearbySeriesData({
+    const nearbySeries = getNearbySeriesData({
         mousePos,
         chartData,
         pinnedPos,
@@ -39,27 +40,25 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
         unit,
         showAllSeries
     });
-    if (focusedSeries.length === 0) {
+    if (nearbySeries.length === 0) {
         return null;
     }
-    if (isTooltipPinned === true && pinnedPos === null) {
-        setPinnedPos(mousePos);
-    }
-    // Option for user to see all series instead of only the nearby focused series.
-    // Only relevant when there are more total series than are visible.
-    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
+    const totalSeries = chartData.timeSeries.length;
+    var ref1;
     return /*#__PURE__*/ _jsx(Portal, {
-        children: /*#__PURE__*/ _jsxs(Box, {
+        children: /*#__PURE__*/ _jsx(Box, {
             ref: tooltipRef,
-            sx: (theme)=>({
+            sx: (theme)=>{
+                var ref;
+                return {
                     minWidth: TOOLTIP_MIN_WIDTH,
                     maxWidth: TOOLTIP_MAX_WIDTH,
                     maxHeight: TOOLTIP_MAX_HEIGHT,
-                    padding: theme.spacing(0.5, 2),
+                    padding: 0,
                     position: 'absolute',
                     top: 0,
                     left: 0,
-                    backgroundColor: '#2E313E',
+                    backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : TOOLTIP_BG_COLOR_FALLBACK,
                     borderRadius: '6px',
                     color: '#fff',
                     fontSize: '11px',
@@ -71,45 +70,28 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
                     '&:hover': {
                         overflowY: 'auto'
                     }
-                }),
+                };
+            },
             style: {
                 transform: cursorTransform
             },
-            children: [
-                /*#__PURE__*/ _jsx(TooltipContent, {
-                    series: focusedSeries,
-                    wrapLabels: wrapLabels,
-                    isTooltipPinned: isTooltipPinned,
-                    onUnpinClick: ()=>{
-                        setPinnedPos(null);
-                        if (onUnpinClick !== undefined) {
-                            onUnpinClick();
-                        }
-                    }
-                }),
-                showAllSeriesToggle && /*#__PURE__*/ _jsxs(Stack, {
-                    direction: "row",
-                    gap: 1,
-                    alignItems: "center",
-                    sx: {
-                        textAlign: 'right'
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(Typography, {
-                            children: "Show All?"
-                        }),
-                        /*#__PURE__*/ _jsx(Switch, {
-                            checked: showAllSeries,
-                            onChange: (_, checked)=>setShowAllSeries(checked),
-                            sx: (theme)=>({
-                                    '& .MuiSwitch-switchBase': {
-                                        color: theme.palette.common.white
-                                    }
-                                })
-                        })
-                    ]
-                })
-            ]
+            children: /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsx(TooltipHeader, {
+                        nearbySeries: nearbySeries,
+                        totalSeries: totalSeries,
+                        isTooltipPinned: isTooltipPinned,
+                        showAllSeries: showAllSeries,
+                        onShowAllClick: (checked)=>setShowAllSeries(checked),
+                        onUnpinClick: onUnpinClick
+                    }),
+                    /*#__PURE__*/ _jsx(TooltipContent, {
+                        series: nearbySeries,
+                        wrapLabels: wrapLabels
+                    })
+                ]
+            })
         })
     });
 });

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Typography, Stack, Switch } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport React, { useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_MAX_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  isTooltipPinned,\n  unit,\n  onUnpinClick,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const focusedSeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (isTooltipPinned === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  // Option for user to see all series instead of only the nearby focused series.\n  // Only relevant when there are more total series than are visible.\n  const showAllSeriesToggle =\n    isTooltipPinned === true &&\n    showAllSeries === false &&\n    chartData.timeSeries.length > 1 &&\n    focusedSeries.length !== chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          padding: theme.spacing(0.5, 2),\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent\n          series={focusedSeries}\n          wrapLabels={wrapLabels}\n          isTooltipPinned={isTooltipPinned}\n          onUnpinClick={() => {\n            setPinnedPos(null);\n            if (onUnpinClick !== undefined) {\n              onUnpinClick();\n            }\n          }}\n        />\n        {showAllSeriesToggle && (\n          <Stack direction=\"row\" gap={1} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n            <Typography>Show All?</Typography>\n            <Switch\n              checked={showAllSeries}\n              onChange={(_, checked) => setShowAllSeries(checked)}\n              sx={(theme) => ({\n                '& .MuiSwitch-switchBase': {\n                  color: theme.palette.common.white,\n                },\n              })}\n            />\n          </Stack>\n        )}\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Typography","Stack","Switch","React","useState","useResizeObserver","TooltipContent","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","isTooltipPinned","unit","onUnpinClick","showAllSeries","setShowAllSeries","pinnedPos","setPinnedPos","mousePos","height","width","ref","tooltipRef","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","focusedSeries","length","showAllSeriesToggle","timeSeries","sx","theme","minWidth","maxWidth","maxHeight","padding","spacing","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","series","undefined","direction","gap","alignItems","textAlign","checked","onChange","_","palette","common","white"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n  CursorCoordinates,\n  FALLBACK_CHART_WIDTH,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MIN_WIDTH,\n  useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n  onUnpinClick?: () => void;\n  pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  unit,\n  onUnpinClick,\n  pinnedPos,\n}: TimeSeriesTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null;\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // Ensure user is hovering over a chart before checking for nearby series.\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n  const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n  // Get series nearby the cursor and pass into tooltip content children.\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    chartData,\n    pinnedPos,\n    chart,\n    unit,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = chartData.timeSeries.length;\n\n  return (\n    <Portal>\n      <Box\n        ref={tooltipRef}\n        sx={(theme) => ({\n          minWidth: TOOLTIP_MIN_WIDTH,\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: 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          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts

@@ -2,9 +2,7 @@
 import { NearbySeriesArray } from './nearby-series';
 export interface TooltipContentProps {
     series: NearbySeriesArray | null;
-    isTooltipPinned: boolean;
     wrapLabels?: boolean;
-    onUnpinClick: () => void;
 }
 export declare function TooltipContent(props: TooltipContentProps): JSX.Element | null;
 //# sourceMappingURL=TooltipContent.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sBAyFxD"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,sBAsCxD"}

package/dist/TimeSeriesTooltip/TooltipContent.js

@@ -10,116 +10,40 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import PinOutline from 'mdi-material-ui/PinOutline';
-import Pin from 'mdi-material-ui/Pin';
-import { Box, Divider, Stack, Typography } from '@mui/material';
-import { useTimeZone } from '../context/TimeZoneProvider';
+import { Box } from '@mui/material';
 import { SeriesInfo } from './SeriesInfo';
 export function TooltipContent(props) {
-    const { series , wrapLabels , isTooltipPinned , onUnpinClick  } = props;
-    const { formatWithUserTimeZone  } = useTimeZone();
-    const seriesTime = series && series[0] && series[0].date ? series[0].date : null;
-    const formatTimeSeriesHeader = (timeMs)=>{
-        const date = new Date(timeMs);
-        const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
-        const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ _jsxs(Box, {
-            children: [
-                /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    sx: (theme)=>({
-                            color: theme.palette.common.white
-                        }),
-                    children: formattedDate
-                }),
-                /*#__PURE__*/ _jsx(Typography, {
-                    variant: "caption",
-                    children: /*#__PURE__*/ _jsx("strong", {
-                        children: formattedTime
-                    })
-                })
-            ]
-        });
-    };
+    const { series , wrapLabels  } = props;
     const sortedFocusedSeries = useMemo(()=>{
         if (series === null) return null;
         return series.sort((a, b)=>a.y > b.y ? -1 : 1);
     }, [
         series
     ]);
-    if (sortedFocusedSeries === null || seriesTime === null) {
+    if (series === null || sortedFocusedSeries === null) {
         return null;
     }
     // TODO: use react-virtuoso to improve performance
-    return /*#__PURE__*/ _jsxs(Stack, {
-        py: 1,
-        spacing: 0.5,
-        children: [
-            /*#__PURE__*/ _jsxs(Box, {
-                sx: {
-                    display: 'flex',
-                    justifyContent: 'start',
-                    alignItems: 'center'
-                },
-                children: [
-                    formatTimeSeriesHeader(seriesTime),
-                    /*#__PURE__*/ _jsxs(Stack, {
-                        direction: "row",
-                        gap: 1,
-                        sx: {
-                            marginLeft: 'auto'
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsxs(Typography, {
-                                sx: {
-                                    fontSize: 11
-                                },
-                                children: [
-                                    "Click to ",
-                                    isTooltipPinned ? 'Unpin' : 'Pin'
-                                ]
-                            }),
-                            isTooltipPinned ? /*#__PURE__*/ _jsx(Pin, {
-                                onClick: onUnpinClick,
-                                sx: {
-                                    fontSize: 16,
-                                    cursor: 'pointer'
-                                }
-                            }) : /*#__PURE__*/ _jsx(PinOutline, {
-                                sx: {
-                                    fontSize: 16
-                                }
-                            })
-                        ]
-                    })
-                ]
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: (theme)=>({
+                display: 'table',
+                padding: theme.spacing(0.5, 2)
             }),
-            /*#__PURE__*/ _jsx(Divider, {
-                sx: (theme)=>({
-                        borderColor: theme.palette.grey['500']
-                    })
-            }),
-            /*#__PURE__*/ _jsx(Box, {
-                sx: {
-                    display: 'table'
-                },
-                children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
-                    if (datumIdx === null || seriesIdx === null) return null;
-                    const key = seriesIdx.toString() + datumIdx.toString();
-                    return /*#__PURE__*/ _jsx(SeriesInfo, {
-                        seriesName: seriesName,
-                        y: y,
-                        formattedY: formattedY,
-                        markerColor: markerColor,
-                        totalSeries: sortedFocusedSeries.length,
-                        wrapLabels: wrapLabels,
-                        emphasizeText: isClosestToCursor
-                    }, key);
-                })
-            })
-        ]
+        children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+            if (datumIdx === null || seriesIdx === null) return null;
+            const key = seriesIdx.toString() + datumIdx.toString();
+            return /*#__PURE__*/ _jsx(SeriesInfo, {
+                seriesName: seriesName,
+                y: y,
+                formattedY: formattedY,
+                markerColor: markerColor,
+                totalSeries: sortedFocusedSeries.length,
+                wrapLabels: wrapLabels,
+                emphasizeText: isClosestToCursor
+            }, key);
+        })
     });
 }
 

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport Pin from 'mdi-material-ui/Pin';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './nearby-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  isTooltipPinned: boolean;\n  wrapLabels?: boolean;\n  onUnpinClick: () => void;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { series, wrapLabels, isTooltipPinned, onUnpinClick } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = series && series[0] && series[0].date ? series[0].date : null;\n\n  const formatTimeSeriesHeader = (timeMs: number) => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (sortedFocusedSeries === null || seriesTime === null) {\n    return null;\n  }\n\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Stack py={1} spacing={0.5}>\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTime)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          <Typography sx={{ fontSize: 11 }}>Click to {isTooltipPinned ? 'Unpin' : 'Pin'}</Typography>\n          {isTooltipPinned ? (\n            <Pin onClick={onUnpinClick} sx={{ fontSize: 16, cursor: 'pointer' }} />\n          ) : (\n            <PinOutline sx={{ fontSize: 16 }} />\n          )}\n        </Stack>\n      </Box>\n\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={{\n          display: 'table',\n        }}\n      >\n        {sortedFocusedSeries.map(\n          ({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n                emphasizeText={isClosestToCursor}\n              />\n            );\n          }\n        )}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["useMemo","PinOutline","Pin","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","series","wrapLabels","isTooltipPinned","onUnpinClick","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","spacing","display","justifyContent","alignItems","direction","gap","marginLeft","fontSize","onClick","cursor","borderColor","grey","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { NearbySeriesArray } from './nearby-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n        if (datumIdx === null || seriesIdx === null) return null;\n        const key = seriesIdx.toString() + datumIdx.toString();\n\n        return (\n          <SeriesInfo\n            key={key}\n            seriesName={seriesName}\n            y={y}\n            formattedY={formattedY}\n            markerColor={markerColor}\n            totalSeries={sortedFocusedSeries.length}\n            wrapLabels={wrapLabels}\n            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","sort","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAO1C,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,MAAM,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGF,KAAK,AAAC;IAErC,MAAMG,mBAAmB,GAAGP,OAAO,CAAC,IAAM;QACxC,IAAIK,MAAM,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;QACjC,OAAOA,MAAM,CAACG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAMD,CAAC,CAACE,CAAC,GAAGD,CAAC,CAACC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,AAAC,CAAC,CAAC;IACrD,CAAC,EAAE;QAACN,MAAM;KAAC,CAAC,AAAC;IAEb,IAAIA,MAAM,KAAK,IAAI,IAAIE,mBAAmB,KAAK,IAAI,EAAE;QACnD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,kDAAkD;IAClD,qBACE,KAACN,GAAG;QACFW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;gBACdC,OAAO,EAAE,OAAO;gBAChBC,OAAO,EAAEF,KAAK,CAACG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;aAC/B,CAAA,AAAC;kBAEDT,mBAAmB,CAACU,GAAG,CAAC,CAAC,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAET,CAAC,CAAA,EAAEU,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAEC,iBAAiB,CAAA,EAAE,GAAK;YAC/G,IAAIL,QAAQ,KAAK,IAAI,IAAIC,SAAS,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;YACzD,MAAMK,GAAG,GAAGL,SAAS,CAACM,QAAQ,EAAE,GAAGP,QAAQ,CAACO,QAAQ,EAAE,AAAC;YAEvD,qBACE,KAACvB,UAAU;gBAETkB,UAAU,EAAEA,UAAU;gBACtBT,CAAC,EAAEA,CAAC;gBACJU,UAAU,EAAEA,UAAU;gBACtBC,WAAW,EAAEA,WAAW;gBACxBI,WAAW,EAAEnB,mBAAmB,CAACoB,MAAM;gBACvCrB,UAAU,EAAEA,UAAU;gBACtBsB,aAAa,EAAEL,iBAAiB;eAP3BC,GAAG,CAQR,CACF;QACJ,CAAC,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { NearbySeriesArray } from './nearby-series';
+export interface TooltipHeaderProps {
+    nearbySeries: NearbySeriesArray;
+    totalSeries: number;
+    isTooltipPinned: boolean;
+    showAllSeries: boolean;
+    onShowAllClick?: (checked: boolean) => void;
+    onUnpinClick?: () => void;
+}
+export declare const TooltipHeader: import("react").NamedExoticComponent<TooltipHeaderProps>;
+//# sourceMappingURL=TooltipHeader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DAwHxB,CAAC"}