@noya-app/noya-designsystem 0.1.52 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.52",
+  "version": "0.1.54",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.20",
+    "@noya-app/noya-colorpicker": "0.1.21",
     "@noya-app/noya-utils": "0.1.5",
     "@noya-app/noya-geometry": "0.1.11",
     "@noya-app/noya-icons": "0.1.8",

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/ColorSwatch.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { cssVars } from "../theme";
 
 export type ColorSwatchSize = "xsmall" | "small" | "medium" | "large";
 
@@ -31,10 +32,12 @@ export const ColorSwatch = forwardRef(function ColorSwatch(
         height: sizePx,
         borderRadius: "4px",
         outline: checked
-          ? "2px solid rgba(0,0,0,0.2)"
+          ? `2px solid ${cssVars.colors.primary}`
           : "1px solid rgba(0,0,0,0.1)",
         outlineOffset: -1,
-        boxShadow: checked ? `inset 0 0 0 2px rgba(0,0,0,0.2)` : undefined,
+        boxShadow: checked
+          ? `inset 0 0 0 2px ${cssVars.colors.background}`
+          : undefined,
         ...style,
       }}
     />

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/SegmentedControl.tsx

@@ -32,7 +32,6 @@ export interface SegmentedControlProps<T extends string> {
   /** @default primary */
   colorScheme?: SegmentedControlColorScheme;
   allowEmpty?: boolean;
-  separator?: boolean;
   items: SegmentedControlItemProps<T>[];
   className?: string;
   style?: React.CSSProperties;
@@ -70,7 +69,7 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
       value={(value ?? "").toString()}
       disabled={disabled}
       className={cx(
-        "font-sans text-heading5 font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
+        "font-sans text-button font-normal relative flex-1 appearance-none text-segmented-control-item rounded inline-flex gap-1.5 items-center justify-center align-middle text-center focus:outline-none transition-colors",
         colorScheme === "secondary"
           ? "focus:ring-2 focus:ring-secondary focus:ring-offset-1"
           : "focus:ring-2 focus:ring-primary focus:ring-offset-1",
@@ -81,7 +80,10 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
             : "aria-checked:bg-background aria-checked:text-text",
         "focus:z-interactable",
         "aria-checked:shadow-segment",
-        "whitespace-pre",
+        "whitespace-pre px-1",
+        "border-r border-divider last:border-r-0",
+        "aria-checked:border-r-transparent",
+        "[&:has(+[aria-checked=true])]:border-r-transparent",
         className
       )}
       {...props}
@@ -98,15 +100,6 @@ const SegmentedControlItem = forwardRef(function SegmentedControlItem<
   );
 });
 
-const Separator = ({ transparent }: { transparent: boolean }) => (
-  <div
-    className={cx(
-      "w-[1px] my-1 self-stretch bg-divider",
-      transparent && "bg-transparent"
-    )}
-  />
-);
-
 export const SegmentedControl = memoGeneric(function SegmentedControl<
   T extends string,
 >({
@@ -116,7 +109,6 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
   colorScheme,
   allowEmpty,
   items,
-  separator = true,
   className,
   style,
 }: SegmentedControlProps<T>) {
@@ -131,8 +123,6 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
     [allowEmpty, onValueChange]
   );
 
-  const selectedIndex = items.findIndex((item) => item?.value === value);
-
   return (
     <SegmentedControlContext.Provider value={contextValue}>
       <ToggleGroupPrimitive.Root
@@ -141,36 +131,17 @@ export const SegmentedControl = memoGeneric(function SegmentedControl<
         value={value}
         onValueChange={handleValueChange}
         className={cx(
-          `flex items-stretch flex-auto appearance-none relative outline-none min-h-input-height rounded bg-input-background py-[2px] px-[2px]`,
+          `grid appearance-none relative outline-none min-h-input-height rounded bg-input-background py-0.5 px-0.5`,
           className
         )}
-        style={style}
+        style={{
+          ...style,
+          gridTemplateColumns: `repeat(${items.length}, 1fr)`,
+        }}
       >
-        {separator
-          ? items.map((item, index) => {
-              const isLastItem = index === items.length - 1;
-              const currentValue = item?.value;
-
-              // Show separator if:
-              // 1. Current item is not selected AND
-              // 2. Current item is not immediately before the selected item (except when selected is 0)
-              // 3. Current item is not immediately after the selected item
-              const showSeparator =
-                currentValue !== value &&
-                (selectedIndex === 0 && selectedIndex !== index
-                  ? true
-                  : index !== selectedIndex - 1);
-
-              return (
-                <React.Fragment key={index}>
-                  <SegmentedControlItem key={index} {...item} />
-                  {!isLastItem && <Separator transparent={!showSeparator} />}
-                </React.Fragment>
-              );
-            })
-          : items.map((item, index) => (
-              <SegmentedControlItem key={index} {...item} />
-            ))}
+        {items.map((item, index) => (
+          <SegmentedControlItem key={index} {...item} />
+        ))}
       </ToggleGroupPrimitive.Root>
     </SegmentedControlContext.Provider>
   );

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/Slider.tsx

@@ -117,7 +117,7 @@ export const Slider = memo(function Slider({
         <div
           style={trackFillStyle}
           className={cx(
-            "absolute inset-0 w-full h-full rounded overflow-hidden",
+            "absolute inset-0 w-full h-full rounded overflow-hidden bg-primary-pastel",
             colorScheme === "primary" && "bg-primary",
             colorScheme === "secondary" && "bg-secondary"
           )}