@usefragments/ui 1.5.4 → 1.7.0

package/src/components/Menu/Menu.module.scss

@@ -1,64 +1,64 @@
 @use "../../tokens/variables" as *;
-@use "../../tokens/mixins" as *;
+@use "../../recipes/layout" as layout;
+@use "../../recipes/popup" as popup;
+@use "../../recipes/typography" as typography;
 
-// Local component tokens — arrow size shared with Popover/Tooltip
-$fui-arrow-size: 10px !default;
-
-// Positioner — z-index must exceed Dialog positioner (51)
 .positioner {
-  z-index: 52;
+  z-index: var(--fui-overlay-layer-anchored, 52);
   outline: none;
   pointer-events: auto;
+
+  // The popup is absolutely positioned inside the positioner whenever a
+  // Menu.Viewport is present (Base UI anchors it with top/bottom: 0). Without an
+  // explicit box the positioner collapses to zero height and any flipped
+  // (side="top") menu renders a full popup-height away from its trigger.
+  inline-size: var(--positioner-width);
+  block-size: var(--positioner-height);
 }
 
-// Popup container
 .popup {
-  @include surface-elevated;
-  @include popup-container;
+  @include popup.container;
 
-  list-style: none;
+  min-inline-size: layout.measure("menu-min");
   margin: 0;
-  min-width: 12rem;
-
-  // Menus must be fully hit-testable as soon as they open. A fade/scale
-  // entrance can let fast clicks pass through to page links under the portal.
-  opacity: 1;
-  transform: none;
+  list-style: none;
+  opacity: 0;
+  transform: scale(0.95);
   transform-origin: var(--transform-origin);
+  transition:
+    opacity var(--fui-transition-fast, $fui-transition-fast),
+    transform var(--fui-transition-fast, $fui-transition-fast);
 
   &[data-open] {
     opacity: 1;
-    transform: none;
+    transform: scale(1);
   }
 
   &[data-starting-style],
   &[data-ending-style] {
-    opacity: 1;
-    transform: none;
+    opacity: 0;
+    transform: scale(0.95);
   }
 }
 
-// Viewport — enables content transition animations
 .viewport {
-  overflow: hidden;
-  transition: height var(--fui-transition-fast, $fui-transition-fast);
+  @include popup.viewport;
+
+  transition: block-size var(--fui-transition-fast, $fui-transition-fast);
 }
 
-// Menu item (shared base)
 .item {
-  @include popup-item;
+  @include popup.row;
 
-  // Base UI sets [data-highlighted] on pointer-hover AND keyboard nav → one indicator.
   &[data-highlighted] {
-    @include popup-item-highlight;
+    @include popup.highlight-state;
   }
 
   &[data-disabled] {
-    @include popup-item-disabled;
+    @include popup.disabled-state;
   }
 }
 
-// Danger variant for destructive actions
 .itemDanger {
   color: var(--fui-color-danger-text, $fui-color-danger-text);
 
@@ -68,13 +68,18 @@ $fui-arrow-size: 10px !default;
   }
 }
 
-// Item with icon
-.itemIcon {
+.itemIcon,
+.checkIndicator,
+.radioIndicator {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--fui-popup-indicator-box);
+  block-size: var(--fui-popup-indicator-box);
+  flex: 0 0 auto;
+}
+
+.itemIcon {
   color: var(--fui-text-secondary, $fui-text-secondary);
 
   .itemDanger & {
@@ -82,142 +87,67 @@ $fui-arrow-size: 10px !default;
   }
 
   svg {
-    width: 1rem;
-    height: 1rem;
+    inline-size: 100%;
+    block-size: 100%;
   }
 }
 
-// Item label (main text)
 .itemLabel {
   flex: 1;
+  min-inline-size: 0;
 }
 
-// Item shortcut (keyboard shortcut hint)
 .itemShortcut {
-  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  @include typography.role("caption");
+
+  margin-inline-start: auto;
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  margin-left: auto;
 }
 
-// Check indicator (checkmark icon for checked items)
-//
-// Sized to the text it sits beside rather than to a 16px icon slot. Every item
-// in a checkable menu reserves this column so labels stay aligned whether or not
-// they are checked — which means its width is pure indent on every unchecked
-// row, and at 1rem against 12px text it read as a margin rather than a marker.
 .checkIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 0.75rem;
-  height: 0.75rem;
-  flex-shrink: 0;
   color: var(--fui-color-accent, $fui-color-accent);
 
   svg {
-    width: 100%;
-    height: 100%;
+    inline-size: var(--fui-raw-space-12, 12px);
+    block-size: var(--fui-raw-space-12, 12px);
   }
 }
 
-// Checkbox item
-.checkboxItem {
-  // Uses .checkIndicator for checked state visual
-}
-
-// Radio indicator (still uses icon)
 .radioIndicator {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
   visibility: hidden;
 
   svg {
-    width: 0.75rem;
-    height: 0.75rem;
+    inline-size: var(--fui-raw-space-12, 12px);
+    block-size: var(--fui-raw-space-12, 12px);
   }
 }
 
-// Radio item states
-.radioItem {
-  &[data-checked] .radioIndicator {
-    visibility: visible;
-    color: var(--fui-color-accent, $fui-color-accent);
-  }
+.radioItem[data-checked] .radioIndicator {
+  visibility: visible;
+  color: var(--fui-color-accent, $fui-color-accent);
 }
 
-// Separator
 .separator {
-  height: 1px;
-  margin: var(--fui-space-1, $fui-space-1) 0;
-  background-color: var(--fui-border, $fui-border);
-}
-
-// Group container
-.group {
-  // No specific styles needed
+  @include popup.group-separator;
 }
 
-// Group label
 .groupLabel {
-  @include popup-group-label;
+  @include popup.group-label;
 }
 
-// Arrow
-.arrow {
-  width: $fui-arrow-size;
-  height: $fui-arrow-size;
-  transform: rotate(45deg);
-  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-  border: 1px solid var(--fui-border, $fui-border);
-
-  &[data-side="top"] {
-    border-top: none;
-    border-left: none;
-  }
-
-  &[data-side="bottom"] {
-    border-bottom: none;
-    border-right: none;
-  }
-
-  &[data-side="left"] {
-    border-left: none;
-    border-bottom: none;
-  }
-
-  &[data-side="right"] {
-    border-right: none;
-    border-top: none;
-  }
+.submenuTrigger::after {
+  content: "";
+  inline-size: 0;
+  block-size: 0;
+  margin-inline-start: auto;
+  border-style: solid;
+  border-width: var(--fui-raw-space-4, 4px) 0 var(--fui-raw-space-4, 4px)
+    var(--fui-raw-space-6, 6px);
+  border-color: transparent transparent transparent var(--fui-text-secondary, $fui-text-secondary);
 }
 
-// Submenu trigger (has arrow on right)
-.submenuTrigger {
-  &::after {
-    content: "";
-    margin-left: auto;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 4px 0 4px 6px;
-    border-color: transparent transparent transparent var(--fui-text-secondary, $fui-text-secondary);
-  }
-}
-
-// ============================================
-// Accessibility: Reduced Motion
-// ============================================
-
 @media (prefers-reduced-motion: reduce) {
-  .popup {
-    transform: none;
-
-    &[data-starting-style],
-    &[data-ending-style] {
-      transform: none;
-    }
+  .viewport {
+    transition: none;
   }
 }

package/src/components/Menu/index.tsx

@@ -1,8 +1,9 @@
-'use client';
+"use client";
 
-import * as React from 'react';
-import { Menu as BaseMenu } from '@base-ui/react/menu';
-import styles from './Menu.module.scss';
+import * as React from "react";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { POPUP_OFFSET_PX } from "../../recipes/popup";
+import styles from "./Menu.module.scss";
 
 // ============================================
 // Types
@@ -20,7 +21,7 @@ type MenuTriggerAsButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   children: React.ReactNode;
   asChild?: false;
 };
-type MenuTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, 'children'> & {
+type MenuTriggerAsChildProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
   children: React.ReactElement;
   asChild: true;
 };
@@ -28,12 +29,15 @@ export type MenuTriggerProps = MenuTriggerAsButtonProps | MenuTriggerAsChildProp
 
 export interface MenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
-  side?: 'top' | 'bottom' | 'left' | 'right';
-  align?: 'start' | 'center' | 'end';
+  side?: "top" | "bottom" | "left" | "right";
+  align?: "start" | "center" | "end";
   sideOffset?: number;
 }
 
-export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onSelect'> {
+export interface MenuItemProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "onSelect"
+> {
   children: React.ReactNode;
   disabled?: boolean;
   danger?: boolean;
@@ -44,7 +48,10 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   checked?: boolean;
 }
 
-export interface MenuCheckboxItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
+export interface MenuCheckboxItemProps extends Omit<
+  React.HTMLAttributes<HTMLElement>,
+  "children" | "onChange"
+> {
   children: React.ReactNode;
   checked?: boolean;
   defaultChecked?: boolean;
@@ -59,7 +66,7 @@ export interface MenuRadioGroupProps {
   onValueChange?: (value: string) => void;
 }
 
-export interface MenuRadioItemProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+export interface MenuRadioItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
   children: React.ReactNode;
   value: string;
   disabled?: boolean;
@@ -130,20 +137,9 @@ function DotIcon() {
 // Components
 // ============================================
 
-function MenuRoot({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-  modal = true,
-}: MenuProps) {
+function MenuRoot({ children, open, defaultOpen, onOpenChange, modal = true }: MenuProps) {
   return (
-    <BaseMenu.Root
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-      modal={modal}
-    >
+    <BaseMenu.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>
       {children}
     </BaseMenu.Root>
   );
@@ -152,10 +148,14 @@ function MenuRoot({
 function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTriggerProps) {
   if (asChild) {
     if (!React.isValidElement(children)) {
-      throw new Error('Menu.Trigger with asChild requires a single valid React element child.');
+      throw new Error("Menu.Trigger with asChild requires a single valid React element child.");
     }
     return (
-      <BaseMenu.Trigger {...htmlProps} className={className} render={children as React.ReactElement}>
+      <BaseMenu.Trigger
+        {...htmlProps}
+        className={className}
+        render={children as React.ReactElement}
+      >
         {null}
       </BaseMenu.Trigger>
     );
@@ -164,7 +164,7 @@ function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTrigger
   return (
     <BaseMenu.Trigger
       {...htmlProps}
-      type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? 'button'}
+      type={(htmlProps as React.ButtonHTMLAttributes<HTMLButtonElement>).type ?? "button"}
       className={className}
     >
       {children}
@@ -175,12 +175,12 @@ function MenuTrigger({ children, asChild, className, ...htmlProps }: MenuTrigger
 function MenuContent({
   children,
   className,
-  side = 'bottom',
-  align = 'start',
-  sideOffset = 4,
+  side = "bottom",
+  align = "start",
+  sideOffset = POPUP_OFFSET_PX,
   ...htmlProps
 }: MenuContentProps) {
-  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');
+  const popupClasses = [styles.popup, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.Portal>
@@ -191,9 +191,7 @@ function MenuContent({
         className={styles.positioner}
       >
         <BaseMenu.Popup {...htmlProps} className={popupClasses}>
-          <BaseMenu.Viewport className={styles.viewport}>
-            {children}
-          </BaseMenu.Viewport>
+          <BaseMenu.Viewport className={styles.viewport}>{children}</BaseMenu.Viewport>
         </BaseMenu.Popup>
       </BaseMenu.Positioner>
     </BaseMenu.Portal>
@@ -216,15 +214,11 @@ function MenuItem({
       (htmlProps.onClick as React.MouseEventHandler<HTMLElement> | undefined)?.(event);
       onSelect?.(event);
     },
-    [htmlProps, onSelect],
+    [htmlProps, onSelect]
   );
 
   const hasChecked = checked !== undefined;
-  const classes = [
-    styles.item,
-    danger && styles.itemDanger,
-    className,
-  ].filter(Boolean).join(' ');
+  const classes = [styles.item, danger && styles.itemDanger, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.Item
@@ -234,9 +228,7 @@ function MenuItem({
       className={classes}
     >
       {hasChecked && (
-        <span className={styles.checkIndicator}>
-          {checked ? <CheckmarkIcon /> : null}
-        </span>
+        <span className={styles.checkIndicator}>{checked ? <CheckmarkIcon /> : null}</span>
       )}
       {icon && <span className={styles.itemIcon}>{icon}</span>}
       <span className={styles.itemLabel}>{children}</span>
@@ -263,12 +255,10 @@ function MenuCheckboxItem({
       if (!isControlled) setInternalChecked(value);
       onCheckedChange?.(value);
     },
-    [isControlled, onCheckedChange],
+    [isControlled, onCheckedChange]
   );
 
-  const classes = [styles.item, styles.checkboxItem, className]
-    .filter(Boolean)
-    .join(' ');
+  const classes = [styles.item, styles.checkboxItem, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.CheckboxItem
@@ -279,41 +269,22 @@ function MenuCheckboxItem({
       disabled={disabled}
       className={classes}
     >
-      <span className={styles.checkIndicator}>
-        {visualChecked ? <CheckmarkIcon /> : null}
-      </span>
+      <span className={styles.checkIndicator}>{visualChecked ? <CheckmarkIcon /> : null}</span>
       <span className={styles.itemLabel}>{children}</span>
     </BaseMenu.CheckboxItem>
   );
 }
 
-function MenuRadioGroup({
-  children,
-  value,
-  defaultValue,
-  onValueChange,
-}: MenuRadioGroupProps) {
+function MenuRadioGroup({ children, value, defaultValue, onValueChange }: MenuRadioGroupProps) {
   return (
-    <BaseMenu.RadioGroup
-      value={value}
-      defaultValue={defaultValue}
-      onValueChange={onValueChange}
-    >
+    <BaseMenu.RadioGroup value={value} defaultValue={defaultValue} onValueChange={onValueChange}>
       {children}
     </BaseMenu.RadioGroup>
   );
 }
 
-function MenuRadioItem({
-  children,
-  value,
-  disabled,
-  className,
-  ...htmlProps
-}: MenuRadioItemProps) {
-  const classes = [styles.item, styles.radioItem, className]
-    .filter(Boolean)
-    .join(' ');
+function MenuRadioItem({ children, value, disabled, className, ...htmlProps }: MenuRadioItemProps) {
+  const classes = [styles.item, styles.radioItem, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.RadioItem {...htmlProps} value={value} disabled={disabled} className={classes}>
@@ -326,32 +297,31 @@ function MenuRadioItem({
 }
 
 function MenuGroup({ children, className, ...htmlProps }: MenuGroupProps) {
-  const classes = [styles.group, className].filter(Boolean).join(' ');
-  return <BaseMenu.Group {...htmlProps} className={classes}>{children}</BaseMenu.Group>;
+  const classes = [styles.group, className].filter(Boolean).join(" ");
+  return (
+    <BaseMenu.Group {...htmlProps} className={classes}>
+      {children}
+    </BaseMenu.Group>
+  );
 }
 
 function MenuGroupLabel({ children, className, ...htmlProps }: MenuGroupLabelProps) {
-  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');
-  return <BaseMenu.GroupLabel {...htmlProps} className={classes}>{children}</BaseMenu.GroupLabel>;
+  const classes = [styles.groupLabel, className].filter(Boolean).join(" ");
+  return (
+    <BaseMenu.GroupLabel {...htmlProps} className={classes}>
+      {children}
+    </BaseMenu.GroupLabel>
+  );
 }
 
 function MenuSeparator({ className, ...htmlProps }: MenuSeparatorProps) {
-  const classes = [styles.separator, className].filter(Boolean).join(' ');
+  const classes = [styles.separator, className].filter(Boolean).join(" ");
   return <BaseMenu.Separator {...htmlProps} className={classes} />;
 }
 
-function MenuSubmenu({
-  children,
-  open,
-  defaultOpen,
-  onOpenChange,
-}: MenuSubmenuProps) {
+function MenuSubmenu({ children, open, defaultOpen, onOpenChange }: MenuSubmenuProps) {
   return (
-    <BaseMenu.SubmenuRoot
-      open={open}
-      defaultOpen={defaultOpen}
-      onOpenChange={onOpenChange}
-    >
+    <BaseMenu.SubmenuRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
       {children}
     </BaseMenu.SubmenuRoot>
   );
@@ -364,9 +334,7 @@ function MenuSubmenuTrigger({
   icon,
   ...htmlProps
 }: MenuSubmenuTriggerProps) {
-  const classes = [styles.item, styles.submenuTrigger, className]
-    .filter(Boolean)
-    .join(' ');
+  const classes = [styles.item, styles.submenuTrigger, className].filter(Boolean).join(" ");
 
   return (
     <BaseMenu.SubmenuTrigger {...htmlProps} disabled={disabled} className={classes}>