@rovula/ui 0.1.27 → 0.1.29

package/src/components/Dropdown/Dropdown.tsx

@@ -79,6 +79,17 @@ export type DropdownProps = {
     selectedOption: Options | null | undefined;
     onClick: (option: Options) => void;
   }) => ReactNode;
+  /**
+   * When `true`, keep focus on the input after selecting an option so the
+   * menu stays open (useful for inline row-editing where the user may Tab
+   * to the next field instead of closing the dropdown).
+   */
+  keepOpenAfterSelect?: boolean;
+  /**
+   * Render the options list via a React portal so it escapes containers
+   * with `overflow: hidden/auto` (e.g. DataTable scroll wrappers).
+   */
+  portal?: boolean;
 } & Omit<InputProps, "value" | "onSelect">;
 
 // ---------------------------------------------------------------------------
@@ -110,6 +121,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       optionItemClassName,
       optionNotFoundItemClassName,
       segmentedInput = true,
+      keepOpenAfterSelect = false,
+      portal = false,
       ...props
     },
     ref,
@@ -142,12 +155,12 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         setQuery("");
         if (option) {
           onSelect?.(option);
-          // After selection Headless UI keeps focus on the input (via rAF refocus).
-          // Blur after that rAF so the next click triggers onFocus → immediate open.
-          setTimeout(() => inputRef.current?.blur(), 0);
+          if (!keepOpenAfterSelect) {
+            setTimeout(() => inputRef.current?.blur(), 0);
+          }
         }
       },
-      [onSelect],
+      [onSelect, keepOpenAfterSelect],
     );
 
     const handleInputChange = useCallback(
@@ -259,7 +272,6 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
                 />
               }
               label={label}
-              placeholder=" "
               autoComplete="off"
               rounded={rounded}
               variant={variant}
@@ -288,8 +300,12 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
              * z-[51] beats the Dialog overlay (z-50) for items that visually overflow.
              */}
             <ComboboxOptions
+              {...(portal
+                ? { portal: true, anchor: { to: "bottom start" as const, gap: 4 } }
+                : {})}
               className={cn(
-                "absolute top-full left-0 w-full -mt-3 z-[51]",
+                !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,

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -10,7 +10,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-10 flex gap-8 flex-wrap bg-workspace-surface min-h-screen">
+      <div className="p-10 flex gap-8 flex-wrap bg-page-bg-main min-h-screen">
         <Story />
       </div>
     ),
@@ -19,7 +19,10 @@ const meta = {
 
 export default meta;
 
-const ITEMS = Array.from({ length: 12 }, (_, i) => `Option Description ${i + 1}`);
+const ITEMS = Array.from(
+  { length: 12 },
+  (_, i) => `Option Description ${i + 1}`,
+);
 
 // ---------------------------------------------------------------------------
 // Size variants  (Figma: Size=M / S / XS)
@@ -32,6 +35,7 @@ export const Sizes = {
         <div key={size}>
           <p className="typography-small4 text-text-g-contrast-medium mb-2 uppercase">
             Size {size}
+            {size === "m" ? " (default)" : ""}
           </p>
           <ScrollArea
             scrollbarSize={size}
@@ -61,7 +65,9 @@ export const VerticalScroll = {
     <div>
       <p className="typography-small4 text-text-g-contrast-medium mb-2">
         Single scrollable list — use{" "}
-        <code className="text-xs">&lt;ScrollArea className="max-h-[...]"&gt;</code>
+        <code className="text-xs">
+          &lt;ScrollArea className="max-h-[...]"&gt;
+        </code>
       </p>
       <ScrollArea className="max-h-[270px] w-[230px] rounded-lg bg-modal-surface">
         {ITEMS.map((label) => (
@@ -227,3 +233,140 @@ export const WithDropdownMenu = {
     );
   },
 } satisfies StoryObj;
+
+// ---------------------------------------------------------------------------
+// Both axes — vertical + horizontal scroll simultaneously
+// ---------------------------------------------------------------------------
+
+const WIDE_COLS = [
+  "ID",
+  "Name",
+  "Category",
+  "Type",
+  "Format",
+  "Source",
+  "Default",
+  "Required",
+  "Nullable",
+  "Description",
+];
+const WIDE_ROWS = Array.from({ length: 30 }, (_, i) => ({
+  id: `ROW-${String(i + 1).padStart(3, "0")}`,
+  name: `item_name_${i + 1}`,
+  category: ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"][i % 5],
+  type: ["String", "Number", "Boolean", "Date", "Enum"][i % 5],
+  format: ["Text", "Integer", "true/false", "ISO 8601", "1–5"][i % 5],
+  source: ["System", "Manual", "Device", "Auth", "Import"][i % 5],
+  defaultVal: ["-", "auto", "true", "now()", "0"][i % 5],
+  required: i % 3 === 0 ? "Yes" : "No",
+  nullable: i % 2 === 0 ? "Yes" : "No",
+  description: `Description text for row ${i + 1}`,
+}));
+
+const WideContent = () => (
+  <div className="min-w-[800px]">
+    <div className="flex sticky top-0 z-10 bg-modal-surface border-b border-[var(--dropdown-menu-seperator-bg)]">
+      {WIDE_COLS.map((col) => (
+        <div
+          key={col}
+          className="shrink-0 w-[120px] px-3 py-2 typography-small2 text-text-g-contrast-medium whitespace-nowrap"
+        >
+          {col}
+        </div>
+      ))}
+    </div>
+    {WIDE_ROWS.map((row) => (
+      <div
+        key={row.id}
+        className="flex border-b border-[var(--dropdown-menu-seperator-bg)] hover:bg-[var(--transparent-grey2-8,rgba(145,158,171,0.08))] transition-colors"
+      >
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap font-medium">
+          {row.id}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.name}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.category}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.type}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.format}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.source}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.defaultVal}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.required}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.nullable}
+        </div>
+        <div className="shrink-0 w-[120px] px-3 py-2 typography-subtitle4 text-text-g-contrast-high whitespace-nowrap">
+          {row.description}
+        </div>
+      </div>
+    ))}
+  </div>
+);
+
+export const BothAxes = {
+  name: "Both Axes",
+  render: () => {
+    const cases: { label: string; xSize: string; ySize: string }[] = [
+      {
+        label: "X = M (16px)  +  Y = M (16px)  — same",
+        xSize: "ui-scrollbar-x-m",
+        ySize: "ui-scrollbar-y-m",
+      },
+      {
+        label: "X = S (10px)  +  Y = S (10px)  — same",
+        xSize: "ui-scrollbar-x-s",
+        ySize: "ui-scrollbar-y-s",
+      },
+      {
+        label: "X = XS (4px)  +  Y = XS (4px)  — same",
+        xSize: "ui-scrollbar-x-xs",
+        ySize: "ui-scrollbar-y-xs",
+      },
+      {
+        label: "X = M (16px)  +  Y = S (10px)  — mixed",
+        xSize: "ui-scrollbar-x-m",
+        ySize: "ui-scrollbar-y-s",
+      },
+      {
+        label: "X = S (10px)  +  Y = M (16px)  — mixed",
+        xSize: "ui-scrollbar-x-s",
+        ySize: "ui-scrollbar-y-m",
+      },
+      {
+        label: "X = M (16px)  +  Y = XS (4px)  — mixed",
+        xSize: "ui-scrollbar-x-m",
+        ySize: "ui-scrollbar-y-xs",
+      },
+    ];
+
+    return (
+      <div className="flex flex-col gap-8 w-full">
+        {cases.map(({ label, xSize, ySize }) => (
+          <div key={label} className="flex flex-col gap-2">
+            <p className="typography-subtitle4 text-text-g-contrast-high">
+              {label}
+            </p>
+            <ScrollArea
+              direction="both"
+              className={`h-[220px] w-[480px] rounded-lg bg-modal-surface ${xSize} ${ySize}`}
+            >
+              <WideContent />
+            </ScrollArea>
+          </div>
+        ))}
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/ScrollArea/ScrollArea.tsx

@@ -6,9 +6,9 @@ export type ScrollbarSize = "m" | "s" | "xs";
 export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Scrollbar thickness.
-   * - `m`  — 12 px  (shows track border)
-   * - `s`  — 6 px   (default, shows no track border)
-   * - `xs` — 2 px   (shows no track border)
+   * - `m`  — 12 px  (default, shows track border + 2px thumb inset)
+   * - `s`  — 6 px   (shows track border + 2px thumb inset)
+   * - `xs` — 2 px   (no track border, no thumb inset)
    */
   scrollbarSize?: ScrollbarSize;
   /**
@@ -19,8 +19,8 @@ export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const sizeClass: Record<ScrollbarSize, string> = {
-  m: "ui-scrollbar ui-scrollbar-m",
-  s: "ui-scrollbar ui-scrollbar-s",
+  m:  "ui-scrollbar",            // default = M, no extra class needed
+  s:  "ui-scrollbar ui-scrollbar-s",
   xs: "ui-scrollbar ui-scrollbar-xs",
 };
 
@@ -53,7 +53,7 @@ const directionClass: Record<NonNullable<ScrollAreaProps["direction"]>, string>
  */
 export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
   (
-    { className, scrollbarSize = "s", direction = "vertical", children, ...props },
+    { className, scrollbarSize = "m", direction = "vertical", children, ...props },
     ref
   ) => (
     <div