@gfazioli/mantine-window 2.0.0 → 3.0.0

package/dist/esm/Window.mjs

@@ -1,7 +1,7 @@
 'use client';
 import React from 'react';
-import { IconX, IconPlus, IconMinus } from '@tabler/icons-react';
-import { createVarsResolver, getShadow, getRadius, factory, useProps, useStyles, Box, Flex, ActionIcon, Menu, Text, ScrollArea } from '@mantine/core';
+import { IconPlus, IconMinus, IconX } from '@tabler/icons-react';
+import { createVarsResolver, getShadow, getRadius, factory, useProps, useStyles, Box, Menu, ActionIcon, Flex, Text, ScrollArea } from '@mantine/core';
 import { useMantineWindow } from './hooks/use-mantine-window.mjs';
 import { useResponsiveValue } from './hooks/use-responsive-value.mjs';
 import { FillIcon, SnapLeftIcon, SnapRightIcon, SnapTopIcon, SnapBottomIcon, ArrangeColumnsIcon, ArrangeRowsIcon, TileIcon } from './LayoutIcons.mjs';
@@ -18,6 +18,8 @@ const defaultProps = {
   withCollapseButton: true,
   collapsable: true,
   withToolsButton: true,
+  withScrollArea: true,
+  controlsPosition: "left",
   persistState: false,
   withinPortal: true,
   minWidth: 250,
@@ -48,7 +50,7 @@ const varsResolver = createVarsResolver((_, { radius, shadow }) => {
     resizeHandleLeft: {}
   };
 });
-const Window = factory((_props, _) => {
+const Window = factory((_props) => {
   const props = useProps("Window", defaultProps, _props);
   const {
     opened,
@@ -62,6 +64,9 @@ const Window = factory((_props, _) => {
     collapsable,
     withCloseButton,
     withToolsButton,
+    withScrollArea,
+    controlsPosition,
+    controlsOrder: controlsOrderProp,
     onClose,
     radius,
     shadow,
@@ -138,11 +143,11 @@ const Window = 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",
@@ -159,114 +164,137 @@ const Window = 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(Flex, { align: "center", gap: "xs", miw: 0 }, /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 8 }, withCloseButton && /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          radius: 256,
-          color: "red",
-          onClick: handleClose,
-          "aria-label": "Close window",
-          ...getStyles("closeButton")
-        },
-        /* @__PURE__ */ React.createElement(IconX, { size: 14 })
-      ), withCollapseButton && collapsable && /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          radius: 256,
-          color: "yellow",
-          onClick: () => setIsCollapsed(!isCollapsed),
-          "aria-label": isCollapsed ? "Expand window" : "Collapse window",
-          ...getStyles("collapseButton")
-        },
-        isCollapsed ? /* @__PURE__ */ React.createElement(IconPlus, { size: 14 }) : /* @__PURE__ */ React.createElement(IconMinus, { size: 14 })
-      ), withToolsButton && (groupCtx?.showToolsButton ?? true) && /* @__PURE__ */ React.createElement(Menu, { shadow: "md", width: 220, position: "bottom-start", withArrow: true }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          radius: 256,
-          color: "green",
-          "aria-label": "Window layout options",
-          ...getStyles("windowToolsButton")
-        },
-        /* @__PURE__ */ React.createElement(FillIcon, { size: 14 })
-      )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, /* @__PURE__ */ React.createElement(Menu.Label, null, "Move & Resize"), /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap left",
-          onClick: () => applySingleLayout("snap-left")
-        },
-        /* @__PURE__ */ React.createElement(SnapLeftIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap right",
-          onClick: () => applySingleLayout("snap-right")
-        },
-        /* @__PURE__ */ React.createElement(SnapRightIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap top",
-          onClick: () => applySingleLayout("snap-top")
-        },
-        /* @__PURE__ */ React.createElement(SnapTopIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Snap bottom",
-          onClick: () => applySingleLayout("snap-bottom")
-        },
-        /* @__PURE__ */ React.createElement(SnapBottomIcon, null)
-      )), /* @__PURE__ */ React.createElement(Menu.Divider, null), /* @__PURE__ */ React.createElement(Menu.Label, null, "Fill & Arrange"), /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Fill",
-          onClick: () => applySingleLayout("fill")
-        },
-        /* @__PURE__ */ React.createElement(FillIcon, null)
-      ), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Arrange columns",
-          onClick: () => groupCtx.applyLayout("arrange-columns")
-        },
-        /* @__PURE__ */ React.createElement(ArrangeColumnsIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Arrange rows",
-          onClick: () => groupCtx.applyLayout("arrange-rows")
-        },
-        /* @__PURE__ */ React.createElement(ArrangeRowsIcon, null)
-      ), /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          variant: "subtle",
-          size: "lg",
-          "aria-label": "Tile",
-          onClick: () => groupCtx.applyLayout("tile")
-        },
-        /* @__PURE__ */ React.createElement(TileIcon, null)
-      ))), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Menu.Divider, null), /* @__PURE__ */ React.createElement(Menu.Item, { onClick: () => groupCtx.collapseAll() }, "Collapse all"), /* @__PURE__ */ React.createElement(Menu.Item, { onClick: () => groupCtx.expandAll() }, "Expand all"), /* @__PURE__ */ React.createElement(Menu.Item, { color: "red", onClick: () => groupCtx.closeAll() }, "Close all"))))), /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: "xs", miw: 0 }, /* @__PURE__ */ React.createElement(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(
+            ActionIcon,
+            {
+              key: "close",
+              radius: 256,
+              color: "red",
+              onClick: handleClose,
+              "aria-label": "Close window",
+              ...getStyles("closeButton")
+            },
+            /* @__PURE__ */ React.createElement(IconX, { size: 14 })
+          ) : null,
+          collapse: withCollapseButton && collapsable ? /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              key: "collapse",
+              radius: 256,
+              color: "yellow",
+              onClick: () => setIsCollapsed(!isCollapsed),
+              "aria-label": isCollapsed ? "Expand window" : "Collapse window",
+              ...getStyles("collapseButton")
+            },
+            isCollapsed ? /* @__PURE__ */ React.createElement(IconPlus, { size: 14 }) : /* @__PURE__ */ React.createElement(IconMinus, { size: 14 })
+          ) : null,
+          tools: withToolsButton && (groupCtx?.showToolsButton ?? true) ? /* @__PURE__ */ React.createElement(Menu, { key: "tools", shadow: "md", width: 220, position: "bottom-start", withArrow: true }, /* @__PURE__ */ React.createElement(Menu.Target, null, /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              radius: 256,
+              color: "green",
+              "aria-label": "Window layout options",
+              ...getStyles("windowToolsButton")
+            },
+            /* @__PURE__ */ React.createElement(FillIcon, { size: 14 })
+          )), /* @__PURE__ */ React.createElement(Menu.Dropdown, null, /* @__PURE__ */ React.createElement(Menu.Label, null, "Move & Resize"), /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap left",
+              onClick: () => applySingleLayout("snap-left")
+            },
+            /* @__PURE__ */ React.createElement(SnapLeftIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap right",
+              onClick: () => applySingleLayout("snap-right")
+            },
+            /* @__PURE__ */ React.createElement(SnapRightIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap top",
+              onClick: () => applySingleLayout("snap-top")
+            },
+            /* @__PURE__ */ React.createElement(SnapTopIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Snap bottom",
+              onClick: () => applySingleLayout("snap-bottom")
+            },
+            /* @__PURE__ */ React.createElement(SnapBottomIcon, null)
+          )), /* @__PURE__ */ React.createElement(Menu.Divider, null), /* @__PURE__ */ React.createElement(Menu.Label, null, "Fill & Arrange"), /* @__PURE__ */ React.createElement(Flex, { justify: "space-between", pb: "xs", px: "sm" }, /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Fill",
+              onClick: () => applySingleLayout("fill")
+            },
+            /* @__PURE__ */ React.createElement(FillIcon, null)
+          ), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Arrange columns",
+              onClick: () => groupCtx.applyLayout("arrange-columns")
+            },
+            /* @__PURE__ */ React.createElement(ArrangeColumnsIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Arrange rows",
+              onClick: () => groupCtx.applyLayout("arrange-rows")
+            },
+            /* @__PURE__ */ React.createElement(ArrangeRowsIcon, null)
+          ), /* @__PURE__ */ React.createElement(
+            ActionIcon,
+            {
+              variant: "subtle",
+              size: "lg",
+              "aria-label": "Tile",
+              onClick: () => groupCtx.applyLayout("tile")
+            },
+            /* @__PURE__ */ React.createElement(TileIcon, null)
+          ))), groupCtx && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Menu.Divider, null), /* @__PURE__ */ React.createElement(Menu.Item, { onClick: () => groupCtx.collapseAll() }, "Collapse all"), /* @__PURE__ */ React.createElement(Menu.Item, { onClick: () => groupCtx.expandAll() }, "Expand all"), /* @__PURE__ */ React.createElement(Menu.Item, { color: "red", onClick: () => groupCtx.closeAll() }, "Close all")))) : null
+        };
+        const controlsGroup = /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: 8 }, order.map((name) => controlElements[name]));
+        const titleGroup = /* @__PURE__ */ React.createElement(Flex, { align: "center", gap: "xs", miw: 0 }, /* @__PURE__ */ React.createElement(Text, { truncate: true, ...getStyles("title") }, title));
+        return /* @__PURE__ */ React.createElement(
+          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(
       ScrollArea,
       {
         ...getStyles("content", {
@@ -276,6 +304,17 @@ const Window = factory((_props, _) => {
         })
       },
       children
+    ) : /* @__PURE__ */ React.createElement(
+      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(
       Box,
       {