@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/components/ContextMenu.tsx

@@ -1,19 +1,13 @@
-import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 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 { renderIcon } from "./Icons";
-import { Spacer } from "./Spacer";
 import {
-  CHECKBOX_RIGHT_INSET,
-  CHECKBOX_WIDTH,
-  KeyboardShortcut,
   MenuItem,
-  SEPARATOR_ITEM,
   getKeyboardShortcutsForMenuItems,
   styles,
 } from "./internal/Menu";
+import { MenuViewport } from "./internal/MenuViewport";
 
 export interface MenuItemProps<T extends string> {
   value?: T;
@@ -27,90 +21,17 @@ export interface MenuItemProps<T extends string> {
   items?: MenuItem<T>[];
 }
 
-const ContextMenuItem = memoGeneric(function ContextMenuItem<T extends string>({
-  value,
-  children,
-  onSelect,
-  checked,
-  disabled,
-  indented,
-  icon,
-  items,
-  shortcut,
-}: MenuItemProps<T>) {
-  // The pointer event within the context menu will bubble outside of the
-  // context menu unless we stop it here.
-  const handlePointerDown = useCallback(
-    (event: React.PointerEvent) => event.stopPropagation(),
-    []
-  );
-
-  const handleSelectItem = useCallback(() => {
-    if (!value) return;
-
-    onSelect(value);
-  }, [onSelect, value]);
-
-  if (checked) {
-    return (
-      <RadixContextMenu.CheckboxItem
-        checked={checked}
-        disabled={disabled}
-        onSelect={handleSelectItem}
-        className={styles.itemStyle({ disabled })}
-      >
-        <RadixContextMenu.ItemIndicator className={styles.itemIndicatorStyle}>
-          <CheckIcon />
-        </RadixContextMenu.ItemIndicator>
-        {children}
-      </RadixContextMenu.CheckboxItem>
-    );
-  }
-
-  const element = (
-    <RadixContextMenu.Item
-      className={styles.itemStyle({ disabled })}
-      disabled={disabled}
-      onSelect={handleSelectItem}
-      onPointerDown={handlePointerDown}
-    >
-      {indented && (
-        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
-      )}
-      {icon && (
-        <>
-          {renderIcon(icon)}
-          <Spacer.Horizontal size={8} />
-        </>
-      )}
-      {children}
-      {shortcut && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={24} />
-          <KeyboardShortcut shortcut={shortcut} />
-        </>
-      )}
-      {items && items.length > 0 && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={16} />
-          <ChevronRightIcon />
-        </>
-      )}
-    </RadixContextMenu.Item>
-  );
-
-  if (items && items.length > 0) {
-    return (
-      <ContextMenuRoot isNested items={items} onSelect={onSelect}>
-        {element}
-      </ContextMenuRoot>
-    );
-  } else {
-    return element;
-  }
-});
+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,
+};
 
 /* ----------------------------------------------------------------------------
  * Root
@@ -120,7 +41,6 @@ export interface MenuProps<T extends string> {
   children: ReactNode;
   items: MenuItem<T>[];
   onSelect: (value: T) => void;
-  isNested?: boolean;
   shouldBindKeyboardShortcuts?: boolean;
   onOpenChange?: (open: boolean) => void;
 }
@@ -129,20 +49,15 @@ function ContextMenuRoot<T extends string>({
   items,
   children,
   onSelect,
-  isNested,
   shouldBindKeyboardShortcuts,
   onOpenChange,
 }: MenuProps<T>) {
-  const hasCheckedItem = items.some(
-    (item) => item !== SEPARATOR_ITEM && item.checked
-  );
-
   const keymap = useMemo(
     () =>
-      isNested || shouldBindKeyboardShortcuts === false
+      shouldBindKeyboardShortcuts === false
         ? {}
         : getKeyboardShortcutsForMenuItems(items, onSelect),
-    [isNested, items, onSelect, shouldBindKeyboardShortcuts]
+    [items, onSelect, shouldBindKeyboardShortcuts]
   );
 
   useKeyboardShortcuts(keymap);
@@ -155,46 +70,30 @@ function ContextMenuRoot<T extends string>({
     event.preventDefault();
   }, []);
 
-  const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
-  const TriggerComponent = isNested
-    ? RadixContextMenu.SubTrigger
-    : RadixContextMenu.Trigger;
-  const ContentComponent: typeof RadixContextMenu.Content = isNested
-    ? RadixContextMenu.SubContent
-    : RadixContextMenu.Content;
+  const handleSelectItem = useCallback(
+    (value: T) => {
+      if (!value) return;
+
+      onSelect(value);
+    },
+    [onSelect]
+  );
 
   return (
-    <RootComponent onOpenChange={onOpenChange}>
-      <TriggerComponent asChild onPointerDown={onPointerDown}>
+    <RadixContextMenu.Root onOpenChange={onOpenChange}>
+      <RadixContextMenu.Trigger asChild onPointerDown={onPointerDown}>
         {children}
-      </TriggerComponent>
+      </RadixContextMenu.Trigger>
       <RadixContextMenu.Portal>
-        <ContentComponent className={styles.contentStyle}>
-          {items.map((item, index) =>
-            item === SEPARATOR_ITEM ? (
-              <RadixContextMenu.Separator
-                key={index}
-                className={styles.separatorStyle}
-              />
-            ) : (
-              <ContextMenuItem
-                key={item.value ?? index}
-                value={item.value}
-                indented={hasCheckedItem}
-                checked={item.checked ?? false}
-                disabled={item.disabled ?? false}
-                icon={item.icon}
-                onSelect={onSelect}
-                items={item.items}
-                shortcut={item.shortcut}
-              >
-                {item.title}
-              </ContextMenuItem>
-            )
-          )}
-        </ContentComponent>
+        <RadixContextMenu.Content className={styles.contentStyle}>
+          <MenuViewport
+            items={items}
+            Components={Components}
+            onSelect={handleSelectItem}
+          />
+        </RadixContextMenu.Content>
       </RadixContextMenu.Portal>
-    </RootComponent>
+    </RadixContextMenu.Root>
   );
 }
 

package/src/components/DropdownMenu.tsx

@@ -1,4 +1,3 @@
-import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -6,132 +5,45 @@ import React, {
   ComponentProps,
   ForwardedRef,
   SyntheticEvent,
-  useCallback,
   useMemo,
 } from "react";
-import { MenuItemProps, MenuProps } from "./ContextMenu";
-import { renderIcon } from "./Icons";
-import { Spacer } from "./Spacer";
-import {
-  CHECKBOX_RIGHT_INSET,
-  CHECKBOX_WIDTH,
-  KeyboardShortcut,
-  SEPARATOR_ITEM,
-  getKeyboardShortcutsForMenuItems,
-  styles,
-} from "./internal/Menu";
-
-const DropdownMenuItem = memoGeneric(function ContextMenuItem<
-  T extends string,
->({
-  value,
-  children,
-  onSelect,
-  checked,
-  disabled,
-  indented,
-  icon,
-  items,
-  shortcut,
-}: MenuItemProps<T>) {
-  const handleSelectItem = useCallback(() => {
-    if (!value) return;
-
-    onSelect(value);
-  }, [onSelect, value]);
-
-  if (checked) {
-    return (
-      <RadixDropdownMenu.CheckboxItem
-        checked={checked}
-        disabled={disabled}
-        onSelect={handleSelectItem}
-        className={styles.itemStyle({ disabled })}
-      >
-        <RadixDropdownMenu.ItemIndicator className={styles.itemIndicatorStyle}>
-          <CheckIcon />
-        </RadixDropdownMenu.ItemIndicator>
-        {icon && (
-          <>
-            {renderIcon(icon)}
-            <Spacer.Horizontal size={8} />
-          </>
-        )}
-        {children}
-      </RadixDropdownMenu.CheckboxItem>
-    );
-  }
-
-  const element = (
-    <RadixDropdownMenu.Item
-      disabled={disabled}
-      onSelect={handleSelectItem}
-      className={styles.itemStyle({ disabled })}
-    >
-      {indented && (
-        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
-      )}
-      {icon && (
-        <>
-          {renderIcon(icon)}
-          <Spacer.Horizontal size={8} />
-        </>
-      )}
-      {children}
-      {shortcut && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={24} />
-          <KeyboardShortcut shortcut={shortcut} />
-        </>
-      )}
-      {items && items.length > 0 && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={16} />
-          <ChevronRightIcon />
-        </>
-      )}
-    </RadixDropdownMenu.Item>
-  );
-
-  if (items && items.length > 0) {
-    return (
-      <DropdownMenuRoot
-        isNested
-        items={items}
-        onSelect={onSelect}
-        alignOffset={-5}
-      >
-        {element}
-      </DropdownMenuRoot>
-    );
-  } else {
-    return element;
-  }
-});
+import { MenuProps } from "./ContextMenu";
+import { getKeyboardShortcutsForMenuItems, styles } from "./internal/Menu";
+import { MenuViewport } from "./internal/MenuViewport";
 
 /* ----------------------------------------------------------------------------
  * Root
  * ------------------------------------------------------------------------- */
 
-type DropdownRootProps<T extends string> = MenuProps<T> & {
+export type DropdownRootProps<T extends string> = MenuProps<T> & {
   open?: boolean;
   onCloseAutoFocus?: React.EventHandler<SyntheticEvent<unknown>>;
   emptyState?: React.ReactNode;
+  contentStyle?: React.CSSProperties;
 } & Pick<
     ComponentProps<typeof RadixDropdownMenu.Content>,
     "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
   >;
 
+const Components = {
+  Separator: RadixDropdownMenu.Separator,
+  ItemText: React.Fragment,
+  Item: RadixDropdownMenu.Item,
+  CheckboxItem: RadixDropdownMenu.CheckboxItem,
+  ItemIndicator: RadixDropdownMenu.ItemIndicator,
+  SubTrigger: RadixDropdownMenu.SubTrigger,
+  SubContent: RadixDropdownMenu.SubContent,
+  Sub: RadixDropdownMenu.Sub,
+  Portal: RadixDropdownMenu.Portal,
+};
+
 const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
   T extends string,
->(
-  {
+>(props: DropdownRootProps<T>, forwardedRef: ForwardedRef<HTMLElement>) {
+  const {
     items,
     children,
     onSelect,
-    isNested,
     shouldBindKeyboardShortcuts,
     onOpenChange,
     open,
@@ -142,77 +54,56 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     alignOffset,
     collisionPadding = 8,
     emptyState,
-  }: DropdownRootProps<T>,
-  forwardedRef: ForwardedRef<HTMLElement>
-) {
-  const hasCheckedItem = items.some(
-    (item) => item !== SEPARATOR_ITEM && item.checked
-  );
+    contentStyle,
+  } = props;
 
   const keymap = useMemo(
     () =>
-      isNested || shouldBindKeyboardShortcuts === false
+      shouldBindKeyboardShortcuts === false
         ? {}
         : getKeyboardShortcutsForMenuItems(items, onSelect),
-    [isNested, items, onSelect, shouldBindKeyboardShortcuts]
+    [items, onSelect, shouldBindKeyboardShortcuts]
   );
 
   useKeyboardShortcuts(keymap);
 
-  const RootComponent = isNested
-    ? RadixDropdownMenu.Sub
-    : RadixDropdownMenu.Root;
-  const TriggerComponent = isNested
-    ? RadixDropdownMenu.SubTrigger
-    : RadixDropdownMenu.Trigger;
-  const ContentComponent = isNested
-    ? RadixDropdownMenu.SubContent
-    : RadixDropdownMenu.Content;
-
-  const contentStyle = useMemo(() => ({ zIndex: 1000 }), []);
+  const contentStyles = useMemo(
+    () => ({
+      maxHeight: "500px",
+      overflow: "auto",
+      ...contentStyle,
+    }),
+    [contentStyle]
+  );
 
   return (
-    <RootComponent onOpenChange={onOpenChange} open={open}>
-      <TriggerComponent ref={forwardedRef as ForwardedRef<any>} asChild>
+    <RadixDropdownMenu.Root onOpenChange={onOpenChange} open={open}>
+      <RadixDropdownMenu.Trigger
+        ref={forwardedRef as ForwardedRef<any>}
+        asChild
+      >
         {children}
-      </TriggerComponent>
+      </RadixDropdownMenu.Trigger>
       <RadixDropdownMenu.Portal>
-        <ContentComponent
+        <RadixDropdownMenu.Content
           className={styles.contentStyle}
           side={side}
           sideOffset={sideOffset}
           align={align}
           alignOffset={alignOffset}
-          style={contentStyle}
+          style={contentStyles}
           collisionPadding={collisionPadding}
           {...({ onCloseAutoFocus } as any)}
         >
           {items.length === 0 ? emptyState : null}
-          {items.map((item, index) =>
-            item === SEPARATOR_ITEM ? (
-              <RadixDropdownMenu.Separator
-                key={index}
-                className={styles.separatorStyle}
-              />
-            ) : (
-              <DropdownMenuItem
-                key={item.value ?? index}
-                value={item.value}
-                indented={hasCheckedItem}
-                checked={item.checked ?? false}
-                disabled={item.disabled ?? false}
-                icon={item.icon}
-                onSelect={onSelect}
-                items={item.items}
-                shortcut={item.shortcut}
-              >
-                {item.title}
-              </DropdownMenuItem>
-            )
-          )}
-        </ContentComponent>
+          <MenuViewport
+            items={items}
+            Components={Components}
+            onSelect={onSelect}
+          />
+        </RadixDropdownMenu.Content>
       </RadixDropdownMenu.Portal>
-    </RootComponent>
+    </RadixDropdownMenu.Root>
   );
 });
 

package/src/components/EditableText.tsx

@@ -0,0 +1,203 @@
+import { cx, InputField } from "@noya-app/noya-designsystem";
+import React, {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
+import { BreadcrumbText } from "./Breadcrumbs";
+
+type RenderPreviewProps = {
+  children: string;
+  onClick: () => void;
+  ref: React.Ref<HTMLElement & HTMLAnchorElement & HTMLSpanElement>;
+  tabIndex: number;
+  onKeyDown: (e: React.KeyboardEvent) => void;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+type Props = {
+  value: string;
+  children?: (props: RenderPreviewProps) => React.ReactNode;
+  placeholder?: string;
+  onChange?: (value: string) => void;
+  onSubmit?: (value: string) => void;
+  style?: React.CSSProperties;
+  textStyle?: React.CSSProperties;
+  className?: string;
+  id?: string;
+  disabled?: boolean;
+  focused?: boolean;
+  textClassName?: string;
+  readOnly?: boolean;
+  onBlur?: () => void;
+  /**
+   * If true, will render an unfocused input. This should only be used for visual regression tests.
+   */
+  testFocused?: boolean;
+};
+
+export interface EditableTextRef {
+  startEditing: () => void;
+}
+
+const defaultRenderPreview = (props: RenderPreviewProps) => (
+  <BreadcrumbText {...props} />
+);
+
+export const EditableText = memo(
+  forwardRef(function EditableText(
+    {
+      value,
+      onChange,
+      onSubmit,
+      focused: focusedProp,
+      disabled,
+      style,
+      textStyle,
+      className,
+      textClassName,
+      placeholder,
+      children = defaultRenderPreview,
+      readOnly,
+      onBlur,
+      testFocused = false,
+      ...props
+    }: Props,
+    ref: React.ForwardedRef<EditableTextRef>
+  ) {
+    const [inputValue, setInputValue] = useState(value);
+
+    useEffect(() => {
+      setInputValue(value);
+    }, [value]);
+
+    const [focusedInternal, setFocused] = useState(false);
+    const focused = focusedProp ?? focusedInternal;
+    const inputRef = useRef<HTMLInputElement>(null);
+    const previewRef = useRef<HTMLElement & HTMLAnchorElement>(null);
+
+    const ignoreNextBlur = useRef(false);
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Escape") {
+          setInputValue(value);
+          ignoreNextBlur.current = true;
+        }
+
+        // Enter and Esc both blur the input
+        if (event.key === "Enter" || event.key === "Escape") {
+          inputRef.current?.blur();
+        }
+
+        if (event.key === "Escape") {
+          previewRef.current?.focus();
+        }
+
+        // If tab or shift+tab is pressed, let bubble
+        if (event.key === "Tab") {
+          return;
+        }
+
+        event.stopPropagation();
+      },
+      [value]
+    );
+
+    useImperativeHandle(ref, () => ({
+      startEditing: () => {
+        setFocused(true);
+      },
+    }));
+
+    function focusInput() {
+      inputRef.current?.focus();
+      inputRef.current?.setSelectionRange(0, inputRef.current.value.length);
+    }
+
+    useEffect(() => {
+      if (testFocused) return;
+      if (focused) {
+        // Use a timeout to focus the input after the next render.
+        // The input isn't available even though `focused` was already set to true
+        // must be a delay of 1ms or more to ensure any radix ui components have finished any focus behaviors
+        setTimeout(focusInput, 1);
+      }
+    }, [focused, testFocused]);
+
+    const displayValue = inputValue || placeholder || "";
+
+    const preview = children({
+      children: displayValue,
+      onClick: () => setFocused(true),
+      ref: previewRef,
+      tabIndex: 0,
+      onKeyDown: (e: React.KeyboardEvent) => {
+        if (e.key === "Enter" || e.key === " ") {
+          setFocused(true);
+        }
+      },
+      style: textStyle,
+      className: textClassName,
+    });
+
+    const input = (
+      <div className="flex absolute inset-0 -mx-1.5 -my-1">
+        <InputField.Root onFocusChange={setFocused}>
+          <InputField.Input
+            ref={inputRef}
+            style={{
+              lineHeight: "15px", // Match breadcrumb height
+              ...textStyle,
+            }}
+            className={textClassName}
+            {...props}
+            value={inputValue}
+            placeholder={placeholder}
+            onKeyDown={handleKeyDown}
+            onBlur={() => {
+              setFocused(false);
+
+              if (ignoreNextBlur.current) {
+                ignoreNextBlur.current = false;
+                return;
+              }
+
+              onSubmit?.(inputValue);
+              onBlur?.();
+            }}
+            {...(onChange
+              ? {
+                  onChange: (value) => {
+                    setInputValue(value);
+                    onChange?.(value);
+                  },
+                }
+              : {
+                  onSubmit: (value) => {
+                    setInputValue(value);
+                    onSubmit?.(value);
+                    setFocused(false);
+                  },
+                  onChange: (value) => {
+                    setInputValue(value);
+                  },
+                })}
+          />
+        </InputField.Root>
+      </div>
+    );
+
+    return (
+      <div className={cx("flex relative", className)} style={style}>
+        {preview}
+        {focused && !readOnly && input}
+      </div>
+    );
+  })
+);