@galaxy-io/dls 2.0.2 → 2.2.0

package/dist/drawer/Drawer.d.ts

@@ -1,3 +1,4 @@
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
 import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
 import { Side } from "../theme/enums.js";
 /**
@@ -67,8 +68,12 @@ interface DrawerBaseProps extends AriaAttributes {
 }
 /** A title row names the drawer. */
 interface DrawerTitledProps {
-    /** The title row. A string renders as an `h2` `Text` and names the drawer; a node renders as it is. Required unless `ariaLabel` is set. */
+    /** The title row. A string renders as an `h2` `Text` and names the drawer; a node renders as it is, in a first line one control tall. Required unless `ariaLabel` is set. */
     header: ReactNode;
+    /** A secondary line under the title (the connector, the run's pipeline). Describes the drawer. */
+    subheader?: string | undefined;
+    /** A leading icon before the title. Pass the component, not an element. */
+    icon?: PhosphorIcon | undefined;
     /** Accessible name. Required by type when there is no `header`. */
     ariaLabel?: string;
 }
@@ -76,6 +81,10 @@ interface DrawerTitledProps {
 interface DrawerUntitledProps {
     /** The title row. A string renders as an `h2` `Text` and names the drawer; a node renders as it is. Required unless `ariaLabel` is set. */
     header?: undefined;
+    /** A secondary line under the title. Needs `header`. */
+    subheader?: undefined;
+    /** A leading icon before the title. Needs `header`. */
+    icon?: undefined;
     /** Accessible name. Required by type when there is no `header`. */
     ariaLabel: string;
 }

package/dist/drawer/Drawer.js

@@ -1,15 +1,17 @@
 import FocusScope, { FocusScopeAutoFocus } from "../a11y/FocusScope.js";
 import { Orientation, Side } from "../theme/enums.js";
-import Text, { TextSize, TextWeight } from "../text/Text.js";
+import Text from "../text/Text.js";
 import { DURATION, SPACE } from "../theme/tokens/scales.js";
 import { useControlledOpenState } from "../hooks/useControlledOpenState.js";
 import Portal from "../layout/Portal.js";
 import { OverlayLayer, useOverlay } from "../overlay/useOverlay.js";
 import { usePrefersReducedMotion } from "../hooks/usePrefersReducedMotion.js";
+import { OVERLAY_CONTENT_SHOWN, withContentFirstExit } from "../overlay/internal/contentFirstExit.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 OverlayTitleRow from "../overlay/internal/OverlayTitleRow.js";
 import Fade from "../transform/Fade.js";
 /* empty css                 */
 import { styled } from "@linaria/react";
@@ -131,7 +133,8 @@ var DRAWER_OPEN = {
 	opacity: 1,
 	x: 0,
 	y: 0,
-	pointerEvents: "auto"
+	pointerEvents: "auto",
+	...OVERLAY_CONTENT_SHOWN
 };
 /**
 * Scroll lock: while any drawer backdrop is mounted (open or exiting) the page does not scroll.
@@ -176,44 +179,21 @@ var DRAWER_PUSH_PANEL_SIDE_TO_CSS_MAP = {
 	[Side.TOP]: "gx-Drawer-Side_TOP-s1smajqi",
 	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-s3tnyde"
 };
-var Header = /*#__PURE__*/ styled("div")({
-	name: "Header",
-	class: "gx-Drawer-Header-h45j7yl",
-	propsAsIs: false
-});
-/** 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-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-b1ob4oh8",
+	class: "gx-Drawer-Body-b45j7yl",
 	propsAsIs: false
 });
 var Footer = /*#__PURE__*/ styled("div")({
 	name: "Footer",
-	class: "gx-Drawer-Footer-f14nwavk",
+	class: "gx-Drawer-Footer-fov58xm",
 	propsAsIs: false
 });
 var CloseSlot = /*#__PURE__*/ styled("span")({
 	name: "CloseSlot",
-	class: "gx-Drawer-CloseSlot-c1ifjfam",
+	class: "gx-Drawer-CloseSlot-cckczr5",
 	propsAsIs: false
 });
 /**
@@ -222,21 +202,23 @@ var CloseSlot = /*#__PURE__*/ styled("span")({
 * the stylesheet.
 */
 var DRAWER_SIDE_TO_HANDLE_CSS_MAP = {
-	[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"
+	[Side.RIGHT]: "gx-Drawer-Side_RIGHT-s1v64nx4",
+	[Side.LEFT]: "gx-Drawer-Side_LEFT-st6k1c3",
+	[Side.TOP]: "gx-Drawer-Side_TOP-s15lcrsa",
+	[Side.BOTTOM]: "gx-Drawer-Side_BOTTOM-s1ob4oh8"
 };
 /** 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, actions, 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, subheader, icon, 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 subheaderId = useId();
 	const panelId = id ?? generatedId;
-	const transition = usePrefersReducedMotion() ? DRAWER_REDUCED_TRANSITION : DRAWER_TRANSITION;
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const transition = prefersReducedMotion ? DRAWER_REDUCED_TRANSITION : DRAWER_TRANSITION;
 	const { isOpen, setOpen } = useControlledOpenState({
 		isOpen: isOpenProp,
 		defaultIsOpen,
@@ -288,24 +270,18 @@ var Drawer = forwardRef(function Drawer({ children, header, footer, actions, sid
 	}, [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 describing = subheader !== void 0 && header !== void 0 && rest["aria-describedby"] === void 0 ? { "aria-describedby": subheaderId } : {};
 	const sizeStyle = { "--gx-drawer-size": `${currentSize}px` };
 	const regions = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		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
-			}) : /* @__PURE__ */ jsx(HeaderNode, {}), actions !== void 0 && /* @__PURE__ */ jsx(HeaderActions, {
-				ref: actionsRef,
-				children: actions
-			})]
+		hasHeaderRow && /* @__PURE__ */ jsx(OverlayTitleRow, {
+			header,
+			subheader,
+			icon,
+			actions,
+			actionsRef,
+			titleId,
+			subheaderId,
+			hasClose: isDismissable
 		}),
 		/* @__PURE__ */ jsx(Body, { children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(Text, { children }) : children }),
 		footer !== void 0 && /* @__PURE__ */ jsx(Footer, { children: footer }),
@@ -331,9 +307,15 @@ var Drawer = forwardRef(function Drawer({ children, header, footer, actions, sid
 	if (!isModal) return /* @__PURE__ */ jsx(AnimatePresence, {
 		initial: false,
 		children: isOpen && /* @__PURE__ */ jsx(motion.div, {
-			initial: DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP[side],
-			animate: DRAWER_SIDE_TO_PUSH_OPEN_MAP[side],
-			exit: DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP[side],
+			initial: {
+				...DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP[side],
+				...OVERLAY_CONTENT_SHOWN
+			},
+			animate: {
+				...DRAWER_SIDE_TO_PUSH_OPEN_MAP[side],
+				...OVERLAY_CONTENT_SHOWN
+			},
+			exit: withContentFirstExit(DRAWER_SIDE_TO_PUSH_COLLAPSED_MAP[side], prefersReducedMotion),
 			transition,
 			className: cx(PUSH_ROOT_CSS, DRAWER_PUSH_SIDE_TO_CSS_MAP[side]),
 			children: /* @__PURE__ */ jsx(FocusScope, {
@@ -343,6 +325,7 @@ var Drawer = forwardRef(function Drawer({ children, header, footer, actions, sid
 				children: /* @__PURE__ */ jsx(Panel, {
 					...rest,
 					...labelling,
+					...describing,
 					ref,
 					id: panelId,
 					role: "region",
@@ -381,9 +364,12 @@ var Drawer = forwardRef(function Drawer({ children, header, footer, actions, sid
 		}), /* @__PURE__ */ jsx(AnimatePresence, {
 			initial: shouldAnimateOnMount,
 			children: isOpen && /* @__PURE__ */ jsx(motion.div, {
-				initial: closed,
+				initial: {
+					...closed,
+					...OVERLAY_CONTENT_SHOWN
+				},
 				animate: DRAWER_OPEN,
-				exit: closed,
+				exit: withContentFirstExit(closed, prefersReducedMotion),
 				transition,
 				className: cx(FRAME_CSS, DRAWER_SIDE_TO_CSS_MAP[side]),
 				style: frameStyle,
@@ -393,6 +379,7 @@ var Drawer = forwardRef(function Drawer({ children, header, footer, actions, sid
 					children: /* @__PURE__ */ jsx(Panel, {
 						...rest,
 						...labelling,
+						...describing,
 						ref,
 						id: panelId,
 						role: "dialog",

package/dist/inputs/CronInput.d.ts

@@ -1,18 +1,18 @@
 import { type AriaAttributes, type CSSProperties } from "react";
-/** Canonical rungs; CronInput supports all five and passes the rung to every control it renders. */
+/** Canonical rungs; CronInput supports all five (the Input rung table). */
 export declare enum CronInputSize {
-    /** 20px controls, caption text. */
+    /** 20px field, caption text, 12px icon. */
     X_SMALL = "X_SMALL",
-    /** 24px controls, body_sm text. */
+    /** 24px field, body_sm text, 12px icon. */
     SMALL = "SMALL",
-    /** 32px controls, body_md text. The default. */
+    /** 32px field, body_md text, 14px icon. The default. */
     MEDIUM = "MEDIUM",
-    /** 36px controls, body_lg text. */
+    /** 36px field, body_lg text, 14px icon. */
     LARGE = "LARGE",
-    /** 40px controls, body_lg text. */
+    /** 40px field, body_lg text, 16px icon. */
     X_LARGE = "X_LARGE"
 }
-/** Resting fill of the builder's controls (Constitution V-A surface set). */
+/** Resting fill of the field (Constitution V-A surface set). */
 export declare enum CronInputVariant {
     /** `background.base` fill. */
     BASE = "BASE",
@@ -23,72 +23,106 @@ export declare enum CronInputVariant {
     /** `background.tertiary` fill. */
     TERTIARY = "TERTIARY"
 }
+/** One named schedule in the presets column. */
+export interface CronInputPreset {
+    /** Text of the preset row ("Weekdays at 09:00"). */
+    label: string;
+    /** The five-field expression the preset sets. */
+    value: string;
+}
 export interface CronInputProps extends AriaAttributes {
-    /** Controlled five-field cron expression. Pass it with `onChange`. */
+    /** Controlled five-field cron expression. An empty string shows the placeholder. Pass it with `onChange`. */
     value?: string;
     /**
      * Initial expression while uncontrolled (daily at 00:00).
      * @default 0 0 * * *
      */
     defaultValue?: string;
-    /** Called with the new expression on every builder change and every keystroke in the Custom field. */
+    /** Called with the new expression on every builder change, every keystroke in the expression field, a preset, and with `""` when the clear button is pressed. */
     onChange?: (value: string) => void;
     /**
-     * Rung of every control in the builder: 20 / 24 / 32 / 36 / 40px.
+     * Named schedules shown in a column beside the builder. Choosing one sets the value and closes the panel. Pass `[]` to hide the column.
+     * @default Every 5 minutes, Every 15 minutes, Hourly, Daily at midnight, Weekdays at 09:00, Weekly on Monday, Monthly on the 1st
+     */
+    presets?: CronInputPreset[];
+    /**
+     * Control rung: 20 / 24 / 32 / 36 / 40px tall. The schedule panel is the same size at every rung.
      * @default CronInputSize.MEDIUM
      */
     size?: CronInputSize;
     /**
-     * Resting fill of the builder's controls, from the surface set. Ignored with `isGhost`.
+     * Resting fill of the field, from the surface set. Ignored with `isGhost`.
      * @default CronInputVariant.PRIMARY
      */
     variant?: CronInputVariant;
     /**
-     * Ghost controls (1.x `TRANSPARENT`): the selects and the Custom field show no fill and no hairline
-     * until hover or focus, and the frequency toggle's track has no fill and no hairline.
+     * Ghost field: no fill and no hairline at rest; the frame appears on hover, focus and open (1.x
+     * `TRANSPARENT`). For schedules set into a toolbar or a table cell. The panel is `PopoverVariant.BASE`.
      * @default false
      */
     isGhost?: boolean;
-    /** Label above the builder, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
+    /** Label above the field, rendered through `Field`. For a description or a horizontal layout, wrap the input in `Field` instead. */
     label?: string;
-    /** Message from the app, shown under the builder through `Field`. Also marks the builder's controls invalid. */
+    /**
+     * Shown in the field while the expression is empty. Never the label.
+     * @default Select schedule…
+     */
+    placeholder?: string;
+    /** Message from the app, shown under the field through `Field`. Also turns the border red and sets `aria-invalid`. */
     error?: string;
     /**
-     * Error borders and `aria-invalid` on the controls without a message. `error` implies it.
+     * Error border and `aria-invalid` without a message. `error` implies it.
      * @default false
      */
     isError?: boolean;
     /**
-     * Every control is disabled.
+     * Shows a clear button while there is an expression and the field is editable. It calls `onChange("")`.
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Not focusable, never opens. Shows the disabled look.
      * @default false
      */
     isDisabled?: boolean;
     /**
-     * Every control is focusable and announced but cannot change the schedule.
+     * Focusable and announced, shows the expression, but never opens and has no clear button.
      * @default false
      */
     isReadOnly?: boolean;
     /**
-     * Required marker on the `label` (via `Field`) and `aria-required` on the controls. No validation.
+     * Required marker on the `label` (via `Field`) and `aria-required`. No validation.
      * @default false
      */
     isRequired?: boolean;
     /**
-     * Stretch to the parent's width; the control column fills the rest of each row.
+     * Stretch to the parent's width. Without it, the field is 240px wide.
      * @default false
      */
     fillWidth?: boolean;
-    /** Accessible name of the group when there is no visible label (no `label` and no wrapping `Field`). */
+    /** Accessible name when there is no visible label (no `label` and no wrapping `Field`). */
     ariaLabel?: string;
-    /** DOM id of the group element. A wrapping `Field`'s id wins. */
+    /** Controlled open state of the schedule panel. When set, CronInput calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested state on click, the keyboard, a preset, Enter in the expression field, Escape, an outside press and focus leaving the panel. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * DOM id of the combobox element. A wrapping `Field`'s id wins.
+     * @default useId()
+     */
     id?: string;
-    /** Any `data-*` attribute, forwarded to the group element. */
+    /** Any `data-*` attribute, forwarded to the combobox element. */
     [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
-    /** Extra class on the root: the `Field` wrapper when CronInput renders one, otherwise the group. */
+    /** Extra class on the root: the `Field` wrapper when CronInput renders one, otherwise the field wrapper. */
     className?: string;
     /** Inline style on the root; only for setting CSS custom properties. */
     style?: CSSProperties;
 }
-/** A five-field cron expression, edited through a frequency builder with a plain-English preview. */
+/** A five-field cron expression in a field that opens presets and a schedule builder. */
 declare const CronInput: import("react").ForwardRefExoticComponent<CronInputProps & import("react").RefAttributes<HTMLDivElement>>;
 export default CronInput;