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

@@ -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

@@ -67,8 +67,8 @@
  "@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/shared": "3.23.1",
+ "@react-types/link": "3.5.7",
+ "@react-types/shared": "3.24.1",
  "@storybook/react": "^7.4.6",
  "@swc-node/jest": "^1.5.2",
  "@swc/core": "^1.3.35",

packages/components/accordion/package.json

@@ -54,13 +54,13 @@
  "@nextui-org/framer-utils": "workspace:*",
  "@nextui-org/divider": "workspace:*",
  "@nextui-org/use-aria-accordion": "workspace:*",
- "@react-aria/interactions": "3.21.3",
- "@react-aria/focus": "3.17.1",
- "@react-aria/utils": "3.24.1",
- "@react-stately/tree": "3.8.1",
- "@react-aria/button": "3.9.5",
- "@react-types/accordion": "3.0.0-alpha.21",
- "@react-types/shared": "3.23.1"
+ "@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"
  },
  "devDependencies": {
  "@nextui-org/theme": "workspace:*",

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

@@ -2,6 +2,7 @@ import * as React from "react";
 import {within, render, renderHook, act} from "@testing-library/react";
 import 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";
@@ -626,6 +627,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;
 
@@ -636,9 +691,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;
@@ -666,15 +721,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>,
@@ -702,61 +813,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");
+ });
+ });
  });
 });