ci(changesets): version packages (#3147)

Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Hello!, I am very excited that you are interested in contributing with Next UI.
 ### Tooling
 
 - [PNPM](https://pnpm.io/) to manage packages and dependencies
-- [Tsup](https://tsup.egoist.sh/) to bundle packages
+- [Tsup](https://tsup.egoist.dev/) to bundle packages
 - [Storybook](https://storybook.js.org/) for rapid UI component development and
   testing
 - [Testing Library](https://testing-library.com/) for testing components and

apps/docs/app/examples/autocomplete/fully-controlled/page.tsx

@@ -53,7 +53,7 @@ export default function Page() {
 
   // Specify how each of the Autocomplete values should change when an
   // option is selected from the list box
-  const onSelectionChange = (key: React.Key) => {
+  const onSelectionChange = (key: React.Key | null) => {
     setFieldState((prevState) => {
       let selectedItem = prevState.items.find((option) => option.value === key);
 

apps/docs/config/routes.json

@@ -179,7 +179,8 @@
           "key": "checkbox",
           "title": "Checkbox",
           "keywords": "checkbox, binary choice, selection control, toggle",
-          "path": "/docs/components/checkbox.mdx"
+          "path": "/docs/components/checkbox.mdx",
+          "updated": true
         },
         {
           "key": "checkbox-group",
@@ -397,7 +398,8 @@
           "key": "tooltip",
           "title": "Tooltip",
           "keywords": "tooltip, hint, descriptive message, hover info",
-          "path": "/docs/components/tooltip.mdx"
+          "path": "/docs/components/tooltip.mdx",
+          "updated": true
         },
         {
           "key": "user",

apps/docs/content/blog/v2.4.0.mdx

@@ -230,7 +230,7 @@ The disabled option(s) will be displayed in the bottom of the list.
 
 ### Doctor Command add peerDependencies check
 
-The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies, relation: [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954).
+The `doctor` command now checks for peerDependencies and displays the incorrect peerDependencies. (See [nextui-org/nextui#2954](https://github.com/nextui-org/nextui/issues/2954) for more).
 
 <Spacer y={4} />
 
@@ -268,6 +268,20 @@ you need to update the import as follows:
 
 <Spacer y={4} />
 
+### Validation Behavior
+
+Since v2.4.0, we've changed the default validation behavior to `aria` which means no native validation is applied. If you wish to use the native validation, you can set `validationBehavior` to `native` to the input components or set it to the Provider as stated above.
+
+For those who use `validationBehavior="aria"`, `validate` will be no longer applied since it is only for native validation. Therefore, you need to switch to use `isInvalid` prop instead.
+
+```tsx
+<form onSubmit={onSubmit}>
+  <Input errorMessage={formErrors?.field1} isInvalid={!!formErrors?.field1} name="field1" />
+  <Button type="submit">Submit</Button>
+</form>
+```
+
+<Spacer y={4} />
 
 ## Other Changes
 

apps/docs/content/components/checkbox/custom-check-icon.ts

@@ -1,11 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
+const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
@@ -13,7 +9,7 @@ const HeartIcon = `export const HeartIcon = ({
       viewBox="0 0 24 24"
       fill='fill'
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
@@ -25,6 +21,9 @@ const HeartIcon = `export const HeartIcon = ({
 `;
 
 const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) => {
+  // avoid passing non-DOM attributes to svg
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
+
   return (
     <svg
       width={size || width || 24}
@@ -32,7 +31,7 @@ const PlusIcon = `export const PlusIcon = ({ size, height, width, ...props }) =>
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      {...props}
+      {...otherProps}
     >
       <path
         d="M6 12H18"

apps/docs/content/components/date-input/error-message-function.ts

@@ -0,0 +1,30 @@
+const App = `import {DateInput} from "@nextui-org/react";
+import {CalendarDate, parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DateInput 
+        label={"Birth date"} 
+        defaultValue={parseDate("2024-04-04")} 
+        placeholderValue={new CalendarDate(1995, 11, 6)} 
+        description={"This is my birth date."}
+        isInvalid
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+        className="max-w-xs"
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-input/index.ts

@@ -7,6 +7,7 @@ import labelPlacements from "./label-placements";
 import description from "./description";
 import startEndContent from "./start-end-content";
 import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import controlled from "./controlled";
 import timeZones from "./time-zones";
 import granularity from "./granularity";
@@ -25,6 +26,7 @@ export const dateInputContent = {
   description,
   startEndContent,
   errorMessage,
+  errorMessageFunction,
   controlled,
   timeZones,
   granularity,

apps/docs/content/components/date-picker/error-message-function.ts

@@ -0,0 +1,26 @@
+const App = `import {DatePicker} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      <DatePicker 
+        label="Birth date"
+        className="max-w-[284px]"
+        isInvalid
+        errorMessage={(value) => {
+          if (value.isInvalid) {
+            return "Please enter a valid date.";
+          }
+        }}
+      />
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-picker/index.ts

@@ -6,6 +6,7 @@ import variants from "./variants";
 import labelPlacements from "./label-placements";
 import description from "./description";
 import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import withMonthAndYearPickers from "./with-month-and-year-pickers";
 import withTimeField from "./with-time-field";
 import selectorIcon from "./selector-icon";
@@ -28,6 +29,7 @@ export const datePickerContent = {
   labelPlacements,
   description,
   errorMessage,
+  errorMessageFunction,
   withMonthAndYearPickers,
   withTimeField,
   selectorIcon,

apps/docs/content/components/date-range-picker/error-message-function.ts

@@ -0,0 +1,30 @@
+const App = `import {DateRangePicker} from "@nextui-org/react";
+import {parseDate} from "@internationalized/date";
+
+export default function App() {
+  return (
+    <DateRangePicker 
+      isInvalid
+      label="Stay duration" 
+      variant="bordered"
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter your stay duration";
+        }
+      }}
+      defaultValue={{
+        start: parseDate("2024-04-01"),
+        end: parseDate("2024-04-08"),
+      }}
+      className="max-w-xs"
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/date-range-picker/index.ts

@@ -6,6 +6,7 @@ import variants from "./variants";
 import labelPlacements from "./label-placements";
 import description from "./description";
 import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import withTimeField from "./with-time-field";
 import selectorIcon from "./selector-icon";
 import controlled from "./controlled";
@@ -28,6 +29,7 @@ export const dateRangePickerContent = {
   labelPlacements,
   description,
   errorMessage,
+  errorMessageFunction,
   withTimeField,
   selectorIcon,
   controlled,

apps/docs/content/components/date-range-picker/presets.ts

@@ -1,6 +1,6 @@
 const App = `import {DateRangePicker, Radio, RadioGroup, Button, ButtonGroup, cn} from "@nextui-org/react";
-import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, useDateFormatter, getLocalTimeZone} from "@internationalized/date";
-import {useLocale} from "@react-aria/i18n";
+import {today, startOfWeek, startOfMonth, endOfWeek, endOfMonth, getLocalTimeZone} from "@internationalized/date";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 
 export default function App() {
   let defaultDate = {

apps/docs/content/components/input/regex-validation.ts

@@ -3,7 +3,7 @@ const App = `import {Input} from "@nextui-org/react";
 export default function App() {
   const [value, setValue] = React.useState("junior2nextui.org");
 
-  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
+  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
 
   const isInvalid = React.useMemo(() => {
     if (value === "") return false;

apps/docs/content/components/tabs/placement.ts

@@ -7,7 +7,6 @@ export default function App() {
       <RadioGroup
         className="mb-4"
         label="Placement"
-        orientation="top"
         value={placement}
         onValueChange={(value) => setPlacement(value)}
       >

apps/docs/content/components/time-input/error-message-function.ts

@@ -0,0 +1,23 @@
+const App = `import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput 
+      label="Event Time"
+      isInvalid
+      errorMessage={(value) => {
+        if (value.isInvalid) {
+          return "Please enter a valid time";
+        }
+      }}
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/time-input/error-message.ts

@@ -0,0 +1,19 @@
+const App = `import {TimeInput} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <TimeInput 
+      label="Event Time"
+      isInvalid
+      errorMessage="Please enter a valid time"
+    />
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};

apps/docs/content/components/time-input/index.ts

@@ -4,6 +4,8 @@ import disabled from "./disabled";
 import readonly from "./read-only";
 import withoutLabel from "./without-label";
 import withDescription from "./with-description";
+import errorMessage from "./error-message";
+import errorMessageFunction from "./error-message-function";
 import labelPlacement from "./label-placement";
 import startContent from "./start-content";
 import endContent from "./end-content";
@@ -23,6 +25,8 @@ export const timeInputContent = {
   readonly,
   withoutLabel,
   withDescription,
+  errorMessage,
+  errorMessageFunction,
   labelPlacement,
   startContent,
   endContent,

apps/docs/content/docs/components/autocomplete.mdx

@@ -254,7 +254,7 @@ The following example uses the `defaultFilter` prop to filter the list of option
 
 ### Asynchronous Filtering
 
-Autocomplete supports asynchronous filtering, in the example below we are using the [useAyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
+Autocomplete supports asynchronous filtering, in the example below we are using the [useAsyncList](https://react-spectrum.adobe.com/react-stately/useAsyncList.html) function
 from [react-aria](https://react-spectrum.adobe.com) to handle asynchronous loading and filtering of data from a server.
 
 <PackageManagers

apps/docs/content/docs/components/checkbox-group.mdx

@@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe
 | validationState    | `valid` \| `invalid`                                                        | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                        | -          |
 | description        | `ReactNode`                                                                 | The checkbox group description.                                                                                                                               | -          |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | The checkbox group error message.                                                                                                                             | -          |
-| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -          |
+| validate           | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined`          | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
 | validationBehavior | `native` \| `aria`                                                          | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
 | isDisabled         | `boolean`                                                                   | Whether the checkbox group is disabled.                                                                                                                       | `false`    |
 | isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                     | `false`    |

apps/docs/content/docs/components/checkbox.mdx

@@ -13,8 +13,6 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -70,6 +68,8 @@ The `isIndeterminate` prop sets a `Checkbox` to an indeterminate state, overridi
 
 ### Custom Check Icon
 
+> By default, `IconProps` will be passed to your icon component.  Please make sure that `isSelected`, `isIndeterminate`, and `disableAnimation` are not passed to a DOM element.
+
 <CodeDemo title="Custom Check Icon" files={checkboxContent.customCheckIcon} />
 
 ### Controlled

apps/docs/content/docs/components/date-input.mdx

@@ -84,6 +84,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={dateInputContent.errorMessage} />
 
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={dateInputContent.errorMessageFunction} />
+
 ### Controlled
 
 You can use the `value` and `onChange` properties to control the input value.
@@ -299,7 +303,7 @@ import {parseZonedDateTime} from "@internationalized/date";
 | locale                  | `string`                                                                                                                          | The locale to display and edit the value according to.                                                                                                        | -         |
 | description             | `ReactNode`                                                                                                                       | A description for the date input. Provides a hint such as specific requirements for what to choose.                                                           | -         |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                 | An error message for the date input.                                                                                                                          | -         |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                          | -         |
+| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                              | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
 | validationBehavior      | `native` \| `aria`                                                                                                                | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
 | startContent            | `ReactNode`                                                                                                                       | Element to be rendered in the left side of the date input.                                                                                                    | -         |
 | endContent              | `ReactNode`                                                                                                                       | Element to be rendered in the right side of the date input.                                                                                                   | -         |

apps/docs/content/docs/components/date-picker.mdx

@@ -77,6 +77,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={datePickerContent.errorMessage} />
 
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={datePickerContent.errorMessageFunction} />
+
 ### With Month and Year Pickers
 
 <CodeDemo title="With Month and Year Pickers" files={datePickerContent.withMonthAndYearPickers} />
@@ -313,7 +317,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | placeholderValue        | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-picker.                                                                                                                           | -                                                                    |
 | description             | `ReactNode`                                                                                                                                              | A description for the date-picker. Provides a hint such as specific requirements for what to choose.                                                          | -                                                                    |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                          | -                                                                    |
-| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                          | -                                                                    |
+| validate                | `(value: MappedDateValue<DateValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
 | validationBehavior      | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`                                                               |
 | startContent            | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-picker.                                                                                                   | -                                                                    |
 | endContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-picker.                                                                                                  | -                                                                    |
@@ -342,6 +346,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | timeInputProps          | `TimeInputProps`                                                                                                                                         | Props to be passed to the time input component.                                                                                                               | `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }` |
 | disableAnimation        | `boolean`                                                                                                                                                | Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.                                                 | `false`                                                              |
 | classNames              | `Record<"base" \| "selectorButton" \| "selectorIcon" \| "popoverContent" \| "calendar" \| "calendarContent" \| "timeInputLabel" \| "timeInput", string>` | Allows to set custom class names for the date-picker slots.                                                                                                   | -                                                                    |
+| dateInputClassNames     | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "input"｜ "helperWrapper"｜ "description"｜ "errorMessage", string>`                          | Allows to set custom class names for the [date input slots](/docs/components/date-input#slots).                                                               | -                                                                    |
 
 ### DatePicker Events
 

apps/docs/content/docs/components/date-range-picker.mdx

@@ -92,6 +92,10 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={dateRangePickerContent.errorMessage} />
 
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={dateRangePickerContent.errorMessageFunction} />
+
 ### With Time Fields
 
 DateRangePicker automatically includes time fields when a `CalendarDateTime` or `ZonedDateTime` object is provided as the value.
@@ -270,13 +274,11 @@ in multiple formats into `ZonedDateTime` objects.
 import {
   DateValue,
   now,
-  useLocale,
   startOfWeek,
   startOfMonth,
-  useDateFormatter,
   getLocalTimeZone,
 } from "@internationalized/date";
-import {I18nProvider} from "@react-aria/i18n";
+import {useLocale, useDateFormatter} from "@react-aria/i18n";
 ```
 
 <CodeDemo title="Presets" files={dateRangePickerContent.presets} />
@@ -354,7 +356,7 @@ import {I18nProvider} from "@react-aria/i18n";
 | placeholderValue          | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null`                                                                         | The placeholder of the date-range-picker.                                                                                                                               | -                                                                    |
 | description               | `ReactNode`                                                                                                                                              | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose.                                                              | -                                                                    |
 | errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                        | An error message for the date input.                                                                                                                                    | -                                                                    |
-| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g., on blur), and return error messages for invalid values.                                                                    | -                                                                    |
+| validate                  | `(value: RangeValue<MappedDateValue<DateValue>>) => ValidationError ｜ true ｜ null ｜ undefined`                                                         | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                                                    |
 | validationBehavior        | `native` \| `aria`                                                                                                                                       | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.          | `aria`                                                               |
 | startContent              | `ReactNode`                                                                                                                                              | Element to be rendered in the left side of the date-range-picker.                                                                                                       | -                                                                    |
 | endContent                | `ReactNode`                                                                                                                                              | Element to be rendered in the right side of the date-range-picker.                                                                                                      | -                                                                    |

apps/docs/content/docs/components/input.mdx

@@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput`
 | placeholder        | `string`                                                                                                                                                               | The placeholder of the input.                                                                                                                                 | -         |
 | description        | `ReactNode`                                                                                                                                                            | A description for the input. Provides a hint such as specific requirements for what to choose.                                                                | -         |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                                                                                  | An error message for the input. It is only shown when `isInvalid` is set to `true`                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                       | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
 | validationBehavior | `native` \| `aria`                                                                                                                                                     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
 | startContent       | `ReactNode`                                                                                                                                                            | Element to be rendered in the left side of the input.                                                                                                         | -         |
 | endContent         | `ReactNode`                                                                                                                                                            | Element to be rendered in the right side of the input.                                                                                                        | -         |

apps/docs/content/docs/components/radio-group.mdx

@@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use
 | defaultValue       | `string[]`                                                                  | The default selected value. (uncontrolled).                                                                                                                                                                             | -          |
 | description        | `ReactNode`                                                                 | Radio group description .                                                                                                                                                                                               | -          |
 | errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                       | Radio group error message.                                                                                                                                                                                              | -          |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                                                     | -          |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`            | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -          |
 | validationBehavior | `native` \| `aria`                                                                                                                    | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`     |
 | isDisabled         | `boolean`                                                                   | Whether the radio group is disabled.                                                                                                                                                                                    | `false`    |
 | isRequired         | `boolean`                                                                   | Whether user checkboxes are required on the input before form submission.                                                                                                                                               | `false`    |

apps/docs/content/docs/components/range-calendar.mdx

@@ -226,7 +226,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr
 | isDateUnavailable         | `(date: DateValue) => boolean`                                                                                                                                                                                                                                                                                                                                                                | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                  | -                                 |   |
 | createCalendar            | `(calendar: SupportedCalendars) => Calendar \| null`                                                                                                                                                                                                                                                                                                                                          | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all<br> calendars`               |   |
 | errorMessage              | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                                                                                                                                                                                                                                                             | An error message for the field.                                                                                                                                                           | -                                 |   |
-| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                                                  | -                                 |   |
+| validate                  | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined`                                                                                                                                                                                                                                                                                     | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -                                 |   |
 | hideDisabledDates         | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to hide the disabled or invalid dates.                                                                                                                                            | `false`                           |   |
 | disableAnimation          | `boolean`                                                                                                                                                                                                                                                                                                                                                                                     | Whether to disable the animation of the calendar.                                                                                                                                         | `false`                           |   |
 | classNames                | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots.                                                                                                                                  | -                                 |   |

apps/docs/content/docs/components/select.mdx

@@ -285,6 +285,14 @@ the popover and listbox components.
 
 - **data-filled**:
   Indicates if the select has a value, is focused, has start/end content or is open.
+- **data-has-value**:
+  Indicates if the select has selected item(s).
+- **data-has-label**:
+  Indicates if the select has a label. Based on `label` prop.
+- **data-has-helper**:
+  Indicates if the select has helper text. Based on `errorMessage` or `description` prop.
+- **data-invalid**:
+  Indicates if the select is invalid. Based on `isInvalid` prop.
 
 `Select` has the following attributes on the `trigger` element:
 

apps/docs/content/docs/components/tabs.mdx

@@ -265,6 +265,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 | classNames             | `Record<"base"｜ "tabList"｜ "tab"｜ "tabContent"｜ "cursor" ｜ "panel", string>`                      | Allows to set custom class names for the card slots.                                                         | -           |
 | placement            | `top` \| `bottom` \| `start` \| `end`                                                                  | The position of the tabs.                                                                                    | `top`       |
 | isVertical             | `boolean`                                                                                              | Whether the tabs are vertical.                                                                               | `false`     |
+| destroyInactiveTabPanel | `boolean`                     | Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.                                                          | `true`  |
 
 ### Tabs Events
 
@@ -286,7 +287,6 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to
 | ping                    | `string`                      | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   | -       |
 | referrerPolicy          | `HTMLAttributeReferrerPolicy` | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 | -       |
 | shouldSelectOnPressUp   | `boolean`                     | Whether the tab selection should occur on press up instead of press down.                                                                                                        | -       |
-| destroyInactiveTabPanel | `boolean`                     | Whether to destroy inactive tab panel when switching tabs. Inactive tab panels are inert and cannot be interacted with.                                                          | `true`  |
 
 #### Motion Props
 

apps/docs/content/docs/components/textarea.mdx

@@ -13,8 +13,6 @@ Textarea component is a multi-line Input which allows you to write large texts.
 
 ---
 
-
-
 ## Installation
 
 <PackageManagers
@@ -24,11 +22,10 @@ Textarea component is a multi-line Input which allows you to write large texts.
     npm: "npm install @nextui-org/input",
     yarn: "yarn add @nextui-org/input",
     pnpm: "pnpm add @nextui-org/input",
-    bun: "bun add @nextui-org/input"
+    bun: "bun add @nextui-org/input",
   }}
 />
 
-
 ## Import
 
 <ImportTabs
@@ -139,36 +136,36 @@ You can use the `value` and `onValueChange` properties to control the input valu
 
 ### Textarea Props
 
-| Attribute          | Type                                                                                                               | Description                                                                                                                                                   | Default   |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
-| children           | `ReactNode`                                                                                                        | The content of the textarea.                                                                                                                                  | -         |
-| minRows            | `number`                                                                                                           | The minimum number of rows to display.                                                                                                                        | `3`       |
-| maxRows            | `number`                                                                                                           | Maximum number of rows up to which the textarea can grow.                                                                                                     | `8`       |
-| cacheMeasurements  | `boolean`                                                                                                          | Reuse previously computed measurements when computing height of textarea.                                                                                     | `false`   |
-| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                    | The variant of the textarea.                                                                                                                                  | `flat`    |
-| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                        | The color of the textarea.                                                                                                                                    | `default` |
-| size               | `sm`\|`md`\|`lg`                                                                                                   | The size of the textarea.                                                                                                                                     | `md`      |
-| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                           | The radius of the textarea.                                                                                                                                   | -         |
-| label              | `ReactNode`                                                                                                        | The content to display as the label.                                                                                                                          | -         |
-| value              | `string`                                                                                                           | The current value of the textarea (controlled).                                                                                                               | -         |
-| defaultValue       | `string`                                                                                                           | The default value of the textarea (uncontrolled).                                                                                                             | -         |
-| placeholder        | `string`                                                                                                           | The placeholder of the textarea.                                                                                                                              | -         |
-| startContent       | `ReactNode`                                                                                                        | Element to be rendered in the left side of the input.                                                                                                         | -         |
-| endContent         | `ReactNode`                                                                                                        | Element to be rendered in the right side of the input.                                                                                                        | -         |
-| description        | `ReactNode`                                                                                                        | A description for the textarea. Provides a hint such as specific requirements for what to choose.                                                             | -         |
-| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                              | An error message for the textarea.                                                                                                                            | -         |
-| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                   | Validate input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
-| validationBehavior | `native` \| `aria`                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria`    |
-| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                            | The position of the label.                                                                                                                                    | `inside`  |
-| fullWidth          | `boolean`                                                                                                          | Whether the textarea should take up the width of its parent.                                                                                                  | `true`    |
-| isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                        | `false`   |
-| isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                             |           |
-| isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                             | `false`   |
-| isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                              | `false`   |
-| validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                      | -         |
-| disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                               | `false`   |
-| disableAnimation   | `boolean`                                                                                                          | Whether the textarea should be animated.                                                                                                                      | `false`   |
-| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>`   | Allows to set custom class names for the checkbox slots.                                                                                                      | -         |
+| Attribute          | Type                                                                                                               | Description                                                                                                                                                                                                                                             | Default   |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| children           | `ReactNode`                                                                                                        | The content of the textarea.                                                                                                                                                                                                                            | -         |
+| minRows            | `number`                                                                                                           | The minimum number of rows to display.                                                                                                                                                                                                                  | `3`       |
+| maxRows            | `number`                                                                                                           | Maximum number of rows up to which the textarea can grow.                                                                                                                                                                                               | `8`       |
+| cacheMeasurements  | `boolean`                                                                                                          | Reuse previously computed measurements when computing height of textarea.                                                                                                                                                                               | `false`   |
+| variant            | `flat` \| `bordered` \| `faded` \| `underlined`                                                                    | The variant of the textarea.                                                                                                                                                                                                                            | `flat`    |
+| color              | `default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`                                        | The color of the textarea.                                                                                                                                                                                                                              | `default` |
+| size               | `sm`\|`md`\|`lg`                                                                                                   | The size of the textarea.                                                                                                                                                                                                                               | `md`      |
+| radius             | `none` \| `sm` \| `md` \| `lg` \| `full`                                                                           | The radius of the textarea.                                                                                                                                                                                                                             | -         |
+| label              | `ReactNode`                                                                                                        | The content to display as the label.                                                                                                                                                                                                                    | -         |
+| value              | `string`                                                                                                           | The current value of the textarea (controlled).                                                                                                                                                                                                         | -         |
+| defaultValue       | `string`                                                                                                           | The default value of the textarea (uncontrolled).                                                                                                                                                                                                       | -         |
+| placeholder        | `string`                                                                                                           | The placeholder of the textarea.                                                                                                                                                                                                                        | -         |
+| startContent       | `ReactNode`                                                                                                        | Element to be rendered in the left side of the input.                                                                                                                                                                                                   | -         |
+| endContent         | `ReactNode`                                                                                                        | Element to be rendered in the right side of the input.                                                                                                                                                                                                  | -         |
+| description        | `ReactNode`                                                                                                        | A description for the textarea. Provides a hint such as specific requirements for what to choose.                                                                                                                                                       | -         |
+| errorMessage       | `ReactNode` \| `((v: ValidationResult) => ReactNode)`                                                              | An error message for the textarea.                                                                                                                                                                                                                      | -         |
+| validate           | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined`                                                  | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop. | -         |
+| validationBehavior | `native` \| `aria`                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                          | `aria`    |
+| labelPlacement     | `inside` \| `outside` \| `outside-left`                                                                            | The position of the label.                                                                                                                                                                                                                              | `inside`  |
+| fullWidth          | `boolean`                                                                                                          | Whether the textarea should take up the width of its parent.                                                                                                                                                                                            | `true`    |
+| isRequired         | `boolean`                                                                                                          | Whether user input is required on the textarea before form submission.                                                                                                                                                                                  | `false`   |
+| isReadOnly         | `boolean`                                                                                                          | Whether the textarea can be selected but not changed by the user.                                                                                                                                                                                       |           |
+| isDisabled         | `boolean`                                                                                                          | Whether the textarea is disabled.                                                                                                                                                                                                                       | `false`   |
+| isInvalid          | `boolean`                                                                                                          | Whether the textarea is invalid.                                                                                                                                                                                                                        | `false`   |
+| validationState    | `valid` \| `invalid`                                                                                               | Whether the textarea should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead.                                                                                                                                | -         |
+| disableAutosize    | `boolean`                                                                                                          | Whether the textarea auto vertically resize should be disabled.                                                                                                                                                                                         | `false`   |
+| disableAnimation   | `boolean`                                                                                                          | Whether the textarea should be animated.                                                                                                                                                                                                                | `false`   |
+| classNames         | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the checkbox slots.                                                                                                                                                                                                | -         |
 
 ### Input Events
 

apps/docs/content/docs/components/time-input.mdx

@@ -78,6 +78,17 @@ A description for the field. Provides a hint such as specific requirements for w
 
 <CodeDemo title="With Description" files={timeInputContent.withDescription} />
 
+### With Error Message
+
+You can combine the `isInvalid` and `errorMessage` properties to show an invalid input.
+
+<CodeDemo title="With Error Message" files={timeInputContent.errorMessage} />
+
+You can also pass an error message as a function. This allows for dynamic error message handling based on the [ValidationResult]((https://github.com/adobe/react-spectrum/blob/1cacbf1d438675feb3859fee54b17e620b458d9c/packages/%40react-types/shared/src/inputs.d.ts#L44-L51)).
+
+<CodeDemo title="With Error Message Function" files={timeInputContent.errorMessageFunction} />
+
+
 ### Label Placement
 
 The label's overall position relative to the element it is labeling.
@@ -223,7 +234,7 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen
 | autoFocus               | `boolean`                                                                                                                                          | Whether the element should receive focus on render.                                                                                                                | -         |
 | description             | `ReactNode`                                                                                                                                        | A description for the field. Provides a hint such as specific requirements for what to choose.                                                                     | -         |
 | errorMessage            | `ReactNode \| (v: ValidationResult) => ReactNode`                                                                                                  | An error message for the field.                                                                                                                                    | -         |
-| validate                | `(value: MappedTimeValue<TimeValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                               | Validate time input values when committing (e.g. on blur), and return error messages for invalid values.                                                           | -         |
+| validate                | `(value: MappedTimeValue<TimeValue>) => ValidationError ｜ true ｜ null ｜ undefined`                                                               | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| -         |
 | validationBehavior      | `native` \| `aria`                                                                                                                                 | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.     | `aria`    |
 | disableAnimation        | `boolean`                                                                                                                                          | Whether to disable the animation of the time input.                                                                                                                | -         |
 | classNames              | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots.                                                                                                           | -         |

apps/docs/content/docs/components/tooltip.mdx

@@ -28,7 +28,6 @@ Tooltips display a brief, informative message that appears when a user interacts
   }}
 />
 
-
 ## Import
 
 <ImportTabs
@@ -38,6 +37,8 @@ Tooltips display a brief, informative message that appears when a user interacts
   }}
 />
 
+> For individual installation, please note that you should add `./node_modules/@nextui-org/theme/dist/components/popover.js` to your `tailwind.config.js` file instead since tooltip reuses popover styles.
+
 ## Usage
 
 <CodeDemo title="Usage" files={tooltipContent.usage} />

apps/docs/content/docs/guide/installation.mdx

@@ -32,11 +32,10 @@ nextui init my-nextui-app
 You will be prompted to configure your project:
 
 ```codeBlock bash
-? Select a template › - Use arrow-keys. Return to submit.
-❯   App
-    A Next.js 13 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.
-    Pages
-    A Next.js 13 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.
+◇  Select a template (Enter to select)
+│  ● App (A Next.js 14 with app directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Pages (A Next.js 14 with pages directory template pre-configured with NextUI (v2) and Tailwind CSS.)
+│  ○ Vite (A Vite template pre-configured with NextUI (v2) and Tailwind CSS.)
 ```
 
 Install the dependencies to start the local server:

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.2",
+    "@internationalized/date": "^3.5.4",
     "@mapbox/rehype-prism": "^0.6.0",
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/badge": "workspace:*",
@@ -37,17 +37,17 @@
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@react-aria/focus": "^3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/i18n": "^3.10.2",
-    "@react-aria/interactions": "^3.21.1",
-    "@react-aria/selection": "^3.17.5",
-    "@react-aria/ssr": "^3.9.2",
+    "@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/virtualizer": "^3.9.10",
-    "@react-aria/visually-hidden": "^3.8.10",
-    "@react-stately/data": "^3.11.2",
-    "@react-stately/layout": "^3.13.7",
-    "@react-stately/tree": "^3.7.6",
+    "@react-aria/virtualizer": "3.10.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/data": "3.11.4",
+    "@react-stately/layout": "3.13.9",
+    "@react-stately/tree": "3.8.1",
     "@rehooks/local-storage": "^2.4.5",
     "@vercel/analytics": "^1.2.2",
     "canvas-confetti": "^1.9.2",

packages/components/accordion/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @nextui-org/accordion
 
+## 2.0.35
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/use-aria-accordion@2.0.6
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/framer-utils@2.0.21
+  - @nextui-org/divider@2.0.28
+
 ## 2.0.34
 
 ### Patch Changes

packages/components/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/accordion",
-  "version": "2.0.34",
+  "version": "2.0.35",
   "description": "Collapse display a list of high-level options that can expand/collapse to reveal more information.",
   "keywords": [
     "react",
@@ -54,12 +54,12 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/tree": "3.7.6",
-    "@react-aria/button": "3.9.3",
-    "@react-types/accordion": "3.0.0-alpha.19",
+    "@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"
   },
   "devDependencies": {

packages/components/autocomplete/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nextui-org/autocomplete
 
+## 2.1.2
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix popover focus issue (#3171, #2992)
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- [#2969](https://github.com/nextui-org/nextui/pull/2969) [`255c641f9`](https://github.com/nextui-org/nextui/commit/255c641f96903e0d6d29343774e9e7ae67fcdb34) Thanks [@chirokas](https://github.com/chirokas)! - Fix autocomplete controlled state (#2955)
+
+- [#3175](https://github.com/nextui-org/nextui/pull/3175) [`2069a7a9d`](https://github.com/nextui-org/nextui/commit/2069a7a9d00291266fef763c6817b3bdd3ed4707) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix maximum update depth exceeded on Autocomplete component (#3094)
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`dbb4b8ee5`](https://github.com/nextui-org/nextui/commit/dbb4b8ee564114bfb0ef93467ed9ef6a3ff7e2e7), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/popover@2.1.24
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/button@2.0.34
+  - @nextui-org/input@2.2.2
+  - @nextui-org/listbox@2.1.22
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/scroll-shadow@2.1.17
+  - @nextui-org/spinner@2.0.30
+
 ## 2.1.1
 
 ### Patch Changes

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

@@ -48,6 +48,21 @@ const itemsSectionData = [
   },
 ];
 
+
+const ControlledAutocomplete = <T = object>(props: AutocompleteProps<T>) => {
+  const [selectedKey, setSelectedKey] = React.useState<React.Key>("cat");
+
+  return (
+    <Autocomplete
+      {...props}
+      aria-label="Favorite Animal"
+      label="Favorite Animal"
+      selectedKey={selectedKey}
+      onSelectionChange={setSelectedKey}
+    />
+  );
+};
+
 const AutocompleteExample = (props: Partial<AutocompleteProps> = {}) => (
   <Autocomplete label="Favorite Animal" {...props}>
     <AutocompleteItem key="penguin" value="penguin">
@@ -62,6 +77,7 @@ const AutocompleteExample = (props: Partial<AutocompleteProps> = {}) => (
   </Autocomplete>
 );
 
+
 describe("Autocomplete", () => {
   it("should render correctly", () => {
     const wrapper = render(<AutocompleteExample />);
@@ -165,7 +181,7 @@ describe("Autocomplete", () => {
     // assert that the autocomplete listbox is open
     expect(autocomplete).toHaveAttribute("aria-expanded", "true");
 
-    // assert that input is focused
+    // assert that the autocomplete input is focused
     expect(autocomplete).toHaveFocus();
   });
 
@@ -355,8 +371,8 @@ describe("Autocomplete", () => {
     // assert that the autocomplete listbox is closed
     expect(autocomplete).toHaveAttribute("aria-expanded", "false");
 
-    // assert that input is not focused
-    expect(autocomplete).not.toHaveFocus();
+    // assert that input is focused
+    expect(autocomplete).toHaveFocus();
   });
 
   it("should set the input after selection", async () => {
@@ -529,7 +545,7 @@ describe("Autocomplete", () => {
           <form data-testid="form">
             <AutocompleteExample
               defaultInputValue="Penguin"
-              validate={(v) => (v === "Penguin" ? "Invalid value" : null)}
+              validate={(v) => (v.inputValue === "Penguin" ? "Invalid value" : null)}
               validationBehavior="aria"
             />
           </form>,
@@ -559,6 +575,60 @@ describe("Autocomplete", () => {
       });
     });
   });
+
+  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("Autocomplete with React Hook Form", () => {

packages/components/autocomplete/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/autocomplete",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
@@ -53,14 +53,14 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/combobox": "3.8.4",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/i18n": "3.10.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/combobox": "3.9.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
-    "@react-stately/combobox": "3.8.2",
-    "@react-types/combobox": "3.10.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/combobox": "3.8.4",
+    "@react-types/combobox": "3.11.1",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {
@@ -70,7 +70,7 @@
     "@nextui-org/chip": "workspace:*",
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "@react-stately/data": "3.11.2",
+    "@react-stately/data": "3.11.4",
     "framer-motion": "^11.0.28",
     "clean-package": "2.2.0",
     "react": "^18.0.0",

packages/components/autocomplete/src/use-autocomplete.ts

@@ -202,9 +202,6 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
   const inputRef = useDOMRef<HTMLInputElement>(ref);
   const scrollShadowRef = useDOMRef<HTMLElement>(scrollRefProp);
 
-  // control the input focus behaviours internally
-  const shouldFocus = useRef(false);
-
   const {
     buttonProps,
     inputProps,
@@ -314,32 +311,28 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     const key = inputRef.current.value;
     const item = state.collection.getItem(key);
 
-    if (item) {
+    if (item && state.inputValue !== item.textValue) {
       state.setSelectedKey(key);
       state.setInputValue(item.textValue);
     }
-  }, [inputRef.current, state]);
+  }, [inputRef.current]);
 
-  // apply the same with to the popover as the select
   useEffect(() => {
-    if (isOpen && popoverRef.current && inputWrapperRef.current) {
-      let rect = inputWrapperRef.current.getBoundingClientRect();
+    // set input focus
+    if (isOpen) {
+      onFocus(true);
 
-      let popover = popoverRef.current;
+      // apply the same with to the popover as the select
+      if (popoverRef.current && inputWrapperRef.current) {
+        let rect = inputWrapperRef.current.getBoundingClientRect();
 
-      popover.style.width = rect.width + "px";
+        let popover = popoverRef.current;
+
+        popover.style.width = rect.width + "px";
+      }
     }
   }, [isOpen]);
 
-  // react aria has different focus strategies internally
-  // hence, handle focus behaviours on our side for better flexibilty
-  useEffect(() => {
-    const action = shouldFocus.current || isOpen ? "focus" : "blur";
-
-    inputRef?.current?.[action]();
-    if (action === "blur") shouldFocus.current = false;
-  }, [shouldFocus.current, isOpen]);
-
   // to prevent the error message:
   // stopPropagation is now the default behavior for events in React Spectrum.
   // You can use continuePropagation() to revert this behavior.
@@ -466,8 +459,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
       },
       shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
         ? popoverProps.shouldCloseOnInteractOutside
-        : (element: Element) =>
-            ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state, shouldFocus),
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
     } as unknown as PopoverProps;
   };
 

packages/components/avatar/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nextui-org/avatar
 
+## 2.0.30
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.29
 
 ### Patch Changes

packages/components/avatar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/avatar",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.",
   "keywords": [
     "avatar"
@@ -43,9 +43,9 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-image": "workspace:*",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/avatar/src/use-avatar.ts

@@ -201,6 +201,7 @@ export function useAvatar(originalProps: UseAvatarProps = {}) {
     (props = {}) => ({
       ref: imgRef,
       src: src,
+      disableAnimation,
       "data-loaded": dataAttr(isImgLoaded),
       className: slots.img({class: classNames?.img}),
       ...mergeProps(

packages/components/badge/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/badge
 
+## 2.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.28
 
 ### Patch Changes

packages/components/badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/badge",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "description": "Badges are used as a small numerical value or status descriptor for UI elements.",
   "keywords": [
     "badge"

packages/components/breadcrumbs/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/breadcrumbs
 
+## 2.0.10
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.9
 
 ### Patch Changes

packages/components/breadcrumbs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/breadcrumbs",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "Breadcrumbs display a hierarchy of links to the current page or resource in an application.",
   "keywords": [
     "breadcrumbs"
@@ -43,10 +43,10 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/breadcrumbs": "3.5.11",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/breadcrumbs": "3.5.13",
     "@react-aria/utils": "3.24.1",
-    "@react-types/breadcrumbs": "3.7.3",
+    "@react-types/breadcrumbs": "3.7.5",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/button/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/button
 
+## 2.0.34
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/ripple@2.0.30
+  - @nextui-org/spinner@2.0.30
+
 ## 2.0.33
 
 ### Patch Changes

packages/components/button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/button",
-  "version": "2.0.33",
+  "version": "2.0.34",
   "description": "Buttons allow users to perform actions and choose with a single tap.",
   "keywords": [
     "button"
@@ -46,12 +46,12 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/ripple": "workspace:*",
     "@nextui-org/spinner": "workspace:*",
-    "@react-aria/button": "3.9.3",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/button": "3.9.5",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-types/shared": "3.23.1",
-    "@react-types/button": "3.9.2"
+    "@react-types/button": "3.9.4"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/calendar/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/calendar
 
+## 2.0.7
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/button@2.0.34
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/framer-utils@2.0.21
+
 ## 2.0.6
 
 ### Patch Changes

packages/components/calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/calendar",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "A calendar displays one or more date grids and allows users to select a single date.",
   "keywords": [
     "calendar"
@@ -47,17 +47,17 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "lodash.debounce": "^4.0.8",
-    "@internationalized/date": "^3.5.2",
-    "@react-aria/calendar": "3.5.6",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/i18n": "3.10.2",
-    "@react-stately/calendar": "3.4.4",
-    "@react-types/button": "3.9.2",
-    "@react-aria/visually-hidden": "3.8.10",
+    "@internationalized/date": "^3.5.4",
+    "@react-aria/calendar": "3.5.8",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-stately/calendar": "3.5.1",
+    "@react-types/button": "3.9.4",
+    "@react-aria/visually-hidden": "3.8.12",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.9.1",
-    "@react-types/calendar": "3.4.4",
-    "@react-aria/interactions": "3.21.1",
+    "@react-stately/utils": "3.10.1",
+    "@react-types/calendar": "3.4.6",
+    "@react-aria/interactions": "3.21.3",
     "@react-types/shared": "3.23.1",
     "scroll-into-view-if-needed": "3.0.10",
     "@types/lodash.debounce": "^4.0.7"

packages/components/card/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/card
 
+## 2.0.31
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/ripple@2.0.30
+
 ## 2.0.30
 
 ### Patch Changes

packages/components/card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/card",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "Card is a container for text, photos, and actions in the context of a single subject.",
   "keywords": [
     "card"
@@ -45,10 +45,10 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/ripple": "workspace:*",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/button": "3.9.3",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/button": "3.9.5",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/checkbox/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nextui-org/checkbox
 
+## 2.1.2
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.1.1
 
 ### Patch Changes

packages/components/checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/checkbox",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.",
   "keywords": [
     "checkbox"
@@ -44,14 +44,14 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-callback-ref": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/checkbox": "3.14.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/checkbox": "3.14.3",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
-    "@react-stately/checkbox": "3.6.3",
-    "@react-stately/toggle": "3.7.2",
-    "@react-types/checkbox": "3.7.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/checkbox": "3.6.5",
+    "@react-stately/toggle": "3.7.4",
+    "@react-types/checkbox": "3.8.1",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/chip/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/chip
 
+## 2.0.30
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.29
 
 ### Patch Changes

packages/components/chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/chip",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "Chips help people enter information, make selections, filter content, or trigger actions.",
   "keywords": [
     "chip"
@@ -43,10 +43,10 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-types/checkbox": "3.7.1"
+    "@react-types/checkbox": "3.8.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/code/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nextui-org/code
 
+## 2.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/system-rsc@2.1.2
+
 ## 2.0.28
 
 ### Patch Changes

packages/components/code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/code",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "description": "Code is a component used to display inline code.",
   "keywords": [
     "code"

packages/components/date-input/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/date-input
 
+## 2.1.1
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- [#3112](https://github.com/nextui-org/nextui/pull/3112) [`df0126f93`](https://github.com/nextui-org/nextui/commit/df0126f93f0f9c2cfa0cbfa44f5abd394ebd48d0) Thanks [@ryo-manba](https://github.com/ryo-manba)! - chore(date): update errorMessageFunction story and docs for date libraries
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.1.0
 
 ### Minor Changes

packages/components/date-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-input",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "A date input allows users to enter and edit date and time values using a keyboard.",
   "keywords": [
     "date-field"
@@ -42,13 +42,13 @@
   "dependencies": {
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
-    "@internationalized/date": "^3.5.2",
-    "@react-aria/datepicker": "3.9.3",
-    "@react-aria/i18n": "3.10.2",
-    "@react-stately/datepicker": "3.9.2",
-    "@react-types/datepicker": "3.7.2",
+    "@internationalized/date": "^3.5.4",
+    "@react-aria/datepicker": "3.10.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-stately/datepicker": "3.9.4",
+    "@react-types/datepicker": "3.7.4",
     "@react-types/shared": "3.23.1",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/system": "workspace:*",

packages/components/date-input/src/date-input-group.tsx

@@ -1,21 +1,11 @@
 import type {HTMLAttributes, ReactElement, ReactNode} from "react";
-import type {GroupDOMAttributes} from "@react-types/shared";
+import type {GroupDOMAttributes, HelpTextProps, ValidationResult} from "@react-types/shared";
 
 import {useMemo} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {dataAttr} from "@nextui-org/shared-utils";
 
-// TODO: Use HelpTextProps from "@react-types/shared"; once we upgrade react-aria packages to the latest version.
-export interface ValidationResult {
-  /** Whether the input value is invalid. */
-  isInvalid: boolean;
-  /** The current error messages for the input if it is invalid, otherwise an empty array. */
-  validationErrors: string[];
-  /** The native validation details for the input. */
-  validationDetails: ValidityState;
-}
-
-export interface DateInputGroupProps extends ValidationResult {
+export interface DateInputGroupProps extends ValidationResult, HelpTextProps {
   children?: ReactElement | ReactElement[];
   shouldLabelBeOutside?: boolean;
   label?: ReactNode;
@@ -27,10 +17,6 @@ export interface DateInputGroupProps extends ValidationResult {
   labelProps?: HTMLAttributes<HTMLElement>;
   descriptionProps?: HTMLAttributes<HTMLElement>;
   errorMessageProps?: HTMLAttributes<HTMLElement>;
-  /** A description for the field. Provides a hint such as specific requirements for what to choose. */
-  description?: ReactNode;
-  /** An error message for the field. */
-  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);
 }
 
 export const DateInputGroup = forwardRef<"div", DateInputGroupProps>((props, ref) => {

packages/components/date-input/src/use-date-input.ts

@@ -155,7 +155,6 @@ export function useDateInput<T extends DateValue>(originalProps: UseDateInputPro
     minValue,
     maxValue,
     validationBehavior,
-    isInvalid: isInvalidProp,
     shouldForceLeadingZeros,
     createCalendar:
       !createCalendarProp || typeof createCalendarProp !== "function"

packages/components/date-input/stories/date-input.stories.tsx

@@ -13,6 +13,7 @@ import {
 } from "@internationalized/date";
 import {CalendarBoldIcon} from "@nextui-org/shared-icons";
 import {useDateFormatter, I18nProvider} from "@react-aria/i18n";
+import {ValidationResult} from "@react-types/shared";
 
 import {DateInput, DateInputProps} from "../src";
 
@@ -254,10 +255,25 @@ export const WithErrorMessage = {
 
   args: {
     ...defaultProps,
+    isInvalid: true,
     errorMessage: "Please enter a valid date",
   },
 };
 
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date";
+      }
+    },
+  },
+};
+
 export const IsInvalid = {
   render: Template,
 

packages/components/date-input/stories/time-input.stories.tsx

@@ -9,6 +9,7 @@ import {
   ZonedDateTime,
 } from "@internationalized/date";
 import {useDateFormatter} from "@react-aria/i18n";
+import {ValidationResult} from "@react-types/shared";
 
 import {TimeInput, TimeInputProps, TimeInputValue as TimeValue} from "../src";
 
@@ -192,6 +193,30 @@ export const WithDescription = {
   },
 };
 
+export const WithErrorMessage = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: "Please enter a valid time",
+  },
+};
+
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date";
+      }
+    },
+  },
+};
+
 export const LabelPlacement = {
   render: LabelPlacementTemplate,
 

packages/components/date-picker/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @nextui-org/date-picker
 
+## 2.1.2
+
+### Patch Changes
+
+- [#3146](https://github.com/nextui-org/nextui/pull/3146) [`3da81494c`](https://github.com/nextui-org/nextui/commit/3da81494c37f26e9b0e76745e461ac091e7c03af) Thanks [@ryo-manba](https://github.com/ryo-manba)! - Add support for apply styles to DateInput (#2770, #2895, #2998)
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- [#3112](https://github.com/nextui-org/nextui/pull/3112) [`df0126f93`](https://github.com/nextui-org/nextui/commit/df0126f93f0f9c2cfa0cbfa44f5abd394ebd48d0) Thanks [@ryo-manba](https://github.com/ryo-manba)! - chore(date): update errorMessageFunction story and docs for date libraries
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`df0126f93`](https://github.com/nextui-org/nextui/commit/df0126f93f0f9c2cfa0cbfa44f5abd394ebd48d0), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/popover@2.1.24
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/button@2.0.34
+  - @nextui-org/calendar@2.0.7
+  - @nextui-org/date-input@2.1.1
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.1.1
 
 ### Patch Changes

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -172,6 +172,26 @@ describe("DatePicker", () => {
 
       expect(getByTestId("foo")).toHaveAttribute("role", "group");
     });
+
+    it("should apply custom dateInput classNames", function () {
+      const {getByRole, getByText} = render(
+        <DatePicker
+          dateInputClassNames={{
+            inputWrapper: "border-green-500",
+            label: "text-green-500",
+          }}
+          label="Date"
+        />,
+      );
+
+      const label = getByText("Date");
+
+      expect(label).toHaveClass("text-green-500");
+
+      const inputWrapper = getByRole("group");
+
+      expect(inputWrapper).toHaveClass("border-green-500");
+    });
   });
 
   describe("Events", () => {

packages/components/date-picker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/date-picker",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.",
   "keywords": [
     "date-picker"
@@ -48,15 +48,15 @@
     "@nextui-org/date-input": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/aria-utils": "workspace:*",
-    "@react-stately/overlays": "3.6.5",
-    "@react-stately/utils": "3.9.1",
-    "@internationalized/date": "^3.5.2",
-    "@react-aria/datepicker": "3.9.3",
-    "@react-aria/i18n": "3.10.2",
-    "@react-stately/datepicker": "3.9.2",
-    "@react-types/datepicker": "3.7.2",
+    "@react-stately/overlays": "3.6.7",
+    "@react-stately/utils": "3.10.1",
+    "@internationalized/date": "^3.5.4",
+    "@react-aria/datepicker": "3.10.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-stately/datepicker": "3.9.4",
+    "@react-types/datepicker": "3.7.4",
     "@react-types/shared": "3.23.1",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/system": "workspace:*",

packages/components/date-picker/src/use-date-picker.ts

@@ -49,7 +49,13 @@ interface Props<T extends DateValue>
   classNames?: SlotsToClasses<DatePickerSlots> & DateInputProps<T>["classNames"];
 }
 
-export type UseDatePickerProps<T extends DateValue> = Props<T> & AriaDatePickerProps<T>;
+export type UseDatePickerProps<T extends DateValue> = Props<T> &
+  AriaDatePickerProps<T> & {
+    /**
+     * Classname or List of classes to change the classNames of the date input element.
+     */
+    dateInputClassNames?: DateInputProps<T>["classNames"];
+  };
 
 export function useDatePicker<T extends DateValue>({
   className,
@@ -129,6 +135,7 @@ export function useDatePicker<T extends DateValue>({
   const getDateInputProps = () => {
     return {
       ...dateInputProps,
+      classNames: {...originalProps?.dateInputClassNames},
       groupProps,
       labelProps,
       createCalendar,

packages/components/date-picker/stories/date-picker.stories.tsx

@@ -17,6 +17,7 @@ import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
 import {Radio, RadioGroup} from "@nextui-org/radio";
 import {cn} from "@nextui-org/theme";
+import {ValidationResult} from "@react-types/shared";
 
 import {DatePicker, DatePickerProps} from "../src";
 
@@ -424,10 +425,25 @@ export const WithErrorMessage = {
 
   args: {
     ...defaultProps,
+    isInvalid: true,
     errorMessage: "Please enter a valid date",
   },
 };
 
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date";
+      }
+    },
+  },
+};
+
 export const IsInvalid = {
   render: Template,
 
@@ -537,3 +553,18 @@ export const WithValidation = {
     label: "Date (Year 2024 or later)",
   },
 };
+
+export const WithDateInputClassNames = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    dateInputClassNames: {
+      base: "bg-gray-200 p-2 rounded-md",
+      label: "text-blue-400 font-semibold",
+      inputWrapper: "border-3 border-solid border-blue-400 p-2 rounded-md",
+      description: "text-black",
+    },
+    isRequired: true,
+    description: "Please enter your birth date",
+  },
+};

packages/components/date-picker/stories/date-range-picker.stories.tsx

@@ -13,7 +13,7 @@ import {
   startOfWeek,
   today,
 } from "@internationalized/date";
-import {RangeValue} from "@react-types/shared";
+import {RangeValue, ValidationResult} from "@react-types/shared";
 import {DateValue} from "@react-types/datepicker";
 import {I18nProvider, useDateFormatter, useLocale} from "@react-aria/i18n";
 import {Button, ButtonGroup} from "@nextui-org/button";
@@ -499,7 +499,22 @@ export const WithErrorMessage = {
 
   args: {
     ...defaultProps,
-    errorMessage: "Please enter your stay duration",
+    isInvalid: true,
+    errorMessage: "Please enter a valid date range",
+  },
+};
+
+export const WithErrorMessageFunction = {
+  render: Template,
+
+  args: {
+    ...defaultProps,
+    isInvalid: true,
+    errorMessage: (value: ValidationResult) => {
+      if (value.isInvalid) {
+        return "Please enter a valid date range";
+      }
+    },
   },
 };
 

packages/components/dropdown/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/dropdown
 
+## 2.1.26
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/popover@2.1.24
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/menu@2.0.25
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.1.25
 
 ### Patch Changes

packages/components/dropdown/__tests__/dropdown.test.tsx

@@ -667,7 +667,7 @@ describe("Keyboard interactions", () => {
 
     expect(triggerButton).toHaveFocus();
 
-    fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes.Space});
+    fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes[" "]});
 
     let menu = wrapper.queryByRole("menu");
 
@@ -679,4 +679,120 @@ describe("Keyboard interactions", () => {
 
     expect(menuItems[0]).toHaveFocus();
   });
+
+  it("should press the item on keyDown (Enter)", async () => {
+    const user = userEvent.setup();
+
+    const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+
+    const wrapper = render(
+      <Dropdown>
+        <DropdownTrigger>
+          <Button data-testid="trigger-test">Trigger</Button>
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Actions" selectionMode="single">
+          <DropdownItem
+            key="new"
+            onPress={() => {
+              /* eslint-disable no-console */
+              console.log("ENTER");
+            }}
+          >
+            New file
+          </DropdownItem>
+          <DropdownItem key="copy">Copy link</DropdownItem>
+          <DropdownItem key="edit">Edit file</DropdownItem>
+          <DropdownItem key="delete" color="danger">
+            Delete file
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    let triggerButton = wrapper.getByTestId("trigger-test");
+
+    act(() => {
+      triggerButton.focus();
+    });
+
+    expect(triggerButton).toHaveFocus();
+
+    fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+
+    let menu = wrapper.queryByRole("menu");
+
+    expect(menu).toBeTruthy();
+
+    let menuItems = wrapper.getAllByRole("menuitemradio");
+
+    expect(menuItems.length).toBe(4);
+
+    expect(menuItems[0]).toHaveFocus();
+
+    await act(async () => {
+      await user.keyboard("[Enter]");
+    });
+
+    expect(logSpy).toHaveBeenCalledWith("ENTER");
+
+    logSpy.mockRestore();
+  });
+
+  it("should press the item on keyDown (Space)", async () => {
+    const user = userEvent.setup();
+
+    const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+
+    const wrapper = render(
+      <Dropdown>
+        <DropdownTrigger>
+          <Button data-testid="trigger-test">Trigger</Button>
+        </DropdownTrigger>
+        <DropdownMenu aria-label="Actions" selectionMode="single">
+          <DropdownItem
+            key="new"
+            onPress={() => {
+              /* eslint-disable no-console */
+              console.log("SPACE");
+            }}
+          >
+            New file
+          </DropdownItem>
+          <DropdownItem key="copy">Copy link</DropdownItem>
+          <DropdownItem key="edit">Edit file</DropdownItem>
+          <DropdownItem key="delete" color="danger">
+            Delete file
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    let triggerButton = wrapper.getByTestId("trigger-test");
+
+    act(() => {
+      triggerButton.focus();
+    });
+
+    expect(triggerButton).toHaveFocus();
+
+    fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+
+    let menu = wrapper.queryByRole("menu");
+
+    expect(menu).toBeTruthy();
+
+    let menuItems = wrapper.getAllByRole("menuitemradio");
+
+    expect(menuItems.length).toBe(4);
+
+    expect(menuItems[0]).toHaveFocus();
+
+    await act(async () => {
+      await user.keyboard("[Space]");
+    });
+
+    expect(logSpy).toHaveBeenCalledWith("SPACE");
+
+    logSpy.mockRestore();
+  });
 });

packages/components/dropdown/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/dropdown",
-  "version": "2.1.25",
+  "version": "2.1.26",
   "description": "A dropdown displays a list of actions or options that a user can choose.",
   "keywords": [
     "dropdown"
@@ -46,11 +46,11 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/aria-utils": "workspace:*",
-    "@react-aria/menu": "3.13.1",
+    "@react-aria/menu": "3.14.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/menu": "3.6.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-types/menu": "3.9.7"
+    "@react-stately/menu": "3.7.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-types/menu": "3.9.9"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/image/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nextui-org/image
 
+## 2.0.29
+
+### Patch Changes
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.28
 
 ### Patch Changes

packages/components/image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/image",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "description": "A simple image component",
   "keywords": [
     "image"

packages/components/input/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/input
 
+## 2.2.2
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- [#3174](https://github.com/nextui-org/nextui/pull/3174) [`dbb4b8ee5`](https://github.com/nextui-org/nextui/commit/dbb4b8ee564114bfb0ef93467ed9ef6a3ff7e2e7) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix input display with hidden type (#3170)
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.2.1
 
 ### Patch Changes

packages/components/input/__tests__/input.test.tsx

@@ -153,6 +153,33 @@ describe("Input", () => {
 
     expect(onClear).toHaveBeenCalledTimes(1);
   });
+
+  it("should not display input with hidden type", async () => {
+    const wrapper = render(
+      <>
+        <Input data-testid="input-1" type="hidden" />
+        <Input data-testid="input-2" />
+      </>,
+    );
+
+    const {container} = wrapper;
+
+    const inputBaseWrappers = container.querySelectorAll("[data-slot='base']");
+
+    expect(inputBaseWrappers).toHaveLength(2);
+
+    const inputs = container.querySelectorAll("input");
+
+    expect(inputs).toHaveLength(2);
+
+    expect(inputBaseWrappers[0]).toHaveAttribute("data-hidden");
+
+    expect(inputBaseWrappers[1]).not.toHaveAttribute("data-hidden");
+
+    expect(inputs[0]).not.toBeVisible();
+
+    expect(inputs[1]).toBeVisible();
+  });
 });
 
 describe("Input with React Hook Form", () => {

packages/components/input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/input",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "The input component is designed for capturing user input within a text field.",
   "keywords": [
     "input"
@@ -44,13 +44,13 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/textfield": "3.14.3",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/textfield": "3.14.5",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.9.1",
+    "@react-stately/utils": "3.10.1",
     "@react-types/shared": "3.23.1",
-    "@react-types/textfield": "3.9.1",
+    "@react-types/textfield": "3.9.3",
     "react-textarea-autosize": "^8.5.3"
   },
   "devDependencies": {

packages/components/input/src/use-input.ts

@@ -145,9 +145,11 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
   const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
   const isFilled = !isEmpty(inputValue) || isFilledByDefault;
   const isFilledWithin = isFilled || isFocusWithin;
-  const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
+  const isHiddenType = type === "hidden";
   const isMultiline = originalProps.isMultiline;
 
+  const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
+
   const handleClear = useCallback(() => {
     setInputValue("");
 
@@ -286,6 +288,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
         "data-has-helper": dataAttr(hasHelper),
         "data-has-label": dataAttr(hasLabel),
         "data-has-value": dataAttr(!isPlaceholderShown),
+        "data-hidden": dataAttr(isHiddenType),
         ...focusWithinProps,
         ...props,
       };
@@ -307,6 +310,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
       isFilledWithin,
       hasPlaceholder,
       focusWithinProps,
+      isHiddenType,
       originalProps.isReadOnly,
       originalProps.isRequired,
       originalProps.isDisabled,

packages/components/input/stories/input.stories.tsx

@@ -137,7 +137,7 @@ const PasswordTemplate = (args) => {
 const RegexValidationTemplate = (args) => {
   const [value, setValue] = React.useState("");
 
-  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i);
+  const validateEmail = (value) => value.match(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i);
 
   const validationState = React.useMemo(() => {
     if (value === "") return undefined;

packages/components/kbd/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nextui-org/kbd
 
+## 2.0.30
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/system-rsc@2.1.2
+
 ## 2.0.29
 
 ### Patch Changes

packages/components/kbd/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/kbd",
-  "version": "2.0.29",
+  "version": "2.0.30",
   "description": "The keyboard key components indicates which key or set of keys used to execute a specificv  action",
   "keywords": [
     "kbd"
@@ -42,7 +42,7 @@
     "@nextui-org/system-rsc": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/link/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/link
 
+## 2.0.32
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/use-aria-link@2.0.18
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.31
 
 ### Patch Changes

packages/components/link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/link",
-  "version": "2.0.31",
+  "version": "2.0.32",
   "description": "Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an <a>",
   "keywords": [
     "link"
@@ -46,8 +46,8 @@
     "@nextui-org/use-aria-link": "workspace:*",
     "@react-aria/link": "3.7.1",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-types/link": "3.5.3"
+    "@react-aria/focus": "3.17.1",
+    "@react-types/link": "3.5.5"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/listbox/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nextui-org/listbox
 
+## 2.1.22
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/use-is-mobile@2.0.8
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/divider@2.0.28
+
 ## 2.1.21
 
 ### Patch Changes

packages/components/listbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/listbox",
-  "version": "2.1.21",
+  "version": "2.1.22",
   "description": "A listbox displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "listbox"
@@ -46,11 +46,11 @@
     "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/listbox": "3.11.5",
-    "@react-stately/list": "3.10.3",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
-    "@react-types/menu": "3.9.7",
+    "@react-aria/listbox": "3.12.1",
+    "@react-stately/list": "3.10.5",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-types/menu": "3.9.9",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/menu/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/menu
 
+## 2.0.25
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`5b9e317a8`](https://github.com/nextui-org/nextui/commit/5b9e317a80dacad09a3fc3c5b762729cd10b2bb3), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/use-aria-menu@2.0.5
+  - @nextui-org/use-is-mobile@2.0.8
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/divider@2.0.28
+
 ## 2.0.24
 
 ### Patch Changes

packages/components/menu/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/menu",
-  "version": "2.0.24",
+  "version": "2.0.25",
   "description": "A menu displays a list of options and allows a user to select one or more of them.",
   "keywords": [
     "menu"
@@ -46,13 +46,13 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-menu": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/menu": "3.13.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/menu": "3.14.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/menu": "3.6.1",
-    "@react-stately/tree": "3.7.6",
-    "@react-types/menu": "3.9.7",
+    "@react-stately/menu": "3.7.1",
+    "@react-stately/tree": "3.8.1",
+    "@react-types/menu": "3.9.9",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/modal/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nextui-org/modal
 
+## 2.0.36
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - remove `disableFocusManagement` from Overlay
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/use-aria-modal-overlay@2.0.10
+  - @nextui-org/use-disclosure@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/framer-utils@2.0.21
+
 ## 2.0.35
 
 ### Patch Changes

packages/components/modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/modal",
-  "version": "2.0.35",
+  "version": "2.0.36",
   "description": "Displays a dialog with a custom content that requires attention or provides additional information.",
   "keywords": [
     "modal"
@@ -48,13 +48,13 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-aria-modal-overlay": "workspace:*",
-    "@react-aria/dialog": "3.5.12",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/overlays": "3.21.1",
+    "@react-aria/dialog": "3.5.14",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.5",
-    "@react-types/overlays": "3.8.5"
+    "@react-stately/overlays": "3.6.7",
+    "@react-types/overlays": "3.8.7"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/modal/src/modal.tsx

@@ -17,11 +17,7 @@ const Modal = forwardRef<"div", ModalProps>((props, ref) => {
   const {children, ...otherProps} = props;
   const context = useModal({...otherProps, ref});
 
-  const overlay = (
-    <Overlay disableFocusManagement portalContainer={context.portalContainer}>
-      {children}
-    </Overlay>
-  );
+  const overlay = <Overlay portalContainer={context.portalContainer}>{children}</Overlay>;
 
   return (
     <ModalProvider value={context}>

packages/components/navbar/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @nextui-org/navbar
 
+## 2.0.33
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/use-aria-toggle-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/framer-utils@2.0.21
+
 ## 2.0.32
 
 ### Patch Changes

packages/components/navbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/navbar",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.",
   "keywords": [
     "navbar"
@@ -46,12 +46,12 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/use-aria-toggle-button": "workspace:*",
     "@nextui-org/use-scroll-position": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/overlays": "3.21.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/toggle": "3.7.2",
-    "@react-stately/utils": "3.9.1",
+    "@react-stately/toggle": "3.7.4",
+    "@react-stately/utils": "3.10.1",
     "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {

packages/components/navbar/src/navbar-menu-transitions.ts

@@ -2,7 +2,7 @@ import {Variants} from "framer-motion";
 
 export const menuVariants: Variants = {
   enter: {
-    height: "calc(100vh - var(--navbar-height) - 1px)",
+    height: "calc(100vh - var(--navbar-height))",
     transition: {
       duration: 0.3,
       easings: "easeOut",

packages/components/pagination/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nextui-org/pagination
 
+## 2.0.33
+
+### Patch Changes
+
+- [#3144](https://github.com/nextui-org/nextui/pull/3144) [`68d1629e7`](https://github.com/nextui-org/nextui/commit/68d1629e778723c85825463ef0d2cdd66c1a4aff) Thanks [@wingkwong](https://github.com/wingkwong)! - Fixed pagination missing animation (#3138)
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`3500147d7`](https://github.com/nextui-org/nextui/commit/3500147d7fbe53bc01ae24749fdeaf87c37c0d12), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/shared-icons@2.0.8
+  - @nextui-org/use-pagination@2.0.7
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.32
 
 ### Patch Changes

packages/components/pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/pagination",
-  "version": "2.0.32",
+  "version": "2.0.33",
   "description": "The Pagination component allows you to display active page and navigate between multiple pages.",
   "keywords": [
     "pagination"
@@ -44,9 +44,9 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-pagination": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/i18n": "3.10.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
     "scroll-into-view-if-needed": "3.0.10"
   },

packages/components/pagination/src/use-pagination.ts

@@ -298,7 +298,8 @@ export function usePagination(originalProps: UsePaginationProps) {
     () =>
       pagination({
         ...variantProps,
-        disableCursorAnimation: disableCursorAnimation || disableAnimation,
+        disableAnimation,
+        disableCursorAnimation,
       }),
     [objectToDeps(variantProps), disableCursorAnimation, disableAnimation],
   );

packages/components/popover/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @nextui-org/popover
 
+## 2.1.24
+
+### Patch Changes
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - Fix popover focus issue (#3171, #2992)
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - remove `disableFocusManagement` from Overlay
+
+- [#3240](https://github.com/nextui-org/nextui/pull/3240) [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b) Thanks [@wingkwong](https://github.com/wingkwong)! - bump react-aria dependencies
+
+- Updated dependencies [[`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`47c2472fb`](https://github.com/nextui-org/nextui/commit/47c2472fb22bfe1c0c357b5ba12e5606eba0d65b), [`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/aria-utils@2.0.21
+  - @nextui-org/button@2.0.34
+  - @nextui-org/use-aria-button@2.0.9
+  - @nextui-org/react-utils@2.0.14
+  - @nextui-org/framer-utils@2.0.21
+
 ## 2.1.23
 
 ### Patch Changes

packages/components/popover/__tests__/popover.test.tsx

@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import {Button} from "@nextui-org/button";
 
 import {Popover, PopoverContent, PopoverTrigger} from "../src";
+import {Select, SelectItem} from "../../select/src";
 
 // e.g. console.error Warning: Function components cannot be given refs.
 // Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
@@ -213,4 +214,104 @@ describe("Popover", () => {
     // assert that the second popover is open
     expect(popover2).toHaveAttribute("aria-expanded", "true");
   });
+
+  it("should focus on dialog when opened", async () => {
+    const wrapper = render(
+      <Popover>
+        <PopoverTrigger>
+          <Button disableRipple data-testid="trigger-test">
+            Open popover
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <p>This is the content of the popover.</p>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    const trigger = wrapper.getByTestId("trigger-test");
+
+    // open popover
+    await act(async () => {
+      await userEvent.click(trigger);
+    });
+
+    const {getByRole} = wrapper;
+
+    let dialog = getByRole("dialog");
+
+    // assert that the focus is on the dialog
+    expect(dialog).toHaveFocus();
+  });
+
+  it("should restore focus on trigger when closed", async () => {
+    const wrapper = render(
+      <Popover>
+        <PopoverTrigger>
+          <Button data-testid="popover-trigger">Open popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <p>This is the content of the popover.</p>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    const trigger = wrapper.getByTestId("popover-trigger");
+
+    await act(async () => {
+      // open popover
+      await userEvent.click(trigger);
+      // close popover
+      await userEvent.click(trigger);
+      // assert that the focus is restored back to trigger
+      expect(trigger).toHaveFocus();
+    });
+  });
+
+  it("should not close popover if nested select is closed", async () => {
+    const wrapper = render(
+      <Popover>
+        <PopoverTrigger>
+          <Button data-testid="popover">Open popover</Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <Select data-testid="select" label="Select country">
+            <SelectItem key="argentina">Argentina</SelectItem>
+            <SelectItem key="venezuela">Venezuela</SelectItem>
+            <SelectItem key="brazil">Brazil</SelectItem>
+          </Select>
+        </PopoverContent>
+      </Popover>,
+    );
+
+    const popover = wrapper.getByTestId("popover");
+
+    await act(async () => {
+      // open popover
+      await userEvent.click(popover);
+    });
+
+    // assert that the popover is open
+    expect(popover).toHaveAttribute("aria-expanded", "true");
+
+    const select = wrapper.getByTestId("select");
+
+    await act(async () => {
+      // open select
+      await userEvent.click(select);
+    });
+
+    // assert that the select is open
+    expect(select).toHaveAttribute("aria-expanded", "true");
+
+    await act(async () => {
+      await userEvent.click(document.body);
+    });
+
+    // assert that the select is closed
+    expect(select).toHaveAttribute("aria-expanded", "false");
+
+    // assert that the popover is still open
+    expect(popover).toHaveAttribute("aria-expanded", "true");
+  });
 });

packages/components/popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/popover",
-  "version": "2.1.23",
+  "version": "2.1.24",
   "description": "A popover is an overlay element positioned relative to a trigger.",
   "keywords": [
     "popover"
@@ -48,14 +48,14 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/dialog": "3.5.12",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/overlays": "3.21.1",
+    "@react-aria/dialog": "3.5.14",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.5",
-    "@react-types/button": "3.9.2",
-    "@react-types/overlays": "3.8.5",
+    "@react-stately/overlays": "3.6.7",
+    "@react-types/button": "3.9.4",
+    "@react-types/overlays": "3.8.7",
     "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {