publ-echo-test 0.0.141 → 0.0.143

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.
@@ -1,5 +1,5 @@
1
- import React from "react";
2
- import { GridItemProps } from "./types";
3
- import { PropsWithChildren } from "../types";
1
+ import React from 'react';
2
+ import { GridItemProps } from './types';
3
+ import { PropsWithChildren } from '../types';
4
4
  declare const GridItem: ({ children, ...props }: PropsWithChildren<GridItemProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
5
5
  export default GridItem;
@@ -21,16 +21,16 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
- import React, { useEffect, useRef, useState } from "react";
25
- import { DraggableCore } from "../Draggable";
26
- import classNames from "../../external-lib/classnames";
27
- import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
28
- import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
29
- import { Resizable } from "../Resizable";
24
+ import React, { useEffect, useRef, useState } from 'react';
25
+ import { DraggableCore } from '../Draggable';
26
+ import classNames from '../../external-lib/classnames';
27
+ import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
28
+ import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/renderHelpers';
29
+ import { Resizable } from '../Resizable';
30
30
  var GridItem = function (_a) {
31
31
  var _b;
32
32
  var children = _a.children, props = __rest(_a, ["children"]);
33
- var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
33
+ var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize;
34
34
  var _l = useState(), resizing = _l[0], setResizing = _l[1];
35
35
  var _m = useState(), dragging = _m[0], setDragging = _m[1];
36
36
  var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -59,7 +59,9 @@ var GridItem = function (_a) {
59
59
  var isCharacterChanged = mutation.type === 'characterData';
60
60
  var keepWidth = true;
61
61
  var hasPaddingChanged = false;
62
- var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
62
+ var height = isCharacterChanged
63
+ ? mutation.target.parentNode.clientHeight
64
+ : mutation.target.clientHeight;
63
65
  var width = targetNode.clientWidth;
64
66
  if (!isCharacterChanged && mutation.target instanceof Element) {
65
67
  var styles = getComputedStyle(mutation.target);
@@ -72,7 +74,10 @@ var GridItem = function (_a) {
72
74
  var paddingR = parseFloat(styles.paddingRight);
73
75
  var paddingT = parseFloat(styles.paddingTop);
74
76
  var paddingB = parseFloat(styles.paddingBottom);
75
- if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
77
+ if (prevPaddingL !== paddingL ||
78
+ prevPaddingR !== paddingR ||
79
+ prevPaddingT !== paddingT ||
80
+ prevPaddingB !== paddingB) {
76
81
  hasPaddingChanged = true;
77
82
  keepWidth = false;
78
83
  }
@@ -93,7 +98,8 @@ var GridItem = function (_a) {
93
98
  if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
94
99
  return;
95
100
  }
96
- props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
101
+ props.onFitToContent &&
102
+ props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
97
103
  }
98
104
  };
99
105
  // MutationObserver 인스턴스 생성
@@ -158,7 +164,7 @@ var GridItem = function (_a) {
158
164
  style = setTopLeft(pos);
159
165
  if (usePercentages) {
160
166
  if (containerWidth == null) {
161
- throw new Error("Container width is missing!");
167
+ throw new Error('Container width is missing!');
162
168
  }
163
169
  style.left = perc(pos.left / containerWidth);
164
170
  style.width = perc(pos.width / containerWidth);
@@ -172,7 +178,7 @@ var GridItem = function (_a) {
172
178
  * @return {Element} Child wrapped in Draggable.
173
179
  */
174
180
  var mixinDraggable = function (child, isDraggable) {
175
- return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
181
+ return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: '.react-resizable-handle' + (cancel ? ',' + cancel : ''), scale: transformScale, nodeRef: elementRef, children: child }));
176
182
  };
177
183
  /**
178
184
  * Mix a Resizable instance into a child.
@@ -199,7 +205,7 @@ var GridItem = function (_a) {
199
205
  ];
200
206
  return (_jsx(Resizable, { draggableOpts: {
201
207
  disabled: !isResizable,
202
- }, className: isResizable ? undefined : "react-resizable-hide", width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
208
+ }, className: isResizable ? undefined : 'react-resizable-hide', width: position.width, height: position.height, top: position.top, left: position.left, resizeHandles: props.resizeHandles, onResizeStop: onResizeStop, onResizeStart: onResizeStart, onResize: onResize, minConstraints: minConstraints, maxConstraints: maxConstraints, transformScale: transformScale, handle: resizeHandle, isResizing: isResizing, autoResize: autoResize, colWidth: colWidth, margin: props.margin, children: child }));
203
209
  };
204
210
  /**
205
211
  * onDragStart event handler
@@ -234,7 +240,7 @@ var GridItem = function (_a) {
234
240
  var onDrag = function (e, _a) {
235
241
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
236
242
  if (!dragging) {
237
- throw new Error("onDrag called before onDragStart.");
243
+ throw new Error('onDrag called before onDragStart.');
238
244
  }
239
245
  setIsDragging(true);
240
246
  var top = dragging.top + deltaY;
@@ -267,7 +273,7 @@ var GridItem = function (_a) {
267
273
  var onDragStop = function (e, _a) {
268
274
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
269
275
  if (!dragging) {
270
- throw new Error("onDragEnd called before onDragStart.");
276
+ throw new Error('onDragEnd called before onDragStart.');
271
277
  }
272
278
  var w = props.w, h = props.h, i = props.i;
273
279
  var left = dragging.left, top = dragging.top;
@@ -283,7 +289,7 @@ var GridItem = function (_a) {
283
289
  var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
284
290
  var newX = x;
285
291
  var newY = y;
286
- if (handle === "nw") {
292
+ if (handle === 'nw') {
287
293
  // NOTE - nw left(X)와 top(Y) 둘다 변경
288
294
  if (width > prevW) {
289
295
  newX = x - (width - prevW);
@@ -298,7 +304,7 @@ var GridItem = function (_a) {
298
304
  newY = y + (prevH - height);
299
305
  }
300
306
  }
301
- if (handle === "n" || handle === "ne") {
307
+ if (handle === 'n' || handle === 'ne') {
302
308
  // NOTE - n, ne left(X) 고정 & top(Y) 변경
303
309
  if (height > prevH) {
304
310
  newY = y - (height - prevH);
@@ -307,7 +313,7 @@ var GridItem = function (_a) {
307
313
  newY = y + (prevH - height);
308
314
  }
309
315
  }
310
- if (handle === "w" || handle === "sw") {
316
+ if (handle === 'w' || handle === 'sw') {
311
317
  // NOTE - s, sw left(X) 변경 top(Y) 고정
312
318
  if (width > prevW) {
313
319
  newX = x - (width - prevW);
@@ -324,7 +330,7 @@ var GridItem = function (_a) {
324
330
  * @param {Object} callbackData an object with node and size information
325
331
  */
326
332
  var onResizeStart = function (e, callbackData) {
327
- onResizeHandler(e, callbackData, "onResizeStart");
333
+ onResizeHandler(e, callbackData, 'onResizeStart');
328
334
  };
329
335
  /**
330
336
  * onResize event handler
@@ -333,7 +339,7 @@ var GridItem = function (_a) {
333
339
  */
334
340
  var onResize = function (e, callbackData) {
335
341
  setIsResizing(true);
336
- onResizeHandler(e, callbackData, "onResize");
342
+ onResizeHandler(e, callbackData, 'onResize');
337
343
  };
338
344
  /**
339
345
  * onResizeStop event handler
@@ -342,7 +348,7 @@ var GridItem = function (_a) {
342
348
  */
343
349
  var onResizeStop = function (e, callbackData) {
344
350
  setIsResizing(false);
345
- onResizeHandler(e, callbackData, "onResizeStop");
351
+ onResizeHandler(e, callbackData, 'onResizeStop');
346
352
  };
347
353
  /**
348
354
  * Wrapper around drag events to provide more useful data.
@@ -376,7 +382,7 @@ var GridItem = function (_a) {
376
382
  // maxW = Math.min(maxW, cols - x);
377
383
  w = clamp(w, minW, maxW);
378
384
  h = clamp(h, tempMinH, maxH);
379
- setResizing(handlerName === "onResizeStop" ? undefined : size);
385
+ setResizing(handlerName === 'onResizeStop' ? undefined : size);
380
386
  var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
381
387
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
382
388
  };
@@ -389,14 +395,16 @@ var GridItem = function (_a) {
389
395
  key: i,
390
396
  ref: elementRef,
391
397
  'data-grid-id': i,
392
- className: classNames("react-grid-item", child.props.className, className, {
398
+ 'data-z-index': z,
399
+ 'data-z-order': zOrder,
400
+ className: classNames('react-grid-item', child.props.className, className, {
393
401
  static: props.static,
394
402
  isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
395
403
  resizing: Boolean(resizing),
396
- "react-draggable": isDraggable,
397
- "editable-grid-item": isResizable && isDraggable,
404
+ 'react-draggable': isDraggable,
405
+ 'editable-grid-item': isResizable && isDraggable,
398
406
  isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
399
- "react-draggable-dragging": Boolean(dragging),
407
+ 'react-draggable-dragging': Boolean(dragging),
400
408
  // dropping: Boolean(droppingPosition),
401
409
  cssTransforms: useCSSTransforms,
402
410
  }),
@@ -1,7 +1,8 @@
1
- import React from "react";
2
- import { GridItemProps } from "./types";
3
- import { PropsWithChildren } from "../types";
1
+ import React from 'react';
2
+ import { GridItemProps } from './types';
3
+ import { PropsWithChildren } from '../types';
4
4
  declare const GroupItem: ({ children, ...props }: PropsWithChildren<GridItemProps & {
5
5
  onContextGroup: (e: React.MouseEvent) => void;
6
+ zOrder: number;
6
7
  }>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
7
8
  export default GroupItem;
@@ -21,15 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
- import React, { useEffect, useRef, useState } from "react";
25
- import { DraggableCore } from "../Draggable";
26
- import classNames from "../../external-lib/classnames";
27
- import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from "./utils/calculateUtils";
28
- import { perc, setTopLeft, setTransform, } from "../GridLayoutEditor/utils/renderHelpers";
24
+ import React, { useEffect, useRef, useState } from 'react';
25
+ import { DraggableCore } from '../Draggable';
26
+ import classNames from '../../external-lib/classnames';
27
+ import { calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp, resolveRowHeight, } from './utils/calculateUtils';
28
+ import { perc, setTopLeft, setTransform, } from '../GridLayoutEditor/utils/renderHelpers';
29
29
  var GroupItem = function (_a) {
30
30
  var _b;
31
31
  var children = _a.children, props = __rest(_a, ["children"]);
32
- var resizeHandle = props.resizeHandle, cols = props.cols, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? "" : _d, _e = props.handle, handle = _e === void 0 ? "" : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, onContextGroup = props.onContextGroup;
32
+ var resizeHandle = props.resizeHandle, cols = props.cols, zOrder = props.zOrder, isDraggable = props.isDraggable, _c = props.transformScale, transformScale = _c === void 0 ? 1 : _c, isResizable = props.isResizable, useCSSTransforms = props.useCSSTransforms, className = props.className, _d = props.cancel, cancel = _d === void 0 ? '' : _d, _e = props.handle, handle = _e === void 0 ? '' : _e, x = props.x, y = props.y, z = props.z, w = props.w, h = props.h, _f = props.minH, minH = _f === void 0 ? 1 : _f, _g = props.minW, minW = _g === void 0 ? 1 : _g, _h = props.maxH, maxH = _h === void 0 ? Infinity : _h, _j = props.maxW, maxW = _j === void 0 ? Infinity : _j, i = props.i, _k = props.isHiddenVisibility, isHiddenVisibility = _k === void 0 ? false : _k, containerWidth = props.containerWidth, customColWidth = props.customColWidth, autoResize = props.autoResize, onContextGroup = props.onContextGroup;
33
33
  var _l = useState(), resizing = _l[0], setResizing = _l[1];
34
34
  var _m = useState(), dragging = _m[0], setDragging = _m[1];
35
35
  var _o = useState(), dragStart = _o[0], setDragStart = _o[1];
@@ -57,7 +57,9 @@ var GroupItem = function (_a) {
57
57
  var isCharacterChanged = mutation.type === 'characterData';
58
58
  var keepWidth = true;
59
59
  var hasPaddingChanged = false;
60
- var height = isCharacterChanged ? mutation.target.parentNode.clientHeight : mutation.target.clientHeight;
60
+ var height = isCharacterChanged
61
+ ? mutation.target.parentNode.clientHeight
62
+ : mutation.target.clientHeight;
61
63
  var width = targetNode.clientWidth;
62
64
  if (!isCharacterChanged && mutation.target instanceof Element) {
63
65
  var styles = getComputedStyle(mutation.target);
@@ -70,7 +72,10 @@ var GroupItem = function (_a) {
70
72
  var paddingR = parseFloat(styles.paddingRight);
71
73
  var paddingT = parseFloat(styles.paddingTop);
72
74
  var paddingB = parseFloat(styles.paddingBottom);
73
- if (prevPaddingL !== paddingL || prevPaddingR !== paddingR || prevPaddingT !== paddingT || prevPaddingB !== paddingB) {
75
+ if (prevPaddingL !== paddingL ||
76
+ prevPaddingR !== paddingR ||
77
+ prevPaddingT !== paddingT ||
78
+ prevPaddingB !== paddingB) {
74
79
  hasPaddingChanged = true;
75
80
  keepWidth = false;
76
81
  }
@@ -91,7 +96,8 @@ var GroupItem = function (_a) {
91
96
  if (prevH === h_1 && prevW === w_1 && newX === x && newY === y) {
92
97
  return;
93
98
  }
94
- props.onFitToContent && props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
99
+ props.onFitToContent &&
100
+ props.onFitToContent(i, w_1, h_1, newX, newY, { hasPaddingChanged: hasPaddingChanged });
95
101
  }
96
102
  };
97
103
  // MutationObserver 인스턴스 생성
@@ -156,7 +162,7 @@ var GroupItem = function (_a) {
156
162
  style = setTopLeft(pos);
157
163
  if (usePercentages) {
158
164
  if (containerWidth == null) {
159
- throw new Error("Container width is missing!");
165
+ throw new Error('Container width is missing!');
160
166
  }
161
167
  style.left = perc(pos.left / containerWidth);
162
168
  style.width = perc(pos.width / containerWidth);
@@ -170,7 +176,7 @@ var GroupItem = function (_a) {
170
176
  * @return {Element} Child wrapped in Draggable.
171
177
  */
172
178
  var mixinDraggable = function (child, isDraggable) {
173
- return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: ".react-resizable-handle" + (cancel ? "," + cancel : ""), scale: transformScale, nodeRef: elementRef, children: child }));
179
+ return (_jsx(DraggableCore, { disabled: !isDraggable, onStart: onDragStart, onDrag: onDrag, onStop: onDragStop, handle: handle, cancel: '.react-resizable-handle' + (cancel ? ',' + cancel : ''), scale: transformScale, nodeRef: elementRef, children: child }));
174
180
  };
175
181
  // /**
176
182
  // * Mix a Resizable instance into a child.
@@ -257,7 +263,7 @@ var GroupItem = function (_a) {
257
263
  var onDrag = function (e, _a) {
258
264
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
259
265
  if (!dragging) {
260
- throw new Error("onDrag called before onDragStart.");
266
+ throw new Error('onDrag called before onDragStart.');
261
267
  }
262
268
  setIsDragging(true);
263
269
  var top = dragging.top + deltaY;
@@ -291,7 +297,7 @@ var GroupItem = function (_a) {
291
297
  var onDragStop = function (e, _a) {
292
298
  var node = _a.node, deltaX = _a.deltaX, deltaY = _a.deltaY;
293
299
  if (!dragging) {
294
- throw new Error("onDragEnd called before onDragStart.");
300
+ throw new Error('onDragEnd called before onDragStart.');
295
301
  }
296
302
  var w = props.w, h = props.h, i = props.i;
297
303
  var left = dragging.left, top = dragging.top;
@@ -307,7 +313,7 @@ var GroupItem = function (_a) {
307
313
  var getResizableXYPosition = function (handle, width, height, prevW, prevH) {
308
314
  var newX = x;
309
315
  var newY = y;
310
- if (handle === "nw") {
316
+ if (handle === 'nw') {
311
317
  // NOTE - nw left(X)와 top(Y) 둘다 변경
312
318
  if (width > prevW) {
313
319
  newX = x - (width - prevW);
@@ -322,7 +328,7 @@ var GroupItem = function (_a) {
322
328
  newY = y + (prevH - height);
323
329
  }
324
330
  }
325
- if (handle === "n" || handle === "ne") {
331
+ if (handle === 'n' || handle === 'ne') {
326
332
  // NOTE - n, ne left(X) 고정 & top(Y) 변경
327
333
  if (height > prevH) {
328
334
  newY = y - (height - prevH);
@@ -331,7 +337,7 @@ var GroupItem = function (_a) {
331
337
  newY = y + (prevH - height);
332
338
  }
333
339
  }
334
- if (handle === "w" || handle === "sw") {
340
+ if (handle === 'w' || handle === 'sw') {
335
341
  // NOTE - s, sw left(X) 변경 top(Y) 고정
336
342
  if (width > prevW) {
337
343
  newX = x - (width - prevW);
@@ -348,7 +354,7 @@ var GroupItem = function (_a) {
348
354
  * @param {Object} callbackData an object with node and size information
349
355
  */
350
356
  var onResizeStart = function (e, callbackData) {
351
- onResizeHandler(e, callbackData, "onResizeStart");
357
+ onResizeHandler(e, callbackData, 'onResizeStart');
352
358
  };
353
359
  /**
354
360
  * onResize event handler
@@ -357,7 +363,7 @@ var GroupItem = function (_a) {
357
363
  */
358
364
  var onResize = function (e, callbackData) {
359
365
  setIsResizing(true);
360
- onResizeHandler(e, callbackData, "onResize");
366
+ onResizeHandler(e, callbackData, 'onResize');
361
367
  };
362
368
  /**
363
369
  * onResizeStop event handler
@@ -366,7 +372,7 @@ var GroupItem = function (_a) {
366
372
  */
367
373
  var onResizeStop = function (e, callbackData) {
368
374
  setIsResizing(false);
369
- onResizeHandler(e, callbackData, "onResizeStop");
375
+ onResizeHandler(e, callbackData, 'onResizeStop');
370
376
  };
371
377
  /**
372
378
  * Wrapper around drag events to provide more useful data.
@@ -400,7 +406,7 @@ var GroupItem = function (_a) {
400
406
  // maxW = Math.min(maxW, cols - x);
401
407
  w = clamp(w, minW, maxW);
402
408
  h = clamp(h, tempMinH, maxH);
403
- setResizing(handlerName === "onResizeStop" ? undefined : size);
409
+ setResizing(handlerName === 'onResizeStop' ? undefined : size);
404
410
  var _d = getResizableXYPosition(handle, w, h, prevW, prevH), newX = _d.newX, newY = _d.newY;
405
411
  handler(i, w, h, { e: e, node: node, size: size }, newX, newY);
406
412
  };
@@ -410,13 +416,19 @@ var GroupItem = function (_a) {
410
416
  key: i,
411
417
  ref: elementRef,
412
418
  'data-group-block-id': i,
413
- className: classNames("react-group-block", child.props.className, className, {
419
+ 'data-z-index': z,
420
+ 'data-z-order': zOrder,
421
+ className: classNames('react-group-block', child.props.className, className, {
414
422
  static: props.static,
415
- isResizing: Boolean(resizing) && Boolean(isResizing) && Boolean(isHiddenVisibility),
423
+ isResizing: Boolean(resizing) &&
424
+ Boolean(isResizing) &&
425
+ Boolean(isHiddenVisibility),
416
426
  resizing: Boolean(resizing),
417
- "react-draggable": isDraggable,
418
- isDragging: Boolean(isDragging) && Boolean(dragging) && Boolean(isHiddenVisibility),
419
- "react-draggable-dragging": Boolean(dragging),
427
+ 'react-draggable': isDraggable,
428
+ isDragging: Boolean(isDragging) &&
429
+ Boolean(dragging) &&
430
+ Boolean(isHiddenVisibility),
431
+ 'react-draggable-dragging': Boolean(dragging),
420
432
  // dropping: Boolean(droppingPosition),
421
433
  cssTransforms: useCSSTransforms,
422
434
  }),
@@ -1,6 +1,6 @@
1
- import { DragEvent, SyntheticEvent } from "react";
2
- import { RowHeight } from "../GridLayoutEditor/types";
3
- import { ResizeHandleAxis, ResizeHandleType } from "../Resizable/types";
1
+ import { DragEvent, SyntheticEvent } from 'react';
2
+ import { RowHeight } from '../GridLayoutEditor/types';
3
+ import { ResizeHandleAxis, ResizeHandleType } from '../Resizable/types';
4
4
  export type PartialPosition = {
5
5
  top: number;
6
6
  left: number;
@@ -81,6 +81,7 @@ export type GridItemProps = {
81
81
  isHiddenVisibility?: boolean;
82
82
  customColWidth?: number;
83
83
  autoResize: boolean;
84
+ zOrder?: number;
84
85
  };
85
86
  export type GridItemDefaultProps = {
86
87
  className: string;
@@ -106,5 +107,5 @@ export type ReactDraggableCallbackData = {
106
107
  lastX: number;
107
108
  lastY: number;
108
109
  };
109
- export type ResizeHandlerNameType = "onResizeStart" | "onResize" | "onResizeStop";
110
+ export type ResizeHandlerNameType = 'onResizeStart' | 'onResize' | 'onResizeStop';
110
111
  export {};
@@ -1,6 +1,6 @@
1
- import * as React from "react";
2
- import type { ReactElement } from "react";
3
- import { PropsWithChildren } from "../types";
4
- import { ReactGridLayoutProps } from "./types";
1
+ import * as React from 'react';
2
+ import type { ReactElement } from 'react';
3
+ import { PropsWithChildren } from '../types';
4
+ import { ReactGridLayoutProps } from './types';
5
5
  declare const ReactGridLayout: ({ children, ...props }: PropsWithChildren<ReactGridLayoutProps>) => React.ReactElement;
6
6
  export default ReactGridLayout;
@@ -30,26 +30,26 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
30
30
  return to.concat(ar || Array.prototype.slice.call(from));
31
31
  };
32
32
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
33
- import * as React from "react";
34
- import { useState, useRef, useLayoutEffect } from "react";
35
- import classNames from "../../external-lib/classnames";
36
- import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from "./utils/renderHelpers";
37
- import { calcGridColWidth, calcXY, resolveRowHeight, } from "../GridItem/utils/calculateUtils";
38
- import GridItem from "../GridItem/GridItem";
39
- import isEqual from "../../external-lib/lodash.isEqual";
40
- import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, formatCbIdToBlockId, getBlockSpecificType, zIndexMap } from "./group";
41
- import GroupItem from "../GridItem/GroupItem";
42
- import OutsideClickHandler from "../GridItem/OutsideClickHandler";
43
- var layoutClassName = "react-grid-layout";
33
+ import * as React from 'react';
34
+ import { useState, useRef, useLayoutEffect } from 'react';
35
+ import classNames from '../../external-lib/classnames';
36
+ import { bottom, cloneLayoutItem, compact, getAllCollisions, getBoundingArea, getLayoutItem, moveElement, noop, synchronizeLayoutWithChildren, withLayoutItem, } from './utils/renderHelpers';
37
+ import { calcGridColWidth, calcXY, resolveRowHeight, } from '../GridItem/utils/calculateUtils';
38
+ import GridItem from '../GridItem/GridItem';
39
+ import isEqual from '../../external-lib/lodash.isEqual';
40
+ import { findAllChildrenCbIds, findBlockByBlockId, findDirectChildrenBlockIds, findDirectChildrenCbIds, findGroupBlocks, formatCbIdToBlockId, getBlockSpecificType, zIndexMap, } from './group';
41
+ import GroupItem from '../GridItem/GroupItem';
42
+ import OutsideClickHandler from '../GridItem/OutsideClickHandler';
43
+ var layoutClassName = 'react-grid-layout';
44
44
  var ReactGridLayout = function (_a) {
45
45
  var children = _a.children, props = __rest(_a, ["children"]);
46
- var _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? "" : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? "" : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? "" : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? "vertical" : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
47
- i: "__dropping-elem__",
46
+ var _b = props.autoSize, autoSize = _b === void 0 ? true : _b, _c = props.cols, cols = _c === void 0 ? 12 : _c, _d = props.className, className = _d === void 0 ? '' : _d, _e = props.style, style = _e === void 0 ? {} : _e, _f = props.draggableHandle, draggableHandle = _f === void 0 ? '' : _f, _g = props.draggableCancel, draggableCancel = _g === void 0 ? '' : _g, _h = props.containerPadding, containerPadding = _h === void 0 ? undefined : _h, _j = props.rowHeight, rowHeight = _j === void 0 ? 150 : _j, _k = props.maxRows, maxRows = _k === void 0 ? Infinity : _k, _l = props.margin, margin = _l === void 0 ? [10, 10] : _l, _m = props.isBounded, isBounded = _m === void 0 ? false : _m, _o = props.isDraggable, isDraggable = _o === void 0 ? true : _o, _p = props.isResizable, isResizable = _p === void 0 ? true : _p, _q = props.allowOverlap, allowOverlap = _q === void 0 ? false : _q, _r = props.isDroppable, isDroppable = _r === void 0 ? false : _r, _s = props.useCSSTransforms, useCSSTransforms = _s === void 0 ? true : _s, _t = props.transformScale, transformScale = _t === void 0 ? 1 : _t, _u = props.compactType, compactType = _u === void 0 ? 'vertical' : _u, _v = props.preventCollision, preventCollision = _v === void 0 ? false : _v, _w = props.droppingItem, droppingItem = _w === void 0 ? {
47
+ i: '__dropping-elem__',
48
48
  h: 1,
49
49
  w: 1,
50
50
  } : _w, // TODO fix
51
51
  _x = props.resizeHandles, // TODO fix
52
- resizeHandles = _x === void 0 ? ["se"] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? 'ROOT' : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? 'ROOT' : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
52
+ resizeHandles = _x === void 0 ? ['se'] : _x, _y = props.width, width = _y === void 0 ? 0 : _y, resizeHandle = props.resizeHandle, _z = props.isHiddenVisibility, isHiddenVisibility = _z === void 0 ? true : _z, innerRef = props.innerRef, minNbRow = props.minNbRow, customColWidth = props.customColWidth, blockStructure = props.blockStructure, onDoubleClickGroup = props.onDoubleClickGroup, _0 = props.editingGroupBlock, editingGroupBlock = _0 === void 0 ? 'ROOT' : _0, _1 = props.selectedGroupBlock, selectedGroupBlock = _1 === void 0 ? 'ROOT' : _1, onClickGroup = props.onClickGroup, bulkIds = props.bulkIds, onDoubleClickOutsideGroup = props.onDoubleClickOutsideGroup;
53
53
  var device = cols === 24 ? 'DESKTOP' : 'MOBILE';
54
54
  var _2 = useState(), activeDrag = _2[0], setActiveDrag = _2[1];
55
55
  var _3 = useState(), oldDragItem = _3[0], setOldDragItem = _3[1];
@@ -59,8 +59,14 @@ var ReactGridLayout = function (_a) {
59
59
  var _7 = useState(), droppingPosition = _7[0], setDroppingPosition = _7[1];
60
60
  var _8 = useState(false), isMounted = _8[0], setIsMounted = _8[1];
61
61
  var editorMode = props.isDraggable && props.isResizable ? 'EDIT' : 'VIEW';
62
- var editableBlockIds = blockStructure ? findDirectChildrenCbIds(blockStructure, editingGroupBlock) : [];
63
- var editingGroupAllChildren = (blockStructure && editingGroupBlock) ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) { return i.toString(); }) : [];
62
+ var editableBlockIds = blockStructure
63
+ ? findDirectChildrenCbIds(blockStructure, editingGroupBlock)
64
+ : [];
65
+ var editingGroupAllChildren = blockStructure && editingGroupBlock
66
+ ? findAllChildrenCbIds(blockStructure, editingGroupBlock).map(function (i) {
67
+ return i.toString();
68
+ })
69
+ : [];
64
70
  var _9 = useState([]), oldGroupChildren = _9[0], setOldGroupChildren = _9[1];
65
71
  var _10 = useState(function () {
66
72
  return synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap);
@@ -72,12 +78,12 @@ var ReactGridLayout = function (_a) {
72
78
  }, []);
73
79
  useLayoutEffect(function () {
74
80
  if (props.layout && !Array.isArray(props.layout)) {
75
- console.error("Expecting layout to be an Array but got: ", props.layout);
81
+ console.error('Expecting layout to be an Array but got: ', props.layout);
76
82
  }
77
83
  setLayout(synchronizeLayoutWithChildren(props.layout || [], children, cols, compactType, allowOverlap));
78
84
  }, [props.layout]);
79
85
  useLayoutEffect(function () {
80
- var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || "vertical", props.allowOverlap);
86
+ var newLayout = synchronizeLayoutWithChildren(props.layout || layout, children, props.cols || cols, props.compactType || 'vertical', props.allowOverlap);
81
87
  setLayout(newLayout);
82
88
  }, [children]);
83
89
  var getPositionParams = function () {
@@ -103,11 +109,10 @@ var ReactGridLayout = function (_a) {
103
109
  var containerPaddingY = containerPadding
104
110
  ? containerPadding[1]
105
111
  : margin[1];
106
- return (biggerNbRow *
107
- resolveRowHeight(rowHeight, colWidth) +
112
+ return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
108
113
  (biggerNbRow - 1) * margin[1] +
109
114
  containerPaddingY * 2 +
110
- "px");
115
+ 'px');
111
116
  };
112
117
  var getBackgroundHeight = function () {
113
118
  if (!autoSize)
@@ -117,17 +122,16 @@ var ReactGridLayout = function (_a) {
117
122
  var containerPaddingY = containerPadding
118
123
  ? containerPadding[1]
119
124
  : margin[1];
120
- return (biggerNbRow *
121
- resolveRowHeight(rowHeight, colWidth) +
125
+ return (biggerNbRow * resolveRowHeight(rowHeight, colWidth) +
122
126
  (biggerNbRow - 1) * margin[1] +
123
127
  containerPaddingY * 2 -
124
128
  2 * margin[1] +
125
- "px");
129
+ 'px');
126
130
  };
127
131
  var getBackgroundWidth = function () {
128
132
  if (!autoSize)
129
133
  return;
130
- return width - margin[0] * 2 + "px";
134
+ return width - margin[0] * 2 + 'px';
131
135
  };
132
136
  /**
133
137
  * When dragging starts
@@ -149,7 +153,9 @@ var ReactGridLayout = function (_a) {
149
153
  if (!blockStructure) {
150
154
  return;
151
155
  }
152
- var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) { return i.toString(); });
156
+ var childrenIds = findAllChildrenCbIds(blockStructure, i).map(function (i) {
157
+ return i.toString();
158
+ });
153
159
  var children_1 = childrenIds.map(function (id) {
154
160
  var item = getLayoutItem(layout, id);
155
161
  return cloneLayoutItem(item);
@@ -221,17 +227,19 @@ var ReactGridLayout = function (_a) {
221
227
  i: i,
222
228
  };
223
229
  var isUserAction = true;
224
- var newLayout = isGroup ? layout : moveElement({
225
- layout: layout,
226
- l: l,
227
- x: x,
228
- y: y,
229
- isUserAction: isUserAction,
230
- preventCollision: preventCollision,
231
- compactType: compactType,
232
- cols: cols,
233
- allowOverlap: allowOverlap,
234
- });
230
+ var newLayout = isGroup
231
+ ? layout
232
+ : moveElement({
233
+ layout: layout,
234
+ l: l,
235
+ x: x,
236
+ y: y,
237
+ isUserAction: isUserAction,
238
+ preventCollision: preventCollision,
239
+ compactType: compactType,
240
+ cols: cols,
241
+ allowOverlap: allowOverlap,
242
+ });
235
243
  if (isGroup) {
236
244
  oldGroupChildren.forEach(function (item) {
237
245
  var layoutItem = getLayoutItem(layout, item.i);
@@ -274,7 +282,6 @@ var ReactGridLayout = function (_a) {
274
282
  if (!activeDrag || !oldDragItem) {
275
283
  return;
276
284
  }
277
- ;
278
285
  var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
279
286
  if (!l)
280
287
  return;
@@ -291,7 +298,7 @@ var ReactGridLayout = function (_a) {
291
298
  compactType: compactType,
292
299
  cols: cols,
293
300
  allowOverlap: allowOverlap,
294
- overrideZ: oldDragItem.z
301
+ overrideZ: oldDragItem.z,
295
302
  });
296
303
  props.onDragStop &&
297
304
  props.onDragStop({
@@ -318,7 +325,6 @@ var ReactGridLayout = function (_a) {
318
325
  if (!activeDrag || !oldDragItem) {
319
326
  return;
320
327
  }
321
- ;
322
328
  var l = (_b = getLayoutItem(layout, i)) !== null && _b !== void 0 ? _b : { i: i, x: x, y: y, w: 10, h: 10 };
323
329
  if (!l)
324
330
  return;
@@ -335,7 +341,7 @@ var ReactGridLayout = function (_a) {
335
341
  compactType: compactType,
336
342
  cols: cols,
337
343
  allowOverlap: allowOverlap,
338
- overrideZ: oldDragItem.z
344
+ overrideZ: oldDragItem.z,
339
345
  });
340
346
  var updatedItems = oldGroupChildren.map(function (item) {
341
347
  var layoutItem = getLayoutItem(layout, item.i);
@@ -353,7 +359,7 @@ var ReactGridLayout = function (_a) {
353
359
  placeholder: undefined,
354
360
  e: e,
355
361
  node: node,
356
- updatedItems: updatedItems
362
+ updatedItems: updatedItems,
357
363
  });
358
364
  var newLayout = allowOverlap
359
365
  ? movedLayout
@@ -494,7 +500,7 @@ var ReactGridLayout = function (_a) {
494
500
  layout: newLayout,
495
501
  prev: oldResizeItem,
496
502
  item: l,
497
- hasPaddingChanged: hasPaddingChanged
503
+ hasPaddingChanged: hasPaddingChanged,
498
504
  });
499
505
  setLayout(allowOverlap ? newLayout : compact(newLayout, compactType, cols));
500
506
  };
@@ -514,10 +520,11 @@ var ReactGridLayout = function (_a) {
514
520
  // LINK: https://legacy.reactjs.org/docs/react-api.html
515
521
  var items = React.Children.toArray(children);
516
522
  var item = items.find(function (child) {
517
- var originalKey = String(child.key).split(".$");
523
+ var originalKey = String(child.key).split('.$');
518
524
  return originalKey[1] === l.i;
519
525
  });
520
- var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag.i))));
526
+ var isInBulk = blockStructure &&
527
+ (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(activeDrag.i))));
521
528
  if (!item) {
522
529
  return null;
523
530
  }
@@ -536,11 +543,10 @@ var ReactGridLayout = function (_a) {
536
543
  if (!l) {
537
544
  return;
538
545
  }
539
- ;
540
- var draggable = typeof l.isDraggable === "boolean"
546
+ var draggable = typeof l.isDraggable === 'boolean'
541
547
  ? l.isDraggable
542
548
  : !l.static && isDraggable;
543
- var resizable = typeof l.isResizable === "boolean"
549
+ var resizable = typeof l.isResizable === 'boolean'
544
550
  ? l.isResizable
545
551
  : !l.static && isResizable;
546
552
  var resizeHandlesOptions = l.resizeHandles || resizeHandles;
@@ -549,7 +555,9 @@ var ReactGridLayout = function (_a) {
549
555
  var z = l.z || 0;
550
556
  var isInBulk = blockStructure && (bulkIds === null || bulkIds === void 0 ? void 0 : bulkIds.includes(formatCbIdToBlockId(Number(l.i))));
551
557
  var isRoot = editingGroupBlock === 'ROOT';
552
- var block = blockStructure ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i))) : undefined;
558
+ var block = blockStructure
559
+ ? findBlockByBlockId(blockStructure, formatCbIdToBlockId(Number(l.i)))
560
+ : undefined;
553
561
  if (!block) {
554
562
  return _jsx(_Fragment, { children: "NO-BLOCK-FOUND" });
555
563
  }
@@ -575,8 +583,8 @@ var ReactGridLayout = function (_a) {
575
583
  var outsideOfEditingGroup = !editingGroupAllChildren.includes(l.i);
576
584
  var zIndex = editorMode === 'EDIT' ? editorZIndex : z;
577
585
  return (_jsx(GridItem, { className: classNames({
578
- 'editable-grid-item': (!isRoot && editable),
579
- 'not-editable-grid-item': (!isRoot && !editable),
586
+ 'editable-grid-item': !isRoot && editable,
587
+ 'not-editable-grid-item': !isRoot && !editable,
580
588
  'bulk-child-item': isInBulk,
581
589
  'outside-of-editing-group': outsideOfEditingGroup,
582
590
  }), z: zIndex, isDraggable: editable && !isInBulk, isResizable: editable && !isInBulk, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isBounded: bounded, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: l.w, h: l.h, x: l.x, y: l.y, i: l.i, minH: l.minH, minW: l.minW, maxH: l.maxH, maxW: l.maxW, static: l.static, droppingPosition: isDroppingItem ? droppingPosition : undefined, resizeHandles: resizeHandlesOptions, resizeHandle: resizeHandle, isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: !!l.autoResize, children: child }, l.i));
@@ -670,7 +678,8 @@ var ReactGridLayout = function (_a) {
670
678
  if (isBulk) {
671
679
  return zIndexMap.EDITING_GROUP_CHILD + zOrder;
672
680
  }
673
- if (isInBulk) { // 위와 같지만 이것은 not-editable이긴 함.
681
+ if (isInBulk) {
682
+ // 위와 같지만 이것은 not-editable이긴 함.
674
683
  // const bulkBlock = findBlockByBlockId(blockStructure, 'BULK');
675
684
  // const bulkZOrder = bulkBlock?.[device === 'DESKTOP' ? 'zOrderDesktopInternal' : 'zOrderMobileInternal'] ?? 0;
676
685
  return zIndexMap.EDITING_GROUP_CHILD + zOrder;
@@ -694,14 +703,15 @@ var ReactGridLayout = function (_a) {
694
703
  onDoubleClickGroup && onDoubleClickGroup(e, block.blockId, type);
695
704
  };
696
705
  var handleClickContextGroup = function (e) {
697
- (props === null || props === void 0 ? void 0 : props.onContextGroup) && props.onContextGroup(e, block.blockId, isEditingGroup);
706
+ (props === null || props === void 0 ? void 0 : props.onContextGroup) &&
707
+ props.onContextGroup(e, block.blockId, isEditingGroup);
698
708
  };
699
709
  return (_jsx(OutsideClickHandler, { onOutsideClick: onDoubleClickOutsideGroup, children: _jsx(GroupItem, { className: classNames({
700
710
  'bulk-child-item': isInBulk,
701
711
  'grid-bulk-block': block.blockId === 'BULK',
702
- 'editing': editingGroupBlock === block.blockId,
703
- 'selected': selectedGroupBlock === block.blockId
704
- }), z: zIndex, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId,
712
+ editing: editingGroupBlock === block.blockId,
713
+ selected: selectedGroupBlock === block.blockId,
714
+ }), z: zIndex, zOrder: zOrder, containerWidth: width, cols: cols, margin: margin, containerPadding: containerPadding || margin, maxRows: maxRows, rowHeight: rowHeight, cancel: draggableCancel, handle: draggableHandle, onDragStop: onDragStopGroupHandler, onDragStart: onDragStartHandler, onDrag: onDragHandler, onResizeStart: onResizeStartHandler, onResize: onResizeHandler, onResizeStop: onResizeStopHandler, onFitToContent: onFitToContentHandler, isDraggable: !viewOnly && !isEditingGroup && !isInBulk, isResizable: !viewOnly && !isEditingGroup && !isInBulk, isBounded: false, useCSSTransforms: useCSSTransforms && isMounted, usePercentages: !isMounted, transformScale: transformScale, w: groupItem.w, h: groupItem.h, x: groupItem.x, y: groupItem.y, i: block.blockId,
705
715
  // minH={l.minH}
706
716
  // minW={l.minW}
707
717
  // maxH={l.maxH}
@@ -712,12 +722,14 @@ var ReactGridLayout = function (_a) {
712
722
  // resizeHandle={resizeHandle}
713
723
  isHiddenVisibility: isHiddenVisibility, customColWidth: colWidth, autoResize: false, onContextGroup: handleClickContextGroup, children: _jsx("div", { onClick: handleClick, onDoubleClick: handleDoubleClick }) }, block.blockId) }));
714
724
  };
715
- var currentGroupBlocks = blockStructure ? findGroupBlocks(blockStructure, editingGroupBlock) : [];
716
- return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: "grid-guide-line-center" }), activeDrag && (_jsx("div", { className: "grid-placeholder", style: {
717
- marginTop: margin[1] + "px",
718
- marginBottom: margin[1] + "px",
719
- marginLeft: margin[0] + "px",
720
- marginRight: margin[0] + "px",
721
- }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: "grid-pattern", height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: "userSpaceOnUse", children: _jsx("rect", { x: 0.5, y: 0.5, className: "grid-pattern-rect", height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: "100%", fill: "url(#grid-pattern)" })] }) }))] }));
725
+ var currentGroupBlocks = blockStructure
726
+ ? findGroupBlocks(blockStructure, editingGroupBlock)
727
+ : [];
728
+ return (_jsxs("div", { ref: innerRef, className: mergedClassName, style: mergedStyle, onDrop: isDroppable ? onDropHandler : noop, onDragLeave: isDroppable ? onDragLeaveHandler : noop, onDragEnter: isDroppable ? onDragEnterHandler : noop, onDragOver: isDroppable ? onDragOverHandler : noop, children: [currentGroupBlocks.map(function (each) { return processGroup(each); }), React.Children.map(children, function (child) { return processGridItem(child); }), placeholder(), activeDrag && _jsx("div", { className: 'grid-guide-line-center' }), activeDrag && (_jsx("div", { className: 'grid-placeholder', style: {
729
+ marginTop: margin[1] + 'px',
730
+ marginBottom: margin[1] + 'px',
731
+ marginLeft: margin[0] + 'px',
732
+ marginRight: margin[0] + 'px',
733
+ }, children: _jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: getBackgroundWidth(), height: getBackgroundHeight(), children: [_jsx("defs", { children: _jsx("pattern", { id: 'grid-pattern', height: rowHeight + margin[1], width: colWidth + margin[0], patternUnits: 'userSpaceOnUse', children: _jsx("rect", { x: 0.5, y: 0.5, className: 'grid-pattern-rect', height: rowHeight, width: colWidth }) }) }), _jsx("rect", { width: width, height: '100%', fill: 'url(#grid-pattern)' })] }) }))] }));
722
734
  };
723
735
  export default ReactGridLayout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "publ-echo-test",
3
- "version": "0.0.141",
3
+ "version": "0.0.143",
4
4
  "private": false,
5
5
  "main": "dist/lib/index.js",
6
6
  "types": "dist/lib/index.d.js",