@parallelworks/ui 0.41.0 → 0.43.0

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,23 @@
+import { type MenuEntry, type MenuSearch } from './MenuEntries.js';
+/** Where a menu opens: under an element, such as the button that opened it, or
+ *  at a pointer event's point, which then moves with the element it landed on. */
+export type MenuAnchor = Element | {
+    clientX: number;
+    clientY: number;
+    currentTarget?: EventTarget | null;
+};
+export interface OpenMenuOptions {
+    search?: MenuSearch | undefined;
+    /** Called once the menu closes, or another menu replaces it. */
+    onClose?: (() => void) | undefined;
+}
+export type OpenMenu = (at: MenuAnchor, items: MenuEntry[], options?: OpenMenuOptions) => void;
+/**
+ * One menu that any number of rows, buttons or a canvas open with their own
+ * items, so a long list holds a single menu rather than one per row. Render
+ * `contextMenu` once.
+ */
+export declare function useContextMenu(): {
+    openMenu: OpenMenu;
+    contextMenu: import("react").JSX.Element | null;
+};

package/dist/components/ContextMenu.js

@@ -0,0 +1,89 @@
+import { MenuPopup } from "./Menu.js";
+import { MenuEntries, MenuFilter } from "./MenuEntries.js";
+import { Menu } from "@base-ui/react/menu";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+//#region src/components/ContextMenu.tsx
+function pointRect(x, y) {
+	return {
+		x,
+		y,
+		left: x,
+		top: y,
+		right: x,
+		bottom: y,
+		width: 0,
+		height: 0
+	};
+}
+function toAnchor(at) {
+	if (at instanceof Element) return at;
+	const { clientX, clientY } = at;
+	const on = at.currentTarget instanceof Element ? at.currentTarget : null;
+	if (!on) return { getBoundingClientRect: () => pointRect(clientX, clientY) };
+	const start = on.getBoundingClientRect();
+	const dx = clientX - start.left;
+	const dy = clientY - start.top;
+	return {
+		contextElement: on,
+		getBoundingClientRect: () => {
+			const now = on.getBoundingClientRect();
+			return pointRect(now.left + dx, now.top + dy);
+		}
+	};
+}
+/**
+* One menu that any number of rows, buttons or a canvas open with their own
+* items, so a long list holds a single menu rather than one per row. Render
+* `contextMenu` once.
+*/
+function useContextMenu() {
+	const [opened, setOpened] = useState(null);
+	const [open, setOpen] = useState(false);
+	const owner = useRef(null);
+	const release = useCallback(() => {
+		const was = owner.current;
+		owner.current = null;
+		was?.onClose?.();
+	}, []);
+	const openMenu = useCallback((at, items, options) => {
+		if (items.length === 0) return;
+		release();
+		const next = {
+			...options,
+			anchor: toAnchor(at),
+			items
+		};
+		owner.current = next;
+		setOpened(next);
+		setOpen(true);
+	}, [release]);
+	const onOpenChange = useCallback((next) => {
+		if (!next) setOpen(false);
+	}, []);
+	const onOpenChangeComplete = useCallback((next) => {
+		if (!next) release();
+	}, [release]);
+	return {
+		openMenu,
+		contextMenu: opened && /* @__PURE__ */ jsx(MenuFilter, {
+			search: opened.search,
+			children: (query) => /* @__PURE__ */ jsx(Menu.Root, {
+				open,
+				onOpenChange,
+				onOpenChangeComplete,
+				modal: false,
+				children: /* @__PURE__ */ jsx(MenuPopup, {
+					anchor: opened.anchor,
+					children: /* @__PURE__ */ jsx(MenuEntries, {
+						entries: opened.items,
+						search: opened.search,
+						query
+					})
+				})
+			})
+		}, opened.search ? "search" : "plain")
+	};
+}
+//#endregion
+export { useContextMenu };

package/dist/components/CopyToClipboard.js

@@ -1,11 +1,11 @@
-import { useNotify, useStrings } from "./Provider.js";
 import { FaCheck } from "../icons/fa/FaCheck.js";
 import { FaEye } from "../icons/fa/FaEye.js";
 import { FaEyeSlash } from "../icons/fa/FaEyeSlash.js";
 import { FiCopy } from "../icons/fi/FiCopy.js";
 import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { useState } from "react";
+import { useNotify, useStrings } from "./Provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 //#region src/components/CopyToClipboard.tsx
 function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
 	const notify = useNotify();

package/dist/components/CreateModal.d.ts

@@ -1,12 +1,13 @@
 import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
-import { type HeaderAddMenuItem } from './AddMenu.js';
+import { type ComboboxItems } from './comboboxItems.js';
+import type { MenuEntry } from './MenuEntries.js';
 interface CreateModalProps {
     open: boolean;
     onClose: () => void;
     typeIcon?: ReactNode;
     typeLabel: string;
     /** Makes the type chip a dropdown to switch between sibling form types. */
-    typeMenu?: HeaderAddMenuItem[] | undefined;
+    typeMenu?: MenuEntry[] | undefined;
     namePlaceholder: string;
     hideName?: boolean;
     initialName?: string | undefined;
@@ -37,69 +38,49 @@ 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;
 }): import("react").JSX.Element;
-/** Labeled input row with typeahead suggestions; free-form values allowed. */
-export declare function CreateModalAutocompleteField({ label, tooltip, value, onChange, options, placeholder, }: {
+/** Labeled input with suggestions; any text is allowed. */
+export declare function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, items, placeholder, }: {
     label: string;
     /** Help text surfaced via an info icon next to the label. */
     tooltip?: string;
     value: string;
-    onChange: (value: string) => void;
-    options: string[];
+    onValueChange: (value: string) => void;
+    /** Suggestions, filtered by what's typed. */
+    items: string[];
     placeholder?: string;
 }): import("react").JSX.Element;
 /** Compact property pill with an on/off switch. */
-export declare function CreateModalSwitch({ label, checked, onChange, tooltip, }: {
+export declare function CreateModalSwitch({ label, checked, onCheckedChange, tooltip, }: {
     label: string;
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    onCheckedChange: (checked: boolean) => void;
     /** Help text surfaced on hover (explains what the toggle does). */
     tooltip?: string;
 }): import("react").JSX.Element;
-export interface CreateModalSelectOption {
-    label: string;
-    value: string;
-    /** Small leading icon (e.g. the resource's provider icon). */
-    icon?: ReactNode;
-    /** Category header to group this option under in the dropdown. */
-    group?: string;
-    /** Hidden behind the group's toggle row until the group is expanded. */
-    collapsible?: boolean;
-    /** Always listed regardless of the typed filter (e.g. a trailing "Create new…" action). */
-    pinned?: boolean;
-    /** Muted second line under the label (e.g. the allocation a group bills to). */
-    description?: string;
-    /** Listed but not selectable (e.g. a group whose allocation is exhausted). */
-    disabled?: boolean;
-}
-/** Callers gating collapse on list size must use this same threshold so
- * collapsed rows always come with a filter to find them. */
-export declare const CREATE_MODAL_SELECT_FILTER_THRESHOLD = 8;
-/** Compact property pill with a dropdown of options. Options may carry leading
- * icons and group headers (e.g. Clusters vs Kubernetes). */
-export declare function CreateModalSelect({ label, icon, value, options, onChange, disabled, disabledHint, tooltip, collapsedLabel, }: {
+/** Compact property pill that picks one value from a searchable list. Items may carry
+ * icons, descriptions and group headings (e.g. Clusters vs Kubernetes). */
+export declare function CreateModalSelect({ label, icon, value, items, onValueChange, disabled, disabledReason, tooltip, }: {
     label: string;
     icon?: ReactNode;
     value?: string | undefined;
-    options: CreateModalSelectOption[];
-    onChange: (value: string) => void;
+    items: ComboboxItems<string>;
+    onValueChange: (value: string) => void;
     /** Gray the pill out (e.g. while a prerequisite pill is unset). */
     disabled?: boolean;
-    /** Shown as the pill's tooltip while disabled (e.g. the prerequisite). */
-    disabledHint?: string | undefined;
+    /** Why the pill is disabled, shown in place of the tooltip (e.g. the prerequisite). */
+    disabledReason?: string | undefined;
     /** Help text surfaced on hover (explains what the pill selects). */
     tooltip?: string;
-    /** Label for the toggle row hiding a group's collapsible options. */
-    collapsedLabel?: (count: number) => string;
 }): import("react").JSX.Element;
 export {};