@parallelworks/ui 0.43.0 → 0.44.0

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parallelworks/ui",
-  "version": "0.43.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": {