@noya-app/noya-designsystem 0.1.52 → 0.1.54

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,134 @@ import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
   MenuItem,
+  SelectableMenuItem,
+  SubMenuItem,
 } from "./internal/Menu";
 import { Spacer } from "./Spacer";
 import { Tooltip } from "./Tooltip";
 
+const iconButtonStyle = {
+  height: 27,
+  width: 27,
+  minWidth: 27,
+};
+
+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.icon && renderIcon(item.icon)}
+        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+        {item.title}
+        <Spacer.Horizontal inline 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}
+      style={item.icon && !item.title ? iconButtonStyle : undefined}
+      onClick={() => {
+        if (onSelectMenuItem && item.value) {
+          onSelectMenuItem(item.value);
+        }
+      }}
+    >
+      {item.icon && renderIcon(item.icon)}
+      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
+      {item.title}
+    </Button>
+  );
+
+  return item.tooltip ? (
+    <Tooltip sideOffset={10} content={item.tooltip}>
+      {content}
+    </Tooltip>
+  ) : (
+    content
+  );
+});
+
+export const ToolbarMenuItem = memoGeneric(function ToolbarMenuItem<
+  T extends string,
+>({
+  item,
+  onSelectMenuItem,
+}: {
+  item: MenuItem<T>;
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  if (item.type === "sectionHeader") return null;
+
+  if (item.type === "separator") {
+    return <DividerVertical overflow={4} />;
+  }
+
+  if (isSelectableMenuItem(item)) {
+    return (
+      <ToolbarMenuButton item={item} onSelectMenuItem={onSelectMenuItem} />
+    );
+  }
+
+  return (
+    <ToolbarMenuDropdown item={item} onSelectMenuItem={onSelectMenuItem} />
+  );
+});
+
+export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
+  items,
+  onSelectMenuItem,
+}: {
+  items: MenuItem<T>[];
+  onSelectMenuItem?: (value: T) => void;
+}) {
+  return (
+    <>
+      {items.map((item, i) => {
+        return (
+          <ToolbarMenuItem
+            key={i}
+            item={item}
+            onSelectMenuItem={onSelectMenuItem}
+          />
+        );
+      })}
+    </>
+  );
+});
+
 export interface ToolbarProps<T extends string = string> {
   children?: React.ReactNode;
   logo?: React.ReactNode;
@@ -79,78 +202,3 @@ export function Toolbar<T extends string = string>({
     </BaseToolbar>
   );
 }
-
-const activeButtonStyle = {
-  backgroundColor: cssVars.colors.primaryPastel,
-  color: cssVars.colors.primary,
-};
-
-export const ToolbarMenu = memoGeneric(function ToolbarMenu<T extends string>({
-  items,
-  onSelectMenuItem,
-}: {
-  items: MenuItem<T>[];
-  onSelectMenuItem?: (value: T) => void;
-}) {
-  return (
-    <>
-      {items.map((item, i) => {
-        if (item.type === "sectionHeader") return null;
-
-        if (item.type === "separator") {
-          return <DividerVertical key={i} overflow={4} />;
-        }
-
-        if (isSelectableMenuItem(item)) {
-          const content = (
-            <Button
-              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
-          );
-        }
-
-        return (
-          <DropdownMenu
-            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>
-        );
-      })}
-    </>
-  );
-});

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/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -60,11 +60,11 @@ export const ConnectedUsersMenuLayout = ({
                 : undefined,
             }}
           >
-            AI
-            <Spacer.Horizontal size={8} />
             <ChatBubbleWithDotsIcon
               color={isAssistantOpen ? undefined : cssVars.colors.icon}
             />
+            <Spacer.Horizontal inline size={6} />
+            AI
           </Button>
         </Tooltip>
       )}

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;
@@ -159,7 +159,7 @@ export const getMenuItemKey = <T extends string>(
 };
 
 export const CHECKBOX_WIDTH = 15;
-export const CHECKBOX_RIGHT_INSET = 8;
+export const CHECKBOX_RIGHT_INSET = 6;
 export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {

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/components/internal/SelectItem.tsx

@@ -1,6 +1,5 @@
 import { renderIcon } from "../Icons";
 
-import { CheckIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
 import React, { useCallback } from "react";
 import { cx } from "../../utils/classNames";
@@ -68,7 +67,7 @@ export const SelectItem = React.forwardRef(
             <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />
             {Components.ItemIndicator && (
               <Components.ItemIndicator {...styles.itemIndicator}>
-                <CheckIcon />
+                <Checkmark />
               </Components.ItemIndicator>
             )}
             {icon && (
@@ -109,7 +108,7 @@ export const SelectItem = React.forwardRef(
             {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
               <div {...styles.itemIndicator}>
-                <CheckIcon />
+                <Checkmark />
               </div>
             ) : indented ? (
               <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
@@ -134,3 +133,25 @@ export const SelectItem = React.forwardRef(
     );
   }
 );
+
+function Checkmark() {
+  return (
+    <svg
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      width={15}
+      height={15}
+    >
+      <path
+        className="scale-90 origin-center"
+        d="M3 8L6 11L12 5"
+        strokeWidth="1.1"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}

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";