@hh.ru/magritte-ui-number-pages 4.0.2 → 4.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/NumberPages.d.ts +1 -1
- package/NumberPages.js +1 -1
- package/{NumberPagesAction-a84fcf14.js → NumberPagesAction-CDjfQrwZ.js} +2 -2
- package/{NumberPagesAction-a84fcf14.js.map → NumberPagesAction-CDjfQrwZ.js.map} +1 -1
- package/NumberPagesAction.d.ts +1 -1
- package/NumberPagesAction.js +1 -1
- package/index.css +81 -85
- package/index.d.ts +3 -3
- package/index.js +1 -1
- package/package.json +10 -9
- package/usePages.js.map +1 -1
package/NumberPages.d.ts
CHANGED
package/NumberPages.js
CHANGED
|
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
|
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
|
|
6
6
|
import { ChevronRightOutlinedSize24, ChevronLeftOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
|
|
7
|
-
import { s as styles, N as NumberPagesAction } from './NumberPagesAction-
|
|
7
|
+
import { s as styles, N as NumberPagesAction } from './NumberPagesAction-CDjfQrwZ.js';
|
|
8
8
|
import { usePages, PageControls } from './usePages.js';
|
|
9
9
|
import '@hh.ru/magritte-ui-typography';
|
|
10
10
|
|
|
@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { Text } from '@hh.ru/magritte-ui-typography';
|
|
5
5
|
|
|
6
|
-
var styles = {"number-pages-wrapper":"magritte-number-pages-wrapper___lYp70_4-0-
|
|
6
|
+
var styles = {"number-pages-wrapper":"magritte-number-pages-wrapper___lYp70_4-0-4","numberPagesWrapper":"magritte-number-pages-wrapper___lYp70_4-0-4","number-pages-wrapper-without-navigation-buttons":"magritte-number-pages-wrapper-without-navigation-buttons___78a7R_4-0-4","numberPagesWrapperWithoutNavigationButtons":"magritte-number-pages-wrapper-without-navigation-buttons___78a7R_4-0-4","number-pages-container":"magritte-number-pages-container___YIJLn_4-0-4","numberPagesContainer":"magritte-number-pages-container___YIJLn_4-0-4","number-pages-ellipsis":"magritte-number-pages-ellipsis___GNIbV_4-0-4","numberPagesEllipsis":"magritte-number-pages-ellipsis___GNIbV_4-0-4","number-pages-action":"magritte-number-pages-action___e3ozw_4-0-4","numberPagesAction":"magritte-number-pages-action___e3ozw_4-0-4","number-pages-action-icon":"magritte-number-pages-action-icon___lwXFB_4-0-4","numberPagesActionIcon":"magritte-number-pages-action-icon___lwXFB_4-0-4","number-pages-action-selected":"magritte-number-pages-action-selected___N5Tl4_4-0-4","numberPagesActionSelected":"magritte-number-pages-action-selected___N5Tl4_4-0-4"};
|
|
7
7
|
|
|
8
8
|
const NumberPagesAction = ({ children, selected = false, isIcon = false, Element = 'button', 'aria-label': ariaLabel, page, ...props }) => {
|
|
9
9
|
const buttonProps = Element === 'button' ? { type: 'button' } : {};
|
|
@@ -14,4 +14,4 @@ const NumberPagesAction = ({ children, selected = false, isIcon = false, Element
|
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export { NumberPagesAction as N, styles as s };
|
|
17
|
-
//# sourceMappingURL=NumberPagesAction-
|
|
17
|
+
//# sourceMappingURL=NumberPagesAction-CDjfQrwZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberPagesAction-
|
|
1
|
+
{"version":3,"file":"NumberPagesAction-CDjfQrwZ.js","sources":["../src/NumberPagesAction.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport type { NumberPagesActionProps } from '@hh.ru/magritte-ui-number-pages/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './styles.less';\n\nexport const NumberPagesAction: NumberPagesActionProps = ({\n children,\n selected = false,\n isIcon = false,\n Element = 'button',\n 'aria-label': ariaLabel,\n page,\n ...props\n}) => {\n const buttonProps = Element === 'button' ? ({ type: 'button' } as const) : {};\n\n return (\n <li>\n <Text typography=\"label-2-regular\">\n <Element\n {...props}\n {...buttonProps}\n aria-current={selected}\n aria-label={ariaLabel}\n className={classnames(styles.numberPagesAction, {\n [styles.numberPagesActionSelected]: selected,\n [styles.numberPagesActionIcon]: isIcon,\n })}\n >\n {children}\n </Element>\n </Text>\n </li>\n );\n};\n"],"names":["_jsx"],"mappings":";;;;;;AAOO,MAAM,iBAAiB,GAA2B,CAAC,EACtD,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,QAAQ,EAClB,YAAY,EAAE,SAAS,EACvB,IAAI,EACJ,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,QAAQ,GAAI,EAAE,IAAI,EAAE,QAAQ,EAAY,GAAG,EAAE,CAAC;IAE9E,QACIA,GACI,CAAA,IAAA,EAAA,EAAA,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAA,EAAC,UAAU,EAAC,iBAAiB,EAAA,QAAA,EAC9BA,GAAC,CAAA,OAAO,EACA,EAAA,GAAA,KAAK,EACL,GAAA,WAAW,EACD,cAAA,EAAA,QAAQ,EACV,YAAA,EAAA,SAAS,EACrB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,iBAAiB,EAAE;AAC5C,oBAAA,CAAC,MAAM,CAAC,yBAAyB,GAAG,QAAQ;AAC5C,oBAAA,CAAC,MAAM,CAAC,qBAAqB,GAAG,MAAM;AACzC,iBAAA,CAAC,YAED,QAAQ,EAAA,CACH,EACP,CAAA,EAAA,CACN,EACP;AACN;;;;"}
|
package/NumberPagesAction.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import type { NumberPagesActionProps } from '
|
|
1
|
+
import type { NumberPagesActionProps } from '@hh.ru/magritte-ui-number-pages/types';
|
|
2
2
|
export declare const NumberPagesAction: NumberPagesActionProps;
|
package/NumberPagesAction.js
CHANGED
|
@@ -2,5 +2,5 @@ import './index.css';
|
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
3
|
import 'classnames';
|
|
4
4
|
import '@hh.ru/magritte-ui-typography';
|
|
5
|
-
export { N as NumberPagesAction } from './NumberPagesAction-
|
|
5
|
+
export { N as NumberPagesAction } from './NumberPagesAction-CDjfQrwZ.js';
|
|
6
6
|
//# sourceMappingURL=NumberPagesAction.js.map
|
package/index.css
CHANGED
|
@@ -1,95 +1,95 @@
|
|
|
1
1
|
:root{
|
|
2
|
-
--magritte-color-component-number-pages-background-content-v18-2-
|
|
3
|
-
--magritte-color-component-number-pages-stroke-content-v18-2-
|
|
4
|
-
--magritte-color-component-number-pages-item-text-unselected-v18-2-
|
|
5
|
-
--magritte-color-component-number-pages-item-text-selected-v18-2-
|
|
6
|
-
--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-
|
|
7
|
-
--magritte-color-component-number-pages-item-text-state-unselected-pressed-v18-2-
|
|
8
|
-
--magritte-color-component-number-pages-item-icon-content-v18-2-
|
|
9
|
-
--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-
|
|
10
|
-
--magritte-color-component-number-pages-item-icon-state-content-pressed-v18-2-
|
|
11
|
-
--magritte-color-component-number-pages-item-background-selected-v18-2-
|
|
12
|
-
--magritte-color-component-number-pages-item-background-unselected-v18-2-
|
|
13
|
-
--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-
|
|
14
|
-
--magritte-color-component-number-pages-item-background-state-unselected-pressed-v18-2-
|
|
15
|
-
--magritte-color-component-number-pages-stroke-state-focused-accessible-v18-2-
|
|
2
|
+
--magritte-color-component-number-pages-background-content-v18-2-1:#ffffff;
|
|
3
|
+
--magritte-color-component-number-pages-stroke-content-v18-2-1:#DCE3EB;
|
|
4
|
+
--magritte-color-component-number-pages-item-text-unselected-v18-2-1:#768694;
|
|
5
|
+
--magritte-color-component-number-pages-item-text-selected-v18-2-1:#000000;
|
|
6
|
+
--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-1:#000000;
|
|
7
|
+
--magritte-color-component-number-pages-item-text-state-unselected-pressed-v18-2-1:#000000;
|
|
8
|
+
--magritte-color-component-number-pages-item-icon-content-v18-2-1:#768694;
|
|
9
|
+
--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-1:#000000;
|
|
10
|
+
--magritte-color-component-number-pages-item-icon-state-content-pressed-v18-2-1:#000000;
|
|
11
|
+
--magritte-color-component-number-pages-item-background-selected-v18-2-1:#F1F4F9;
|
|
12
|
+
--magritte-color-component-number-pages-item-background-unselected-v18-2-1:#dce3eb00;
|
|
13
|
+
--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-1:#F1F4F9;
|
|
14
|
+
--magritte-color-component-number-pages-item-background-state-unselected-pressed-v18-2-1:#DCE3EB;
|
|
15
|
+
--magritte-color-component-number-pages-stroke-state-focused-accessible-v18-2-1:#0070ff7a;
|
|
16
16
|
}
|
|
17
17
|
:root{
|
|
18
|
-
--magritte-semantic-scale-pressed-v18-2-
|
|
19
|
-
--magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-
|
|
20
|
-
--magritte-semantic-animation-ease-in-out-100-duration-v18-2-
|
|
21
|
-
--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-
|
|
22
|
-
--magritte-semantic-animation-ease-in-out-200-duration-v18-2-
|
|
23
|
-
--magritte-static-space-100-v18-2-
|
|
24
|
-
--magritte-static-space-150-v18-2-
|
|
25
|
-
--magritte-static-space-200-v18-2-
|
|
18
|
+
--magritte-semantic-scale-pressed-v18-2-1:0.96;
|
|
19
|
+
--magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
20
|
+
--magritte-semantic-animation-ease-in-out-100-duration-v18-2-1:100ms;
|
|
21
|
+
--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1:cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
22
|
+
--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1:200ms;
|
|
23
|
+
--magritte-static-space-100-v18-2-1:4px;
|
|
24
|
+
--magritte-static-space-150-v18-2-1:6px;
|
|
25
|
+
--magritte-static-space-200-v18-2-1:8px;
|
|
26
26
|
}
|
|
27
27
|
.magritte-night-theme{
|
|
28
|
-
--magritte-color-component-number-pages-background-content-v18-2-
|
|
29
|
-
--magritte-color-component-number-pages-stroke-content-v18-2-
|
|
30
|
-
--magritte-color-component-number-pages-item-text-unselected-v18-2-
|
|
31
|
-
--magritte-color-component-number-pages-item-text-selected-v18-2-
|
|
32
|
-
--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-
|
|
33
|
-
--magritte-color-component-number-pages-item-text-state-unselected-pressed-v18-2-
|
|
34
|
-
--magritte-color-component-number-pages-item-icon-content-v18-2-
|
|
35
|
-
--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-
|
|
36
|
-
--magritte-color-component-number-pages-item-icon-state-content-pressed-v18-2-
|
|
37
|
-
--magritte-color-component-number-pages-item-background-selected-v18-2-
|
|
38
|
-
--magritte-color-component-number-pages-item-background-unselected-v18-2-
|
|
39
|
-
--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-
|
|
40
|
-
--magritte-color-component-number-pages-item-background-state-unselected-pressed-v18-2-
|
|
41
|
-
--magritte-color-component-number-pages-stroke-state-focused-accessible-v18-2-
|
|
42
|
-
}
|
|
43
|
-
.magritte-number-pages-wrapper___lYp70_4-0-
|
|
28
|
+
--magritte-color-component-number-pages-background-content-v18-2-1:#000000;
|
|
29
|
+
--magritte-color-component-number-pages-stroke-content-v18-2-1:#3B3B3B;
|
|
30
|
+
--magritte-color-component-number-pages-item-text-unselected-v18-2-1:#ABABAB;
|
|
31
|
+
--magritte-color-component-number-pages-item-text-selected-v18-2-1:#ffffff;
|
|
32
|
+
--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-1:#ffffff;
|
|
33
|
+
--magritte-color-component-number-pages-item-text-state-unselected-pressed-v18-2-1:#ffffff;
|
|
34
|
+
--magritte-color-component-number-pages-item-icon-content-v18-2-1:#ABABAB;
|
|
35
|
+
--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-1:#ffffff;
|
|
36
|
+
--magritte-color-component-number-pages-item-icon-state-content-pressed-v18-2-1:#ffffff;
|
|
37
|
+
--magritte-color-component-number-pages-item-background-selected-v18-2-1:#262626;
|
|
38
|
+
--magritte-color-component-number-pages-item-background-unselected-v18-2-1:#dce3eb00;
|
|
39
|
+
--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-1:#262626;
|
|
40
|
+
--magritte-color-component-number-pages-item-background-state-unselected-pressed-v18-2-1:#262626;
|
|
41
|
+
--magritte-color-component-number-pages-stroke-state-focused-accessible-v18-2-1:#0070ff7a;
|
|
42
|
+
}
|
|
43
|
+
.magritte-number-pages-wrapper___lYp70_4-0-4{
|
|
44
44
|
display:flex;
|
|
45
45
|
width:100%;
|
|
46
46
|
}
|
|
47
47
|
@media (min-width: 350px){
|
|
48
|
-
.magritte-number-pages-wrapper___lYp70_4-0-
|
|
48
|
+
.magritte-number-pages-wrapper___lYp70_4-0-4{
|
|
49
49
|
display:inline-flex;
|
|
50
50
|
width:auto;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
|
-
.magritte-number-pages-wrapper-without-navigation-buttons___78a7R_4-0-
|
|
53
|
+
.magritte-number-pages-wrapper-without-navigation-buttons___78a7R_4-0-4{
|
|
54
54
|
display:inline-flex;
|
|
55
55
|
width:auto;
|
|
56
56
|
}
|
|
57
|
-
.magritte-number-pages-container___YIJLn_4-0-
|
|
57
|
+
.magritte-number-pages-container___YIJLn_4-0-4{
|
|
58
58
|
display:flex;
|
|
59
59
|
width:100%;
|
|
60
60
|
justify-content:space-between;
|
|
61
61
|
align-items:center;
|
|
62
62
|
border-radius:26px;
|
|
63
|
-
padding:calc(var(--magritte-static-space-150-v18-2-
|
|
64
|
-
border:1px solid var(--magritte-color-component-number-pages-stroke-content-v18-2-
|
|
65
|
-
background:var(--magritte-color-component-number-pages-background-content-v18-2-
|
|
63
|
+
padding:calc(var(--magritte-static-space-150-v18-2-1) - 1px);
|
|
64
|
+
border:1px solid var(--magritte-color-component-number-pages-stroke-content-v18-2-1);
|
|
65
|
+
background:var(--magritte-color-component-number-pages-background-content-v18-2-1);
|
|
66
66
|
}
|
|
67
67
|
@media (min-width: 350px){
|
|
68
|
-
.magritte-number-pages-container___YIJLn_4-0-
|
|
68
|
+
.magritte-number-pages-container___YIJLn_4-0-4{
|
|
69
69
|
display:inline-flex;
|
|
70
70
|
justify-content:center;
|
|
71
|
-
gap:var(--magritte-static-space-200-v18-2-
|
|
71
|
+
gap:var(--magritte-static-space-200-v18-2-1);
|
|
72
72
|
width:auto;
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
@media (min-width: 600px){
|
|
76
|
-
.magritte-number-pages-container___YIJLn_4-0-
|
|
77
|
-
gap:var(--magritte-static-space-100-v18-2-
|
|
76
|
+
.magritte-number-pages-container___YIJLn_4-0-4{
|
|
77
|
+
gap:var(--magritte-static-space-100-v18-2-1);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
@media (min-width: 640px){
|
|
81
|
-
.magritte-number-pages-container___YIJLn_4-0-
|
|
82
|
-
gap:var(--magritte-static-space-200-v18-2-
|
|
81
|
+
.magritte-number-pages-container___YIJLn_4-0-4{
|
|
82
|
+
gap:var(--magritte-static-space-200-v18-2-1);
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
|
-
.magritte-number-pages-ellipsis___GNIbV_4-0-
|
|
85
|
+
.magritte-number-pages-ellipsis___GNIbV_4-0-4{
|
|
86
86
|
display:flex;
|
|
87
87
|
height:40px;
|
|
88
88
|
width:40px;
|
|
89
89
|
align-items:center;
|
|
90
90
|
justify-content:center;
|
|
91
91
|
}
|
|
92
|
-
.magritte-number-pages-action___e3ozw_4-0-
|
|
92
|
+
.magritte-number-pages-action___e3ozw_4-0-4{
|
|
93
93
|
display:flex;
|
|
94
94
|
align-items:center;
|
|
95
95
|
justify-content:center;
|
|
@@ -99,58 +99,54 @@
|
|
|
99
99
|
min-width:40px;
|
|
100
100
|
border-radius:20px;
|
|
101
101
|
padding:5px 14px;
|
|
102
|
-
color:var(--magritte-color-component-number-pages-item-text-unselected-v18-2-
|
|
103
|
-
background-color:var(--magritte-color-component-number-pages-item-background-unselected-v18-2-
|
|
104
|
-
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-content-v18-2-
|
|
102
|
+
color:var(--magritte-color-component-number-pages-item-text-unselected-v18-2-1);
|
|
103
|
+
background-color:var(--magritte-color-component-number-pages-item-background-unselected-v18-2-1);
|
|
104
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-content-v18-2-1);
|
|
105
105
|
}
|
|
106
|
-
.magritte-number-pages-action___e3ozw_4-0-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
.magritte-number-pages-action___e3ozw_4-0-2:active{
|
|
111
|
-
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-state-content-pressed-v18-2-0);
|
|
112
|
-
color:var(--magritte-color-component-number-pages-item-text-state-unselected-pressed-v18-2-0);
|
|
113
|
-
background-color:var(--magritte-color-component-number-pages-item-background-state-unselected-pressed-v18-2-0);
|
|
106
|
+
.magritte-number-pages-action___e3ozw_4-0-4:active{
|
|
107
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-state-content-pressed-v18-2-1);
|
|
108
|
+
color:var(--magritte-color-component-number-pages-item-text-state-unselected-pressed-v18-2-1);
|
|
109
|
+
background-color:var(--magritte-color-component-number-pages-item-background-state-unselected-pressed-v18-2-1);
|
|
114
110
|
}
|
|
115
111
|
@media (prefers-reduced-motion: no-preference){
|
|
116
|
-
.magritte-number-pages-action___e3ozw_4-0-
|
|
117
|
-
transition:transform var(--magritte-semantic-animation-ease-in-out-100-duration-v18-2-
|
|
118
|
-
transform:scale(var(--magritte-semantic-scale-pressed-v18-2-
|
|
112
|
+
.magritte-number-pages-action___e3ozw_4-0-4:active{
|
|
113
|
+
transition:transform var(--magritte-semantic-animation-ease-in-out-100-duration-v18-2-1) var(--magritte-semantic-animation-ease-in-out-100-timing-function-v18-2-1);
|
|
114
|
+
transform:scale(var(--magritte-semantic-scale-pressed-v18-2-1));
|
|
119
115
|
}
|
|
120
116
|
}
|
|
121
|
-
.magritte-number-pages-action___e3ozw_4-0-
|
|
122
|
-
outline:var(--magritte-color-component-number-pages-stroke-state-focused-accessible-v18-2-
|
|
117
|
+
.magritte-number-pages-action___e3ozw_4-0-4.focus-visible{
|
|
118
|
+
outline:var(--magritte-color-component-number-pages-stroke-state-focused-accessible-v18-2-1) solid 4px;
|
|
123
119
|
}
|
|
124
120
|
@media (prefers-reduced-motion: no-preference){
|
|
125
|
-
.magritte-number-pages-action___e3ozw_4-0-
|
|
126
|
-
transition:transform var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-
|
|
121
|
+
.magritte-number-pages-action___e3ozw_4-0-4{
|
|
122
|
+
transition:transform var(--magritte-semantic-animation-ease-in-out-200-duration-v18-2-1) var(--magritte-semantic-animation-ease-in-out-200-timing-function-v18-2-1);
|
|
127
123
|
transform:scale(1);
|
|
128
124
|
}
|
|
129
125
|
}
|
|
130
126
|
@media (min-width: 1020px){
|
|
131
|
-
body.magritte-old-layout .magritte-number-pages-action___e3ozw_4-0-
|
|
132
|
-
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-
|
|
133
|
-
color:var(--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-
|
|
134
|
-
background-color:var(--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-
|
|
127
|
+
body.magritte-old-layout .magritte-number-pages-action___e3ozw_4-0-4:hover:not(:active){
|
|
128
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-1);
|
|
129
|
+
color:var(--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-1);
|
|
130
|
+
background-color:var(--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-1);
|
|
135
131
|
}
|
|
136
132
|
}
|
|
137
133
|
@media (min-width: 1024px){
|
|
138
|
-
body:not(.magritte-old-layout) .magritte-number-pages-action___e3ozw_4-0-
|
|
139
|
-
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-
|
|
140
|
-
color:var(--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-
|
|
141
|
-
background-color:var(--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-
|
|
134
|
+
body:not(.magritte-old-layout) .magritte-number-pages-action___e3ozw_4-0-4:hover:not(:active){
|
|
135
|
+
--magritte-ui-icon-color-override:var(--magritte-color-component-number-pages-item-icon-state-content-hovered-v18-2-1);
|
|
136
|
+
color:var(--magritte-color-component-number-pages-item-text-state-unselected-hovered-v18-2-1);
|
|
137
|
+
background-color:var(--magritte-color-component-number-pages-item-background-state-unselected-hovered-v18-2-1);
|
|
142
138
|
}
|
|
143
139
|
}
|
|
144
|
-
.magritte-number-pages-action-icon___lwXFB_4-0-
|
|
145
|
-
padding:5px var(--magritte-static-space-200-v18-2-
|
|
140
|
+
.magritte-number-pages-action-icon___lwXFB_4-0-4{
|
|
141
|
+
padding:5px var(--magritte-static-space-200-v18-2-1);
|
|
146
142
|
}
|
|
147
|
-
.magritte-number-pages-action-selected___N5Tl4_4-0-
|
|
148
|
-
.magritte-number-pages-action-selected___N5Tl4_4-0-
|
|
149
|
-
.magritte-number-pages-action-selected___N5Tl4_4-0-
|
|
143
|
+
.magritte-number-pages-action-selected___N5Tl4_4-0-4,
|
|
144
|
+
.magritte-number-pages-action-selected___N5Tl4_4-0-4:hover,
|
|
145
|
+
.magritte-number-pages-action-selected___N5Tl4_4-0-4:active{
|
|
150
146
|
pointer-events:none;
|
|
151
147
|
user-select:none;
|
|
152
148
|
transform:none;
|
|
153
|
-
color:var(--magritte-color-component-number-pages-item-text-selected-v18-2-
|
|
154
|
-
background-color:var(--magritte-color-component-number-pages-item-background-selected-v18-2-
|
|
149
|
+
color:var(--magritte-color-component-number-pages-item-text-selected-v18-2-1);
|
|
150
|
+
background-color:var(--magritte-color-component-number-pages-item-background-selected-v18-2-1);
|
|
155
151
|
cursor:default;
|
|
156
152
|
}
|
package/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export * from '
|
|
2
|
-
export * from '
|
|
3
|
-
export type { NumberPagesProps, NumberPagesRenderItem, NumberPagesActionProps, } from '
|
|
1
|
+
export * from '@hh.ru/magritte-ui-number-pages/NumberPages';
|
|
2
|
+
export * from '@hh.ru/magritte-ui-number-pages/NumberPagesAction';
|
|
3
|
+
export type { NumberPagesProps, NumberPagesRenderItem, NumberPagesActionProps, } from '@hh.ru/magritte-ui-number-pages/types';
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
export { NumberPages } from './NumberPages.js';
|
|
3
|
-
export { N as NumberPagesAction } from './NumberPagesAction-
|
|
3
|
+
export { N as NumberPagesAction } from './NumberPagesAction-CDjfQrwZ.js';
|
|
4
4
|
import 'react/jsx-runtime';
|
|
5
5
|
import 'react';
|
|
6
6
|
import 'classnames';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hh.ru/magritte-ui-number-pages",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.4",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"types": "index.d.ts",
|
|
6
6
|
"sideEffects": [
|
|
@@ -16,14 +16,15 @@
|
|
|
16
16
|
"eslint-test": "yarn root:eslint-test $(pwd)",
|
|
17
17
|
"ts-config": "yarn root:ts-config $(pwd)",
|
|
18
18
|
"ts-check": "yarn root:ts-check $(pwd)",
|
|
19
|
-
"test": "yarn root:test $(pwd)"
|
|
19
|
+
"test": "yarn root:test $(pwd)",
|
|
20
|
+
"watch": "yarn root:watch $(pwd)"
|
|
20
21
|
},
|
|
21
22
|
"dependencies": {
|
|
22
|
-
"@hh.ru/magritte-design-tokens": "18.2.
|
|
23
|
-
"@hh.ru/magritte-types": "4.0.
|
|
24
|
-
"@hh.ru/magritte-ui-breakpoint": "4.0.
|
|
25
|
-
"@hh.ru/magritte-ui-icon": "7.1.
|
|
26
|
-
"@hh.ru/magritte-ui-typography": "3.0.
|
|
23
|
+
"@hh.ru/magritte-design-tokens": "18.2.1",
|
|
24
|
+
"@hh.ru/magritte-types": "4.0.2",
|
|
25
|
+
"@hh.ru/magritte-ui-breakpoint": "4.0.3",
|
|
26
|
+
"@hh.ru/magritte-ui-icon": "7.1.9",
|
|
27
|
+
"@hh.ru/magritte-ui-typography": "3.0.12"
|
|
27
28
|
},
|
|
28
29
|
"peerDependencies": {
|
|
29
30
|
"classnames": ">=2.3.2",
|
|
@@ -32,5 +33,5 @@
|
|
|
32
33
|
"publishConfig": {
|
|
33
34
|
"access": "public"
|
|
34
35
|
},
|
|
35
|
-
"gitHead": "
|
|
36
|
-
}
|
|
36
|
+
"gitHead": "c97e0bd946a456f07010b6db9fe4b1afca93c44c"
|
|
37
|
+
}
|
package/usePages.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePages.js","sources":["../src/usePages.tsx"],"sourcesContent":["const range = (start: number, end: number): number[] => {\n const length = end - start + 1;\n // eslint-disable-next-line no-restricted-properties\n return Array.from({ length }, (_, i) => start + i);\n};\n\ninterface UsePagesProps {\n last: number;\n first: number;\n current: number;\n boundaryCount: number;\n siblingCount: number;\n}\n\nexport enum PageControls {\n Previous = -1,\n Next = -2,\n StartEllipsis = -3,\n EndEllipsis = -4,\n}\n\nconst CURENT_PAGE_AND_ELLIPSIS_POSITION = 2;\n\nexport const usePages = ({ last, first, current, boundaryCount, siblingCount }: UsePagesProps): number[] => {\n const count = last - first + 1;\n\n const startPages = range(first, Math.min(first - 1 + boundaryCount, last));\n const endPages = range(Math.max(count - boundaryCount + first, boundaryCount + first), last);\n\n const siblingsStart = Math.max(\n Math.min(\n // Настоящее начальное значение для siblings node\n current - siblingCount,\n // Нижняя граница, от max\n last - boundaryCount - siblingCount * 2 - CURENT_PAGE_AND_ELLIPSIS_POSITION\n ),\n // Больше стартовой страницы\n startPages.length > 0 ? startPages[0] + CURENT_PAGE_AND_ELLIPSIS_POSITION : first + 1\n );\n\n const siblingsEnd = Math.min(\n Math.max(\n // Настоящее конечное значение для siblings node\n current + siblingCount,\n // Верхняя граница, от min\n first + boundaryCount + siblingCount * 2 + CURENT_PAGE_AND_ELLIPSIS_POSITION\n ),\n // Меньше чем endPages\n endPages.length > 0 ? endPages[0] - CURENT_PAGE_AND_ELLIPSIS_POSITION : last - 1\n );\n\n const startEllipsis =\n // eslint-disable-next-line no-nested-ternary\n siblingsStart > first + boundaryCount + 1\n ? [PageControls.StartEllipsis]\n : boundaryCount + first < last - boundaryCount\n ? [boundaryCount + first]\n : [];\n\n const endEllipsis =\n // eslint-disable-next-line no-nested-ternary\n siblingsEnd < last - boundaryCount - 1\n ? [PageControls.EndEllipsis]\n : last - boundaryCount > boundaryCount\n ? [last - boundaryCount]\n : [];\n\n const hasPrevious = first < current && startEllipsis[0] === PageControls.StartEllipsis;\n const hasNext = current < last && endEllipsis[0] === PageControls.EndEllipsis;\n\n return [\n ...(hasPrevious ? [PageControls.Previous] : []),\n ...startPages,\n ...startEllipsis,\n // Sibling страницы вместе с текущей\n ...range(siblingsStart, siblingsEnd),\n ...endEllipsis,\n ...endPages,\n ...(hasNext ? [PageControls.Next] : []),\n ];\n};\n"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,KAAc;AACnD,IAAA,MAAM,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC;;AAE/B,IAAA,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC;AACvD,CAAC,CAAC;IAUU,aAKX;AALD,CAAA,UAAY,YAAY,EAAA;AACpB,IAAA,YAAA,CAAA,YAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,UAAa,CAAA;AACb,IAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,MAAS,CAAA;AACT,IAAA,YAAA,CAAA,YAAA,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,eAAkB,CAAA;AAClB,IAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAA,aAAgB,CAAA;AACpB,CAAC,EALW,YAAY,KAAZ,YAAY,GAKvB,EAAA,CAAA,CAAA,CAAA;AAED,MAAM,iCAAiC,GAAG,CAAC,CAAC;AAE/B,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAiB,KAAc;AACvG,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;AAE/B,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,GAAG,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAC3E,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,aAAa,GAAG,KAAK,EAAE,aAAa,GAAG,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAE7F,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC1B,IAAI,CAAC,GAAG;;AAEJ,IAAA,OAAO,GAAG,YAAY;;IAEtB,IAAI,GAAG,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,iCAAiC,CAC9E;;IAED,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,iCAAiC,GAAG,KAAK,GAAG,CAAC,CACxF,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CACxB,IAAI,CAAC,GAAG;;AAEJ,IAAA,OAAO,GAAG,YAAY;;IAEtB,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,CAAC,GAAG,iCAAiC,CAC/E;;IAED,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,iCAAiC,GAAG,IAAI,GAAG,CAAC,CACnF,CAAC;AAEF,IAAA,MAAM,aAAa;;AAEf,IAAA,aAAa,GAAG,KAAK,GAAG,aAAa,GAAG,CAAC;AACrC,UAAE,CAAC,YAAY,CAAC,aAAa,CAAC;AAC9B,UAAE,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,aAAa;AAC9C,cAAE,CAAC,aAAa,GAAG,KAAK,CAAC;cACvB,EAAE,CAAC;AAEb,IAAA,MAAM,WAAW;;AAEb,IAAA,WAAW,GAAG,IAAI,GAAG,aAAa,GAAG,CAAC;AAClC,UAAE,CAAC,YAAY,CAAC,WAAW,CAAC;AAC5B,UAAE,IAAI,GAAG,aAAa,GAAG,aAAa;AACtC,cAAE,CAAC,IAAI,GAAG,aAAa,CAAC;cACtB,EAAE,CAAC;AAEb,IAAA,MAAM,WAAW,GAAG,KAAK,GAAG,OAAO,IAAI,aAAa,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,aAAa,CAAC;AACvF,IAAA,MAAM,OAAO,GAAG,OAAO,GAAG,IAAI,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,YAAY,CAAC,WAAW,CAAC;IAE9E,OAAO;AACH,QAAA,IAAI,WAAW,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,GAAG,EAAE
|
|
1
|
+
{"version":3,"file":"usePages.js","sources":["../src/usePages.tsx"],"sourcesContent":["const range = (start: number, end: number): number[] => {\n const length = end - start + 1;\n // eslint-disable-next-line no-restricted-properties\n return Array.from({ length }, (_, i) => start + i);\n};\n\ninterface UsePagesProps {\n last: number;\n first: number;\n current: number;\n boundaryCount: number;\n siblingCount: number;\n}\n\nexport enum PageControls {\n Previous = -1,\n Next = -2,\n StartEllipsis = -3,\n EndEllipsis = -4,\n}\n\nconst CURENT_PAGE_AND_ELLIPSIS_POSITION = 2;\n\nexport const usePages = ({ last, first, current, boundaryCount, siblingCount }: UsePagesProps): number[] => {\n const count = last - first + 1;\n\n const startPages = range(first, Math.min(first - 1 + boundaryCount, last));\n const endPages = range(Math.max(count - boundaryCount + first, boundaryCount + first), last);\n\n const siblingsStart = Math.max(\n Math.min(\n // Настоящее начальное значение для siblings node\n current - siblingCount,\n // Нижняя граница, от max\n last - boundaryCount - siblingCount * 2 - CURENT_PAGE_AND_ELLIPSIS_POSITION\n ),\n // Больше стартовой страницы\n startPages.length > 0 ? startPages[0] + CURENT_PAGE_AND_ELLIPSIS_POSITION : first + 1\n );\n\n const siblingsEnd = Math.min(\n Math.max(\n // Настоящее конечное значение для siblings node\n current + siblingCount,\n // Верхняя граница, от min\n first + boundaryCount + siblingCount * 2 + CURENT_PAGE_AND_ELLIPSIS_POSITION\n ),\n // Меньше чем endPages\n endPages.length > 0 ? endPages[0] - CURENT_PAGE_AND_ELLIPSIS_POSITION : last - 1\n );\n\n const startEllipsis =\n // eslint-disable-next-line no-nested-ternary\n siblingsStart > first + boundaryCount + 1\n ? [PageControls.StartEllipsis]\n : boundaryCount + first < last - boundaryCount\n ? [boundaryCount + first]\n : [];\n\n const endEllipsis =\n // eslint-disable-next-line no-nested-ternary\n siblingsEnd < last - boundaryCount - 1\n ? [PageControls.EndEllipsis]\n : last - boundaryCount > boundaryCount\n ? [last - boundaryCount]\n : [];\n\n const hasPrevious = first < current && startEllipsis[0] === PageControls.StartEllipsis;\n const hasNext = current < last && endEllipsis[0] === PageControls.EndEllipsis;\n\n return [\n ...(hasPrevious ? [PageControls.Previous] : []),\n ...startPages,\n ...startEllipsis,\n // Sibling страницы вместе с текущей\n ...range(siblingsStart, siblingsEnd),\n ...endEllipsis,\n ...endPages,\n ...(hasNext ? [PageControls.Next] : []),\n ];\n};\n"],"names":[],"mappings":"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"}
|