@rovula/ui 0.1.42 → 0.1.44

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/dist/src/theme/global.css

@@ -830,13 +830,13 @@
   --bg-bg1-skyller: #ffffff;
   --bg-bg2-xspector: #0a1b2e;
   --bg-bg2-report-xspector-light-mode: #ffffff;
-  --bg-bg2-skyller: #f8fbff;
+  --bg-bg2-skyller: #eff6fe;
   --bg-bg3-xspector: #0e2841;
   --bg-bg3-report-xspector-light-mode: #ffffff;
-  --bg-bg3-skyller: #f8fbff;
+  --bg-bg3-skyller: #dfedfe;
   --bg-stroke1-xspector: #1c3955;
   --bg-stroke1-report-xspector-light-mode: #e2e2e2;
-  --bg-stroke1-skyller: #ececec;
+  --bg-stroke1-skyller: #afd2fd;
   --bg-stroke2-xspector: #294664;
   --bg-stroke2-report-xspector-light-mode: #e5e5e5;
   --bg-stroke2-skyller: #e5e5e5;
@@ -878,7 +878,7 @@
   --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
-  --function-default-stroke-skyller: rgba(0 0 0 / 0.48);
+  --function-default-stroke-skyller: rgba(158 158 158 / 0.48);
   --function-default-icon-xspector: #212b36;
   --function-default-icon-report-xspector-light-mode: #ffffff;
   --function-default-icon-skyller: #ffffff;
@@ -1046,7 +1046,7 @@
   --bg-bg5-skyller: #000000;
   --bg-stroke3-xspector: #2d2e30;
   --bg-stroke3-report-xspector-light-mode: #e5e5e5;
-  --bg-stroke3-skyller: #d4d4d4;
+  --bg-stroke3-skyller: #afd2fd;
   --bg-stroke4-xspector: #000000;
   --bg-stroke4-report-xspector-light-mode: #000000;
   --bg-stroke4-skyller: #000000;
@@ -1058,7 +1058,7 @@
   --table-bg-main-skyller: #bfdbfd;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
-  --table-bg-line-skyller: #ececec;
+  --table-bg-line-skyller: #dfedfe;
   --table-bg-a-xspector: #0c2845;
   --table-bg-a-report-xspector-light-mode: #f3f3f3;
   --table-bg-a-skyller: #fdfdfd;
@@ -1073,10 +1073,10 @@
   --table-bg-hover-skyller: #cfe4fd;
   --table-panel-sub-line-xspector: #393b3f;
   --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-sub-line-skyller: #ececec;
+  --table-panel-sub-line-skyller: #bfdbfd;
   --table-panel-main-line-xspector: #606b77;
   --table-panel-main-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-main-line-skyller: #d4d4d4;
+  --table-panel-main-line-skyller: #60a5fa;
   --table-panel-selected-xspector: #6f6700;
   --table-panel-selected-report-xspector-light-mode: #d4d4d4;
   --table-panel-selected-skyller: #afd2fd;
@@ -3153,7 +3153,7 @@
   /* Hover overlay on body rows.                                        */
   --table-c-hover: var(--table-bg-hover);
   /* Selected row overlay (data-state="selected" on <tr>).              */
-  --table-c-selected: var(--transparent-primary-12);
+  --table-c-selected: color-mix(in srgb, var(--table-panel-selected) 24%, transparent);
 }
 
 /* ------------------------------------------------------------------ */
@@ -5178,6 +5178,14 @@ input[type=number] {
   border-radius: 2px;
 }
 
+.rounded-\[4px\] {
+  border-radius: 4px;
+}
+
+.rounded-\[6px\] {
+  border-radius: 6px;
+}
+
 .rounded-\[8px\] {
   border-radius: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.42",
+  "version": "0.1.44",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",
@@ -87,7 +87,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@headlessui/react": "^2.0.3",
+    "@headlessui/react": "^2.2.10",
     "@heroicons/react": "^2.1.3",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",

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>

package/src/components/Badge/Badge.styles.ts

@@ -2,7 +2,7 @@ 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",
   ],
   {
@@ -50,7 +50,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)]",
   ],
   {

package/src/components/DataTable/DataTable.editing.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ColumnDef, Row, RowData } from "@tanstack/react-table";
 
 import TextInput from "@/components/TextInput/TextInput";
@@ -562,6 +562,22 @@ function EditCellSelect<TData extends RowData>({
   keepOpenAfterSelect?: boolean;
   errorMessage?: string;
 }) {
+  const selectRef = useRef<HTMLInputElement>(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(
     (row.original as Record<string, unknown>)[columnId] ?? "",
   );
@@ -586,6 +602,7 @@ function EditCellSelect<TData extends RowData>({
     <div>
       <Dropdown
         id={`edit-dd-${columnId}-${row.id}`}
+        ref={selectRef}
         options={options}
         value={selected}
         onSelect={(opt) => {
@@ -601,7 +618,7 @@ function EditCellSelect<TData extends RowData>({
         label=""
         keepFooterSpace={false}
         segmentedInput
-        autoFocus={autoFocus}
+        autoFocus={false}
         onBlur={onBlurField}
         onKeyDown={onKeyDown}
         keepOpenAfterSelect={keepOpenAfterSelect}

package/src/components/Dropdown/Dropdown.tsx

@@ -301,7 +301,10 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
              */}
             <ComboboxOptions
               {...(portal
-                ? { portal: true, anchor: { to: "bottom start" as const, gap: 4 } }
+                ? {
+                    portal: true,
+                    anchor: { to: "bottom start" as const, gap: 4 },
+                  }
                 : {})}
               className={cn(
                 !portal && "absolute top-full left-0 w-full -mt-3 z-[51]",

package/src/theme/themes/variable.css

@@ -830,13 +830,13 @@
   --bg-bg1-skyller: #ffffff;
   --bg-bg2-xspector: #0a1b2e;
   --bg-bg2-report-xspector-light-mode: #ffffff;
-  --bg-bg2-skyller: #f8fbff;
+  --bg-bg2-skyller: #eff6fe;
   --bg-bg3-xspector: #0e2841;
   --bg-bg3-report-xspector-light-mode: #ffffff;
-  --bg-bg3-skyller: #f8fbff;
+  --bg-bg3-skyller: #dfedfe;
   --bg-stroke1-xspector: #1c3955;
   --bg-stroke1-report-xspector-light-mode: #e2e2e2;
-  --bg-stroke1-skyller: #ececec;
+  --bg-stroke1-skyller: #afd2fd;
   --bg-stroke2-xspector: #294664;
   --bg-stroke2-report-xspector-light-mode: #e5e5e5;
   --bg-stroke2-skyller: #e5e5e5;
@@ -878,7 +878,7 @@
   --function-default-hover-bg-skyller: rgba(23 23 23 / 0.08);
   --function-default-stroke-xspector: rgba(158 158 158 / 0.24);
   --function-default-stroke-report-xspector-light-mode: rgba(30 50 73 / 0.48);
-  --function-default-stroke-skyller: rgba(0 0 0 / 0.48);
+  --function-default-stroke-skyller: rgba(158 158 158 / 0.48);
   --function-default-icon-xspector: #212b36;
   --function-default-icon-report-xspector-light-mode: #ffffff;
   --function-default-icon-skyller: #ffffff;
@@ -1046,7 +1046,7 @@
   --bg-bg5-skyller: #000000;
   --bg-stroke3-xspector: #2d2e30;
   --bg-stroke3-report-xspector-light-mode: #e5e5e5;
-  --bg-stroke3-skyller: #d4d4d4;
+  --bg-stroke3-skyller: #afd2fd;
   --bg-stroke4-xspector: #000000;
   --bg-stroke4-report-xspector-light-mode: #000000;
   --bg-stroke4-skyller: #000000;
@@ -1058,7 +1058,7 @@
   --table-bg-main-skyller: #bfdbfd;
   --table-bg-line-xspector: #1c3955;
   --table-bg-line-report-xspector-light-mode: #d2d2d2;
-  --table-bg-line-skyller: #ececec;
+  --table-bg-line-skyller: #dfedfe;
   --table-bg-a-xspector: #0c2845;
   --table-bg-a-report-xspector-light-mode: #f3f3f3;
   --table-bg-a-skyller: #fdfdfd;
@@ -1073,10 +1073,10 @@
   --table-bg-hover-skyller: #cfe4fd;
   --table-panel-sub-line-xspector: #393b3f;
   --table-panel-sub-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-sub-line-skyller: #ececec;
+  --table-panel-sub-line-skyller: #bfdbfd;
   --table-panel-main-line-xspector: #606b77;
   --table-panel-main-line-report-xspector-light-mode: #d4d4d4;
-  --table-panel-main-line-skyller: #d4d4d4;
+  --table-panel-main-line-skyller: #60a5fa;
   --table-panel-selected-xspector: #6f6700;
   --table-panel-selected-report-xspector-light-mode: #d4d4d4;
   --table-panel-selected-skyller: #afd2fd;

package/src/theme/tokens/components/table.css

@@ -40,7 +40,7 @@
   --table-c-hover: var(--table-bg-hover);
 
   /* Selected row overlay (data-state="selected" on <tr>).              */
-  --table-c-selected: var(--transparent-primary-12);
+  --table-c-selected: color-mix(in srgb, var(--table-panel-selected) 24%, transparent);
 }
 
 /* ------------------------------------------------------------------ */