@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/lists/BulletedList.d.ts

@@ -1,15 +1,33 @@
-/** Item text size — maps onto the matching `TextSize` step. */
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Item type step; canonical rungs `SMALL MEDIUM LARGE` (the 1.x members). */
 export declare enum BulletedListSize {
+    /** `body_sm` items (12px on 16px). */
     SMALL = "SMALL",
+    /** `body_md` items (13px on 16px). The default. */
     MEDIUM = "MEDIUM",
+    /** `body_lg` items (14px on 20px). */
     LARGE = "LARGE"
 }
-export interface BulletedListProps {
-    /** One string per bullet. Plain text only — no nesting, no rich content. */
-    items: string[];
-    /** @default BulletedListSize.MEDIUM */
+export interface BulletedListProps extends AriaAttributes {
+    /**
+     * One entry per bullet: a string, inline content (`Span`, `Code`, `Link`), or content ending in
+     * a nested `BulletedList`. Required.
+     */
+    items: ReactNode[];
+    /**
+     * Type step of every item: `body_sm`, `body_md` or `body_lg`.
+     * @default BulletedListSize.MEDIUM
+     */
     size?: BulletedListSize;
+    /** DOM id on the root `<ul>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<ul>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<ul>`. */
+    className?: string;
+    /** Inline style on the root `<ul>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
 }
-/** An unordered list of plain strings, each rendered through `Text`. */
-declare const BulletedList: ({ items, size }: BulletedListProps) => import("react").JSX.Element;
+/** An unordered list of short items, each rendered through `Text`. */
+declare const BulletedList: import("react").ForwardRefExoticComponent<BulletedListProps & import("react").RefAttributes<HTMLUListElement>>;
 export default BulletedList;

package/dist/lists/BulletedList.js

@@ -1,43 +1,88 @@
-import { withTheme } from "../theme/GalaxyTheme.js";
-import Text, { TextSize } from "../text/Text.js";
+import Text, { TextSize, TextWeight } from "../text/Text.js";
 /* empty css                       */
 import { styled } from "@linaria/react";
-import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/lists/BulletedList.tsx
-var _exp = () => ({ theme }) => theme.color.text.primary;
-var _exp2 = () => ({ theme }) => theme.font.sans.weight.medium;
-var StyledBulletedList = withTheme(/*#__PURE__*/ styled("ul")({
-	name: "StyledBulletedList",
-	class: "s1o45025",
-	propsAsIs: false,
-	vars: {
-		"s1o45025-0": [_exp()],
-		"s1o45025-1": [_exp2()]
-	}
-}));
-var StyledBulletedListItem = /*#__PURE__*/ styled("li")({
-	name: "StyledBulletedListItem",
-	class: "s13x8jj4",
-	propsAsIs: false
-});
-/** Item text size — maps onto the matching `TextSize` step. */
+/**
+* A short unordered list: one bullet per item, items stacked with the 1.x spacing (8px indent, a
+* 16px bullet column, no gap), each item's copy rendered through `Text` at the list's size. An
+* item is a string or inline content (`Span`, `Code`, `Link`), and may end in a nested
+* `BulletedList`, which indents by its own 8px plus the bullet column.
+*
+* The bullet is a `Text` glyph hidden from screen readers, sharing the item's size so it sits on
+* the item's first line at every size; long items wrap beside it, never under it. The list keeps
+* its semantics in Safari with `role="list"` (the package reset sets `list-style: none`).
+*
+* For a few lines of supporting copy, not interactive rows (`Menu`), navigation (`SidebarNav`),
+* key / value pairs (`DescriptionList`) or numbered steps.
+*/
+/** Item type step; canonical rungs `SMALL MEDIUM LARGE` (the 1.x members). */
 var BulletedListSize = /* @__PURE__ */ function(BulletedListSize) {
+	/** `body_sm` items (12px on 16px). */
 	BulletedListSize["SMALL"] = "SMALL";
+	/** `body_md` items (13px on 16px). The default. */
 	BulletedListSize["MEDIUM"] = "MEDIUM";
+	/** `body_lg` items (14px on 20px). */
 	BulletedListSize["LARGE"] = "LARGE";
 	return BulletedListSize;
 }({});
+/** The list: a column with the 1.x 8px indent and no gap. */
+var Root = /*#__PURE__*/ styled("ul")({
+	name: "Root",
+	class: "gx-BulletedList-r1o45025",
+	propsAsIs: false
+});
+/** One item: the bullet column and the copy, top-aligned. */
+var Item = /*#__PURE__*/ styled("li")({
+	name: "Item",
+	class: "gx-BulletedList-Item-i13x8jj4",
+	propsAsIs: false
+});
+/**
+* The 16px bullet column (1.x geometry). A flex box, so the glyph's own line box (the item's
+* line height) sets its height instead of the column's inherited strut.
+*/
+var Marker = /*#__PURE__*/ styled("div")({
+	name: "Marker",
+	class: "gx-BulletedList-Marker-m1kl5jbx",
+	propsAsIs: false
+});
+/** The item copy takes the rest of the row, so long items wrap beside the bullet. */
+var ITEM_TEXT_CSS = "gx-BulletedList-ITEM_TEXT_CSS-i1dtejob";
 var BULLETED_LIST_SIZE_TO_TEXT_SIZE_MAP = {
 	["SMALL"]: TextSize.BODY_SM,
 	["MEDIUM"]: TextSize.BODY_MD,
 	["LARGE"]: TextSize.BODY_LG
 };
-/** An unordered list of plain strings, each rendered through `Text`. */
-var BulletedList = ({ items, size = "MEDIUM" }) => {
-	return /* @__PURE__ */ jsx(StyledBulletedList, { children: items.map((item, index) => /* @__PURE__ */ jsx(StyledBulletedListItem, { children: /* @__PURE__ */ jsx(Text, {
-		size: BULLETED_LIST_SIZE_TO_TEXT_SIZE_MAP[size],
-		children: item
-	}) }, index)) });
-};
+/** An unordered list of short items, each rendered through `Text`. */
+var BulletedList = forwardRef(function BulletedList({ items, size = "MEDIUM", id, className, style, ...rest }, ref) {
+	const textSize = BULLETED_LIST_SIZE_TO_TEXT_SIZE_MAP[size];
+	const entries = items.map((item, position) => ({
+		item,
+		position
+	}));
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		role: "list",
+		id,
+		className,
+		style,
+		children: entries.map(({ item, position }) => /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(Marker, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: textSize,
+			weight: TextWeight.MEDIUM,
+			"aria-hidden": true,
+			children: "•"
+		}) }), /* @__PURE__ */ jsx(Text, {
+			as: "div",
+			size: textSize,
+			className: ITEM_TEXT_CSS,
+			children: item
+		})] }, position))
+	});
+});
+BulletedList.displayName = "BulletedList";
 //#endregion
 export { BulletedListSize, BulletedList as default };

package/dist/lists/DescriptionList.d.ts

@@ -0,0 +1,91 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import { FontFamily, Orientation } from "../theme/enums.js";
+/** Type step of labels and values; canonical rungs `SMALL MEDIUM LARGE`. */
+export declare enum DescriptionListSize {
+    /** `body_sm` labels and values; `X_SMALL` copy button. */
+    SMALL = "SMALL",
+    /** `body_md` labels and values; `X_SMALL` copy button. The default. */
+    MEDIUM = "MEDIUM",
+    /** `body_lg` labels and values; `SMALL` copy button. */
+    LARGE = "LARGE"
+}
+/** Fields every item has, whatever its value. */
+interface DescriptionListItemBase {
+    /** The term: a short label, rendered in secondary text. Keep it short; it does not wrap beside a value. */
+    label: string;
+    /**
+     * Font family of a string or number value. `MONO` for ids, hashes, paths and timestamps.
+     * @default FontFamily.SANS
+     */
+    family?: FontFamily;
+}
+/** An item whose value is text (a string or number), or empty. */
+interface DescriptionListTextItem {
+    /** The value. A string or number renders as `Text`; `null`, `undefined` or `""` renders an em dash. */
+    value: string | number | null | undefined;
+    /**
+     * Shows a copy button after the value. Copies `copyValue`, else the value as text.
+     * @default false
+     */
+    isCopyable?: boolean;
+    /** Text the copy button writes, when it differs from the shown value (a full id behind a short one). */
+    copyValue?: string;
+}
+/** An item whose value is a node, without a copy button. */
+interface DescriptionListNodeItem {
+    /** The value: any node (a labeled `Beacon`, a `Link`, a `Chip`). */
+    value: ReactNode;
+    /**
+     * A node value is copyable only with a `copyValue`.
+     * @default false
+     */
+    isCopyable?: false;
+    /** No copy text without a copy button. */
+    copyValue?: undefined;
+}
+/** An item whose value is a node, with a copy button writing `copyValue`. */
+interface DescriptionListCopyableNodeItem {
+    /** The value: any node (a labeled `Beacon`, a `Link`, a `Chip`). */
+    value: ReactNode;
+    /** Shows a copy button after the value. */
+    isCopyable: true;
+    /** Text the copy button writes; required, a node cannot be read as text. */
+    copyValue: string;
+}
+/**
+ * One row: a label and a value. A node value with `isCopyable` needs a `copyValue` (a type
+ * error otherwise: there would be nothing to copy).
+ */
+export type DescriptionListItem = DescriptionListItemBase & (DescriptionListTextItem | DescriptionListNodeItem | DescriptionListCopyableNodeItem);
+/** How many items sit side by side. */
+export type DescriptionListColumns = 1 | 2 | 3 | 4;
+export interface DescriptionListProps extends AriaAttributes {
+    /** The rows, in order. Required. */
+    items: DescriptionListItem[];
+    /**
+     * Type step of labels and values (`body_sm` / `body_md` / `body_lg`) and the copy button's rung.
+     * @default DescriptionListSize.MEDIUM
+     */
+    size?: DescriptionListSize;
+    /**
+     * `HORIZONTAL`: label beside value, labels aligned in one column. `VERTICAL`: label above value.
+     * @default Orientation.HORIZONTAL
+     */
+    orientation?: Orientation;
+    /**
+     * Number of items side by side. Items fill rows left to right.
+     * @default 1
+     */
+    columns?: DescriptionListColumns;
+    /** DOM id on the root `<dl>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<dl>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<dl>`. */
+    className?: string;
+    /** Inline style on the root `<dl>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Labelled values in a `<dl>`: labels aligned in one column, or above their values. */
+declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>>;
+export default DescriptionList;

package/dist/lists/DescriptionList.js

@@ -0,0 +1,147 @@
+import { FontFamily, Orientation } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import CopyButton from "../buttons/CopyButton.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/lists/DescriptionList.tsx
+/**
+* Labelled values: the detail pane of a run, a source or a user. Each item is a label (the term,
+* secondary text) and a value: a string or number through `Text` (optionally mono, optionally
+* with a copy button), or any node (a labeled `Beacon`, `Link`, `Chip`). An empty value renders an em dash.
+*
+* `HORIZONTAL` puts every label beside its value with all labels of an item column in one grid
+* track (`display: contents` on the item group + a `max-content` label track), so labels align
+* without measuring. `VERTICAL` stacks label above value. `columns` sets how many items sit side
+* by side. Rows take the copy button's height when any item is copyable, so the list keeps one
+* rhythm.
+*
+* Read-only: editing is a form (`Field` + inputs); a list of plain lines is `BulletedList`.
+*/
+/** Type step of labels and values; canonical rungs `SMALL MEDIUM LARGE`. */
+var DescriptionListSize = /* @__PURE__ */ function(DescriptionListSize) {
+	/** `body_sm` labels and values; `X_SMALL` copy button. */
+	DescriptionListSize["SMALL"] = "SMALL";
+	/** `body_md` labels and values; `X_SMALL` copy button. The default. */
+	DescriptionListSize["MEDIUM"] = "MEDIUM";
+	/** `body_lg` labels and values; `SMALL` copy button. */
+	DescriptionListSize["LARGE"] = "LARGE";
+	return DescriptionListSize;
+}({});
+/** The list: a grid whose tracks come from the orientation and column blocks. */
+var Root = /*#__PURE__*/ styled("dl")({
+	name: "Root",
+	class: "gx-DescriptionList-r1rtdwfl",
+	propsAsIs: false
+});
+/** One label / value group. A `div` grouping a `dt` and its `dd` is valid in a `<dl>`. */
+var Item = /*#__PURE__*/ styled("div")({
+	name: "Item",
+	class: "gx-DescriptionList-Item-i1gmyim5",
+	propsAsIs: false
+});
+/** The label cell. */
+var Term = /*#__PURE__*/ styled("dt")({
+	name: "Term",
+	class: "gx-DescriptionList-Term-t198hz73",
+	propsAsIs: false
+});
+/** The value cell: the value and its copy button; long ids and paths wrap inside the track. */
+var Details = /*#__PURE__*/ styled("dd")({
+	name: "Details",
+	class: "gx-DescriptionList-Details-d15164ci",
+	propsAsIs: false
+});
+/**
+* A node value sits in a `Text` box of the list's step whose first flex item is a zero-width text
+* strut, so the value's baseline is a real text baseline at that step (not, say, the synthesized
+* bottom edge of a `Beacon` dot) and the label lines up with it. Marks (`Beacon`, `Chip`, `Link`)
+* center on the strut's line.
+*/
+var NODE_VALUE_CSS = "gx-DescriptionList-NODE_VALUE_CSS-n1mikopx";
+var DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-DescriptionList-Orientation_HORIZONTAL-o17z38i7",
+	[Orientation.VERTICAL]: "gx-DescriptionList-Orientation_VERTICAL-oarm5a8"
+};
+var DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP = {
+	1: "gx-DescriptionList-1-_1itek1z",
+	2: "gx-DescriptionList-2-_19oquh",
+	3: "gx-DescriptionList-3-_108p3ql",
+	4: "gx-DescriptionList-4-_10x7q9y"
+};
+/** Applied only when some item is copyable: every row is as tall as a row with a copy button. */
+var DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP = {
+	["SMALL"]: "gx-DescriptionList-SMALL-s1g4xmgd",
+	["MEDIUM"]: "gx-DescriptionList-MEDIUM-m1s7hmki",
+	["LARGE"]: "gx-DescriptionList-LARGE-l1t8g3vn"
+};
+var DESCRIPTION_LIST_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG
+};
+var DESCRIPTION_LIST_SIZE_TO_BUTTON_SIZE_MAP = {
+	["SMALL"]: ButtonSize.X_SMALL,
+	["MEDIUM"]: ButtonSize.X_SMALL,
+	["LARGE"]: ButtonSize.SMALL
+};
+var isText = (value) => typeof value === "string" || typeof value === "number";
+var isEmpty = (value) => value === null || value === void 0 || value === "";
+/** The text a copy button writes for an item, or `undefined` when there is nothing to copy. */
+var getCopyText = (item) => {
+	if (!item.isCopyable) return void 0;
+	if (item.copyValue !== void 0) return item.copyValue;
+	return isText(item.value) && !isEmpty(item.value) ? String(item.value) : void 0;
+};
+/** Labelled values in a `<dl>`: labels aligned in one column, or above their values. */
+var DescriptionList = forwardRef(function DescriptionList({ items, size = "MEDIUM", orientation = Orientation.HORIZONTAL, columns = 1, id, className, style, ...rest }, ref) {
+	const textSize = DESCRIPTION_LIST_SIZE_TO_TEXT_SIZE_MAP[size];
+	const hasCopy = items.some((item) => item.isCopyable === true);
+	const entries = items.map((item, position) => ({
+		item,
+		position
+	}));
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className: cx(DESCRIPTION_LIST_ORIENTATION_TO_CSS_MAP[orientation], DESCRIPTION_LIST_COLUMNS_TO_CSS_MAP[columns], hasCopy && DESCRIPTION_LIST_SIZE_TO_ROW_CSS_MAP[size], className),
+		style,
+		children: entries.map(({ item, position }) => {
+			const copyText = getCopyText(item);
+			return /* @__PURE__ */ jsxs(Item, { children: [/* @__PURE__ */ jsx(Term, { children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: textSize,
+				variant: TextVariant.SECONDARY,
+				children: item.label
+			}) }), /* @__PURE__ */ jsxs(Details, { children: [isEmpty(item.value) ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: textSize,
+				variant: TextVariant.TERTIARY,
+				children: "—"
+			}) : isText(item.value) ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: textSize,
+				family: item.family ?? FontFamily.SANS,
+				isSelectable: true,
+				children: String(item.value)
+			}) : /* @__PURE__ */ jsx(Text, {
+				as: "div",
+				size: textSize,
+				className: NODE_VALUE_CSS,
+				children: item.value
+			}), copyText !== void 0 && /* @__PURE__ */ jsx(CopyButton, {
+				value: copyText,
+				ariaLabel: `Copy ${item.label}`,
+				size: DESCRIPTION_LIST_SIZE_TO_BUTTON_SIZE_MAP[size],
+				variant: ButtonVariant.TERTIARY
+			})] })] }, position);
+		})
+	});
+});
+DescriptionList.displayName = "DescriptionList";
+//#endregion
+export { DescriptionListSize, DescriptionList as default };

package/dist/menu/ContextMenu.d.ts

@@ -0,0 +1,64 @@
+/**
+ * A `Menu` opened by right-clicking a region (or pressing Shift+F10 or the ContextMenu key while
+ * focus is in it), at the pointer, in place of the browser's own context menu. It takes the same
+ * rows as `Menu` (`MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuGroup`,
+ * `MenuSeparator`, imported from `menu/Menu`) and has the same keyboard model, sizes and surfaces.
+ *
+ * A preset: `MenuRoot` with Popover's `CONTEXT_MENU` trigger, no search and `BOTTOM_START` from
+ * the pointer. It adds no behavior and no styles of its own, and takes Menu's `MenuSize` and
+ * `MenuVariant` (import them from `menu/Menu`).
+ *
+ * Its commands are shortcuts: each one must also be reachable another way (a toolbar, a row's
+ * `Menu` button), because touch and keyboard users may never open a context menu.
+ *
+ * SSR: closed by default, only the region renders on the server. Nothing at module scope.
+ */
+import { type AriaAttributes, type CSSProperties, type ReactElement, type ReactNode } from "react";
+import { type MenuSize, type MenuVariant } from "./Menu.js";
+export interface ContextMenuProps extends AriaAttributes {
+    /**
+     * The region that is right-clicked: one element that forwards its `ref` and spreads props to a
+     * DOM element. ContextMenu clones it and does not wrap it. Keyboard users open the menu with
+     * Shift+F10 or the ContextMenu key while focus is on it or inside it.
+     */
+    trigger: ReactElement;
+    /** The rows: `MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuGroup`, `MenuSeparator` (from `menu/Menu`). */
+    children?: ReactNode;
+    /**
+     * Row rung: 24 or 32px rows, as on Menu.
+     * @default MenuSize.MEDIUM
+     */
+    size?: MenuSize;
+    /**
+     * Panel fill (surface step), as on Menu.
+     * @default MenuVariant.BASE
+     */
+    variant?: MenuVariant;
+    /** Controlled open state. When set, ContextMenu calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled. It opens anchored to the region's box (there is no pointer position yet).
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with the requested open state on right-click, the keyboard context-menu keys, a selection, Escape, outside press and Tab. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Never opens: right-click shows the browser's own context menu. The region renders exactly as when enabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /** Accessible name of the menu ("File actions"). Required, because a region is not a usable name. */
+    ariaLabel: string;
+    /** DOM id on the panel. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the panel. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the panel. */
+    className?: string;
+    /** Inline style on the panel; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A Menu opened by right-click (or Shift+F10 / the ContextMenu key) on a region, at the pointer. */
+declare const ContextMenu: import("react").ForwardRefExoticComponent<ContextMenuProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ContextMenu;

package/dist/menu/ContextMenu.js

@@ -0,0 +1,34 @@
+import { Placement } from "../theme/enums.js";
+import { PopoverTrigger } from "../overlays/Popover.js";
+import { MenuRoot } from "./Menu.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/menu/ContextMenu.tsx
+/**
+* A `Menu` opened by right-clicking a region (or pressing Shift+F10 or the ContextMenu key while
+* focus is in it), at the pointer, in place of the browser's own context menu. It takes the same
+* rows as `Menu` (`MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuGroup`,
+* `MenuSeparator`, imported from `menu/Menu`) and has the same keyboard model, sizes and surfaces.
+*
+* A preset: `MenuRoot` with Popover's `CONTEXT_MENU` trigger, no search and `BOTTOM_START` from
+* the pointer. It adds no behavior and no styles of its own, and takes Menu's `MenuSize` and
+* `MenuVariant` (import them from `menu/Menu`).
+*
+* Its commands are shortcuts: each one must also be reachable another way (a toolbar, a row's
+* `Menu` button), because touch and keyboard users may never open a context menu.
+*
+* SSR: closed by default, only the region renders on the server. Nothing at module scope.
+*/
+/** A Menu opened by right-click (or Shift+F10 / the ContextMenu key) on a region, at the pointer. */
+var ContextMenu = forwardRef(function ContextMenu(props, ref) {
+	return /* @__PURE__ */ jsx(MenuRoot, {
+		...props,
+		ref,
+		popoverTrigger: PopoverTrigger.CONTEXT_MENU,
+		placement: Placement.BOTTOM_START,
+		isSearchable: false
+	});
+});
+ContextMenu.displayName = "ContextMenu";
+//#endregion
+export { ContextMenu as default };