@bsuite/page-builder 0.3.0 → 0.4.0

package/dist/PageGridLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAIxC,OAAO,KAAK,EAAe,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAqJnE,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,GACvB,EAAE,mBAAmB,2CA4frB"}
+{"version":3,"file":"PageGridLayout.d.ts","sourceRoot":"","sources":["../src/PageGridLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC;AAIxC,OAAO,KAAK,EAAe,mBAAmB,EAAE,MAAM,YAAY,CAAC;AA+KnE,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,UAAU,EACV,SAAS,EAMT,WAAkB,EAClB,aAAsC,EACtC,yBAAiE,EACjE,kBAAkB,EAClB,sBAAsB,GACvB,EAAE,mBAAmB,2CA+frB"}

package/dist/PageGridLayout.js

@@ -2,24 +2,31 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Eye, EyeOff, Layers, LayoutGrid, Lock, Plus, RotateCcw, Save, Settings2, Unlock } from 'lucide-react';
 import React, { startTransition, useEffect, useMemo, useRef, useState } from 'react';
 import { Responsive } from 'react-grid-layout';
-import { gridBounds, maxSize, minMaxSize, minSize } from 'react-grid-layout/core';
+import { gridBounds, minMaxSize, minSize } from 'react-grid-layout/core';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import { defaultPreferenceAdapter } from './preferences.js';
 import { usePageGridLayout } from './usePageGridLayout.js';
 import { cn } from './utils.js';
 /**
- * Resize bounds for the bottom-right handle.
+ * Default resize bounds applied as a *global* constraint to ALL grid items.
  *
- * `maxH` was 16 (≈512px at rowHeight=32) which clipped data tables holding
- * more than ~7 rows — operators reported "the resize handle hits a wall
- * before all my data fits". Bumped to 48 (≈1536px) which comfortably fits
- * ~20–30 list rows of any density and matches the maximum viewport height
- * on common displays. Cards that still need to show more data should rely
- * on their own internal scroll container (we apply `min-h-0 overflow-auto`
- * to the card body wrapper below) rather than growing without bound.
+ * History
+ * -------
+ * - 0.2.x: maxH=16 (≈512px) — clipped data tables.
+ * - 0.3.0: bumped to maxH=48 (≈1536px) — still a hard ceiling. Operators
+ *   reported "the handle hits a wall before all my data fits" on tall
+ *   data-table cards even after the bump.
+ * - 0.4.0 (this version): **removed the global maxW and maxH ceilings
+ *   entirely.** Width is bounded by `gridBounds` (the active column count)
+ *   so no separate global `maxSize(...)` is needed; per-item
+ *   `LayoutItem.maxW` / `maxH` is honoured via `minMaxSize`. Combined
+ *   with the new internal scroll wrapper around `{content}` (see GridItem
+ *   render below), cards now grow to their bounds and content scrolls
+ *   inside. Per-item `maxH` on `LayoutItem` remains the right knob for
+ *   "this widget shouldn't grow past N rows".
  */
-const DEFAULT_RESIZE_BOUNDS = { minW: 2, minH: 1, maxW: 12, maxH: 48 };
+const DEFAULT_RESIZE_BOUNDS = { minW: 2, minH: 1 };
 const DEFAULT_RESIZE_HANDLES = ['se'];
 const DEFAULT_ADD_ENTITY_WIDGET_EVENT_NAMES = ['bsu-add-entity-widget', 'crm7-add-entity-widget'];
 /**
@@ -66,7 +73,7 @@ const GridItem = React.memo(React.forwardRef(function GridItem({ id, content, is
     return (_jsxs("div", { ref: ref, className: outerClass, style: injectedStyle, ...rest, children: [_jsxs("div", { className: "h-full w-full relative", children: [isEditing && (_jsx("div", { className: "absolute inset-0 z-10 pointer-events-none rounded-3xl border-2 border-transparent group-hover:border-primary/50 transition-colors bg-black/5" })), isEditing && (_jsx("div", { className: "absolute top-2 left-2 z-30 flex items-center gap-1 pointer-events-none", children: _jsx("span", { className: "text-[10px] px-1.5 py-0.5 rounded-md opacity-80 font-medium bg-muted text-muted-foreground", children: label }) })), isEditing && (_jsx("button", { className: "absolute top-2 right-2 z-30 h-6 w-6 rounded-full flex items-center justify-center bg-destructive/80 hover:bg-destructive text-white shadow transition-colors", "data-no-drag": true, onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
                             event.stopPropagation();
                             onHide(id);
-                        }, title: `Hide ${label}`, "aria-label": `Hide ${label}`, children: _jsx(EyeOff, { className: "h-3 w-3", "aria-hidden": "true" }) })), _jsx("div", { className: "h-full w-full rounded-3xl transition-all flex flex-col bg-card shadow-sm", style: { contain: 'paint' }, children: content })] }), injectedChildren] }));
+                        }, title: `Hide ${label}`, "aria-label": `Hide ${label}`, children: _jsx(EyeOff, { className: "h-3 w-3", "aria-hidden": "true" }) })), _jsx("div", { className: "h-full w-full rounded-3xl transition-all flex flex-col bg-card shadow-sm", style: { contain: 'paint' }, children: _jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: content }) })] }), injectedChildren] }));
 }));
 export function PageGridLayout({ pageKey, defaultLayouts, defaultCols, layoutVersion, canEditPage, editorEventNames, preferenceAdapter, widgets, widgetMeta, className, 
 // Resize default flipped 2026-05-12: rgl v2 dropped auto-handle rendering
@@ -86,10 +93,13 @@ isResizable = true, resizeHandles = DEFAULT_RESIZE_HANDLES, addEntityWidgetEvent
     });
     const resizeEnabled = isEditing && isResizable;
     const resizeConstraints = useMemo(() => [
+        // `gridBounds` caps width at the active column count, so we don't need
+        // a global maxSize(...). Width and height are unbounded by default;
+        // consumers cap individual widgets via LayoutItem.maxW / maxH which
+        // `minMaxSize` reads per-item.
         gridBounds,
         minMaxSize,
         minSize(DEFAULT_RESIZE_BOUNDS.minW, DEFAULT_RESIZE_BOUNDS.minH),
-        maxSize(DEFAULT_RESIZE_BOUNDS.maxW, DEFAULT_RESIZE_BOUNDS.maxH),
     ], []);
     const [extraWidgetConfigs, setExtraWidgetConfigs] = useState({});
     const { value: layerNames, setValue: setLayerNames } = (preferenceAdapter ?? defaultPreferenceAdapter)(`page:${pageKey}_grid_layer_names`, {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsuite/page-builder",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Shared BSuite responsive page-builder grid and layout persistence primitives",
   "type": "module",
   "license": "UNLICENSED",