@devexpress/dx-react-core - npm Package Compare versions

Comparing version 2.7.6 to 3.0.0-beta.1

dist/dx-react-core.d.ts

@@ -63,2 +63,5 @@ // Dependencies for this module:
 export const TemplatePlaceholder: React.ComponentType<TemplatePlaceholderProps>;
+export const PlaceholderWithRef: React.ComponentType<TemplatePlaceholderProps & {
+  forwardedRef?: any;
+}>;
 
@@ -65,0 +68,0 @@ export interface TemplateConnectorProps {

dist/dx-react-core.es.js

 /**
  * Bundle of @devexpress/dx-react-core
- * Generated: 2021-06-24
- * Version: 2.7.6
+ * Generated: 2021-10-21
+ * Version: 3.0.0-beta.1
  * License: https://js.devexpress.com/Licensing
  */
 
-import { createContext, createElement, Children, PureComponent, Component, createRef } from 'react';
+import { createContext, createElement, Children, PureComponent, Component, forwardRef, isValidElement, cloneElement, createRef, useContext } from 'react';
 import { shallowEqual, PluginHost as PluginHost$1, EventEmitter } from '@devexpress/dx-core';
-import { findDOMNode, unstable_batchedUpdates } from 'react-dom';
+import { unstable_batchedUpdates } from 'react-dom';
 import { shape, instanceOf } from 'prop-types';
@@ -263,2 +263,6 @@
 var TemplatePlaceholder = withContext(PluginHostContext, PLUGIN_HOST_CONTEXT)(withContext(TemplateHostContext, TEMPLATE_HOST_CONTEXT)(TemplatePlaceholderBase));
+var PlaceholderWithRef = function (_a) {
+    var params = _a.params, forwardedRef = _a.forwardedRef;
+    return (createElement(TemplatePlaceholder, { params: __assign(__assign({}, params), { forwardedRef: forwardedRef }) }));
+};
 
@@ -695,2 +699,21 @@ /** @internal */
 
+/** @internal */
+var RefHolder = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children;
+    return isValidElement(children) ?
+        typeof children.type === 'string'
+            ? cloneElement(children, { ref: ref })
+            : cloneElement(children, { forwardedRef: ((_b = children.props) === null || _b === void 0 ? void 0 : _b.forwardedRef) ? function (node) {
+                    children.props.forwardedRef.current = node;
+                    if (typeof ref === 'function') {
+                        ref(node);
+                    }
+                    else if (ref) {
+                        ref.current = node;
+                    }
+                } : ref }) :
+        createElement('div', { ref: ref, style: { display: 'contents' } }, children);
+});
+
 var draggingHandled = Symbol('draggingHandled');
@@ -700,4 +723,4 @@ /** @internal */
     __extends(Draggable, _super);
-    function Draggable(props, context) {
-        var _this = _super.call(this, props, context) || this;
+    function Draggable(props) {
+        var _this = _super.call(this, props) || this;
         var delegate = {
@@ -734,2 +757,3 @@ onStart: function (_a) {
         _this.touchStrategy = new TouchStrategy(delegate);
+        _this.elementRef = createRef();
         _this.mouseDownListener = _this.mouseDownListener.bind(_this);
@@ -744,6 +768,2 @@ _this.touchStartListener = _this.touchStartListener.bind(_this);
     };
-    Draggable.prototype.shouldComponentUpdate = function (nextProps) {
-        var children = this.props.children;
-        return nextProps.children !== children;
-    };
     Draggable.prototype.componentDidUpdate = function () {
@@ -756,3 +776,3 @@ this.setupNodeSubscription();
     Draggable.prototype.setupNodeSubscription = function () {
-        var node = findDOMNode(this);
+        var node = this.elementRef.current;
         if (!node)
@@ -802,7 +822,16 @@ return;
     Draggable.prototype.render = function () {
-        var children = this.props.children;
-        return children;
+        var _this = this;
+        var _a = this.props, children = _a.children, dragItem = _a.dragItem;
+        return createElement(RefHolder, { ref: function (node) {
+                _this.elementRef.current = node;
+                if (typeof dragItem === 'function') {
+                    dragItem(node);
+                }
+                else if (dragItem) {
+                    dragItem.current = node;
+                }
+            } }, children);
     };
     return Draggable;
-}(Component));
+}(PureComponent));
 
@@ -877,32 +906,21 @@ /** @internal */
 /** @internal */
-var DragSource = /*#__PURE__*/ (function (_super) {
-    __extends(DragSource, _super);
-    function DragSource() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DragSource.prototype.shouldComponentUpdate = function (nextProps) {
-        var children = this.props.children;
-        return nextProps.children !== children;
-    };
-    DragSource.prototype.render = function () {
-        var dragDropProvider = this.context;
-        var _a = this.props, onStart = _a.onStart, onUpdate = _a.onUpdate, onEnd = _a.onEnd, payload = _a.payload, children = _a.children;
-        return (createElement(Draggable, { onStart: function (_a) {
-                var x = _a.x, y = _a.y;
-                dragDropProvider.start(payload, { x: x, y: y });
-                onStart({ clientOffset: { x: x, y: y } });
-            }, onUpdate: function (_a) {
-                var x = _a.x, y = _a.y;
-                dragDropProvider.update({ x: x, y: y });
-                onUpdate({ clientOffset: { x: x, y: y } });
-            }, onEnd: function (_a) {
-                var x = _a.x, y = _a.y;
-                dragDropProvider.end({ x: x, y: y });
-                onEnd({ clientOffset: { x: x, y: y } });
-            } }, children));
-    };
-    DragSource.defaultProps = defaultProps$1;
-    return DragSource;
-}(Component));
-DragSource.contextType = DragDropContext;
+var DragSource = forwardRef(function (_a, ref) {
+    var onStart = _a.onStart, onUpdate = _a.onUpdate, onEnd = _a.onEnd, payload = _a.payload, children = _a.children;
+    var context = useContext(DragDropContext);
+    var dragDropProvider = context;
+    return (createElement(Draggable, { onStart: function (_a) {
+            var x = _a.x, y = _a.y;
+            dragDropProvider === null || dragDropProvider === void 0 ? void 0 : dragDropProvider.start(payload, { x: x, y: y });
+            onStart === null || onStart === void 0 ? void 0 : onStart({ clientOffset: { x: x, y: y } });
+        }, onUpdate: function (_a) {
+            var x = _a.x, y = _a.y;
+            dragDropProvider === null || dragDropProvider === void 0 ? void 0 : dragDropProvider.update({ x: x, y: y });
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ clientOffset: { x: x, y: y } });
+        }, onEnd: function (_a) {
+            var x = _a.x, y = _a.y;
+            dragDropProvider === null || dragDropProvider === void 0 ? void 0 : dragDropProvider.end({ x: x, y: y });
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd({ clientOffset: { x: x, y: y } });
+        }, dragItem: ref }, children));
+});
+DragSource.defaultProps = defaultProps$1;
 
@@ -923,2 +941,3 @@ var clamp$1 = function (value, min, max) { return Math.max(Math.min(value, max), min); };
         _this.handleDrag = _this.handleDrag.bind(_this);
+        _this.elementRef = createRef();
         return _this;
@@ -940,3 +959,3 @@ }
         var payload = _a.payload, clientOffset = _a.clientOffset, end = _a.end;
-        var _b = findDOMNode(this).getBoundingClientRect(), left = _b.left, top = _b.top, right = _b.right, bottom = _b.bottom;
+        var _b = this.elementRef.current.getBoundingClientRect(), left = _b.left, top = _b.top, right = _b.right, bottom = _b.bottom;
         var _c = this.props, onDrop = _c.onDrop, onEnter = _c.onEnter, onLeave = _c.onLeave, onOver = _c.onOver;
@@ -958,3 +977,3 @@ var isOver = clientOffset
         var children = this.props.children;
-        return Children.only(children);
+        return createElement(RefHolder, { ref: this.elementRef }, Children.only(children));
     };
@@ -966,15 +985,2 @@ DropTarget.defaultProps = defaultProps$2;
 
-/** @internal */
-var RefHolder = /*#__PURE__*/ (function (_super) {
-    __extends(RefHolder, _super);
-    function RefHolder() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    RefHolder.prototype.render = function () {
-        var children = this.props.children;
-        return children;
-    };
-    return RefHolder;
-}(PureComponent));
-
 /* globals document:true */
@@ -1042,6 +1048,9 @@ var styles = {
         // Viewport changes its own properties automatically.
-        var scrollTop = this.props.scrollTop;
+        var _a = this.props, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
         if (scrollTop > -1) {
             this.rootNode.scrollTop = scrollTop;
         }
+        if (scrollLeft > -1) {
+            this.rootNode.scrollLeft = scrollLeft;
+        }
     };
@@ -1069,3 +1078,3 @@ // There is no need to remove listeners as divs are removed from DOM when component is unmount.
     Sizer.prototype.createListeners = function () {
-        this.rootNode = findDOMNode(this.rootRef.current);
+        this.rootNode = this.rootRef.current;
         this.triggersRoot = document.createElement('div');
@@ -1089,6 +1098,5 @@ Object.assign(this.triggersRoot.style, styles.triggersRoot);
     Sizer.prototype.render = function () {
-        var _a = this.props, onSizeChange = _a.onSizeChange, Container = _a.containerComponent, style = _a.style, scrollTop = _a.scrollTop, restProps = __rest(_a, ["onSizeChange", "containerComponent", "style", "scrollTop"]);
-        return (createElement(RefHolder, { ref: this.rootRef },
-            createElement(Container // NOTE: should have `position: relative`
-            , __assign({ style: style ? __assign(__assign({}, styles.root), style) : styles.root }, restProps))));
+        var _a = this.props, onSizeChange = _a.onSizeChange, Container = _a.containerComponent, style = _a.style, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft, restProps = __rest(_a, ["onSizeChange", "containerComponent", "style", "scrollTop", "scrollLeft"]);
+        return (createElement(Container // NOTE: should have `position: relative`
+        , __assign({ forwardedRef: this.rootRef, style: style ? __assign(__assign({}, styles.root), style) : styles.root }, restProps)));
     };
@@ -1229,3 +1237,3 @@ Sizer.defaultProps = {
 
-export { Action, DragDropProvider, DragSource, Draggable, DropTarget, Getter, Plugin, PluginHost, RefHolder, RefType, Sizer, Template, TemplateConnector, TemplatePlaceholder, clear as clearSelection, connectProps, createStateHelper, withComponents };
+export { Action, DragDropProvider, DragSource, Draggable, DropTarget, Getter, PlaceholderWithRef, Plugin, PluginHost, RefHolder, RefType, Sizer, Template, TemplateConnector, TemplatePlaceholder, clear as clearSelection, connectProps, createStateHelper, withComponents };
 //# sourceMappingURL=dx-react-core.es.js.map

dist/dx-react-core.umd.js

 /**
  * Bundle of @devexpress/dx-react-core
- * Generated: 2021-06-24
- * Version: 2.7.6
+ * Generated: 2021-10-21
+ * Version: 3.0.0-beta.1
  * License: https://js.devexpress.com/Licensing
@@ -266,2 +266,6 @@ */
     var TemplatePlaceholder = withContext(PluginHostContext, PLUGIN_HOST_CONTEXT)(withContext(TemplateHostContext, TEMPLATE_HOST_CONTEXT)(TemplatePlaceholderBase));
+    var PlaceholderWithRef = function (_a) {
+        var params = _a.params, forwardedRef = _a.forwardedRef;
+        return (React.createElement(TemplatePlaceholder, { params: __assign(__assign({}, params), { forwardedRef: forwardedRef }) }));
+    };
 
@@ -698,2 +702,21 @@ /** @internal */
 
+    /** @internal */
+    var RefHolder = React.forwardRef(function (_a, ref) {
+        var _b;
+        var children = _a.children;
+        return React.isValidElement(children) ?
+            typeof children.type === 'string'
+                ? React.cloneElement(children, { ref: ref })
+                : React.cloneElement(children, { forwardedRef: ((_b = children.props) === null || _b === void 0 ? void 0 : _b.forwardedRef) ? function (node) {
+                        children.props.forwardedRef.current = node;
+                        if (typeof ref === 'function') {
+                            ref(node);
+                        }
+                        else if (ref) {
+                            ref.current = node;
+                        }
+                    } : ref }) :
+            React.createElement('div', { ref: ref, style: { display: 'contents' } }, children);
+    });
+
     var draggingHandled = Symbol('draggingHandled');
@@ -703,4 +726,4 @@ /** @internal */
         __extends(Draggable, _super);
-        function Draggable(props, context) {
-            var _this = _super.call(this, props, context) || this;
+        function Draggable(props) {
+            var _this = _super.call(this, props) || this;
             var delegate = {
@@ -737,2 +760,3 @@ onStart: function (_a) {
             _this.touchStrategy = new TouchStrategy(delegate);
+            _this.elementRef = React.createRef();
             _this.mouseDownListener = _this.mouseDownListener.bind(_this);
@@ -747,6 +771,2 @@ _this.touchStartListener = _this.touchStartListener.bind(_this);
         };
-        Draggable.prototype.shouldComponentUpdate = function (nextProps) {
-            var children = this.props.children;
-            return nextProps.children !== children;
-        };
         Draggable.prototype.componentDidUpdate = function () {
@@ -759,3 +779,3 @@ this.setupNodeSubscription();
         Draggable.prototype.setupNodeSubscription = function () {
-            var node = reactDom.findDOMNode(this);
+            var node = this.elementRef.current;
             if (!node)
@@ -805,7 +825,16 @@ return;
         Draggable.prototype.render = function () {
-            var children = this.props.children;
-            return children;
+            var _this = this;
+            var _a = this.props, children = _a.children, dragItem = _a.dragItem;
+            return React.createElement(RefHolder, { ref: function (node) {
+                    _this.elementRef.current = node;
+                    if (typeof dragItem === 'function') {
+                        dragItem(node);
+                    }
+                    else if (dragItem) {
+                        dragItem.current = node;
+                    }
+                } }, children);
         };
         return Draggable;
-    }(React.Component));
+    }(React.PureComponent));
 
@@ -880,32 +909,21 @@ /** @internal */
     /** @internal */
-    var DragSource = /*#__PURE__*/ (function (_super) {
-        __extends(DragSource, _super);
-        function DragSource() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        DragSource.prototype.shouldComponentUpdate = function (nextProps) {
-            var children = this.props.children;
-            return nextProps.children !== children;
-        };
-        DragSource.prototype.render = function () {
-            var dragDropProvider = this.context;
-            var _a = this.props, onStart = _a.onStart, onUpdate = _a.onUpdate, onEnd = _a.onEnd, payload = _a.payload, children = _a.children;
-            return (React.createElement(Draggable, { onStart: function (_a) {
-                    var x = _a.x, y = _a.y;
-                    dragDropProvider.start(payload, { x: x, y: y });
-                    onStart({ clientOffset: { x: x, y: y } });
-                }, onUpdate: function (_a) {
-                    var x = _a.x, y = _a.y;
-                    dragDropProvider.update({ x: x, y: y });
-                    onUpdate({ clientOffset: { x: x, y: y } });
-                }, onEnd: function (_a) {
-                    var x = _a.x, y = _a.y;
-                    dragDropProvider.end({ x: x, y: y });
-                    onEnd({ clientOffset: { x: x, y: y } });
-                } }, children));
-        };
-        DragSource.defaultProps = defaultProps$1;
-        return DragSource;
-    }(React.Component));
-    DragSource.contextType = DragDropContext;
+    var DragSource = React.forwardRef(function (_a, ref) {
+        var onStart = _a.onStart, onUpdate = _a.onUpdate, onEnd = _a.onEnd, payload = _a.payload, children = _a.children;
+        var context = React.useContext(DragDropContext);
+        var dragDropProvider = context;
+        return (React.createElement(Draggable, { onStart: function (_a) {
+                var x = _a.x, y = _a.y;
+                dragDropProvider === null || dragDropProvider === void 0 ? void 0 : dragDropProvider.start(payload, { x: x, y: y });
+                onStart === null || onStart === void 0 ? void 0 : onStart({ clientOffset: { x: x, y: y } });
+            }, onUpdate: function (_a) {
+                var x = _a.x, y = _a.y;
+                dragDropProvider === null || dragDropProvider === void 0 ? void 0 : dragDropProvider.update({ x: x, y: y });
+                onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ clientOffset: { x: x, y: y } });
+            }, onEnd: function (_a) {
+                var x = _a.x, y = _a.y;
+                dragDropProvider === null || dragDropProvider === void 0 ? void 0 : dragDropProvider.end({ x: x, y: y });
+                onEnd === null || onEnd === void 0 ? void 0 : onEnd({ clientOffset: { x: x, y: y } });
+            }, dragItem: ref }, children));
+    });
+    DragSource.defaultProps = defaultProps$1;
 
@@ -926,2 +944,3 @@ var clamp$1 = function (value, min, max) { return Math.max(Math.min(value, max), min); };
             _this.handleDrag = _this.handleDrag.bind(_this);
+            _this.elementRef = React.createRef();
             return _this;
@@ -943,3 +962,3 @@ }
             var payload = _a.payload, clientOffset = _a.clientOffset, end = _a.end;
-            var _b = reactDom.findDOMNode(this).getBoundingClientRect(), left = _b.left, top = _b.top, right = _b.right, bottom = _b.bottom;
+            var _b = this.elementRef.current.getBoundingClientRect(), left = _b.left, top = _b.top, right = _b.right, bottom = _b.bottom;
             var _c = this.props, onDrop = _c.onDrop, onEnter = _c.onEnter, onLeave = _c.onLeave, onOver = _c.onOver;
@@ -961,3 +980,3 @@ var isOver = clientOffset
             var children = this.props.children;
-            return React.Children.only(children);
+            return React.createElement(RefHolder, { ref: this.elementRef }, React.Children.only(children));
         };
@@ -969,15 +988,2 @@ DropTarget.defaultProps = defaultProps$2;
 
-    /** @internal */
-    var RefHolder = /*#__PURE__*/ (function (_super) {
-        __extends(RefHolder, _super);
-        function RefHolder() {
-            return _super !== null && _super.apply(this, arguments) || this;
-        }
-        RefHolder.prototype.render = function () {
-            var children = this.props.children;
-            return children;
-        };
-        return RefHolder;
-    }(React.PureComponent));
-
     /* globals document:true */
@@ -1045,6 +1051,9 @@ var styles = {
             // Viewport changes its own properties automatically.
-            var scrollTop = this.props.scrollTop;
+            var _a = this.props, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft;
             if (scrollTop > -1) {
                 this.rootNode.scrollTop = scrollTop;
             }
+            if (scrollLeft > -1) {
+                this.rootNode.scrollLeft = scrollLeft;
+            }
         };
@@ -1072,3 +1081,3 @@ // There is no need to remove listeners as divs are removed from DOM when component is unmount.
         Sizer.prototype.createListeners = function () {
-            this.rootNode = reactDom.findDOMNode(this.rootRef.current);
+            this.rootNode = this.rootRef.current;
             this.triggersRoot = document.createElement('div');
@@ -1092,6 +1101,5 @@ Object.assign(this.triggersRoot.style, styles.triggersRoot);
         Sizer.prototype.render = function () {
-            var _a = this.props, onSizeChange = _a.onSizeChange, Container = _a.containerComponent, style = _a.style, scrollTop = _a.scrollTop, restProps = __rest(_a, ["onSizeChange", "containerComponent", "style", "scrollTop"]);
-            return (React.createElement(RefHolder, { ref: this.rootRef },
-                React.createElement(Container // NOTE: should have `position: relative`
-                , __assign({ style: style ? __assign(__assign({}, styles.root), style) : styles.root }, restProps))));
+            var _a = this.props, onSizeChange = _a.onSizeChange, Container = _a.containerComponent, style = _a.style, scrollTop = _a.scrollTop, scrollLeft = _a.scrollLeft, restProps = __rest(_a, ["onSizeChange", "containerComponent", "style", "scrollTop", "scrollLeft"]);
+            return (React.createElement(Container // NOTE: should have `position: relative`
+            , __assign({ forwardedRef: this.rootRef, style: style ? __assign(__assign({}, styles.root), style) : styles.root }, restProps)));
         };
@@ -1238,2 +1246,3 @@ Sizer.defaultProps = {
     exports.Getter = Getter;
+    exports.PlaceholderWithRef = PlaceholderWithRef;
     exports.Plugin = Plugin;
@@ -1240,0 +1249,0 @@ exports.PluginHost = PluginHost;

package.json

 {
   "name": "@devexpress/dx-react-core",
-  "version": "2.7.6",
+  "version": "3.0.0-beta.1",
   "description": "Core library for DevExtreme React Components",
@@ -48,9 +48,9 @@ "author": {
     "@types/enzyme": "^3.10.8",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "core-js": "^3.4.1",
     "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "jest": "^24.9.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-test-renderer": "^16.14.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
     "rollup": "^1.27.2",
@@ -65,10 +65,10 @@ "rollup-plugin-license": "^0.12.1",
   "dependencies": {
-    "@devexpress/dx-core": "2.7.6",
+    "@devexpress/dx-core": "3.0.0-beta.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
-    "react": ">=16.10.2",
-    "react-dom": ">=16.10.2"
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
   },
-  "gitHead": "0ac53b2d4352d8d2eaff1a16406935bc99ae475f"
+  "gitHead": "2c8a4f895864e06dc3e5f02198059518d80dcfac"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

282328

2.37%

Lines of code

2471

0.82%

Worsened metrics

Number of low quality alerts

1

Infinity%

Dependency changes

• + Added

  @devexpress/dx-core@3.0.0-beta.1
  (transitive)

• - Removed

  @devexpress/dx-core@2.7.6
  (transitive)

• Updated

  @devexpress/dx-core@3.0.0-beta.1