v2.4.2 (#3256)

* chore(root): reat-aria packages updated (#2889)

* chore(storybook): common colors enabled (#2902)

* fix(range-calendar): hide only dates outside the month (#2906)

* fix(range-calendar): hide only dates outside the month #2890

* fix(range-calendar): corrected spelling mistake in changeset description

* fix(range-calendar): corrected capitalization in changeset description

* chore(changeset): patch @nextui-org/theme

---------

Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de>
Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>

* fix(date-picker): keep date picker style consistent for different variants (#2908)

* fix: add missing TableRowProps export (#2866)

* fix: add missing TableRowProps export

* feat(changeset): add changeset for PR2866

* chore(changeset): revise changeset message

---------

Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>

* fix(input): correct label margin for RTL required inputs (#2781)

* fix(input): correct label margin for RTL required inputs

* fix(theme): add changeset fr theme

* docs(core): add storybook and canary release info (#2914)

* Cn utility refactor (#2915)

* refactor(core): cn utility adjusted and moved to the theme package

* chore(root): changeset

* fix(storybook): stories that used cn

* docs(date-picker): change to jsx instead (#2919)

* fix(switch): support uncontrolled switch in react-hook-form (#2924)

* feat(switch): add @nextui-org/use-safe-layout-effect

* chore(deps): add @nextui-org/use-safe-layout-effect

* fix(switch): react-hook-form uncontrolled switch component

* fix(switch): react-hook-form uncontrolled switch component

* feat(switch): add rect-hook-form in dev dep

* feat(switch): add WithReactHookFormTemplate

* refactor(root): react aria packages fixed (#2944)

* feat(docs): docs changes (#2868)

* feat(docs): add example how to set locale (#2867)

* docs(guide): add an explanation for the installation guide (#2769)

* docs(guide): add an explanation for the installation guide

* docs(guide): add an explanation for the cli guide

* docs(guide): add support for cli output

* fix: change sort priority - cmdk (#2873)

* docs: remove unsupported props in range calendar and date range picker (#2881)

* chore(calendar): remove showMonthAndYearPickers from range calendar story

* docs(date-range-picker): remove showMonthAndYearPickers info

* docs(range-calendar): remove unsupported props

* docs: refactor typing in form.ts (#2882)

* chore(docs): supplement errorMessage behaviour in input (#2892)

* refactor(docs): revise NextUI Provider structure

* chore(docs): add updated tag

---------

Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com>
Co-authored-by: HaRuki <soccer_haruki15@me.com>
Co-authored-by: Kaben <carnoxen@gmail.com>

* fix(slider): missing marks when hideThumb is true & revise slider styles (#2883)

* chore(slider): include marks in hideThumb

* fix(slider): revise slider styles

* feat(changeset): add changeset

* feat(slider): add tests with marks and hideThumb

* feat(test): react hook form tests & stories (#2931)

* feat(input): add Input with React Hook Form tests

* refactor(input): add missing types

* feat(checkbox): add checkbox with React Hook Form tests

* feat(select): add react-hook-form to dev dep

* feat(select): add react hook form story

* feat(select): react hook form tests

* fix(select): incorrect button reference

* feat(deps): add react-hook-form to dev dep in autocomplete

* feat(autocomplete): react hook form story

* feat(autocomplete): react hook form tests

* fix(autocomplete): rollback wrapper type

* feat(switch): add react hook form tests

* refactor(stories): reorder stories items

* fix: update accordion item heading tag to be customizable (#2265)

* fix: update accordion item heading tag to be customizable

* Update .changeset/heavy-hairs-join.md

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

* Update .changeset/heavy-hairs-join.md

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* chore(accordion): lint

* chore(changeset): add issue number

* feat(docs): add HeadingComponent prop

---------

Co-authored-by: Shawn Dong <shawn.dong@flybuys.com.au>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>

* fix(theme): add pointer-events-none to skeleton base (#2972)

* feat(tabs): add `destroyInactiveTabPanel` prop for Tabs component (#2973)

* feat(tabs): add destroyInactiveTabPanel and set default to false

* feat(tabs): integrate with destroyInactiveTabPanel

* feat(theme): hidden inert tab panel

* feat(changeset): add changeset

* chore(changeset): add issue number

* feat(docs): add `destroyInactiveTabPanel` prop to tabs page

* chore(docs): set destroyInactiveTabPanel to true by default

* chore(tabs): set destroyInactiveTabPanel to true by default

* chore(tabs): revise destroyInactiveTabPanel logic

* feat(tabs): add tests for destroyInactiveTabPanel

* chore(tabs): change the default value of destroyInactiveTabPanel to true

* refactor: add support for disabling the animation globally (#2929)

* refactor: add support for disabling the animation globally

* chore(docs): disableAnimation removed from global provider

* feat(docs): nextui provider api updated, storybook preview adjusted

* chore(theme): button is scalable when disabled, tooltip animation improved

* fix(theme): remove origin-bottom from button (#2990)

* fix(skeleton): overflow issue in skeleton (#2986)

* fix(theme): set overflow visible after skeleton loaded

* feat(changeset): add changeset

* fix(table): v2 input/textarea don't allow spaces inside a table (#3020)

* fix(table): set onKeyDownCapture to undefined

* feat(changeset): add changeset

* fix(slider): calculate the correct value on mark click (#3017)

* fix(slider): calculate the correct value on mark click

* refactor(slider): remove the tests inside describe block

* feat(slider): add tests for thumb move on mark click

* refactor(slider): use val instead of pos

* fix(theme): revise input isInvalid styles (#3010)

* fix(theme): revise isInvalid input styles

* feat(changeset): add changeset

* feat(date-picker): add missing ref to input wrapper (#3011)

* fix(date-picker): add missing ref to input wrapper

* feat(changeset): add changeset

* fix(core): incorrect tailwind classnames (#3018)

* fix(dropdown): focus behaviour on press / enter keydown (#2970)

* fix(dropdown): set focus on the first item

* feat(dropdown): add keyboard interactions tests

* feat(changeset): add changeset

* fix(dropdown): use fireEvent.keyDown instead

* chore(deps): add @nextui-org/test-utils to dropdown

* refactor(dropdown): pass onKeyDown to menu trigger and don't hardcode autoFocus

* chore(dropdown): remove autoFocus

* fix(menu): pass userMenuProps to useTreeState and useAriaMenu and remove from getListProps

* chore(changeset): add menu package

* fix(component): update type definition to prevent primitive values as items (#2953)

* fix: update type definition to prevent primitive values as items

* fix: typecheck

* fix(select): onSelectionChange can handle number (#2937)

* fix: onSelectionChange type for dynamic items in Select component

* docs: remove unnecessary properties

* docs: update highlightedLines

* chore: add changeset

* fix(calendar): scrolling is hidden when changing the month (#2949)

* fix(calendar): scrolling is hidden when changing the month

* chore(changeset): correct package name

---------

Co-authored-by: Poli Sour <polisour.work@gmail.com>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix: make VisuallyHidden's element type as span when it's inside phrasing element (#3013)

* fix(checkbox): make VisuallyHidden's element type as span

* feat(changeset): add changeset

* fix(radio): make the VisuallyHidden element type as span

* fix(switch): make the VisuallyHidden element type as span

* fix(select): make the VisuallyHidden element type as span

* feat(changeset): replace changeset

* chore: fix formatting

* docs: sync nextui-cli  api (#3035)

* docs: sync nextui-cli  api

* docs: update

* chore: update routes.json with new path and set updated flag

---------

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

* feat: switch default validationBehavior to aria and allow switching via props (#2987)

* chore: add support validationBehavior aria

* chore: add validationBehavior to Provider

* chore: add autocomplete validation test

* chore: add checkbox validation test

* fix(input): require condition

* docs: add description of validationBehavior props

* chore: add support validationBehavior props for date components

* docs(dates): add description of validationBehavior props

* chore: add changeset

* chore: format

* chore: fix test

* fix: select validationBehavior is not support yet

* fix: select validationBehavior not supported yet

* chore(docs): validation behavior prop added to nextui-provider

---------

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

* fix: popover-based focus behaviour (#2854)

* fix(autocomplete): autocomplete focus behaviour

* feat(autocomplete): add test case for catching blur cases

* refactor(autocomplete): use isOpen instead

* feat(autocomplete): add "should focus when clicking autocomplete" test case

* feat(autocomplete): add should set the input after selection

* fix(autocomplete): remove shouldUseVirtualFocus

* fix(autocomplete): uncomment blur logic

* refactor(autocomplete): remove state as it is in getPopoverProps

* refactor(autocomplete): remove unnecessary blur

* refactor(select): remove unncessary props

* fix(popover): use domRef instead

* fix(popover): revise isNonModal and isDismissable

* fix(popover): use dialogRef back

* fix(popover): rollback

* fix(autocomplete): onFocus logic

* feat(popover): set disableFocusManagement to overlay

* feat(modal): set disableFocusManagement to overlay

* fix(autocomplete): set disableFocusManagement for autocomplete

* feat(popover): include disableFocusManagement prop

* refactor(autocomplete): revise type in selectorButton

* fix(autocomplete): revise focus logic

* feat(autocomplete): add internal focus state and add shouldCloseOnInteractOutside

* feat(autocomplete): handle selectedItem change

* feat(autocomplete): add clear button test

* feat(changeset): add changeset

* refactor(components): use the original order

* refactor(autocomplete): add more comments

* fix(autocomplete): revise focus behaviours

* refactor(autocomplete): rename to listbox

* chore(popover): remove disableFocusManagement from popover

* chore(autocomplete): remove disableFocusManagement from autocomplete

* chore(changeset): add issue number

* fix(popover): don't set default value to transformOrigin

* fix(autocomplete): revise shouldCloseOnInteractOutside logic

* feat(autocomplete): should close listbox by clicking another autocomplete

* fix(popover): add disableFocusManagement to overlay

* refactor(autocomplete): revise comments and refactor shouldCloseOnInteractOutside

* feat(changeset): add issue number

* fix(autocomplete): merge with selectorButtonProps.onClick

* refactor(autocomplete): remove extra line

* refactor(autocomplete): revise comment

* feat(select): add shouldCloseOnInteractOutside

* feat(dropdown): add shouldCloseOnInteractOutside

* feat(date-picker): add shouldCloseOnInteractOutside

* feat(changeset): add dropdown and date-picker

* fix(popover): revise shouldCloseOnInteractOutside

* feat(date-picker): integrate with ariaShouldCloseOnInteractOutside

* feat(select): integrate with ariaShouldCloseOnInteractOutside

* feat(dropdown): integrate with ariaShouldCloseOnInteractOutside

* feat(popover): integrate with ariaShouldCloseOnInteractOutside

* feat(aria-utils): ariaShouldCloseOnInteractOutside

* chore(deps): update pnpm-lock.yaml

* feat(autocomplete): integrate with ariaShouldCloseOnInteractOutside

* feat(aria-utils): handle setShouldFocus logic

* feat(changeset): add @nextui-org/aria-utils

* chore(autocomplete): put the test into correct group

* feat(select): should close listbox by clicking another select

* feat(dropdown): should close listbox by clicking another dropdown

* feat(popover): should close listbox by clicking another popover

* feat(date-picker): should close listbox by clicking another datepicker

* chore(changeset): add issue numbers and revise changeset message

* refactor(autocomplete): change to useRef instead

* refactor(autocomplete): change to useRef instead

* refactor(aria-utils): revise comments and format code

* chore(changeset): add issue number

* chore: take popoverProps.shouldCloseOnInteractOutside first

* refactor(autocomplete): remove unnecessary logic

* refactor(autocomplete): focus management logic

* fix(components): Fix 'Tap to click' behavior on macOS with Edge/Chrome for Accordion and Tab (#2725)

* fix(components): fix 'Tap to click' behavior on macOS

* Add change file for accordion, menu, and tabs

* Remove 'fix(components)' from the .changeset file

* fix(components): undo dropdown change now that it's no longer applicable

* fix(components): update changeset file now that we are no longer modifying the dropdown component

* fix(date-picker): corrected inert value for true condition (#3054)

* fix(date-picker): corrected inert value for true condition #3044

* refactor(calendar): add todo comment

* feat(changeset): add changeset

---------

Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de>
Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(hooks): resolve type error in onKeyDown event handler (#3064)

* fix(hooks): resolve type error in onKeyDown event handler

* chore(changeset): revise changeset

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* Update dependency array on setPage useCallback hook (#3029)

Changes:
Add the onChangeActivePage function to the dependency array of the setPage useCallback hook to ensure it always reflects the latest state.

Impact:
This fix ensures that the pagination component accurately reflects the current state when triggering onChangeActivePage.

* fix: error peerDep in pkg (#3014)

* fix: error peerDep in pkg

* docs: changeset

* Fix DatePicker Time Input (#2845)

* fix(date-picker): set `isCalendarHeaderExpanded` to `false` when DatePicker is closed

* fix(date-picker): calendar header controlled state on DatePicker

* chore(date-picker): update test

* chore(date-picker): remove unnecessary `async` in test

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

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>

* fix(date-picker): test

* fix(hooks): optimize useScrollPosition with useCallback and useRef (#3049)

* fix(hooks): optimize useScrollPosition with useCallback and useRef

* Update .changeset/lucky-cobras-jog.md

* Update packages/hooks/use-scroll-position/src/index.ts

* Update packages/hooks/use-scroll-position/src/index.ts

---------

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

* fix(select): placeholder text display for controlled component (#3081)

* fix: return placeholder when selectedItems is empty

* chore: add test and changeset

* chore(docs): v2.4.0 (#3084)

* chore(docs): v2.4.0

* chore(docs): v2.4.0 blog

* chore(docs): revise typos based on coderabbitai

* chore(docs): adjust navbar

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* chore(changese): update @nextui-org/react dependency to minor version

* docs: update cli docs (#3096)

* ci(changesets): version packages (#2903)

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

* fix(radio): remove required attribute for Radio with validationBehavior="aria" (#3110)

* fix(theme): add missing pointer event after data loaded (#3126)

* fix(system): listbox href issue (experimental) (#3119)

* fix(system): @react-aria/utils

* feat(hooks): include routerLinkProps

* feat(changeset): add changeset

* chore(deps): bump @react-aria/utils to 3.24.1

* fix(hooks): missing arguments

* chore(deps): bump @react-types/link

* chore(link): bump @react-aria/link to 3.7.1

* chore(link): use @react-aria/link instead

* chore(changeset): revise changeset

* chore(hooks): undo use-aria-link changes

* chore(deps): undo use-aria-link changes

* chore(deps): bump `@react-aria/utils` to `3.24.1`

* chore(deps): bump `@react-types/shared`

* feat: add missing router.open parameters due to router change

* chore(changeset): add new line

* chore(deps): bump `@react-types/shared` to `3.23.1`

* fix(avatar): avoid passing `disableAnimation` prop to a DOM element (#3111)

* fix(avatar): avoid passing `disableAnimation` prop to a DOM element

* refactor(avatar): use filterDOMProps approach

* chore(avatar): remove to type import

* chore(avatar): change to shouldFilterDOMProps

* fix(docs): removed unused import & corrected prop for disabled DatePicker (#3136)

Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de>

* ci(changesets): version packages (#3115)

* fix(pagination): missing animation (#3144)

* fix tsup domain (#3158)

* chore(docs): remove destroyInactiveTabPanel from Tab due to merge conflict (#3155)

* fix(autocomplete): maximum update depth exceeded in autocomplete (#3175)

* chore(checkbox): avoid passing non-DOM attributes to svg  (#3199)

* chore(docs): avoid passing non-DOM attributes to svg

* chore(utilities): avoid passing non-DOM attributes to svg

* feat(changeset): add changeset

* fix(docs): fix typo in autocomplete documentation page (#3182)

* fix(select): add missing data-invalid in select and add missing data attributes in docs (#3177)

* fix(select): add missing data-invalid attribute

* chore(docs): add missing data attributes for select base

* fix(tabs): destroyInactiveTabPanel unmounts inactive tabs' content (#3164)

* fix(tabs): incorrect content in tab panel

* feat(tabs): revise destroyInactiveTabPanel test cases

* fix(select): unset form value after unselecting an item (#3157)

* fix(select): set empty string instead of undefined for unsetting value

* feat(selet): should unset form value

* fix(tabs): set tab panel id correctly (#3246)

* docs(tooltip): supplement correct style path (#3183)

* docs(tooltip): supplement correct style path

* chore(docs): move the note below import tabs

* fix(use-aria-menu): link logic in useMenuItem (#3229)

* chore(deps): bump @internationalized/date version (#3230)

* fix(input): input display with hidden type (#3174)

* fix(input): input display with hidden type

* chore(input): add isHiddenType to dependency

* refactor(input): move the styles to theme and change hidden to data attr

* feat(theme): add isHiddenType to input

* chore(changeset): include theme package

* chore(input): revise input test

* fix(theme): remove isHiddenType from variants and use data-hidden prop instead

* fix(theme): remove isHiddenType from defaultVariants

* fix(input): remove isHiddenType passing to input

* feat(date-picker): add support for DatePicker to apply styles to DateInput (#3146)

* feat(date-picker): add support for DatePicker to apply styles to DateInput

* chore: update changeset

* docs(date-picker): add dateInputClassNames props

* refactor(date): updated errorMessage story and modified to import props (#3112)

* refactor(date): updated errorMessage story and modified to import props

* docs(date): add errorMessageFunction examples

* chore: add changeset

* fix: remove unnecessary props

* fix: typo

* Update regex-validation.ts (#3123)

* Update regex-validation.ts

Fix email regex

* Update email regex input.stories.tsx

* fix(autocomplete): controlled state logic (#2969)

* fix(autocomplete): autocomplete controlled state (#2955)

* chore(autocomplete): add changeset

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

---------

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

* fix(utilities): resolve assignRef TypeScript ref assignment issue (#3098)

* fix(utilities): resolve assignRef TypeScript ref assignment issue

* chore(changeset): revise changeset message

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

* fix(table): table-column align prop (#2900)

* fix(navbar): fixed the height of navbar menu (#1805)

* fix(navbar): fixed the height of navbar menu

* fix(navbar): refactored the css of navbar

* fix(navbar): fix redundant expression

* fix(navbar): fixed unnecessary changes

* fix(navbar): adjust viewport

* fix: RA dependencies bump (#3240)

* fix(popover): popover focus issue (#3187)

* fix(popover): move useDialog to popover-content

* fix(popover): move useDialog to free-solo-popover

* refactor(popover): use const instead

* feat(changset): add changeset

* feat(popover): popover focus test

* refactor(popover): getDialogProps

* fix: interactions with popover & focus issues (#3137)

* fix(aria-utils): handle click on listbox

* fix(popover): move useDialog to popover-content

* fix(popover): move useDialog to free-solo-popover

* refactor(popover): use const instead

* feat(changset): add changeset

* feat(popover): popover focus test

* refactor(popover): getDialogProps

* chore(utilities): remove ariaShouldCloseOnInteractOutside

* chore(deps): pnpm-lock.yaml

* fix(popover): remove disableFocusManagement

* fix(modal): remove disableFocusManagement

* fix(autocomplete): remove custom focus logic and remove ariaShouldCloseOnInteractOutside

* fix(popover): rewrite shouldCloseOnInteractOutside logic

* chore(utilities): remove ariaShouldCloseOnInteractOutside

* chore(deps): bump react-aria dependencies

* chore(autocomplete): change back to focus

* feat(changeset): update changeset

* chore(docs): update type in onSelectionChange

* fix(popover): revise popover test case

* chore(deps): add @nextui-org/aria-utils

* fix(autocomplete): add ariaShouldCloseOnInteractOutside

* fix(date-picker): add ariaShouldCloseOnInteractOutside

* fix(select): add ariaShouldCloseOnInteractOutside

* chore(deps): add @nextui-org/aria-utils

* fix(dropdown): add ariaShouldCloseOnInteractOutside

* feat(utilities): rewrite ariaShouldCloseOnInteractOutside

* fix(popover): use ariaShouldCloseOnInteractOutside

* fix(autocomplete): add back shouldFocus

* fix(utilities): include shouldFocus logic

* chore(utilities): remove !

* refactor(aria-utils): add more comments

* chore(changeset): update packages

* refactor(aria-utils): add more comments

* feat(popover): add test

* fix: dropdown onPress issue (#3211)

* fix(popover): move useDialog to popover-content

* fix(popover): move useDialog to free-solo-popover

* refactor(popover): use const instead

* feat(changset): add changeset

* feat(popover): popover focus test

* refactor(popover): getDialogProps

* fix(popover): dropdown onPress blocking issue

* fix(dropdown): incorrect keyCodes

* feat(dropdown): add keyboard onPress test cases

* chore(deps): keep all @react-aria/overlays version consistent

* chore(deps): sync dependencies

* chore(deps): sync dependencies

* refactor(aria-utils): remove shouldFocus logic

* refactor(autocomplete): remove shouldFocus logic and set input focus when open

* chore(deps): bump dependencies

* chore(deps): fix react aria dependencies

* fix(autocomplete): move popover style width inside isOpen true block

* fix(autocomplete): focus back to trigger

* feat(changeset): add changeset

* chore(deps): bump react-aria dependencies

* refactor(autocomplete): revise comment

* refactor(dropdown): revise logSpy and trigger mockRestore

* refactor(popover): remove debug className

* fix(date-input): avoid setting isInvalid in useDateFieldState

* fix(autocomplete): use ComboBoxValidationValue

* feat(use-aria-menu): add deprecate message

* feat(changeset): add missing packages

* refactor(use-aria-menu): remove isLink since it is included in useLinkProps

* Update packages/hooks/use-aria-menu/src/use-menu-item.ts

---------

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

* ci(changesets): version packages (#3147)

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

---------

Co-authored-by: Shrinidhi Upadhyaya <shrinidhiupadhyaya1195@gmail.com>
Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de>
Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>
Co-authored-by: Paul Tiedtke <PaulTiedtke@web.de>
Co-authored-by: Mohammad Reza Badri <85818966+mrbadri@users.noreply.github.com>
Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com>
Co-authored-by: HaRuki <soccer_haruki15@me.com>
Co-authored-by: Kaben <carnoxen@gmail.com>
Co-authored-by: Shawn Dong <dsknight@live.com.au>
Co-authored-by: Shawn Dong <shawn.dong@flybuys.com.au>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Co-authored-by: Poli Sour <57824881+novsource@users.noreply.github.com>
Co-authored-by: Poli Sour <polisour.work@gmail.com>
Co-authored-by: Artem Pitikin <git@kosmotema.dev>
Co-authored-by: winches <329487092@qq.com>
Co-authored-by: Eric Abreu <ericfabreu@gmail.com>
Co-authored-by: Minsu <52266597+Gaic4o@users.noreply.github.com>
Co-authored-by: Jesus Perdomo Lampignano <38929969+jesuzon@users.noreply.github.com>
Co-authored-by: chirokas <157580465+chirokas@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: EGOIST <0x142857@gmail.com>
Co-authored-by: Damien Leroy <10438692+ShiiFu@users.noreply.github.com>
Co-authored-by: Christian Abele <manufaktur@christian-abele.de>
Co-authored-by: Nozomi Hijikata <121233810+nozomemein@users.noreply.github.com>

.changeset/famous-mice-approve.md

@@ -1,5 +0,0 @@
----
-"@nextui-org/pagination": patch
----
-
-Fixed pagination missing animation (#3138)

.changeset/tough-peaches-live.md

@@ -1,5 +0,0 @@
----
-"@nextui-org/autocomplete": patch
----
-
-Fix maximum update depth exceeded on Autocomplete component (#3094)

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/components/checkbox/custom-check-icon.ts

@@ -1,11 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({
+const HeartIcon = `export const HeartIcon = ({ size, height, width, ...props }) => {
-  filled,
+  // avoid passing non-DOM attributes to svg
-  size,
+  const {isSelected, isIndeterminate, disableAnimation, ...otherProps} = props;
-  height,
+
-  width,
-  label,
-  ...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/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.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.

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} />
@@ -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.

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/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.

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/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/interactions": "3.21.3",
-    "@react-aria/selection": "^3.17.5",
+    "@react-aria/selection": "3.18.1",
-    "@react-aria/ssr": "^3.9.2",
+    "@react-aria/ssr": "3.9.4",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/virtualizer": "^3.9.10",
+    "@react-aria/virtualizer": "3.10.1",
-    "@react-aria/visually-hidden": "^3.8.10",
+    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/data": "^3.11.2",
+    "@react-stately/data": "3.11.4",
-    "@react-stately/layout": "^3.13.7",
+    "@react-stately/layout": "3.13.9",
-    "@react-stately/tree": "^3.7.6",
+    "@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/interactions": "3.21.3",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/tree": "3.7.6",
+    "@react-stately/tree": "3.8.1",
-    "@react-aria/button": "3.9.3",
+    "@react-aria/button": "3.9.5",
-    "@react-types/accordion": "3.0.0-alpha.19",
+    "@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
+    // assert that input is focused
-    expect(autocomplete).not.toHaveFocus();
+    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/combobox": "3.9.1",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.10.2",
+    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
+    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/combobox": "3.8.2",
+    "@react-stately/combobox": "3.8.4",
-    "@react-types/combobox": "3.10.1",
+    "@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]);
 
-  // apply the same with to the popover as the select
   useEffect(() => {
-    if (isOpen && popoverRef.current && inputWrapperRef.current) {
+    // set input focus
-      let rect = inputWrapperRef.current.getBoundingClientRect();
+    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) =>
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
-            ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state, shouldFocus),
     } 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/interactions": "3.21.3",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

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/focus": "3.17.1",
-    "@react-aria/breadcrumbs": "3.5.11",
+    "@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/button": "3.9.5",
-    "@react-aria/interactions": "3.21.1",
+    "@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",
+    "@internationalized/date": "^3.5.4",
-    "@react-aria/calendar": "3.5.6",
+    "@react-aria/calendar": "3.5.8",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/i18n": "3.10.2",
+    "@react-aria/i18n": "3.11.1",
-    "@react-stately/calendar": "3.4.4",
+    "@react-stately/calendar": "3.5.1",
-    "@react-types/button": "3.9.2",
+    "@react-types/button": "3.9.4",
-    "@react-aria/visually-hidden": "3.8.10",
+    "@react-aria/visually-hidden": "3.8.12",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.9.1",
+    "@react-stately/utils": "3.10.1",
-    "@react-types/calendar": "3.4.4",
+    "@react-types/calendar": "3.4.6",
-    "@react-aria/interactions": "3.21.1",
+    "@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/interactions": "3.21.3",
-    "@react-aria/button": "3.9.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/checkbox": "3.14.3",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
+    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/checkbox": "3.6.3",
+    "@react-stately/checkbox": "3.6.5",
-    "@react-stately/toggle": "3.7.2",
+    "@react-stately/toggle": "3.7.4",
-    "@react-types/checkbox": "3.7.1",
+    "@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/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.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",
+    "@internationalized/date": "^3.5.4",
-    "@react-aria/datepicker": "3.9.3",
+    "@react-aria/datepicker": "3.10.1",
-    "@react-aria/i18n": "3.10.2",
+    "@react-aria/i18n": "3.11.1",
-    "@react-stately/datepicker": "3.9.2",
+    "@react-stately/datepicker": "3.9.4",
-    "@react-types/datepicker": "3.7.2",
+    "@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 DateInputGroupProps extends ValidationResult, HelpTextProps {
-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 {
   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/overlays": "3.6.7",
-    "@react-stately/utils": "3.9.1",
+    "@react-stately/utils": "3.10.1",
-    "@internationalized/date": "^3.5.2",
+    "@internationalized/date": "^3.5.4",
-    "@react-aria/datepicker": "3.9.3",
+    "@react-aria/datepicker": "3.10.1",
-    "@react-aria/i18n": "3.10.2",
+    "@react-aria/i18n": "3.11.1",
-    "@react-stately/datepicker": "3.9.2",
+    "@react-stately/datepicker": "3.9.4",
-    "@react-types/datepicker": "3.7.2",
+    "@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-stately/menu": "3.7.1",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-types/menu": "3.9.7"
+    "@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/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@react-aria/textfield": "3.14.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-aria/focus": "3.17.1",
-    "@react-types/link": "3.5.3"
+    "@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-aria/listbox": "3.12.1",
-    "@react-stately/list": "3.10.3",
+    "@react-stately/list": "3.10.5",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@react-types/menu": "3.9.7",
+    "@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/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@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-stately/menu": "3.7.1",
-    "@react-stately/tree": "3.7.6",
+    "@react-stately/tree": "3.8.1",
-    "@react-types/menu": "3.9.7",
+    "@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/dialog": "3.5.14",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.21.1",
+    "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.5",
+    "@react-stately/overlays": "3.6.7",
-    "@react-types/overlays": "3.8.5"
+    "@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 = (
+  const overlay = <Overlay portalContainer={context.portalContainer}>{children}</Overlay>;
-    <Overlay disableFocusManagement 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/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.21.1",
+    "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/toggle": "3.7.2",
+    "@react-stately/toggle": "3.7.4",
-    "@react-stately/utils": "3.9.1",
+    "@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/focus": "3.17.1",
-    "@react-aria/i18n": "3.10.2",
+    "@react-aria/i18n": "3.11.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
     "scroll-into-view-if-needed": "3.0.10"
   },

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/dialog": "3.5.14",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@react-aria/overlays": "3.21.1",
+    "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/overlays": "3.6.5",
+    "@react-stately/overlays": "3.6.7",
-    "@react-types/button": "3.9.2",
+    "@react-types/button": "3.9.4",
-    "@react-types/overlays": "3.8.5",
+    "@react-types/overlays": "3.8.7",
     "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {

packages/components/popover/src/free-solo-popover.tsx

@@ -14,6 +14,7 @@ import {domAnimation, HTMLMotionProps, LazyMotion, m} from "framer-motion";
 import {mergeProps} from "@react-aria/utils";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
+import {useDialog} from "@react-aria/dialog";
 
 import {usePopover, UsePopoverProps, UsePopoverReturn} from "./use-popover";
 
@@ -92,7 +93,6 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
       state,
       placement,
       backdrop,
-      titleProps,
       portalContainer,
       disableAnimation,
       motionProps,
@@ -106,6 +106,13 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
       ref,
     });
 
+    const dialogRef = React.useRef(null);
+    const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
+    const dialogProps = getDialogProps({
+      ref: dialogRef,
+      ...ariaDialogProps,
+    });
+
     const backdropContent = React.useMemo(() => {
       if (backdrop === "transparent") {
         return null;
@@ -138,7 +145,7 @@ const FreeSoloPopover = forwardRef<"div", FreeSoloPopoverProps>(
             placement={placement}
             tabIndex={-1}
             transformOrigin={transformOrigin}
-            {...getDialogProps()}
+            {...dialogProps}
           >
             {!isNonModal && <DismissButton onDismiss={state.close} />}
             <div {...getContentProps()}>

packages/components/popover/src/popover-content.tsx

@@ -1,7 +1,7 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {DOMAttributes, ReactNode, useMemo, useCallback, ReactElement} from "react";
+import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
@@ -9,6 +9,7 @@ import {m, domAnimation, LazyMotion} from "framer-motion";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {RemoveScroll} from "react-remove-scroll";
 import {getTransformOrigins} from "@nextui-org/aria-utils";
+import {useDialog} from "@react-aria/dialog";
 
 import {usePopoverContext} from "./popover-context";
 
@@ -27,7 +28,6 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     placement,
     backdrop,
     motionProps,
-    titleProps,
     disableAnimation,
     shouldBlockScroll,
     getPopoverProps,
@@ -38,10 +38,13 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     onClose,
   } = usePopoverContext();
 
-  const dialogProps = getDialogProps(otherProps);
+  const dialogRef = useRef(null);
-
+  const {dialogProps: ariaDialogProps, titleProps} = useDialog({}, dialogRef);
-  // Not needed in the popover context, the popover role comes from getPopoverProps
+  const dialogProps = getDialogProps({
-  delete dialogProps.role;
+    ref: dialogRef,
+    ...ariaDialogProps,
+    ...otherProps,
+  });
 
   const Component = as || OverlayComponent || "div";
 
@@ -79,34 +82,27 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
-  const RemoveScrollWrapper = useCallback(
+  const contents = (
-    ({children}: {children: ReactElement}) => {
+    <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-      return (
+      {disableAnimation ? (
-        <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
+        content
-          {children}
+      ) : (
-        </RemoveScroll>
+        <LazyMotion features={domAnimation}>
-      );
+          <m.div
-    },
+            animate="enter"
-    [shouldBlockScroll, isOpen],
+            exit="exit"
-  );
+            initial="initial"
-
+            style={{
-  const contents = disableAnimation ? (
+              ...getTransformOrigins(placement === "center" ? "top" : placement),
-    <RemoveScrollWrapper>{content}</RemoveScrollWrapper>
+            }}
-  ) : (
+            variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-    <LazyMotion features={domAnimation}>
+            {...motionProps}
-      <m.div
+          >
-        animate="enter"
+            {content}
-        exit="exit"
+          </m.div>
-        initial="initial"
+        </LazyMotion>
-        style={{
+      )}
-          ...getTransformOrigins(placement === "center" ? "top" : placement),
+    </RemoveScroll>
-        }}
-        variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-        {...motionProps}
-      >
-        <RemoveScrollWrapper>{content}</RemoveScrollWrapper>
-      </m.div>
-    </LazyMotion>
   );
 
   return (

packages/components/popover/src/popover.tsx

@@ -20,11 +20,7 @@ const Popover = forwardRef<"div", PopoverProps>((props, ref) => {
 
   const [trigger, content] = Children.toArray(children);
 
-  const overlay = (
+  const overlay = <Overlay portalContainer={context.portalContainer}>{content}</Overlay>;
-    <Overlay disableFocusManagement portalContainer={context.portalContainer}>
-      {content}
-    </Overlay>
-  );
 
   return (
     <PopoverProvider value={context}>

packages/components/popover/src/use-aria-popover.ts

@@ -6,11 +6,15 @@ import {
   useOverlayPosition,
   AriaOverlayProps,
 } from "@react-aria/overlays";
-import {OverlayPlacement, ariaHideOutside, toReactAriaPlacement} from "@nextui-org/aria-utils";
+import {
+  OverlayPlacement,
+  ariaHideOutside,
+  toReactAriaPlacement,
+  ariaShouldCloseOnInteractOutside,
+} from "@nextui-org/aria-utils";
 import {OverlayTriggerState} from "@react-stately/overlays";
 import {mergeProps} from "@react-aria/utils";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
-import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 export interface Props {
   /**

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

@@ -19,7 +19,7 @@ import {popover} from "@nextui-org/theme";
 import {mergeProps, mergeRefs} from "@react-aria/utils";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {useMemo, useCallback, useRef} from "react";
-import {AriaDialogProps, useDialog} from "@react-aria/dialog";
+import {AriaDialogProps} from "@react-aria/dialog";
 
 import {useReactAriaPopover, ReactAriaPopoverProps} from "./use-aria-popover";
 
@@ -131,7 +131,6 @@ export function usePopover(originalProps: UsePopoverProps) {
 
   const domTriggerRef = useRef<HTMLElement>(null);
   const wasTriggerPressedRef = useRef(false);
-  const dialogRef = useRef(null);
   const triggerRef = triggerRefProp || domTriggerRef;
 
   const disableAnimation =
@@ -179,8 +178,6 @@ export function usePopover(originalProps: UsePopoverProps) {
 
   const {isFocusVisible, isFocused, focusProps} = useFocusRing();
 
-  const {dialogProps, titleProps} = useDialog({}, dialogRef);
-
   const slots = useMemo(
     () =>
       popover({
@@ -198,14 +195,15 @@ export function usePopover(originalProps: UsePopoverProps) {
   });
 
   const getDialogProps: PropGetter = (props = {}) => ({
-    ref: dialogRef,
+    // `ref` and `dialogProps` from `useDialog` are passed from props
+    // if we use `useDialog` here, dialogRef won't be focused on mount
     "data-slot": "base",
     "data-open": dataAttr(state.isOpen),
     "data-focus": dataAttr(isFocused),
     "data-arrow": dataAttr(showArrow),
     "data-focus-visible": dataAttr(isFocusVisible),
     "data-placement": getArrowPlacement(ariaPlacement, placementProp),
-    ...mergeProps(focusProps, dialogProps, dialogPropsProp, props),
+    ...mergeProps(focusProps, dialogPropsProp, props),
     className: slots.base({class: clsx(baseStyles)}),
     style: {
       // this prevent the dialog to have a default outline
@@ -316,7 +314,6 @@ export function usePopover(originalProps: UsePopoverProps) {
     triggerRef,
     placement,
     isNonModal,
-    titleProps,
     popoverRef: domRef,
     portalContainer,
     isOpen: state.isOpen,

packages/components/progress/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nextui-org/progress
 
+## 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 [[`b9bb06ff3`](https://github.com/nextui-org/nextui/commit/b9bb06ff37f99bfc438e848706ec79b4c7b7c5d3)]:
+  - @nextui-org/react-utils@2.0.14
+
 ## 2.0.30
 
 ### Patch Changes

packages/components/progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/progress",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "Progress bars show either determinate or indeterminate progress of an operation over time.",
   "keywords": [
     "progress"
@@ -43,10 +43,10 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-is-mounted": "workspace:*",
-    "@react-aria/i18n": "3.10.2",
+    "@react-aria/i18n": "3.11.1",
-    "@react-aria/progress": "3.4.11",
+    "@react-aria/progress": "3.4.13",
     "@react-aria/utils": "3.24.1",
-    "@react-types/progress": "3.5.2"
+    "@react-types/progress": "3.5.4"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/radio/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @nextui-org/radio
 
+## 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/radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextui-org/radio",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Radios allow users to select a single option from a list of mutually exclusive options.",
   "keywords": [
     "radio"
@@ -42,13 +42,13 @@
   "dependencies": {
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/interactions": "3.21.3",
-    "@react-aria/radio": "3.10.2",
+    "@react-aria/radio": "3.10.4",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
+    "@react-aria/visually-hidden": "3.8.12",
-    "@react-stately/radio": "3.10.2",
+    "@react-stately/radio": "3.10.4",
-    "@react-types/radio": "3.7.1",
+    "@react-types/radio": "3.8.1",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/ripple/CHANGELOG.md

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