@uipath/apollo-wind 2.62.0 → 2.63.0

package/dist/components/ui/folder-picker/components/folder-row.d.ts

@@ -0,0 +1,27 @@
+import type { FolderPickerEntry } from '../types';
+export interface FolderRowProps {
+    entry: FolderPickerEntry;
+    /** Depth in the tree, 1 at the root. */
+    level: number;
+    selected: boolean;
+    /** The tree's single tab stop. The parent moves it with the arrow keys. */
+    active: boolean;
+    /** This row's own contents are being fetched. */
+    loading: boolean;
+    rowRef: (node: HTMLDivElement | null) => void;
+    onFocus: () => void;
+    onToggleSelect: () => void;
+    onOpen: () => void;
+    /** Accessible name for the Open control, given the row's label. */
+    openLabel?: (label: string) => string;
+}
+/**
+ * One folder in the list.
+ *
+ * A `treeitem` rather than a listbox option: an option is atomic to assistive
+ * technology, which would hide the trailing Open control or make it compete
+ * with the row for focus. Clicking the row marks it with a tick as the
+ * pending choice, the chevron or a double click opens it, and a known leaf
+ * offers no way in at all.
+ */
+export declare function FolderRow({ entry, level, selected, active, loading, rowRef, onFocus, onToggleSelect, onOpen, openLabel, }: FolderRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/folder-picker/components/folder-row.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronRight, Folder } from "lucide-react";
+import { Spinner } from "../../spinner.js";
+import { cn } from "../../../../lib/index.js";
+function FolderRow({ entry, level, selected, active, loading, rowRef, onFocus, onToggleSelect, onOpen, openLabel = (rowLabel)=>`Open ${rowLabel}` }) {
+    const label = entry.label ?? entry.name;
+    const canOpen = !entry.disabled && false !== entry.hasChildren;
+    const canStartOpen = canOpen && !loading;
+    return /*#__PURE__*/ jsxs("div", {
+        role: "treeitem",
+        "aria-level": level,
+        "aria-selected": selected,
+        "aria-label": label,
+        "aria-expanded": canOpen ? false : void 0,
+        "aria-disabled": entry.disabled,
+        ref: rowRef,
+        tabIndex: entry.disabled ? void 0 : active ? 0 : -1,
+        onFocus: (event)=>!entry.disabled && event.target === event.currentTarget && onFocus(),
+        className: cn('flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-foreground transition-colors', entry.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer hover:bg-surface-overlay', selected && 'font-medium'),
+        onClick: (event)=>!entry.disabled && event.detail <= 1 && onToggleSelect(),
+        onDoubleClick: ()=>{
+            if (canStartOpen) onOpen();
+            else if (!entry.disabled && !selected) onToggleSelect();
+        },
+        onKeyDown: (event)=>{
+            if (entry.disabled) return;
+            if (event.target !== event.currentTarget) return;
+            if ('Enter' === event.key || ' ' === event.key) {
+                event.preventDefault();
+                onToggleSelect();
+            } else if ('ArrowRight' === event.key && canStartOpen) {
+                event.preventDefault();
+                onOpen();
+            }
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "grid size-3.5 shrink-0 place-items-center",
+                children: selected && /*#__PURE__*/ jsx(Check, {
+                    className: "size-3.5 text-foreground-accent",
+                    strokeWidth: 3
+                })
+            }),
+            /*#__PURE__*/ jsx(Folder, {
+                size: 14,
+                className: "shrink-0 text-foreground-muted"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: "min-w-0 flex-1 truncate",
+                children: label
+            }),
+            false !== entry.hasChildren && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": openLabel(label),
+                "aria-busy": loading || void 0,
+                tabIndex: -1,
+                disabled: entry.disabled,
+                className: "grid size-5 shrink-0 cursor-pointer place-items-center rounded text-foreground-muted transition-colors hover:bg-surface-overlay hover:text-foreground",
+                onClick: (event)=>{
+                    event.stopPropagation();
+                    if (canStartOpen) onOpen();
+                },
+                children: loading ? /*#__PURE__*/ jsx(Spinner, {
+                    className: "[&_svg]:size-3.5",
+                    "aria-hidden": "true"
+                }) : /*#__PURE__*/ jsx(ChevronRight, {
+                    size: 14
+                })
+            })
+        ]
+    });
+}
+export { FolderRow };

package/dist/components/ui/folder-picker/folder-picker.cjs

@@ -0,0 +1,465 @@
+"use strict";
+"use client";
+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__, {
+    FolderPickerContent: ()=>FolderPickerContent,
+    FolderPicker: ()=>FolderPicker,
+    keepFolderSearchOnEscape: ()=>keepFolderSearchOnEscape
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_popover_cjs_namespaceObject = require("../popover.cjs");
+const index_cjs_namespaceObject = require("../../../lib/index.cjs");
+const folder_breadcrumb_cjs_namespaceObject = require("./components/folder-breadcrumb.cjs");
+const folder_picker_empty_state_cjs_namespaceObject = require("./components/folder-picker-empty-state.cjs");
+const folder_picker_footer_cjs_namespaceObject = require("./components/folder-picker-footer.cjs");
+const folder_picker_search_cjs_namespaceObject = require("./components/folder-picker-search.cjs");
+const folder_row_cjs_namespaceObject = require("./components/folder-row.cjs");
+const external_types_cjs_namespaceObject = require("./types.cjs");
+const listedDraft = (current, entries, segments)=>entries.some((entry)=>!entry.disabled && (0, external_types_cjs_namespaceObject.joinPath)([
+            ...segments,
+            entry.name
+        ]) === current) ? current : null;
+function FolderPickerContent({ onLoadChildren, onSelect, onCancel, initialPath, rootLabel = 'Root', breadcrumbLabel, searchPlaceholder = 'Search...', clearSearchLabel, initialSearch = '', emptyText = 'No subfolders.', noMatchText, openFolderLabel, loadingText = 'Loading…', loadErrorText = 'Could not load this folder.', retryLabel = 'Retry', listLabel = 'Folders', footerLeading, cancelLabel = 'Cancel', selectLabel = 'Select', className }) {
+    const initialSegments = (0, external_react_namespaceObject.useMemo)(()=>(initialPath ?? '').split('/').filter(Boolean), [
+        initialPath
+    ]);
+    const [pathStack, setPathStack] = (0, external_react_namespaceObject.useState)(()=>initialSegments.slice(0, -1));
+    const [draft, setDraft] = (0, external_react_namespaceObject.useState)(()=>initialSegments.length > 0 ? (0, external_types_cjs_namespaceObject.joinPath)(initialSegments) : null);
+    const [search, setSearch] = (0, external_react_namespaceObject.useState)(initialSearch);
+    const [levels, setLevels] = (0, external_react_namespaceObject.useState)(()=>new Map());
+    const [loadingPath, setLoadingPath] = (0, external_react_namespaceObject.useState)(()=>(0, external_types_cjs_namespaceObject.joinPath)(initialSegments.slice(0, -1)));
+    const [error, setError] = (0, external_react_namespaceObject.useState)(null);
+    const [activeName, setActiveName] = (0, external_react_namespaceObject.useState)(()=>initialSegments[initialSegments.length - 1] ?? null);
+    const rowRefs = (0, external_react_namespaceObject.useRef)(new Map());
+    const listRef = (0, external_react_namespaceObject.useRef)(null);
+    const rootRef = (0, external_react_namespaceObject.useRef)(null);
+    const focusAfterNavigateRef = (0, external_react_namespaceObject.useRef)(false);
+    const requestRef = (0, external_react_namespaceObject.useRef)(0);
+    const mountedRef = (0, external_react_namespaceObject.useRef)(true);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        mountedRef.current = true;
+        return ()=>{
+            mountedRef.current = false;
+        };
+    }, []);
+    const loadLevel = (0, external_react_namespaceObject.useCallback)(async (segments, { keepDraft = false, keepSearch = false, nextActive } = {})=>{
+        const key = (0, external_types_cjs_namespaceObject.cacheKey)(segments);
+        const requestId = ++requestRef.current;
+        const cached = levels.get(key);
+        if (cached) {
+            setLoadingPath(null);
+            setError(null);
+            setPathStack(segments);
+            if (void 0 !== nextActive) setActiveName(nextActive);
+            if (keepDraft) setDraft((current)=>listedDraft(current, cached, segments));
+            return;
+        }
+        setLoadingPath((0, external_types_cjs_namespaceObject.joinPath)(segments));
+        setError(null);
+        try {
+            const loaded = await onLoadChildren(segments);
+            if (!mountedRef.current || requestRef.current !== requestId) return;
+            const seen = new Set();
+            const entries = loaded.filter((entry)=>{
+                if (!(0, external_types_cjs_namespaceObject.isValidSegment)(entry.name) || seen.has(entry.name)) return false;
+                seen.add(entry.name);
+                return true;
+            });
+            if (entries.length < loaded.length) console.warn('FolderPicker: dropped entries whose name is empty, contains "/" or repeats a sibling, which paths cannot represent.');
+            setLevels((current)=>new Map(current).set(key, entries));
+            setPathStack(segments);
+            if (void 0 !== nextActive) setActiveName(nextActive);
+            if (keepDraft) setDraft((current)=>listedDraft(current, entries, segments));
+            else {
+                setDraft(null);
+                if (!keepSearch) setSearch('');
+            }
+        } catch (cause) {
+            if (!mountedRef.current || requestRef.current !== requestId) return;
+            if (keepDraft) setDraft(null);
+            setError({
+                message: cause instanceof Error && cause.message ? cause.message : loadErrorText,
+                segments
+            });
+        } finally{
+            if (mountedRef.current && requestRef.current === requestId) setLoadingPath(null);
+        }
+    }, [
+        levels,
+        onLoadChildren,
+        loadErrorText
+    ]);
+    const initialStack = (0, external_react_namespaceObject.useRef)(pathStack);
+    const didLoadInitial = (0, external_react_namespaceObject.useRef)(false);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (didLoadInitial.current) return;
+        didLoadInitial.current = true;
+        loadLevel(initialStack.current, {
+            keepDraft: true
+        });
+    }, [
+        loadLevel
+    ]);
+    const handleEscape = (event)=>{
+        if ('Escape' !== event.key || !search) return;
+        event.preventDefault();
+        event.stopPropagation();
+        setSearch('');
+    };
+    const navigateTo = (segments)=>{
+        if (loadingPath === (0, external_types_cjs_namespaceObject.joinPath)(segments)) return;
+        setDraft(null);
+        setSearch('');
+        const isAncestor = segments.every((segment, index)=>pathStack[index] === segment);
+        loadLevel(segments, {
+            nextActive: isAncestor ? pathStack[segments.length] ?? null : null
+        });
+    };
+    const currentKey = (0, external_types_cjs_namespaceObject.cacheKey)(pathStack);
+    const entries = levels.get(currentKey) ?? [];
+    const isLoadingCurrentLevel = null !== loadingPath && !levels.has(currentKey);
+    const levelError = levels.has(currentKey) ? null : error?.message ?? null;
+    const drillError = levels.has(currentKey) ? error?.message ?? null : null;
+    const normalizedQuery = search.trim().toLowerCase();
+    const visibleEntries = normalizedQuery ? entries.filter((entry)=>(entry.label ?? entry.name).toLowerCase().includes(normalizedQuery)) : entries;
+    const visibleDraft = visibleEntries.some((entry)=>(0, external_types_cjs_namespaceObject.joinPath)([
+            ...pathStack,
+            entry.name
+        ]) === draft) ? draft : null;
+    const effectiveSelection = levels.has(currentKey) ? visibleDraft ?? (pathStack.length > 0 ? (0, external_types_cjs_namespaceObject.joinPath)(pathStack) : null) : null;
+    const focusableEntries = visibleEntries.filter((entry)=>!entry.disabled);
+    const activeEntryName = focusableEntries.find((entry)=>entry.name === activeName)?.name ?? focusableEntries[0]?.name ?? null;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!focusAfterNavigateRef.current || null !== loadingPath) return;
+        focusAfterNavigateRef.current = false;
+        const tree = listRef.current;
+        const focused = tree?.ownerDocument.activeElement;
+        const focusLost = !focused || focused === tree?.ownerDocument.body;
+        const onRowOrFallback = focused === tree || focused?.getAttribute('role') === 'treeitem';
+        if (!focusLost && !(onRowOrFallback && tree?.contains(focused))) return;
+        const row = null === activeEntryName ? void 0 : rowRefs.current.get(activeEntryName);
+        (row ?? listRef.current)?.focus();
+    });
+    const syncedPath = (0, external_react_namespaceObject.useRef)(initialPath);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (syncedPath.current === initialPath) return;
+        syncedPath.current = initialPath;
+        const root = rootRef.current;
+        if (root?.contains(root.ownerDocument.activeElement)) focusAfterNavigateRef.current = true;
+        setDraft(initialSegments.length > 0 ? (0, external_types_cjs_namespaceObject.joinPath)(initialSegments) : null);
+        setSearch('');
+        loadLevel(initialSegments.slice(0, -1), {
+            keepDraft: true,
+            nextActive: initialSegments[initialSegments.length - 1] ?? null
+        });
+    }, [
+        initialPath,
+        initialSegments,
+        loadLevel
+    ]);
+    const focusRow = (name)=>{
+        setActiveName(name);
+        rowRefs.current.get(name)?.focus();
+    };
+    const openFolder = (segments)=>{
+        focusAfterNavigateRef.current = true;
+        navigateTo(segments);
+    };
+    const handleTreeKeyDown = (event)=>{
+        const target = event.target;
+        if (target !== listRef.current && 'treeitem' !== target.getAttribute('role')) return;
+        const index = target === listRef.current ? -1 : focusableEntries.findIndex((entry)=>entry.name === activeEntryName);
+        let next;
+        switch(event.key){
+            case 'ArrowDown':
+                next = focusableEntries[Math.min(index + 1, focusableEntries.length - 1)];
+                break;
+            case 'ArrowUp':
+                next = focusableEntries[Math.max(index - 1, 0)];
+                break;
+            case 'Home':
+                next = focusableEntries[0];
+                break;
+            case 'End':
+                next = focusableEntries[focusableEntries.length - 1];
+                break;
+            case 'ArrowLeft':
+                if (0 === pathStack.length) return;
+                event.preventDefault();
+                openFolder(pathStack.slice(0, -1));
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (next) focusRow(next.name);
+    };
+    const crumbs = [
+        {
+            key: '/',
+            label: rootLabel,
+            stack: []
+        },
+        ...pathStack.map((segment, index)=>{
+            const stack = pathStack.slice(0, index + 1);
+            const parent = levels.get((0, external_types_cjs_namespaceObject.cacheKey)(pathStack.slice(0, index)));
+            const label = parent?.find((entry)=>entry.name === segment)?.label ?? segment;
+            return {
+                key: (0, external_types_cjs_namespaceObject.joinPath)(stack),
+                label,
+                stack
+            };
+        })
+    ];
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: rootRef,
+        "data-slot": "folder-picker",
+        className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 flex-col overflow-hidden', className),
+        onKeyDown: handleEscape,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(folder_breadcrumb_cjs_namespaceObject.FolderBreadcrumb, {
+                crumbs: crumbs,
+                onJump: openFolder,
+                label: breadcrumbLabel
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(folder_picker_search_cjs_namespaceObject.FolderPickerSearch, {
+                value: search,
+                onChange: setSearch,
+                placeholder: searchPlaceholder,
+                clearLabel: clearSearchLabel
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                ref: listRef,
+                role: "group",
+                "aria-label": listLabel,
+                tabIndex: null === activeEntryName ? 0 : -1,
+                className: "max-h-56 min-h-0 flex-1 overflow-y-auto py-1 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+                onKeyDown: handleTreeKeyDown,
+                children: [
+                    0 === visibleEntries.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(folder_picker_empty_state_cjs_namespaceObject.FolderPickerEmptyState, {
+                        error: levelError,
+                        loading: isLoadingCurrentLevel,
+                        query: search.trim(),
+                        emptyText: emptyText,
+                        noMatchText: noMatchText,
+                        loadingText: loadingText,
+                        retryLabel: retryLabel,
+                        onRetry: ()=>{
+                            if (!error) return;
+                            listRef.current?.focus();
+                            focusAfterNavigateRef.current = true;
+                            if ((0, external_types_cjs_namespaceObject.cacheKey)(error.segments) === currentKey) loadLevel(pathStack, {
+                                keepSearch: true
+                            });
+                            else navigateTo(error.segments);
+                        }
+                    }),
+                    drillError && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        role: "alert",
+                        className: "px-3 py-2 text-xs text-destructive",
+                        children: drillError
+                    }),
+                    (visibleEntries.length > 0 || isLoadingCurrentLevel) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        role: "tree",
+                        "aria-label": listLabel,
+                        "aria-busy": isLoadingCurrentLevel || void 0,
+                        children: visibleEntries.map((entry)=>{
+                            const segments = [
+                                ...pathStack,
+                                entry.name
+                            ];
+                            const fullPath = (0, external_types_cjs_namespaceObject.joinPath)(segments);
+                            const isSelected = draft === fullPath;
+                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(folder_row_cjs_namespaceObject.FolderRow, {
+                                entry: entry,
+                                level: pathStack.length + 1,
+                                selected: isSelected,
+                                active: entry.name === activeEntryName,
+                                loading: loadingPath === fullPath,
+                                rowRef: (node)=>{
+                                    if (node) rowRefs.current.set(entry.name, node);
+                                    else rowRefs.current.delete(entry.name);
+                                },
+                                onFocus: ()=>setActiveName(entry.name),
+                                onToggleSelect: ()=>setDraft(isSelected ? null : fullPath),
+                                onOpen: ()=>openFolder(segments),
+                                openLabel: openFolderLabel
+                            }, fullPath);
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(folder_picker_footer_cjs_namespaceObject.FolderPickerFooter, {
+                leading: footerLeading,
+                onCancel: onCancel,
+                onSelect: ()=>effectiveSelection && onSelect(effectiveSelection),
+                selectDisabled: !effectiveSelection,
+                cancelLabel: cancelLabel,
+                selectLabel: selectLabel
+            })
+        ]
+    });
+}
+function keepFolderSearchOnEscape(event) {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const search = target.closest('[data-slot="folder-picker"]')?.querySelector('input[data-slot="folder-picker-search"]');
+    if (search?.value) event.preventDefault();
+}
+function FolderPicker({ value = '', placeholder = 'Select a folder…', disabled = false, clearable = true, clearAriaLabel = 'Clear folder', dialogLabel = 'Choose a folder', children, align = 'start', open: controlledOpen, onOpenChange, trailingAdornment, contentClassName, className, id, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, onSelect, ...contentProps }) {
+    const [uncontrolledOpen, setUncontrolledOpen] = (0, external_react_namespaceObject.useState)(false);
+    const requestedOpen = controlledOpen ?? uncontrolledOpen;
+    const open = requestedOpen && !disabled;
+    const closedByDisable = disabled && requestedOpen;
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!closedByDisable) return;
+        setUncontrolledOpen(false);
+        onOpenChange?.(false);
+    }, [
+        closedByDisable
+    ]);
+    const contentRef = (0, external_react_namespaceObject.useRef)(null);
+    const browsePath = (0, external_react_namespaceObject.useRef)(value);
+    if (open) browsePath.current = value;
+    const triggerRef = (0, external_react_namespaceObject.useRef)(null);
+    const trailingRef = (0, external_react_namespaceObject.useRef)(null);
+    const [trailingWidth, setTrailingWidth] = (0, external_react_namespaceObject.useState)(0);
+    const showClear = clearable && Boolean(value) && !disabled && !children;
+    const showAdornment = Boolean(trailingAdornment) && !children;
+    const hasTrailing = showAdornment || showClear;
+    (0, external_react_namespaceObject.useLayoutEffect)(()=>{
+        const el = trailingRef.current;
+        if (!el) return void setTrailingWidth(0);
+        setTrailingWidth(el.offsetWidth);
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(()=>setTrailingWidth(el.offsetWidth));
+        observer.observe(el);
+        return ()=>observer.disconnect();
+    }, [
+        hasTrailing
+    ]);
+    const setOpen = (nextOpen)=>{
+        if (nextOpen && disabled) return;
+        if (void 0 === controlledOpen) setUncontrolledOpen(nextOpen);
+        onOpenChange?.(nextOpen);
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('group relative min-w-0', className),
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+                open: open,
+                onOpenChange: setOpen,
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                        asChild: true,
+                        disabled: disabled,
+                        children: children ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+                            ref: triggerRef,
+                            type: "button",
+                            disabled: disabled,
+                            id: id,
+                            "aria-labelledby": ariaLabelledBy,
+                            "aria-describedby": ariaDescribedBy,
+                            role: "combobox",
+                            "aria-haspopup": "dialog",
+                            "aria-expanded": open,
+                            style: trailingWidth > 0 ? {
+                                paddingRight: trailingWidth + 20
+                            } : void 0,
+                            className: (0, index_cjs_namespaceObject.cn)('flex h-9 w-full min-w-0 cursor-pointer items-center gap-2 rounded-md border border-input bg-transparent pl-3 pr-3 text-left text-base transition-colors md:text-sm', 'focus:outline-none focus:ring-2 focus:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50', 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:font-normal future:hover:bg-surface-hover'),
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.FolderOpen, {
+                                    size: 16,
+                                    className: "shrink-0 text-foreground-muted"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                    className: (0, index_cjs_namespaceObject.cn)('min-w-0 flex-1 truncate', value ? 'text-foreground' : 'text-foreground-subtle'),
+                                    children: value || placeholder
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                        "aria-label": dialogLabel,
+                        align: align,
+                        sideOffset: 4,
+                        className: (0, index_cjs_namespaceObject.cn)('w-(--radix-popover-trigger-width) min-w-72 overflow-hidden p-0', contentClassName),
+                        ref: contentRef,
+                        onOpenAutoFocus: (event)=>{
+                            event.preventDefault();
+                            contentRef.current?.querySelector('input')?.focus();
+                        },
+                        onEscapeKeyDown: keepFolderSearchOnEscape,
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FolderPickerContent, {
+                            ...contentProps,
+                            initialPath: browsePath.current,
+                            onCancel: ()=>setOpen(false),
+                            onSelect: (path)=>{
+                                onSelect(path);
+                                setOpen(false);
+                            }
+                        })
+                    })
+                ]
+            }),
+            hasTrailing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                ref: trailingRef,
+                className: "pointer-events-none absolute inset-y-0 right-2 flex items-center gap-0.5",
+                children: [
+                    showClear && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                        type: "button",
+                        "aria-label": clearAriaLabel,
+                        className: "pointer-events-auto grid size-4 cursor-pointer place-items-center rounded text-foreground-muted opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100",
+                        onClick: ()=>{
+                            triggerRef.current?.focus();
+                            onSelect('');
+                        },
+                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
+                            size: 11
+                        })
+                    }),
+                    showAdornment && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "pointer-events-auto flex items-center",
+                        children: trailingAdornment
+                    })
+                ]
+            })
+        ]
+    });
+}
+exports.FolderPicker = __webpack_exports__.FolderPicker;
+exports.FolderPickerContent = __webpack_exports__.FolderPickerContent;
+exports.keepFolderSearchOnEscape = __webpack_exports__.keepFolderSearchOnEscape;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FolderPicker",
+    "FolderPickerContent",
+    "keepFolderSearchOnEscape"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/folder-picker/folder-picker.d.ts

@@ -0,0 +1,34 @@
+import type { FolderPickerContentProps, FolderPickerProps } from './types';
+/**
+ * Browsing surface for embedding in a consumer-owned popover, dialog or sheet.
+ *
+ * Follows the platform chooser convention: a single click highlights a row as
+ * the pending selection, a double click or the trailing chevron opens it, the
+ * breadcrumb jumps back up, and the footer confirms. With nothing highlighted,
+ * Select confirms the folder currently being browsed, so a folder can be chosen
+ * by opening it. At the root with no highlight there is nothing valid to
+ * confirm and Select is disabled.
+ */
+export declare function FolderPickerContent({ onLoadChildren, onSelect, onCancel, initialPath, rootLabel, breadcrumbLabel, searchPlaceholder, clearSearchLabel, initialSearch, emptyText, noMatchText, openFolderLabel, loadingText, loadErrorText, retryLabel, listLabel, footerLeading, cancelLabel, selectLabel, className, }: FolderPickerContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Holds a Radix surface open while the picker's search has text, so Escape
+ * clears the search instead of dismissing, wherever focus is in the picker.
+ * Radix hears Escape in the capture phase, before the picker's own handlers,
+ * so the picker cannot stop the dismissal itself. It clears the search as the
+ * key reaches it.
+ *
+ * `FolderPicker` applies it to its popover. Pass it as `onEscapeKeyDown` to a
+ * Dialog, Sheet or Popover that hosts `FolderPickerContent`.
+ */
+export declare function keepFolderSearchOnEscape(event: {
+    target: EventTarget | null;
+    preventDefault(): void;
+}): void;
+/**
+ * Field-and-popover folder picker over a lazily loaded tree.
+ *
+ * The trigger leads with its icon and then the value, matching the date field,
+ * so an empty folder field does not read as bare chrome next to it.
+ */
+export declare function FolderPicker({ value, placeholder, disabled, clearable, clearAriaLabel, dialogLabel, children, align, open: controlledOpen, onOpenChange, trailingAdornment, contentClassName, className, id, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, onSelect, ...contentProps }: FolderPickerProps): import("react/jsx-runtime").JSX.Element;
+export type { FolderPickerContentProps, FolderPickerEntry, FolderPickerLoadChildren, FolderPickerProps, } from './types';