@qiwi/pijma-desktop-extra 0.1.7 → 0.1.10

package/lib/dts/main/date-picker/index.d.ts

@@ -1,6 +1,6 @@
+import 'react-day-picker/dist/style.css';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import DatePickerProps from './DatePickerProps';
-import 'react-day-picker/dist/style.css';
 declare const DatePicker: React.ComponentType<Omit<import("react-i18next").Subtract<DatePickerProps & WithTranslation<"translation", undefined>, import("react-i18next").WithTranslationProps>, keyof WithTranslation<N, undefined>> & import("react-i18next").WithTranslationProps>;
 export { DatePicker };

package/lib/dts/main/date-range-picker/index.d.ts

@@ -1,7 +1,7 @@
+import 'react-day-picker/dist/style.css';
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 import DateRangerPickerProps from './DateRangerPickerProps';
-import 'react-day-picker/dist/style.css';
 export declare const PickerDropdown: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: React.ElementType<any> | undefined;

package/lib/dts/main/paginator/PaginatorProps.d.ts

@@ -2,7 +2,7 @@ export default interface PaginatorProps {
     onChange?: (value?: any) => void;
     activePage: number;
     totalItemsCount: number;
-    pageRangeDisplayed: number;
+    pageRangeDisplayed?: number;
     itemsCountPerPage: number;
     padding?: number;
     hideFirstLastPages?: boolean;

package/lib/dts/main/paginator/index.d.ts

@@ -1,25 +1,6 @@
-import React, { Component } from 'react';
+import { Component } from 'react';
 import PaginatorProps from './PaginatorProps';
-export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & {
-    color: string | undefined;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any> | undefined;
-} & {
-    isNavigationHidden: boolean;
-    padding: number | undefined;
-    isFirstLastNavigationHidden: boolean;
-}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare class Paginator extends Component<PaginatorProps> {
     onChangePage(page: any): void;
-    resolveNavigaterItemColor(direction: string, { activePage, itemsCountPerPage, totalItemsCount, }: {
-        activePage: number;
-        itemsCountPerPage: number;
-        totalItemsCount: number;
-    }): string | undefined;
     render(): JSX.Element | null;
 }

package/lib/dts/main/table/index.d.ts

@@ -1,3 +1,9 @@
 /// <reference types="react" />
-export declare const Table: ({ columns, data, onSelect, rowCursor, isActive, }: any) => JSX.Element;
+import { TableOptions } from 'react-table';
+export declare type TTableProps = Pick<TableOptions<any>, 'columns' | 'data'> & {
+    onSelect?: (d: any) => void;
+    isActive?: (d: any) => boolean;
+    rowCursor?: CSSStyleDeclaration['cursor'];
+};
+export declare const Table: ({ columns, data, onSelect, rowCursor, isActive, }: TTableProps) => JSX.Element;
 export { columnFactory } from './column';

package/lib/es5/main/date-picker/index.js

@@ -14,6 +14,7 @@ var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.
 var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 var _taggedTemplateLiteralLoose = require("@swc/helpers/lib/_tagged_template_literal_loose.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
+require("react-day-picker/dist/style.css");
 var _pijmaCore = require("@qiwi/pijma-core");
 var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _dateFns = require("date-fns");
@@ -23,7 +24,6 @@ var _reactI18Next = require("react-i18next");
 var _theme = require("../theme/index.js");
 var _locale = require("./locale.js");
 var _wrap = /*#__PURE__*/ _interopRequireDefault(require("./wrap.js"));
-require("react-day-picker/dist/style.css");
 function _templateObject() {
     var data = _taggedTemplateLiteralLoose([
         "\n  position: absolute;\n  background: #fff;\n  z-index: 10;\n  box-shadow: ",

package/lib/es5/main/date-picker/locale.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "locales", {
         return locales;
     }
 });
-var _locale = require("date-fns/locale");
+var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
+var _indexJs = /*#__PURE__*/ _interopRequireDefault(require("date-fns/locale/en-US/index.js"));
+var _indexJs1 = /*#__PURE__*/ _interopRequireDefault(require("date-fns/locale/ru/index.js"));
 var locales = {
-    en: _locale.enUS,
-    ru: _locale.ru
+    en: _indexJs.default,
+    ru: _indexJs1.default
 };

package/lib/es5/main/date-range-picker/index.js

@@ -22,16 +22,16 @@ var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.
 var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 var _taggedTemplateLiteralLoose = require("@swc/helpers/lib/_tagged_template_literal_loose.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
+require("react-day-picker/dist/style.css");
 var _pijmaCore = require("@qiwi/pijma-core");
 var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _dateFns = require("date-fns");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _reactDayPicker = require("react-day-picker");
 var _reactI18Next = require("react-i18next");
+var _locale = require("../date-picker/locale.js");
 var _wrap = /*#__PURE__*/ _interopRequireDefault(require("../date-picker/wrap.js"));
 var _theme = require("../theme/index.js");
-var _locale = require("../date-picker/locale.js");
-require("react-day-picker/dist/style.css");
 function _templateObject() {
     var data = _taggedTemplateLiteralLoose([
         "\n  position: absolute;\n  background: #fff;\n  z-index: 10;\n  border-radius: 8px;\n  box-shadow: ",

package/lib/es5/main/dropdown/Container.js

@@ -54,7 +54,7 @@ function _templateObject1() {
 }
 function _templateObject2() {
     var data = _taggedTemplateLiteralLoose([
-        "\n    box-sizing: border-box;\n    padding: 10px 24px;\n    width: 100%;\n    cursor: pointer;\n    :hover {\n      background-color: #f5f5f5;\n    }\n    &--active {\n      background-color: #e6e6e6 !important;\n    }\n    ",
+        "\n  box-sizing: border-box;\n  padding: 10px 24px;\n  width: 100%;\n  cursor: pointer;\n  :hover {\n    background-color: #f5f5f5;\n  }\n  &--active {\n    background-color: #e6e6e6 !important;\n  }\n  ",
         "\n"
     ]);
     _templateObject2 = function _templateObject2() {

package/lib/es5/main/paginator/index.js

@@ -2,66 +2,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    IconWrapper: function() {
-        return IconWrapper;
-    },
-    Wrapper: function() {
-        return Wrapper;
-    },
-    Paginator: function() {
+Object.defineProperty(exports, "Paginator", {
+    enumerable: true,
+    get: function() {
         return Paginator;
     }
 });
 var _extends = require("@swc/helpers/lib/_extends.js").default;
 var _inherits = require("@swc/helpers/lib/_inherits.js").default;
-var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _taggedTemplateLiteralLoose = require("@swc/helpers/lib/_tagged_template_literal_loose.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
-var _pijmaCore = require("@qiwi/pijma-core");
+var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-var _reactJsPagination = /*#__PURE__*/ _interopRequireDefault(require("react-js-pagination"));
-var _theme = require("../theme/index.js");
-function _templateObject() {
-    var data = _taggedTemplateLiteralLoose([
-        "\n  width: 24px;\n  height: 24px;\n  float: right;\n  border: none;\n  display: inline-block;\n  fill: ",
-        ";\n"
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _taggedTemplateLiteralLoose([
-        "\n  ul.pagination {\n    display: inline-flex;\n    background: ",
-        ";\n    border-radius: 8px;\n    box-shadow: 0 1px 3px ",
-        ";\n\n    li {\n      display: flex;\n      align-items: center;\n      padding: ",
-        "px;\n      cursor: pointer;\n\n      a {\n        display: inline-block;\n        min-width: 24px;\n        text-align: center;\n        color: ",
-        ";\n        margin: 0 auto;\n      }\n    }\n\n    li.active a {\n      color: ",
-        ";\n      text-align: center;\n    }\n\n    li:not(:last-child) {\n      border-right: 1px solid #e6e6e6;\n    }\n\n    ",
-        "\n"
-    ]);
-    _templateObject1 = function _templateObject1() {
-        return data;
-    };
-    return data;
-}
-var IconWrapper = (0, _pijmaCore.styled)("div")(_templateObject(), function(props) {
-    return props.color || _theme.COLOR.TEXT.Primary;
-});
-var Wrapper = (0, _pijmaCore.styled)("div")(_templateObject1(), _theme.COLOR.BACKGROUND.Primary, _theme.COLOR.BACKGROUND.Shadow, function(props) {
-    return props.padding || 20;
-}, _theme.COLOR.TEXT.Primary, _theme.COLOR.BRAND.Primary, function(props) {
-    return props.isFirstLastNavigationHidden ? "" : "li:first-child, li:last-child { width: 72px }";
-});
 var Paginator = /*#__PURE__*/ function(Component) {
     "use strict";
     _inherits(Paginator, Component);
@@ -75,66 +27,18 @@ var Paginator = /*#__PURE__*/ function(Component) {
         }
         this.props.onChange(page);
     };
-    _proto.resolveNavigaterItemColor = function resolveNavigaterItemColor(direction, param) {
-        var activePage = param.activePage, itemsCountPerPage = param.itemsCountPerPage, totalItemsCount = param.totalItemsCount;
-        if (direction === "forward") {
-            if (activePage === 1) {
-                return _theme.COLOR.TEXT.Secondary3;
-            }
-        } else {
-            if (activePage === Math.ceil(totalItemsCount / itemsCountPerPage)) {
-                return _theme.COLOR.TEXT.Secondary3;
-            }
-        }
-    };
     _proto.render = function render() {
-        var _props = this.props, activePage = _props.activePage, totalItemsCount = _props.totalItemsCount, pageRangeDisplayed = _props.pageRangeDisplayed, itemsCountPerPage = _props.itemsCountPerPage, padding = _props.padding, hideFirstLastPages = _props.hideFirstLastPages, paginatorProps = _props.paginatorProps;
-        var nextPageColor = this.resolveNavigaterItemColor("backward", this.props);
-        var prevPageColor = this.resolveNavigaterItemColor("forward", this.props);
-        var isNavigationHidden = Math.ceil(totalItemsCount / itemsCountPerPage) <= pageRangeDisplayed;
-        var isFirstLastNavigationHidden = hideFirstLastPages || Math.ceil(totalItemsCount / itemsCountPerPage) <= pageRangeDisplayed;
+        var _props = this.props, activePage = _props.activePage, totalItemsCount = _props.totalItemsCount, itemsCountPerPage = _props.itemsCountPerPage, paginatorProps = _props.paginatorProps;
         var isPaginatorHidden = totalItemsCount <= itemsCountPerPage;
         if (isPaginatorHidden) {
             return null;
         }
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(Wrapper, {
-            isNavigationHidden: isNavigationHidden,
-            padding: padding,
-            isFirstLastNavigationHidden: isFirstLastNavigationHidden,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactJsPagination.default, _extends({
-                activePage: activePage,
-                itemsCountPerPage: itemsCountPerPage,
-                totalItemsCount: totalItemsCount,
-                pageRangeDisplayed: pageRangeDisplayed,
-                hideNavigation: isNavigationHidden,
-                hideFirstLastPages: isFirstLastNavigationHidden,
-                onChange: this.onChangePage.bind(this),
-                firstPageText: /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconWrapper, {
-                    color: prevPageColor,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
-                        name: "angle-double-left"
-                    })
-                }),
-                lastPageText: /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconWrapper, {
-                    color: nextPageColor,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
-                        name: "angle-double-right"
-                    })
-                }),
-                prevPageText: /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconWrapper, {
-                    color: prevPageColor,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
-                        name: "angle-left"
-                    })
-                }),
-                nextPageText: /*#__PURE__*/ (0, _jsxRuntime.jsx)(IconWrapper, {
-                    color: nextPageColor,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaCore.Icon, {
-                        name: "angle-right"
-                    })
-                })
-            }, paginatorProps))
-        });
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaDesktop.Pagination, _extends({
+            active: activePage,
+            count: itemsCountPerPage,
+            total: totalItemsCount,
+            onChange: this.onChangePage.bind(this)
+        }, paginatorProps));
     };
     return Paginator;
 }(_react.Component);

package/lib/es5/main/table/index.js

@@ -19,6 +19,7 @@ _export(exports, {
 var _extends = require("@swc/helpers/lib/_extends.js").default;
 var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 var _taggedTemplateLiteralLoose = require("@swc/helpers/lib/_tagged_template_literal_loose.js").default;
+var _typeOf = require("@swc/helpers/lib/_type_of.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
 var _pijmaCore = require("@qiwi/pijma-core");
 var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
@@ -38,9 +39,9 @@ function _templateObject() {
 }
 function _templateObject1() {
     var data = _taggedTemplateLiteralLoose([
-        "\n  width: 100%;\n  table {\n    width: 100%;\n    border-spacing: 0;\n    font-family: 'Museo Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    font-size: 10pt;\n    text-overflow: ellipsis;\n\n    overflow: hidden;\n    overflow-wrap: break-word;\n    thead {\n      tr th {\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 10pt;\n        font-weight: 150;\n        color: rgb(102, 102, 102);\n        text-align: start;\n        user-select: none;\n        :first-child {\n          padding-left: 32px;\n        }\n        :last-child {\n          padding-right: 20px;\n        }\n      }\n      font-weight: 300;\n      border-bottom: 1px solid ",
+        "\n  width: 100%;\n  table {\n    width: 100%;\n    border-spacing: 0;\n    font-family: 'Museo Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    font-size: 10pt;\n    text-overflow: ellipsis;\n\n    overflow: hidden;\n    overflow-wrap: break-word;\n    thead {\n      tr th {\n        border-bottom: 1px solid rgba(0, 0, 0, 0.05);\n        font-size: 10pt;\n        font-weight: 150;\n        color: rgb(102, 102, 102);\n        text-align: start;\n        user-select: none;\n        :first-child {\n          padding-left: 44px;\n        }\n        :last-child {\n          padding-right: 44px;\n        }\n      }\n      font-weight: 300;\n      border-bottom: 1px solid ",
         ";\n    }\n\n    tbody {\n      tr {\n        :hover {\n          background-color: ",
-        ";\n          cursor: pointer;\n        }\n        :last-child {\n          td {\n            border-bottom: 0;\n          }\n        }\n        td {\n          :first-child {\n            padding-left: 32px;\n          }\n          :last-child {\n            padding-right: 20px;\n          }\n        }\n      }\n    }\n\n    th,\n    td {\n      margin: 0;\n      padding: 0.25rem 12px;\n\n      :last-child {\n        border-right: 0;\n      }\n    }\n  }\n"
+        ";\n          cursor: pointer;\n        }\n        :last-child {\n          td {\n            border-bottom: 0;\n          }\n        }\n        td {\n          :first-child {\n            padding-left: 44px;\n          }\n          :last-child {\n            padding-right: 44px;\n          }\n        }\n      }\n    }\n\n    th,\n    td {\n      margin: 0;\n      padding: 0.25rem 12px;\n\n      :last-child {\n        border-right: 0;\n      }\n    }\n  }\n"
     ]);
     _templateObject1 = function _templateObject1() {
         return data;
@@ -62,19 +63,22 @@ var Table = function(param) {
     }), getTableProps = ref.getTableProps, getTableBodyProps = ref.getTableBodyProps, headerGroups = ref.headerGroups, rows = ref.rows, prepareRow = ref.prepareRow;
     // Render the UI for your table
     var headers = [];
-    var thead = headerGroups.map(function(headerGroup, i) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
-            children: headerGroup.headers.map(function(column, i) {
+    var thead = headerGroups.map(function(headerGroup) {
+        return(// headerGroup.getHeaderGroupProps() returns a key
+        // eslint-disable-next-line react/jsx-key
+        /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", _extends({}, headerGroup.getHeaderGroupProps(), {
+            children: headerGroup.headers.map(function(column) {
                 var header = column.render("Header");
-                if (typeof header === "string") {
+                var typeofHeader = typeof header === "undefined" ? "undefined" : _typeOf(header);
+                if (typeofHeader === "string" || typeofHeader === "object" && /*#__PURE__*/ _react.default.isValidElement(header) && header.props.children) {
                     headers.push(header);
                     return /*#__PURE__*/ (0, _jsxRuntime.jsx)("th", _extends({}, column.getHeaderProps(), {
                         children: header
-                    }), i);
+                    }));
                 }
                 return null;
             })
-        }), i);
+        })));
     });
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableWrapper, {
         children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)("table", _extends({}, getTableProps(), {
@@ -83,9 +87,11 @@ var Table = function(param) {
                     children: headers.length > 0 ? thead : null
                 }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}),
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)("tbody", _extends({}, getTableBodyProps(), {
-                    children: rows.map(function(row, i) {
+                    children: rows.map(function(row) {
                         prepareRow(row);
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TrWrapper, _extends({
+                        return(// row.getRowProps() returns a key
+                        // eslint-disable-next-line react/jsx-key
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(TrWrapper, _extends({
                             "data-cy": "table-row"
                         }, row.getRowProps(), {
                             active: isActive ? isActive(row.original) : false,
@@ -99,7 +105,7 @@ var Table = function(param) {
                                     children: cell.render("Cell")
                                 }), i);
                             })
-                        }), i);
+                        })));
                     })
                 }))
             ]

package/lib/es5/test/paginator.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 var _jsxRuntime = require("react/jsx-runtime");
+var _pijmaDesktop = require("@qiwi/pijma-desktop");
 var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 var _reactTestRenderer = /*#__PURE__*/ _interopRequireDefault(require("react-test-renderer"));
 var _main = require("../main/index.js");
@@ -12,11 +13,13 @@ describe("Paginator", function() {
         expect(_main.Paginator).not.toBeUndefined();
     });
     it("renders correctly", function() {
-        var paginator = _reactTestRenderer.default.create(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Paginator, {
-            activePage: 2,
-            totalItemsCount: 40,
-            pageRangeDisplayed: 5,
-            itemsCountPerPage: 10
+        var paginator = _reactTestRenderer.default.create(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_pijmaDesktop.ThemeProvider, {
+            theme: _pijmaDesktop.themes.orange,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_main.Paginator, {
+                activePage: 2,
+                totalItemsCount: 40,
+                itemsCountPerPage: 10
+            })
         })).toJSON();
         expect(paginator).toMatchSnapshot();
     });

package/lib/es5/test/table.js

@@ -89,7 +89,7 @@ describe("columnFactory", function() {
                 {
                     accessor: "value",
                     Header: "test"
-                }
+                }, 
             ]
         })).toJSON();
         expect(table).toMatchSnapshot();

package/lib/es6/main/date-picker/index.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react-day-picker/dist/style.css';
 import { Icon, Overlay, styled } from '@qiwi/pijma-core';
 import { MaskTextField } from '@qiwi/pijma-desktop';
 import { format } from 'date-fns';
@@ -8,7 +9,6 @@ import { withTranslation } from 'react-i18next';
 import { COLOR } from '../theme/index.js';
 import { locales } from './locale.js';
 import Wrap from './wrap.js';
-import 'react-day-picker/dist/style.css';
 const PickerDropdown = styled('div')`
   position: absolute;
   background: #fff;

package/lib/es6/main/date-picker/locale.js

@@ -1,4 +1,5 @@
-import { enUS, ru } from 'date-fns/locale';
+import enUS from 'date-fns/locale/en-US/index.js';
+import ru from 'date-fns/locale/ru/index.js';
 export const locales = {
     en: enUS,
     ru

package/lib/es6/main/date-range-picker/index.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'react-day-picker/dist/style.css';
 import { Icon, Overlay, styled } from '@qiwi/pijma-core';
 import { TextField } from '@qiwi/pijma-desktop';
 import { format } from 'date-fns';
 import React, { Component } from 'react';
-import { DayPicker, addToRange } from 'react-day-picker';
+import { addToRange, DayPicker } from 'react-day-picker';
 import { withTranslation } from 'react-i18next';
+import { locales } from '../date-picker/locale.js';
 import Wrap from '../date-picker/wrap.js';
 import { COLOR } from '../theme/index.js';
-import { locales } from '../date-picker/locale.js';
-import 'react-day-picker/dist/style.css';
 export const PickerDropdown = styled('div')`
   position: absolute;
   background: #fff;

package/lib/es6/main/dropdown/Container.js

@@ -22,17 +22,17 @@ export const CheckBoxContainer = styled('div')`
   padding: 5px;
 `;
 export const Item = styled('div')`
-    box-sizing: border-box;
-    padding: 10px 24px;
-    width: 100%;
-    cursor: pointer;
-    :hover {
-      background-color: #f5f5f5;
-    }
-    &--active {
-      background-color: #e6e6e6 !important;
-    }
-    ${(props)=>props.active ? 'background-color: #E6E6E6 !important;' : ''}
+  box-sizing: border-box;
+  padding: 10px 24px;
+  width: 100%;
+  cursor: pointer;
+  :hover {
+    background-color: #f5f5f5;
+  }
+  &--active {
+    background-color: #e6e6e6 !important;
+  }
+  ${(props)=>props.active ? 'background-color: #E6E6E6 !important;' : ''}
 `;
 export const ScrollContainer = styled('div')`
   position: relative;

package/lib/es6/main/paginator/index.js

@@ -1,49 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, styled } from '@qiwi/pijma-core';
+import { Pagination } from '@qiwi/pijma-desktop';
 import React, { Component } from 'react';
-import Pagination from 'react-js-pagination';
-import { COLOR } from '../theme/index.js';
-export const IconWrapper = styled('div')`
-  width: 24px;
-  height: 24px;
-  float: right;
-  border: none;
-  display: inline-block;
-  fill: ${(props)=>props.color || COLOR.TEXT.Primary};
-`;
-export const Wrapper = styled('div')`
-  ul.pagination {
-    display: inline-flex;
-    background: ${COLOR.BACKGROUND.Primary};
-    border-radius: 8px;
-    box-shadow: 0 1px 3px ${COLOR.BACKGROUND.Shadow};
-
-    li {
-      display: flex;
-      align-items: center;
-      padding: ${(props)=>props.padding || 20}px;
-      cursor: pointer;
-
-      a {
-        display: inline-block;
-        min-width: 24px;
-        text-align: center;
-        color: ${COLOR.TEXT.Primary};
-        margin: 0 auto;
-      }
-    }
-
-    li.active a {
-      color: ${COLOR.BRAND.Primary};
-      text-align: center;
-    }
-
-    li:not(:last-child) {
-      border-right: 1px solid #e6e6e6;
-    }
-
-    ${(props)=>props.isFirstLastNavigationHidden ? '' : 'li:first-child, li:last-child { width: 72px }'}
-`;
 export class Paginator extends Component {
     onChangePage(page) {
         if (!this.props.onChange) {
@@ -51,65 +8,18 @@ export class Paginator extends Component {
         }
         this.props.onChange(page);
     }
-    resolveNavigaterItemColor(direction, { activePage , itemsCountPerPage , totalItemsCount  }) {
-        if (direction === 'forward') {
-            if (activePage === 1) {
-                return COLOR.TEXT.Secondary3;
-            }
-        } else {
-            if (activePage === Math.ceil(totalItemsCount / itemsCountPerPage)) {
-                return COLOR.TEXT.Secondary3;
-            }
-        }
-    }
     render() {
-        const { activePage , totalItemsCount , pageRangeDisplayed , itemsCountPerPage , padding , hideFirstLastPages , paginatorProps ,  } = this.props;
-        const nextPageColor = this.resolveNavigaterItemColor('backward', this.props);
-        const prevPageColor = this.resolveNavigaterItemColor('forward', this.props);
-        const isNavigationHidden = Math.ceil(totalItemsCount / itemsCountPerPage) <= pageRangeDisplayed;
-        const isFirstLastNavigationHidden = hideFirstLastPages || Math.ceil(totalItemsCount / itemsCountPerPage) <= pageRangeDisplayed;
+        const { activePage , totalItemsCount , itemsCountPerPage , paginatorProps  } = this.props;
         const isPaginatorHidden = totalItemsCount <= itemsCountPerPage;
         if (isPaginatorHidden) {
             return null;
         }
-        return /*#__PURE__*/ _jsx(Wrapper, {
-            isNavigationHidden: isNavigationHidden,
-            padding: padding,
-            isFirstLastNavigationHidden: isFirstLastNavigationHidden,
-            children: /*#__PURE__*/ _jsx(Pagination, {
-                activePage: activePage,
-                itemsCountPerPage: itemsCountPerPage,
-                totalItemsCount: totalItemsCount,
-                pageRangeDisplayed: pageRangeDisplayed,
-                hideNavigation: isNavigationHidden,
-                hideFirstLastPages: isFirstLastNavigationHidden,
-                onChange: this.onChangePage.bind(this),
-                firstPageText: /*#__PURE__*/ _jsx(IconWrapper, {
-                    color: prevPageColor,
-                    children: /*#__PURE__*/ _jsx(Icon, {
-                        name: "angle-double-left"
-                    })
-                }),
-                lastPageText: /*#__PURE__*/ _jsx(IconWrapper, {
-                    color: nextPageColor,
-                    children: /*#__PURE__*/ _jsx(Icon, {
-                        name: "angle-double-right"
-                    })
-                }),
-                prevPageText: /*#__PURE__*/ _jsx(IconWrapper, {
-                    color: prevPageColor,
-                    children: /*#__PURE__*/ _jsx(Icon, {
-                        name: "angle-left"
-                    })
-                }),
-                nextPageText: /*#__PURE__*/ _jsx(IconWrapper, {
-                    color: nextPageColor,
-                    children: /*#__PURE__*/ _jsx(Icon, {
-                        name: "angle-right"
-                    })
-                }),
-                ...paginatorProps
-            })
+        return /*#__PURE__*/ _jsx(Pagination, {
+            active: activePage,
+            count: itemsCountPerPage,
+            total: totalItemsCount,
+            onChange: this.onChangePage.bind(this),
+            ...paginatorProps
         });
     }
 }

package/lib/es6/main/table/index.js

@@ -27,10 +27,10 @@ const TableWrapper = styled.div`
         text-align: start;
         user-select: none;
         :first-child {
-          padding-left: 32px;
+          padding-left: 44px;
         }
         :last-child {
-          padding-right: 20px;
+          padding-right: 44px;
         }
       }
       font-weight: 300;
@@ -50,10 +50,10 @@ const TableWrapper = styled.div`
         }
         td {
           :first-child {
-            padding-left: 32px;
+            padding-left: 44px;
           }
           :last-child {
-            padding-right: 20px;
+            padding-right: 44px;
           }
         }
       }
@@ -78,20 +78,23 @@ export const Table = ({ columns , data , onSelect , rowCursor , isActive  })=>{
     });
     // Render the UI for your table
     const headers = [];
-    const thead = headerGroups.map((headerGroup, i)=>/*#__PURE__*/ _jsx("tr", {
+    const thead = headerGroups.map((headerGroup)=>// headerGroup.getHeaderGroupProps() returns a key
+        // eslint-disable-next-line react/jsx-key
+        /*#__PURE__*/ _jsx("tr", {
             ...headerGroup.getHeaderGroupProps(),
-            children: headerGroup.headers.map((column, i)=>{
+            children: headerGroup.headers.map((column)=>{
                 const header = column.render('Header');
-                if (typeof header === 'string') {
+                const typeofHeader = typeof header;
+                if (typeofHeader === 'string' || typeofHeader === 'object' && /*#__PURE__*/ React.isValidElement(header) && header.props.children) {
                     headers.push(header);
                     return /*#__PURE__*/ _jsx("th", {
                         ...column.getHeaderProps(),
                         children: header
-                    }, i);
+                    });
                 }
                 return null;
             })
-        }, i));
+        }));
     return /*#__PURE__*/ _jsx(TableWrapper, {
         children: /*#__PURE__*/ _jsxs("table", {
             ...getTableProps(),
@@ -101,9 +104,11 @@ export const Table = ({ columns , data , onSelect , rowCursor , isActive  })=>{
                 }) : /*#__PURE__*/ _jsx(_Fragment, {}),
                 /*#__PURE__*/ _jsx("tbody", {
                     ...getTableBodyProps(),
-                    children: rows.map((row, i)=>{
+                    children: rows.map((row)=>{
                         prepareRow(row);
-                        return /*#__PURE__*/ _jsx(TrWrapper, {
+                        return(// row.getRowProps() returns a key
+                        // eslint-disable-next-line react/jsx-key
+                        /*#__PURE__*/ _jsx(TrWrapper, {
                             "data-cy": 'table-row',
                             ...row.getRowProps(),
                             active: isActive ? isActive(row.original) : false,
@@ -115,7 +120,7 @@ export const Table = ({ columns , data , onSelect , rowCursor , isActive  })=>{
                                     children: cell.render('Cell')
                                 }, i);
                             })
-                        }, i);
+                        }));
                     })
                 })
             ]

package/lib/es6/test/paginator.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider, themes } from '@qiwi/pijma-desktop';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { Paginator } from '../main/index.js';
@@ -7,11 +8,13 @@ describe('Paginator', ()=>{
         expect(Paginator).not.toBeUndefined();
     });
     it('renders correctly', ()=>{
-        const paginator = renderer.create(/*#__PURE__*/ _jsx(Paginator, {
-            activePage: 2,
-            totalItemsCount: 40,
-            pageRangeDisplayed: 5,
-            itemsCountPerPage: 10
+        const paginator = renderer.create(/*#__PURE__*/ _jsx(ThemeProvider, {
+            theme: themes.orange,
+            children: /*#__PURE__*/ _jsx(Paginator, {
+                activePage: 2,
+                totalItemsCount: 40,
+                itemsCountPerPage: 10
+            })
         })).toJSON();
         expect(paginator).toMatchSnapshot();
     });

package/lib/es6/test/table.js

@@ -80,7 +80,7 @@ describe('columnFactory', ()=>{
                 {
                     accessor: 'value',
                     Header: 'test'
-                }
+                }, 
             ]
         })).toJSON();
         expect(table).toMatchSnapshot();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qiwi/pijma-desktop-extra",
-  "version": "0.1.7",
+  "version": "0.1.10",
   "type": "module",
   "main": "./lib/es5/main/index.js",
   "module": "./lib/es6/main/index.js",
@@ -27,7 +27,8 @@
     "build:es6": "swc src -d lib/es6 --config-file swc.es6.json && tsc-esm-fix --target=lib/es6 --fillBlank",
     "build:dts": "tsc --project tsconfig.dts.json",
     "test": "jest",
-    "lint": "eslint --fix src && prettier --loglevel silent --write src"
+    "format": "eslint --fix src && prettier --loglevel silent --write src",
+    "lint": "eslint src"
   },
   "files": [
     "README.md",
@@ -35,13 +36,13 @@
   ],
   "dependencies": {
     "@qiwi/common-formatters": "^1.2.1",
-    "@qiwi/pijma-core": "1.156.0",
-    "@qiwi/pijma-desktop": "1.155.0",
+    "@qiwi/pijma-core": "1.157.0",
+    "@qiwi/pijma-desktop": "1.156.0",
+    "date-fns": "^2.29.2",
     "lodash-es": "^4.17.21",
     "react-day-picker": "8.1.3",
     "react-dropzone": "^14.2.2",
     "react-i18next": "^11.18.4",
-    "react-js-pagination": "^3.0.3",
     "react-table": "^7.8.0"
   },
   "devDependencies": {