@noya-app/noya-designsystem 0.1.47 → 0.1.49

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,
@@ -23,25 +25,25 @@ export type RelativeDropPosition = "above" | "below" | "inside";
 
 export type DropValidator = (
   sourceIndex: number,
-  destinationIndex: number,
+  targetIndex: number,
   position: RelativeDropPosition
 ) => boolean;
 
-export const normalizeListDestinationIndex = (
+export const normalizeListTargetIndex = (
   index: number,
   position: "above" | "below"
 ): number => {
   return position === "above" ? index : index + 1;
 };
 
-const defaultAcceptsDrop: DropValidator = (
+export const defaultAcceptsDrop: DropValidator = (
   sourceIndex,
-  destinationIndex,
+  targetIndex,
   position
 ) => {
   if (position === "inside") return false;
 
-  const normalized = normalizeListDestinationIndex(destinationIndex, position);
+  const normalized = normalizeListTargetIndex(targetIndex, position);
 
   if (sourceIndex === normalized || sourceIndex + 1 === normalized) {
     return false;
@@ -50,35 +52,52 @@ const defaultAcceptsDrop: DropValidator = (
   return true;
 };
 
-const SortableItemContext = React.createContext<{
-  keys: string[];
-  position: Translate;
+export type SortableItemContextProps = {
+  keys: UniqueIdentifier[];
   acceptsDrop: DropValidator;
-  setActivatorEvent: (event: PointerEvent) => void;
   axis: "x" | "y";
-}>({
+  position: { x: number; y: number };
+  setActivatorEvent: (event: PointerEvent) => void;
+  getDropTargetParentIndex?: (index: number) => number | undefined;
+};
+
+const SortableItemContext = React.createContext<SortableItemContextProps>({
   keys: [],
-  position: { x: 0, y: 0 },
   acceptsDrop: defaultAcceptsDrop,
-  setActivatorEvent: () => {},
   axis: "y",
+  position: { x: 0, y: 0 },
+  setActivatorEvent: () => {},
+  getDropTargetParentIndex: undefined,
 });
 
-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 +108,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 +123,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;
 }
@@ -121,18 +139,25 @@ function SortableItem<T extends HTMLElement>({
   disabled,
   children,
 }: ItemProps<T>) {
-  const { keys, position, acceptsDrop, setActivatorEvent, axis } =
-    React.useContext(SortableItemContext);
+  const {
+    keys,
+    position,
+    acceptsDrop,
+    setActivatorEvent,
+    axis,
+    getDropTargetParentIndex,
+  } = React.useContext(SortableItemContext);
   const sortable = useSortable({ id, disabled });
+  const { activatorEvent } = useDndContext();
 
   const {
     active,
-    activatorEvent,
     attributes,
     listeners,
     setNodeRef,
     isDragging,
     index,
+    activeIndex,
     overIndex,
     over,
   } = sortable;
@@ -147,23 +172,40 @@ function SortableItem<T extends HTMLElement>({
   const offsetTop = eventY + position.y;
 
   const ref = React.useCallback((node: T) => setNodeRef(node), [setNodeRef]);
+  const parentIndex =
+    overIndex === -1 ? undefined : getDropTargetParentIndex?.(overIndex);
+  const isValidParent =
+    parentIndex === undefined || parentIndex === -1
+      ? false
+      : acceptsDrop(activeIndex, parentIndex, "inside");
+  const overIdAcceptsDrop =
+    overIndex === -1
+      ? undefined
+      : acceptsDrop(activeIndex, overIndex, "inside");
+
+  const relativeDropPosition =
+    index >= 0 && index === overIndex && !isDragging && active && over
+      ? validateDropIndicator({
+          acceptsDrop,
+          keys,
+          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;
+
+  const showDragInsideIndicatorOnParent =
+    !overIdAcceptsDrop && isValidParent && parentIndex === index;
 
   return children({
     ref,
     ...attributes,
     ...listeners,
     relativeDropPosition:
-      index >= 0 && index === overIndex && !isDragging && active && over
-        ? 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
-          )
-        : undefined,
+      relativeDropPosition ??
+      (showDragInsideIndicatorOnParent ? "inside" : undefined),
   });
 }
 
@@ -172,16 +214,17 @@ function SortableItem<T extends HTMLElement>({
  * ------------------------------------------------------------------------- */
 
 interface RootProps {
-  keys: string[];
+  keys: UniqueIdentifier[];
   children: React.ReactNode;
   renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: (
     sourceIndex: number,
-    destinationIndex: number,
+    targetIndex: number,
     position: RelativeDropPosition
   ) => void;
-  acceptsDrop?: DropValidator;
-  axis?: "x" | "y";
+  acceptsDrop?: SortableItemContextProps["acceptsDrop"];
+  axis?: SortableItemContextProps["axis"];
+  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
 }
 
 function SortableRoot({
@@ -191,6 +234,7 @@ function SortableRoot({
   renderOverlay,
   acceptsDrop = defaultAcceptsDrop,
   axis = "y",
+  getDropTargetParentIndex,
 }: RootProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -202,16 +246,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]
   );
@@ -225,25 +272,26 @@ function SortableRoot({
       const { active, over } = event;
 
       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;
 
@@ -262,14 +310,22 @@ function SortableRoot({
   return (
     <SortableItemContext.Provider
       value={React.useMemo(
-        () => ({
+        (): SortableItemContextProps => ({
           keys,
           acceptsDrop,
           position,
           setActivatorEvent,
           axis,
+          getDropTargetParentIndex,
         }),
-        [acceptsDrop, axis, keys, position, setActivatorEvent]
+        [
+          acceptsDrop,
+          axis,
+          getDropTargetParentIndex,
+          keys,
+          position,
+          setActivatorEvent,
+        ]
       )}
     >
       <DndContext
@@ -279,7 +335,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,48 @@ export const isSelectableMenuItemWithScore = (
 ): item is ScoredSelectableMenuItem<string> =>
   isSelectableMenuItem(item) && "index" in item && "score" in item;
 
-export const CHECKBOX_WIDTH = 16;
+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 = 15;
 export const CHECKBOX_RIGHT_INSET = 8;
+export const CHECKBOX_INDENT_WIDTH = 6;
 
 export const styles = {
-  separatorStyle: "h-px bg-divider mx-4 my-1",
-
+  separatorStyle: "h-px bg-divider mx-3 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
-  `,
+  itemIndicator: {
+    className: "flex items-center relative -left-2.5",
+    style: {
+      marginRight: -CHECKBOX_RIGHT_INSET,
+    },
+  },
+  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 +274,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>

package/src/components/internal/SelectItem.tsx

@@ -3,8 +3,10 @@ import { renderIcon } from "../Icons";
 import { CheckIcon } from "@noya-app/noya-icons";
 import * as Select from "@radix-ui/react-select";
 import React, { useCallback } from "react";
+import { cx } from "../../utils/classNames";
 import { Spacer } from "../Spacer";
 import {
+  CHECKBOX_INDENT_WIDTH,
   CHECKBOX_RIGHT_INSET,
   CHECKBOX_WIDTH,
   KeyboardShortcut,
@@ -24,6 +26,7 @@ export const SelectItem = React.forwardRef(
       onSelect,
       shortcut,
       indented,
+      testSelected,
       ...props
     }: Select.SelectItemProps & {
       icon?: React.ReactNode;
@@ -32,6 +35,7 @@ export const SelectItem = React.forwardRef(
       onSelect?: (value: any) => void;
       shortcut?: string;
       indented?: boolean;
+      testSelected?: boolean;
     },
     forwardedRef: React.ForwardedRef<HTMLDivElement>
   ) => {
@@ -40,50 +44,71 @@ export const SelectItem = React.forwardRef(
       onSelect?.(value);
     }, [onSelect, value]);
 
+    // Prevent the click from propagating outside the menu
+    const cancelClickPropagation = useCallback(
+      (event: React.MouseEvent<HTMLDivElement>) => {
+        event.stopPropagation();
+      },
+      []
+    );
+
     if (checked && Components.CheckboxItem) {
       return (
-        <Components.CheckboxItem
-          checked={checked}
-          disabled={disabled}
-          onSelect={handleSelectItem}
-          className={styles.itemStyle({ disabled })}
-        >
-          {Components.ItemIndicator && (
-            <Components.ItemIndicator className={styles.itemIndicatorStyle}>
-              <CheckIcon />
-            </Components.ItemIndicator>
-          )}
-          {icon && (
-            <>
-              {renderIcon(icon)}
-              <Spacer.Horizontal size={8} />
-            </>
-          )}
-          {children}
-          {shortcut && (
-            <>
-              <Spacer.Horizontal />
-              <Spacer.Horizontal size={24} />
-              <KeyboardShortcut shortcut={shortcut} />
-            </>
-          )}
-        </Components.CheckboxItem>
+        <div className="px-1">
+          <Components.CheckboxItem
+            checked={checked}
+            disabled={disabled}
+            onSelect={handleSelectItem}
+            className={cx(
+              styles.itemStyle({ disabled }),
+              styles.selectedItemStyle,
+              testSelected && styles.testSelectedItemStyle
+            )}
+          >
+            <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />
+            {Components.ItemIndicator && (
+              <Components.ItemIndicator {...styles.itemIndicator}>
+                <CheckIcon />
+              </Components.ItemIndicator>
+            )}
+            {icon && (
+              <>
+                {renderIcon(icon)}
+                <Spacer.Horizontal size={8} />
+              </>
+            )}
+            {children}
+            {shortcut && (
+              <>
+                <Spacer.Horizontal />
+                <Spacer.Horizontal size={24} />
+                <KeyboardShortcut shortcut={shortcut} />
+              </>
+            )}
+          </Components.CheckboxItem>
+        </div>
       );
     }
 
     return (
       <div className="px-1">
         <Components.Item
-          className={styles.itemStyle({ disabled })}
+          className={cx(
+            styles.itemStyle({ disabled }),
+            styles.selectedItemStyle,
+            testSelected && styles.testSelectedItemStyle
+          )}
           disabled={disabled}
           value={value}
           ref={forwardedRef}
+          onClick={cancelClickPropagation}
           onSelect={handleSelectItem}
           {...props}
         >
           <div className="flex flex-1 items-center">
+            {indented && <Spacer.Horizontal size={CHECKBOX_INDENT_WIDTH} />}
             {checked ? (
-              <div className={styles.itemIndicatorStyle}>
+              <div {...styles.itemIndicator}>
                 <CheckIcon />
               </div>
             ) : indented ? (

package/src/components/internal/__tests__/Menu.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, test } from "bun:test";
+import { styles } from "../Menu";
+
+describe("Menu", () => {
+  test("styles.selectedItemStyle should have the same styles as styles.testSelectedItemStyle without the focus: prefix", () => {
+    const selectedWithoutFocus = styles.selectedItemStyle.replace(
+      /focus:/g,
+      ""
+    );
+    expect(selectedWithoutFocus).toEqual(styles.testSelectedItemStyle);
+  });
+});