@rovula/ui 0.1.42 → 0.1.43

package/dist/esm/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/esm/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/index.d.ts

@@ -534,13 +534,15 @@ type AutoCompleteProps<T extends AutoCompleteOption = AutoCompleteOption> = {
     listboxClassName?: string;
     /** Extra inline styles applied to the options list container */
     listboxStyle?: React__default.CSSProperties;
+    /** Extra inline styles applied to the Popover content wrapper (portal mode only) */
+    popoverStyle?: React__default.CSSProperties;
     /** Extra className applied to each option item */
     optionClassName?: string;
     /** Extra inline styles applied to each option item */
     optionStyle?: React__default.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__default.ForwardedRef<HTMLInputElement>): 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__default.ForwardedRef<HTMLInputElement>): react_jsx_runtime.JSX.Element;
 declare const AutoComplete: <T extends AutoCompleteOption = AutoCompleteOption>(props: AutoCompleteProps<T> & {
     ref?: React__default.ForwardedRef<HTMLInputElement>;
 }) => ReturnType<typeof AutoCompleteInner>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.42",
+  "version": "0.1.43",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/AutoComplete/AutoComplete.tsx

@@ -115,6 +115,9 @@ export type AutoCompleteProps<
   /** 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;
 
@@ -151,6 +154,7 @@ function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>(
     portal = true,
     listboxClassName,
     listboxStyle,
+    popoverStyle,
     optionClassName,
     optionStyle,
     "data-testid": testId,
@@ -243,7 +247,8 @@ function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>(
       role="listbox"
       style={{ boxShadow: "var(--dropdown-menu-shadow)", ...listboxStyle }}
       className={cn(
-        "rounded-md border border-bg-stroke3 overflow-hidden",
+        "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]",
@@ -352,7 +357,7 @@ function AutoCompleteInner<T extends AutoCompleteOption = AutoCompleteOption>(
             side="bottom"
             align="start"
             sideOffset={-12}
-            style={{ width: "var(--radix-popover-trigger-width)" }}
+            style={{ width: "var(--radix-popover-trigger-width)", zIndex: 51, ...popoverStyle }}
           >
             {listContent}
           </PopoverPrimitive.Content>