@noya-app/noya-designsystem 0.1.44 → 0.1.46

package/src/components/Combobox.tsx

@@ -1,9 +1,8 @@
 import { DropdownChevronIcon } from "@noya-app/noya-icons";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
   FocusEventHandler,
   ForwardedRef,
-  forwardRef,
-  memo,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -11,25 +10,28 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
-import {
-  ComboboxItem,
-  ComboboxOption,
-  ComboboxState,
-  InternalComboboxItem,
-  useComboboxState,
-} from "../utils/combobox";
+import { ComboboxState, useComboboxState } from "../utils/combobox";
 import { ActivityIndicator } from "./ActivityIndicator";
 import { ComboboxMenu } from "./ComboboxMenu";
 import { InputField, InputFieldSize } from "./InputField";
+import {
+  MenuItem,
+  ScoredMenuItem,
+  SelectableMenuItem,
+  isMenuItemSectionHeader,
+  isNonSelectableMenuItem,
+  isSelectableMenuItem,
+} from "./internal/Menu";
 import { ListView } from "./ListView";
 import { Small } from "./Text";
 
-export type BaseComboboxProps = {
+export type BaseComboboxProps<T extends string> = {
   id?: string;
   loading?: boolean;
   placeholder?: string;
-  items: ComboboxItem[];
+  items: MenuItem<T>[];
   onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
   onDeleteWhenEmpty?: () => void;
   size?: InputFieldSize;
@@ -53,39 +55,42 @@ export type StringModeOnlyProps = {
   allowArbitraryValues?: boolean;
 };
 
-export type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
+export type StringModeProps<T extends string> = BaseComboboxProps<T> &
+  StringModeOnlyProps;
 
-export type OptionModeOnlyProps = {
+export type OptionModeOnlyProps<T extends string> = {
   mode?: "option";
-  value?: ComboboxOption;
-  onChange?: (value: ComboboxOption) => void;
-  onSelectItem?: (value: ComboboxOption) => void;
-  onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
-  onHoverItem?: (value: ComboboxOption | undefined) => void;
+  value?: SelectableMenuItem<T>;
+  onChange?: (value: SelectableMenuItem<T>) => void;
+  onSelectItem?: (value: SelectableMenuItem<T>) => void;
+  onBlur?: (didSubmit: boolean, value: SelectableMenuItem<T>) => void;
+  onHoverItem?: (value: SelectableMenuItem<T> | undefined) => void;
   allowArbitraryValues?: false;
 };
 
-export type OptionModeProps = BaseComboboxProps & OptionModeOnlyProps;
+export type OptionModeProps<T extends string> = BaseComboboxProps<T> &
+  OptionModeOnlyProps<T>;
 
-export type ComboboxProps = StringModeProps | OptionModeProps;
+export type ComboboxProps<T extends string> =
+  | StringModeProps<T>
+  | OptionModeProps<T>;
 
-export interface ComboboxRef {
+export interface ComboboxRef<T extends string> {
   focus(): void;
-  setValue(value: string | ComboboxOption): void;
+  setValue(value: string | SelectableMenuItem<T>): void;
   selectAllInputText(): void;
 }
 
-export const Combobox = memo(
-  forwardRef(function Combobox(
+export const Combobox = memoGeneric(
+  forwardRefGeneric(function Combobox<T extends string>(
     {
-      id,
       loading,
       placeholder,
       items,
       size,
       style,
       className,
-      label,
+      label: labelProp,
       children,
       hideMenuWhenEmptyValue = false,
       readOnly = false,
@@ -94,12 +99,12 @@ export const Combobox = memo(
       onFocus,
       onDeleteWhenEmpty,
       ...rest
-    }: ComboboxProps,
-    forwardedRef: ForwardedRef<ComboboxRef>
+    }: ComboboxProps<T>,
+    forwardedRef: ForwardedRef<ComboboxRef<T>>
   ) {
     // We make a separate props object for the mode-specific props for memoizing
     // since we put the props object into hook deps
-    const props = useMemo((): StringModeOnlyProps | OptionModeOnlyProps => {
+    const props = useMemo((): StringModeOnlyProps | OptionModeOnlyProps<T> => {
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
@@ -118,7 +123,7 @@ export const Combobox = memo(
           onSelectItem: rest.onSelectItem,
           onHoverItem: rest.onHoverItem,
           onBlur: rest.onBlur,
-        } satisfies OptionModeOnlyProps;
+        } satisfies OptionModeOnlyProps<T>;
       }
     }, [
       rest.mode,
@@ -136,7 +141,7 @@ export const Combobox = memo(
       if (props.mode === "string") {
         return props.value ?? "";
       } else {
-        return props.value?.name ?? "";
+        return props.value?.title?.toString() ?? "";
       }
     }
 
@@ -154,6 +159,9 @@ export const Combobox = memo(
     const [isFocused, setIsFocused] = useState(false);
     const listRef = useRef<ListView.VirtualizedList>(null);
     const [shouldBlur, setShouldBlur] = useState(false);
+    const { fieldId: id } = useLabel({
+      fieldId: rest.id,
+    });
 
     // Keep state in sync with items prop
     useEffect(() => {
@@ -185,7 +193,7 @@ export const Combobox = memo(
         );
       } else {
         const selectedItem = comboboxState.getSelectedItem();
-        if (selectedItem && selectedItem.type !== "sectionHeader") {
+        if (selectedItem && isSelectableMenuItem(selectedItem)) {
           props.onBlur?.(
             state.filter === state.lastSubmittedValue.filter,
             selectedItem
@@ -211,14 +219,14 @@ export const Combobox = memo(
     );
 
     const handleUpdateSelection = useCallback(
-      (item: InternalComboboxItem) => {
-        if (item.type === "sectionHeader") return;
+      (item: ScoredMenuItem<T>) => {
+        if (item.type !== undefined) return;
 
         const selectedItem = comboboxState.selectCurrentItem(item);
-        if (!selectedItem || selectedItem.type === "sectionHeader") return;
+        if (!selectedItem) return;
 
         if (props.mode === "string") {
-          props.onSelectItem?.(selectedItem.name);
+          props.onSelectItem?.(selectedItem.value);
           props.onHoverItem?.(undefined);
         } else {
           props.onSelectItem?.(selectedItem);
@@ -233,9 +241,9 @@ export const Combobox = memo(
       (index: number) => {
         comboboxState.setSelectedIndex(index);
         const item = comboboxState.getSelectedItem();
-        if (item && item.type !== "sectionHeader") {
+        if (item && isSelectableMenuItem(item)) {
           if (props.mode === "string") {
-            props.onHoverItem?.(item.name);
+            props.onHoverItem?.(item.value);
           } else {
             props.onHoverItem?.(item);
           }
@@ -254,7 +262,7 @@ export const Combobox = memo(
           props.onChange?.(value);
         } else {
           const selectedItem = comboboxState.getSelectedItem();
-          if (selectedItem && selectedItem.type !== "sectionHeader") {
+          if (selectedItem && isSelectableMenuItem(selectedItem)) {
             props.onChange?.(selectedItem);
           }
         }
@@ -308,14 +316,17 @@ export const Combobox = memo(
               } else {
                 // In autocomplete mode:
                 // 1. Always set the filter to the selected item
-                // 2. If the filter matches the item name, submit it
+                // 2. If the filter matches the item value, submit it
                 event.preventDefault();
                 event.stopPropagation();
-                if (item.name === filter) {
-                  handleUpdateSelection(item);
-                } else {
-                  comboboxState.setFilter(item.name);
-                  ref.current?.focus();
+                if (isNonSelectableMenuItem(item)) return;
+                if (isSelectableMenuItem(item)) {
+                  if (item.value === filter) {
+                    handleUpdateSelection(item);
+                  } else {
+                    comboboxState.setFilter(item.value?.toString() ?? "");
+                    ref.current?.focus();
+                  }
                 }
                 handled = true;
               }
@@ -374,11 +385,11 @@ export const Combobox = memo(
           ref.current.setSelectionRange(length, length);
         }
       },
-      setValue: (value: string | ComboboxOption) => {
+      setValue: (value: string | SelectableMenuItem<T>) => {
         if (typeof value === "string") {
           comboboxState.setFilter(value);
         } else {
-          comboboxState.setFilter(value.name);
+          comboboxState.setFilter(value.value);
         }
       },
       selectAllInputText: () => {
@@ -418,6 +429,18 @@ export const Combobox = memo(
       handleBlur();
     }, [shouldBlur, handleBlur]);
 
+    const { sectionHeaderCount, menuItemsCount } = useMemo(
+      () => ({
+        sectionHeaderCount: filteredItems.filter((item) =>
+          isMenuItemSectionHeader(item)
+        ).length,
+        menuItemsCount: filteredItems.filter((item) =>
+          isSelectableMenuItem(item)
+        ).length,
+      }),
+      [filteredItems]
+    );
+
     return (
       <InputField.Root
         id={id}
@@ -425,13 +448,10 @@ export const Combobox = memo(
         sideOffset={6}
         renderPopoverContent={({ width }) => {
           const height = Math.min(
-            ListView.calculateHeight(
-              filteredItems.filter((item) => item.type !== "sectionHeader")
-                .length,
-              filteredItems.filter((item) => item.type === "sectionHeader")
-                .length,
-              "label"
-            ),
+            ListView.calculateHeight({
+              menuItemsCount,
+              sectionHeaderCount,
+            }),
             ListView.rowHeight * 10.5
           );
 
@@ -500,11 +520,10 @@ export const Combobox = memo(
           )}
         {children}
         {loading && (
-          <InputField.Label>
+          <InputField.Label htmlFor={id}>
             <ActivityIndicator />
           </InputField.Label>
         )}
-        <InputField.Label>{label}</InputField.Label>
         {!readOnly && (
           <InputField.Button variant="floating" onClick={handleChevronClick}>
             <DropdownChevronIcon

package/src/components/ComboboxMenu.tsx

@@ -1,22 +1,32 @@
 import { Size } from "@noya-app/noya-geometry";
-import React, { ForwardedRef, forwardRef, memo } from "react";
+import { CheckIcon } from "@noya-app/noya-icons";
+import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
+import React, { ForwardedRef } from "react";
 import { cx } from "../utils/classNames";
-import { InternalComboboxItem } from "../utils/combobox";
+
 import { fuzzyTokenize } from "../utils/fuzzyScorer";
+import { renderIcon } from "./Icons";
 import { IVirtualizedList, ListView } from "./ListView";
 import { Spacer } from "./Spacer";
+import {
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  KeyboardShortcut,
+  ScoredMenuItem,
+  styles,
+} from "./internal/Menu";
 
-interface ComboboxMenuProps {
-  items: InternalComboboxItem[];
+interface ComboboxMenuProps<T extends string> {
+  items: ScoredMenuItem<T>[];
   selectedIndex: number;
-  onSelectItem: (item: InternalComboboxItem) => void;
+  onSelectItem: (item: ScoredMenuItem<T>) => void;
   onHoverIndex: (index: number) => void;
   listSize: Size;
   style?: React.CSSProperties;
 }
 
-export const ComboboxMenu = memo(
-  forwardRef(function ComboboxMenu(
+export const ComboboxMenu = memoGeneric(
+  forwardRefGeneric(function ComboboxMenu<T extends string>(
     {
       items,
       selectedIndex,
@@ -24,14 +34,22 @@ export const ComboboxMenu = memo(
       onHoverIndex,
       listSize,
       style,
-    }: ComboboxMenuProps,
+    }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
+    const hasCheckedItems = items
+      .filter((item) => item.type === undefined)
+      .some((item) => item.checked);
+
     return (
       <ListView.Root
         ref={forwardedRef}
         scrollable
-        keyExtractor={(item) => item.id}
+        keyExtractor={(item: ScoredMenuItem<T>) => {
+          if (item.type === "sectionHeader") return item.id;
+
+          return item.value;
+        }}
         data={items}
         virtualized={listSize}
         pressEventName="onPointerDown"
@@ -41,42 +59,57 @@ export const ComboboxMenu = memo(
           if (item.type === "sectionHeader") {
             return (
               <ListView.Row key={item.id} isSectionHeader>
-                {item.name}
+                {item.title}
               </ListView.Row>
             );
           }
 
           const tokens = fuzzyTokenize({
-            item: item.name,
+            item: typeof item.title === "string" ? item.title : item.value,
             itemScore: item,
           });
 
           return (
             <ListView.Row
-              key={item.id}
+              key={item.value}
               selected={i === selectedIndex}
-              onPress={() => onSelectItem(item)}
+              disabled={item.disabled}
+              onPress={() => !item.disabled && onSelectItem(item)}
               onHoverChange={(hovered) => {
-                if (hovered) {
+                if (hovered && !item.disabled) {
                   onHoverIndex(i);
                 }
               }}
             >
-              {tokens.map((token, j) => (
-                <span
-                  key={`${item.id}-token-${j}`}
-                  className={cx(
-                    token.type === "match" ? "font-bold" : "font-normal",
-                    "whitespace-pre"
-                  )}
-                >
-                  {token.text}
-                </span>
-              ))}
-              {item.icon && (
+              <div className="flex flex-1 min-w-0 items-center">
+                {item.checked ? (
+                  <div className={styles.itemIndicatorStyle}>
+                    <CheckIcon />
+                  </div>
+                ) : hasCheckedItems ? (
+                  <Spacer.Horizontal
+                    size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET}
+                  />
+                ) : null}
+                {tokens.map((token, j) => (
+                  <span
+                    key={`${item.value}-token-${j}`}
+                    className={cx(
+                      token.type === "match" ? "font-bold" : "font-normal",
+                      "whitespace-pre truncate"
+                    )}
+                  >
+                    {token.text}
+                  </span>
+                ))}
+              </div>
+              {(item.shortcut || item.icon) && (
                 <>
-                  <Spacer.Horizontal />
-                  {item.icon}
+                  {item.shortcut ? (
+                    <KeyboardShortcut shortcut={item.shortcut} />
+                  ) : (
+                    item.icon && renderIcon(item.icon)
+                  )}
                 </>
               )}
             </ListView.Row>

package/src/components/CommandPalette.tsx

@@ -0,0 +1,69 @@
+import { Dialog } from "@noya-app/noya-designsystem";
+import { AutoSizer } from "@noya-app/react-utils";
+import React, { memo } from "react";
+import {
+  ISearchCompletionMenu,
+  SearchCompletionMenu,
+} from "./SearchCompletionMenu";
+
+export const CommandPalette = memo(function CommandPalette({
+  showCommandPalette,
+  setShowCommandPalette,
+  items,
+  onSelect,
+  onHover,
+}: {
+  showCommandPalette: boolean;
+  setShowCommandPalette: (value: boolean) => void;
+} & Pick<
+  React.ComponentProps<typeof SearchCompletionMenu>,
+  "items" | "onSelect" | "onHover"
+>) {
+  const menuRef = React.useRef<ISearchCompletionMenu>(null);
+
+  const handleClose = React.useCallback(() => {
+    setShowCommandPalette(false);
+  }, [setShowCommandPalette]);
+
+  return (
+    <Dialog
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        maxWidth: "500px",
+        minHeight: "100px",
+        padding: "1px",
+        top: "100px",
+        left: "50%",
+        transform: "translate(-50%, 0)",
+      }}
+      showCloseButton={false}
+      open={showCommandPalette}
+      onOpenChange={(value) => {
+        setShowCommandPalette(value);
+      }}
+      closeOnInteractOutside
+      onOpenAutoFocus={() => {
+        menuRef.current?.focus();
+        setTimeout(() => {
+          menuRef.current?.focus();
+        }, 0);
+      }}
+    >
+      <div className="flex flex-col flex-1">
+        <AutoSizer>
+          {(size) => (
+            <SearchCompletionMenu
+              ref={menuRef}
+              width={size.width}
+              items={items}
+              onSelect={onSelect}
+              onHover={onHover}
+              onClose={handleClose}
+            />
+          )}
+        </AutoSizer>
+      </div>
+    </Dialog>
+  );
+});