intelicoreact 0.2.35 → 0.2.38

package/dist/Atomic/FormElements/InputMask/InputMask.js

@@ -132,23 +132,30 @@ function InputMask() {
   var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
       isInitValue = _useState8[0],
-      setIsInitValue = _useState8[1]; // ERRORS MANAGEMENT FUNCTIONS | START //
+      setIsInitValue = _useState8[1];
 
+  var inputThrottlingTimeout = 20;
 
   var _useState9 = (0, _react.useState)(false),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      isError = _useState10[0],
-      setError = _useState10[1];
+      isInputThrottled = _useState10[0],
+      setIsInputThrottled = _useState10[1]; // ERRORS MANAGEMENT FUNCTIONS | START //
+
 
   var _useState11 = (0, _react.useState)(false),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      blinkError = _useState12[0],
-      setBlinkError = _useState12[1];
+      isError = _useState12[0],
+      setError = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(errors.default),
+  var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      errorMessage = _useState14[0],
-      setErrorMessage = _useState14[1];
+      blinkError = _useState14[0],
+      setBlinkError = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(errors.default),
+      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
+      errorMessage = _useState16[0],
+      setErrorMessage = _useState16[1];
 
   var clearErrorMessage = function clearErrorMessage() {
     return setErrorMessage(errors.default);
@@ -156,32 +163,32 @@ function InputMask() {
   // SELECTION MANAGEMENT FUNCTIONS | START //
 
 
-  var _useState15 = (0, _react.useState)(false),
-      _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      isSelecting = _useState16[0],
-      setIsSelecting = _useState16[1];
-
-  var _useState17 = (0, _react.useState)(''),
+  var _useState17 = (0, _react.useState)(false),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      selectedText = _useState18[0],
-      setSelectedText = _useState18[1];
+      isSelecting = _useState18[0],
+      setIsSelecting = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(null),
+  var _useState19 = (0, _react.useState)(''),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      selectionStartX = _useState20[0],
-      setSelectionStartX = _useState20[1];
+      selectedText = _useState20[0],
+      setSelectedText = _useState20[1];
 
   var _useState21 = (0, _react.useState)(null),
       _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-      selectionEndX = _useState22[0],
-      setSelectionEndX = _useState22[1]; // SELECTION MANAGEMENT FUNCTIONS | END //
+      selectionStartX = _useState22[0],
+      setSelectionStartX = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(null),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      selectionEndX = _useState24[0],
+      setSelectionEndX = _useState24[1]; // SELECTION MANAGEMENT FUNCTIONS | END //
   // SERVICE WATCHERS MANAGEMENT FUNCTIONS | START //
 
 
-  var _useState23 = (0, _react.useState)([]),
-      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-      serviceWatchers = _useState24[0],
-      setServiceWatchers = _useState24[1];
+  var _useState25 = (0, _react.useState)([]),
+      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
+      serviceWatchers = _useState26[0],
+      setServiceWatchers = _useState26[1];
 
   var pushServiceWatcher = function pushServiceWatcher(fn) {
     return setServiceWatchers(function (state) {
@@ -211,10 +218,25 @@ function InputMask() {
   }, [serviceWatchers]); // SERVICE WATCHERS MANAGEMENT FUNCTIONS | END //
   // INNER VALUE MANAGEMENT FUNCTIONS | START //
 
-  var _useState25 = (0, _react.useState)([]),
-      _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-      innerValue = _useState26[0],
-      setInnerValue = _useState26[1];
+  var _useState27 = (0, _react.useState)([]),
+      _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
+      innerValue = _useState28[0],
+      setInnerValue = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(''),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      undoValue = _useState30[0],
+      setUndoValue = _useState30[1];
+
+  var _useState31 = (0, _react.useState)(null),
+      _useState32 = (0, _slicedToArray2.default)(_useState31, 2),
+      redoValue = _useState32[0],
+      setRedoValue = _useState32[1];
+
+  var _useState33 = (0, _react.useState)(false),
+      _useState34 = (0, _slicedToArray2.default)(_useState33, 2),
+      isUndoValueBlocked = _useState34[0],
+      setIsUndoValueBlocked = _useState34[1];
 
   var addInnerValueChar = function addInnerValueChar(_ref2) {
     var char = _ref2.char,
@@ -468,13 +490,23 @@ function InputMask() {
   };
 
   var onArrowRightDown = function onArrowRightDown(e, i) {
-    var key = (e === null || e === void 0 ? void 0 : e.key) || null; // If Current Index Equals LastTyped Index in MaskAsPlaceholder Mode
+    var key = (e === null || e === void 0 ? void 0 : e.key) || null;
+
+    if (maskAsPlaceholder && i > getLastTypedIndex()) {
+      return setFocusOnChar(getLastTypedIndex() + 1, i);
+    } // If Current Index Equals LastTyped Index in MaskAsPlaceholder Mode
+
 
     if (maskAsPlaceholder && i === getLastTypedIndex() && key === 'ArrowRight') return false;
     return setFocusOnChar(i + 1, i);
   };
 
   var onBackspaceDown = function onBackspaceDown(e, i) {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+
     if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
     var prevIndex = i - 1;
     var charObj = getCharByIndex(prevIndex);
@@ -486,8 +518,7 @@ function InputMask() {
       var newText = innerValue.slice(0, prevIndex).concat(innerValue.slice(i, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce(function (text, _ref12) {
         var char = _ref12.char;
         return text.concat(char);
-      }, ''); // const newText = getInnerValueAsString().substring(0, prevIndex) + getInnerValueAsString().substring(i, maxEditableLen !== -1 ? maxEditableLen : getInnerValueAsString().length);
-
+      }, '');
       resetInnerValue();
 
       _onPaste({
@@ -504,6 +535,11 @@ function InputMask() {
   };
 
   var onDeleteDown = function onDeleteDown(e, i) {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+
     if ((0, _functions.getSelectionText)().length) return deleteSelectedText();
     var nextIndex = i + 1;
     var charObj = getCharByIndex(i);
@@ -517,8 +553,7 @@ function InputMask() {
       var newText = innerValue.slice(0, i).concat(innerValue.slice(nextIndex, maxEditableLen !== -1 ? maxEditableLen : innerValue.length)).reduce(function (text, _ref13) {
         var char = _ref13.char;
         return text.concat(char);
-      }, ''); // const newText = getInnerValueAsString().substring(0, i) + getInnerValueAsString().substring(nextIndex, maxEditableLen !== -1 ? maxEditableLen : getInnerValueAsString().length);
-
+      }, '');
       resetInnerValue();
 
       _onPaste({
@@ -589,6 +624,8 @@ function InputMask() {
       var _ref15,
           _ref15$disableErrors,
           disableErrors,
+          _ref15$disableIsSelec,
+          disableIsSelectingCheck,
           key,
           keyCode,
           charObj,
@@ -604,24 +641,50 @@ function InputMask() {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              _ref15 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref15$disableErrors = _ref15.disableErrors, disableErrors = _ref15$disableErrors === void 0 ? false : _ref15$disableErrors;
+              _ref15 = _args.length > 2 && _args[2] !== undefined ? _args[2] : {}, _ref15$disableErrors = _ref15.disableErrors, disableErrors = _ref15$disableErrors === void 0 ? false : _ref15$disableErrors, _ref15$disableIsSelec = _ref15.disableIsSelectingCheck, disableIsSelectingCheck = _ref15$disableIsSelec === void 0 ? false : _ref15$disableIsSelec;
+
+              if (!(isSelecting && !disableIsSelectingCheck)) {
+                _context.next = 7;
+                break;
+              }
 
+              deleteSelectedText();
+              (0, _functions.resetSelectionText)();
+              setIsSelecting(false);
+              setTimeout(function () {
+                return handleKeyDown(e, getSelectStartIndex(), {
+                  disableErrors: disableErrors,
+                  disableIsSelectingCheck: true
+                });
+              }, 10);
+              return _context.abrupt("return", null);
+
+            case 7:
               try {
                 e.stopPropagation();
                 e.preventDefault();
               } catch (e) {}
 
+              if (!isInputThrottled) {
+                _context.next = 10;
+                break;
+              }
+
+              return _context.abrupt("return", false);
+
+            case 10:
+              setIsInputThrottled(true);
               key = e.key, keyCode = e.keyCode;
               charObj = getCharByIndex(i); // Android Text Typing FIX
               // eslint-disable-next-line eqeqeq
 
               if (!(keyCode == _config.ANDROID_CHROME_TEXT_CODE)) {
-                _context.next = 9;
+                _context.next = 18;
                 break;
               }
 
               charRef = charObj.ref;
-              _context.next = 8;
+              _context.next = 17;
               return new Promise(function (resolve) {
                 setTimeout(function () {
                   var _charRef$current, _charRef$current$inne;
@@ -643,74 +706,74 @@ function InputMask() {
                 }, 1);
               });
 
-            case 8:
+            case 17:
               key = _context.sent;
 
-            case 9:
+            case 18:
               if (!(!charObj || i === innerValue.length - 1)) {
-                _context.next = 11;
+                _context.next = 20;
                 break;
               }
 
               return _context.abrupt("return", false);
 
-            case 11:
+            case 20:
               if (!(maskAsPlaceholder && i > getLastTypedIndex() + 1)) {
-                _context.next = 15;
+                _context.next = 24;
                 break;
               }
 
-              _context.next = 14;
+              _context.next = 23;
               return handleKeyDown(e, getLastTypedIndex() === 0 ? 0 : getLastTypedIndex() + 1, {
                 disableErrors: disableErrors
               });
 
-            case 14:
+            case 23:
               return _context.abrupt("return", _context.sent);
 
-            case 15:
+            case 24:
               isSpecialSymbol = charObj.isSpecialSymbol, maskChar = charObj.maskChar, isReadOnly = charObj.isReadOnly;
 
               if (!isReadOnly) {
-                _context.next = 18;
+                _context.next = 27;
                 break;
               }
 
               return _context.abrupt("return", false);
 
-            case 18:
+            case 27:
               if (!(maskChar === _config.SPACE_CHAR)) {
-                _context.next = 22;
+                _context.next = 31;
                 break;
               }
 
-              _context.next = 21;
+              _context.next = 30;
               return handleKeyDown(e, i + 1);
 
-            case 21:
+            case 30:
               return _context.abrupt("return", _context.sent);
 
-            case 22:
+            case 31:
               if (!(isSpecialSymbol && maskChar !== key)) {
-                _context.next = 24;
+                _context.next = 33;
                 break;
               }
 
               return _context.abrupt("return", false);
 
-            case 24:
+            case 33:
               if (isValidChar({
                 char: key,
                 i: i,
                 disableErrors: disableErrors
               })) {
-                _context.next = 26;
+                _context.next = 35;
                 break;
               }
 
               return _context.abrupt("return", false);
 
-            case 26:
+            case 35:
               if (maskAsPlaceholder && ((_getClearInnerValueAs = getClearInnerValueAsString(i)) === null || _getClearInnerValueAs === void 0 ? void 0 : _getClearInnerValueAs.length) !== 0) {
                 fromIndex = i + 1;
                 text = innerValue.slice().filter(function (_ref16, index) {
@@ -726,13 +789,16 @@ function InputMask() {
                 }, fromIndex, false);
               }
 
+              setIsUndoValueBlocked(false);
               updateInnerValueChar({
                 char: key
               }, i);
-              onArrowRightDown(e, i);
+              setTimeout(function () {
+                return onArrowRightDown(e, i);
+              }, 1);
               return _context.abrupt("return", true);
 
-            case 30:
+            case 40:
             case "end":
               return _context.stop();
           }
@@ -753,6 +819,29 @@ function InputMask() {
       //Ctrl + A
       case 65:
         selectAllText(e);
+        break;
+      //Ctrl + Y
+
+      case 89:
+        if (redoValue) {
+          resetInnerValue();
+
+          _onPaste({
+            text: redoValue
+          }, 0, true);
+        }
+
+        break;
+      //Ctrl + Z
+
+      case 90:
+        setRedoValue(getClearInnerValueAsString());
+        resetInnerValue();
+
+        _onPaste({
+          text: undoValue
+        }, 0, true);
+
         break;
     }
   };
@@ -765,6 +854,7 @@ function InputMask() {
           key,
           ctrlKey,
           altKey,
+          target,
           handleResult,
           _args2 = arguments;
       return _regenerator.default.wrap(function _callee2$(_context2) {
@@ -773,7 +863,7 @@ function InputMask() {
             case 0:
               i = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : null;
 
-              if (isFocused) {
+              if (!(!isFocused && !isSelecting)) {
                 _context2.next = 3;
                 break;
               }
@@ -782,8 +872,10 @@ function InputMask() {
 
             case 3:
               key = e.key, ctrlKey = e.ctrlKey, altKey = e.altKey;
-              e.target = ((_innerValue$0$ref = innerValue[0].ref) === null || _innerValue$0$ref === void 0 ? void 0 : _innerValue$0$ref.current) || e.target;
-              onKeyDownProp(e, i);
+              target = ((_innerValue$0$ref = innerValue[0].ref) === null || _innerValue$0$ref === void 0 ? void 0 : _innerValue$0$ref.current) || e.target;
+              onKeyDownProp(_objectSpread(_objectSpread({}, e), {}, {
+                target: target
+              }), i);
 
               if (!(_indexConstants.KEYBOARD_SERVICE_KEYS.includes(key) && _config.EXCLUDED_KEYS.includes(key))) {
                 _context2.next = 8;
@@ -856,10 +948,16 @@ function InputMask() {
 
     if (isSelecting && (selectedText.length || (0, _functions.getSelectionText)().length) && !ignoreIsSelecting) return false;
     setFocused(true);
+    if (e.detail === 2) selectAllText(e);
     if (typeof cb === 'function') cb(e);
   };
 
   var onCharClick = function onCharClick(e, i) {
+    if (e.detail == 2) {
+      selectAllText(e);
+      return true;
+    }
+
     var _getCharByIndex2 = getCharByIndex(i),
         char = _getCharByIndex2.char,
         maskChar = _getCharByIndex2.maskChar;
@@ -1023,11 +1121,14 @@ function InputMask() {
     } catch (error) {}
 
     (0, _functions.copyToClipboard)((0, _functions.getSelectionText)());
-    setIsSelecting(false);
-    setFocusOnChar(i, 0);
   };
 
   var _onCut = function onCut(e, i) {
+    if (!isUndoValueBlocked) {
+      setUndoValue(getClearInnerValueAsString());
+      setIsUndoValueBlocked(true);
+    }
+
     try {
       e.stopPropagation();
       e.preventDefault();
@@ -1067,7 +1168,7 @@ function InputMask() {
     var _getClearInnerValueAs2;
 
     var selStartInd = getSelectStartIndex();
-    if (selStartInd === null || selStartInd === undefined || selStartInd < 0) return false;
+    if (selStartInd === null || selStartInd === undefined) return false;
     var selEndInd = (0, _functions.getSelectionText)().length + selStartInd;
     (0, _functions.resetSelectionText)();
 
@@ -1100,9 +1201,15 @@ function InputMask() {
     return true;
   }; // FUNCTIONS | END //
   ///--- OBSERVERS ---///
-  //Render Mask
+  // Input Throttling
 
 
+  (0, _react.useEffect)(function () {
+    if (isInputThrottled) setTimeout(function () {
+      return setIsInputThrottled(false);
+    }, inputThrottlingTimeout);
+  }, [isInputThrottled]); //Render Mask
+
   (0, _react.useEffect)(function () {
     setInnerValue([]);
     setMaskRendered(false);
@@ -1161,7 +1268,11 @@ function InputMask() {
     }
 
     setIsInitValue(true);
-  }, [isMaskRendered, value, isInitValue]); // Focus Observer
+  }, [isMaskRendered, value, isInitValue]);
+  (0, _react.useEffect)(function () {
+    if (!isInitValue) return false;
+    setUndoValue(getClearInnerValueAsString());
+  }, [isInitValue]); // Focus Observer
 
   (0, _react.useEffect)(function () {
     if (!isFocused) {
@@ -1203,9 +1314,7 @@ function InputMask() {
     if (!isMouseDown && isSelecting) {
       document.addEventListener('keydown', function (e) {
         return pushServiceWatcher(function () {
-          _onKeyDown(e);
-
-          setIsSelecting(false);
+          return _onKeyDown(e);
         });
       }, {
         once: true
@@ -1217,23 +1326,7 @@ function InputMask() {
   (0, _react.useEffect)(function () {
     document.addEventListener('mouseup', function () {
       setIsMouseDown(function (isMouseDown) {
-        document.addEventListener('keydown', function (e) {
-          return pushServiceWatcher(function () {
-            return _onKeyDown(e);
-          });
-        }, {
-          once: true
-        });
-
-        if (isMouseDown) {
-          setSelectedText((0, _functions.getSelectionText)());
-          document.addEventListener('click', function () {
-            setIsSelecting(false);
-          }, {
-            once: true
-          });
-        }
-
+        if (isMouseDown) setSelectedText((0, _functions.getSelectionText)());
         return false;
       });
     });
@@ -1271,7 +1364,7 @@ function InputMask() {
       onKeyDown: function onKeyDown(e) {
         return _onKeyDown(e, i);
       },
-      onChange: function onChange() {},
+      onChange: cancelDefaultAction,
       contentEditable: !isSelecting,
       inputMode: (0, _functions.isDigitMaskChar)(i !== innerValue.length - 1 ? maskChar : prevChar === null || prevChar === void 0 ? void 0 : prevChar.maskChar) ? 'numeric' : 'text',
       suppressContentEditableWarning: true,
@@ -1286,6 +1379,8 @@ function InputMask() {
       },
       ref: ref,
       onDoubleClick: function onDoubleClick(e) {
+        e.stopPropagation();
+        e.preventDefault();
         setIsSelecting(true);
         setTimeout(function () {
           return selectAllText(e, i);
@@ -1345,8 +1440,8 @@ function InputMask() {
       },
       onMouseMove: function onMouseMove(e) {
         return cancelDefaultAction(e, onMouseDownMove);
-      },
-      onMouseUp: cancelDefaultAction,
+      } // onMouseUp={cancelDefaultAction}
+      ,
       onClick: onWrapperClick,
       onBlur: onBlur
     }, showHint && isHintLeft && /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/InputMask/functions.js

@@ -38,11 +38,10 @@ var copyToClipboard = function copyToClipboard(str) {
 exports.copyToClipboard = copyToClipboard;
 
 var selectElementContents = function selectElementContents(el) {
-  var range = document.createRange();
-  range.selectNodeContents(el);
+  var startOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var endOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : -1;
   var sel = window.getSelection();
-  sel.removeAllRanges();
-  sel.addRange(range);
+  sel.selectAllChildren(el);
 };
 
 exports.selectElementContents = selectElementContents;

package/dist/Atomic/UI/Chart/Chart.js

@@ -25,12 +25,12 @@ var _helpers = require("chart.js/helpers");
 
 var ChartComponents = _interopRequireWildcard(require("react-chartjs-2"));
 
-var _optionsConstructor = require("./partial/optionsConstructor");
-
 var _utils = require("./partial/utils");
 
 var _Chart = require("./partial/Chart.constants");
 
+var _utils2 = require("../../../Functions/utils");
+
 var _ChartTypeSwitcherIcon = _interopRequireDefault(require("./partial/ChartTypeSwitcherIcon/ChartTypeSwitcherIcon"));
 
 require("./Chart.scss");
@@ -53,15 +53,11 @@ var Chart = function Chart(_ref) {
       data = _ref.data;
   if (!data) return null;
 
-  var correctModelKey = function correctModelKey(key) {
-    return key && _Chart.CHART_TYPES.includes((0, _utils.getChartTypeKey)(key)) ? key : _Chart.DEFAULT_CHART_MODEL;
-  };
-
   var _ref2 = description || {},
       label = _ref2.label,
       value = _ref2.value;
 
-  var _useState = (0, _react.useState)(correctModelKey(initialModel)),
+  var _useState = (0, _react.useState)(_Chart.DEFAULT_CHART_MODEL),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       model = _useState2[0],
       setModel = _useState2[1];
@@ -72,46 +68,46 @@ var Chart = function Chart(_ref) {
       setLocalData = _useState4[1];
 
   var chartRef = (0, _react.useRef)(null);
-
-  var isExcludeDescription = _optionsConstructor.componentOptions.disableDescriptionsFor.includes(model);
-
-  var isExcludeChartTypeSwitcher = _optionsConstructor.componentOptions.disableChartTypeSwitcherFor.includes(model);
-
-  var getChartOptions = function getChartOptions(currentModel) {
-    return customOptions || (0, _utils.getOptions)(currentModel);
-  };
-
+  var charContainertRef = (0, _react.useRef)(null);
+  var options = (0, _react.useMemo)(function () {
+    return customOptions || (0, _utils.getOptions)(model);
+  }, [customOptions, model]);
+  var notLibraryOptionsOptions = (0, _react.useMemo)(function () {
+    return customOptions ? customOptions === null || customOptions === void 0 ? void 0 : customOptions.notLibraryOptions : (0, _utils.getNotLibraryOptionsOptions)(model);
+  }, [customOptions, model]);
   var ChartComponent = (0, _react.useCallback)(function (props) {
     var Component = ChartComponents[(0, _utils.getChartTypeKey)(model)];
     return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       ref: chartRef
     }, props));
   }, [model]);
+
+  var isExcludeDescription = _Chart.COMPONENT_OPTIONS.disableDescriptionsFor.includes(model);
+
+  var isExcludeChartTypeSwitcher = _Chart.COMPONENT_OPTIONS.disableChartTypeSwitcherFor.includes(model);
+
   (0, _react.useLayoutEffect)(function () {
-    setModel(correctModelKey(initialModel));
-  }, [initialModel]);
-  (0, _react.useLayoutEffect)(function () {
-    if (setModelExternalValue) setModelExternalValue(correctModelKey(model));
+    if (setModelExternalValue && model !== 'emptyLayout') setModelExternalValue(model);
   }, [model]);
-  (0, _react.useEffect)(function () {
-    var _getChartOptions = getChartOptions(model),
-        _getChartOptions$notL = _getChartOptions.notLibraryOptions;
-
-    _getChartOptions$notL = _getChartOptions$notL === void 0 ? {} : _getChartOptions$notL;
-    var setCanvasDimensions = _getChartOptions$notL.setCanvasDimensions;
+  (0, _react.useLayoutEffect)(function () {
+    var _ref3 = notLibraryOptionsOptions || {},
+        setCanvasDimensions = _ref3.setCanvasDimensions;
 
-    if (chartRef.current) {
+    if (charContainertRef.current) {
       var _setCanvasDimensions$, _setCanvasDimensions$2;
 
-      chartRef.current.canvas.parentNode.style.width = (_setCanvasDimensions$ = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.width) !== null && _setCanvasDimensions$ !== void 0 ? _setCanvasDimensions$ : '';
-      chartRef.current.canvas.parentNode.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : '';
+      charContainertRef.current.style.width = (_setCanvasDimensions$ = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.width) !== null && _setCanvasDimensions$ !== void 0 ? _setCanvasDimensions$ : '';
+      charContainertRef.current.style.height = (_setCanvasDimensions$2 = setCanvasDimensions === null || setCanvasDimensions === void 0 ? void 0 : setCanvasDimensions.height) !== null && _setCanvasDimensions$2 !== void 0 ? _setCanvasDimensions$2 : '';
     }
-  }, [model]);
+  }, [notLibraryOptionsOptions]);
+  (0, _react.useEffect)(function () {
+    return setModel((0, _utils.correctModelKey)(initialModel));
+  }, [initialModel]);
   (0, _react.useEffect)(function () {
-    return setLocalData((0, _utils.prepareData)(model, data, chartRef.current));
-  }, [model, data, chartRef]);
+    return setLocalData((0, _utils.prepareData)(model, (0, _utils2.clone)(data), chartRef.current));
+  }, [model, data]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_icon-mode"), _optionsConstructor.iconModels.includes(model)), className)
+    className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_icon-mode"), _Chart.ICON_MODELS.includes(model)), className)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__header"), (0, _defineProperty2.default)({}, "".concat(RC, "__header_only-switcher"), !description))
   }, description && !isExcludeDescription ? /*#__PURE__*/_react.default.createElement("div", {
@@ -135,8 +131,9 @@ var Chart = function Chart(_ref) {
       return setModel((modelsForSwitch === null || modelsForSwitch === void 0 ? void 0 : modelsForSwitch[1]) || 'lineLayout');
     }
   })) : null), /*#__PURE__*/_react.default.createElement("div", {
+    ref: charContainertRef,
     className: (0, _classnames.default)("".concat(RC, "__chart-wrapper"))
-  }, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, getChartOptions(model), {
+  }, /*#__PURE__*/_react.default.createElement(ChartComponent, (0, _extends2.default)({}, options, {
     data: localData
   }))));
 };