@react-awesome-query-builder/ui - npm Package Compare versions

Comparing version 6.1.2 to 6.1.3

cjs/components/Builder.js

@@ -11,2 +11,3 @@ "use strict";
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -38,2 +39,3 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
     _this = _super.call(this, props);
+    _this.pureShouldComponentUpdate = (0, _reactUtils.pureShouldComponentUpdate)((0, _assertThisInitialized2["default"])(_this));
     _this._updPath(props);
@@ -46,3 +48,3 @@ return _this;
       var prevProps = this.props;
-      var should = (0, _reactUtils.pureShouldComponentUpdate)(this)(nextProps, nextState);
+      var should = this.pureShouldComponentUpdate(nextProps, nextState);
       if (should) {
@@ -49,0 +51,0 @@ var chs = [];

cjs/components/containers/GroupContainer.js

@@ -77,2 +77,3 @@ "use strict";
       };
+      _this.pureShouldComponentUpdate = (0, _reactUtils.pureShouldComponentUpdate)((0, _assertThisInitialized2["default"])(_this));
       (0, _reactUtils.useOnPropsChanged)((0, _assertThisInitialized2["default"])(_this));
@@ -89,3 +90,3 @@ _this.selectedConjunction = _this._selectedConjunction(_props);
         var prevState = this.state;
-        var should = (0, _reactUtils.pureShouldComponentUpdate)(this)(nextProps, nextState);
+        var should = this.pureShouldComponentUpdate(nextProps, nextState);
         if (should) {
@@ -92,0 +93,0 @@ if (prevState == nextState && prevProps != nextProps) {

cjs/components/containers/RuleContainer.js

@@ -11,2 +11,3 @@ "use strict";
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -59,2 +60,3 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
       };
+      _this.pureShouldComponentUpdate = (0, _reactUtils.pureShouldComponentUpdate)((0, _assertThisInitialized2["default"])(_this));
       _this.dummyFn.isDummyFn = true;
@@ -68,3 +70,3 @@ return _this;
         var prevState = this.state;
-        var should = (0, _reactUtils.pureShouldComponentUpdate)(this)(nextProps, nextState);
+        var should = this.pureShouldComponentUpdate(nextProps, nextState);
         if (should) {
@@ -71,0 +73,0 @@ if (prevState == nextState && prevProps != nextProps) {

cjs/components/containers/SortableContainer.js

@@ -165,2 +165,3 @@ "use strict";
       };
+      _this.pureShouldComponentUpdate = (0, _reactUtils.pureShouldComponentUpdate)((0, _assertThisInitialized2["default"])(_this));
       (0, _reactUtils.useOnPropsChanged)((0, _assertThisInitialized2["default"])(_this));
@@ -180,3 +181,3 @@ _this.onPropsChanged(props);
         var prevState = this.state;
-        var should = (0, _reactUtils.pureShouldComponentUpdate)(this)(nextProps, nextState);
+        var should = this.pureShouldComponentUpdate(nextProps, nextState);
         if (should) {
@@ -183,0 +184,0 @@ if (prevState == nextState && prevProps != nextProps) {

cjs/components/item/Group.js

@@ -33,4 +33,4 @@ "use strict";
 var defaultPosition = "topRight";
-var BasicGroup = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(BasicGroup, _PureComponent);
+var BasicGroup = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(BasicGroup, _Component);
   var _super = _createSuper(BasicGroup);
@@ -354,3 +354,3 @@ function BasicGroup(props) {
   return BasicGroup;
-}(_react.PureComponent);
+}(_react.Component);
 exports.BasicGroup = BasicGroup;
@@ -357,0 +357,0 @@ BasicGroup.propTypes = {

cjs/components/item/Rule.js

@@ -39,4 +39,4 @@ "use strict";
 var getFieldPathLabels = _core.Utils.RuleUtils.getFieldPathLabels;
-var Rule = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(Rule, _PureComponent);
+var Rule = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Rule, _Component);
   var _super = _createSuper(Rule);
@@ -352,3 +352,3 @@ function Rule(props) {
   return Rule;
-}(_react.PureComponent);
+}(_react.Component);
 Rule.propTypes = {
@@ -355,0 +355,0 @@ id: _propTypes["default"].string.isRequired,

cjs/components/QueryContainer.js

@@ -40,2 +40,8 @@ "use strict";
     _this = _super.call(this, props, context);
+    _this.setLastTree = function (lastTree) {
+      if (_this.prevTree) {
+        _this.prevprevTree = _this.prevTree;
+      }
+      _this.prevTree = lastTree;
+    };
     _this.shouldComponentUpdate = (0, _reactUtils.liteShouldComponentUpdate)((0, _assertThisInitialized2["default"])(_this), {
@@ -52,7 +58,7 @@ value: function value(nextValue, prevValue, state) {
     var validatedTree = _this.getMemoizedTree(config, tree);
-    var reducer = (0, _tree["default"])(config, validatedTree, _this.getMemoizedTree);
+    var reducer = (0, _tree["default"])(config, validatedTree, _this.getMemoizedTree, _this.setLastTree);
     var store = (0, _redux.createStore)(reducer);
+    _this.config = config;
     _this.state = {
-      store: store,
-      config: config
+      store: store
     };
@@ -64,5 +70,4 @@ return _this;
     value: function onPropsChanged(nextProps) {
-      var _this2 = this;
       // compare configs
-      var oldConfig = this.state.config;
+      var oldConfig = this.config;
       var nextConfig = this.getMemoizedConfig(nextProps);
@@ -75,12 +80,12 @@ var isConfigChanged = oldConfig !== nextConfig;
       var currentTree = isTreeChanged ? nextProps.value || defaultRoot(nextProps) : storeValue;
+      var isTreeTrulyChanged = isTreeChanged && !(0, _stuff.immutableEqual)(nextProps.value, this.prevTree) && !(0, _stuff.immutableEqual)(nextProps.value, this.prevprevTree);
+      var sanitizeTree = isTreeTrulyChanged || isConfigChanged;
       if (isConfigChanged) {
-        this.setState({
-          config: nextConfig
-        });
+        this.config = nextConfig;
       }
       if (isTreeChanged || isConfigChanged) {
-        var validatedTree = this.getMemoizedTree(nextConfig, currentTree, oldConfig);
-        return Promise.resolve().then(function () {
-          _this2.state.store.dispatch(actions.tree.setTree(nextConfig, validatedTree));
-        });
+        var validatedTree = this.getMemoizedTree(nextConfig, currentTree, oldConfig, sanitizeTree);
+        //return Promise.resolve().then(() => {
+        this.state.store.dispatch(actions.tree.setTree(nextConfig, validatedTree));
+        //});
       }
@@ -97,5 +102,4 @@ }
         settings = _this$props.settings;
-      var _this$state = this.state,
-        config = _this$state.config,
-        store = _this$state.store;
+      var store = this.state.store;
+      var config = this.config;
       var QueryWrapper = settings.renderProvider;
@@ -102,0 +106,0 @@ return /*#__PURE__*/_react["default"].createElement(QueryWrapper, {

cjs/components/rule/Field.js

@@ -33,4 +33,4 @@ "use strict";
 var getFieldConfig = _core.Utils.ConfigUtils.getFieldConfig;
-var Field = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(Field, _PureComponent);
+var Field = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Field, _Component);
   var _super = _createSuper(Field);
@@ -182,3 +182,3 @@ function Field(props) {
   return Field;
-}(_react.PureComponent);
+}(_react.Component);
 exports["default"] = Field;
@@ -185,0 +185,0 @@ Field.propTypes = {

cjs/components/rule/FuncSelect.js

@@ -40,4 +40,4 @@ "use strict";
 //tip: this.props.value - right value, this.props.field - left value
-var FuncSelect = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(FuncSelect, _PureComponent);
+var FuncSelect = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(FuncSelect, _Component);
   var _super = _createSuper(FuncSelect);
@@ -244,3 +244,3 @@ function FuncSelect(props) {
   return FuncSelect;
-}(_react.PureComponent);
+}(_react.Component);
 exports["default"] = FuncSelect;
@@ -247,0 +247,0 @@ FuncSelect.propTypes = {

cjs/components/rule/FuncWidget.js

@@ -33,4 +33,4 @@ "use strict";
   setArgValueSrc = _Utils$FuncUtils.setArgValueSrc;
-var FuncWidget = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(FuncWidget, _PureComponent);
+var FuncWidget = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(FuncWidget, _Component);
   var _super = _createSuper(FuncWidget);
@@ -239,3 +239,3 @@ function FuncWidget(props) {
   return FuncWidget;
-}(_react.PureComponent);
+}(_react.Component);
 exports["default"] = FuncWidget;
@@ -257,4 +257,4 @@ FuncWidget.propTypes = {
 };
-var ArgWidget = /*#__PURE__*/function (_PureComponent2) {
-  (0, _inherits2["default"])(ArgWidget, _PureComponent2);
+var ArgWidget = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2["default"])(ArgWidget, _PureComponent);
   var _super2 = _createSuper(ArgWidget);
@@ -261,0 +261,0 @@ function ArgWidget() {

cjs/components/rule/Operator.js

@@ -32,4 +32,4 @@ "use strict";
   getOperatorConfig = _Utils$ConfigUtils.getOperatorConfig;
-var Operator = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(Operator, _PureComponent);
+var Operator = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Operator, _Component);
   var _super = _createSuper(Operator);
@@ -131,3 +131,3 @@ function Operator(props) {
   return Operator;
-}(_react.PureComponent);
+}(_react.Component);
 exports["default"] = Operator;
@@ -134,0 +134,0 @@ Operator.propTypes = {

cjs/components/rule/ValueField.js

@@ -37,4 +37,4 @@ "use strict";
 //tip: this.props.value - right value, this.props.field - left value
-var ValueField = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(ValueField, _PureComponent);
+var ValueField = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(ValueField, _Component);
   var _super = _createSuper(ValueField);
@@ -250,3 +250,3 @@ function ValueField(props) {
   return ValueField;
-}(_react.PureComponent);
+}(_react.Component);
 exports["default"] = ValueField;
@@ -253,0 +253,0 @@ ValueField.propTypes = {

cjs/components/rule/Widget.js

@@ -42,4 +42,4 @@ "use strict";
 };
-var Widget = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2["default"])(Widget, _PureComponent);
+var Widget = /*#__PURE__*/function (_Component) {
+  (0, _inherits2["default"])(Widget, _Component);
   var _super = _createSuper(Widget);
@@ -295,3 +295,3 @@ function Widget(_props) {
   return Widget;
-}(_react.PureComponent);
+}(_react.Component);
 exports["default"] = Widget;
@@ -298,0 +298,0 @@ Widget.propTypes = {

cjs/hooks/useListValuesAutocomplete.js

@@ -71,3 +71,3 @@ "use strict";
   var asyncFectchCnt = _react["default"].useRef(0);
-  var componentIsMounted = _react["default"].useRef(true);
+  var componentIsMounted = _react["default"].useRef(0);
   var isSelectedLoadMore = _react["default"].useRef(false);
@@ -213,12 +213,5 @@
   var loadListValuesDebounced = _react["default"].useCallback((0, _debounce["default"])(loadListValues, debounceTimeout), []);
-
-  // Unmount
   _react["default"].useEffect(function () {
-    return function () {
-      componentIsMounted.current = false;
-    };
-  }, []);
-
-  // Initial loading
-  _react["default"].useEffect(function () {
+    componentIsMounted.current++;
+    // Initial loading
     if (canInitialLoad && loadingCnt == 0 && asyncFectchCnt.current == 0) {
@@ -238,2 +231,6 @@ (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
     }
+    // Unmount
+    return function () {
+      componentIsMounted.current--;
+    };
   }, [canInitialLoad]);
@@ -240,0 +237,0 @@

cjs/index.d.ts

@@ -16,3 +16,4 @@ /* eslint-disable no-extra-semi */
   WidgetProps, TextWidgetProps, DateTimeWidgetProps, BooleanWidgetProps, NumberWidgetProps, SelectWidgetProps, 
-  TreeSelectWidgetProps, RangeSliderWidgetProps, CaseValueWidgetProps
+  TreeSelectWidgetProps, RangeSliderWidgetProps, CaseValueWidgetProps,
+  Utils as CoreUtils
 } from "@react-awesome-query-builder/core";
@@ -214,3 +215,14 @@
 
+/////////////////
+// extend Utils
+/////////////////
 
+export interface Utils extends CoreUtils {
+  // ReactUtils: {
+  //   useOnPropsChanged(obj: ReactElement): void;
+  // },
+}
+
+export declare const Utils: Utils;
+
 /////////////////
@@ -217,0 +229,0 @@

cjs/index.js

@@ -14,3 +14,4 @@ "use strict";
   VanillaWidgets: true,
-  CustomOperators: true
+  CustomOperators: true,
+  Utils: true
 };
@@ -36,2 +37,8 @@ Object.defineProperty(exports, "BasicConfig", {
 });
+Object.defineProperty(exports, "Utils", {
+  enumerable: true,
+  get: function get() {
+    return _utils["default"];
+  }
+});
 exports.VanillaWidgets = void 0;
@@ -47,2 +54,3 @@ var _QueryContainer = _interopRequireDefault(require("./components/QueryContainer"));
 exports.CustomOperators = CustomOperators;
+var _utils = _interopRequireDefault(require("./utils"));
 var _core = require("@react-awesome-query-builder/core");
@@ -49,0 +57,0 @@ Object.keys(_core).forEach(function (key) {

cjs/utils/reactUtils.js

@@ -65,15 +65,31 @@ "use strict";
 exports.pureShouldComponentUpdate = pureShouldComponentUpdate;
-var canUseUnsafe = function canUseUnsafe() {
+var canUseOldComponentWillReceiveProps = function canUseOldComponentWillReceiveProps() {
   var v = _react["default"].version.split(".").map(parseInt.bind(null, 10));
-  return v[0] == 16 && v[1] >= 3 || v[0] > 16;
+  return v[0] == 16 && v[1] < 3 || v[0] < 16;
 };
 var useOnPropsChanged = function useOnPropsChanged(obj) {
-  if (canUseUnsafe) {
-    obj.UNSAFE_componentWillReceiveProps = function (nextProps) {
+  // 1. `shouldComponentUpdate` should be called after `componentWillReceiveProps`
+  // 2. `shouldComponentUpdate` should not be used for PureComponent
+
+  // Because `useOnPropsChanged` can only be applied to `Component` not `PureComponent`, make it pure now
+  if (!obj.shouldComponentUpdate) {
+    obj.shouldComponentUpdate = pureShouldComponentUpdate(obj);
+  }
+  if (canUseOldComponentWillReceiveProps()) {
+    // Use old method
+    obj.componentWillReceiveProps = function (nextProps) {
       obj.onPropsChanged(nextProps);
     };
   } else {
-    obj.componentWillReceiveProps = function (nextProps) {
-      obj.onPropsChanged(nextProps);
+    // Simulate `componentWillReceiveProps` with `shouldComponentUpdate`
+    var origShouldComponentUpdate = obj.shouldComponentUpdate;
+    var newShouldComponentUpdate = function newShouldComponentUpdate(nextProps, nextState) {
+      var shouldNotify = !(0, _stuff.shallowEqual)(obj.props, nextProps);
+      if (shouldNotify) {
+        obj.onPropsChanged(nextProps);
+      }
+      var shouldUpdate = origShouldComponentUpdate.call(obj, nextProps, nextState);
+      return shouldUpdate;
     };
+    obj.shouldComponentUpdate = newShouldComponentUpdate.bind(obj);
   }
@@ -80,0 +96,0 @@ };

cjs/utils/validation.js

@@ -14,3 +14,5 @@ "use strict";
   var configId;
-  return function (config, tree, oldConfig) {
+  return function (config, tree) {
+    var oldConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+    var sanitizeTree = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
     if (!tree) {
@@ -24,3 +26,7 @@ return null;
       originalTree = tree;
-      validatedTree = validateAndFixTree(tree, null, config, oldConfig || config);
+      if (sanitizeTree === false) {
+        validatedTree = validateAndFixTree(tree, null, config, oldConfig || config, false, false);
+      } else {
+        validatedTree = validateAndFixTree(tree, null, config, oldConfig || config);
+      }
       return validatedTree;
@@ -27,0 +33,0 @@ }

esm/components/Builder.js

 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -27,2 +28,3 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
     _this = _super.call(this, props);
+    _this.pureShouldComponentUpdate = pureShouldComponentUpdate(_assertThisInitialized(_this));
     _this._updPath(props);
@@ -35,3 +37,3 @@ return _this;
       var prevProps = this.props;
-      var should = pureShouldComponentUpdate(this)(nextProps, nextState);
+      var should = this.pureShouldComponentUpdate(nextProps, nextState);
       if (should) {
@@ -38,0 +40,0 @@ var chs = [];

esm/components/containers/GroupContainer.js

@@ -67,2 +67,3 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
       };
+      _this.pureShouldComponentUpdate = pureShouldComponentUpdate(_assertThisInitialized(_this));
       useOnPropsChanged(_assertThisInitialized(_this));
@@ -79,3 +80,3 @@ _this.selectedConjunction = _this._selectedConjunction(_props);
         var prevState = this.state;
-        var should = pureShouldComponentUpdate(this)(nextProps, nextState);
+        var should = this.pureShouldComponentUpdate(nextProps, nextState);
         if (should) {
@@ -82,0 +83,0 @@ if (prevState == nextState && prevProps != nextProps) {

esm/components/containers/RuleContainer.js

 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -48,2 +49,3 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
       };
+      _this.pureShouldComponentUpdate = pureShouldComponentUpdate(_assertThisInitialized(_this));
       _this.dummyFn.isDummyFn = true;
@@ -57,3 +59,3 @@ return _this;
         var prevState = this.state;
-        var should = pureShouldComponentUpdate(this)(nextProps, nextState);
+        var should = this.pureShouldComponentUpdate(nextProps, nextState);
         if (should) {
@@ -60,0 +62,0 @@ if (prevState == nextState && prevProps != nextProps) {

esm/components/containers/SortableContainer.js

@@ -154,2 +154,3 @@ import _extends from "@babel/runtime/helpers/extends";
       };
+      _this.pureShouldComponentUpdate = pureShouldComponentUpdate(_assertThisInitialized(_this));
       useOnPropsChanged(_assertThisInitialized(_this));
@@ -169,3 +170,3 @@ _this.onPropsChanged(props);
         var prevState = this.state;
-        var should = pureShouldComponentUpdate(this)(nextProps, nextState);
+        var should = this.pureShouldComponentUpdate(nextProps, nextState);
         if (should) {
@@ -172,0 +173,0 @@ if (prevState == nextState && prevProps != nextProps) {

esm/components/item/Group.js

@@ -13,3 +13,3 @@ import _extends from "@babel/runtime/helpers/extends";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { Component, PureComponent } from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
@@ -24,4 +24,4 @@ import startsWith from "lodash/startsWith";
 var defaultPosition = "topRight";
-export var BasicGroup = /*#__PURE__*/function (_PureComponent) {
-  _inherits(BasicGroup, _PureComponent);
+export var BasicGroup = /*#__PURE__*/function (_Component) {
+  _inherits(BasicGroup, _Component);
   var _super = _createSuper(BasicGroup);
@@ -345,3 +345,3 @@ function BasicGroup(props) {
   return BasicGroup;
-}(PureComponent);
+}(Component);
 BasicGroup.propTypes = {
@@ -348,0 +348,0 @@ //tree: PropTypes.instanceOf(Immutable.Map).isRequired,

esm/components/item/Rule.js

@@ -12,3 +12,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -30,4 +30,4 @@ import PropTypes from "prop-types";
 var getFieldPathLabels = Utils.RuleUtils.getFieldPathLabels;
-var Rule = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Rule, _PureComponent);
+var Rule = /*#__PURE__*/function (_Component) {
+  _inherits(Rule, _Component);
   var _super = _createSuper(Rule);
@@ -343,3 +343,3 @@ function Rule(props) {
   return Rule;
-}(PureComponent);
+}(Component);
 Rule.propTypes = {
@@ -346,0 +346,0 @@ id: PropTypes.string.isRequired,

esm/components/QueryContainer.js

@@ -30,2 +30,8 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
     _this = _super.call(this, props, context);
+    _this.setLastTree = function (lastTree) {
+      if (_this.prevTree) {
+        _this.prevprevTree = _this.prevTree;
+      }
+      _this.prevTree = lastTree;
+    };
     _this.shouldComponentUpdate = liteShouldComponentUpdate(_assertThisInitialized(_this), {
@@ -42,7 +48,7 @@ value: function value(nextValue, prevValue, state) {
     var validatedTree = _this.getMemoizedTree(config, tree);
-    var reducer = treeStoreReducer(config, validatedTree, _this.getMemoizedTree);
+    var reducer = treeStoreReducer(config, validatedTree, _this.getMemoizedTree, _this.setLastTree);
     var store = createStore(reducer);
+    _this.config = config;
     _this.state = {
-      store: store,
-      config: config
+      store: store
     };
@@ -54,5 +60,4 @@ return _this;
     value: function onPropsChanged(nextProps) {
-      var _this2 = this;
       // compare configs
-      var oldConfig = this.state.config;
+      var oldConfig = this.config;
       var nextConfig = this.getMemoizedConfig(nextProps);
@@ -65,12 +70,12 @@ var isConfigChanged = oldConfig !== nextConfig;
       var currentTree = isTreeChanged ? nextProps.value || defaultRoot(nextProps) : storeValue;
+      var isTreeTrulyChanged = isTreeChanged && !immutableEqual(nextProps.value, this.prevTree) && !immutableEqual(nextProps.value, this.prevprevTree);
+      var sanitizeTree = isTreeTrulyChanged || isConfigChanged;
       if (isConfigChanged) {
-        this.setState({
-          config: nextConfig
-        });
+        this.config = nextConfig;
       }
       if (isTreeChanged || isConfigChanged) {
-        var validatedTree = this.getMemoizedTree(nextConfig, currentTree, oldConfig);
-        return Promise.resolve().then(function () {
-          _this2.state.store.dispatch(actions.tree.setTree(nextConfig, validatedTree));
-        });
+        var validatedTree = this.getMemoizedTree(nextConfig, currentTree, oldConfig, sanitizeTree);
+        //return Promise.resolve().then(() => {
+        this.state.store.dispatch(actions.tree.setTree(nextConfig, validatedTree));
+        //});
       }
@@ -87,5 +92,4 @@ }
         settings = _this$props.settings;
-      var _this$state = this.state,
-        config = _this$state.config,
-        store = _this$state.store;
+      var store = this.state.store;
+      var config = this.config;
       var QueryWrapper = settings.renderProvider;
@@ -92,0 +96,0 @@ return /*#__PURE__*/React.createElement(QueryWrapper, {

esm/components/rule/Field.js

@@ -12,3 +12,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -24,4 +24,4 @@ import PropTypes from "prop-types";
 var getFieldConfig = Utils.ConfigUtils.getFieldConfig;
-var Field = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Field, _PureComponent);
+var Field = /*#__PURE__*/function (_Component) {
+  _inherits(Field, _Component);
   var _super = _createSuper(Field);
@@ -173,3 +173,3 @@ function Field(props) {
   return Field;
-}(PureComponent);
+}(Component);
 Field.propTypes = {
@@ -176,0 +176,0 @@ id: PropTypes.string,

esm/components/rule/FuncSelect.js

@@ -13,3 +13,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -31,4 +31,4 @@ import PropTypes from "prop-types";
 //tip: this.props.value - right value, this.props.field - left value
-var FuncSelect = /*#__PURE__*/function (_PureComponent) {
-  _inherits(FuncSelect, _PureComponent);
+var FuncSelect = /*#__PURE__*/function (_Component) {
+  _inherits(FuncSelect, _Component);
   var _super = _createSuper(FuncSelect);
@@ -235,3 +235,3 @@ function FuncSelect(props) {
   return FuncSelect;
-}(PureComponent);
+}(Component);
 FuncSelect.propTypes = {
@@ -238,0 +238,0 @@ id: PropTypes.string,

esm/components/rule/FuncWidget.js

@@ -11,3 +11,3 @@ import _extends from "@babel/runtime/helpers/extends";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component, PureComponent } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -24,4 +24,4 @@ import PropTypes from "prop-types";
   setArgValueSrc = _Utils$FuncUtils.setArgValueSrc;
-var FuncWidget = /*#__PURE__*/function (_PureComponent) {
-  _inherits(FuncWidget, _PureComponent);
+var FuncWidget = /*#__PURE__*/function (_Component) {
+  _inherits(FuncWidget, _Component);
   var _super = _createSuper(FuncWidget);
@@ -230,3 +230,3 @@ function FuncWidget(props) {
   return FuncWidget;
-}(PureComponent);
+}(Component);
 FuncWidget.propTypes = {
@@ -248,4 +248,4 @@ id: PropTypes.string,
 export { FuncWidget as default };
-var ArgWidget = /*#__PURE__*/function (_PureComponent2) {
-  _inherits(ArgWidget, _PureComponent2);
+var ArgWidget = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ArgWidget, _PureComponent);
   var _super2 = _createSuper(ArgWidget);
@@ -252,0 +252,0 @@ function ArgWidget() {

esm/components/rule/Operator.js

@@ -12,3 +12,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -23,4 +23,4 @@ import PropTypes from "prop-types";
   getOperatorConfig = _Utils$ConfigUtils.getOperatorConfig;
-var Operator = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Operator, _PureComponent);
+var Operator = /*#__PURE__*/function (_Component) {
+  _inherits(Operator, _Component);
   var _super = _createSuper(Operator);
@@ -122,3 +122,3 @@ function Operator(props) {
   return Operator;
-}(PureComponent);
+}(Component);
 Operator.propTypes = {
@@ -125,0 +125,0 @@ id: PropTypes.string,

esm/components/rule/ValueField.js

@@ -12,3 +12,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -28,4 +28,4 @@ import PropTypes from "prop-types";
 //tip: this.props.value - right value, this.props.field - left value
-var ValueField = /*#__PURE__*/function (_PureComponent) {
-  _inherits(ValueField, _PureComponent);
+var ValueField = /*#__PURE__*/function (_Component) {
+  _inherits(ValueField, _Component);
   var _super = _createSuper(ValueField);
@@ -241,3 +241,3 @@ function ValueField(props) {
   return ValueField;
-}(PureComponent);
+}(Component);
 ValueField.propTypes = {
@@ -244,0 +244,0 @@ id: PropTypes.string,

esm/components/rule/Widget.js

@@ -10,3 +10,3 @@ import _extends from "@babel/runtime/helpers/extends";
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -33,4 +33,4 @@ import PropTypes from "prop-types";
 };
-var Widget = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Widget, _PureComponent);
+var Widget = /*#__PURE__*/function (_Component) {
+  _inherits(Widget, _Component);
   var _super = _createSuper(Widget);
@@ -286,3 +286,3 @@ function Widget(_props) {
   return Widget;
-}(PureComponent);
+}(Component);
 Widget.propTypes = {
@@ -289,0 +289,0 @@ config: PropTypes.object.isRequired,

esm/hooks/useListValuesAutocomplete.js

@@ -64,3 +64,3 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
   var asyncFectchCnt = React.useRef(0);
-  var componentIsMounted = React.useRef(true);
+  var componentIsMounted = React.useRef(0);
   var isSelectedLoadMore = React.useRef(false);
@@ -206,12 +206,5 @@
   var loadListValuesDebounced = React.useCallback(debounce(loadListValues, debounceTimeout), []);
-
-  // Unmount
   React.useEffect(function () {
-    return function () {
-      componentIsMounted.current = false;
-    };
-  }, []);
-
-  // Initial loading
-  React.useEffect(function () {
+    componentIsMounted.current++;
+    // Initial loading
     if (canInitialLoad && loadingCnt == 0 && asyncFectchCnt.current == 0) {
@@ -231,2 +224,6 @@ _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
     }
+    // Unmount
+    return function () {
+      componentIsMounted.current--;
+    };
   }, [canInitialLoad]);
@@ -233,0 +230,0 @@

esm/index.d.ts

@@ -16,3 +16,4 @@ /* eslint-disable no-extra-semi */
   WidgetProps, TextWidgetProps, DateTimeWidgetProps, BooleanWidgetProps, NumberWidgetProps, SelectWidgetProps, 
-  TreeSelectWidgetProps, RangeSliderWidgetProps, CaseValueWidgetProps
+  TreeSelectWidgetProps, RangeSliderWidgetProps, CaseValueWidgetProps,
+  Utils as CoreUtils
 } from "@react-awesome-query-builder/core";
@@ -214,3 +215,14 @@
 
+/////////////////
+// extend Utils
+/////////////////
 
+export interface Utils extends CoreUtils {
+  // ReactUtils: {
+  //   useOnPropsChanged(obj: ReactElement): void;
+  // },
+}
+
+export declare const Utils: Utils;
+
 /////////////////
@@ -217,0 +229,0 @@

esm/index.js

@@ -8,4 +8,7 @@ import Query from "./components/QueryContainer";
 
+// extend
+import Utils from "./utils";
+
 // re-export
 export * from "@react-awesome-query-builder/core";
-export { Query, Builder, BasicConfig, VanillaWidgets, CustomOperators, Hooks };
+export { Query, Builder, BasicConfig, VanillaWidgets, CustomOperators, Hooks, Utils };

esm/utils/reactUtils.js

@@ -55,15 +55,31 @@ import React from "react";
 };
-var canUseUnsafe = function canUseUnsafe() {
+var canUseOldComponentWillReceiveProps = function canUseOldComponentWillReceiveProps() {
   var v = React.version.split(".").map(parseInt.bind(null, 10));
-  return v[0] == 16 && v[1] >= 3 || v[0] > 16;
+  return v[0] == 16 && v[1] < 3 || v[0] < 16;
 };
 export var useOnPropsChanged = function useOnPropsChanged(obj) {
-  if (canUseUnsafe) {
-    obj.UNSAFE_componentWillReceiveProps = function (nextProps) {
+  // 1. `shouldComponentUpdate` should be called after `componentWillReceiveProps`
+  // 2. `shouldComponentUpdate` should not be used for PureComponent
+
+  // Because `useOnPropsChanged` can only be applied to `Component` not `PureComponent`, make it pure now
+  if (!obj.shouldComponentUpdate) {
+    obj.shouldComponentUpdate = pureShouldComponentUpdate(obj);
+  }
+  if (canUseOldComponentWillReceiveProps()) {
+    // Use old method
+    obj.componentWillReceiveProps = function (nextProps) {
       obj.onPropsChanged(nextProps);
     };
   } else {
-    obj.componentWillReceiveProps = function (nextProps) {
-      obj.onPropsChanged(nextProps);
+    // Simulate `componentWillReceiveProps` with `shouldComponentUpdate`
+    var origShouldComponentUpdate = obj.shouldComponentUpdate;
+    var newShouldComponentUpdate = function newShouldComponentUpdate(nextProps, nextState) {
+      var shouldNotify = !shallowEqual(obj.props, nextProps);
+      if (shouldNotify) {
+        obj.onPropsChanged(nextProps);
+      }
+      var shouldUpdate = origShouldComponentUpdate.call(obj, nextProps, nextState);
+      return shouldUpdate;
     };
+    obj.shouldComponentUpdate = newShouldComponentUpdate.bind(obj);
   }
@@ -70,0 +86,0 @@ };

esm/utils/validation.js

@@ -8,3 +8,5 @@ import { immutableEqual } from "../utils/stuff";
   var configId;
-  return function (config, tree, oldConfig) {
+  return function (config, tree) {
+    var oldConfig = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+    var sanitizeTree = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
     if (!tree) {
@@ -18,3 +20,7 @@ return null;
       originalTree = tree;
-      validatedTree = validateAndFixTree(tree, null, config, oldConfig || config);
+      if (sanitizeTree === false) {
+        validatedTree = validateAndFixTree(tree, null, config, oldConfig || config, false, false);
+      } else {
+        validatedTree = validateAndFixTree(tree, null, config, oldConfig || config);
+      }
       return validatedTree;
@@ -21,0 +27,0 @@ }

modules/components/Builder.jsx

@@ -20,3 +20,3 @@ import { Utils } from "@react-awesome-query-builder/core";
     const prevProps = this.props;
-    let should = pureShouldComponentUpdate(this)(nextProps, nextState);
+    let should = this.pureShouldComponentUpdate(nextProps, nextState);
     if (should) {
@@ -41,2 +41,3 @@ let chs = [];
     super(props);
+    this.pureShouldComponentUpdate = pureShouldComponentUpdate(this);
 
@@ -43,0 +44,0 @@ this._updPath(props);

modules/components/containers/GroupContainer.jsx

@@ -36,2 +36,3 @@ import React, { Component } from "react";
       super(props);
+      this.pureShouldComponentUpdate = pureShouldComponentUpdate(this);
       useOnPropsChanged(this);
@@ -48,3 +49,3 @@
 
-      let should = pureShouldComponentUpdate(this)(nextProps, nextState);
+      let should = this.pureShouldComponentUpdate(nextProps, nextState);
       if (should) {
@@ -51,0 +52,0 @@ if (prevState == nextState && prevProps != nextProps) {

modules/components/containers/RuleContainer.jsx

@@ -38,2 +38,3 @@ import React, { Component } from "react";
       super(props);
+      this.pureShouldComponentUpdate = pureShouldComponentUpdate(this);
       
@@ -77,3 +78,3 @@ this.dummyFn.isDummyFn = true;
 
-      let should = pureShouldComponentUpdate(this)(nextProps, nextState);
+      let should = this.pureShouldComponentUpdate(nextProps, nextState);
       if (should) {
@@ -80,0 +81,0 @@ if (prevState == nextState && prevProps != nextProps) {

modules/components/containers/SortableContainer.jsx

@@ -25,2 +25,3 @@ import React, { Component } from "react";
       super(props);
+      this.pureShouldComponentUpdate = pureShouldComponentUpdate(this);
       useOnPropsChanged(this);
@@ -39,3 +40,3 @@
 
-      let should = pureShouldComponentUpdate(this)(nextProps, nextState);
+      let should = this.pureShouldComponentUpdate(nextProps, nextState);
       if (should) {
@@ -42,0 +43,0 @@ if (prevState == nextState && prevProps != nextProps) {

modules/components/item/Group.jsx

@@ -1,2 +0,2 @@
-import React, { Component, PureComponent } from "react";
+import React, { Component } from "react";
 import PropTypes from "prop-types";
@@ -14,3 +14,3 @@ import startsWith from "lodash/startsWith";
 
-export class BasicGroup extends PureComponent {
+export class BasicGroup extends Component {
   static propTypes = {
@@ -17,0 +17,0 @@ //tree: PropTypes.instanceOf(Immutable.Map).isRequired,

modules/components/item/Rule.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -17,3 +17,3 @@ import PropTypes from "prop-types";
 
-class Rule extends PureComponent {
+class Rule extends Component {
   static propTypes = {
@@ -20,0 +20,0 @@ id: PropTypes.string.isRequired,

modules/components/QueryContainer.jsx

@@ -43,11 +43,18 @@ import React, { Component, PureComponent } from "react";
 
-    const reducer = treeStoreReducer(config, validatedTree, this.getMemoizedTree);
+    const reducer = treeStoreReducer(config, validatedTree, this.getMemoizedTree, this.setLastTree);
     const store = createStore(reducer);
 
+    this.config = config;
     this.state = {
-      store,
-      config
+      store
     };
   }
 
+  setLastTree = (lastTree) => {
+    if (this.prevTree) {
+      this.prevprevTree = this.prevTree;
+    }
+    this.prevTree = lastTree;
+  };
+
   shouldComponentUpdate = liteShouldComponentUpdate(this, {
@@ -59,3 +66,3 @@ value: (nextValue, prevValue, state) => { return false; }
     // compare configs
-    const oldConfig = this.state.config;
+    const oldConfig = this.config;
     const nextConfig = this.getMemoizedConfig(nextProps);
@@ -68,14 +75,16 @@ const isConfigChanged = oldConfig !== nextConfig;
     const currentTree = isTreeChanged ? nextProps.value || defaultRoot(nextProps) : storeValue;
+    const isTreeTrulyChanged = isTreeChanged && !immutableEqual(nextProps.value, this.prevTree) && !immutableEqual(nextProps.value, this.prevprevTree);
+    const sanitizeTree = isTreeTrulyChanged || isConfigChanged;
 
     if (isConfigChanged) {
-      this.setState({config: nextConfig});
+      this.config = nextConfig;
     }
     
     if (isTreeChanged || isConfigChanged) {
-      const validatedTree = this.getMemoizedTree(nextConfig, currentTree, oldConfig);
-      return Promise.resolve().then(() => {
-        this.state.store.dispatch(
-          actions.tree.setTree(nextConfig, validatedTree)
-        );
-      });
+      const validatedTree = this.getMemoizedTree(nextConfig, currentTree, oldConfig, sanitizeTree);
+      //return Promise.resolve().then(() => {
+      this.state.store.dispatch(
+        actions.tree.setTree(nextConfig, validatedTree)
+      );
+      //});
     }
@@ -87,3 +96,4 @@ }
     const {renderBuilder, get_children, onChange, settings} = this.props;
-    const {config, store} = this.state;
+    const {store} = this.state;
+    const config = this.config;
     const {renderProvider: QueryWrapper} = settings;
@@ -90,0 +100,0 @@

modules/components/rule/Field.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -12,3 +12,3 @@ import PropTypes from "prop-types";
 
-export default class Field extends PureComponent {
+export default class Field extends Component {
   static propTypes = {
@@ -15,0 +15,0 @@ id: PropTypes.string,

modules/components/rule/FuncSelect.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -14,3 +14,3 @@ import PropTypes from "prop-types";
 
-export default class FuncSelect extends PureComponent {
+export default class FuncSelect extends Component {
   static propTypes = {
@@ -17,0 +17,0 @@ id: PropTypes.string,

modules/components/rule/FuncWidget.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component, PureComponent } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -12,3 +12,3 @@ import PropTypes from "prop-types";
 
-export default class FuncWidget extends PureComponent {
+export default class FuncWidget extends Component {
   static propTypes = {
@@ -15,0 +15,0 @@ id: PropTypes.string,

modules/components/rule/Operator.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -11,3 +11,3 @@ import PropTypes from "prop-types";
 
-export default class Operator extends PureComponent {
+export default class Operator extends Component {
   static propTypes = {
@@ -14,0 +14,0 @@ id: PropTypes.string,

modules/components/rule/ValueField.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -14,3 +14,3 @@ import PropTypes from "prop-types";
 
-export default class ValueField extends PureComponent {
+export default class ValueField extends Component {
   static propTypes = {
@@ -17,0 +17,0 @@ id: PropTypes.string,

modules/components/rule/Widget.jsx

@@ -1,2 +0,2 @@
-import React, { PureComponent } from "react";
+import React, { Component } from "react";
 import { Utils } from "@react-awesome-query-builder/core";
@@ -16,3 +16,3 @@ import PropTypes from "prop-types";
 
-export default class Widget extends PureComponent {
+export default class Widget extends Component {
   static propTypes = {
@@ -19,0 +19,0 @@ config: PropTypes.object.isRequired,

modules/hooks/useListValuesAutocomplete.jsx

@@ -32,3 +32,3 @@ import React from "react";
   const asyncFectchCnt = React.useRef(0);
-  const componentIsMounted = React.useRef(true);
+  const componentIsMounted = React.useRef(0);
   const isSelectedLoadMore = React.useRef(false);
@@ -116,11 +116,5 @@
 
-  // Unmount
   React.useEffect(() => {
-    return () => {
-      componentIsMounted.current = false;
-    };
-  }, []);
-
-  // Initial loading
-  React.useEffect(() => {
+    componentIsMounted.current++;
+    // Initial loading
     if (canInitialLoad && loadingCnt == 0 && asyncFectchCnt.current == 0) {
@@ -131,2 +125,6 @@ (async () => {
     }
+    // Unmount
+    return () => {
+      componentIsMounted.current--;
+    };
   }, [canInitialLoad]);
@@ -133,0 +131,0 @@

modules/index.d.ts

@@ -16,3 +16,4 @@ /* eslint-disable no-extra-semi */
   WidgetProps, TextWidgetProps, DateTimeWidgetProps, BooleanWidgetProps, NumberWidgetProps, SelectWidgetProps, 
-  TreeSelectWidgetProps, RangeSliderWidgetProps, CaseValueWidgetProps
+  TreeSelectWidgetProps, RangeSliderWidgetProps, CaseValueWidgetProps,
+  Utils as CoreUtils
 } from "@react-awesome-query-builder/core";
@@ -214,3 +215,14 @@
 
+/////////////////
+// extend Utils
+/////////////////
 
+export interface Utils extends CoreUtils {
+  // ReactUtils: {
+  //   useOnPropsChanged(obj: ReactElement): void;
+  // },
+}
+
+export declare const Utils: Utils;
+
 /////////////////
@@ -217,0 +229,0 @@

modules/index.jsx

@@ -9,6 +9,9 @@ import Query from "./components/QueryContainer";
 
+// extend
+import Utils from "./utils";
+
 // re-export
 export * from "@react-awesome-query-builder/core";
 
-export {Query, Builder, BasicConfig, VanillaWidgets, CustomOperators, Hooks};
+export {Query, Builder, BasicConfig, VanillaWidgets, CustomOperators, Hooks, Utils};
 

modules/utils/reactUtils.js

@@ -69,16 +69,33 @@ import React from "react";
 
-const canUseUnsafe = () => {
+const canUseOldComponentWillReceiveProps = () => {
   const v = React.version.split(".").map(parseInt.bind(null, 10));
-  return v[0] == 16 && v[1] >= 3 || v[0] > 16;
+  return v[0] == 16 && v[1] < 3 || v[0] < 16;
 };
 
 export const useOnPropsChanged = (obj) => {
-  if (canUseUnsafe) {
-    obj.UNSAFE_componentWillReceiveProps = (nextProps) => {
+  // 1. `shouldComponentUpdate` should be called after `componentWillReceiveProps`
+  // 2. `shouldComponentUpdate` should not be used for PureComponent
+
+  // Because `useOnPropsChanged` can only be applied to `Component` not `PureComponent`, make it pure now
+  if (!obj.shouldComponentUpdate) {
+    obj.shouldComponentUpdate = pureShouldComponentUpdate(obj);
+  }
+
+  if (canUseOldComponentWillReceiveProps()) {
+    // Use old method
+    obj.componentWillReceiveProps = (nextProps) => {
       obj.onPropsChanged(nextProps);
     };
   } else {
-    obj.componentWillReceiveProps = (nextProps) => {
-      obj.onPropsChanged(nextProps);
+    // Simulate `componentWillReceiveProps` with `shouldComponentUpdate`
+    const origShouldComponentUpdate = obj.shouldComponentUpdate;
+    const newShouldComponentUpdate = function(nextProps, nextState) {
+      const shouldNotify = !shallowEqual(obj.props, nextProps);
+      if (shouldNotify) {
+        obj.onPropsChanged(nextProps);
+      }
+      const shouldUpdate = origShouldComponentUpdate.call(obj, nextProps, nextState);
+      return shouldUpdate;
     };
+    obj.shouldComponentUpdate = newShouldComponentUpdate.bind(obj);
   }
@@ -85,0 +102,0 @@ };

modules/utils/validation.js

@@ -10,3 +10,3 @@ import {immutableEqual} from "../utils/stuff";
 
-  return (config, tree, oldConfig) => {
+  return (config, tree, oldConfig = undefined, sanitizeTree = true) => {
     if (!tree) {
@@ -20,3 +20,7 @@ return null;
       originalTree = tree;
-      validatedTree = validateAndFixTree(tree, null, config, oldConfig || config);
+      if (sanitizeTree === false) {
+        validatedTree = validateAndFixTree(tree, null, config, oldConfig || config, false, false);
+      } else {
+        validatedTree = validateAndFixTree(tree, null, config, oldConfig || config);
+      }
       return validatedTree;
@@ -23,0 +27,0 @@ }

package.json

 {
   "name": "@react-awesome-query-builder/ui",
-  "version": "6.1.2",
+  "version": "6.1.3",
   "description": "User-friendly query builder for React. Core React UI",
@@ -56,3 +56,3 @@ "keywords": [
     "redux": "^4.2.0",
-    "@react-awesome-query-builder/core": "^6.1.2"
+    "@react-awesome-query-builder/core": "^6.1.3"
   },
@@ -59,0 +59,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

971579

increased by1.11%

Number of package files

213

increased by1.43%

Lines of code

21383

increased by0.79%

Dependency changes

• Updated@react-awesome-query-builder/core@^6.1.3