diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md index b7b6604421..8c56f040c2 100644 --- a/packages/ui/report.api.md +++ b/packages/ui/report.api.md @@ -27,7 +27,7 @@ import type { MenuProps as MenuProps_2 } from 'react-aria-components'; import type { MenuSectionProps as MenuSectionProps_2 } from 'react-aria-components'; import type { MenuTriggerProps as MenuTriggerProps_2 } from 'react-aria-components'; import type { ModalOverlayProps } from 'react-aria-components'; -import type { PopoverProps } from 'react-aria-components'; +import { PopoverProps as PopoverProps_2 } from 'react-aria-components'; import type { RadioGroupProps as RadioGroupProps_2 } from 'react-aria-components'; import type { RadioProps as RadioProps_2 } from 'react-aria-components'; import { ReactElement } from 'react'; @@ -1025,7 +1025,7 @@ export interface MenuAutocompleteListBoxProps // (undocumented) placeholder?: string; // (undocumented) - placement?: PopoverProps['placement']; + placement?: PopoverProps_2['placement']; // (undocumented) virtualized?: boolean; } @@ -1041,7 +1041,7 @@ export interface MenuAutocompleteProps // (undocumented) placeholder?: string; // (undocumented) - placement?: PopoverProps['placement']; + placement?: PopoverProps_2['placement']; // (undocumented) virtualized?: boolean; } @@ -1106,7 +1106,7 @@ export interface MenuListBoxProps // (undocumented) maxWidth?: string; // (undocumented) - placement?: PopoverProps['placement']; + placement?: PopoverProps_2['placement']; // (undocumented) virtualized?: boolean; } @@ -1120,7 +1120,7 @@ export interface MenuProps // (undocumented) maxWidth?: string; // (undocumented) - placement?: PopoverProps['placement']; + placement?: PopoverProps_2['placement']; // (undocumented) virtualized?: boolean; } @@ -1206,6 +1206,26 @@ export interface PaginationOptions { showPageSizeOptions?: boolean; } +// @public +export const Popover: ForwardRefExoticComponent< + PopoverProps & RefAttributes +>; + +// @public +export const PopoverDefinition: { + readonly classNames: { + readonly root: 'bui-Popover'; + readonly arrow: 'bui-PopoverArrow'; + readonly content: 'bui-PopoverContent'; + }; +}; + +// @public +export interface PopoverProps extends Omit { + children: React.ReactNode; + hideArrow?: boolean; +} + // @public (undocumented) export interface QueryOptions { // (undocumented) diff --git a/packages/ui/src/components/Popover/Popover.stories.tsx b/packages/ui/src/components/Popover/Popover.stories.tsx index 5ae02cf03a..ea92bf9d5c 100644 --- a/packages/ui/src/components/Popover/Popover.stories.tsx +++ b/packages/ui/src/components/Popover/Popover.stories.tsx @@ -68,51 +68,53 @@ const meta = preview.meta({ }); export const Default = meta.story({ - args: {}, + args: { + children: This is a popover, + }, }); -export const IsOpen = meta.story({ +export const IsOpen = Default.extend({ args: { isOpen: true, }, }); -export const HideArrow = meta.story({ +export const HideArrow = Default.extend({ args: { isOpen: true, hideArrow: true, }, }); -export const TopPlacement = meta.story({ +export const TopPlacement = Default.extend({ args: { isOpen: true, placement: 'top', }, }); -export const RightPlacement = meta.story({ +export const RightPlacement = Default.extend({ args: { isOpen: true, placement: 'right', }, }); -export const BottomPlacement = meta.story({ +export const BottomPlacement = Default.extend({ args: { isOpen: true, placement: 'bottom', }, }); -export const LeftPlacement = meta.story({ +export const LeftPlacement = Default.extend({ args: { isOpen: true, placement: 'left', }, }); -export const AllPlacements = meta.story({ +export const AllPlacements = Default.extend({ parameters: { controls: { exclude: ['placement'], @@ -142,7 +144,7 @@ export const AllPlacements = meta.story({ }, }); -export const AllPlacementsNoArrow = meta.story({ +export const AllPlacementsNoArrow = Default.extend({ parameters: { controls: { exclude: ['placement', 'hideArrow'], @@ -173,7 +175,7 @@ export const AllPlacementsNoArrow = meta.story({ }, }); -export const WithRichContent = meta.story({ +export const WithRichContent = Default.extend({ args: { isOpen: true, }, @@ -201,7 +203,7 @@ export const WithRichContent = meta.story({ ), }); -export const CustomOffset = meta.story({ +export const CustomOffset = Default.extend({ args: { isOpen: true, offset: 20, @@ -209,7 +211,7 @@ export const CustomOffset = meta.story({ }, }); -export const NonModal = meta.story({ +export const NonModal = Default.extend({ args: { isOpen: true, }, @@ -231,7 +233,7 @@ export const NonModal = meta.story({ ), }); -export const WithLongContent = meta.story({ +export const WithLongContent = Default.extend({ args: { isOpen: true, }, diff --git a/packages/ui/src/components/Popover/Popover.tsx b/packages/ui/src/components/Popover/Popover.tsx index 18a711b0ba..1e38e98375 100644 --- a/packages/ui/src/components/Popover/Popover.tsx +++ b/packages/ui/src/components/Popover/Popover.tsx @@ -64,11 +64,7 @@ export const Popover = forwardRef( return ( diff --git a/packages/ui/src/components/Popover/definition.ts b/packages/ui/src/components/Popover/definition.ts index 185592b20f..1361d4bbcc 100644 --- a/packages/ui/src/components/Popover/definition.ts +++ b/packages/ui/src/components/Popover/definition.ts @@ -22,7 +22,7 @@ import type { ComponentDefinition } from '../../types'; */ export const PopoverDefinition = { classNames: { - popover: 'bui-Popover', + root: 'bui-Popover', arrow: 'bui-PopoverArrow', content: 'bui-PopoverContent', },