@gfazioli/mantine-window 2.0.0 → 3.1.0

package/README.md

@@ -18,6 +18,7 @@
 ## Overview
 
 This component is created on top of the [Mantine](https://mantine.dev/) library.
+It requires **Mantine 9.x** and **React 19**.
 
 [Mantine Window](https://gfazioli.github.io/mantine-window/) is a versatile UI container that brings a familiar desktop‑like window experience to React applications built with Mantine.
 
@@ -37,6 +38,9 @@ This component is created on top of the [Mantine](https://mantine.dev/) library.
 - Full Mantine Styles API support with fine-grained classNames
 - SSR-safe with hydration-compatible viewport unit resolution
 - `onPositionChange` and `onSizeChange` callbacks
+- `withScrollArea` prop to disable the internal ScrollArea wrapper
+- `controlsPosition` prop for macOS-style (left) or Windows-style (right) button placement
+- `controlsOrder` prop for custom button ordering (close, collapse, tools)
 
 > [!note]
 >

package/dist/cjs/Window.cjs

@@ -20,6 +20,8 @@ const defaultProps = {
   withCollapseButton: true,
   collapsable: true,
   withToolsButton: true,
+  withScrollArea: true,
+  controlsPosition: "left",
   persistState: false,
   withinPortal: true,
   minWidth: 250,
@@ -50,7 +52,7 @@ const varsResolver = core.createVarsResolver((_, { radius, shadow }) => {
     resizeHandleLeft: {}
   };
 });
-const Window = core.factory((_props, _) => {
+const Window = core.factory((_props) => {
   const props = core.useProps("Window", defaultProps, _props);
   const {
     opened,
@@ -64,6 +66,9 @@ const Window = core.factory((_props, _) => {
     collapsable,
     withCloseButton,
     withToolsButton,
+    withScrollArea,
+    controlsPosition,
+    controlsOrder: controlsOrderProp,
     onClose,
     radius,
     shadow,
@@ -84,6 +89,8 @@ const Window = core.factory((_props, _) => {
     defaultHeight,
     onPositionChange,
     onSizeChange,
+    initialZIndex,
+    maxZIndex,
     withBorder,
     fullSizeResizeHandles,
     mod,
@@ -140,11 +147,11 @@ const Window = core.factory((_props, _) => {
       mod: [{ "data-with-border": withBorder, "data-window-draggable": draggableWindow }, mod],
       onMouseDown: draggableWindow ? handleMouseDownDrag : void 0,
       onTouchStart: draggableWindow ? handleTouchStartDrag : void 0,
-      bg: color,
       role: "dialog",
       "aria-label": title || props.id || "Window",
       "data-mantine-window": true,
       ...others,
+      bg: color,
       ...getStyles("root", {
         style: {
           position: resolvedWithinPortal ? "fixed" : "absolute",
@@ -161,114 +168,137 @@ const Window = core.factory((_props, _) => {
       {
         ...getStyles("header"),
         onClick: bringToFront,
-        mod: { "window-draggable": draggableHeader },
+        mod: { "window-draggable": draggableHeader, "controls-position": controlsPosition },
         onMouseDown: draggableHeader ? handleMouseDownDrag : void 0,
         onTouchStart: draggableHeader ? handleTouchStartDrag : void 0,
         onDoubleClick: () => collapsable && setIsCollapsed(!isCollapsed)
       },
-      /* @__PURE__ */ React.createElement(core.Flex, { align: "center", gap: "xs", miw: 0 }, /* @__PURE__ */ React.createElement(core.Flex, { align: "center", gap: 8 }, withCloseButton && /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          radius: 256,
-          color: "red",
-          onClick: handleClose,
-          "aria-label": "Close window",
-          ...getStyles("closeButton")
-        },
-        /* @__PURE__ */ React.createElement(iconsReact.IconX, { size: 14 })
-      ), withCollapseButton && collapsable && /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          radius: 256,
-          color: "yellow",
-          onClick: () => setIsCollapsed(!isCollapsed),
-          "aria-label": isCollapsed ? "Expand window" : "Collapse window",
-          ...getStyles("collapseButton")
-        },
-        isCollapsed ? /* @__PURE__ */ React.createElement(iconsReact.IconPlus, { size: 14 }) : /* @__PURE__ */ React.createElement(iconsReact.IconMinus, { size: 14 })
-      ), withToolsButton && (groupCtx?.showToolsButton ?? true) && /* @__PURE__ */ React.createElement(core.Menu, { shadow: "md", width: 220, position: "bottom-start", withArrow: true }, /* @__PURE__ */ React.createElement(core.Menu.Target, null, /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          radius: 256,
-          color: "green",
-          "aria-label": "Window layout options",
-          ...getStyles("windowToolsButton")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.FillIcon, { size: 14 })
-      )), /* @__PURE__ */ React.createElement(core.Menu.Dropdown, null, /* @__PURE__ */ React.createElement(core.Menu.Label, null, "Move & Resize"), /* @__PURE__ */ React.createElement(core.Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap left",
-          onClick: () => applySingleLayout("snap-left")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.SnapLeftIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap right",
-          onClick: () => applySingleLayout("snap-right")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.SnapRightIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap top",
-          onClick: () => applySingleLayout("snap-top")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.SnapTopIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap bottom",
-          onClick: () => applySingleLayout("snap-bottom")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.SnapBottomIcon, null)
-      )), /* @__PURE__ */ React.createElement(core.Menu.Divider, null), /* @__PURE__ */ React.createElement(core.Menu.Label, null, "Fill & Arrange"), /* @__PURE__ */ React.createElement(core.Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Fill",
-          onClick: () => applySingleLayout("fill")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.FillIcon, null)
-      ), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Arrange columns",
-          onClick: () => groupCtx.applyLayout("arrange-columns")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.ArrangeColumnsIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Arrange rows",
-          onClick: () => groupCtx.applyLayout("arrange-rows")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.ArrangeRowsIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Tile",
-          onClick: () => groupCtx.applyLayout("tile")
-        },
-        /* @__PURE__ */ React.createElement(LayoutIcons.TileIcon, null)
-      ))), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Menu.Divider, null), /* @__PURE__ */ React.createElement(core.Menu.Item, { onClick: () => groupCtx.collapseAll() }, "Collapse all"), /* @__PURE__ */ React.createElement(core.Menu.Item, { onClick: () => groupCtx.expandAll() }, "Expand all"), /* @__PURE__ */ React.createElement(core.Menu.Item, { color: "red", onClick: () => groupCtx.closeAll() }, "Close all"))))), /* @__PURE__ */ React.createElement(core.Flex, { align: "center", gap: "xs", miw: 0 }, /* @__PURE__ */ React.createElement(core.Text, { truncate: true, ...getStyles("title") }, title)))
-    ), !isCollapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      (() => {
+        const defaultOrder = controlsPosition === "right" ? ["tools", "collapse", "close"] : ["close", "collapse", "tools"];
+        const order = controlsOrderProp ?? defaultOrder;
+        const controlElements = {
+          close: withCloseButton ? /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              key: "close",
+              radius: 256,
+              color: "red",
+              onClick: handleClose,
+              "aria-label": "Close window",
+              ...getStyles("closeButton")
+            },
+            /* @__PURE__ */ React.createElement(iconsReact.IconX, { size: 14 })
+          ) : null,
+          collapse: withCollapseButton && collapsable ? /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              key: "collapse",
+              radius: 256,
+              color: "yellow",
+              onClick: () => setIsCollapsed(!isCollapsed),
+              "aria-label": isCollapsed ? "Expand window" : "Collapse window",
+              ...getStyles("collapseButton")
+            },
+            isCollapsed ? /* @__PURE__ */ React.createElement(iconsReact.IconPlus, { size: 14 }) : /* @__PURE__ */ React.createElement(iconsReact.IconMinus, { size: 14 })
+          ) : null,
+          tools: withToolsButton && (groupCtx?.showToolsButton ?? true) ? /* @__PURE__ */ React.createElement(core.Menu, { key: "tools", shadow: "md", width: 220, position: "bottom-start", withArrow: true }, /* @__PURE__ */ React.createElement(core.Menu.Target, null, /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              radius: 256,
+              color: "green",
+              "aria-label": "Window layout options",
+              ...getStyles("windowToolsButton")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.FillIcon, { size: 14 })
+          )), /* @__PURE__ */ React.createElement(core.Menu.Dropdown, null, /* @__PURE__ */ React.createElement(core.Menu.Label, null, "Move & Resize"), /* @__PURE__ */ React.createElement(core.Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap left",
+              onClick: () => applySingleLayout("snap-left")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.SnapLeftIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap right",
+              onClick: () => applySingleLayout("snap-right")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.SnapRightIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap top",
+              onClick: () => applySingleLayout("snap-top")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.SnapTopIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap bottom",
+              onClick: () => applySingleLayout("snap-bottom")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.SnapBottomIcon, null)
+          )), /* @__PURE__ */ React.createElement(core.Menu.Divider, null), /* @__PURE__ */ React.createElement(core.Menu.Label, null, "Fill & Arrange"), /* @__PURE__ */ React.createElement(core.Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Fill",
+              onClick: () => applySingleLayout("fill")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.FillIcon, null)
+          ), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Arrange columns",
+              onClick: () => groupCtx.applyLayout("arrange-columns")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.ArrangeColumnsIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Arrange rows",
+              onClick: () => groupCtx.applyLayout("arrange-rows")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.ArrangeRowsIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            core.ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Tile",
+              onClick: () => groupCtx.applyLayout("tile")
+            },
+            /* @__PURE__ */ React.createElement(LayoutIcons.TileIcon, null)
+          ))), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Menu.Divider, null), /* @__PURE__ */ React.createElement(core.Menu.Item, { onClick: () => groupCtx.collapseAll() }, "Collapse all"), /* @__PURE__ */ React.createElement(core.Menu.Item, { onClick: () => groupCtx.expandAll() }, "Expand all"), /* @__PURE__ */ React.createElement(core.Menu.Item, { color: "red", onClick: () => groupCtx.closeAll() }, "Close all")))) : null
+        };
+        const controlsGroup = /* @__PURE__ */ React.createElement(core.Flex, { align: "center", gap: 8 }, order.map((name) => controlElements[name]));
+        const titleGroup = /* @__PURE__ */ React.createElement(core.Flex, { align: "center", gap: "xs", miw: 0 }, /* @__PURE__ */ React.createElement(core.Text, { truncate: true, ...getStyles("title") }, title));
+        return /* @__PURE__ */ React.createElement(
+          core.Flex,
+          {
+            align: "center",
+            gap: "xs",
+            miw: 0,
+            justify: controlsPosition === "right" ? "space-between" : void 0,
+            w: controlsPosition === "right" ? "100%" : void 0
+          },
+          controlsPosition === "left" ? /* @__PURE__ */ React.createElement(React.Fragment, null, controlsGroup, titleGroup) : /* @__PURE__ */ React.createElement(React.Fragment, null, titleGroup, controlsGroup)
+        );
+      })()
+    ), !isCollapsed && /* @__PURE__ */ React.createElement(React.Fragment, null, withScrollArea ? /* @__PURE__ */ React.createElement(
       core.ScrollArea,
       {
         ...getStyles("content", {
@@ -278,6 +308,17 @@ const Window = core.factory((_props, _) => {
         })
       },
       children
+    ) : /* @__PURE__ */ React.createElement(
+      core.Box,
+      {
+        ...getStyles("content", {
+          style: {
+            height: Math.max(0, size.height - HEADER_HEIGHT),
+            overflow: "hidden"
+          }
+        })
+      },
+      children
     ), resizable !== "none" && /* @__PURE__ */ React.createElement(React.Fragment, null, resizable === "both" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       core.Box,
       {