@gravitee/graphene-charts 3.14.2 → 3.15.0

package/dist/charts/BreakdownChart/BreakdownChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreakdownChart.d.ts","sourceRoot":"","sources":["../../../src/charts/BreakdownChart/BreakdownChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAuD,MAAM,yBAAyB,CAAC;AA0DxH,MAAM,WAAW,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC9E,0CAA0C;IAC1C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAID,iBAAS,sBAAsB,CAAC,EAAE,IAAQ,EAAE,OAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,qBAwB9G;AA6ID,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,mBAAmB,qBAO9E;AAyQD,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"BreakdownChart.d.ts","sourceRoot":"","sources":["../../../src/charts/BreakdownChart/BreakdownChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAuD,MAAM,yBAAyB,CAAC;AA0DxH,MAAM,WAAW,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC9E,0CAA0C;IAC1C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,kFAAkF;IAClF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAID,iBAAS,sBAAsB,CAAC,EAAE,IAAQ,EAAE,OAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,qBAwB9G;AAiQD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,EAAE,mBAAmB,qBAO9E;AAgUD,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/charts/BreakdownChart/breakdown-chart.types.d.ts

@@ -76,11 +76,21 @@ export interface BreakdownChartProps extends React.ComponentProps<'div'> {
     readonly summary?: BreakdownSummary;
     /**
      * Maximum visible items before collapsing with "N others".
-     * When omitted, all items are shown. List variant only — ignored by
-     * `variant="stacked"`.
+     * List variant only — ignored by `variant="stacked"`.
      *
-     * A reader's "N others" expansion is transient: changing the threshold, or
-     * the list fitting entirely within it, re-collapses the list.
+     * **When omitted, the chart shows what fits.** It measures the height it was
+     * given and collapses to the rows that fit there, so a list never spills out
+     * of a dashboard tile or gets silently cropped by it. In a container that
+     * does not constrain height, everything fits and everything is shown. Pass
+     * `maxItems={items.length}` for a threshold no list can exceed, i.e. the
+     * unconditional "show every row".
+     *
+     * Expanding scrolls inside the chart and can be undone from a control that
+     * stays put while the rows scroll.
+     *
+     * A reader's "N others" expansion is transient: changing *this* threshold, or
+     * the list fitting entirely within the effective one, re-collapses the list.
+     * A resize does not — it only moves the measured threshold underneath.
      *
      * Fractions floor, negatives clamp to `0`, and `NaN` is ignored.
      */

package/dist/charts/BreakdownChart/breakdown-chart.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakdown-chart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/BreakdownChart/breakdown-chart.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"breakdown-chart.types.d.ts","sourceRoot":"","sources":["../../../src/charts/BreakdownChart/breakdown-chart.types.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -5806,24 +5806,66 @@ function Tr({ items: t, formatValue: n, animated: r = !0, mounted: i, hoveredKey
 		})]
 	});
 }
-function Er(e, t) {
-	let n = t === void 0 || Number.isNaN(t) ? void 0 : Math.max(0, Math.floor(t)), [r, i] = U.useState(!1), [a, o] = U.useState(n);
-	return Object.is(n, a) || (o(n), r && i(!1)), n === void 0 || e.length <= n ? (r && i(!1), {
+function Er(e, { pitch: t, gap: n }) {
+	return Math.max(0, Math.floor((e + n) / t));
+}
+function Dr(e, t) {
+	let n = e.querySelectorAll("[data-slot=\"bar-meter\"]");
+	if (n.length >= 2) {
+		let e = n[1].offsetTop - n[0].offsetTop;
+		if (e > 0) return {
+			pitch: e,
+			gap: Math.max(0, e - n[0].offsetHeight)
+		};
+	}
+	let r = n[0]?.offsetHeight ?? 0;
+	if (r <= 0) return t;
+	let i = t?.gap ?? 0;
+	return {
+		pitch: r + i,
+		gap: i
+	};
+}
+function Or(e) {
+	let [t, n] = U.useState(void 0), r = U.useRef(null), i = U.useCallback(() => {
+		let t = e.current;
+		if (!t) return;
+		r.current = Dr(t, r.current);
+		let i = r.current, a = t.clientHeight, o = i && a > 0 ? Er(a, i) : void 0;
+		n((e) => e === o ? e : o);
+	}, [e]);
+	return U.useEffect(() => {
+		let t = e.current;
+		if (!t) return;
+		let n = new ResizeObserver(i);
+		return n.observe(t), () => n.disconnect();
+	}, [e, i]), {
+		fitCount: t,
+		remeasure: i
+	};
+}
+function kr(e, t, n) {
+	let r = t === void 0 || Number.isNaN(t) ? void 0 : Math.max(0, Math.floor(t)), i = r ?? n, [a, o] = U.useState(!1), [s, c] = U.useState(r);
+	Object.is(r, s) || (c(r), a && o(!1));
+	let l = U.useCallback(() => o((e) => !e), []);
+	return i === void 0 || e.length <= i ? (a && o(!1), {
 		visibleItems: e,
-		collapsedCount: 0,
-		expanded: !0,
-		setExpanded: i
+		hiddenCount: 0,
+		expanded: !1,
+		collapsible: !1,
+		toggle: l
 	}) : {
-		visibleItems: r ? e : e.slice(0, n),
-		collapsedCount: r ? 0 : e.length - n,
-		expanded: r,
-		setExpanded: i
+		visibleItems: a ? e : e.slice(0, i),
+		hiddenCount: a ? 0 : e.length - i,
+		expanded: a,
+		collapsible: !0,
+		toggle: l
 	};
 }
-function Dr({ children: e, ...t }) {
-	return /* @__PURE__ */ Z(fr, { children: [e, /* @__PURE__ */ X(Or, { ...t })] });
+function Ar({ children: e, ...t }) {
+	return /* @__PURE__ */ Z(fr, { children: [e, /* @__PURE__ */ X(jr, { ...t })] });
 }
-function Or({ items: t, variant: n = "list", ratioMode: r = "total", formatValue: i, trendSentiment: a = "higher-is-better", sortByValue: o, showRank: s = !1, summary: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f = !0, state: p, skeletonRows: m = 3, ariaLabel: h = "Breakdown chart", onItemClick: g, onItemHover: _, className: y, ...b }) {
+function jr({ items: t, variant: n = "list", ratioMode: r = "total", formatValue: i, trendSentiment: a = "higher-is-better", sortByValue: o, showRank: s = !1, summary: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f = !0, state: p, skeletonRows: m = 3, ariaLabel: h = "Breakdown chart", onItemClick: g, onItemHover: _, className: y, ...b }) {
 	let { tooltip: x, legend: S, summary: C } = dr(), w = p ?? (t.length === 0 ? "empty" : "ready"), [T, E] = U.useState(null), D = g !== void 0, O = _r(u), k = U.useRef(null), [A, j] = U.useState(null), M = U.useMemo(() => o ? [...t].sort((e, t) => o === "asc" ? e.value - t.value : t.value - e.value) : t, [t, o]), N = U.useMemo(() => br(M, r), [M, r]), P = U.useCallback((e) => {
 		E(e?.key ?? null), e || j(null), _?.(e);
 	}, [_]), F = U.useCallback((e) => {
@@ -5874,7 +5916,7 @@ function Or({ items: t, variant: n = "list", ratioMode: r = "total", formatValue
 			onSegmentHover: P,
 			onSegmentClick: g
 		}), z]
-	}) : /* @__PURE__ */ X(kr, {
+	}) : /* @__PURE__ */ X(Mr, {
 		containerRef: k,
 		items: M,
 		ratios: N,
@@ -5899,73 +5941,96 @@ function Or({ items: t, variant: n = "list", ratioMode: r = "total", formatValue
 		...b
 	});
 }
-function kr({ containerRef: t, items: n, ratios: r, formatValue: i, trendSentiment: a = "higher-is-better", showRank: o = !1, summary: s, summarySlot: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f, mounted: p, ariaLabel: m = "Breakdown chart", hoveredKey: h, interactive: g, onItemHover: _, onItemClick: v, tooltipPortal: y, className: b, ...x }) {
-	let { visibleItems: S, collapsedCount: C, setExpanded: w } = Er(n, l);
-	return U.useEffect(() => {
-		h !== null && !S.some((e) => e.key === h) && _(null);
+function Mr({ containerRef: t, items: n, ratios: r, formatValue: i, trendSentiment: a = "higher-is-better", showRank: o = !1, summary: s, summarySlot: c, maxItems: l, animated: u = !0, compact: d = !1, highlightOnHover: f, mounted: p, ariaLabel: m = "Breakdown chart", hoveredKey: h, interactive: g, onItemHover: _, onItemClick: v, tooltipPortal: y, className: b, ...x }) {
+	let S = U.useRef(null), { fitCount: C, remeasure: w } = Or(S), { visibleItems: T, hiddenCount: E, expanded: D, collapsible: O, toggle: k } = kr(n, l, C);
+	U.useLayoutEffect(w, [
+		w,
+		n,
+		d,
+		o,
+		T.length
+	]), U.useEffect(() => {
+		h !== null && !T.some((e) => e.key === h) && _(null);
 	}, [
 		h,
-		S,
+		T,
 		_
-	]), /* @__PURE__ */ Z("div", {
+	]);
+	let A = C !== void 0 && T.length > C, j = c !== null || s !== void 0, M = d ? "gap-0" : "gap-1";
+	return /* @__PURE__ */ Z("div", {
 		role: "group",
 		"aria-label": m,
-		className: e("flex flex-col", d ? "gap-0" : "gap-1", b),
+		className: e("flex h-full min-h-0 flex-col", M, b),
 		...x,
 		ref: t,
 		children: [
-			S.map((e, t) => /* @__PURE__ */ X(lr, {
-				label: e.label,
-				formattedValue: i ? i(e.value) : String(e.value),
-				ratio: p ? r[t] : 0,
-				color: yr(e, t),
-				detail: e.detail,
-				icon: e.icon,
-				trend: e.trend,
-				trendSentiment: a,
-				threshold: e.threshold,
-				rank: o ? t + 1 : void 0,
-				compact: d,
-				animated: u,
-				highlighted: f && h === e.key,
-				dimmed: f && h !== null && h !== e.key,
-				interactive: g,
-				onMouseEnter: () => _(e),
-				onMouseLeave: () => _(null),
-				onClick: g ? () => v?.(e) : void 0
-			}, e.key)),
-			C > 0 && /* @__PURE__ */ Z("button", {
-				type: "button",
-				className: "px-2 py-1 text-left text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
-				onClick: () => w(!0),
-				children: [
-					"+",
-					C,
-					" other",
-					C > 1 ? "s" : ""
-				]
+			/* @__PURE__ */ X(H, {
+				className: "min-h-0 flex-1",
+				"data-dashboard-grid-no-drag": A ? "" : void 0,
+				viewportProps: {
+					ref: S,
+					className: "overscroll-contain",
+					...A ? {
+						tabIndex: 0,
+						role: "group",
+						"aria-label": "Scrollable rows"
+					} : {}
+				},
+				children: /* @__PURE__ */ X("div", {
+					className: e("flex flex-col", M),
+					children: T.map((e, t) => /* @__PURE__ */ X(lr, {
+						label: e.label,
+						formattedValue: i ? i(e.value) : String(e.value),
+						ratio: p ? r[t] : 0,
+						color: yr(e, t),
+						detail: e.detail,
+						icon: e.icon,
+						trend: e.trend,
+						trendSentiment: a,
+						threshold: e.threshold,
+						rank: o ? t + 1 : void 0,
+						compact: d,
+						animated: u,
+						highlighted: f && h === e.key,
+						dimmed: f && h !== null && h !== e.key,
+						interactive: g,
+						onMouseEnter: () => _(e),
+						onMouseLeave: () => _(null),
+						onClick: g ? () => v?.(e) : void 0
+					}, e.key))
+				})
+			}),
+			(O || j) && /* @__PURE__ */ Z("div", {
+				className: e("flex shrink-0 flex-col", M),
+				children: [O && /* @__PURE__ */ X("button", {
+					type: "button",
+					"data-slot": "breakdown-toggle",
+					"aria-expanded": D,
+					className: "px-2 py-1 text-left text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+					onClick: k,
+					children: D ? "Show less" : `+${E} other${E > 1 ? "s" : ""}`
+				}), c ?? (s && /* @__PURE__ */ Z(Y, { children: [/* @__PURE__ */ X("div", { className: "mx-2 border-t border-border" }), /* @__PURE__ */ Z("div", {
+					className: "flex items-center justify-between px-2 pt-2",
+					children: [/* @__PURE__ */ X("span", {
+						className: "text-sm text-muted-foreground",
+						children: s.label
+					}), /* @__PURE__ */ X("span", {
+						className: "text-sm font-semibold text-foreground tabular-nums",
+						children: s.value
+					})]
+				})] }))]
 			}),
-			c ?? (s && /* @__PURE__ */ Z(Y, { children: [/* @__PURE__ */ X("div", { className: "mx-2 border-t border-border" }), /* @__PURE__ */ Z("div", {
-				className: "flex items-center justify-between px-2 pt-2",
-				children: [/* @__PURE__ */ X("span", {
-					className: "text-sm text-muted-foreground",
-					children: s.label
-				}), /* @__PURE__ */ X("span", {
-					className: "text-sm font-semibold text-foreground tabular-nums",
-					children: s.value
-				})]
-			})] })),
 			y
 		]
 	});
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownLegend.tsx
-function Ar({ children: e }) {
+function Nr({ children: e }) {
 	let { setLegend: t } = dr();
 	return U.useLayoutEffect(() => (t(e), () => t(null)), [e, t]), null;
 }
-function jr({ items: t, colors: n, formatValue: r, className: i, ...a }) {
+function Pr({ items: t, colors: n, formatValue: r, className: i, ...a }) {
 	return /* @__PURE__ */ X("div", {
 		className: e("flex flex-wrap items-center gap-x-4 gap-y-1", i),
 		...a,
@@ -5991,13 +6056,13 @@ function jr({ items: t, colors: n, formatValue: r, className: i, ...a }) {
 }
 //#endregion
 //#region src/charts/BreakdownChart/BreakdownSummary.tsx
-function Mr({ children: e }) {
+function Fr({ children: e }) {
 	let { setSummary: t } = dr();
 	return U.useLayoutEffect(() => (t(e), () => t(null)), [e, t]), null;
 }
 //#endregion
 //#region src/charts/FilterCombobox/DataTypeIcon.tsx
-function Nr({ icon: t, tooltipContent: n, colorClass: r }) {
+function Ir({ icon: t, tooltipContent: n, colorClass: r }) {
 	return /* @__PURE__ */ Z(ie, { children: [/* @__PURE__ */ X(se, {
 		asChild: !0,
 		children: /* @__PURE__ */ X("span", {
@@ -6011,10 +6076,10 @@ function Nr({ icon: t, tooltipContent: n, colorClass: r }) {
 }
 //#endregion
 //#region src/charts/FilterCombobox/DataTypeIcons.tsx
-function Pr({ dataTypes: e }) {
+function Lr({ dataTypes: e }) {
 	return e.length === 0 ? null : /* @__PURE__ */ X("span", {
 		className: "ml-2 flex shrink-0 items-center",
-		children: e.map((e) => /* @__PURE__ */ X(Nr, {
+		children: e.map((e) => /* @__PURE__ */ X(Ir, {
 			icon: e.icon,
 			tooltipContent: e.tooltipContent,
 			colorClass: e.colorClass
@@ -6023,19 +6088,19 @@ function Pr({ dataTypes: e }) {
 }
 //#endregion
 //#region src/charts/FilterCombobox/filter-combobox-options.ts
-function Fr(e, t) {
+function Rr(e, t) {
 	return `${e}-${t}`;
 }
-function Ir(e) {
+function zr(e) {
 	return e;
 }
-function Lr(e, t) {
+function Br(e, t) {
 	return `${e}-option-${t}`;
 }
-function Rr(e, t, n, r) {
+function Vr(e, t, n, r) {
 	if (!e) return t.map((e) => ({
 		item: e,
-		optionValue: Ir(e.id)
+		optionValue: zr(e.id)
 	}));
 	let i = [];
 	for (let e of n) {
@@ -6043,30 +6108,30 @@ function Rr(e, t, n, r) {
 		let n = t.filter((t) => t.scopes.includes(e.id));
 		for (let t of n) i.push({
 			item: t,
-			optionValue: Fr(e.id, t.id)
+			optionValue: Rr(e.id, t.id)
 		});
 	}
 	return i;
 }
-function zr(e, t, n) {
+function Hr(e, t, n) {
 	if (e.length === 0) return;
 	let r = t ? e.findIndex((e) => e.optionValue === t) : -1;
 	return r === -1 ? n === "next" ? e[0].optionValue : e[e.length - 1].optionValue : n === "next" ? e[r < e.length - 1 ? r + 1 : 0].optionValue : e[r > 0 ? r - 1 : e.length - 1].optionValue;
 }
-function Br(e, t) {
+function Ur(e, t) {
 	if (t) return e.some((e) => e.optionValue === t) ? t : void 0;
 }
 //#endregion
 //#region src/charts/FilterCombobox/resolve-item-data-types.ts
-function Vr(e) {
+function Wr(e) {
 	return e.dataTypeIds ?? [];
 }
-function Hr(e, t) {
-	return Array.from(new Set(Vr(e))).map((e) => t.find((t) => t.id === e)).filter((e) => e !== void 0);
+function Gr(e, t) {
+	return Array.from(new Set(Wr(e))).map((e) => t.find((t) => t.id === e)).filter((e) => e !== void 0);
 }
 //#endregion
 //#region src/charts/FilterCombobox/FilterGroupedList.tsx
-function Ur({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScope: a, onSelect: o, onHighlightOption: s }) {
+function Kr({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScope: a, onSelect: o, onHighlightOption: s }) {
 	return /* @__PURE__ */ X(Y, { children: t.map((t) => {
 		let c = r.filter((e) => e.scopes.includes(t.id));
 		if (c.length === 0) return null;
@@ -6097,7 +6162,7 @@ function Ur({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScop
 			}), /* @__PURE__ */ X(F, { children: /* @__PURE__ */ X(z, {
 				className: "mt-1 ml-3 pl-1",
 				children: (i[t.id] ?? !0) && c.map((e) => {
-					let r = Hr(e, n), i = Fr(t.id, e.id);
+					let r = Gr(e, n), i = Rr(t.id, e.id);
 					return /* @__PURE__ */ Z(ee, {
 						"data-filter-option-value": i,
 						value: i,
@@ -6107,7 +6172,7 @@ function Ur({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScop
 						children: [/* @__PURE__ */ X("span", {
 							className: "min-w-0 flex-1 truncate font-medium text-foreground",
 							children: e.name
-						}), /* @__PURE__ */ X(Pr, { dataTypes: r })]
+						}), /* @__PURE__ */ X(Lr, { dataTypes: r })]
 					}, `${t.id}-${e.id}`);
 				})
 			}) })]
@@ -6116,12 +6181,12 @@ function Ur({ scopes: t, dataTypes: n, items: r, expandedScopes: i, onToggleScop
 }
 //#endregion
 //#region src/charts/FilterCombobox/HighlightMatch.tsx
-function Wr(e) {
+function qr(e) {
 	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
-function Gr(e, t) {
+function Jr(e, t) {
 	if (!t.trim()) return [e];
-	let n = Wr(t);
+	let n = qr(t);
 	return e.split(RegExp(`(${n})`, "gi")).map((e, n) => e.toLowerCase() === t.toLowerCase() ? /* @__PURE__ */ X("mark", {
 		className: "rounded-sm bg-warning/10 text-warning-foreground",
 		children: e
@@ -6129,12 +6194,12 @@ function Gr(e, t) {
 }
 //#endregion
 //#region src/charts/FilterCombobox/FilterSearchList.tsx
-function Kr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a, onHighlightOption: o }) {
+function Yr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a, onHighlightOption: o }) {
 	return /* @__PURE__ */ X(z, {
 		heading: `Results (${r.length})`,
 		className: "mt-1",
 		children: r.map((r) => {
-			let s = Hr(r, n), c = Ir(r.id);
+			let s = Gr(r, n), c = zr(r.id);
 			return /* @__PURE__ */ Z(ee, {
 				"data-filter-option-value": c,
 				value: c,
@@ -6145,7 +6210,7 @@ function Kr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a, on
 					className: "flex min-w-0 flex-1 flex-col gap-1.5 overflow-hidden",
 					children: [/* @__PURE__ */ X("span", {
 						className: "truncate text-sm font-medium text-foreground",
-						children: Gr(r.name, i)
+						children: Jr(r.name, i)
 					}), /* @__PURE__ */ X("div", {
 						className: "flex flex-wrap items-center gap-1.5",
 						children: r.scopes.map((n) => {
@@ -6159,14 +6224,14 @@ function Kr({ scopes: t, dataTypes: n, items: r, searchQuery: i, onSelect: a, on
 							}, n);
 						})
 					})]
-				}), /* @__PURE__ */ X(Pr, { dataTypes: s })]
+				}), /* @__PURE__ */ X(Lr, { dataTypes: s })]
 			}, r.id);
 		})
 	});
 }
 //#endregion
 //#region src/charts/FilterCombobox/use-filter-combobox.ts
-function qr({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open: a, onOpenChange: o }) {
+function Xr({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open: a, onOpenChange: o }) {
 	let s = K(), c = J(null), l = J(null), u = J(null), d = J(!1), f = a !== void 0, p = r !== void 0, [m, h] = pe(!1), [g, _] = pe(null), [v, y] = pe(""), [b, x] = pe(void 0), S = f ? a : m, C = p ? r : g, w = G((e) => {
 		f ? o?.(e) : h(e);
 	}, [f, o]), T = G((e) => {
@@ -6179,15 +6244,15 @@ function qr({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open
 	}, []), k = q(() => {
 		let t = v.trim().toLowerCase();
 		return t ? e.filter((e) => e.name.toLowerCase().includes(t) || e.id.toLowerCase().includes(t)) : e;
-	}, [e, v]), A = v.trim() === "", j = q(() => Rr(A, k, t, E), [
+	}, [e, v]), A = v.trim() === "", j = q(() => Vr(A, k, t, E), [
 		A,
 		k,
 		t,
 		E
-	]), M = q(() => Br(j, b), [j, b]), N = M ? Lr(s, M) : void 0, P = G(() => {
+	]), M = q(() => Ur(j, b), [j, b]), N = M ? Br(s, M) : void 0, P = G(() => {
 		x(void 0);
 	}, []), F = G((e) => {
-		x((t) => zr(j, t, e));
+		x((t) => Hr(j, t, e));
 	}, [j]), I = G((e) => {
 		d.current = !1, u.current = e, T(e), y(e.name), P(), w(!1), n(e);
 	}, [
@@ -6257,7 +6322,7 @@ function qr({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open
 		}
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	}, [P, w]), de(() => {
-		!S || !M || document.getElementById(Lr(s, M))?.scrollIntoView({ block: "nearest" });
+		!S || !M || document.getElementById(Br(s, M))?.scrollIntoView({ block: "nearest" });
 	}, [
 		M,
 		S,
@@ -6270,7 +6335,7 @@ function qr({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open
 		for (let e of t) {
 			if (!(e instanceof HTMLElement)) continue;
 			let t = e.getAttribute("data-filter-option-value");
-			t && (e.id = Lr(s, t));
+			t && (e.id = Br(s, t));
 		}
 	}, [
 		S,
@@ -6304,8 +6369,8 @@ function qr({ items: e, scopes: t, onSelect: n, value: r, onValueChange: i, open
 }
 //#endregion
 //#region src/charts/FilterCombobox/FilterCombobox.tsx
-function Jr({ scopes: e, dataTypes: t, items: n, onSelect: r, placeholder: i = "Search a property...", emptyMessage: a = "No results found.", listLabel: o = "Filter options", inputId: s, value: c, onValueChange: l, open: u, onOpenChange: d }) {
-	let { listboxId: f, containerRef: p, inputRef: m, isOpen: h, isIdle: g, inputValue: _, highlightedOptionValue: v, activeDescendantId: y, expandedScopes: b, filteredItems: x, toggleScope: S, handleSelect: C, handleClear: w, handleInputChange: T, handleClick: E, handleHighlightOption: D, handleFocus: O, handleKeyDown: k } = qr({
+function Zr({ scopes: e, dataTypes: t, items: n, onSelect: r, placeholder: i = "Search a property...", emptyMessage: a = "No results found.", listLabel: o = "Filter options", inputId: s, value: c, onValueChange: l, open: u, onOpenChange: d }) {
+	let { listboxId: f, containerRef: p, inputRef: m, isOpen: h, isIdle: g, inputValue: _, highlightedOptionValue: v, activeDescendantId: y, expandedScopes: b, filteredItems: x, toggleScope: S, handleSelect: C, handleClear: w, handleInputChange: T, handleClick: E, handleHighlightOption: D, handleFocus: O, handleKeyDown: k } = Xr({
 		items: n,
 		scopes: e,
 		onSelect: r,
@@ -6368,7 +6433,7 @@ function Jr({ scopes: e, dataTypes: t, items: n, onSelect: r, placeholder: i = "
 								className: "text-xs",
 								children: a
 							})]
-						}) }), g ? /* @__PURE__ */ X(Ur, {
+						}) }), g ? /* @__PURE__ */ X(Kr, {
 							scopes: e,
 							dataTypes: t,
 							items: x,
@@ -6376,7 +6441,7 @@ function Jr({ scopes: e, dataTypes: t, items: n, onSelect: r, placeholder: i = "
 							onToggleScope: S,
 							onSelect: C,
 							onHighlightOption: D
-						}) : /* @__PURE__ */ X(Kr, {
+						}) : /* @__PURE__ */ X(Yr, {
 							scopes: e,
 							dataTypes: t,
 							items: x,
@@ -6391,4 +6456,4 @@ function Jr({ scopes: e, dataTypes: t, items: n, onSelect: r, placeholder: i = "
 	});
 }
 //#endregion
-export { Cn as AreaChart, Be as AreaSeries, Ue as BarChart, lr as BarMeter, Re as BarSeries, Dr as BreakdownChart, Sr as BreakdownChartSkeleton, Ar as BreakdownLegend, jr as BreakdownLegendContent, Mr as BreakdownSummary, pr as BreakdownTooltip, gr as BreakdownTooltipContent, a as CHART_THEMES, m as CartesianChart, g as CategoryAxis, g as XAxis, Ce as ChartCard, E as ChartContainer, Ne as ChartLegend, Me as ChartLegendContent, i as ChartStyle, Ae as ChartTooltip, ke as ChartTooltipContent, r as DEFAULT_MARGIN, Je as DoughnutChart, Jr as FilterCombobox, o as Grid, Sn as LineChart, Ie as LineSeries, an as Metric, xn as MetricGroup, f as ReferenceLine, ar as TraceWaterfall, p as ValueAxis, p as YAxis, jn as buildTimeAxisTicks, e as cn, n as compactTick, En as computeBarGeometry, Tn as computeTraceDurationNs, wn as formatDurationNs, Dn as formatTracePercent, Jt as resolveSentiment, t as useChartConfig };
+export { Cn as AreaChart, Be as AreaSeries, Ue as BarChart, lr as BarMeter, Re as BarSeries, Ar as BreakdownChart, Sr as BreakdownChartSkeleton, Nr as BreakdownLegend, Pr as BreakdownLegendContent, Fr as BreakdownSummary, pr as BreakdownTooltip, gr as BreakdownTooltipContent, a as CHART_THEMES, m as CartesianChart, g as CategoryAxis, g as XAxis, Ce as ChartCard, E as ChartContainer, Ne as ChartLegend, Me as ChartLegendContent, i as ChartStyle, Ae as ChartTooltip, ke as ChartTooltipContent, r as DEFAULT_MARGIN, Je as DoughnutChart, Zr as FilterCombobox, o as Grid, Sn as LineChart, Ie as LineSeries, an as Metric, xn as MetricGroup, f as ReferenceLine, ar as TraceWaterfall, p as ValueAxis, p as YAxis, jn as buildTimeAxisTicks, e as cn, n as compactTick, En as computeBarGeometry, Tn as computeTraceDurationNs, wn as formatDurationNs, Dn as formatTracePercent, Jt as resolveSentiment, t as useChartConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/graphene-charts",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "type": "module",
   "description": "Theme-compliant data visualization components for the Graphene design system. Built on D3, styled with Tailwind, and designed to inherit the Graphene token system out of the box.",
   "keywords": [