chore: rollback pr3467

.changeset/silly-rockets-fly.md

@@ -1,4 +1,6 @@
 ---
+"@nextui-org/autocomplete": patch
+"@nextui-org/date-picker": patch
 "@nextui-org/dropdown": patch
 "@nextui-org/modal": patch
 "@nextui-org/popover": patch

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