archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(popover): added control for closing popover on scroll (#3595)

Browse Source 
* fix(navbar): fixed the height when style h-full

* fix(navbar): fixed the height when style h-full

* docs(changeset): resolved extra file

* feat(popover): added control for closing popover on scroll

* update(changeset):  correction

* feat(popover): removed extra story

* refactor(test): corrected test for both true and false values of shouldCloseOnScroll

* refactor(docs): added shouldCloseOnScroll prop

* chore(changeset): change to minor

---------

Co-authored-by: աӄա <wingkwong.code@gmail.com>
This commit is contained in:
Abhinandan 2024-11-04 20:55:30 +05:30 committed by GitHub
parent 80f6cf5a7b
commit 9f6839faf9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 54 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/slow-paws-punch.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/popover": minor
---
added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)

3
apps/docs/content/docs/components/popover.mdx
View File

@ -167,7 +167,8 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
| showArrow | `boolean` | Whether the popover should have an arrow. | `false` |
| shouldFlip | `boolean` | Whether the popover should change its placement and flip when it's about to overflow its boundary area. | `true` |
| triggerScaleOnOpen | `boolean` | Whether the trigger should scale down when the popover is open. | `true` |
| shouldBlockScroll | `boolean` | Whether to block scrolling outside the popover. | `false` |
| shouldBlockScroll | `boolean` | Whether the popover should block the scroll outside the popover. | `true` |
| shouldCloseOnScroll | `boolean` | Wheather the popover should close on scroll | `false` |
| isKeyboardDismissDisabled | `boolean` | Whether pressing the escape key to close the popover should be disabled. | `false` |
| shouldCloseOnBlur | `boolean` | Whether the popover should close when focus is lost or moves outside it. | `false` |
| motionProps | [MotionProps](#motion-props) | The props to modify the framer motion animation. Use the `variants` API to create your own animation. | |

33
packages/components/popover/__tests__/popover.test.tsx
View File

@ -334,3 +334,36 @@ describe("Popover", () => {
expect(popover).toHaveAttribute("aria-expanded", "false");
});
});
it("should close popover on scroll when shouldCloseOnScroll is false", async () => {
const wrapper = render(
<Popover shouldCloseOnScroll={false}>
<PopoverTrigger>
<Button data-testid="popover">Open popover</Button>
</PopoverTrigger>
<PopoverContent>
<Select data-testid="select" label="Select country">
<SelectItem key="argentina">Argentina</SelectItem>
<SelectItem key="venezuela">Venezuela</SelectItem>
<SelectItem key="brazil">Brazil</SelectItem>
</Select>
</PopoverContent>
</Popover>,
);
const popover = wrapper.getByTestId("popover");
// open popover
await act(async () => {
await userEvent.click(popover);
});
// assert that the popover is open
expect(popover).toHaveAttribute("aria-expanded", "true");
// scroll it
fireEvent.scroll(document.body);
// assert that the popover is still open
expect(popover).toHaveAttribute("aria-expanded", "true");
});

8
packages/components/popover/src/use-aria-popover.ts
View File

@ -37,6 +37,11 @@ export interface Props {
* @default []
*/
updatePositionDeps?: any[];
/**
* Whether the popover should close on scroll.
* @default true
*/
shouldCloseOnScroll?: boolean;
}
export type ReactAriaPopoverProps = Props & Omit<AriaPopoverProps, "placement"> & AriaOverlayProps;
@ -60,6 +65,7 @@ export function useReactAriaPopover(
boundaryElement,
isDismissable = true,
shouldCloseOnBlur = true,
shouldCloseOnScroll = true,
placement: placementProp = "top",
containerPadding,
shouldCloseOnInteractOutside,
@ -102,7 +108,7 @@ export function useReactAriaPopover(
containerPadding,
placement: toReactAriaPlacement(placementProp),
offset: showArrow ? offset + 3 : offset,
onClose: isNonModal ? state.close : () => {},
onClose: isNonModal && shouldCloseOnScroll ? state.close : () => {},
});
useSafeLayoutEffect(() => {

2
packages/components/popover/src/use-popover.ts
View File

@ -118,6 +118,7 @@ export function usePopover(originalProps: UsePopoverProps) {
boundaryElement,
isKeyboardDismissDisabled,
shouldCloseOnInteractOutside,
shouldCloseOnScroll,
motionProps,
className,
classNames,
@ -169,6 +170,7 @@ export function usePopover(originalProps: UsePopoverProps) {
containerPadding,
updatePositionDeps,
isKeyboardDismissDisabled,
shouldCloseOnScroll,
shouldCloseOnInteractOutside,
},
state,

5
packages/components/popover/stories/popover.stories.tsx
View File

@ -81,6 +81,11 @@ export default {
type: "boolean",
},
},
shouldCloseOnScroll: {
control: {
type: "boolean",
},
},
disableAnimation: {
control: {
type: "boolean",