@noya-app/noya-designsystem 0.1.45 → 0.1.46

package/src/components/internal/MenuViewport.tsx

@@ -65,86 +65,87 @@ export const MenuViewport = <T extends string>({
   return (
     <>
       {items.map((item, index) => {
-        if (item.type === "separator") {
-          return (
-            <Components.Separator
-              key={index}
-              className={styles.separatorStyle}
-            />
-          );
-        }
-
-        if (item.type === "sectionHeader") {
-          return (
-            <SectionHeader
-              isFirst={index === 0}
-              key={item.id}
-              {...item}
-              indented={hasCheckedItem}
-            />
-          );
-        }
+        switch (item.type) {
+          case "separator":
+            return (
+              <Components.Separator
+                key={index}
+                className={styles.separatorStyle}
+              />
+            );
 
-        const value = item.value ?? "";
-
-        if (
-          item.items &&
-          Components.Sub &&
-          Components.SubTrigger &&
-          Components.SubContent &&
-          Components.Portal
-        ) {
-          return (
-            <Components.Sub key={value}>
-              <Components.SubTrigger
-                className={styles.itemStyle({ disabled: item.disabled })}
-                asChild
+          case "sectionHeader":
+            return (
+              <SectionHeader
+                isFirst={index === 0}
+                key={item.id}
+                {...item}
+                indented={hasCheckedItem}
+              />
+            );
+          case "submenu":
+            if (
+              item.items &&
+              Components.Sub &&
+              Components.SubTrigger &&
+              Components.SubContent &&
+              Components.Portal
+            ) {
+              return (
+                <Components.Sub key={item.id}>
+                  <Components.SubTrigger
+                    className={styles.itemStyle({ disabled: item.disabled })}
+                    asChild
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                  >
+                    <SelectItem
+                      value={item.id}
+                      icon={item.icon}
+                      checked={item.checked}
+                      onSelect={onSelect}
+                      Components={Components}
+                      indented={hasCheckedItem}
+                    >
+                      <div className="flex items-center flex-1">
+                        {item.title}
+                      </div>
+                      <ChevronRightIcon className="-mr-1" />
+                    </SelectItem>
+                  </Components.SubTrigger>
+                  <Components.Portal>
+                    <Components.SubContent
+                      alignOffset={-5}
+                      className={styles.contentStyle}
+                    >
+                      <MenuViewport
+                        items={item.items}
+                        Components={Components}
+                        onSelect={onSelect}
+                      />
+                    </Components.SubContent>
+                  </Components.Portal>
+                </Components.Sub>
+              );
+            } else return null;
+          default:
+            return (
+              <SelectItem
+                key={item.value}
+                value={item.value}
+                icon={item.icon}
+                checked={item.checked}
+                shortcut={item.shortcut}
+                onSelect={onSelect}
+                Components={Components}
+                indented={hasCheckedItem}
               >
-                <SelectItem
-                  value={value}
-                  icon={item.icon}
-                  checked={item.checked}
-                  shortcut={item.shortcut}
-                  onSelect={onSelect}
-                  Components={Components}
-                  indented={hasCheckedItem}
-                >
-                  <div className="flex items-center flex-1">
-                    {item.title ?? value}
-                  </div>
-                  <ChevronRightIcon className="-mr-1" />
-                </SelectItem>
-              </Components.SubTrigger>
-              <Components.Portal>
-                <Components.SubContent
-                  alignOffset={-5}
-                  className={styles.contentStyle}
-                >
-                  <MenuViewport
-                    items={item.items}
-                    Components={Components}
-                    onSelect={onSelect}
-                  />
-                </Components.SubContent>
-              </Components.Portal>
-            </Components.Sub>
-          );
+                {item.title ?? item.value}
+              </SelectItem>
+            );
         }
-
-        return (
-          <SelectItem
-            key={value}
-            value={value}
-            icon={item.icon}
-            checked={item.checked}
-            shortcut={item.shortcut}
-            onSelect={onSelect}
-            Components={Components}
-            indented={hasCheckedItem}
-          >
-            {item.title ?? value}
-          </SelectItem>
-        );
       })}
     </>
   );

package/src/index.tsx

@@ -2,9 +2,11 @@
 export * from "./components/ActivityIndicator";
 export * from "./components/AnimatePresence";
 export * from "./components/Avatar";
+export * from "./components/Breadcrumbs";
 export * from "./components/Button";
 export * from "./components/Checkbox";
 export * from "./components/Chip";
+export * from "./components/Collection";
 export * from "./components/Combobox";
 export * from "./components/ComboboxMenu";
 export * from "./components/CommandPalette";
@@ -13,11 +15,13 @@ export * from "./components/Dialog";
 export * from "./components/Divider";
 export * from "./components/DraggableMenuButton";
 export * from "./components/DropdownMenu";
+export * from "./components/EditableText";
 export * from "./components/Fade";
 export * from "./components/FillInputField";
 export * from "./components/FillPreviewBackground";
 export * from "./components/FloatingWindow";
 export * from "./components/GradientPicker";
+export * from "./components/Grid";
 export * from "./components/GridView";
 export * from "./components/IconButton";
 export * from "./components/Icons";
@@ -27,14 +31,13 @@ export * from "./components/internal/Menu";
 export type {
   ExtractMenuItemType,
   MenuItem,
-  RegularMenuItem,
-  SectionHeaderMenuItem,
-  SeparatorItem,
+  SelectableMenuItem,
 } from "./components/internal/Menu";
 export * from "./components/internal/MenuViewport";
 export * from "./components/Label";
 export * from "./components/LabeledElementView";
 export * from "./components/LabeledField";
+export * from "./components/List";
 export * from "./components/ListView";
 export * from "./components/Message";
 export * from "./components/Popover";
@@ -43,7 +46,6 @@ export * from "./components/ScrollArea";
 export * from "./components/SearchCompletionMenu";
 export * from "./components/SegmentedControl";
 export * from "./components/SelectMenu";
-export * from "./components/SidebarList";
 export * from "./components/Slider";
 export * from "./components/Sortable";
 export type { RelativeDropPosition } from "./components/Sortable";

package/src/utils/combobox.ts

@@ -1,83 +1,76 @@
 import { chunkBy, partition } from "@noya-app/noya-utils";
-import { ReactNode, useSyncExternalStore } from "react";
+import { useSyncExternalStore } from "react";
+import {
+  isMenuItemSectionHeader,
+  isNonSelectableMenuItem,
+  isSelectableMenuItem,
+  MenuItem,
+  ScoredMenuItem,
+  SectionHeaderMenuItem,
+  SelectableMenuItem,
+} from "../components/internal/Menu";
 import { fuzzyFilter, IScoredItem } from "./fuzzyScorer";
 
-export type ComboboxOption = {
-  type?: undefined;
-  id: string;
-  name: string;
-  icon?: ReactNode;
-  shortcut?: string;
-  disabled?: boolean;
-  alwaysInclude?: boolean;
-  checked?: boolean;
-};
-
-export type ComboboxSectionHeader = {
-  type: "sectionHeader";
-  id: string;
-  name: string;
-  maxVisibleItems?: number;
-};
-
-export type ComboboxItem = ComboboxOption | ComboboxSectionHeader;
-
-export type InternalComboboxItem =
-  | (ComboboxOption & IScoredItem)
-  | ComboboxSectionHeader;
-
-export type ComboboxStateSnapshot = {
+export type ComboboxStateSnapshot<T extends string> = {
   filter: string;
   selectedIndex: number;
-  filteredItems: InternalComboboxItem[];
+  filteredItems: ScoredMenuItem<T>[];
   lastSubmittedValue: { filter: string; itemName: string };
 };
 
-export class ComboboxState {
+export class ComboboxState<T extends string> {
   private filter: string;
   private selectedIndex: number;
-  private items: ComboboxItem[];
+  private items: MenuItem<T>[];
   private lastSubmittedValue: { filter: string; itemName: string };
   private subscribers: (() => void)[] = [];
   private version = 0;
-  private _cachedSnapshot: [number, ComboboxStateSnapshot] | undefined;
+  private _cachedSnapshot: [number, ComboboxStateSnapshot<T>] | undefined;
 
   constructor(
-    items: ComboboxItem[],
-    initialValue: string,
+    items: MenuItem<T>[],
+    initialTitle: string,
     allowArbitraryValues: boolean
   ) {
     this.items = items;
     this.lastSubmittedValue = {
-      filter: initialValue,
-      itemName: initialValue,
+      filter: initialTitle,
+      itemName: initialTitle,
     };
 
     // Initialize with the initial value
-    this.filter = initialValue;
+    this.filter = initialTitle;
     this.selectedIndex = 0;
 
     // Create initial snapshot
     this._cachedSnapshot = [
       0,
       {
-        filter: initialValue,
+        filter: initialTitle,
         selectedIndex: 0,
-        filteredItems: items.map((item, index) => {
-          if (item.type === "sectionHeader") return item;
-          return { ...item, index, score: 0 };
-        }),
+
+        filteredItems: this.items.flatMap((item, index) =>
+          isMenuItemSectionHeader(item)
+            ? item
+            : isSelectableMenuItem(item)
+              ? {
+                  ...item,
+                  index,
+                  score: 0,
+                }
+              : []
+        ),
         lastSubmittedValue: this.lastSubmittedValue,
       },
     ];
 
     // If there's an initial value, validate it
-    if (initialValue) {
+    if (initialTitle) {
       // Check if the initial value exists in items
-      const hasMatch = items.some(
+      const hasMatch = this.items.some(
         (item) =>
-          item.type !== "sectionHeader" &&
-          item.name.toLowerCase() === initialValue.toLowerCase()
+          item.type === undefined &&
+          item.title?.toString().toLowerCase() === initialTitle.toLowerCase()
       );
 
       // Get filtered items to check for fuzzy matches
@@ -92,10 +85,20 @@ export class ComboboxState {
           {
             filter: "",
             selectedIndex: 0,
-            filteredItems: items.map((item, index) => {
-              if (item.type === "sectionHeader") return item;
-              return { ...item, index, score: 0 };
-            }),
+
+            filteredItems: this.items.flatMap((item): ScoredMenuItem<T>[] =>
+              isSelectableMenuItem(item)
+                ? [
+                    {
+                      ...item,
+                      index: 0,
+                      score: 0,
+                    },
+                  ]
+                : item.type === "sectionHeader"
+                  ? [item]
+                  : []
+            ),
             lastSubmittedValue: this.lastSubmittedValue,
           },
         ];
@@ -116,11 +119,11 @@ export class ComboboxState {
     this.subscribers.forEach((listener) => listener());
   }
 
-  private getFilteredItems(): InternalComboboxItem[] {
+  private getFilteredItems(): ScoredMenuItem<T>[] {
     return filterWithGroupedSections(this.items, this.filter);
   }
 
-  getSnapshot = (): ComboboxStateSnapshot => {
+  getSnapshot = (): ComboboxStateSnapshot<T> => {
     if (this._cachedSnapshot && this._cachedSnapshot[0] === this.version) {
       return this._cachedSnapshot[1];
     }
@@ -136,7 +139,7 @@ export class ComboboxState {
     return snapshot;
   };
 
-  setItems(items: ComboboxItem[]) {
+  setItems(items: MenuItem<T>[]) {
     this.items = items;
     this.notifyChange();
   }
@@ -148,13 +151,13 @@ export class ComboboxState {
     // Find exact match if it exists (case insensitive)
     const exactMatchIndex = filteredItems.findIndex(
       (item) =>
-        item.type !== "sectionHeader" &&
-        item.name.toLowerCase().startsWith(filter.toLowerCase())
+        isSelectableMenuItem(item) &&
+        item.title?.toString().toLowerCase().startsWith(filter.toLowerCase())
     );
 
     // Find the first non-header item
-    const firstSelectableIndex = filteredItems.findIndex(
-      (item) => item.type !== "sectionHeader"
+    const firstSelectableIndex = filteredItems.findIndex((item): boolean =>
+      isSelectableMenuItem(item)
     );
 
     this.selectedIndex =
@@ -169,29 +172,28 @@ export class ComboboxState {
       filteredItems,
       this.selectedIndex,
       direction === "down" ? "next" : "previous",
-      (item) => item.type === "sectionHeader"
+      (item) => isNonSelectableMenuItem(item)
     );
     this.notifyChange();
   }
 
   selectCurrentItem(
-    item?: InternalComboboxItem
-  ): InternalComboboxItem | undefined {
+    item?: ScoredMenuItem<T>
+  ): SelectableMenuItem<T> | undefined {
     const itemToSelect = item || this.getFilteredItems()[this.selectedIndex];
-    if (!itemToSelect || itemToSelect.type === "sectionHeader") {
+    if (itemToSelect && isSelectableMenuItem(itemToSelect)) {
+      this.lastSubmittedValue = {
+        filter: itemToSelect.title!.toString(),
+        itemName: itemToSelect.title!.toString(),
+      };
+      this.filter = itemToSelect.title!.toString();
+      this.notifyChange();
+      return itemToSelect;
+    } else {
       // If no valid item to select and arbitrary values aren't allowed,
       // restore the last valid value
       this.restoreLastSubmittedValue();
-      return;
     }
-
-    this.lastSubmittedValue = {
-      filter: itemToSelect.name,
-      itemName: itemToSelect.name,
-    };
-    this.filter = itemToSelect.name;
-    this.notifyChange();
-    return itemToSelect;
   }
 
   restoreLastSubmittedValue() {
@@ -205,25 +207,25 @@ export class ComboboxState {
     this.notifyChange();
   }
 
-  getSelectedItem(): InternalComboboxItem | undefined {
+  getSelectedItem(): ScoredMenuItem<T> | undefined {
     const filteredItems = this.getFilteredItems();
     return filteredItems[this.selectedIndex];
   }
 
   getTypeaheadValue(): string | undefined {
     const selectedItem = this.getSelectedItem();
-    if (!selectedItem || selectedItem.type === "sectionHeader") return;
-    return selectedItem.name;
+    if (selectedItem && isSelectableMenuItem(selectedItem))
+      return selectedItem.title!.toString();
   }
 
   setSelectedIndex(index: number) {
     const filteredItems = this.getFilteredItems();
 
-    // If trying to select a header, find the next selectable item
-    if (filteredItems[index]?.type === "sectionHeader") {
-      // Look for the next non-header item
+    // If trying to select a header or separator, find the next selectable item
+    if (isNonSelectableMenuItem(filteredItems[index])) {
+      // Look for the next selectable item
       for (let i = index + 1; i < filteredItems.length; i++) {
-        if (filteredItems[i]?.type !== "sectionHeader") {
+        if (isSelectableMenuItem(filteredItems[i])) {
           this.selectedIndex = i;
           this.notifyChange();
           return;
@@ -231,7 +233,7 @@ export class ComboboxState {
       }
       // If no next item, look backwards
       for (let i = index - 1; i >= 0; i--) {
-        if (filteredItems[i]?.type !== "sectionHeader") {
+        if (isSelectableMenuItem(filteredItems[i])) {
           this.selectedIndex = i;
           this.notifyChange();
           return;
@@ -255,18 +257,18 @@ export class ComboboxState {
   }
 }
 
-function filterWithGroupedSections(
-  items: ComboboxItem[],
+function filterWithGroupedSections<T extends string>(
+  items: MenuItem<T>[],
   query: string
-): InternalComboboxItem[] {
-  const sections = chunkBy(items, (_a, b) => b.type !== "sectionHeader");
-  let result: InternalComboboxItem[] = [];
+): ScoredMenuItem<T>[] {
+  const sections = chunkBy(items, (_a, b) => isSelectableMenuItem(b));
+  let result: ScoredMenuItem<T>[] = [];
   let currentIndex = 0;
 
   const createExtraItem = (
-    item: ComboboxOption,
+    item: SelectableMenuItem<T>,
     index: number
-  ): InternalComboboxItem => ({
+  ): ScoredMenuItem<T> => ({
     ...item,
     index: currentIndex + index,
     score: 0,
@@ -274,56 +276,66 @@ function filterWithGroupedSections(
 
   const createScoredItem = (
     item: IScoredItem,
-    regular: ComboboxOption[]
-  ): InternalComboboxItem => ({
-    ...item,
-    ...regular[item.index],
-    index: currentIndex + item.index,
-  });
+    selectableItems: Array<SelectableMenuItem<T>>
+  ): ScoredMenuItem<T> => {
+    const menuItem = selectableItems[item.index];
+    return {
+      ...item,
+      ...menuItem,
+      index: currentIndex + item.index,
+    };
+  };
 
   for (const section of sections) {
-    const [headers, regular] = partition(
-      section,
-      (item): item is ComboboxSectionHeader => item.type === "sectionHeader"
+    const [sectionHeaders, selectableItems] = partition(
+      section.filter(
+        (item): item is SelectableMenuItem<T> | SectionHeaderMenuItem =>
+          item.type !== "submenu" && item.type !== "separator"
+      ),
+      (item): item is SectionHeaderMenuItem => isMenuItemSectionHeader(item)
     );
 
-    let newItems: InternalComboboxItem[];
+    let newItems: ScoredMenuItem<T>[];
 
     if (!query.trim()) {
       // For empty query, include all items with score 0
-      newItems = regular.map((item, index) => createExtraItem(item, index));
+      newItems = selectableItems.map((item, index) =>
+        createExtraItem(item, index)
+      );
     } else {
       const scoredItems = fuzzyFilter({
-        items: regular.map((item) => item.name),
+        items: selectableItems.map((item) => item.title.toString()),
         query,
       });
 
       const usedIndexes = new Set(scoredItems.map((item) => item.index));
-      const extraItems = regular.flatMap(
-        (item, index): InternalComboboxItem[] =>
-          item.alwaysInclude && !usedIndexes.has(index)
+      const extraItems = selectableItems.flatMap(
+        (item, index): ScoredMenuItem<T>[] =>
+          item?.alwaysInclude && !usedIndexes.has(index)
             ? [createExtraItem(item, index)]
             : []
       );
 
       newItems = scoredItems
-        .map((item) => createScoredItem(item, regular))
+        .map((item) => createScoredItem(item, selectableItems))
         .concat(extraItems);
     }
 
     // If we have items or this is an empty query
     if (newItems.length > 0 || !query.trim()) {
       const maxVisibleItems =
-        headers.length > 0 ? headers[0].maxVisibleItems : undefined;
+        sectionHeaders.length > 0 && sectionHeaders[0]?.maxVisibleItems
+          ? sectionHeaders[0]?.maxVisibleItems
+          : undefined;
 
       if (maxVisibleItems !== undefined) {
         newItems = newItems.slice(0, maxVisibleItems);
       }
 
-      result.push(...headers, ...newItems);
+      result.push(...sectionHeaders, ...newItems);
     }
 
-    currentIndex += regular.length;
+    currentIndex += selectableItems.length;
   }
 
   return result;
@@ -363,7 +375,7 @@ export function getNextIndex<T>(
   return nextIndex;
 }
 
-export function useComboboxState(state: ComboboxState) {
+export function useComboboxState<T extends string>(state: ComboboxState<T>) {
   return useSyncExternalStore(
     state.subscribe,
     state.getSnapshot,

package/src/utils/createSectionedMenu.ts

@@ -1,13 +1,9 @@
-import {
-  MenuItem,
-  RegularMenuItem,
-  SeparatorItem,
-} from "../components/internal/Menu";
+import { MenuItem, SeparatorItem } from "../components/internal/Menu";
 
 export type Optional<T> = T | false | null | undefined;
 
 function withSeparators<T extends string>(
-  elements: RegularMenuItem<T>[][],
+  elements: MenuItem<T>[][],
   separator: SeparatorItem
 ): MenuItem<T>[] {
   const result: MenuItem<T>[] = [];
@@ -23,9 +19,7 @@ function withSeparators<T extends string>(
   return result;
 }
 
-export type MenuConfig<T extends string> = Optional<
-  Optional<RegularMenuItem<T>>[]
->[];
+export type MenuConfig<T extends string> = Optional<Optional<MenuItem<T>>[]>[];
 
 export function createSectionedMenu<T extends string>(
   ...sections: MenuConfig<T>