chore: rollback pr3467 (#3759)

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