ecomlab-components-next 0.1.28 → 0.1.29

package/dist/components/Table/ButtonUpload/ButtonUpload.scss

@@ -0,0 +1,45 @@
+.btn-box_upload {
+    position: relative;
+    cursor: pointer;
+
+    .btn__white_upload {
+        width: 108px;
+        min-width: 108px;
+        background-color: #F1F5F9;
+        font-size: 14px;
+        height: 32px;
+        border: 0;
+        color: #020617;
+        border-radius: 8px;
+        padding-left: 24px;
+        background-image: url('./img/upload_icon.svg');
+        background-position: center left 6px;
+        background-size: 16px;
+        background-repeat: no-repeat;
+        border: 1px solid var(--table-border, #E0E7F2);
+        color: var(--all-text-secondary-text, #475569);
+        /* Button link/Medium */
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 16px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: #E0E7F2;
+            transition: 0.5s;
+        }
+    }
+
+    .input-file {
+        position: absolute;
+        opacity: 0;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+        cursor: pointer;
+    }
+}

package/dist/components/Table/ButtonUpload/img/upload_icon.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_9164_310782" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1904 6.66699C13.9276 6.66699 13.7142 6.44978 13.7142 6.18214V3.7579C13.7142 2.95451 13.0747 2.30336 12.2857 2.30336L3.71424 2.30336C2.9252 2.30336 2.28567 2.95451 2.28567 3.7579V6.18214C2.28567 6.44978 2.07234 6.66699 1.80948 6.66699C1.54663 6.66699 1.33329 6.44978 1.33329 6.18214V3.7579C1.33329 2.41923 2.39948 1.33366 3.71424 1.33366L12.2857 1.33366C13.6004 1.33366 14.6666 2.41923 14.6666 3.7579V6.18214C14.6666 6.44978 14.4533 6.66699 14.1904 6.66699Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1904 6.66699C13.9276 6.66699 13.7142 6.44978 13.7142 6.18214V3.7579C13.7142 2.95451 13.0747 2.30336 12.2857 2.30336L3.71424 2.30336C2.9252 2.30336 2.28567 2.95451 2.28567 3.7579V6.18214C2.28567 6.44978 2.07234 6.66699 1.80948 6.66699C1.54663 6.66699 1.33329 6.44978 1.33329 6.18214V3.7579C1.33329 2.41923 2.39948 1.33366 3.71424 1.33366L12.2857 1.33366C13.6004 1.33366 14.6666 2.41923 14.6666 3.7579V6.18214C14.6666 6.44978 14.4533 6.66699 14.1904 6.66699Z" fill="#70808F"/>
+<path d="M14.1904 5.66699C14.4968 5.66699 14.7142 5.91456 14.7142 6.18214H12.7142C12.7142 6.985 13.3584 7.66699 14.1904 7.66699V5.66699ZM14.7142 6.18214V3.7579L12.7142 3.7579V6.18214H14.7142ZM14.7142 3.7579C14.7142 2.41929 13.6439 1.30336 12.2857 1.30336V3.30336C12.5055 3.30336 12.7142 3.48973 12.7142 3.7579L14.7142 3.7579ZM12.2857 1.30336L3.71424 1.30336V3.30336L12.2857 3.30336V1.30336ZM3.71424 1.30336C2.356 1.30336 1.28567 2.41929 1.28567 3.7579L3.28567 3.7579C3.28567 3.48973 3.49439 3.30336 3.71424 3.30336V1.30336ZM1.28567 3.7579V6.18214H3.28567V3.7579L1.28567 3.7579ZM1.28567 6.18214C1.28567 5.91456 1.50314 5.66699 1.80948 5.66699V7.66699C2.64153 7.66699 3.28567 6.985 3.28567 6.18214H1.28567ZM1.80948 5.66699C2.11582 5.66699 2.33329 5.91456 2.33329 6.18214H0.333292C0.333292 6.985 0.97743 7.66699 1.80948 7.66699V5.66699ZM2.33329 6.18214V3.7579L0.333292 3.7579V6.18214H2.33329ZM2.33329 3.7579C2.33329 2.95446 2.96868 2.33366 3.71424 2.33366V0.333658C1.83029 0.333658 0.333292 1.88401 0.333292 3.7579L2.33329 3.7579ZM3.71424 2.33366L12.2857 2.33366V0.333658L3.71424 0.333658V2.33366ZM12.2857 2.33366C13.0312 2.33366 13.6666 2.95446 13.6666 3.7579H15.6666C15.6666 1.88401 14.1696 0.333658 12.2857 0.333658V2.33366ZM13.6666 3.7579V6.18214H15.6666V3.7579H13.6666ZM13.6666 6.18214C13.6666 5.91456 13.8841 5.66699 14.1904 5.66699V7.66699C15.0225 7.66699 15.6666 6.985 15.6666 6.18214H13.6666Z" fill="#1890FF" mask="url(#path-1-inside-1_9164_310782)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.6634 4.1425C7.84911 3.95293 8.15097 3.95293 8.33668 4.1425L11.1937 7.05157C11.3799 7.24066 11.3799 7.54802 11.1937 7.73711C11.008 7.92668 10.7062 7.92668 10.5205 7.73711L8.47622 5.65569V14.1821C8.47622 14.4498 8.26289 14.667 8.00004 14.667C7.73719 14.667 7.52387 14.4498 7.52387 14.1821L7.52387 5.65569L5.47963 7.73711C5.29392 7.92668 4.99205 7.92668 4.80635 7.73711C4.62016 7.54802 4.62016 7.24066 4.80635 7.05157L7.6634 4.1425Z" fill="#1890FF"/>
+</svg>

package/dist/components/Table/CheckboxToggle/CheckboxToggle.js

@@ -0,0 +1,58 @@
+"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["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./CheckboxToggle.scss");
+var _excluded = ["id", "value", "onChange", "containerClassName", "inputClassName", "className", "disabled"];
+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 _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 CheckboxToggle = function CheckboxToggle(_ref) {
+  var id = _ref.id,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    containerClassName = _ref.containerClassName,
+    inputClassName = _ref.inputClassName,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    _value = _useState2[0],
+    set_value = _useState2[1];
+  var _onChange = function _onChange(e) {
+    set_value(e.target.checked);
+    if (onChange) {
+      onChange(e.target.checked);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    set_value(value);
+  }, [value]);
+  return /*#__PURE__*/_react["default"].createElement("label", {
+    className: disabled ? 'checkbox-status_disabled' : "checkbox-status"
+  }, /*#__PURE__*/_react["default"].createElement("input", _extends({
+    type: "checkbox",
+    disabled: disabled,
+    id: id,
+    className: "checkbox " + (inputClassName ? inputClassName : ""),
+    checked: _value,
+    onChange: _onChange
+  }, props)), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "checkbox-status-switch"
+  }));
+};
+var _default = exports["default"] = CheckboxToggle;

package/dist/components/Table/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: 4px;
+            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: 3px;
+        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: 4px;
+        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/components/Table/Paginator/Paginator.js

@@ -0,0 +1,260 @@
+"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.usePagination = exports.PAGE_SIZES = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./Paginator.scss");
+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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 PAGE_SIZES = exports.PAGE_SIZES = [10, 50, 100];
+var DEFAULT_PAGE = 1;
+var DOT_SCROLL_STEP = 5;
+var VISIBLE_ELEMENTS = 7;
+var Paginator = function Paginator(_ref) {
+  var _Array$from;
+  var pageSize = _ref.pageSize,
+    pageNumber = _ref.pageNumber,
+    setPageSize = _ref.setPageSize,
+    setPageNumber = _ref.setPageNumber,
+    total = _ref.total,
+    lang = _ref.lang;
+  var totalPages = total ? Math.ceil(total / pageSize) : 0;
+  var firstItemOnThePage = pageSize * (pageNumber - 1) + 1;
+  var lastItemOnThePage = firstItemOnThePage === 1 ? pageSize : firstItemOnThePage - 1 + pageSize;
+  if (total < lastItemOnThePage) {
+    lastItemOnThePage = total;
+  }
+  var selectRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    viewRange = _useState2[0],
+    setViewRange = _useState2[1];
+
+  //перевод
+  var translateOf = function translateOf() {
+    if (lang == 'tur') return 'üzerinden';
+    if (lang == 'eng') return 'out of';
+    return 'из';
+  };
+  var onPageNumberClick = function onPageNumberClick(e) {
+    var newNumber = parseInt(e.target.title, 10);
+    setPageNumber(newNumber);
+    if (newNumber === DEFAULT_PAGE || newNumber === totalPages) updateViewRange(newNumber);
+  };
+  var onSelectChange = function onSelectChange(e) {
+    setPageNumber(DEFAULT_PAGE);
+    setPageSize(parseInt(e.target.value));
+  };
+  var updatePageNumber = function updatePageNumber(number) {
+    setPageNumber(number);
+    updateViewRange(number);
+  };
+  (0, _react.useEffect)(function () {
+    selectRef.current.value = pageSize;
+  }, []);
+  (0, _react.useEffect)(function () {
+    updateViewRange(pageNumber);
+  }, [totalPages]);
+  var LeftDots = function LeftDots(currentNumber) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "dots",
+      onClick: function onClick() {
+        return updatePageNumber(currentNumber - DOT_SCROLL_STEP);
+      }
+    }, "...");
+  };
+  var RightDots = function RightDots(currentNumber) {
+    return /*#__PURE__*/_react["default"].createElement("span", {
+      className: "dots",
+      onClick: function onClick() {
+        return updatePageNumber(currentNumber + DOT_SCROLL_STEP);
+      }
+    }, "...");
+  };
+  var LeftArrow = function LeftArrow() {
+    return /*#__PURE__*/_react["default"].createElement(Arrow, {
+      wrapperClassName: "arrow_wrapper",
+      className: "arrow_prev",
+      scrollCallback: function scrollCallback() {
+        return updatePageNumber(pageNumber - 1);
+      },
+      disabled: pageNumber === DEFAULT_PAGE
+    });
+  };
+  var RightArrow = function RightArrow() {
+    return /*#__PURE__*/_react["default"].createElement(Arrow, {
+      wrapperClassName: "arrow_wrapper",
+      className: "arrow_next",
+      scrollCallback: function scrollCallback() {
+        return updatePageNumber(pageNumber + 1);
+      },
+      disabled: pageNumber === totalPages
+    });
+  };
+  var updateViewRange = function updateViewRange(currentNumber) {
+    var allPageNumbers = Array.from(_toConsumableArray(Array(totalPages).keys())).map(function (p) {
+      return p + 1;
+    });
+    if (!totalPages || totalPages < VISIBLE_ELEMENTS) {
+      setViewRange(allPageNumbers);
+      return;
+    }
+    if (currentNumber === DEFAULT_PAGE || currentNumber - DEFAULT_PAGE < DOT_SCROLL_STEP) {
+      setViewRange([].concat(_toConsumableArray(allPageNumbers.slice(0, DOT_SCROLL_STEP)), [RightDots, totalPages]));
+      return;
+    }
+    if (currentNumber === totalPages || totalPages - currentNumber < DOT_SCROLL_STEP) {
+      setViewRange([DEFAULT_PAGE, LeftDots].concat(_toConsumableArray(allPageNumbers.slice(-DOT_SCROLL_STEP))));
+      return;
+    }
+    setViewRange([DEFAULT_PAGE, LeftDots, currentNumber - 1, currentNumber, currentNumber + 1, RightDots, totalPages]);
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "paginator"
+  }, /*#__PURE__*/_react["default"].createElement("select", {
+    ref: selectRef,
+    onChange: onSelectChange,
+    className: "select-page"
+  }, PAGE_SIZES === null || PAGE_SIZES === void 0 ? void 0 : PAGE_SIZES.map(function (size) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: size
+    }, size);
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: 'pagination_wrapper' + (totalPages ? '' : '_disabled')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "pagination_container"
+  }, /*#__PURE__*/_react["default"].createElement(LeftArrow, null), !totalPages && ((_Array$from = Array.from(_toConsumableArray(Array(3).keys()))) === null || _Array$from === void 0 ? void 0 : _Array$from.map(function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(PageNumber, {
+      itemId: index,
+      className: "page-num",
+      title: index + 1,
+      key: index
+    });
+  })), viewRange === null || viewRange === void 0 ? void 0 : viewRange.map(function (el) {
+    return typeof el === 'number' ? /*#__PURE__*/_react["default"].createElement(PageNumber, {
+      className: "page-num",
+      onClick: onPageNumberClick,
+      selected: pageNumber === el,
+      title: el,
+      key: el,
+      itemId: el
+    }) : el(pageNumber);
+  }), /*#__PURE__*/_react["default"].createElement(RightArrow, null))), total ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: "total-info"
+  }, firstItemOnThePage, " \u2014 ", lastItemOnThePage, " ", translateOf(), " ", total) : /*#__PURE__*/_react["default"].createElement("p", {
+    className: "total-info",
+    style: {
+      minWidth: '60px'
+    }
+  }));
+};
+var Arrow = function Arrow(_ref2) {
+  var className = _ref2.className,
+    wrapperClassName = _ref2.wrapperClassName,
+    scrollCallback = _ref2.scrollCallback,
+    disabled = _ref2.disabled;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: wrapperClassName
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: className,
+    disabled: disabled,
+    onClick: scrollCallback
+  }));
+};
+var PageNumber = function PageNumber(_ref3) {
+  var className = _ref3.className,
+    onClick = _ref3.onClick,
+    selected = _ref3.selected,
+    title = _ref3.title;
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    className: className + (selected ? '_selected' : ''),
+    onClick: onClick,
+    title: title,
+    tabIndex: 0
+  }, title);
+};
+var usePagination = exports.usePagination = function usePagination(fetchCallback, dependencies, filters) {
+  var lang = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'ru';
+  var setParams = arguments.length > 4 ? arguments[4] : undefined;
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    total = _useState4[0],
+    setTotal = _useState4[1];
+  var _useState5 = (0, _react.useState)(DEFAULT_PAGE),
+    _useState6 = _slicedToArray(_useState5, 2),
+    page = _useState6[0],
+    setPage = _useState6[1];
+  var _useState7 = (0, _react.useState)(PAGE_SIZES[0]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    limit = _useState8[0],
+    setLimit = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    noFetch = _useState10[0],
+    setNoFetch = _useState10[1];
+  var reset = function reset() {
+    setPage(DEFAULT_PAGE);
+    if (page !== DEFAULT_PAGE) setNoFetch(true);
+    if (typeof setParams === 'function') {
+      setParams([]);
+    }
+  };
+
+  // todo - remove
+  (0, _react.useEffect)(function () {
+    if (dependencies && page !== DEFAULT_PAGE) {
+      setPage(DEFAULT_PAGE);
+      setNoFetch(true);
+    }
+  }, dependencies);
+  (0, _react.useEffect)(function () {
+    if (total === 0) {
+      return;
+    }
+    if (noFetch) {
+      setNoFetch(false);
+      return;
+    }
+    if (fetchCallback) {
+      var abortController = fetchCallback(filters) || new AbortController();
+      return function () {
+        if (abortController !== null && abortController !== void 0 && abortController.abort) {
+          console.log(abortController);
+          abortController.abort();
+        }
+      };
+    }
+  }, [page, limit, filters]);
+  var _useState11 = (0, _react.useState)(typeof localStorage !== 'undefined' ? localStorage.getItem("lang") : 'ru' || 'ru'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    settings = _useState12[0],
+    setSettings = _useState12[1];
+  (0, _react.useEffect)(function () {
+    if (typeof localStorage !== 'undefined') {
+      setSettings(localStorage.getItem("lang"));
+    }
+  }, []);
+  var PaginatorComponent = /*#__PURE__*/_react["default"].createElement(Paginator, {
+    lang: settings,
+    pageSize: limit,
+    pageNumber: page,
+    setPageSize: setLimit,
+    setPageNumber: setPage,
+    total: total
+  });
+  return [page, limit, total, setTotal, PaginatorComponent, reset];
+};

package/dist/components/Table/Paginator/Paginator.scss

@@ -0,0 +1,198 @@
+.pagination_wrapper {
+    &_disabled {
+        width: 123px;
+        opacity: 0.3;
+        pointer-events: none;
+    }
+}
+
+.pagination_container {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 2px;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.page-num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    text-align: center;
+    font-family: NunitoSans;
+    color: #11195D;
+    text-align: center;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    //line-height: 16px; 
+    border-radius: 4px;
+    cursor: pointer;
+    padding-left: 2px;
+    padding-right: 2px;
+
+    &_selected {
+        display: flex;
+        transition: 0.3s;
+        @extend .page-num;
+        background-color: #51CA64;
+        color: white;
+    }
+
+    &:hover {
+        transition: 0.3s;
+        background-color: #51CA64;
+        color: white
+    }
+}
+
+.dots {
+    @extend .page-num;
+}
+
+.arrow_next {
+    @extend .page-num;
+    display: flex;
+    position: relative;
+    width: 12px;
+    height: 24px;
+    background-image: url('./img/arrow_next.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+    transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -webkit-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    -o-transform: rotate(180deg);
+
+    &:hover {
+        background-color: inherit;
+    }
+
+    // @include optimizeSafariSvg(url('./img/arrow_next.svg'));
+    &::before {
+        transform: scale(0.13);
+        transform-origin: 46px 7px;
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+
+        &:hover {
+            background-color: unset;
+        }
+
+        pointer-events: none;
+    }
+}
+
+.arrow_prev {
+    @extend .page-num;
+    display: flex;
+    position: relative;
+    width: 12px;
+    height: 24px;
+    background-image: url('./img/arrow_prev.svg');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    // @include optimizeSafariSvg(url('./img/arrow_next.svg'));
+    &::before {
+        background-image: none;
+        transform: scale(0.13) scaleX(-1);
+        transform-origin: 42px 7px;
+    }
+
+    &[disabled] {
+        @extend .arrow_prev;
+        opacity: 0.1;
+
+        &:hover {
+            background-color: unset;
+        }
+
+        pointer-events: none;
+    }
+}
+
+.arrow_wrapper:has(.arrow_prev[disabled]) {
+    cursor: not-allowed;
+}
+
+.paginator {
+    padding: 8px 12px;
+    background-color: #FAFBFA;
+    border-radius: 0px 0px 8px 8px;
+    width: 100%;
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0px;
+
+    .total-info {
+        font-size: 14px;
+        // align-self: center;
+        text-align: center;
+        font-family: NunitoSans;
+        color: #11195D;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        padding: 2px;
+        //   line-height: 16px; 
+    }
+}
+
+.select-page {
+    box-sizing: border-box;
+    outline: .5px solid #F0F0F0;
+    padding: .25em .5em;
+    border: 1px solid #F0F0F0;
+    border-radius: 4px;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    width: 60px;
+    background-image: url('./img/arrow_blue.svg');
+    background-size: 12px 12px;
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    font-size: 12px;
+    margin: 0 4px;
+    background-color: #F9FAFF;
+    outline: none;
+    border: none;
+    font-family: NunitoSans;
+    color: #11195D;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 16px;
+    max-height: 24px;
+    min-height: 24px;
+    min-width: 50px;
+}
+
+@media (max-width: 600px) {
+    .page-num {
+        display: none;
+
+        &_selected {
+            display: flex;
+        }
+    }
+
+    .arrow_prev,
+    .arrow_next {
+        display: flex;
+    }
+}