@noya-app/noya-designsystem 0.1.69 → 0.1.70

package/dist/index.js

@@ -4193,7 +4193,8 @@ var variantStyles = {
   floating: "n-bg-floating-button n-text-text n-shadow-[0_1px_2px_rgba(0,0,0,0.1)] hover:n-opacity-80 active:n-opacity-90",
   thin: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
   none: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
-  ghost: "n-bg-transparent n-text-text hover:n-bg-input-background-light"
+  ghost: "n-bg-transparent n-text-text hover:n-bg-input-background-light",
+  link: "n-bg-transparent n-text-text hover:n-bg-input-background-light"
 };
 var sizeStyles = {
   small: "n-px-[2px] n-font-sans n-text-[10px] n-font-medium",
@@ -9899,7 +9900,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
       onClick: handleClickChevron,
       selected: rest.selected
     }
-  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 })) : /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
+  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, renderIcon(icon), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 10 })), children, expandable && chevronPosition === "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 6 }), expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null) : /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -11679,6 +11680,9 @@ var DraggableMenuButton = memoGeneric(function DraggableMenuButton2({
     (event) => {
       if (open || !downPosition) {
         setDownPosition(null);
+        if (open && event.target === event.currentTarget) {
+          setOpen(false);
+        }
         return;
       }
       const dx = event.clientX - downPosition.x;
@@ -17331,7 +17335,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
   rightTabItems,
   rightTabValue,
   onChangeRightTab,
-  onChangeLeftTab
+  onChangeLeftTab,
+  compactDrawerMenu
 }) {
   const portalContainer = (0, import_react105.useRef)(null);
   const [{ leftSidebarCollapsed, rightSidebarCollapsed }, setLayoutState] = (0, import_react105.useState)({
@@ -17346,6 +17351,11 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     [leftTabItems, rightTabItems, leftPanel, rightPanel]
   );
   const hasTabs = allTabItems.length > 0;
+  const allSelectableTabItems = (0, import_react105.useMemo)(
+    () => allTabItems.filter(isSelectableMenuItem),
+    [allTabItems]
+  );
+  const useCompactInToolbar = !!compactDrawerMenu && allSelectableTabItems.length <= 1;
   const leftSelectableTabItems = (0, import_react105.useMemo)(
     () => (leftTabItems ?? []).filter(isSelectableMenuItem),
     [leftTabItems]
@@ -17354,6 +17364,35 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
     () => (rightTabItems ?? []).filter(isSelectableMenuItem),
     [rightTabItems]
   );
+  const toggleSidebar = (ref) => {
+    if (ref.current?.isExpanded()) {
+      ref.current?.collapse();
+    } else {
+      ref.current?.expand();
+    }
+  };
+  const ensureExpanded = (ref) => {
+    if (!ref.current?.isExpanded()) {
+      ref.current?.expand();
+    }
+  };
+  const handleSelectTab = (value) => {
+    if (leftSelectableTabItems.some((item) => item.value === value)) {
+      if (value === leftTabValue) {
+        toggleSidebar(leftSidebarRef);
+      } else {
+        ensureExpanded(leftSidebarRef);
+        onChangeLeftTab?.(value);
+      }
+    } else if (rightSelectableTabItems.some((item) => item.value === value)) {
+      if (value === rightTabValue) {
+        toggleSidebar(rightSidebarRef);
+      } else {
+        ensureExpanded(rightSidebarRef);
+        onChangeRightTab?.(value);
+      }
+    }
+  };
   const { activeValue, isSidebarCollapsed } = leftSelectableTabItems.length > 0 && !leftSidebarCollapsed ? { activeValue: leftTabValue, isSidebarCollapsed: leftSidebarCollapsed } : rightSelectableTabItems.length > 0 && !rightSidebarCollapsed ? {
     activeValue: rightTabValue,
     isSidebarCollapsed: rightSidebarCollapsed
@@ -17365,58 +17404,47 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
       id: EDITOR_PANEL_GROUP_ID,
       className: "n-flex n-flex-1 n-relative focus:n-outline-none"
     },
-    hasTabs && /* @__PURE__ */ import_react105.default.createElement(
+    hasTabs && !useCompactInToolbar && /* @__PURE__ */ import_react105.default.createElement(import_react105.default.Fragment, null, /* @__PURE__ */ import_react105.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
         items: allTabItems,
         activeValue,
         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);
-            }
-          } 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);
-            }
-          }
+        onChange: (value) => handleSelectTab(value)
+      }
+    ), /* @__PURE__ */ import_react105.default.createElement(DividerVertical, { className: "n-h-full" })),
+    useCompactInToolbar && /* @__PURE__ */ import_react105.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" }, allSelectableTabItems[0] && /* @__PURE__ */ import_react105.default.createElement(
+      Button,
+      {
+        variant: "none",
+        className: "n-rounded",
+        style: {
+          width: "var(--n-input-height)",
+          height: "var(--n-input-height)"
+        },
+        icon: allSelectableTabItems[0].icon,
+        tooltip: allSelectableTabItems[0].tooltip ?? allSelectableTabItems[0].title,
+        active: (() => {
+          const value = allSelectableTabItems[0].value;
+          const isLeftItem = leftSelectableTabItems.some((i) => i.value === value);
+          const isRightItem = rightSelectableTabItems.some((i) => i.value === value);
+          return isLeftItem ? !leftSidebarCollapsed : isRightItem ? !rightSidebarCollapsed : false;
+        })(),
+        onClick: () => {
+          const value = allSelectableTabItems[0].value;
+          handleSelectTab(value);
         }
       }
-    ),
-    hasTabs && /* @__PURE__ */ import_react105.default.createElement(DividerVertical, { className: "n-h-full" }),
+    )),
     /* @__PURE__ */ import_react105.default.createElement("div", { className: "n-flex-1 n-flex n-relative" }, centerPanel),
     leftPanel && /* @__PURE__ */ import_react105.default.createElement(
       Drawer,
       {
         ref: leftSidebarRef,
         className: "n-flex-1",
-        style: {
-          left: 48,
-          maxWidth: "calc(100% - 48px)"
-        },
-        overlayStyle: {
-          left: 48
-        },
+        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
+        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
         open: !leftSidebarCollapsed,
         positioning: "absolute",
         side: "left",
@@ -17437,13 +17465,8 @@ var DrawerWorkspaceLayout = memoGeneric(function DrawerWorkspaceLayout2({
         id: RIGHT_SIDEBAR_ID,
         ref: rightSidebarRef,
         className: "n-flex-1",
-        style: {
-          left: 48,
-          maxWidth: "calc(100% - 48px)"
-        },
-        overlayStyle: {
-          left: 48
-        },
+        style: useCompactInToolbar ? void 0 : { left: 48, maxWidth: "calc(100% - 48px)" },
+        overlayStyle: useCompactInToolbar ? void 0 : { left: 48 },
         open: !rightSidebarCollapsed,
         positioning: "absolute",
         side: "left",
@@ -17625,7 +17648,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftTabValue,
   rightTabValue,
   onChangeLeftTab,
-  onChangeRightTab
+  onChangeRightTab,
+  compactDrawerMenu
 }) {
   const panelGroupRef = (0, import_react106.useRef)(null);
   const hasLeftPanel = !!leftPanel;
@@ -17716,6 +17740,9 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
     },
     [setData, propertyKey]
   );
+  const showLeftTabs = !!leftSidebarOptions.showTabs && !!leftTabItems && // When compact drawer UI is enabled, only show the rail when the
+  // sidebar is collapsed (for large screens/panel layout).
+  (!compactDrawerMenu || leftSidebarCollapsed);
   return /* @__PURE__ */ import_react106.default.createElement(
     import_react_resizable_panels.PanelGroup,
     {
@@ -17727,7 +17754,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
       autoSaveId,
       onLayout: handleLayoutChange
     },
-    leftPanel && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, leftSidebarOptions.showTabs && leftTabItems && /* @__PURE__ */ import_react106.default.createElement(
+    leftPanel && /* @__PURE__ */ import_react106.default.createElement(import_react106.default.Fragment, null, showLeftTabs && /* @__PURE__ */ import_react106.default.createElement(
       VerticalTabMenu,
       {
         tooltipSide: "right",
@@ -17736,7 +17763,7 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
         isSidebarCollapsed: leftSidebarCollapsed,
         onChange: handleLeftTabChange
       }
-    ), leftSidebarOptions.showTabs && leftTabItems && !leftSidebarCollapsed && /* @__PURE__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react106.default.createElement(
+    ), showLeftTabs && !leftSidebarCollapsed && /* @__PURE__ */ import_react106.default.createElement(DividerVertical, { className: "n-h-full" }), /* @__PURE__ */ import_react106.default.createElement(
       import_react_resizable_panels.Panel,
       {
         id: LEFT_SIDEBAR_ID,
@@ -17860,7 +17887,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
     defaultCollapsed: rightDefaultCollapsed = false,
     showTabs: rightShowTabs = true
   } = {},
-  theme
+  theme,
+  compactDrawerMenu
 }, forwardedRef) {
   const containerRef = import_react108.default.useRef(null);
   const containerSize = useSize(containerRef);
@@ -18080,7 +18108,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         centerPanelPercentage,
         autoSavePrefix,
         leftSidebarRef,
-        rightSidebarRef
+        rightSidebarRef,
+        compactDrawerMenu
       }
     ))
   );