@pismo/marola 1.0.0-beta.5 → 1.0.0-beta.51
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/dist/{Button-2b1peDFT.js → Button-BAljjMv3.js} +2 -2
- package/dist/{ClickAwayListener-BSW-Nd-y.js → ClickAwayListener-DbEYZpyh.js} +4 -3
- package/dist/Dialog.module-D9e4RsKo.js +30 -0
- package/dist/Group-DspH8hyO.js +30 -0
- package/dist/Popover.module-B4boCutS.js +10 -0
- package/dist/{Popup-B6ZSGIEI.js → Popup-Ck3XlWMq.js} +3 -3
- package/dist/{Portal-DIeBsWdL.js → Portal-oY3enyAm.js} +2 -2
- package/dist/SelectButton-B38avP9u.js +75 -0
- package/dist/{Tabs.module-jkH1Qjn7.js → Tabs.module-BGGTkDc5.js} +7 -7
- package/dist/Toggle-CzkXi3_R.js +189 -0
- package/dist/assets/Adornment.css +1 -0
- package/dist/assets/Advice.css +1 -1
- package/dist/assets/Autocomplete.css +1 -0
- package/dist/assets/Button.css +1 -1
- package/dist/assets/Checkbox.css +1 -1
- package/dist/assets/Dialog.css +1 -1
- package/dist/assets/EllipsisTooltip.css +1 -1
- package/dist/assets/Group.css +1 -1
- package/dist/assets/IconButton.css +1 -1
- package/dist/assets/Input.css +1 -1
- package/dist/assets/PageHeader.css +1 -1
- package/dist/assets/Pagination.css +1 -1
- package/dist/assets/Popover.css +1 -0
- package/dist/assets/ResultWithChips.css +1 -0
- package/dist/assets/SelectButton.css +1 -1
- package/dist/assets/Skeleton.css +1 -1
- package/dist/assets/Snackbar.css +1 -1
- package/dist/assets/SortTooltip.css +1 -1
- package/dist/assets/Stepper.css +1 -1
- package/dist/assets/StepperNavigator.css +1 -0
- package/dist/assets/Table.css +1 -1
- package/dist/assets/Tabs.css +1 -1
- package/dist/assets/TextDisplay.css +1 -1
- package/dist/assets/Toggle.css +1 -1
- package/dist/assets/Toggle2.css +1 -1
- package/dist/assets/Typography.css +1 -1
- package/dist/{combineHooksSlotProps-DVjg9PRh.js → combineHooksSlotProps-C-zYvfnF.js} +1 -1
- package/dist/components/Adornment/Adornment.d.ts +20 -0
- package/dist/components/Adornment/Adornment.js +13 -0
- package/dist/components/Adornment/Adornment.stories.d.ts +14 -0
- package/dist/components/Adornment/adornment.test.d.ts +1 -0
- package/dist/components/Advice/Advice.d.ts +32 -17
- package/dist/components/Advice/Advice.js +39 -40
- package/dist/components/Advice/Advice.stories.d.ts +4 -3
- package/dist/components/Autocomplete/Autocomplete.d.ts +20 -0
- package/dist/components/Autocomplete/Autocomplete.js +679 -0
- package/dist/components/Autocomplete/Autocomplete.stories.d.ts +23 -0
- package/dist/components/Button/Button.d.ts +2 -0
- package/dist/components/Button/Button.js +51 -49
- package/dist/components/Checkbox/Checkbox.js +52 -52
- package/dist/components/Chip/Chip.d.ts +6 -12
- package/dist/components/Chip/Chip.js +10 -6
- package/dist/components/Chip/Chip.stories.d.ts +6 -15
- package/dist/components/Dialog/Actions.js +1 -1
- package/dist/components/Dialog/Backdrop.d.ts +3 -3
- package/dist/components/Dialog/Backdrop.js +8 -7
- package/dist/components/Dialog/CloseIconButton.d.ts +1 -2
- package/dist/components/Dialog/CloseIconButton.js +15 -18
- package/dist/components/Dialog/Dialog.d.ts +9 -6
- package/dist/components/Dialog/Dialog.js +139 -139
- package/dist/components/Dialog/Dialog.stories.d.ts +51 -47
- package/dist/components/Dialog/DialogTitle.js +1 -1
- package/dist/components/EllipsisTooltip/EllipsisTooltip.js +30 -17
- package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +3 -2
- package/dist/components/Icon/Icon.js +177 -52
- package/dist/components/Icon/types.d.ts +1 -1
- package/dist/components/IconButton/IconButton.js +42 -42
- package/dist/components/Input/Input.d.ts +26 -5
- package/dist/components/Input/Input.js +319 -304
- package/dist/components/Input/Input.stories.d.ts +2 -21
- package/dist/components/InputSearch/InputSearch.d.ts +37 -7
- package/dist/components/InputSearch/InputSearch.js +27 -29
- package/dist/components/InputSearch/InputSearch.stories.d.ts +15 -3
- package/dist/components/LoadingSpinner/LoadingSpinner.stories.d.ts +1 -1
- package/dist/components/PageHeader/PageHeader.js +57 -57
- package/dist/components/Pagination/Pagination.d.ts +5 -1
- package/dist/components/Pagination/Pagination.js +87 -185
- package/dist/components/Pagination/Pagination.stories.d.ts +1 -1
- package/dist/components/Pagination/usePagination.d.ts +90 -0
- package/dist/components/Pagination/usePagination.js +79 -0
- package/dist/components/Popover/Popover.d.ts +32 -0
- package/dist/components/Popover/Popover.js +24 -0
- package/dist/components/Popover/Popover.stories.d.ts +34 -0
- package/dist/components/Popover/PopoverBody.d.ts +6 -0
- package/dist/components/Popover/PopoverBody.js +6 -0
- package/dist/components/Popover/PopoverFooter.d.ts +6 -0
- package/dist/components/Popover/PopoverFooter.js +6 -0
- package/dist/components/Popover/PopoverHeader.d.ts +6 -0
- package/dist/components/Popover/PopoverHeader.js +6 -0
- package/dist/components/ResultWithChips/ResultWithChips.d.ts +12 -0
- package/dist/components/ResultWithChips/ResultWithChips.js +33 -0
- package/dist/components/RowItem/RowItem.d.ts +25 -0
- package/dist/components/RowItem/RowItem.js +22 -0
- package/dist/components/RowItem/RowItem.stories.d.ts +17 -0
- package/dist/components/RowItem/rowItem.test.d.ts +1 -0
- package/dist/components/Select/Select.d.ts +21 -0
- package/dist/components/Select/Select.js +476 -413
- package/dist/components/Select/SelectButton.d.ts +2 -0
- package/dist/components/Select/SelectButton.js +3 -2
- package/dist/components/Skeleton/Skeleton.d.ts +3 -1
- package/dist/components/Skeleton/Skeleton.js +20 -14
- package/dist/components/Skeleton/SkeletonTable.stories.d.ts +1 -1
- package/dist/components/Snackbar/Snackbar.js +94 -94
- package/dist/components/Snackbar/Snackbar.stories.d.ts +4 -4
- package/dist/components/SortTooltip/SortTooltip.js +46 -46
- package/dist/components/Stepper/Stepper.js +35 -35
- package/dist/components/StepperNavigator/StepperNavigator.d.ts +58 -0
- package/dist/components/StepperNavigator/StepperNavigator.js +115 -0
- package/dist/components/StepperNavigator/StepperNavigator.stories.d.ts +18 -0
- package/dist/components/StepperNavigator/StepperNavigator.test.d.ts +1 -0
- package/dist/components/Table/Table.d.ts +3 -1
- package/dist/components/Table/Table.js +87 -99
- package/dist/components/Table/Table.stories.d.ts +1 -1
- package/dist/components/Tabs/Tab.d.ts +5 -3
- package/dist/components/Tabs/Tab.js +38 -36
- package/dist/components/Tabs/TabPanel.d.ts +4 -2
- package/dist/components/Tabs/TabPanel.js +51 -40
- package/dist/components/Tabs/Tabs.d.ts +6 -4
- package/dist/components/Tabs/Tabs.js +131 -128
- package/dist/components/TextDisplay/TextDisplay.d.ts +9 -3
- package/dist/components/TextDisplay/TextDisplay.js +45 -31
- package/dist/components/TextDisplay/TextDisplay.stories.d.ts +2 -1
- package/dist/components/Toggle/Toggle.js +56 -56
- package/dist/components/ToggleGroup/Group.d.ts +2 -0
- package/dist/components/ToggleGroup/Group.js +4 -2
- package/dist/components/ToggleGroup/Toggle.d.ts +2 -0
- package/dist/components/ToggleGroup/Toggle.js +8 -5
- package/dist/components/ToggleGroup/ToggleGroup.js +2 -2
- package/dist/components/ToggleGroup/ToggleGroup.stories.d.ts +3 -1
- package/dist/components/Tooltip/Tooltip.d.ts +3 -1
- package/dist/components/Tooltip/Tooltip.js +4 -4
- package/dist/components/Tooltip/Tooltip.stories.d.ts +2 -1
- package/dist/components/Typography/Typography.js +47 -47
- package/dist/components/Typography/Typography.stories.d.ts +1 -1
- package/dist/contexts/SnackbarProvider/SnackbarProvider.stories.d.ts +1 -1
- package/dist/{index-CjW42-M-.js → index-bQFToy-I.js} +1 -1
- package/dist/main.d.ts +6 -0
- package/dist/main.js +87 -76
- package/dist/ownerDocument-YGhwAnr1.js +33 -0
- package/dist/{useButton-DNk3wrQp.js → useButton-DcihopJG.js} +1 -1
- package/dist/useCompoundItem-B7Eo_qZk.js +68 -0
- package/dist/useEventCallback-BAQJJ3ye.js +14 -0
- package/dist/useId-BW-oWmul.js +19 -0
- package/dist/{useList-B0hog_3-.js → useList-B9C55YB7.js} +2 -2
- package/dist/{index-CH45lKw7.js → useSlotProps-C_I1kEHr.js} +99 -99
- package/package.json +21 -12
- package/dist/Dialog.module-DFEmFdYT.js +0 -30
- package/dist/Group-B3p31ftp.js +0 -26
- package/dist/SelectButton-K3OIfR5m.js +0 -61
- package/dist/Toggle-BCgIItCc.js +0 -142
- package/dist/useCompoundItem-D1iRfg8D.js +0 -84
- package/dist/useEventCallback-xTG9piMa.js +0 -45
|
@@ -1,129 +1,33 @@
|
|
|
1
1
|
import '../../assets/Pagination.css';
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { c as
|
|
4
|
-
import { Select as
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return Array.from({
|
|
32
|
-
length: D
|
|
33
|
-
}, (z, F) => a + F);
|
|
34
|
-
}, d = h(1, Math.min(s, i)), N = h(Math.max(i - s + 1, s + 1), i), I = Math.max(
|
|
35
|
-
Math.min(
|
|
36
|
-
// Natural start
|
|
37
|
-
t - _,
|
|
38
|
-
// Lower boundary when page is high
|
|
39
|
-
i - s - _ * 2 - 1
|
|
40
|
-
),
|
|
41
|
-
// Greater than startPages
|
|
42
|
-
s + 2
|
|
43
|
-
), B = Math.min(
|
|
44
|
-
Math.max(
|
|
45
|
-
// Natural end
|
|
46
|
-
t + _,
|
|
47
|
-
// Upper boundary when page is low
|
|
48
|
-
s + _ * 2 + 2
|
|
49
|
-
),
|
|
50
|
-
// Less than endPages
|
|
51
|
-
N.length > 0 ? N[0] - 2 : i - 1
|
|
52
|
-
), M = [
|
|
53
|
-
...m ? ["first"] : [],
|
|
54
|
-
...l ? [] : ["previous"],
|
|
55
|
-
...d,
|
|
56
|
-
// Start ellipsis
|
|
57
|
-
// eslint-disable-next-line no-nested-ternary
|
|
58
|
-
...I > s + 2 ? ["start-ellipsis"] : s + 1 < i - s ? [s + 1] : [],
|
|
59
|
-
// Sibling pages
|
|
60
|
-
...h(I, B),
|
|
61
|
-
// End ellipsis
|
|
62
|
-
// eslint-disable-next-line no-nested-ternary
|
|
63
|
-
...B < i - s - 1 ? ["end-ellipsis"] : i - s > s ? [i - s] : [],
|
|
64
|
-
...N,
|
|
65
|
-
...v ? [] : ["next"],
|
|
66
|
-
...j ? ["last"] : []
|
|
67
|
-
], k = (a) => {
|
|
68
|
-
switch (a) {
|
|
69
|
-
case "first":
|
|
70
|
-
return 1;
|
|
71
|
-
case "previous":
|
|
72
|
-
return t - 1;
|
|
73
|
-
case "next":
|
|
74
|
-
return t + 1;
|
|
75
|
-
case "last":
|
|
76
|
-
return i;
|
|
77
|
-
default:
|
|
78
|
-
return null;
|
|
79
|
-
}
|
|
80
|
-
}, S = M.map((a) => typeof a == "number" ? {
|
|
81
|
-
onClick: (g) => {
|
|
82
|
-
x(g, a);
|
|
83
|
-
},
|
|
84
|
-
type: "page",
|
|
85
|
-
page: a,
|
|
86
|
-
selected: a === t,
|
|
87
|
-
disabled: b,
|
|
88
|
-
"aria-current": a === t ? "true" : void 0
|
|
89
|
-
} : {
|
|
90
|
-
onClick: (g) => {
|
|
91
|
-
x(g, k(a));
|
|
92
|
-
},
|
|
93
|
-
type: a,
|
|
94
|
-
page: k(a),
|
|
95
|
-
selected: !1,
|
|
96
|
-
disabled: b || a.indexOf("ellipsis") === -1 && (a === "next" || a === "last" ? t >= i : t <= 1)
|
|
97
|
-
});
|
|
98
|
-
return E({
|
|
99
|
-
items: S
|
|
100
|
-
}, n);
|
|
101
|
-
}
|
|
102
|
-
const W = "_pagination_19imj_43", o = {
|
|
103
|
-
"u-typography-h1": "_u-typography-h1_19imj_1",
|
|
104
|
-
"u-typography-h2": "_u-typography-h2_19imj_8",
|
|
105
|
-
"u-typography-h3": "_u-typography-h3_19imj_15",
|
|
106
|
-
"u-typography-h4": "_u-typography-h4_19imj_22",
|
|
107
|
-
"u-typography-h5": "_u-typography-h5_19imj_29",
|
|
108
|
-
"u-typography-h6": "_u-typography-h6_19imj_36",
|
|
109
|
-
"u-typography-base": "_u-typography-base_19imj_43",
|
|
110
|
-
pagination: W,
|
|
111
|
-
"per-page-container": "_per-page-container_19imj_43",
|
|
112
|
-
"u-typography-base--xxl": "_u-typography-base--xxl_19imj_48",
|
|
113
|
-
"u-typography-base--xl": "_u-typography-base--xl_19imj_52",
|
|
114
|
-
"u-typography-base--lg": "_u-typography-base--lg_19imj_56",
|
|
115
|
-
"u-typography-base--sm": "_u-typography-base--sm_19imj_60",
|
|
116
|
-
"u-typography-base--bold": "_u-typography-base--bold_19imj_64",
|
|
117
|
-
"u-typography-base--strikethrough": "_u-typography-base--strikethrough_19imj_67",
|
|
118
|
-
"u-typography-base--underlined": "_u-typography-base--underlined_19imj_70",
|
|
119
|
-
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_19imj_73",
|
|
120
|
-
"per-page-container__select": "_per-page-container__select_19imj_90",
|
|
121
|
-
"pages-navigator-container": "_pages-navigator-container_19imj_97",
|
|
122
|
-
"page-item": "_page-item_19imj_114",
|
|
123
|
-
"page-number__btn": "_page-number__btn_19imj_114",
|
|
124
|
-
"pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_19imj_133",
|
|
125
|
-
"page-number__btn--selected": "_page-number__btn--selected_19imj_158"
|
|
126
|
-
}, q = {
|
|
2
|
+
import { jsxs as s, Fragment as p, jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { c as _ } from "../../clsx-DB4S2d7J.js";
|
|
4
|
+
import { Select as d } from "../Select/Select.js";
|
|
5
|
+
import C from "./usePagination.js";
|
|
6
|
+
const w = "_pagination_2n0nk_43", a = {
|
|
7
|
+
"u-typography-h1": "_u-typography-h1_2n0nk_1",
|
|
8
|
+
"u-typography-h2": "_u-typography-h2_2n0nk_8",
|
|
9
|
+
"u-typography-h3": "_u-typography-h3_2n0nk_15",
|
|
10
|
+
"u-typography-h4": "_u-typography-h4_2n0nk_22",
|
|
11
|
+
"u-typography-h5": "_u-typography-h5_2n0nk_29",
|
|
12
|
+
"u-typography-h6": "_u-typography-h6_2n0nk_36",
|
|
13
|
+
"u-typography-base": "_u-typography-base_2n0nk_43",
|
|
14
|
+
pagination: w,
|
|
15
|
+
"per-page-container": "_per-page-container_2n0nk_43",
|
|
16
|
+
"u-typography-base--xxl": "_u-typography-base--xxl_2n0nk_49",
|
|
17
|
+
"u-typography-base--xl": "_u-typography-base--xl_2n0nk_53",
|
|
18
|
+
"u-typography-base--lg": "_u-typography-base--lg_2n0nk_57",
|
|
19
|
+
"u-typography-base--sm": "_u-typography-base--sm_2n0nk_61",
|
|
20
|
+
"u-typography-base--bold": "_u-typography-base--bold_2n0nk_65",
|
|
21
|
+
"u-typography-base--strikethrough": "_u-typography-base--strikethrough_2n0nk_68",
|
|
22
|
+
"u-typography-base--underlined": "_u-typography-base--underlined_2n0nk_71",
|
|
23
|
+
"u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_2n0nk_74",
|
|
24
|
+
"per-page-container__select": "_per-page-container__select_2n0nk_91",
|
|
25
|
+
"pages-navigator-container": "_pages-navigator-container_2n0nk_98",
|
|
26
|
+
"page-item": "_page-item_2n0nk_115",
|
|
27
|
+
"page-number__btn": "_page-number__btn_2n0nk_115",
|
|
28
|
+
"pages-navigator-container__previous-next-btn": "_pages-navigator-container__previous-next-btn_2n0nk_134",
|
|
29
|
+
"page-number__btn--selected": "_page-number__btn--selected_2n0nk_159"
|
|
30
|
+
}, B = {
|
|
127
31
|
pt: {
|
|
128
32
|
showing: "Exibindo",
|
|
129
33
|
of: "de",
|
|
@@ -140,108 +44,106 @@ const W = "_pagination_19imj_43", o = {
|
|
|
140
44
|
next: "Next",
|
|
141
45
|
perPage: "Items per page"
|
|
142
46
|
}
|
|
143
|
-
},
|
|
144
|
-
|
|
145
|
-
|
|
47
|
+
}, $ = ({
|
|
48
|
+
perPageOptions: o = [5, 10, 25, 50, 100],
|
|
49
|
+
language: y = "en",
|
|
50
|
+
usePaginationProps: b = {},
|
|
51
|
+
...e
|
|
52
|
+
}) => {
|
|
53
|
+
const l = Math.ceil(e.totalItems / e.perPage), m = e.currentPage <= 1, k = e.currentPage >= l, v = { ...B[y], ...e.t || {} }, i = (n) => v[n], { items: x } = C({
|
|
54
|
+
count: l,
|
|
55
|
+
page: e.currentPage,
|
|
146
56
|
hideNextButton: !0,
|
|
147
57
|
hidePrevButton: !0,
|
|
148
|
-
page: e.currentPage,
|
|
149
58
|
siblingCount: 1,
|
|
150
59
|
boundaryCount: 2,
|
|
151
|
-
|
|
152
|
-
}),
|
|
153
|
-
return /* @__PURE__ */
|
|
154
|
-
/* @__PURE__ */
|
|
60
|
+
...b
|
|
61
|
+
}), c = e.perPage * (e.currentPage - 1) + 1, u = c + e.perPage - 1, P = u > e.totalItems ? u - e.totalItems : 0, N = u - P;
|
|
62
|
+
return /* @__PURE__ */ s("div", { className: _(a.pagination, e.className), "data-testid": e["data-testid"], children: [
|
|
63
|
+
/* @__PURE__ */ s(
|
|
155
64
|
"div",
|
|
156
65
|
{
|
|
157
|
-
className:
|
|
66
|
+
className: _(a["per-page-container"], e.classNamePerPage),
|
|
158
67
|
"data-testid": e["data-testid-per-page"],
|
|
159
68
|
children: [
|
|
160
|
-
|
|
161
|
-
/* @__PURE__ */
|
|
162
|
-
/* @__PURE__ */
|
|
163
|
-
|
|
69
|
+
o && /* @__PURE__ */ s(p, { children: [
|
|
70
|
+
/* @__PURE__ */ t("span", { children: i`perPage` }),
|
|
71
|
+
/* @__PURE__ */ t(
|
|
72
|
+
d,
|
|
164
73
|
{
|
|
165
|
-
className:
|
|
74
|
+
className: a["per-page-container__select"],
|
|
166
75
|
value: String(e.perPage),
|
|
167
76
|
onChange: (n) => e.onRowsPerPageChange(Number(n)),
|
|
168
|
-
children:
|
|
169
|
-
const
|
|
170
|
-
return /* @__PURE__ */
|
|
171
|
-
|
|
77
|
+
children: o == null ? void 0 : o.map((n) => {
|
|
78
|
+
const r = typeof n == "number";
|
|
79
|
+
return /* @__PURE__ */ t(
|
|
80
|
+
d.Option,
|
|
172
81
|
{
|
|
173
|
-
value: String(
|
|
174
|
-
children:
|
|
82
|
+
value: String(r ? n : n.value),
|
|
83
|
+
children: r ? n : n.label
|
|
175
84
|
},
|
|
176
|
-
`per-page__${
|
|
85
|
+
`per-page__${r ? n : n.value}`
|
|
177
86
|
);
|
|
178
87
|
})
|
|
179
88
|
}
|
|
180
89
|
)
|
|
181
90
|
] }),
|
|
182
|
-
/* @__PURE__ */
|
|
183
|
-
"
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
/* @__PURE__ */ r("strong", { children: e.totalItems }),
|
|
198
|
-
" ",
|
|
199
|
-
l`results`
|
|
200
|
-
] })
|
|
201
|
-
]
|
|
202
|
-
}
|
|
203
|
-
)
|
|
91
|
+
/* @__PURE__ */ s("div", { className: e.classNamePagesInfo, "data-testid": e["data-testid-pages-info"], children: [
|
|
92
|
+
/* @__PURE__ */ s("span", { children: [
|
|
93
|
+
c,
|
|
94
|
+
" - ",
|
|
95
|
+
N
|
|
96
|
+
] }),
|
|
97
|
+
" ",
|
|
98
|
+
/* @__PURE__ */ s("span", { children: [
|
|
99
|
+
i`of`,
|
|
100
|
+
" ",
|
|
101
|
+
/* @__PURE__ */ t("strong", { children: e.totalItems }),
|
|
102
|
+
" ",
|
|
103
|
+
i`results`
|
|
104
|
+
] })
|
|
105
|
+
] })
|
|
204
106
|
]
|
|
205
107
|
}
|
|
206
108
|
),
|
|
207
|
-
/* @__PURE__ */
|
|
109
|
+
/* @__PURE__ */ s(
|
|
208
110
|
"div",
|
|
209
111
|
{
|
|
210
|
-
className:
|
|
112
|
+
className: _(a["pages-navigator-container"], e.classNamePagesNav),
|
|
211
113
|
"data-testid": e["data-testid-pages-nav"],
|
|
212
114
|
children: [
|
|
213
|
-
/* @__PURE__ */
|
|
115
|
+
/* @__PURE__ */ t(
|
|
214
116
|
"button",
|
|
215
117
|
{
|
|
216
|
-
className:
|
|
217
|
-
disabled:
|
|
118
|
+
className: a["pages-navigator-container__previous-next-btn"],
|
|
119
|
+
disabled: m,
|
|
218
120
|
onClick: () => e.onPageChange(e.currentPage - 1),
|
|
219
121
|
type: "button",
|
|
220
|
-
children:
|
|
122
|
+
children: i`previous`
|
|
221
123
|
},
|
|
222
124
|
"page__previous"
|
|
223
125
|
),
|
|
224
|
-
/* @__PURE__ */
|
|
225
|
-
let
|
|
226
|
-
return
|
|
126
|
+
/* @__PURE__ */ t("ul", { children: x.map(({ page: n, type: r, selected: f, ...I }, h) => {
|
|
127
|
+
let g = /* @__PURE__ */ t(p, {});
|
|
128
|
+
return r === "start-ellipsis" || r === "end-ellipsis" ? g = /* @__PURE__ */ t("span", { className: a["page-item"], children: "..." }) : r === "page" ? g = /* @__PURE__ */ t(
|
|
227
129
|
"button",
|
|
228
130
|
{
|
|
229
|
-
className:
|
|
131
|
+
className: _(a["page-number__btn"], f && a["page-number__btn--selected"]),
|
|
230
132
|
onClick: () => e.onPageChange(n || 0),
|
|
231
133
|
type: "button",
|
|
232
134
|
children: n
|
|
233
135
|
},
|
|
234
136
|
`page__${h}`
|
|
235
|
-
) :
|
|
137
|
+
) : g = /* @__PURE__ */ t("button", { type: "button", ...I, children: r }), /* @__PURE__ */ t("li", { children: g }, h);
|
|
236
138
|
}) }),
|
|
237
|
-
/* @__PURE__ */
|
|
139
|
+
/* @__PURE__ */ t(
|
|
238
140
|
"button",
|
|
239
141
|
{
|
|
240
|
-
className:
|
|
241
|
-
disabled:
|
|
142
|
+
className: a["pages-navigator-container__previous-next-btn"],
|
|
143
|
+
disabled: k,
|
|
242
144
|
onClick: () => e.onPageChange(e.currentPage + 1),
|
|
243
145
|
type: "button",
|
|
244
|
-
children:
|
|
146
|
+
children: i`next`
|
|
245
147
|
},
|
|
246
148
|
"page__next"
|
|
247
149
|
)
|
|
@@ -251,6 +153,6 @@ const W = "_pagination_19imj_43", o = {
|
|
|
251
153
|
] });
|
|
252
154
|
};
|
|
253
155
|
export {
|
|
254
|
-
|
|
255
|
-
|
|
156
|
+
$ as Pagination,
|
|
157
|
+
B as paginationDefaultTranslations
|
|
256
158
|
};
|
|
@@ -3,7 +3,7 @@ import { StoryObj } from '@storybook/react';
|
|
|
3
3
|
|
|
4
4
|
declare const meta: {
|
|
5
5
|
title: string;
|
|
6
|
-
component: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
component: ({ perPageOptions, language, usePaginationProps, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
tags: string[];
|
|
8
8
|
parameters: {
|
|
9
9
|
layout: string;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* FOR WORKING WELL I NEEDED TO REMOVE ALL `useControlled` REFERENCES IN `usePagination.js` CODE.
|
|
3
|
+
* import useControlled from '@mui/utils/useControlled';
|
|
4
|
+
|
|
5
|
+
* TO AVOID THE CONSOLE ERROR:
|
|
6
|
+
|
|
7
|
+
MUI: A component is changing the uncontrolled page state of usePagination to be controlled.
|
|
8
|
+
Elements should not switch from uncontrolled to controlled (or vice versa).
|
|
9
|
+
Decide between using a controlled or uncontrolled usePagination element for the lifetime of the component.
|
|
10
|
+
The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.
|
|
11
|
+
More info: https://fb.me/react-controlled-components
|
|
12
|
+
|
|
13
|
+
* I WAS ABLE TO IDENTIFY THIS PROBLEM BUT I WAS NOT ABLE TO SOLVE IT.
|
|
14
|
+
* THIS BUG HAPPENS IN A SPECIFIC SITUATION THAT `usePagination` HOOK TRY TO USE CONTROLLED WAY, BUT IN THE WRONG WAY.
|
|
15
|
+
|
|
16
|
+
*/
|
|
17
|
+
import * as React from 'react';
|
|
18
|
+
export interface UsePaginationProps {
|
|
19
|
+
/**
|
|
20
|
+
* Number of always visible pages at the beginning and end.
|
|
21
|
+
* @default 1
|
|
22
|
+
*/
|
|
23
|
+
boundaryCount?: number;
|
|
24
|
+
/**
|
|
25
|
+
* The name of the component where this hook is used.
|
|
26
|
+
*/
|
|
27
|
+
componentName?: string;
|
|
28
|
+
/**
|
|
29
|
+
* The total number of pages.
|
|
30
|
+
* @default 1
|
|
31
|
+
*/
|
|
32
|
+
count?: number;
|
|
33
|
+
/**
|
|
34
|
+
* The page selected by default when the component is uncontrolled.
|
|
35
|
+
* @default 1
|
|
36
|
+
*/
|
|
37
|
+
defaultPage?: number;
|
|
38
|
+
/**
|
|
39
|
+
* If `true`, the component is disabled.
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* If `true`, hide the next-page button.
|
|
45
|
+
* @default false
|
|
46
|
+
*/
|
|
47
|
+
hideNextButton?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* If `true`, hide the previous-page button.
|
|
50
|
+
* @default false
|
|
51
|
+
*/
|
|
52
|
+
hidePrevButton?: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* Callback fired when the page is changed.
|
|
55
|
+
*
|
|
56
|
+
* @param {React.ChangeEvent<unknown>} event The event source of the callback.
|
|
57
|
+
* @param {number} page The page selected.
|
|
58
|
+
*/
|
|
59
|
+
onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
|
|
60
|
+
/**
|
|
61
|
+
* The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
|
|
62
|
+
*/
|
|
63
|
+
page?: number;
|
|
64
|
+
/**
|
|
65
|
+
* If `true`, show the first-page button.
|
|
66
|
+
* @default false
|
|
67
|
+
*/
|
|
68
|
+
showFirstButton?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* If `true`, show the last-page button.
|
|
71
|
+
* @default false
|
|
72
|
+
*/
|
|
73
|
+
showLastButton?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Number of always visible pages before and after the current page.
|
|
76
|
+
* @default 1
|
|
77
|
+
*/
|
|
78
|
+
siblingCount?: number;
|
|
79
|
+
}
|
|
80
|
+
export interface UsePaginationItem {
|
|
81
|
+
onClick: React.ReactEventHandler;
|
|
82
|
+
type: 'page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis';
|
|
83
|
+
page: number | null;
|
|
84
|
+
selected: boolean;
|
|
85
|
+
disabled: boolean;
|
|
86
|
+
}
|
|
87
|
+
export interface UsePaginationResult {
|
|
88
|
+
items: UsePaginationItem[];
|
|
89
|
+
}
|
|
90
|
+
export default function usePagination(props?: UsePaginationProps): UsePaginationResult;
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
function w(l = {}) {
|
|
2
|
+
const {
|
|
3
|
+
boundaryCount: t = 1,
|
|
4
|
+
count: s = 1,
|
|
5
|
+
disabled: i = !1,
|
|
6
|
+
hideNextButton: d = !1,
|
|
7
|
+
hidePrevButton: g = !1,
|
|
8
|
+
page: n = l.page || 1,
|
|
9
|
+
showFirstButton: f = !1,
|
|
10
|
+
showLastButton: h = !1,
|
|
11
|
+
siblingCount: a = 1,
|
|
12
|
+
...p
|
|
13
|
+
} = l, r = (e, y) => {
|
|
14
|
+
const P = y - e + 1;
|
|
15
|
+
return Array.from({ length: P }, (B, m) => e + m);
|
|
16
|
+
}, x = r(1, Math.min(t, s)), o = r(Math.max(s - t + 1, t + 1), s), u = Math.max(
|
|
17
|
+
Math.min(
|
|
18
|
+
// Natural start
|
|
19
|
+
n - a,
|
|
20
|
+
// Lower boundary when page is high
|
|
21
|
+
s - t - a * 2 - 1
|
|
22
|
+
),
|
|
23
|
+
// Greater than startPages
|
|
24
|
+
t + 2
|
|
25
|
+
), c = Math.min(
|
|
26
|
+
Math.max(
|
|
27
|
+
// Natural end
|
|
28
|
+
n + a,
|
|
29
|
+
// Upper boundary when page is low
|
|
30
|
+
t + a * 2 + 2
|
|
31
|
+
),
|
|
32
|
+
// Less than endPages
|
|
33
|
+
o.length > 0 ? o[0] - 2 : s - 1
|
|
34
|
+
), b = [
|
|
35
|
+
...f ? ["first"] : [],
|
|
36
|
+
...g ? [] : ["previous"],
|
|
37
|
+
...x,
|
|
38
|
+
// Start ellipsis
|
|
39
|
+
...u > t + 2 ? ["start-ellipsis"] : t + 1 < s - t ? [t + 1] : [],
|
|
40
|
+
// Sibling pages
|
|
41
|
+
...r(u, c),
|
|
42
|
+
// End ellipsis
|
|
43
|
+
...c < s - t - 1 ? ["end-ellipsis"] : s - t > t ? [s - t] : [],
|
|
44
|
+
...o,
|
|
45
|
+
...d ? [] : ["next"],
|
|
46
|
+
...h ? ["last"] : []
|
|
47
|
+
], M = (e) => {
|
|
48
|
+
switch (e) {
|
|
49
|
+
case "first":
|
|
50
|
+
return 1;
|
|
51
|
+
case "previous":
|
|
52
|
+
return n - 1;
|
|
53
|
+
case "next":
|
|
54
|
+
return n + 1;
|
|
55
|
+
case "last":
|
|
56
|
+
return s;
|
|
57
|
+
default:
|
|
58
|
+
return null;
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
return {
|
|
62
|
+
items: b.map((e) => typeof e == "number" ? {
|
|
63
|
+
type: "page",
|
|
64
|
+
page: e,
|
|
65
|
+
selected: e === n,
|
|
66
|
+
disabled: i,
|
|
67
|
+
"aria-current": e === n ? "true" : void 0
|
|
68
|
+
} : {
|
|
69
|
+
type: e,
|
|
70
|
+
page: M(e),
|
|
71
|
+
selected: !1,
|
|
72
|
+
disabled: i || e.indexOf("ellipsis") === -1 && (e === "next" || e === "last" ? n >= s : n <= 1)
|
|
73
|
+
}),
|
|
74
|
+
...p
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
export {
|
|
78
|
+
w as default
|
|
79
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { PopupOffsetOptions, PopupPlacement } from '@mui/base/Unstable_Popup';
|
|
2
|
+
|
|
3
|
+
export type PopoverProps = {
|
|
4
|
+
/** An HTML element or a function that returns either. */
|
|
5
|
+
anchorRef?: Element;
|
|
6
|
+
/** Boolean to open. */
|
|
7
|
+
open?: boolean;
|
|
8
|
+
/** React Node. */
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/** Determines where to place the popup relative to the trigger element. */
|
|
11
|
+
placement?: PopupPlacement;
|
|
12
|
+
/** Distance between a popup and the trigger element */
|
|
13
|
+
offset?: PopupOffsetOptions;
|
|
14
|
+
/** Class name */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** Id to be applied as `data-testid` on the root element */
|
|
17
|
+
'data-testid'?: string;
|
|
18
|
+
/** Callback fired when a "click away" event is detected. */
|
|
19
|
+
onClickAway?: (event: MouseEvent | TouchEvent) => void;
|
|
20
|
+
};
|
|
21
|
+
export declare const Popover: {
|
|
22
|
+
({ anchorRef, open, children, placement, className, offset, "data-testid": dataTestId, onClickAway, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
Header: ({ children }: {
|
|
24
|
+
children: import('react').ReactNode;
|
|
25
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
Footer: ({ children }: {
|
|
27
|
+
children: import('react').ReactNode;
|
|
28
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
Body: ({ children }: {
|
|
30
|
+
children: import('react').ReactNode;
|
|
31
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { c as f } from "../../clsx-DB4S2d7J.js";
|
|
3
|
+
import { s as v } from "../../Popover.module-B4boCutS.js";
|
|
4
|
+
import { PopoverBody as l } from "./PopoverBody.js";
|
|
5
|
+
import { PopoverFooter as n } from "./PopoverFooter.js";
|
|
6
|
+
import { PopoverHeader as P } from "./PopoverHeader.js";
|
|
7
|
+
import { P as y } from "../../Popup-Ck3XlWMq.js";
|
|
8
|
+
import { C as h } from "../../ClickAwayListener-DbEYZpyh.js";
|
|
9
|
+
const r = ({
|
|
10
|
+
anchorRef: t,
|
|
11
|
+
open: m,
|
|
12
|
+
children: p,
|
|
13
|
+
placement: i,
|
|
14
|
+
className: s,
|
|
15
|
+
offset: a,
|
|
16
|
+
"data-testid": d,
|
|
17
|
+
onClickAway: e
|
|
18
|
+
}) => /* @__PURE__ */ o(h, { onClickAway: (c) => e ? e(c) : void 0, children: /* @__PURE__ */ o(y, { offset: a, placement: i, open: m, anchor: t, children: /* @__PURE__ */ o("div", { "data-testid": d, className: f(v.popover, s), children: p }) }) });
|
|
19
|
+
r.Header = P;
|
|
20
|
+
r.Footer = n;
|
|
21
|
+
r.Body = l;
|
|
22
|
+
export {
|
|
23
|
+
r as Popover
|
|
24
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { PopoverProps } from './Popover';
|
|
2
|
+
import { StoryObj } from '@storybook/react';
|
|
3
|
+
|
|
4
|
+
declare const meta: {
|
|
5
|
+
title: string;
|
|
6
|
+
component: {
|
|
7
|
+
({ anchorRef, open, children, placement, className, offset, "data-testid": dataTestId, onClickAway, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
Header: ({ children }: {
|
|
9
|
+
children: import('react').ReactNode;
|
|
10
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
Footer: ({ children }: {
|
|
12
|
+
children: import('react').ReactNode;
|
|
13
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
Body: ({ children }: {
|
|
15
|
+
children: import('react').ReactNode;
|
|
16
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
};
|
|
18
|
+
parameters: {
|
|
19
|
+
docs: {
|
|
20
|
+
source: {
|
|
21
|
+
language: string;
|
|
22
|
+
format: boolean;
|
|
23
|
+
code: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
tags: string[];
|
|
28
|
+
decorators: ((Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
|
|
29
|
+
[x: string]: any;
|
|
30
|
+
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
31
|
+
};
|
|
32
|
+
export default meta;
|
|
33
|
+
type Story = StoryObj<typeof meta>;
|
|
34
|
+
export declare const Provider: Story;
|