npm - draggable-dashboard-lete-pro - Versions diffs - 1.5.4 → 1.5.5 - Mend

draggable-dashboard-lete-pro 1.5.4 → 1.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/components/DashboardTile.js +5 -4
package/dist/components/DraggableDashboard.js +313 -93
package/dist/types.js +1 -20
package/package.json +1 -1

package/dist/components/DashboardTile.js CHANGED Viewed

@@ -12,6 +12,7 @@ import { GRID_GAP } from '../constants';
 import { TileContent } from './TileContent';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var DashboardTile = function DashboardTile(_ref) {
+  var _tile$x, _tile$y;
   var tile = _ref.tile,
     cellSize = _ref.cellSize,
     editMode = _ref.editMode,
@@ -22,10 +23,10 @@ export var DashboardTile = function DashboardTile(_ref) {
     isDragging = _ref.isDragging,
     isResizing = _ref.isResizing,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var x = tile.x,
-    y = tile.y,
-    w = tile.w,
-    h = tile.h;
+  var x = (_tile$x = tile.x) !== null && _tile$x !== void 0 ? _tile$x : 0;
+  var y = (_tile$y = tile.y) !== null && _tile$y !== void 0 ? _tile$y : 0;
+  var w = tile.width;
+  var h = tile.height;
   var left = x * (cellSize + GRID_GAP);
   var top = y * (cellSize + GRID_GAP);
   var width = w * cellSize + (w - 1) * GRID_GAP;

package/dist/components/DraggableDashboard.js CHANGED Viewed

@@ -1,16 +1,11 @@
+var _excluded = ["tiles", "setTiles", "dashboardId", "editMode", "theme", "onGetPositions", "onSetPositions", "onRemoveTilePosition", "onDeleteTile", "DeleteTileModal", "AddTileModal", "SVG", "Button"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["tiles", "setTiles", "dashboardId", "editMode", "theme", "fetchers"];
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -21,13 +16,38 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
 import { GRID_COLS, GRID_GAP, MIN_UNITS, MOBILE_BREAKPOINT } from '../constants';
 import { DashboardTile } from './DashboardTile';
-import { getPositions, setPositions } from '../services/dashboardTileDB';
+import { getPositions, setPositions, removeTilePosition } from '../services/dashboardTileDB';
 import { TileContent } from './TileContent';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var DraggableDashboard = function DraggableDashboard(_ref) {
+import { AddTileModal } from './AddTileModal';
+// Helper to convert between w/h and width/height formats
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var tileToPosition = function tileToPosition(tile) {
+  var _tile$x, _tile$y;
+  return {
+    x: (_tile$x = tile.x) !== null && _tile$x !== void 0 ? _tile$x : 0,
+    y: (_tile$y = tile.y) !== null && _tile$y !== void 0 ? _tile$y : 0,
+    width: tile.width,
+    height: tile.height
+  };
+};
+var positionToTile = function positionToTile(pos, tile) {
+  return _objectSpread(_objectSpread({}, tile), {}, {
+    x: pos.x,
+    y: pos.y,
+    width: pos.width,
+    height: pos.height
+  });
+};
+export var DraggableDashboard = /*#__PURE__*/forwardRef(function (_ref, _ref1) {
   var tiles = _ref.tiles,
     setTiles = _ref.setTiles,
     dashboardId = _ref.dashboardId,
@@ -35,7 +55,14 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
     editMode = _ref$editMode === void 0 ? true : _ref$editMode,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'light' : _ref$theme,
-    fetchers = _ref.fetchers,
+    onGetPositions = _ref.onGetPositions,
+    onSetPositions = _ref.onSetPositions,
+    onRemoveTilePosition = _ref.onRemoveTilePosition,
+    onDeleteTile = _ref.onDeleteTile,
+    DeleteTileModal = _ref.DeleteTileModal,
+    CustomAddTileModal = _ref.AddTileModal,
+    CustomSVG = _ref.SVG,
+    CustomButton = _ref.Button,
     rest = _objectWithoutProperties(_ref, _excluded);
   var containerRef = useRef(null);
   var _useState = useState(0),
@@ -62,84 +89,135 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
     _useState10 = _slicedToArray(_useState1, 2),
     maximizedTileId = _useState10[0],
     setMaximizedTileId = _useState10[1];
-  // Delete confirmation state
   var _useState11 = useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
     tileToDeleteId = _useState12[0],
     setTileToDeleteId = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showAddModal = _useState14[0],
+    setShowAddModal = _useState14[1];
   // Persistence management
   useEffect(function () {
     var initPositions = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-        var saved, _t;
+        var saved, legacyPositions, _t;
         return _regenerator().w(function (_context) {
           while (1) switch (_context.p = _context.n) {
             case 0:
               _context.p = 0;
+              saved = {};
+              if (!onGetPositions) {
+                _context.n = 2;
+                break;
+              }
               _context.n = 1;
-              return getPositions(dashboardId);
+              return onGetPositions(dashboardId);
             case 1:
               saved = _context.v;
+              _context.n = 4;
+              break;
+            case 2:
+              _context.n = 3;
+              return getPositions(dashboardId);
+            case 3:
+              legacyPositions = _context.v;
+              // Convert legacy format to new format
+              saved = Object.entries(legacyPositions).reduce(function (acc, _ref3) {
+                var _pos$x, _pos$y, _ref5, _pos$w, _ref6, _pos$h;
+                var _ref4 = _slicedToArray(_ref3, 2),
+                  id = _ref4[0],
+                  pos = _ref4[1];
+                acc[id] = {
+                  x: (_pos$x = pos.x) !== null && _pos$x !== void 0 ? _pos$x : 0,
+                  y: (_pos$y = pos.y) !== null && _pos$y !== void 0 ? _pos$y : 0,
+                  width: (_ref5 = (_pos$w = pos.w) !== null && _pos$w !== void 0 ? _pos$w : pos.width) !== null && _ref5 !== void 0 ? _ref5 : 2,
+                  height: (_ref6 = (_pos$h = pos.h) !== null && _pos$h !== void 0 ? _pos$h : pos.height) !== null && _ref6 !== void 0 ? _ref6 : 2
+                };
+                return acc;
+              }, {});
+            case 4:
               if (saved && Object.keys(saved).length > 0) {
                 setTiles(function (prev) {
                   return prev.map(function (t) {
-                    return saved[t.id] ? _objectSpread(_objectSpread({}, t), saved[t.id]) : t;
+                    var savedPos = saved[t.id];
+                    if (savedPos) {
+                      return positionToTile(savedPos, t);
+                    }
+                    return t;
                   });
                 });
               }
-              _context.n = 3;
+              _context.n = 6;
               break;
-            case 2:
-              _context.p = 2;
+            case 5:
+              _context.p = 5;
               _t = _context.v;
               console.warn('Could not load saved positions', _t);
-            case 3:
+            case 6:
               return _context.a(2);
           }
-        }, _callee, null, [[0, 2]]);
+        }, _callee, null, [[0, 5]]);
       }));
       return function initPositions() {
         return _ref2.apply(this, arguments);
       };
     }();
     initPositions();
-  }, [dashboardId, setTiles]);
+  }, [dashboardId, setTiles, onGetPositions]);
   var savePositions = useCallback(/*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(currentTiles) {
-      var posMap, _t2;
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(currentTiles) {
+      var posMap, legacyPos, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             posMap = {};
             currentTiles.forEach(function (t) {
-              posMap[t.id] = {
-                x: t.x,
-                y: t.y,
-                w: t.w,
-                h: t.h
-              };
+              posMap[t.id] = tileToPosition(t);
             });
             _context2.p = 1;
+            if (!onSetPositions) {
+              _context2.n = 3;
+              break;
+            }
             _context2.n = 2;
-            return setPositions(dashboardId, posMap);
+            return onSetPositions(dashboardId, posMap);
           case 2:
             _context2.n = 4;
             break;
           case 3:
-            _context2.p = 3;
+            // Convert to legacy format for backward compatibility
+            legacyPos = {};
+            Object.entries(posMap).forEach(function (_ref8) {
+              var _ref9 = _slicedToArray(_ref8, 2),
+                id = _ref9[0],
+                pos = _ref9[1];
+              legacyPos[id] = {
+                x: pos.x,
+                y: pos.y,
+                w: pos.width,
+                h: pos.height
+              };
+            });
+            _context2.n = 4;
+            return setPositions(dashboardId, legacyPos);
+          case 4:
+            _context2.n = 6;
+            break;
+          case 5:
+            _context2.p = 5;
             _t2 = _context2.v;
             console.warn('Could not save positions', _t2);
-          case 4:
+          case 6:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 3]]);
+      }, _callee2, null, [[1, 5]]);
     }));
     return function (_x) {
-      return _ref3.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
-  }(), [dashboardId]);
+  }(), [dashboardId, onSetPositions]);
   // Responsive handling
   useEffect(function () {
@@ -180,22 +258,30 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
   // Collision & Placement Logic
   var checkOverlap = function checkOverlap(a, b) {
-    return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+    var _a$x, _a$y, _b$x, _b$y;
+    var ax = (_a$x = a.x) !== null && _a$x !== void 0 ? _a$x : 0;
+    var ay = (_a$y = a.y) !== null && _a$y !== void 0 ? _a$y : 0;
+    var bx = (_b$x = b.x) !== null && _b$x !== void 0 ? _b$x : 0;
+    var by = (_b$y = b.y) !== null && _b$y !== void 0 ? _b$y : 0;
+    return ax < bx + b.width && ax + a.width > bx && ay < by + b.height && ay + a.height > by;
   };
   var findNearestAvailableSpot = function findNearestAvailableSpot(target, allTiles, excludeId) {
+    var _target$x, _target$y;
     var others = allTiles.filter(function (t) {
       return t.id !== excludeId;
     });
     if (!others.some(function (o) {
       return checkOverlap(target, o);
     })) return target;
+    var targetX = (_target$x = target.x) !== null && _target$x !== void 0 ? _target$x : 0;
+    var targetY = (_target$y = target.y) !== null && _target$y !== void 0 ? _target$y : 0;
     for (var radius = 1; radius < 20; radius++) {
       for (var dy = -radius; dy <= radius; dy++) {
         var _loop = function _loop() {
             if (Math.abs(dx) !== radius && Math.abs(dy) !== radius) return 0; // continue
-            var nx = target.x + dx;
-            var ny = target.y + dy;
-            if (nx >= 0 && nx <= GRID_COLS - target.w && ny >= 0) {
+            var nx = targetX + dx;
+            var ny = targetY + dy;
+            if (nx >= 0 && nx <= GRID_COLS - target.width && ny >= 0) {
               var potential = _objectSpread(_objectSpread({}, target), {}, {
                 x: nx,
                 y: ny
@@ -235,7 +321,7 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
           if (checkOverlap(currentLayout[i], currentLayout[j])) {
             hasOverlap = true;
             var targetIdx = currentLayout[i].id === movedTile.id ? j : i;
-            currentLayout[targetIdx] = _objectSpread(_objectSpread({}, currentLayout[targetIdx]), findNearestAvailableSpot(currentLayout[targetIdx], currentLayout, currentLayout[targetIdx].id));
+            currentLayout[targetIdx] = findNearestAvailableSpot(currentLayout[targetIdx], currentLayout, currentLayout[targetIdx].id);
           }
         }
       }
@@ -245,6 +331,7 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
   // Event Handlers
   var handleDragStart = function handleDragStart(e, tileId) {
+    var _tile$x2, _tile$y2;
     if (!editMode) return;
     var tile = tiles.find(function (t) {
       return t.id === tileId;
@@ -255,8 +342,8 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
       tileId: tileId,
       startX: e.clientX,
       startY: e.clientY,
-      originalX: tile.x,
-      originalY: tile.y
+      originalX: (_tile$x2 = tile.x) !== null && _tile$x2 !== void 0 ? _tile$x2 : 0,
+      originalY: (_tile$y2 = tile.y) !== null && _tile$y2 !== void 0 ? _tile$y2 : 0
     });
     e.target.setPointerCapture(e.pointerId);
   };
@@ -271,24 +358,26 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
       tileId: tileId,
       startX: e.clientX,
       startY: e.clientY,
-      startWidth: tile.w,
-      startHeight: tile.h,
-      originalW: tile.w,
-      originalH: tile.h
+      startWidth: tile.width,
+      startHeight: tile.height,
+      originalWidth: tile.width,
+      originalHeight: tile.height
     });
     e.target.setPointerCapture(e.pointerId);
   };
   var handlePointerMove = function handlePointerMove(e) {
     if (!editMode || isMobile) return;
     if (dragState) {
+      var _tile$x3;
       var gridDeltaX = Math.round((e.clientX - dragState.startX) / (cellSize + GRID_GAP));
       var gridDeltaY = Math.round((e.clientY - dragState.startY) / (cellSize + GRID_GAP));
       var tile = tiles.find(function (t) {
         return t.id === dragState.tileId;
       });
-      var newX = Math.max(0, Math.min(GRID_COLS - tile.w, dragState.originalX + gridDeltaX));
+      var tileX = (_tile$x3 = tile.x) !== null && _tile$x3 !== void 0 ? _tile$x3 : 0;
+      var newX = Math.max(0, Math.min(GRID_COLS - tile.width, dragState.originalX + gridDeltaX));
       var newY = Math.max(0, dragState.originalY + gridDeltaY);
-      if (newX !== tile.x || newY !== tile.y) {
+      if (newX !== tileX || newY !== tile.y) {
         var movedTile = _objectSpread(_objectSpread({}, tile), {}, {
           x: newX,
           y: newY
@@ -298,17 +387,19 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
       }
     }
     if (resizeState) {
+      var _tile$x4;
       var gridDeltaW = Math.round((e.clientX - resizeState.startX) / (cellSize + GRID_GAP));
       var gridDeltaH = Math.round((e.clientY - resizeState.startY) / (cellSize + GRID_GAP));
       var _tile = tiles.find(function (t) {
         return t.id === resizeState.tileId;
       });
-      var newW = Math.max(MIN_UNITS, Math.min(GRID_COLS - _tile.x, resizeState.originalW + gridDeltaW));
-      var newH = Math.max(MIN_UNITS, resizeState.originalH + gridDeltaH);
-      if (newW !== _tile.w || newH !== _tile.h) {
+      var _tileX = (_tile$x4 = _tile.x) !== null && _tile$x4 !== void 0 ? _tile$x4 : 0;
+      var newWidth = Math.max(MIN_UNITS, Math.min(GRID_COLS - _tileX, resizeState.originalWidth + gridDeltaW));
+      var newHeight = Math.max(MIN_UNITS, resizeState.originalHeight + gridDeltaH);
+      if (newWidth !== _tile.width || newHeight !== _tile.height) {
         var resizedTile = _objectSpread(_objectSpread({}, _tile), {}, {
-          w: newW,
-          h: newH
+          width: newWidth,
+          height: newHeight
         });
         var _newLayout = resolveCollisions(resizedTile, tiles);
         setTiles(_newLayout);
@@ -321,28 +412,87 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
     setResizeState(null);
     setActiveTileId(null);
   };
-  var confirmDelete = function confirmDelete() {
-    if (tileToDeleteId) {
-      var updated = tiles.filter(function (t) {
-        return t.id !== tileToDeleteId;
-      });
-      setTiles(updated);
-      savePositions(updated);
-      setTileToDeleteId(null);
-    }
-  };
+  var confirmDelete = /*#__PURE__*/function () {
+    var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+      var updated, _t3;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.p = _context3.n) {
+          case 0:
+            if (!tileToDeleteId) {
+              _context3.n = 8;
+              break;
+            }
+            _context3.p = 1;
+            if (!onDeleteTile) {
+              _context3.n = 2;
+              break;
+            }
+            _context3.n = 2;
+            return onDeleteTile(tileToDeleteId);
+          case 2:
+            updated = tiles.filter(function (t) {
+              return t.id !== tileToDeleteId;
+            });
+            setTiles(updated);
+            savePositions(updated);
+            if (!onRemoveTilePosition) {
+              _context3.n = 4;
+              break;
+            }
+            _context3.n = 3;
+            return onRemoveTilePosition(dashboardId, tileToDeleteId);
+          case 3:
+            _context3.n = 5;
+            break;
+          case 4:
+            _context3.n = 5;
+            return removeTilePosition(dashboardId, tileToDeleteId);
+          case 5:
+            _context3.n = 7;
+            break;
+          case 6:
+            _context3.p = 6;
+            _t3 = _context3.v;
+            console.error('Error deleting tile', _t3);
+          case 7:
+            _context3.p = 7;
+            setTileToDeleteId(null);
+            return _context3.f(7);
+          case 8:
+            return _context3.a(2);
+        }
+      }, _callee3, null, [[1, 6, 7, 8]]);
+    }));
+    return function confirmDelete() {
+      return _ref0.apply(this, arguments);
+    };
+  }();
   var renderDeleteConfirmation = function renderDeleteConfirmation() {
     if (!tileToDeleteId) return null;
     var tile = tiles.find(function (t) {
       return t.id === tileToDeleteId;
     });
+    if (DeleteTileModal) {
+      var Modal = DeleteTileModal;
+      return /*#__PURE__*/_jsx(Modal, {
+        isOpen: !!tileToDeleteId,
+        onClose: function onClose() {
+          return setTileToDeleteId(null);
+        },
+        onConfirm: confirmDelete,
+        tile: tile
+      });
+    }
     return /*#__PURE__*/_jsx("div", {
       className: "fixed inset-0 z-[300] bg-slate-900/60 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-300",
       children: /*#__PURE__*/_jsxs("div", {
         className: "bg-white dark:bg-slate-900 w-full max-w-sm rounded-3xl shadow-2xl overflow-hidden p-8 flex flex-col items-center text-center space-y-6",
         children: [/*#__PURE__*/_jsx("div", {
           className: "w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-2xl flex items-center justify-center text-red-500",
-          children: /*#__PURE__*/_jsx("svg", {
+          children: CustomSVG ? /*#__PURE__*/_jsx(CustomSVG, {
+            icon: "trash",
+            className: "w-8 h-8"
+          }) : /*#__PURE__*/_jsx("svg", {
             className: "w-8 h-8",
             fill: "none",
             stroke: "currentColor",
@@ -364,19 +514,32 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
               children: tile === null || tile === void 0 ? void 0 : tile.title
             }), "\"? This action cannot be undone."]
           })]
-        }), /*#__PURE__*/_jsxs("div", {
+        }), /*#__PURE__*/_jsx("div", {
           className: "flex gap-3 w-full",
-          children: [/*#__PURE__*/_jsx("button", {
-            onClick: function onClick() {
-              return setTileToDeleteId(null);
-            },
-            className: "flex-1 px-4 py-3 text-xs font-black tracking-widest text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors uppercase",
-            children: "Cancel"
-          }), /*#__PURE__*/_jsx("button", {
-            onClick: confirmDelete,
-            className: "flex-1 px-4 py-3 text-xs font-black tracking-widest bg-red-500 text-white rounded-xl shadow-lg shadow-red-500/30 hover:bg-red-600 transition-all active:scale-95 uppercase",
-            children: "Delete"
-          })]
+          children: CustomButton ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(CustomButton, {
+              onClick: function onClick() {
+                return setTileToDeleteId(null);
+              },
+              children: "Cancel"
+            }), /*#__PURE__*/_jsx(CustomButton, {
+              onClick: confirmDelete,
+              variant: "danger",
+              children: "Delete"
+            })]
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx("button", {
+              onClick: function onClick() {
+                return setTileToDeleteId(null);
+              },
+              className: "flex-1 px-4 py-3 text-xs font-black tracking-widest text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 rounded-xl transition-colors uppercase",
+              children: "Cancel"
+            }), /*#__PURE__*/_jsx("button", {
+              onClick: confirmDelete,
+              className: "flex-1 px-4 py-3 text-xs font-black tracking-widest bg-red-500 text-white rounded-xl shadow-lg shadow-red-500/30 hover:bg-red-600 transition-all active:scale-95 uppercase",
+              children: "Delete"
+            })]
+          })
         })]
       })
     });
@@ -402,7 +565,10 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
                   return navigateMaximized('prev');
                 },
                 className: "p-2 hover:bg-white dark:hover:bg-slate-700 rounded-lg transition-all shadow-sm active:scale-90 text-slate-600 dark:text-slate-300",
-                children: /*#__PURE__*/_jsx("svg", {
+                children: CustomSVG ? /*#__PURE__*/_jsx(CustomSVG, {
+                  icon: "chevron-left",
+                  className: "w-5 h-5"
+                }) : /*#__PURE__*/_jsx("svg", {
                   className: "w-5 h-5",
                   fill: "none",
                   stroke: "currentColor",
@@ -417,7 +583,10 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
                   return navigateMaximized('next');
                 },
                 className: "p-2 hover:bg-white dark:hover:bg-slate-700 rounded-lg transition-all shadow-sm active:scale-90 text-slate-600 dark:text-slate-300",
-                children: /*#__PURE__*/_jsx("svg", {
+                children: CustomSVG ? /*#__PURE__*/_jsx(CustomSVG, {
+                  icon: "chevron-right",
+                  className: "w-5 h-5"
+                }) : /*#__PURE__*/_jsx("svg", {
                   className: "w-5 h-5",
                   fill: "none",
                   stroke: "currentColor",
@@ -443,7 +612,10 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
               return setMaximizedTileId(null);
             },
             className: "p-3 bg-slate-50 dark:bg-slate-800 hover:bg-red-50 dark:hover:bg-red-900/20 text-slate-400 hover:text-red-500 rounded-2xl transition-all",
-            children: /*#__PURE__*/_jsx("svg", {
+            children: CustomSVG ? /*#__PURE__*/_jsx(CustomSVG, {
+              icon: "close",
+              className: "w-6 h-6"
+            }) : /*#__PURE__*/_jsx("svg", {
               className: "w-6 h-6",
               fill: "none",
               stroke: "currentColor",
@@ -463,8 +635,7 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
               children: /*#__PURE__*/_jsx(TileContent, _objectSpread({
                 tile: tile,
                 setTiles: setTiles,
-                editMode: editMode,
-                fetchers: fetchers
+                editMode: editMode
               }, rest))
             })
           })
@@ -472,10 +643,37 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
       })
     });
   };
+  var handleAddTile = function handleAddTile(tile) {
+    var _tile$x5, _tile$y3;
+    var newTile = _objectSpread(_objectSpread({}, tile), {}, {
+      x: (_tile$x5 = tile.x) !== null && _tile$x5 !== void 0 ? _tile$x5 : 0,
+      y: (_tile$y3 = tile.y) !== null && _tile$y3 !== void 0 ? _tile$y3 : 0,
+      width: tile.width || 2,
+      height: tile.height || 2
+    });
+    setTiles(function (prev) {
+      return [].concat(_toConsumableArray(prev), [newTile]);
+    });
+    setShowAddModal(false);
+    savePositions([].concat(_toConsumableArray(tiles), [newTile]));
+  };
   if (isMobile) {
     return /*#__PURE__*/_jsxs("div", {
       className: "flex flex-col gap-6 p-6",
-      children: [renderMaximizedView(), renderDeleteConfirmation(), tiles.map(function (tile) {
+      ref: _ref1,
+      children: [renderMaximizedView(), renderDeleteConfirmation(), CustomAddTileModal ? /*#__PURE__*/_jsx(CustomAddTileModal, {
+        isOpen: showAddModal,
+        onClose: function onClose() {
+          return setShowAddModal(false);
+        },
+        onAdd: handleAddTile
+      }) : showAddModal && /*#__PURE__*/_jsx(AddTileModal, {
+        isOpen: showAddModal,
+        onClose: function onClose() {
+          return setShowAddModal(false);
+        },
+        onAdd: handleAddTile
+      }), tiles.map(function (tile) {
         return /*#__PURE__*/_jsxs("div", {
           className: "bg-white dark:bg-slate-800 rounded-2xl shadow-md border border-slate-200 dark:border-slate-700 overflow-hidden flex flex-col min-h-[400px]",
           children: [/*#__PURE__*/_jsxs("div", {
@@ -490,7 +688,10 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
                   return setMaximizedTileId(tile.id);
                 },
                 className: "p-2 text-indigo-600 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg",
-                children: /*#__PURE__*/_jsx("svg", {
+                children: CustomSVG ? /*#__PURE__*/_jsx(CustomSVG, {
+                  icon: "maximize",
+                  className: "w-4 h-4"
+                }) : /*#__PURE__*/_jsx("svg", {
                   className: "w-4 h-4",
                   fill: "none",
                   stroke: "currentColor",
@@ -505,7 +706,10 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
                   return setTileToDeleteId(tile.id);
                 },
                 className: "p-2 text-red-500 bg-red-50 dark:bg-red-900/20 rounded-lg",
-                children: /*#__PURE__*/_jsx("svg", {
+                children: CustomSVG ? /*#__PURE__*/_jsx(CustomSVG, {
+                  icon: "trash",
+                  className: "w-4 h-4"
+                }) : /*#__PURE__*/_jsx("svg", {
                   className: "w-4 h-4",
                   fill: "none",
                   stroke: "currentColor",
@@ -522,8 +726,7 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
             children: /*#__PURE__*/_jsx(TileContent, _objectSpread({
               tile: tile,
               setTiles: setTiles,
-              editMode: editMode,
-              fetchers: fetchers
+              editMode: editMode
             }, rest))
           })]
         }, tile.id);
@@ -531,11 +734,16 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
     });
   }
   var gridHeight = Math.max.apply(Math, _toConsumableArray(tiles.map(function (t) {
-    return t.y + t.h;
+    var _t$y;
+    return ((_t$y = t.y) !== null && _t$y !== void 0 ? _t$y : 0) + t.height;
   })).concat([12])) * (cellSize + GRID_GAP) + 120;
+  var themeClass = typeof theme === 'string' ? theme : 'light';
   return /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
-    className: "relative w-full grid-bg select-none p-8 transition-all duration-500 ".concat(editMode ? 'grid-active' : '', " ").concat(theme === 'dark' ? 'dark' : ''),
+    ref: function ref(node) {
+      if (typeof _ref1 === 'function') _ref1(node);else if (_ref1) _ref1.current = node;
+      containerRef.current = node;
+    },
+    className: "relative w-full grid-bg select-none p-8 transition-all duration-500 ".concat(editMode ? 'grid-active' : '', " ").concat(themeClass === 'dark' ? 'dark' : ''),
     onPointerMove: handlePointerMove,
     onPointerUp: handlePointerUp,
     onPointerLeave: handlePointerUp,
@@ -543,7 +751,19 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
       height: "".concat(gridHeight, "px"),
       minHeight: '100vh'
     },
-    children: [renderMaximizedView(), renderDeleteConfirmation(), tiles.map(function (tile) {
+    children: [renderMaximizedView(), renderDeleteConfirmation(), CustomAddTileModal ? /*#__PURE__*/_jsx(CustomAddTileModal, {
+      isOpen: showAddModal,
+      onClose: function onClose() {
+        return setShowAddModal(false);
+      },
+      onAdd: handleAddTile
+    }) : showAddModal && /*#__PURE__*/_jsx(AddTileModal, {
+      isOpen: showAddModal,
+      onClose: function onClose() {
+        return setShowAddModal(false);
+      },
+      onAdd: handleAddTile
+    }), tiles.map(function (tile) {
       return /*#__PURE__*/_jsx(DashboardTile, _objectSpread({
         tile: tile,
         cellSize: cellSize,
@@ -554,9 +774,9 @@ export var DraggableDashboard = function DraggableDashboard(_ref) {
         onMaximize: setMaximizedTileId,
         isDragging: activeTileId === tile.id && !!dragState,
         isResizing: activeTileId === tile.id && !!resizeState,
-        fetchers: fetchers,
         setTiles: setTiles
       }, rest), tile.id);
     })]
   });
-};
+});
+DraggableDashboard.displayName = 'DraggableDashboard';

package/dist/types.js CHANGED Viewed

@@ -1,20 +1 @@
-export var TileType = /*#__PURE__*/function (TileType) {
-  TileType["NUMBER"] = "NUMBER";
-  TileType["TABLE"] = "TABLE";
-  TileType["CHART"] = "CHART";
-  TileType["IMAGE"] = "IMAGE";
-  TileType["TEXT"] = "TEXT";
-  TileType["RECENT"] = "RECENT";
-  TileType["BOOKMARK"] = "BOOKMARK";
-  TileType["DOCS"] = "DOCS";
-  TileType["FOLDERS"] = "FOLDERS";
-  TileType["CUSTOM"] = "CUSTOM";
-  return TileType;
-}({});
-export var AlignmentMode = /*#__PURE__*/function (AlignmentMode) {
-  AlignmentMode["FREESTYLE"] = "FREESTYLE";
-  AlignmentMode["ROW"] = "ROW";
-  AlignmentMode["COLUMN"] = "COLUMN";
-  AlignmentMode["ALPHABETICAL"] = "ALPHABETICAL";
-  return AlignmentMode;
-}({});
+export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "draggable-dashboard-lete-pro",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "private": false,
   "description": "",
   "author": "Kumaran",