diff --git a/src/components/popover/Popover.tsx b/src/components/popover/Popover.tsx index 3e53ae4e6..89e9d89c2 100644 --- a/src/components/popover/Popover.tsx +++ b/src/components/popover/Popover.tsx @@ -40,14 +40,22 @@ export type PopoverPropsType = { /** * Determine if hover should affect popover visibility. + * @default true */ useHover?: boolean; /** * Determine if click should affect popover visibility. + * @default true */ useClick?: boolean; + /** + * Determine if focus should affect popover visibility. + * @default true + */ + useFocus?: boolean; + /** * Only controlled component. Handle Popover open state change. */ @@ -63,6 +71,7 @@ const Popover = ({ id, useHover, useClick, + useFocus, defaultOpen = false, open, role, @@ -76,6 +85,7 @@ const Popover = ({ onOpenChange, useHover, useClick, + useFocus, role, }); diff --git a/src/components/popover/usePopover.ts b/src/components/popover/usePopover.ts index 7945c0f7a..036c850da 100644 --- a/src/components/popover/usePopover.ts +++ b/src/components/popover/usePopover.ts @@ -6,7 +6,7 @@ import { useClick as useFloatingClick, useHover as useFloatingHover, useRole, - useFocus, + useFocus as useFloatingFocus, offset, flip, arrow, @@ -29,6 +29,7 @@ interface UsePopoverPropTypes { open?: boolean; useHover?: boolean; useClick?: boolean; + useFocus?: boolean; role?: PopoverRole; onOpenChange?: (arg0: boolean) => void; } @@ -40,6 +41,7 @@ const usePopover = ({ open, useHover = true, useClick = true, + useFocus = true, role = 'dialog', onOpenChange, }: UsePopoverPropTypes) => { @@ -130,7 +132,9 @@ const usePopover = ({ blockPointerEvents: true, }), }); - const focus = useFocus(data.context); + const focus = useFloatingFocus(data.context, { + enabled: useFocus, + }); const click = useFloatingClick(data.context, { enabled: useClick, });