@dynatrace/strato-components 3.4.1 → 3.5.2

package/esm/charts/core/components/selection-area/SelectionTooltipWithAsyncActions.js

@@ -1,23 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { debounce } from "lodash-es";
 import {
   useCallback,
   useEffect,
   useState
 } from "react";
-import Spacings from "@dynatrace/strato-design-tokens/spacings";
-import {
-  disabledActions,
-  tooltipContainer,
-  tooltipHeaderSubtext
-} from "./SelectionArea.sty.js";
 import { CustomActions, CustomIntents } from "./tooltip/CustomActions.js";
 import { getStratoLogger } from "../../../../core/sdk/sdk-logger.js";
 import { Divider } from "../../../../layouts/divider/Divider.js";
-import {
-  ChartTooltip
-} from "../tooltip/ChartTooltip/ChartTooltip.js";
+import { OverlayTooltip } from "../overlay-tooltip/OverlayTooltip.js";
+import { divider } from "../overlay-tooltip/tooltip.sty.js";
 const DEBOUNCING_TIME = 150;
 const emptyActionsMenu = { actions: [], intents: [] };
 const SelectionTooltipWithAsyncActions = (props) => {
@@ -53,38 +45,50 @@ const SelectionTooltipWithAsyncActions = (props) => {
   }, [props.range[0], props.range[1]]);
   const hasActions = !!actionsMenu.actions.length;
   const hasIntents = !!actionsMenu.intents.length;
-  const hasBody = props.zoomEnabled || hasActions || hasIntents;
-  return /* @__PURE__ */ jsxs(ChartTooltip, { position: props.position, className: tooltipContainer, children: [
-    /* @__PURE__ */ jsxs(
-      ChartTooltip.Header,
-      {
-        withoutDivider: !hasBody,
-        style: { gap: Spacings.Size0 },
-        children: [
-          props.header,
-          /* @__PURE__ */ jsx(ChartTooltip.Subheader, { children: /* @__PURE__ */ jsx("span", { className: tooltipHeaderSubtext, children: /* @__PURE__ */ jsx(ChartTooltip.TextHeader, { text: props.headerSubtext }) }) })
-        ]
-      }
-    ),
-    hasBody ? /* @__PURE__ */ jsxs(
-      ChartTooltip.Body,
-      {
-        className: clsx(props.selectFinished || disabledActions),
-        children: [
-          props.children,
-          hasActions ? /* @__PURE__ */ jsx(CustomActions, { actions: actionsMenu.actions }) : null,
-          hasIntents && (hasActions || props.zoomEnabled) ? /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
+    OverlayTooltip,
+    {
+      isInteractive: props.selectFinished,
+      absoluteX: props.position.x,
+      absoluteY: props.position.y,
+      children: [
+        props.header,
+        (!!props.children || hasActions || hasIntents) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
             Divider,
             {
               orientation: "horizontal",
-              style: { margin: `${Spacings.Size4} 0` }
+              className: divider
+            },
+            "headerDivider"
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                maxHeight: "96px",
+                overflowY: "auto",
+                overflowX: "hidden"
+              },
+              children: [
+                props.children,
+                hasActions ? /* @__PURE__ */ jsx(CustomActions, { actions: actionsMenu.actions }) : null,
+                hasIntents && (hasActions || !!props.children) ? /* @__PURE__ */ jsx(
+                  Divider,
+                  {
+                    orientation: "horizontal",
+                    className: divider
+                  },
+                  "actionsDivider"
+                ) : null,
+                hasIntents ? /* @__PURE__ */ jsx(CustomIntents, { intents: actionsMenu?.intents }) : null
+              ]
             }
-          ) : null,
-          hasIntents ? /* @__PURE__ */ jsx(CustomIntents, { intents: actionsMenu?.intents }) : null
-        ]
-      }
-    ) : null
-  ] });
+          )
+        ] })
+      ]
+    }
+  );
 };
 export {
   SelectionTooltipWithAsyncActions

package/esm/charts/core/components/selection-area/SelectionTooltipWithAsyncActions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/selection-area/SelectionTooltipWithAsyncActions.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { debounce } from 'lodash-es';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n} from 'react';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\n\nimport {\n  disabledActions,\n  tooltipContainer,\n  tooltipHeaderSubtext,\n} from './SelectionArea.sty.js';\nimport { CustomActions, CustomIntents } from './tooltip/CustomActions.js';\nimport { getStratoLogger } from '../../../../core/sdk/sdk-logger.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { getCustomContextMenuItems } from '../interactions-overlay/utils/get-custom-context-menu-items.js';\nimport {\n  ChartTooltip,\n  type ChartTooltipProps,\n} from '../tooltip/ChartTooltip/ChartTooltip.js';\n\ntype ActionsMenu = ReturnType<typeof getCustomContextMenuItems>;\nexport type SelectionTooltipWithAsyncActionsProps = {\n  actions: () => Promise<ActionsMenu> | undefined;\n  headerSubtext: string;\n  position: ChartTooltipProps['position'];\n  zoomEnabled: boolean;\n  header: ReactElement;\n  range: [number, number] | [Date, Date];\n  selectFinished: boolean;\n};\n\nconst DEBOUNCING_TIME = 150;\nconst emptyActionsMenu: ActionsMenu = { actions: [], intents: [] };\n\nexport const SelectionTooltipWithAsyncActions = (\n  props: PropsWithChildren<SelectionTooltipWithAsyncActionsProps>,\n) => {\n  const [actionsMenu, setActionsMenu] = useState<ActionsMenu>(emptyActionsMenu);\n  const logger = getStratoLogger('SelectionTooltipWithAsyncActions');\n  const fetchActions = useCallback(\n    debounce(\n      (actions: SelectionTooltipWithAsyncActionsProps['actions']) => {\n        const promise = actions();\n\n        if (promise) {\n          promise\n            .then((result) => {\n              if (result.actions.length || result.intents.length) {\n                setActionsMenu(result);\n              }\n            })\n            .catch((error) => {\n              logger.error('Failed to load select series actions', error);\n            });\n        }\n      },\n      DEBOUNCING_TIME,\n      { leading: false, trailing: true },\n    ),\n    [logger],\n  );\n\n  useEffect(() => {\n    if (!!actionsMenu.actions.length || !!actionsMenu.intents.length) {\n      setActionsMenu(emptyActionsMenu);\n    }\n\n    props.actions && fetchActions(props.actions);\n\n    return () => {\n      fetchActions.cancel();\n    };\n  }, [props.range[0], props.range[1]]);\n\n  const hasActions = !!actionsMenu.actions.length;\n  const hasIntents = !!actionsMenu.intents.length;\n  const hasBody = props.zoomEnabled || hasActions || hasIntents;\n\n  return (\n    <ChartTooltip position={props.position} className={tooltipContainer}>\n      <ChartTooltip.Header\n        withoutDivider={!hasBody}\n        style={{ gap: Spacings.Size0 }}\n      >\n        {props.header}\n        <ChartTooltip.Subheader>\n          <span className={tooltipHeaderSubtext}>\n            <ChartTooltip.TextHeader text={props.headerSubtext} />\n          </span>\n        </ChartTooltip.Subheader>\n      </ChartTooltip.Header>\n      {hasBody ? (\n        <ChartTooltip.Body\n          className={clsx(props.selectFinished || disabledActions)}\n        >\n          {props.children}\n          {hasActions ? <CustomActions actions={actionsMenu.actions} /> : null}\n          {hasIntents && (hasActions || props.zoomEnabled) ? (\n            <Divider\n              orientation=\"horizontal\"\n              style={{ margin: `${Spacings.Size4} 0` }}\n            />\n          ) : null}\n          {hasIntents ? <CustomIntents intents={actionsMenu?.intents} /> : null}\n        </ChartTooltip.Body>\n      ) : null}\n    </ChartTooltip>\n  );\n};\n"],
-  "mappings": "AAsFM,SAOM,KAPN;AAtFN,OAAO,UAAU;AACjB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,OAAO,cAAc;AAErB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe,qBAAqB;AAC7C,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,OAEK;AAaP,MAAM,kBAAkB;AACxB,MAAM,mBAAgC,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,EAAE;AAE1D,MAAM,mCAAmC,CAC9C,UACG;AACH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB,gBAAgB;AAC5E,QAAM,SAAS,gBAAgB,kCAAkC;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,CAAC,YAA8D;AAC7D,cAAM,UAAU,QAAQ;AAExB,YAAI,SAAS;AACX,kBACG,KAAK,CAAC,WAAW;AAChB,gBAAI,OAAO,QAAQ,UAAU,OAAO,QAAQ,QAAQ;AAClD,6BAAe,MAAM;AAAA,YACvB;AAAA,UACF,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,mBAAO,MAAM,wCAAwC,KAAK;AAAA,UAC5D,CAAC;AAAA,QACL;AAAA,MACF;AAAA,MACA;AAAA,MACA,EAAE,SAAS,OAAO,UAAU,KAAK;AAAA,IACnC;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,CAAC,YAAY,QAAQ,UAAU,CAAC,CAAC,YAAY,QAAQ,QAAQ;AAChE,qBAAe,gBAAgB;AAAA,IACjC;AAEA,UAAM,WAAW,aAAa,MAAM,OAAO;AAE3C,WAAO,MAAM;AACX,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC;AAEnC,QAAM,aAAa,CAAC,CAAC,YAAY,QAAQ;AACzC,QAAM,aAAa,CAAC,CAAC,YAAY,QAAQ;AACzC,QAAM,UAAU,MAAM,eAAe,cAAc;AAEnD,SACE,qBAAC,gBAAa,UAAU,MAAM,UAAU,WAAW,kBACjD;AAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,gBAAgB,CAAC;AAAA,QACjB,OAAO,EAAE,KAAK,SAAS,MAAM;AAAA,QAE5B;AAAA,gBAAM;AAAA,UACP,oBAAC,aAAa,WAAb,EACC,8BAAC,UAAK,WAAW,sBACf,8BAAC,aAAa,YAAb,EAAwB,MAAM,MAAM,eAAe,GACtD,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IACC,UACC;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,WAAW,KAAK,MAAM,kBAAkB,eAAe;AAAA,QAEtD;AAAA,gBAAM;AAAA,UACN,aAAa,oBAAC,iBAAc,SAAS,YAAY,SAAS,IAAK;AAAA,UAC/D,eAAe,cAAc,MAAM,eAClC;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cACZ,OAAO,EAAE,QAAQ,GAAG,SAAS,KAAK,KAAK;AAAA;AAAA,UACzC,IACE;AAAA,UACH,aAAa,oBAAC,iBAAc,SAAS,aAAa,SAAS,IAAK;AAAA;AAAA;AAAA,IACnE,IACE;AAAA,KACN;AAEJ;",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  useCallback,\n  useEffect,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n} from 'react';\n\nimport { CustomActions, CustomIntents } from './tooltip/CustomActions.js';\nimport { getStratoLogger } from '../../../../core/sdk/sdk-logger.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport type { Point } from '../../types/point.js';\nimport { getCustomContextMenuItems } from '../interactions-overlay/utils/get-custom-context-menu-items.js';\nimport { OverlayTooltip } from '../overlay-tooltip/OverlayTooltip.js';\nimport { divider } from '../overlay-tooltip/tooltip.sty.js';\n\ntype ActionsMenu = ReturnType<typeof getCustomContextMenuItems>;\nexport type SelectionTooltipWithAsyncActionsProps = {\n  actions: () => Promise<ActionsMenu> | undefined;\n  position: Point;\n  zoomEnabled: boolean;\n  header: ReactElement;\n  range: [number, number] | [Date, Date];\n  selectFinished: boolean;\n};\n\nconst DEBOUNCING_TIME = 150;\nconst emptyActionsMenu: ActionsMenu = { actions: [], intents: [] };\n\nexport const SelectionTooltipWithAsyncActions = (\n  props: PropsWithChildren<SelectionTooltipWithAsyncActionsProps>,\n) => {\n  const [actionsMenu, setActionsMenu] = useState<ActionsMenu>(emptyActionsMenu);\n  const logger = getStratoLogger('SelectionTooltipWithAsyncActions');\n  const fetchActions = useCallback(\n    debounce(\n      (actions: SelectionTooltipWithAsyncActionsProps['actions']) => {\n        const promise = actions();\n\n        if (promise) {\n          promise\n            .then((result) => {\n              if (result.actions.length || result.intents.length) {\n                setActionsMenu(result);\n              }\n            })\n            .catch((error) => {\n              logger.error('Failed to load select series actions', error);\n            });\n        }\n      },\n      DEBOUNCING_TIME,\n      { leading: false, trailing: true },\n    ),\n    [logger],\n  );\n\n  useEffect(() => {\n    if (!!actionsMenu.actions.length || !!actionsMenu.intents.length) {\n      setActionsMenu(emptyActionsMenu);\n    }\n\n    props.actions && fetchActions(props.actions);\n\n    return () => {\n      fetchActions.cancel();\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [props.range[0], props.range[1]]);\n\n  const hasActions = !!actionsMenu.actions.length;\n  const hasIntents = !!actionsMenu.intents.length;\n\n  return (\n    <OverlayTooltip\n      isInteractive={props.selectFinished}\n      absoluteX={props.position.x}\n      absoluteY={props.position.y}\n    >\n      {props.header}\n      {(!!props.children || hasActions || hasIntents) && (\n        <>\n          <Divider\n            orientation=\"horizontal\"\n            key=\"headerDivider\"\n            className={divider}\n          />\n          <div\n            style={{\n              maxHeight: '96px',\n              overflowY: 'auto',\n              overflowX: 'hidden',\n            }}\n          >\n            {props.children}\n            {hasActions ? (\n              <CustomActions actions={actionsMenu.actions} />\n            ) : null}\n            {hasIntents && (hasActions || !!props.children) ? (\n              <Divider\n                orientation=\"horizontal\"\n                key=\"actionsDivider\"\n                className={divider}\n              />\n            ) : null}\n            {hasIntents ? (\n              <CustomIntents intents={actionsMenu?.intents} />\n            ) : null}\n          </div>\n        </>\n      )}\n    </OverlayTooltip>\n  );\n};\n"],
+  "mappings": "AAkFQ,mBACE,KAKA,YANF;AAlFR,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAEP,SAAS,eAAe,qBAAqB;AAC7C,SAAS,uBAAuB;AAChC,SAAS,eAAe;AAGxB,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AAYxB,MAAM,kBAAkB;AACxB,MAAM,mBAAgC,EAAE,SAAS,CAAC,GAAG,SAAS,CAAC,EAAE;AAE1D,MAAM,mCAAmC,CAC9C,UACG;AACH,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB,gBAAgB;AAC5E,QAAM,SAAS,gBAAgB,kCAAkC;AACjE,QAAM,eAAe;AAAA,IACnB;AAAA,MACE,CAAC,YAA8D;AAC7D,cAAM,UAAU,QAAQ;AAExB,YAAI,SAAS;AACX,kBACG,KAAK,CAAC,WAAW;AAChB,gBAAI,OAAO,QAAQ,UAAU,OAAO,QAAQ,QAAQ;AAClD,6BAAe,MAAM;AAAA,YACvB;AAAA,UACF,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,mBAAO,MAAM,wCAAwC,KAAK;AAAA,UAC5D,CAAC;AAAA,QACL;AAAA,MACF;AAAA,MACA;AAAA,MACA,EAAE,SAAS,OAAO,UAAU,KAAK;AAAA,IACnC;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,CAAC,YAAY,QAAQ,UAAU,CAAC,CAAC,YAAY,QAAQ,QAAQ;AAChE,qBAAe,gBAAgB;AAAA,IACjC;AAEA,UAAM,WAAW,aAAa,MAAM,OAAO;AAE3C,WAAO,MAAM;AACX,mBAAa,OAAO;AAAA,IACtB;AAAA,EAEF,GAAG,CAAC,MAAM,MAAM,CAAC,GAAG,MAAM,MAAM,CAAC,CAAC,CAAC;AAEnC,QAAM,aAAa,CAAC,CAAC,YAAY,QAAQ;AACzC,QAAM,aAAa,CAAC,CAAC,YAAY,QAAQ;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe,MAAM;AAAA,MACrB,WAAW,MAAM,SAAS;AAAA,MAC1B,WAAW,MAAM,SAAS;AAAA,MAEzB;AAAA,cAAM;AAAA,SACL,CAAC,CAAC,MAAM,YAAY,cAAc,eAClC,iCACE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,aAAY;AAAA,cAEZ,WAAW;AAAA;AAAA,YADP;AAAA,UAEN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,WAAW;AAAA,gBACX,WAAW;AAAA,gBACX,WAAW;AAAA,cACb;AAAA,cAEC;AAAA,sBAAM;AAAA,gBACN,aACC,oBAAC,iBAAc,SAAS,YAAY,SAAS,IAC3C;AAAA,gBACH,eAAe,cAAc,CAAC,CAAC,MAAM,YACpC;AAAA,kBAAC;AAAA;AAAA,oBACC,aAAY;AAAA,oBAEZ,WAAW;AAAA;AAAA,kBADP;AAAA,gBAEN,IACE;AAAA,gBACH,aACC,oBAAC,iBAAc,SAAS,aAAa,SAAS,IAC5C;AAAA;AAAA;AAAA,UACN;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/core/components/selection-area/tooltip/get-selection-tooltip-position.js

@@ -1,7 +1,11 @@
+const TOOLTIP_OFFSET_X = 6;
+const TOOLTIP_OFFSET_Y = 12;
 const getSelectionTooltipPosition = (selectState, chartBounds) => {
   return {
-    x: chartBounds.left + chartBounds.width * (selectState.selectionPercentage ? selectState.selectionPercentage[1] : 0) / 100,
-    y: chartBounds.top + selectState.end.relative.y
+    x: Math.round(
+      TOOLTIP_OFFSET_X + chartBounds.left + chartBounds.width * (selectState.selectionPercentage ? selectState.selectionPercentage[1] : 0) / 100
+    ),
+    y: Math.round(chartBounds.top + chartBounds.height / 2 - TOOLTIP_OFFSET_Y)
   };
 };
 export {

package/esm/charts/core/components/selection-area/tooltip/get-selection-tooltip-position.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/selection-area/tooltip/get-selection-tooltip-position.ts"],
-  "sourcesContent": ["import type { Point } from '../../../types/point.js';\n\nexport interface SelectionState {\n  selectionPercentage?: [number, number];\n  end: {\n    relative: Point;\n  };\n}\n\nexport interface ChartBounds {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n/**\n * Calculates the position for the selection area tooltip.\n *\n * @param selectState - The current selection state\n * @param chartBounds - The chart bounds including position and dimensions\n * @returns The absolute position for the tooltip\n */\nexport const getSelectionTooltipPosition = (\n  selectState: SelectionState,\n  chartBounds: ChartBounds,\n): Point => {\n  return {\n    x:\n      chartBounds.left +\n      (chartBounds.width *\n        (selectState.selectionPercentage\n          ? selectState.selectionPercentage[1]\n          : 0)) /\n        100,\n    y: chartBounds.top + selectState.end.relative.y,\n  };\n};\n"],
-  "mappings": "AAuBO,MAAM,8BAA8B,CACzC,aACA,gBACU;AACV,SAAO;AAAA,IACL,GACE,YAAY,OACX,YAAY,SACV,YAAY,sBACT,YAAY,oBAAoB,CAAC,IACjC,KACJ;AAAA,IACJ,GAAG,YAAY,MAAM,YAAY,IAAI,SAAS;AAAA,EAChD;AACF;",
+  "sourcesContent": ["import type { Point } from '../../../types/point.js';\n\nexport interface SelectionState {\n  selectionPercentage?: [number, number];\n  end: {\n    relative: Point;\n  };\n}\n\nexport interface ChartBounds {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\nconst TOOLTIP_OFFSET_X = 6;\nconst TOOLTIP_OFFSET_Y = 12;\n\n/**\n * Calculates the position for the selection area tooltip.\n *\n * @param selectState - The current selection state\n * @param chartBounds - The chart bounds including position and dimensions\n * @returns The absolute position for the tooltip\n */\nexport const getSelectionTooltipPosition = (\n  selectState: SelectionState,\n  chartBounds: ChartBounds,\n): Point => {\n  return {\n    x: Math.round(\n      TOOLTIP_OFFSET_X +\n        chartBounds.left +\n        (chartBounds.width *\n          (selectState.selectionPercentage\n            ? selectState.selectionPercentage[1]\n            : 0)) /\n          100,\n    ),\n    y: Math.round(chartBounds.top + chartBounds.height / 2 - TOOLTIP_OFFSET_Y),\n  };\n};\n"],
+  "mappings": "AAgBA,MAAM,mBAAmB;AACzB,MAAM,mBAAmB;AASlB,MAAM,8BAA8B,CACzC,aACA,gBACU;AACV,SAAO;AAAA,IACL,GAAG,KAAK;AAAA,MACN,mBACE,YAAY,OACX,YAAY,SACV,YAAY,sBACT,YAAY,oBAAoB,CAAC,IACjC,KACJ;AAAA,IACN;AAAA,IACA,GAAG,KAAK,MAAM,YAAY,MAAM,YAAY,SAAS,IAAI,gBAAgB;AAAA,EAC3E;AACF;",
   "names": []
 }

package/esm/charts/core/components/series-action/ChartActionsMenuAsync.js

@@ -11,7 +11,10 @@ import { useResolveAsyncComponent } from "../../hooks/useResolveAsyncComponent.j
 import { renderMenuActionChildren } from "../../utils/render-menu-action-children.js";
 const ACTIONS_MENU_SIDE_OFFSET = 0;
 const ChartActionsMenuAsync = forwardRef((props, forwardedRef) => {
-  const { children, isOpen } = props;
+  const { children, isOpen, hasActions } = props;
+  if (!hasActions) {
+    return children;
+  }
   return /* @__PURE__ */ jsxs(Menu, { open: isOpen, modal: false, children: [
     /* @__PURE__ */ jsx(Menu.Trigger, { children }),
     /* @__PURE__ */ jsx(Content, { ...props, ref: forwardedRef })

package/esm/charts/core/components/series-action/ChartActionsMenuAsync.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/series-action/ChartActionsMenuAsync.tsx"],
-  "sourcesContent": ["import { noop } from 'lodash-es';\nimport {\n  forwardRef,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ComponentProps,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport { useResolveAsyncComponent } from '../../hooks/useResolveAsyncComponent.js';\nimport { renderMenuActionChildren } from '../../utils/render-menu-action-children.js';\n\ntype ChartActionsMenuAsyncProps = {\n  isOpen: boolean;\n  defaultActions?: ReactNode;\n  header?: ReactElement | null;\n  onActionSelected?: MouseEventHandler<HTMLDivElement>;\n  actions: (() => Promise<ReactElement>) | undefined;\n  delay?: number;\n};\n\nconst ACTIONS_MENU_SIDE_OFFSET = 0;\n\ntype InternalMenuContentProps = ComponentProps<typeof Menu.Content> & {\n  _sideOffset?: number;\n};\n\nexport const ChartActionsMenuAsync = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ChartActionsMenuAsyncProps>\n>((props: PropsWithChildren<ChartActionsMenuAsyncProps>, forwardedRef) => {\n  const { children, isOpen } = props;\n\n  return (\n    <Menu open={isOpen} modal={false}>\n      <Menu.Trigger>{children}</Menu.Trigger>\n      <Content {...props} ref={forwardedRef} />\n    </Menu>\n  );\n});\n\nconst Content = forwardRef<HTMLDivElement, ChartActionsMenuAsyncProps>(\n  (props, forwardedRef) => {\n    const {\n      isOpen,\n      actions,\n      defaultActions,\n      onActionSelected,\n      header,\n      delay = 0,\n    } = props;\n    const [shouldRun, setShouldRun] = useState(false);\n    const ref = useRef<HTMLDivElement>(null);\n    const customActions = useResolveAsyncComponent(actions, shouldRun);\n    const defaultActionsMapped =\n      shouldRun && defaultActions\n        ? renderMenuActionChildren(defaultActions)\n        : null;\n\n    useEffect(() => {\n      if (!isOpen) {\n        return;\n      }\n\n      const timer = setTimeout(() => {\n        setShouldRun(true);\n      }, delay);\n\n      return () => {\n        clearTimeout(timer);\n        setShouldRun(false);\n      };\n    }, [isOpen, delay]);\n\n    if (!shouldRun) {\n      return null;\n    }\n\n    const menuContentProps = {\n      ref: forwardedRef,\n      side: 'right',\n      _sideOffset: ACTIONS_MENU_SIDE_OFFSET,\n    } as InternalMenuContentProps;\n\n    return (\n      <Menu.Content {...menuContentProps}>\n        <div ref={ref} style={{ width: '100%' }} role=\"tooltip\">\n          <Menu.Group>{header}</Menu.Group>\n          <span role=\"none\" onClick={onActionSelected} onKeyDown={noop}>\n            <Menu.Group>\n              {defaultActionsMapped}\n              {customActions &&\n                renderMenuActionChildren(customActions.props.children, {\n                  divideActionsAndIntents: false,\n                })}\n            </Menu.Group>\n          </span>\n        </div>\n      </Menu.Content>\n    );\n  },\n);\n"],
-  "mappings": "AAuCI,SACE,KADF;AAvCJ,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EAMA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AAWzC,MAAM,2BAA2B;AAM1B,MAAM,wBAAwB,WAGnC,CAAC,OAAsD,iBAAiB;AACxE,QAAM,EAAE,UAAU,OAAO,IAAI;AAE7B,SACE,qBAAC,QAAK,MAAM,QAAQ,OAAO,OACzB;AAAA,wBAAC,KAAK,SAAL,EAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,GAAG,OAAO,KAAK,cAAc;AAAA,KACzC;AAEJ,CAAC;AAED,MAAM,UAAU;AAAA,EACd,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV,IAAI;AACJ,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,UAAM,MAAM,OAAuB,IAAI;AACvC,UAAM,gBAAgB,yBAAyB,SAAS,SAAS;AACjE,UAAM,uBACJ,aAAa,iBACT,yBAAyB,cAAc,IACvC;AAEN,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AAEA,YAAM,QAAQ,WAAW,MAAM;AAC7B,qBAAa,IAAI;AAAA,MACnB,GAAG,KAAK;AAER,aAAO,MAAM;AACX,qBAAa,KAAK;AAClB,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AAEA,UAAM,mBAAmB;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAEA,WACE,oBAAC,KAAK,SAAL,EAAc,GAAG,kBAChB,+BAAC,SAAI,KAAU,OAAO,EAAE,OAAO,OAAO,GAAG,MAAK,WAC5C;AAAA,0BAAC,KAAK,OAAL,EAAY,kBAAO;AAAA,MACpB,oBAAC,UAAK,MAAK,QAAO,SAAS,kBAAkB,WAAW,MACtD,+BAAC,KAAK,OAAL,EACE;AAAA;AAAA,QACA,iBACC,yBAAyB,cAAc,MAAM,UAAU;AAAA,UACrD,yBAAyB;AAAA,QAC3B,CAAC;AAAA,SACL,GACF;AAAA,OACF,GACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { noop } from 'lodash-es';\nimport {\n  forwardRef,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ComponentProps,\n  type ReactElement,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport { useResolveAsyncComponent } from '../../hooks/useResolveAsyncComponent.js';\nimport { renderMenuActionChildren } from '../../utils/render-menu-action-children.js';\n\ntype ChartActionsMenuAsyncProps = {\n  isOpen: boolean;\n  defaultActions?: ReactNode;\n  header?: ReactElement | null;\n  onActionSelected?: MouseEventHandler<HTMLDivElement>;\n  actions: (() => Promise<ReactElement>) | undefined;\n  delay?: number;\n  hasActions: boolean;\n};\n\nconst ACTIONS_MENU_SIDE_OFFSET = 0;\n\ntype InternalMenuContentProps = ComponentProps<typeof Menu.Content> & {\n  _sideOffset?: number;\n};\n\nexport const ChartActionsMenuAsync = forwardRef<\n  HTMLDivElement,\n  PropsWithChildren<ChartActionsMenuAsyncProps>\n>((props: PropsWithChildren<ChartActionsMenuAsyncProps>, forwardedRef) => {\n  const { children, isOpen, hasActions } = props;\n  if (!hasActions) {\n    return children;\n  }\n\n  return (\n    <Menu open={isOpen} modal={false}>\n      <Menu.Trigger>{children}</Menu.Trigger>\n      <Content {...props} ref={forwardedRef} />\n    </Menu>\n  );\n});\n\nconst Content = forwardRef<HTMLDivElement, ChartActionsMenuAsyncProps>(\n  (props, forwardedRef) => {\n    const {\n      isOpen,\n      actions,\n      defaultActions,\n      onActionSelected,\n      header,\n      delay = 0,\n    } = props;\n    const [shouldRun, setShouldRun] = useState(false);\n    const ref = useRef<HTMLDivElement>(null);\n    const customActions = useResolveAsyncComponent(actions, shouldRun);\n    const defaultActionsMapped =\n      shouldRun && defaultActions\n        ? renderMenuActionChildren(defaultActions)\n        : null;\n\n    useEffect(() => {\n      if (!isOpen) {\n        return;\n      }\n\n      const timer = setTimeout(() => {\n        setShouldRun(true);\n      }, delay);\n\n      return () => {\n        clearTimeout(timer);\n        setShouldRun(false);\n      };\n    }, [isOpen, delay]);\n\n    if (!shouldRun) {\n      return null;\n    }\n\n    const menuContentProps = {\n      ref: forwardedRef,\n      side: 'right',\n      _sideOffset: ACTIONS_MENU_SIDE_OFFSET,\n    } as InternalMenuContentProps;\n\n    return (\n      <Menu.Content {...menuContentProps}>\n        <div ref={ref} style={{ width: '100%' }} role=\"tooltip\">\n          <Menu.Group>{header}</Menu.Group>\n          <span role=\"none\" onClick={onActionSelected} onKeyDown={noop}>\n            <Menu.Group>\n              {defaultActionsMapped}\n              {customActions &&\n                renderMenuActionChildren(customActions.props.children, {\n                  divideActionsAndIntents: false,\n                })}\n            </Menu.Group>\n          </span>\n        </div>\n      </Menu.Content>\n    );\n  },\n);\n"],
+  "mappings": "AA2CI,SACE,KADF;AA3CJ,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EAMA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AAYzC,MAAM,2BAA2B;AAM1B,MAAM,wBAAwB,WAGnC,CAAC,OAAsD,iBAAiB;AACxE,QAAM,EAAE,UAAU,QAAQ,WAAW,IAAI;AACzC,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,QAAK,MAAM,QAAQ,OAAO,OACzB;AAAA,wBAAC,KAAK,SAAL,EAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,GAAG,OAAO,KAAK,cAAc;AAAA,KACzC;AAEJ,CAAC;AAED,MAAM,UAAU;AAAA,EACd,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,IACV,IAAI;AACJ,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,UAAM,MAAM,OAAuB,IAAI;AACvC,UAAM,gBAAgB,yBAAyB,SAAS,SAAS;AACjE,UAAM,uBACJ,aAAa,iBACT,yBAAyB,cAAc,IACvC;AAEN,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ;AACX;AAAA,MACF;AAEA,YAAM,QAAQ,WAAW,MAAM;AAC7B,qBAAa,IAAI;AAAA,MACnB,GAAG,KAAK;AAER,aAAO,MAAM;AACX,qBAAa,KAAK;AAClB,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,QAAI,CAAC,WAAW;AACd,aAAO;AAAA,IACT;AAEA,UAAM,mBAAmB;AAAA,MACvB,KAAK;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAEA,WACE,oBAAC,KAAK,SAAL,EAAc,GAAG,kBAChB,+BAAC,SAAI,KAAU,OAAO,EAAE,OAAO,OAAO,GAAG,MAAK,WAC5C;AAAA,0BAAC,KAAK,OAAL,EAAY,kBAAO;AAAA,MACpB,oBAAC,UAAK,MAAK,QAAO,SAAS,kBAAkB,WAAW,MACtD,+BAAC,KAAK,OAAL,EACE;AAAA;AAAA,QACA,iBACC,yBAAyB,cAAc,MAAM,UAAU;AAAA,UACrD,yBAAyB;AAAA,QAC3B,CAAC;AAAA,SACL,GACF;AAAA,OACF,GACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/charts/core/components/shape/BubbleShape/BubbleShape.css

@@ -1,18 +1,18 @@
-._hctkb30-3-4-1 {
+._hctkb30-3-5-2 {
   border-radius: 50%;
 }
-._hctkb31-3-4-1 {
+._hctkb31-3-5-2 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._hctkb32-3-4-1 {
+._hctkb32-3-5-2 {
   border: none;
 }
-._hctkb33-3-4-1 {
+._hctkb33-3-5-2 {
   border-width: 1px;
   border-style: solid;
   border-radius: 50%;
 }
-._hctkb34-3-4-1 {
+._hctkb34-3-5-2 {
   height: 8px;
   width: 8px;
   border-radius: 50%;

package/esm/charts/core/components/shape/BubbleShape/BubbleShape.sty.js

@@ -1,8 +1,8 @@
 import "./BubbleShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var bubble = "_hctkb34-3-4-1";
-var bubbleBorder = "_hctkb33-3-4-1";
-var bubbleOutline = _7a468({ defaultClassName: "_hctkb30-3-4-1", variantClassNames: { active: { true: "_hctkb31-3-4-1", false: "_hctkb32-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var bubble = "_hctkb34-3-5-2";
+var bubbleBorder = "_hctkb33-3-5-2";
+var bubbleOutline = _7a468({ defaultClassName: "_hctkb30-3-5-2", variantClassNames: { active: { true: "_hctkb31-3-5-2", false: "_hctkb32-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   bubble,
   bubbleBorder,

package/esm/charts/core/components/shape/BubbleShape/BubbleShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/BubbleShape/BubbleShape.css.ts"],
-  "sourcesContent": ["import './BubbleShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bubble = '_hctkb34-3-4-1';\nexport var bubbleBorder = '_hctkb33-3-4-1';\nexport var bubbleOutline = _7a468({defaultClassName:'_hctkb30-3-4-1',variantClassNames:{active:{true:'_hctkb31-3-4-1',false:'_hctkb32-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './BubbleShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var bubble = '_hctkb34-3-5-2';\nexport var bubbleBorder = '_hctkb33-3-5-2';\nexport var bubbleOutline = _7a468({defaultClassName:'_hctkb30-3-5-2',variantClassNames:{active:{true:'_hctkb31-3-5-2',false:'_hctkb32-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,SAAS;AACb,IAAI,eAAe;AACnB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/shape/EmojiShape/EmojiShape.css

@@ -1,4 +1,4 @@
-._s37yxn0-3-4-1 {
+._s37yxn0-3-5-2 {
   border-radius: 4px;
   display: flex;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._s37yxn1-3-4-1 {
+._s37yxn1-3-5-2 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._s37yxn2-3-4-1 {
+._s37yxn2-3-5-2 {
   border: none;
 }

package/esm/charts/core/components/shape/EmojiShape/EmojiShape.sty.js

@@ -1,6 +1,6 @@
 import "./EmojiShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var emojiShape = _7a468({ defaultClassName: "_s37yxn0-3-4-1", variantClassNames: { active: { true: "_s37yxn1-3-4-1", false: "_s37yxn2-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var emojiShape = _7a468({ defaultClassName: "_s37yxn0-3-5-2", variantClassNames: { active: { true: "_s37yxn1-3-5-2", false: "_s37yxn2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   emojiShape
 };

package/esm/charts/core/components/shape/EmojiShape/EmojiShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/EmojiShape/EmojiShape.css.ts"],
-  "sourcesContent": ["import './EmojiShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emojiShape = _7a468({defaultClassName:'_s37yxn0-3-4-1',variantClassNames:{active:{true:'_s37yxn1-3-4-1',false:'_s37yxn2-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './EmojiShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var emojiShape = _7a468({defaultClassName:'_s37yxn0-3-5-2',variantClassNames:{active:{true:'_s37yxn1-3-5-2',false:'_s37yxn2-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,QAAO,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/shape/IconShape/IconShape.css

@@ -1,4 +1,4 @@
-._1jwo1lm0-3-4-1 {
+._1jwo1lm0-3-5-2 {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -7,9 +7,9 @@
   height: 100%;
   box-sizing: border-box;
 }
-._1jwo1lm1-3-4-1 {
+._1jwo1lm1-3-5-2 {
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._1jwo1lm2-3-4-1 {
+._1jwo1lm2-3-5-2 {
   border: none;
 }

package/esm/charts/core/components/shape/IconShape/IconShape.sty.js

@@ -1,6 +1,6 @@
 import "./IconShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var iconShape = _7a468({ defaultClassName: "_1jwo1lm0-3-4-1", variantClassNames: { active: { true: "_1jwo1lm1-3-4-1", false: "_1jwo1lm2-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
+var iconShape = _7a468({ defaultClassName: "_1jwo1lm0-3-5-2", variantClassNames: { active: { true: "_1jwo1lm1-3-5-2", false: "_1jwo1lm2-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   iconShape
 };

package/esm/charts/core/components/shape/IconShape/IconShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/IconShape/IconShape.css.ts"],
-  "sourcesContent": ["import './IconShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconShape = _7a468({defaultClassName:'_1jwo1lm0-3-4-1',variantClassNames:{active:{true:'_1jwo1lm1-3-4-1',false:'_1jwo1lm2-3-4-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './IconShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconShape = _7a468({defaultClassName:'_1jwo1lm0-3-5-2',variantClassNames:{active:{true:'_1jwo1lm1-3-5-2',false:'_1jwo1lm2-3-5-2'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,QAAO,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/charts/core/components/shape/styles/DataPointShape.css

@@ -1,4 +1,4 @@
-._ihihf60-3-4-1 {
+._ihihf60-3-5-2 {
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
   border-radius: var(--dt-spacings-size-64, 64px);
@@ -7,39 +7,39 @@
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf61-3-4-1 {
+._ihihf61-3-5-2 {
   width: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-spacings-size-64, 64px);
   height: 72%;
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf62-3-4-1 {
+._ihihf62-3-5-2 {
   display: flex;
   border: 1px solid var(--dt-colors-text-neutral-default, #2f2f4f);
   border-radius: var(--dt-spacings-size-20, 20px);
   margin-left: auto;
   margin-right: auto;
 }
-._ihihf63-3-4-1 {
+._ihihf63-3-5-2 {
   margin-top: var(--dt-spacings-size-2, 2px);
   width: var(--dt-spacings-size-8, 8px);
   height: var(--dt-spacings-size-8, 8px);
 }
-._ihihf64-3-4-1 {
+._ihihf64-3-5-2 {
   margin-top: inherit;
   width: var(--dt-spacings-size-6, 6px);
   height: 72%;
 }
-._ihihf65-3-4-1 {
+._ihihf65-3-5-2 {
   margin: auto auto;
   border-radius: var(--dt-spacings-size-64, 64px);
 }
-._ihihf66-3-4-1 {
+._ihihf66-3-5-2 {
   width: var(--dt-spacings-size-6, 6px);
   height: var(--dt-spacings-size-6, 6px);
 }
-._ihihf67-3-4-1 {
+._ihihf67-3-5-2 {
   width: var(--dt-spacings-size-4, 4px);
   height: 94%;
 }

package/esm/charts/core/components/shape/styles/DataPointShape.sty.js

@@ -1,9 +1,9 @@
 import "./DataPointShape.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var innerHighlightedIcon = _7a468({ defaultClassName: "_ihihf65-3-4-1", variantClassNames: { singleLine: { true: "_ihihf66-3-4-1", false: "_ihihf67-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var multiDimensionIcon = "_ihihf61-3-4-1";
-var outerHighlightedIcon = _7a468({ defaultClassName: "_ihihf62-3-4-1", variantClassNames: { singleLine: { true: "_ihihf63-3-4-1", false: "_ihihf64-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var singleDimensionIcon = "_ihihf60-3-4-1";
+var innerHighlightedIcon = _7a468({ defaultClassName: "_ihihf65-3-5-2", variantClassNames: { singleLine: { true: "_ihihf66-3-5-2", false: "_ihihf67-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var multiDimensionIcon = "_ihihf61-3-5-2";
+var outerHighlightedIcon = _7a468({ defaultClassName: "_ihihf62-3-5-2", variantClassNames: { singleLine: { true: "_ihihf63-3-5-2", false: "_ihihf64-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var singleDimensionIcon = "_ihihf60-3-5-2";
 export {
   innerHighlightedIcon,
   multiDimensionIcon,

package/esm/charts/core/components/shape/styles/DataPointShape.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/shape/styles/DataPointShape.css.ts"],
-  "sourcesContent": ["import './DataPointShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var innerHighlightedIcon = _7a468({defaultClassName:'_ihihf65-3-4-1',variantClassNames:{singleLine:{true:'_ihihf66-3-4-1',false:'_ihihf67-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var multiDimensionIcon = '_ihihf61-3-4-1';\nexport var outerHighlightedIcon = _7a468({defaultClassName:'_ihihf62-3-4-1',variantClassNames:{singleLine:{true:'_ihihf63-3-4-1',false:'_ihihf64-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var singleDimensionIcon = '_ihihf60-3-4-1';"],
+  "sourcesContent": ["import './DataPointShape.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var innerHighlightedIcon = _7a468({defaultClassName:'_ihihf65-3-5-2',variantClassNames:{singleLine:{true:'_ihihf66-3-5-2',false:'_ihihf67-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var multiDimensionIcon = '_ihihf61-3-5-2';\nexport var outerHighlightedIcon = _7a468({defaultClassName:'_ihihf62-3-5-2',variantClassNames:{singleLine:{true:'_ihihf63-3-5-2',false:'_ihihf64-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var singleDimensionIcon = '_ihihf60-3-5-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,qBAAqB;AACzB,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,sBAAsB;",
   "names": []
 }

package/esm/charts/core/components/shared-chart-interactions/SharedChartInteractions.css

@@ -1,4 +1,4 @@
-._14qoaxs0-3-4-1 {
+._14qoaxs0-3-5-2 {
   position: absolute;
   width: 100%;
   height: 100%;

package/esm/charts/core/components/shared-chart-interactions/SharedChartInteractions.sty.js

@@ -1,5 +1,5 @@
 import "./SharedChartInteractions.css";
-var containerSVG = "_14qoaxs0-3-4-1";
+var containerSVG = "_14qoaxs0-3-5-2";
 export {
   containerSVG
 };

package/esm/charts/core/components/shared-chart-interactions/SharedChartInteractions.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/shared-chart-interactions/SharedChartInteractions.css.ts"],
-  "sourcesContent": ["import './SharedChartInteractions.css';\nexport var containerSVG = '_14qoaxs0-3-4-1';"],
+  "sourcesContent": ["import './SharedChartInteractions.css';\nexport var containerSVG = '_14qoaxs0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.css

@@ -1,24 +1,24 @@
-._utn1m50-3-4-1 {
+._utn1m50-3-5-2 {
   container-type: size;
   height: 100%;
   width: 100%;
   border-radius: 2px;
   position: relative;
 }
-._utn1m51-3-4-1 {
+._utn1m51-3-5-2 {
   container-type: size;
   grid-area: content;
   padding: 8px;
 }
-._utn1m52-3-4-1 {
+._utn1m52-3-5-2 {
   grid-template-columns: 1fr;
   display: grid;
 }
-._utn1m53-3-4-1 {
+._utn1m53-3-5-2 {
   grid-area: sparkline;
   overflow: visible;
 }
-._utn1m54-3-4-1 {
+._utn1m54-3-5-2 {
   grid-area: trend;
   overflow: hidden;
 }

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.sty.js

@@ -1,9 +1,9 @@
 import "./SingleValueRenderer.css";
-var chartStateHandler = "_utn1m52-3-4-1";
-var singleValueContainer = "_utn1m50-3-4-1";
-var singleValueInnerContainer = "_utn1m51-3-4-1";
-var sparklineArea = "_utn1m53-3-4-1";
-var trendArea = "_utn1m54-3-4-1";
+var chartStateHandler = "_utn1m52-3-5-2";
+var singleValueContainer = "_utn1m50-3-5-2";
+var singleValueInnerContainer = "_utn1m51-3-5-2";
+var sparklineArea = "_utn1m53-3-5-2";
+var trendArea = "_utn1m54-3-5-2";
 export {
   chartStateHandler,
   singleValueContainer,

package/esm/charts/core/components/single-value-renderer/SingleValueRenderer.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/single-value-renderer/SingleValueRenderer.css.ts"],
-  "sourcesContent": ["import './SingleValueRenderer.css';\nexport var chartStateHandler = '_utn1m52-3-4-1';\nexport var singleValueContainer = '_utn1m50-3-4-1';\nexport var singleValueInnerContainer = '_utn1m51-3-4-1';\nexport var sparklineArea = '_utn1m53-3-4-1';\nexport var trendArea = '_utn1m54-3-4-1';"],
+  "sourcesContent": ["import './SingleValueRenderer.css';\nexport var chartStateHandler = '_utn1m52-3-5-2';\nexport var singleValueContainer = '_utn1m50-3-5-2';\nexport var singleValueInnerContainer = '_utn1m51-3-5-2';\nexport var sparklineArea = '_utn1m53-3-5-2';\nexport var trendArea = '_utn1m54-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,uBAAuB;AAC3B,IAAI,4BAA4B;AAChC,IAAI,gBAAgB;AACpB,IAAI,YAAY;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/ContentGrid.css

@@ -1,4 +1,4 @@
-._zdpx4o0-3-4-1 {
+._zdpx4o0-3-5-2 {
   display: grid;
   width: 100%;
   height: 100%;

package/esm/charts/core/components/single-value-renderer/components/ContentGrid.sty.js

@@ -1,5 +1,5 @@
 import "./ContentGrid.css";
-var contentGridStaticStyles = "_zdpx4o0-3-4-1";
+var contentGridStaticStyles = "_zdpx4o0-3-5-2";
 export {
   contentGridStaticStyles
 };

package/esm/charts/core/components/single-value-renderer/components/ContentGrid.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/ContentGrid.css.ts"],
-  "sourcesContent": ["import './ContentGrid.css';\nexport var contentGridStaticStyles = '_zdpx4o0-3-4-1';"],
+  "sourcesContent": ["import './ContentGrid.css';\nexport var contentGridStaticStyles = '_zdpx4o0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,0BAA0B;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/Icon.css

@@ -1,16 +1,16 @@
-._84hyuy0-3-4-1 > svg {
+._84hyuy0-3-5-2 > svg {
   position: absolute;
   width: 2ch;
   height: 2ch;
   top: 50%;
   transform: translateY(-50%);
 }
-._84hyuy1-3-4-1 {
+._84hyuy1-3-5-2 {
   font-size: calc(min(var(--dt-charts-single-value-font-size, var(--dt-charts-single-value-global-value-font-size, 240)), var(--dt-charts-single-value-global-value-font-size, 240)) * 1px);
   position: relative;
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._84hyuy2-3-4-1 {
+._84hyuy2-3-5-2 {
   display: flex;
   justify-content: center;
   align-items: center;

package/esm/charts/core/components/single-value-renderer/components/Icon.sty.js

@@ -1,7 +1,7 @@
 import "./Icon.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var iconStyle = _7a468({ defaultClassName: "_84hyuy1-3-4-1", variantClassNames: { isString: { true: "_84hyuy2-3-4-1", false: "_84hyuy0-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var parentSvgStyle = "_84hyuy0-3-4-1";
+var iconStyle = _7a468({ defaultClassName: "_84hyuy1-3-5-2", variantClassNames: { isString: { true: "_84hyuy2-3-5-2", false: "_84hyuy0-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var parentSvgStyle = "_84hyuy0-3-5-2";
 export {
   iconStyle,
   parentSvgStyle

package/esm/charts/core/components/single-value-renderer/components/Icon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Icon.css.ts"],
-  "sourcesContent": ["import './Icon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconStyle = _7a468({defaultClassName:'_84hyuy1-3-4-1',variantClassNames:{isString:{true:'_84hyuy2-3-4-1',false:'_84hyuy0-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var parentSvgStyle = '_84hyuy0-3-4-1';"],
+  "sourcesContent": ["import './Icon.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var iconStyle = _7a468({defaultClassName:'_84hyuy1-3-5-2',variantClassNames:{isString:{true:'_84hyuy2-3-5-2',false:'_84hyuy0-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var parentSvgStyle = '_84hyuy0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7K,IAAI,iBAAiB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/Label.css

@@ -1,4 +1,4 @@
-._nuwbzs0-3-4-1 {
+._nuwbzs0-3-5-2 {
   grid-area: label;
   white-space: nowrap;
   overflow: hidden;

package/esm/charts/core/components/single-value-renderer/components/Label.sty.js

@@ -1,5 +1,5 @@
 import "./Label.css";
-var labelAreaStaticStyles = "_nuwbzs0-3-4-1";
+var labelAreaStaticStyles = "_nuwbzs0-3-5-2";
 export {
   labelAreaStaticStyles
 };

package/esm/charts/core/components/single-value-renderer/components/Label.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/core/components/single-value-renderer/components/Label.css.ts"],
-  "sourcesContent": ["import './Label.css';\nexport var labelAreaStaticStyles = '_nuwbzs0-3-4-1';"],
+  "sourcesContent": ["import './Label.css';\nexport var labelAreaStaticStyles = '_nuwbzs0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,wBAAwB;",
   "names": []
 }

package/esm/charts/core/components/single-value-renderer/components/SingleValueToolbar.css

@@ -1,4 +1,4 @@
-._xtlx2j0-3-4-1 {
+._xtlx2j0-3-5-2 {
   width: 100%;
   height: 100%;
 }