@seed-design/react 2.5.1 → 3.0.0

package/src/components/MenuSheet/MenuSheet.tsx

@@ -7,6 +7,7 @@ import {
 } from "@seed-design/css/recipes/menu-sheet-item";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withContentScale } from "../../utils/withContentScale";
 import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import clsx from "clsx";
@@ -227,25 +228,27 @@ export interface MenuSheetItemProps
 /**
  * @deprecated Use `SwipeableMenuSheet` instead.
  */
-export const MenuSheetItem = React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
-  ({ className: propClassName, ...props }, ref) => {
-    const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
-    const parentProps = useItemProps();
+export const MenuSheetItem = withContentScale(
+  React.forwardRef<HTMLButtonElement, MenuSheetItemProps>(
+    ({ className: propClassName, ...props }, ref) => {
+      const [variantProps, otherProps] = menuSheetItem.splitVariantProps(props);
+      const parentProps = useItemProps();
 
-    const classNames = menuSheetItem({ ...parentProps, ...variantProps });
-    const { stateProps } = useDialogContext();
+      const classNames = menuSheetItem({ ...parentProps, ...variantProps });
+      const { stateProps } = useDialogContext();
 
-    return (
-      <ItemClassNamesProvider value={classNames}>
-        <Primitive.button
-          ref={ref}
-          className={clsx(classNames.root, propClassName)}
-          {...stateProps}
-          {...otherProps}
-        />
-      </ItemClassNamesProvider>
-    );
-  },
+      return (
+        <ItemClassNamesProvider value={classNames}>
+          <Primitive.button
+            ref={ref}
+            className={clsx(classNames.root, propClassName)}
+            {...stateProps}
+            {...otherProps}
+          />
+        </ItemClassNamesProvider>
+      );
+    },
+  ),
 );
 
 /**

package/src/components/NavigationMenu/NavigationMenu.tsx

@@ -12,6 +12,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { withContentScale } from "../../utils/withContentScale";
 
 const { ClassNamesProvider, withContext, useClassNames } = createSlotRecipeContext(menu);
 const {
@@ -118,23 +119,25 @@ export interface NavigationMenuItemProps
   extends MenuItemVariantProps,
     NavigationMenuPrimitive.ItemProps {}
 
-export const NavigationMenuItem = React.forwardRef<HTMLButtonElement, NavigationMenuItemProps>(
-  ({ className: propClassName, ...props }, ref) => {
-    const [variantProps, otherProps] = menuItem.splitVariantProps(props);
-    const parentProps = useItemProps();
-
-    const classNames = menuItem({ ...parentProps, ...variantProps });
-
-    return (
-      <ItemClassNamesProvider value={classNames}>
-        <NavigationMenuPrimitive.Item
-          ref={ref}
-          className={clsx(classNames.root, propClassName)}
-          {...otherProps}
-        />
-      </ItemClassNamesProvider>
-    );
-  },
+export const NavigationMenuItem = withContentScale(
+  React.forwardRef<HTMLButtonElement, NavigationMenuItemProps>(
+    ({ className: propClassName, ...props }, ref) => {
+      const [variantProps, otherProps] = menuItem.splitVariantProps(props);
+      const parentProps = useItemProps();
+
+      const classNames = menuItem({ ...parentProps, ...variantProps });
+
+      return (
+        <ItemClassNamesProvider value={classNames}>
+          <NavigationMenuPrimitive.Item
+            ref={ref}
+            className={clsx(classNames.root, propClassName)}
+            {...otherProps}
+          />
+        </ItemClassNamesProvider>
+      );
+    },
+  ),
 );
 NavigationMenuItem.displayName = "NavigationMenuItem";
 

package/src/components/PageBanner/PageBanner.tsx

@@ -4,6 +4,7 @@ import { forwardRef } from "react";
 import { pageBanner, type PageBannerVariantProps } from "@seed-design/css/recipes/page-banner";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withContentScale } from "../../utils/withContentScale";
 import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import {
   DismissibleCloseButton,
@@ -16,8 +17,10 @@ const { withContext, ClassNamesProvider } = createSlotRecipeContext(pageBanner);
 
 export interface PageBannerRootProps extends PageBannerVariantProps, DismissibleRootProps {}
 
-export const PageBannerRoot = forwardRef<HTMLDivElement, PageBannerRootProps>(
-  ({ className, ...props }, ref) => {
+// Every banner renders the content scale box, but only a `button` root publishes the
+// ratio (see the page-banner recipe), so a static or dismissible banner never shrinks.
+export const PageBannerRoot = withContentScale(
+  forwardRef<HTMLDivElement, PageBannerRootProps>(({ className, ...props }, ref) => {
     if (props.variant === "solid" && props.tone === "magic") {
       console.error(
         `\`${props.tone}\` tone is not available for \`${props.variant}\` variant in PageBanner components. Please use variant="weak" or a different tone instead.`,
@@ -32,7 +35,7 @@ export const PageBannerRoot = forwardRef<HTMLDivElement, PageBannerRootProps>(
         <DismissibleRoot className={clsx(classNames.root, className)} ref={ref} {...otherProps} />
       </ClassNamesProvider>
     );
-  },
+  }),
 );
 
 // Use these instead when ts implements this:

package/src/components/Popover/Popover.namespace.ts

@@ -0,0 +1,30 @@
+export {
+  PopoverAction as Action,
+  PopoverAnchor as Anchor,
+  PopoverArrow as Arrow,
+  PopoverArrowTip as ArrowTip,
+  PopoverBody as Body,
+  PopoverCloseButton as CloseButton,
+  PopoverContent as Content,
+  PopoverDescription as Description,
+  PopoverFooter as Footer,
+  PopoverHeader as Header,
+  PopoverPositioner as Positioner,
+  PopoverRoot as Root,
+  PopoverTitle as Title,
+  PopoverTrigger as Trigger,
+  type PopoverActionProps as ActionProps,
+  type PopoverAnchorProps as AnchorProps,
+  type PopoverArrowProps as ArrowProps,
+  type PopoverArrowTipProps as ArrowTipProps,
+  type PopoverBodyProps as BodyProps,
+  type PopoverCloseButtonProps as CloseButtonProps,
+  type PopoverContentProps as ContentProps,
+  type PopoverDescriptionProps as DescriptionProps,
+  type PopoverFooterProps as FooterProps,
+  type PopoverHeaderProps as HeaderProps,
+  type PopoverPositionerProps as PositionerProps,
+  type PopoverRootProps as RootProps,
+  type PopoverTitleProps as TitleProps,
+  type PopoverTriggerProps as TriggerProps,
+} from "./Popover";

package/src/components/Popover/Popover.test.tsx

@@ -0,0 +1,222 @@
+import { act, fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "bun:test";
+
+import {
+  PopoverAction,
+  PopoverArrow,
+  PopoverArrowTip,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+  type PopoverRootProps,
+} from "./Popover";
+
+// Flush microtasks so Floating UI position state settles.
+// See: https://floating-ui.com/docs/react#testing
+const waitForPositioning = () => act(async () => {});
+
+/**
+ * happy-dom reports 0 for every layout metric, so a scroll box has to be faked. The scroll
+ * event is what makes PopoverBody re-measure — ResizeObserver never fires here because no
+ * box ever changes size.
+ */
+function setScrollMetrics(
+  element: HTMLElement,
+  metrics: { scrollTop?: number; scrollHeight: number; clientHeight: number },
+) {
+  Object.defineProperty(element, "scrollTop", {
+    value: metrics.scrollTop ?? 0,
+    configurable: true,
+  });
+  Object.defineProperty(element, "scrollHeight", {
+    value: metrics.scrollHeight,
+    configurable: true,
+  });
+  Object.defineProperty(element, "clientHeight", {
+    value: metrics.clientHeight,
+    configurable: true,
+  });
+
+  fireEvent.scroll(element);
+}
+
+function BasicPopover(props: Omit<PopoverRootProps, "children">) {
+  return (
+    <PopoverRoot {...props}>
+      <PopoverTrigger>Open Popover</PopoverTrigger>
+      <PopoverPositioner>
+        <PopoverContent aria-label="Popover">
+          <PopoverBody data-testid="body">Body</PopoverBody>
+          <PopoverArrow>
+            <PopoverArrowTip />
+          </PopoverArrow>
+        </PopoverContent>
+      </PopoverPositioner>
+    </PopoverRoot>
+  );
+}
+
+describe("PopoverRoot", () => {
+  // The px values behind `gutter`/`overflowPadding` are mirrored by hand from `popover.yaml`
+  // (`$dimension.x2` / `$dimension.x4`), so nothing else would catch the two drifting apart.
+  // Only `gutter` is observable here — `overflowPadding` feeds the size middleware, which
+  // clamps to 0 against happy-dom's zero-sized viewport.
+  it("offsets the positioner by the spec gutter", async () => {
+    const { getByLabelText } = render(<BasicPopover defaultOpen />);
+    await waitForPositioning();
+
+    expect(getByLabelText("Popover").parentElement).toHaveStyle({
+      transform: "translate(0px, 8px)",
+    });
+  });
+
+  it("lets a caller override the seeded gutter", async () => {
+    const { getByLabelText } = render(<BasicPopover defaultOpen gutter={0} />);
+    await waitForPositioning();
+
+    expect(getByLabelText("Popover").parentElement).toHaveStyle({
+      transform: "translate(0px, 0px)",
+    });
+  });
+});
+
+describe("PopoverBody", () => {
+  // The bottom fade and the padding it needs hang off data-overflow, so a body that fits
+  // must not carry the attribute — otherwise short content fades into the surface with no
+  // scroll available to clear it.
+  it("leaves a body that fits unflagged", async () => {
+    const { getByTestId } = render(<BasicPopover defaultOpen />);
+    await waitForPositioning();
+
+    expect(getByTestId("body")).not.toHaveAttribute("data-overflow");
+  });
+
+  // `lazyMount` keeps the content subtree out of the DOM until the first open, so the body
+  // node attaches after PopoverBody's own mount would have run. Measurement has to start
+  // from the node, not from a mount effect that already came and went.
+  it("measures a body that mounts only on the first open", async () => {
+    const user = userEvent.setup();
+    const { getByText, getByTestId, queryByTestId } = render(<BasicPopover />);
+    await waitForPositioning();
+
+    expect(queryByTestId("body")).toBeNull();
+
+    await user.click(getByText("Open Popover"));
+
+    const body = getByTestId("body");
+    setScrollMetrics(body, { scrollHeight: 400, clientHeight: 200 });
+
+    expect(body).toHaveAttribute("data-overflow");
+  });
+
+  it("drops the flag once the body fits again", async () => {
+    const { getByTestId } = render(<BasicPopover defaultOpen />);
+    await waitForPositioning();
+
+    const body = getByTestId("body");
+    setScrollMetrics(body, { scrollHeight: 400, clientHeight: 200 });
+    expect(body).toHaveAttribute("data-overflow");
+
+    setScrollMetrics(body, { scrollHeight: 200, clientHeight: 200 });
+    expect(body).not.toHaveAttribute("data-overflow");
+  });
+
+  it("flags the body as scrolled once it leaves the top", async () => {
+    const { getByTestId } = render(<BasicPopover defaultOpen />);
+    await waitForPositioning();
+
+    const body = getByTestId("body");
+    expect(body).not.toHaveAttribute("data-scrolled");
+
+    setScrollMetrics(body, { scrollTop: 40, scrollHeight: 400, clientHeight: 200 });
+    expect(body).toHaveAttribute("data-scrolled");
+  });
+
+  // The bottom padding the recipe applies off data-overflow is itself part of scrollHeight,
+  // so counting it as overflow would keep the flag latched on a body that already fits.
+  it("discounts the body's own bottom padding when measuring overflow", async () => {
+    const { getByTestId } = render(<BasicPopover defaultOpen />);
+    await waitForPositioning();
+
+    const body = getByTestId("body");
+    body.style.paddingBottom = "24px";
+    setScrollMetrics(body, { scrollHeight: 220, clientHeight: 200 });
+    expect(body).not.toHaveAttribute("data-overflow");
+
+    // Same box, less padding: the 20px the content actually overflows by is now uncovered.
+    body.style.paddingBottom = "10px";
+    setScrollMetrics(body, { scrollHeight: 220, clientHeight: 200 });
+    expect(body).toHaveAttribute("data-overflow");
+  });
+});
+
+describe("PopoverHeader", () => {
+  // The close button owns the header's trailing space, and it is optional — the header only
+  // reserves that space when one is actually rendered.
+  it("flags the header while a close button renders", async () => {
+    const { getByTestId } = render(
+      <PopoverRoot defaultOpen>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverPositioner>
+          <PopoverContent aria-label="Popover">
+            <PopoverHeader data-testid="header">
+              <PopoverTitle>Title</PopoverTitle>
+              <PopoverCloseButton>Close</PopoverCloseButton>
+            </PopoverHeader>
+          </PopoverContent>
+        </PopoverPositioner>
+      </PopoverRoot>,
+    );
+    await waitForPositioning();
+
+    expect(getByTestId("header")).toHaveAttribute("data-show-close-button");
+  });
+
+  it("leaves the header unflagged without a close button", async () => {
+    const { getByTestId } = render(
+      <PopoverRoot defaultOpen>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverPositioner>
+          <PopoverContent aria-label="Popover">
+            <PopoverHeader data-testid="header">
+              <PopoverTitle>Title</PopoverTitle>
+            </PopoverHeader>
+          </PopoverContent>
+        </PopoverPositioner>
+      </PopoverRoot>,
+    );
+    await waitForPositioning();
+
+    expect(getByTestId("header")).not.toHaveAttribute("data-show-close-button");
+  });
+
+  // PopoverAction shares the close button's headless props but not its render tracking, so a
+  // footer action must not claim the header's trailing space.
+  it("leaves the header unflagged with only a footer action", async () => {
+    const { getByTestId } = render(
+      <PopoverRoot defaultOpen>
+        <PopoverTrigger>Open Popover</PopoverTrigger>
+        <PopoverPositioner>
+          <PopoverContent aria-label="Popover">
+            <PopoverHeader data-testid="header">
+              <PopoverTitle>Title</PopoverTitle>
+            </PopoverHeader>
+            <PopoverFooter>
+              <PopoverAction>Confirm</PopoverAction>
+            </PopoverFooter>
+          </PopoverContent>
+        </PopoverPositioner>
+      </PopoverRoot>,
+    );
+    await waitForPositioning();
+
+    expect(getByTestId("header")).not.toHaveAttribute("data-show-close-button");
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,282 @@
+import { popover, type PopoverVariantProps } from "@seed-design/css/recipes/popover";
+import { Popover as PopoverPrimitive, usePopoverContext } from "@seed-design/react-popover";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
+import { dataAttr } from "@seed-design/dom-utils";
+import clsx from "clsx";
+import * as React from "react";
+import { forwardRef } from "react";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
+import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
+
+const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(popover);
+const withStateProps = createWithStateProps([usePopoverContext]);
+
+const closeButtonTracker = createRenderTrackingContext("PopoverCloseButton");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverRootProps extends PopoverVariantProps, PopoverPrimitive.RootProps {
+  /**
+   * @default "bottom"
+   */
+  placement?: PopoverPrimitive.RootProps["placement"];
+  /**
+   * @default 8
+   */
+  gutter?: PopoverPrimitive.RootProps["gutter"];
+  /**
+   * @default 16
+   */
+  overflowPadding?: PopoverPrimitive.RootProps["overflowPadding"];
+  /**
+   * @default true
+   */
+  lazyMount?: PopoverPrimitive.RootProps["lazyMount"];
+}
+
+// NOTE: `gutter` and `overflowPadding` are specified in Rootage (`popover.yaml`,
+// `$dimension.x2` / `$dimension.x4`) and generated into `@seed-design/css`, but nothing
+// reads them: floating-ui's `offset`/`shift` take numbers, not CSS custom properties,
+// so the headless layer falls back to its own `0` / `8`. Those defaults stay
+// design-system-agnostic on purpose — this layer is the one that owns the
+// Rootage binding, so seed the spec values through destructuring defaults here,
+// the way `HelpBubbleRoot` passes `gutter` through `defaultProps`.
+export function PopoverRoot({
+  placement = "bottom",
+  gutter = 8,
+  overflowPadding = 16,
+  lazyMount = true,
+  ...props
+}: PopoverRootProps) {
+  const [variantProps, otherProps] = popover.splitVariantProps(props);
+  const classNames = popover(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <closeButtonTracker.Provider>
+        <PopoverPrimitive.Root
+          placement={placement}
+          gutter={gutter}
+          overflowPadding={overflowPadding}
+          lazyMount={lazyMount}
+          {...otherProps}
+        />
+      </closeButtonTracker.Provider>
+    </ClassNamesProvider>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverTriggerProps extends PopoverPrimitive.TriggerProps {}
+
+export const PopoverTrigger = PopoverPrimitive.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverAnchorProps extends PopoverPrimitive.AnchorProps {}
+
+export const PopoverAnchor = PopoverPrimitive.Anchor;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+// Portals into a `container` ref and keeps FloatingPortal's other props out of reach, matching Menu and Select.
+export interface PopoverPositionerProps extends Omit<PopoverPrimitive.PositionerProps, "id"> {
+  /**
+   * The container element to render the portal into.
+   * @default document.body
+   */
+  container?: React.RefObject<HTMLElement | null>;
+}
+
+export const PopoverPositioner = forwardRef<HTMLDivElement, PopoverPositionerProps>(
+  ({ container, className, ...props }, ref) => {
+    const classNames = useClassNames();
+
+    return (
+      <PopoverPrimitive.PositionerPortal
+        ref={ref}
+        root={container ?? undefined}
+        className={clsx(classNames.positioner, className)}
+        {...props}
+      />
+    );
+  },
+);
+PopoverPositioner.displayName = "PopoverPositioner";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverContentProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "width" | "maxWidth">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const PopoverContent = withContext<HTMLDivElement, PopoverContentProps>(
+  withStyleProps(withStateProps(PopoverPrimitive.Content)),
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const PopoverHeader = forwardRef<HTMLDivElement, PopoverHeaderProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { isRendered } = closeButtonTracker.useRenderTracking();
+
+    return (
+      <Primitive.div
+        ref={ref}
+        data-show-close-button={dataAttr(isRendered)}
+        className={clsx(classNames.header, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+PopoverHeader.displayName = "PopoverHeader";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverTitleProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLHeadingElement> {}
+
+export const PopoverTitle = withContext<HTMLHeadingElement, PopoverTitleProps>(
+  PopoverPrimitive.Title,
+  "title",
+);
+
+PopoverTitle.displayName = "PopoverTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverDescriptionProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLParagraphElement> {}
+
+export const PopoverDescription = withContext<HTMLParagraphElement, PopoverDescriptionProps>(
+  PopoverPrimitive.Description,
+  "description",
+);
+
+PopoverDescription.displayName = "PopoverDescription";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverBodyProps
+  extends PrimitiveProps,
+    Pick<
+      StyleProps,
+      "paddingX" | "height" | "maxHeight" | "minHeight" | "justifyContent" | "alignItems"
+    >,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const PopoverBody = forwardRef<HTMLDivElement, PopoverBodyProps>((props, forwardedRef) => {
+  const classNames = useClassNames();
+  const { style, restProps } = useStyleProps(props);
+  const { className, ...otherProps } = restProps;
+
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [scrolled, setScrolled] = React.useState(false);
+  const [overflowing, setOverflowing] = React.useState(false);
+
+  React.useEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const check = () => {
+      setScrolled(element.scrollTop > 0);
+      // Subtract the current bottom padding so overflow detection stays independent
+      // of the padding we conditionally apply — otherwise that padding would count as
+      // overflow and the state would never settle (padding -> overflow -> padding...).
+      const paddingBottom = Number.parseFloat(getComputedStyle(element).paddingBottom) || 0;
+      setOverflowing(element.scrollHeight - paddingBottom > element.clientHeight);
+    };
+    check();
+
+    element.addEventListener("scroll", check);
+
+    const observer = new ResizeObserver(check);
+    observer.observe(element);
+
+    return () => {
+      element.removeEventListener("scroll", check);
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <Primitive.div
+      ref={composeRefs(ref, forwardedRef)}
+      data-scrolled={dataAttr(scrolled)}
+      data-overflow={dataAttr(overflowing)}
+      className={clsx(classNames.body, className)}
+      style={style}
+      {...otherProps}
+    />
+  );
+});
+
+PopoverBody.displayName = "PopoverBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const PopoverFooter = withContext<HTMLDivElement, PopoverFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverActionProps extends PopoverPrimitive.CloseButtonProps {}
+
+export const PopoverAction = PopoverPrimitive.CloseButton;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverCloseButtonProps extends PopoverPrimitive.CloseButtonProps {}
+
+export const PopoverCloseButton = forwardRef<HTMLButtonElement, PopoverCloseButtonProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { trackRef } = closeButtonTracker.useRenderTracking();
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+
+    return (
+      <PopoverPrimitive.CloseButton
+        ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
+        className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+PopoverCloseButton.displayName = "PopoverCloseButton";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverArrowProps extends PopoverPrimitive.ArrowProps {}
+
+// Arrow and ArrowTip are placeholders so future arrow support does not require snippet updates.
+export const PopoverArrow = forwardRef<HTMLDivElement, PopoverArrowProps>(() => null);
+
+PopoverArrow.displayName = "PopoverArrow";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface PopoverArrowTipProps extends React.SVGProps<SVGSVGElement> {}
+
+export const PopoverArrowTip = forwardRef<SVGSVGElement, PopoverArrowTipProps>(() => null);
+
+PopoverArrowTip.displayName = "PopoverArrowTip";