@sproutsocial/seeds-react-menu 1.17.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.17.0",
+  "version": "1.18.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -13,20 +13,19 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/index.js"
     },
-    "./experimental": {
-      "types": "./dist/v2/index.d.ts",
-      "import": "./dist/esm/v2/index.js",
-      "require": "./dist/v2/index.js"
-    },
     "./base": {
       "types": "./dist/v3/index.d.ts",
       "import": "./dist/esm/v3/index.js",
       "require": "./dist/v3/index.js"
-    }
+    },
+    "./base/css": "./dist/v3/menu.css"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/v3/menu.css dist/v3/menu.css",
+    "build:debug": "tsup --dts --metafile && cp src/v3/menu.css dist/v3/menu.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -36,18 +35,18 @@
   },
   "dependencies": {
     "@radix-ui/react-popover": "^1.1.2",
-    "@sproutsocial/seeds-react-box": "^1.1.31",
-    "@sproutsocial/seeds-react-button": "^2.3.8",
-    "@sproutsocial/seeds-react-checkbox": "^1.3.53",
-    "@sproutsocial/seeds-react-icon": "^2.5.1",
-    "@sproutsocial/seeds-react-input": "^1.5.41",
-    "@sproutsocial/seeds-react-label": "^1.0.33",
-    "@sproutsocial/seeds-react-popout": "^2.5.22",
-    "@sproutsocial/seeds-react-radio": "^1.3.34",
-    "@sproutsocial/seeds-react-switch": "^1.2.51",
+    "@sproutsocial/seeds-react-box": "^1.1.32",
+    "@sproutsocial/seeds-react-button": "^2.3.9",
+    "@sproutsocial/seeds-react-checkbox": "^1.3.54",
+    "@sproutsocial/seeds-react-icon": "^2.5.2",
+    "@sproutsocial/seeds-react-input": "^1.5.42",
+    "@sproutsocial/seeds-react-label": "^1.0.34",
+    "@sproutsocial/seeds-react-popout": "^2.5.23",
+    "@sproutsocial/seeds-react-radio": "^1.3.35",
+    "@sproutsocial/seeds-react-switch": "^1.2.52",
     "@sproutsocial/seeds-react-system-props": "^3.2.1",
-    "@sproutsocial/seeds-react-theme": "^4.5.0",
-    "@sproutsocial/seeds-react-token-input": "^1.4.63",
+    "@sproutsocial/seeds-react-theme": "^4.5.1",
+    "@sproutsocial/seeds-react-token-input": "^1.4.64",
     "@sproutsocial/seeds-react-utilities": "^4.3.0",
     "@base-ui/react": "^1.3.0",
     "@tanstack/react-virtual": "^3.13.12",
@@ -57,7 +56,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@sproutsocial/seeds-react-tooltip": "^1.1.38",
+    "@sproutsocial/seeds-react-tooltip": "^1.1.39",
     "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",

package/src/v3/ActionMenuStyles.tsx

@@ -1,154 +1,174 @@
+import * as React from "react";
 import { Menu } from "@base-ui/react/menu";
-import styled, { css } from "styled-components";
-import { focusRing } from "@sproutsocial/seeds-react-mixins";
-
-export const ActionMenuTrigger = styled(Menu.Trigger)``;
-
-export const ActionMenuPositioner = styled(Menu.Positioner)`
-  min-width: var(--anchor-width);
-  z-index: 7;
-`;
+import { cn, type WithStringClassName } from "./Common/cn";
+
+/**
+ * v3 Action Menu surface, rendered with CSS classes from menu.css (imported via
+ * @sproutsocial/seeds-react-menu/base/css) instead of styled-components. Each
+ * export keeps its previous name and forwards props/refs to the underlying
+ * Base UI Menu component.
+ */
+
+// Trigger had no styles of its own; keep it as a thin pass-through so the
+// existing render/disabled props still reach Menu.Trigger.
+export const ActionMenuTrigger = Menu.Trigger;
+
+export const ActionMenuPositioner = React.forwardRef<
+  React.ElementRef<typeof Menu.Positioner>,
+  WithStringClassName<React.ComponentProps<typeof Menu.Positioner>>
+>(({ className, ...rest }, ref) => (
+  <Menu.Positioner
+    ref={ref}
+    className={cn("seeds-action-menu-positioner", className)}
+    {...rest}
+  />
+));
+ActionMenuPositioner.displayName = "ActionMenuPositioner";
 
 // Opt out of Base UI Drawer's swipe-to-dismiss pointer capture when the menu
 // is rendered inside a Drawer. Without this, the Drawer's viewport captures
 // pointermove/up on portaled popups and MenuItem clicks never fire.
-export const ActionMenuPopup = styled(Menu.Popup).attrs({
-  "data-base-ui-swipe-ignore": "",
-})`
-  font-family: ${({ theme }) => theme.fontFamily};
-  background: ${({ theme }) => theme.colors.container.background.base};
-  border: 1px solid ${({ theme }) => theme.colors.container.border.base};
-  border-radius: ${({ theme }) => theme.radii[500]};
-  box-shadow: ${({ theme }) => theme.shadows.low};
-  outline: none;
-  max-height: min(var(--available-height, 400px), 400px);
-  overflow-y: auto;
-  padding: ${({ theme }) => theme.space[300]};
-
-  &[data-open] {
-    animation: action-menu-popup-in 120ms ease-out;
-  }
-
-  &[data-closed] {
-    animation: action-menu-popup-out 100ms ease-in;
-  }
-
-  @keyframes action-menu-popup-in {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  @keyframes action-menu-popup-out {
-    from {
-      opacity: 1;
-      transform: scale(1);
-    }
-    to {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-  }
-`;
-
-export const ActionMenuGroup = styled(Menu.Group)`
-  display: block;
-`;
-
-export const ActionMenuGroupLabel = styled(Menu.GroupLabel)`
-  padding: ${({ theme }) => `${theme.space[300]}`};
-  font-size: ${({ theme }) => theme.typography[100].fontSize};
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-
-export const ActionMenuSeparator = styled(Menu.Separator)`
-  height: 1px;
-  margin: ${({ theme }) => `${theme.space[300]} -${theme.space[300]}`};
-  background: ${({ theme }) => theme.colors.container.border.base};
-`;
-
-const menuItemStyles = css`
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  border-radius: ${({ theme }) => theme.radii[500]};
-  background-color: ${({ theme }) => theme.colors.listItem.background.base};
-  border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
-  color: ${({ theme }) => theme.colors.text.body};
-  font-family: ${({ theme }) => theme.fontFamily};
-  font-weight: ${({ theme }) => theme.fontWeights.normal};
-  text-align: left;
-  text-decoration: none;
-  padding: ${({ theme }) => theme.space[300]};
-  outline: 0;
-  ${({ theme }) => theme.typography[200]};
-  transition: all ${({ theme }) => theme.duration.fast};
-  cursor: pointer;
-  user-select: none;
-
-  &[data-highlighted] {
-    border-color: ${({ theme }) => theme.colors.listItem.border.base};
-    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
-    color: ${({ theme }) => theme.colors.text.body};
-    text-decoration: none;
-  }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.4;
-  }
-`;
-
-export const StyledMenuItem = styled(Menu.Item)`
-  ${menuItemStyles}
-`;
-
-export const StyledCheckboxItem = styled(Menu.CheckboxItem)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-`;
-
-export const StyledRadioItem = styled(Menu.RadioItem)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-`;
-
-export const StyledCheckboxItemIndicator = styled(Menu.CheckboxItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-
-export const StyledRadioItemIndicator = styled(Menu.RadioItemIndicator)`
-  display: flex;
-  align-items: center;
-  width: 16px;
-  color: ${({ theme }) => theme.colors.text.body};
-`;
-
-export const StyledSubmenuTrigger = styled(Menu.SubmenuTrigger)`
-  ${menuItemStyles}
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.space[300]};
-  justify-content: space-between;
-
-  &[data-popup-open] {
-    border-color: ${({ theme }) => theme.colors.listItem.border.base};
-    background-color: ${({ theme }) => theme.colors.listItem.background.hover};
-  }
-`;
-
-export const StyledLinkItem = styled(Menu.LinkItem)`
-  ${menuItemStyles}
-`;
+export const ActionMenuPopup = React.forwardRef<
+  React.ElementRef<typeof Menu.Popup>,
+  WithStringClassName<React.ComponentProps<typeof Menu.Popup>>
+>(({ className, ...rest }, ref) => (
+  <Menu.Popup
+    ref={ref}
+    data-base-ui-swipe-ignore=""
+    className={cn("seeds-action-menu-popup", className)}
+    {...rest}
+  />
+));
+ActionMenuPopup.displayName = "ActionMenuPopup";
+
+export const ActionMenuGroup = React.forwardRef<
+  React.ElementRef<typeof Menu.Group>,
+  WithStringClassName<React.ComponentProps<typeof Menu.Group>>
+>(({ className, ...rest }, ref) => (
+  <Menu.Group
+    ref={ref}
+    className={cn("seeds-action-menu-group", className)}
+    {...rest}
+  />
+));
+ActionMenuGroup.displayName = "ActionMenuGroup";
+
+export const ActionMenuGroupLabel = React.forwardRef<
+  React.ElementRef<typeof Menu.GroupLabel>,
+  WithStringClassName<React.ComponentProps<typeof Menu.GroupLabel>>
+>(({ className, ...rest }, ref) => (
+  <Menu.GroupLabel
+    ref={ref}
+    className={cn("seeds-action-menu-group-label", className)}
+    {...rest}
+  />
+));
+ActionMenuGroupLabel.displayName = "ActionMenuGroupLabel";
+
+export const ActionMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof Menu.Separator>,
+  WithStringClassName<React.ComponentProps<typeof Menu.Separator>>
+>(({ className, ...rest }, ref) => (
+  <Menu.Separator
+    ref={ref}
+    className={cn("seeds-action-menu-separator", className)}
+    {...rest}
+  />
+));
+ActionMenuSeparator.displayName = "ActionMenuSeparator";
+
+export const StyledMenuItem = React.forwardRef<
+  React.ElementRef<typeof Menu.Item>,
+  WithStringClassName<React.ComponentProps<typeof Menu.Item>>
+>(({ className, ...rest }, ref) => (
+  <Menu.Item
+    ref={ref}
+    className={cn("seeds-action-menu-item", className)}
+    {...rest}
+  />
+));
+StyledMenuItem.displayName = "StyledMenuItem";
+
+export const StyledCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof Menu.CheckboxItem>,
+  WithStringClassName<React.ComponentProps<typeof Menu.CheckboxItem>>
+>(({ className, ...rest }, ref) => (
+  <Menu.CheckboxItem
+    ref={ref}
+    className={cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-item--flex",
+      className
+    )}
+    {...rest}
+  />
+));
+StyledCheckboxItem.displayName = "StyledCheckboxItem";
+
+export const StyledRadioItem = React.forwardRef<
+  React.ElementRef<typeof Menu.RadioItem>,
+  WithStringClassName<React.ComponentProps<typeof Menu.RadioItem>>
+>(({ className, ...rest }, ref) => (
+  <Menu.RadioItem
+    ref={ref}
+    className={cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-item--flex",
+      className
+    )}
+    {...rest}
+  />
+));
+StyledRadioItem.displayName = "StyledRadioItem";
+
+export const StyledCheckboxItemIndicator = React.forwardRef<
+  React.ElementRef<typeof Menu.CheckboxItemIndicator>,
+  WithStringClassName<React.ComponentProps<typeof Menu.CheckboxItemIndicator>>
+>(({ className, ...rest }, ref) => (
+  <Menu.CheckboxItemIndicator
+    ref={ref}
+    className={cn("seeds-action-menu-item-indicator", className)}
+    {...rest}
+  />
+));
+StyledCheckboxItemIndicator.displayName = "StyledCheckboxItemIndicator";
+
+export const StyledRadioItemIndicator = React.forwardRef<
+  React.ElementRef<typeof Menu.RadioItemIndicator>,
+  WithStringClassName<React.ComponentProps<typeof Menu.RadioItemIndicator>>
+>(({ className, ...rest }, ref) => (
+  <Menu.RadioItemIndicator
+    ref={ref}
+    className={cn("seeds-action-menu-item-indicator", className)}
+    {...rest}
+  />
+));
+StyledRadioItemIndicator.displayName = "StyledRadioItemIndicator";
+
+export const StyledSubmenuTrigger = React.forwardRef<
+  React.ElementRef<typeof Menu.SubmenuTrigger>,
+  WithStringClassName<React.ComponentProps<typeof Menu.SubmenuTrigger>>
+>(({ className, ...rest }, ref) => (
+  <Menu.SubmenuTrigger
+    ref={ref}
+    className={cn(
+      "seeds-action-menu-item",
+      "seeds-action-menu-submenu-trigger",
+      className
+    )}
+    {...rest}
+  />
+));
+StyledSubmenuTrigger.displayName = "StyledSubmenuTrigger";
+
+export const StyledLinkItem = React.forwardRef<
+  React.ElementRef<typeof Menu.LinkItem>,
+  WithStringClassName<React.ComponentProps<typeof Menu.LinkItem>>
+>(({ className, ...rest }, ref) => (
+  <Menu.LinkItem
+    ref={ref}
+    className={cn("seeds-action-menu-item", className)}
+    {...rest}
+  />
+));
+StyledLinkItem.displayName = "StyledLinkItem";