@parallelworks/ui 0.42.0 → 0.44.0

package/dist/components/Combobox.d.ts

@@ -1,22 +1,6 @@
 import { type ReactElement, type ReactNode } from 'react';
-export interface ComboboxItem<Value = string> {
-    value: Value;
-    label: string;
-    description?: string | undefined;
-    icon?: ReactNode;
-    disabled?: boolean | undefined;
-}
-export interface ComboboxGroup<Value = string> {
-    label: string;
-    /** Leads the heading, such as a provider's logo. */
-    icon?: ReactNode;
-    /** Follows the label, such as who shared the group or a status like "Not responding". */
-    description?: string | undefined;
-    /** Empty for a group that only reports a status; a search finds it by its heading. */
-    items: readonly (ComboboxItem<Value> | (Value & string))[];
-}
-/** A flat list, or groups under headings. A bare string is an item labelled by its value. */
-export type ComboboxItems<Value = string> = readonly (ComboboxItem<Value> | (Value & string))[] | readonly ComboboxGroup<Value>[];
+import { type ComboboxItems } from './comboboxItems.js';
+export type { ComboboxGroup, ComboboxItem, ComboboxItems, ComboboxLeaf, } from './comboboxItems.js';
 interface FieldProps {
     id?: string | undefined;
     placeholder?: string | undefined;
@@ -63,4 +47,3 @@ export interface AutocompleteProps extends FieldProps {
 export declare function Combobox<Value = string>(props: ComboboxProps<Value>): import("react").JSX.Element;
 /** A free-text field that suggests values as you type. */
 export declare function Autocomplete({ items, value, defaultValue, onValueChange, className, placeholder, disabled, required, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }: AutocompleteProps): import("react").JSX.Element;
-export {};

package/dist/components/Combobox.js

@@ -5,6 +5,7 @@ import { panelClassName, panelItemClassName, portalContainer, positionerClassNam
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { useQueryMatch } from "./search.js";
+import { isComboboxGroup } from "./comboboxItems.js";
 import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
@@ -13,9 +14,6 @@ import { Autocomplete } from "@base-ui/react/autocomplete";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { dequal } from "dequal";
 //#region src/components/Combobox.tsx
-function isGroup(item) {
-	return typeof item === "object" && "items" in item;
-}
 function toEntry(item, group) {
 	const entry = typeof item === "string" ? {
 		value: item,
@@ -26,29 +24,43 @@ function toEntry(item, group) {
 		group
 	};
 }
-/** Base UI takes either flat items or groups, and filters and navigates by the leaf items. */
+/** Base UI takes either flat items or groups, and filters and navigates by the leaf items, so
+*  items listed between groups gather into headless groups where they sit. */
 function useEntries(items) {
 	return useMemo(() => {
-		const [first] = items;
-		if (first !== void 0 && isGroup(first)) {
-			const groups = items.map((g, order) => ({
-				label: g.label,
-				icon: g.icon,
-				description: g.description,
-				items: g.items.map((item) => toEntry(item, g.label)),
-				order
-			}));
+		if (!items.some(isComboboxGroup)) {
+			const flat = items.map((item) => toEntry(item));
 			return {
-				items: groups,
-				flat: groups.flatMap((g) => g.items),
-				statusGroups: groups.filter((g) => g.items.length === 0)
+				items: flat,
+				flat,
+				statusGroups: []
 			};
 		}
-		const flat = items.map((item) => toEntry(item));
+		const groups = [];
+		for (const item of items) {
+			if (isComboboxGroup(item)) {
+				groups.push({
+					label: item.label,
+					icon: item.icon,
+					description: item.description,
+					items: item.items.map((leaf) => toEntry(leaf, item.label)),
+					order: groups.length
+				});
+				continue;
+			}
+			const last = groups.at(-1);
+			if (last?.headless) last.items.push(toEntry(item));
+			else groups.push({
+				label: "",
+				items: [toEntry(item)],
+				order: groups.length,
+				headless: true
+			});
+		}
 		return {
-			items: flat,
-			flat,
-			statusGroups: []
+			items: groups,
+			flat: groups.flatMap((g) => g.items),
+			statusGroups: groups.filter((g) => g.items.length === 0)
 		};
 	}, [items]);
 }
@@ -294,7 +306,7 @@ function toRows(filtered, statusGroups) {
 	const rowOfItem = [];
 	for (const node of nodes) {
 		const leaves = "items" in node ? node.items : [node];
-		if ("items" in node) rows.push({
+		if ("items" in node && !node.headless) rows.push({
 			kind: "group",
 			group: node
 		});

package/dist/components/CreateModal.d.ts

@@ -1,5 +1,5 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
-import { type ComboboxItems } from './Combobox.js';
+import { type ComboboxItems } from './comboboxItems.js';
 import type { MenuEntry } from './MenuEntries.js';
 interface CreateModalProps {
     open: boolean;
@@ -38,13 +38,13 @@ interface CreateModalProps {
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
 export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, onSubmit, }: CreateModalProps): import("react").JSX.Element;
 /** Labeled single-line input row for the dialog's extra fields. */
-export declare function CreateModalField({ label, tooltip, ...props }: InputHTMLAttributes<HTMLInputElement> & {
+export declare function CreateModalField({ label, tooltip, id, ...props }: InputHTMLAttributes<HTMLInputElement> & {
     label: string;
     /** Help text surfaced via an info icon next to the label. */
     tooltip?: string | undefined;
 }): import("react").JSX.Element;
 /** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
-export declare function CreateModalTextarea({ label, tooltip, rows, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
+export declare function CreateModalTextarea({ label, tooltip, rows, id, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
     label: string;
     /** Help text surfaced via an info icon next to the label. */
     tooltip?: string | undefined;

package/dist/components/CreateModal.js

@@ -5,6 +5,7 @@ import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { ActionMenu } from "./ActionMenu.js";
+import { comboboxLeaves } from "./comboboxItems.js";
 import { Autocomplete, Combobox } from "./Combobox.js";
 import { ghostButtonClasses } from "./ghostButton.js";
 import { Modal } from "./Modal.js";
@@ -199,34 +200,53 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 }
 var fieldInputClasses = "w-full h-8 px-2.5 rounded-md border border-(--theme-border) bg-(--theme-input-bg) shadow-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) transition-colors focus:outline-none focus:ring-0 focus:border-(--theme-element)";
 var fieldLabelClasses = "block mb-1 text-xs font-medium text-(--theme-muted-text-color)";
+/** A field's label, with its help beside it rather than inside the label, so
+*  the label names the field and not the help button. */
+function FieldLabel({ id, label, tooltip }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx(fieldLabelClasses, "flex items-center gap-1"),
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor: id,
+			children: label
+		}), tooltip && /* @__PURE__ */ jsx(InfoTip, { text: tooltip })]
+	});
+}
 /** Labeled single-line input row for the dialog's extra fields. */
-function CreateModalField({ label, tooltip, ...props }) {
-	return /* @__PURE__ */ jsxs("label", {
-		className: "block mb-3",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: clsx(fieldLabelClasses, "flex items-center gap-1"),
-			children: [label, /* @__PURE__ */ jsx(InfoTip, { text: tooltip ?? "" })]
+function CreateModalField({ label, tooltip, id, ...props }) {
+	const fallbackId = useId();
+	const fieldId = id ?? fallbackId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			id: fieldId,
+			label,
+			tooltip
 		}), /* @__PURE__ */ jsx("input", {
 			type: "text",
 			autoComplete: "off",
 			"data-1p-ignore": true,
 			...props,
+			id: fieldId,
 			className: fieldInputClasses
 		})]
 	});
 }
 /** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
-function CreateModalTextarea({ label, tooltip, rows = 4, ...props }) {
-	return /* @__PURE__ */ jsxs("label", {
-		className: "block mb-3",
-		children: [/* @__PURE__ */ jsxs("span", {
-			className: clsx(fieldLabelClasses, "flex items-center gap-1"),
-			children: [label, /* @__PURE__ */ jsx(InfoTip, { text: tooltip ?? "" })]
+function CreateModalTextarea({ label, tooltip, rows = 4, id, ...props }) {
+	const fallbackId = useId();
+	const fieldId = id ?? fallbackId;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mb-3",
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			id: fieldId,
+			label,
+			tooltip
 		}), /* @__PURE__ */ jsx("textarea", {
 			autoComplete: "off",
 			"data-1p-ignore": true,
 			rows,
 			...props,
+			id: fieldId,
 			className: clsx(fieldInputClasses, "h-auto py-2 font-mono text-xs leading-relaxed resize-y")
 		})]
 	});
@@ -236,12 +256,10 @@ function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, it
 	const id = useId();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mb-3",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(fieldLabelClasses, "flex items-center gap-1"),
-			children: [/* @__PURE__ */ jsx("label", {
-				htmlFor: id,
-				children: label
-			}), tooltip && /* @__PURE__ */ jsx(InfoTip, { text: tooltip })]
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			id,
+			label,
+			tooltip
 		}), /* @__PURE__ */ jsx(Autocomplete, {
 			id,
 			items,
@@ -270,7 +288,10 @@ function CreateModalSwitch({ label, checked, onCheckedChange, tooltip }) {
 * icons, descriptions and group headings (e.g. Clusters vs Kubernetes). */
 function CreateModalSelect({ label, icon, value, items, onValueChange, disabled = false, disabledReason, tooltip }) {
 	const t = useStrings().modal;
-	const selected = leafItems(items).find((item) => item.value === value);
+	const selected = comboboxLeaves(items).map((item) => typeof item === "string" ? {
+		value: item,
+		label: item
+	} : item).find((item) => item.value === value);
 	const selectedLabel = selected?.label ?? (value || void 0);
 	const pillContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		selected?.icon ?? icon,
@@ -307,15 +328,5 @@ function CreateModalSelect({ label, icon, value, items, onValueChange, disabled
 		})
 	});
 }
-function leafItems(items) {
-	return items.flatMap((node) => {
-		if (typeof node === "string") return [{
-			value: node,
-			label: node
-		}];
-		if ("items" in node) return leafItems(node.items);
-		return [node];
-	});
-}
 //#endregion
 export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };

package/dist/components/Select.d.ts

@@ -21,7 +21,10 @@ export type SelectProps<Value, Multiple extends boolean | undefined = false> = O
     trigger?: ReactElement | undefined;
     /** A hint on the trigger button. */
     triggerTooltip?: ReactNode;
+    /** The item a person is on as they move through the open list, then undefined once it
+     *  closes, such as to preview a theme before it is chosen. */
+    onItemHighlighted?: ((value: Value | undefined) => void) | undefined;
 };
 /** Picks one value, or several with `multiple`, from a short list. Use
  *  Combobox when the list is long enough to need filtering. */
-export declare function Select<Value, Multiple extends boolean | undefined = false>({ items, placeholder, className, 'aria-label': ariaLabel, 'aria-describedby': describedBy, 'aria-invalid': invalid, trigger, triggerTooltip, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;
+export declare function Select<Value, Multiple extends boolean | undefined = false>({ items, placeholder, className, 'aria-label': ariaLabel, 'aria-describedby': describedBy, 'aria-invalid': invalid, trigger, triggerTooltip, onItemHighlighted, ...rootProps }: SelectProps<Value, Multiple>): import("react").JSX.Element;

package/dist/components/Select.js

@@ -9,7 +9,7 @@ import { Select } from "@base-ui/react/select";
 var triggerClassName = clsx("flex w-full items-center justify-between gap-2 rounded-md border border-(--theme-border) bg-(--theme-input-bg) py-2 pl-3 pr-2 text-left text-sm text-(--theme-app) cursor-pointer outline-none", "focus-visible:border-(--theme-element) focus-visible:ring-1 focus-visible:ring-(--theme-element)", "aria-invalid:border-(--theme-error) data-disabled:cursor-not-allowed data-disabled:bg-(--theme-input-disabled-bg) data-disabled:text-(--theme-input-disabled-text)");
 /** Picks one value, or several with `multiple`, from a short list. Use
 *  Combobox when the list is long enough to need filtering. */
-function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": invalid, trigger, triggerTooltip, ...rootProps }) {
+function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-invalid": invalid, trigger, triggerTooltip, onItemHighlighted, ...rootProps }) {
 	const labelOf = (value) => items.find((item) => Object.is(item.value, value))?.label;
 	const triggerProps = {
 		"aria-label": ariaLabel,
@@ -19,6 +19,10 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 	return /* @__PURE__ */ jsxs(Select.Root, {
 		items,
 		...rootProps,
+		onOpenChange: (open, details) => {
+			rootProps.onOpenChange?.(open, details);
+			if (!open) onItemHighlighted?.(void 0);
+		},
 		children: [trigger ? /* @__PURE__ */ jsx(Tooltip, {
 			content: triggerTooltip,
 			children: /* @__PURE__ */ jsx(Select.Trigger, {
@@ -50,6 +54,7 @@ function Select$1({ items, placeholder, className, "aria-label": ariaLabel, "ari
 							value: item.value,
 							disabled: item.disabled,
 							className: clsx("grid grid-cols-[1rem_1fr]", panelItemClassName),
+							onFocus: onItemHighlighted && (() => onItemHighlighted(item.value)),
 							children: [
 								/* @__PURE__ */ jsx(Select.ItemIndicator, {
 									className: "col-start-1",

package/dist/components/comboboxItems.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface ComboboxItem<Value = string> {
+    value: Value;
+    label: string;
+    description?: string | undefined;
+    icon?: ReactNode;
+    disabled?: boolean | undefined;
+}
+export interface ComboboxGroup<Value = string> {
+    label: string;
+    /** Leads the heading, such as a provider's logo. */
+    icon?: ReactNode;
+    /** Follows the label, such as who shared the group or a status like "Not responding". */
+    description?: string | undefined;
+    /** Empty for a group that only reports a status; a search finds it by its heading. */
+    items: readonly ComboboxLeaf<Value>[];
+}
+/** One item: an option, or a bare string labelled by its value. */
+export type ComboboxLeaf<Value = string> = ComboboxItem<Value> | (Value & string);
+/** Items, groups under headings, or both: items between groups list where they sit, without a heading. */
+export type ComboboxItems<Value = string> = readonly (ComboboxLeaf<Value> | ComboboxGroup<Value>)[];
+export declare function isComboboxGroup<Value>(item: ComboboxLeaf<Value> | ComboboxGroup<Value>): item is ComboboxGroup<Value>;
+/** Every item, out of their groups. */
+export declare function comboboxLeaves<Value>(items: ComboboxItems<Value>): ComboboxLeaf<Value>[];

package/dist/components/comboboxItems.js

@@ -0,0 +1,10 @@
+//#region src/components/comboboxItems.ts
+function isComboboxGroup(item) {
+	return typeof item === "object" && "items" in item;
+}
+/** Every item, out of their groups. */
+function comboboxLeaves(items) {
+	return items.flatMap((item) => isComboboxGroup(item) ? item.items : [item]);
+}
+//#endregion
+export { comboboxLeaves, isComboboxGroup };

package/dist/form/Fields/DropdownField.js

@@ -1,8 +1,8 @@
 import { Autocomplete, Combobox } from "../../components/Combobox.js";
+import { toFieldItems } from "../utils/fieldItems.js";
 import { FieldWrapper } from "../FieldWrapper.js";
 import { useChoiceField } from "../useChoiceField.js";
 import { useDependentOptions } from "../utils/dependentOptions.js";
-import { toFieldItems } from "../utils/fieldItems.js";
 import { getPlaceholder } from "../utils/getPlaceholder.js";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";

package/dist/form/Fields/MultiDropdownField.js

@@ -1,8 +1,8 @@
 import { Combobox } from "../../components/Combobox.js";
+import { toFieldItems } from "../utils/fieldItems.js";
 import { FieldWrapper } from "../FieldWrapper.js";
 import { useFieldValue } from "../useFieldValue.js";
 import { useDependentOptions } from "../utils/dependentOptions.js";
-import { toFieldItems } from "../utils/fieldItems.js";
 import { usePrevious } from "../usePrevious.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";

package/dist/form/lib.js

@@ -1,4 +1,5 @@
-import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
+import { findChoice, toFieldItems } from "./utils/fieldItems.js";
+import { applySecondaryField } from "./utils/secondaryField.js";
 import { copyBounds } from "./Wizard/utils.js";
 //#region src/form/lib.ts
 var EMPTY_ENTRY = {};
@@ -107,7 +108,7 @@ function initializeValues(options, srcData = {}, blankDefault) {
 		if (data[field] !== void 0) {
 			acc[field] = data[field];
 			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && Array.isArray(fieldSchema.options)) {
-				const option = findSecondaryOption(fieldSchema.options, data[field]);
+				const option = findChoice(toFieldItems(fieldSchema.options), data[field]);
 				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
 					if (!(fieldSchema.type === "storage" && Object.hasOwn(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
 				});

package/dist/form/useChoiceField.d.ts

@@ -1,8 +1,6 @@
-import type { ComboboxItem, ComboboxItems } from '../components/Combobox.js';
-/** An item that also sets other fields when chosen, through `secondaryField`. */
-export type ChoiceItem = ComboboxItem<unknown> & {
-    secondaryValue?: unknown;
-};
+import type { ComboboxItems } from '../components/Combobox.js';
+import { type ChoiceItem } from './utils/fieldItems.js';
+export type { ChoiceItem };
 /**
  * A field that picks one of `items`: its value, and the choice the person makes, which also sets the
  * fields its `secondaryField` names from the item's `secondaryValue`.

package/dist/form/useChoiceField.js

@@ -1,13 +1,10 @@
+import { itemValue, leaves } from "./utils/fieldItems.js";
 import { applySecondaryField } from "./utils/secondaryField.js";
 import { useFieldValue } from "./useFieldValue.js";
 import { useEffect, useEffectEvent, useRef } from "react";
 import { dequal } from "dequal";
 import { useFormContext } from "react-hook-form";
 //#region src/form/useChoiceField.ts
-function leaves(items) {
-	return items.flatMap((item) => typeof item === "object" && "items" in item ? item.items : [item]);
-}
-var itemValue = (item) => typeof item === "string" ? item : item.value;
 /**
 * A field that picks one of `items`: its value, and the choice the person makes, which also sets the
 * fields its `secondaryField` names from the item's `secondaryValue`.

package/dist/form/utils/fieldItems.d.ts

@@ -1,10 +1,32 @@
-import type { ComboboxItem } from '../../components/Combobox.js';
-/** A dropdown option as workflow YAML writes it. */
-export type FieldOption<Value = string> = string | {
+import type { ReactNode } from 'react';
+import { type ComboboxItem, type ComboboxItems } from '../../components/comboboxItems.js';
+/** A choice as workflow YAML writes it, or as a host's option hook builds one. */
+export interface FieldOptionItem<Value = string> {
     label: string;
     value: Value;
-    description?: string;
-    secondaryLabel?: string;
+    description?: string | undefined;
+    /** The older key for description. */
+    secondaryLabel?: string | undefined;
+    /** What choosing this sets the field's `secondaryField` to. */
+    secondaryValue?: unknown;
+    disabled?: boolean | undefined;
+    icon?: ReactNode;
+}
+/** Choices under a heading. */
+export interface FieldOptionGroup<Value = string> {
+    category?: string | undefined;
+    options: readonly (FieldOptionItem<Value> | string)[];
+}
+/** A dropdown option: a bare string is a choice labelled by its value. */
+export type FieldOption<Value = string> = string | FieldOptionItem<Value> | FieldOptionGroup<Value>;
+/** A picker item that also sets other fields when chosen, through `secondaryField`. */
+export type ChoiceItem<Value = unknown> = ComboboxItem<Value> & {
+    secondaryValue?: unknown;
 };
-/** YAML options as picker items. secondaryLabel is the older key for description. */
-export declare function toFieldItems<Value>(options: readonly FieldOption<Value>[]): (ComboboxItem<Value> | string)[];
+/** Options as picker items, groups kept where they sit. */
+export declare function toFieldItems<Value>(options: readonly FieldOption<Value>[]): ComboboxItems<Value>;
+/** Every item, groups flattened. */
+export declare const leaves: (items: ComboboxItems<unknown>) => (ChoiceItem | string)[];
+export declare const itemValue: (item: ChoiceItem | string) => unknown;
+/** The item among `items` holding `value`, with what it sets through `secondaryField`. */
+export declare function findChoice(items: ComboboxItems<unknown>, value: unknown): ChoiceItem | undefined;

package/dist/form/utils/fieldItems.js

@@ -1,11 +1,32 @@
+import { comboboxLeaves } from "../../components/comboboxItems.js";
+import { dequal } from "dequal";
 //#region src/form/utils/fieldItems.ts
-/** YAML options as picker items. secondaryLabel is the older key for description. */
+var isGroup = (option) => typeof option === "object" && "options" in option;
+function toItem(option) {
+	if (typeof option === "string") return option;
+	const { label, value, description, secondaryLabel, secondaryValue, disabled, icon } = option;
+	return {
+		label,
+		value,
+		description: description ?? secondaryLabel,
+		disabled,
+		icon,
+		...secondaryValue === void 0 ? {} : { secondaryValue }
+	};
+}
+/** Options as picker items, groups kept where they sit. */
 function toFieldItems(options) {
-	return options.map((option) => typeof option === "string" ? option : {
-		label: option.label,
-		value: option.value,
-		description: option.description ?? option.secondaryLabel
-	});
+	return options.map((option) => isGroup(option) ? {
+		label: option.category ?? "",
+		items: option.options.map(toItem)
+	} : toItem(option));
+}
+/** Every item, groups flattened. */
+var leaves = (items) => comboboxLeaves(items);
+var itemValue = (item) => typeof item === "string" ? item : item.value;
+/** The item among `items` holding `value`, with what it sets through `secondaryField`. */
+function findChoice(items, value) {
+	return leaves(items).find((item) => typeof item === "object" && dequal(item.value, value));
 }
 //#endregion
-export { toFieldItems };
+export { findChoice, itemValue, leaves, toFieldItems };

package/dist/list/rowMenu.d.ts

@@ -53,11 +53,16 @@ export type CopySubmenu = (fields: CopyFields) => MenuSubmenu;
 /** Returns a builder for the Copy submenu, labeled from the provider's strings. */
 export declare function useCopySubmenu(): CopySubmenu;
 /** Opens a row's menu under itself. Shows on the row's hover or focus, and
- *  stays while its menu is `open`, though the pointer has left the row. */
-export declare function MoreButton({ onOpen, open, visible, className, }: {
+ *  stays while its menu is `open`, though the pointer has left the row. A touch
+ *  screen has no hover, so there it always shows: the row's menu is otherwise
+ *  out of reach. */
+export declare function MoreButton({ onOpen, open, visible, label, className, }: {
     onOpen: (button: HTMLElement) => void;
     open?: boolean;
     /** Shows at rest too. */
     visible?: boolean;
+    /** Names the row the menu acts on, as "More actions for Core", for a list
+     *  of rows that would otherwise each read "More actions". */
+    label?: string | undefined;
     className?: string | undefined;
 }): import("react").JSX.Element;

package/dist/list/rowMenu.js

@@ -114,19 +114,21 @@ function useCopySubmenu() {
 	}, [t]);
 }
 /** Opens a row's menu under itself. Shows on the row's hover or focus, and
-*  stays while its menu is `open`, though the pointer has left the row. */
-function MoreButton({ onOpen, open = false, visible = open, className }) {
+*  stays while its menu is `open`, though the pointer has left the row. A touch
+*  screen has no hover, so there it always shows: the row's menu is otherwise
+*  out of reach. */
+function MoreButton({ onOpen, open = false, visible = open, label, className }) {
 	const { list: t } = useStrings();
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": t.moreActions,
+		"aria-label": label ?? t.moreActions,
 		"aria-haspopup": "menu",
 		"aria-expanded": open,
 		onClick: (e) => {
 			e.stopPropagation();
 			onOpen(e.currentTarget);
 		},
-		className: clsx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
+		className: clsx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", visible ? "opacity-100" : "opacity-0 group-hover:opacity-100 pointer-coarse:opacity-100", className),
 		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-4 w-4" })
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "description": "React UI components: a theme contract, icons, primitives, lists, forms, a job graph, a code editor, a log viewer, a file explorer and an AI chat, each on its own subpath",
   "license": "Apache-2.0",
   "repository": {