@noya-app/noya-designsystem 0.1.63 → 0.1.64

package/src/components/sorting/SharedDragProvider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   Active,
   closestCenter,
@@ -15,7 +17,7 @@ import {
 } from "@dnd-kit/core";
 import { Point, rectContainsPoint, unionRects } from "@noya-app/noya-geometry";
 import { windowsOf } from "@noya-app/noya-utils";
-import { useStableCallback } from "@noya-app/react-utils";
+import { useIsomorphicLayoutEffect } from "@noya-app/react-utils";
 import * as React from "react";
 import { useMemo } from "react";
 import { createPortal } from "react-dom";
@@ -30,6 +32,7 @@ import {
   useDragRegistrationManager,
 } from "./DragRegistration";
 import {
+  AcceptsDrop,
   DragItem,
   DragState,
   MoveDragItemHandler,
@@ -37,14 +40,16 @@ import {
   RelativeDropPosition,
 } from "./sorting";
 
-type SharedDragProviderProps = {
+export type SharedDragProviderProps = {
   children: React.ReactNode;
+  acceptsDrop?: AcceptsDrop;
   onMoveItem?: MoveDragItemHandler;
   sharedDragProps?: SharedDragProps;
 };
 
 export function SharedDragProvider({
   children,
+  acceptsDrop,
   onMoveItem,
   sharedDragProps = {
     dragRegistrationContext: DragRegistrationContext,
@@ -66,6 +71,16 @@ export function SharedDragProvider({
     indicator: null,
   });
 
+  const stableOnMoveItem = React.useRef(onMoveItem);
+  useIsomorphicLayoutEffect(() => {
+    stableOnMoveItem.current = onMoveItem;
+  }, [onMoveItem]);
+
+  const stableAcceptsDrop = React.useRef(acceptsDrop);
+  useIsomorphicLayoutEffect(() => {
+    stableAcceptsDrop.current = acceptsDrop;
+  }, [acceptsDrop]);
+
   // console.log("dragState", dragState.target);
 
   const { registerList, unregisterList, registeredLists } =
@@ -117,6 +132,7 @@ export function SharedDragProvider({
         active,
         source: dragState.source,
         registeredLists,
+        acceptsDrop: stableAcceptsDrop.current,
       });
 
       setDragState({
@@ -128,8 +144,6 @@ export function SharedDragProvider({
     [registeredLists, dragState.source]
   );
 
-  const stableOnMoveItem = useStableCallback(onMoveItem);
-
   const handleDragEnd = React.useCallback(
     (event: DragEndEvent) => {
       const { active, over } = event;
@@ -146,6 +160,7 @@ export function SharedDragProvider({
         active,
         source: dragState.source,
         registeredLists,
+        acceptsDrop: stableAcceptsDrop.current,
       });
 
       setDragState({
@@ -170,14 +185,16 @@ export function SharedDragProvider({
         targetListId: dropTarget.target.listId,
       };
 
-      // Both lists have the opportunity to handle the move
-      sourceList.onMoveItem(parameters);
+      if (stableOnMoveItem.current) {
+        stableOnMoveItem.current(parameters);
+      } else {
+        // Both lists have the opportunity to handle the move
+        sourceList.onMoveItem(parameters);
 
-      if (dropTarget.target.listId !== dropTarget.source.listId) {
-        targetList.onMoveItem(parameters);
+        if (dropTarget.target.listId !== dropTarget.source.listId) {
+          targetList.onMoveItem(parameters);
+        }
       }
-
-      stableOnMoveItem?.(parameters);
     },
     [registeredLists, dragState.source, stableOnMoveItem]
   );
@@ -327,6 +344,7 @@ function findDropTarget({
   active,
   source,
   registeredLists,
+  acceptsDrop: acceptsDropProp,
 }: {
   activationPoint: Point;
   delta: Point;
@@ -334,6 +352,7 @@ function findDropTarget({
   active: Active;
   source: DragItem;
   registeredLists: Map<string, RegisteredList>;
+  acceptsDrop?: AcceptsDrop;
 }):
   | {
       source: DragItem;
@@ -379,9 +398,11 @@ function findDropTarget({
     return;
   }
 
+  const acceptsDrop = acceptsDropProp ?? targetList.acceptsDrop;
+
   // Dropping on the list container itself
   if (over.id === targetList.id) {
-    const canDrop = targetList.acceptsDrop({
+    const canDrop = acceptsDrop({
       sourceIndex: source.index,
       targetIndex: Math.max(0, targetList.keys.length - 1), // Use last valid index or 0 for empty lists
       position: "below",
@@ -408,13 +429,17 @@ function findDropTarget({
   const currentY = eventY + delta.y;
   const absolutePosition = { x: currentX, y: currentY };
 
-  const indicator = targetList.getDropIndicator({
-    absolutePosition,
-    active,
-    over,
-    sourceListId: sourceList.id,
-    targetListId: targetList.id,
-  });
+  const indicator = targetList.getDropIndicator(
+    {
+      absolutePosition,
+      activeIndex: source.index,
+      overIndex: targetIndex,
+      overRect: over.rect,
+      sourceListId: sourceList.id,
+      targetListId: targetList.id,
+    },
+    acceptsDrop
+  );
 
   if (indicator) {
     return {

package/src/components/sorting/Sortable.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { UniqueIdentifier, useDroppable } from "@dnd-kit/core";
 import {
   horizontalListSortingStrategy,
@@ -74,7 +76,9 @@ function useSortableDropIndicator({
   }
 
   const targetParentIndex =
-    target.index === -1 ? undefined : getDropTargetParentIndex?.(target.index);
+    listId !== target.listId || target.index === -1
+      ? undefined
+      : getDropTargetParentIndex?.(target.index);
 
   const isValidParent =
     targetParentIndex === undefined || targetParentIndex === -1
@@ -117,7 +121,7 @@ interface RootProps {
   acceptsDrop?: DropValidator;
   getDropTargetParentIndex?: (index: number) => number | undefined;
   sharedDragProps?: SharedDragProps;
-  containerRef?: React.RefObject<HTMLElement>;
+  containerRef?: React.RefObject<HTMLElement | null>;
 }
 
 function SortableItem<TElement extends HTMLElement>({
@@ -202,20 +206,25 @@ function SortableRoot_({
       },
       acceptsFromList: acceptsFromList ?? (() => true),
       acceptsDrop,
-      getDropIndicator: (parameters) => {
-        const { absolutePosition, active, over, sourceListId, targetListId } =
-          parameters;
+      getDropIndicator: (parameters, acceptsDrop) => {
+        const {
+          absolutePosition,
+          activeIndex,
+          overIndex,
+          overRect,
+          sourceListId,
+          targetListId,
+        } = parameters;
 
         const offsetStart =
           axis === "x" ? absolutePosition.x : absolutePosition.y;
-        const elementStart = axis === "x" ? over.rect.left : over.rect.top;
-        const elementSize = axis === "x" ? over.rect.width : over.rect.height;
+        const elementStart = axis === "x" ? overRect.left : overRect.top;
+        const elementSize = axis === "x" ? overRect.width : overRect.height;
 
         const relativeDropPosition = validateDropIndicator({
           acceptsDrop,
-          keys,
-          activeId: active.id,
-          overId: over.id,
+          activeIndex,
+          overIndex,
           offsetStart,
           elementStart,
           elementSize,

package/src/components/sorting/createSharedDrag.tsx

@@ -4,7 +4,10 @@ import {
   DragRegistrationContextType,
   SharedDragProps,
 } from "./DragRegistration";
-import { SharedDragProvider } from "./SharedDragProvider";
+import {
+  SharedDragProvider,
+  SharedDragProviderProps,
+} from "./SharedDragProvider";
 import { Sortable, SortableProps } from "./Sortable";
 
 export function createSharedDrag(): {
@@ -25,11 +28,9 @@ export function createSharedDrag(): {
     activeDragContext,
   };
 
-  const Provider = ({ children }: { children: React.ReactNode }) => (
-    <SharedDragProvider sharedDragProps={sharedDragProps}>
-      {children}
-    </SharedDragProvider>
-  );
+  const Provider = (
+    props: Omit<SharedDragProviderProps, "sharedDragProps">
+  ) => <SharedDragProvider sharedDragProps={sharedDragProps} {...props} />;
 
   return {
     Provider,

package/src/components/sorting/sorting.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { UniqueIdentifier } from "@dnd-kit/core";
 import * as React from "react";
 
@@ -83,9 +85,8 @@ export const SortableItemContext =
 
 export 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
+  activeIndex: number; // ID of item being dragged
+  overIndex: number; // 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)
@@ -95,18 +96,14 @@ export type ValidateDropIndicatorParams = {
 
 export function validateDropIndicator({
   acceptsDrop,
-  keys,
-  activeId,
-  overId,
+  activeIndex,
+  overIndex,
   offsetStart,
   elementStart,
   elementSize,
   sourceListId,
   targetListId,
 }: 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 (overIndex === -1) return undefined;
   if (activeIndex === -1 && sourceListId === targetListId) return undefined;
 

package/src/components/workspace/DrawerWorkspaceLayout.tsx

@@ -1,12 +1,13 @@
+"use client";
+
 import { memoGeneric } from "@noya-app/react-utils";
-import React, { useLayoutEffect, useRef, useState } from "react";
-import {
-  EDITOR_PANEL_GROUP_ID,
-  LEFT_SIDEBAR_ID,
-  RIGHT_SIDEBAR_ID,
-} from "../../hooks/usePreservePanelSize";
+import React, { useMemo, useRef, useState } from "react";
+import { DividerVertical } from "../Divider";
 import { Drawer } from "../Drawer";
-import { LayoutProps } from "./types";
+import { isSelectableMenuItem, MenuItem } from "../internal/Menu";
+import { EDITOR_PANEL_GROUP_ID, RIGHT_SIDEBAR_ID } from "./constants";
+import { LayoutProps, PanelLayoutState } from "./types";
+import { VerticalTabMenu } from "./VerticalTabMenu";
 
 export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   LeftTab extends string = string,
@@ -17,26 +18,51 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
   rightPanel,
   rightSidebarRef,
   centerPanel,
-  internalLayoutState,
-  handleChangeLayoutState,
+  leftTabItems,
+  leftTabValue,
+  rightTabItems,
+  rightTabValue,
+  onChangeRightTab,
+  onChangeLeftTab,
 }: LayoutProps<LeftTab, RightTab>) {
   const portalContainer = useRef<HTMLDivElement>(null);
-  const [mounted, setMounted] = useState(false);
-
-  useLayoutEffect(() => {
-    if (mounted) return;
 
-    setMounted(true);
-    handleChangeLayoutState({
+  const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] =
+    useState<PanelLayoutState>({
       leftSidebarCollapsed: true,
       rightSidebarCollapsed: true,
     });
-  }, [handleChangeLayoutState, mounted]);
 
-  const leftSidebarCollapsed =
-    internalLayoutState?.leftSidebarCollapsed ?? false;
-  const rightSidebarCollapsed =
-    internalLayoutState?.rightSidebarCollapsed ?? false;
+  const allTabItems = useMemo(
+    () =>
+      [
+        ...(leftPanel ? leftTabItems ?? [] : []),
+        ...(rightPanel ? rightTabItems ?? [] : []),
+      ] as MenuItem<LeftTab | RightTab>[],
+    [leftTabItems, rightTabItems, leftPanel, rightPanel]
+  );
+
+  const hasTabs = allTabItems.length > 0;
+
+  const leftSelectableTabItems = useMemo(
+    () => (leftTabItems ?? []).filter(isSelectableMenuItem),
+    [leftTabItems]
+  );
+
+  const rightSelectableTabItems = useMemo(
+    () => (rightTabItems ?? []).filter(isSelectableMenuItem),
+    [rightTabItems]
+  );
+
+  const { activeValue, isSidebarCollapsed } =
+    leftSelectableTabItems.length > 0 && !leftSidebarCollapsed
+      ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed }
+      : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed
+        ? {
+            activeValue: rightTabValue,
+            isSidebarCollapsed: rightSidebarCollapsed,
+          }
+        : { activeValue: undefined, isSidebarCollapsed: true };
 
   return (
     <div
@@ -44,39 +70,94 @@ export const DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout<
       id={EDITOR_PANEL_GROUP_ID}
       className="flex flex-1 relative focus:outline-none"
     >
+      {hasTabs && (
+        <VerticalTabMenu
+          tooltipSide="right"
+          items={allTabItems}
+          activeValue={activeValue}
+          isSidebarCollapsed={isSidebarCollapsed}
+          onChange={(value) => {
+            if (leftSelectableTabItems.some((item) => item.value === 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 as LeftTab);
+              }
+            } else if (
+              rightSelectableTabItems.some((item) => item.value === 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 as RightTab);
+              }
+            }
+          }}
+        />
+      )}
+      {hasTabs && <DividerVertical className="h-full" />}
+      <div className="flex-1 flex relative">{centerPanel}</div>
       {leftPanel && (
         <Drawer
-          id={LEFT_SIDEBAR_ID}
           ref={leftSidebarRef}
           className="flex-1"
+          style={{
+            left: 48,
+            maxWidth: "calc(100% - 48px)",
+          }}
+          overlayStyle={{
+            left: 48,
+          }}
           open={!leftSidebarCollapsed}
           positioning="absolute"
           side="left"
           trigger={null}
           portalContainer={portalContainer.current}
           onOpenChange={(open) => {
-            handleChangeLayoutState({
-              rightSidebarCollapsed: rightSidebarCollapsed,
+            setLayoutState({
               leftSidebarCollapsed: !open,
+              rightSidebarCollapsed: rightSidebarCollapsed,
             });
           }}
         >
           {leftPanel}
         </Drawer>
       )}
-      {centerPanel}
       {rightPanel && (
         <Drawer
           id={RIGHT_SIDEBAR_ID}
           ref={rightSidebarRef}
           className="flex-1"
+          style={{
+            left: 48,
+            maxWidth: "calc(100% - 48px)",
+          }}
+          overlayStyle={{
+            left: 48,
+          }}
           open={!rightSidebarCollapsed}
           positioning="absolute"
-          side="right"
+          side="left"
           trigger={null}
           portalContainer={portalContainer.current}
           onOpenChange={(open) => {
-            handleChangeLayoutState({
+            setLayoutState({
               leftSidebarCollapsed: leftSidebarCollapsed,
               rightSidebarCollapsed: !open,
             });