@noya-app/noya-designsystem 0.1.45 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.45",
+  "version": "0.1.47",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -23,9 +23,9 @@
     "@dnd-kit/core": "3.1.1",
     "@dnd-kit/modifiers": "3.0.0",
     "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.16",
+    "@noya-app/noya-colorpicker": "0.1.17",
     "@noya-app/noya-utils": "0.1.3",
-    "@noya-app/noya-geometry": "0.1.6",
+    "@noya-app/noya-geometry": "0.1.7",
     "@noya-app/noya-icons": "0.1.6",
     "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",

package/src/__tests__/combobox.test.ts

@@ -1,20 +1,24 @@
 import { expect, test } from "bun:test";
-import { ComboboxOption, ComboboxState } from "../utils/combobox";
-import { IScoredItem } from "../utils/fuzzyScorer";
-
-const testItems = [
-  { id: "1", name: "font-bold" },
-  { id: "2", name: "font-italic" },
-  { id: "3", name: "font-regular" },
+import {
+  isSelectableMenuItem,
+  isSelectableMenuItemWithScore,
+  MenuItem,
+} from "../components/internal/Menu";
+import { ComboboxState } from "../utils/combobox";
+
+const testItems: MenuItem<string>[] = [
+  { value: "1", title: "font-bold" },
+  { value: "2", title: "font-italic" },
+  { value: "3", title: "font-regular" },
   {
     type: "sectionHeader" as const,
     id: "header1",
-    name: "Border Styles",
+    title: "Border Styles",
     maxVisibleItems: 2,
   },
-  { id: "4", name: "border-solid" },
-  { id: "5", name: "border-dashed" },
-  { id: "6", name: "border-dotted" },
+  { value: "4", title: "border-solid" },
+  { value: "5", title: "border-dashed" },
+  { value: "6", title: "border-dotted" },
 ];
 
 test("initializes with default values", () => {
@@ -38,7 +42,8 @@ test("filters items based on query", () => {
   expect(snapshot.filteredItems).toHaveLength(3);
   expect(
     snapshot.filteredItems.every(
-      (item) => item.type !== "sectionHeader" && item.name.includes("font")
+      (item) =>
+        isSelectableMenuItem(item) && item.title?.toString().includes("font")
     )
   ).toBe(true);
 });
@@ -53,11 +58,16 @@ test("respects section header maxVisibleItems", () => {
   // 2. Only 2 items (maxVisibleItems) from that section
   expect(snapshot.filteredItems).toHaveLength(3);
   expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
-  expect(snapshot.filteredItems[0].name).toBe("Border Styles");
+  expect(snapshot.filteredItems[0].title).toBe("Border Styles");
 
   const items = snapshot.filteredItems.slice(1);
   expect(items).toHaveLength(2); // maxVisibleItems is 2
-  expect(items.every((item) => item.name.includes("border"))).toBe(true);
+  expect(
+    items.every(
+      (item) =>
+        isSelectableMenuItem(item) && item.title?.toString().includes("border")
+    )
+  ).toBe(true);
 });
 
 test("respects section header maxVisibleItems with empty query", () => {
@@ -67,7 +77,7 @@ test("respects section header maxVisibleItems with empty query", () => {
 
   // Find the border section
   const borderSectionIndex = snapshot.filteredItems.findIndex(
-    (item) => item.type === "sectionHeader" && item.name === "Border Styles"
+    (item) => item.type === "sectionHeader" && item.title === "Border Styles"
   );
 
   // Get items in the border section
@@ -78,7 +88,11 @@ test("respects section header maxVisibleItems with empty query", () => {
   // Should only show maxVisibleItems (2) items from the border section
   expect(borderSectionItems).toHaveLength(2);
   expect(
-    borderSectionItems.every((item) => item.name.startsWith("border-"))
+    borderSectionItems.every(
+      (item) =>
+        isSelectableMenuItem(item) &&
+        item.title?.toString().startsWith("border-")
+    )
   ).toBe(true);
 });
 
@@ -110,7 +124,7 @@ test("selects current item", () => {
   state.moveSelection("down"); // Select second item
   const selectedItem = state.selectCurrentItem();
 
-  expect(selectedItem?.name).toBe("font-italic");
+  expect(selectedItem?.title).toBe("font-italic");
   const snapshot = state.getSnapshot();
   expect(snapshot.filter).toBe("font-italic");
   expect(snapshot.lastSubmittedValue).toEqual({
@@ -155,18 +169,27 @@ test("handles empty query", () => {
 
   // Verify font items (first 3)
   const fontItems = snapshot.filteredItems.slice(0, 3);
-  expect(fontItems.every((item) => item.name.startsWith("font-"))).toBe(true);
+  expect(
+    fontItems.every(
+      (item) =>
+        isSelectableMenuItem(item) && item.title?.toString().startsWith("font-")
+    )
+  ).toBe(true);
 
   // Verify border section
   expect(snapshot.filteredItems[3].type).toBe("sectionHeader");
-  expect(snapshot.filteredItems[3].name).toBe("Border Styles");
+  expect(snapshot.filteredItems[3].title).toBe("Border Styles");
 
   // Verify border items (last 2, limited by maxVisibleItems)
   const borderItems = snapshot.filteredItems.slice(4);
   expect(borderItems).toHaveLength(2);
-  expect(borderItems.every((item) => item.name.startsWith("border-"))).toBe(
-    true
-  );
+  expect(
+    borderItems.every(
+      (item) =>
+        isSelectableMenuItem(item) &&
+        item.title?.toString().startsWith("border-")
+    )
+  ).toBe(true);
 });
 
 test("provides typeahead value", () => {
@@ -220,7 +243,10 @@ test("supports fuzzy matching", () => {
   const snapshot = state.getSnapshot();
 
   expect(snapshot.filteredItems).toHaveLength(1);
-  expect(snapshot.filteredItems[0].name).toBe("font-bold");
+  expect(
+    isSelectableMenuItemWithScore(snapshot.filteredItems[0]) &&
+      snapshot.filteredItems[0].title === "font-bold"
+  ).toBe(true);
 });
 
 test("wraps selection at boundaries", () => {
@@ -237,10 +263,10 @@ test("wraps selection at boundaries", () => {
 });
 
 test("respects alwaysInclude flag", () => {
-  const itemsWithAlwaysInclude = [
-    { id: "1", name: "font-bold", alwaysInclude: true },
-    { id: "2", name: "font-italic" },
-    { id: "3", name: "font-regular" },
+  const itemsWithAlwaysInclude: MenuItem<string>[] = [
+    { value: "font-bold", title: "font-bold", alwaysInclude: true },
+    { value: "font-italic", title: "font-italic" },
+    { value: "font-regular", title: "font-regular" },
   ];
 
   const state = new ComboboxState(itemsWithAlwaysInclude, "", true);
@@ -248,11 +274,15 @@ test("respects alwaysInclude flag", () => {
   const snapshot = state.getSnapshot();
 
   expect(snapshot.filteredItems).toHaveLength(2); // Should include "italic" match and "bold" due to alwaysInclude
-  expect(snapshot.filteredItems.some((item) => item.name === "font-bold")).toBe(
-    true
-  );
   expect(
-    snapshot.filteredItems.some((item) => item.name === "font-italic")
+    snapshot.filteredItems.some(
+      (item) => isSelectableMenuItem(item) && item.title === "font-bold"
+    )
+  ).toBe(true);
+  expect(
+    snapshot.filteredItems.some(
+      (item) => isSelectableMenuItem(item) && item.title === "font-italic"
+    )
   ).toBe(true);
 });
 
@@ -265,24 +295,24 @@ test("handles empty items array", () => {
 });
 
 test("handles multiple section headers", () => {
-  const itemsWithMultipleSections = [
+  const itemsWithMultipleSections: MenuItem<string>[] = [
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header1",
-      name: "Fonts",
+      title: "Fonts",
       maxVisibleItems: 2,
     },
-    { id: "1", name: "font-bold" },
-    { id: "2", name: "font-italic" },
-    { id: "3", name: "font-regular" },
+    { value: "font-bold", title: "font-bold" },
+    { value: "font-italic", title: "font-italic" },
+    { value: "font-regular", title: "font-regular" },
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header2",
-      name: "Borders",
+      title: "Borders",
       maxVisibleItems: 1,
     },
-    { id: "4", name: "border-solid" },
-    { id: "5", name: "border-dashed" },
+    { value: "border-solid", title: "border-solid" },
+    { value: "border-dashed", title: "border-dashed" },
   ];
 
   const state = new ComboboxState(itemsWithMultipleSections, "", true);
@@ -301,37 +331,38 @@ test("handles multiple section headers", () => {
   state.setFilter("font");
   snapshot = state.getSnapshot();
   expect(snapshot.filteredItems).toHaveLength(3); // header + 2 items (maxVisibleItems: 2)
+
   expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
-  expect(snapshot.filteredItems[0].name).toBe("Fonts");
+  expect(snapshot.filteredItems[0].title).toBe("Fonts");
   expect(snapshot.filteredItems.slice(1)).toHaveLength(2);
 
   state.setFilter("border");
   snapshot = state.getSnapshot();
   expect(snapshot.filteredItems).toHaveLength(2); // header + 1 item (maxVisibleItems: 1)
   expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
-  expect(snapshot.filteredItems[0].name).toBe("Borders");
+  expect(snapshot.filteredItems[0].title).toBe("Borders");
   expect(snapshot.filteredItems.slice(1)).toHaveLength(1);
 });
 
 test("handles multiple section headers with empty query", () => {
-  const itemsWithMultipleSections = [
+  const itemsWithMultipleSections: MenuItem<string>[] = [
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header1",
-      name: "Fonts",
+      title: "Fonts",
       maxVisibleItems: 2,
     },
-    { id: "1", name: "font-bold" },
-    { id: "2", name: "font-italic" },
-    { id: "3", name: "font-regular" },
+    { value: "font-bold", title: "font-bold" },
+    { value: "font-italic", title: "font-italic" },
+    { value: "font-regular", title: "font-regular" },
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header2",
-      name: "Borders",
+      title: "Borders",
       maxVisibleItems: 1,
     },
-    { id: "4", name: "border-solid" },
-    { id: "5", name: "border-dashed" },
+    { value: "border-solid", title: "border-solid" },
+    { value: "border-dashed", title: "border-dashed" },
   ];
 
   const state = new ComboboxState(itemsWithMultipleSections, "", true);
@@ -347,22 +378,30 @@ test("handles multiple section headers with empty query", () => {
 
   // Verify fonts section
   expect(snapshot.filteredItems[0].type).toBe("sectionHeader");
-  expect(snapshot.filteredItems[0].name).toBe("Fonts");
+  expect(snapshot.filteredItems[0].title).toBe("Fonts");
   expect(snapshot.filteredItems.slice(1, 3)).toHaveLength(2);
   expect(
     snapshot.filteredItems
       .slice(1, 3)
-      .every((item) => item.name.startsWith("font-"))
+      .every(
+        (item) =>
+          isSelectableMenuItemWithScore(item) &&
+          item.title?.toString().startsWith("font-")
+      )
   ).toBe(true);
 
   // Verify borders section
   expect(snapshot.filteredItems[3].type).toBe("sectionHeader");
-  expect(snapshot.filteredItems[3].name).toBe("Borders");
+  expect(snapshot.filteredItems[3].title).toBe("Borders");
   expect(snapshot.filteredItems.slice(4)).toHaveLength(1);
   expect(
     snapshot.filteredItems
       .slice(4)
-      .every((item) => item.name.startsWith("border-"))
+      .every(
+        (item) =>
+          isSelectableMenuItemWithScore(item) &&
+          item.title?.toString().startsWith("border-")
+      )
   ).toBe(true);
 });
 
@@ -375,8 +414,8 @@ test("handles case insensitive matching", () => {
   expect(
     snapshot.filteredItems.every(
       (item) =>
-        item.type !== "sectionHeader" &&
-        item.name.toLowerCase().includes("font")
+        isSelectableMenuItem(item) &&
+        item.title?.toString().toLowerCase().includes("font")
     )
   ).toBe(true);
 });
@@ -387,16 +426,16 @@ test("maintains correct indices after filtering", () => {
   const snapshot = state.getSnapshot();
 
   // Check that indices match original positions
-  const boldItem = snapshot.filteredItems.find(
-    (item): item is ComboboxOption & IScoredItem =>
-      item.type !== "sectionHeader" && item.name === "font-bold"
-  );
+  const boldItem = snapshot.filteredItems
+    .filter(isSelectableMenuItemWithScore)
+    .find((item) => item.title === "font-bold");
+  expect(boldItem?.title).toBe("font-bold");
   expect(boldItem?.index).toBe(0);
 
-  const italicItem = snapshot.filteredItems.find(
-    (item): item is ComboboxOption & IScoredItem =>
-      item.type !== "sectionHeader" && item.name === "font-italic"
-  );
+  const italicItem = snapshot.filteredItems
+    .filter(isSelectableMenuItemWithScore)
+    .find((item) => item.title === "font-italic");
+  expect(italicItem?.title).toBe("font-italic");
   expect(italicItem?.index).toBe(1);
 });
 
@@ -408,18 +447,19 @@ test("handles section header selection", () => {
   let snapshot = state.getSnapshot();
   // Should select the next selectable item after the header
   expect(snapshot.selectedIndex).toBe(4);
-  expect(snapshot.filteredItems[snapshot.selectedIndex].name).toBe(
-    "border-solid"
-  );
+  const selectedItem = snapshot.filteredItems[snapshot.selectedIndex];
+  expect(
+    isSelectableMenuItemWithScore(selectedItem) && selectedItem.title
+  ).toBe("border-solid");
 
   // Try to select a header when it's the last item
-  const itemsWithHeaderAtEnd = [
-    { id: "1", name: "item1" },
-    { id: "2", name: "item2" },
+  const itemsWithHeaderAtEnd: MenuItem<string>[] = [
+    { value: "item1", title: "item1" },
+    { value: "item2", title: "item2" },
     {
       type: "sectionHeader" as const,
       id: "header",
-      name: "Header",
+      title: "Header",
     },
   ];
   const stateWithHeaderAtEnd = new ComboboxState(
@@ -431,17 +471,21 @@ test("handles section header selection", () => {
   snapshot = stateWithHeaderAtEnd.getSnapshot();
   // Should select the previous selectable item before the header
   expect(snapshot.selectedIndex).toBe(1);
-  expect(snapshot.filteredItems[snapshot.selectedIndex].name).toBe("item2");
+  const selectedItemEndHeader = snapshot.filteredItems[snapshot.selectedIndex];
+  expect(
+    isSelectableMenuItemWithScore(selectedItemEndHeader) &&
+      selectedItemEndHeader.value
+  ).toBe("item2");
 
   // Try to select a header when it's between two sections
-  const itemsWithHeaderBetween = [
-    { id: "1", name: "item1" },
+  const itemsWithHeaderBetween: MenuItem<string>[] = [
+    { value: "item1", title: "item1" },
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header",
-      name: "Header",
+      title: "Header",
     },
-    { id: "2", name: "item2" },
+    { value: "item2", title: "item2" },
   ];
   const stateWithHeaderBetween = new ComboboxState(
     itemsWithHeaderBetween,
@@ -452,21 +496,26 @@ test("handles section header selection", () => {
   snapshot = stateWithHeaderBetween.getSnapshot();
   // Should select the next selectable item after the header
   expect(snapshot.selectedIndex).toBe(2);
-  expect(snapshot.filteredItems[snapshot.selectedIndex].name).toBe("item2");
+  const selectedItemBetweenHeader =
+    snapshot.filteredItems[snapshot.selectedIndex];
+  expect(
+    isSelectableMenuItemWithScore(selectedItemBetweenHeader) &&
+      selectedItemBetweenHeader.value
+  ).toBe("item2");
 });
 
 test("handles section header selection with no selectable items", () => {
   // Test with only headers
-  const onlyHeaders = [
+  const onlyHeaders: MenuItem<string>[] = [
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header1",
-      name: "Header 1",
+      title: "Header 1",
     },
     {
-      type: "sectionHeader" as const,
+      type: "sectionHeader",
       id: "header2",
-      name: "Header 2",
+      title: "Header 2",
     },
   ];
   const state = new ComboboxState(onlyHeaders, "", true);
@@ -485,13 +534,12 @@ test("selects specific item when provided", () => {
   // Get the items we can select from
   const snapshot = state.getSnapshot();
   const italicItem = snapshot.filteredItems.find(
-    (item): item is ComboboxOption & IScoredItem =>
-      item.type !== "sectionHeader" && item.name === "font-italic"
+    (item) => isSelectableMenuItem(item) && item.title === "font-italic"
   );
 
   // Select a specific item, even though it's not the currently selected one
   const selectedItem = state.selectCurrentItem(italicItem);
-  expect(selectedItem?.name).toBe("font-italic");
+  expect(selectedItem?.title).toBe("font-italic");
 
   // Verify the state was updated
   const newSnapshot = state.getSnapshot();

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+
+import React from "react";
+import { cx } from "../utils/classNames";
+import { Text, TextProps } from "./Text";
+
+type BreadcrumbTextProps = Omit<
+  TextProps,
+  "variant" | "whiteSpace" | "lineHeight" | "userSelect"
+>;
+
+export const BreadcrumbText = forwardRef(function BreadcrumbText(
+  { children, className, ...props }: BreadcrumbTextProps,
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  return (
+    <Text
+      {...props}
+      variant="small"
+      className={cx(
+        "hover:text-breadcrumb-text-hover hover:cursor-pointer hover:whitespace-pre hover:select-none whitespace-pre leading-[15px] select-none",
+        className
+      )}
+      ref={ref}
+    >
+      {children}
+    </Text>
+  );
+});

package/src/components/Collection.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { forwardRefGeneric } from "../../../noya-react-utils/src/utils/reactGenerics";
+import { Grid, GridViewSize } from "../components/Grid";
+import { MenuItem } from "../components/internal/Menu";
+import { ListView, ListViewRootProps } from "../components/ListView";
+import { List } from "./List";
+
+export type CollectionViewType = "grid" | "list";
+
+export type CollectionRef = {
+  editName: (id: string) => void;
+};
+
+export interface CollectionProps<T, M extends string = string> {
+  className?: string;
+  items: T[];
+  getId: (item: T) => string;
+  getName: (item: T) => string;
+  getExpanded?: (item: T) => boolean | undefined;
+  /**
+   * Whether directories should be expandable.
+   * @default true
+   */
+  expandable?: boolean;
+  /**
+   *  Whether to allow renaming files
+   * @default true
+   */
+  renamable?: boolean;
+  menuItems?: MenuItem<M>[];
+  onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
+  onRename?: (item: T, newName: string) => void;
+  renderThumbnail?: (item: T, selected: boolean) => React.ReactNode;
+  renderAction?: (item: T, selected: boolean) => React.ReactNode;
+  renderDetail?: (item: T, selected: boolean) => React.ReactNode;
+  /** Callback when selection changes. If not provided, selection will be disabled. */
+  onSelectionChange?: (
+    selectedItemIds: string[],
+    event?: ListView.ClickInfo
+  ) => void;
+  scrollable?: boolean;
+  itemRoleDescription?: string;
+  /** Position of the detail content. Defaults to 'end'. */
+  detailPosition?: "end" | "below";
+  /** Size of the list items. Defaults to 'medium'. */
+  size?: GridViewSize;
+  /** For testing: Override the hover state with a specific item ID */
+  testHoveredId?: string;
+  /** For testing: Override the renaming state with a specific item ID */
+  testRenamingId?: string;
+  setExpanded?: (item: T, expanded: boolean) => void;
+  acceptsDrop?: ListViewRootProps["acceptsDrop"];
+  onMoveItem?: ListViewRootProps["onMoveItem"];
+  getDepth?: (item: T) => number;
+  onFilesDrop?: (event: React.DragEvent<Element>) => void;
+  getRenamable?: (item: T) => boolean;
+  /** Currently selected file IDs */
+  selectedIds?: string[];
+  viewType?: CollectionViewType;
+  onDoubleClickItem?: (itemId: string) => void;
+}
+
+export const Collection = forwardRefGeneric(function Collection<
+  T,
+  M extends string = string,
+>(props: CollectionProps<T, M>, ref: React.ForwardedRef<CollectionRef>) {
+  const { viewType, ...rest } = props;
+
+  return viewType === "grid" ? (
+    <Grid ref={ref} {...rest} />
+  ) : (
+    <List ref={ref} {...rest} />
+  );
+});