@noya-app/noya-designsystem 0.1.76 → 0.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.76",
+  "version": "0.1.78",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,7 +11,12 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./index.css": "./dist/index.css"
+    "./index.css": "./dist/index.css",
+    "./emojis": {
+      "import": "./dist/emojis.mjs",
+      "require": "./dist/emojis.js",
+      "types": "./dist/emojis.d.ts"
+    }
   },
   "scripts": {
     "build:css": "tailwindcss -i ./src/index.css -o ./dist/index.css --postcss",
@@ -20,24 +25,23 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@base-ui-components/react": "1.0.0-beta.4",
+    "@base-ui/react": "1.0.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
-    "@noya-app/noya-colorpicker": "0.1.32",
+    "@noya-app/noya-colorpicker": "0.1.33",
     "@noya-app/noya-utils": "0.1.9",
-    "@noya-app/noya-geometry": "0.1.16",
-    "@noya-app/noya-icons": "0.1.16",
+    "@noya-app/noya-geometry": "0.1.17",
+    "@noya-app/noya-icons": "0.1.18",
     "@noya-app/noya-keymap": "0.1.4",
-    "@noya-app/noya-tailwind-config": "0.1.9",
-    "radix-ui": "1.4.2",
+    "@noya-app/noya-tailwind-config": "0.1.10",
     "@radix-ui/react-compose-refs": "^1.0.0",
     "@radix-ui/primitive": "^1.0.1",
     "@radix-ui/react-utils": "^0.0.5",
     "@radix-ui/react-popper": "1.2.3",
     "@radix-ui/utils": "0.0.3",
+    "gemoji": "8.1.0",
     "immer": "9.0.5",
     "kiwi.js": "^1.1.3",
-    "react-resizable-panels": "3.0.3",
     "vscode-fuzzy-scorer": "^0.0.4"
   },
   "devDependencies": {

package/src/__tests__/__snapshots__/fuzzyScorer.test.ts.snap

@@ -1,4 +1,4 @@
-// Bun Snapshot v1, https://goo.gl/fbAQLP
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
 
 exports[`filter single match 1`] = `
 [

package/src/components/Avatar.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Avatar as AvatarPrimitive } from "radix-ui";
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
 import React, { forwardRef, useMemo } from "react";
 import { cx } from "../utils/classNames";
 import { colorFromString } from "../utils/colorFromString";
@@ -21,9 +21,9 @@ const getInnerAvatarStyles = (
 };
 
 const AvatarRoot = React.forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
-    Pick<AvatarProps, "size" | "variant" | "backgroundColor" | "disabled">
+  HTMLSpanElement,
+  Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> &
+    Pick<AvatarProps, "size" | "variant" | "backgroundColor" | "disabled" | "className">
 >(
   (
     {
@@ -63,9 +63,9 @@ const AvatarRoot = React.forwardRef<
 );
 
 const AvatarImage = React.forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> &
-    Pick<AvatarProps, "size" | "variant">
+  HTMLImageElement,
+  Omit<React.ImgHTMLAttributes<HTMLImageElement>, "className"> &
+    Pick<AvatarProps, "size" | "variant" | "className">
 >(({ className, size = 21, variant = "normal", ...props }, ref) => {
   return (
     <AvatarPrimitive.Image
@@ -85,9 +85,9 @@ function getMonogram(text?: string) {
 }
 
 const AvatarFallback = React.forwardRef<
-  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
-    Pick<AvatarProps, "size" | "variant" | "backgroundColor">
+  HTMLSpanElement,
+  Omit<React.HTMLAttributes<HTMLSpanElement>, "className"> &
+    Pick<AvatarProps, "size" | "variant" | "backgroundColor" | "className">
 >(
   (
     { className, children, style, size = 21, backgroundColor, ...props },

package/src/components/Banner.tsx

@@ -40,7 +40,7 @@ export function Banner({
   return (
     <div
       className={cx(
-        "n-flex n-py-1 n-px-1.5 n-items-center n-justify-center n-select-none n-rounded n-gap-1.5 n-min-h-input-height",
+        "n-flex n-py-input-padding-y n-px-input-padding-x n-items-center n-justify-center n-select-none n-rounded n-gap-1.5 n-min-h-input-height",
         variant === "muted" && "n-bg-input-background",
         variant === "info" &&
           "n-bg-banner-info-background n-border n-border-banner-info-border",

package/src/components/BaseToolbar.tsx

@@ -13,12 +13,15 @@ export interface BaseToolbarProps {
   className?: string;
   innerClassName?: string;
   enableAbsoluteBreakpoint?: boolean;
+  /** Whether to enable container query classes. @default true */
+  enableContainerQuery?: boolean;
 }
 
-const toolbarStyle = {
+/** Shared toolbar style that sets button and input backgrounds to transparent */
+export const toolbarTransparentStyle = {
   [cssVarNames.colors.buttonBackground]: "transparent",
   [cssVarNames.colors.inputBackground]: "transparent",
-};
+} as const;
 
 export function BaseToolbarContainer({
   children,
@@ -34,7 +37,10 @@ export function BaseToolbarContainer({
   enableAbsoluteBreakpoint?: boolean;
 }) {
   return (
-    <div className={cx("n-flex n-flex-col", className)} style={toolbarStyle}>
+    <div
+      className={cx("n-flex n-flex-col", className)}
+      style={toolbarTransparentStyle}
+    >
       <div
         className={cx(
           "n-flex n-items-center n-bg-sidebar-background n-flex-none n-relative",
@@ -61,10 +67,12 @@ export function BaseToolbar({
   className,
   innerClassName,
   enableAbsoluteBreakpoint = true,
+  enableContainerQuery = true,
 }: BaseToolbarProps) {
   const childrenContainerClassName = cx(
     "n-flex n-items-center n-justify-center n-text-text-muted n-pointer-events-none n-inset-0 n-pl-1 n-pr-1 n-min-w-0",
-    "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
+    enableContainerQuery &&
+      "@xl/toolbar:!n-absolute @xl/toolbar:!n-pl-0 @xl/toolbar:!n-pr-0"
   );
 
   const childrenElement = children && (
@@ -93,16 +101,22 @@ export function BaseToolbar({
         </>
       )}
       <Spacer.Horizontal size={10} />
+      {leftElement && !enableContainerQuery && (
+        <>
+          {leftElement}
+          {childrenElement && <Spacer.Horizontal size={10} />}
+        </>
+      )}
       {childrenElement}
-      {leftElement && (
+      {leftElement && enableContainerQuery && (
         <>
           {childrenElement && (
             <>
               <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
               <DividerVertical className="@xl/toolbar:!n-hidden" />
+              <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
             </>
           )}
-          <Spacer.Horizontal size={10} className="@xl/toolbar:!n-hidden" />
           {leftElement}
           <Spacer.Horizontal size={10} />
         </>

package/src/components/Button.tsx

@@ -41,7 +41,8 @@ const variantStyles: Record<ButtonVariant, string> = {
 
 const sizeStyles: Record<ButtonSize | "thin" | "none", string> = {
   small: "n-px-[2px] n-font-sans n-text-[10px] n-font-medium",
-  normal: "n-px-[6px] n-py-1 n-font-sans n-text-button n-font-medium",
+  normal:
+    "n-px-input-padding-x n-py-input-padding-y n-font-sans n-text-button n-font-medium",
   large: "n-p-3 n-px-4 n-font-sans n-text-heading4 n-font-medium",
   thin: "n-px-[1px] n-py-1 n-font-sans n-text-button n-font-medium",
   floating: "n-px-1 n-py-0 n-font-sans n-text-[12px] n-font-medium",

package/src/components/Chip.tsx

@@ -17,7 +17,7 @@ const BASE_STYLES =
 const SIZE_STYLES = {
   xl: "n-text-[12px] n-p-[6px_12px]",
   large: "n-text-[11px] n-p-[4px_8px]",
-  medium: "n-text-[10px] n-p-[2px_6px]",
+  medium: "n-text-[10px] n-py-0.5 n-px-input-padding-x",
   small: "n-text-[9px] n-p-[0px_4px]",
 } as const;
 

package/src/components/ColorSwatchControl.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import React, { useMemo } from "react";
+import { Toggle } from "@base-ui/react/toggle";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import React, { useCallback, useMemo } from "react";
 import { cx } from "../utils/classNames";
 import {
   ColorSwatch,
@@ -40,6 +41,7 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
     id,
     style,
   } = props;
+
   const styles = useMemo(() => {
     return {
       display: "grid",
@@ -49,6 +51,15 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
     };
   }, [size, style]);
 
+  const handleValueChange = useCallback(
+    (values: string[]) => {
+      if (values.length > 0 && onValueChange) {
+        onValueChange(values[0] as TokenValue);
+      }
+    },
+    [onValueChange]
+  );
+
   const content = (
     <div className={className} id={id} style={styles}>
       {options.map((option) => {
@@ -60,33 +71,30 @@ export function ColorSwatchControl(props: ColorSwatchControlProps) {
             onFocus={onFocus}
             onBlur={onBlur}
             disabled={disabled}
-            // TODO: decide on "checked" visual treatment
             className={cx(readOnly ? "n-cursor-default" : "n-cursor-pointer")}
             checked={value === option}
           />
         );
         return (
-          <ToggleGroupPrimitive.Item
-            asChild
-            value={option as string}
+          <Toggle
             key={`${option as string}-toggle-group-item`}
+            value={option as string}
             disabled={readOnly}
-          >
-            {item}
-          </ToggleGroupPrimitive.Item>
+            render={item}
+          />
         );
       })}
     </div>
   );
+
   return (
-    <ToggleGroupPrimitive.Root
-      type="single"
-      value={value as string}
-      onValueChange={onValueChange}
+    <ToggleGroup
+      value={value ? [value as string] : []}
+      onValueChange={handleValueChange}
       className="n-w-full"
       disabled={readOnly}
     >
       {content}
-    </ToggleGroupPrimitive.Root>
+    </ToggleGroup>
   );
 }

package/src/components/CommandPalette.tsx

@@ -27,6 +27,16 @@ export const CommandPalette = memo(function CommandPalette({
     setShowCommandPalette(false);
   }, [setShowCommandPalette]);
 
+  // Focus the menu when the dialog opens
+  React.useEffect(() => {
+    if (!showCommandPalette) return;
+
+    menuRef.current?.focus();
+    setTimeout(() => {
+      menuRef.current?.focus();
+    }, 0);
+  }, [showCommandPalette]);
+
   return (
     <Dialog
       style={{
@@ -45,12 +55,6 @@ export const CommandPalette = memo(function CommandPalette({
         setShowCommandPalette(value);
       }}
       closeOnInteractOutside
-      onOpenAutoFocus={() => {
-        menuRef.current?.focus();
-        setTimeout(() => {
-          menuRef.current?.focus();
-        }, 0);
-      }}
     >
       <div className="n-flex n-flex-col n-flex-1">
         <AutoSizer>

package/src/components/ContextMenu.tsx

@@ -1,19 +1,31 @@
 "use client";
 
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { memoGeneric } from "@noya-app/react-utils";
-import { ContextMenu as RadixContextMenu } from "radix-ui";
-import React, { ReactNode, useCallback, useMemo } from "react";
+import React, { ReactNode, useCallback, useMemo, useState } from "react";
 import {
   portalScopeProps,
   usePortalScopeId,
 } from "../contexts/PortalScopeContext";
+import { cx } from "../utils/classNames";
+import { Icon, IconName } from "./Icons";
 import {
+  CHECKBOX_INDENT_WIDTH,
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
   MenuItem,
+  MenuItemIcon,
   getKeyboardShortcutsForMenuItems,
+  isSelectableMenuItem,
+  KeyboardShortcut,
+  SectionHeaderMenuItem as SectionHeaderMenuItemComponent,
   styles,
 } from "./internal/Menu";
-import { MenuViewport } from "./internal/MenuViewport";
+import { Spacer } from "./Spacer";
+import { cloneElementWithMergedProps } from "../utils/mergeProps";
+
 export interface MenuItemProps<T extends string> {
   value?: T;
   children: ReactNode;
@@ -26,17 +38,210 @@ export interface MenuItemProps<T extends string> {
   items?: MenuItem<T>[];
 }
 
-const Components = {
-  Separator: RadixContextMenu.Separator,
-  ItemText: React.Fragment,
-  Item: RadixContextMenu.Item,
-  CheckboxItem: RadixContextMenu.CheckboxItem,
-  ItemIndicator: RadixContextMenu.ItemIndicator,
-  SubTrigger: RadixContextMenu.SubTrigger,
-  SubContent: RadixContextMenu.SubContent,
-  Sub: RadixContextMenu.Sub,
-  Portal: RadixContextMenu.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" />}
+    </>
+  );
+}
+
+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 (
+    <BaseContextMenu.SubmenuRoot
+      key={item.id}
+      open={open}
+      onOpenChange={(newOpen, event) => {
+        if (event.reason === "focus-out") {
+          return;
+        }
+        setOpen(newOpen);
+      }}
+    >
+      <div className="n-px-1">
+        <BaseContextMenu.SubmenuTrigger
+          disabled={item.disabled}
+          className={itemStyle}
+        >
+          <MenuItemContent
+            icon={item.icon}
+            checked={item.checked}
+            indented={hasCheckedItem}
+            isSubmenuTrigger
+          >
+            {item.title}
+          </MenuItemContent>
+        </BaseContextMenu.SubmenuTrigger>
+      </div>
+      <BaseContextMenu.Portal>
+        <BaseContextMenu.Positioner
+          {...portalScopeProps(portalScopeId)}
+          alignOffset={-5}
+          className="n-z-menu n-outline-none"
+        >
+          <BaseContextMenu.Popup className={styles.contentStyle}>
+            <ContextMenuViewport
+              items={item.items}
+              onSelect={onSelect}
+              hasCheckedItem={submenuHasCheckedItem}
+            />
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    </BaseContextMenu.SubmenuRoot>
+  );
+}
+
+function ContextMenuViewport<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 (
+              <BaseContextMenu.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">
+                <BaseContextMenu.Item
+                  disabled={item.disabled}
+                  className={itemStyle}
+                  onClick={() => {
+                    if (onSelect && item.value) {
+                      setTimeout(() => onSelect(item.value), 0);
+                    }
+                  }}
+                >
+                  <MenuItemContent
+                    icon={item.icon}
+                    checked={item.checked}
+                    indented={hasCheckedItem}
+                    shortcut={item.shortcut}
+                  >
+                    {item.title ?? item.value}
+                  </MenuItemContent>
+                </BaseContextMenu.Item>
+              </div>
+            );
+        }
+      })}
+    </>
+  );
+}
 
 /* ----------------------------------------------------------------------------
  * Root
@@ -69,41 +274,47 @@ function ContextMenuRoot<T extends string>({
 
   useKeyboardShortcuts(keymap);
 
-  // We call preventDefault both to:
-  // - Disable radix-ui's long-press-to-open behavior
-  //   https://github.com/radix-ui/primitives/issues/748#issuecomment-869502837
-  // - Mark the event as handled, so our ListView root doesn't handle it (a hack)
-  const onPointerDown = useCallback((event: React.PointerEvent) => {
-    event.preventDefault();
-  }, []);
-
   const handleSelectItem = useCallback(
     (value: T) => {
       if (!value) return;
-
       onSelect(value);
     },
     [onSelect]
   );
 
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      onOpenChange?.(open);
+    },
+    [onOpenChange]
+  );
+
+  const hasCheckedItem = items.some(
+    (item) => isSelectableMenuItem(item) && item.checked
+  );
+
   return (
-    <RadixContextMenu.Root onOpenChange={onOpenChange}>
-      <RadixContextMenu.Trigger asChild onPointerDown={onPointerDown}>
-        {children}
-      </RadixContextMenu.Trigger>
-      <RadixContextMenu.Portal>
-        <RadixContextMenu.Content
+    <BaseContextMenu.Root onOpenChange={handleOpenChange}>
+      <BaseContextMenu.Trigger
+        render={(triggerProps) =>
+          cloneElementWithMergedProps(children, triggerProps)
+        }
+      />
+      <BaseContextMenu.Portal>
+        <BaseContextMenu.Positioner
           {...portalScopeProps(portalScopeId)}
-          className={styles.contentStyle}
+          className="n-z-menu n-outline-none"
         >
-          <MenuViewport
-            items={items}
-            Components={Components}
-            onSelect={handleSelectItem}
-          />
-        </RadixContextMenu.Content>
-      </RadixContextMenu.Portal>
-    </RadixContextMenu.Root>
+          <BaseContextMenu.Popup className={styles.contentStyle}>
+            <ContextMenuViewport
+              items={items}
+              onSelect={handleSelectItem}
+              hasCheckedItem={hasCheckedItem}
+            />
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    </BaseContextMenu.Root>
   );
 }