@noya-app/noya-designsystem 0.1.89 → 0.1.91

package/dist/index.js

@@ -41,11 +41,11 @@ var require_use_sync_external_store_shim_production = __commonJS({
     var objectIs = "function" === typeof Object.is ? Object.is : is;
     var useState80 = React325.useState;
     var useEffect61 = React325.useEffect;
-    var useLayoutEffect12 = React325.useLayoutEffect;
+    var useLayoutEffect13 = React325.useLayoutEffect;
     var useDebugValue2 = React325.useDebugValue;
     function useSyncExternalStore$2(subscribe, getSnapshot) {
       var value = getSnapshot(), _useState = useState80({ inst: { value, getSnapshot } }), inst = _useState[0].inst, forceUpdate = _useState[1];
-      useLayoutEffect12(
+      useLayoutEffect13(
         function() {
           inst.value = value;
           inst.getSnapshot = getSnapshot;
@@ -106,7 +106,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
           inst: { value, getSnapshot }
         });
         var inst = cachedValue[0].inst, forceUpdate = cachedValue[1];
-        useLayoutEffect12(
+        useLayoutEffect13(
           function() {
             inst.value = value;
             inst.getSnapshot = getSnapshot;
@@ -140,7 +140,7 @@ var require_use_sync_external_store_shim_development = __commonJS({
         return getSnapshot();
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React325 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState80 = React325.useState, useEffect61 = React325.useEffect, useLayoutEffect12 = React325.useLayoutEffect, useDebugValue2 = React325.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
+      var React325 = require("react"), objectIs = "function" === typeof Object.is ? Object.is : is, useState80 = React325.useState, useEffect61 = React325.useEffect, useLayoutEffect13 = React325.useLayoutEffect, useDebugValue2 = React325.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2;
       exports2.useSyncExternalStore = void 0 !== React325.useSyncExternalStore ? React325.useSyncExternalStore : shim;
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
     }();
@@ -170,12 +170,12 @@ var require_with_selector_production = __commonJS({
     }
     var objectIs = "function" === typeof Object.is ? Object.is : is;
     var useSyncExternalStore3 = shim.useSyncExternalStore;
-    var useRef94 = React325.useRef;
+    var useRef95 = React325.useRef;
     var useEffect61 = React325.useEffect;
     var useMemo156 = React325.useMemo;
     var useDebugValue2 = React325.useDebugValue;
     exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-      var instRef = useRef94(null);
+      var instRef = useRef95(null);
       if (null === instRef.current) {
         var inst = { hasValue: false, value: null };
         instRef.current = inst;
@@ -237,9 +237,9 @@ var require_with_selector_development = __commonJS({
         return x === y && (0 !== x || 1 / x === 1 / y) || x !== x && y !== y;
       }
       "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-      var React325 = require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef94 = React325.useRef, useEffect61 = React325.useEffect, useMemo156 = React325.useMemo, useDebugValue2 = React325.useDebugValue;
+      var React325 = require("react"), shim = require_shim(), objectIs = "function" === typeof Object.is ? Object.is : is, useSyncExternalStore3 = shim.useSyncExternalStore, useRef95 = React325.useRef, useEffect61 = React325.useEffect, useMemo156 = React325.useMemo, useDebugValue2 = React325.useDebugValue;
       exports2.useSyncExternalStoreWithSelector = function(subscribe, getSnapshot, getServerSnapshot, selector, isEqual) {
-        var instRef = useRef94(null);
+        var instRef = useRef95(null);
         if (null === instRef.current) {
           var inst = { hasValue: false, value: null };
           instRef.current = inst;
@@ -19937,7 +19937,10 @@ var StyledBackdrop = (0, import_react27.forwardRef)(({ className, ...props }, re
   index_parts_exports4.Backdrop,
   {
     ref,
-    className: cx(`n-fixed n-inset-0 n-bg-[rgba(0,0,0,0.5)]`, className),
+    className: cx(
+      `n-fixed n-inset-0 n-z-[999] n-bg-[rgba(0,0,0,0.5)]`,
+      className
+    ),
     ...props
   }
 ));
@@ -30867,6 +30870,7 @@ function BaseToolbar({
   left,
   right,
   logo,
+  showLogoDivider = true,
   showDivider = true,
   className,
   innerClassName,
@@ -30887,7 +30891,7 @@ function BaseToolbar({
       innerClassName,
       enableAbsoluteBreakpoint
     },
-    logo && /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, logo, /* @__PURE__ */ import_react80.default.createElement(DividerVertical, null)),
+    logo && /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, logo, showLogoDivider && /* @__PURE__ */ import_react80.default.createElement(DividerVertical, null)),
     /* @__PURE__ */ import_react80.default.createElement(Spacer.Horizontal, { size: 10 }),
     leftElement && !enableContainerQuery && /* @__PURE__ */ import_react80.default.createElement(import_react80.default.Fragment, null, leftElement, childrenElement && /* @__PURE__ */ import_react80.default.createElement(Spacer.Horizontal, { size: 10 })),
     childrenElement,
@@ -41664,9 +41668,14 @@ function OverlayToolbar({
   right,
   overlayLayout = "bottomCenterTopRight",
   className,
-  style: style2
+  style: style2,
+  onRectsChange
 }) {
   const resolvedLayout = overlayLayout === "topLeftTopRight" ? "topLeftTopRight" : "bottomCenterTopRight";
+  const leftPanelRef = (0, import_react114.useRef)(null);
+  const rightPanelRef = (0, import_react114.useRef)(null);
+  const hasLeft = Boolean(left);
+  const hasRight = Boolean(right);
   const panelStyle = (0, import_react114.useMemo)(
     () => ({
       ...toolbarTransparentStyle,
@@ -41674,11 +41683,68 @@ function OverlayToolbar({
     }),
     [style2]
   );
+  const emitRects = (0, import_react114.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("[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]);
+  (0, import_react114.useLayoutEffect)(() => {
+    if (!onRectsChange) return;
+    let animationFrame;
+    const scheduleEmit = () => {
+      if (animationFrame !== void 0) {
+        cancelAnimationFrame(animationFrame);
+      }
+      animationFrame = requestAnimationFrame(emitRects);
+    };
+    emitRects();
+    const resizeObserver = typeof ResizeObserver === "undefined" ? void 0 : 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 !== void 0) {
+        cancelAnimationFrame(animationFrame);
+      }
+      resizeObserver?.disconnect();
+      window.removeEventListener("resize", scheduleEmit);
+      window.removeEventListener("scroll", scheduleEmit, true);
+      onRectsChange([]);
+    };
+  }, [emitRects, hasLeft, hasRight, onRectsChange]);
   const renderLeftPanel = (overlayId) => {
     if (!left) return null;
     return /* @__PURE__ */ import_react114.default.createElement(
       "div",
       {
+        ref: leftPanelRef,
         className: panelClassName,
         "data-embedded-overlay-id": overlayId,
         style: panelStyle
@@ -41715,6 +41781,7 @@ function OverlayToolbar({
     /* @__PURE__ */ import_react114.default.createElement(
       "div",
       {
+        ref: rightPanelRef,
         className: panelClassName,
         "data-embedded-overlay-id": "noya-toolbar-top-right",
         style: panelStyle
@@ -42170,7 +42237,7 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         }
       )
     ), /* @__PURE__ */ import_react117.default.createElement(Divider, null)),
-    compactTabItem && /* @__PURE__ */ import_react117.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-r n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, /* @__PURE__ */ import_react117.default.createElement(
+    compactTabItem && /* @__PURE__ */ import_react117.default.createElement("div", { className: "n-absolute n-top-0 n-left-0 n-h-[calc(var(--n-toolbar-height)+1px)] n-w-[calc(var(--n-toolbar-height)+1px)] n-bg-sidebar-background n-border-b n-border-divider-strong n-z-10 n-flex n-items-center n-justify-center" }, /* @__PURE__ */ import_react117.default.createElement(
       Button,
       {
         "aria-label": typeof compactTabItem.title === "string" ? compactTabItem.title : "Toggle sidebar",
@@ -42954,6 +43021,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
   overlayToolbarLeft,
   overlayToolbarRight,
   overlayLayout,
+  contentTopInset = 0,
+  onOverlayToolbarRectsChange,
   children,
   sideType = "auto",
   sideTypeBreakpoint = 800,
@@ -43172,36 +43241,45 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
       "data-theme": theme
     },
     !isOverlay && toolbar,
-    /* @__PURE__ */ import_react125.default.createElement("div", { className: "n-flex n-flex-row n-flex-1 n-relative" }, readyToRender && /* @__PURE__ */ import_react125.default.createElement(import_react125.default.Fragment, null, /* @__PURE__ */ import_react125.default.createElement(
-      LayoutComponent,
-      {
-        leftPanel,
-        rightPanel,
-        centerPanel,
-        leftTabItems,
-        leftTabValue,
-        onChangeLeftTab: setLeftTabValue,
-        rightTabItems,
-        rightTabValue,
-        onChangeRightTab: setRightTabValue,
-        leftSidebarOptions,
-        rightSidebarOptions,
-        autoSavePrefix,
-        leftSidebarRef,
-        rightSidebarRef,
-        compactDrawerMenu,
-        onLeftSidebarStateChange,
-        onRightSidebarStateChange,
-        shouldAutoSave
-      }
-    ), isOverlay && /* @__PURE__ */ import_react125.default.createElement(
-      OverlayToolbar,
+    /* @__PURE__ */ import_react125.default.createElement(
+      "div",
       {
-        left: overlayToolbarLeft,
-        right: overlayToolbarRight,
-        overlayLayout
-      }
-    )))
+        className: "n-flex n-flex-row n-flex-1 n-min-h-0 n-relative",
+        "data-workspace-content": true,
+        style: contentTopInset > 0 ? { paddingTop: contentTopInset } : void 0
+      },
+      readyToRender && /* @__PURE__ */ import_react125.default.createElement(import_react125.default.Fragment, null, /* @__PURE__ */ import_react125.default.createElement(
+        LayoutComponent,
+        {
+          leftPanel,
+          rightPanel,
+          centerPanel,
+          leftTabItems,
+          leftTabValue,
+          onChangeLeftTab: setLeftTabValue,
+          rightTabItems,
+          rightTabValue,
+          onChangeRightTab: setRightTabValue,
+          leftSidebarOptions,
+          rightSidebarOptions,
+          autoSavePrefix,
+          leftSidebarRef,
+          rightSidebarRef,
+          compactDrawerMenu,
+          onLeftSidebarStateChange,
+          onRightSidebarStateChange,
+          shouldAutoSave
+        }
+      ), isOverlay && /* @__PURE__ */ import_react125.default.createElement(
+        OverlayToolbar,
+        {
+          left: overlayToolbarLeft,
+          right: overlayToolbarRight,
+          overlayLayout,
+          onRectsChange: onOverlayToolbarRectsChange
+        }
+      ))
+    )
   );
 });
 var PanelInner = (0, import_react125.memo)(function PanelInner2({