chore: rollback pr3467

.changeset/silly-rockets-fly.md

@@ -0,0 +1,13 @@
+---
+"@nextui-org/autocomplete": patch
+"@nextui-org/date-picker": patch
+"@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/autocomplete/package.json

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

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

@@ -18,6 +18,7 @@ import {chain, mergeProps} from "@react-aria/utils";
 import {ButtonProps} from "@nextui-org/button";
 import {AsyncLoadable, PressEvent} from "@react-types/shared";
 import {useComboBox} from "@react-aria/combobox";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>> {
   /**
@@ -443,6 +444,9 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
           ),
         }),
       },
+      shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+        ? popoverProps.shouldCloseOnInteractOutside
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
       // when the popover is open, the focus should be on input instead of dialog
       // therefore, we skip dialog focus here
       disableDialogFocus: true,

packages/components/date-picker/package.json

@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@internationalized/date": "^3.5.4",
+    "@nextui-org/aria-utils": "workspace:*",
     "@nextui-org/button": "workspace:*",
     "@nextui-org/calendar": "workspace:*",
     "@nextui-org/date-input": "workspace:*",

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

@@ -15,6 +15,7 @@ import {useDatePickerState} from "@react-stately/datepicker";
 import {AriaDatePickerProps, useDatePicker as useAriaDatePicker} from "@react-aria/datepicker";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
 
@@ -192,6 +193,9 @@ export function useDatePicker<T extends DateValue>({
           ),
         }),
       },
+      shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+        ? popoverProps.shouldCloseOnInteractOutside
+        : (element: Element) => ariaShouldCloseOnInteractOutside(element, popoverTriggerRef, state),
     };
   };
 

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

@@ -21,6 +21,7 @@ import {useDateRangePicker as useAriaDateRangePicker} from "@react-aria/datepick
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
 import {dateRangePicker, dateInput, cn} from "@nextui-org/theme";
+import {ariaShouldCloseOnInteractOutside} from "@nextui-org/aria-utils";
 
 import {useDatePickerBase} from "./use-date-picker-base";
 interface Props<T extends DateValue>
@@ -214,6 +215,10 @@ export function useDateRangePicker<T extends DateValue>({
             props.className,
           ),
         }),
+        shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside
+          ? popoverProps.shouldCloseOnInteractOutside
+          : (element: Element) =>
+              ariaShouldCloseOnInteractOutside(element, popoverTriggerRef, state),
       },
     } as PopoverProps;
   };

packages/components/dropdown/package.json

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

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/__tests__/modal.test.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import {act, render, fireEvent} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 
 import {Modal, ModalContent, ModalBody, ModalHeader, ModalFooter} from "../src";
 
@@ -109,38 +108,4 @@ describe("Modal", () => {
     fireEvent.keyDown(modal, {key: "Escape"});
     expect(onClose).toHaveBeenCalledTimes(1);
   });
-
-  it("should only hide the top-most modal", async () => {
-    const onClose1 = jest.fn();
-    const onClose2 = jest.fn();
-
-    render(
-      <Modal isOpen onClose={onClose1}>
-        <ModalContent>
-          <ModalHeader>Modal header</ModalHeader>
-          <ModalBody>Modal body</ModalBody>
-          <ModalFooter>Modal footer</ModalFooter>
-        </ModalContent>
-      </Modal>,
-    );
-
-    const wrapper2 = render(
-      <Modal isOpen onClose={onClose2}>
-        <ModalContent>
-          <ModalHeader>Modal header</ModalHeader>
-          <ModalBody>Modal body</ModalBody>
-          <ModalFooter>Modal footer</ModalFooter>
-        </ModalContent>
-      </Modal>,
-    );
-
-    await userEvent.click(document.body);
-    expect(onClose1).not.toHaveBeenCalled();
-    expect(onClose2).toHaveBeenCalledTimes(1);
-
-    wrapper2.unmount();
-
-    await userEvent.click(document.body);
-    expect(onClose1).toHaveBeenCalledTimes(1);
-  });
 });

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);