@galaxy-io/dls 1.3.4 → 1.3.6

package/dist/charts/ChartFrame.js

@@ -1,16 +1,16 @@
-import { ChartKind } from "./types.js";
-import { describeTooltipModel } from "./chartFormat.js";
-import { ChartBackdrop, ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
+import { ChartKind, ChartLegendPlacement } from "./types.js";
+import "./constants.js";
+import { ChartPlotBox, ChartPlotGroup, ChartRoot, ChartSvg } from "./ChartPrimitives.js";
 import ChartCategoryTargets from "./ChartCategoryTargets.js";
 import ChartEmptyState from "./ChartEmptyState.js";
 import ChartLegend from "./ChartLegend.js";
 import ChartTooltip from "./ChartTooltip.js";
 import { match } from "ts-pattern";
-import { useCallback, useId, useMemo } from "react";
+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, wrapCategoryNavigation, describeCategory, anchorHalfWidth, placeAwayFromX, verticalAlign, isEmpty, isLoading = false, contentWhenEmpty, showLegend = false, legendItems, legendInset }) => {
-	const { width, height, plotWidth, plotHeight, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
+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, legendPlacement = ChartLegendPlacement.BOTTOM, legendInset }) => {
+	const { width, height, margin, isMeasured, reservedHeight, reservedAspectRatio } = dimensions;
 	const generatedId = useId();
 	const descriptionId = ariaDescription ? `${generatedId}-desc` : void 0;
 	/**
@@ -22,7 +22,8 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 	* showing three. The two charts previously counted different things for the
 	* same situation, which is the drift this removes.
 	*/
-	const resolvedAriaLabel = ariaLabel ?? match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive();
+	const kindLabel = match(kind).with(ChartKind.PIE, () => "Pie").with(ChartKind.BAR, () => "Bar").with(ChartKind.LINE, () => "Line").exhaustive();
+	const resolvedAriaLabel = ariaLabel ?? (isLoading ? `${kindLabel} chart, loading` : match(kind).with(ChartKind.PIE, () => `Pie chart with ${categoryCount} slices`).with(ChartKind.BAR, () => `Bar chart with ${categoryCount} categories and ${legendItems.length} series`).with(ChartKind.LINE, () => `Line chart with ${categoryCount} categories and ${legendItems.length} series`).exhaustive());
 	const tooltipModel = useMemo(() => noTooltip || interaction.activeIndex === null ? null : buildCategoryTooltip(interaction.activeIndex), [
 		noTooltip,
 		buildCategoryTooltip,
@@ -48,41 +49,39 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 		margin.top
 	]);
 	/**
-	* Name each category from its own tooltip, unless the chart says otherwise.
+	* Categories whose tooltip would have no rows.
 	*
-	* Same builder as the visible tooltip, so the two cannot describe the chart
-	* differently.
+	* Decided here — from the same builder that feeds the visible tooltip — so
+	* "no data at this X" means exactly one thing in every chart: an all-zero
+	* bar group and an all-null line column both produce a rowless model, and
+	* neither should be hoverable. Their targets are simply not rendered.
 	*/
-	const nameCategory = useCallback((index) => {
-		if (describeCategory) return describeCategory(index);
-		const model = buildCategoryTooltip(index);
-		return model ? describeTooltipModel(model) : "";
-	}, [describeCategory, buildCategoryTooltip]);
-	/**
-	* Whether the marks are reachable at all.
-	*
-	* Drives the SVG's role, which is the real cost of keyboard access:
-	* `role="img"` prunes the whole subtree from the accessibility tree, so
-	* nothing inside it can ever be focused *and* announced. A chart with live
-	* targets therefore has to be a `group` — and everything that is not a target
-	* has to be explicitly hidden, since under `group` it would otherwise become
-	* traversable. When there is nothing to reach, `img` stays: it announces one
-	* summary rather than an empty group.
-	*/
-	const hasFocusableTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
+	const inertIndices = useMemo(() => {
+		const inert = /* @__PURE__ */ new Set();
+		(categoryTargets ?? []).forEach((_, index) => {
+			const model = buildCategoryTooltip(index);
+			if (!model || model.rows.length === 0) inert.add(index);
+		});
+		return inert;
+	}, [categoryTargets, buildCategoryTooltip]);
+	const hasTargets = isMeasured && !noTooltip && !isLoading && !isEmpty && (categoryTargets?.length ?? 0) > 0;
+	const legendRight = legendPlacement === ChartLegendPlacement.RIGHT;
 	return /* @__PURE__ */ jsxs(ChartRoot, {
 		$fillWidth: fillWidth,
 		$fillHeight: fillHeight,
+		$legendRight: legendRight,
 		children: [/* @__PURE__ */ jsxs(ChartPlotBox, {
 			ref: containerRef,
 			$reservedHeight: reservedHeight,
 			$reservedAspectRatio: reservedAspectRatio,
 			$fillHeight: fillHeight,
+			$legendRight: legendRight,
+			$squareFromHeight: legendRight && fillWidth && reservedAspectRatio === void 0,
 			children: [
 				isMeasured && /* @__PURE__ */ jsxs(ChartSvg, {
 					width,
 					height,
-					role: hasFocusableTargets ? "group" : "img",
+					role: "img",
 					"aria-label": resolvedAriaLabel,
 					"aria-describedby": descriptionId,
 					children: [ariaDescription && /* @__PURE__ */ jsx("desc", {
@@ -92,25 +91,16 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 						transform: `translate(${margin.left}, ${margin.top})`,
 						children: [
 							axes,
-							/* @__PURE__ */ jsx("g", {
-								"aria-hidden": "true",
-								children: /* @__PURE__ */ jsxs(ChartPlotGroup, {
-									"data-active": interaction.isEngaged ? "true" : "false",
-									children: [/* @__PURE__ */ jsx(ChartBackdrop, {
-										width: plotWidth,
-										height: plotHeight,
-										"data-interactive": interaction.pinnedIndex !== null ? "true" : "false",
-										onClick: interaction.onBackdropClick
-									}), children]
-								})
+							/* @__PURE__ */ jsx(ChartPlotGroup, {
+								"data-active": interaction.isEngaged ? "true" : "false",
+								children
 							}),
-							hasFocusableTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
+							hasTargets && categoryTargets && /* @__PURE__ */ jsx("g", {
 								transform: categoryTargetsTransform,
 								children: /* @__PURE__ */ jsx(ChartCategoryTargets, {
 									targets: categoryTargets,
 									interaction,
-									getAriaLabel: nameCategory,
-									wrap: wrapCategoryNavigation
+									inertIndices
 								})
 							})
 						]
@@ -130,12 +120,12 @@ var ChartFrame = ({ containerRef, dimensions, fillWidth, fillHeight, interaction
 			]
 		}), showLegend && /* @__PURE__ */ jsx(ChartLegend, {
 			items: legendItems,
-			inset: legendInset ?? margin.left,
+			inset: legendInset ?? (legendRight ? 16 : margin.left),
+			vertical: legendRight,
+			isLoading,
 			hoveredKey: interaction.hoveredSeriesKey,
-			pinnedKey: interaction.pinnedSeriesKey,
 			onItemEnter: interaction.onSeriesEnter,
-			onItemLeave: interaction.onSeriesLeave,
-			onItemClick: interaction.onSeriesClick
+			onItemLeave: interaction.onSeriesLeave
 		})]
 	});
 };

package/dist/charts/ChartLegend.d.ts

@@ -5,20 +5,27 @@ interface ChartLegendProps {
     inset: number;
     /** Series key currently hovered anywhere in the chart. */
     hoveredKey?: string | null;
-    /** Series key currently pinned. Drives `aria-pressed`. */
-    pinnedKey?: string | null;
+    /** Stack entries in a column — the side-placed layout. */
+    vertical?: boolean;
+    /**
+     * Render shimmer stubs instead of items.
+     *
+     * Keeps the legend's space reserved while the chart shows its skeleton, so
+     * data arriving doesn't shift the layout — which matters most beside a pie,
+     * where the legend's width decides the plot box's.
+     */
+    isLoading?: boolean;
     /**
      * Supplying these makes the legend interactive. Omit them and it renders as
      * inert text, with no button semantics for a screen reader to announce.
      */
     onItemEnter?: (key: string) => void;
     onItemLeave?: () => void;
-    onItemClick?: (key: string) => void;
 }
 /**
  * Legend for the chart components.
  *
- * Hovering an entry isolates its series and clicking pins that isolation.
+ * Hovering or focusing an entry isolates its series; leaving releases it.
  *
  * Deliberately *not* a visibility toggle: hiding a series would have to rescale
  * the value axis to stay honest — otherwise the remaining bars sit mysteriously
@@ -26,5 +33,5 @@ interface ChartLegendProps {
  * Isolation only changes opacity, so the domain is untouched and the numbers
  * keep meaning what they did.
  */
-declare const ChartLegend: ({ items, inset, hoveredKey, pinnedKey, onItemEnter, onItemLeave, onItemClick, }: ChartLegendProps) => import("react").JSX.Element | null;
+declare const ChartLegend: ({ items, inset, hoveredKey, vertical, isLoading, onItemEnter, onItemLeave, }: ChartLegendProps) => import("react").JSX.Element | null;
 export default ChartLegend;

package/dist/charts/ChartLegend.js

@@ -1,13 +1,24 @@
 import Text, { TextSize } from "../text/Text.js";
+import TextShimmer from "../text/TextShimmer.js";
 import Circle from "../shapes/Circle.js";
 import { ChartMarkState } from "./types.js";
 import { ChartLegendItemButton, ChartLegendItemStatic, ChartLegendRow } from "./ChartPrimitives.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/charts/ChartLegend.tsx
 /**
+* Stub label widths in px, staggered so the placeholder reads as a legend
+* rather than a repeated block. Three entries: enough to hold a legend's
+* space without promising a series count.
+*/
+var SKELETON_LABEL_WIDTHS = [
+	40,
+	56,
+	48
+];
+/**
 * Legend for the chart components.
 *
-* Hovering an entry isolates its series and clicking pins that isolation.
+* Hovering or focusing an entry isolates its series; leaving releases it.
 *
 * Deliberately *not* a visibility toggle: hiding a series would have to rescale
 * the value axis to stay honest — otherwise the remaining bars sit mysteriously
@@ -15,12 +26,28 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Isolation only changes opacity, so the domain is untouched and the numbers
 * keep meaning what they did.
 */
-var ChartLegend = ({ items, inset, hoveredKey = null, pinnedKey = null, onItemEnter, onItemLeave, onItemClick }) => {
+var ChartLegend = ({ items, inset, hoveredKey = null, vertical = false, isLoading = false, onItemEnter, onItemLeave }) => {
+	if (isLoading) return /* @__PURE__ */ jsx(ChartLegendRow, {
+		$inset: inset,
+		$vertical: vertical,
+		"data-active": "false",
+		children: SKELETON_LABEL_WIDTHS.map((labelWidth, index) => /* @__PURE__ */ jsxs(ChartLegendItemStatic, {
+			"data-state": ChartMarkState.ACTIVE,
+			children: [/* @__PURE__ */ jsx(TextShimmer, {
+				height: 8,
+				width: 8
+			}), /* @__PURE__ */ jsx(TextShimmer, {
+				height: 10,
+				width: labelWidth
+			})]
+		}, index))
+	});
 	if (items.length === 0) return null;
-	const isInteractive = Boolean(onItemEnter ?? onItemClick);
-	const activeKey = pinnedKey ?? hoveredKey;
+	const isInteractive = Boolean(onItemEnter);
+	const activeKey = hoveredKey;
 	return /* @__PURE__ */ jsx(ChartLegendRow, {
 		$inset: inset,
+		$vertical: vertical,
 		"data-active": activeKey !== null ? "true" : "false",
 		children: items.map((item) => {
 			const state = activeKey === null || item.key === activeKey ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
@@ -38,12 +65,10 @@ var ChartLegend = ({ items, inset, hoveredKey = null, pinnedKey = null, onItemEn
 			return /* @__PURE__ */ jsx(ChartLegendItemButton, {
 				type: "button",
 				"data-state": state,
-				"aria-pressed": pinnedKey === item.key,
 				onMouseEnter: () => onItemEnter?.(item.key),
 				onMouseLeave: () => onItemLeave?.(),
 				onFocus: () => onItemEnter?.(item.key),
 				onBlur: () => onItemLeave?.(),
-				onClick: () => onItemClick?.(item.key),
 				children: content
 			}, item.key);
 		})

package/dist/charts/ChartPrimitives.d.ts

@@ -4,10 +4,18 @@
  * `min-width: 0` is load-bearing rather than cosmetic — without it a chart in a
  * flex row feeds its min-content width back into the ResizeObserver and the
  * measurement can oscillate.
+ *
+ * `$legendRight` rotates the layout: plot box and legend become a row with
+ * `align-items: center`, which is the whole of "the legend is vertically
+ * centred on the pie" — the pie is inscribed centred in its box, so centring
+ * the legend against the box centres it against the pie. It also holds in the
+ * other direction: a legend taller than the box centres the *pie* against the
+ * legend instead of pinning it to the top.
  */
 export declare const ChartRoot: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $fillWidth?: boolean;
     $fillHeight?: boolean;
+    $legendRight?: boolean;
 }>;
 /**
  * Holds the plot, anchors the tooltip, and is the element that gets measured.
@@ -29,6 +37,8 @@ export declare const ChartPlotBox: import("@linaria/react").StyledComponent<impo
     $reservedHeight?: number;
     $reservedAspectRatio?: number;
     $fillHeight?: boolean;
+    $legendRight?: boolean;
+    $squareFromHeight?: boolean;
 }>;
 /**
  * `overflow: visible` lets a value label above a full-height bar paint outside
@@ -46,31 +56,18 @@ export declare const ChartAreaPath: import("@linaria/react").StyledComponent<imp
 export declare const ChartPointCircle: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGCircleElement> & Record<never, unknown>>;
 export declare const ChartArcPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
 /**
- * Wrapper for the category target layer.
+ * Wraps the marks while the chart is loading.
+ *
+ * Only motion lives here — the slow pulse shared with `TextShimmer` and
+ * `AvatarShimmer`, so a loading chart breathes in step with every other
+ * skeleton on the page. Colour arrives through the series resolver like any
+ * other mark colour, which is what lets bars and arcs ghost by `fill` and
+ * lines by `stroke` without per-shape CSS here.
  *
- * Exists to carry the focus-ring colour: the targets themselves are plain
- * `styled.x` because they receive refs (see the module note above), so they
- * cannot read the theme directly. Setting `color` here lets them use
- * `currentColor` and still take the token rather than inheriting whatever the
- * consumer's page happens to set.
+ * Under reduced motion the pulse pins at its midpoint rather than sitting at
+ * full strength, so the chart still reads as a placeholder and not as data.
  */
-export declare const ChartCategoryTargetLayer: import("react").ComponentType<Pick<import("react").SVGProps<SVGGElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}, "as" | keyof import("react").SVGProps<SVGGElement>> & {
-    theme?: import("@callstack/react-theme-provider").$DeepPartial<import("../theme").Theme> | undefined;
-}> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<import("react").ComponentType<import("react").SVGProps<SVGGElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}> & {
-    __wyw_meta: unknown;
-} & import("react").FunctionComponent<import("react").SVGProps<SVGGElement> & {
-    theme: import("../theme").Theme;
-} & {
-    as?: React.ElementType;
-}>, {}>;
+export declare const ChartSkeletonGroup: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGGElement> & Record<never, unknown>>;
 /**
  * Per-category hit target, rendered above the marks.
  *
@@ -78,6 +75,9 @@ export declare const ChartCategoryTargetLayer: import("react").ComponentType<Pic
  * bar is as easy to hover as a two-hundred-pixel one, and crossing between
  * segments inside a category fires no events at all — so the tooltip holds
  * still instead of chasing each segment.
+ *
+ * No cursor and no focus treatment: the target only previews on hover, and a
+ * pointer cursor would promise a click that does nothing.
  */
 export declare const ChartHitTarget: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
 /**
@@ -85,12 +85,10 @@ export declare const ChartHitTarget: import("@linaria/react").StyledComponent<im
  *
  * A pie has no category axis to band, so its targets are the arc shapes
  * themselves — drawn again, transparent, above the marks. That keeps hit
- * testing and focus identical across all three charts instead of the pie
- * hit-testing its visible arcs directly.
+ * testing identical across all three charts instead of the pie hit-testing its
+ * visible arcs directly.
  */
 export declare const ChartHitTargetPath: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGPathElement> & Record<never, unknown>>;
-/** Full-plot backdrop; clicking it clears a pinned category. */
-export declare const ChartBackdrop: import("@linaria/react").StyledComponent<import("react").SVGProps<SVGRectElement> & Record<never, unknown>>;
 /**
  * Solid hairline rather than a dashed rule, and drawn at every tick including
  * zero — the line under the bars is what makes them read as resting on a
@@ -213,14 +211,16 @@ export declare const ChartEmptyOverlay: import("react").ComponentType<Pick<impor
  */
 export declare const ChartLegendRow: import("@linaria/react").StyledComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
     $inset: number;
+    $vertical?: boolean;
 }>;
 /**
  * One legend entry, when the legend is interactive.
  *
- * A real `<button>` rather than a styled div: it is clickable, so it has to be
- * reachable and operable by keyboard. `aria-pressed` carries the pinned state —
- * the only thing here a screen reader can truthfully announce, since the plot
- * itself is `role="img"` and its marks are not in the accessibility tree.
+ * A real `<button>` rather than a styled div so it sits in the tab order:
+ * focusing an entry previews its series exactly as hovering does, which is the
+ * one keyboard affordance the charts keep — the plot itself is `role="img"` and
+ * its marks are not in the accessibility tree. Activating it does nothing;
+ * isolation follows the pointer or the focus and releases with it.
  *
  * Shares the mark opacity ramp via `data-state`, so an entry recedes in step
  * with the series it names.