@rovula/ui 0.1.42 → 0.1.44

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);

package/dist/components/Badge/Badge.styles.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 export const badgeVariants = cva([
-    "inline-flex items-center justify-center rounded-lg px-3 py-1",
+    "inline-flex items-center justify-center rounded-[6px] px-3 py-1",
     "typography-body3",
 ], {
     variants: {
@@ -44,7 +44,7 @@ export const badgeVariants = cva([
     },
 });
 export const severityBadgeVariants = cva([
-    "inline-flex items-center justify-center rounded px-1 py-0.5",
+    "inline-flex items-center justify-center rounded-[4px] px-1 py-0.5",
     "typography-small6 text-[var(--badge-severity-text)]",
 ], {
     variants: {

package/dist/components/DataTable/DataTable.editing.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import TextInput from "@/components/TextInput/TextInput";
 import NumberInput from "@/components/NumberInput";
 import { Checkbox } from "@/components/Checkbox/Checkbox";
@@ -295,6 +295,22 @@ function EditCellText({ columnId, row, placeholder, autoFocus, errorMessage, onB
 }
 function EditCellSelect({ row, columnId, col, autoFocus, onCommit, onBlurField, onKeyDown, keepOpenAfterSelect, errorMessage, }) {
     var _a, _b, _c, _d, _e;
+    const selectRef = useRef(null);
+    // Cell mode: React's `autoFocus` fires el.focus() during the commit phase,
+    // which causes Headless UI's flushSync-inside-microTask to run while React
+    // is still committing → silent failure in concurrent mode. Delay focus to a
+    // rAF (same approach as row-mode Tab navigation) so it fires safely after
+    // the commit. Cancel on cleanup so StrictMode's double-mount is safe.
+    useEffect(() => {
+        if (!autoFocus)
+            return;
+        const el = selectRef.current;
+        if (!el)
+            return;
+        const rafId = requestAnimationFrame(() => el.focus());
+        return () => cancelAnimationFrame(rafId);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const displayValue = String((_a = row.original[columnId]) !== null && _a !== void 0 ? _a : "");
     const rawOptions = typeof ((_b = col.editSelectProps) === null || _b === void 0 ? void 0 : _b.options) === "function"
         ? col.editSelectProps.options(row)
@@ -311,11 +327,11 @@ function EditCellSelect({ row, columnId, col, autoFocus, onCommit, onBlurField,
             return options[0];
         return (_a = options.find((o) => o.label === cur)) !== null && _a !== void 0 ? _a : options[0];
     }, [displayValue, options]);
-    return (_jsx("div", { children: _jsx(Dropdown, { id: `edit-dd-${columnId}-${row.id}`, options: options, value: selected, onSelect: (opt) => {
+    return (_jsx("div", { children: _jsx(Dropdown, { id: `edit-dd-${columnId}-${row.id}`, ref: selectRef, options: options, value: selected, onSelect: (opt) => {
                 if (isPlaceholderOption(opt))
                     return;
                 onCommit(opt.label);
-            }, size: "sm", variant: "outline", rounded: "normal", fullwidth: true, required: false, isFloatingLabel: false, label: "", keepFooterSpace: false, segmentedInput: true, autoFocus: autoFocus, onBlur: onBlurField, onKeyDown: onKeyDown, keepOpenAfterSelect: keepOpenAfterSelect, portal: true, error: !!errorMessage, errorMessage: errorMessage, className: cn("rounded-md", customInputVariant({ size: "sm" }), displayValue.trim().length > 0 && "font-medium") }) }));
+            }, size: "sm", variant: "outline", rounded: "normal", fullwidth: true, required: false, isFloatingLabel: false, label: "", keepFooterSpace: false, segmentedInput: true, autoFocus: false, onBlur: onBlurField, onKeyDown: onKeyDown, keepOpenAfterSelect: keepOpenAfterSelect, portal: true, error: !!errorMessage, errorMessage: errorMessage, className: cn("rounded-md", customInputVariant({ size: "sm" }), displayValue.trim().length > 0 && "font-medium") }) }));
 }
 // ---------------------------------------------------------------------------
 // EditCellNumber — inline number editor

package/dist/components/Dropdown/Dropdown.js

@@ -84,7 +84,10 @@ const Dropdown = forwardRef((_a, ref) => {
         });
     };
     return (_jsx(Combobox, { value: selectedOption, onChange: handleSelect, immediate: true, by: "value", disabled: disabled, children: ({ open }) => (_jsxs("div", { className: cn("relative", fullwidth && "w-full"), children: [_jsx(ComboboxInput, Object.assign({ as: TextInput, ref: inputRef, hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: open }) }), label: label, autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: segmentedInput ? customInputVariant({ size }) : undefined, displayValue: (opt) => { var _a; return (_a = opt === null || opt === void 0 ? void 0 : opt.label) !== null && _a !== void 0 ? _a : ""; }, readOnly: !filterMode, onChange: handleInputChange }, props)), _jsx(ComboboxOptions, Object.assign({}, (portal
-                    ? { portal: true, anchor: { to: "bottom start", gap: 4 } }
+                    ? {
+                        portal: true,
+                        anchor: { to: "bottom start", gap: 4 },
+                    }
                     : {}), { className: cn(!portal && "absolute top-full left-0 w-full -mt-3 z-[51]", portal && "z-[51] !max-h-60 w-[var(--input-width)]", "min-w-[154px] max-h-60 overflow-y-auto", "rounded-md bg-modal-dropdown-surface border border-bg-stroke3 text-text-g-contrast-high", optionContainerClassName), style: { boxShadow: "var(--dropdown-menu-shadow)" }, children: renderOptionList() }))] })) }));
 });
 Dropdown.displayName = "Dropdown";

package/dist/esm/bundle.css

@@ -1629,6 +1629,12 @@ input[type=number] {
 .rounded-\[2px\]{
   border-radius: 2px;
 }
+.rounded-\[4px\]{
+  border-radius: 4px;
+}
+.rounded-\[6px\]{
+  border-radius: 6px;
+}
 .rounded-\[8px\]{
   border-radius: 8px;
 }