@noya-app/noya-designsystem 0.1.46 → 0.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.46",
+  "version": "0.1.48",
   "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.8",
     "@noya-app/noya-icons": "0.1.6",
     "@noya-app/noya-keymap": "0.1.3",
     "@radix-ui/primitive": "^1.0.0",

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,
+    destinationIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that only allows dropping inside
+    if (position === "inside") return true;
+    return false;
+  };
+
+  const mockAcceptsDropAboveBelow = (
+    sourceIndex: number,
+    destinationIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that only allows dropping above/below
+    if (position === "inside") return false;
+    return true;
+  };
+
+  const mockAcceptsAll = (
+    sourceIndex: number,
+    destinationIndex: number,
+    position: "above" | "below" | "inside"
+  ) => {
+    // Mock that allows all drop positions
+    return true;
+  };
+
+  const mockAcceptsAboveAndInside = (
+    sourceIndex: number,
+    destinationIndex: 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,40 @@
+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;
+};
+
+export const ActionMenu = memoGeneric(function ActionMenu<
+  TMenu extends string,
+>({ menuItems, onSelect, selected, onOpenChange }: ActionMenuProps<TMenu>) {
+  const style = useMemo(() => {
+    return {
+      backgroundColor: selected
+        ? cssVars.colors.primaryPastel
+        : cssVars.colors.inputBackground,
+      padding: "4px",
+    };
+  }, [selected]);
+
+  return (
+    <DropdownMenu
+      items={menuItems}
+      onSelect={onSelect}
+      onOpenChange={onOpenChange}
+    >
+      <IconButton
+        style={style}
+        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/Collection.tsx

@@ -11,6 +11,11 @@ export type CollectionRef = {
   editName: (id: string) => void;
 };
 
+export type CollectionThumbnailProps<T> = {
+  item: T;
+  selected: boolean;
+};
+
 export interface CollectionProps<T, M extends string = string> {
   className?: string;
   items: T[];
@@ -30,8 +35,11 @@ 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" | ((item: T, selected: boolean) => React.ReactNode);
   renderDetail?: (item: T, selected: boolean) => React.ReactNode;
   /** Callback when selection changes. If not provided, selection will be disabled. */
   onSelectionChange?: (
@@ -57,7 +65,9 @@ export interface CollectionProps<T, M extends string = string> {
   /** Currently selected file IDs */
   selectedIds?: string[];
   viewType?: CollectionViewType;
+  onClickItem?: (itemId: string) => void;
   onDoubleClickItem?: (itemId: string) => void;
+  renderEmptyState?: () => React.ReactElement;
 }
 
 export const Collection = forwardRefGeneric(function Collection<

package/src/components/Combobox.tsx

@@ -27,6 +27,10 @@ import {
 import { ListView } from "./ListView";
 import { Small } from "./Text";
 
+const comboboxButtonStyle = {
+  right: "2px",
+};
+
 export type BaseComboboxProps<T extends string> = {
   id?: string;
   loading?: boolean;
@@ -441,6 +445,10 @@ export const Combobox = memoGeneric(
       [filteredItems]
     );
 
+    const hasCheckedItems = items.some(
+      (item) => isSelectableMenuItem(item) && item.checked
+    );
+
     return (
       <InputField.Root
         id={id}
@@ -475,6 +483,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">
@@ -525,7 +534,11 @@ export const Combobox = memoGeneric(
           </InputField.Label>
         )}
         {!readOnly && (
-          <InputField.Button variant="floating" onClick={handleChevronClick}>
+          <InputField.Button
+            variant="floating"
+            onClick={handleChevronClick}
+            style={comboboxButtonStyle}
+          >
             <DropdownChevronIcon
               className={cx(
                 "transition-transform duration-100",

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}>
                     <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>,
@@ -70,20 +75,6 @@ const StyledDescription = forwardRef<
   />
 ));
 
-const CloseButtonContainer = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cx(
-      `absolute top-dialog-padding right-dialog-padding z-[1] bg-popover-background p-[4px_6px] rounded-[2px] border border-[rgba(128,128,128,0.2)] `,
-      className
-    )}
-    {...props}
-  />
-));
-
 export interface IDialog {
   containsElement: (element: HTMLElement) => boolean;
 }
@@ -141,11 +132,17 @@ export const Dialog = forwardRef(function Dialog(
         })}
       >
         {showCloseButton && (
-          <CloseButtonContainer>
-            <DialogPrimitive.Close asChild>
-              <IconButton iconName="Cross1Icon" />
-            </DialogPrimitive.Close>
-          </CloseButtonContainer>
+          <DialogPrimitive.Close asChild>
+            <IconButton
+              iconName="Cross1Icon"
+              className="z-[1]"
+              style={{
+                position: "absolute",
+                top: "var(--dialog-padding)",
+                right: "var(--dialog-padding)",
+              }}
+            />
+          </DialogPrimitive.Close>
         )}
         {title && (
           <>

package/src/components/Drawer.tsx

@@ -0,0 +1,98 @@
+import { useControlledOrUncontrolled } from "@noya-app/react-utils";
+import * as Dialog from "@radix-ui/react-dialog";
+import * as React from "react";
+import { useImperativeHandle } from "react";
+import { cx } from "../utils/classNames";
+import { SidebarRef } from "./workspace/types";
+
+export type DrawerProps = {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger: React.ReactNode;
+  children: React.ReactNode;
+  title?: React.ReactNode;
+  className?: string;
+  id?: string;
+  style?: React.CSSProperties;
+  positioning?: "fixed" | "absolute";
+  side?: "left" | "right";
+  portalled?: boolean;
+  portalContainer?: HTMLElement | null;
+};
+
+export const Drawer = React.memo(
+  React.forwardRef(function Drawer(
+    {
+      open,
+      onOpenChange,
+      trigger,
+      children,
+      title,
+      className,
+      id,
+      style,
+      positioning = "fixed",
+      side = "left",
+      portalled = true,
+      portalContainer,
+    }: DrawerProps,
+    forwardedRef: React.ForwardedRef<SidebarRef>
+  ) {
+    const [internalOpen, setInternalOpen] = useControlledOrUncontrolled({
+      defaultValue: false,
+      value: open,
+      onChange: onOpenChange,
+    });
+
+    useImperativeHandle(forwardedRef, () => ({
+      expand: () => {
+        setInternalOpen(true);
+      },
+      collapse: () => {
+        setInternalOpen(false);
+      },
+      isExpanded: () => {
+        return internalOpen;
+      },
+    }));
+
+    const inner = (
+      <>
+        <Dialog.Overlay
+          className={cx(
+            "inset-0 bg-black/50",
+            positioning === "absolute" ? "absolute" : "fixed"
+          )}
+        />
+        <Dialog.Content
+          id={id}
+          style={style}
+          className={cx(
+            `top-0 bottom-0 z-50 overflow-y-auto bg-sidebar-background rounded-none max-h-none max-w-none sm:max-w-sm w-full border-divider-strong`,
+            positioning === "absolute" ? "absolute" : "fixed",
+            side === "left" ? "left-0 border-r" : "right-0 border-l",
+            className
+          )}
+        >
+          {title && <Dialog.Title>{title}</Dialog.Title>}
+          {children}
+        </Dialog.Content>
+      </>
+    );
+
+    return (
+      <Dialog.Root
+        key="dialog"
+        open={internalOpen}
+        onOpenChange={setInternalOpen}
+      >
+        <Dialog.Trigger key="trigger">{trigger}</Dialog.Trigger>
+        {portalled ? (
+          <Dialog.Portal container={portalContainer}>{inner}</Dialog.Portal>
+        ) : (
+          inner
+        )}
+      </Dialog.Root>
+    );
+  })
+);