@noya-app/noya-designsystem 0.1.90 → 0.1.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.90",
+  "version": "0.1.91",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/OverlayToolbar.tsx

@@ -1,17 +1,23 @@
 "use client";
 
-import React, { useMemo } from "react";
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from "react";
 import { cx } from "../utils/classNames";
 import { toolbarTransparentStyle } from "./BaseToolbar";
 
 export type OverlayLayout = "bottomCenterTopRight" | "topLeftTopRight";
 
+export type OverlayToolbarRect = {
+  id: string;
+  rect: { x: number; y: number; width: number; height: number };
+};
+
 export interface OverlayToolbarProps {
   left?: React.ReactNode;
   right?: React.ReactNode;
   overlayLayout?: OverlayLayout;
   className?: string;
   style?: React.CSSProperties;
+  onRectsChange?: (rects: OverlayToolbarRect[]) => void;
 }
 
 const panelClassName =
@@ -23,11 +29,16 @@ export function OverlayToolbar({
   overlayLayout = "bottomCenterTopRight",
   className,
   style,
+  onRectsChange,
 }: OverlayToolbarProps) {
   const resolvedLayout =
     overlayLayout === "topLeftTopRight"
       ? "topLeftTopRight"
       : "bottomCenterTopRight";
+  const leftPanelRef = useRef<HTMLDivElement>(null);
+  const rightPanelRef = useRef<HTMLDivElement>(null);
+  const hasLeft = Boolean(left);
+  const hasRight = Boolean(right);
 
   // Merge transparent backgrounds with custom style
   const panelStyle = useMemo(
@@ -38,11 +49,85 @@ export function OverlayToolbar({
     [style]
   );
 
+  const emitRects = useCallback(() => {
+    if (!onRectsChange) return;
+
+    const panels = [
+      {
+        id:
+          resolvedLayout === "topLeftTopRight"
+            ? "noya-toolbar-top-left"
+            : "noya-toolbar-bottom-center",
+        element: leftPanelRef.current,
+      },
+      {
+        id: "noya-toolbar-top-right",
+        element: rightPanelRef.current,
+      },
+    ];
+
+    onRectsChange(
+      panels.flatMap(({ id, element }) => {
+        if (!element) return [];
+
+        const rect = element.getBoundingClientRect();
+        const containerRect = element
+          .closest<HTMLElement>("[data-workspace-content]")
+          ?.getBoundingClientRect();
+        return [
+          {
+            id,
+            rect: {
+              x: rect.x - (containerRect?.x ?? 0),
+              y: rect.y - (containerRect?.y ?? 0),
+              width: rect.width,
+              height: rect.height,
+            },
+          },
+        ];
+      })
+    );
+  }, [onRectsChange, resolvedLayout]);
+
+  useLayoutEffect(() => {
+    if (!onRectsChange) return;
+
+    let animationFrame: number | undefined;
+    const scheduleEmit = () => {
+      if (animationFrame !== undefined) {
+        cancelAnimationFrame(animationFrame);
+      }
+      animationFrame = requestAnimationFrame(emitRects);
+    };
+
+    emitRects();
+
+    const resizeObserver =
+      typeof ResizeObserver === "undefined"
+        ? undefined
+        : new ResizeObserver(scheduleEmit);
+    const panels = [leftPanelRef.current, rightPanelRef.current];
+    panels.forEach((panel) => panel && resizeObserver?.observe(panel));
+    window.addEventListener("resize", scheduleEmit);
+    window.addEventListener("scroll", scheduleEmit, true);
+
+    return () => {
+      if (animationFrame !== undefined) {
+        cancelAnimationFrame(animationFrame);
+      }
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", scheduleEmit);
+      window.removeEventListener("scroll", scheduleEmit, true);
+      onRectsChange([]);
+    };
+  }, [emitRects, hasLeft, hasRight, onRectsChange]);
+
   const renderLeftPanel = (overlayId: string) => {
     if (!left) return null;
 
     return (
       <div
+        ref={leftPanelRef}
         className={panelClassName}
         data-embedded-overlay-id={overlayId}
         style={panelStyle}
@@ -84,6 +169,7 @@ export function OverlayToolbar({
           )}
         >
           <div
+            ref={rightPanelRef}
             className={panelClassName}
             data-embedded-overlay-id="noya-toolbar-top-right"
             style={panelStyle}

package/src/components/__tests__/OverlayToolbar.test.tsx

@@ -0,0 +1,63 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { OverlayToolbar, OverlayToolbarRect } from "../OverlayToolbar";
+
+afterEach(cleanup);
+
+describe("OverlayToolbar", () => {
+  test("reports the bounds of its local panels", () => {
+    const originalGetBoundingClientRect =
+      HTMLElement.prototype.getBoundingClientRect;
+    const updates: OverlayToolbarRect[][] = [];
+
+    HTMLElement.prototype.getBoundingClientRect = function () {
+      const id = this.getAttribute("data-embedded-overlay-id");
+      const rect = this.hasAttribute("data-workspace-content")
+        ? { x: 100, y: 200, width: 800, height: 600 }
+        : id === "noya-toolbar-top-left"
+          ? { x: 116, y: 216, width: 120, height: 40 }
+          : id === "noya-toolbar-top-right"
+            ? { x: 700, y: 224, width: 160, height: 48 }
+            : undefined;
+
+      if (!rect) return originalGetBoundingClientRect.call(this);
+
+      return {
+        ...rect,
+        top: rect.y,
+        right: rect.x + rect.width,
+        bottom: rect.y + rect.height,
+        left: rect.x,
+        toJSON: () => rect,
+      } as DOMRect;
+    };
+
+    try {
+      render(
+        <div data-workspace-content>
+          <OverlayToolbar
+            left={<div>Left</div>}
+            right={<div>Right</div>}
+            overlayLayout="topLeftTopRight"
+            onRectsChange={(rects) => updates.push(rects)}
+          />
+        </div>
+      );
+
+      expect(updates.at(-1)).toEqual([
+        {
+          id: "noya-toolbar-top-left",
+          rect: { x: 16, y: 16, width: 120, height: 40 },
+        },
+        {
+          id: "noya-toolbar-top-right",
+          rect: { x: 600, y: 24, width: 160, height: 48 },
+        },
+      ]);
+    } finally {
+      HTMLElement.prototype.getBoundingClientRect =
+        originalGetBoundingClientRect;
+    }
+  });
+});

package/src/components/workspace/WorkspaceLayout.tsx

@@ -16,7 +16,11 @@ import React, {
 } from "react";
 import { cx } from "../../utils/classNames";
 import { MenuItem } from "../internal/Menu";
-import { OverlayLayout, OverlayToolbar } from "../OverlayToolbar";
+import {
+  OverlayLayout,
+  OverlayToolbar,
+  OverlayToolbarRect,
+} from "../OverlayToolbar";
 import { DrawerWorkspaceLayout } from "./DrawerWorkspaceLayout";
 import { PanelWorkspaceLayout } from "./PanelWorkspaceLayout";
 import { renderPanelChildren } from "./renderPanelChildren";
@@ -76,6 +80,10 @@ export interface WorkspaceLayoutProps<
    * @default "bottomCenterTopRight"
    */
   overlayLayout?: OverlayLayout;
+  /** Empty space to reserve above workspace content. @default 0 */
+  contentTopInset?: number;
+  /** Called when the local overlay toolbar panels move or resize. */
+  onOverlayToolbarRectsChange?: (rects: OverlayToolbarRect[]) => void;
   sideType?: SideType;
   sideTypeBreakpoint?: number;
   detectSize?: DetectSizeType;
@@ -165,6 +173,8 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
     overlayToolbarLeft,
     overlayToolbarRight,
     overlayLayout,
+    contentTopInset = 0,
+    onOverlayToolbarRectsChange,
     children,
     sideType = "auto",
     sideTypeBreakpoint = 800,
@@ -450,7 +460,13 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
       data-theme={theme}
     >
       {!isOverlay && toolbar}
-      <div className="n-flex n-flex-row n-flex-1 n-relative">
+      <div
+        className="n-flex n-flex-row n-flex-1 n-min-h-0 n-relative"
+        data-workspace-content
+        style={
+          contentTopInset > 0 ? { paddingTop: contentTopInset } : undefined
+        }
+      >
         {readyToRender && (
           <>
             <LayoutComponent
@@ -478,6 +494,7 @@ export const WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout<
                 left={overlayToolbarLeft}
                 right={overlayToolbarRight}
                 overlayLayout={overlayLayout}
+                onRectsChange={onOverlayToolbarRectsChange}
               />
             )}
           </>

package/src/components/workspace/__tests__/WorkspaceLayout.test.tsx

@@ -0,0 +1,41 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { cleanup, render } from "@testing-library/react";
+import React from "react";
+import { WorkspaceLayout } from "../WorkspaceLayout";
+
+afterEach(cleanup);
+
+describe("WorkspaceLayout", () => {
+  test("applies the top inset to content without moving the toolbar", () => {
+    const { container, getByText } = render(
+      <WorkspaceLayout
+        contentTopInset={72}
+        detectSize="window"
+        toolbar={<div>Toolbar</div>}
+      >
+        <div>Content</div>
+      </WorkspaceLayout>
+    );
+
+    const content = container.querySelector<HTMLElement>(
+      "[data-workspace-content]"
+    );
+
+    expect(content?.style.paddingTop).toBe("72px");
+    expect(content?.contains(getByText("Toolbar"))).toBe(false);
+    expect(content?.contains(getByText("Content"))).toBe(true);
+  });
+
+  test("does not pad content when the inset is zero", () => {
+    const { container } = render(
+      <WorkspaceLayout contentTopInset={0} detectSize="window">
+        <div>Content</div>
+      </WorkspaceLayout>
+    );
+
+    const content = container.querySelector<HTMLElement>(
+      "[data-workspace-content]"
+    );
+    expect(content?.style.paddingTop).toBe("");
+  });
+});