@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/src/components/DropdownMenu.tsx

@@ -1,33 +1,47 @@
 "use client";
 
+import { Menu } from "@base-ui/react/menu";
+import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import {
   forwardRefGeneric,
   memoGeneric,
   useControlledOrUncontrolled,
 } from "@noya-app/react-utils";
-import { DropdownMenu as RadixDropdownMenu } from "radix-ui";
 import React, {
   ComponentProps,
   ForwardedRef,
   ReactNode,
-  SyntheticEvent,
   useMemo,
+  useState,
 } from "react";
 import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
+import { cx } from "../utils/classNames";
 import { Button, ButtonProps } from "./Button";
 import { MenuProps } from "./ContextMenu";
-import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
-import { MenuViewport } from "./internal/MenuViewport";
+import { Icon, IconName } from "./Icons";
+import {
+  CHECKBOX_INDENT_WIDTH,
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  getKeyboardShortcutsForMenuItems,
+  isSelectableMenuItem,
+  KeyboardShortcut,
+  MenuItem,
+  MenuItemIcon,
+  SectionHeaderMenuItem as SectionHeaderMenuItemComponent,
+  styles,
+} from "./internal/Menu";
+import { Spacer } from "./Spacer";
 
 /* ----------------------------------------------------------------------------
  * Root
  * ------------------------------------------------------------------------- */
 
-export type DropdownRootProps<T extends string> = Omit<
+export type DropdownMenuProps<T extends string> = Omit<
   MenuProps<T>,
   "children"
 > & {
@@ -35,29 +49,228 @@ export type DropdownRootProps<T extends string> = Omit<
   title?: ReactNode;
   icon?: ButtonProps["icon"];
   open?: boolean;
-  onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
   emptyState?: React.ReactNode;
   contentStyle?: React.CSSProperties;
+  modal?: boolean;
 } & Pick<
-    ComponentProps<typeof RadixDropdownMenu.Content>,
+    ComponentProps<typeof Menu.Positioner>,
     "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
   >;
 
-const Components = {
-  Separator: RadixDropdownMenu.Separator,
-  ItemText: React.Fragment,
-  Item: RadixDropdownMenu.Item,
-  CheckboxItem: RadixDropdownMenu.CheckboxItem,
-  ItemIndicator: RadixDropdownMenu.ItemIndicator,
-  SubTrigger: RadixDropdownMenu.SubTrigger,
-  SubContent: RadixDropdownMenu.SubContent,
-  Sub: RadixDropdownMenu.Sub,
-  Portal: RadixDropdownMenu.Portal,
-};
+const itemStyle = (state: { disabled: boolean; highlighted: boolean }) =>
+  cx(
+    "n-flex-none n-select-none n-cursor-pointer n-rounded",
+    "n-py-1.5 n-px-2",
+    "n-transition-colors",
+    "n-flex n-items-center",
+    "n-font-sans n-text-button n-font-medium",
+    "focus:n-outline-none",
+    state.disabled && "n-text-text-disabled",
+    state.highlighted &&
+      "n-text-selected-list-item-text n-bg-selected-list-item-background"
+  );
+
+function MenuItemContent({
+  icon,
+  checked,
+  indented,
+  children,
+  shortcut,
+  isSubmenuTrigger,
+}: {
+  icon?: MenuItemIcon;
+  checked?: boolean;
+  indented?: boolean;
+  children: ReactNode;
+  shortcut?: string;
+  isSubmenuTrigger?: boolean;
+}) {
+  return (
+    <>
+      {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
+      {checked ? (
+        <span
+          className="n-flex n-items-center n-relative -n-left-2.5"
+          style={{ marginRight: -CHECKBOX_RIGHT_INSET }}
+        >
+          <CheckIcon />
+        </span>
+      ) : indented ? (
+        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+      ) : null}
+      {icon &&
+        (typeof icon === "string" ? (
+          <Icon
+            name={icon as IconName}
+            className="n-mr-2 n-w-4 n-h-4 n-flex-shrink-0"
+          />
+        ) : (
+          <span className="n-mr-2 n-w-4 n-h-4 n-flex-shrink-0 n-flex n-items-center n-justify-center">
+            {icon}
+          </span>
+        ))}
+      <div className="n-flex n-items-center n-flex-1">{children}</div>
+      {shortcut && (
+        <>
+          <Spacer.Horizontal size={16} />
+          <KeyboardShortcut shortcut={shortcut} />
+        </>
+      )}
+      {isSubmenuTrigger && <ChevronRightIcon className="-n-mr-1" />}
+    </>
+  );
+}
+
+// Render submenu inline to preserve React context from parent Menu.Root
+function SubmenuItem<T extends string>({
+  item,
+  onSelect,
+  hasCheckedItem,
+  portalScopeId,
+}: {
+  item: Extract<MenuItem<T>, { type: "submenu" }>;
+  onSelect: ((value: T) => void) | undefined;
+  hasCheckedItem: boolean;
+  portalScopeId: string | undefined;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const submenuHasCheckedItem = item.items.some(
+    (subItem) => isSelectableMenuItem(subItem) && subItem.checked
+  );
+
+  return (
+    <Menu.SubmenuRoot
+      key={item.id}
+      open={open}
+      onOpenChange={(newOpen, event) => {
+        // Ignore focus-out events that cause premature submenu closing
+        if (event.reason === "focus-out") {
+          return;
+        }
+        setOpen(newOpen);
+      }}
+    >
+      <div className="n-px-1">
+        <Menu.SubmenuTrigger
+          disabled={item.disabled}
+          className={itemStyle}
+          openOnHover
+          delay={0}
+          closeDelay={150}
+          nativeButton={false}
+        >
+          <MenuItemContent
+            icon={item.icon}
+            checked={item.checked}
+            indented={hasCheckedItem}
+            isSubmenuTrigger
+          >
+            {item.title}
+          </MenuItemContent>
+        </Menu.SubmenuTrigger>
+      </div>
+      <Menu.Portal>
+        <Menu.Positioner
+          {...portalScopeProps(portalScopeId)}
+          alignOffset={-5}
+          className="n-z-menu n-outline-none"
+        >
+          <Menu.Popup className={styles.contentStyle}>
+            <MenuViewport
+              items={item.items}
+              onSelect={onSelect}
+              hasCheckedItem={submenuHasCheckedItem}
+            />
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.SubmenuRoot>
+  );
+}
+
+function MenuViewport<T extends string>({
+  items,
+  onSelect,
+  hasCheckedItem,
+}: {
+  items: MenuItem<T>[];
+  onSelect?: (value: T) => void;
+  hasCheckedItem: boolean;
+}) {
+  const portalScopeId = usePortalScopeId();
+
+  return (
+    <>
+      {items.map((item, index) => {
+        switch (item.type) {
+          case "separator":
+            return (
+              <Menu.Separator key={index} className={styles.separatorStyle} />
+            );
+
+          case "sectionHeader":
+            return (
+              <SectionHeaderMenuItemComponent
+                isFirst={index === 0}
+                key={item.id}
+                {...item}
+                indented={hasCheckedItem}
+              />
+            );
+
+          case "popover":
+            return null;
+
+          case "submenu":
+            if (item.items) {
+              return (
+                <SubmenuItem
+                  key={item.id}
+                  item={item as Extract<MenuItem<string>, { type: "submenu" }>}
+                  onSelect={onSelect as ((value: string) => void) | undefined}
+                  hasCheckedItem={hasCheckedItem}
+                  portalScopeId={portalScopeId}
+                />
+              );
+            }
+            return null;
+
+          default:
+            return (
+              <div key={item.value} className="n-px-1">
+                <Menu.Item
+                  disabled={item.disabled}
+                  className={itemStyle}
+                  onClick={() => {
+                    if (onSelect && item.value) {
+                      // Delay onSelect to allow menu to close and focus to settle
+                      // This fixes issues like rename not working because focus
+                      // returns to trigger after menu closes
+                      setTimeout(() => onSelect(item.value), 0);
+                    }
+                  }}
+                >
+                  <MenuItemContent
+                    icon={item.icon}
+                    checked={item.checked}
+                    indented={hasCheckedItem}
+                    shortcut={item.shortcut}
+                  >
+                    {item.title ?? item.value}
+                  </MenuItemContent>
+                </Menu.Item>
+              </div>
+            );
+        }
+      })}
+    </>
+  );
+}
 
 const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   T extends string,
->(props: DropdownRootProps<T>, forwardedRef: ForwardedRef<HTMLElement>) {
+>(props: DropdownMenuProps<T>, forwardedRef: ForwardedRef<HTMLElement>) {
   const {
     items,
     children,
@@ -65,7 +278,6 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     shouldBindKeyboardShortcuts,
     onOpenChange,
     open: openProp,
-    onCloseAutoFocus,
     side,
     sideOffset = 4,
     align,
@@ -75,6 +287,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     contentStyle,
     title,
     icon,
+    modal = true,
   } = props;
 
   const [open, setOpen] = useControlledOrUncontrolled({
@@ -104,41 +317,89 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     [contentStyle]
   );
 
+  const hasCheckedItem = items.some(
+    (item) => isSelectableMenuItem(item) && item.checked
+  );
+
+  const childContent =
+    typeof children === "function"
+      ? children({ open })
+      : children || (
+          <Button icon={icon} active={open} iconRight="DropdownChevronIcon">
+            {title}
+          </Button>
+        );
+
+  // Detect if the child renders as a native button element
+  const isNativeButton =
+    React.isValidElement(childContent) &&
+    (childContent.type === "button" ||
+      (childContent.type === Button &&
+        (childContent.props as ButtonProps).as !== "a"));
+
   return (
-    <RadixDropdownMenu.Root onOpenChange={setOpen} open={open}>
-      <RadixDropdownMenu.Trigger
+    <Menu.Root
+      open={open}
+      onOpenChange={(newOpen, event) => {
+        // Ignore sibling-open events - these are incorrectly fired when submenus open
+        // This is a workaround for Base UI treating SubmenuRoot as a sibling menu
+        if (event.reason === "sibling-open" && newOpen === false) {
+          return;
+        }
+        setOpen(newOpen);
+      }}
+      modal={modal}
+    >
+      <Menu.Trigger
         ref={forwardedRef as ForwardedRef<any>}
-        asChild
-      >
-        {typeof children === "function"
-          ? children({ open })
-          : children || (
-              <Button icon={icon} active={open} iconRight="DropdownChevronIcon">
-                {title}
-              </Button>
-            )}
-      </RadixDropdownMenu.Trigger>
-      <RadixDropdownMenu.Portal>
-        <RadixDropdownMenu.Content
+        nativeButton={isNativeButton}
+        render={(triggerProps) => {
+          // Clone the child element and merge props
+          // triggerProps must come last to ensure dropdown handlers work
+          // Wrap onClick to stop propagation so parent click handlers don't fire
+          const wrappedProps = {
+            ...triggerProps,
+            onClick: (e: React.MouseEvent) => {
+              e.stopPropagation();
+              triggerProps.onClick?.(e);
+            },
+            onPointerDown: (e: React.PointerEvent) => {
+              e.stopPropagation();
+              triggerProps.onPointerDown?.(e);
+            },
+          };
+
+          if (React.isValidElement(childContent)) {
+            return React.cloneElement(childContent, {
+              ...(childContent.props as any),
+              ...wrappedProps,
+            });
+          }
+
+          return <span {...wrappedProps}>{childContent}</span>;
+        }}
+      />
+      <Menu.Portal>
+        <Menu.Positioner
           {...portalScopeProps(portalScopeId)}
-          className={styles.contentStyle}
           side={side}
           sideOffset={sideOffset}
           align={align}
           alignOffset={alignOffset}
-          style={contentStyles}
           collisionPadding={collisionPadding}
-          {...({ onCloseAutoFocus } as any)}
+          className="n-z-menu n-outline-none"
         >
-          {items.length === 0 ? emptyState : null}
-          <MenuViewport
-            items={items}
-            Components={Components}
-            onSelect={onSelect}
-          />
-        </RadixDropdownMenu.Content>
-      </RadixDropdownMenu.Portal>
-    </RadixDropdownMenu.Root>
+          <Menu.Popup className={styles.contentStyle} style={contentStyles}>
+            {items.length === 0 ? emptyState : null}
+            <MenuViewport
+              items={items}
+              onSelect={onSelect}
+              hasCheckedItem={hasCheckedItem}
+            />
+          </Menu.Popup>
+        </Menu.Positioner>
+      </Menu.Portal>
+    </Menu.Root>
   );
 });
 

package/src/components/EditableText.tsx

@@ -155,7 +155,7 @@ export const EditableText = memo(
     });
 
     const input = (
-      <div className="n-flex n-absolute n-inset-0 -n-mx-1.5 -n-my-1">
+      <div className="n-flex n-absolute n-inset-0 -n-mx-input-padding-x -n-my-1">
         <InputField.Root onFocusChange={setFocused}>
           <InputField.Input
             ref={inputRef}