react-grid-layout 1.4.3 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.4.4 (Nov 28, 2023)
+
+### Bugfixes
+
+- Fix position logic when draggable item is dragged into the grid. We no longer use the deprecated / non-standard `e.nativeEvent.layer{X,Y}` properties. [#1915](https://github.com/react-grid-layout/react-grid-layout/pull/1915)
+- Fix drag values according to containerPadding. Previously, when dragging an item, the intuited position within the grid was *not* modified by `containerPadding`, causing it to off by that value. On most grids, this is only set to `[10, 10]`, so this may not have been noticeable, but for higher values it was very obvious. Thanks @hywlss9. [#1323](https://github.com/react-grid-layout/react-grid-layout/pull/1323)
+- Various lint/dependency fixes.
+
 ## 1.4.3 (Nov 8, 2023)
 
 ### Bugfixes

package/README.md

@@ -58,6 +58,7 @@ RGL is React-only and does not require jQuery.
 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
 1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
 1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html)
+1. [Single Row Horizontal](https://react-grid-layout.github.io/react-grid-layout/examples/21-horizontal.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -78,6 +79,7 @@ RGL is React-only and does not require jQuery.
 - [Ubidots](https://help.ubidots.com/en/articles/2400308-create-dashboards-and-widgets)
 - [Statsout](https://statsout.com/)
 - [Datto RMM](https://www.datto.com/uk/products/rmm/)
+- [SquaredUp](https://squaredup.com/)
 
 _Know of others? Create a PR to let me know!_
 
@@ -108,7 +110,7 @@ _Know of others? Create a PR to let me know!_
 
 ## Installation
 
-Install the React-Grid-Layout [package](https://www.npmjs.org/package/react-grid-layout) package using [npm](https://www.npmjs.com/):
+Install the React-Grid-Layout [package](https://www.npmjs.org/package/react-grid-layout) using [npm](https://www.npmjs.com/):
 
 ```bash
 npm install react-grid-layout
@@ -297,7 +299,7 @@ draggableCancel: ?string = '',
 draggableHandle: ?string = '',
 
 // Compaction type.
-compactType: ?('vertical' | 'horizontal') = 'vertical';
+compactType: ?('vertical' | 'horizontal' | null) = 'vertical';
 
 // Layout is an array of object with the format:
 // {x: number, y: number, w: number, h: number}

package/build/GridItem.js

@@ -199,13 +199,14 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
         if (offsetParent) {
           const {
             margin,
-            rowHeight
+            rowHeight,
+            containerPadding
           } = this.props;
           const bottomBoundary = offsetParent.clientHeight - (0, _calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
-          top = (0, _calculateUtils.clamp)(top, 0, bottomBoundary);
+          top = (0, _calculateUtils.clamp)(top - containerPadding[1], 0, bottomBoundary);
           const colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
           const rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
-          left = (0, _calculateUtils.clamp)(left, 0, rightBoundary);
+          left = (0, _calculateUtils.clamp)(left - containerPadding[0], 0, rightBoundary);
         }
       }
       const newPosition /*: PartialPosition*/ = {
@@ -217,10 +218,13 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       });
 
       // Call callback with this data
+      const {
+        containerPadding
+      } = this.props;
       const {
         x,
         y
-      } = (0, _calculateUtils.calcXY)(positionParams, top, left, w, h);
+      } = (0, _calculateUtils.calcXY)(positionParams, top - containerPadding[1], left - containerPadding[0], w, h);
       return onDrag.call(this, i, x, y, {
         e,
         node,
@@ -246,7 +250,8 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       const {
         w,
         h,
-        i
+        i,
+        containerPadding
       } = this.props;
       const {
         left,
@@ -262,7 +267,7 @@ class GridItem extends _react.default.Component /*:: <Props, State>*/{
       const {
         x,
         y
-      } = (0, _calculateUtils.calcXY)(this.getPositionParams(), top, left, w, h);
+      } = (0, _calculateUtils.calcXY)(this.getPositionParams(), top - containerPadding[1], left - containerPadding[0], w, h);
       return onDragStop.call(this, i, x, y, {
         e,
         node,

package/build/ReactGridLayout.js

@@ -12,8 +12,8 @@ var _calculateUtils = require("./calculateUtils");
 var _GridItem = _interopRequireDefault(require("./GridItem"));
 var _ReactGridLayoutPropTypes = _interopRequireDefault(require("./ReactGridLayoutPropTypes"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
@@ -233,7 +233,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       const {
         oldResizeItem
       } = this.state;
-      let {
+      const {
         layout
       } = this.state;
       const {
@@ -349,7 +349,6 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
     // Called while dragging an element. Part of browser native drag/drop API.
     // Native event target might be the layout itself, or an element within the layout.
     _defineProperty(this, "onDragOver", e => {
-      var _e$nativeEvent$target;
       e.preventDefault(); // Prevent any browser native action
       e.stopPropagation();
 
@@ -358,7 +357,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       // FIXME remove this hack
       if (isFirefox &&
       // $FlowIgnore can't figure this out
-      !((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
+      !e.nativeEvent.target?.classList.contains(layoutClassName)) {
         return false;
       }
       const {
@@ -374,7 +373,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       } = this.props;
       // Allow user to customize the dropping item or short-circuit the drop based on the results
       // of the `onDragOver(e: Event)` callback.
-      const onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
+      const onDragOverResult = onDropDragOver?.(e);
       if (onDragOverResult === false) {
         if (this.state.droppingDOMNode) {
           this.removeDroppingPlaceholder();
@@ -388,11 +387,13 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       const {
         layout
       } = this.state;
-      // This is relative to the DOM element that this event fired for.
-      const {
-        layerX,
-        layerY
-      } = e.nativeEvent;
+
+      // $FlowIgnore missing def
+      const gridRect = e.currentTarget.getBoundingClientRect(); // The grid's position in the viewport
+
+      // Calculate the mouse position relative to the grid
+      const layerX = e.clientX - gridRect.left;
+      const layerY = e.clientY - gridRect.top;
       const droppingPosition = {
         left: layerX / transformScale,
         top: layerY / transformScale,
@@ -584,7 +585,7 @@ class ReactGridLayout extends React.Component /*:: <Props, State>*/{
       x: activeDrag.x,
       y: activeDrag.y,
       i: activeDrag.i,
-      className: "react-grid-placeholder ".concat(this.state.resizing ? "placeholder-resizing" : ""),
+      className: `react-grid-placeholder ${this.state.resizing ? "placeholder-resizing" : ""}`,
       containerWidth: width,
       cols: cols,
       margin: margin,

package/build/ReactGridLayoutPropTypes.js

@@ -40,10 +40,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
-const resizeHandleAxesType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"]));
+const resizeHandleAxesType /*: ReactPropsChainableTypeChecker*/ = exports.resizeHandleAxesType = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"]));
 // Custom component for resize handles
-exports.resizeHandleAxesType = resizeHandleAxesType;
-const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
+const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = exports.resizeHandleType = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
 /*:: export type Props = {|
   className: string,
   style: Object,
@@ -91,8 +90,7 @@ const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default
     width: number
   }
 >;*/
-exports.resizeHandleType = resizeHandleType;
-var _default = {
+var _default = exports.default = {
   //
   // Basic props
   //
@@ -200,7 +198,7 @@ var _default = {
     // Check children keys for duplicates. Throw if found.
     const keys = {};
     _react.default.Children.forEach(children, function (child) {
-      if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+      if (child?.key == null) return;
       if (keys[child.key]) {
         throw new Error('Duplicate child key "' + child.key + '" found! This will cause problems in ReactGridLayout.');
       }
@@ -209,5 +207,4 @@ var _default = {
   },
   // Optional ref for getting a reference for the wrapping div.
   innerRef: _propTypes.default.any
-};
-exports.default = _default;
+};

package/build/ResponsiveReactGridLayout.js

@@ -11,8 +11,8 @@ var _utils = require("./utils");
 var _responsiveUtils = require("./responsiveUtils");
 var _ReactGridLayout = _interopRequireDefault(require("./ReactGridLayout"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }

package/build/components/WidthProvider.js

@@ -9,8 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
 var _clsx = _interopRequireDefault(require("clsx"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }

package/build/utils.js

@@ -196,7 +196,7 @@ function cloneLayoutItem(layoutItem /*: LayoutItem*/) /*: LayoutItem*/{
  * This will catch differences in keys, order, and length.
  */
 function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean*/{
-  return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.key), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.props["data-grid"]), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.props["data-grid"]));
+  return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c?.key), _react.default.Children.map(b, c => c?.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c?.props["data-grid"]), _react.default.Children.map(b, c => c?.props["data-grid"]));
 }
 
 /**
@@ -208,10 +208,9 @@ function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean
  * function, tuned for exactly our props.
  */
 /*:: type FastRGLPropsEqual = (Object, Object, Function) => boolean;*/
-const fastRGLPropsEqual /*: FastRGLPropsEqual*/ = require("./fastRGLPropsEqual");
+const fastRGLPropsEqual /*: FastRGLPropsEqual*/ = exports.fastRGLPropsEqual = require("./fastRGLPropsEqual");
 
 // Like the above, but a lot simpler.
-exports.fastRGLPropsEqual = fastRGLPropsEqual;
 function fastPositionEqual(a /*: Position*/, b /*: Position*/) /*: boolean*/{
   return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
 }
@@ -434,7 +433,7 @@ function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y
 
   // Short-circuit if nothing to do.
   if (l.y === y && l.x === x) return layout;
-  log("Moving element ".concat(l.i, " to [").concat(String(x), ",").concat(String(y), "] from [").concat(l.x, ",").concat(l.y, "]"));
+  log(`Moving element ${l.i} to [${String(x)},${String(y)}] from [${l.x},${l.y}]`);
   const oldX = l.x;
   const oldY = l.y;
 
@@ -464,7 +463,7 @@ function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y
     // If we are preventing collision but not allowing overlap, we need to
     // revert the position of this element so it goes to where it came from, rather
     // than the user's desired location.
-    log("Collision prevented on ".concat(l.i, ", reverting."));
+    log(`Collision prevented on ${l.i}, reverting.`);
     l.x = oldX;
     l.y = oldY;
     l.moved = false;
@@ -474,7 +473,7 @@ function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y
   // Move each item that collides away from this element.
   for (let i = 0, len = collisions.length; i < len; i++) {
     const collision = collisions[i];
-    log("Resolving collision between ".concat(l.i, " at [").concat(l.x, ",").concat(l.y, "] and ").concat(collision.i, " at [").concat(collision.x, ",").concat(collision.y, "]"));
+    log(`Resolving collision between ${l.i} at [${l.x},${l.y}] and ${collision.i} at [${collision.x},${collision.y}]`);
 
     // Short circuit so we can't infinite loop
     if (collision.moved) continue;
@@ -524,7 +523,7 @@ function moveElementAwayFromCollision(layout /*: Layout*/, collidesWith /*: Layo
 
     // No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
     if (!firstCollision) {
-      log("Doing reverse collision on ".concat(itemToMove.i, " up to [").concat(fakeItem.x, ",").concat(fakeItem.y, "]."));
+      log(`Doing reverse collision on ${itemToMove.i} up to [${fakeItem.x},${fakeItem.y}].`);
       return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType, cols);
     } else if (collisionNorth && compactV) {
       return moveElement(layout, itemToMove, undefined, collidesWith.y + 1, isUserAction, preventCollision, compactType, cols);
@@ -664,15 +663,15 @@ function setTransform(_ref5 /*:: */) /*: Object*/{
     height
   } /*: Position*/ = _ref5 /*: Position*/;
   // Replace unitless items with px
-  const translate = "translate(".concat(left, "px,").concat(top, "px)");
+  const translate = `translate(${left}px,${top}px)`;
   return {
     transform: translate,
     WebkitTransform: translate,
     MozTransform: translate,
     msTransform: translate,
     OTransform: translate,
-    width: "".concat(width, "px"),
-    height: "".concat(height, "px"),
+    width: `${width}px`,
+    height: `${height}px`,
     position: "absolute"
   };
 }
@@ -684,10 +683,10 @@ function setTopLeft(_ref6 /*:: */) /*: Object*/{
     height
   } /*: Position*/ = _ref6 /*: Position*/;
   return {
-    top: "".concat(top, "px"),
-    left: "".concat(left, "px"),
-    width: "".concat(width, "px"),
-    height: "".concat(height, "px"),
+    top: `${top}px`,
+    left: `${left}px`,
+    width: `${width}px`,
+    height: `${height}px`,
     position: "absolute"
   };
 }
@@ -753,7 +752,7 @@ function synchronizeLayoutWithChildren(initialLayout /*: Layout*/, children /*:
   const layout /*: LayoutItem[]*/ = [];
   _react.default.Children.forEach(children, (child /*: ReactElement<any>*/) => {
     // Child may not exist
-    if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
+    if (child?.key == null) return;
     const exists = getLayoutItem(initialLayout, String(child.key));
     const g = child.props["data-grid"];
     // Don't overwrite the layout item if it's already in the initial layout.