@uipath/apollo-wind 2.62.0 → 2.64.0

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

@@ -0,0 +1,14 @@
+export interface FolderPickerSearchProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    clearLabel?: string;
+}
+/**
+ * Filters the level being browsed.
+ *
+ * Matches `CommandInput`: no field of its own, just a leading magnifier and
+ * the rule under the row, so the search reads as part of the popover rather
+ * than as a control sitting inside it.
+ */
+export declare function FolderPickerSearch({ value, onChange, placeholder, clearLabel, }: FolderPickerSearchProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import { useRef } from "react";
+function FolderPickerSearch({ value, onChange, placeholder = 'Search...', clearLabel = 'Clear search' }) {
+    const inputRef = useRef(null);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-center border-b border-border px-3",
+        children: [
+            /*#__PURE__*/ jsx(Search, {
+                className: "mr-2 size-4 shrink-0 opacity-50"
+            }),
+            /*#__PURE__*/ jsx("input", {
+                ref: inputRef,
+                "data-slot": "folder-picker-search",
+                type: "text",
+                autoComplete: "off",
+                "aria-label": placeholder,
+                placeholder: placeholder,
+                value: value,
+                onChange: (event)=>onChange(event.target.value),
+                className: "flex h-9 w-full rounded-md bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+                onKeyDown: (event)=>{
+                    if ('Escape' === event.key && value) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onChange('');
+                    }
+                }
+            }),
+            value && /*#__PURE__*/ jsx("button", {
+                type: "button",
+                "aria-label": clearLabel,
+                className: "ml-1 grid size-5 shrink-0 cursor-pointer place-items-center rounded text-muted-foreground transition-colors hover:text-foreground",
+                onClick: ()=>{
+                    inputRef.current?.focus();
+                    onChange('');
+                },
+                children: /*#__PURE__*/ jsx(X, {
+                    className: "size-3.5"
+                })
+            })
+        ]
+    });
+}
+export { FolderPickerSearch };

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

@@ -0,0 +1,107 @@
+"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__, {
+    FolderRow: ()=>FolderRow
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_spinner_cjs_namespaceObject = require("../../spinner.cjs");
+const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
+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__*/ (0, jsx_runtime_namespaceObject.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: (0, index_cjs_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "grid size-3.5 shrink-0 place-items-center",
+                children: selected && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
+                    className: "size-3.5 text-foreground-accent",
+                    strokeWidth: 3
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Folder, {
+                size: 14,
+                className: "shrink-0 text-foreground-muted"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                className: "min-w-0 flex-1 truncate",
+                children: label
+            }),
+            false !== entry.hasChildren && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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__*/ (0, jsx_runtime_namespaceObject.jsx)(external_spinner_cjs_namespaceObject.Spinner, {
+                    className: "[&_svg]:size-3.5",
+                    "aria-hidden": "true"
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronRight, {
+                    size: 14
+                })
+            })
+        ]
+    });
+}
+exports.FolderRow = __webpack_exports__.FolderRow;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FolderRow"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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 };