@noya-app/noya-designsystem 0.1.43 → 0.1.45

package/package.json

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

package/src/components/AnimatePresence.tsx

@@ -32,6 +32,7 @@ type AnimatePresenceProps = {
    * "crossfade" - crossfade between the previous and next animation
    */
   mode?: "wait" | "crossfade";
+  className?: string;
 };
 
 const defaultDuration = 150;
@@ -42,6 +43,7 @@ type PresenceChildProps = {
   isPresent: boolean;
   onExitComplete: () => void;
   waitingToEnter?: boolean;
+  className?: string;
 } & Pick<
   AnimatePresenceProps,
   "animationStyles" | "children" | "duration" | "skipInitialAnimation"
@@ -71,6 +73,7 @@ const PresenceChild = ({
   animationStyles,
   onExitComplete,
   skipInitialAnimation,
+  className,
 }: PresenceChildProps) => {
   const [animationState, setAnimationState] = useState<AnimationState>(() =>
     skipInitialAnimation && isPresent
@@ -131,7 +134,11 @@ const PresenceChild = ({
     return null;
   }
 
-  return <div style={mergedAnimationStyles[animationState]}>{children}</div>;
+  return (
+    <div style={mergedAnimationStyles[animationState]} className={className}>
+      {children}
+    </div>
+  );
 };
 
 type MountedChild = {
@@ -146,6 +153,7 @@ export const AnimatePresence = ({
   animationStyles,
   skipInitialAnimation,
   mode = "wait",
+  className,
 }: AnimatePresenceProps) => {
   const [mountedChildren, setMountedChildren] = useState<MountedChild[]>([]);
   const previousChildrenRef = useRef<React.ReactElement[]>([]);
@@ -250,6 +258,7 @@ export const AnimatePresence = ({
           isPresent={isPresent}
           skipInitialAnimation={skipInitialAnimation}
           onExitComplete={() => removeChild(child.key?.toString() ?? "")}
+          className={className}
         >
           {child}
         </PresenceChild>

package/src/components/Avatar.tsx

@@ -140,6 +140,7 @@ export const Avatar = React.memo(
       backgroundColor,
       variant = "normal",
       children,
+      className,
       ...props
     }: AvatarProps,
     forwardedRef: React.ForwardedRef<HTMLDivElement>
@@ -153,6 +154,7 @@ export const Avatar = React.memo(
         size={size}
         backgroundColor={getBackgroundColor}
         variant={variant}
+        className={className}
         {...props}
       >
         {image ? (

package/src/components/Checkbox.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 
 interface CheckboxProps
@@ -17,6 +18,7 @@ export const Checkbox = React.memo(
     { className, style, colorScheme = "secondary", ...props },
     ref
   ) {
+    const { fieldId: id } = useLabel({ fieldId: props.id });
     return (
       <div
         className={cx(
@@ -47,8 +49,10 @@ export const Checkbox = React.memo(
             focus:ring-offset-1
             focus:z-interactable
             transition-all
-          `}
+            `}
+          aria-checked={props.checked}
           {...props}
+          id={id}
         />
         <svg
           className={`
@@ -66,6 +70,7 @@ export const Checkbox = React.memo(
           viewBox="0 0 16 16"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
         >
           <path
             d="M3 6L4.5 7.5L8 4"

package/src/components/Combobox.tsx

@@ -11,6 +11,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useLabel } from "../hooks/useLabel";
 import { cx } from "../utils/classNames";
 import {
   ComboboxItem,
@@ -45,7 +46,7 @@ export type BaseComboboxProps = {
 
 export type StringModeOnlyProps = {
   mode: "string";
-  initialValue?: string;
+  value?: string;
   onChange?: (value: string) => void;
   onSelectItem?: (value: string) => void;
   onBlur?: (didSubmit: boolean, value: string) => void;
@@ -57,7 +58,7 @@ export type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
 
 export type OptionModeOnlyProps = {
   mode?: "option";
-  initialValue?: ComboboxOption;
+  value?: ComboboxOption;
   onChange?: (value: ComboboxOption) => void;
   onSelectItem?: (value: ComboboxOption) => void;
   onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
@@ -78,14 +79,13 @@ export interface ComboboxRef {
 export const Combobox = memo(
   forwardRef(function Combobox(
     {
-      id,
       loading,
       placeholder,
       items,
       size,
       style,
       className,
-      label,
+      label: labelProp,
       children,
       hideMenuWhenEmptyValue = false,
       readOnly = false,
@@ -103,7 +103,7 @@ export const Combobox = memo(
       if (rest.mode === "string") {
         return {
           mode: rest.mode,
-          initialValue: rest.initialValue,
+          value: rest.value,
           onChange: rest.onChange,
           onSelectItem: rest.onSelectItem,
           onHoverItem: rest.onHoverItem,
@@ -113,7 +113,7 @@ export const Combobox = memo(
       } else {
         return {
           mode: rest.mode,
-          initialValue: rest.initialValue,
+          value: rest.value,
           onChange: rest.onChange,
           onSelectItem: rest.onSelectItem,
           onHoverItem: rest.onHoverItem,
@@ -122,7 +122,7 @@ export const Combobox = memo(
       }
     }, [
       rest.mode,
-      rest.initialValue,
+      rest.value,
       rest.onChange,
       rest.onSelectItem,
       rest.onHoverItem,
@@ -131,10 +131,17 @@ export const Combobox = memo(
     ]);
 
     const ref = useRef<HTMLInputElement>(null);
-    const initialValueString =
-      typeof props.initialValue === "string"
-        ? props.initialValue
-        : props.initialValue?.name ?? "";
+
+    function getInitialValueString() {
+      if (props.mode === "string") {
+        return props.value ?? "";
+      } else {
+        return props.value?.name ?? "";
+      }
+    }
+
+    const initialValueString = getInitialValueString();
+
     const [comboboxState] = useState(
       () =>
         new ComboboxState(
@@ -147,12 +154,19 @@ 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(() => {
       comboboxState.setItems(items);
     }, [items, comboboxState]);
 
+    useEffect(() => {
+      comboboxState.setFilter(initialValueString);
+    }, [comboboxState, initialValueString]);
+
     const { filter, selectedIndex, filteredItems } = state;
 
     const shouldShowMenu =
@@ -401,9 +415,10 @@ export const Combobox = memo(
 
     useEffect(() => {
       if (!shouldBlur) return;
+      if (document.activeElement !== ref.current) return;
+      setShouldBlur(false);
       ref.current?.focus();
       handleBlur();
-      setShouldBlur(false);
     }, [shouldBlur, handleBlur]);
 
     return (
@@ -488,11 +503,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,10 +1,13 @@
 import { Size } from "@noya-app/noya-geometry";
+import { CheckIcon } from "@noya-app/noya-icons";
 import React, { ForwardedRef, forwardRef, memo } 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 { KeyboardShortcut, styles } from "./internal/Menu";
 
 interface ComboboxMenuProps {
   items: InternalComboboxItem[];
@@ -55,28 +58,40 @@ export const ComboboxMenu = memo(
             <ListView.Row
               key={item.id}
               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 items-center">
+                {item.checked && (
+                  <div className={styles.itemIndicatorStyle}>
+                    <CheckIcon />
+                  </div>
+                )}
+                {tokens.map((token, j) => (
+                  <span
+                    key={`${item.id}-token-${j}`}
+                    className={cx(
+                      token.type === "match" ? "font-bold" : "font-normal",
+                      "whitespace-pre"
+                    )}
+                  >
+                    {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>
+  );
+});

package/src/components/ContextMenu.tsx

@@ -1,19 +1,13 @@
-import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
 import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import { memoGeneric } from "@noya-app/react-utils";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React, { ReactNode, useCallback, useMemo } from "react";
-import { renderIcon } from "./Icons";
-import { Spacer } from "./Spacer";
 import {
-  CHECKBOX_RIGHT_INSET,
-  CHECKBOX_WIDTH,
-  KeyboardShortcut,
   MenuItem,
-  SEPARATOR_ITEM,
   getKeyboardShortcutsForMenuItems,
   styles,
 } from "./internal/Menu";
+import { MenuViewport } from "./internal/MenuViewport";
 
 export interface MenuItemProps<T extends string> {
   value?: T;
@@ -27,90 +21,17 @@ export interface MenuItemProps<T extends string> {
   items?: MenuItem<T>[];
 }
 
-const ContextMenuItem = memoGeneric(function ContextMenuItem<T extends string>({
-  value,
-  children,
-  onSelect,
-  checked,
-  disabled,
-  indented,
-  icon,
-  items,
-  shortcut,
-}: MenuItemProps<T>) {
-  // The pointer event within the context menu will bubble outside of the
-  // context menu unless we stop it here.
-  const handlePointerDown = useCallback(
-    (event: React.PointerEvent) => event.stopPropagation(),
-    []
-  );
-
-  const handleSelectItem = useCallback(() => {
-    if (!value) return;
-
-    onSelect(value);
-  }, [onSelect, value]);
-
-  if (checked) {
-    return (
-      <RadixContextMenu.CheckboxItem
-        checked={checked}
-        disabled={disabled}
-        onSelect={handleSelectItem}
-        className={styles.itemStyle({ disabled })}
-      >
-        <RadixContextMenu.ItemIndicator className={styles.itemIndicatorStyle}>
-          <CheckIcon />
-        </RadixContextMenu.ItemIndicator>
-        {children}
-      </RadixContextMenu.CheckboxItem>
-    );
-  }
-
-  const element = (
-    <RadixContextMenu.Item
-      className={styles.itemStyle({ disabled })}
-      disabled={disabled}
-      onSelect={handleSelectItem}
-      onPointerDown={handlePointerDown}
-    >
-      {indented && (
-        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
-      )}
-      {icon && (
-        <>
-          {renderIcon(icon)}
-          <Spacer.Horizontal size={8} />
-        </>
-      )}
-      {children}
-      {shortcut && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={24} />
-          <KeyboardShortcut shortcut={shortcut} />
-        </>
-      )}
-      {items && items.length > 0 && (
-        <>
-          <Spacer.Horizontal />
-          <Spacer.Horizontal size={16} />
-          <ChevronRightIcon />
-        </>
-      )}
-    </RadixContextMenu.Item>
-  );
-
-  if (items && items.length > 0) {
-    return (
-      <ContextMenuRoot isNested items={items} onSelect={onSelect}>
-        {element}
-      </ContextMenuRoot>
-    );
-  } else {
-    return element;
-  }
-});
+const Components = {
+  Separator: RadixContextMenu.Separator,
+  ItemText: React.Fragment,
+  Item: RadixContextMenu.Item,
+  CheckboxItem: RadixContextMenu.CheckboxItem,
+  ItemIndicator: RadixContextMenu.ItemIndicator,
+  SubTrigger: RadixContextMenu.SubTrigger,
+  SubContent: RadixContextMenu.SubContent,
+  Sub: RadixContextMenu.Sub,
+  Portal: RadixContextMenu.Portal,
+};
 
 /* ----------------------------------------------------------------------------
  * Root
@@ -120,7 +41,6 @@ export interface MenuProps<T extends string> {
   children: ReactNode;
   items: MenuItem<T>[];
   onSelect: (value: T) => void;
-  isNested?: boolean;
   shouldBindKeyboardShortcuts?: boolean;
   onOpenChange?: (open: boolean) => void;
 }
@@ -129,20 +49,15 @@ function ContextMenuRoot<T extends string>({
   items,
   children,
   onSelect,
-  isNested,
   shouldBindKeyboardShortcuts,
   onOpenChange,
 }: MenuProps<T>) {
-  const hasCheckedItem = items.some(
-    (item) => item !== SEPARATOR_ITEM && item.checked
-  );
-
   const keymap = useMemo(
     () =>
-      isNested || shouldBindKeyboardShortcuts === false
+      shouldBindKeyboardShortcuts === false
         ? {}
         : getKeyboardShortcutsForMenuItems(items, onSelect),
-    [isNested, items, onSelect, shouldBindKeyboardShortcuts]
+    [items, onSelect, shouldBindKeyboardShortcuts]
   );
 
   useKeyboardShortcuts(keymap);
@@ -155,46 +70,30 @@ function ContextMenuRoot<T extends string>({
     event.preventDefault();
   }, []);
 
-  const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
-  const TriggerComponent = isNested
-    ? RadixContextMenu.SubTrigger
-    : RadixContextMenu.Trigger;
-  const ContentComponent: typeof RadixContextMenu.Content = isNested
-    ? RadixContextMenu.SubContent
-    : RadixContextMenu.Content;
+  const handleSelectItem = useCallback(
+    (value: T) => {
+      if (!value) return;
+
+      onSelect(value);
+    },
+    [onSelect]
+  );
 
   return (
-    <RootComponent onOpenChange={onOpenChange}>
-      <TriggerComponent asChild onPointerDown={onPointerDown}>
+    <RadixContextMenu.Root onOpenChange={onOpenChange}>
+      <RadixContextMenu.Trigger asChild onPointerDown={onPointerDown}>
         {children}
-      </TriggerComponent>
+      </RadixContextMenu.Trigger>
       <RadixContextMenu.Portal>
-        <ContentComponent className={styles.contentStyle}>
-          {items.map((item, index) =>
-            item === SEPARATOR_ITEM ? (
-              <RadixContextMenu.Separator
-                key={index}
-                className={styles.separatorStyle}
-              />
-            ) : (
-              <ContextMenuItem
-                key={item.value ?? index}
-                value={item.value}
-                indented={hasCheckedItem}
-                checked={item.checked ?? false}
-                disabled={item.disabled ?? false}
-                icon={item.icon}
-                onSelect={onSelect}
-                items={item.items}
-                shortcut={item.shortcut}
-              >
-                {item.title}
-              </ContextMenuItem>
-            )
-          )}
-        </ContentComponent>
+        <RadixContextMenu.Content className={styles.contentStyle}>
+          <MenuViewport
+            items={items}
+            Components={Components}
+            onSelect={handleSelectItem}
+          />
+        </RadixContextMenu.Content>
       </RadixContextMenu.Portal>
-    </RootComponent>
+    </RadixContextMenu.Root>
   );
 }