@dynatrace/strato-components 3.7.1 → 3.8.0

package/charts/honeycomb/constants.js

@@ -37,18 +37,21 @@ __export(constants_exports, {
   DEFAULT_HONEYCOMB_TILE_COLOR: () => DEFAULT_HONEYCOMB_TILE_COLOR,
   DEFAULT_HONEYCOMB_WIDTH: () => DEFAULT_HONEYCOMB_WIDTH,
   DEFAULT_LEGEND_POSITION: () => DEFAULT_LEGEND_POSITION,
+  DEFAULT_TEXT_SIZE: () => DEFAULT_TEXT_SIZE,
   DEFAULT_TILE_NAME: () => DEFAULT_TILE_NAME,
   DISPLAY_NAME: () => DISPLAY_NAME,
   HONEYCOMB_CHART_ARIA_LABEL: () => HONEYCOMB_CHART_ARIA_LABEL,
   HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT: () => HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT,
   HONEYCOMB_DEFAULT_TEXT_ALIGNMENT: () => HONEYCOMB_DEFAULT_TEXT_ALIGNMENT,
   HONEYCOMB_LABEL_FONT_SIZE: () => HONEYCOMB_LABEL_FONT_SIZE,
+  HONEYCOMB_LABEL_FONT_SIZE_OFFSET: () => HONEYCOMB_LABEL_FONT_SIZE_OFFSET,
   HONEYCOMB_LABEL_FONT_WEIGHT: () => HONEYCOMB_LABEL_FONT_WEIGHT,
   HONEYCOMB_LABEL_LINE_HEIGHT: () => HONEYCOMB_LABEL_LINE_HEIGHT,
   HONEYCOMB_TILE_STROKE_COLOR: () => HONEYCOMB_TILE_STROKE_COLOR,
   HONEYCOMB_VALUE_FONT_WEIGHT: () => HONEYCOMB_VALUE_FONT_WEIGHT,
   HONEYCOMB_VALUE_LABEL_FONT_SIZE: () => HONEYCOMB_VALUE_LABEL_FONT_SIZE,
   HONEYCOMB_VALUE_LINE_HEIGHT: () => HONEYCOMB_VALUE_LINE_HEIGHT,
+  HONEYCOMB_VALUE_LINE_HEIGHT_RATIO: () => HONEYCOMB_VALUE_LINE_HEIGHT_RATIO,
   HOVERED_TILE_OPACITY: () => HOVERED_TILE_OPACITY,
   MAX_GAP_SIZE: () => MAX_GAP_SIZE,
   NON_OVERLAPPING_HEIGHT: () => NON_OVERLAPPING_HEIGHT,
@@ -82,6 +85,19 @@ const NOT_HOVERED_TILE_OPACITY = 0.2;
 const HOVERED_TILE_OPACITY = 1;
 const DEFAULT_LEGEND_POSITION = "auto";
 const DEFAULT_HONEYCOMB_LABELS_DISPLAY = "none";
+const MAX_GAP_SIZE = 16;
+const HONEYCOMB_LABEL_FONT_SIZE = 12;
+const HONEYCOMB_VALUE_LABEL_FONT_SIZE = 16;
+const HONEYCOMB_LABEL_FONT_WEIGHT = 400;
+const HONEYCOMB_VALUE_FONT_WEIGHT = 500;
+const HONEYCOMB_LABEL_LINE_HEIGHT = 20;
+const HONEYCOMB_VALUE_LINE_HEIGHT = 28;
+const HONEYCOMB_LABEL_FONT_SIZE_OFFSET = 4;
+const HONEYCOMB_VALUE_LINE_HEIGHT_RATIO = 0.5;
+const HONEYCOMB_DEFAULT_TEXT_ALIGNMENT = "center";
+const HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT = "w...w";
+const HONEYCOMB_CHART_ARIA_LABEL = "Honeycomb Chart";
+const DEFAULT_TEXT_SIZE = HONEYCOMB_VALUE_LABEL_FONT_SIZE;
 const DEFAULT_HONEYCOMB_CONFIG = {
   shape: DEFAULT_HONEYCOMB_SHAPE,
   colorScheme: DEFAULT_HONEYCOMB_COLOR_PALETTE,
@@ -93,15 +109,13 @@ const DEFAULT_HONEYCOMB_CONFIG = {
   min: void 0,
   max: void 0,
   labelsDisplay: DEFAULT_HONEYCOMB_LABELS_DISPLAY,
+  textSize: DEFAULT_TEXT_SIZE,
   colorRules: []
 };
 const DEFAULT_TILE_NAME = "node";
 const initialState = {
   selection: {
     hovered: void 0
-  },
-  overlay: {
-    toolbarVisible: false
   }
 };
 const bestFitInitialState = {
@@ -109,13 +123,3 @@ const bestFitInitialState = {
   tileWidth: 0,
   gap: 0
 };
-const MAX_GAP_SIZE = 16;
-const HONEYCOMB_LABEL_FONT_SIZE = 12;
-const HONEYCOMB_VALUE_LABEL_FONT_SIZE = 16;
-const HONEYCOMB_LABEL_FONT_WEIGHT = 400;
-const HONEYCOMB_VALUE_FONT_WEIGHT = 500;
-const HONEYCOMB_LABEL_LINE_HEIGHT = 20;
-const HONEYCOMB_VALUE_LINE_HEIGHT = 28;
-const HONEYCOMB_DEFAULT_TEXT_ALIGNMENT = "center";
-const HONEYCOMB_DEFAULT_MIN_ELLIPSIZED_TEXT = "w...w";
-const HONEYCOMB_CHART_ARIA_LABEL = "Honeycomb Chart";

package/charts/honeycomb/context/honeycomb-color-scheme.context.d.ts

@@ -1,4 +1,4 @@
 import { ColoredRange } from '../../core/types/colored-range.js';
-export declare const HoneycombColorSchemeContext: import("react").Context<"blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | "status" | ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | {
+export declare const HoneycombColorSchemeContext: import("react").Context<"blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | string[] | "status" | ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | {
     [key: string]: string;
 }>;

package/charts/honeycomb/context/honeycomb-filtered-color-scheme.context.d.ts

@@ -1,2 +1,2 @@
 import { ColoredRange } from '../../core/types/colored-range.js';
-export declare const HoneycombFilteredColorSchemeContext: import("react").Context<"blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | Record<string, string> | "status" | ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | undefined>;
+export declare const HoneycombFilteredColorSchemeContext: import("react").Context<"blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | Record<string, string> | string[] | "status" | ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | undefined>;

package/charts/honeycomb/context/honeycomb-text-size.context.d.ts

@@ -0,0 +1,2 @@
+import type { TextSize } from '../../core/types/text-size.js';
+export declare const HoneycombTextSizeContext: import("react").Context<TextSize>;

package/charts/{core/components/toolbar/utils/estimate-toolbar-width.js → honeycomb/context/honeycomb-text-size.context.js}

@@ -15,20 +15,13 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var estimate_toolbar_width_exports = {};
-__export(estimate_toolbar_width_exports, {
-  CONTROL_WIDTH: () => CONTROL_WIDTH,
-  estimateToolbarWidth: () => estimateToolbarWidth
+var honeycomb_text_size_context_exports = {};
+__export(honeycomb_text_size_context_exports, {
+  HoneycombTextSizeContext: () => HoneycombTextSizeContext
 });
-module.exports = __toCommonJS(estimate_toolbar_width_exports);
+module.exports = __toCommonJS(honeycomb_text_size_context_exports);
 var import_react = require("react");
-const CONTROL_WIDTH = 37.5;
-const estimateToolbarWidth = (children) => {
-  let definedChildren = 0;
-  import_react.Children.forEach(children, (child) => {
-    if ((0, import_react.isValidElement)(child)) {
-      definedChildren++;
-    }
-  });
-  return definedChildren * CONTROL_WIDTH;
-};
+var import_constants = require("../constants.js");
+const HoneycombTextSizeContext = (0, import_react.createContext)(
+  import_constants.HONEYCOMB_VALUE_LABEL_FONT_SIZE
+);

package/charts/honeycomb/hooks/use-honeycomb-chart-config.js

@@ -28,7 +28,12 @@ var import_build_honeycomb_config = require("../utils/build-honeycomb-config.js"
 var import_iterate_honeycomb_slots = require("../utils/iterate-honeycomb-slots.js");
 function deserializeConfig(contextConfig) {
   try {
-    return (0, import_lodash_es.merge)({}, import_constants.DEFAULT_HONEYCOMB_CONFIG, JSON.parse(contextConfig));
+    const parsed = JSON.parse(contextConfig);
+    const merged = (0, import_lodash_es.merge)({}, import_constants.DEFAULT_HONEYCOMB_CONFIG, parsed);
+    if (parsed.labelsDisplay === void 0 && parsed.showLabels !== void 0) {
+      delete merged.labelsDisplay;
+    }
+    return merged;
   } catch {
     return import_constants.DEFAULT_HONEYCOMB_CONFIG;
   }

package/charts/honeycomb/hooks/use-honeycomb-color-scheme.context.d.ts

@@ -1,3 +1,3 @@
-export declare const useHoneycombColorScheme: () => "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | "status" | import("../../index.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | {
+export declare const useHoneycombColorScheme: () => "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | string[] | "status" | import("../../index.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | {
     [key: string]: string;
 };

package/charts/honeycomb/hooks/use-honeycomb-filtered-color-scheme.d.ts

@@ -1 +1 @@
-export declare const useHoneycombFilteredColorScheme: () => "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | Record<string, string> | "status" | import("../../index.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | undefined;
+export declare const useHoneycombFilteredColorScheme: () => "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | Record<string, string> | string[] | "status" | import("../../index.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | undefined;

package/charts/honeycomb/hooks/use-honeycomb-text-size.d.ts

@@ -0,0 +1 @@
+export declare const useHoneycombTextSize: () => import("../../core/types/text-size.js").TextSize;

package/charts/honeycomb/hooks/use-honeycomb-text-size.js

@@ -0,0 +1,25 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_honeycomb_text_size_exports = {};
+__export(use_honeycomb_text_size_exports, {
+  useHoneycombTextSize: () => useHoneycombTextSize
+});
+module.exports = __toCommonJS(use_honeycomb_text_size_exports);
+var import_react = require("react");
+var import_honeycomb_text_size_context = require("../context/honeycomb-text-size.context.js");
+const useHoneycombTextSize = () => (0, import_react.useContext)(import_honeycomb_text_size_context.HoneycombTextSizeContext);

package/charts/honeycomb/hooks/use-overlay-events.d.ts

@@ -1,8 +1,7 @@
-import { type MouseEvent } from 'react';
 import type { Overlay } from '../../core/components/overlay-tooltip/types.js';
 export declare const useOverlayEvents: (overlay: Overlay) => {
-    handlePointerEnter: () => void;
-    handlePointerMove: (event: MouseEvent<HTMLDivElement>) => void;
-    handlePointerLeave: () => void;
-    handleMouseClick: (event: MouseEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: import("react").MouseEvent<HTMLDivElement>) => void;
+    onPointerLeave: () => void;
+    onTouchEnd: (event: import("react").TouchEvent<HTMLDivElement>) => void;
+    onClick: (event: import("react").MouseEvent<HTMLDivElement>) => void;
 };

package/charts/honeycomb/hooks/use-overlay-events.js

@@ -26,20 +26,18 @@ var import_use_honeycomb_data = require("./use-honeycomb-data.js");
 var import_use_honeycomb_shape = require("./use-honeycomb-shape.js");
 var import_use_honeycomb_tooltip_metadata = require("./use-honeycomb-tooltip-metadata.js");
 var import_useOverlayEventHandlers = require("../../core/hooks/useOverlayEventHandlers.js");
-var import_store = require("../store/store.js");
 var import_build_overlay_tooltip_data = require("../utils/build-overlay-tooltip-data.js");
 var import_find_closest_tile = require("../utils/find-closest-tile.js");
 const useOverlayEvents = (overlay) => {
-  const setOverlayState = (0, import_store.useSetStateOverlay)();
   const honeycombData = (0, import_use_honeycomb_data.useHoneycombData)();
   const { tilesCenters } = (0, import_use_hive_rendering_metadata.useHiveRenderingMetadata)();
   const { tileWidth } = (0, import_use_hive_tile_best_fit.useHiveTileBestFit)();
   const shape = (0, import_use_honeycomb_shape.useHoneycombShape)();
   const { tooltipMetadata } = (0, import_use_honeycomb_tooltip_metadata.useHoneycombTooltipMetadata)();
-  const getTooltipDataFromEvent = (event) => {
+  const getTooltipDataFromEvent = (coords) => {
     const position = overlay.getAdjustedPositionsFromAbsolute(
-      event.clientX,
-      event.clientY
+      coords.clientX,
+      coords.clientY
     );
     const relativePosition = {
       x: position.relativeX ?? 0,
@@ -52,8 +50,7 @@ const useOverlayEvents = (overlay) => {
     );
     return closestTile !== void 0 ? (0, import_build_overlay_tooltip_data.buildOverlayTooltipData)(closestTile, honeycombData, tooltipMetadata) : void 0;
   };
-  return (0, import_useOverlayEventHandlers.useOverlayEventHandlers)(overlay, {
-    onToolbarVisibilityChange: (visible) => setOverlayState({ toolbarVisible: visible }),
+  return (0, import_useOverlayEventHandlers.useOverlayEventHandlers)({
     getTooltipData: getTooltipDataFromEvent
   });
 };

package/charts/honeycomb/store/selectors.d.ts

@@ -1,4 +1,3 @@
 import { HoneycombState } from '../types/state.js';
 export declare const useSelector: <T>(selector: (state: HoneycombState) => T) => T;
 export declare const useHoneycombSelectionState: () => import("../types/state.js").HoneycombSelectionState;
-export declare const useHoneycombToolbarVisibleState: () => boolean;

package/charts/honeycomb/store/selectors.js

@@ -18,7 +18,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var selectors_exports = {};
 __export(selectors_exports, {
   useHoneycombSelectionState: () => useHoneycombSelectionState,
-  useHoneycombToolbarVisibleState: () => useHoneycombToolbarVisibleState,
   useSelector: () => useSelector
 });
 module.exports = __toCommonJS(selectors_exports);
@@ -27,4 +26,3 @@ var import_selector = require("../../../core/store/selector.js");
 var import_honeycomb_store_context = require("../context/honeycomb-store.context.js");
 const useSelector = (selector) => (0, import_selector.useStoreSelector)(import_honeycomb_store_context.HoneycombStoreContext, selector, import_lodash_es.isEqual);
 const useHoneycombSelectionState = () => useSelector((state) => state.selection);
-const useHoneycombToolbarVisibleState = () => useSelector((state) => state.overlay.toolbarVisible);

package/charts/honeycomb/store/store.d.ts

@@ -1,3 +1,2 @@
-import { HoneycombOverlayState, HoneycombSelectionState } from '../types/state.js';
+import { HoneycombSelectionState } from '../types/state.js';
 export declare const useSetStateSelection: () => (newSelectionState: Partial<HoneycombSelectionState>) => void;
-export declare const useSetStateOverlay: () => (newOverlayState: Partial<HoneycombOverlayState>) => void;

package/charts/honeycomb/store/store.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var store_exports = {};
 __export(store_exports, {
-  useSetStateOverlay: () => useSetStateOverlay,
   useSetStateSelection: () => useSetStateSelection
 });
 module.exports = __toCommonJS(store_exports);
@@ -39,15 +38,3 @@ const useSetStateSelection = () => {
     }));
   };
 };
-const useSetStateOverlay = () => {
-  const setState = useSetState();
-  return (newOverlayState) => {
-    setState((prev) => ({
-      ...prev,
-      overlay: {
-        ...prev.overlay,
-        ...newOverlayState
-      }
-    }));
-  };
-};

package/charts/honeycomb/types/honeycomb-config-properties.d.ts

@@ -35,7 +35,7 @@ export interface HoneycombChartProperties {
     /** Honeycomb color scheme to be applied as configuration */
     colorScheme?: ColorPalette | ColoredRange[] | {
         [key: string]: string;
-    };
+    } | string[];
     /** Honeycomb legend configuration */
     legend?: HoneycombLegendProps;
     /** Honeycomb toolbar configuration */
@@ -67,6 +67,13 @@ export interface HoneycombChartProperties {
      * @deprecated Use `labelsDisplay` instead. Will be removed in a future major release.
      */
     showLabels?: boolean;
+    /**
+     * Font size (in pixels) for tile labels, or `'auto'` to pick a size
+     * per tile based on its height.
+     *
+     * @defaultValue 16
+     */
+    textSize?: number | 'auto';
     colorRules?: ColorRuleProps[];
     /** Tooltip configuration */
     tooltip?: HoneycombCustomTooltipConfig;

package/charts/honeycomb/types/honeycomb-internal.d.ts

@@ -8,6 +8,7 @@ import { ColorPalette, ColorToken } from '../../core/types/color-palette.js';
 import type { ColorRuleProps } from '../../core/types/color-rule.js';
 import { ColoredRange } from '../../core/types/colored-range.js';
 import { Formatter } from '../../core/types/formatter.js';
+import type { TextSize } from '../../core/types/text-size.js';
 import { HoneycombLegendProps } from '../slots/HoneycombLegend.js';
 export type HoneycombTooltipMetadata = HoneycombTileData & {
     id: string;
@@ -66,7 +67,7 @@ export interface HoneycombRequiredConfigProps {
      * @defaultValue 'hexagon'
      */
     shape: HoneycombTileShape;
-    colorScheme: ColorPalette | Record<string, string> | ColoredRange[];
+    colorScheme: ColorPalette | Record<string, string> | ColoredRange[] | string[];
     toolbar: HoneycombToolbarConfig | undefined;
     legend: HoneycombLegendProps;
     /**
@@ -85,6 +86,8 @@ export interface HoneycombRequiredConfigProps {
     max: 'data-max' | number | undefined;
     /** Controls which label content is shown inside each honeycomb tile */
     labelsDisplay: HoneycombLabelsDisplay;
+    /** Font size (in pixels) for tile labels, or `'auto'` for adaptive sizing */
+    textSize: TextSize;
     colorRules: ColorRuleProps[];
     tooltip?: HoneycombCustomTooltipConfig;
 }

package/charts/honeycomb/types/honeycomb.d.ts

@@ -4,8 +4,9 @@ import type { DataTestId } from '../../../core/types/data-props.js';
 import type { MaskingProps } from '../../../core/types/masking-props.js';
 import type { StylingProps } from '../../../core/types/styling-props.js';
 import type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';
+import type { ChartData } from '../../core/types/chart-data.js';
 import type { ChartUnit } from '../../core/types/chart-unit.js';
-import type { ColorPalette } from '../../core/types/color-palette.js';
+import type { ColorPalette, CustomColorPalette } from '../../core/types/color-palette.js';
 import type { ColoredRange } from '../../core/types/colored-range.js';
 import type { Formatter } from '../../core/types/formatter.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
@@ -115,12 +116,21 @@ export interface HoneycombBaseProps extends MaskingProps, StylingProps, DataTest
      * @deprecated Use `labelsDisplay` instead. Will be removed in a future major release.
      */
     showLabels?: boolean;
+    /**
+     * Font size (in pixels) for tile labels, or `'auto'` to pick a size
+     * per tile based on its height — larger tiles get larger text.
+     *
+     * @defaultValue 16
+     */
+    textSize?: number | 'auto';
 }
 /**
- * HoneycombCharts props when using a categorical dataset
-
-* @public
-*/
+ * HoneycombCharts props when using a categorical dataset.
+ * @public
+ * @deprecated Use the unified `ChartData` format with `valueAccessor` instead
+ * (see {@link HoneycombChartAccessorDataProps}). This type will be removed in a
+ * future release.
+ */
 export interface HoneycombCategoricalProps extends HoneycombBaseProps {
     /** Honeycomb categorical data */
     data: string | string[] | HoneycombTileCategoricalData[];
@@ -128,12 +138,18 @@ export interface HoneycombCategoricalProps extends HoneycombBaseProps {
     colorScheme?: ColorPalette | {
         [key: string]: string;
     };
+    /** @internal */
+    colorPalette?: never;
+    /** @internal */
+    valueAccessor?: never;
 }
 /**
- * HoneycombCharts props when using a numeric dataset
-
-* @public
-*/
+ * HoneycombCharts props when using a numeric dataset.
+ * @public
+ * @deprecated Use the unified `ChartData` format with `valueAccessor` instead
+ * (see {@link HoneycombChartAccessorDataProps}). This type will be removed in a
+ * future release.
+ */
 export interface HoneycombChartNumericalProps extends HoneycombBaseProps {
     /** Honeycomb numerical data */
     data: number | number[] | HoneycombTileNumericData[];
@@ -143,12 +159,39 @@ export interface HoneycombChartNumericalProps extends HoneycombBaseProps {
     min?: 'data-min' | number;
     /** The max value configuration to display */
     max?: 'data-max' | number;
+    /** @internal */
+    colorPalette?: never;
+    /** @internal */
+    valueAccessor?: never;
+}
+/**
+ * HoneycombChart props using the unified `ChartData` format. Each datapoint
+ * represents a tile; the value field is resolved through `valueAccessor`
+ * (dot-notation supported, e.g. `"metrics.value"`).
+ * @public
+ */
+export interface HoneycombChartAccessorDataProps extends HoneycombBaseProps {
+    /** Honeycomb data in the unified `ChartData` format. */
+    data: ChartData;
+    /**
+     * Accessor describing the field that holds the tile value.
+     * @defaultValue 'value'
+     */
+    valueAccessor?: string;
+    /** Color palette to apply to the chart. */
+    colorPalette?: ColorPalette | CustomColorPalette;
+    /** The min value configuration to display */
+    min?: 'data-min' | number;
+    /** The max value configuration to display */
+    max?: 'data-max' | number;
+    /** @internal */
+    colorScheme?: never;
 }
 /**
  * The Honeycomb component props
  * @public
  */
-export type HoneycombChartProps = HoneycombCategoricalProps | HoneycombChartNumericalProps;
+export type HoneycombChartProps = HoneycombCategoricalProps | HoneycombChartNumericalProps | HoneycombChartAccessorDataProps;
 /**
  * @internal
  */

package/charts/honeycomb/types/state.d.ts

@@ -1,12 +1,8 @@
 import type { LegendItem } from '../../core/components/legend/categorical/types/legend.js';
-export interface HoneycombOverlayState {
-    toolbarVisible: boolean;
-}
 export interface HoneycombSelectionState {
     hovered: LegendItem | undefined;
 }
 export interface HoneycombState {
     selection: HoneycombSelectionState;
-    overlay: HoneycombOverlayState;
 }
 export declare const initialState: HoneycombState;

package/charts/honeycomb/types/state.js

@@ -23,8 +23,5 @@ module.exports = __toCommonJS(state_exports);
 const initialState = {
   selection: {
     hovered: void 0
-  },
-  overlay: {
-    toolbarVisible: false
   }
 };

package/charts/honeycomb/utils/build-honeycomb-config.d.ts

@@ -1,7 +1,8 @@
 import { type PropsWithChildren } from 'react';
 import { HoneycombChartProperties } from '../types/honeycomb-config-properties.js';
 import { HoneycombRequiredConfigProps, HoneycombSlotsConfig } from '../types/honeycomb-internal.js';
-import { HoneycombChartNumericalProps, HoneycombChartProps } from '../types/honeycomb.js';
+import { HoneycombChartAccessorDataProps, HoneycombChartNumericalProps, HoneycombChartProps } from '../types/honeycomb.js';
+export declare const isHoneycombChartAccessorDataProps: (props: PropsWithChildren<HoneycombChartProps>) => props is HoneycombChartAccessorDataProps;
 export declare const checkNumericalDataset: (props: PropsWithChildren<HoneycombChartProps>) => props is HoneycombChartNumericalProps;
-export declare const getDefaultColorScheme: (props: PropsWithChildren<HoneycombChartProps>, contextConfig: HoneycombChartProperties) => "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | Record<string, string> | "status" | import("../../index.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted";
+export declare const getDefaultColorScheme: (props: PropsWithChildren<HoneycombChartProps>, contextConfig: HoneycombChartProperties) => "blue" | "brown" | "grey" | "magenta" | "orange" | "pink" | "purple" | "red" | "turquoise" | "yellow" | "status" | import("../../index.js").ColoredRange[] | "categorical" | "purple-rain" | "swamps" | "fireplace" | "blue-steel" | "rainbow" | "categorical-inverted" | "purple-rain-inverted" | "swamps-inverted" | "fireplace-inverted" | "blue-steel-inverted" | "rainbow-inverted" | "log-status" | "log-level" | "apdex" | "security-risk-level" | "vulnerability-status" | "threshold" | "log-status-inverted" | "log-level-inverted" | "apdex-inverted" | "security-risk-level-inverted" | "vulnerability-status-inverted" | "threshold-inverted" | "status-inverted" | "pink-purple" | "blue-turquoise" | "moss" | "petrol" | "pear" | "pink-purple-inverted" | "blue-turquoise-inverted" | "blue-inverted" | "grey-inverted" | "moss-inverted" | "turquoise-inverted" | "pink-inverted" | "yellow-inverted" | "petrol-inverted" | "purple-inverted" | "pear-inverted" | "brown-inverted" | "red-inverted" | "magenta-inverted" | "orange-inverted" | "orange-blue" | "red-blue" | "red-purple" | "blue-moss" | "purple-yellow" | "red-green" | "orange-petrol" | "pink-green" | "orange-blue-inverted" | "red-blue-inverted" | "red-purple-inverted" | "blue-moss-inverted" | "purple-yellow-inverted" | "red-green-inverted" | "orange-petrol-inverted" | "pink-green-inverted" | import("../../index.js").CustomColorPalette;
 export declare const buildHoneycombConfig: (props: PropsWithChildren<HoneycombChartProps>, contextConfig: HoneycombChartProperties, slots: HoneycombSlotsConfig) => HoneycombRequiredConfigProps;

package/charts/honeycomb/utils/build-honeycomb-config.js

@@ -19,7 +19,8 @@ var build_honeycomb_config_exports = {};
 __export(build_honeycomb_config_exports, {
   buildHoneycombConfig: () => buildHoneycombConfig,
   checkNumericalDataset: () => checkNumericalDataset,
-  getDefaultColorScheme: () => getDefaultColorScheme
+  getDefaultColorScheme: () => getDefaultColorScheme,
+  isHoneycombChartAccessorDataProps: () => isHoneycombChartAccessorDataProps
 });
 module.exports = __toCommonJS(build_honeycomb_config_exports);
 var import_lodash_es = require("lodash");
@@ -28,11 +29,21 @@ var import_is_honeycomb_tile_numeric_data = require("./is-honeycomb-tile-numeric
 var import_ColorRule = require("../../core/slots/ColorRule.js");
 var import_constants = require("../constants.js");
 const showLabelsToLabelsDisplay = (showLabels) => showLabels ? "all" : "none";
+const isHoneycombChartAccessorDataProps = (props) => Array.isArray(props.data) && (props.data.length === 0 || !(0, import_lodash_es.isNumber)(props.data[0]) && !(0, import_lodash_es.isString)(props.data[0])) && // eslint-disable-next-line @typescript-eslint/no-deprecated
+!props.colorScheme;
 const checkCategoricalDataset = (data) => Array.isArray(data) && ((0, import_lodash_es.isString)(data[0]) || (0, import_is_honeycomb_tile_categorical_data.isHoneycombTileCategoricalData)(data[0] ?? {}));
 const checkNumericalDataset = (props) => Array.isArray(props.data) && ((0, import_lodash_es.isNumber)(props.data[0]) || (0, import_is_honeycomb_tile_numeric_data.isHoneycombTileNumericData)(props.data[0] ?? {}));
 const getDefaultColorScheme = (props, contextConfig) => {
-  const currentColorScheme = props.colorScheme || contextConfig.colorScheme;
-  const isCategoricalDataset = checkCategoricalDataset(props.data);
+  if (isHoneycombChartAccessorDataProps(props)) {
+    return props.colorPalette || contextConfig.colorScheme || import_constants.DEFAULT_HONEYCOMB_CONFIG.colorScheme;
+  }
+  const currentColorScheme = (
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    props.colorScheme || contextConfig.colorScheme
+  );
+  const isCategoricalDataset = checkCategoricalDataset(
+    props.data
+  );
   const isColorPaletteName = typeof currentColorScheme === "string";
   const isCustomNumericColorScheme = Array.isArray(currentColorScheme);
   const isInvalidColorScheme = (0, import_lodash_es.isUndefined)(currentColorScheme) || (0, import_lodash_es.isEmpty)(currentColorScheme);
@@ -66,6 +77,7 @@ const buildHoneycombConfig = (props, contextConfig, slots) => {
   const legacyConfigShowLabels = contextConfig.showLabels;
   const fromConfigShowLabels = legacyConfigShowLabels !== void 0 ? showLabelsToLabelsDisplay(legacyConfigShowLabels) : void 0;
   const labelsDisplay = props.labelsDisplay ?? fromPropsShowLabels ?? contextConfig.labelsDisplay ?? fromConfigShowLabels ?? import_constants.DEFAULT_HONEYCOMB_CONFIG.labelsDisplay;
+  const textSize = props.textSize ?? contextConfig.textSize ?? import_constants.DEFAULT_TEXT_SIZE;
   const legend = (0, import_lodash_es.merge)(
     {},
     import_constants.DEFAULT_HONEYCOMB_CONFIG.legend,
@@ -73,7 +85,7 @@ const buildHoneycombConfig = (props, contextConfig, slots) => {
     slots.legend
   );
   let min, max;
-  if (checkNumericalDataset(props)) {
+  if (checkNumericalDataset(props) || isHoneycombChartAccessorDataProps(props)) {
     min = props.min ?? contextConfig.min ?? void 0;
     max = props.max ?? contextConfig.max ?? void 0;
   }
@@ -89,6 +101,7 @@ const buildHoneycombConfig = (props, contextConfig, slots) => {
     min,
     max,
     labelsDisplay,
+    textSize,
     colorRules,
     tooltip: slots.tooltip ?? contextConfig.tooltip
   };

package/charts/honeycomb/utils/normalize-honeycomb-chart-data.d.ts

@@ -0,0 +1,17 @@
+import type { ChartData } from '../../core/types/chart-data.js';
+import type { HoneycombTileData } from '../types/honeycomb.js';
+/**
+ * Converts a unified `ChartData` array into the internal `HoneycombTileData[]`
+ * shape consumed by the rendering pipeline.
+ *
+ * Each datapoint's value is resolved via `valueAccessor` (dot-notation
+ * supported). The `name` field is read from the datapoint when present;
+ * otherwise a default incremented name is generated.
+ * Datapoints whose resolved value is `null` or `undefined` are skipped.
+ *
+ * @param data - the unified chart dataset
+ * @param valueAccessor - field path to the tile value (defaults to `"value"`)
+ * @returns the internal `HoneycombTileData` array
+ * @internal
+ */
+export declare function normalizeHoneycombChartData(data: ChartData, valueAccessor?: string): HoneycombTileData[];

package/charts/honeycomb/utils/normalize-honeycomb-chart-data.js

@@ -0,0 +1,39 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var normalize_honeycomb_chart_data_exports = {};
+__export(normalize_honeycomb_chart_data_exports, {
+  normalizeHoneycombChartData: () => normalizeHoneycombChartData
+});
+module.exports = __toCommonJS(normalize_honeycomb_chart_data_exports);
+var import_access_value = require("../../../core/utils/accessors/access-value.js");
+var import_constants = require("../constants.js");
+const DEFAULT_VALUE_ACCESSOR = "value";
+function normalizeHoneycombChartData(data, valueAccessor = DEFAULT_VALUE_ACCESSOR) {
+  const result = [];
+  data.forEach((datapoint, index) => {
+    const rawValue = (0, import_access_value.accessValue)(datapoint, valueAccessor);
+    if (rawValue === null || rawValue === void 0) {
+      return;
+    }
+    const nameValue = (0, import_access_value.accessValue)(datapoint, "name");
+    const nameIndex = data.length > 1 ? index : void 0;
+    const name = nameValue !== null && nameValue !== void 0 ? String(nameValue) : nameIndex !== void 0 ? `${import_constants.DEFAULT_TILE_NAME}-${nameIndex + 1}` : import_constants.DEFAULT_TILE_NAME;
+    result.push({ ...datapoint, value: rawValue, name });
+  });
+  return result;
+}