redhotmagma-graphics-editor 1.35.2 → 1.36.0-beta.0

package/Components/InlineToolbox/InlineToolbox.js

@@ -303,6 +303,16 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
       }, renderAngleLabel ? renderAngleLabel(degAngle) : /*#__PURE__*/_react["default"].createElement("span", null, degAngle));
     });
 
+    _defineProperty(_assertThisInitialized(_this), "ContainerComponent", function (props) {
+      var ContainerComponent = _this.props.ContainerComponent;
+
+      if (ContainerComponent === _react["default"].Fragment) {
+        return /*#__PURE__*/_react["default"].createElement(ContainerComponent, null, props.children);
+      }
+
+      return /*#__PURE__*/_react["default"].createElement(ContainerComponent, props);
+    });
+
     return _this;
   }
 
@@ -416,9 +426,9 @@ var InlineToolBox = /*#__PURE__*/function (_React$Component) {
             canvas = _this$props2.canvas,
             selectedObject = _this$props2.selectedObject,
             renderAngleLabel = _this$props2.renderAngleLabel,
-            ContainerComponent = _this$props2.ContainerComponent,
             canvasPosition = _this$props2.canvasPosition;
-        var AngleLabel = this.AngleLabel;
+        var ContainerComponent = this.ContainerComponent,
+            AngleLabel = this.AngleLabel;
         var renderToolboxButton = this.renderToolboxButton,
             topRightContainerRef = this.topRightContainerRef,
             bottomRightContainerRef = this.bottomRightContainerRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "redhotmagma-graphics-editor",
-  "version": "1.35.2",
+  "version": "1.36.0-beta.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
@@ -13,8 +13,8 @@
     "paper": "^0.12.15",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0",
     "text-to-svg": "^3.1.5",
     "uuid": "^3.4.0"

package/src/Components/InlineToolbox/InlineToolbox.js

@@ -331,19 +331,19 @@ class InlineToolBox extends React.Component {
     );
   };
 
+  ContainerComponent = props => {
+    const { ContainerComponent } = this.props;
+    if (ContainerComponent === React.Fragment) {
+      return <ContainerComponent>{props.children}</ContainerComponent>;
+    }
+    return <ContainerComponent {...props} />;
+  };
+
   render() {
     logger.log('render InlineToolbox');
     if (this.state.show) {
-      const {
-        classes,
-        children,
-        canvas,
-        selectedObject,
-        renderAngleLabel,
-        ContainerComponent,
-        canvasPosition,
-      } = this.props;
-      const { AngleLabel } = this;
+      const { classes, children, canvas, selectedObject, renderAngleLabel, canvasPosition } = this.props;
+      const { ContainerComponent, AngleLabel } = this;
 
       const {
         renderToolboxButton,