@noya-app/noya-designsystem 0.1.47 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,12 +20,11 @@
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
-    "@dnd-kit/core": "3.1.1",
-    "@dnd-kit/modifiers": "3.0.0",
-    "@dnd-kit/sortable": "4.0.0",
-    "@noya-app/noya-colorpicker": "0.1.17",
-    "@noya-app/noya-utils": "0.1.3",
-    "@noya-app/noya-geometry": "0.1.7",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@noya-app/noya-colorpicker": "0.1.18",
+    "@noya-app/noya-utils": "0.1.4",
+    "@noya-app/noya-geometry": "0.1.9",
     "@noya-app/noya-icons": "0.1.6",
     "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",
@@ -51,6 +50,7 @@
     "vscode-fuzzy-scorer": "^0.0.4"
   },
   "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
     "@types/react": "*",
     "@types/react-dom": "*",
     "@types/react-virtualized": "^9.21.21",

package/src/__tests__/validateDropIndicator.test.ts

@@ -0,0 +1,263 @@
+import { describe, expect, it } from "bun:test";
+import {
+  defaultAcceptsDrop,
+  validateDropIndicator,
+} from "../components/Sortable";
+
+describe("defaultAcceptsDrop", () => {
+  it("should return false if the active item is the same as the over item", () => {
+    const result = defaultAcceptsDrop(0, 0, "inside");
+    expect(result).toBe(false);
+  });
+
+  it("should return false for 'inside' position", () => {
+    const result = defaultAcceptsDrop(0, 1, "inside");
+    expect(result).toBe(false);
+  });
+
+  it("should return false when dropping above the same item", () => {
+    const result = defaultAcceptsDrop(0, 0, "above");
+    expect(result).toBe(false);
+  });
+
+  it("should return false when dropping below the same item", () => {
+    const result = defaultAcceptsDrop(0, 0, "below");
+    expect(result).toBe(false);
+  });
+
+  it("should return false when dropping above the item below the source", () => {
+    const result = defaultAcceptsDrop(0, 1, "above");
+    expect(result).toBe(false);
+  });
+
+  it("should return false when dropping below the item above the source", () => {
+    const result = defaultAcceptsDrop(1, 0, "below");
+    expect(result).toBe(false);
+  });
+
+  it("should return true when dropping above a valid target", () => {
+    const result = defaultAcceptsDrop(0, 2, "above");
+    expect(result).toBe(true);
+  });
+
+  it("should return true when dropping below a valid target", () => {
+    const result = defaultAcceptsDrop(2, 0, "below");
+    expect(result).toBe(true);
+  });
+});
+
+describe("validateDropIndicator", () => {
+  const mockAcceptsDrop = (
+    sourceIndex: number,
+    targetIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that only allows dropping inside
+    if (position === "inside") return true;
+    return false;
+  };
+
+  const mockAcceptsDropAboveBelow = (
+    sourceIndex: number,
+    targetIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that only allows dropping above/below
+    if (position === "inside") return false;
+    return true;
+  };
+
+  const mockAcceptsAll = (
+    sourceIndex: number,
+    targetIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that allows all drop positions
+    return true;
+  };
+
+  const mockAcceptsAboveAndInside = (
+    sourceIndex: number,
+    targetIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that allows dropping above and inside, but not below
+    return position !== "below";
+  };
+
+  const keys = ["item1", "item2", "item3"];
+
+  describe("with above and inside positions allowed, but not below", () => {
+    it("should return 'inside' when cursor is in the middle third", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAboveAndInside,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 50, // offsetStart in middle third
+        elementStart: 0, // elementStart
+        elementSize: 100, // elementSize
+      });
+      expect(result).toBe("inside");
+    });
+
+    it("should return 'above' when cursor is in the top third", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAboveAndInside,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 20, // offsetStart in top third
+        elementStart: 0, // elementStart
+        elementSize: 100, // elementSize
+      });
+      expect(result).toBe("above");
+    });
+
+    it("should fallback to 'inside' when cursor is in bottom third since 'below' is not allowed", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAboveAndInside,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 80, // offsetStart in bottom third
+        elementStart: 0, // elementStart
+        elementSize: 100, // elementSize
+      });
+      expect(result).toBe("inside");
+    });
+  });
+
+  describe("with all drop positions allowed", () => {
+    it("should prefer 'inside' when cursor is in the middle third", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAll,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 50, // offsetStart in middle third
+        elementStart: 0, // elementStart
+        elementSize: 100, // elementSize
+      });
+      expect(result).toBe("inside");
+    });
+
+    it("should prefer 'above' when cursor is in the top third", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAll,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 20, // offsetStart in top third
+        elementStart: 0, // elementStart
+        elementSize: 100, // elementSize
+      });
+      expect(result).toBe("above");
+    });
+
+    it("should prefer 'below' when cursor is in the bottom third", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAll,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 80, // offsetStart in bottom third
+        elementStart: 0, // elementStart
+        elementSize: 100, // elementSize
+      });
+      expect(result).toBe("below");
+    });
+
+    it("should handle non-zero elementStart position", () => {
+      const result = validateDropIndicator({
+        acceptsDrop: mockAcceptsAll,
+        keys,
+        activeId: "item1",
+        overId: "item2",
+        offsetStart: 120, // offsetStart in middle third relative to elementStart
+        elementStart: 100, // elementStart
+        elementSize: 60, // elementSize
+      });
+      expect(result).toBe("inside");
+    });
+  });
+
+  it("should return 'inside' when cursor is in the middle third and inside drops are allowed", () => {
+    const result = validateDropIndicator({
+      acceptsDrop: mockAcceptsDrop,
+      keys,
+      activeId: "item1",
+      overId: "item2",
+      offsetStart: 50, // offsetStart in middle third
+      elementStart: 0, // elementStart
+      elementSize: 100, // elementSize
+    });
+    expect(result).toBe("inside");
+  });
+
+  it("should return 'above' when cursor is in top half and above drops are allowed", () => {
+    const result = validateDropIndicator({
+      acceptsDrop: mockAcceptsDropAboveBelow,
+      keys,
+      activeId: "item1",
+      overId: "item2",
+      offsetStart: 20, // offsetStart in top half
+      elementStart: 0, // elementStart
+      elementSize: 100, // elementSize
+    });
+    expect(result).toBe("above");
+  });
+
+  it("should return 'below' when cursor is in bottom half and below drops are allowed", () => {
+    const result = validateDropIndicator({
+      acceptsDrop: mockAcceptsDropAboveBelow,
+      keys,
+      activeId: "item1",
+      overId: "item2",
+      offsetStart: 70, // offsetStart in bottom half
+      elementStart: 0, // elementStart
+      elementSize: 100, // elementSize
+    });
+    expect(result).toBe("below");
+  });
+
+  it("should fallback to inside when above/below not allowed and inside is allowed", () => {
+    const result = validateDropIndicator({
+      acceptsDrop: mockAcceptsDrop,
+      keys,
+      activeId: "item1",
+      overId: "item2",
+      offsetStart: 20, // offsetStart in top half
+      elementStart: 0, // elementStart
+      elementSize: 100, // elementSize
+    });
+    expect(result).toBe("inside");
+  });
+
+  it("should return undefined when no drop positions are allowed", () => {
+    const neverAllowDrop = () => false;
+    const result = validateDropIndicator({
+      acceptsDrop: neverAllowDrop,
+      keys,
+      activeId: "item1",
+      overId: "item2",
+      offsetStart: 50,
+      elementStart: 0,
+      elementSize: 100,
+    });
+    expect(result).toBeUndefined();
+  });
+
+  it("should ignore items not in the keys array", () => {
+    const result = validateDropIndicator({
+      acceptsDrop: mockAcceptsDrop,
+      keys,
+      activeId: "nonexistent",
+      overId: "item2",
+      offsetStart: 50,
+      elementStart: 0,
+      elementSize: 100,
+    });
+    expect(result).toBeUndefined();
+  });
+});

package/src/components/ActionMenu.tsx

@@ -0,0 +1,51 @@
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { useMemo } from "react";
+import { cssVars } from "../theme";
+import { DropdownMenu } from "./DropdownMenu";
+import { IconButton } from "./IconButton";
+import { MenuItem } from "./internal/Menu";
+
+type ActionMenuProps<TMenu extends string> = {
+  menuItems: MenuItem<TMenu>[];
+  onSelect: (action: TMenu) => void;
+  selected: boolean;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const ActionMenu = memoGeneric(function ActionMenu<
+  TMenu extends string,
+>({
+  menuItems,
+  onSelect,
+  selected,
+  onOpenChange,
+  className,
+  style,
+}: ActionMenuProps<TMenu>) {
+  const internalStyle = useMemo(() => {
+    return {
+      backgroundColor: selected
+        ? cssVars.colors.primaryPastel
+        : cssVars.colors.inputBackground,
+      padding: "4px",
+      ...style,
+    };
+  }, [selected, style]);
+
+  return (
+    <DropdownMenu
+      items={menuItems}
+      onSelect={onSelect}
+      onOpenChange={onOpenChange}
+    >
+      <IconButton
+        style={internalStyle}
+        className={className}
+        iconName="DotsVerticalIcon"
+        color={selected ? cssVars.colors.primary : undefined}
+      />
+    </DropdownMenu>
+  );
+});

package/src/components/ActivityIndicator.tsx

@@ -1,10 +1,12 @@
 import * as React from "react";
+import { cx } from "../utils/classNames";
 
 interface Props {
   size?: number;
   opacity?: number;
   color?: string;
   trackColor?: string;
+  className?: string;
 }
 
 export const ActivityIndicator = React.memo(function ActivityIndicator({
@@ -12,6 +14,7 @@ export const ActivityIndicator = React.memo(function ActivityIndicator({
   opacity = 1,
   color = "black",
   trackColor = "rgba(0, 0, 0, 0.1)",
+  className,
 }: Props) {
   const opacityStyle = React.useMemo(() => ({ opacity }), [opacity]);
   const dynamicStyles = React.useMemo(
@@ -24,7 +27,10 @@ export const ActivityIndicator = React.memo(function ActivityIndicator({
     [size, color, trackColor]
   );
   return (
-    <div className="flex justify-center items-center" style={opacityStyle}>
+    <div
+      className={cx("flex justify-center items-center", className)}
+      style={opacityStyle}
+    >
       <div style={dynamicStyles} className="animate-spin rounded-[50%]" />
     </div>
   );

package/src/components/BaseToolbar.tsx

@@ -21,7 +21,7 @@ export function BaseToolbar({
   return (
     <div className="flex flex-col">
       <div
-        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative"
+        className="flex items-center pr-2.5 bg-sidebar-background flex-none relative @container/toolbar"
         style={{
           flex: `0 0 ${cssVars.spacing.toolbarHeight}`,
         }}
@@ -39,7 +39,7 @@ export function BaseToolbar({
             <Spacer.Horizontal size={10} />
           </>
         )}
-        <div className="flex items-center justify-center text-text-muted pointer-events-none lg:absolute inset-0">
+        <div className="flex items-center justify-center text-text-muted pointer-events-none @2xl/toolbar:absolute inset-0">
           <div
             style={{
               display: "flex",

package/src/components/Checkbox.tsx

@@ -58,8 +58,8 @@ export const Checkbox = React.memo(
           className={`
             absolute 
             inset-0
-            h-[27px] 
-            w-[27px] 
+            h-input-height 
+            w-input-height 
             pointer-events-none
             stroke-white
             opacity-0

package/src/components/Chip.tsx

@@ -52,16 +52,16 @@ const ICON_BASE_STYLES = "relative opacity-50 cursor-pointer hover:opacity-85";
 
 const ICON_SIZE_STYLES = {
   large: {
-    add: "ml-[-2px] mr-[2px] -top-[1px] scale-75",
-    delete: "mr-[-2px] ml-[2px] scale-75",
+    add: "ml-[-2px] mr-[2px] -top-[1px] scale-[0.75]",
+    delete: "mr-[-2px] ml-[2px] scale-[0.75]",
   },
   medium: {
-    add: "ml-[-2px] mr-[-2px] scale-60",
-    delete: "mr-[-2px] scale-60",
+    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
+    delete: "mr-[-2px] scale-[0.60]",
   },
   small: {
-    add: "ml-[-2px] mr-[-2px] scale-60",
-    delete: "mr-[-2px] scale-60",
+    add: "ml-[-2px] mr-[-2px] scale-[0.60]",
+    delete: "mr-[-2px] scale-[0.60]",
   },
 } as const;
 
@@ -82,6 +82,7 @@ export interface ChipProps {
   onHoverDeleteChange?: (hovering: boolean) => void;
   style?: React.CSSProperties;
   tabIndex?: number;
+  role?: string;
 }
 
 export const Chip = memo(

package/src/components/Collection.tsx

@@ -7,16 +7,30 @@ import { List } from "./List";
 
 export type CollectionViewType = "grid" | "list";
 
+export type CollectionThumbnailSize = "auto" | "custom";
+
 export type CollectionRef = {
   editName: (id: string) => void;
 };
 
+export type CollectionThumbnailProps<T> = {
+  item: T;
+  selected: boolean;
+};
+
+export type CollectionRenderActionProps<T> = {
+  item: T;
+  selected: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
 export interface CollectionProps<T, M extends string = string> {
   className?: string;
   items: T[];
   getId: (item: T) => string;
   getName: (item: T) => string;
   getExpanded?: (item: T) => boolean | undefined;
+  getPlaceholder?: (item: T) => string;
   /**
    * Whether directories should be expandable.
    * @default true
@@ -30,8 +44,13 @@ export interface CollectionProps<T, M extends string = string> {
   menuItems?: MenuItem<M>[];
   onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
   onRename?: (item: T, newName: string) => void;
-  renderThumbnail?: (item: T, selected: boolean) => React.ReactNode;
-  renderAction?: (item: T, selected: boolean) => React.ReactNode;
+  renderThumbnail?: ({
+    item,
+    selected,
+  }: CollectionThumbnailProps<T>) => React.ReactNode;
+  renderAction?:
+    | "menu"
+    | ((props: CollectionRenderActionProps<T>) => React.ReactNode);
   renderDetail?: (item: T, selected: boolean) => React.ReactNode;
   /** Callback when selection changes. If not provided, selection will be disabled. */
   onSelectionChange?: (
@@ -44,20 +63,29 @@ export interface CollectionProps<T, M extends string = string> {
   detailPosition?: "end" | "below";
   /** Size of the list items. Defaults to 'medium'. */
   size?: GridViewSize;
+  /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
+  thumbnailSize?: CollectionThumbnailSize;
   /** For testing: Override the hover state with a specific item ID */
   testHoveredId?: string;
   /** For testing: Override the renaming state with a specific item ID */
   testRenamingId?: string;
+  /** For testing: Override the drop indicator state with a specific item ID */
+  testShowDropIndicatorId?: string;
   setExpanded?: (item: T, expanded: boolean) => void;
   acceptsDrop?: ListViewRootProps["acceptsDrop"];
   onMoveItem?: ListViewRootProps["onMoveItem"];
+  getDropTargetParentIndex?: ListViewRootProps["getDropTargetParentIndex"];
   getDepth?: (item: T) => number;
   onFilesDrop?: (event: React.DragEvent<Element>) => void;
   getRenamable?: (item: T) => boolean;
   /** Currently selected file IDs */
   selectedIds?: string[];
   viewType?: CollectionViewType;
+  onClickItem?: (itemId: string) => void;
   onDoubleClickItem?: (itemId: string) => void;
+  renderEmptyState?: () => React.ReactElement;
+  /** @default false */
+  sortable?: boolean;
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/Combobox.tsx

@@ -441,11 +441,37 @@ export const Combobox = memoGeneric(
       [filteredItems]
     );
 
+    const hasCheckedItems = items.some(
+      (item) => isSelectableMenuItem(item) && item.checked
+    );
+
     return (
       <InputField.Root
         id={id}
         size={size}
         sideOffset={6}
+        end={
+          <>
+            {loading && (
+              <div className="pr-1.5">
+                <ActivityIndicator />
+              </div>
+            )}
+            {!readOnly && (
+              <InputField.Button
+                variant="floating"
+                onClick={handleChevronClick}
+              >
+                <DropdownChevronIcon
+                  className={cx(
+                    "transition-transform duration-100",
+                    shouldShowMenu ? "rotate-180" : "rotate-0"
+                  )}
+                />
+              </InputField.Button>
+            )}
+          </>
+        }
         renderPopoverContent={({ width }) => {
           const height = Math.min(
             ListView.calculateHeight({
@@ -475,6 +501,7 @@ export const Combobox = memoGeneric(
                   style={{
                     flex: `0 0 ${height}px`,
                   }}
+                  indented={hasCheckedItems}
                 />
               ) : (
                 <div className="flex flex-col h-[50px] p-5 items-center justify-center">
@@ -519,21 +546,6 @@ export const Combobox = memoGeneric(
             />
           )}
         {children}
-        {loading && (
-          <InputField.Label htmlFor={id}>
-            <ActivityIndicator />
-          </InputField.Label>
-        )}
-        {!readOnly && (
-          <InputField.Button variant="floating" onClick={handleChevronClick}>
-            <DropdownChevronIcon
-              className={cx(
-                "transition-transform duration-100",
-                shouldShowMenu ? "rotate-180" : "rotate-0"
-              )}
-            />
-          </InputField.Button>
-        )}
       </InputField.Root>
     );
   })

package/src/components/ComboboxMenu.tsx

@@ -9,6 +9,7 @@ import { renderIcon } from "./Icons";
 import { IVirtualizedList, ListView } from "./ListView";
 import { Spacer } from "./Spacer";
 import {
+  CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
   CHECKBOX_WIDTH,
   KeyboardShortcut,
@@ -23,6 +24,7 @@ interface ComboboxMenuProps<T extends string> {
   onHoverIndex: (index: number) => void;
   listSize: Size;
   style?: React.CSSProperties;
+  indented?: boolean;
 }
 
 export const ComboboxMenu = memoGeneric(
@@ -34,13 +36,10 @@ export const ComboboxMenu = memoGeneric(
       onHoverIndex,
       listSize,
       style,
+      indented,
     }: ComboboxMenuProps<T>,
     forwardedRef: ForwardedRef<IVirtualizedList>
   ) {
-    const hasCheckedItems = items
-      .filter((item) => item.type === undefined)
-      .some((item) => item.checked);
-
     return (
       <ListView.Root
         ref={forwardedRef}
@@ -59,6 +58,15 @@ export const ComboboxMenu = memoGeneric(
           if (item.type === "sectionHeader") {
             return (
               <ListView.Row key={item.id} isSectionHeader>
+                {indented && (
+                  <Spacer.Horizontal
+                    size={
+                      CHECKBOX_WIDTH -
+                      CHECKBOX_RIGHT_INSET +
+                      CHECKBOX_INDENT_WIDTH
+                    }
+                  />
+                )}
                 {item.title}
               </ListView.Row>
             );
@@ -82,11 +90,12 @@ export const ComboboxMenu = memoGeneric(
               }}
             >
               <div className="flex flex-1 min-w-0 items-center">
+                {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
                 {item.checked ? (
-                  <div className={styles.itemIndicatorStyle}>
+                  <div {...styles.itemIndicator}>
                     <CheckIcon />
                   </div>
-                ) : hasCheckedItems ? (
+                ) : indented ? (
                   <Spacer.Horizontal
                     size={CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET}
                   />

package/src/components/Dialog.tsx

@@ -25,22 +25,27 @@ const StyledOverlay = forwardRef<
 const StyledContent = forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Content
-    ref={ref}
-    className={cx(
-      `
+>(({ className, children, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cx(
+        `
       fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
       w-[90vw] max-w-[450px] max-h-[85vh] p-dialog-padding rounded-[2px] 
       font-sans text-heading5 font-normal leading-[19px] text-text-muted 
-      bg-popover-background overflow-y-auto pointer-events-all z-[1000] focus:outline-none 
-      shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] 
+      bg-popover-background pointer-events-all z-[1000] focus:outline-none 
+      shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)]
+      flex flex-col
     `,
-      className
-    )}
-    {...props}
-  />
-));
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  );
+});
 
 const StyledTitle = forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,