@noya-app/noya-designsystem 0.1.68 → 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",
@@ -5248,8 +5249,8 @@ function InputFieldRoot({
     },
     [onFocusChange]
   );
-  const startWidth = measuredStartSize?.width ?? startWidthProp;
-  const endWidth = measuredEndSize?.width ?? endWidthProp;
+  const startWidth = startWidthProp ?? measuredStartSize?.width;
+  const endWidth = endWidthProp ?? measuredEndSize?.width;
   const contextValue = (0, import_react29.useMemo)(
     () => ({
       startWidth,
@@ -9876,6 +9877,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
   onClickChevron,
   chevronClassName,
   chevronAs,
+  chevronPosition = "start",
   children,
   ...rest
 }, forwardedRef) {
@@ -9889,7 +9891,7 @@ var TreeRow = forwardRefGeneric(function TreeRow2({
     },
     [stableOnClickChevron]
   );
-  return /* @__PURE__ */ import_react65.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react65.default.createElement(
+  return /* @__PURE__ */ import_react65.default.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && chevronPosition !== "end" && /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, expanded === void 0 ? /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ import_react65.default.createElement(
     IconButton,
     {
       as: chevronAs,
@@ -9898,7 +9900,16 @@ 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);
+  ), /* @__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,
+      className: chevronClassName,
+      iconName: expanded ? "ChevronDownIcon2" : "ChevronRightIcon2",
+      onClick: handleClickChevron,
+      selected: rest.selected
+    }
+  ), /* @__PURE__ */ import_react65.default.createElement(Spacer.Horizontal, { size: 8 }))));
 });
 var TreeView;
 ((TreeView2) => {
@@ -9961,7 +9972,10 @@ var List = memoGeneric(
       sortableId,
       sharedDragProps,
       virtualized,
-      renameSelectsBeforeDot
+      renameSelectsBeforeDot,
+      chevronPosition = "start",
+      getItemStyle,
+      getItemClassName
     } = props;
     const [internalHoveredId, setHoveredId] = (0, import_react66.useState)();
     const [internalRenamingId, setRenamingId] = (0, import_react66.useState)();
@@ -10091,6 +10105,8 @@ var List = memoGeneric(
               below
             );
           }
+          const perItemStyle = getItemStyle?.(item, isSelected);
+          const perItemClassName = getItemClassName?.(item, isSelected);
           return /* @__PURE__ */ import_react66.default.createElement(
             ViewComponent.Row,
             {
@@ -10103,11 +10119,14 @@ var List = memoGeneric(
               "aria-roledescription": itemRoleDescription,
               "aria-label": getName(item),
               "aria-selected": isSelected,
-              className: itemClassName,
+              className: cx(itemClassName, perItemClassName),
               testRelativeDropPosition: testShowDropIndicatorId === id ? "inside" : void 0,
-              chevronClassName: cx(expandable && "n-relative n-left-2"),
+              chevronClassName: cx(
+                expandable && chevronPosition !== "end" && "n-relative n-left-2"
+              ),
               chevronAs: href ? "div" : void 0,
-              style: itemStyle,
+              ...expandable ? { chevronPosition } : {},
+              style: perItemStyle ? { ...itemStyle, ...perItemStyle } : itemStyle,
               hovered: isHovered,
               selected: isSelected,
               expanded,
@@ -11661,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;
@@ -16753,29 +16775,51 @@ var Stepper = (0, import_react100.memo)(function Stepper2({
       onBlur
     },
     /* @__PURE__ */ import_react100.default.createElement(
-      Button,
-      {
-        icon: "MinusIcon",
-        disabled: readOnly,
-        onClick: () => handleValueChange(value - step)
-      }
-    ),
-    /* @__PURE__ */ import_react100.default.createElement(InputField2.Root, { className: "n-flex-1" }, /* @__PURE__ */ import_react100.default.createElement(
-      InputField2.NumberInput,
-      {
-        value,
-        onChange: handleValueChange,
-        onNudge: (amount) => handleValueChange(value + amount),
-        readOnly
-      }
-    )),
-    /* @__PURE__ */ import_react100.default.createElement(
-      Button,
+      InputField2.Root,
       {
-        icon: "PlusIcon",
-        disabled: readOnly,
-        onClick: () => handleValueChange(value + step)
-      }
+        className: "n-flex-1",
+        startWidth: 17,
+        startClassName: "-n-ml-[3px]",
+        endWidth: 17,
+        endClassName: "-n-mr-[3px]",
+        start: /* @__PURE__ */ import_react100.default.createElement(
+          IconButton,
+          {
+            iconName: "MinusIcon",
+            disabled: readOnly,
+            onClick: () => handleValueChange(value - step),
+            className: "n-w-[21px] n-h-[21px]",
+            style: {
+              outline: `1px solid ${cssVars.colors.dividerStrong}`,
+              outlineOffset: "-1px",
+              background: cssVars.colors.background
+            }
+          }
+        ),
+        end: /* @__PURE__ */ import_react100.default.createElement(
+          IconButton,
+          {
+            iconName: "PlusIcon",
+            disabled: readOnly,
+            onClick: () => handleValueChange(value + step),
+            className: "n-w-[21px] n-h-[21px]",
+            style: {
+              outline: `1px solid ${cssVars.colors.dividerStrong}`,
+              outlineOffset: "-1px",
+              background: cssVars.colors.background
+            }
+          }
+        )
+      },
+      /* @__PURE__ */ import_react100.default.createElement(
+        InputField2.NumberInput,
+        {
+          value,
+          onChange: handleValueChange,
+          onNudge: (amount) => handleValueChange(value + amount),
+          readOnly
+        }
+      )
     )
   );
 });
@@ -17263,7 +17307,7 @@ var VerticalTabMenu = memoGeneric(function VerticalTabMenu2({
   return /* @__PURE__ */ import_react104.default.createElement(
     "div",
     {
-      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",
+      className: "n-w-[calc(var(--n-toolbar-height)+1px)] n-h-full n-bg-sidebar-background n-flex n-flex-col n-items-center n-py-3 n-gap-3",
       style: style2
     },
     /* @__PURE__ */ import_react104.default.createElement(
@@ -17291,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)({
@@ -17306,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]
@@ -17314,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
@@ -17325,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",
@@ -17397,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",
@@ -17585,7 +17648,8 @@ var PanelWorkspaceLayout = memoGeneric(function PanelWorkspaceLayout2({
   leftTabValue,
   rightTabValue,
   onChangeLeftTab,
-  onChangeRightTab
+  onChangeRightTab,
+  compactDrawerMenu
 }) {
   const panelGroupRef = (0, import_react106.useRef)(null);
   const hasLeftPanel = !!leftPanel;
@@ -17676,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,
     {
@@ -17687,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",
@@ -17696,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,
@@ -17820,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);
@@ -18040,7 +18108,8 @@ var WorkspaceLayout = forwardRefGeneric(function WorkspaceLayout2({
         centerPanelPercentage,
         autoSavePrefix,
         leftSidebarRef,
-        rightSidebarRef
+        rightSidebarRef,
+        compactDrawerMenu
       }
     ))
   );