Add form component

.changeset/fuzzy-lies-brush.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/table": minor
+---
+
+The `layoutNode` prop has been removed due to the update to react-aria.

.changeset/polite-mails-kneel.md

@@ -0,0 +1,47 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/avatar": patch
+"@nextui-org/breadcrumbs": patch
+"@nextui-org/button": patch
+"@nextui-org/calendar": patch
+"@nextui-org/card": patch
+"@nextui-org/chip": patch
+"@nextui-org/date-input": patch
+"@nextui-org/divider": patch
+"@nextui-org/dropdown": patch
+"@nextui-org/kbd": patch
+"@nextui-org/link": patch
+"@nextui-org/listbox": patch
+"@nextui-org/menu": patch
+"@nextui-org/modal": patch
+"@nextui-org/navbar": patch
+"@nextui-org/pagination": patch
+"@nextui-org/popover": patch
+"@nextui-org/progress": patch
+"@nextui-org/select": patch
+"@nextui-org/slider": patch
+"@nextui-org/snippet": patch
+"@nextui-org/switch": patch
+"@nextui-org/tabs": patch
+"@nextui-org/tooltip": patch
+"@nextui-org/user": patch
+"@nextui-org/react": patch
+"@nextui-org/system": patch
+"@nextui-org/system-rsc": patch
+"@nextui-org/use-aria-accordion": patch
+"@nextui-org/use-aria-accordion-item": patch
+"@nextui-org/use-aria-button": patch
+"@nextui-org/use-aria-link": patch
+"@nextui-org/use-aria-menu": patch
+"@nextui-org/use-aria-modal-overlay": patch
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/use-aria-overlay": patch
+"@nextui-org/use-aria-toggle-button": patch
+"@nextui-org/use-disclosure": patch
+"@nextui-org/use-intersection-observer": patch
+"@nextui-org/use-is-mobile": patch
+"@nextui-org/use-pagination": patch
+"@nextui-org/aria-utils": patch
+---
+
+update react-aria version

.changeset/purple-berries-play.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/form": major
+---
+
+add form component

.changeset/sharp-pianos-pump.md

@@ -0,0 +1,9 @@
+---
+"@nextui-org/autocomplete": minor
+"@nextui-org/checkbox": minor
+"@nextui-org/date-picker": minor
+"@nextui-org/input": minor
+"@nextui-org/radio": minor
+---
+
+support server validation with form

apps/docs/package.json

@@ -18,7 +18,7 @@
     "@codesandbox/sandpack-react": "^2.6.4",
     "@iconify/icons-solar": "^1.2.3",
     "@iconify/react": "^4.1.1",
-    "@internationalized/date": "3.5.5",
+    "@internationalized/date": "3.5.6",
     "@mapbox/rehype-prism": "^0.6.0",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/badge": "workspace:*",
@@ -37,14 +37,14 @@
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.3",
-    "@react-aria/selection": "3.18.1",
-    "@react-aria/ssr": "3.9.4",
-    "@react-aria/utils": "3.24.1",
+    "@react-aria/focus": "3.18.2",
+    "@react-aria/i18n": "3.12.2",
+    "@react-aria/interactions": "3.22.2",
+    "@react-aria/selection": "3.19.3",
+    "@react-aria/ssr": "3.9.5",
+    "@react-aria/utils": "3.25.2",
     "@react-aria/virtualizer": "3.10.1",
-    "@react-aria/visually-hidden": "3.8.12",
+    "@react-aria/visually-hidden": "3.8.15",
     "@react-stately/data": "3.11.4",
     "@react-stately/layout": "3.13.9",
     "@react-stately/tree": "3.8.1",

package.json

@@ -69,7 +69,7 @@
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
     "@react-bootstrap/babel-preset": "^2.1.0",
-    "@react-types/link": "^3.4.4",
+    "@react-types/link": "3.5.7",
     "@react-types/shared": "3.24.1",
     "@storybook/react": "^7.4.6",
     "@swc/core": "^1.3.35",

packages/components/accordion/package.json

@@ -55,13 +55,13 @@
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
     "@nextui-org/dom-animation": "workspace:*",
-    "@react-aria/interactions": "3.22.2",
-    "@react-aria/focus": "3.18.2",
-    "@react-aria/utils": "3.25.2",
-    "@react-stately/tree": "3.8.4",
-    "@react-aria/button": "3.9.8",
-    "@react-types/accordion": "3.0.0-alpha.23",
-    "@react-types/shared": "3.24.1"
+    "@react-aria/interactions": "3.22.4",
+    "@react-aria/focus": "3.18.4",
+    "@react-aria/utils": "3.25.3",
+    "@react-stately/tree": "3.8.5",
+    "@react-aria/button": "3.10.1",
+    "@react-types/accordion": "3.0.0-alpha.24",
+    "@react-types/shared": "3.25.0"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/alert/package.json

@@ -47,8 +47,8 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@react-stately/utils": "3.10.1",
-    "@react-aria/utils": "3.24.1",
+    "@react-stately/utils": "3.10.4",
+    "@react-aria/utils": "3.25.3",
     "@nextui-org/button": "workspace:*"
   },
   "devDependencies": {

packages/components/autocomplete/__tests__/autocomplete.test.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import {within, render, renderHook, act} from "@testing-library/react";
 import userEvent, {UserEvent} from "@testing-library/user-event";
 import {useForm} from "react-hook-form";
+import {Form} from "@nextui-org/form";
 
 import {Autocomplete, AutocompleteItem, AutocompleteProps, AutocompleteSection} from "../src";
 import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../../modal/src";
@@ -588,6 +589,60 @@ describe("Autocomplete", () => {
     expect(autocomplete2).toHaveFocus();
   });
 
+  it("should work when key equals textValue", async () => {
+    const wrapper = render(
+      <Autocomplete
+        aria-label="Favorite Animal"
+        data-testid="when-key-equals-textValue"
+        defaultSelectedKey="cat"
+        items={itemsData}
+        label="Favorite Animal"
+      >
+        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
+      </Autocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
+
+    const user = userEvent.setup();
+
+    await user.click(autocomplete);
+
+    expect(autocomplete).toHaveValue("cat");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    let listboxItems = wrapper.getAllByRole("option");
+
+    await user.click(listboxItems[1]);
+
+    expect(autocomplete).toHaveValue("dog");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should work when key equals textValue (controlled)", async () => {
+    const wrapper = render(
+      <ControlledAutocomplete data-testid="when-key-equals-textValue" items={itemsData}>
+        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
+      </ControlledAutocomplete>,
+    );
+
+    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
+
+    const user = userEvent.setup();
+
+    await user.click(autocomplete);
+
+    expect(autocomplete).toHaveValue("cat");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+
+    let listboxItems = wrapper.getAllByRole("option");
+
+    await user.click(listboxItems[1]);
+
+    expect(autocomplete).toHaveValue("dog");
+    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+  });
+
   describe("validation", () => {
     let user;
 
@@ -598,9 +653,9 @@ describe("Autocomplete", () => {
     describe("validationBehavior=native", () => {
       it("supports isRequired", async () => {
         const {getByTestId, getByRole, findByRole} = render(
-          <form data-testid="form">
+          <Form data-testid="form">
             <AutocompleteExample isRequired validationBehavior="native" />
-          </form>,
+          </Form>,
         );
 
         const input = getByRole("combobox") as HTMLInputElement;
@@ -628,15 +683,71 @@ describe("Autocomplete", () => {
         await user.click(items[0]);
         expect(input).toHaveAttribute("aria-describedby");
       });
+
+      it("supports server validation", async () => {
+        function Test() {
+          const [serverErrors, setServerErrors] = React.useState({});
+          const onSubmit = (e) => {
+            e.preventDefault();
+            setServerErrors({
+              value: "Invalid value.",
+            });
+          };
+
+          return (
+            <Form validationErrors={serverErrors} onSubmit={onSubmit}>
+              <AutocompleteExample data-testid="input" name="value" validationBehavior="native" />
+              <button data-testid="submit" type="submit">
+                Submit
+              </button>
+            </Form>
+          );
+        }
+
+        const {getByTestId, getByRole} = render(<Test />);
+
+        const input = getByTestId("input") as HTMLInputElement;
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+
+        await user.click(getByTestId("submit"));
+
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid value.",
+        );
+        expect(input.validity.valid).toBe(false);
+
+        await user.tab({shift: true});
+        await user.keyboard("[ArrowRight]Ze");
+
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        const listbox = getByRole("listbox");
+        const items = within(listbox).getAllByRole("option");
+
+        await user.click(items[0]);
+        act(() => {
+          jest.runAllTimers();
+        });
+
+        expect(input).toHaveAttribute("aria-describedby");
+        await user.tab();
+
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input.validity.valid).toBe(true);
+      });
     });
 
     describe("validationBehavior=aria", () => {
       it("supports validate function", async () => {
         let {getByRole, findByRole} = render(
           <form data-testid="form">
             <AutocompleteExample
-              defaultInputValue="Penguin"
-              validate={(v) => (v.inputValue === "Penguin" ? "Invalid value" : null)}
+              defaultSelectedKey="penguin"
+              validate={(v) => (v.selectedKey === "penguin" ? "Invalid value" : null)}
               validationBehavior="aria"
             />
           </form>,
@@ -664,61 +775,42 @@ describe("Autocomplete", () => {
         expect(input).not.toHaveAttribute("aria-describedby");
         expect(input).not.toHaveAttribute("aria-invalid");
       });
-    });
-  });
 
-  it("should work when key equals textValue", async () => {
-    const wrapper = render(
-      <Autocomplete
-        aria-label="Favorite Animal"
-        data-testid="when-key-equals-textValue"
-        defaultSelectedKey="cat"
-        items={itemsData}
-        label="Favorite Animal"
-      >
-        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
-      </Autocomplete>,
-    );
-
-    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
-
-    const user = userEvent.setup();
-
-    await user.click(autocomplete);
-
-    expect(autocomplete).toHaveValue("cat");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
-
-    let listboxItems = wrapper.getAllByRole("option");
-
-    await user.click(listboxItems[1]);
-
-    expect(autocomplete).toHaveValue("dog");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
-  });
-
-  it("should work when key equals textValue (controlled)", async () => {
-    const wrapper = render(
-      <ControlledAutocomplete data-testid="when-key-equals-textValue" items={itemsData}>
-        {(item) => <AutocompleteItem key={item.value}>{item.value}</AutocompleteItem>}
-      </ControlledAutocomplete>,
-    );
+      it("supports server validation", async () => {
+        const {getByTestId, getByRole} = render(
+          <Form validationErrors={{value: "Invalid value"}}>
+            <AutocompleteExample data-testid="input" name="value" />
+          </Form>,
+        );
 
-    const autocomplete = wrapper.getByTestId("when-key-equals-textValue");
+        const input = getByTestId("input");
 
-    const user = userEvent.setup();
+        expect(input).toHaveAttribute("aria-describedby");
+        expect(input).toHaveAttribute("aria-invalid", "true");
+        expect(document.getElementById(input.getAttribute("aria-describedby")!)).toHaveTextContent(
+          "Invalid value",
+        );
 
-    await user.click(autocomplete);
+        await user.tab();
+        await user.keyboard("[ArrowRight]Ze");
 
-    expect(autocomplete).toHaveValue("cat");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "true");
+        act(() => {
+          jest.runAllTimers();
+        });
 
-    let listboxItems = wrapper.getAllByRole("option");
+        const listbox = getByRole("listbox");
+        const items = within(listbox).getAllByRole("option");
 
-    await user.click(listboxItems[1]);
+        await user.click(items[0]);
+        act(() => {
+          jest.runAllTimers();
+        });
 
-    expect(autocomplete).toHaveValue("dog");
-    expect(autocomplete).toHaveAttribute("aria-expanded", "false");
+        await user.tab();
+        expect(input).not.toHaveAttribute("aria-describedby");
+        expect(input).not.toHaveAttribute("aria-invalid");
+      });
+    });
   });
 });