@seed-design/react 2.5.1 → 3.0.0

package/src/components/DatePicker/index.ts

@@ -1,28 +1,20 @@
 export {
-  ContinuousDatePicker,
-  DatePicker,
-  TwoMonthDatePicker,
-  WeekDatePicker,
-  type ContinuousDatePickerProps,
-  type DatePickerActions,
-  type DatePickerAriaLabels,
+  DatePickerRoot,
+  DatePickerHeader,
+  DatePickerCalendar,
+  DatePickerWheel,
+  type DatePickerRootProps,
+  type DatePickerHeaderProps,
+  type DatePickerCalendarProps,
+  type DatePickerWheelProps,
+  type DatePickerWheelRenderProps,
+  type DatePickerWheelColumn,
   type DatePickerCellContentRenderProps,
-  type DatePickerConstraint,
-  type DatePickerConstraintContext,
-  type DatePickerDate,
-  type DatePickerMonthRange,
-  type DatePickerMultipleProps,
-  type DatePickerProps,
-  type DatePickerRangeProps,
-  type DatePickerRangeValue,
-  type DatePickerSelectionMode,
-  type DatePickerSingleProps,
-  type DatePickerValue,
-  type DatePickerYearMonth,
-  type TwoMonthDatePickerProps,
-  type WeekDatePickerProps,
+  type DatePickerActions,
 } from "./DatePicker";
 
+export * as DatePicker from "./DatePicker.namespace";
+
 export {
   compareDates,
   dateKey,
@@ -33,4 +25,16 @@ export {
   maxSelectionCount,
   rangeDayCountAtLeast,
   rangeDayCountAtMost,
+  type DatePickerAriaLabels,
+  type DatePickerConstraint,
+  type DatePickerConstraintContext,
+  type DatePickerDate,
+  type DatePickerMonthRange,
+  type DatePickerMultipleProps,
+  type DatePickerRangeProps,
+  type DatePickerRangeValue,
+  type DatePickerSelectionMode,
+  type DatePickerSingleProps,
+  type DatePickerValue,
+  type DatePickerYearMonth,
 } from "@seed-design/react-date-picker";

package/src/components/Dialog/Dialog.namespace.ts

@@ -2,6 +2,7 @@ export {
   DialogBackdrop as Backdrop,
   DialogPositioner as Positioner,
   DialogContent as Content,
+  DialogBody as Body,
   DialogDescription as Description,
   DialogFooter as Footer,
   DialogHeader as Header,
@@ -9,9 +10,11 @@ export {
   DialogTitle as Title,
   DialogTrigger as Trigger,
   DialogAction as Action,
+  DialogCloseButton as CloseButton,
   type DialogBackdropProps as BackdropProps,
   type DialogPositionerProps as PositionerProps,
   type DialogContentProps as ContentProps,
+  type DialogBodyProps as BodyProps,
   type DialogDescriptionProps as DescriptionProps,
   type DialogFooterProps as FooterProps,
   type DialogHeaderProps as HeaderProps,
@@ -19,4 +22,5 @@ export {
   type DialogTitleProps as TitleProps,
   type DialogTriggerProps as TriggerProps,
   type DialogActionProps as ActionProps,
+  type DialogCloseButtonProps as CloseButtonProps,
 } from "./Dialog";

package/src/components/Dialog/Dialog.tsx

@@ -1,13 +1,24 @@
+import { composeRefs, useComposedRefs } from "@radix-ui/react-compose-refs";
+import { dialog, type DialogVariantProps } from "@seed-design/css/recipes/dialog";
+import { dataAttr } from "@seed-design/dom-utils";
 import { Dialog as DialogPrimitive } from "@seed-design/react-dialog";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { dialog, type DialogVariantProps } from "@seed-design/css/recipes/dialog";
+import clsx from "clsx";
+import * as React from "react";
+import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
+import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
+
+const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(dialog);
 
-const { withRootProvider, withContext } = createSlotRecipeContext(dialog);
+const closeButtonTracker = createRenderTrackingContext("DialogCloseButton");
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface DialogRootProps extends DialogVariantProps, DialogPrimitive.RootProps {
+export interface DialogRootProps
+  extends DialogVariantProps,
+    Omit<DialogPrimitive.RootProps, "role"> {
   /**
    * @default true
    */
@@ -18,12 +29,22 @@ export interface DialogRootProps extends DialogVariantProps, DialogPrimitive.Roo
   unmountOnExit?: DialogPrimitive.RootProps["unmountOnExit"];
 }
 
-export const DialogRoot = withRootProvider<DialogRootProps>(DialogPrimitive.Root, {
-  defaultProps: {
+export function DialogRoot(props: DialogRootProps) {
+  const [variantProps, otherProps] = dialog.splitVariantProps({
     lazyMount: true,
     unmountOnExit: true,
-  },
-});
+    ...props,
+  });
+  const classNames = dialog(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <closeButtonTracker.Provider>
+        <DialogPrimitive.Root {...otherProps} />
+      </closeButtonTracker.Provider>
+    </ClassNamesProvider>
+  );
+}
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -51,10 +72,12 @@ export const DialogBackdrop = withContext<HTMLDivElement, DialogBackdropProps>(
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface DialogContentProps extends DialogPrimitive.ContentProps {}
+export interface DialogContentProps
+  extends DialogPrimitive.ContentProps,
+    Pick<StyleProps, "width" | "maxWidth"> {}
 
 export const DialogContent = withContext<HTMLDivElement, DialogContentProps>(
-  DialogPrimitive.Content,
+  withStyleProps(DialogPrimitive.Content),
   "content",
 );
 
@@ -62,7 +85,23 @@ export const DialogContent = withContext<HTMLDivElement, DialogContentProps>(
 
 export interface DialogHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
-export const DialogHeader = withContext<HTMLDivElement, DialogHeaderProps>(Primitive.div, "header");
+export const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(
+  ({ 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}
+      />
+    );
+  },
+);
+
+DialogHeader.displayName = "DialogHeader";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -84,6 +123,63 @@ export const DialogDescription = withContext<HTMLParagraphElement, DialogDescrip
 
 ////////////////////////////////////////////////////////////////////////////////////
 
+export interface DialogBodyProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "paddingX" | "minHeight" | "maxHeight" | "justifyContent" | "alignItems">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
+  (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}
+      />
+    );
+  },
+);
+
+DialogBody.displayName = "DialogBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
 export interface DialogFooterProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
 export const DialogFooter = withContext<HTMLDivElement, DialogFooterProps>(Primitive.div, "footer");
@@ -93,3 +189,25 @@ export const DialogFooter = withContext<HTMLDivElement, DialogFooterProps>(Primi
 export interface DialogActionProps extends DialogPrimitive.CloseButtonProps {}
 
 export const DialogAction = DialogPrimitive.CloseButton;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface DialogCloseButtonProps extends DialogPrimitive.CloseButtonProps {}
+
+export const DialogCloseButton = React.forwardRef<HTMLButtonElement, DialogCloseButtonProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { trackRef } = closeButtonTracker.useRenderTracking();
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+
+    return (
+      <DialogPrimitive.CloseButton
+        ref={useComposedRefs(scaleFeedbackRef, ref, trackRef)}
+        className={clsx(classNames.closeButton, scaleFeedbackClassName, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+DialogCloseButton.displayName = "DialogCloseButton";

package/src/components/Dialog/index.ts

@@ -1,12 +1,8 @@
-// NOTE: dialog naming is mid-rename; rootage/vars already use the new names, recipes and react components still use the old ones.
-// Semantically (= snippet naming), this component is the AlertDialog:
-//   snippet AlertDialog → react Dialog        → recipe "dialog"         → vars alertDialog
-//   snippet Dialog      → react ContentDialog → recipe "content-dialog" → vars dialog
-
 export {
   DialogBackdrop,
   DialogPositioner,
   DialogContent,
+  DialogBody,
   DialogDescription,
   DialogFooter,
   DialogHeader,
@@ -14,9 +10,11 @@ export {
   DialogTitle,
   DialogTrigger,
   DialogAction,
+  DialogCloseButton,
   type DialogBackdropProps,
   type DialogPositionerProps,
   type DialogContentProps,
+  type DialogBodyProps,
   type DialogDescriptionProps,
   type DialogFooterProps,
   type DialogHeaderProps,
@@ -24,6 +22,7 @@ export {
   type DialogTitleProps,
   type DialogTriggerProps,
   type DialogActionProps,
+  type DialogCloseButtonProps,
 } from "./Dialog";
 
 export * as Dialog from "./Dialog.namespace";

package/src/components/HelpBubble/HelpBubble.test.tsx

@@ -0,0 +1,111 @@
+import { act, render } from "@testing-library/react";
+import { describe, expect, it } from "bun:test";
+
+import {
+  HelpBubbleAnchor,
+  HelpBubbleBody,
+  HelpBubbleCloseButton,
+  HelpBubbleContent,
+  HelpBubbleDescription,
+  HelpBubblePositioner,
+  HelpBubbleRoot,
+  HelpBubbleTitle,
+  HelpBubbleTrigger,
+  type HelpBubbleRootProps,
+} from "./HelpBubble";
+
+// Flush microtasks so Floating UI position state settles.
+// See: https://floating-ui.com/docs/react#testing
+const waitForPositioning = () => act(async () => {});
+
+// Flush rAF-deferred focus from FloatingFocusManager. happy-dom mocks rAF with
+// setImmediate, so a short timer is needed for enqueueFocus() in @floating-ui/react
+// to land.
+const waitForFocus = () =>
+  act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  });
+
+function BasicHelpBubble(props: Omit<HelpBubbleRootProps, "children">) {
+  return (
+    <HelpBubbleRoot {...props}>
+      <HelpBubbleTrigger>Help</HelpBubbleTrigger>
+      <HelpBubblePositioner data-testid="positioner">
+        <HelpBubbleContent data-testid="content">
+          <HelpBubbleBody>
+            <HelpBubbleTitle>Title</HelpBubbleTitle>
+            <HelpBubbleDescription>Description</HelpBubbleDescription>
+          </HelpBubbleBody>
+          <HelpBubbleCloseButton>Close</HelpBubbleCloseButton>
+        </HelpBubbleContent>
+      </HelpBubblePositioner>
+    </HelpBubbleRoot>
+  );
+}
+
+describe("HelpBubble", () => {
+  it("wires the trigger and the content as a dialog popup", async () => {
+    const { getByText, getByTestId, getByRole } = render(<BasicHelpBubble defaultOpen />);
+    await waitForPositioning();
+
+    expect(getByRole("dialog")).toBe(getByTestId("content"));
+    expect(getByText("Help")).toHaveAttribute("aria-controls", getByTestId("content").id);
+    expect(getByTestId("positioner")).not.toHaveAttribute("role");
+  });
+
+  it("names and describes the content while keeping the title and description elements", async () => {
+    const { getByText, getByTestId } = render(<BasicHelpBubble defaultOpen />);
+    await waitForPositioning();
+
+    expect(getByText("Title").tagName).toBe("SPAN");
+    expect(getByText("Description").tagName).toBe("DIV");
+    expect(getByTestId("content")).toHaveAttribute("aria-labelledby", getByText("Title").id);
+    expect(getByTestId("content")).toHaveAttribute("aria-describedby", getByText("Description").id);
+  });
+
+  it("leaves focus where the page put it when it opens", async () => {
+    const { getByTestId } = render(
+      <>
+        {/* biome-ignore lint/a11y/noAutofocus: reproduces a page that focuses a field on load */}
+        <input data-testid="field" autoFocus />
+        <BasicHelpBubble defaultOpen />
+      </>,
+    );
+    await waitForPositioning();
+    await waitForFocus();
+
+    expect(getByTestId("field")).toHaveFocus();
+  });
+
+  it("stays open when the page focuses a field after it opens", async () => {
+    const { getByTestId, getByText } = render(
+      <>
+        <input data-testid="field" />
+        <BasicHelpBubble defaultOpen />
+      </>,
+    );
+    await waitForPositioning();
+    await waitForFocus();
+
+    act(() => getByTestId("field").focus());
+    await waitForFocus();
+
+    expect(getByTestId("field")).toHaveFocus();
+    expect(getByText("Help")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("moves focus into the content when it opens against an anchor with autoFocus", async () => {
+    const { getByTestId } = render(
+      <HelpBubbleRoot defaultOpen autoFocus>
+        <HelpBubbleAnchor>Anchor</HelpBubbleAnchor>
+        <HelpBubblePositioner>
+          <HelpBubbleContent data-testid="content">Content</HelpBubbleContent>
+        </HelpBubblePositioner>
+      </HelpBubbleRoot>,
+    );
+    await waitForPositioning();
+    await waitForFocus();
+
+    expect(getByTestId("content")).toHaveFocus();
+  });
+});

package/src/components/HelpBubble/HelpBubble.tsx

@@ -32,6 +32,11 @@ export interface HelpBubbleRootProps extends HelpBubbleVariantProps, PopoverPrim
    * @default 14
    */
   arrowPadding?: PopoverPrimitive.RootProps["arrowPadding"];
+  /**
+   * Whether to move focus into the content when it opens. Off by default so a bubble shown on page load keeps focus where the page put it; set `true` to follow the dialog pattern and move focus in.
+   * @default false
+   */
+  autoFocus?: PopoverPrimitive.RootProps["autoFocus"];
 }
 
 export const HelpBubbleRoot = withRootProvider<HelpBubbleRootProps>(PopoverPrimitive.Root, {
@@ -40,6 +45,7 @@ export const HelpBubbleRoot = withRootProvider<HelpBubbleRootProps>(PopoverPrimi
     gutter: 4, // TODO: get value from rootage spec
     overflowPadding: 16, // TODO: get value from rootage spec
     arrowPadding: 14,
+    autoFocus: false,
   },
 });
 
@@ -79,7 +85,7 @@ export interface HelpBubbleContentProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const HelpBubbleContent = withContext<HTMLDivElement, HelpBubbleContentProps>(
-  withStyleProps(withStateProps(Primitive.div)),
+  withStyleProps(withStateProps(PopoverPrimitive.Content)),
   "content",
 );
 
@@ -159,7 +165,12 @@ export interface HelpBubbleTitleProps
     React.HTMLAttributes<HTMLSpanElement> {}
 
 export const HelpBubbleTitle = withContext<HTMLSpanElement, HelpBubbleTitleProps>(
-  withStateProps(Primitive.span),
+  forwardRef<HTMLSpanElement, HelpBubbleTitleProps>((props, ref) => (
+    // An h2 is too noisy for something as small as a help bubble, so keep a plain span.
+    <PopoverPrimitive.Title asChild>
+      <Primitive.span ref={ref} {...props} />
+    </PopoverPrimitive.Title>
+  )),
   "title",
 );
 
@@ -168,6 +179,11 @@ export interface HelpBubbleDescriptionProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const HelpBubbleDescription = withContext<HTMLDivElement, HelpBubbleDescriptionProps>(
-  withStateProps(Primitive.div),
+  forwardRef<HTMLDivElement, HelpBubbleDescriptionProps>((props, ref) => (
+    // A p is too noisy for something as small as a help bubble, so keep a plain div.
+    <PopoverPrimitive.Description asChild>
+      <Primitive.div ref={ref} {...props} />
+    </PopoverPrimitive.Description>
+  )),
   "description",
 );

package/src/components/ImageFrame/ImageFrame.tsx

@@ -21,7 +21,7 @@ import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import type { DistributiveOmit } from "../../utils/styled";
 import { AspectRatio, type AspectRatioProps } from "../AspectRatio/AspectRatio";
-import { Badge, type BadgeProps } from "../Badge/Badge";
+import { BadgeLabel, BadgeRoot, type BadgeRootProps } from "../Badge/Badge";
 import { Float, type FloatProps } from "../Float/Float";
 import { Icon } from "../Icon/Icon";
 import { InternalIcon } from "../private/Icon";
@@ -70,6 +70,8 @@ export const ImageFrame = React.forwardRef<HTMLDivElement, ImageFrameProps>(
     const classNames = imageFrameRecipe(variantProps);
 
     return (
+      // TODO: `asChild` arrives from `AspectRatioProps` but slots onto `Image.Root` below, so it
+      // never swaps this component's own element. Support it via `Slottable`, or omit it from the props.
       <AspectRatio
         ref={ref}
         ratio={ratio}
@@ -119,11 +121,17 @@ ImageFrameFloater.displayName = "ImageFrameFloater";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface ImageFrameBadgeProps extends BadgeProps {}
+export interface ImageFrameBadgeProps extends BadgeRootProps {}
 
 export const ImageFrameBadge = React.forwardRef<HTMLSpanElement, ImageFrameBadgeProps>(
-  (props, ref) => {
-    return <Badge ref={ref} {...props} />;
+  ({ children, ...props }, ref) => {
+    return (
+      // FIXME: `asChild` slots onto `BadgeLabel` below, not `BadgeRoot`, so the caller's element
+      // lands inside the badge without its class or ref. Route `children` through `Slottable`.
+      <BadgeRoot ref={ref} {...props}>
+        <BadgeLabel>{children}</BadgeLabel>
+      </BadgeRoot>
+    );
   },
 );
 

package/src/components/List/List.namespace.ts

@@ -1,4 +1,12 @@
 export {
+  ListCheckItem as CheckItem,
+  ListRadioItem as RadioItem,
+  ListRadioRoot as RadioRoot,
+  ListSwitchItem as SwitchItem,
+  type ListCheckItemProps as CheckItemProps,
+  type ListRadioItemProps as RadioItemProps,
+  type ListRadioRootProps as RadioRootProps,
+  type ListSwitchItemProps as SwitchItemProps,
   ListContent as Content,
   ListDetail as Detail,
   ListItem as Item,

package/src/components/List/List.tsx

@@ -6,10 +6,13 @@ import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { handleRadius, withStyleProps, type StyleProps } from "../../utils/styled";
 import { VStack, type VStackProps } from "../Stack";
-import { useCheckboxContext } from "@seed-design/react-checkbox";
+import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
-import { useSwitchContext } from "@seed-design/react-switch";
+import {
+  RadioGroup as RadioGroupPrimitive,
+  useRadioGroupItemContext,
+} from "@seed-design/react-radio-group";
+import { Switch as SwitchPrimitive, useSwitchContext } from "@seed-design/react-switch";
 
 const { withContext, withProvider } = createSlotRecipeContext(listItem);
 const withStateProps = createWithStateProps([
@@ -55,6 +58,43 @@ export const ListItem = withProvider<HTMLLIElement, ListItemProps>(
   "root",
 );
 
+export interface ListCheckItemProps
+  extends ListItemVariantProps,
+    Pick<StyleProps, "alignItems">,
+    CheckboxPrimitive.RootProps {}
+
+export const ListCheckItem = withProvider<HTMLLabelElement, ListCheckItemProps>(
+  withStyleProps(CheckboxPrimitive.Root),
+  "root",
+);
+ListCheckItem.displayName = "List.CheckItem";
+
+export interface ListRadioRootProps extends RadioGroupPrimitive.RootProps {}
+
+export const ListRadioRoot = RadioGroupPrimitive.Root;
+
+export interface ListRadioItemProps
+  extends ListItemVariantProps,
+    Pick<StyleProps, "alignItems">,
+    RadioGroupPrimitive.ItemProps {}
+
+export const ListRadioItem = withProvider<HTMLLabelElement, ListRadioItemProps>(
+  withStyleProps(RadioGroupPrimitive.Item),
+  "root",
+);
+ListRadioItem.displayName = "List.RadioItem";
+
+export interface ListSwitchItemProps
+  extends ListItemVariantProps,
+    Pick<StyleProps, "alignItems">,
+    SwitchPrimitive.RootProps {}
+
+export const ListSwitchItem = withProvider<HTMLLabelElement, ListSwitchItemProps>(
+  withStyleProps(SwitchPrimitive.Root),
+  "root",
+);
+ListSwitchItem.displayName = "List.SwitchItem";
+
 export interface ListContentProps
   extends PrimitiveProps,
     Pick<StyleProps, "gap" | "pr" | "paddingRight">,

package/src/components/List/index.ts

@@ -1,4 +1,12 @@
 export {
+  ListCheckItem,
+  ListRadioItem,
+  ListRadioRoot,
+  ListSwitchItem,
+  type ListCheckItemProps,
+  type ListRadioItemProps,
+  type ListRadioRootProps,
+  type ListSwitchItemProps,
   ListContent,
   ListDetail,
   ListItem,

package/src/components/Menu/Menu.tsx

@@ -8,6 +8,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 {
@@ -107,8 +108,8 @@ export const MenuGroupLabel = withContext<HTMLDivElement, MenuGroupLabelProps>(
 
 export interface MenuItemProps extends MenuItemVariantProps, MenuPrimitive.ItemProps {}
 
-export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
-  ({ className: propClassName, ...props }, ref) => {
+export const MenuItem = withContentScale(
+  React.forwardRef<HTMLDivElement, MenuItemProps>(({ className: propClassName, ...props }, ref) => {
     const [variantProps, otherProps] = menuItem.splitVariantProps(props);
     const parentProps = useItemProps();
 
@@ -123,7 +124,7 @@ export const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
         />
       </ItemClassNamesProvider>
     );
-  },
+  }),
 );
 MenuItem.displayName = "MenuItem";