@galaxy-io/dls 1.5.4 → 1.5.6

package/dist/charts/BarChart.d.ts

@@ -24,5 +24,5 @@ export type BarChartProps<TMetric extends string, TComponentKey extends string =
  * `bars` in a group render side by side, several `components` in a bar stack,
  * and a chart doing both at once needs no extra configuration.
  */
-declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
+declare const BarChart: <TMetric extends string, TComponentKey extends string = string>({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: BarChartProps<TMetric, TComponentKey>) => import("react").JSX.Element;
 export default BarChart;

package/dist/charts/BarChart.js

@@ -17,7 +17,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * `bars` in a group render side by side, several `components` in a bar stack,
 * and a chart doing both at once needs no extra configuration.
 */
-var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRatio, margin, normalization = BarChartNormalization.NONE, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	/**
@@ -176,6 +176,7 @@ var BarChart = ({ series, groups, width, height, fillWidth, fillHeight, aspectRa
 		noTooltip,
 		buildCategoryTooltip,
 		tooltipRenderer,
+		tooltipMaxItems,
 		categoryTargets,
 		anchorHalfWidth: categoryStep / 2,
 		isEmpty,

package/dist/charts/ChartFrame.d.ts

@@ -78,6 +78,8 @@ export interface ChartFrameProps {
      */
     buildCategoryTooltip: (index: number) => ChartPlotTooltipModel | null;
     tooltipRenderer?: ChartTooltipRenderer;
+    /** Row cap for the built-in tooltip body. See {@link BaseChartProps.tooltipMaxItems}. */
+    tooltipMaxItems?: number;
     /**
      * One target per category, in plot coordinates and in category order.
      *
@@ -109,5 +111,5 @@ export interface ChartFrameProps {
      */
     legendInset?: number;
 }
-declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
+declare const ChartFrame: ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading, contentWhenEmpty, showLegend, legendItems, legendMaxItems, legendPlacement, legendInset, }: ChartFrameProps) => import("react").JSX.Element;
 export default ChartFrame;

package/dist/charts/ChartFrame.js

@@ -9,7 +9,7 @@ import { match } from "ts-pattern";
 import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartFrame.tsx
-var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
+var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction, kind, categoryCount, ariaLabel, ariaDescription, axes, children, plotOverlay, noTooltip = false, buildCategoryTooltip, tooltipRenderer, tooltipMaxItems, categoryTargets, categoryTargetsTransform, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendMaxItems, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
 	const { width, height, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
 	const generatedId = useId();
 	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
@@ -101,7 +101,8 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 					anchorHalfWidth,
 					placeAwayFromX: placeAwayFromX === void 0 ? void 0 : placeAwayFromX + margin.left,
 					verticalAlign,
-					renderer: tooltipRenderer
+					renderer: tooltipRenderer,
+					maxItems: tooltipMaxItems
 				}),
 				isMeasured && isEmpty && !isLoading && /* @__PURE__ */ jsx(ChartEmptyState, { content: contentWhenEmpty })
 			]

package/dist/charts/ChartTooltip.d.ts

@@ -23,6 +23,8 @@ interface ChartTooltipProps {
     placeAwayFromX?: number;
     verticalAlign?: ChartTooltipVerticalAlign;
     renderer?: ChartTooltipRenderer;
+    /** Cap on built-in body rows; the rest collapse into "+N more". */
+    maxItems?: number;
 }
-declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, }: ChartTooltipProps) => import("react").JSX.Element;
+declare const ChartTooltip: ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, maxItems, }: ChartTooltipProps) => import("react").JSX.Element;
 export default ChartTooltip;

package/dist/charts/ChartTooltip.js

@@ -7,7 +7,7 @@ import { ChartTooltipGrid, ChartTooltipLabelCell, ChartTooltipPositioner, ChartT
 import { Fragment, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartTooltip.tsx
-var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer }) => {
+var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, placeAwayFromX, verticalAlign, renderer, maxItems }) => {
 	const [retained, setRetained] = useState(model);
 	if (model !== null && model !== retained) setRetained(model);
 	const { tooltipRef, x, y, isMeasured } = useChartTooltipPosition({
@@ -20,6 +20,10 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 		verticalAlign
 	});
 	const displayed = model ?? retained;
+	const rows = displayed?.rows ?? [];
+	const cap = maxItems === void 0 ? rows.length : Math.max(1, maxItems);
+	const visibleRows = rows.slice(0, cap);
+	const hiddenCount = rows.length - visibleRows.length;
 	return /* @__PURE__ */ jsx(ChartTooltipPositioner, {
 		ref: tooltipRef,
 		$x: x,
@@ -31,31 +35,38 @@ var ChartTooltip = ({ model, containerWidth, containerHeight, anchorHalfWidth, p
 			direction: FlexDirection.COLUMN,
 			gap: 8,
 			fillWidth: true,
-			children: [/* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				variant: TextVariant.TERTIARY,
-				isEllipsis: true,
-				children: displayed.label
-			}), displayed.rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				variant: TextVariant.SECONDARY,
-				children: "No data"
-			}) : /* @__PURE__ */ jsx(ChartTooltipGrid, { children: displayed.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
-				shrink: 0,
-				children: /* @__PURE__ */ jsx(Circle, {
-					size: 8,
-					hex: row.color
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					variant: TextVariant.SECONDARY,
+					isEllipsis: true,
+					children: displayed.label
+				}),
+				displayed.rows.length === 0 ? /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					variant: TextVariant.SECONDARY,
+					children: "No data"
+				}) : /* @__PURE__ */ jsx(ChartTooltipGrid, { children: visibleRows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(ChartTooltipLabelCell, { children: [/* @__PURE__ */ jsx(FlexItem, {
+					shrink: 0,
+					children: /* @__PURE__ */ jsx(Circle, {
+						size: 8,
+						hex: row.color
+					})
+				}), /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					isEllipsis: true,
+					children: row.label
+				})] }), /* @__PURE__ */ jsx(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					weight: TextWeight.MEDIUM,
+					align: "right",
+					children: row.formattedValue
+				}) })] }, row.key)) }),
+				hiddenCount > 0 && /* @__PURE__ */ jsx(Text, {
+					size: TextSize.BODY_SM,
+					variant: TextVariant.SECONDARY,
+					children: `+${hiddenCount} more`
 				})
-			}), /* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				isEllipsis: true,
-				children: row.label
-			})] }), /* @__PURE__ */ jsx(ChartTooltipValueCell, { children: /* @__PURE__ */ jsx(Text, {
-				size: TextSize.BODY_SM,
-				weight: TextWeight.MEDIUM,
-				align: "right",
-				children: row.formattedValue
-			}) })] }, row.key)) })]
+			]
 		})
 	});
 };

package/dist/charts/LineChart.d.ts

@@ -34,5 +34,5 @@ export type LineChartProps<TMetric extends string> = BaseCartesianChartProps & C
  * what a reader wants, and it avoids the proximity search a
  * nearest-point-to-cursor model needs.
  */
-declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
+declare const LineChart: <TMetric extends string>({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve, strokeWidth, showCursor, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: LineChartProps<TMetric>) => import("react").JSX.Element;
 export default LineChart;

package/dist/charts/LineChart.js

@@ -18,7 +18,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * what a reader wants, and it avoids the proximity search a
 * nearest-point-to-cursor model needs.
 */
-var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeight, aspectRatio, margin, curve = LineChartCurve.SMOOTH, strokeWidth, showCursor = true, valueUnit, valueFormatter, labelFormatter, valueDomain, categoryLabelMode, categoryAxisTitle, valueAxisTitle, showGrid = true, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const { dimensions, domain, valueTicks, formatValue, formatLabel } = useCartesianChartLayout({
@@ -136,6 +136,7 @@ var LineChart = ({ series, lines, categories, width, height, fillWidth, fillHeig
 		noTooltip,
 		buildCategoryTooltip,
 		tooltipRenderer,
+		tooltipMaxItems,
 		categoryTargets,
 		anchorHalfWidth: geometry.step / 2,
 		isEmpty,

package/dist/charts/PieChart.d.ts

@@ -40,5 +40,5 @@ export type PieChartProps<TSlice extends string> = BaseChartProps & ChartSize &
  * each arc is its own target. Small slices are folded into an "Other" bucket by
  * default, which keeps every remaining arc large enough to actually hit.
  */
-declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
+declare const PieChart: <TSlice extends string>({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend, legendMaxItems, noTooltip, tooltipRenderer, tooltipMaxItems, isLoading, contentWhenEmpty, ariaLabel, ariaDescription, }: PieChartProps<TSlice>) => import("react").JSX.Element;
 export default PieChart;

package/dist/charts/PieChart.js

@@ -19,7 +19,7 @@ import { jsx } from "react/jsx-runtime";
 * each arc is its own target. Small slices are folded into an "Other" bucket by
 * default, which keeps every remaining arc large enough to actually hit.
 */
-var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
+var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRatio, margin, innerRadiusRatio, padAngle, cornerRadius, minSliceShare = PIE_MIN_SLICE_SHARE, aggregatedLabel, centerContent, valueUnit, valueFormatter, labelFormatter, showLegend = true, legendMaxItems, noTooltip = false, tooltipRenderer, tooltipMaxItems, isLoading = false, contentWhenEmpty, ariaLabel, ariaDescription }) => {
 	const containerRef = useRef(null);
 	const colors = useSeriesColorResolver(series);
 	const dimensions = useChartDimensions({
@@ -124,6 +124,7 @@ var PieChart = ({ series, slices, width, height, fillWidth, fillHeight, aspectRa
 		noTooltip,
 		buildCategoryTooltip,
 		tooltipRenderer,
+		tooltipMaxItems,
 		categoryTargets,
 		categoryTargetsTransform: `translate(${geometry.centerX}, ${geometry.centerY})`,
 		placeAwayFromX: geometry.centerX,

package/dist/charts/types.d.ts

@@ -448,6 +448,12 @@ export interface BaseChartProps {
     tooltipRenderer?: ChartTooltipRenderer;
     /** Suppress the tooltip and its hit targets entirely. */
     noTooltip?: boolean;
+    /**
+     * Cap on tooltip rows. Rows past the cap collapse into an inert "+N more"
+     * line. Applies to the built-in body only; a custom `tooltipRenderer`
+     * receives the full model. Clamped to at least 1.
+     */
+    tooltipMaxItems?: number;
     /** Show the legend beneath the plot. */
     showLegend?: boolean;
     /**

package/dist/tooltip/Tooltip.js

@@ -80,6 +80,7 @@ var Tooltip = ({ children, variant = "SECONDARY", body, position = "top", delay
 		duration: 0,
 		offset,
 		interactive: isInteractive,
+		appendTo: () => document.body,
 		maxWidth: "none",
 		zIndex: 1e4,
 		children: /* @__PURE__ */ jsx(TooltipWrapper, { children })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@galaxy-io/dls",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "description": "Galaxy Design Language System",
   "license": "UNLICENSED",
   "type": "module",