@galaxy-io/dls 2.0.0 → 2.0.1

package/dist/charts/useChartInteraction.js

@@ -1,4 +1,6 @@
+import { useControlledState } from "../hooks/useControlledState.js";
 import { ChartMarkState } from "./types.js";
+import { isSameSelection, toSelectionList, toggleSelection } from "./chartSelection.js";
 import { ChartGroupContext } from "./ChartGroupProvider.js";
 import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/charts/useChartInteraction.ts
@@ -15,10 +17,12 @@ import { useCallback, useContext, useEffect, useId, useMemo, useRef, useState }
 * follows the category a sibling engages (matched by raw label). Following emphasizes; it opens
 * the tooltip only when the provider shares tooltips. Series hover never syncs.
 *
-* And **selection**, supplied by the caller and never written here: it outranks hover. Clicks do
-* not pin anything; they only report (the 1.x rationale).
+* And **selection**: the marks that hold full strength while the rest recede. Without
+* `isFilterable` it is the caller's, presentational, and clicks only report. With `isFilterable`
+* it is the chart's filter (controlled or not): legend and plot clicks toggle descriptors in it, and
+* the filter chips' × or Escape clear it. A pinned selection outranks category hover; hovering a legend entry
+* previews that series over it.
 */
-var NO_SELECTION = [];
 var NO_SELECTED_INDICES = /* @__PURE__ */ new Set();
 /** @internal The next index for a navigation key, stopping at the ends (no wrap). */
 function getNextCategoryIndex(current, key, count, grid) {
@@ -37,7 +41,7 @@ function getNextCategoryIndex(current, key, count, grid) {
 	}
 }
 /** @internal Shared interaction model; see the module comment. */
-function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGroupSync = true, selection, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false, grid }) {
+function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGroupSync = true, selection, isFilterable = false, defaultSelection, onSelectionChange, categoryMuteState = ChartMarkState.MUTED, isDisabled = false, isLoading = false, grid }) {
 	const [pointerIndex, setPointerIndex] = useState(null);
 	const [keyboardIndex, setKeyboardIndex] = useState(null);
 	const [hoveredSeriesKey, setHoveredSeriesKey] = useState(null);
@@ -116,12 +120,31 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGr
 		setKeyboardIndex(null);
 	}, []);
 	const onKeyboardBlur = useCallback(() => setKeyboardIndex(null), []);
-	const selectionList = useMemo(() => {
-		if (selection === void 0 || selection === null) return NO_SELECTION;
-		if (!Array.isArray(selection)) return [selection];
-		return selection.length === 0 ? NO_SELECTION : selection;
-	}, [selection]);
+	const [selectionList, setSelectionList] = useControlledState({
+		value: useMemo(() => selection === void 0 ? void 0 : toSelectionList(selection), [selection]),
+		defaultValue: isFilterable ? toSelectionList(defaultSelection) : [],
+		onChange: onSelectionChange
+	});
 	const hasSelection = selectionList.length > 0;
+	const toggleSelection$1 = useCallback((descriptor, isAdditive) => {
+		if (!isFilterable) return;
+		setSelectionList(toggleSelection(selectionList, descriptor, isAdditive));
+	}, [
+		isFilterable,
+		selectionList,
+		setSelectionList
+	]);
+	const setSelection = useCallback((next) => {
+		if (isFilterable) setSelectionList(next);
+	}, [isFilterable, setSelectionList]);
+	const clearSelection = useCallback(() => {
+		if (!isFilterable || selectionList.length === 0) return;
+		setSelectionList([]);
+	}, [
+		isFilterable,
+		selectionList,
+		setSelectionList
+	]);
 	/** A descriptor is a conjunction of the fields it carries; a field the mark lacks never excludes it. */
 	const matchesSelection = useCallback(({ categoryIndex, seriesKey }) => {
 		if (!hasSelection) return true;
@@ -151,24 +174,39 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGr
 	]);
 	const getMarkState = useCallback(({ categoryIndex, seriesKey }) => {
 		if (isLoading) return ChartMarkState.MUTED;
+		if (seriesKey !== void 0 && safeHoveredSeries !== null) return seriesKey === safeHoveredSeries ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
 		if (!matchesSelection({
 			categoryIndex,
 			seriesKey
 		})) return ChartMarkState.MUTED;
-		if (seriesKey !== void 0 && safeHoveredSeries !== null && seriesKey !== safeHoveredSeries) return ChartMarkState.MUTED;
+		if (hasSelection) return ChartMarkState.ACTIVE;
 		return categoryIndex !== void 0 && activeIndex !== null && categoryIndex !== activeIndex ? categoryMuteState : ChartMarkState.ACTIVE;
 	}, [
 		isLoading,
 		matchesSelection,
 		safeHoveredSeries,
+		hasSelection,
 		activeIndex,
 		categoryMuteState
 	]);
+	const getSeriesState = useCallback((seriesKey) => {
+		if (safeHoveredSeries !== null) return seriesKey === safeHoveredSeries ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+		return matchesSelection({ seriesKey }) ? ChartMarkState.ACTIVE : ChartMarkState.MUTED;
+	}, [safeHoveredSeries, matchesSelection]);
+	const isSeriesPinned = useCallback((seriesKey) => isFilterable && selectionList.some((item) => isSameSelection(item, { seriesKey })), [isFilterable, selectionList]);
 	return useMemo(() => ({
 		activeIndex,
 		showTooltip,
 		hoveredSeriesKey: safeHoveredSeries,
 		selectedCategoryIndices,
+		isFilterable,
+		hasSelection,
+		selection: selectionList,
+		toggleSelection: toggleSelection$1,
+		setSelection,
+		clearSelection,
+		getSeriesState,
+		isSeriesPinned,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,
@@ -183,6 +221,14 @@ function useChartInteraction({ categoryCount, seriesKeys, categoryKeys, enableGr
 		showTooltip,
 		safeHoveredSeries,
 		selectedCategoryIndices,
+		isFilterable,
+		hasSelection,
+		selectionList,
+		toggleSelection$1,
+		setSelection,
+		clearSelection,
+		getSeriesState,
+		isSeriesPinned,
 		getMarkState,
 		onCategoryEnter,
 		onCategoryLeave,

package/dist/drawer/Drawer.d.ts

@@ -18,8 +18,10 @@ export declare enum DrawerSize {
 interface DrawerBaseProps extends AriaAttributes {
     /** The body. It scrolls when it is taller than the panel. A string or number renders as `Text`. */
     children?: ReactNode;
-    /** The actions row, end-aligned with an 8px gap. */
+    /** The actions row, end-aligned with an 8px gap: what finishes the drawer's task (Cancel, then the `PRIMARY` Save). */
     footer?: ReactNode;
+    /** Controls in the title row, before the close button, for the thing the drawer shows: one or two icon-only `TERTIARY` `SMALL` buttons and a ⋯ `Menu` for the rest. Not for Save or Cancel (those are `footer`). */
+    actions?: ReactNode;
     /**
      * The edge the drawer sits on and slides from.
      * @default Side.RIGHT

package/dist/drawer/Drawer.js

@@ -8,6 +8,7 @@ import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
 import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
 import { OverlayNode } from "../overlay/OverlayProvider.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { isDevelopment, useDevWarning } from "../inputs/internal/devWarn.js";
 import ResizeHandle from "../layout/ResizeHandle.js";
 import Fade from "../transform/Fade.js";
 /* empty css                 */
@@ -24,6 +25,11 @@ import { AnimatePresence, motion } from "framer-motion";
 * three regions (a title row, a scrolling body and an actions row), sits on any `side`, takes a
 * `size`, and with `isResizable` the user drags or keys its inner edge to resize it.
 *
+* Actions split by what they do. `actions` in the title row, before the close button, act on the
+* thing the drawer shows: one or two icon-only `TERTIARY` `SMALL` buttons (open in full page, copy
+* link) and a ⋯ `Menu` for the rest (rename, duplicate, delete). `footer` finishes the drawer's
+* task (Cancel, then the `PRIMARY` Save); a read-only detail drawer usually has no footer.
+*
 * By default it is modal, like `Modal`: a portal over a dimmed, locked page with a focus trap,
 * stacked through the overlay stack, closing on Escape or a backdrop click. With
 * `isModal={false}` it is a docked panel: it renders in place in the layout and pushes the content
@@ -177,25 +183,37 @@ var Header = /*#__PURE__*/ styled("div")({
 });
 /** While the close button shows: a long title never runs under it. */
 var HAS_CLOSE_CSS = "gx-Drawer-HAS_CLOSE_CSS-hov58xm";
+/** With `actions`, the close button joins them: the same 4px apart, one group at the row's end. */
+var HAS_CLOSE_WITH_ACTIONS_CSS = "gx-Drawer-HAS_CLOSE_WITH_ACTIONS_CSS-hckczr5";
 /** A node `header`: takes the row and may shrink. */
 var HeaderNode = /*#__PURE__*/ styled("div")({
 	name: "HeaderNode",
-	class: "gx-Drawer-HeaderNode-hckczr5",
+	class: "gx-Drawer-HeaderNode-h1v64nx4",
+	propsAsIs: false
+});
+/** A string `header` takes the row too, so `actions` sit at its end. */
+var HEADER_TITLE_CSS = "gx-Drawer-HEADER_TITLE_CSS-ht6k1c3";
+/** `actions`: at the end of the title row, 4px apart and 4px before the close button. */
+var HeaderActions = /*#__PURE__*/ styled("div")({
+	name: "HeaderActions",
+	class: "gx-Drawer-HeaderActions-h15lcrsa",
 	propsAsIs: false
 });
+/** More header controls than this crowd the title: the rest belong in the ⋯ menu. */
+var DRAWER_MAX_HEADER_ACTIONS = 3;
 var Body = /*#__PURE__*/ styled("div")({
 	name: "Body",
-	class: "gx-Drawer-Body-b1v64nx4",
+	class: "gx-Drawer-Body-b1ob4oh8",
 	propsAsIs: false
 });
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Drawer-Footer-ft6k1c3",
+	class: "gx-Drawer-Footer-f14nwavk",
 	propsAsIs: false
 });
 var CloseSlot = /*#__PURE__*/ styled("span")({
 	name: "CloseSlot",
-	class: "gx-Drawer-CloseSlot-c15lcrsa",
+	class: "gx-Drawer-CloseSlot-c1ifjfam",
 	propsAsIs: false
 });
 /**
@@ -204,17 +222,17 @@ var CloseSlot = /*#__PURE__*/ styled("span")({
 * the stylesheet.
 */
 var DRAWER_SIDE_TO_HANDLE_CSS_MAP = {
-	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-s1ob4oh8",
-	[Side.LEFT]: "gx-Drawer-Side_LEFT-s14nwavk",
-	[Side.TOP]: "gx-Drawer-Side_TOP-s1ifjfam",
-	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-sv6fh8e"
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-sv6fh8e",
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-s1c8bwjq",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s1vq4aq7",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-svqv727"
 };
 /** The viewport length on the side's axis, less the 48px strip. */
 function readMaxSize(side) {
 	return (DRAWER_SIDE_TO_IS_HORIZONTAL_MAP[side] ? window.innerWidth : window.innerHeight) - DRAWER_VIEWPORT_GAP_PX;
 }
 /** A panel that slides in from an edge: title row, scrolling body, actions row. */
-var Drawer = forwardRef(function Drawer({ children, header, footer, side = Side.RIGHT, size = "MEDIUM", isResizable = false, isModal = true, isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
+var Drawer = forwardRef(function Drawer({ children, header, footer, actions, side = Side.RIGHT, size = "MEDIUM", isResizable = false, isModal = true, isDismissable = true, isOpen: isOpenProp, defaultIsOpen = false, onOpenChange, ariaLabel, id, className, style, ...rest }, ref) {
 	const generatedId = useId();
 	const titleId = useId();
 	const panelId = id ?? generatedId;
@@ -261,22 +279,33 @@ var Drawer = forwardRef(function Drawer({ children, header, footer, side = Side.
 		isBackdropPressRef.current = false;
 		if (isBackdropPress && isDismissable) close();
 	};
-	const hasHeaderRow = header !== void 0 || isDismissable;
+	const hasHeaderRow = header !== void 0 || isDismissable || actions !== void 0;
+	const actionsRef = useRef(null);
+	const [actionCount, setActionCount] = useState(0);
+	useEffect(() => {
+		if (!isOpen || actions === void 0 || !isDevelopment()) return;
+		setActionCount(actionsRef.current?.querySelectorAll("button, a[href]").length ?? 0);
+	}, [isOpen, actions]);
+	useDevWarning(actionCount > DRAWER_MAX_HEADER_ACTIONS, "[@galaxy-io/dls] Drawer has more than three header `actions`. Keep one or two icon buttons and a ⋯ Menu, and move the rest into the menu.");
 	const labelling = ariaLabel !== void 0 ? { "aria-label": ariaLabel } : rest["aria-labelledby"] !== void 0 || header === void 0 ? {} : { "aria-labelledby": titleId };
 	const sizeStyle = { "--gx-drawer-size": `${currentSize}px` };
 	const regions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		hasHeaderRow && /* @__PURE__ */ jsx(Header, {
-			className: cx(isDismissable && HAS_CLOSE_CSS),
-			children: typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
+		hasHeaderRow && /* @__PURE__ */ jsxs(Header, {
+			className: cx(isDismissable && (actions === void 0 ? HAS_CLOSE_CSS : HAS_CLOSE_WITH_ACTIONS_CSS)),
+			children: [typeof header === "string" ? /* @__PURE__ */ jsx(Text, {
 				as: "h2",
 				size: TextSize.BODY_LG,
 				weight: TextWeight.MEDIUM,
 				id: titleId,
+				className: HEADER_TITLE_CSS,
 				children: header
 			}) : header !== void 0 ? /* @__PURE__ */ jsx(HeaderNode, {
 				id: titleId,
 				children: header
-			}) : null
+			}) : /* @__PURE__ */ jsx(HeaderNode, {}), actions !== void 0 && /* @__PURE__ */ jsx(HeaderActions, {
+				ref: actionsRef,
+				children: actions
+			})]
 		}),
 		/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
 		footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),

package/dist/feedback/Alert.d.ts

@@ -26,7 +26,7 @@ export interface AlertProps extends AriaAttributes {
      * @default the variant's icon
      */
     icon?: PhosphorIcon;
-    /** The way out, usually one `Button` at `ButtonSize.SMALL`. A row under the body inline; trailing in a banner. */
+    /** The way out: one `ButtonVariant.PRIMARY` button at `ButtonSize.SMALL`, any second action `TERTIARY`. A row under the body inline; trailing in a banner. */
     actions?: ReactNode;
     /** Shows a dismiss button and is called when it is pressed. The host unmounts the Alert. */
     onDismiss?: () => void;

package/dist/inputs/CheckboxGroup.js

@@ -1,7 +1,7 @@
 import { Orientation } from "../theme/enums.js";
 import { useControlledState } from "../hooks/useControlledState.js";
-import { FieldContext } from "../hooks/useField.js";
 import { useDevWarning } from "./internal/devWarn.js";
+import { FieldContext } from "../hooks/useField.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import CheckboxInput, { CheckboxInputSize, CheckboxInputVariant } from "./CheckboxInput.js";
 import Field, { FieldSize } from "./Field.js";

package/dist/inputs/CheckboxInput.js

@@ -1,9 +1,9 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import { useControlledState } from "../hooks/useControlledState.js";
 import Icon, { IconVariant, IconWeight } from "../icons/Icon.js";
+import { useDevWarning } from "./internal/devWarn.js";
 import { useField } from "../hooks/useField.js";
 import RequiredMarker from "../text/RequiredMarker.js";
-import { useDevWarning } from "./internal/devWarn.js";
 import { hasContent, isFilled } from "./internal/predicates.js";
 import { joinIds } from "./internal/fieldWiring.js";
 /* empty css                        */

package/dist/inputs/ColorInput.js

@@ -8,9 +8,9 @@ import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlay
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Rotate from "../transform/Rotate.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { isDevelopment, useDevWarning } from "./internal/devWarn.js";
 import { FieldContext } from "../hooks/useField.js";
 import { contrastRatio, hexToHsva, hexToRgb, hsvaToHex, rgbToHex } from "../utils/colors.js";
-import { isDevelopment, useDevWarning } from "./internal/devWarn.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import Field, { FieldSize } from "./Field.js";
 import { rootStyle, useOwnField } from "./internal/ownField.js";

package/dist/inputs/CronInput.js

@@ -4,8 +4,8 @@ import { useControlledState } from "../hooks/useControlledState.js";
 import Flex, { AlignItems } from "../layout/Flex.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import ButtonGroup from "../buttons/ButtonGroup.js";
-import { FieldContext } from "../hooks/useField.js";
 import { useDevWarning } from "./internal/devWarn.js";
+import { FieldContext } from "../hooks/useField.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import Field, { FieldSize } from "./Field.js";
 import { rootStyle, useOwnField } from "./internal/ownField.js";

package/dist/inputs/DateInput.js

@@ -10,8 +10,8 @@ import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlay
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import FlexItem from "../layout/FlexItem.js";
-import { FieldContext } from "../hooks/useField.js";
 import { useDevWarning } from "./internal/devWarn.js";
+import { FieldContext } from "../hooks/useField.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import Field, { FieldSize } from "./Field.js";
 import { rootStyle, useOwnField } from "./internal/ownField.js";

package/dist/inputs/KeyValueInput.js

@@ -1,8 +1,8 @@
 import { FontFamily } from "../theme/enums.js";
 import { useControlledState } from "../hooks/useControlledState.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
-import { FieldContext } from "../hooks/useField.js";
 import { useDevWarning } from "./internal/devWarn.js";
+import { FieldContext } from "../hooks/useField.js";
 import { isFilled } from "./internal/predicates.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import Field, { FieldSize } from "./Field.js";

package/dist/inputs/SelectInput.js

@@ -11,10 +11,10 @@ import Popover, { PopoverRole, PopoverTrigger, PopoverVariant } from "../overlay
 import Icon, { IconVariant } from "../icons/Icon.js";
 import Rotate from "../transform/Rotate.js";
 import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import { isDevelopment, useDevWarning } from "./internal/devWarn.js";
 import Spinner, { SpinnerSize } from "../feedback/Spinner.js";
 import { useDebouncedValue } from "../hooks/useDebouncedValue.js";
 import Span from "../text/Span.js";
-import { isDevelopment, useDevWarning } from "./internal/devWarn.js";
 import { hasContent, isFilled } from "./internal/predicates.js";
 import { useFieldWiring } from "./internal/fieldWiring.js";
 import Field, { FieldSize } from "./Field.js";

package/dist/inputs/SwitchInput.js

@@ -1,8 +1,8 @@
 import Text, { TextSize, TextVariant } from "../text/Text.js";
 import { useControlledState } from "../hooks/useControlledState.js";
+import { useDevWarning } from "./internal/devWarn.js";
 import { useField } from "../hooks/useField.js";
 import Spinner, { SpinnerSize, SpinnerVariant } from "../feedback/Spinner.js";
-import { useDevWarning } from "./internal/devWarn.js";
 import { hasContent, isFilled } from "./internal/predicates.js";
 import { joinIds } from "./internal/fieldWiring.js";
 import { useIsBareField } from "./internal/bareField.js";

package/dist/inputs/TextAreaInput.js

@@ -65,6 +65,12 @@ var Root = /*#__PURE__*/ styled("div")({
 * The field itself: the bordered element, so focus (`FIELD_FOCUS` on any focus: `border.focused` at 1px inside) and
 * the resize handle sit on the frame.
 */
+/**
+* What the padding gives back for the transparent hairline border. Chrome draws a 0.5px border a
+* whole pixel wide, so padding that subtracted only 0.5px left two rows a pixel taller than the
+* box: the textarea scrolled that pixel and swallowed the wheel instead of the page. Subtracting
+* the full pixel fits exactly in Chrome and leaves half a pixel spare where the border is 0.5px.
+*/
 var Control = /*#__PURE__*/ styled("textarea")({
 	name: "Control",
 	class: "gx-TextAreaInput-Control-cu0hnok",

package/dist/inputs/internal/ownField.js

@@ -1,5 +1,5 @@
-import { useField } from "../../hooks/useField.js";
 import { useDevWarning } from "./devWarn.js";
+import { useField } from "../../hooks/useField.js";
 import { isFilled } from "./predicates.js";
 import { cx } from "@linaria/core";
 //#region src/inputs/internal/ownField.tsx