@boxcustodia/library 2.0.0-alpha.19 → 2.0.0-alpha.20

package/src/components/date-picker/date-input-form.test.tsx

@@ -0,0 +1,77 @@
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "../button/button";
+import { Field } from "../field/field";
+import { Form } from "../form/form";
+import { DateInput } from "./date-input";
+
+const setup = () => {
+  const onFormSubmit = vi.fn();
+  const user = userEvent.setup();
+  render(
+    <Form onFormSubmit={onFormSubmit}>
+      <Field
+        name="startDate"
+        label="Start date"
+        error={{ message: "Start date is required.", match: "valueMissing" }}
+      >
+        <DateInput required />
+      </Field>
+      <Button type="submit">Submit</Button>
+    </Form>,
+  );
+  return { onFormSubmit, user };
+};
+
+describe("DateInput + Form across flows", () => {
+  it("A: digits typed → submits iso", async () => {
+    const { onFormSubmit, user } = setup();
+    const input = screen.getByRole("textbox");
+    await user.click(input);
+    await user.type(input, "05062026");
+    await user.tab();
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+    expect(onFormSubmit).toHaveBeenCalledTimes(1);
+    expect(onFormSubmit.mock.calls[0][0]).toMatchObject({
+      startDate: "2026-06-05",
+    });
+  });
+
+  it("B: open+close popover then digits → submits iso", async () => {
+    const { onFormSubmit, user } = setup();
+    await user.click(screen.getByRole("button", { name: "Seleccionar fecha" }));
+    await screen.findByRole("grid");
+    await user.keyboard("{Escape}");
+    const input = screen.getByRole("textbox");
+    await user.click(input);
+    await user.type(input, "05062026");
+    await user.tab();
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+    expect(onFormSubmit).toHaveBeenCalledTimes(1);
+    expect(onFormSubmit.mock.calls[0][0]).toMatchObject({
+      startDate: "2026-06-05",
+    });
+  });
+
+  it("C: select from calendar → submits iso", async () => {
+    const { onFormSubmit, user } = setup();
+    await user.click(screen.getByRole("button", { name: "Seleccionar fecha" }));
+    const grid = await screen.findByRole("grid");
+    await user.click(
+      within(grid).getByRole("button", { name: /15 de junio de 2026/ }),
+    );
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+    expect(onFormSubmit).toHaveBeenCalledTimes(1);
+    expect(onFormSubmit.mock.calls[0][0]).toMatchObject({
+      startDate: "2026-06-15",
+    });
+  });
+
+  it("D: empty → blocks submit with required error", async () => {
+    const { onFormSubmit, user } = setup();
+    await user.click(screen.getByRole("button", { name: /submit/i }));
+    expect(onFormSubmit).not.toHaveBeenCalled();
+    expect(screen.getByText("Start date is required.")).toBeInTheDocument();
+  });
+});

package/src/components/date-picker/date-input.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { lastDayOfMonth, nextSaturday } from "date-fns";
 import { useState } from "react";
 import { action } from "storybook/actions";
-import { Button } from "../../components";
+import { Button, Field, Form } from "../../components";
 import { DateInput } from "./date-input";
 
 /**
@@ -145,22 +145,34 @@ export const Controlled: Story = {
 };
 
 /**
- * `name` and `required` enable native form participation.
- * The value included in `FormData` is the date string in `DD/MM/YYYY` format.
- * An empty field submits an empty string for the key.
+ * `Field` wires `required` validation and routes the error message automatically.
+ * The value submitted to the form is an ISO date string (`yyyy-MM-dd`);
+ * an empty field submits an empty string, which triggers `valueMissing`.
  */
-export const NativeForm: Story = {
-  render: () => (
-    <form
-      className="flex flex-col gap-2"
-      onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        const data = new FormData(e.currentTarget);
-        alert(`date: ${data.get("date")}`);
-      }}
-    >
-      <DateInput name="date" required />
-      <Button type="submit">Submit</Button>
-    </form>
-  ),
+export const WithForm: Story = {
+  render: () => {
+    const [submitted, setSubmitted] = useState<string | null>(null);
+
+    return (
+      <Form
+        className="flex flex-col gap-3"
+        onFormSubmit={(data) => setSubmitted(data.startDate as string)}
+      >
+        <Field
+          name="startDate"
+          label="Start date"
+          error={{ message: "Start date is required.", match: "valueMissing" }}
+        >
+          <DateInput required />
+        </Field>
+        <Button type="submit">Submit</Button>
+        {submitted !== null && (
+          <p className="text-sm text-muted-foreground">
+            Submitted:{" "}
+            <span className="font-mono">{submitted || "(empty)"}</span>
+          </p>
+        )}
+      </Form>
+    );
+  },
 };

package/src/components/date-picker/date-input.tsx

@@ -1,12 +1,13 @@
 "use client";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { isDate } from "date-fns";
+import { format, isDate } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { KeyboardEvent } from "react";
 import {
   Calendar,
   FieldControl,
+  FieldRoot,
   inputBaseClasses,
   PopoverPopup,
   PopoverRoot,
@@ -16,6 +17,7 @@ import { cn } from "../../lib";
 import type { DateInputProps } from "./date-picker.model";
 import { useDateInput } from "./use-date-input";
 import { useDateInputPopover } from "./use-date-input-popover";
+import { useHiddenFieldValue } from "./use-hidden-field-value";
 
 export const DateInput = (props: DateInputProps) => {
   const {
@@ -29,6 +31,7 @@ export const DateInput = (props: DateInputProps) => {
     renderFooter,
     disabled,
     onBlur: onBlurProp,
+    required,
     ...rest
   } = props;
 
@@ -38,6 +41,12 @@ export const DateInput = (props: DateInputProps) => {
     defaultProp: defaultValueProp ?? null,
   });
 
+  // Value handed to the form, derived from selectedDate. Empty string when no
+  // date so `required` triggers `valueMissing`.
+  const formValue = selectedDate ? format(selectedDate, "yyyy-MM-dd") : "";
+
+  const hiddenInputRef = useHiddenFieldValue(formValue);
+
   const {
     inputValue,
     handleChange,
@@ -90,10 +99,12 @@ export const DateInput = (props: DateInputProps) => {
       <div
         className={cn(
           inputBaseClasses,
-          "flex items-center gap-2 h-8",
+          "relative flex items-center gap-2 h-8",
           "has-[:focus-visible]:border-ring",
           "aria-invalid:border-error has-[:focus-visible]:aria-invalid:ring-error/20",
-          "has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:ring-error/20",
+          // Re-assert the error border on focus: `has-[:focus-visible]:border-ring`
+          // ties on specificity and would otherwise wash the red out while typing.
+          "has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:border-error has-[:focus-visible]:has-aria-invalid:ring-error/20",
           "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50",
           !selectedDate && "text-muted-foreground",
           className,
@@ -103,6 +114,43 @@ export const DateInput = (props: DateInputProps) => {
           if (e.target === e.currentTarget) inputRef.current?.focus();
         }}
       >
+        {/* Hidden form control — owns the Field's name + validity. Left
+            uncontrolled and driven imperatively via `emitNativeInputChange`: a
+            controlled `value` keeps React's value tracker in sync, which would
+            suppress the synthetic `input` event Base UI needs to re-validate.
+            `onFocus` redirects to the visible input so that when the Form focuses
+            the invalid control on submit, focus does not trap on this sr-only node. */}
+        <FieldControl
+          render={
+            <input
+              ref={hiddenInputRef}
+              type="text"
+              className="sr-only"
+              tabIndex={-1}
+              aria-hidden="true"
+              required={required}
+              disabled={disabled}
+              onFocus={() => inputRef.current?.focus()}
+            />
+          }
+        />
+        <input
+          type="text"
+          value={inputValue}
+          onChange={handleChange}
+          onBlur={(e) => {
+            handleBlur();
+            onBlurProp?.(e);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder={placeholder ?? "dd/mm/aaaa"}
+          autoComplete={autoComplete ?? "off"}
+          disabled={disabled}
+          className="flex-1 min-w-0 bg-transparent outline-none text-start truncate pt-px"
+          aria-label={placeholder}
+          ref={inputRef}
+          {...rest}
+        />
         <PopoverTrigger
           type="button"
           disabled={disabled}
@@ -112,53 +160,38 @@ export const DateInput = (props: DateInputProps) => {
           <CalendarIcon data-slot="date-input-icon" />
           <span className="sr-only">Seleccionar fecha</span>
         </PopoverTrigger>
-        <FieldControl
-          render={
-            <input
-              type="text"
-              value={inputValue}
-              onChange={handleChange}
-              onBlur={(e) => {
-                handleBlur();
-                onBlurProp?.(e);
-              }}
-              onKeyDown={handleKeyDown}
-              placeholder={placeholder ?? "dd/mm/aaaa"}
-              autoComplete={autoComplete ?? "off"}
-              disabled={disabled}
-              className="flex-1 min-w-0 bg-transparent outline-none text-start truncate pt-px"
-              aria-label={placeholder}
-              ref={inputRef}
-              {...rest}
-            />
-          }
-        />
       </div>
       <PopoverPopup
         className="w-auto p-0"
         align="start"
         data-slot="date-input-content"
       >
-        <Calendar
-          className="border-none"
-          mode="single"
-          selected={selectedDate ?? undefined}
-          onSelect={(next) => {
-            if (!next || !isDate(next)) {
-              setFromExternalDate(null);
-              return;
-            }
-            if (disabledDate?.(next)) return;
-            setFromExternalDate(next);
-            setOpen(false);
-          }}
-          disabled={disabledDate}
-        />
-        {footerContent && (
-          <div className="p-2" data-slot="date-input-footer">
-            {footerContent}
-          </div>
-        )}
+        {/* Isolate the popover content in its own FieldRoot. The Calendar's
+            month/year `Select`s are Base UI form controls; without this they
+            connect to the OUTER Field and hijack its shared validation ref,
+            nulling it on close and breaking submit validation. */}
+        <FieldRoot className="contents">
+          <Calendar
+            className="border-none"
+            mode="single"
+            selected={selectedDate ?? undefined}
+            onSelect={(next) => {
+              if (!next || !isDate(next)) {
+                setFromExternalDate(null);
+                return;
+              }
+              if (disabledDate?.(next)) return;
+              setFromExternalDate(next);
+              setOpen(false);
+            }}
+            disabled={disabledDate}
+          />
+          {footerContent && (
+            <div className="p-2" data-slot="date-input-footer">
+              {footerContent}
+            </div>
+          )}
+        </FieldRoot>
       </PopoverPopup>
     </PopoverRoot>
   );

package/src/components/date-picker/date-picker.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { lastDayOfMonth, nextSaturday } from "date-fns";
 import { useState } from "react";
 import { action } from "storybook/actions";
-import { Button } from "../../components";
+import { Button, Field, Form } from "../../components";
 import { DatePicker } from "./date-picker";
 import type { DatePickerFooterProps, DateRange } from "./date-picker.model";
 
@@ -224,3 +224,33 @@ export const WithFooter: Story = {
     return <DatePicker mode="single" renderFooter={Footer} />;
   },
 };
+
+/**
+ * Native form integration with the plain `Form` component — no schema library.
+ *
+ * `DatePicker` keeps a hidden `FieldControl` whose value is the ISO date
+ * (`yyyy-MM-dd` in single mode, `""` when empty). That hidden control owns the
+ * `name`, carries `required`, and is what lands in the submitted values.
+ *
+ * Validation is the browser's: `required` + an empty string make the field
+ * `valueMissing`, so the browser blocks submit and `Field`'s `error.match`
+ * surfaces the message. `onFormSubmit` only fires once the value is valid —
+ * the `console.log` shows the submitted values (`startDate` as `yyyy-MM-dd`).
+ */
+export const WithForm: Story = {
+  render: () => (
+    <Form
+      className="flex flex-col gap-3"
+      onFormSubmit={(values, e) => console.log("onSubmit", values, e)}
+    >
+      <Field
+        name="startDate"
+        label="Start date"
+        error={{ message: "Start date is required.", match: "valueMissing" }}
+      >
+        <DatePicker mode="single" required />
+      </Field>
+      <Button type="submit">Submit</Button>
+    </Form>
+  ),
+};

package/src/components/date-picker/date-picker.test.tsx

@@ -170,9 +170,7 @@ describe("DatePicker component", () => {
 
   describe("multiple mode", () => {
     it("shows formatted date when single date selected", () => {
-      render(
-        <DatePicker mode="multiple" value={[new Date(2024, 0, 15)]} />,
-      );
+      render(<DatePicker mode="multiple" value={[new Date(2024, 0, 15)]} />);
       expect(screen.getByRole("button")).toHaveTextContent("15/01/2024");
     });
 
@@ -288,10 +286,7 @@ describe("DatePicker component", () => {
 
     it("passes data-slot date-picker-footer to footer wrapper", async () => {
       render(
-        <DatePicker
-          mode="single"
-          renderFooter={() => <div>Footer</div>}
-        />,
+        <DatePicker mode="single" renderFooter={() => <div>Footer</div>} />,
       );
       await userEvent.click(screen.getByRole("button"));
       await waitFor(() => {
@@ -481,12 +476,7 @@ describe("DateInput component", () => {
     });
 
     it("footer data-slot date-input-footer present when open", async () => {
-      render(
-        <DateInput
-          name="date"
-          renderFooter={() => <div>Footer</div>}
-        />,
-      );
+      render(<DateInput name="date" renderFooter={() => <div>Footer</div>} />);
       await userEvent.click(
         screen.getByRole("button", { name: "Seleccionar fecha" }),
       );

package/src/components/date-picker/date-picker.tsx

@@ -6,6 +6,7 @@ import { type ReactElement, ReactNode, useRef, useState } from "react";
 import {
   Calendar,
   FieldControl,
+  FieldRoot,
   inputBaseClasses,
   PopoverPopup,
   PopoverRoot,
@@ -21,10 +22,12 @@ import type {
   SingleDatePickerProps,
 } from "./date-picker.model";
 import {
+  formatISODate,
   formatMultipleDates,
   formatRangeDate,
   formatSingleDate,
 } from "./date-picker.utils";
+import { useHiddenFieldValue } from "./use-hidden-field-value";
 
 export function DatePicker(props: SingleDatePickerProps): ReactElement;
 export function DatePicker(props: RangeDatePickerProps): ReactElement;
@@ -67,6 +70,7 @@ const PickerShell = ({
   required,
 }: PickerShellProps) => {
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const hiddenInputRef = useHiddenFieldValue(formValue);
 
   return (
     <PopoverRoot data-slot={slot} open={open} onOpenChange={onOpenChange}>
@@ -80,7 +84,11 @@ const PickerShell = ({
               "inline-flex items-center gap-2 h-8 cursor-pointer text-left",
               "focus-visible:border-ring",
               "aria-invalid:border-error focus-visible:aria-invalid:ring-error/20",
-              "group-data-[invalid]:border-error focus-visible:group-data-[invalid]:ring-error/20",
+              // Attribute selector (specificity 0,2,0) beats `border-input`;
+              // `group-data-[invalid]` ties and loses. Matches the OTP convention.
+              // The `focus-visible` variant re-asserts the error border so it is
+              // not washed out by `focus-visible:border-ring` while focused.
+              "in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:border-error focus-visible:in-[[data-slot=field][data-invalid]]:ring-error/20",
               "disabled:cursor-not-allowed disabled:opacity-50",
               !hasValue && "text-muted-foreground",
               className,
@@ -88,19 +96,24 @@ const PickerShell = ({
           />
         }
       >
-        <CalendarIcon className="shrink-0" />
-        <span className="truncate">{displayText}</span>
+        <span className="flex-1 truncate">{displayText}</span>
+        <CalendarIcon
+          data-slot="date-picker-icon"
+          className="shrink-0 text-muted-foreground"
+        />
       </PopoverTrigger>
-      {/* Hidden input registered with Field for validity tracking and FormData. */}
+      {/* Hidden input registered with Field for validity tracking and FormData.
+          Left uncontrolled and driven imperatively via `emitNativeInputChange`:
+          a controlled `value` keeps React's value tracker in sync, which would
+          suppress the synthetic `input` event Base UI needs to re-validate. */}
       <FieldControl
         render={
           <input
+            ref={hiddenInputRef}
             type="text"
             tabIndex={-1}
             aria-hidden="true"
             className="sr-only"
-            value={formValue}
-            onChange={() => {}}
             required={required}
             onFocus={() => triggerRef.current?.focus()}
           />
@@ -111,15 +124,21 @@ const PickerShell = ({
         align="start"
         data-slot={`${slot}-content`}
       >
-        {children}
-        {footer && (
-          <div
-            className={cn("p-2", classNames?.footer)}
-            data-slot={`${slot}-footer`}
-          >
-            {footer}
-          </div>
-        )}
+        {/* Isolate popover content in its own FieldRoot. The Calendar's
+            month/year `Select`s are Base UI form controls; without this they
+            register on the OUTER Field, evict the hidden control's registration
+            on close, and the field submits empty. */}
+        <FieldRoot className="contents">
+          {children}
+          {footer && (
+            <div
+              className={cn("p-2", classNames?.footer)}
+              data-slot={`${slot}-footer`}
+            >
+              {footer}
+            </div>
+          )}
+        </FieldRoot>
       </PopoverPopup>
     </PopoverRoot>
   );
@@ -170,7 +189,7 @@ const SinglePicker = ({
       className={className}
       classNames={classNames}
       footer={renderFooter?.(footerProps)}
-      formValue={formatSingleDate(value, "")}
+      formValue={formatISODate(value)}
       required={required}
     >
       <Calendar

package/src/components/date-picker/date-picker.utils.test.ts

@@ -24,7 +24,9 @@ describe("formatSingleDate", () => {
   });
 
   it("formats a valid date as dd/MM/yyyy", () => {
-    expect(formatSingleDate(new Date(2025, 0, 15), "Select")).toBe("15/01/2025");
+    expect(formatSingleDate(new Date(2025, 0, 15), "Select")).toBe(
+      "15/01/2025",
+    );
   });
 });
 
@@ -36,24 +38,29 @@ describe("formatRangeDate", () => {
   });
 
   it("returns placeholder when both start and end are null", () => {
-    expect(formatRangeDate({ start: null, end: null }, "Pick range")).toBe("Pick range");
+    expect(formatRangeDate({ start: null, end: null }, "Pick range")).toBe(
+      "Pick range",
+    );
   });
 
   it("formats range with only start as '... → start'", () => {
-    expect(formatRangeDate({ start: null, end: new Date(2025, 11, 31) }, "Pick")).toBe(
-      "... → 31/12/2025",
-    );
+    expect(
+      formatRangeDate({ start: null, end: new Date(2025, 11, 31) }, "Pick"),
+    ).toBe("... → 31/12/2025");
   });
 
   it("formats range with only end as 'start → ...'", () => {
-    expect(formatRangeDate({ start: new Date(2025, 0, 1), end: null }, "Pick")).toBe(
-      "01/01/2025 → ...",
-    );
+    expect(
+      formatRangeDate({ start: new Date(2025, 0, 1), end: null }, "Pick"),
+    ).toBe("01/01/2025 → ...");
   });
 
   it("formats range with both dates", () => {
     expect(
-      formatRangeDate({ start: new Date(2025, 0, 1), end: new Date(2025, 11, 31) }, "Pick"),
+      formatRangeDate(
+        { start: new Date(2025, 0, 1), end: new Date(2025, 11, 31) },
+        "Pick",
+      ),
     ).toBe("01/01/2025 → 31/12/2025");
   });
 });
@@ -70,12 +77,17 @@ describe("formatMultipleDates", () => {
   });
 
   it("formats single date as dd/MM/yyyy", () => {
-    expect(formatMultipleDates([new Date(2025, 0, 15)], "Select")).toBe("15/01/2025");
+    expect(formatMultipleDates([new Date(2025, 0, 15)], "Select")).toBe(
+      "15/01/2025",
+    );
   });
 
   it("shows count for multiple dates", () => {
     expect(
-      formatMultipleDates([new Date(2025, 0, 1), new Date(2025, 0, 2)], "Select"),
+      formatMultipleDates(
+        [new Date(2025, 0, 1), new Date(2025, 0, 2)],
+        "Select",
+      ),
     ).toBe("2 fechas seleccionadas");
   });
 });
@@ -226,17 +238,23 @@ describe("maskDateInput — full date (5-8 digits)", () => {
   });
 
   it("truncates year to 4 digits max", () => {
-    expect(maskDateInput("120620259", ctx("9", "12/06/2025"))).toBe("12/06/2025");
+    expect(maskDateInput("120620259", ctx("9", "12/06/2025"))).toBe(
+      "12/06/2025",
+    );
   });
 });
 
 describe("maskDateInput — segment-based (2+ slashes present)", () => {
   it("uses segment parsing when raw already has two slashes", () => {
-    expect(maskDateInput("12/06/2025", ctx(null, "12/06/2025"))).toBe("12/06/2025");
+    expect(maskDateInput("12/06/2025", ctx(null, "12/06/2025"))).toBe(
+      "12/06/2025",
+    );
   });
 
   it("handles delete within a segment (two slashes)", () => {
-    expect(maskDateInput("12/0/2025", ctx("Backspace", "12/06/2025"))).toBe("12/0/2025");
+    expect(maskDateInput("12/0/2025", ctx("Backspace", "12/06/2025"))).toBe(
+      "12/0/2025",
+    );
   });
 
   it("returns empty string when all segment parts are empty", () => {

package/src/components/date-picker/date-picker.utils.ts

@@ -11,6 +11,16 @@ export const formatSingleDate = (
   return format(date, DISPLAY_DATE_FORMAT);
 };
 
+/**
+ * ISO 8601 calendar date (`yyyy-MM-dd`) used as the form value — locale-agnostic,
+ * sortable, and parseable by `new Date()` / backends without a custom format.
+ * The display string keeps `DISPLAY_DATE_FORMAT`; this is the value layer.
+ */
+export const formatISODate = (date: Date | null | undefined): string => {
+  if (!date || !isDate(date)) return "";
+  return format(date, "yyyy-MM-dd");
+};
+
 export const formatRangeDate = (
   range: DateRange | undefined,
   placeholder: string,
@@ -38,6 +48,29 @@ export const formatDate = (date: Date | null): string => {
   return format(date, DISPLAY_DATE_FORMAT);
 };
 
+/**
+ * Emits a native `input` event on a hidden form control so Base UI's Field
+ * re-runs validation. Base UI clears the error and re-validates only inside the
+ * control's `onChange`; assigning `value` via a React prop never fires a native
+ * event, so date changes driven from outside (calendar selection, typing into
+ * the visible input) would leave the field stuck in its invalid state.
+ *
+ * Sets the value through the prototype setter so React's value tracker detects
+ * the diff, then dispatches a bubbling `input` event React maps to `onChange`.
+ */
+export const emitNativeInputChange = (
+  input: HTMLInputElement | null,
+  value: string,
+): void => {
+  if (!input) return;
+  const setter = Object.getOwnPropertyDescriptor(
+    HTMLInputElement.prototype,
+    "value",
+  )?.set;
+  setter?.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+};
+
 export const parseInputToDate = (raw: string): Date | null => {
   const trimmed = raw.trim();
   if (!trimmed) return null;

package/src/components/date-picker/use-date-input-popover.test.ts

@@ -41,7 +41,9 @@ describe("useDateInputPopover", () => {
   });
 
   it("disabled=true prevents keydown from opening popover", () => {
-    const { result } = renderHook(() => useDateInputPopover({ disabled: true }));
+    const { result } = renderHook(() =>
+      useDateInputPopover({ disabled: true }),
+    );
     const event = { key: " ", preventDefault: vi.fn() } as any;
     act(() => result.current.handleInputKeyDown(event));
     expect(result.current.open).toBe(false);