@rovula/ui 0.1.42 → 0.1.43

package/dist/cjs/types/components/AutoComplete/AutoComplete.d.ts

@@ -61,13 +61,15 @@ export type AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOption>
     listboxClassName?: string;
     /** Extra inline styles applied to the options list container */
     listboxStyle?: React.CSSProperties;
+    /** Extra inline styles applied to the Popover content wrapper (portal mode only) */
+    popoverStyle?: React.CSSProperties;
     /** Extra className applied to each option item */
     optionClassName?: string;
     /** Extra inline styles applied to each option item */
     optionStyle?: React.CSSProperties;
     "data-testid"?: string;
 } & Omit<InputProps, OmittedInputProps>;
-declare function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: AutoCompleteProps<T>, ref: React.ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
+declare function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, popoverStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: AutoCompleteProps<T>, ref: React.ForwardedRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
 declare const AutoComplete: <T extends AutoCompleteOption = AutoCompleteOption>(props: AutoCompleteProps<T> & {
     ref?: React.ForwardedRef<HTMLInputElement>;
 }) => ReturnType<typeof AutoCompleteInner>;

package/dist/cjs/types/components/AutoComplete/AutoComplete.stories.d.ts

@@ -5,7 +5,7 @@ declare const meta: {
     title: string;
     component: <T extends AutoCompleteOption = AutoCompleteOption>(props: import("./AutoComplete").AutoCompleteProps<T> & {
         ref?: React.ForwardedRef<HTMLInputElement>;
-    }) => ReturnType<(<T_1 extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: import("./AutoComplete").AutoCompleteProps<T_1>, ref: React.ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element)>;
+    }) => ReturnType<(<T_1 extends AutoCompleteOption = AutoCompleteOption>({ options, value, onChange, onSelect, onBlur, onSearch, loading, noOptionsText, showNoOptions, renderOption, filterOptions, portal, listboxClassName, listboxStyle, popoverStyle, optionClassName, optionStyle, "data-testid": testId, id, label, fullwidth, size, rounded, variant, disabled, ...rest }: import("./AutoComplete").AutoCompleteProps<T_1>, ref: React.ForwardedRef<HTMLInputElement>) => import("react/jsx-runtime").JSX.Element)>;
     tags: string[];
     parameters: {
         layout: string;
@@ -25,6 +25,7 @@ declare const meta: {
         portal?: boolean | undefined;
         listboxClassName?: string | undefined;
         listboxStyle?: React.CSSProperties | undefined;
+        popoverStyle?: React.CSSProperties | undefined;
         optionClassName?: string | undefined;
         optionStyle?: React.CSSProperties | undefined;
         "data-testid"?: string | undefined;

package/dist/components/AutoComplete/AutoComplete.js

@@ -26,9 +26,9 @@ function AutoCompleteInner(_a, ref) {
     var _b;
     var { 
     // AutoComplete-specific props
-    options, value = "", onChange, onSelect, onBlur, onSearch, loading = false, noOptionsText = "No results", showNoOptions = false, renderOption, filterOptions = (x) => x, portal = true, listboxClassName, listboxStyle, optionClassName, optionStyle, "data-testid": testId, 
+    options, value = "", onChange, onSelect, onBlur, onSearch, loading = false, noOptionsText = "No results", showNoOptions = false, renderOption, filterOptions = (x) => x, portal = true, listboxClassName, listboxStyle, popoverStyle, optionClassName, optionStyle, "data-testid": testId, 
     // InputProps with explicit defaults (rest passes everything else through)
-    id, label, fullwidth = true, size = "md", rounded = "normal", variant = "outline", disabled } = _a, rest = __rest(_a, ["options", "value", "onChange", "onSelect", "onBlur", "onSearch", "loading", "noOptionsText", "showNoOptions", "renderOption", "filterOptions", "portal", "listboxClassName", "listboxStyle", "optionClassName", "optionStyle", "data-testid", "id", "label", "fullwidth", "size", "rounded", "variant", "disabled"]);
+    id, label, fullwidth = true, size = "md", rounded = "normal", variant = "outline", disabled } = _a, rest = __rest(_a, ["options", "value", "onChange", "onSelect", "onBlur", "onSearch", "loading", "noOptionsText", "showNoOptions", "renderOption", "filterOptions", "portal", "listboxClassName", "listboxStyle", "popoverStyle", "optionClassName", "optionStyle", "data-testid", "id", "label", "fullwidth", "size", "rounded", "variant", "disabled"]);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
     const inputRef = useRef(null);
@@ -85,7 +85,7 @@ function AutoCompleteInner(_a, ref) {
             setActiveIndex(-1);
         }
     }, [open, activeIndex, filteredOptions, commitSelection]);
-    const listContent = (_jsx("div", { role: "listbox", style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, listboxStyle), className: cn("rounded-md border border-bg-stroke3 overflow-hidden", "bg-modal-dropdown-surface text-text-g-contrast-high", !portal && "absolute top-full left-0 w-full -mt-3 z-[51]", portal && "z-[51]", listboxClassName), "data-testid": testId ? `${testId}-listbox` : undefined, children: loading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Loading, { size: 20 }) })) : filteredOptions.length === 0 ? (_jsx("div", { className: "px-4 py-6 text-center", children: _jsx(Text, { variant: "small1", className: "text-[var(--dropdown-menu-default-text)]", children: noOptionsText }) })) : (filteredOptions.map((option, index) => {
+    const listContent = (_jsx("div", { role: "listbox", style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, listboxStyle), className: cn("max-h-60 overflow-y-auto", "rounded-md border border-bg-stroke3", "bg-modal-dropdown-surface text-text-g-contrast-high", !portal && "absolute top-full left-0 w-full -mt-3 z-[51]", portal && "z-[51]", listboxClassName), "data-testid": testId ? `${testId}-listbox` : undefined, children: loading ? (_jsx("div", { className: "flex items-center justify-center py-6", children: _jsx(Loading, { size: 20 }) })) : filteredOptions.length === 0 ? (_jsx("div", { className: "px-4 py-6 text-center", children: _jsx(Text, { variant: "small1", className: "text-[var(--dropdown-menu-default-text)]", children: noOptionsText }) })) : (filteredOptions.map((option, index) => {
             const isSelected = option.value === value;
             const isActive = index === activeIndex;
             return (_jsxs("button", { id: `autocomplete-option-${option.value}`, type: "button", role: "option", "aria-selected": isSelected, style: optionStyle, className: cn(menuItemBaseStyles, "w-full", isSelected &&
@@ -95,7 +95,7 @@ function AutoCompleteInner(_a, ref) {
         })) }));
     return (_jsxs(PopoverPrimitive.Root, { open: showPopover, children: [_jsx(PopoverPrimitive.Anchor, { asChild: true, children: _jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(TextInput, Object.assign({}, rest, { ref: ref !== null && ref !== void 0 ? ref : inputRef, id: id, label: label, value: value, size: size, rounded: rounded, variant: variant, disabled: disabled, fullwidth: fullwidth, autoComplete: "off", role: "combobox", "aria-expanded": showPopover, "aria-autocomplete": "list", "aria-activedescendant": activeIndex >= 0
                                 ? `autocomplete-option-${(_b = filteredOptions[activeIndex]) === null || _b === void 0 ? void 0 : _b.value}`
-                                : undefined, hasClearIcon: true, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "data-testid": testId })), showPopover && !portal && listContent] }) }), portal && (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { onOpenAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => e.preventDefault(), onFocusOutside: (e) => e.preventDefault(), side: "bottom", align: "start", sideOffset: -12, style: { width: "var(--radix-popover-trigger-width)" }, children: listContent }) }))] }));
+                                : undefined, hasClearIcon: true, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "data-testid": testId })), showPopover && !portal && listContent] }) }), portal && (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { onOpenAutoFocus: (e) => e.preventDefault(), onInteractOutside: (e) => e.preventDefault(), onFocusOutside: (e) => e.preventDefault(), side: "bottom", align: "start", sideOffset: -12, style: Object.assign({ width: "var(--radix-popover-trigger-width)", zIndex: 51 }, popoverStyle), children: listContent }) }))] }));
 }
 // forwardRef with generics requires a manual cast
 const AutoComplete = forwardRef(AutoCompleteInner);