@noya-app/noya-designsystem 0.1.45 → 0.1.47

package/src/components/Combobox.tsx

@@ -1,9 +1,8 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
   FocusEventHandler,
   ForwardedRef,
-  forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -13,24 +12,26 @@ import React, {
 } from "react";
 import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import {
-  ComboboxItem,
-  ComboboxOption,
-  ComboboxState,
-  InternalComboboxItem,
-  useComboboxState,
-} from "../utils/combobox";
+import { ComboboxState, useComboboxState } from "../utils/combobox";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ComboboxMenu } from "./ComboboxMenu";
 import { InputField, InputFieldSize } from "./InputField";
+import {
+  MenuItem,
+  ScoredMenuItem,
+  SelectableMenuItem,
+  isMenuItemSectionHeader,
+  isNonSelectableMenuItem,
+  isSelectableMenuItem,
+} from "./internal/Menu";
 import { ListView } from "./ListView";
 import { Small } from "./Text";
 
-export type BaseComboboxProps = {
+export type BaseComboboxProps<T extends string> = {
   id?: string;
   loading?: boolean;
   placeholder?: string;
-  items: ComboboxItem[];
+  items: MenuItem<T>[];
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onDeleteWhenEmpty?: () => void;
   size?: InputFieldSize;
@@ -54,30 +55,34 @@ export type StringModeOnlyProps = {
   allowArbitraryValues?: boolean;
 };
 
-export type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
+export type StringModeProps<T extends string> = BaseComboboxProps<T> &
+  StringModeOnlyProps;
 
-export type OptionModeOnlyProps = {
+export type OptionModeOnlyProps<T extends string> = {
   mode?: "option";
-  value?: ComboboxOption;
-  onChange?: (value: ComboboxOption) => void;
-  onSelectItem?: (value: ComboboxOption) => void;
-  onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
-  onHoverItem?: (value: ComboboxOption | undefined) => void;
+  value?: SelectableMenuItem<T>;
+  onChange?: (value: SelectableMenuItem<T>) => void;
+  onSelectItem?: (value: SelectableMenuItem<T>) => void;
+  onBlur?: (didSubmit: boolean, value: SelectableMenuItem<T>) => void;
+  onHoverItem?: (value: SelectableMenuItem<T> | undefined) => void;
   allowArbitraryValues?: false;
 };
 
-export type OptionModeProps = BaseComboboxProps & OptionModeOnlyProps;
+export type OptionModeProps<T extends string> = BaseComboboxProps<T> &
+  OptionModeOnlyProps<T>;
 
-export type ComboboxProps = StringModeProps | OptionModeProps;
+export type ComboboxProps<T extends string> =
+  | StringModeProps<T>
+  | OptionModeProps<T>;
 
-export interface ComboboxRef {
+export interface ComboboxRef<T extends string> {
   focus(): void;
-  setValue(value: string | ComboboxOption): void;
+  setValue(value: string | SelectableMenuItem<T>): void;
   selectAllInputText(): void;
 }
 
-export const Combobox = memo(
-  forwardRef(function Combobox(
+export const Combobox = memoGeneric(
+  forwardRefGeneric(function Combobox<T extends string>(
     {
       loading,
       placeholder,
@@ -94,12 +99,12 @@ export const Combobox = memo(
       onFocus,
       onDeleteWhenEmpty,
       ...rest
-    }: ComboboxProps,
-    forwardedRef: ForwardedRef<ComboboxRef>
+    }: ComboboxProps<T>,
+    forwardedRef: ForwardedRef<ComboboxRef<T>>
   ) {
     // We make a separate props object for the mode-specific props for memoizing
     // since we put the props object into hook deps
-    const props = useMemo((): StringModeOnlyProps | OptionModeOnlyProps => {
+    const props = useMemo((): StringModeOnlyProps | OptionModeOnlyProps<T> => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -118,7 +123,7 @@ export const Combobox = memo(
           onSelectItem: rest.onSelectItem,
           onHoverItem: rest.onHoverItem,
           onBlur: rest.onBlur,
-        } satisfies OptionModeOnlyProps;
+        } satisfies OptionModeOnlyProps<T>;
       }
     }, [
       rest.mode,
@@ -136,7 +141,7 @@ export const Combobox = memo(
       if (props.mode === "string") {
         return props.value ?? "";
       } else {
-        return props.value?.name ?? "";
+        return props.value?.title?.toString() ?? "";
       }
     }
 
@@ -188,7 +193,7 @@ export const Combobox = memo(
         );
       } else {
         const selectedItem = comboboxState.getSelectedItem();
-        if (selectedItem && selectedItem.type !== "sectionHeader") {
+        if (selectedItem && isSelectableMenuItem(selectedItem)) {
           props.onBlur?.(
             state.filter === state.lastSubmittedValue.filter,
             selectedItem
@@ -214,14 +219,14 @@ export const Combobox = memo(
     );
 
     const handleUpdateSelection = useCallback(
-      (item: InternalComboboxItem) => {
-        if (item.type === "sectionHeader") return;
+      (item: ScoredMenuItem<T>) => {
+        if (item.type !== undefined) return;
 
         const selectedItem = comboboxState.selectCurrentItem(item);
-        if (!selectedItem || selectedItem.type === "sectionHeader") return;
+        if (!selectedItem) return;
 
         if (props.mode === "string") {
-          props.onSelectItem?.(selectedItem.name);
+          props.onSelectItem?.(selectedItem.value);
           props.onHoverItem?.(undefined);
         } else {
           props.onSelectItem?.(selectedItem);
@@ -236,9 +241,9 @@ export const Combobox = memo(
       (index: number) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
-        if (item && item.type !== "sectionHeader") {
+        if (item && isSelectableMenuItem(item)) {
           if (props.mode === "string") {
-            props.onHoverItem?.(item.name);
+            props.onHoverItem?.(item.value);
           } else {
             props.onHoverItem?.(item);
           }
@@ -257,7 +262,7 @@ export const Combobox = memo(
           props.onChange?.(value);
         } else {
           const selectedItem = comboboxState.getSelectedItem();
-          if (selectedItem && selectedItem.type !== "sectionHeader") {
+          if (selectedItem && isSelectableMenuItem(selectedItem)) {
             props.onChange?.(selectedItem);
           }
         }
@@ -311,14 +316,17 @@ export const Combobox = memo(
               } else {
                 // In autocomplete mode:
                 // 1. Always set the filter to the selected item
-                // 2. If the filter matches the item name, submit it
+                // 2. If the filter matches the item value, submit it
                 event.preventDefault();
                 event.stopPropagation();
-                if (item.name === filter) {
-                  handleUpdateSelection(item);
-                } else {
-                  comboboxState.setFilter(item.name);
-                  ref.current?.focus();
+                if (isNonSelectableMenuItem(item)) return;
+                if (isSelectableMenuItem(item)) {
+                  if (item.value === filter) {
+                    handleUpdateSelection(item);
+                  } else {
+                    comboboxState.setFilter(item.value?.toString() ?? "");
+                    ref.current?.focus();
+                  }
                 }
                 handled = true;
               }
@@ -377,11 +385,11 @@ export const Combobox = memo(
           ref.current.setSelectionRange(length, length);
         }
       },
-      setValue: (value: string | ComboboxOption) => {
+      setValue: (value: string | SelectableMenuItem<T>) => {
         if (typeof value === "string") {
           comboboxState.setFilter(value);
         } else {
-          comboboxState.setFilter(value.name);
+          comboboxState.setFilter(value.value);
         }
       },
       selectAllInputText: () => {
@@ -421,6 +429,18 @@ export const Combobox = memo(
       handleBlur();
     }, [shouldBlur, handleBlur]);
 
+    const { sectionHeaderCount, menuItemsCount } = useMemo(
+      () => ({
+        sectionHeaderCount: filteredItems.filter((item) =>
+          isMenuItemSectionHeader(item)
+        ).length,
+        menuItemsCount: filteredItems.filter((item) =>
+          isSelectableMenuItem(item)
+        ).length,
+      }),
+      [filteredItems]
+    );
+
     return (
       <InputField.Root
         id={id}
@@ -428,13 +448,10 @@ export const Combobox = memo(
         sideOffset={6}
         renderPopoverContent={({ width }) => {
           const height = Math.min(
-            ListView.calculateHeight(
-              filteredItems.filter((item) => item.type !== "sectionHeader")
-                .length,
-              filteredItems.filter((item) => item.type === "sectionHeader")
-                .length,
-              "label"
-            ),
+            ListView.calculateHeight({
+              menuItemsCount,
+              sectionHeaderCount,
+            }),
             ListView.rowHeight * 10.5
           );
 

package/src/components/ComboboxMenu.tsx

@@ -1,25 +1,32 @@
 import { Size } from "@noya-app/noya-geometry";
 import { CheckIcon } from "@noya-app/noya-icons";
-import React, { ForwardedRef, forwardRef, memo } from "react";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import React, { ForwardedRef } from "react";
 import { cx } from "../utils/classNames";
-import { InternalComboboxItem } from "../utils/combobox";
+
 import { fuzzyTokenize } from "../utils/fuzzyScorer";
 import { renderIcon } from "./Icons";
 import { IVirtualizedList, ListView } from "./ListView";
 import { Spacer } from "./Spacer";
-import { KeyboardShortcut, styles } from "./internal/Menu";
+import {
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  KeyboardShortcut,
+  ScoredMenuItem,
+  styles,
+} from "./internal/Menu";
 
-interface ComboboxMenuProps {
-  items: InternalComboboxItem[];
+interface ComboboxMenuProps<T extends string> {
+  items: ScoredMenuItem<T>[];
   selectedIndex: number;
-  onSelectItem: (item: InternalComboboxItem) => void;
+  onSelectItem: (item: ScoredMenuItem<T>) => void;
   onHoverIndex: (index: number) => void;
   listSize: Size;
   style?: React.CSSProperties;
 }
 
-export const ComboboxMenu = memo(
-  forwardRef(function ComboboxMenu(
+export const ComboboxMenu = memoGeneric(
+  forwardRefGeneric(function ComboboxMenu<T extends string>(
     {
       items,
       selectedIndex,
@@ -27,14 +34,22 @@ export const ComboboxMenu = memo(
       onHoverIndex,
       listSize,
       style,
-    }: ComboboxMenuProps,
+    }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
+    const hasCheckedItems = items
+      .filter((item) => item.type === undefined)
+      .some((item) => item.checked);
+
     return (
       <ListView.Root
         ref={forwardedRef}
         scrollable
-        keyExtractor={(item) => item.id}
+        keyExtractor={(item: ScoredMenuItem<T>) => {
+          if (item.type === "sectionHeader") return item.id;
+
+          return item.value;
+        }}
         data={items}
         virtualized={listSize}
         pressEventName="onPointerDown"
@@ -44,19 +59,19 @@ export const ComboboxMenu = memo(
           if (item.type === "sectionHeader") {
             return (
               <ListView.Row key={item.id} isSectionHeader>
-                {item.name}
+                {item.title}
               </ListView.Row>
             );
           }
 
           const tokens = fuzzyTokenize({
-            item: item.name,
+            item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item,
           });
 
           return (
             <ListView.Row
-              key={item.id}
+              key={item.value}
               selected={i === selectedIndex}
               disabled={item.disabled}
               onPress={() => !item.disabled && onSelectItem(item)}
@@ -66,18 +81,22 @@ export const ComboboxMenu = memo(
                 }
               }}
             >
-              <div className="flex flex-1 items-center">
-                {item.checked && (
+              <div className="flex flex-1 min-w-0 items-center">
+                {item.checked ? (
                   <div className={styles.itemIndicatorStyle}>
                     <CheckIcon />
                   </div>
-                )}
+                ) : hasCheckedItems ? (
+                  <Spacer.Horizontal
+                    size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET}
+                  />
+                ) : null}
                 {tokens.map((token, j) => (
                   <span
-                    key={`${item.id}-token-${j}`}
+                    key={`${item.value}-token-${j}`}
                     className={cx(
                       token.type === "match" ? "font-bold" : "font-normal",
-                      "whitespace-pre"
+                      "whitespace-pre truncate"
                     )}
                   >
                     {token.text}
@@ -86,7 +105,6 @@ export const ComboboxMenu = memo(
               </div>
               {(item.shortcut || item.icon) && (
                 <>
-                  <Spacer.Horizontal />
                   {item.shortcut ? (
                     <KeyboardShortcut shortcut={item.shortcut} />
                   ) : (

package/src/components/Dialog.tsx

@@ -70,20 +70,6 @@ const StyledDescription = forwardRef<
   />
 ));
 
-const CloseButtonContainer = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      `absolute top-dialog-padding right-dialog-padding z-[1] bg-popover-background p-[4px_6px] rounded-[2px] border border-[rgba(128,128,128,0.2)] `,
-      className
-    )}
-    {...props}
-  />
-));
-
 export interface IDialog {
   containsElement: (element: HTMLElement) => boolean;
 }
@@ -141,11 +127,17 @@ export const Dialog = forwardRef(function Dialog(
         })}
       >
         {showCloseButton && (
-          <CloseButtonContainer>
-            <DialogPrimitive.Close asChild>
-              <IconButton iconName="Cross1Icon" />
-            </DialogPrimitive.Close>
-          </CloseButtonContainer>
+          <DialogPrimitive.Close asChild>
+            <IconButton
+              iconName="Cross1Icon"
+              className="z-[1]"
+              style={{
+                position: "absolute",
+                top: "var(--dialog-padding)",
+                right: "var(--dialog-padding)",
+              }}
+            />
+          </DialogPrimitive.Close>
         )}
         {title && (
           <>

package/src/components/DropdownMenu.tsx

@@ -44,7 +44,6 @@ const DropdownMenuRoot = forwardRefGeneric(function DropdownMenuRoot<
     items,
     children,
     onSelect,
-
     shouldBindKeyboardShortcuts,
     onOpenChange,
     open,

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>
+    );
+  })
+);