intelicoreact 0.1.1 → 0.1.4

package/dist/Atomic/FormElements/Input/Input.stories.js

@@ -40,8 +40,8 @@ var _default = {
     withDelete: {
       description: 'boolean - add clear-cross by hover'
     },
-    isOnlyNumber: {
-      description: 'boolean - only numbers'
+    onlyNumbers: {
+      description: 'object - only numbers'
     },
     softStringMode: {
       description: 'boolean - only strings'
@@ -92,14 +92,19 @@ var _default = {
   }
 };
 exports.default = _default;
+var styles = {
+  with: '200px'
+};
 
 var Template = function Template(args) {
   var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       value = _useState2[0],
-      setValue = _useState2[1];
+      setValue = _useState2[1]; // useEffect(() => console.log('useEffect - value - ', value), [value]);
+
 
   return /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, args, {
+    style: styles,
     value: value,
     onChange: setValue
   }));
@@ -110,14 +115,17 @@ exports.InputTemplate = InputTemplate;
 InputTemplate.args = {
   type: 'text',
   isFocusDefault: false,
-  isOnlyNumber: false,
+  onlyNumbers: {
+    type: 'float',
+    decimalPlaces: 2
+  },
   isOnlyString: false,
   isPriceInput: false,
   isTwoDigitAfterDot: false,
   disabled: false,
   error: '',
   mask: '',
-  softStringMode: true,
+  softStringMode: false,
   withDelete: true,
   symbolsLimit: 255,
   placeholder: 'Placeholder',

package/dist/Atomic/FormElements/Label/Label.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Hint = _interopRequireDefault(require("../../UI/Hint/Hint"));
 
 require("./Label.scss");
@@ -16,9 +18,12 @@ require("./Label.scss");
 var Label = function Label(_ref) {
   var label = _ref.label,
       hint = _ref.hint,
-      isRequired = _ref.isRequired;
+      isRequired = _ref.isRequired,
+      isLabelBolt = _ref.isLabelBolt;
   return /*#__PURE__*/_react.default.createElement("span", {
-    className: "label"
+    className: (0, _classnames.default)('label', {
+      'label_bold': isLabelBolt
+    })
   }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", {
     className: "label_isRequired"
   }, "*"), hint && /*#__PURE__*/_react.default.createElement(_Hint.default, {

package/dist/Atomic/FormElements/MobileCalendar/MobileCalendar.js

@@ -25,7 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-require('./../../../../src/Functions/customEventListener');
+require('../../../Functions/customEventListener');
 
 var MobileCalendar = function MobileCalendar(_ref) {
   var _ref$min = _ref.min,

package/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -25,7 +25,7 @@ var _reactInputMask = _interopRequireDefault(require("react-input-mask"));
 
 var _index = require("../../../Constants/index.constants");
 
-var _inputExecutor = require("../../../Functions/inputExecutor");
+var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
 
 require("./NumericInput.scss");
 
@@ -107,16 +107,14 @@ var NumericInput = function NumericInput(_ref) {
   var _useState13 = (0, _react.useState)(false),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
       isToHighlightError = _useState14[0],
-      setIsToHighlightError = _useState14[1];
+      setIsToHighlightError = _useState14[1]; // HANDLES
 
-  var onlyNumbers = _inputExecutor.formatInput.onlyNumbers;
-  var _formatInput$priceInp = _inputExecutor.formatInput.priceInput,
-      addCommas = _formatInput$priceInp.addCommas,
-      removeComma = _formatInput$priceInp.removeComma; // HANDLES
 
   var handle = {
     change: function change(e) {
-      var inputValue = e.target ? onlyNumbers(e.target.value) : e;
+      var inputValue = e.target ? (0, _fieldValueFormatters.filterNumeric)(e.target.value, {
+        type: 'int'
+      }) : e;
 
       if (inputValue && (decRef.current.contains(e.target) || incRef.current.contains(e.target))) {
         inputValue = parseFloat(inputValue);
@@ -195,7 +193,7 @@ var NumericInput = function NumericInput(_ref) {
 
   (0, _react.useEffect)(function () {
     if (inputValue !== value) setIsFocused(true);
-    setInputValueFormated(isPriceInput ? isFocused ? removeComma(inputValue) : addCommas(inputValue) : inputValue);
+    setInputValueFormated(isPriceInput ? isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue) : inputValue);
     setIntMemoVal(parseInt(inputValue));
     if (typeof onChange === 'function') onChange(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toString());
   }, [inputValue]); //On Integer Value Change
@@ -205,7 +203,9 @@ var NumericInput = function NumericInput(_ref) {
   }, [intMemoVal]); //On Focuse Change
 
   (0, _react.useEffect)(function () {
-    setInputValueFormated(isPriceInput ? isFocused ? removeComma(inputValue) : addCommas(inputValue) : inputValue);
+    var formatedValue = inputValue;
+    if (isPriceInput) formatedValue = isFocused ? (0, _fieldValueFormatters.formatToRemoveComa)(inputValue) : (0, _fieldValueFormatters.formatToAddBitDepthPoints)(inputValue);
+    setInputValueFormated(formatedValue);
 
     if (isFocused) {
       var _inputRef$current;

package/dist/Atomic/FormElements/NumericInput/NumericInput.stories.js

@@ -112,6 +112,6 @@ NumericInputTemplate.args = {
   min: '0',
   max: '15000',
   symbolsLimit: 5,
-  placeholder: 'Placeholder',
-  icon: /*#__PURE__*/_react.default.createElement(_reactFeather.User, null)
+  placeholder: 'Placeholder' // icon: <User />
+
 };

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+
 var _Input = _interopRequireDefault(require("../Input/Input"));
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
@@ -32,27 +34,65 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var RangeInputs = function RangeInputs(_ref) {
+  var _valueObj$from, _valueObj$to;
+
   var label = _ref.label,
       hint = _ref.hint,
-      items = _ref.items,
+      _ref$value = _ref.value,
+      valueObj = _ref$value === void 0 ? {
+    from: '',
+    to: ''
+  } : _ref$value,
       className = _ref.className,
       onChange = _ref.onChange,
-      isRequired = _ref.isRequired;
-
-  var _useState = (0, _react.useState)(''),
+      isRequired = _ref.isRequired,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'int' : _ref$type,
+      setInnerError = _ref.setError;
+
+  var _useState = (0, _react.useState)({
+    from: '',
+    to: ''
+  }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       error = _useState2[0],
       setError = _useState2[1];
 
-  var handleChange = function handleChange(prop, value) {
-    onChange(_objectSpread(_objectSpread({}, items), {}, (0, _defineProperty2.default)({}, prop, value)));
+  var inputFromRef = (0, _react.useRef)(null);
+  var inputToRef = (0, _react.useRef)(null);
+  var isValidRange = !!(valueObj !== null && valueObj !== void 0 && valueObj.from && valueObj !== null && valueObj !== void 0 && valueObj.to && +(valueObj === null || valueObj === void 0 ? void 0 : valueObj.from) <= +(valueObj === null || valueObj === void 0 ? void 0 : valueObj.to));
+
+  var handleChange = function handleChange(prop, val) {
+    onChange(_objectSpread(_objectSpread({}, valueObj), {}, (0, _defineProperty2.default)({}, prop, type === 'float' ? (0, _fieldValueFormatters.filterFloat)(val) : (0, _fieldValueFormatters.formatOnlyNumbers)(val))));
   };
 
-  var rangeValidation = function rangeValidation() {
-    if (items !== null && items !== void 0 && items.from && items !== null && items !== void 0 && items.to && (items === null || items === void 0 ? void 0 : items.from) > (items === null || items === void 0 ? void 0 : items.to) || !(items !== null && items !== void 0 && items.to)) {
-      setError('Invalid range');
+  var rangeValidation = function rangeValidation(e, key) {
+    var oppositeKey = key === 'from' ? 'to' : 'from';
+
+    if (!(valueObj !== null && valueObj !== void 0 && valueObj.from) && !(valueObj !== null && valueObj !== void 0 && valueObj.to)) {
+      setError({
+        from: '',
+        to: ''
+      });
+      setInnerError === null || setInnerError === void 0 ? void 0 : setInnerError('');
+      return e;
+    } else if (!valueObj[oppositeKey]) {
+      var mustToFocus = key === 'from' ? inputToRef.current : inputFromRef.current;
+      mustToFocus.focus();
+    } else if (!isValidRange) {
+      if (!(valueObj !== null && valueObj !== void 0 && valueObj.from)) setError(_objectSpread(_objectSpread({}, error), {}, {
+        from: 'Invalid range'
+      }));else setError(_objectSpread(_objectSpread({}, error), {}, {
+        to: 'Invalid range'
+      }));
+      setInnerError === null || setInnerError === void 0 ? void 0 : setInnerError('Invalid range');
     } else {
-      setError('');
+      setError({
+        from: '',
+        to: ''
+      });
+      setInnerError === null || setInnerError === void 0 ? void 0 : setInnerError('');
+      return e;
     }
   };
 
@@ -70,25 +110,41 @@ var RangeInputs = function RangeInputs(_ref) {
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "range-inputs__input-label"
   }, "From"), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "number",
-    value: items === null || items === void 0 ? void 0 : items.from,
+    ref: inputFromRef,
+    value: (_valueObj$from = valueObj === null || valueObj === void 0 ? void 0 : valueObj.from) !== null && _valueObj$from !== void 0 ? _valueObj$from : '',
     className: "mr15",
-    onChange: function onChange(value) {
-      return handleChange('from', value);
+    onChange: function onChange(val) {
+      return handleChange('from', val);
     },
-    onBlur: rangeValidation
+    onBlur: function onBlur(e) {
+      return rangeValidation(e, 'from');
+    },
+    error: error.from,
+    onKeyUp: function onKeyUp(code, e) {
+      if (code === 13) {
+        if (isValidRange) inputFromRef.current.blur();else {
+          inputToRef.current.focus();
+          inputToRef.current.select();
+        }
+      }
+    }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "j4 w50"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "range-inputs__input-label"
   }, "To"), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    type: "number",
-    value: items === null || items === void 0 ? void 0 : items.to,
-    onChange: function onChange(value) {
-      return handleChange('to', value);
+    ref: inputToRef,
+    value: (_valueObj$to = valueObj === null || valueObj === void 0 ? void 0 : valueObj.to) !== null && _valueObj$to !== void 0 ? _valueObj$to : '',
+    onChange: function onChange(val) {
+      return handleChange('to', val);
     },
-    onBlur: rangeValidation,
-    error: error
+    onBlur: function onBlur(e) {
+      return rangeValidation(e, 'to');
+    },
+    error: error.to,
+    onKeyUp: function onKeyUp(code, e) {
+      if (code === 13) inputToRef.current.blur();
+    }
   }))));
 };
 

package/dist/Atomic/FormElements/RangeInputs/RangeInputs.stories.js

@@ -2,17 +2,27 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RangeInputsTemplate = exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _RangeInputs = _interopRequireDefault(require("./RangeInputs"));
 
 require("./RangeInputs.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; }
+
 global.lng = 'en';
 var _default = {
   title: 'RangeInputs',
@@ -21,14 +31,23 @@ var _default = {
 exports.default = _default;
 
 var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_RangeInputs.default, args);
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    return console.log(state);
+  }, [state]);
+  return /*#__PURE__*/_react.default.createElement(_RangeInputs.default, (0, _extends2.default)({}, args, {
+    onChange: setState,
+    value: state
+  }));
 };
 
 var RangeInputsTemplate = Template.bind({});
 exports.RangeInputsTemplate = RangeInputsTemplate;
 RangeInputsTemplate.args = {
   label: 'loanAmount',
-  from: 0,
-  to: 0,
   hint: 'Hint'
 };

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.js

@@ -35,7 +35,8 @@ var RC = 'tags-dropdown';
 
 var TagsDropdown = function TagsDropdown(_ref) {
   var options = _ref.options,
-      chosenOptions = _ref.chosenOptions,
+      _ref$chosenOptions = _ref.chosenOptions,
+      chosenOptions = _ref$chosenOptions === void 0 ? [] : _ref$chosenOptions,
       onChange = _ref.onChange,
       className = _ref.className,
       tagClassname = _ref.tagClassname,
@@ -43,7 +44,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
       label = _ref.label,
       isLabelBold = _ref.isLabelBold,
       hint = _ref.hint,
-      hintSide = _ref.hintSide;
+      hintSide = _ref.hintSide,
+      disabled = _ref.disabled,
+      isValuesInTags = _ref.isValuesInTags;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -56,6 +59,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
       setSearchValue = _useState4[1];
 
   var dropdownRef = (0, _react.useRef)(null);
+  var singleLevelOptions = options.reduce(function (acc, item) {
+    return [].concat((0, _toConsumableArray2.default)(acc), (0, _toConsumableArray2.default)(item.groupName ? item.list : [item]));
+  }, []);
 
   var handleClickOutside = function handleClickOutside(event) {
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -66,7 +72,7 @@ var TagsDropdown = function TagsDropdown(_ref) {
 
   var deleteChosen = function deleteChosen(value) {
     onChange(chosenOptions.filter(function (item) {
-      return item.value !== value;
+      return item !== value;
     }), 'chosenOptions');
   };
 
@@ -75,13 +81,13 @@ var TagsDropdown = function TagsDropdown(_ref) {
     setSearchValue('');
 
     if (chosenOptions.some(function (el) {
-      return el.value === item.value;
+      return el === item.value;
     })) {
       deleteChosen(item.value);
       return;
     }
 
-    onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [item]), 'chosenOptions');
+    onChange([].concat((0, _toConsumableArray2.default)(chosenOptions), [item.value]), 'chosenOptions');
   };
 
   var onSearchHandler = function onSearchHandler(name) {
@@ -89,21 +95,22 @@ var TagsDropdown = function TagsDropdown(_ref) {
   };
 
   var getMarkupForElement = function getMarkupForElement(item) {
-    return item.title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
-      key: item.id,
+    var title = item.title || item.label;
+    return title.toLowerCase().includes((searchValue === null || searchValue === void 0 ? void 0 : searchValue.toLowerCase()) || '') ? /*#__PURE__*/_react.default.createElement("button", {
+      key: item.value,
       onClick: function onClick() {
         return onChangeHandler(item);
       },
-      className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), chosenOptions.some(function (el) {
-        return el.value === item.value;
+      className: (0, _classnames.default)("".concat(RC, "__list-item"), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_active"), chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
+        return value === item.value;
       })), (0, _defineProperty2.default)({}, "".concat(RC, "__list-item_disabled"), item.disabled))
     }, /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), chosenOptions.some(function (el) {
-        return el.value === item.value;
+      className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.some(function (value) {
+        return value === item.value;
       })))
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, {
       className: "color--text"
-    })), item.title) : null;
+    })), title) : null;
   };
 
   (0, _react.useEffect)(function () {
@@ -113,40 +120,34 @@ var TagsDropdown = function TagsDropdown(_ref) {
     };
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(RC, className),
+    className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled)),
     ref: dropdownRef
-  }, label && /*#__PURE__*/_react.default.createElement(_Label.default, {
-    className: "".concat(RC, "-label"),
-    isBold: isLabelBold,
-    label: label,
-    hint: hint,
-    hintSide: hintSide
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(RC, "__trigger")
-  }, chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (_ref2) {
-    var title = _ref2.title,
-        value = _ref2.value,
-        id = _ref2.id;
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__trigger"),
+    onClick: function onClick(e) {
+      if (e.target.className === "".concat(RC, "__trigger") || e.target.className === "tags-dropdown__arrow" || e.target.tagName === 'svg' && e.target.parentNode.className !== 'tag__button') setIsOpen(!isOpen);else if (e.target.tagName === 'INPUT') setIsOpen(true);
+    }
+  }, chosenOptions === null || chosenOptions === void 0 ? void 0 : chosenOptions.map(function (value) {
+    // el.list?.find?.(e => e.value === value)
+    var tag = singleLevelOptions === null || singleLevelOptions === void 0 ? void 0 : singleLevelOptions.find(function (el) {
+      return el.value === value;
+    });
+    var label = isValuesInTags ? tag === null || tag === void 0 ? void 0 : tag.value : (tag === null || tag === void 0 ? void 0 : tag.label) || (tag === null || tag === void 0 ? void 0 : tag.name) || (tag === null || tag === void 0 ? void 0 : tag.title);
     return /*#__PURE__*/_react.default.createElement(_Tag.default, {
-      key: id,
+      key: value,
       className: tagClassname,
-      label: title,
+      label: label,
       removeItem: function removeItem() {
         return deleteChosen(value);
       }
     });
-  }), /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__btn"),
-    onClick: function onClick() {
-      return setIsOpen(true);
-    }
-  }, /*#__PURE__*/_react.default.createElement("input", {
+  }), /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
     value: searchValue,
     onChange: function onChange(e) {
       return onSearchHandler(e.target.value);
     },
-    placeholder: "Type or select tags from list",
+    placeholder: "Select from list",
     onKeyDown: function onKeyDown(e) {
       return onKeyPress(e, searchValue);
     }
@@ -154,9 +155,9 @@ var TagsDropdown = function TagsDropdown(_ref) {
     className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, {
     className: "color--text"
-  })))), isOpen && /*#__PURE__*/_react.default.createElement("div", {
+  }))), isOpen && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__list")
-  }, options.map(function (option) {
+  }, options === null || options === void 0 ? void 0 : options.map(function (option) {
     var _option$list;
 
     return option.groupName ? /*#__PURE__*/_react.default.createElement("div", {

package/dist/Atomic/FormElements/TagsDropdown/TagsDropdown.scss

@@ -6,26 +6,31 @@
   position: relative;
   width: 100%;
 
+  &_disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   &__trigger {
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
+    position: relative;
     box-sizing: border-box;
-    border-radius: 3px;
-    padding-left: 5px;
     height: 28px;
     display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
     align-items: center;
-    cursor: pointer;
-  }
 
-  &__btn {
-    display: flex;
-    align-items: center;
-    width: 100%;
+    height: fit-content;
+    min-height: 28px;
+    padding: 3px 24px 3px 5px;
+    cursor: pointer;
+    background: #ffffff;
+    border: 1px solid #e2e5ec;
+    border-radius: 3px;
   }
 
   &__input {
-    width: 100%;
+    flex-grow: 1;
     background: none;
     border: none;
     padding-right: 2px;
@@ -46,7 +51,7 @@
     padding: 8px 0;
     max-height: 320px;
     overflow-y: auto;
-    z-index: 2;
+    z-index: 3;
     text-align: left;
     &::-webkit-scrollbar {
       width: 4px;
@@ -88,10 +93,16 @@
   }
 
   &__arrow {
+    position: absolute;
+    top: 7.5px;
+    right: 5px;
+
     display: flex;
     align-items: center;
     margin-right: 5px;
 
+    cursor: pointer;
+
     &_active {
       transform: rotate(180deg);
     }
@@ -128,4 +139,9 @@
   &-label {
     margin-bottom: 5px;
   }
+
+  .tag {
+    margin-bottom: 3px;
+    cursor: auto;
+  }
 }

package/dist/Atomic/FormElements/TextSwitcher/TextSwitcher.js

@@ -18,14 +18,14 @@ require("./TextSwitcher.scss");
 var RC = 'text-switcher';
 
 var TextSwitcher = function TextSwitcher(_ref) {
-  var _ref$isIncluded = _ref.isIncluded,
-      isIncluded = _ref$isIncluded === void 0 ? true : _ref$isIncluded,
+  var isIncluded = _ref.isIncluded,
       _ref$activeText = _ref.activeText,
       activeText = _ref$activeText === void 0 ? 'is' : _ref$activeText,
       _ref$inactiveText = _ref.inactiveText,
       inactiveText = _ref$inactiveText === void 0 ? 'is not' : _ref$inactiveText,
       onChange = _ref.onChange,
       className = _ref.className;
+  var isUndefined = isIncluded === undefined || isIncluded === null;
   return /*#__PURE__*/_react.default.createElement("button", {
     className: (0, _classnames.default)(RC, (0, _defineProperty2.default)({}, "".concat(RC, "_active"), isIncluded), className),
     onClick: function onClick() {
@@ -35,7 +35,7 @@ var TextSwitcher = function TextSwitcher(_ref) {
     className: "".concat(RC, "__btn")
   }, activeText), inactiveText && /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("".concat(RC, "__btn"), "".concat(RC, "__btn_off"))
-  }, inactiveText), /*#__PURE__*/_react.default.createElement("div", {
+  }, inactiveText), !isUndefined && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__slider"), (0, _defineProperty2.default)({}, "".concat(RC, "__slider_inactive"), !isIncluded))
   }));
 };