habarico 7.3.0-beta.5 → 7.3.0-beta.6

package/lib/index.cjs

@@ -46011,13 +46011,38 @@ const usePanelContext = () => {
   return context;
 };
 
+const RESIZE_HANDLE_SX = {
+  corner: {
+    right: 5,
+    bottom: 5,
+    width: 12,
+    height: 12,
+    borderRight: "2px solid",
+    borderBottom: "2px solid",
+    borderColor: "text.disabled",
+    borderBottomRightRadius: "6px",
+    cursor: "nwse-resize"
+  },
+  bottom: {
+    left: "50%",
+    bottom: 5,
+    width: 24,
+    height: 4,
+    ml: "-12px",
+    borderRadius: 2,
+    bgcolor: "text.disabled",
+    cursor: "ns-resize"
+  }
+};
+const ResizeHandle = ({ at }) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { "aria-hidden": true, sx: { position: "absolute", ...RESIZE_HANDLE_SX[at] } });
 const Panel = ({
   variant,
   collapsible = false,
   defaultCollapsed = false,
   collapsed: collapsedProp,
   onCollapsedChange,
-  resizeHandle,
+  resizable = false,
+  resizeHandle = "corner",
   fullHeight = false,
   emphasized = false,
   children,
@@ -46068,24 +46093,7 @@ const Panel = ({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(InsidePanelContextProvider, { value: true, children }),
-            resizeHandle && /* @__PURE__ */ jsxRuntime.jsx(
-              material.Box,
-              {
-                "aria-hidden": true,
-                sx: {
-                  position: "absolute",
-                  right: 5,
-                  bottom: 5,
-                  width: 12,
-                  height: 12,
-                  borderRight: "2px solid",
-                  borderBottom: "2px solid",
-                  borderColor: "text.disabled",
-                  borderBottomRightRadius: "6px",
-                  cursor: "nwse-resize"
-                }
-              }
-            )
+            resizable && /* @__PURE__ */ jsxRuntime.jsx(ResizeHandle, { at: resizeHandle })
           ]
         }
       )
@@ -48214,13 +48222,6 @@ function useContainerWidth(options = {}) {
     measureWidth
   };
 }
-var DEFAULT_BREAKPOINTS$1 = {
-  lg: 1200,
-  md: 996,
-  sm: 768,
-  xs: 480,
-  xxs: 0
-};
 
 var cjs = {exports: {}};
 
@@ -51709,6 +51710,11 @@ function ResponsiveGridLayout(props) {
 var css_248z = ".react-grid-layout {\n  position: relative;\n  transition: height 200ms ease;\n}\n.react-grid-item {\n  transition: all 200ms ease;\n  transition-property: left, top, width, height;\n}\n.react-grid-item img {\n  pointer-events: none;\n  user-select: none;\n}\n.react-grid-item.cssTransforms {\n  transition-property: transform, width, height;\n}\n.react-grid-item.resizing {\n  transition: none;\n  z-index: 1;\n  will-change: width, height;\n}\n\n.react-grid-item.react-draggable-dragging {\n  transition: none;\n  z-index: 3;\n  will-change: transform;\n}\n\n.react-grid-item.dropping {\n  visibility: hidden;\n}\n\n.react-grid-item.react-grid-placeholder {\n  background: red;\n  opacity: 0.2;\n  transition-duration: 100ms;\n  z-index: 2;\n  user-select: none;\n}\n\n.react-grid-item.react-grid-placeholder.placeholder-resizing {\n  transition: none;\n}\n\n.react-grid-item > .react-resizable-handle {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  opacity: 0;\n}\n\n.react-grid-item:hover > .react-resizable-handle {\n  opacity: 1;\n}\n\n.react-grid-item > .react-resizable-handle::after {\n  content: \"\";\n  position: absolute;\n  right: 3px;\n  bottom: 3px;\n  width: 5px;\n  height: 5px;\n  border-right: 2px solid rgba(0, 0, 0, 0.4);\n  border-bottom: 2px solid rgba(0, 0, 0, 0.4);\n}\n\n.react-resizable-hide > .react-resizable-handle {\n  display: none;\n}\n\n.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {\n  bottom: 0;\n  left: 0;\n  cursor: sw-resize;\n  transform: rotate(90deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-se {\n  bottom: 0;\n  right: 0;\n  cursor: se-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {\n  top: 0;\n  left: 0;\n  cursor: nw-resize;\n  transform: rotate(180deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {\n  top: 0;\n  right: 0;\n  cursor: ne-resize;\n  transform: rotate(270deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  top: 50%;\n  margin-top: -10px;\n  cursor: ew-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-w {\n  left: 0;\n  transform: rotate(135deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-e {\n  right: 0;\n  transform: rotate(315deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n,\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  left: 50%;\n  margin-left: -10px;\n  cursor: ns-resize;\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-n {\n  top: 0;\n  transform: rotate(225deg);\n}\n.react-grid-item > .react-resizable-handle.react-resizable-handle-s {\n  bottom: 0;\n  transform: rotate(45deg);\n}\n";
 styleInject(css_248z);
 
+const GRID_COLS = 12;
+const NARROW_BREAKPOINT = 996;
+const GRID_BREAKPOINTS = { lg: NARROW_BREAKPOINT, sm: 0 };
+const isNarrowWidth = (width) => getBreakpointFromWidth(GRID_BREAKPOINTS, width) === "sm";
+const SPACER_ID = "__spacer";
 const toLayout = (p) => ({
   i: p.id,
   x: p.layout.x,
@@ -51718,29 +51724,43 @@ const toLayout = (p) => ({
   minW: p.layout.minW,
   minH: p.layout.minH
 });
-const toStackedLayout = (panels) => {
+const stackedHeight = (p) => p.layout.stackedH ?? p.layout.h;
+const stackedBottom = (panels) => panels.reduce((sum, p) => sum + stackedHeight(p), 0);
+const toStackedLayout = (panels, isEditing) => {
   let y = 0;
-  return panels.map((p) => {
-    const item = { i: p.id, x: 0, y, w: 1, h: p.layout.h, minH: p.layout.minH };
-    y += p.layout.h;
-    return item;
+  return [...panels].sort((a, b) => a.layout.y - b.layout.y || a.layout.x - b.layout.x).map((p) => {
+    const h = stackedHeight(p);
+    const item = { i: p.id, x: 0, y, w: 1, h, minH: p.layout.minH };
+    y += h;
+    if (!isEditing) return item;
+    return { ...item, minW: 1, maxW: 1, resizeHandles: ["s"], isDraggable: false };
   });
 };
 const buildLayouts = (isEditing, panels, spacerItem) => {
-  if (!isEditing) return { lg: panels.map(toLayout), sm: toStackedLayout(panels) };
-  const editItems = [...panels.map(toLayout), spacerItem];
-  return Object.fromEntries(Object.keys(DEFAULT_BREAKPOINTS$1).map((bp) => [bp, editItems]));
+  const lg = panels.map(toLayout);
+  return {
+    lg: isEditing && spacerItem ? [...lg, spacerItem] : lg,
+    sm: toStackedLayout(panels, isEditing)
+  };
 };
+const mapLayoutBack = (panels, items, isNarrow) => panels.map((p) => {
+  const item = items.find((l) => l.i === p.id && l.i !== SPACER_ID);
+  if (!item) return { id: p.id, layout: p.layout };
+  if (isNarrow) {
+    if (item.h === stackedHeight(p)) return { id: p.id, layout: p.layout };
+    return { id: p.id, layout: { ...p.layout, stackedH: item.h } };
+  }
+  return { id: p.id, layout: { ...p.layout, x: item.x, y: item.y, w: item.w, h: item.h } };
+});
 
-const GRID_COLS = 12;
-const COLS_VIEW = { lg: GRID_COLS, md: GRID_COLS, sm: 1, xs: 1, xxs: 1 };
-const COLS_EDIT = { lg: GRID_COLS, md: GRID_COLS, sm: GRID_COLS, xs: GRID_COLS, xxs: GRID_COLS };
+const COLS = { lg: GRID_COLS, sm: 1 };
 const ROW_HEIGHT = 100;
 const GRID_MARGIN = 10;
-const SPACER_ID = "__spacer";
 const ADD_GHOST_W = 3;
 const ADD_GHOST_FALLBACK_H = 2;
 const DOT_EXTRA_ROWS = 5;
+const STACKED_RESIZE_HIT_W = 96;
+const STACKED_RESIZE_HIT_H = 44;
 const noCompactorPreventCollision = { ...noCompactor, preventCollision: true };
 const rectsOverlap = (a, b) => a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
 const computeAddGhostLayout = (panels, w) => {
@@ -51755,11 +51775,14 @@ const computeAddGhostLayout = (panels, w) => {
   }
   return { x: 0, y: bottom, w, h: ADD_GHOST_FALLBACK_H };
 };
-const mapLayoutBack = (panels, items) => panels.map((p) => {
-  const item = items.find((l) => l.i === p.id && l.i !== SPACER_ID);
-  if (!item) return { id: p.id, layout: p.layout };
-  return { id: p.id, layout: { ...p.layout, x: item.x, y: item.y, w: item.w, h: item.h } };
-});
+const addGhostLayoutFor = (panels, isNarrow) => isNarrow ? { x: 0, y: stackedBottom(panels), w: 1, h: ADD_GHOST_FALLBACK_H } : computeAddGhostLayout(panels, Math.min(ADD_GHOST_W, GRID_COLS));
+const gridBottom = (panels, isNarrow, addGhost) => {
+  const rowBottoms = [
+    ...isNarrow ? [stackedBottom(panels)] : panels.map((p) => p.layout.y + p.layout.h),
+    ...addGhost ? [addGhost.y + addGhost.h] : []
+  ];
+  return panels.length > 0 || addGhost ? Math.max(...rowBottoms) : 4;
+};
 const DotGrid = ({
   cols,
   rows,
@@ -51790,19 +51813,19 @@ const DashboardGrid = ({
 }) => {
   const isEditing = mode === "edit";
   const { width, containerRef } = useContainerWidth();
+  const isNarrow = isNarrowWidth(width);
+  const isNarrowEdit = isEditing && isNarrow;
+  const isWideEdit = isEditing && !isNarrow;
+  const cols = isNarrow ? COLS.sm : COLS.lg;
   const theme = material.useTheme();
   const [isInteracting, setIsInteracting] = React.useState(false);
   const showAddGhost = isEditing && Boolean(addPanel) && panels.length > 0 && !isInteracting;
-  const addGhostLayout = showAddGhost ? computeAddGhostLayout(panels, Math.min(ADD_GHOST_W, GRID_COLS)) : null;
+  const addGhostLayout = showAddGhost ? addGhostLayoutFor(panels, isNarrow) : null;
   const gridWidth = width;
-  const colWidth = (gridWidth - GRID_MARGIN * (GRID_COLS + 1)) / GRID_COLS;
+  const colWidth = (gridWidth - GRID_MARGIN * (cols + 1)) / cols;
   const cellW = colWidth + GRID_MARGIN;
   const cellH = ROW_HEIGHT + GRID_MARGIN;
-  const rowBottoms = [
-    ...panels.map((p) => p.layout.y + p.layout.h),
-    ...addGhostLayout ? [addGhostLayout.y + addGhostLayout.h] : []
-  ];
-  const maxGridRow = rowBottoms.length > 0 ? Math.max(...rowBottoms) : 4;
+  const maxGridRow = gridBottom(panels, isNarrow, addGhostLayout);
   const [screenDotRows, setScreenDotRows] = React.useState(null);
   React.useEffect(() => {
     if (!isEditing || !containerRef.current) {
@@ -51823,10 +51846,11 @@ const DashboardGrid = ({
     h: 1,
     static: true
   };
-  const layouts = buildLayouts(isEditing, panels, spacerItem);
+  const showSpacer = isWideEdit;
+  const layouts = buildLayouts(isEditing, panels, showSpacer ? spacerItem : void 0);
   const handleLayoutChange = (currentLayout, _all) => {
     if (!isEditing || !currentLayout || !onLayoutChange) return;
-    onLayoutChange(mapLayoutBack(panels, currentLayout));
+    onLayoutChange(mapLayoutBack(panels, currentLayout, isNarrow));
   };
   const emptyContent = isEditing && addPanel ? /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { minHeight: ROW_HEIGHT * 2 + GRID_MARGIN }, children: addPanel }) : /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { py: 8, textAlign: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { color: "text.secondary", children: emptyMessage }) });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -51850,13 +51874,24 @@ const DashboardGrid = ({
         // resize affordance. Keep the handle element itself (the transparent hit area) so resize
         // still works; only our Panel corner is drawn.
         "& .react-grid-item > .react-resizable-handle::after": { display: "none" },
+        // RGL's bottom-edge handle is a 20px square turned 45° — too small a target on a phone,
+        // where the stack is resized. Widen it into an upright touch target centred on the edge
+        // and let it take the touch instead of the page scroll.
+        "& .react-grid-item > .react-resizable-handle.react-resizable-handle-s": {
+          width: STACKED_RESIZE_HIT_W,
+          height: STACKED_RESIZE_HIT_H,
+          bottom: -GRID_MARGIN,
+          ml: `${-STACKED_RESIZE_HIT_W / 2}px`,
+          transform: "none",
+          touchAction: "none"
+        },
         ...sx
       },
       children: panels.length === 0 ? emptyContent : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         isEditing && /* @__PURE__ */ jsxRuntime.jsx(
           DotGrid,
           {
-            cols: GRID_COLS,
+            cols,
             rows: dotRows,
             cellW,
             cellH,
@@ -51871,10 +51906,11 @@ const DashboardGrid = ({
             className: "layout",
             width: gridWidth,
             layouts,
-            cols: isEditing ? COLS_EDIT : COLS_VIEW,
+            breakpoints: GRID_BREAKPOINTS,
+            cols: COLS,
             rowHeight: ROW_HEIGHT,
             margin: [GRID_MARGIN, GRID_MARGIN],
-            compactor: noCompactorPreventCollision,
+            compactor: isNarrowEdit ? verticalCompactor : noCompactorPreventCollision,
             onLayoutChange: handleLayoutChange,
             dragConfig: { enabled: isEditing, handle: `.${PANEL_DRAG_HANDLE_CLASS}` },
             resizeConfig: { enabled: isEditing },
@@ -51883,35 +51919,43 @@ const DashboardGrid = ({
             onResizeStart: () => setIsInteracting(true),
             onResizeStop: () => setIsInteracting(false),
             children: [
-              isEditing && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "none" } }, SPACER_ID),
+              showSpacer && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "none" } }, SPACER_ID),
               panels.map((p) => (
                 // raise the hovered item so an inner chart tooltip isn't painted over by neighbours
-                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { height: "100%", "&:hover": { zIndex: 5 } }, children: /* @__PURE__ */ jsxRuntime.jsxs(Panel, { resizeHandle: isEditing, sx: { height: "100%" }, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    PanelHeader,
-                    {
-                      label: p.label,
-                      icon: p.icon,
-                      iconColor: p.iconColor,
-                      iconBadge: p.iconBadge,
-                      help: p.help,
-                      actions: p.actions,
-                      dragHandle: isEditing
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    PanelContent,
-                    {
-                      paddingSize: p.contentPaddingSize,
-                      sx: { flexGrow: 1, minHeight: 0, overflow: "auto" },
-                      children: p.content
-                    }
-                  )
-                ] }) }, p.id)
+                /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { height: "100%", "&:hover": { zIndex: 5 } }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Panel,
+                  {
+                    resizable: isEditing,
+                    resizeHandle: isNarrow ? "bottom" : "corner",
+                    sx: { height: "100%" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PanelHeader,
+                        {
+                          label: p.label,
+                          icon: p.icon,
+                          iconColor: p.iconColor,
+                          iconBadge: p.iconBadge,
+                          help: p.help,
+                          actions: p.actions,
+                          dragHandle: isWideEdit
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        PanelContent,
+                        {
+                          paddingSize: p.contentPaddingSize,
+                          sx: { flexGrow: 1, minHeight: 0, overflow: "auto" },
+                          children: p.content
+                        }
+                      )
+                    ]
+                  }
+                ) }, p.id)
               ))
             ]
           },
-          isEditing ? "edit" : "view"
+          isNarrowEdit ? "edit-narrow" : mode
         ),
         addGhostLayout && /* @__PURE__ */ jsxRuntime.jsx(
           material.Box,