ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/CheckboxToggle/CheckboxToggle.scss

@@ -0,0 +1,117 @@
+.checkbox-status,
+.checkbox-status_disabled {
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    font-size: 14px;
+    user-select: none;
+
+    .checkbox-status-switch {
+        position: relative;
+        display: inline-block;
+        box-sizing: border-box;
+        width: 60px;
+        height: 26px;
+        border-radius: 16px;
+        border: 2px solid #94A3B8;
+        vertical-align: top;
+        background: #F1F5F9;
+        transition: .2s;
+
+        &::after {
+            content: 'OFF';
+            position: absolute;
+            top: 6px;
+            right: 8px;
+            display: inline-block;
+            width: 20px;
+            height: 16px;
+            border-radius: 100px;
+            color: #94A3B8;
+            transition: .15s;
+            font-family: Rubik;
+            font-size: 11px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 14px;
+        }
+    }
+
+    .checkbox-status-switch:before {
+        content: '';
+        position: absolute;
+        top: 4px;
+        left: 4px;
+        display: inline-block;
+        width: 20px;
+        height: 16px;
+        border-radius: 100px;
+        background: #94A3B8;
+        transition: .15s;
+    }
+
+    input[type=checkbox] {
+        display: block;
+        width: 0;
+        height: 0;
+        position: absolute;
+        z-index: -1;
+        opacity: 0;
+    }
+
+    input[type=checkbox]:not(:disabled):active+.checkbox-status-switch:before {
+        box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
+    }
+
+    input[type=checkbox]:checked+.checkbox-status-switch {
+        border: 2px solid #22C55E;
+        background: #22C55E;
+    }
+
+    input[type=checkbox]:checked+.checkbox-status-switch::after {
+        content: 'ON';
+        position: absolute;
+        top: 6px;
+        left: 8px;
+        display: inline-block;
+        width: 20px;
+        height: 16px;
+        border-radius: 100px;
+        color: #fff;
+        transition: .15s;
+        font-family: Rubik;
+        font-size: 11px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 14px;
+    }
+
+
+    input[type=checkbox]:checked+.checkbox-status-switch:before {
+        background-color: #fff;
+        transform: translateX(28px);
+    }
+
+    /* Hover */
+    input[type="checkbox"]:not(:disabled)+.checkbox-status-switch {
+        cursor: pointer;
+        // border-color: rgba(0, 0, 0, .3);
+    }
+
+    /* Focus */
+    .focused .checkbox-status-switch:before {
+        box-shadow: inset 0px 0px 4px #ff5623;
+    }
+
+    &_disabled {
+
+        .checkbox-status-switch {
+            background: #F1F5F9;
+        }
+
+        .checkbox-status-switch:before {
+            background: #C5CCD3;
+        }
+    }
+
+}

package/dist/stories/CheckboxToggle/CheckboxToggle.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _CheckboxToggle = _interopRequireDefault(require("./CheckboxToggle"));
+var _addonActions = require("@storybook/addon-actions");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  title: 'Components/CheckboxToggle',
+  component: _CheckboxToggle["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  args: {
+    id: 1,
+    value: true,
+    onChange: (0, _addonActions.action)('onChange'),
+    containerClassName: 'test-c',
+    inputClassName: 'test-i',
+    className: 'test',
+    uncontrolled: false
+  }
+};
+var Default = exports.Default = {};

package/dist/stories/DropDownSelector/DownSelector.js

@@ -0,0 +1,352 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _close_icon = _interopRequireDefault(require("./img/close_icon.svg"));
+var _close_icon_disabled = _interopRequireDefault(require("./img/close_icon_disabled.svg"));
+var _async = _interopRequireDefault(require("react-select/async"));
+require("./DropdownSelector.scss");
+var _excluded = ["taskOptions", "err", "options_prop", "setState", "placeholder", "className", "style", "multi", "name", "isClearable", "isSearchable", "disabled", "defaultValue", "state", "loadOptions", "showIndicator", "icon", "iconPlaceholder", "id", "fetchCallback", "setInputChange", "queryValue", "range", "noUpwardPaging", "resetPageOnChange", "tooltip", "color", "size", "width", "required"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var DropDownSelector = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, selectRef) {
+  var _state$label, _state$label2;
+  var taskOptions = _ref.taskOptions,
+    err = _ref.err,
+    options_prop = _ref.options_prop,
+    _ref$setState = _ref.setState,
+    setState = _ref$setState === void 0 ? false : _ref$setState,
+    placeholder = _ref.placeholder,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    style = _ref.style,
+    multi = _ref.multi,
+    name = _ref.name,
+    _ref$isClearable = _ref.isClearable,
+    isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
+    _ref$isSearchable = _ref.isSearchable,
+    isSearchable = _ref$isSearchable === void 0 ? true : _ref$isSearchable,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? false : _ref$defaultValue,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? [] : _ref$state,
+    _ref$loadOptions = _ref.loadOptions,
+    loadOptions = _ref$loadOptions === void 0 ? false : _ref$loadOptions,
+    _ref$showIndicator = _ref.showIndicator,
+    showIndicator = _ref$showIndicator === void 0 ? true : _ref$showIndicator,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? false : _ref$icon,
+    _ref$iconPlaceholder = _ref.iconPlaceholder,
+    iconPlaceholder = _ref$iconPlaceholder === void 0 ? false : _ref$iconPlaceholder,
+    id = _ref.id,
+    _ref$fetchCallback = _ref.fetchCallback,
+    fetchCallback = _ref$fetchCallback === void 0 ? false : _ref$fetchCallback,
+    _ref$setInputChange = _ref.setInputChange,
+    setInputChange = _ref$setInputChange === void 0 ? false : _ref$setInputChange,
+    queryValue = _ref.queryValue,
+    _ref$range = _ref.range,
+    range = _ref$range === void 0 ? false : _ref$range,
+    noUpwardPaging = _ref.noUpwardPaging,
+    resetPageOnChange = _ref.resetPageOnChange,
+    _ref$tooltip = _ref.tooltip,
+    tooltip = _ref$tooltip === void 0 ? false : _ref$tooltip,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? false : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '140%' : _ref$width,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTopPlaceholder = _useState2[0],
+    setIsTopPlaceholder = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocus = _useState4[0],
+    setIsFocus = _useState4[1];
+  var _useState5 = (0, _react.useState)(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectorPage = _useState6[0],
+    setSelectorPage = _useState6[1];
+  var inputId = (0, _react.useId)();
+  var onChange = function onChange(option, _ref2) {
+    var action = _ref2.action;
+    if (action === 'clear') {
+      setState(multi ? [] : '');
+    } else {
+      if (resetPageOnChange) setSelectorPage(1);
+      if (option.length > 1) {
+        var indexAll = -1;
+        option.forEach(function (el, ind) {
+          if ((el === null || el === void 0 ? void 0 : el.value) === 'all') indexAll = ind;
+        });
+        if (indexAll !== -1) {
+          setState(option === null || option === void 0 ? void 0 : option.filter(function (el, ind) {
+            return indexAll === 0 ? ind !== 0 : ind === indexAll;
+          }));
+        } else {
+          setState(option);
+        }
+      } else {
+        setState(option);
+      }
+    }
+  };
+  var MultiValueRemove = function MultiValueRemove(props) {
+    return /*#__PURE__*/React.createElement(_reactSelect.components.MultiValueRemove, props, /*#__PURE__*/React.createElement("img", {
+      src: disabled ? _close_icon_disabled["default"] === null || _close_icon_disabled["default"] === void 0 ? void 0 : _close_icon_disabled["default"].src : _close_icon["default"] === null || _close_icon["default"] === void 0 ? void 0 : _close_icon["default"].src
+    }));
+  };
+  var dot = function dot() {
+    return {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'flex-start',
+      caretColor: 'red',
+      ':before': {
+        backgroundImage: "url(".concat(icon, ")"),
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        content: '" "',
+        display: 'block',
+        marginRight: 5,
+        height: 12,
+        minWidth: 12
+      }
+    };
+  };
+  var DefaulOption = function DefaulOption(_ref3) {
+    var innerProps = _ref3.innerProps,
+      isDisabled = _ref3.isDisabled,
+      label = _ref3.label,
+      value = _ref3.value,
+      isSelected = _ref3.isSelected;
+    return !isDisabled ? /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      className: "option-item",
+      style: {
+        padding: '8px 20px'
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "text"
+    }, label)) : null;
+  };
+  (0, _react.useEffect)(function () {
+    if (setState) {
+      defaultValue ? setState(defaultValue) : setState(state);
+    }
+  }, []);
+  var OptionTask = function OptionTask(_ref4) {
+    var innerProps = _ref4.innerProps,
+      label = _ref4.label,
+      value = _ref4.value;
+    var author = value.author;
+    var name = author.name;
+    return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      className: "option-task",
+      style: {
+        padding: '8px 20px'
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      className: "text",
+      style: {
+        color: 'black'
+      }
+    }, label), /*#__PURE__*/React.createElement("p", {
+      className: "text_min"
+    }, "\u0410\u0432\u0442\u043E\u0440: ", /*#__PURE__*/React.createElement("span", null, name ? name : '')));
+  };
+  var onMenuScrollHandler = function onMenuScrollHandler(page) {
+    if (fetchCallback) {
+      setSelectorPage(function (prev) {
+        var currPage = prev + page;
+        if (page < 1) currPage = 1;
+        fetchCallback(currPage);
+        return currPage;
+      });
+    }
+  };
+  var selectProps = _objectSpread({
+    inputId: inputId,
+    options: options_prop,
+    value: state,
+    onChange: onChange,
+    ref: selectRef,
+    className: err ? 'dropdown_selector dropdown_selector__err' : 'dropdown_selector',
+    placeholder: '',
+    defaultValue: defaultValue,
+    isMulti: multi,
+    openMenuOnFocus: true,
+    isClearable: isClearable,
+    name: name,
+    isSearchable: isSearchable,
+    isDisabled: disabled,
+    //closeMenuOnSelect: false,
+    onFocus: function onFocus() {
+      setIsFocus(true);
+    },
+    onBlur: function onBlur() {
+      setIsFocus(false);
+    },
+    noOptionsMessage: function noOptionsMessage() {
+      return /*#__PURE__*/React.createElement("p", {
+        className: "no-options"
+      }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E");
+    },
+    components: {
+      Option: taskOptions ? OptionTask : DefaulOption,
+      MultiValueRemove: MultiValueRemove
+    },
+    onMenuScrollToBottom: function onMenuScrollToBottom() {
+      return onMenuScrollHandler(1);
+    },
+    onMenuScrollToTop: function onMenuScrollToTop() {
+      return noUpwardPaging ? {} : onMenuScrollHandler(-1);
+    },
+    onInputChange: function onInputChange(value) {
+      setIsTopPlaceholder((value === null || value === void 0 ? void 0 : value.length) > 0 ? true : false);
+      if (setInputChange !== false) {
+        setInputChange(value);
+      }
+    },
+    cacheOption: true,
+    allowCreateWhileLoading: true,
+    styles: _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      menu: function menu(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          borderRadius: '8px',
+          // overflow: 'hidden',
+          boxShadow: '0px 16px 32px 0px rgba(0, 0, 0, 0.04)',
+          border: 'none',
+          outline: 'none',
+          zIndex: 2,
+          minWidth: width
+        });
+      },
+      menuList: function menuList(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          borderRadius: '8px',
+          overflow: 'auto',
+          maxHeight: '608px',
+          padding: 0,
+          border: '2px solid #E0E7F2',
+          background: 'white'
+        });
+      },
+      dropdownIndicator: function dropdownIndicator(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          padding: '4px'
+        });
+      },
+      valueContainer: function valueContainer(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          fontSize: '14px',
+          color: '#020617',
+          padding: '6px 12px'
+        });
+      },
+      noOptionsMessage: function noOptionsMessage(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          fontSize: '12px'
+        });
+      },
+      multiValueLabel: function multiValueLabel(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          paddingLeft: '0px',
+          background: '#fff',
+          border: 'none',
+          color: disabled ? '#D3DEE7' : '#020617',
+          fontSize: '13px',
+          fontFamily: 'Rubik',
+          borderRadius: '0px',
+          margin: '0px'
+        });
+      }
+    }, "valueContainer", function valueContainer(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        color: disabled ? '#D3DEE7' : '#020617',
+        fontSize: '14px',
+        paddingLeft: '12px',
+        paddingRight: '12px'
+      });
+    }), "multiValueRemove", function multiValueRemove(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        background: '#fff',
+        color: disabled ? '#D3DEE7' : '#475569',
+        padding: '0px',
+        border: 'none',
+        borderLeft: 'none',
+        borderRadius: '0px',
+        ':hover': {
+          background: '#fff'
+        }
+      });
+    }), "indicatorSeparator", function indicatorSeparator(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        display: 'none'
+      });
+    }), "singleValue", function singleValue(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        color: '#020617'
+      });
+    }), "indicatorsContainer", function indicatorsContainer(base) {
+      return _objectSpread(_objectSpread({}, base), {}, {
+        padding: '0px',
+        display: showIndicator ? 'flex' : 'none'
+      });
+    }), "input", icon ? function (styles) {
+      return _objectSpread(_objectSpread(_objectSpread({}, styles), dot()), {}, {
+        color: '#020617'
+      });
+    } : null), "singleValue", icon ? function (styles, _ref5) {
+      var data = _ref5.data;
+      return _objectSpread(_objectSpread({}, styles), {}, {
+        cursor: 'pointer'
+      }, dot(data === null || data === void 0 ? void 0 : data.color));
+    } : null)
+  }, props);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "selector_wrapper ".concat(disabled ? 'selector_wrapper_disabled' : '', " ").concat(size == 'l' ? 'selector_wrapper_size-l' : '', " ").concat(placeholder && !multi ? 'value-content-bottom' : ''),
+    tabIndex: "0",
+    style: style ? style : {}
+  }, /*#__PURE__*/React.createElement("div", null, placeholder && multi ? /*#__PURE__*/React.createElement("div", {
+    className: _typeof(state === null || state === void 0 ? void 0 : state.label) == 'object' || (state === null || state === void 0 ? void 0 : state.length) > 0 || queryValue || isTopPlaceholder ? isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc_min' : 'placeholder-dinamyc'
+  }, /*#__PURE__*/React.createElement("label", null, placeholder, required ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, " *") : '')) : placeholder && /*#__PURE__*/React.createElement("div", {
+    className: _typeof(state === null || state === void 0 ? void 0 : state.label) == 'object' || (state === null || state === void 0 ? void 0 : state.length) > 0 || (state === null || state === void 0 || (_state$label = state.label) === null || _state$label === void 0 ? void 0 : _state$label.length) > 0 || state !== null && state !== void 0 && (_state$label2 = state.label) !== null && _state$label2 !== void 0 && (_state$label2 = _state$label2.props) !== null && _state$label2 !== void 0 && _state$label2.children || queryValue || isTopPlaceholder ? isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc_min' : 'placeholder-dinamyc'
+  }, /*#__PURE__*/React.createElement("label", null, placeholder, required ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, " *") : ''))), loadOptions ? /*#__PURE__*/React.createElement(_async["default"], selectProps) : /*#__PURE__*/React.createElement(_reactSelect["default"], selectProps)), tooltip && /*#__PURE__*/React.createElement("p", {
+    className: "selector_wrapper__text_tooltip"
+  }, tooltip));
+});
+var _default = exports["default"] = DropDownSelector;

package/dist/stories/DropDownSelector/DownSelector.stories.js

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SelectorWithFetchCallback = exports.SelectorWithDefaultValue = exports.SelectorSetInputChange = exports.Selector = void 0;
+var _DownSelector = _interopRequireDefault(require("./DownSelector"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var _default = exports["default"] = {
+  title: 'Components/DropdownSelector',
+  component: _DownSelector["default"],
+  parametrs: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  args: {
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    setState: function setState() {},
+    options: [{
+      label: 'value 1',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }, {
+      label: 'value 6 очень дллиииииииииииииинныыыыыыыыыыыыыыыыыыыыыыыыыыыыыыыый teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext',
+      value: 6
+    }, {
+      label: 'value 1',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }, {
+      label: 'value 1',
+      value: 1
+    }, {
+      label: 'value 2',
+      value: 2
+    }, {
+      label: 'value 3',
+      value: 3
+    }, {
+      label: 'value 4',
+      value: 4
+    }, {
+      label: 'value 5',
+      value: 5
+    }]
+  }
+};
+var Selector = exports.Selector = {
+  args: {
+    id: 1,
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'Бренд',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false,
+    size: 'l'
+  }
+};
+var SelectorWithDefaultValue = exports.SelectorWithDefaultValue = {
+  args: _defineProperty(_defineProperty({
+    id: 2,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    defaultValue: {
+      label: 'value 1',
+      value: 1
+    },
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false
+  }, "disabled", true), "tooltip", 'Подсказка')
+};
+var SelectorSetInputChange = exports.SelectorSetInputChange = {
+  args: {
+    id: 3,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    showIndicator: true,
+    icon: false,
+    iconPlaceholder: false,
+    setInputChange: function setInputChange(args) {
+      return console.log("setInputChange called with ".concat(args));
+    },
+    size: 'l'
+  }
+};
+var SelectorWithFetchCallback = exports.SelectorWithFetchCallback = {
+  args: {
+    id: 4,
+    name: 'Selector',
+    selector_title: 'Selector Title',
+    placeholder: 'placeholder',
+    style: {},
+    multi: true,
+    isClearable: true,
+    isSearchable: true,
+    disabled: false,
+    showIndicator: true,
+    state: [{
+      label: 'Value',
+      value: 'Value'
+    }],
+    icon: false,
+    iconPlaceholder: false,
+    fetchCallback: function fetchCallback(e) {
+      return e;
+    },
+    size: 'l'
+  }
+};