chore: rollback pr3467

.changeset/silly-rockets-fly.md

@@ -0,0 +1,11 @@
+---
+"@nextui-org/dropdown": patch
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+"@nextui-org/select": patch
+"@nextui-org/use-aria-modal-overlay": patch
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/aria-utils": patch
+---
+
+rollback pr3467. rescheduled to v2.5.0.

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

@@ -9,6 +9,7 @@ import {useMenuTrigger} from "@react-aria/menu";
 import {dropdown} from "@nextui-org/theme";
 import {clsx} from "@nextui-org/shared-utils";
 import {ReactRef, mergeRefs} from "@nextui-org/react-utils";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 import {useMemo, useRef} from "react";
 import {mergeProps} from "@react-aria/utils";
 import {MenuProps} from "@nextui-org/menu";
@@ -122,6 +123,9 @@ export function useDropdown(props: UseDropdownProps) {
         ...props.classNames,
         content: clsx(classNames, classNamesProp?.content, props.className),
       },
+      shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+        ? popoverProps.shouldCloseOnInteractOutside
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, triggerRef, state),
     };
   };
 

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

@@ -169,6 +169,7 @@ export function useModal(originalProps: UseModalProps) {
   const getBackdropProps = useCallback<PropGetter>(
     (props = {}) => ({
       className: slots.backdrop({class: classNames?.backdrop}),
+      onClick: () => state.close(),
       ...underlayProps,
       ...props,
     }),

packages/components/popover/package.json

@@ -47,7 +47,6 @@
     "@nextui-org/react-utils": "workspace:*",
     "@nextui-org/shared-utils": "workspace:*",
     "@nextui-org/use-aria-button": "workspace:*",
-    "@nextui-org/use-aria-overlay": "workspace:*",
     "@nextui-org/use-safe-layout-effect": "workspace:*",
     "@react-aria/dialog": "3.5.14",
     "@react-aria/focus": "3.17.1",

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

@@ -1,15 +1,20 @@
 import {RefObject, useEffect} from "react";
 import {
+  useOverlay,
   AriaPopoverProps,
   PopoverAria,
   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 {useAriaOverlay} from "@nextui-org/use-aria-overlay";
 
 export interface Props {
   /**
@@ -66,16 +71,16 @@ export function useReactAriaPopover(
 
   const isNonModal = isNonModalProp ?? true;
 
-  const {overlayProps, underlayProps} = useAriaOverlay(
+  const {overlayProps, underlayProps} = useOverlay(
     {
       isOpen: state.isOpen,
       onClose: state.close,
       shouldCloseOnBlur,
       isDismissable,
       isKeyboardDismissDisabled,
-      shouldCloseOnInteractOutside:
-        shouldCloseOnInteractOutside || ((el) => !triggerRef.current?.contains(el)),
-      disableOutsideEvents: !isNonModal,
+      shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
+        ? shouldCloseOnInteractOutside
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, triggerRef, state),
     },
     popoverRef,
   );

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

@@ -2,11 +2,11 @@ import type {PopoverVariantProps, SlotsToClasses, PopoverSlots} from "@nextui-or
 import type {HTMLMotionProps} from "framer-motion";
 import type {PressEvent} from "@react-types/shared";
 
-import {RefObject, Ref} from "react";
+import {RefObject, Ref, useEffect} from "react";
 import {ReactRef, useDOMRef} from "@nextui-org/react-utils";
 import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays";
 import {useFocusRing} from "@react-aria/focus";
-import {useOverlayTrigger} from "@react-aria/overlays";
+import {ariaHideOutside, useOverlayTrigger} from "@react-aria/overlays";
 import {OverlayTriggerProps} from "@react-types/overlays";
 import {
   HTMLNextUIProps,
@@ -298,6 +298,12 @@ export function usePopover(originalProps: UsePopoverProps) {
     [slots, state.isOpen, classNames, underlayProps],
   );
 
+  useEffect(() => {
+    if (state.isOpen && domRef?.current) {
+      return ariaHideOutside([domRef?.current]);
+    }
+  }, [state.isOpen, domRef]);
+
   return {
     state,
     Component,

packages/components/select/package.json

@@ -41,6 +41,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
+    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/listbox": "workspace:*",
     "@nextui-org/popover": "workspace:*",
     "@nextui-org/react-utils": "workspace:*",

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

@@ -28,6 +28,7 @@ import {
 } from "@nextui-org/use-aria-multiselect";
 import {SpinnerProps} from "@nextui-org/spinner";
 import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 import {CollectionChildren} from "@react-types/shared";
 
 export type SelectedItemProps<T = object> = {
@@ -529,6 +530,9 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
             ? // forces the popover to update its position when the selected items change
               state.selectedItems.length * 0.00000001 + (slotsProps.popoverProps?.offset || 0)
             : slotsProps.popoverProps?.offset,
+        shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+          ? popoverProps.shouldCloseOnInteractOutside
+          : (element: Element) => ariaShouldCloseOnInteractOutside(element, domRef, state),
       } as PopoverProps;
     },
     [

packages/hooks/use-aria-modal-overlay/package.json

@@ -34,7 +34,6 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@nextui-org/use-aria-overlay": "workspace:*",
     "@react-aria/overlays": "3.22.1",
     "@react-aria/utils": "3.24.1",
     "@react-stately/overlays": "3.6.7",

packages/hooks/use-aria-modal-overlay/src/index.ts

@@ -1,8 +1,8 @@
-import {useAriaOverlay} from "@nextui-org/use-aria-overlay";
 import {
   ariaHideOutside,
   AriaModalOverlayProps,
   ModalOverlayAria,
+  useOverlay,
   usePreventScroll,
   useOverlayFocusContain,
 } from "@react-aria/overlays";
@@ -21,7 +21,7 @@ export function useAriaModalOverlay(
   state: OverlayTriggerState,
   ref: RefObject<HTMLElement>,
 ): ModalOverlayAria {
-  let {overlayProps, underlayProps} = useAriaOverlay(
+  let {overlayProps, underlayProps} = useOverlay(
     {
       ...props,
       isOpen: state.isOpen,

packages/hooks/use-aria-multiselect/src/use-multiselect.ts

@@ -112,12 +112,6 @@ export function useMultiSelect<T>(
   typeSelectProps.onKeyDown = typeSelectProps.onKeyDownCapture;
   delete typeSelectProps.onKeyDownCapture;
 
-  menuTriggerProps.onPressStart = (e) => {
-    if (e.pointerType !== "touch" && e.pointerType !== "keyboard" && !isDisabled) {
-      state.toggle(e.pointerType === "virtual" ? "first" : null);
-    }
-  };
-
   const domProps = filterDOMProps(props, {labelable: true});
   const triggerProps = mergeProps(typeSelectProps, menuTriggerProps, fieldProps);