@rovula/ui 0.1.43 → 0.1.44

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