@dxos/react-ui 0.8.4-main.ead640a → 0.8.4-main.ef1bc66f44

package/src/components/{Menus → Menu}/DropdownMenu.tsx

@@ -25,6 +25,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from 'react';
 
@@ -34,15 +35,15 @@ import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenu
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
 type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
 const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
-const useMenuScope = createMenuScope();
+const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
@@ -96,9 +97,9 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
 
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuTrigger
+//
 
 const TRIGGER_NAME = 'DropdownMenuTrigger';
 
@@ -161,9 +162,9 @@ const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuT
 
 DropdownMenuTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
 
@@ -185,9 +186,9 @@ const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTrigge
 
 DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuPortal
+//
 
 const PORTAL_NAME = 'DropdownMenuPortal';
 
@@ -202,9 +203,9 @@ const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<Drop
 
 DropdownMenuPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuViewport
+//
 
 type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -222,9 +223,9 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuContent
+//
 
 const CONTENT_NAME = 'DropdownMenuContent';
 
@@ -234,19 +235,35 @@ interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionBoundary={computedCollisionBoundary}
         collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
@@ -285,9 +302,9 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
 
 DropdownMenuContent.displayName = CONTENT_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuGroup
+//
 
 const GROUP_NAME = 'DropdownMenuGroup';
 
@@ -305,9 +322,9 @@ const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroup
 
 DropdownMenuGroup.displayName = GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuLabel
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuLabel
+//
 
 const LABEL_NAME = 'DropdownMenuLabel';
 
@@ -333,9 +350,9 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
 
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItem
+//
 
 const ITEM_NAME = 'DropdownMenuItem';
 
@@ -361,9 +378,9 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
 
 DropdownMenuItem.displayName = ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuCheckboxItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuCheckboxItem
+//
 
 const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
 
@@ -389,9 +406,9 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
 
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioGroup
+//
 
 const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
 
@@ -409,9 +426,9 @@ const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, Dropdow
 
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioItem
+//
 
 const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
 
@@ -437,9 +454,9 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
 
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItemIndicator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItemIndicator
+//
 
 const INDICATOR_NAME = 'DropdownMenuItemIndicator';
 
@@ -457,9 +474,9 @@ const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, D
 
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSeparator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSeparator
+//
 
 const SEPARATOR_NAME = 'DropdownMenuSeparator';
 
@@ -485,9 +502,9 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
 
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuArrow
+//
 
 const ARROW_NAME = 'DropdownMenuArrow';
 
@@ -513,9 +530,9 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
 
 DropdownMenuArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSub
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSub
+//
 
 interface DropdownMenuSubProps {
   children?: ReactNode;
@@ -540,9 +557,9 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
   );
 };
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubTrigger
+//
 
 const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
 
@@ -560,9 +577,9 @@ const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, Dropdow
 
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubContent
+//
 
 const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
 
@@ -598,7 +615,9 @@ const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, Dropdow
 
 DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -621,7 +640,9 @@ export const DropdownMenu = {
   SubContent: DropdownMenuSubContent,
 };
 
-const useDropdownMenuMenuScope = useMenuScope;
+type DropdownMenuScope = Scope;
+
+const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
 
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 

package/src/components/Message/Message.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type MessageValence } from '@dxos/react-ui-types';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
 
@@ -25,10 +25,10 @@ const DefaultStory = ({ valence, title, body }: StoryProps) => (
 );
 
 const meta = {
-  title: 'ui/react-ui-core/Callout',
+  title: 'ui/react-ui-core/components/Callout',
   component: Callout.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: { chromatic: { disableSnapshot: false } },
   argTypes: {
     valence: {

package/src/components/Message/Message.tsx

@@ -8,7 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useId } from '@dxos/react-hooks';
-import { type Elevation, type MessageValence } from '@dxos/react-ui-types';
+import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -31,9 +31,15 @@ type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.d
 };
 
 type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence };
+
 const MESSAGE_NAME = 'Message';
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
+//
+// Root
+//
+
 const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
   (
     {
@@ -53,6 +59,7 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
     const Root = asChild ? Slot : Primitive.div;
+
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
         <Root
@@ -72,6 +79,10 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
 
 MessageRoot.displayName = MESSAGE_NAME;
 
+//
+// Title
+//
+
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
   icon?: string;
@@ -84,6 +95,7 @@ const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
     const Root = asChild ? Slot : Primitive.h2;
+
     return (
       <Root
         {...props}
@@ -106,16 +118,20 @@ const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
 
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 
+//
+// Content
+//
+
 type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
 };
 
-const MESSAGE_BODY_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'MessageContent';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
+    const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
     const Root = asChild ? Slot : Primitive.p;
     return (
       <Root
@@ -130,9 +146,18 @@ const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   },
 );
 
-MessageContent.displayName = MESSAGE_BODY_NAME;
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+
+//
+// Message
+//
+
+export const Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Content: MessageContent,
+};
 
-export const Message = { Root: MessageRoot, Title: MessageTitle, Content: MessageContent };
 export const Callout = Message;
 
 export type { MessageRootProps, MessageTitleProps, MessageContentProps };

package/src/components/Popover/Popover.stories.tsx

@@ -8,7 +8,7 @@ import React, { type PropsWithChildren, type ReactNode, useRef, useState } from
 import { faker } from '@dxos/random';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Popover } from './Popover';
 
@@ -29,10 +29,10 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Popover',
+  title: 'ui/react-ui-core/components/Popover',
   component: Popover.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Popover/Popover.tsx

@@ -31,6 +31,7 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -40,9 +41,9 @@ import { useElevationContext, useThemeContext } from '../../hooks';
 import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
-/* -------------------------------------------------------------------------------------------------
- * Popover
- * ----------------------------------------------------------------------------------------------- */
+//
+// Context
+//
 
 const POPOVER_NAME = 'Popover';
 
@@ -64,6 +65,10 @@ type PopoverContextValue = {
 
 const [PopoverProvider, usePopoverContext] = createPopoverContext<PopoverContextValue>(POPOVER_NAME);
 
+//
+// PopoverRoot
+//
+
 interface PopoverRootProps {
   children?: ReactNode;
   open?: boolean;
@@ -105,9 +110,9 @@ const PopoverRoot: FC<PopoverRootProps> = (props: ScopedProps<PopoverRootProps>)
 
 PopoverRoot.displayName = POPOVER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverAnchor
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverAnchor
+//
 
 const ANCHOR_NAME = 'PopoverAnchor';
 
@@ -133,9 +138,9 @@ const PopoverAnchor = forwardRef<PopoverAnchorElement, PopoverAnchorProps>(
 
 PopoverAnchor.displayName = ANCHOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverTrigger
+//
 
 const TRIGGER_NAME = 'PopoverTrigger';
 
@@ -175,9 +180,9 @@ const PopoverTrigger = forwardRef<PopoverTriggerElement, PopoverTriggerProps>(
 
 PopoverTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
 
@@ -199,9 +204,9 @@ const PopoverVirtualTrigger = (props: ScopedProps<PopoverVirtualTriggerProps>) =
 
 PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverPortal
+//
 
 const PORTAL_NAME = 'PopoverPortal';
 
@@ -240,9 +245,9 @@ const PopoverPortal: FC<PopoverPortalProps> = (props: ScopedProps<PopoverPortalP
 
 PopoverPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverContent
+//
 
 const CONTENT_NAME = 'PopoverContent';
 
@@ -274,8 +279,6 @@ const PopoverContent = forwardRef<PopoverContentTypeElement, PopoverContentProps
 
 PopoverContent.displayName = CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type PopoverContentTypeElement = PopoverContentImplElement;
 export interface PopoverContentTypeProps
   extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}
@@ -390,8 +393,6 @@ const PopoverContentNonModal = forwardRef<PopoverContentTypeElement, PopoverCont
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 type PopoverContentImplElement = ElementRef<typeof PopperPrimitive.Content>;
 type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
 type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
@@ -432,6 +433,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onFocusOutside,
       onInteractOutside,
       collisionPadding = 8,
+      collisionBoundary,
       classNames,
       ...contentProps
     } = props;
@@ -444,6 +446,20 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     // Make sure the whole tree has focus guards as our `Popover` may be the last element in the DOM (because of the `Portal`)
     useFocusGuards();
 
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <FocusScope
         asChild
@@ -468,6 +484,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             {...popperScope}
             {...contentProps}
             collisionPadding={safeCollisionPadding}
+            collisionBoundary={computedCollisionBoundary}
             className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{
@@ -488,9 +505,9 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverClose
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverClose
+//
 
 const CLOSE_NAME = 'PopoverClose';
 
@@ -514,9 +531,9 @@ const PopoverClose = forwardRef<PopoverCloseElement, PopoverCloseProps>(
 
 PopoverClose.displayName = CLOSE_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverArrow
+//
 
 const ARROW_NAME = 'PopoverArrow';
 
@@ -542,9 +559,9 @@ const PopoverArrow = forwardRef<PopoverArrowElement, PopoverArrowProps>(
 
 PopoverArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * PopoverViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// PopoverViewport
+//
 
 type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -568,12 +585,14 @@ const PopoverViewport = forwardRef<HTMLDivElement, PopoverViewportProps>(
   },
 );
 
-/* ----------------------------------------------------------------------------------------------- */
-
 const getState = (open: boolean) => (open ? 'open' : 'closed');
 
 type PopoverContentInteractOutsideEvent = Parameters<NonNullable<PopoverContentProps['onInteractOutside']>>[0];
 
+//
+// Popver
+//
+
 export const Popover = {
   Root: PopoverRoot,
   Anchor: PopoverAnchor,