@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/sorting/SharedDragProvider.tsx

@@ -2,6 +2,7 @@
 
 import {
   Active,
+  ClientRect,
   closestCenter,
   CollisionDetection,
   DndContext,
@@ -15,7 +16,12 @@ import {
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
-import { Point, rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
+import {
+  Insets,
+  Point,
+  rectContainsPoint,
+  unionRects,
+} from "@noya-app/noya-geometry";
 import { windowsOf } from "@noya-app/noya-utils";
 import { useIsomorphicLayoutEffect } from "@noya-app/react-utils";
 import * as React from "react";
@@ -45,6 +51,7 @@ export type SharedDragProviderProps = {
   acceptsDrop?: AcceptsDrop;
   onMoveItem?: MoveDragItemHandler;
   sharedDragProps?: SharedDragProps;
+  itemHitSlop?: Insets;
 };
 
 export function SharedDragProvider({
@@ -55,6 +62,7 @@ export function SharedDragProvider({
     dragRegistrationContext: DragRegistrationContext,
     activeDragContext: ActiveDragContext,
   },
+  itemHitSlop,
 }: SharedDragProviderProps) {
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -216,8 +224,8 @@ export function SharedDragProvider({
   );
 
   const collisionDetection = useMemo(() => {
-    return getItemFirstCollisionDetection(registeredLists);
-  }, [registeredLists]);
+    return getItemFirstCollisionDetection(registeredLists, itemHitSlop);
+  }, [registeredLists, itemHitSlop]);
 
   return (
     <AnyDragContext.Provider value={true}>
@@ -279,9 +287,18 @@ export function withDragProvider<T extends object>(
 
 // Custom collision detection that prioritizes items over containers
 export const getItemFirstCollisionDetection =
-  (registeredLists: Map<string, RegisteredList>): CollisionDetection =>
+  (
+    registeredLists: Map<string, RegisteredList>,
+    itemHitSlop: Insets | undefined
+  ): CollisionDetection =>
   (parameters) => {
-    const pointerCollisions = pointerWithin(parameters);
+    const parametersWithHitSlop = getCollisionParametersWithHitSlop(
+      registeredLists,
+      parameters,
+      itemHitSlop
+    );
+
+    const pointerCollisions = pointerWithin(parametersWithHitSlop);
 
     if (pointerCollisions.length > 0) {
       const itemCollisions = pointerCollisions.filter((collision) => {
@@ -300,11 +317,11 @@ export const getItemFirstCollisionDetection =
     }
 
     const listCollision = pointerCollisions.at(0);
-    const nearestCenters = closestCenter(parameters);
+    const nearestCenters = closestCenter(parametersWithHitSlop);
 
     // Handle a pointer between items by checking if the pointer is within
     // a window of two items.
-    if (parameters.pointerCoordinates && listCollision) {
+    if (parametersWithHitSlop.pointerCoordinates && listCollision) {
       const list = registeredLists.get(listCollision.id as string);
 
       if (list) {
@@ -312,7 +329,7 @@ export const getItemFirstCollisionDetection =
 
         for (const pair of pairs) {
           const clientRects = pair.map(
-            (key) => parameters.droppableRects.get(key)!
+            (key) => parametersWithHitSlop.droppableRects.get(key)!
           );
 
           const merged = unionRects(
@@ -324,7 +341,9 @@ export const getItemFirstCollisionDetection =
             }))
           );
 
-          if (rectContainsPoint(merged, parameters.pointerCoordinates)) {
+          if (
+            rectContainsPoint(merged, parametersWithHitSlop.pointerCoordinates)
+          ) {
             return nearestCenters.filter((center) =>
               pair.some((id) => id === center.id)
             );
@@ -337,6 +356,69 @@ export const getItemFirstCollisionDetection =
     return pointerCollisions;
   };
 
+type CollisionDetectionParameters = Parameters<CollisionDetection>[0];
+
+function getCollisionParametersWithHitSlop(
+  registeredLists: Map<string, RegisteredList>,
+  parameters: CollisionDetectionParameters,
+  defaultHitSlop: Insets | undefined
+): CollisionDetectionParameters {
+  const adjustedDroppableRects = createDroppableRectsWithHitSlop(
+    registeredLists,
+    parameters.droppableRects,
+    defaultHitSlop
+  );
+
+  if (!adjustedDroppableRects) {
+    return parameters;
+  }
+
+  return {
+    ...parameters,
+    droppableRects: adjustedDroppableRects,
+  };
+}
+
+function createDroppableRectsWithHitSlop(
+  registeredLists: Map<string, RegisteredList>,
+  droppableRects: CollisionDetectionParameters["droppableRects"],
+  defaultHitSlop: Insets | undefined
+): Map<string | number, ClientRect> | undefined {
+  let adjustedRects: Map<string | number, ClientRect> | undefined;
+
+  for (const [, list] of registeredLists) {
+    const hitSlop = list.itemHitSlop ?? defaultHitSlop;
+
+    if (!hitSlop) continue;
+
+    for (const key of list.keys) {
+      const rect = droppableRects.get(key);
+
+      if (!rect) continue;
+
+      if (!adjustedRects) {
+        adjustedRects = new Map(droppableRects);
+      }
+
+      adjustedRects.set(key, expandRectByInsets(rect, hitSlop));
+    }
+  }
+
+  return adjustedRects;
+}
+
+function expandRectByInsets(rect: ClientRect, hitSlop: Insets): ClientRect {
+  return {
+    ...rect,
+    left: rect.left - hitSlop.left,
+    right: rect.right + hitSlop.right,
+    top: rect.top - hitSlop.top,
+    bottom: rect.bottom + hitSlop.bottom,
+    width: rect.width + hitSlop.left + hitSlop.right,
+    height: rect.height + hitSlop.top + hitSlop.bottom,
+  };
+}
+
 function findDropTarget({
   activationPoint,
   delta,

package/src/components/sorting/Sortable.tsx

@@ -7,6 +7,7 @@ import {
   useSortable,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
+import { Insets } from "@noya-app/noya-geometry";
 import * as React from "react";
 import {
   ActiveDragContext,
@@ -30,12 +31,21 @@ import {
 
 type UseSortableReturnType = ReturnType<typeof useSortable>;
 
-type ItemChildrenProps<T> = {
-  ref: React.Ref<T>;
-  relativeDropPosition?: RelativeDropPosition;
+export type ItemChildrenProps<T> = {
+  ref: React.RefCallback<T>;
   style?: React.CSSProperties;
+  onPointerDown?: React.PointerEventHandler;
 } & UseSortableReturnType["attributes"];
 
+export type ItemChildrenExtraProps = {
+  isDragging: boolean;
+  isOverlay: boolean;
+  relativeDropPosition: RelativeDropPosition | undefined;
+  setActivatorNodeRef: React.RefCallback<HTMLElement>;
+  setDraggableNodeRef: React.RefCallback<HTMLElement>;
+  setDroppableNodeRef: React.RefCallback<HTMLElement>;
+};
+
 // Context for drop indicators within a sortable list
 interface SortableItemContextProps {
   acceptsDrop: DropValidator;
@@ -117,11 +127,13 @@ interface RootProps {
   children?: React.ReactNode;
   renderOverlay?: (index: number) => React.ReactNode;
   onMoveItem?: MoveDragItemHandler;
+  onIsDraggingChange?: (isDragging: boolean) => void;
   acceptsFromList?: AcceptsFromList;
   acceptsDrop?: DropValidator;
   getDropTargetParentIndex?: (index: number) => number | undefined;
   sharedDragProps?: SharedDragProps;
   containerRef?: React.RefObject<HTMLElement | null>;
+  itemHitSlop?: Insets;
 }
 
 function SortableItem<TElement extends HTMLElement>({
@@ -131,14 +143,26 @@ function SortableItem<TElement extends HTMLElement>({
 }: {
   id: UniqueIdentifier;
   disabled?: boolean;
-  children: (props: ItemChildrenProps<TElement>) => React.ReactNode;
+  children: (
+    props: ItemChildrenProps<TElement>,
+    extraProps: Omit<ItemChildrenExtraProps, "isOverlay">
+  ) => React.ReactNode;
 }) {
   const { acceptsDrop, listId, getDropTargetParentIndex } =
     React.useContext(SortableItemContext);
 
   const dragItemKey = createDragItemKey(listId, id);
 
-  const { attributes, listeners, setNodeRef, isDragging, index } = useSortable({
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    index,
+    setActivatorNodeRef,
+    setDraggableNodeRef,
+    setDroppableNodeRef,
+  } = useSortable({
     id: dragItemKey,
     disabled,
   });
@@ -156,21 +180,28 @@ function SortableItem<TElement extends HTMLElement>({
     getDropTargetParentIndex,
   });
 
-  return children({
-    ref,
-    ...attributes,
-    ...listeners,
-    relativeDropPosition,
-    style: {
-      opacity: isDragging ? 0.5 : 1,
+  return children(
+    {
+      ref,
+      ...attributes,
+      ...listeners,
+      style: { opacity: isDragging ? 0.5 : 1 },
     },
-  });
+    {
+      isDragging,
+      setActivatorNodeRef,
+      setDraggableNodeRef,
+      setDroppableNodeRef,
+      relativeDropPosition,
+    }
+  );
 }
 
 function SortableRoot_({
   id: idProp,
   keys: keysProp,
   onMoveItem,
+  onIsDraggingChange,
   renderOverlay,
   acceptsFromList,
   acceptsDrop = defaultAcceptsDrop,
@@ -179,6 +210,7 @@ function SortableRoot_({
   getDropTargetParentIndex,
   sharedDragProps,
   containerRef,
+  itemHitSlop,
 }: RootProps) {
   const defaultId = React.useId();
   const id = idProp ?? defaultId;
@@ -234,6 +266,7 @@ function SortableRoot_({
 
         return relativeDropPosition;
       },
+      itemHitSlop,
     };
 
     registerList(listConfig);
@@ -251,6 +284,7 @@ function SortableRoot_({
     registerList,
     unregisterList,
     keys,
+    itemHitSlop,
   ]);
 
   const contextValue: SortableItemContextProps = React.useMemo(
@@ -265,6 +299,16 @@ function SortableRoot_({
     [keys, acceptsDrop, id, getDropTargetParentIndex, sharedDragProps]
   );
 
+  // Notify drag state changes to consumers if requested
+  const activeDragContext =
+    sharedDragProps?.activeDragContext ?? ActiveDragContext;
+  const dragState = React.useContext(activeDragContext);
+  const isDragging = !!dragState?.source;
+
+  React.useEffect(() => {
+    onIsDraggingChange?.(isDragging);
+  }, [isDragging, onIsDraggingChange]);
+
   // Set the droppable ref after every render.
   // Since we don't render the dom node internally, we aggressively set it
   // after every render to make sure we are using the latest.
@@ -300,7 +344,7 @@ export interface SortableProps<TItem, TElement extends HTMLElement>
   renderItem: (
     item: TItem,
     props: ItemChildrenProps<TElement>,
-    { isOverlay }: { isOverlay: boolean }
+    extraProps: { isOverlay: boolean } & ItemChildrenExtraProps
   ) => React.ReactNode;
 }
 
@@ -330,7 +374,14 @@ const Sortable_ = function Sortable_<TItem, TElement extends HTMLElement>({
           "aria-describedby": "Item being dragged",
           role: "button",
         },
-        { isOverlay: true }
+        {
+          isOverlay: true,
+          setActivatorNodeRef: () => {},
+          setDraggableNodeRef: () => {},
+          setDroppableNodeRef: () => {},
+          relativeDropPosition: undefined,
+          isDragging: true,
+        }
       );
     },
     [renderItem, items]
@@ -344,8 +395,11 @@ const Sortable_ = function Sortable_<TItem, TElement extends HTMLElement>({
     >
       {keys.map((key, index) => (
         <SortableItem<TElement> key={key} id={key}>
-          {(props) => {
-            return renderItem(items[index], props, { isOverlay: false });
+          {(props, extraProps) => {
+            return renderItem(items[index], props, {
+              isOverlay: false,
+              ...extraProps,
+            });
           }}
         </SortableItem>
       ))}

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -68,7 +68,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
     <div
       ref={portalContainer}
       id={EDITOR_PANEL_GROUP_ID}
-      className="flex flex-1 relative focus:outline-none"
+      className="n-flex n-flex-1 n-relative focus:n-outline-none"
     >
       {hasTabs && (
         <VerticalTabMenu
@@ -111,12 +111,12 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
           }}
         />
       )}
-      {hasTabs && <DividerVertical className="h-full" />}
-      <div className="flex-1 flex relative">{centerPanel}</div>
+      {hasTabs && <DividerVertical className="n-h-full" />}
+      <div className="n-flex-1 n-flex n-relative">{centerPanel}</div>
       {leftPanel && (
         <Drawer
           ref={leftSidebarRef}
-          className="flex-1"
+          className="n-flex-1"
           style={{
             left: 48,
             maxWidth: "calc(100% - 48px)",
@@ -143,7 +143,7 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
         <Drawer
           id={RIGHT_SIDEBAR_ID}
           ref={rightSidebarRef}
-          className="flex-1"
+          className="n-flex-1"
           style={{
             left: 48,
             maxWidth: "calc(100% - 48px)",

package/src/components/workspace/PanelWorkspaceLayout.tsx

@@ -5,7 +5,7 @@ import {
   memoGeneric,
   usePersistentStateObject,
 } from "@noya-app/react-utils";
-import React, { useMemo, useRef } from "react";
+import React, { useCallback, useMemo, useRef } from "react";
 import {
   ImperativePanelGroupHandle,
   ImperativePanelHandle,
@@ -106,26 +106,68 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
     });
   }, [layoutGroup, propertyKey, layoutIds, hasLeftPanel, hasRightPanel]);
 
+  const handleLeftTabChange = useCallback(
+    (value: LeftTab) => {
+      if (value === leftTabValue) {
+        if (leftSidebarRef.current?.isExpanded()) {
+          leftSidebarRef.current?.collapse();
+        } else {
+          leftSidebarRef.current?.expand();
+        }
+      } else {
+        if (!leftSidebarRef.current?.isExpanded()) {
+          leftSidebarRef.current?.expand();
+        }
+        onChangeLeftTab?.(value);
+      }
+    },
+    [leftSidebarRef, leftTabValue, onChangeLeftTab]
+  );
+
+  const handleRightTabChange = useCallback(
+    (value: RightTab) => {
+      if (value === rightTabValue) {
+        if (rightSidebarRef.current?.isExpanded()) {
+          rightSidebarRef.current?.collapse();
+        } else {
+          rightSidebarRef.current?.expand();
+        }
+      } else {
+        if (!rightSidebarRef.current?.isExpanded()) {
+          rightSidebarRef.current?.expand();
+        }
+        onChangeRightTab?.(value);
+      }
+    },
+    [onChangeRightTab, rightSidebarRef, rightTabValue]
+  );
+
+  const handleLayoutChange = useCallback(
+    (layout: number[]) => {
+      setData((prev) => {
+        const newData = {
+          ...prev,
+          [propertyKey]: {
+            layout: layout.map((size) => toPixelSize(size)),
+            expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
+          },
+        };
+
+        return newData;
+      });
+    },
+    [setData, propertyKey]
+  );
+
   return (
     <PanelGroup
       ref={panelGroupRef}
       id={EDITOR_PANEL_GROUP_ID}
-      className="flex-1"
+      className="n-flex-1"
       direction="horizontal"
       storage={panelStorage}
       autoSaveId={autoSaveId}
-      onLayout={(layout) => {
-        setData((prev) => {
-          const newData = {
-            ...prev,
-            [propertyKey]: {
-              layout: layout.map((size) => toPixelSize(size)),
-              expandToSizes: prev?.[propertyKey]?.expandToSizes ?? {},
-            },
-          };
-          return newData;
-        });
-      }}
+      onLayout={handleLayoutChange}
     >
       {leftPanel && (
         <>
@@ -135,28 +177,15 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
               items={leftTabItems}
               activeValue={leftTabValue}
               isSidebarCollapsed={leftSidebarCollapsed}
-              onChange={(value) => {
-                if (value === leftTabValue) {
-                  if (leftSidebarRef.current?.isExpanded()) {
-                    leftSidebarRef.current?.collapse();
-                  } else {
-                    leftSidebarRef.current?.expand();
-                  }
-                } else {
-                  if (!leftSidebarRef.current?.isExpanded()) {
-                    leftSidebarRef.current?.expand();
-                  }
-                  onChangeLeftTab?.(value);
-                }
-              }}
+              onChange={handleLeftTabChange}
             />
           )}
           {leftSidebarOptions.showTabs &&
             leftTabItems &&
-            !leftSidebarCollapsed && <DividerVertical className="h-full" />}
+            !leftSidebarCollapsed && <DividerVertical className="n-h-full" />}
           <Panel
             id={LEFT_SIDEBAR_ID}
-            className="relative"
+            className="n-relative"
             order={1}
             ref={leftSidebarRef as React.RefObject<ImperativePanelHandle>}
             defaultSize={leftSidebarOptions.initialSize}
@@ -171,7 +200,7 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
           >
             {leftSidebarCollapsed ? null : leftPanel}
           </Panel>
-          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+          <PanelResizeHandle className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
         </>
       )}
       <Panel
@@ -179,16 +208,16 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
         order={2}
         defaultSize={centerPanelPercentage}
         minSize={10}
-        className="flex relative"
+        className="n-flex n-relative"
       >
         {centerPanel}
       </Panel>
       {rightPanel && (
         <>
-          <PanelResizeHandle className="cursor-col-resize w-px h-full bg-divider" />
+          <PanelResizeHandle className="n-cursor-col-resize n-w-px n-h-full n-bg-divider" />
           <Panel
             id={RIGHT_SIDEBAR_ID}
-            className="relative"
+            className="n-relative"
             order={3}
             ref={rightSidebarRef as React.RefObject<ImperativePanelHandle>}
             minSize={rightSidebarOptions.minSize}
@@ -205,27 +234,14 @@ export const PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout<
           </Panel>
           {rightSidebarOptions.showTabs &&
             rightTabItems &&
-            !rightSidebarCollapsed && <DividerVertical className="h-full" />}
+            !rightSidebarCollapsed && <DividerVertical className="n-h-full" />}
           {rightSidebarOptions.showTabs && rightTabItems && (
             <VerticalTabMenu
               tooltipSide="left"
               items={rightTabItems}
               activeValue={rightTabValue}
               isSidebarCollapsed={rightSidebarCollapsed}
-              onChange={(value) => {
-                if (value === rightTabValue) {
-                  if (rightSidebarRef.current?.isExpanded()) {
-                    rightSidebarRef.current?.collapse();
-                  } else {
-                    rightSidebarRef.current?.expand();
-                  }
-                } else {
-                  if (!rightSidebarRef.current?.isExpanded()) {
-                    rightSidebarRef.current?.expand();
-                  }
-                  onChangeRightTab?.(value);
-                }
-              }}
+              onChange={handleRightTabChange}
             />
           )}
         </>

package/src/components/workspace/VerticalTabMenu.tsx

@@ -1,36 +1,46 @@
-import React, { ComponentProps } from "react";
+import { memoGeneric } from "@noya-app/react-utils";
+import React, { ComponentProps, useMemo } from "react";
 import { cssVarNames } from "../../theme";
 import { MenuItem } from "../internal/Menu";
 import { ToolbarMenu } from "../Toolbar";
 import { Tooltip } from "../Tooltip";
 
-export function VerticalTabMenu<TabValue extends string>({
-  items,
-  activeValue,
-  isSidebarCollapsed,
-  onChange,
-  tooltipSide,
-}: {
+type VerticalTabMenuProps<TabValue extends string> = {
   items: MenuItem<TabValue>[];
   activeValue: TabValue | undefined;
   isSidebarCollapsed: boolean;
   onChange: (value: TabValue) => void;
   tooltipSide?: ComponentProps<typeof Tooltip>["side"];
-}) {
+};
+
+export const VerticalTabMenu = memoGeneric(function VerticalTabMenu<
+  TabValue extends string,
+>({
+  items,
+  activeValue,
+  isSidebarCollapsed,
+  onChange,
+  tooltipSide,
+}: VerticalTabMenuProps<TabValue>) {
+  const style = useMemo(() => {
+    return {
+      [cssVarNames.colors.inputBackground]: "transparent",
+      [cssVarNames.colors.buttonBackground]: "transparent",
+    };
+  }, []);
+
   return (
     <div
-      className="w-[47px] h-full bg-sidebar-background flex flex-col items-center py-3 gap-3"
-      style={{
-        [cssVarNames.colors.inputBackground]: "transparent",
-        [cssVarNames.colors.buttonBackground]: "transparent",
-      }}
+      className="n-w-[47px] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3"
+      style={style}
     >
       <ToolbarMenu
         items={items}
         activeValue={isSidebarCollapsed ? undefined : activeValue}
         onSelectMenuItem={onChange}
         tooltipSide={tooltipSide}
+        displayFilter="iconOnly"
       />
     </div>
   );
-}
+});