intelicoreact 0.3.67 → 0.3.69

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

@@ -25,6 +25,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _indexConstants = require("./../../../Constants/index.constants.js");
 
 var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
@@ -53,6 +55,7 @@ function InputMask() {
       maskDigitPlaceholder = _ref.maskDigitPlaceholder,
       maskLetterPlaceholder = _ref.maskLetterPlaceholder,
       usePatternPlaceholder = _ref.usePatternPlaceholder,
+      disabled = _ref.disabled,
       _ref$maskAsPlaceholde = _ref.maskAsPlaceholder,
       maskAsPlaceholder = _ref$maskAsPlaceholde === void 0 ? true : _ref$maskAsPlaceholde,
       _ref$maxEditableLen = _ref.maxEditableLen,
@@ -1432,7 +1435,15 @@ function InputMask() {
 
   var render = function render() {
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "\n          input-mask_wrapper\n          ".concat(className, "\n          ").concat(isError ? 'input-mask_error' : '', "\n          ").concat(isFocused ? 'input-mask_focus' : '', "\n          ").concat(blinkError ? 'input-mask_blink-error' : '', "\n        "),
+      className: (0, _classnames.default)('input-mask_wrapper', className, {
+        disabled: disabled
+      }, {
+        'input-mask_error': isError
+      }, {
+        'input-mask_focus': isFocused
+      }, {
+        'input-mask_blink-error': blinkError
+      }),
       onClick: onWrapperClick,
       onBlur: onBlur
     }, /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/RangeSlider/RangeSlider.js

@@ -97,13 +97,16 @@ function RangeSlider(_ref) {
 
   var _useState9 = (0, _react.useState)(null),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      tempValue = _useState10[0],
-      setTempValue = _useState10[1];
+      focusedType = _useState10[0],
+      setFocusedType = _useState10[1];
 
   var _useState11 = (0, _react.useState)(null),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      focusedType = _useState12[0],
-      setFocusedType = _useState12[1];
+      frezeedValues = _useState12[0],
+      setFrezeedValues = _useState12[1];
+
+  var fromValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.from : from;
+  var toValue = frezeedValues ? frezeedValues === null || frezeedValues === void 0 ? void 0 : frezeedValues.to : to;
 
   var _useState13 = (0, _react.useState)(null),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
@@ -130,10 +133,6 @@ function RangeSlider(_ref) {
       pointsPerPx = _useState22[0],
       setPointsPerPx = _useState22[1];
 
-  var countPointsPerPx = function countPointsPerPx(width) {
-    return (max - min) / width;
-  };
-
   var _useState23 = (0, _react.useState)(0),
       _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
       extremumRange = _useState24[0],
@@ -144,10 +143,9 @@ function RangeSlider(_ref) {
       extremumWidth = _useState26[0],
       setExtremumWidth = _useState26[1];
 
-  (0, _react.useLayoutEffect)(function () {
-    setFromValue(value.from);
-    setToValue(value.to);
-  }, [value]);
+  var countPointsPerPx = function countPointsPerPx(width) {
+    return (max - min) / width;
+  };
 
   var resetRange = function resetRange() {
     setFrom(min);
@@ -159,7 +157,7 @@ function RangeSlider(_ref) {
   };
 
   var getRangeWidth = function getRangeWidth() {
-    return getTrackXByPoints(to) - getTrackXByPoints(from);
+    return getTrackXByPoints(toValue) - getTrackXByPoints(fromValue);
   };
 
   var getRangeOffset = function getRangeOffset() {
@@ -236,28 +234,20 @@ function RangeSlider(_ref) {
   };
 
   var onRangeInputFocus = function onRangeInputFocus(e, type) {
-    setFocusedType(type);
-    setTempValue(type === 'from' ? from : to);
+    setFrezeedValues({
+      from: from,
+      to: to
+    });
   };
 
   var onRangeInputBlur = function onRangeInputBlur(e, type) {
-    onRangeChange(type, parseFloat(tempValue));
-    setTempValue(null);
-    setFocusedType(null);
+    onRangeChange(type, type === 'from' ? from : to);
+    setFrezeedValues({
+      from: from,
+      to: to
+    });
   };
 
-  (0, _react.useLayoutEffect)(function () {
-    var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
-
-    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
-        width = _trackRef$current$get.width,
-        x = _trackRef$current$get.x;
-
-    width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
-    setPointsPerPx(countPointsPerPx(width));
-    setTrackWidth(width);
-    setTrackPosition(x);
-  }, [trackRef]);
   (0, _react.useEffect)(function () {
     var _value$from2, _value$to2;
 
@@ -299,11 +289,30 @@ function RangeSlider(_ref) {
     }
   }, [movingController]);
   (0, _react.useEffect)(function () {
-    return onChange({
+    setFrezeedValues(null);
+  }, [isTriggerMoved]);
+  (0, _react.useEffect)(function () {
+    onChange({
       from: from,
       to: to
     });
   }, [from, to]);
+  (0, _react.useLayoutEffect)(function () {
+    setFrom(value.from);
+    setTo(value.to);
+  }, [value]);
+  (0, _react.useLayoutEffect)(function () {
+    var _trackRef$current, _fromTriggerRef$curre, _fromTriggerRef$curre2, _toTriggerRef$current, _toTriggerRef$current2;
+
+    var _trackRef$current$get = trackRef === null || trackRef === void 0 ? void 0 : (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.getBoundingClientRect(),
+        width = _trackRef$current$get.width,
+        x = _trackRef$current$get.x;
+
+    width -= (fromTriggerRef === null || fromTriggerRef === void 0 ? void 0 : (_fromTriggerRef$curre = fromTriggerRef.current) === null || _fromTriggerRef$curre === void 0 ? void 0 : (_fromTriggerRef$curre2 = _fromTriggerRef$curre.getBoundingClientRect()) === null || _fromTriggerRef$curre2 === void 0 ? void 0 : _fromTriggerRef$curre2.width) || (toTriggerRef === null || toTriggerRef === void 0 ? void 0 : (_toTriggerRef$current = toTriggerRef.current) === null || _toTriggerRef$current === void 0 ? void 0 : (_toTriggerRef$current2 = _toTriggerRef$current.getBoundingClientRect()) === null || _toTriggerRef$current2 === void 0 ? void 0 : _toTriggerRef$current2.width);
+    setPointsPerPx(countPointsPerPx(width));
+    setTrackWidth(width);
+    setTrackPosition(x);
+  }, [trackRef]);
 
   var renderLabel = function renderLabel() {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -318,7 +327,7 @@ function RangeSlider(_ref) {
       className: "range-slider__header__selected-range"
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__header__selected-range--text"
-    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(from) : from, " to ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(to) : to, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
+    }, "from ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(fromValue) : fromValue, " to ", isUseBitPoints ? (0, _fieldValueFormatters.formatToAddBitDepthPoints)(toValue) : toValue, rangeSymbol, unit), /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__header__selected-range--reset",
       onClick: resetRange
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, null)));
@@ -337,14 +346,16 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs--from"
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       "data-testid": "rangeSlider--input--".concat(testId, "--type-from"),
-      value: focusedType === 'from' ? tempValue : from.toString(),
+      value: from.toString(),
       onFocus: function onFocus(e) {
         return onRangeInputFocus(e, 'from');
       },
       onBlur: function onBlur(e) {
         return onRangeInputBlur(e, 'from');
       },
-      onChange: setTempValue,
+      onChange: function onChange(value) {
+        return onRangeChange('from', value, false);
+      },
       onlyNumbers: {
         type: 'float',
         decimalPlaces: decimalPlaces,
@@ -356,14 +367,16 @@ function RangeSlider(_ref) {
       className: "range-slider__inputs__input"
     }, /*#__PURE__*/_react.default.createElement(_Input.default, {
       "data-testid": "rangeSlider--input--".concat(testId, "--type-to"),
-      value: focusedType === 'to' ? tempValue : to.toString(),
+      value: to.toString(),
       onFocus: function onFocus(e) {
         return onRangeInputFocus(e, 'to');
       },
       onBlur: function onBlur(e) {
         return onRangeInputBlur(e, 'to');
       },
-      onChange: setTempValue,
+      onChange: function onChange(value) {
+        return onRangeChange('to', value, false);
+      },
       onlyNumbers: {
         type: 'float',
         decimalPlaces: decimalPlaces,
@@ -387,10 +400,10 @@ function RangeSlider(_ref) {
 
   var renderTrackTriggers = function renderTrackTriggers() {
     var fromStyle = {
-      left: getTrackXByPoints(from).toString().concat('px')
+      left: getTrackXByPoints(fromValue).toString().concat('px')
     };
     var toStyle = {
-      left: getTrackXByPoints(to).toString().concat('px')
+      left: getTrackXByPoints(toValue).toString().concat('px')
     };
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "range-slider__track__range-triggers"

package/dist/Atomic/UI/AdvancedTag/AdvTag.js

@@ -102,7 +102,7 @@ var AdvTag = function AdvTag(_ref) {
       ref: hintRef
     }, warnLeft && /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "".concat(testId, "-left"),
-      className: "pointer",
+      className: "advanced-tags--warning-icon-wrapper",
       onMouseEnter: function onMouseEnter() {
         return onWarningClick('warnLeft');
       },
@@ -129,7 +129,7 @@ var AdvTag = function AdvTag(_ref) {
       className: "ml5 mr5"
     }, "|") : null, merchants ? /*#__PURE__*/_react.default.createElement("span", null, merchants) : item.type !== 'simple' && /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "".concat(testId, "-right"),
-      className: "pointer",
+      className: "advanced-tags--warning-icon-wrapper",
       onMouseEnter: function onMouseEnter() {
         return onWarningClick('warnRight');
       },
@@ -160,7 +160,7 @@ var AdvTag = function AdvTag(_ref) {
       ref: hintRef
     }, isNullcounter && /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "".concat(testId, "-left"),
-      className: "pointer",
+      className: "advanced-tags--warning-icon-wrapper",
       onMouseEnter: function onMouseEnter() {
         return onWarningClick('warnLeft');
       },

package/dist/Atomic/UI/AdvancedTag/AdvancedTags.scss

@@ -25,6 +25,11 @@
     color: #f06d8d;
   }
 
+  &--warning-icon-wrapper {
+    cursor: pointer;
+    display: flex;
+  }
+
   &__warn-text {
     position: absolute;
     background-color: #6b81dd;

package/dist/Atomic/UI/Tag/Tag.js

@@ -2,12 +2,16 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -19,20 +23,38 @@ var _utils = require("../../../Functions/utils");
 
 require("./Tag.scss");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Tag = function Tag(_ref) {
-  var className = _ref.className,
+  var value = _ref.value,
+      className = _ref.className,
       label = _ref.label,
       warning = _ref.warning,
       removeItem = _ref.removeItem,
-      noDismiss = _ref.noDismiss,
       name = _ref.name,
+      _ref$isNoDismiss = _ref.isNoDismiss,
+      isNoDismiss = _ref$isNoDismiss === void 0 ? true : _ref$isNoDismiss,
       _ref$onClick = _ref.onClick,
       onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
       _ref$testId = _ref.testId,
       testId = _ref$testId === void 0 ? 'test-tag' : _ref$testId,
       _ref$testIdRemove = _ref.testIdRemove,
       testIdRemove = _ref$testIdRemove === void 0 ? 'test-tag-remove' : _ref$testIdRemove;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isTagHover = _useState2[0],
+      setIsTagHover = _useState2[1];
+
   return /*#__PURE__*/_react.default.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      return setIsTagHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsTagHover(false);
+    },
     "data-testid": testId,
     className: (0, _classnames.default)('tag', className, {
       'tag-warn': warning
@@ -40,12 +62,14 @@ var Tag = function Tag(_ref) {
     onClick: onClick
   }, warning && /*#__PURE__*/_react.default.createElement(_io.IoWarningOutline, {
     className: "advanced-tags--warning-icon mr5"
-  }), /*#__PURE__*/_react.default.createElement("span", {
+  }), warning && isTagHover && /*#__PURE__*/_react.default.createElement("div", {
+    className: "tag__warn-hint"
+  }, warning), /*#__PURE__*/_react.default.createElement("span", {
     className: "tag__label"
-  }, label || name), removeItem && !noDismiss && /*#__PURE__*/_react.default.createElement("button", {
+  }, label || name), removeItem && !isNoDismiss && /*#__PURE__*/_react.default.createElement("button", {
     "data-testid": testIdRemove,
     onClick: function onClick() {
-      return removeItem();
+      return removeItem(value);
     },
     className: "tag__button"
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.X, {

package/dist/Atomic/UI/Tag/Tag.scss

@@ -10,6 +10,9 @@
   margin-right: 4px;
   white-space: nowrap;
   vertical-align: middle;
+  position: relative;
+  user-select: none;
+  cursor: pointer;
 
   &__label {
     color: $color--dark;
@@ -36,6 +39,31 @@
     }
   }
 
+  &__warn-hint {
+    position: absolute;
+    background-color: #6b81dd;
+    color: #fff;
+    font-size: 10px;
+    line-height: 16px;
+    border-radius: 4px;
+    max-width: 270px;
+    min-width: 80px;
+    padding: 8px;
+    z-index: 2;
+    top: 30px;
+    left: 2px;
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: 8.5px;
+      height: 8.5px;
+      background-color: #6b81dd;
+      transform: rotate(45deg);
+      top: -4px;
+    }
+  }
+
   svg {
     min-width: 16px;
     max-width: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.3.67",
+  "version": "0.3.69",
   "description": "",
   "main": "dist/index.js",
   "files": [