@elabs-ai/components-ui 4.0.0 → 4.2.0

package/src/components/navigation-menu/navigation-menu.tsx

@@ -1,22 +1,167 @@
-import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from "react";
+"use client";
+
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type PointerEvent as ReactPointerEvent,
+} from "react";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { cva } from "class-variance-authority";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../../lib/cn";
 
+/**
+ * Residual of #54 (issue #85, fix round 1 → round 2): a pointer move onto a
+ * trigger arms `@radix-ui/react-navigation-menu`'s root-level hover-intent
+ * open timer (`openTimerRef`, default `delayDuration` 200ms — confirmed
+ * unchanged through `@radix-ui/react-navigation-menu@1.2.22`, the current
+ * latest stable). Neither the click-open path (root `onItemSelect`) nor any
+ * dismiss path (Escape, outside-click, focus-out — all funnelled through one
+ * `ROOT_CONTENT_DISMISS` handler → `onItemDismiss`) clears that timer, so it
+ * fires later and silently reopens the panel even after an explicit
+ * dismissal.
+ *
+ * Round 1 ran Radix's own `onTriggerLeave` cancellation path (a synthetic
+ * `pointerout`) on every click. That clears the stray open timer, but
+ * `onTriggerLeave` does two things, not one — it ALSO unconditionally arms
+ * Radix's 150ms close timer (`startCloseTimer`/`closeTimerRef`), which
+ * nothing then cancels for a click-opened (or keyboard/touch-opened) menu,
+ * since it never gets a real pointerenter on its content. Every click-opened
+ * menu silently closed itself ~150ms later. No supported, finer-grained Radix
+ * API exists to clear only the open timer — the 6 context callbacks
+ * (`onTriggerEnter`/`onTriggerLeave`/`onContentEnter`/`onContentLeave`/
+ * `onItemSelect`/`onItemDismiss`) are the only reachable surface, and none of
+ * the internal refs (`openTimerRef`, `closeTimerRef`, `wasClickCloseRef`,
+ * `wasEscapeCloseRef`) are exported.
+ *
+ * Round 2 fix: stop reaching into Radix's internal timers via synthetic
+ * events entirely. `NavigationMenu` takes over `value`/`onValueChange` as a
+ * controlled proxy (transparent to a consumer's own controlled/uncontrolled
+ * usage) and rejects, ONCE, a reopen request for an item that was just
+ * dismissed (value → "") while a REAL mouse pointer was still resting on its
+ * trigger — exactly the #85 scenario (dismissed inside the hover-intent
+ * window, pointer never left). The guard is a one-shot, pointer-scoped
+ * suppression per item (`suppressReopenForRef` in `NavigationMenu`, armed by
+ * `NavigationMenuItemValueContext` + a small guard context), cleared the
+ * instant ANY of the following happens, so it can never block a genuine
+ * interaction: (a) the real pointer leaves that trigger (a fresh hover-intent
+ * cycle is legitimate — Radix's own `wasEscapeCloseRef`/`wasClickCloseRef`
+ * guards reset on the same real pointerenter), or (b) any click on that
+ * trigger (`noteExplicitActivation`, which runs synchronously before Radix's
+ * own `onItemSelect` in the same click dispatch, per
+ * `composeEventHandlers(props.onClick, () => context.onItemSelect(...))` in
+ * `@radix-ui/react-navigation-menu`'s Trigger). A pure keyboard sequence never
+ * touches this guard at all (no pointer event ever marks the trigger as
+ * "resting"), so it cannot regress keyboard or touch entry — see the 3
+ * scenarios locked in `navigation-menu.test.tsx` (pointer dismiss stays
+ * dismissed, click-open survives past the close-timer delay with no pointer
+ * movement, keyboard open/Escape/no-reopen).
+ *
+ * `NavigationMenuItem` is wrapped (was a bare re-export) purely so its
+ * resolved item value — the same value Radix's OWN auto-`useId()` fallback
+ * would otherwise compute internally and never expose — is available to
+ * `NavigationMenuTrigger` without inventing a new public prop or reaching
+ * into Radix's non-exported item context.
+ *
+ * Tracked upstream: https://github.com/radix-ui/primitives/issues (file and
+ * link the specific issue here once opened — non-blocking, parallel to this
+ * interim fix; confirmed still present in 1.2.22, the latest stable release
+ * as of this fix).
+ */
+type NavigationMenuGuard = {
+  notePointerPresence(itemValue: string, present: boolean): void;
+  noteExplicitActivation(itemValue: string): void;
+  /** One-shot: returns true (and clears the flag) iff this reopen should be swallowed. */
+  consumeSuppressionFlag(itemValue: string): boolean;
+};
+
+const NavigationMenuGuardContext = createContext<NavigationMenuGuard | null>(null);
+const NavigationMenuItemValueContext = createContext<string | undefined>(undefined);
+
 export const NavigationMenu = forwardRef<
   ElementRef<typeof NavigationMenuPrimitive.Root>,
   ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(function NavigationMenu({ className, children, ...props }, ref) {
+>(function NavigationMenu(
+  { className, children, value: valueProp, defaultValue, onValueChange, ...props },
+  ref,
+) {
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? "");
+  const currentValue = isControlled ? (valueProp as string) : internalValue;
+  const currentValueRef = useRef(currentValue);
+  currentValueRef.current = currentValue;
+
+  // itemValue currently under a resting, real (mouse) pointer — at most one
+  // at a time in practice, since a real pointer can only be inside one
+  // trigger's bounds.
+  const pointerPresentForRef = useRef<string | null>(null);
+  // One-shot: the itemValue whose next reopen request should be swallowed.
+  const suppressReopenForRef = useRef<string | null>(null);
+
+  const guard = useMemo<NavigationMenuGuard>(
+    () => ({
+      notePointerPresence(itemValue, present) {
+        if (present) {
+          pointerPresentForRef.current = itemValue;
+          return;
+        }
+        if (pointerPresentForRef.current === itemValue) pointerPresentForRef.current = null;
+        // A genuine leave ends the suspicious window this guard exists for —
+        // any future reopen must come from a fresh interaction (a new
+        // hover-intent cycle after re-entering, or a click), both legitimate.
+        if (suppressReopenForRef.current === itemValue) suppressReopenForRef.current = null;
+      },
+      noteExplicitActivation(itemValue) {
+        if (suppressReopenForRef.current === itemValue) suppressReopenForRef.current = null;
+      },
+      consumeSuppressionFlag(itemValue) {
+        if (suppressReopenForRef.current === itemValue) {
+          suppressReopenForRef.current = null;
+          return true;
+        }
+        return false;
+      },
+    }),
+    [],
+  );
+
+  const handleValueChange = (next: string) => {
+    const previous = currentValueRef.current;
+    if (next === "") {
+      if (previous !== "" && pointerPresentForRef.current === previous) {
+        // Dismissed while a real pointer still rests on its trigger, inside
+        // the hover-intent window — the #85 defect. Arm the one-shot guard
+        // against exactly this item's next reopen request.
+        suppressReopenForRef.current = previous;
+      }
+    } else if (guard.consumeSuppressionFlag(next)) {
+      return; // Swallow the stray reopen — stay on `previous` (closed).
+    }
+    if (!isControlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+
   return (
-    <NavigationMenuPrimitive.Root
-      ref={ref}
-      className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
-      {...props}
-    >
-      {children}
-      <NavigationMenuViewport />
-    </NavigationMenuPrimitive.Root>
+    <NavigationMenuGuardContext.Provider value={guard}>
+      <NavigationMenuPrimitive.Root
+        ref={ref}
+        data-slot="navigation-menu"
+        value={currentValue}
+        onValueChange={handleValueChange}
+        className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+        {...props}
+      >
+        {children}
+        <NavigationMenuViewport />
+      </NavigationMenuPrimitive.Root>
+    </NavigationMenuGuardContext.Provider>
   );
 });
 
@@ -27,26 +172,68 @@ export const NavigationMenuList = forwardRef<
   return (
     <NavigationMenuPrimitive.List
       ref={ref}
+      data-slot="navigation-menu-list"
       className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
       {...props}
     />
   );
 });
 
-export const NavigationMenuItem = NavigationMenuPrimitive.Item;
+export const NavigationMenuItem = forwardRef<
+  ElementRef<typeof NavigationMenuPrimitive.Item>,
+  ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
+>(function NavigationMenuItem({ value: valueProp, ...props }, ref) {
+  const autoValue = useId();
+  const value = valueProp ?? autoValue;
+  return (
+    <NavigationMenuItemValueContext.Provider value={value}>
+      <NavigationMenuPrimitive.Item
+        ref={ref}
+        data-slot="navigation-menu-item"
+        value={value}
+        {...props}
+      />
+    </NavigationMenuItemValueContext.Provider>
+  );
+});
 
 export const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent",
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-body font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent",
 );
 
 export const NavigationMenuTrigger = forwardRef<
   ElementRef<typeof NavigationMenuPrimitive.Trigger>,
   ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(function NavigationMenuTrigger({ className, children, ...props }, ref) {
+>(function NavigationMenuTrigger(
+  { className, children, onClick, onPointerEnter, onPointerLeave, ...props },
+  ref,
+) {
+  const itemValue = useContext(NavigationMenuItemValueContext);
+  const guard = useContext(NavigationMenuGuardContext);
+
+  const notePointer = (event: ReactPointerEvent<HTMLButtonElement>, present: boolean) => {
+    if (itemValue !== undefined && guard && event.pointerType === "mouse") {
+      guard.notePointerPresence(itemValue, present);
+    }
+  };
+
   return (
     <NavigationMenuPrimitive.Trigger
       ref={ref}
+      data-slot="navigation-menu-trigger"
       className={cn(navigationMenuTriggerStyle(), "group", className)}
+      onPointerEnter={(event) => {
+        onPointerEnter?.(event);
+        notePointer(event, true);
+      }}
+      onPointerLeave={(event) => {
+        onPointerLeave?.(event);
+        notePointer(event, false);
+      }}
+      onClick={(event) => {
+        if (itemValue !== undefined) guard?.noteExplicitActivation(itemValue);
+        onClick?.(event);
+      }}
       {...props}
     >
       {children}
@@ -65,8 +252,9 @@ export const NavigationMenuContent = forwardRef<
   return (
     <NavigationMenuPrimitive.Content
       ref={ref}
+      data-slot="navigation-menu-content"
       className={cn(
-        "left-0 top-0 w-full p-2 md:absolute md:w-auto",
+        "start-0 top-0 w-full p-2 md:absolute md:w-auto",
         "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out",
         "data-[motion=from-end]:slide-in-from-right-2 data-[motion=from-start]:slide-in-from-left-2 data-[motion=to-end]:slide-out-to-right-2 data-[motion=to-start]:slide-out-to-left-2",
         "data-[motion^=from-]:[--tw-ease:var(--ease-entrance)]",
@@ -84,9 +272,10 @@ export const NavigationMenuViewport = forwardRef<
   ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(function NavigationMenuViewport({ className, ...props }, ref) {
   return (
-    <div className="absolute left-0 top-full flex justify-center">
+    <div className="absolute start-0 top-full flex justify-center">
       <NavigationMenuPrimitive.Viewport
         ref={ref}
+        data-slot="navigation-menu-viewport"
         className={cn(
           "relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
           "origin-top transition-[width,height] duration-base ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:zoom-in-90 data-[state=closed]:zoom-out-95",

package/src/components/number-input/number-input.stories.tsx

@@ -76,13 +76,17 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: { defaultValue: 5, min: 0, max: 10 },
-  // Clicks the Increase button and confirms the value increments.
+  // Clicks the Increase button and confirms the value increments. The input is a
+  // locale-formatted text spinbutton, so the displayed value is a string and the
+  // numeric value is announced via aria-valuenow.
   play: async ({ canvas, userEvent }) => {
     const input = canvas.getByRole("spinbutton");
-    await expect(input).toHaveValue(5);
+    await expect(input).toHaveValue("5");
+    await expect(input).toHaveAttribute("aria-valuenow", "5");
     const increaseBtn = canvas.getByRole("button", { name: /increase/i });
     await userEvent.click(increaseBtn);
-    await expect(input).toHaveValue(6);
+    await expect(input).toHaveValue("6");
+    await expect(input).toHaveAttribute("aria-valuenow", "6");
   },
 };
 

package/src/components/number-input/number-input.test.tsx

@@ -1,7 +1,9 @@
+import { createRef } from "react";
 import { describe, expect, it, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { NumberInput } from "./number-input";
+import { LocaleProvider } from "../locale-provider";
 
 describe("NumberInput", () => {
   it("renders a spinbutton input", () => {
@@ -93,4 +95,49 @@ describe("NumberInput", () => {
     await userEvent.keyboard("{ArrowDown}");
     expect(onValueChange).toHaveBeenLastCalledWith(5);
   });
+
+  it("forwards the ref to the underlying <input>, not the wrapper", () => {
+    const ref = createRef<HTMLInputElement>();
+    render(<NumberInput aria-label="Qty" defaultValue={5} ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    expect(ref.current).toBe(screen.getByRole("spinbutton", { name: "Qty" }));
+  });
+
+  it("does not hard-fix a width — the caller's className is not fighting a default", () => {
+    render(<NumberInput aria-label="Qty" defaultValue={5} className="w-24" />);
+    const group = screen.getByRole("group");
+    expect(group.className).not.toMatch(/\bw-36\b/);
+    expect(group.className).toMatch(/\bw-24\b/);
+  });
+
+  it("rounds fp-noisy step increments to the step's precision (0.1 + 0.1 + 0.1)", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <NumberInput aria-label="Amount" defaultValue={0} step={0.1} onValueChange={onValueChange} />,
+    );
+    const increaseBtn = screen.getByRole("button", { name: "Increase" });
+    await userEvent.click(increaseBtn);
+    await userEvent.click(increaseBtn);
+    await userEvent.click(increaseBtn);
+    expect(onValueChange).toHaveBeenLastCalledWith(0.3);
+  });
+
+  it("parses a locale-formatted number using the active locale's separators (de-DE: comma decimal)", async () => {
+    const onValueChange = vi.fn();
+    render(
+      <LocaleProvider locale="de-DE">
+        <NumberInput
+          aria-label="Betrag"
+          defaultValue={0}
+          step={0.1}
+          onValueChange={onValueChange}
+        />
+      </LocaleProvider>,
+    );
+    const input = screen.getByRole("spinbutton", { name: "Betrag" });
+    await userEvent.clear(input);
+    await userEvent.type(input, "1.234,5");
+    await userEvent.tab();
+    expect(onValueChange).toHaveBeenLastCalledWith(1234.5);
+  });
 });

package/src/components/number-input/number-input.tsx

@@ -1,8 +1,10 @@
+"use client";
+
 // a2ui.exposed: yes
 import { forwardRef, useCallback, useRef, useState, type HTMLAttributes } from "react";
 import { Minus, Plus } from "lucide-react";
-import { cn } from "../../lib/cn";
 import { InputGroup, InputGroupButton, InputGroupInput } from "../input-group";
+import { useLocale } from "../locale-provider";
 
 export interface NumberInputProps extends Omit<
   HTMLAttributes<HTMLDivElement>,
@@ -56,11 +58,37 @@ function clampValue(val: number, min?: number, max?: number): number {
   return result;
 }
 
-function formatNum(value: number, formatOptions?: Intl.NumberFormatOptions): string {
-  if (formatOptions) {
-    return new Intl.NumberFormat(undefined, formatOptions).format(value);
-  }
-  return String(value);
+/** Number of decimal places implied by a step (e.g. 0.1 → 1, 1 → 0). */
+function stepDecimals(step: number): number {
+  if (!isFinite(step) || step === 0) return 0;
+  const s = String(step);
+  const i = s.indexOf(".");
+  return i === -1 ? 0 : s.length - i - 1;
+}
+
+/** Round `value` to the decimal precision implied by `step`, avoiding fp noise (0.1+0.2). */
+function roundToStep(value: number, step: number): number {
+  const decimals = stepDecimals(step);
+  if (decimals === 0) return Math.round(value);
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
+}
+
+/** The active locale's decimal and group separator characters (e.g. "," / "." in de-DE). */
+function getLocaleSeparators(locale: string): { decimal: string; group: string } {
+  const parts = new Intl.NumberFormat(locale).formatToParts(1234.5);
+  const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+  const group = parts.find((p) => p.type === "group")?.value ?? ",";
+  return { decimal, group };
+}
+
+/** Parse a locale-formatted numeric string (group + decimal separators) into a number. */
+function parseLocaleNumber(raw: string, locale: string): number {
+  const { decimal, group } = getLocaleSeparators(locale);
+  let normalized = raw.trim();
+  if (group) normalized = normalized.split(group).join("");
+  if (decimal !== ".") normalized = normalized.split(decimal).join(".");
+  return Number(normalized);
 }
 
 /**
@@ -69,7 +97,7 @@ function formatNum(value: number, formatOptions?: Intl.NumberFormatOptions): str
  * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.
  * Keyboard ↑/↓ = ±step; Shift+↑/↓ = ±step×10. Clamps on blur (not per keystroke).
  */
-export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput(
   {
     value: valueProp,
     defaultValue,
@@ -94,14 +122,20 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
   },
   ref,
 ) {
+  const { locale, formatNumber, t } = useLocale();
   const isControlled = valueProp !== undefined;
 
+  const formatValue = useCallback(
+    (n: number) => formatNumber(n, formatOptions),
+    [formatNumber, formatOptions],
+  );
+
   const [internalValue, setInternalValue] = useState<number | null>(
     defaultValue !== undefined ? defaultValue : null,
   );
   const [inputText, setInputText] = useState<string>(() => {
     const initial = isControlled ? valueProp : defaultValue;
-    return initial != null ? formatNum(initial, formatOptions) : "";
+    return initial != null ? formatValue(initial) : "";
   });
   // Track whether the user is actively editing to avoid overwriting their input
   const isEditing = useRef(false);
@@ -120,12 +154,12 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
     (delta: number) => {
       if (disabled || readOnly) return;
       const base = currentValue ?? 0;
-      let next = base + delta;
+      let next = roundToStep(base + delta, step);
       if (clamp) next = clampValue(next, min, max);
-      setInputText(next != null ? formatNum(next, formatOptions) : "");
+      setInputText(formatValue(next));
       commit(next);
     },
-    [disabled, readOnly, currentValue, clamp, min, max, formatOptions, commit],
+    [disabled, readOnly, currentValue, step, clamp, min, max, formatValue, commit],
   );
 
   const handleKeyDown = useCallback(
@@ -152,22 +186,23 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
       commit(null);
       return;
     }
-    const parsed = parseFloat(raw);
+    const parsed = parseLocaleNumber(raw, locale);
     if (isNaN(parsed)) {
       // Revert to last known good value
-      setInputText(currentValue != null ? formatNum(currentValue, formatOptions) : "");
+      setInputText(currentValue != null ? formatValue(currentValue) : "");
       return;
     }
-    const clamped = clamp ? clampValue(parsed, min, max) : parsed;
-    setInputText(formatNum(clamped, formatOptions));
+    const rounded = roundToStep(parsed, step);
+    const clamped = clamp ? clampValue(rounded, min, max) : rounded;
+    setInputText(formatValue(clamped));
     commit(clamped);
-  }, [inputText, currentValue, clamp, min, max, formatOptions, commit]);
+  }, [inputText, currentValue, clamp, min, max, step, locale, formatValue, commit]);
 
   // Keep display text in sync with controlled value changes (only when not editing)
   const prevControlledValue = useRef(valueProp);
   if (isControlled && valueProp !== prevControlledValue.current && !isEditing.current) {
     prevControlledValue.current = valueProp;
-    const nextText = valueProp != null ? formatNum(valueProp, formatOptions) : "";
+    const nextText = valueProp != null ? formatValue(valueProp) : "";
     if (nextText !== inputText) setInputText(nextText);
   }
 
@@ -177,18 +212,24 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
     disabled || readOnly || (max !== undefined && (currentValue ?? 0) >= max);
 
   return (
-    <InputGroup ref={ref} className={cn("w-36", className)} {...props}>
+    <InputGroup className={className} {...props}>
       <InputGroupButton
-        aria-label="Decrease"
+        aria-label={t("ui.numberInput.decrease")}
         tabIndex={-1}
         disabled={decrementDisabled}
         onClick={() => applyStep(-step)}
-        className="rounded-r-none"
+        className="rounded-e-none"
       >
         <Minus aria-hidden="true" />
       </InputGroupButton>
       <InputGroupInput
-        type="number"
+        ref={ref}
+        type="text"
+        inputMode="decimal"
+        role="spinbutton"
+        aria-valuenow={currentValue ?? undefined}
+        aria-valuemin={min}
+        aria-valuemax={max}
         id={id}
         name={name}
         value={inputText}
@@ -200,17 +241,17 @@ export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>(function
         aria-describedby={ariaDescribedby}
         aria-invalid={ariaInvalid}
         aria-required={ariaRequired}
-        className="text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+        className="text-center"
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
       />
       <InputGroupButton
-        aria-label="Increase"
+        aria-label={t("ui.numberInput.increase")}
         tabIndex={-1}
         disabled={incrementDisabled}
         onClick={() => applyStep(step)}
-        className="rounded-l-none"
+        className="rounded-s-none"
       >
         <Plus aria-hidden="true" />
       </InputGroupButton>