@noya-app/noya-designsystem 0.1.94 → 0.1.96

package/src/components/__tests__/ToolbarItems.test.tsx

@@ -0,0 +1,205 @@
+import { afterEach, describe, expect, mock, test } from "bun:test";
+import React from "react";
+import type { ToolbarItem } from "../ToolbarItems";
+
+// `@radix-ui/react-icons` has a nested React 18 copy in node_modules, which
+// creates legacy React elements that React 19 refuses to render under
+// `bun test` (app bundlers alias react, so this only affects tests).
+const actualIcons = await import("@radix-ui/react-icons");
+
+mock.module("@radix-ui/react-icons", () => ({
+  ...Object.fromEntries(
+    Object.keys(actualIcons).map((name) => [
+      name,
+      (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
+    ])
+  ),
+}));
+
+const { cleanup, fireEvent, render } = await import("@testing-library/react");
+const { Toolbar } = await import("../Toolbar");
+const { ToolbarItems } = await import("../ToolbarItems");
+
+afterEach(cleanup);
+
+type Tool = "select" | "hand" | "rectangle" | "oval" | "text";
+
+const makeItems = (checked?: Tool): ToolbarItem<Tool>[] => [
+  {
+    type: "group",
+    id: "move",
+    items: [
+      {
+        title: "Move",
+        value: "select",
+        icon: "CursorArrowIcon",
+        shortcut: "V",
+        checked: checked === "select",
+      },
+      {
+        title: "Hand",
+        value: "hand",
+        icon: "HandIcon2",
+        shortcut: "H",
+        checked: checked === "hand",
+      },
+    ],
+  },
+  {
+    type: "group",
+    id: "shape",
+    items: [
+      {
+        title: "Rectangle",
+        value: "rectangle",
+        icon: "SquareIcon",
+        shortcut: "R",
+        checked: checked === "rectangle",
+      },
+      {
+        title: "Ellipse",
+        value: "oval",
+        icon: "CircleIcon",
+        checked: checked === "oval",
+      },
+    ],
+  },
+  { type: "separator" },
+  {
+    title: "Text",
+    value: "text",
+    icon: "TextIcon",
+    shortcut: "T",
+    checked: checked === "text",
+  },
+];
+
+describe("ToolbarItems", () => {
+  test("renders selectable items, groups, and separators", () => {
+    const { getByRole, container } = render(
+      <Toolbar aria-label="Tools" size="small">
+        <Toolbar.Items items={makeItems()} onSelect={() => {}} />
+      </Toolbar>
+    );
+
+    expect(getByRole("button", { name: "Text" })).toBeTruthy();
+    // Group slots show the representative (first child) plus a chevron
+    expect(getByRole("button", { name: "Move" })).toBeTruthy();
+    expect(getByRole("button", { name: "Move tools" })).toBeTruthy();
+    expect(getByRole("button", { name: "Rectangle" })).toBeTruthy();
+    // Separator renders the vertical divider
+    expect(container.querySelectorAll(".n-w-px.n-bg-divider").length).toBe(1);
+  });
+
+  test("checked item gets the primary active treatment", () => {
+    const { getByRole } = render(
+      <ToolbarItems items={makeItems("text")} onSelect={() => {}} />
+    );
+
+    const text = getByRole("button", { name: "Text" });
+    expect(text.getAttribute("aria-pressed")).toBe("true");
+    expect(text.classList.contains("n-bg-primary")).toBe(true);
+    expect(text.classList.contains("n-text-white")).toBe(true);
+
+    const move = getByRole("button", { name: "Move" });
+    expect(move.getAttribute("aria-pressed")).toBe("false");
+    expect(move.classList.contains("n-bg-primary")).toBe(false);
+  });
+
+  test("checked child becomes the group representative and marks the group active", () => {
+    const { getByRole, queryByRole } = render(
+      <ToolbarItems items={makeItems("hand")} onSelect={() => {}} />
+    );
+
+    const hand = getByRole("button", { name: "Hand" });
+    expect(hand.getAttribute("aria-pressed")).toBe("true");
+    expect(hand.classList.contains("n-bg-primary")).toBe(true);
+    // The unchecked sibling no longer occupies the slot
+    expect(queryByRole("button", { name: "Move" })).toBeNull();
+  });
+
+  test("group remembers the last-used child when the check moves elsewhere", () => {
+    const { getByRole, queryByRole, rerender } = render(
+      <ToolbarItems items={makeItems("oval")} onSelect={() => {}} />
+    );
+
+    expect(getByRole("button", { name: "Ellipse" })).toBeTruthy();
+
+    // Check moves to another group: the shape slot keeps showing Ellipse,
+    // now inactive, instead of resetting to Rectangle.
+    rerender(<ToolbarItems items={makeItems("select")} onSelect={() => {}} />);
+
+    const ellipse = getByRole("button", { name: "Ellipse" });
+    expect(ellipse.getAttribute("aria-pressed")).toBe("false");
+    expect(ellipse.classList.contains("n-bg-primary")).toBe(false);
+    expect(queryByRole("button", { name: "Rectangle" })).toBeNull();
+  });
+
+  test("selecting the group representative fires onSelect with its value", () => {
+    const onSelect = mock((_value: Tool) => {});
+    const { getByRole } = render(
+      <ToolbarItems items={makeItems()} onSelect={onSelect} />
+    );
+
+    fireEvent.click(getByRole("button", { name: "Rectangle" }));
+    expect(onSelect).toHaveBeenCalledWith("rectangle");
+
+    fireEvent.click(getByRole("button", { name: "Text" }));
+    expect(onSelect).toHaveBeenCalledWith("text");
+  });
+
+  test("disabled items render disabled and don't fire onSelect", () => {
+    const onSelect = mock((_value: Tool) => {});
+    const items: ToolbarItem<Tool>[] = [
+      {
+        title: "Text",
+        value: "text",
+        icon: "TextIcon",
+        disabled: true,
+      },
+    ];
+    const { getByRole } = render(
+      <ToolbarItems items={items} onSelect={onSelect} />
+    );
+
+    const text = getByRole("button", { name: "Text" }) as HTMLButtonElement;
+    expect(text.disabled).toBe(true);
+    expect(text.classList.contains("n-opacity-30")).toBe(true);
+    fireEvent.click(text);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  test("fully disabled group disables its chevron", () => {
+    const items: ToolbarItem<Tool>[] = [
+      {
+        type: "group",
+        id: "shape",
+        items: [
+          {
+            title: "Rectangle",
+            value: "rectangle",
+            icon: "SquareIcon",
+            disabled: true,
+          },
+          {
+            title: "Ellipse",
+            value: "oval",
+            icon: "CircleIcon",
+            disabled: true,
+          },
+        ],
+      },
+    ];
+    const { getByRole } = render(
+      <ToolbarItems items={items} onSelect={() => {}} />
+    );
+
+    expect(
+      (getByRole("button", { name: "Rectangle" }) as HTMLButtonElement).disabled
+    ).toBe(true);
+    expect(
+      (getByRole("button", { name: "Rectangle tools" }) as HTMLButtonElement)
+        .disabled
+    ).toBe(true);
+  });
+});

package/src/components/internal/Menu.tsx

@@ -207,8 +207,11 @@ export const styles = {
       marginRight: -CHECKBOX_RIGHT_INSET,
     },
   },
+  // n-outline-none: the popup itself can take focus (e.g. a right-click
+  // context menu) and the browser's default focus outline reads as a stray
+  // black border on the light surface; keyboard focus is shown on items.
   contentStyle:
-    "n-rounded n-bg-popover-background n-text-text n-shadow-popover n-z-menu n-py-1",
+    "n-rounded n-bg-popover-background n-text-text n-shadow-popover n-z-menu n-py-1 n-outline-none",
 };
 
 function getKeyboardShortcuts<T extends string>(

package/src/components/internal/TextInput.tsx

@@ -173,7 +173,14 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
 
     isSubmitTriggeredByEscapeKey.current = false;
 
-    if (submissionValue === value && !allowSubmittingWithSameValue) return;
+    if (submissionValue === value && !allowSubmittingWithSameValue) {
+      // Nothing to commit — revert any in-progress edit so the displayed
+      // text matches the committed value (Escape-then-blur must not leave
+      // the abandoned text in the field, where the next blur would commit it).
+      userDidEdit.current = false;
+      setInternalValue(latestValue.current);
+      return;
+    }
 
     onSubmit(submissionValue);
 
@@ -200,12 +207,20 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
       } else if (event.key === "Escape") {
         isSubmitTriggeredByEscapeKey.current = true;
 
+        // An in-progress edit consumes the Escape: it only reverts the field.
+        // A second Escape (no pending edit) is left to outer handlers
+        // (popover close, canvas deselect...).
+        if (internalValue !== value) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
         ref.current?.blur();
       } else {
         onKeyDown?.(event);
       }
     },
-    [onKeyDown, handleSubmit]
+    [onKeyDown, handleSubmit, internalValue, value]
   );
 
   const handleChange = useCallback(
@@ -230,15 +245,39 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
     [onBlur, onFocusChange, handleSubmit, submitOnBlur]
   );
 
+  // Select the whole value on pointer-initiated focus so typing replaces it
+  // (Figma numeric-field behavior; Tab focus already selects natively). The
+  // select() runs in the focus handler, and the focusing click's mouseup gets
+  // a one-shot preventDefault so caret placement doesn't collapse the
+  // selection. Clicks in an already-focused field keep normal caret behavior.
+  const isFocusingFromPointer = useRef(false);
+
+  const handleMouseDown = useCallback((event: React.MouseEvent) => {
+    if (document.activeElement !== event.currentTarget) {
+      isFocusingFromPointer.current = true;
+    }
+  }, []);
+
   const handleFocusCapture = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
       onFocusCapture?.(event);
 
       onFocusChange?.(true);
+
+      if (isFocusingFromPointer.current) {
+        event.currentTarget.select();
+      }
     },
     [onFocusCapture, onFocusChange]
   );
 
+  const handleMouseUp = useCallback((event: React.MouseEvent) => {
+    if (!isFocusingFromPointer.current) return;
+
+    isFocusingFromPointer.current = false;
+    event.preventDefault();
+  }, []);
+
   const autoSubmitTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
     null
   );
@@ -276,6 +315,8 @@ const SubmittableTextInput = forwardRef(function SubmittableTextInput(
       onChange={handleChange}
       onBlur={handleBlur}
       onFocusCapture={handleFocusCapture}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
     />
   );
 });

package/src/components/internal/__tests__/TextInput.test.tsx

@@ -27,7 +27,7 @@ describe("submittable text input", () => {
   });
 
   test("change and blur, reset", () => {
-    const handleSubmit = (value: string) => {};
+    const handleSubmit = (_value: string) => {};
 
     const { container, rerender } = render(
       <TextInput value="" onSubmit={handleSubmit} />
@@ -90,7 +90,7 @@ describe("submittable text input", () => {
   });
 
   test("change and submit, reset", () => {
-    const handleSubmit = (value: string) => {};
+    const handleSubmit = (_value: string) => {};
 
     const { container, rerender } = render(
       <TextInput value="" onSubmit={handleSubmit} />
@@ -142,4 +142,81 @@ describe("submittable text input", () => {
 
     expect(handleSubmit).toBeCalledTimes(3);
   });
+
+  test("escape reverts an in-progress edit without submitting", () => {
+    const handleSubmit = mock(() => {});
+
+    const { container } = render(
+      <TextInput value="90" onSubmit={handleSubmit} />
+    );
+
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "555" } });
+    fireEvent.keyDown(input, { key: "Escape", code: "Escape" });
+    // Escape blurs the field; the blur must not commit the abandoned edit.
+    fireEvent.blur(input);
+
+    expect(handleSubmit).not.toBeCalled();
+    expect(input.value).toEqual("90");
+  });
+
+  test("blur after an escape-revert does not resurrect the abandoned edit", () => {
+    const handleSubmit = mock(() => {});
+
+    const { container } = render(
+      <TextInput value="90" onSubmit={handleSubmit} />
+    );
+
+    const input = container.querySelector("input")!;
+    fireEvent.change(input, { target: { value: "555" } });
+    fireEvent.keyDown(input, { key: "Escape", code: "Escape" });
+    fireEvent.blur(input);
+    // A later focus + blur cycle with no new edit stays a no-op.
+    fireEvent.focus(input);
+    fireEvent.blur(input);
+
+    expect(handleSubmit).not.toBeCalled();
+    expect(input.value).toEqual("90");
+  });
+
+  test("escape with an in-progress edit consumes the event; a clean escape propagates", () => {
+    const outerKeyDown = mock(() => {});
+
+    const { container } = render(
+      <div onKeyDown={outerKeyDown}>
+        <TextInput value="90" onSubmit={() => {}} />
+      </div>
+    );
+
+    const input = container.querySelector("input")!;
+
+    // No edit in progress: Escape is left to outer handlers (deselect,
+    // popover close...).
+    fireEvent.keyDown(input, { key: "Escape", code: "Escape" });
+    expect(outerKeyDown).toBeCalledTimes(1);
+
+    // Edit in progress: Escape only reverts the field.
+    fireEvent.change(input, { target: { value: "555" } });
+    fireEvent.keyDown(input, { key: "Escape", code: "Escape" });
+    expect(outerKeyDown).toBeCalledTimes(1);
+  });
+
+  test("pointer-initiated focus selects the whole value", () => {
+    const { container } = render(
+      <TextInput value="1440" onSubmit={() => {}} />
+    );
+
+    const input = container.querySelector("input")!;
+    fireEvent.mouseDown(input);
+    fireEvent.focus(input);
+
+    expect(input.selectionStart).toEqual(0);
+    expect(input.selectionEnd).toEqual(4);
+
+    // The mouseup that completes the focusing click must not collapse the
+    // selection (the handler preventDefaults exactly once).
+    fireEvent.mouseUp(input);
+    expect(input.selectionStart).toEqual(0);
+    expect(input.selectionEnd).toEqual(4);
+  });
 });

package/src/components/listView/ListViewEditableRowTitle.tsx

@@ -29,6 +29,42 @@ export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
   selectBeforeDot = false,
 }: EditableRowTitleProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
+  const submittedRef = useRef(false);
+
+  const handleSubmitEditing = (nextValue: string) => {
+    if (submittedRef.current) return;
+    submittedRef.current = true;
+    onSubmitEditing(nextValue);
+  };
+  const handleSubmitEditingRef = useRef(handleSubmitEditing);
+  handleSubmitEditingRef.current = handleSubmitEditing;
+
+  // Commit and close on any pointerdown outside the editor. Blur alone isn't
+  // enough: interactions that call preventDefault() on pointerdown (e.g. a
+  // canvas) never move focus, which would strand an open rename editor.
+  useLayoutEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      const element = inputRef.current;
+      if (!element) return;
+      if (
+        event.target instanceof Node &&
+        (element === event.target || element.contains(event.target))
+      ) {
+        return;
+      }
+      handleSubmitEditingRef.current(element.value);
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown, {
+      capture: true,
+    });
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, {
+        capture: true,
+      });
+    };
+  }, []);
 
   useLayoutEffect(() => {
     const element = inputRef.current;
@@ -65,7 +101,7 @@ export const ListViewEditableRowTitle = memo(function ListViewEditableRowTitle({
       ref={inputRef}
       value={value}
       placeholder={placeholder}
-      onSubmit={onSubmitEditing}
+      onSubmit={handleSubmitEditing}
       allowSubmittingWithSameValue
       className={cx(
         "-n-mx-input-padding-x -n-my-1 n-bg-listview-editing-background",

package/src/components/listView/ListViewRow.tsx

@@ -105,6 +105,9 @@ const RowContainer = forwardRef<
           $clickable ? "n-cursor-pointer" : "n-cursor-default",
           $isSectionHeader && "n-bg-listview-raised-background",
           "n-flex n-flex-[0_0_auto] n-select-none n-items-center n-relative",
+          // Rows own their focus styling: the standard primary ring for
+          // keyboard focus instead of the UA default black outline.
+          "n-outline-none focus-visible:n-ring-1 focus-visible:n-ring-primary focus-visible:n-ring-inset",
           className
         )}
         style={{

package/src/components/listView/__tests__/ListViewEditableRowTitle.test.tsx

@@ -0,0 +1,69 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, describe, expect, test } from "bun:test";
+import React from "react";
+import { ListViewEditableRowTitle } from "../ListViewEditableRowTitle";
+
+afterEach(cleanup);
+
+describe("ListViewEditableRowTitle", () => {
+  test("commits and closes on pointerdown outside the editor", () => {
+    // Regression: interactions that preventDefault() their pointerdown (e.g.
+    // a canvas) never blur the input, which used to strand an open rename
+    // editor across later interactions.
+    const submissions: string[] = [];
+
+    const { container } = render(
+      <div>
+        <ListViewEditableRowTitle
+          value="Rectangle"
+          autoFocus={false}
+          onSubmitEditing={(value) => submissions.push(value)}
+        />
+        <button>outside</button>
+      </div>
+    );
+
+    const outside = container.querySelector("button")!;
+    fireEvent.pointerDown(outside);
+
+    expect(submissions).toEqual(["Rectangle"]);
+  });
+
+  test("pointerdown inside the editor does not submit", () => {
+    const submissions: string[] = [];
+
+    const { container } = render(
+      <ListViewEditableRowTitle
+        value="Rectangle"
+        autoFocus={false}
+        onSubmitEditing={(value) => submissions.push(value)}
+      />
+    );
+
+    const input = container.querySelector("input")!;
+    fireEvent.pointerDown(input);
+
+    expect(submissions).toEqual([]);
+  });
+
+  test("submits at most once", () => {
+    const submissions: string[] = [];
+
+    const { container } = render(
+      <div>
+        <ListViewEditableRowTitle
+          value="Rectangle"
+          autoFocus={false}
+          onSubmitEditing={(value) => submissions.push(value)}
+        />
+        <button>outside</button>
+      </div>
+    );
+
+    const outside = container.querySelector("button")!;
+    fireEvent.pointerDown(outside);
+    fireEvent.pointerDown(outside);
+
+    expect(submissions).toEqual(["Rectangle"]);
+  });
+});

package/src/components/sorting/Sortable.tsx

@@ -186,7 +186,10 @@ function SortableItem<TElement extends HTMLElement>({
       ref,
       ...attributes,
       ...listeners,
-      style: { opacity: isDragging ? 0.5 : 1 },
+      // Only set an inline opacity while dragging — an always-on inline
+      // `opacity: 1` would override class-based opacity styling on rows
+      // (e.g. dimmed hidden layers).
+      ...(isDragging ? { style: { opacity: 0.5 } } : {}),
     }),
     [ref, attributes, listeners, isDragging]
   );

package/src/index.tsx

@@ -128,7 +128,6 @@ export { default as withSeparatorElements } from "./utils/withSeparatorElements"
 
 // Avoid dependency cycles
 export * from "./components/DimensionInput";
-export * as InspectorPrimitives from "./components/InspectorPrimitives";
 
 export * from "./components/BaseToolbar";
 export * from "./components/AppToolbar";

package/src/utils/combobox.ts

@@ -11,7 +11,15 @@ import {
   SectionHeaderMenuItem,
   SelectableMenuItem,
 } from "../components/internal/Menu";
-import { fuzzyFilter, IScoredItem } from "./fuzzyScorer";
+import { fuzzyFilter, IScoredItem, wordPrefixFilter } from "./fuzzyScorer";
+
+/**
+ * How a combobox matches its filter text against item titles:
+ * - "fuzzy": vscode-style fuzzy scoring (default)
+ * - "wordPrefix": word-boundary prefixes ranked exact > prefix > word-start,
+ *   substring only as a fallback (right for name lists like font families)
+ */
+export type ComboboxFilterStrategy = "fuzzy" | "wordPrefix";
 
 export type ComboboxStateSnapshot<T extends string> = {
   filter: string;
@@ -29,11 +37,15 @@ export class ComboboxState<T extends string> {
   private version = 0;
   private _cachedSnapshot: [number, ComboboxStateSnapshot<T>] | undefined;
 
+  private filterStrategy: ComboboxFilterStrategy;
+
   constructor(
     items: MenuItem<T>[],
     initialTitle: string,
-    allowArbitraryValues: boolean
+    allowArbitraryValues: boolean,
+    filterStrategy: ComboboxFilterStrategy = "fuzzy"
   ) {
+    this.filterStrategy = filterStrategy;
     this.items = items;
     this.lastSubmittedValue = {
       filter: initialTitle,
@@ -122,7 +134,9 @@ export class ComboboxState<T extends string> {
   }
 
   private getFilteredItems(): ScoredMenuItem<T>[] {
-    return filterWithGroupedSections(this.items, this.filter);
+    return filterWithGroupedSections(this.items, this.filter, {
+      filterStrategy: this.filterStrategy,
+    });
   }
 
   getSnapshot = (): ComboboxStateSnapshot<T> => {
@@ -300,8 +314,11 @@ export class ComboboxState<T extends string> {
 
 export function filterWithGroupedSections<T extends string>(
   items: MenuItem<T>[],
-  query: string
+  query: string,
+  options: { filterStrategy?: ComboboxFilterStrategy } = {}
 ): ScoredMenuItem<T>[] {
+  const filterItems =
+    options.filterStrategy === "wordPrefix" ? wordPrefixFilter : fuzzyFilter;
   const sections = chunkBy(items, (_a, b) => isSelectableMenuItem(b));
   let result: ScoredMenuItem<T>[] = [];
   let currentIndex = 0;
@@ -344,7 +361,7 @@ export function filterWithGroupedSections<T extends string>(
         createExtraItem(item, index)
       );
     } else {
-      const scoredItems = fuzzyFilter({
+      const scoredItems = filterItems({
         items: selectableItems.map((item) => {
           const title = item.title?.toString?.() ?? "";
           const tooltipText = getNodeText(item.tooltip);