@uipath/apollo-wind 2.77.0 → 2.79.0

package/dist/components/ui/index.cjs

@@ -33,7 +33,7 @@ var __webpack_modules__ = {
     "./button-group" (module) {
         module.exports = require("./button-group.cjs");
     },
-    "@/components/ui/button" (module) {
+    "./button" (module) {
         module.exports = require("./button.cjs");
     },
     "@/components/ui/calendar" (module) {
@@ -81,7 +81,7 @@ var __webpack_modules__ = {
     "./datetime-picker" (module) {
         module.exports = require("./datetime-picker.cjs");
     },
-    "./dialog" (module) {
+    "@/components/ui/dialog" (module) {
         module.exports = require("./dialog.cjs");
     },
     "./disclosure-tree" (module) {
@@ -117,7 +117,7 @@ var __webpack_modules__ = {
     "./form-field" (module) {
         module.exports = require("./form-field.cjs");
     },
-    "@/components/ui/hover-card" (module) {
+    "./hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
     "./info-tooltip" (module) {
@@ -249,7 +249,7 @@ var __webpack_modules__ = {
     "./switch" (module) {
         module.exports = require("./switch.cjs");
     },
-    "./table" (module) {
+    "@/components/ui/table" (module) {
         module.exports = require("./table.cjs");
     },
     "./tabs" (module) {
@@ -270,7 +270,7 @@ var __webpack_modules__ = {
     "./tool-call" (module) {
         module.exports = require("./tool-call.cjs");
     },
-    "@/components/ui/tooltip" (module) {
+    "./tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./tree-view" (module) {
@@ -432,7 +432,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_bubble__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _button__rspack_import_10 = __webpack_require__("@/components/ui/button");
+    var _button__rspack_import_10 = __webpack_require__("./button");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _button__rspack_import_10)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__("./dialog");
+    var _dialog__rspack_import_27 = __webpack_require__("@/components/ui/dialog");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _dialog__rspack_import_27)if ([
         "getReferenceChipColors",
@@ -722,7 +722,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_form_field__rspack_import_38[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _hover_card__rspack_import_39 = __webpack_require__("@/components/ui/hover-card");
+    var _hover_card__rspack_import_39 = __webpack_require__("./hover-card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _hover_card__rspack_import_39)if ([
         "getReferenceChipColors",
@@ -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__("./table");
+    var _table__rspack_import_83 = __webpack_require__("@/components/ui/table");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _table__rspack_import_83)if ([
         "getReferenceChipColors",
@@ -1214,7 +1214,7 @@ var __webpack_exports__ = {};
         "ReferenceChip"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tool_call__rspack_import_89[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_90 = __webpack_require__("@/components/ui/tooltip");
+    var _tooltip__rspack_import_90 = __webpack_require__("./tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_90)if ([
         "getReferenceChipColors",

package/dist/components/ui/input.cjs

@@ -52,7 +52,7 @@ const Input = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ 'aria-d
         ...props,
         ...validation.aria,
         disabled: props.disabled || group.disabled,
-        className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:focus-visible:ring-primary future:aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
+        className: (0, utils_cjs_namespaceObject.cn)('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:focus-visible:ring-primary future:aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'none' === variant && 'border-0 bg-transparent shadow-none', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
         ref: ref
     });
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    variant?: 'default' | 'ghost';
+    /** `none` paints no box in any theme, for a caller whose `className` draws its own. */
+    variant?: 'default' | 'ghost' | 'none';
     size?: 'default' | 'xs';
     /**
      * Field-specific feedback rendered immediately below the input.

package/dist/components/ui/input.js

@@ -24,7 +24,7 @@ const Input = /*#__PURE__*/ forwardRef(({ 'aria-describedby': ariaDescribedBy, '
         ...props,
         ...validation.aria,
         disabled: props.disabled || group.disabled,
-        className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:focus-visible:ring-primary future:aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
+        className: cn('flex w-full transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring read-only:cursor-default disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:focus-visible:ring-primary future:aria-invalid:focus-visible:ring-error', 'default' === size && 'h-9 rounded-md px-3 py-1 text-base placeholder:text-muted-foreground md:text-sm', 'xs' === size && 'h-6 rounded px-2 text-xs placeholder:text-muted-foreground', 'default' === variant && 'border border-input bg-transparent', 'ghost' === variant && 'border-0 bg-surface-overlay', 'none' === variant && 'border-0 bg-transparent shadow-none', 'default' === variant && 'default' === size && 'future:h-10 future:rounded-xl future:border-0 future:bg-surface-overlay future:py-2 future:text-sm future:placeholder:text-foreground-muted future:placeholder:font-normal future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', group.inGroup && IN_GROUP_CLASS, className),
         ref: ref
     });
     return /*#__PURE__*/ jsxs(Fragment, {

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

@@ -1271,6 +1271,9 @@
   .h-\[22px\] {
     height: 22px;
   }
+  .h-\[34px\] {
+    height: 34px;
+  }
   .h-\[42px\] {
     height: 42px;
   }

package/package.json

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