ecomlab-components-next 0.1.31 → 0.1.33

package/dist/components/Article/VideoArticle/VideoArticle.js

@@ -0,0 +1,248 @@
+"use strict";
+'use client';
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoArticle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _universalCookie = _interopRequireDefault(require("universal-cookie"));
+var _EditWrapper = require("../EditWrapper/EditWrapper");
+var _useDebounce = require("../../../common/hooks/useDebounce");
+require("./VideoArticle.scss");
+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 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 _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; }
+var VideoArticle = exports.VideoArticle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _data$;
+  var data = _ref.data,
+    editMode = _ref.editMode,
+    onChange = _ref.onChange,
+    changeContent = _ref.changeContent,
+    position = _ref.position,
+    setContentArr = _ref.setContentArr,
+    id = _ref.id,
+    setCurrentIndex = _ref.setCurrentIndex,
+    ind = _ref.ind,
+    setIsModal = _ref.setIsModal,
+    before = _ref.before,
+    setBeforeBlock = _ref.setBeforeBlock,
+    deleteBlock = _ref.deleteBlock,
+    _ref$readonly = _ref.readonly,
+    readonly = _ref$readonly === void 0 ? false : _ref$readonly,
+    draggableElement = _ref.draggableElement,
+    setDraggableElement = _ref.setDraggableElement,
+    articleId = _ref.articleId,
+    fetchDataById = _ref.fetchDataById,
+    changeBlock = _ref.changeBlock;
+  var _useState = (0, _react.useState)(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    extension = _useState2[0],
+    setExtension = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpen = _useState6[0],
+    setOpen = _useState6[1];
+  var fileInputRef = (0, _react.useRef)();
+  var cookies = new _universalCookie["default"]();
+  var activeLang = localStorage.getItem('lang');
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    objImg = _useState8[0],
+    setObjImg = _useState8[1];
+  var _useState9 = (0, _react.useState)(((_data$ = data[0]) === null || _data$ === void 0 || (_data$ = _data$.properties) === null || _data$ === void 0 ? void 0 : _data$.alt) || ''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    altValue = _useState10[0],
+    setAltValue = _useState10[1];
+  var translatePlaceholderSelected = function translatePlaceholderSelected() {
+    if (activeLang == 'ru') return 'Выберите видео';
+    if (activeLang == 'en') return 'Select an video';
+    if (activeLang == 'tr') return "Bir resim seçin";
+    return 'Выберите видео';
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      error: error,
+      // прикрутить открытие системного диалога с выбором изображения
+      focus: function focus() {},
+      data: objImg
+    };
+  }, [objImg]);
+  var debounceChange = (0, _useDebounce.useDebounce)(changeContent, 1000);
+  (0, _react.useEffect)(function () {
+    debounceChange(id, [objImg]);
+    setContentArr(function (prev) {
+      return prev.map(function (el) {
+        if ((el === null || el === void 0 ? void 0 : el.block_id) == id) {
+          return _objectSpread(_objectSpread({}, el), {}, {
+            content: [objImg]
+          });
+        } else {
+          return el;
+        }
+      });
+    });
+  }, [objImg]);
+  var fetchPostVideo = function fetchPostVideo(file) {
+    var fd = new FormData();
+    fd.append('videos', file);
+    var url = "https://dl.ecomru.ru:6001/clients/videos";
+    var token = cookies.get('auth');
+    var requestHeaders = {
+      'Accept': 'application/json',
+      'Cache-control': 'no-cache',
+      'Authorization': "Bearer ".concat(token)
+    };
+    fetch(url, {
+      body: fd,
+      method: 'POST',
+      headers: requestHeaders
+    }).then(function (res) {
+      if (res.status === 200) {
+        return res.json();
+      } else {
+        throw new Error('bad response');
+      }
+    }).then(function (json) {
+      if (json.videos) {
+        var _json$videos, _json$videos2;
+        console.log((_json$videos = json.videos) === null || _json$videos === void 0 || (_json$videos = _json$videos[0]) === null || _json$videos === void 0 ? void 0 : _json$videos.url);
+        setObjImg({
+          value: (_json$videos2 = json.videos) === null || _json$videos2 === void 0 || (_json$videos2 = _json$videos2[0]) === null || _json$videos2 === void 0 ? void 0 : _json$videos2.url,
+          properties: {
+            alt: altValue
+          }
+        });
+        console.log(objImg);
+        // debounceChange({ value: json.videos?.[0]?.url, type: ARTICLE_TYPES.video, place: position }, ARTICLE_TYPES.video)
+      }
+    })["catch"](function (err) {
+      console.error(err);
+    });
+  };
+  var handleImageClick = function handleImageClick(e) {
+    if (readonly) {
+      var html = document.querySelector('html');
+      html.style = 'overflow: hidden';
+      setOpen(!isOpen);
+      return;
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  var handleFileInput = function handleFileInput(e) {
+    console.log(e);
+    if (e.target.files.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    var fileBase64Reader = new FileReader();
+    fileBase64Reader.onload = function () {
+      var _fileBase64Reader$res, _extensionAndBase64$;
+      var re = /;base64,/;
+      var extensionAndBase64 = (_fileBase64Reader$res = fileBase64Reader.result) === null || _fileBase64Reader$res === void 0 ? void 0 : _fileBase64Reader$res.split(re);
+      var onlyExtension = (_extensionAndBase64$ = extensionAndBase64[0]) === null || _extensionAndBase64$ === void 0 ? void 0 : _extensionAndBase64$.split('image/')[1];
+      setExtension(onlyExtension);
+      fetchPostVideo(e.target.files[0]);
+    };
+    fileBase64Reader.readAsDataURL(e.target.files[0]);
+    setError(false);
+    onChange();
+  };
+  (0, _react.useEffect)(function () {
+    var _data$2, _data$3;
+    setObjImg({
+      value: (_data$2 = data[0]) === null || _data$2 === void 0 ? void 0 : _data$2.value,
+      properties: {
+        alt: (_data$3 = data[0]) === null || _data$3 === void 0 || (_data$3 = _data$3.properties) === null || _data$3 === void 0 ? void 0 : _data$3.alt
+      }
+    });
+  }, []);
+
+  // удалить
+  var handleDeleteBlock = function handleDeleteBlock(e) {
+    //  setContent(e.currentTarget.textContent)
+    setContentArr(function (prev) {
+      return prev.filter(function (el) {
+        if ((el === null || el === void 0 ? void 0 : el.block_id) != id) {
+          return el;
+        }
+      });
+    });
+    deleteBlock(id);
+  };
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      var html = document.querySelector('html');
+      html.style = 'overflow: unset';
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    setCurrentIndex(ind);
+    setBeforeBlock(before);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_EditWrapper.EditWrapper, {
+    id: id,
+    before: before,
+    articleId: articleId,
+    changeBlock: changeBlock,
+    readonly: readonly,
+    draggableElement: draggableElement,
+    setDraggableElement: setDraggableElement,
+    fetchDataById: fetchDataById,
+    deleteFunc: function deleteFunc(e) {
+      return handleDeleteBlock(id);
+    },
+    type: "video",
+    child: /*#__PURE__*/_react["default"].createElement("div", {
+      className: "video-container",
+      onClick: function onClick(e) {
+        setCurrentIndex(ind);
+        setBeforeBlock(before);
+      },
+      onContextMenu: function onContextMenu(e) {
+        if (!readonly) {
+          e.preventDefault();
+          setCurrentIndex(ind);
+          setIsModal(true);
+        }
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      className: !readonly ? 'video-container__button' : 'video-container__button__readonly',
+      onClick: handleImageClick
+    }, /*#__PURE__*/_react["default"].createElement("video", {
+      className: "video-container__video",
+      src: objImg !== null && objImg !== void 0 && objImg.value ? objImg === null || objImg === void 0 ? void 0 : objImg.value : '',
+      controls: true
+    }, /*#__PURE__*/_react["default"].createElement("source", null)), !(objImg !== null && objImg !== void 0 && objImg.value) && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "hidden-placeholder"
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      className: "text"
+    }, translatePlaceholderSelected()))), !(objImg !== null && objImg !== void 0 && objImg.value) && /*#__PURE__*/_react["default"].createElement("input", {
+      name: "uploadedImage",
+      ref: fileInputRef,
+      className: "video-container__file-input",
+      type: "file",
+      onChange: handleFileInput
+      // accept='image/png, image/jpeg'
+    }))
+  });
+});

package/dist/components/Article/VideoArticle/VideoArticle.scss

@@ -0,0 +1,147 @@
+// @import url('../../../font.scss');
+
+.video-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    max-height: 100%;
+    width: auto;
+    max-width: 100%;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-direction: column;
+
+    &__video {
+        width: 100%;
+        height: auto;
+    }
+
+    .video-container__button__readonly,
+    .video-container__button {
+        display: flex;
+        border: none;
+        background-color: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        position: relative;
+
+        .video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+
+        .hidden-placeholder {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 1;
+            background-color: white;
+            opacity: 0.5;
+            transition: 0.3s;
+            opacity: 0;
+            visibility: hidden;
+            cursor: pointer;
+
+            .text {
+                color: #2B2B46;
+                font-family: "Golos Text";
+                font-size: 32px;
+                line-height: 1.1;
+            }
+        }
+
+        &:hover {
+            .hidden-placeholder {
+                visibility: visible;
+                opacity: 0.5;
+            }
+
+        }
+
+
+    }
+
+
+    .blackout {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 100vh;
+        z-index: 10;
+        position: fixed;
+        overflow: auto;
+        align-items: center;
+        justify-content: center;
+        background-color: rgb(0, 0, 0, 0.3);
+        padding: 20px;
+    }
+
+    .video-box {
+        width: 100%;
+        height: 100%;
+
+        .video {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    &__placeholder {
+        width: 200px;
+        height: 200px;
+    }
+
+    &__button {
+        min-width: 100%;
+        position: relative;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 0;
+        border: none;
+        border-radius: 16px;
+        background-color: unset;
+        min-height: 100px;
+
+        &__placeholder {
+            display: flex;
+            width: 400px;
+            height: 400px;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    &__file-input {
+        position: absolute;
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    &__video {
+        display: inline-block;
+        max-width: 100%;
+        width: 100%;
+        height: auto;
+    }
+
+    &__video-placeholder {
+        display: inline-block;
+        max-width: 100%;
+        width: 100%;
+        height: auto;
+    }
+}

package/dist/components/Buttons/ButtonActionDrop/ButtonActionDrop.js

@@ -0,0 +1,109 @@
+"use strict";
+'use client';
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonActionDrop = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _bxDotsHorizontalRounded = _interopRequireDefault(require("./img/bx-dots-horizontal-rounded.svg"));
+require("./ButtonActionDrop.scss");
+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 _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; }
+var ButtonActionDrop = exports.ButtonActionDrop = function ButtonActionDrop(_ref) {
+  var _ref$btns = _ref.btns,
+    btns = _ref$btns === void 0 ? [] : _ref$btns,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    size = _ref.size,
+    color = _ref.color,
+    positionDrop = _ref.positionDrop,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? 1 : _ref$id;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDrop = _useState2[0],
+    setIsDrop = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    top = _useState4[0],
+    setTop = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    left = _useState6[0],
+    setLeft = _useState6[1];
+  var ref = (0, _react.useRef)();
+
+  // Обработчик на клик вне элемента
+  (0, _react.useEffect)(function () {
+    var isDrop = function isDrop(e) {
+      var el = e.target;
+      if (!el.closest("#button-action-drop-".concat(label + id))) {
+        setIsDrop(false);
+      }
+    };
+    document.addEventListener('click', isDrop);
+    return function () {
+      document.removeEventListener('click', isDrop);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    var ref_top = ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().bottom;
+    var ref_left = ref === null || ref === void 0 ? void 0 : ref.current.getBoundingClientRect().right;
+    setLeft(ref_left);
+    setTop(ref_top);
+  }, [isDrop]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "button-action-drop",
+    id: "button-action-drop-".concat(label + id),
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      setIsDrop(!isDrop);
+      var el = e.target;
+      if (el.classList.contains("#button-action-drop-".concat(label + id))) {
+        setIsDrop(false);
+      }
+    }
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    ref: ref,
+    style: {
+      background: color ? color : ''
+    },
+    className: "button-action-drop__btn ".concat(size === 'm' ? 'button-action-drop__btn-medium' : '', " ").concat(size === 's' ? 'button-action-drop__btn-small' : '')
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: _bxDotsHorizontalRounded["default"]
+  })), isDrop && /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'button-action-drop__drop-menu_active',
+    style: {
+      left: left ? left - 160 : 0,
+      top: top ? top : 0
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "button-action-drop__drop-menu-inside",
+    onMouseLeave: function onMouseLeave() {
+      return setIsDrop(false);
+    }
+  }, btns.map(function (_ref2) {
+    var btn = _ref2.btn,
+      func = _ref2.func;
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      className: "button-action-drop__drop-menu__btn",
+      onClick: function onClick(e) {
+        if (id) {
+          func(id);
+        } else {
+          func(e);
+        }
+        setIsDrop(false);
+      }
+    }, btn);
+  }))));
+};

package/dist/components/Buttons/ButtonActionDrop/ButtonActionDrop.scss

@@ -0,0 +1,97 @@
+.button-action-drop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &__btn,
+    &__btn-medium {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+        background: #FAFBFA;
+        border: none;
+        width: 40px;
+        min-width: 40px;
+        height: 40px;
+    }
+
+    &__btn-medium {
+        border-radius: 4px;
+        width: 32px;
+        min-width: 32px;
+        height: 32px;
+    }
+
+    &__btn-small {
+        border-radius: 4px;
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+
+        img {
+            transform: rotate(90deg);
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &__drop-menu,
+    &__drop-menu_active {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 160px;
+        height: auto;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+       // opacity: 0;
+        visibility: hidden;
+       // transition: 0.3s;
+        z-index: 5;
+        z-index: 100;
+        padding-top: 6px;
+
+        &_active {
+            opacity: 1;
+            visibility: visible;
+           // transition: 0.3s;
+        }
+
+        &__btn {
+            padding: 8px;
+            width: 100%;
+            min-height: 32px;
+            background-color: inherit;
+            border: none;
+            text-align: left;
+            color: #3A3A3A;
+            font-family: NunitoSans;
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 14px;
+
+
+            &:hover {
+              //  transition: 0.3s;
+                background-color: #F3F3F3;
+            }
+        }
+    }
+
+    &__drop-menu-inside {
+        display: flex;
+        flex-direction: column;
+        border-radius: 8px;
+        border: 1px solid #E0E7F2;
+        background: #fff;
+        box-shadow: 0px 4px 4px 0px rgba(30, 41, 59, 0.06);
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+}

package/dist/components/Buttons/ButtonActionDrop/img/bx-dots-horizontal-rounded.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10Z" fill="#636D65"/>
+</svg>