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>

.changeset/clever-gifts-joke.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/popover": patch
+"@nextui-org/autocomplete": patch
+"@nextui-org/aria-utils": patch
+---
+
+Fix popover focus issue (#3171, #2992)

.changeset/cold-peas-dream.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+---
+
+remove `disableFocusManagement` from Overlay

.changeset/metal-clocks-yawn.md

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

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

@@ -37,17 +37,17 @@
     "@nextui-org/use-infinite-scroll": "workspace:*",
     "@nextui-org/use-is-mobile": "workspace:*",
     "@radix-ui/react-scroll-area": "^1.0.5",
-    "@react-aria/focus": "^3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/i18n": "^3.10.2",
-    "@react-aria/interactions": "^3.21.1",
-    "@react-aria/selection": "^3.17.5",
-    "@react-aria/ssr": "^3.9.2",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/selection": "3.18.1",
+    "@react-aria/ssr": "3.9.4",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/virtualizer": "^3.9.10",
-    "@react-aria/visually-hidden": "^3.8.10",
-    "@react-stately/data": "^3.11.2",
-    "@react-stately/layout": "^3.13.7",
-    "@react-stately/tree": "^3.7.6",
+    "@react-aria/virtualizer": "3.10.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/data": "3.11.4",
+    "@react-stately/layout": "3.13.9",
+    "@react-stately/tree": "3.8.1",
     "@rehooks/local-storage": "^2.4.5",
     "@vercel/analytics": "^1.2.2",
     "canvas-confetti": "^1.9.2",

packages/components/accordion/package.json

@@ -54,12 +54,12 @@
     "@nextui-org/framer-utils": "workspace:*",
     "@nextui-org/divider": "workspace:*",
     "@nextui-org/use-aria-accordion": "workspace:*",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/tree": "3.7.6",
-    "@react-aria/button": "3.9.3",
-    "@react-types/accordion": "3.0.0-alpha.19",
+    "@react-stately/tree": "3.8.1",
+    "@react-aria/button": "3.9.5",
+    "@react-types/accordion": "3.0.0-alpha.21",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

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

@@ -181,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();
   });
 
@@ -371,8 +371,8 @@ describe("Autocomplete", () => {
     // assert that the autocomplete listbox is closed
     expect(autocomplete).toHaveAttribute("aria-expanded", "false");
 
-    // assert that input is not focused
-    expect(autocomplete).not.toHaveFocus();
+    // assert that input is focused
+    expect(autocomplete).toHaveFocus();
   });
 
   it("should set the input after selection", async () => {
@@ -545,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>,

packages/components/autocomplete/package.json

@@ -53,14 +53,14 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/combobox": "3.8.4",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/i18n": "3.10.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/combobox": "3.9.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
-    "@react-stately/combobox": "3.8.2",
-    "@react-types/combobox": "3.10.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/combobox": "3.8.4",
+    "@react-types/combobox": "3.11.1",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {
@@ -70,7 +70,7 @@
     "@nextui-org/chip": "workspace:*",
     "@nextui-org/stories-utils": "workspace:*",
     "@nextui-org/use-infinite-scroll": "workspace:*",
-    "@react-stately/data": "3.11.2",
+    "@react-stately/data": "3.11.4",
     "framer-motion": "^11.0.28",
     "clean-package": "2.2.0",
     "react": "^18.0.0",

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

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

packages/components/avatar/package.json

@@ -43,9 +43,9 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-image": "workspace:*",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/breadcrumbs/package.json

@@ -43,10 +43,10 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/shared-icons": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/breadcrumbs": "3.5.11",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/breadcrumbs": "3.5.13",
     "@react-aria/utils": "3.24.1",
-    "@react-types/breadcrumbs": "3.7.3",
+    "@react-types/breadcrumbs": "3.7.5",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/button/package.json

@@ -46,12 +46,12 @@
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/ripple": "workspace:*",
     "@nextui-org/spinner": "workspace:*",
-    "@react-aria/button": "3.9.3",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/button": "3.9.5",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-types/shared": "3.23.1",
-    "@react-types/button": "3.9.2"
+    "@react-types/button": "3.9.4"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/calendar/package.json

@@ -48,16 +48,16 @@
     "@nextui-org/button": "workspace:*",
     "lodash.debounce": "^4.0.8",
     "@internationalized/date": "^3.5.4",
-    "@react-aria/calendar": "3.5.6",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/i18n": "3.10.2",
-    "@react-stately/calendar": "3.4.4",
-    "@react-types/button": "3.9.2",
-    "@react-aria/visually-hidden": "3.8.10",
+    "@react-aria/calendar": "3.5.8",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-stately/calendar": "3.5.1",
+    "@react-types/button": "3.9.4",
+    "@react-aria/visually-hidden": "3.8.12",
     "@react-aria/utils": "3.24.1",
-    "@react-stately/utils": "3.9.1",
-    "@react-types/calendar": "3.4.4",
-    "@react-aria/interactions": "3.21.1",
+    "@react-stately/utils": "3.10.1",
+    "@react-types/calendar": "3.4.6",
+    "@react-aria/interactions": "3.21.3",
     "@react-types/shared": "3.23.1",
     "scroll-into-view-if-needed": "3.0.10",
     "@types/lodash.debounce": "^4.0.7"

packages/components/card/package.json

@@ -45,10 +45,10 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
     "@nextui-org/ripple": "workspace:*",
-    "@react-aria/focus": "3.16.2",
+    "@react-aria/focus": "3.17.1",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/interactions": "3.21.1",
-    "@react-aria/button": "3.9.3",
+    "@react-aria/interactions": "3.21.3",
+    "@react-aria/button": "3.9.5",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/checkbox/package.json

@@ -44,14 +44,14 @@
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-callback-ref": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
-    "@react-aria/checkbox": "3.14.1",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/checkbox": "3.14.3",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-aria/visually-hidden": "3.8.10",
-    "@react-stately/checkbox": "3.6.3",
-    "@react-stately/toggle": "3.7.2",
-    "@react-types/checkbox": "3.7.1",
+    "@react-aria/visually-hidden": "3.8.12",
+    "@react-stately/checkbox": "3.6.5",
+    "@react-stately/toggle": "3.7.4",
+    "@react-types/checkbox": "3.8.1",
     "@react-types/shared": "3.23.1"
   },
   "devDependencies": {

packages/components/chip/package.json

@@ -43,10 +43,10 @@
     "@nextui-org/shared-icons": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",
-    "@react-aria/focus": "3.16.2",
-    "@react-aria/interactions": "3.21.1",
+    "@react-aria/focus": "3.17.1",
+    "@react-aria/interactions": "3.21.3",
     "@react-aria/utils": "3.24.1",
-    "@react-types/checkbox": "3.7.1"
+    "@react-types/checkbox": "3.8.1"
   },
   "devDependencies": {
     "@nextui-org/theme": "workspace:*",

packages/components/date-input/package.json

@@ -43,12 +43,12 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@internationalized/date": "^3.5.4",
-    "@react-aria/datepicker": "3.9.3",
-    "@react-aria/i18n": "3.10.2",
-    "@react-stately/datepicker": "3.9.2",
-    "@react-types/datepicker": "3.7.2",
+    "@react-aria/datepicker": "3.10.1",
+    "@react-aria/i18n": "3.11.1",
+    "@react-stately/datepicker": "3.9.4",
+    "@react-types/datepicker": "3.7.4",
     "@react-types/shared": "3.23.1",
-    "@react-aria/utils": "3.23.2"
+    "@react-aria/utils": "3.24.1"
   },
   "devDependencies": {
     "@nextui-org/system": "workspace:*",

packages/components/date-input/src/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"