@noya-app/noya-designsystem 0.1.47 → 0.1.48

package/src/components/MediaThumbnail.tsx

@@ -0,0 +1,117 @@
+import { ImageIcon, SpeakerLoudIcon, VideoIcon } from "@noya-app/noya-icons";
+import React, { memo, useMemo } from "react";
+import { cssVars } from "../theme";
+import { cx } from "../utils/classNames";
+import { IconName, Icons } from "./Icons";
+
+type ColorScheme = "primary" | "icon" | "warning";
+
+type AssetType = "image" | "video" | "audio";
+
+const getAssetType = (contentType?: string): AssetType | undefined => {
+  if (!contentType) return undefined;
+  if (contentType.startsWith("image/")) return "image";
+  if (contentType.startsWith("video/")) return "video";
+  if (contentType.startsWith("audio/")) return "audio";
+  return undefined;
+};
+
+type MediaThumbnailProps = {
+  contentType?: string;
+  url?: string;
+  selected?: boolean;
+  className?: string;
+  /** Color scheme for the thumbnail. Affects icon color and background.
+   * @default "icon"
+   */
+  colorScheme?: ColorScheme;
+  /**
+   * If provided, use this icon instead of the default one for the asset type
+   */
+  iconName?: IconName;
+};
+
+const getColors = (colorScheme: ColorScheme, selected: boolean) => {
+  if (selected) {
+    return {
+      icon: cssVars.colors.primary,
+      background: cssVars.colors.primaryPastel,
+    };
+  }
+
+  switch (colorScheme) {
+    case "primary":
+      return {
+        icon: cssVars.colors.primary,
+        background: cssVars.colors.inputBackground,
+      };
+    case "warning":
+      return {
+        icon: cssVars.colors.warning,
+        background: cssVars.colors.inputBackground,
+      };
+    case "icon":
+    default:
+      return {
+        icon: cssVars.colors.icon,
+        background: cssVars.colors.inputBackground,
+      };
+  }
+};
+
+const iconStyles = {
+  width: "max(15px, 20%)",
+  height: "max(15px, 20%)",
+};
+
+export const MediaThumbnail = memo(function MediaThumbnail({
+  contentType: contentTypeProp,
+  selected = false,
+  className,
+  colorScheme = "icon",
+  url,
+  iconName = "FileIcon",
+}: MediaThumbnailProps) {
+  const { icon: iconColor, background: backgroundColor } = getColors(
+    colorScheme,
+    selected
+  );
+  const contentType = getAssetType(contentTypeProp);
+
+  const content = useMemo(() => {
+    switch (contentType) {
+      case "image":
+        if (!url) return <ImageIcon color={iconColor} style={iconStyles} />;
+        return (
+          <img
+            src={url}
+            alt=""
+            className="object-contain w-full h-full"
+            tabIndex={-1}
+          />
+        );
+
+      case "video":
+        return <VideoIcon color={iconColor} style={iconStyles} />;
+
+      case "audio":
+        return <SpeakerLoudIcon color={iconColor} style={iconStyles} />;
+
+      default:
+        const Icon = Icons[iconName];
+        return <Icon color={iconColor} style={iconStyles} />;
+    }
+  }, [contentType, url, iconColor, iconName]);
+
+  return (
+    <div
+      className={cx(
+        "w-full h-full justify-center flex items-center aspect-square",
+        className
+      )}
+      style={{ backgroundColor }}
+    >
+      {content}
+    </div>
+  );
+});

package/src/components/SearchCompletionMenu.tsx

@@ -1,16 +1,3 @@
-import {
-  ComboboxMenu,
-  Divider,
-  IScoredItem,
-  InputField,
-  ListView,
-  SelectableMenuItem,
-  Small,
-  cssVars,
-  fuzzyFilter,
-  getNextIndex,
-  isSelectableMenuItem,
-} from "@noya-app/noya-designsystem";
 import { getCurrentPlatform, handleKeyboardEvent } from "@noya-app/noya-keymap";
 import React, {
   forwardRef,
@@ -21,6 +8,21 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { cssVars } from "../theme";
+import { getNextIndex } from "../utils/combobox";
+import { fuzzyFilter, IScoredItem } from "../utils/fuzzyScorer";
+import { ComboboxMenu } from "./ComboboxMenu";
+import { Divider } from "./Divider";
+import { InputField } from "./InputField";
+import {
+  CHECKBOX_INDENT_WIDTH,
+  CHECKBOX_RIGHT_INSET,
+  CHECKBOX_WIDTH,
+  isSelectableMenuItem,
+  SelectableMenuItem,
+} from "./internal/Menu";
+import { ListView } from "./ListView";
+import { Small } from "./Text";
 
 export interface ISearchCompletionMenu {
   focus: () => void;
@@ -33,17 +35,21 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
     onClose,
     items,
     width = 200,
+    testSelectedIndex,
+    testSearch,
   }: {
     onSelect: (item: SelectableMenuItem<string>) => void;
     onHover?: (item: SelectableMenuItem<string>) => void;
     onClose: () => void;
     items: SelectableMenuItem<string>[];
     width?: number;
+    testSelectedIndex?: number;
+    testSearch?: string;
   },
   forwardedRef: React.ForwardedRef<ISearchCompletionMenu>
 ) {
   const [state, setState] = useState({
-    search: "",
+    search: testSearch ?? "",
     index: 0,
   });
 
@@ -51,6 +57,8 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
 
   const listRef = React.useRef<ListView.VirtualizedList>(null);
 
+  const hasCheckedItems = items.some((item) => item.checked);
+
   useEffect(() => {
     listRef.current?.scrollToIndex(index);
   }, [index]);
@@ -157,7 +165,12 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
             outline: "none",
             boxShadow: "none",
             backgroundColor: cssVars.colors.inputBackground,
-            padding: "4px 12px",
+            paddingTop: "4px",
+            paddingBottom: "4px",
+            paddingLeft: hasCheckedItems
+              ? `${CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + 12 + CHECKBOX_INDENT_WIDTH}px`
+              : "12px",
+            paddingRight: "12px",
           }}
           onChange={setSearch}
           onKeyDown={handleKeyDown}
@@ -169,13 +182,14 @@ export const SearchCompletionMenu = forwardRef(function SearchCompletionMenu(
           ref={listRef}
           listSize={listSize}
           items={results}
-          selectedIndex={index}
+          selectedIndex={testSelectedIndex ?? index}
           onSelectItem={(item) => {
             if (isSelectableMenuItem(item)) {
               selectAndClose(item);
             }
           }}
           onHoverIndex={setIndex}
+          indented={hasCheckedItems}
         />
       ) : (
         <div

package/src/components/SelectMenu.tsx

@@ -93,7 +93,7 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         id={id}
         style={style}
         className={cx(
-          className ?? "flex w-full gap-1.5",
+          className ?? "flex w-full",
           "flex-1 focus:z-interactable relative",
           isOpen && "ring-2 ring-primary"
         )}
@@ -108,15 +108,12 @@ const SelectMenuTrigger = memoGeneric(function SelectMenuTrigger({
         <span className="flex-1 flex">
           <Select.Value placeholder={placeholder} />
         </span>
-
-        <span className="px-0.5">
-          <DropdownChevronIcon
-            className={cx(
-              "transition-transform duration-100",
-              isOpen ? "rotate-180" : "rotate-0"
-            )}
-          />
-        </span>
+        <DropdownChevronIcon
+          className={cx(
+            "transition-transform duration-100 ml-1.5",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        />
       </Button>
     </Select.SelectTrigger>
   );
@@ -143,7 +140,7 @@ export const SelectMenu = memoGeneric(function SelectMenu<
   onFocus,
   onBlur,
   onOpenChange,
-  contentStyle,
+  contentStyle: contentStyleProp,
   ...props
 }: Props<T>) {
   const selectedItem = items.find(
@@ -181,6 +178,15 @@ export const SelectMenu = memoGeneric(function SelectMenu<
     [icon, id, style, className, disabled, value, selectedItem]
   );
 
+  const contentStyle = useMemo(() => {
+    return {
+      width: "var(--radix-select-trigger-width)",
+      minWidth: "max-content",
+      maxHeight: "500px",
+      ...contentStyleProp,
+    };
+  }, [contentStyleProp]);
+
   const content = (
     <Select.Root
       value={value}
@@ -206,12 +212,8 @@ export const SelectMenu = memoGeneric(function SelectMenu<
           position="popper"
           sideOffset={6}
           collisionPadding={8}
-          align="end"
-          style={{
-            width: "var(--radix-select-trigger-width)",
-            maxHeight: "500px",
-            ...contentStyle,
-          }}
+          align="center"
+          style={contentStyle}
         >
           <Select.ScrollUpButton className={scrollButtonStyles}>
             <ChevronUpIcon

package/src/components/Sortable.tsx

@@ -6,11 +6,13 @@ import {
   DragOverlay,
   DragStartEvent,
   PointerSensor,
-  Translate,
+  UniqueIdentifier,
+  useDndContext,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
 import {
+  horizontalListSortingStrategy,
   SortableContext,
   useSortable,
   verticalListSortingStrategy,
@@ -34,7 +36,7 @@ export const normalizeListDestinationIndex = (
   return position === "above" ? index : index + 1;
 };
 
-const defaultAcceptsDrop: DropValidator = (
+export const defaultAcceptsDrop: DropValidator = (
   sourceIndex,
   destinationIndex,
   position
@@ -51,34 +53,47 @@ const defaultAcceptsDrop: DropValidator = (
 };
 
 const SortableItemContext = React.createContext<{
-  keys: string[];
-  position: Translate;
+  keys: UniqueIdentifier[];
   acceptsDrop: DropValidator;
-  setActivatorEvent: (event: PointerEvent) => void;
   axis: "x" | "y";
+  position: { x: number; y: number };
+  setActivatorEvent: (event: PointerEvent) => void;
 }>({
   keys: [],
-  position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
-  setActivatorEvent: () => {},
   axis: "y",
+  position: { x: 0, y: 0 },
+  setActivatorEvent: () => {},
 });
 
-function validateDropIndicator(
-  acceptsDrop: DropValidator,
-  keys: string[],
-  activeId: string,
-  overId: string,
-  offsetStart: number,
-  elementStart: number,
-  elementSize: number
-): RelativeDropPosition | undefined {
-  const activeIndex = keys.indexOf(activeId);
-  const overIndex = keys.indexOf(overId);
+type ValidateDropIndicatorParams = {
+  acceptsDrop: DropValidator; // Function that validates if a drop is allowed
+  keys: UniqueIdentifier[]; // Array of all sortable item IDs
+  activeId: UniqueIdentifier; // ID of item being dragged
+  overId: UniqueIdentifier; // ID of item being dragged over
+  offsetStart: number; // Current drag position (x or y coordinate)
+  elementStart: number; // Start position of target element (left or top)
+  elementSize: number; // Size of target element (width or height)
+};
+
+export function validateDropIndicator({
+  acceptsDrop,
+  keys,
+  activeId,
+  overId,
+  offsetStart,
+  elementStart,
+  elementSize,
+}: ValidateDropIndicatorParams): RelativeDropPosition | undefined {
+  const activeIndex = keys.findIndex((id) => id === activeId); // index of item being dragged
+  const overIndex = keys.findIndex((id) => id === overId); // index of item being dragged over
+
+  if (activeIndex === -1 || overIndex === -1) return undefined;
 
   const acceptsDropInside = acceptsDrop(activeIndex, overIndex, "inside");
 
-  // If we're in the center of the element, prefer dropping inside
+  // If cursor is in the middle third of the element (between 1/3 and 2/3)
+  // and dropping inside is allowed, show "inside" indicator
   if (
     offsetStart >= elementStart + elementSize / 3 &&
     offsetStart <= elementStart + (elementSize * 2) / 3 &&
@@ -89,7 +104,6 @@ function validateDropIndicator(
   // Are we over the top or bottom half of the element?
   const indicator =
     offsetStart < elementStart + elementSize / 2 ? "above" : "below";
-
   // Drop above or below if possible, falling back to inside
   return acceptsDrop(activeIndex, overIndex, indicator)
     ? indicator
@@ -105,13 +119,13 @@ function validateDropIndicator(
 type UseSortableReturnType = ReturnType<typeof useSortable>;
 
 interface ItemProps<T> {
-  id: string;
+  id: UniqueIdentifier;
   disabled?: boolean;
   children: (
     props: {
       ref: React.Ref<T>;
       relativeDropPosition?: RelativeDropPosition;
-      [key: string]: any;
+      style?: React.CSSProperties;
     } & UseSortableReturnType["attributes"]
   ) => JSX.Element;
 }
@@ -124,10 +138,10 @@ function SortableItem<T extends HTMLElement>({
   const { keys, position, acceptsDrop, setActivatorEvent, axis } =
     React.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
+  const { activatorEvent } = useDndContext();
 
   const {
     active,
-    activatorEvent,
     attributes,
     listeners,
     setNodeRef,
@@ -154,15 +168,15 @@ function SortableItem<T extends HTMLElement>({
     ...listeners,
     relativeDropPosition:
       index >= 0 && index === overIndex && !isDragging && active && over
-        ? validateDropIndicator(
+        ? validateDropIndicator({
             acceptsDrop,
             keys,
-            active.id,
-            over.id,
-            axis === "x" ? offsetLeft : offsetTop,
-            axis === "x" ? over.rect.offsetLeft : over.rect.offsetTop,
-            axis === "x" ? over.rect.width : over.rect.height
-          )
+            activeId: active.id,
+            overId: over.id,
+            offsetStart: axis === "x" ? offsetLeft : offsetTop,
+            elementStart: axis === "x" ? over.rect.left : over.rect.top,
+            elementSize: axis === "x" ? over.rect.width : over.rect.height,
+          })
         : undefined,
   });
 }
@@ -172,7 +186,7 @@ function SortableItem<T extends HTMLElement>({
  * ------------------------------------------------------------------------- */
 
 interface RootProps {
-  keys: string[];
+  keys: UniqueIdentifier[];
   children: React.ReactNode;
   renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: (
@@ -202,16 +216,19 @@ function SortableRoot({
 
   const [activeIndex, setActiveIndex] = React.useState<number | undefined>();
   const activatorEvent = React.useRef<PointerEvent | null>(null);
+  const [position, setPosition] = React.useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
 
   const setActivatorEvent = React.useCallback((event: PointerEvent) => {
     activatorEvent.current = event;
   }, []);
 
-  const [position, setPosition] = React.useState<Translate>({ x: 0, y: 0 });
-
   const handleDragStart = React.useCallback(
     (event: DragStartEvent) => {
-      setActiveIndex(keys.indexOf(event.active.id));
+      const index = keys.findIndex((id) => id === event.active.id);
+      setActiveIndex(index);
     },
     [keys]
   );
@@ -227,23 +244,25 @@ function SortableRoot({
       setActiveIndex(undefined);
 
       if (over && active.id !== over.id) {
-        const oldIndex = keys.indexOf(active.id);
-        const newIndex = keys.indexOf(over.id);
+        const oldIndex = keys.findIndex((id) => id === active.id);
+        const newIndex = keys.findIndex((id) => id === over.id);
+
+        if (oldIndex === -1 || newIndex === -1) return;
 
         const eventX = activatorEvent.current?.clientX ?? 0;
         const eventY = activatorEvent.current?.clientY ?? 0;
         const offsetLeft = eventX + position.x;
         const offsetTop = eventY + position.y;
 
-        const indicator = validateDropIndicator(
+        const indicator = validateDropIndicator({
           acceptsDrop,
           keys,
-          active.id,
-          over.id,
-          axis === "x" ? offsetLeft : offsetTop,
-          axis === "x" ? over.rect.offsetLeft : over.rect.offsetTop,
-          axis === "x" ? over.rect.width : over.rect.height
-        );
+          activeId: active.id,
+          overId: over.id,
+          offsetStart: axis === "x" ? offsetLeft : offsetTop,
+          elementStart: axis === "x" ? over.rect.left : over.rect.top,
+          elementSize: axis === "x" ? over.rect.width : over.rect.height,
+        });
 
         if (!indicator) return;
 
@@ -279,7 +298,14 @@ function SortableRoot({
         onDragMove={handleDragMove}
         onDragEnd={handleDragEnd}
       >
-        <SortableContext items={keys} strategy={verticalListSortingStrategy}>
+        <SortableContext
+          items={keys}
+          strategy={
+            axis === "x"
+              ? horizontalListSortingStrategy
+              : verticalListSortingStrategy
+          }
+        >
           {children}
         </SortableContext>
         {mounted &&

package/src/components/internal/Menu.tsx

@@ -62,10 +62,18 @@ export type SeparatorItem = {
   type: "separator";
 };
 
+export const separator: SeparatorItem = {
+  type: "separator",
+};
+
+type FalsyReactNode = false | "" | null | undefined;
+
+export type MenuItemIcon = IconName | React.ReactElement | FalsyReactNode;
+
 type BaseMenuItem = {
   checked?: boolean;
   disabled?: boolean;
-  icon?: Exclude<ReactNode, string> | IconName;
+  icon?: MenuItemIcon;
   role?: MenuItemRole;
   alwaysInclude?: boolean;
   title: NonNullable<ReactNode>;
@@ -83,6 +91,7 @@ export type SelectableMenuItem<T extends string> = BaseMenuItem & {
   type?: undefined;
   shortcut?: string;
   value: T;
+  testSelected?: boolean;
 };
 
 type SubMenuItem<T extends string> = BaseMenuItem & {
@@ -132,39 +141,43 @@ export const isSelectableMenuItemWithScore = (
 ): item is ScoredSelectableMenuItem<string> =>
   isSelectableMenuItem(item) && "index" in item && "score" in item;
 
+export const getMenuItemKey = <T extends string>(
+  item: MenuItem<T>,
+  index: number
+): string => {
+  switch (item.type) {
+    case "separator":
+      return index.toString();
+    case "sectionHeader":
+      return item.id;
+    case "submenu":
+      return item.id;
+    default:
+      return item.value;
+  }
+};
+
 export const CHECKBOX_WIDTH = 16;
 export const CHECKBOX_RIGHT_INSET = 8;
+export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {
   separatorStyle: "h-px bg-divider mx-4 my-1",
-
+  selectedItemStyle:
+    "focus:outline-none focus:text-white focus:bg-primary focus:kbd:text-white",
+  testSelectedItemStyle: "outline-none text-white bg-primary kbd:text-white",
   itemStyle: ({ disabled }: { disabled?: boolean }) => `
     flex-none select-none cursor-pointer rounded
-    py-1.5 px-3
-    focus:outline-none focus:text-white focus:bg-primary
-    focus:kbd:text-white
+    py-1.5 px-2
     active:bg-primary-light
     transition-colors
     flex items-center
     font-sans text-button font-medium
     ${disabled ? "text-text-disabled" : ""}
   `,
-
-  itemIndicatorStyle: `
-    flex items-center
-    relative
-    -left-2.5
-    -mr-2
-  `,
-
-  contentStyle: `
-    rounded
-    bg-popover-background
-    text-text
-    shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)]
-    z-menu
-    py-1
-  `,
+  itemIndicatorStyle: "flex items-center relative -left-2.5 -mr-2",
+  contentStyle:
+    "rounded bg-popover-background text-text shadow-[0_2px_4px_rgba(0,0,0,0.2),_0_0_12px_rgba(0,0,0,0.1)] z-menu py-1",
 };
 
 function getKeyboardShortcuts<T extends string>(
@@ -256,12 +269,14 @@ export const SectionHeader = memo(function SectionHeader({
         variant === "label"
           ? `text-label ${textStyles.label} !font-bold text-text-disabled`
           : "font-sans text-heading5 font-normal",
-        "bg-listview-raised-background flex items-center py-1.5 px-4",
+        "bg-listview-raised-background flex items-center py-1.5 px-3",
         isFirst && "-mt-1"
       )}
     >
       {indented && (
-        <Spacer.Horizontal size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET} />
+        <Spacer.Horizontal
+          size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET + CHECKBOX_INDENT_WIDTH}
+        />
       )}
       {title}
     </span>

package/src/components/internal/MenuViewport.tsx

@@ -2,6 +2,7 @@ import { ChevronRightIcon } from "@noya-app/noya-icons";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import React from "react";
+import { cx } from "../..";
 import { MenuItem, SectionHeader, styles } from "./Menu";
 import { SelectItem } from "./SelectItem";
 
@@ -15,6 +16,7 @@ type MenuItemComponent = React.ForwardRefExoticComponent<
       children?: React.ReactNode;
       value: string;
       onSelect?: (event: any) => void;
+      onClick?: (event: React.MouseEvent<any>) => void;
     }>
 >;
 type MenuCheckboxItemComponent = React.FC<{
@@ -94,7 +96,10 @@ export const MenuViewport = <T extends string>({
               return (
                 <Components.Sub key={item.id}>
                   <Components.SubTrigger
-                    className={styles.itemStyle({ disabled: item.disabled })}
+                    className={cx(
+                      styles.itemStyle({ disabled: item.disabled }),
+                      styles.selectedItemStyle
+                    )}
                     asChild
                     onClick={(e) => {
                       e.stopPropagation();
@@ -141,6 +146,7 @@ export const MenuViewport = <T extends string>({
                 onSelect={onSelect}
                 Components={Components}
                 indented={hasCheckedItem}
+                testSelected={item.testSelected}
               >
                 {item.title ?? item.value}
               </SelectItem>