@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/utils/combobox.ts

@@ -1,80 +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;
-  alwaysInclude?: 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
@@ -89,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,
           },
         ];
@@ -113,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];
     }
@@ -133,7 +139,7 @@ export class ComboboxState {
     return snapshot;
   };
 
-  setItems(items: ComboboxItem[]) {
+  setItems(items: MenuItem<T>[]) {
     this.items = items;
     this.notifyChange();
   }
@@ -145,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 =
@@ -166,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() {
@@ -202,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;
@@ -228,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;
@@ -252,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,
@@ -271,62 +276,72 @@ 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;
 }
 
-function getNextIndex<T>(
+export function getNextIndex<T>(
   items: T[],
   currentIndex: number,
   direction: "next" | "previous",
@@ -360,7 +375,7 @@ 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,16 +1,15 @@
-import {
-  MenuItem,
-  RegularMenuItem,
-  SEPARATOR_ITEM,
-} from '../components/internal/Menu';
+import { MenuItem, SeparatorItem } from "../components/internal/Menu";
 
 export type Optional<T> = T | false | null | undefined;
 
-function withSeparators<T>(elements: T[], separator: T) {
-  const result: T[] = [];
+function withSeparators<T extends string>(
+  elements: MenuItem<T>[][],
+  separator: SeparatorItem
+): MenuItem<T>[] {
+  const result: MenuItem<T>[] = [];
 
   for (let i = 0; i < elements.length; i++) {
-    result.push(elements[i]);
+    result.push(...elements[i]);
 
     if (i !== elements.length - 1) {
       result.push(separator);
@@ -20,9 +19,7 @@ function withSeparators<T>(elements: T[], separator: T) {
   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>
@@ -32,7 +29,7 @@ export function createSectionedMenu<T extends string>(
     .map((section) => section.flatMap((item) => (item ? [item] : [])))
     .filter((section) => section.length > 0);
 
-  return withSeparators<MenuItem<T>[]>(nonEmptySections, [
-    SEPARATOR_ITEM,
-  ]).flat();
+  return withSeparators(nonEmptySections, {
+    type: "separator",
+  }).flat();
 }

package/src/utils/fuzzyScorer.ts

@@ -1,4 +1,4 @@
-import { IItemScore, scoreFilePathFuzzy } from 'vscode-fuzzy-scorer';
+import { IItemScore, scoreFilePathFuzzy } from "vscode-fuzzy-scorer";
 
 export function fuzzyScore({ item, query }: { item: string; query: string }) {
   return scoreFilePathFuzzy({ path: item, query });
@@ -21,7 +21,7 @@ export function fuzzyFilter({
     (text, index): IScoredItem => ({
       index,
       ...fuzzyScore({ item: text, query }),
-    }),
+    })
   );
 
   if (!query) return scoredItems;
@@ -32,8 +32,8 @@ export function fuzzyFilter({
 }
 
 export type IToken =
-  | { type: 'text'; text: string }
-  | { type: 'match'; text: string };
+  | { type: "text"; text: string }
+  | { type: "match"; text: string };
 
 export type MatchRange = { start: number; end: number };
 
@@ -44,8 +44,11 @@ export function fuzzyTokenize({
   item: string;
   itemScore: IItemScore;
 }): IToken[] {
-  const tokens: IToken[] = [];
+  if (typeof item !== "string") {
+    return [{ type: "text", text: String(item) }];
+  }
 
+  const tokens: IToken[] = [];
   let lastMatchIndex = 0;
 
   const matches: MatchRange[] = mergeRanges([
@@ -56,13 +59,13 @@ export function fuzzyTokenize({
   for (const match of matches) {
     if (match.start > lastMatchIndex) {
       tokens.push({
-        type: 'text',
+        type: "text",
         text: item.slice(lastMatchIndex, match.start),
       });
     }
 
     tokens.push({
-      type: 'match',
+      type: "match",
       text: item.slice(match.start, match.end),
     });
 
@@ -71,7 +74,7 @@ export function fuzzyTokenize({
 
   if (lastMatchIndex < item.length) {
     tokens.push({
-      type: 'text',
+      type: "text",
       text: item.slice(lastMatchIndex),
     });
   }

package/src/utils/selection.ts

@@ -0,0 +1,48 @@
+/**
+ * Updates the selection state based on user interaction.
+ * Handles single selection, multi-selection with meta/ctrl, and range selection with shift.
+ */
+export function updateSelection(
+  allIds: string[],
+  selectedIds: string[],
+  clickedId: string,
+  event?: { shiftKey?: boolean; metaKey?: boolean; ctrlKey?: boolean }
+): string[] {
+  const metaOrCtrl = event?.metaKey || event?.ctrlKey;
+
+  if (!event || (!event.shiftKey && !metaOrCtrl)) {
+    // Store this as the anchor point for future shift selections
+    return [clickedId];
+  }
+
+  if (metaOrCtrl) {
+    const isSelected = selectedIds.includes(clickedId);
+    return isSelected
+      ? selectedIds.filter((id) => id !== clickedId)
+      : [...selectedIds, clickedId];
+  }
+
+  if (event.shiftKey && selectedIds.length > 0) {
+    // Find the anchor based on which end of the current selection is closer to the clicked item
+    const firstSelectedIndex = allIds.indexOf(selectedIds[0]);
+    const lastSelectedIndex = allIds.indexOf(
+      selectedIds[selectedIds.length - 1]
+    );
+    const clickedIndex = allIds.indexOf(clickedId);
+
+    // Use the endpoint of the current selection that's furthest from the clicked item as the anchor
+    const anchorId =
+      Math.abs(clickedIndex - firstSelectedIndex) >
+      Math.abs(clickedIndex - lastSelectedIndex)
+        ? selectedIds[0]
+        : selectedIds[selectedIds.length - 1];
+
+    const anchorIndex = allIds.indexOf(anchorId);
+    const start = Math.min(anchorIndex, clickedIndex);
+    const end = Math.max(anchorIndex, clickedIndex);
+
+    return allIds.slice(start, end + 1);
+  }
+
+  return [clickedId];
+}