@qiwi/pijma-desktop-extra 0.1.4 → 0.1.7

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

@@ -1,5 +1,6 @@
 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,6 +1,7 @@
 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/empty-page/index.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-declare class EmptyPage extends Component {
+export declare class EmptyPage extends Component {
     render(): JSX.Element;
 }
 export default EmptyPage;

package/lib/dts/main/error-message/index.d.ts

@@ -1,6 +1,5 @@
 import { Component } from 'react';
 import ErrorMessageProps from './ErrorMessageProps';
-declare class ErrorMessage extends Component<ErrorMessageProps> {
+export declare class ErrorMessage extends Component<ErrorMessageProps> {
     render(): JSX.Element;
 }
-export { ErrorMessage };

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

@@ -23,10 +23,11 @@ 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: ",
-        ";\n  border-radius: 8px;\n\n  .Selectable {\n    .my-selected {\n      padding: 0px;\n      width: 40px;\n      height: 40px;\n      color: black;\n      background-color: rgba(255, 140, 0);\n      border-radius: 50%;\n    }\n\n    .my-head-cell {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-month {\n      margin: 1rem;\n    }\n\n    .my-caption {\n      margin-bottom: 10px;\n      margin-left: 8px;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .my-day {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-caption-label {\n      font-size: 20px;\n    }\n  }\n"
+        ";\n  border-radius: 8px;\n\n  .Selectable {\n    --rdp-cell-size: 40px;\n    --rdp-accent-color: rgba(255, 140, 0, 0.4);\n    --rdp-background-color: rgba(255, 140, 0.1);\n    /* Switch to dark colors for dark themes */\n    --rdp-accent-color-dark: rgba(255, 140, 0);\n    --rdp-background-color-dark: rgba(255, 140, 0.7);\n    /* Outline border for focused elements */\n    --rdp-outline: 2px solid var(--rdp-accent-color);\n    /* Outline border for focused and selected elements */\n    --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);\n\n    .my-selected {\n      padding: 0px;\n      width: 40px;\n      height: 40px;\n      color: black;\n      background-color: rgba(255, 140, 0);\n      border-radius: 50%;\n    }\n\n    .my-head-cell {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-month {\n      margin: 1rem;\n    }\n\n    .my-caption {\n      margin-bottom: 10px;\n      margin-left: 8px;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    .my-day {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-caption-label {\n      font-size: 20px;\n    }\n  }\n"
     ]);
     _templateObject = function _templateObject() {
         return data;

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

@@ -31,10 +31,11 @@ var _reactI18Next = require("react-i18next");
 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: ",
-        ";\n\n  .Selectable {\n    .my-selected {\n      padding: 0px;\n      width: 40px;\n      height: 40px;\n      color: black;\n      background-color: rgba(255, 140, 0, 0.4);\n      border-radius: unset;\n    }\n\n    .my-range-start {\n      background-color: rgb(255, 140, 0);\n      border-radius: 50% 0px 0px 50%;\n    }\n\n    .my-range-middle {\n    }\n\n    .my-range-end {\n      background-color: rgb(255, 140, 0);\n      border-radius: 0px 50% 50% 0px;\n    }\n\n    .my-head-cell {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-caption {\n      margin-bottom: 10px;\n      margin-left: 8px;\n    }\n\n    .my-month {\n      margin: 1rem;\n    }\n\n    .my-months {\n      margin: 0 12px;\n      display: flex;\n      position: relative;\n    }\n\n    .my-day {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-nav {\n      position: absolute;\n      translateY(-50%);\n      top: 50%;\n    }\n\n    .my-caption-start {\n      .my-nav {\n        left: -6px;\n      }\n    }\n\n    .my-caption-end {\n      .my-nav {\n        right: -6px;\n      }\n    }\n\n    .my-day.my-selected.my-range-end.my-range-start {\n      border-radius: 50%;\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-caption-label {\n      font-size: 20px;\n    }\n  }\n"
+        ";\n\n  .Selectable {\n    --rdp-cell-size: 40px;\n    --rdp-accent-color: rgba(255, 140, 0, 0.1);\n    --rdp-background-color: rgba(255, 140, 0, 0.4);\n    /* Switch to dark colors for dark themes */\n    --rdp-accent-color-dark: rgba(255, 140, 0);\n    --rdp-background-color-dark: rgba(255, 140, 0.7);\n    /* Outline border for focused elements */\n    --rdp-outline: 2px solid var(--rdp-accent-color);\n    /* Outline border for focused and selected elements */\n    --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);\n\n    .my-selected {\n      padding: 0px;\n      width: 40px;\n      height: 40px;\n      color: black;\n      background-color: rgba(255, 140, 0, 0.4);\n      border-radius: unset;\n    }\n\n    .my-range-start {\n      background-color: rgb(255, 140, 0);\n      border-radius: 50% 0px 0px 50%;\n    }\n\n    .my-range-middle {\n    }\n\n    .my-range-end {\n      background-color: rgb(255, 140, 0);\n      border-radius: 0px 50% 50% 0px;\n    }\n\n    .my-head-cell {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-caption {\n      margin-bottom: 10px;\n      margin-left: 8px;\n    }\n\n    .my-month {\n      margin: 1rem;\n    }\n\n    .my-months {\n      margin: 0 12px;\n      display: flex;\n      position: relative;\n    }\n\n    .my-day {\n      width: 40px;\n      height: 40px;\n      padding: 4px;\n    }\n\n    .my-nav {\n      position: absolute;\n      translateY(-50%);\n      top: 50%;\n    }\n\n    .my-caption-start {\n      .my-nav {\n        left: -24px;\n      }\n    }\n\n    .my-caption-end {\n      .my-nav {\n        right: -24px;\n      }\n    }\n\n    .my-day.my-selected.my-range-end.my-range-start {\n      border-radius: 50%;\n    }\n\n    .my-day.my-selected.my-range-end, .my-day.my-selected.my-range-start {\n      &:focus, &:hover {\n         background-color: rgba(255, 140, 0);\n      }\n    }\n\n    .my-today {\n      color: rgb(208, 2, 27);\n    }\n\n    .my-caption-label {\n      font-size: 20px;\n    }\n  }\n"
     ]);
     _templateObject = function _templateObject() {
         return data;

package/lib/es5/main/empty-page/index.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    EmptyPage: function() {
+        return EmptyPage;
+    },
+    default: function() {
         return _default;
     }
 });

package/lib/es5/test/__mocks__/style.js

@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+"use strict";
+module.exports = "test-file-stub";

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

@@ -8,6 +8,7 @@ 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;
@@ -16,6 +17,17 @@ const PickerDropdown = styled('div')`
   border-radius: 8px;
 
   .Selectable {
+    --rdp-cell-size: 40px;
+    --rdp-accent-color: rgba(255, 140, 0, 0.4);
+    --rdp-background-color: rgba(255, 140, 0.1);
+    /* Switch to dark colors for dark themes */
+    --rdp-accent-color-dark: rgba(255, 140, 0);
+    --rdp-background-color-dark: rgba(255, 140, 0.7);
+    /* Outline border for focused elements */
+    --rdp-outline: 2px solid var(--rdp-accent-color);
+    /* Outline border for focused and selected elements */
+    --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
+
     .my-selected {
       padding: 0px;
       width: 40px;

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

@@ -8,6 +8,7 @@ import { withTranslation } from 'react-i18next';
 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;
@@ -16,6 +17,17 @@ export const PickerDropdown = styled('div')`
   box-shadow: ${COLOR.SHADOW.Z3};
 
   .Selectable {
+    --rdp-cell-size: 40px;
+    --rdp-accent-color: rgba(255, 140, 0, 0.1);
+    --rdp-background-color: rgba(255, 140, 0, 0.4);
+    /* Switch to dark colors for dark themes */
+    --rdp-accent-color-dark: rgba(255, 140, 0);
+    --rdp-background-color-dark: rgba(255, 140, 0.7);
+    /* Outline border for focused elements */
+    --rdp-outline: 2px solid var(--rdp-accent-color);
+    /* Outline border for focused and selected elements */
+    --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75);
+
     .my-selected {
       padding: 0px;
       width: 40px;
@@ -73,13 +85,13 @@ export const PickerDropdown = styled('div')`
 
     .my-caption-start {
       .my-nav {
-        left: -6px;
+        left: -24px;
       }
     }
 
     .my-caption-end {
       .my-nav {
-        right: -6px;
+        right: -24px;
       }
     }
 
@@ -87,6 +99,12 @@ export const PickerDropdown = styled('div')`
       border-radius: 50%;
     }
 
+    .my-day.my-selected.my-range-end, .my-day.my-selected.my-range-start {
+      &:focus, &:hover {
+         background-color: rgba(255, 140, 0);
+      }
+    }
+
     .my-today {
       color: rgb(208, 2, 27);
     }

package/lib/es6/main/empty-page/index.js

@@ -4,7 +4,7 @@ import { Heading, Paragraph } from '@qiwi/pijma-desktop';
 import React, { Component } from 'react';
 import { B2bIcon } from '../icon/index.js';
 import { Offset } from '../offset/index.js';
-class EmptyPage extends Component {
+export class EmptyPage extends Component {
     render() {
         return /*#__PURE__*/ _jsxs("div", {
             children: [

package/lib/es6/main/error-message/index.js

@@ -12,7 +12,7 @@ const ErrorMessageText = styled('div')`
   font-size: 16px;
   font-weight: 300;
 `;
-class ErrorMessage extends Component {
+export class ErrorMessage extends Component {
     render() {
         const { message , title , icon , iconColor  } = this.props;
         return /*#__PURE__*/ _jsxs(Flex, {
@@ -39,4 +39,3 @@ class ErrorMessage extends Component {
         });
     }
 }
-export { ErrorMessage };

package/lib/es6/test/__mocks__/style.js

@@ -0,0 +1,2 @@
+// __mocks__/fileMock.js
+module.exports = 'test-file-stub';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@qiwi/pijma-desktop-extra",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "type": "module",
-  "main": "./lib/es5/index.js",
-  "module": "./lib/es6/index.js",
-  "types": "./lib/dts/index.d.ts",
+  "main": "./lib/es5/main/index.js",
+  "module": "./lib/es6/main/index.js",
+  "types": "./lib/dts/main/index.d.ts",
   "exports": {
     ".": {
-      "types": "./lib/dts/index.d.ts",
-      "import": "./lib/es6/index.js",
-      "require": "./lib/es5/index.js"
+      "types": "./lib/dts/main/index.d.ts",
+      "import": "./lib/es6/main/index.js",
+      "require": "./lib/es5/main/index.js"
     }
   },
   "license": "MIT",
@@ -38,7 +38,7 @@
     "@qiwi/pijma-core": "1.156.0",
     "@qiwi/pijma-desktop": "1.155.0",
     "lodash-es": "^4.17.21",
-    "react-day-picker": "^8.1.0",
+    "react-day-picker": "8.1.3",
     "react-dropzone": "^14.2.2",
     "react-i18next": "^11.18.4",
     "react-js-pagination": "^3.0.3",
@@ -48,7 +48,7 @@
     "@qiwi/pijma-infra": "1.10.0",
     "@swc/core": "^1.2.233",
     "@swc/jest": "^0.2.22",
-    "@types/jest": "^28.1.7",
+    "@types/jest": "^28.1.8",
     "@types/lodash-es": "^4",
     "@types/react-js-pagination": "^3",
     "@types/react-table": "^7.7.12",
@@ -59,8 +59,8 @@
     "eslint-config-qiwi": "1.17.4",
     "fast-glob": "3.2.11",
     "file-loader": "6.2.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
     "prettier": "2.7.1",
     "prettier-config-qiwi": "1.7.2",
     "react-router": "^6.3.0",