@noya-app/noya-designsystem 0.1.41 → 0.1.42

package/src/utils/combobox.ts

@@ -0,0 +1,369 @@
+import { chunkBy, partition } from "@noya-app/noya-utils";
+import { ReactNode, useSyncExternalStore } from "react";
+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 = {
+  filter: string;
+  selectedIndex: number;
+  filteredItems: InternalComboboxItem[];
+  lastSubmittedValue: { filter: string; itemName: string };
+};
+
+export class ComboboxState {
+  private filter: string;
+  private selectedIndex: number;
+  private items: ComboboxItem[];
+  private lastSubmittedValue: { filter: string; itemName: string };
+  private subscribers: (() => void)[] = [];
+  private version = 0;
+  private _cachedSnapshot: [number, ComboboxStateSnapshot] | undefined;
+
+  constructor(
+    items: ComboboxItem[],
+    initialValue: string,
+    allowArbitraryValues: boolean
+  ) {
+    this.items = items;
+    this.lastSubmittedValue = {
+      filter: initialValue,
+      itemName: initialValue,
+    };
+
+    // Initialize with the initial value
+    this.filter = initialValue;
+    this.selectedIndex = 0;
+
+    // Create initial snapshot
+    this._cachedSnapshot = [
+      0,
+      {
+        filter: initialValue,
+        selectedIndex: 0,
+        filteredItems: items.map((item, index) => {
+          if (item.type === "sectionHeader") return item;
+          return { ...item, index, score: 0 };
+        }),
+        lastSubmittedValue: this.lastSubmittedValue,
+      },
+    ];
+
+    // If there's an initial value, validate it
+    if (initialValue) {
+      // Check if the initial value exists in items
+      const hasMatch = items.some(
+        (item) =>
+          item.type !== "sectionHeader" &&
+          item.name.toLowerCase() === initialValue.toLowerCase()
+      );
+
+      // Get filtered items to check for fuzzy matches
+      const filteredItems = this.getFilteredItems();
+
+      // If no matches and we don't want arbitrary values, reset to empty
+      if (!hasMatch && !filteredItems.length && !allowArbitraryValues) {
+        this.filter = "";
+        this.selectedIndex = 0;
+        this._cachedSnapshot = [
+          0,
+          {
+            filter: "",
+            selectedIndex: 0,
+            filteredItems: items.map((item, index) => {
+              if (item.type === "sectionHeader") return item;
+              return { ...item, index, score: 0 };
+            }),
+            lastSubmittedValue: this.lastSubmittedValue,
+          },
+        ];
+      }
+    }
+  }
+
+  subscribe = (listener: () => void): (() => void) => {
+    this.subscribers.push(listener);
+    return () => {
+      this.subscribers = this.subscribers.filter((l) => l !== listener);
+    };
+  };
+
+  private notifyChange() {
+    this.version++;
+    this._cachedSnapshot = undefined;
+    this.subscribers.forEach((listener) => listener());
+  }
+
+  private getFilteredItems(): InternalComboboxItem[] {
+    return filterWithGroupedSections(this.items, this.filter);
+  }
+
+  getSnapshot = (): ComboboxStateSnapshot => {
+    if (this._cachedSnapshot && this._cachedSnapshot[0] === this.version) {
+      return this._cachedSnapshot[1];
+    }
+
+    const snapshot = {
+      filter: this.filter,
+      selectedIndex: this.selectedIndex,
+      filteredItems: this.getFilteredItems(),
+      lastSubmittedValue: this.lastSubmittedValue,
+    };
+
+    this._cachedSnapshot = [this.version, snapshot];
+    return snapshot;
+  };
+
+  setItems(items: ComboboxItem[]) {
+    this.items = items;
+    this.notifyChange();
+  }
+
+  setFilter(filter: string) {
+    this.filter = filter;
+    const filteredItems = this.getFilteredItems();
+
+    // Find exact match if it exists (case insensitive)
+    const exactMatchIndex = filteredItems.findIndex(
+      (item) =>
+        item.type !== "sectionHeader" &&
+        item.name.toLowerCase().startsWith(filter.toLowerCase())
+    );
+
+    // Find the first non-header item
+    const firstSelectableIndex = filteredItems.findIndex(
+      (item) => item.type !== "sectionHeader"
+    );
+
+    this.selectedIndex =
+      exactMatchIndex >= 0 ? exactMatchIndex : firstSelectableIndex;
+
+    this.notifyChange();
+  }
+
+  moveSelection(direction: "up" | "down") {
+    const filteredItems = this.getFilteredItems();
+    this.selectedIndex = getNextIndex(
+      filteredItems,
+      this.selectedIndex,
+      direction === "down" ? "next" : "previous",
+      (item) => item.type === "sectionHeader"
+    );
+    this.notifyChange();
+  }
+
+  selectCurrentItem(
+    item?: InternalComboboxItem
+  ): InternalComboboxItem | undefined {
+    const itemToSelect = item || this.getFilteredItems()[this.selectedIndex];
+    if (!itemToSelect || itemToSelect.type === "sectionHeader") {
+      // 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() {
+    this.filter = this.lastSubmittedValue.itemName;
+    this.notifyChange();
+  }
+
+  reset(newFilter = "") {
+    this.filter = newFilter;
+    this.selectedIndex = 0;
+    this.notifyChange();
+  }
+
+  getSelectedItem(): InternalComboboxItem | 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;
+  }
+
+  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
+      for (let i = index + 1; i < filteredItems.length; i++) {
+        if (filteredItems[i]?.type !== "sectionHeader") {
+          this.selectedIndex = i;
+          this.notifyChange();
+          return;
+        }
+      }
+      // If no next item, look backwards
+      for (let i = index - 1; i >= 0; i--) {
+        if (filteredItems[i]?.type !== "sectionHeader") {
+          this.selectedIndex = i;
+          this.notifyChange();
+          return;
+        }
+      }
+      // If no selectable items found, don't change selection
+      return;
+    }
+
+    this.selectedIndex = index;
+    this.notifyChange();
+  }
+
+  submitArbitraryFilter(filter: string) {
+    this.lastSubmittedValue = {
+      filter,
+      itemName: filter,
+    };
+    this.filter = filter;
+    this.notifyChange();
+  }
+}
+
+function filterWithGroupedSections(
+  items: ComboboxItem[],
+  query: string
+): InternalComboboxItem[] {
+  const sections = chunkBy(items, (_a, b) => b.type !== "sectionHeader");
+  let result: InternalComboboxItem[] = [];
+  let currentIndex = 0;
+
+  const createExtraItem = (
+    item: ComboboxOption,
+    index: number
+  ): InternalComboboxItem => ({
+    ...item,
+    index: currentIndex + index,
+    score: 0,
+  });
+
+  const createScoredItem = (
+    item: IScoredItem,
+    regular: ComboboxOption[]
+  ): InternalComboboxItem => ({
+    ...item,
+    ...regular[item.index],
+    index: currentIndex + item.index,
+  });
+
+  for (const section of sections) {
+    const [headers, regular] = partition(
+      section,
+      (item): item is ComboboxSectionHeader => item.type === "sectionHeader"
+    );
+
+    let newItems: InternalComboboxItem[];
+
+    if (!query.trim()) {
+      // For empty query, include all items with score 0
+      newItems = regular.map((item, index) => createExtraItem(item, index));
+    } else {
+      const scoredItems = fuzzyFilter({
+        items: regular.map((item) => item.name),
+        query,
+      });
+
+      const usedIndexes = new Set(scoredItems.map((item) => item.index));
+      const extraItems = regular.flatMap(
+        (item, index): InternalComboboxItem[] =>
+          item.alwaysInclude && !usedIndexes.has(index)
+            ? [createExtraItem(item, index)]
+            : []
+      );
+
+      newItems = scoredItems
+        .map((item) => createScoredItem(item, regular))
+        .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;
+
+      if (maxVisibleItems !== undefined) {
+        newItems = newItems.slice(0, maxVisibleItems);
+      }
+
+      result.push(...headers, ...newItems);
+    }
+
+    currentIndex += regular.length;
+  }
+
+  return result;
+}
+
+function getNextIndex<T>(
+  items: T[],
+  currentIndex: number,
+  direction: "next" | "previous",
+  isDisabled: (item: T) => boolean
+): number {
+  // Make sure the current index is within bounds
+  currentIndex =
+    currentIndex < 0
+      ? 0
+      : currentIndex >= items.length
+        ? items.length - 1
+        : currentIndex;
+
+  // If there are no valid items in the array, return -1
+  if (items.every(isDisabled)) return -1;
+
+  let nextIndex = currentIndex;
+
+  do {
+    // Move to the next or previous index, wrapping around if necessary
+    if (direction === "next") {
+      nextIndex = (nextIndex + 1) % items.length;
+    } else {
+      nextIndex = (nextIndex - 1 + items.length) % items.length;
+    }
+
+    // If we've looped all the way around without finding a valid item, return the current index
+    if (nextIndex === currentIndex) return currentIndex;
+  } while (isDisabled(items[nextIndex]));
+
+  return nextIndex;
+}
+
+export function useComboboxState(state: ComboboxState) {
+  return useSyncExternalStore(
+    state.subscribe,
+    state.getSnapshot,
+    state.getSnapshot
+  );
+}

package/tailwind.config.ts

@@ -46,7 +46,7 @@ const config = {
         "listview-editing-background": "var(--listview-editing-background)",
         "slider-thumb-background": "var(--slider-thumb-background)",
         "slider-border": "var(--slider-border)",
-        "radio-group-background": "var(--radio-group-background)",
+        "segmented-control-item": "var(--segmented-control-item)",
         mask: "var(--mask)",
         "transparent-checker": "var(--transparent-checker)",
         scrollbar: "var(--scrollbar)",
@@ -62,7 +62,6 @@ const config = {
         icon: "var(--icon)",
         "icon-selected": "var(--icon-selected)",
         warning: "var(--warning)",
-        "radio-group-item": "var(--radio-group-item)",
         dot: "var(--dot)",
         "row-highlight": "var(--row-highlight)",
         "table-row-background": "var(--table-row-background)",

package/src/components/RadioGroup.tsx

@@ -1,100 +0,0 @@
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import React, {
-  createContext,
-  forwardRef,
-  memo,
-  ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-} from "react";
-import { Tooltip } from "./Tooltip";
-
-type RadioGroupColorScheme = "primary" | "secondary";
-interface ItemProps {
-  value: string;
-  tooltip?: ReactNode;
-  children: ReactNode;
-  disabled?: boolean;
-}
-
-const ToggleGroupItem = forwardRef(function ToggleGroupItem(
-  { value, tooltip, children, disabled = false }: ItemProps,
-  forwardedRef: React.ForwardedRef<HTMLButtonElement>
-) {
-  const { colorScheme } = useContext(RadioGroupContext);
-
-  const itemElement = (
-    <ToggleGroupPrimitive.Item
-      ref={forwardedRef}
-      value={value}
-      disabled={disabled}
-      className={`font-sans text-heading5 font-normal relative flex-1 appearance-none border-none bg-none text-radio-group-item p-0 m-0 rounded inline-flex items-center justify-center align-middle focus:outline-none focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] aria-checked:bg-${colorScheme ? colorScheme : "radio-group-background"} aria-checked:text-${colorScheme ? "radio-group-background" : "text"} aria-checked:shadow-${colorScheme ? "none" : "0_1px_1px_rgba(0,0,0,0.1)"} focus:z-interactable`}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-
-  return tooltip ? (
-    <Tooltip content={tooltip}>{itemElement}</Tooltip>
-  ) : (
-    itemElement
-  );
-});
-
-type RadioGroupContextValue = {
-  /** @default primary */
-  colorScheme?: RadioGroupColorScheme;
-};
-
-const RadioGroupContext = createContext<RadioGroupContextValue>({
-  colorScheme: "primary",
-});
-
-interface Props {
-  id?: string;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  /** @default primary */
-  colorScheme?: RadioGroupColorScheme;
-  allowEmpty?: boolean;
-  children: ReactNode;
-}
-
-function ToggleGroupRoot({
-  id,
-  value,
-  onValueChange,
-  colorScheme,
-  allowEmpty,
-  children,
-}: Props) {
-  const contextValue = useMemo(() => ({ colorScheme }), [colorScheme]);
-
-  const handleValueChange = useCallback(
-    (value: string) => {
-      if (!allowEmpty && !value) return;
-      onValueChange?.(value);
-    },
-    [allowEmpty, onValueChange]
-  );
-
-  return (
-    <RadioGroupContext.Provider value={contextValue}>
-      <ToggleGroupPrimitive.Root
-        id={id}
-        type="single"
-        value={value}
-        onValueChange={handleValueChange}
-        className={`appearance-none w-0 flex-1 relative border-0 outline-none min-w-0 min-h-[27px] text-left self-stretch rounded bg-input-background items-stretch focus:shadow-[0_0_0_1px_var(--sidebar-background),0_0_0_3px_${colorScheme === "secondary" ? "var(--secondary)" : "var(--primary)"}] ${colorScheme ? "p-0" : "p-0.5"}`}
-      >
-        {children}
-      </ToggleGroupPrimitive.Root>
-    </RadioGroupContext.Provider>
-  );
-}
-
-export namespace RadioGroup {
-  export const Root = memo(ToggleGroupRoot);
-  export const Item = memo(ToggleGroupItem);
-}

package/src/utils/completions.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import { IScoredItem } from './fuzzyScorer';
-
-export type CompletionItem = {
-  type?: undefined;
-  id: string;
-  name: string;
-  icon?: ReactNode;
-  alwaysInclude?: boolean;
-};
-
-export type CompletionSectionHeader = {
-  type: 'sectionHeader';
-  id: string;
-  name: string;
-  maxVisibleItems?: number;
-};
-
-export type CompletionListItem =
-  | (CompletionItem & IScoredItem)
-  | CompletionSectionHeader;