@uipath/apollo-wind 2.77.0 → 2.78.0

package/dist/components/ui/index.cjs

@@ -39,7 +39,7 @@ var __webpack_modules__ = {
     "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "@/components/ui/card" (module) {
+    "./card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
@@ -57,7 +57,7 @@ var __webpack_modules__ = {
     "./citation" (module) {
         module.exports = require("./citation.cjs");
     },
-    "@/components/ui/code-block" (module) {
+    "./code-block" (module) {
         module.exports = require("./code-block.cjs");
     },
     "./collapsible" (module) {
@@ -96,7 +96,7 @@ var __webpack_modules__ = {
     "./dropzone-overlay" (module) {
         module.exports = require("./dropzone-overlay.cjs");
     },
-    "@/components/ui/editable-cell" (module) {
+    "./editable-cell" (module) {
         module.exports = require("./editable-cell.cjs");
     },
     "./empty-state" (module) {
@@ -132,7 +132,7 @@ var __webpack_modules__ = {
     "./json-tree-view" (module) {
         module.exports = require("./json-tree-view/index.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
     "./layout" (module) {
@@ -201,7 +201,7 @@ var __webpack_modules__ = {
     "./reference-chip-colors" (module) {
         module.exports = require("./reference-chip-colors.cjs");
     },
-    "@/components/ui/reference-chip" (module) {
+    "./reference-chip" (module) {
         module.exports = require("./reference-chip.cjs");
     },
     "./resizable" (module) {
@@ -255,7 +255,7 @@ var __webpack_modules__ = {
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "@/components/ui/textarea" (module) {
+    "./textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./thinking-indicator" (module) {
@@ -276,7 +276,7 @@ var __webpack_modules__ = {
     "./tree-view" (module) {
         module.exports = require("./tree-view.cjs");
     },
-    "@/components/ui/variable-picker" (module) {
+    "./variable-picker" (module) {
         module.exports = require("./variable-picker/index.cjs");
     },
     "./variable-value-control" (module) {
@@ -462,7 +462,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_13 = __webpack_require__("@/components/ui/card");
+    var _card__rspack_import_13 = __webpack_require__("./card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_13)if ([
         "getReferenceChipColors",
@@ -522,7 +522,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_citation__rspack_import_18[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _code_block__rspack_import_19 = __webpack_require__("@/components/ui/code-block");
+    var _code_block__rspack_import_19 = __webpack_require__("./code-block");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _code_block__rspack_import_19)if ([
         "getReferenceChipColors",
@@ -652,7 +652,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_dropzone_overlay__rspack_import_31[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _editable_cell__rspack_import_32 = __webpack_require__("@/components/ui/editable-cell");
+    var _editable_cell__rspack_import_32 = __webpack_require__("./editable-cell");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _editable_cell__rspack_import_32)if ([
         "getReferenceChipColors",
@@ -772,7 +772,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_json_tree_view__rspack_import_43[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_44 = __webpack_require__("./label");
+    var _label__rspack_import_44 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_44)if ([
         "getReferenceChipColors",
@@ -992,7 +992,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_radio_group__rspack_import_65[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _reference_chip__rspack_import_66 = __webpack_require__("@/components/ui/reference-chip");
+    var _reference_chip__rspack_import_66 = __webpack_require__("./reference-chip");
     var _reference_chip_colors__rspack_import_67 = __webpack_require__("./reference-chip-colors");
     var _resizable__rspack_import_68 = __webpack_require__("./resizable");
     var __rspack_reexport = {};
@@ -1164,7 +1164,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_84[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_85 = __webpack_require__("@/components/ui/textarea");
+    var _textarea__rspack_import_85 = __webpack_require__("./textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_85)if ([
         "getReferenceChipColors",
@@ -1226,7 +1226,7 @@ var __webpack_exports__ = {};
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
     var _tree_view__rspack_import_91 = __webpack_require__("./tree-view");
     var _tree_view__rspack_import_91_default = /*#__PURE__*/ __webpack_require__.n(_tree_view__rspack_import_91);
-    var _variable_picker__rspack_import_92 = __webpack_require__("@/components/ui/variable-picker");
+    var _variable_picker__rspack_import_92 = __webpack_require__("./variable-picker");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _variable_picker__rspack_import_92)if ([
         "getReferenceChipColors",

package/dist/components/ui/search.cjs

@@ -38,13 +38,30 @@ const index_cjs_namespaceObject = require("../../lib/index.cjs");
 const DEFAULT_SEARCH_STRINGS = {
     clear: 'Clear'
 };
-const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, value, onChange, onClear, showClearButton = true, variant, size, error, errorId, strings, ...props }, ref)=>{
+const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, value, onChange, onValueChange, onClear, showClearButton = true, variant, size, error, errorId, strings, ...props }, ref)=>{
     const text = {
         ...DEFAULT_SEARCH_STRINGS,
         ...strings
     };
+    const inputRef = external_react_namespaceObject.useRef(null);
+    const setRef = external_react_namespaceObject.useMemo(()=>(0, index_cjs_namespaceObject.composeRefs)(ref, inputRef), [
+        ref
+    ]);
+    const handleChange = (e)=>{
+        if (onValueChange) {
+            onChange?.(e);
+            onValueChange(e.target.value);
+        } else onChange?.(e.target.value);
+    };
     const handleClear = ()=>{
-        onChange?.('');
+        const input = inputRef.current;
+        if (input) {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, '');
+            input.dispatchEvent(new Event('input', {
+                bubbles: true
+            }));
+            input.focus();
+        }
         onClear?.();
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_input_group_cjs_namespaceObject.InputGroup, {
@@ -61,11 +78,11 @@ const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classN
                 })
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
-                ref: ref,
+                ref: setRef,
                 type: "search",
                 className: (0, index_cjs_namespaceObject.cn)('[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none', className),
                 value: value,
-                onChange: (e)=>onChange?.(e.target.value),
+                onChange: handleChange,
                 ...props
             }),
             showClearButton && value && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupAddon, {
@@ -84,6 +101,8 @@ const Search = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ classN
 Search.displayName = 'Search';
 const SearchWithSuggestions = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ value, onChange, placeholder = 'Search...', suggestions = [], onSelect, emptyMessage = 'No results found.', className, strings }, ref)=>{
     const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const anchorRef = external_react_namespaceObject.useRef(null);
+    const popupId = external_react_namespaceObject.useId();
     const [searchValue, setSearchValue] = external_react_namespaceObject.useState(value || '');
     external_react_namespaceObject.useEffect(()=>{
         if (void 0 !== value) setSearchValue(value);
@@ -102,33 +121,39 @@ const SearchWithSuggestions = /*#__PURE__*/ external_react_namespaceObject.forwa
         onChange?.(newValue);
         setOpen(newValue.length > 0);
     };
+    const isOpen = open && filteredSuggestions.length > 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         "data-slot": "search-with-suggestions",
         className: (0, index_cjs_namespaceObject.cn)('relative', className),
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
-            open: open && filteredSuggestions.length > 0,
+            open: isOpen,
             onOpenChange: setOpen,
             children: [
-                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverAnchor, {
                     asChild: true,
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        ref: anchorRef,
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Search, {
                             value: searchValue,
-                            onChange: handleInputChange,
-                            onClear: ()=>{
-                                setSearchValue('');
-                                onChange?.('');
-                                setOpen(false);
-                            },
+                            onValueChange: handleInputChange,
+                            onClick: ()=>setOpen(true),
                             placeholder: placeholder,
-                            strings: strings
+                            strings: strings,
+                            "aria-haspopup": "dialog",
+                            "aria-expanded": isOpen,
+                            "aria-controls": isOpen ? popupId : void 0
                         })
                     })
                 }),
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                    id: popupId,
                     className: "w-[--radix-popover-trigger-width] p-0",
                     align: "start",
+                    onOpenAutoFocus: (e)=>e.preventDefault(),
+                    onInteractOutside: (e)=>{
+                        if (anchorRef.current?.contains(e.target)) e.preventDefault();
+                    },
                     children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.Command, {
                         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandList, {
                             children: 0 === filteredSuggestions.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_command_cjs_namespaceObject.CommandEmpty, {

package/dist/components/ui/search.d.ts

@@ -5,9 +5,8 @@ export interface SearchStrings {
     clear: string;
 }
 export declare const DEFAULT_SEARCH_STRINGS: SearchStrings;
-export interface SearchProps extends Omit<InputGroupInputProps, 'onChange'> {
+interface SearchBaseProps extends Omit<InputGroupInputProps, 'onChange'> {
     value?: string;
-    onChange?: (value: string) => void;
     onClear?: () => void;
     showClearButton?: boolean;
     variant?: InputGroupProps['variant'];
@@ -19,6 +18,22 @@ export interface SearchProps extends Omit<InputGroupInputProps, 'onChange'> {
     /** Overrides for any subset of the built-in labels. */
     strings?: Partial<SearchStrings>;
 }
+/**
+ * Two modes:
+ * - Standard (new integrations; required with `asChild` wrappers like
+ *   cmdk `Command.Input` or Radix Slot): pass `onValueChange` for the
+ *   string value; `onChange` receives the native event.
+ * - Legacy (existing consumers): omit `onValueChange`;
+ *   `onChange` receives the string value.
+ */
+export type SearchProps = SearchBaseProps & ({
+    onValueChange: (value: string) => void;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+} | {
+    onValueChange?: undefined;
+    /** @deprecated Pass `onValueChange` instead; `onChange` will receive the native event. */
+    onChange?: (value: string) => void;
+});
 declare const Search: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
 export interface SearchWithSuggestionsProps {
     value?: string;

package/dist/components/ui/search.js

@@ -1,20 +1,37 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search, X } from "lucide-react";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "./command.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { cn } from "../../lib/index.js";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover.js";
+import { cn, composeRefs } from "../../lib/index.js";
 const DEFAULT_SEARCH_STRINGS = {
     clear: 'Clear'
 };
-const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, onClear, showClearButton = true, variant, size, error, errorId, strings, ...props }, ref)=>{
+const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, onValueChange, onClear, showClearButton = true, variant, size, error, errorId, strings, ...props }, ref)=>{
     const text = {
         ...DEFAULT_SEARCH_STRINGS,
         ...strings
     };
+    const inputRef = useRef(null);
+    const setRef = useMemo(()=>composeRefs(ref, inputRef), [
+        ref
+    ]);
+    const handleChange = (e)=>{
+        if (onValueChange) {
+            onChange?.(e);
+            onValueChange(e.target.value);
+        } else onChange?.(e.target.value);
+    };
     const handleClear = ()=>{
-        onChange?.('');
+        const input = inputRef.current;
+        if (input) {
+            Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, '');
+            input.dispatchEvent(new Event('input', {
+                bubbles: true
+            }));
+            input.focus();
+        }
         onClear?.();
     };
     return /*#__PURE__*/ jsxs(InputGroup, {
@@ -31,11 +48,11 @@ const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, on
                 })
             }),
             /*#__PURE__*/ jsx(InputGroupInput, {
-                ref: ref,
+                ref: setRef,
                 type: "search",
                 className: cn('[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none', className),
                 value: value,
-                onChange: (e)=>onChange?.(e.target.value),
+                onChange: handleChange,
                 ...props
             }),
             showClearButton && value && /*#__PURE__*/ jsx(InputGroupAddon, {
@@ -54,6 +71,8 @@ const search_Search = /*#__PURE__*/ forwardRef(({ className, value, onChange, on
 search_Search.displayName = 'Search';
 const SearchWithSuggestions = /*#__PURE__*/ forwardRef(({ value, onChange, placeholder = 'Search...', suggestions = [], onSelect, emptyMessage = 'No results found.', className, strings }, ref)=>{
     const [open, setOpen] = useState(false);
+    const anchorRef = useRef(null);
+    const popupId = useId();
     const [searchValue, setSearchValue] = useState(value || '');
     useEffect(()=>{
         if (void 0 !== value) setSearchValue(value);
@@ -72,33 +91,39 @@ const SearchWithSuggestions = /*#__PURE__*/ forwardRef(({ value, onChange, place
         onChange?.(newValue);
         setOpen(newValue.length > 0);
     };
+    const isOpen = open && filteredSuggestions.length > 0;
     return /*#__PURE__*/ jsx("div", {
         ref: ref,
         "data-slot": "search-with-suggestions",
         className: cn('relative', className),
         children: /*#__PURE__*/ jsxs(Popover, {
-            open: open && filteredSuggestions.length > 0,
+            open: isOpen,
             onOpenChange: setOpen,
             children: [
-                /*#__PURE__*/ jsx(PopoverTrigger, {
+                /*#__PURE__*/ jsx(PopoverAnchor, {
                     asChild: true,
                     children: /*#__PURE__*/ jsx("div", {
+                        ref: anchorRef,
                         children: /*#__PURE__*/ jsx(search_Search, {
                             value: searchValue,
-                            onChange: handleInputChange,
-                            onClear: ()=>{
-                                setSearchValue('');
-                                onChange?.('');
-                                setOpen(false);
-                            },
+                            onValueChange: handleInputChange,
+                            onClick: ()=>setOpen(true),
                             placeholder: placeholder,
-                            strings: strings
+                            strings: strings,
+                            "aria-haspopup": "dialog",
+                            "aria-expanded": isOpen,
+                            "aria-controls": isOpen ? popupId : void 0
                         })
                     })
                 }),
                 /*#__PURE__*/ jsx(PopoverContent, {
+                    id: popupId,
                     className: "w-[--radix-popover-trigger-width] p-0",
                     align: "start",
+                    onOpenAutoFocus: (e)=>e.preventDefault(),
+                    onInteractOutside: (e)=>{
+                        if (anchorRef.current?.contains(e.target)) e.preventDefault();
+                    },
                     children: /*#__PURE__*/ jsx(Command, {
                         children: /*#__PURE__*/ jsx(CommandList, {
                             children: 0 === filteredSuggestions.length ? /*#__PURE__*/ jsx(CommandEmpty, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.77.0",
+  "version": "2.78.0",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",