@noya-app/noya-designsystem 0.1.53 → 0.1.55

package/src/components/Toolbar.tsx

@@ -1,4 +1,3 @@
-import { DropdownChevronIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import React from "react";
 
@@ -7,7 +6,6 @@ import { BaseToolbar } from "./BaseToolbar";
 import { Button } from "./Button";
 import { DividerVertical } from "./Divider";
 import { DropdownMenu } from "./DropdownMenu";
-import { renderIcon } from "./Icons";
 import {
   getKeyboardShortcutsForMenuItems,
   isSelectableMenuItem,
@@ -15,9 +13,14 @@ import {
   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,
 >({
@@ -40,12 +43,13 @@ export const ToolbarMenuDropdown = memoGeneric(function ToolbarMenuDropdown<
         }
       }}
     >
-      <Button disabled={item.disabled} active={item.checked || open}>
+      <Button
+        disabled={item.disabled}
+        active={item.checked || open}
+        icon={item.icon}
+        iconRight="DropdownChevronIcon"
+      >
         {item.title}
-        {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
-        {item.icon && renderIcon(item.icon)}
-        <Spacer.Horizontal size={6} />
-        <DropdownChevronIcon />
       </Button>
     </DropdownMenu>
   );
@@ -64,6 +68,8 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
     <Button
       disabled={item.disabled}
       active={item.checked}
+      icon={item.icon}
+      style={item.icon && !item.title ? iconButtonStyle : undefined}
       onClick={() => {
         if (onSelectMenuItem && item.value) {
           onSelectMenuItem(item.value);
@@ -71,8 +77,6 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
       }}
     >
       {item.title}
-      {item.title && item.icon && <Spacer.Horizontal inline size={6} />}
-      {item.icon && renderIcon(item.icon)}
     </Button>
   );
 
@@ -85,6 +89,54 @@ export const ToolbarMenuButton = memoGeneric(function ToolbarMenuButton<
   );
 });
 
+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;
@@ -147,41 +199,3 @@ export function Toolbar<T extends string = string>({
     </BaseToolbar>
   );
 }
-
-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)) {
-          return (
-            <ToolbarMenuButton
-              key={i}
-              item={item}
-              onSelectMenuItem={onSelectMenuItem}
-            />
-          );
-        }
-
-        return (
-          <ToolbarMenuDropdown
-            key={i}
-            item={item}
-            onSelectMenuItem={onSelectMenuItem}
-          />
-        );
-      })}
-    </>
-  );
-});

package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx

@@ -1,12 +1,7 @@
-import { cssVars } from "../../theme";
-
-import { ChatBubbleWithDotsIcon } from "@noya-app/noya-icons";
 import React from "react";
 import { INPUT_HEIGHT } from "../../theme";
-import { colorFromString } from "../../utils/colorFromString";
 import { Avatar, AvatarProps, AvatarStack } from "../Avatar";
 import Button from "../Button";
-import { Spacer } from "../Spacer";
 import { Small } from "../Text";
 import { Tooltip } from "../Tooltip";
 
@@ -25,14 +20,12 @@ export const UserAvatar = ({ userId, name, image }: AvatarProps) => (
 
 type ConnectedUsersMenuLayoutProps = {
   renderUsers: () => React.ReactNode;
-  currentUserId?: string;
   launchAIAssistant?: () => void;
   isAssistantOpen?: boolean;
 };
 
 export const ConnectedUsersMenuLayout = ({
   renderUsers,
-  currentUserId,
   launchAIAssistant,
   isAssistantOpen,
 }: ConnectedUsersMenuLayoutProps) => {
@@ -41,30 +34,14 @@ export const ConnectedUsersMenuLayout = ({
       <AvatarStack size={INPUT_HEIGHT} className="mr-1">
         {renderUsers()}
       </AvatarStack>
-
-      {/* AI Assistant Avatar */}
       {launchAIAssistant && (
-        <Tooltip
-          content={
-            <div className="flex flex-col">
-              <Small>AI Assistant</Small>
-            </div>
-          }
-        >
+        <Tooltip content="AI Assistant">
           <Button
-            variant={isAssistantOpen ? "secondary" : undefined}
+            active={isAssistantOpen}
             onClick={launchAIAssistant}
-            style={{
-              backgroundColor: isAssistantOpen
-                ? colorFromString(currentUserId ?? "")
-                : undefined,
-            }}
+            icon="ChatBubbleWithDotsIcon"
           >
             AI
-            <Spacer.Horizontal size={8} />
-            <ChatBubbleWithDotsIcon
-              color={isAssistantOpen ? undefined : cssVars.colors.icon}
-            />
           </Button>
         </Tooltip>
       )}

package/src/components/internal/Menu.tsx

@@ -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/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/DesignSystemConfiguration.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { ToastProvider } from "../components/Toast";
 import { DialogProvider } from "./DialogContext";
 import { FloatingWindowProvider } from "./FloatingWindowContext";
+import { OpenPortalsProvider } from "./OpenPortalsContext";
 
 export type DesignSystemConfigurationContextValue = {
   platform: PlatformName;
@@ -39,11 +40,13 @@ export const DesignSystemConfigurationProvider = React.memo(
 
     return (
       <DesignSystemConfigurationContext.Provider value={contextValue}>
-        <DialogProvider>
-          <ToastProvider>
-            <FloatingWindowProvider>{children}</FloatingWindowProvider>
-          </ToastProvider>
-        </DialogProvider>
+        <OpenPortalsProvider>
+          <DialogProvider>
+            <ToastProvider>
+              <FloatingWindowProvider>{children}</FloatingWindowProvider>
+            </ToastProvider>
+          </DialogProvider>
+        </OpenPortalsProvider>
       </DesignSystemConfigurationContext.Provider>
     );
   }

package/src/contexts/OpenPortalsContext.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+
+export type OpenPortalsContextValue = {
+  hasOpenPortals: boolean;
+};
+
+export type OpenPortalControlsContextValue = {
+  addOpenPortal: (portal: string) => void;
+  removeOpenPortal: (portal: string) => void;
+};
+
+/**
+ * This context is used to track the open portals in the design system.
+ *
+ * We currently use this so that we can cover up iframes when there are open portals.
+ * This lets us intercept click events that would otherwise be swallowed by the iframe.
+ */
+const OpenPortalsContext = React.createContext<OpenPortalsContextValue>({
+  hasOpenPortals: false,
+});
+
+const OpenPortalControlsContext =
+  React.createContext<OpenPortalControlsContextValue>({
+    addOpenPortal: () => {},
+    removeOpenPortal: () => {},
+  });
+
+export const OpenPortalsProvider = React.memo(function OpenPortalsProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [openPortals, setOpenPortals] = React.useState<string[]>([]);
+
+  const value = React.useMemo(
+    () => ({ hasOpenPortals: openPortals.length > 0 }),
+    [openPortals]
+  );
+
+  const controlsValue = React.useMemo(
+    () => ({
+      addOpenPortal: (portal: string) => {
+        setOpenPortals((prev) => [...prev, portal]);
+      },
+      removeOpenPortal: (portal: string) => {
+        setOpenPortals((prev) => prev.filter((p) => p !== portal));
+      },
+    }),
+    []
+  );
+
+  return (
+    <OpenPortalsContext.Provider value={value}>
+      <OpenPortalControlsContext.Provider value={controlsValue}>
+        {children}
+      </OpenPortalControlsContext.Provider>
+    </OpenPortalsContext.Provider>
+  );
+});
+
+export function useHasOpenPortals(): boolean {
+  return React.useContext(OpenPortalsContext).hasOpenPortals;
+}
+
+export function useOpenPortalsControls(): OpenPortalControlsContextValue {
+  return React.useContext(OpenPortalControlsContext);
+}

package/src/index.css

@@ -78,7 +78,7 @@
   --n-toolbar-separator: 8px;
   --n-inspector-h-separator: 8px;
   --n-inspector-v-separator: 10px;
-  --n-dialog-padding: 16px;
+  --n-dialog-padding: 32px;
   --n-input-height: 27px;
   --n-icon: var(--n-indigo-300);
   --n-icon-selected: rgb(220, 220, 220);
@@ -101,7 +101,7 @@
   --n-floating-button: rgb(248, 248, 250);
   --n-block-border: rgb(184, 201, 218);
   --n-block-highlight: rgb(255, 165, 0);
-  --n-markdown-editor-line-placeholder-content: "Write or press / for commands";
+  --n-markdown-editor-line-placeholder-content: "";
   --n-selected-list-item-background: var(--n-primary-100);
   --n-selected-list-item-text: var(--n-primary);
   --n-selected-list-item-icon-background: var(--n-primary-150);

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/OpenPortalsContext";
 export * from "./contexts/PortalScopeContext";
 // Hooks
 export * from "./hooks/useHover";