@uipath/apollo-wind 2.76.1 → 2.78.0

package/dist/components/ui/index.cjs

@@ -36,10 +36,10 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "./calendar" (module) {
+    "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "@/components/ui/card" (module) {
+    "./card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
@@ -81,7 +81,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "@/components/ui/dialog" (module) {
+    "./dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./disclosure-tree" (module) {
@@ -90,13 +90,13 @@ var __webpack_modules__ = {
     "./drawer" (module) {
         module.exports = require("./drawer.cjs");
     },
-    "@/components/ui/dropdown-menu" (module) {
+    "./dropdown-menu" (module) {
         module.exports = require("./dropdown-menu.cjs");
     },
     "./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) {
@@ -120,7 +120,7 @@ var __webpack_modules__ = {
     "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "@/components/ui/info-tooltip" (module) {
+    "./info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
     "@/components/ui/input-group" (module) {
@@ -135,7 +135,7 @@ var __webpack_modules__ = {
     "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
-    "@/components/ui/layout" (module) {
+    "./layout" (module) {
         module.exports = require("./layout/index.cjs");
     },
     "./live-region" (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) {
@@ -249,13 +249,13 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "@/components/ui/table" (module) {
+    "./table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "@/components/ui/textarea" (module) {
+    "./textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./thinking-indicator" (module) {
@@ -264,7 +264,7 @@ var __webpack_modules__ = {
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "@/components/ui/toggle" (module) {
+    "./toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
     "./tool-call" (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) {
@@ -452,7 +452,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_12 = __webpack_require__("./calendar");
+    var _calendar__rspack_import_12 = __webpack_require__("@/components/ui/calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_12)if ([
         "getReferenceChipColors",
@@ -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",
@@ -602,7 +602,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_datetime_picker__rspack_import_26[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dialog__rspack_import_27 = __webpack_require__("@/components/ui/dialog");
+    var _dialog__rspack_import_27 = __webpack_require__("./dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_27)if ([
         "getReferenceChipColors",
@@ -632,7 +632,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_drawer__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _dropdown_menu__rspack_import_30 = __webpack_require__("@/components/ui/dropdown-menu");
+    var _dropdown_menu__rspack_import_30 = __webpack_require__("./dropdown-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dropdown_menu__rspack_import_30)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",
@@ -732,7 +732,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_39[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _info_tooltip__rspack_import_40 = __webpack_require__("@/components/ui/info-tooltip");
+    var _info_tooltip__rspack_import_40 = __webpack_require__("./info-tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _info_tooltip__rspack_import_40)if ([
         "getReferenceChipColors",
@@ -782,7 +782,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_label__rspack_import_44[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _layout__rspack_import_45 = __webpack_require__("@/components/ui/layout");
+    var _layout__rspack_import_45 = __webpack_require__("./layout");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _layout__rspack_import_45)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 = {};
@@ -1144,7 +1144,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_switch__rspack_import_82[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _table__rspack_import_83 = __webpack_require__("@/components/ui/table");
+    var _table__rspack_import_83 = __webpack_require__("./table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_83)if ([
         "getReferenceChipColors",
@@ -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",
@@ -1184,7 +1184,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_thinking_indicator__rspack_import_86[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_87 = __webpack_require__("@/components/ui/toggle");
+    var _toggle__rspack_import_87 = __webpack_require__("./toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_87)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/quick-form-field/quick-form-field.cjs

@@ -283,8 +283,10 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         onBlur: onValueBlur
     }) : 'textarea' === fieldType ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupTextarea, {
         ...textInputProps,
-        minRows: 3,
-        maxRows: 8
+        rows: 1,
+        minRows: 1,
+        maxRows: 8,
+        className: "py-[3px] future:py-0.5"
     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_group_cjs_namespaceObject.InputGroupInput, {
         ...textInputProps,
         type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',

package/dist/components/ui/quick-form-field/quick-form-field.js

@@ -255,8 +255,10 @@ function QuickFormField({ value = '', onValueChange, onValueBlur, locked = true,
         onBlur: onValueBlur
     }) : 'textarea' === fieldType ? /*#__PURE__*/ jsx(InputGroupTextarea, {
         ...textInputProps,
-        minRows: 3,
-        maxRows: 8
+        rows: 1,
+        minRows: 1,
+        maxRows: 8,
+        className: "py-[3px] future:py-0.5"
     }) : /*#__PURE__*/ jsx(InputGroupInput, {
         ...textInputProps,
         type: 'integer' === fieldType || 'double' === fieldType ? 'number' : 'text',

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/dist/styles.css

@@ -4426,6 +4426,9 @@
   .py-20 {
     padding-block: calc(var(--spacing) * 20);
   }
+  .py-\[3px\] {
+    padding-block: 3px;
+  }
   .py-\[5px\] {
     padding-block: 5px;
   }

package/package.json

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