@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/charts/useChartTooltipPosition.js

@@ -1,13 +1,22 @@
-import { useElementClientSize } from "../hooks/useElementClientSize.js";
-import "./constants.js";
+import { CHART_TOOLTIP_OFFSET } from "./constants.js";
 import { clamp } from "./chartScales.js";
+import { useElementClientSize } from "../hooks/useElementClientSize.js";
 import { useMemo, useRef } from "react";
 //#region src/charts/useChartTooltipPosition.ts
+/**
+* @internal Chart tooltip placement with edge collision handling (1.x logic): beside the anchor,
+* flipped away from it, clamped inside the plot box. Computed in JS because clamping needs the
+* tooltip's own measured size against the box's.
+*/
+/** @internal Vertical placement of the tooltip relative to its anchor. */
 var ChartTooltipVerticalAlign = /* @__PURE__ */ function(ChartTooltipVerticalAlign) {
+	/** The anchor marks the top of something (the highest point in a column). */
 	ChartTooltipVerticalAlign["ABOVE"] = "ABOVE";
+	/** The anchor marks a position (a point on an arc). */
 	ChartTooltipVerticalAlign["CENTERED"] = "CENTERED";
 	return ChartTooltipVerticalAlign;
 }({});
+/** @internal Positions the chart tooltip. */
 function useChartTooltipPosition({ anchorX, anchorY, containerWidth, containerHeight, anchorHalfWidth = 0, placeAwayFromX, verticalAlign = "ABOVE" }) {
 	const tooltipRef = useRef(null);
 	const { width: tooltipWidth, height: tooltipHeight } = useElementClientSize(tooltipRef);
@@ -15,12 +24,12 @@ function useChartTooltipPosition({ anchorX, anchorY, containerWidth, containerHe
 		const isMeasured = tooltipWidth !== void 0 && tooltipHeight !== void 0;
 		const w = tooltipWidth ?? 0;
 		const h = tooltipHeight ?? 0;
-		const rawX = (placeAwayFromX !== void 0 ? anchorX < placeAwayFromX : anchorX > containerWidth / 2) ? anchorX - anchorHalfWidth - 10 - w : anchorX + anchorHalfWidth + 10;
+		const rawX = (placeAwayFromX !== void 0 ? anchorX < placeAwayFromX : anchorX > containerWidth / 2) ? anchorX - anchorHalfWidth - CHART_TOOLTIP_OFFSET - w : anchorX + anchorHalfWidth + CHART_TOOLTIP_OFFSET;
 		const rawY = verticalAlign === "CENTERED" ? anchorY - h / 2 : Math.min(anchorY, containerHeight / 2);
 		return {
 			tooltipRef,
-			x: clamp(rawX, 0, Math.max(0, containerWidth - w)),
-			y: clamp(rawY, 0, Math.max(0, containerHeight - h)),
+			x: Math.round(clamp(rawX, 0, Math.max(0, containerWidth - w))),
+			y: Math.round(clamp(rawY, 0, Math.max(0, containerHeight - h))),
 			isMeasured
 		};
 	}, [

package/dist/charts/useSeriesColorResolver.d.ts

@@ -1,37 +1,15 @@
-import type { ChartPalette, ChartSeriesStyles } from "./types";
-/**
- * Palette assignment for a chart's series, shared by all three charts.
- *
- * Every chart resolved colour the same way — look the key up in the `series`
- * record, take its slot, fall back to the palette — but each spelled it
- * differently and each rebuilt the key list itself. Doing it once here is what
- * makes "adding a series never recolours the existing ones" a property of the
- * design rather than of three separate call sites remembering to use
- * `indexOf` instead of the loop counter.
- */
+import { type ChartSeriesColor } from "./chartPalette.js";
+import { ChartPalette, type ChartSeriesStyles } from "./types.js";
+/** @internal What `useSeriesColorResolver` returns. */
 export interface SeriesColorResolver<TKey extends string> {
-    /**
-     * Series keys in `series` record order.
-     *
-     * Insertion order is what makes a key's palette slot stable regardless of
-     * which data happens to contain it, so this is never sorted.
-     */
+    /** Series keys in `series` record order (never sorted: the order is what keeps slots stable). */
     keys: TKey[];
-    /** Colour for a series. The record's own `color` wins over the slot. */
-    resolve: (key: TKey, explicit?: ChartPalette) => string;
-    /**
-     * Colour by palette position, for marks that are not series.
-     *
-     * A stacked bar's segments are a second dimension with no record of their
-     * own, so they take the ramp by position rather than by key.
-     */
-    resolveByIndex: (index: number, explicit?: ChartPalette) => string;
-    /**
-     * Neutral, for a mark that names no series at all.
-     *
-     * The pie's folded bucket is not one of the slices, so borrowing a hue would
-     * imply it is.
-     */
-    neutral: string;
+    /** Color of a series: its `hex`, its `color` slot, or its position in the automatic order. */
+    resolve: (key: TKey) => ChartSeriesColor;
+    /** Color by position, for marks that are not series (a stack's components). */
+    resolveByIndex: (index: number, explicit?: ChartPalette) => ChartSeriesColor;
+    /** Neutral, for a mark that names no series. */
+    neutral: ChartSeriesColor;
 }
+/** @internal Resolves series colors from the `series` record. */
 export declare function useSeriesColorResolver<TKey extends string>(series: ChartSeriesStyles<TKey>): SeriesColorResolver<TKey>;

package/dist/charts/useSeriesColorResolver.js

@@ -1,26 +1,33 @@
-import { useGalaxyTheme } from "../theme/GalaxyTheme.js";
-import { resolveChartPaletteColor, resolveSeriesColor } from "./chartTheme.js";
+import { ChartPalette } from "./types.js";
+import { CHART_NEUTRAL_COLOR, resolveChartSeriesColor } from "./chartPalette.js";
 import { useCallback, useMemo } from "react";
 //#region src/charts/useSeriesColorResolver.ts
+/**
+* @internal Palette assignment for a chart's series, shared by every chart. A series keeps its
+* slot by its position in the `series` record, so adding a series never recolors the others. No
+* `useGalaxyTheme`: colors are CSS strings, so charts do not re-render on a theme switch.
+*/
+var NEUTRAL = {
+	color: CHART_NEUTRAL_COLOR,
+	palette: ChartPalette.TERTIARY
+};
+/** @internal Resolves series colors from the `series` record. */
 function useSeriesColorResolver(series) {
-	const { theme } = useGalaxyTheme();
 	const keys = useMemo(() => Object.keys(series), [series]);
-	const resolveByIndex = useCallback((index, explicit) => explicit ? resolveChartPaletteColor(theme, explicit) : resolveSeriesColor(theme, index), [theme]);
-	const resolve = useCallback((key, explicit) => resolveSeriesColor(theme, keys.indexOf(key), explicit ?? series[key]?.color), [
-		theme,
-		keys,
-		series
-	]);
+	const resolve = useCallback((key) => {
+		const style = series[key];
+		return resolveChartSeriesColor(keys.indexOf(key), style?.color, style?.hex);
+	}, [keys, series]);
+	const resolveByIndex = useCallback((index, explicit) => resolveChartSeriesColor(index, explicit), []);
 	return useMemo(() => ({
 		keys,
 		resolve,
 		resolveByIndex,
-		neutral: theme.color.text.tertiary
+		neutral: NEUTRAL
 	}), [
 		keys,
 		resolve,
-		resolveByIndex,
-		theme
+		resolveByIndex
 	]);
 }
 //#endregion

package/dist/chips/Chip.d.ts

@@ -1,58 +1,169 @@
-import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
-/** Chip color. Tints the background, border and label together. */
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type MouseEvent, type ReactNode } from "react";
+import type { Hex, PaletteColor } from "../theme/tokens/types.js";
+/** Canonical rungs; the member names the control rung the chip sits in. */
+export declare enum ChipSize {
+    /** 16px tall, `caption` text, 10px icon. */
+    X_SMALL = "X_SMALL",
+    /** 20px tall, `body_sm` text, 12px icon (1.x `SMALL` 18px; 1.x Badge `SMALL` 16px). */
+    SMALL = "SMALL",
+    /** 24px tall, `body_md` text, 14px icon. The default (1.x `MEDIUM` 20px). */
+    MEDIUM = "MEDIUM",
+    /** 28px tall, `body_lg` text, 16px icon (1.x `LARGE` 24px). */
+    LARGE = "LARGE",
+    /** 32px tall, `body_lg` text, 16px icon. */
+    X_LARGE = "X_LARGE"
+}
+/**
+ * Color role (Constitution V-A color set; meaning only): tints the fill, the text and the border
+ * together. Categories take `color` instead.
+ */
 export declare enum ChipVariant {
+    /** `background.primary` fill, `text.primary`. */
     PRIMARY = "PRIMARY",
-    PRIMARY_ALT = "PRIMARY_ALT",
+    /** `background.secondary` fill, `text.primary`. The default (1.x default). */
     SECONDARY = "SECONDARY",
+    /** `background.tertiary` fill, `text.primary`. */
     TERTIARY = "TERTIARY",
+    /** `background.secondary` fill, `text.disabled`. */
+    DISABLED = "DISABLED",
+    /** The parent's `currentColor`, with a fill and border mixed from it. */
+    INHERIT = "INHERIT",
+    /** Status: success fill and text. */
     SUCCESS = "SUCCESS",
+    /** Status: warning fill and text. */
     WARNING = "WARNING",
-    ERROR = "ERROR",
-    PINK = "PINK",
-    ORANGE = "ORANGE",
-    YELLOW = "YELLOW",
-    LIME = "LIME",
-    BLUE = "BLUE",
-    PURPLE = "PURPLE",
-    TEAL = "TEAL"
-}
-/** Chip height. Also drives label and icon size. */
-export declare enum ChipSize {
-    SMALL = "SMALL",
-    MEDIUM = "MEDIUM",
-    LARGE = "LARGE"
+    /** Status: error fill and text. */
+    ERROR = "ERROR"
 }
-export interface ChipProps {
-    /** Chip text. Required unless `icon` is set — with neither, nothing renders. */
-    label?: string | number;
-    /** @default ChipVariant.SECONDARY */
-    variant?: ChipVariant;
-    /** @default ChipSize.MEDIUM */
-    size?: ChipSize;
-    /** Custom leading graphic. Takes precedence over `icon`. */
-    svg?: React.ReactNode;
-    /** Phosphor icon *component* — pass `TagIcon`, not `<TagIcon />`. */
+/** Every Chip prop; `label`, `count` and `ariaLabel` are optional here (see `ChipProps`). */
+export interface ChipBaseProps extends AriaAttributes {
+    /**
+     * Visible text. Truncates to one line when the chip is narrower than its content; the full
+     * text then shows in a Tooltip.
+     */
+    label?: string;
+    /** Phosphor icon component (`TagIcon`, not `<TagIcon />`) before the label, sized to the rung. */
     icon?: PhosphorIcon;
-    /** Adds a trailing × button. Omit and the chip isn't dismissible. */
-    onDismiss?: () => void;
-    /** Also flips the cursor to `pointer`. */
-    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-    /** Fully rounded ends instead of the default small radius. */
+    /**
+     * Content before the icon and label when `icon` is not enough: an `Avatar`, a `Beacon`, a logo.
+     * At most `chip height − 4px` tall. Must not be interactive.
+     */
+    leading?: ReactNode;
+    /**
+     * Shows a static `Beacon` dot in the chip's own color before everything else.
+     * @default false
+     */
+    hasDot?: boolean;
+    /** A number after the label (or alone, as a badge). Tabular figures. Values of 0 or less are hidden. */
+    count?: number;
+    /**
+     * Counts above this show as `"{max}+"`.
+     * @default 99
+     */
+    max?: number;
+    /**
+     * The control rung the chip sits in: 16 / 20 / 24 / 28 / 32px tall.
+     * @default ChipSize.MEDIUM
+     */
+    size?: ChipSize;
+    /**
+     * Raw color for data-driven chips; the fill and border are derived from it. Discouraged: it
+     * does not follow the theme. Overrides `variant` and `color`.
+     */
+    hex?: Hex;
+    /**
+     * Fully rounded ends instead of the default `radius.md`.
+     * @default false
+     */
     isPill?: boolean;
-    /** Drop the fill and keep only the border. */
-    noBackground?: boolean;
-    /** Swap the label for a shimmer placeholder. */
+    /**
+     * Adds a `0.5px` hairline in the variant's border color.
+     * @default false
+     */
+    hasBorder?: boolean;
+    /** Chosen state: a `text.primary` hairline. With `onClick`, the chip is announced as a toggle (`aria-pressed`). */
+    isSelected?: boolean;
+    /**
+     * Disabled look (`ChipVariant.DISABLED`) and, when interactive, blocks `onClick` and `onDismiss`.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Pulses a placeholder over the leading mark and the text, keeps the width, and blocks
+     * `onClick` and `onDismiss`.
+     * @default false
+     */
     isLoading?: boolean;
-    /** Truncate a long label with an ellipsis. Needs a width-bounded parent. */
-    isEllipsis?: boolean;
-    /** Selected styling — border picks up the variant color. */
-    isActive?: boolean;
+    /**
+     * Wraps the chip body in a `Tooltip` with this content. Pass `""` instead of `undefined` when it
+     * toggles, so the chip does not remount.
+     */
+    tooltip?: ReactNode;
+    /** Makes the chip body a `<button>`. Not called while disabled or loading. */
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /** Adds a trailing × button named "Remove {label}". Not called while disabled or loading. */
+    onDismiss?: () => void;
+    /**
+     * Accessible name. Required by the type when there is neither `label` nor `count`. With a
+     * visible label it must start with that text (WCAG 2.5.3).
+     */
+    ariaLabel?: string;
+    /** DOM id on the root `<span>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<span>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<span>`. */
+    className?: string;
+    /** Inline style on the root `<span>`; only for setting CSS custom properties. Merged after `--gx-chip-hex`. */
+    style?: CSSProperties;
+}
+/** A chip with a visible label. */
+interface ChipLabelledProps {
+    /** Visible text. */
+    label: string;
+}
+/** A chip with a count (a badge). */
+interface ChipCountedProps {
+    /** A number after the label (or alone, as a badge). */
+    count: number;
+}
+/** A chip with neither a label nor a count (icon-only): the accessible name is required. */
+interface ChipNamedProps {
+    /** Accessible name. Required when there is neither `label` nor `count`. */
+    ariaLabel: string;
+}
+/** A chip colored by meaning (`variant`), or the default `SECONDARY`. */
+interface ChipVariantProps {
+    /**
+     * Color role: tints the fill, the text and the border together. Neutral members (`PRIMARY` /
+     * `SECONDARY` / `TERTIARY`) are fill steps. Not with `color`.
+     * @default ChipVariant.SECONDARY
+     */
+    variant?: ChipVariant;
+    /** Categorical palette family. Not with `variant`. */
+    color?: undefined;
+}
+/** A chip colored by category (`color`). */
+interface ChipColorProps {
+    /**
+     * Color role: tints the fill, the text and the border together. Neutral members (`PRIMARY` /
+     * `SECONDARY` / `TERTIARY`) are fill steps. Not with `color`.
+     * @default ChipVariant.SECONDARY
+     */
+    variant?: undefined;
+    /**
+     * Categorical palette family (`"blue"`, `"violet"`, …): the family's text, fill and border,
+     * the way a status variant renders. For categories (a source type, a team); meanings take
+     * `variant`. Not with `variant`.
+     */
+    color: PaletteColor;
 }
 /**
- * A compact tag for a value, filter, or status.
- *
- * Renders `null` when neither `label` nor `icon` is set. Adding `onDismiss`
- * appends a × button; adding `onClick` makes the whole chip clickable.
+ * Chip props. A chip with nothing to show or name (`<Chip icon={TagIcon} />`) is a type error, and
+ * so is a chip with both `variant` and `color`.
  */
-declare const Chip: ({ label, variant, size, svg, icon, onDismiss, onClick, isPill, noBackground, isLoading, isEllipsis, isActive, }: ChipProps) => import("react").JSX.Element | null;
+export type ChipProps = ChipBaseProps & (ChipVariantProps | ChipColorProps) & (ChipLabelledProps | ChipCountedProps | ChipNamedProps);
+/** A compact, tinted label for one short value: a tag, a category, a filter, or a count. */
+declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLSpanElement>>;
 export default Chip;