From 32dd4f588d7314413471724db3949f338cd840b6 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 15 Sep 2024 11:47:21 +0800 Subject: [PATCH] chore: rollback pr3467 --- .changeset/silly-rockets-fly.md | 2 ++ packages/components/autocomplete/package.json | 1 + .../autocomplete/src/use-autocomplete.ts | 4 +++ packages/components/date-picker/package.json | 1 + .../date-picker/src/use-date-picker.ts | 4 +++ .../date-picker/src/use-date-range-picker.ts | 5 +++ packages/components/dropdown/package.json | 1 + .../components/modal/__tests__/modal.test.tsx | 35 ------------------- pnpm-lock.yaml | 9 +++++ 9 files changed, 27 insertions(+), 35 deletions(-) diff --git a/.changeset/silly-rockets-fly.md b/.changeset/silly-rockets-fly.md index 58af236623..4c934890dd 100644 --- a/.changeset/silly-rockets-fly.md +++ b/.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 diff --git a/packages/components/autocomplete/package.json b/packages/components/autocomplete/package.json index aaf4d9b426..eef32019e8 100644 --- a/packages/components/autocomplete/package.json +++ b/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:*", diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index bb96df6505..d1cae053f3 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/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 extends Omit, keyof ComboBoxProps> { /** @@ -443,6 +444,9 @@ export function useAutocomplete(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, diff --git a/packages/components/date-picker/package.json b/packages/components/date-picker/package.json index a4ebcb8f4f..7ceb60b502 100644 --- a/packages/components/date-picker/package.json +++ b/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:*", diff --git a/packages/components/date-picker/src/use-date-picker.ts b/packages/components/date-picker/src/use-date-picker.ts index aeb0337f04..5f7ebd0245 100644 --- a/packages/components/date-picker/src/use-date-picker.ts +++ b/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({ ), }), }, + shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside + ? popoverProps.shouldCloseOnInteractOutside + : (element: Element) => ariaShouldCloseOnInteractOutside(element, popoverTriggerRef, state), }; }; diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts index 372bb6e323..6e45597178 100644 --- a/packages/components/date-picker/src/use-date-range-picker.ts +++ b/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 @@ -214,6 +215,10 @@ export function useDateRangePicker({ props.className, ), }), + shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside + ? popoverProps.shouldCloseOnInteractOutside + : (element: Element) => + ariaShouldCloseOnInteractOutside(element, popoverTriggerRef, state), }, } as PopoverProps; }; diff --git a/packages/components/dropdown/package.json b/packages/components/dropdown/package.json index c31c63efb2..3e0dfccf11 100644 --- a/packages/components/dropdown/package.json +++ b/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:*", diff --git a/packages/components/modal/__tests__/modal.test.tsx b/packages/components/modal/__tests__/modal.test.tsx index 2221f981b8..70b5225690 100644 --- a/packages/components/modal/__tests__/modal.test.tsx +++ b/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 header - Modal body - Modal footer - - , - ); - - const wrapper2 = render( - - - Modal header - Modal body - Modal footer - - , - ); - - await userEvent.click(document.body); - expect(onClose1).not.toHaveBeenCalled(); - expect(onClose2).toHaveBeenCalledTimes(1); - - wrapper2.unmount(); - - await userEvent.click(document.body); - expect(onClose1).toHaveBeenCalledTimes(1); - }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3ad1447171..b51699d2f0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -689,6 +689,9 @@ importers: packages/components/autocomplete: dependencies: + '@nextui-org/aria-utils': + specifier: workspace:* + version: link:../../utilities/aria-utils '@nextui-org/button': specifier: workspace:* version: link:../button @@ -1327,6 +1330,9 @@ importers: '@internationalized/date': specifier: ^3.5.4 version: 3.5.4 + '@nextui-org/aria-utils': + specifier: workspace:* + version: link:../../utilities/aria-utils '@nextui-org/button': specifier: workspace:* version: link:../button @@ -1425,6 +1431,9 @@ importers: packages/components/dropdown: dependencies: + '@nextui-org/aria-utils': + specifier: workspace:* + version: link:../../utilities/aria-utils '@nextui-org/menu': specifier: workspace:* version: link:../menu