@noya-app/noya-designsystem 0.1.52 → 0.1.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.52",
+  "version": "0.1.53",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/Button.tsx

@@ -89,7 +89,7 @@ export const Button = forwardRef(function Button(
     disabled ? "opacity-25" : "",
     !className?.includes("flex") ? "flex-none" : "",
     active
-      ? "bg-primary text-white hover:bg-primary-light active:bg-primary"
+      ? "bg-primary-pastel text-primary hover:bg-primary-pastel-light min-w-[31px]"
       : variantStyles[variant],
     sizeStyles[
       variant === "thin"

package/src/components/ColorSwatchControl.tsx

@@ -63,13 +63,12 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
             checked={value === option}
           />
         );
-        return readOnly ? (
-          item
-        ) : (
+        return (
           <ToggleGroupPrimitive.Item
             asChild
             value={option as string}
             key={option as string}
+            disabled={readOnly}
           >
             {item}
           </ToggleGroupPrimitive.Item>
@@ -77,14 +76,13 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
       })}
     </div>
   );
-  return readOnly ? (
-    content
-  ) : (
+  return (
     <ToggleGroupPrimitive.Root
       type="single"
       value={value as string}
       onValueChange={onValueChange}
       className="w-full"
+      disabled={readOnly}
     >
       {content}
     </ToggleGroupPrimitive.Root>

package/src/components/ContextMenu.tsx

@@ -2,13 +2,16 @@ import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { memoGeneric } from "@noya-app/react-utils";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React, { ReactNode, useCallback, useMemo } from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import {
   MenuItem,
   getKeyboardShortcutsForMenuItems,
   styles,
 } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";
-
 export interface MenuItemProps<T extends string> {
   value?: T;
   children: ReactNode;
@@ -60,6 +63,8 @@ function ContextMenuRoot<T extends string>({
     [items, onSelect, shouldBindKeyboardShortcuts]
   );
 
+  const portalScopeId = usePortalScopeId();
+
   useKeyboardShortcuts(keymap);
 
   // We call preventDefault both to:
@@ -85,7 +90,10 @@ function ContextMenuRoot<T extends string>({
         {children}
       </RadixContextMenu.Trigger>
       <RadixContextMenu.Portal>
-        <RadixContextMenu.Content className={styles.contentStyle}>
+        <RadixContextMenu.Content
+          {...portalScopeProps(portalScopeId)}
+          className={styles.contentStyle}
+        >
           <MenuViewport
             items={items}
             Components={Components}

package/src/components/DraggableMenuButton.tsx

@@ -1,36 +1,11 @@
 import { DragHandleDots2Icon } from "@noya-app/noya-icons";
 import { memoGeneric } from "@noya-app/react-utils";
-import React, { forwardRef, useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { cssVars } from "../theme";
 import { cx } from "../utils/classNames";
 import { DropdownMenu } from "./DropdownMenu";
 import { MenuItem } from "./internal/Menu";
 
-const DotButton = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      `cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background `,
-      className
-    )}
-    {...props}
-  />
-));
-
-const Trigger = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(`pointer-events-none h-[15px] `, className)}
-    {...props}
-  />
-));
-
 /**
  * A button that opens a menu when clicked, but also allows dragging the
  */
@@ -39,11 +14,17 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
 >({
   items,
   onSelect,
+  onClick,
   isVisible = true,
+  className,
+  style,
 }: {
   items?: MenuItem<T>[];
   onSelect?: (value: T) => void;
+  onClick?: () => void;
   isVisible?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }) {
   const [open, setOpen] = useState(false);
   const [downPosition, setDownPosition] = useState<{
@@ -94,12 +75,18 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
   );
 
   return (
-    <DotButton
+    <div
+      className={cx(
+        "cursor-pointer rounded flex items-center justify-center py-[2px] hover:bg-input-background-light active:bg-active-background ",
+        className
+      )}
+      style={style}
       onPointerDownCapture={handlePointerDownCapture}
       onPointerUp={handlePointerUp}
       onClick={(event) => {
         event.stopPropagation();
         event.preventDefault();
+        onClick?.();
       }}
     >
       {items && onSelect ? (
@@ -110,17 +97,17 @@ export const DraggableMenuButton = memoGeneric(function DraggableMenuButton<
           onSelect={onSelect}
           shouldBindKeyboardShortcuts={false}
         >
-          <Trigger>
+          <div className="pointer-events-none h-[15px]">
             <DragHandleDots2Icon
               color={isVisible || open ? cssVars.colors.icon : "transparent"}
             />
-          </Trigger>
+          </div>
         </DropdownMenu>
       ) : (
         <DragHandleDots2Icon
           color={isVisible || open ? cssVars.colors.icon : "transparent"}
         />
       )}
-    </DotButton>
+    </div>
   );
 });

package/src/components/DropdownMenu.tsx

@@ -7,6 +7,10 @@ import React, {
   SyntheticEvent,
   useMemo,
 } from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { MenuProps } from "./ContextMenu";
 import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
 import { MenuViewport } from "./internal/MenuViewport";
@@ -57,6 +61,8 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     contentStyle,
   } = props;
 
+  const portalScopeId = usePortalScopeId();
+
   const keymap = useMemo(
     () =>
       shouldBindKeyboardShortcuts === false
@@ -86,6 +92,7 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
       </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
         <RadixDropdownMenu.Content
+          {...portalScopeProps(portalScopeId)}
           className={styles.contentStyle}
           side={side}
           sideOffset={sideOffset}

package/src/components/Popover.tsx

@@ -1,5 +1,9 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import React, { ComponentProps } from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { cx } from "../utils/classNames";
 import { IconButton } from "./IconButton";
 
@@ -56,11 +60,14 @@ export function Popover({
   onClickClose,
   className,
 }: Props) {
+  const portalScopeId = usePortalScopeId();
+
   return (
     <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
         <PopoverPrimitive.Content
+          {...portalScopeProps(portalScopeId)}
           className={cx(
             popoverStyle.base,
             variant === "large" && popoverStyle.large,

package/src/components/SelectMenu.tsx

@@ -15,6 +15,10 @@ import React, {
 import { useLabel, useLabelPosition } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { getInsetEndStyles } from "../utils/inputs";
 import { Button } from "./Button";
 import { renderIcon } from "./Icons";
@@ -148,6 +152,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   contentStyle: contentStyleProp,
   ...props
 }: Props<T>) {
+  const portalScopeId = usePortalScopeId();
+
   const selectedItem = items.find(
     (item): item is SelectableMenuItem<T> =>
       isSelectableMenuItem(item) && item.value === value
@@ -213,6 +219,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
       />
       <Select.Portal>
         <Select.Content
+          {...portalScopeProps(portalScopeId)}
           className={styles.contentStyle}
           position="popper"
           sideOffset={6}

package/src/components/SelectionToolbar.tsx

@@ -1,9 +1,12 @@
-import { MenuItem, ToolbarMenu } from "@noya-app/noya-designsystem";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "@noya-app/noya-designsystem";
 import { Rect } from "@noya-app/noya-geometry";
-import { memoGeneric, useSize } from "@noya-app/react-utils";
+import { useSize } from "@noya-app/react-utils";
 import * as PopperPrimitive from "@radix-ui/react-popper";
 import type { MeasurableElement } from "@radix-ui/utils";
-import React, { CSSProperties, useMemo } from "react";
+import React, { CSSProperties, memo, useMemo } from "react";
 
 // Create a Measurable from a Rect
 const createVirtualElement = (rect: Rect): MeasurableElement => ({
@@ -20,51 +23,54 @@ const createVirtualElement = (rect: Rect): MeasurableElement => ({
   }),
 });
 
-type SelectionToolbarProps<T extends string> = {
+type SelectionToolbarContainerProps = {
   rect: Rect;
-  menuItems: MenuItem<T>[];
-  onSelectMenuItem: (item: T) => void;
+  children: React.ReactNode;
 };
 
-export const SelectionToolbar = memoGeneric(function SelectionToolbar<
-  T extends string,
->({ rect, menuItems, onSelectMenuItem }: SelectionToolbarProps<T>) {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-  const size = useSize(containerRef, "width");
+export const SelectionToolbarContainer = memo(
+  function SelectionToolbarContainer({
+    rect,
+    children,
+  }: SelectionToolbarContainerProps) {
+    const portalScopeId = usePortalScopeId();
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const size = useSize(containerRef, "width");
 
-  // Create a virtual reference element from the rect
-  const virtualRef = useMemo(
-    () => ({
-      current: createVirtualElement(rect),
-    }),
-    [rect]
-  );
+    // Create a virtual reference element from the rect
+    const virtualRef = useMemo(
+      () => ({
+        current: createVirtualElement(rect),
+      }),
+      [rect]
+    );
 
-  return (
-    <PopperPrimitive.Root>
-      <PopperPrimitive.Anchor virtualRef={virtualRef} />
-      <PopperPrimitive.Content
-        side="top"
-        sideOffset={10}
-        align="center"
-        avoidCollisions
-        collisionPadding={10}
-        data-editor-overlay
-        contentEditable={false}
-        style={{
-          zIndex: 1000,
-          opacity: size ? 1 : 0,
-          transition: "opacity 0.2s ease-in-out",
-          ["--n-input-background" as keyof CSSProperties]: "transparent",
-        }}
-      >
-        <div
-          ref={containerRef}
-          className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+    return (
+      <PopperPrimitive.Root>
+        <PopperPrimitive.Anchor virtualRef={virtualRef} />
+        <PopperPrimitive.Content
+          {...portalScopeProps(portalScopeId)}
+          side="top"
+          sideOffset={10}
+          align="center"
+          avoidCollisions
+          collisionPadding={10}
+          contentEditable={false}
+          style={{
+            zIndex: 1000,
+            opacity: size ? 1 : 0,
+            transition: "opacity 0.2s ease-in-out",
+            ["--n-input-background" as keyof CSSProperties]: "transparent",
+          }}
         >
-          <ToolbarMenu items={menuItems} onSelectMenuItem={onSelectMenuItem} />
-        </div>
-      </PopperPrimitive.Content>
-    </PopperPrimitive.Root>
-  );
-});
+          <div
+            ref={containerRef}
+            className="flex gap-1 bg-popover-background rounded shadow-popover p-1"
+          >
+            {children}
+          </div>
+        </PopperPrimitive.Content>
+      </PopperPrimitive.Root>
+    );
+  }
+);

package/src/components/Toolbar.tsx

@@ -3,7 +3,6 @@ import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
 
 import { memoGeneric } from "@noya-app/react-utils";
-import { cssVars } from "../theme";
 import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
 import { DividerVertical } from "./Divider";
@@ -13,10 +12,79 @@ import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
   MenuItem,
+  SelectableMenuItem,
+  SubMenuItem,
 } from "./internal/Menu";
 import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
+export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+}: {
+  item: SubMenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={setOpen}
+      items={item.items}
+      onSelect={(value) => {
+        if (onSelectMenuItem && value) {
+          onSelectMenuItem(value);
+        }
+      }}
+    >
+      <Button disabled={item.disabled} active={item.checked || open}>
+        {item.title}
+        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+        {item.icon && renderIcon(item.icon)}
+        <Spacer.Horizontal size={6} />
+        <DropdownChevronIcon />
+      </Button>
+    </DropdownMenu>
+  );
+});
+
+export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+}: {
+  item: SelectableMenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  const content = (
+    <Button
+      disabled={item.disabled}
+      active={item.checked}
+      onClick={() => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }}
+    >
+      {item.title}
+      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+      {item.icon && renderIcon(item.icon)}
+    </Button>
+  );
+
+  return item.tooltip ? (
+    <Tooltip sideOffset={10} content={item.tooltip}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+});
+
 export interface ToolbarProps<T extends string = string> {
   children?: React.ReactNode;
   logo?: React.ReactNode;
@@ -80,11 +148,6 @@ export function Toolbar<T extends string = string>({
   );
 }
 
-const activeButtonStyle = {
-  backgroundColor: cssVars.colors.primaryPastel,
-  color: cssVars.colors.primary,
-};
-
 export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
   items,
   onSelectMenuItem,
@@ -102,53 +165,21 @@ export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
         }
 
         if (isSelectableMenuItem(item)) {
-          const content = (
-            <Button
+          return (
+            <ToolbarMenuButton
               key={i}
-              disabled={item.disabled}
-              style={item.checked ? activeButtonStyle : undefined}
-              onClick={() => {
-                if (onSelectMenuItem && item.value) {
-                  onSelectMenuItem(item.value);
-                }
-              }}
-            >
-              {item.title}
-              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
-              {item.icon && renderIcon(item.icon)}
-            </Button>
-          );
-
-          return item.tooltip ? (
-            <Tooltip sideOffset={10} content={item.tooltip} key={i}>
-              {content}
-            </Tooltip>
-          ) : (
-            content
+              item={item}
+              onSelectMenuItem={onSelectMenuItem}
+            />
           );
         }
 
         return (
-          <DropdownMenu
+          <ToolbarMenuDropdown
             key={i}
-            items={item.items}
-            onSelect={(value) => {
-              if (onSelectMenuItem && value) {
-                onSelectMenuItem(value);
-              }
-            }}
-          >
-            <Button
-              disabled={item.disabled}
-              style={item.checked ? activeButtonStyle : undefined}
-            >
-              {item.title}
-              {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
-              {item.icon && renderIcon(item.icon)}
-              <Spacer.Horizontal size={6} />
-              <DropdownChevronIcon />
-            </Button>
-          </DropdownMenu>
+            item={item}
+            onSelectMenuItem={onSelectMenuItem}
+          />
         );
       })}
     </>

package/src/components/Tooltip.tsx

@@ -1,5 +1,9 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../contexts/PortalScopeContext";
 import { textStyles } from "./Text";
 
 // const Arrow = styled(TooltipPrimitive.Arrow)(({ theme }) => ({
@@ -17,12 +21,15 @@ export const Tooltip = React.memo(function Tooltip({
   content,
   sideOffset = 2,
 }: Props) {
+  const portalScopeId = usePortalScopeId();
+
   return (
     <TooltipPrimitive.Provider>
       <TooltipPrimitive.Root>
         <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
           <TooltipPrimitive.Content
+            {...portalScopeProps(portalScopeId)}
             side="bottom"
             align="center"
             sideOffset={sideOffset}

package/src/components/internal/Menu.tsx

@@ -95,7 +95,7 @@ export type SelectableMenuItem<T extends string> = BaseMenuItem & {
   tooltip?: ReactNode;
 };
 
-type SubMenuItem<T extends string> = BaseMenuItem & {
+export type SubMenuItem<T extends string> = BaseMenuItem & {
   type: "submenu";
   items: MenuItem<T>[];
   id: string;

package/src/components/internal/MenuViewport.tsx

@@ -2,7 +2,11 @@ import { ChevronRightIcon } from "@noya-app/noya-icons";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React from "react";
-import { cx } from "../..";
+import {
+  portalScopeProps,
+  usePortalScopeId,
+} from "../../contexts/PortalScopeContext";
+import { cx } from "../../utils/classNames";
 import { MenuItem, SectionHeader, styles } from "./Menu";
 import { SelectItem } from "./SelectItem";
 
@@ -59,6 +63,8 @@ export const MenuViewport = <T extends string>({
   Components,
   onSelect,
 }: MenuViewportProps<T>) => {
+  const portalScopeId = usePortalScopeId();
+
   const hasCheckedItem = items.some(
     (item) =>
       item.type !== "separator" && item.type !== "sectionHeader" && item.checked
@@ -105,6 +111,7 @@ export const MenuViewport = <T extends string>({
                       e.stopPropagation();
                       e.preventDefault();
                     }}
+                    disabled={item.disabled}
                   >
                     <SelectItem
                       value={item.id}
@@ -123,6 +130,7 @@ export const MenuViewport = <T extends string>({
                   </Components.SubTrigger>
                   <Components.Portal>
                     <Components.SubContent
+                      {...portalScopeProps(portalScopeId)}
                       alignOffset={-5}
                       className={styles.contentStyle}
                     >

package/src/contexts/PortalScopeContext.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+
+export type PortalScopeContextValue = string;
+
+const PortalScopeContext = React.createContext<
+  PortalScopeContextValue | undefined
+>(undefined);
+
+export const PortalScopeProvider = React.memo(function PortalScopeProvider({
+  children,
+  portalScopeId,
+}: {
+  children: React.ReactNode;
+  portalScopeId: string;
+}) {
+  return (
+    <PortalScopeContext.Provider value={portalScopeId}>
+      {children}
+    </PortalScopeContext.Provider>
+  );
+});
+
+export function usePortalScopeId(): string {
+  return React.useContext(PortalScopeContext) ?? "";
+}
+
+export const portalScopeDataSetName = "noyaPortalScope";
+export const portalScopePropName = `data-noya-portal-scope`;
+
+export function portalScopeProps(id?: string) {
+  return {
+    [portalScopePropName]: id,
+  };
+}
+
+export function getClosestPortalScope(element: EventTarget) {
+  if (!(element instanceof HTMLElement)) {
+    return;
+  }
+
+  const closest = element.closest(`[${portalScopePropName}]`);
+
+  if (!closest || !(closest instanceof HTMLElement)) {
+    return;
+  }
+
+  return closest.dataset[portalScopeDataSetName];
+}

package/src/index.tsx

@@ -78,6 +78,7 @@ export * from "./contexts/DialogContext";
 export * from "./contexts/FloatingWindowContext";
 export * from "./contexts/GlobalInputBlurContext";
 export * from "./contexts/ImageDataContext";
+export * from "./contexts/PortalScopeContext";
 // Hooks
 export * from "./hooks/useHover";
 export * from "./hooks/useIndent";