@uipath/apollo-wind 2.79.2 → 2.80.0

package/dist/components/ui/editable-text.cjs

@@ -0,0 +1,251 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    EditableText: ()=>EditableText
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_form_field_cjs_namespaceObject = require("./form-field.cjs");
+const external_tooltip_cjs_namespaceObject = require("./tooltip.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const useIsomorphicLayoutEffect = "u" < typeof window ? external_react_namespaceObject.useEffect : external_react_namespaceObject.useLayoutEffect;
+const stripNewlines = (text)=>text.replace(/\n+/g, ' ');
+const READ_CLASS = {
+    label: 'text-xs font-medium leading-4 text-foreground',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px] text-foreground',
+    sm: 'text-xs leading-4 text-foreground-muted'
+};
+const EDIT_CLASS = {
+    label: 'text-xs font-medium leading-4',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px]',
+    sm: 'text-xs leading-4'
+};
+const LINE_HEIGHT = {
+    label: 16,
+    lg: 20,
+    sm: 16
+};
+const VERTICAL_PADDING = 4;
+const CLAMP_CLASS = 'line-clamp-[var(--editable-text-lines)] whitespace-pre-line wrap-break-word';
+const INTERACTIVE_CLASS = 'rounded px-1.5 py-0.5 -mx-1.5';
+const EDITOR_SPACING_CLASS = 'rounded px-1.5 py-0.5 -ml-1.5';
+const READ_MAX_WIDTH_CLASS = 'max-w-[calc(100%+--spacing(3))]';
+const ERROR_RING_CLASS = 'ring-1 ring-error';
+function TruncationTooltip({ content, multiline, children }) {
+    const triggerRef = external_react_namespaceObject.useRef(null);
+    const setTrigger = external_react_namespaceObject.useCallback((node)=>{
+        triggerRef.current = node;
+    }, []);
+    const [open, setOpen] = external_react_namespaceObject.useState(false);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
+        delayDuration: 700,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
+            open: open,
+            onOpenChange: (next)=>{
+                const node = triggerRef.current;
+                setOpen(next && !!node && (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight));
+            },
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
+                    asChild: true,
+                    ref: setTrigger,
+                    children: children
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipPortal, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
+                        className: (0, index_cjs_namespaceObject.cn)('max-w-80 wrap-break-word', multiline && 'whitespace-pre-line'),
+                        children: content
+                    })
+                })
+            ]
+        })
+    });
+}
+function EditableText({ value, placeholder, size = 'lg', multiline, maxLines = 3, onChange, onSubmit, editing: editingProp, onEditingChange, disabled, truncationTooltip = true, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId }) {
+    const allowNewlines = true === multiline;
+    const editable = !!onChange && !!onSubmit;
+    const [editingState, setEditingState] = external_react_namespaceObject.useState(false);
+    const controlled = void 0 !== editingProp;
+    const requested = controlled ? editingProp : editingState;
+    const isEditing = requested && editable && !disabled;
+    const setEditing = external_react_namespaceObject.useCallback((next)=>{
+        if (!controlled) setEditingState(next);
+        onEditingChange?.(next);
+    }, [
+        controlled,
+        onEditingChange
+    ]);
+    const inputRef = external_react_namespaceObject.useRef(null);
+    const openedWith = external_react_namespaceObject.useRef(value);
+    const latestValue = external_react_namespaceObject.useRef(value);
+    latestValue.current = value;
+    const errorId = `editable-text-${external_react_namespaceObject.useId().replace(/:/g, '')}-error`;
+    const hasError = !!error;
+    const describedBy = hasError ? errorId : void 0;
+    useIsomorphicLayoutEffect(()=>{
+        if (disabled && requested) setEditing(false);
+    }, [
+        disabled,
+        requested,
+        setEditing
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!isEditing) return;
+        openedWith.current = latestValue.current;
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, [
+        isEditing
+    ]);
+    const cancel = external_react_namespaceObject.useCallback(()=>{
+        setEditing(false);
+        if (openedWith.current !== value) onChange?.(openedWith.current);
+    }, [
+        value,
+        onChange,
+        setEditing
+    ]);
+    const commit = external_react_namespaceObject.useCallback(()=>{
+        const next = value.trim();
+        setEditing(false);
+        if (next !== value) onChange?.(next);
+        if (next !== openedWith.current) onSubmit?.(next);
+    }, [
+        value,
+        onChange,
+        onSubmit,
+        setEditing
+    ]);
+    const handleKeyDown = external_react_namespaceObject.useCallback((e)=>{
+        if ('Enter' !== e.key || allowNewlines && e.shiftKey) {
+            if ('Escape' === e.key) {
+                e.preventDefault();
+                cancel();
+            }
+        } else {
+            e.preventDefault();
+            commit();
+        }
+        e.stopPropagation();
+    }, [
+        commit,
+        cancel,
+        allowNewlines
+    ]);
+    const editorMaxHeight = multiline ? {
+        maxHeight: maxLines * LINE_HEIGHT[size] + VERTICAL_PADDING
+    } : void 0;
+    const readClampStyle = multiline ? {
+        '--editable-text-lines': maxLines
+    } : void 0;
+    const readClampClass = multiline ? CLAMP_CLASS : 'block truncate';
+    const withTooltip = (trigger)=>truncationTooltip && (value || placeholder) ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(TruncationTooltip, {
+            content: value || placeholder,
+            multiline: !!multiline,
+            children: trigger
+        }) : trigger;
+    const message = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_cjs_namespaceObject.FormFieldError, {
+        id: errorId,
+        "data-slot": "editable-text-error",
+        className: "-ml-1 mt-1",
+        children: error
+    });
+    if (!editable) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-describedby": describedBy,
+                style: readClampStyle,
+                className: (0, index_cjs_namespaceObject.cn)(readClampClass, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && (0, index_cjs_namespaceObject.cn)(INTERACTIVE_CLASS, ERROR_RING_CLASS), className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+    if (isEditing) {
+        const sharedProps = {
+            'data-slot': 'editable-text-input',
+            'data-testid': dataTestId ? `${dataTestId}-input` : void 0,
+            value,
+            placeholder,
+            'aria-label': ariaLabel,
+            'aria-describedby': describedBy,
+            'aria-errormessage': hasError ? errorId : void 0,
+            'aria-invalid': hasError || void 0,
+            onKeyDown: handleKeyDown,
+            onBlur: commit,
+            className: (0, index_cjs_namespaceObject.cn)('w-full min-w-0 border-none bg-surface-overlay text-foreground outline-none ring-1', hasError ? 'ring-error' : 'ring-brand', EDITOR_SPACING_CLASS, EDIT_CLASS[size], className)
+        };
+        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+            children: [
+                multiline ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    rows: 1,
+                    style: editorMaxHeight,
+                    className: (0, index_cjs_namespaceObject.cn)(sharedProps.className, 'field-sizing-content max-w-full resize-none overflow-y-auto wrap-break-word'),
+                    onChange: (e)=>onChange?.(allowNewlines ? e.target.value : stripNewlines(e.target.value))
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    autoComplete: "off",
+                    onChange: (e)=>onChange?.(e.target.value)
+                }),
+                message
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-label": ariaLabel && `${ariaLabel}: ${value || placeholder || ''}`,
+                "aria-describedby": describedBy,
+                "aria-errormessage": hasError ? errorId : void 0,
+                "aria-invalid": hasError || void 0,
+                "aria-disabled": disabled || void 0,
+                onClick: ()=>{
+                    if (disabled) return;
+                    setEditing(true);
+                },
+                style: readClampStyle,
+                className: (0, index_cjs_namespaceObject.cn)('cursor-text border-none bg-transparent text-left transition hover:bg-surface-overlay', READ_MAX_WIDTH_CLASS, 'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent', readClampClass, INTERACTIVE_CLASS, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && ERROR_RING_CLASS, className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+}
+exports.EditableText = __webpack_exports__.EditableText;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EditableText"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/editable-text.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+/** `label` matches a field label; `sm` and `lg` a secondary line and a title. */
+export type EditableTextSize = 'label' | 'sm' | 'lg';
+export interface EditableTextProps {
+    /** The text on screen, in both modes: this is a controlled field, so an edit shows up only once `onChange` has been applied here. */
+    value: string;
+    placeholder?: string;
+    /** Defaults to `lg`. */
+    size?: EditableTextSize;
+    /**
+     * Text layout. `true` accepts newlines (Shift+Enter); `'wrap'` wraps across lines but keeps the
+     * value single-line, so every Enter commits and pasted newlines collapse. Enter always commits.
+     */
+    multiline?: boolean | 'wrap';
+    /** Visible-line ceiling when `multiline`. The editor scrolls past it. Defaults to 3. */
+    maxLines?: number;
+    /** Fires on every keystroke with the text as typed, like any controlled input. Pair with `onSubmit`: both are required to make the text editable, and `value` has to follow this callback or the field won't accept input. Escape reports the text held when the editor opened, so the owner reverts through this same path. */
+    onChange?: (next: string) => void;
+    /** Fires on Enter or blur with the trimmed `value`, and only when it differs from the text the editor opened with, so a click in and straight back out is silent. The owner decides whether to persist it. */
+    onSubmit?: (next: string) => void;
+    /**
+     * Whether the editor is open, for an owner that holds that state: it opens focused with the text
+     * selected, and asks to close through `onEditingChange`. Omit to let the component hold it.
+     */
+    editing?: boolean;
+    /**
+     * Called when the editor asks to open (a click) or close (commit, Escape, or going disabled).
+     * Required alongside `editing` for the editor to open or close at all.
+     */
+    onEditingChange?: (editing: boolean) => void;
+    /** Locks the text as-is: no edit mode, no commit. Ignored for static text. */
+    disabled?: boolean;
+    /** Field-specific feedback rendered immediately below the text. */
+    error?: React.ReactNode;
+    /** Show the full text in a tooltip on hover when it is cut off. On by default. */
+    truncationTooltip?: boolean;
+    /** Names the editor and its click target. Unused for static text. */
+    'aria-label'?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * Click-to-edit text, such as a name or title: enters on click, submits on Enter or blur, reverts
+ * on Escape. Controlled: the owner holds the text and feeds it back through `value`, which lets it
+ * validate what is being typed and render the message through `error`. Renders static text unless
+ * both `onChange` and `onSubmit` are given. Text that is cut off shows in full in a tooltip.
+ */
+export declare function EditableText({ value, placeholder, size, multiline, maxLines, onChange, onSubmit, editing: editingProp, onEditingChange, disabled, truncationTooltip, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId, }: EditableTextProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/editable-text.js

@@ -0,0 +1,217 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { FormFieldError } from "./form-field.js";
+import { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger } from "./tooltip.js";
+import { cn } from "../../lib/index.js";
+const useIsomorphicLayoutEffect = "u" < typeof window ? useEffect : useLayoutEffect;
+const stripNewlines = (text)=>text.replace(/\n+/g, ' ');
+const READ_CLASS = {
+    label: 'text-xs font-medium leading-4 text-foreground',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px] text-foreground',
+    sm: 'text-xs leading-4 text-foreground-muted'
+};
+const EDIT_CLASS = {
+    label: 'text-xs font-medium leading-4',
+    lg: 'text-base font-semibold leading-5 tracking-[-0.3px]',
+    sm: 'text-xs leading-4'
+};
+const LINE_HEIGHT = {
+    label: 16,
+    lg: 20,
+    sm: 16
+};
+const VERTICAL_PADDING = 4;
+const CLAMP_CLASS = 'line-clamp-[var(--editable-text-lines)] whitespace-pre-line wrap-break-word';
+const INTERACTIVE_CLASS = 'rounded px-1.5 py-0.5 -mx-1.5';
+const EDITOR_SPACING_CLASS = 'rounded px-1.5 py-0.5 -ml-1.5';
+const READ_MAX_WIDTH_CLASS = 'max-w-[calc(100%+--spacing(3))]';
+const ERROR_RING_CLASS = 'ring-1 ring-error';
+function TruncationTooltip({ content, multiline, children }) {
+    const triggerRef = useRef(null);
+    const setTrigger = useCallback((node)=>{
+        triggerRef.current = node;
+    }, []);
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/ jsx(TooltipProvider, {
+        delayDuration: 700,
+        children: /*#__PURE__*/ jsxs(Tooltip, {
+            open: open,
+            onOpenChange: (next)=>{
+                const node = triggerRef.current;
+                setOpen(next && !!node && (node.scrollWidth > node.clientWidth || node.scrollHeight > node.clientHeight));
+            },
+            children: [
+                /*#__PURE__*/ jsx(TooltipTrigger, {
+                    asChild: true,
+                    ref: setTrigger,
+                    children: children
+                }),
+                /*#__PURE__*/ jsx(TooltipPortal, {
+                    children: /*#__PURE__*/ jsx(TooltipContent, {
+                        className: cn('max-w-80 wrap-break-word', multiline && 'whitespace-pre-line'),
+                        children: content
+                    })
+                })
+            ]
+        })
+    });
+}
+function EditableText({ value, placeholder, size = 'lg', multiline, maxLines = 3, onChange, onSubmit, editing: editingProp, onEditingChange, disabled, truncationTooltip = true, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId }) {
+    const allowNewlines = true === multiline;
+    const editable = !!onChange && !!onSubmit;
+    const [editingState, setEditingState] = useState(false);
+    const controlled = void 0 !== editingProp;
+    const requested = controlled ? editingProp : editingState;
+    const isEditing = requested && editable && !disabled;
+    const setEditing = useCallback((next)=>{
+        if (!controlled) setEditingState(next);
+        onEditingChange?.(next);
+    }, [
+        controlled,
+        onEditingChange
+    ]);
+    const inputRef = useRef(null);
+    const openedWith = useRef(value);
+    const latestValue = useRef(value);
+    latestValue.current = value;
+    const errorId = `editable-text-${useId().replace(/:/g, '')}-error`;
+    const hasError = !!error;
+    const describedBy = hasError ? errorId : void 0;
+    useIsomorphicLayoutEffect(()=>{
+        if (disabled && requested) setEditing(false);
+    }, [
+        disabled,
+        requested,
+        setEditing
+    ]);
+    useIsomorphicLayoutEffect(()=>{
+        if (!isEditing) return;
+        openedWith.current = latestValue.current;
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, [
+        isEditing
+    ]);
+    const cancel = useCallback(()=>{
+        setEditing(false);
+        if (openedWith.current !== value) onChange?.(openedWith.current);
+    }, [
+        value,
+        onChange,
+        setEditing
+    ]);
+    const commit = useCallback(()=>{
+        const next = value.trim();
+        setEditing(false);
+        if (next !== value) onChange?.(next);
+        if (next !== openedWith.current) onSubmit?.(next);
+    }, [
+        value,
+        onChange,
+        onSubmit,
+        setEditing
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if ('Enter' !== e.key || allowNewlines && e.shiftKey) {
+            if ('Escape' === e.key) {
+                e.preventDefault();
+                cancel();
+            }
+        } else {
+            e.preventDefault();
+            commit();
+        }
+        e.stopPropagation();
+    }, [
+        commit,
+        cancel,
+        allowNewlines
+    ]);
+    const editorMaxHeight = multiline ? {
+        maxHeight: maxLines * LINE_HEIGHT[size] + VERTICAL_PADDING
+    } : void 0;
+    const readClampStyle = multiline ? {
+        '--editable-text-lines': maxLines
+    } : void 0;
+    const readClampClass = multiline ? CLAMP_CLASS : 'block truncate';
+    const withTooltip = (trigger)=>truncationTooltip && (value || placeholder) ? /*#__PURE__*/ jsx(TruncationTooltip, {
+            content: value || placeholder,
+            multiline: !!multiline,
+            children: trigger
+        }) : trigger;
+    const message = /*#__PURE__*/ jsx(FormFieldError, {
+        id: errorId,
+        "data-slot": "editable-text-error",
+        className: "-ml-1 mt-1",
+        children: error
+    });
+    if (!editable) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ jsx("span", {
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-describedby": describedBy,
+                style: readClampStyle,
+                className: cn(readClampClass, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && cn(INTERACTIVE_CLASS, ERROR_RING_CLASS), className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+    if (isEditing) {
+        const sharedProps = {
+            'data-slot': 'editable-text-input',
+            'data-testid': dataTestId ? `${dataTestId}-input` : void 0,
+            value,
+            placeholder,
+            'aria-label': ariaLabel,
+            'aria-describedby': describedBy,
+            'aria-errormessage': hasError ? errorId : void 0,
+            'aria-invalid': hasError || void 0,
+            onKeyDown: handleKeyDown,
+            onBlur: commit,
+            className: cn('w-full min-w-0 border-none bg-surface-overlay text-foreground outline-none ring-1', hasError ? 'ring-error' : 'ring-brand', EDITOR_SPACING_CLASS, EDIT_CLASS[size], className)
+        };
+        return /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                multiline ? /*#__PURE__*/ jsx("textarea", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    rows: 1,
+                    style: editorMaxHeight,
+                    className: cn(sharedProps.className, 'field-sizing-content max-w-full resize-none overflow-y-auto wrap-break-word'),
+                    onChange: (e)=>onChange?.(allowNewlines ? e.target.value : stripNewlines(e.target.value))
+                }) : /*#__PURE__*/ jsx("input", {
+                    ...sharedProps,
+                    ref: inputRef,
+                    autoComplete: "off",
+                    onChange: (e)=>onChange?.(e.target.value)
+                }),
+                message
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            withTooltip(/*#__PURE__*/ jsx("button", {
+                type: "button",
+                "data-slot": "editable-text",
+                "data-testid": dataTestId,
+                "aria-label": ariaLabel && `${ariaLabel}: ${value || placeholder || ''}`,
+                "aria-describedby": describedBy,
+                "aria-errormessage": hasError ? errorId : void 0,
+                "aria-invalid": hasError || void 0,
+                "aria-disabled": disabled || void 0,
+                onClick: ()=>{
+                    if (disabled) return;
+                    setEditing(true);
+                },
+                style: readClampStyle,
+                className: cn('cursor-text border-none bg-transparent text-left transition hover:bg-surface-overlay', READ_MAX_WIDTH_CLASS, 'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent', readClampClass, INTERACTIVE_CLASS, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && ERROR_RING_CLASS, className),
+                children: value || placeholder
+            })),
+            message
+        ]
+    });
+}
+export { EditableText };

package/dist/components/ui/field-addons/field-menu.cjs

@@ -67,7 +67,7 @@ function ValueModeMenuItem({ icon: Icon, label, description, active, disabled, o
         ]
     });
 }
-function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, triggerLabel: triggerLabelOverride, strings }) {
+function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, triggerLabel: triggerLabelOverride, strings, onCloseAutoFocus }) {
     const text = {
         ...external_value_mode_strings_cjs_namespaceObject.DEFAULT_VALUE_MODE_STRINGS,
         ...strings
@@ -103,6 +103,7 @@ function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesD
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuContent, {
                 align: "end",
                 className: "w-56",
+                onCloseAutoFocus: onCloseAutoFocus,
                 children: [
                     !modesDisabled && resolvedModes.map((item)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ValueModeMenuItem, {
                             icon: item.icon,

package/dist/components/ui/field-addons/field-menu.d.ts

@@ -35,6 +35,11 @@ interface FieldMenuBaseProps<Id extends string> {
     triggerLabel?: string;
     /** Overrides for any subset of the English strings. */
     strings?: Partial<ValueModeStrings>;
+    /**
+     * Called as the menu closes, before it returns focus to its trigger. Call `preventDefault` to keep
+     * focus elsewhere, such as on the field's control after a mode is chosen.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
 }
 /**
  * `modes` may be omitted when `Id` is the built-in modes, or one of them as `mode="literal"` infers,
@@ -68,5 +73,5 @@ export declare function ValueModeMenuItem({ icon: Icon, label, description, acti
  * shows the current mode's icon and is named by its title; with the modes hidden it is the field's
  * overflow menu.
  */
-export declare function FieldMenu<Id extends string = ValueMode>({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, triggerLabel: triggerLabelOverride, strings, }: FieldMenuProps<Id>): import("react/jsx-runtime").JSX.Element;
+export declare function FieldMenu<Id extends string = ValueMode>({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, triggerLabel: triggerLabelOverride, strings, onCloseAutoFocus, }: FieldMenuProps<Id>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/field-addons/field-menu.js

@@ -38,7 +38,7 @@ function ValueModeMenuItem({ icon: Icon, label, description, active, disabled, o
         ]
     });
 }
-function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, triggerLabel: triggerLabelOverride, strings }) {
+function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesDisabled, disabled, expectedType, literalDescription, triggerLabel: triggerLabelOverride, strings, onCloseAutoFocus }) {
     const text = {
         ...DEFAULT_VALUE_MODE_STRINGS,
         ...strings
@@ -74,6 +74,7 @@ function FieldMenu({ mode, onSelect, modes, extraModes, actions, checked, modesD
             /*#__PURE__*/ jsxs(DropdownMenuContent, {
                 align: "end",
                 className: "w-56",
+                onCloseAutoFocus: onCloseAutoFocus,
                 children: [
                     !modesDisabled && resolvedModes.map((item)=>/*#__PURE__*/ jsx(ValueModeMenuItem, {
                             icon: item.icon,

package/dist/components/ui/field-addons/value-mode-switch-dialog.cjs

@@ -29,7 +29,7 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_alert_dialog_cjs_namespaceObject = require("../alert-dialog.cjs");
 const external_value_mode_strings_cjs_namespaceObject = require("./value-mode-strings.cjs");
-function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description, confirmLabel, strings }) {
+function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description, confirmLabel, strings, onCloseAutoFocus }) {
     const text = {
         ...external_value_mode_strings_cjs_namespaceObject.DEFAULT_VALUE_MODE_STRINGS,
         ...strings
@@ -38,6 +38,7 @@ function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description,
         open: open,
         onOpenChange: (next)=>!next && onCancel(),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_alert_dialog_cjs_namespaceObject.AlertDialogContent, {
+            onCloseAutoFocus: onCloseAutoFocus,
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_alert_dialog_cjs_namespaceObject.AlertDialogHeader, {
                     children: [

package/dist/components/ui/field-addons/value-mode-switch-dialog.d.ts

@@ -11,6 +11,11 @@ export interface ValueModeSwitchDialogProps {
     confirmLabel?: string;
     /** Overrides for any subset of the English strings. */
     strings?: Partial<ValueModeStrings>;
+    /**
+     * Called as the dialog closes, before it returns focus to where it opened from. Call
+     * `preventDefault` to keep focus elsewhere, such as on the control of the mode just switched to.
+     */
+    onCloseAutoFocus?: (event: Event) => void;
 }
 /** Confirms a mode switch that would lose the field's current value. */
-export declare function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description, confirmLabel, strings, }: ValueModeSwitchDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description, confirmLabel, strings, onCloseAutoFocus, }: ValueModeSwitchDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/field-addons/value-mode-switch-dialog.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../alert-dialog.js";
 import { DEFAULT_VALUE_MODE_STRINGS } from "./value-mode-strings.js";
-function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description, confirmLabel, strings }) {
+function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description, confirmLabel, strings, onCloseAutoFocus }) {
     const text = {
         ...DEFAULT_VALUE_MODE_STRINGS,
         ...strings
@@ -10,6 +10,7 @@ function ValueModeSwitchDialog({ open, onConfirm, onCancel, title, description,
         open: open,
         onOpenChange: (next)=>!next && onCancel(),
         children: /*#__PURE__*/ jsxs(AlertDialogContent, {
+            onCloseAutoFocus: onCloseAutoFocus,
             children: [
                 /*#__PURE__*/ jsxs(AlertDialogHeader, {
                     children: [