@primer/react 38.31.0-rc.55cc807a9 → 38.31.0-rc.bafdb665f
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/CHANGELOG.md +4 -0
- package/dist/ActionList/Heading.js +25 -35
- package/dist/Autocomplete/Autocomplete.js +131 -74
- package/dist/Autocomplete/AutocompleteMenu.js +277 -119
- package/dist/Autocomplete/AutocompleteOverlay.js +113 -38
- package/dist/Banner/Banner.js +414 -96
- package/dist/Button/Button.js +29 -8
- package/dist/Button/IconButton.js +120 -28
- package/dist/Button/LinkButton.js +34 -8
- package/dist/ConfirmationDialog/ConfirmationDialog.js +86 -24
- package/dist/PageLayout/PageLayout.js +1274 -478
- package/dist/Pagination/Pagination.js +196 -70
- package/dist/SelectPanel/SelectPanelMessage.js +72 -29
- package/dist/UnderlineNav/UnderlineNav.js +203 -63
- package/dist/UnderlineNav/UnderlineNavItem.js +110 -22
- package/dist/hooks/useMergedRefs.js +20 -11
- package/dist/hooks/useScrollFlash.js +24 -10
- package/package.json +7 -7
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { viewportRanges } from "../hooks/useResponsiveValue.js";
|
|
2
2
|
import { buildComponentData, buildPaginationModel } from "./model.js";
|
|
3
3
|
import Pagination_module_css_default from "./Pagination.module.css.js";
|
|
4
|
+
import { c } from "react-compiler-runtime";
|
|
4
5
|
import { clsx } from "clsx";
|
|
5
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import
|
|
7
|
+
import "react";
|
|
7
8
|
import { ChevronLeftIcon, ChevronRightIcon } from "@primer/octicons-react";
|
|
8
9
|
//#region src/Pagination/Pagination.tsx
|
|
9
10
|
const getViewportRangesToHidePages = (showPages) => {
|
|
@@ -11,79 +12,204 @@ const getViewportRangesToHidePages = (showPages) => {
|
|
|
11
12
|
if (showPages) return [];
|
|
12
13
|
else return Object.keys(viewportRanges);
|
|
13
14
|
};
|
|
14
|
-
const PageLabel = (
|
|
15
|
-
|
|
16
|
-
children,
|
|
17
|
-
|
|
18
|
-
]
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
15
|
+
const PageLabel = (t0) => {
|
|
16
|
+
const $ = c(8);
|
|
17
|
+
const { children, direction } = t0;
|
|
18
|
+
let t1;
|
|
19
|
+
if ($[0] !== direction) {
|
|
20
|
+
t1 = direction === "page-prev" ? /*#__PURE__*/ jsx(ChevronLeftIcon, { "data-component": "Pagination.PreviousPageIcon" }) : null;
|
|
21
|
+
$[0] = direction;
|
|
22
|
+
$[1] = t1;
|
|
23
|
+
} else t1 = $[1];
|
|
24
|
+
let t2;
|
|
25
|
+
if ($[2] !== direction) {
|
|
26
|
+
t2 = direction === "page-next" ? /*#__PURE__*/ jsx(ChevronRightIcon, { "data-component": "Pagination.NextPageIcon" }) : null;
|
|
27
|
+
$[2] = direction;
|
|
28
|
+
$[3] = t2;
|
|
29
|
+
} else t2 = $[3];
|
|
30
|
+
let t3;
|
|
31
|
+
if ($[4] !== children || $[5] !== t1 || $[6] !== t2) {
|
|
32
|
+
t3 = /*#__PURE__*/ jsxs(Fragment, { children: [
|
|
33
|
+
t1,
|
|
34
|
+
children,
|
|
35
|
+
t2
|
|
36
|
+
] });
|
|
37
|
+
$[4] = children;
|
|
38
|
+
$[5] = t1;
|
|
39
|
+
$[6] = t2;
|
|
40
|
+
$[7] = t3;
|
|
41
|
+
} else t3 = $[7];
|
|
42
|
+
return t3;
|
|
43
|
+
};
|
|
44
|
+
function usePaginationPages(t0) {
|
|
45
|
+
const $ = c(17);
|
|
46
|
+
const { pageCount, currentPage, onPageChange, hrefBuilder, marginPageCount, showPages, surroundingPageCount, renderPage } = t0;
|
|
47
|
+
let t1;
|
|
48
|
+
if ($[0] !== onPageChange) {
|
|
49
|
+
t1 = (n) => (e) => onPageChange(e, n);
|
|
50
|
+
$[0] = onPageChange;
|
|
51
|
+
$[1] = t1;
|
|
52
|
+
} else t1 = $[1];
|
|
53
|
+
const pageChange = t1;
|
|
54
|
+
const t2 = !!showPages;
|
|
55
|
+
let t3;
|
|
56
|
+
if ($[2] !== currentPage || $[3] !== marginPageCount || $[4] !== pageCount || $[5] !== surroundingPageCount || $[6] !== t2) {
|
|
57
|
+
t3 = buildPaginationModel(pageCount, currentPage, t2, marginPageCount, surroundingPageCount);
|
|
58
|
+
$[2] = currentPage;
|
|
59
|
+
$[3] = marginPageCount;
|
|
60
|
+
$[4] = pageCount;
|
|
61
|
+
$[5] = surroundingPageCount;
|
|
62
|
+
$[6] = t2;
|
|
63
|
+
$[7] = t3;
|
|
64
|
+
} else t3 = $[7];
|
|
65
|
+
const model = t3;
|
|
66
|
+
let t4;
|
|
67
|
+
if ($[8] !== hrefBuilder || $[9] !== model || $[10] !== pageChange || $[11] !== renderPage) {
|
|
68
|
+
let t5;
|
|
69
|
+
if ($[13] !== hrefBuilder || $[14] !== pageChange || $[15] !== renderPage) {
|
|
70
|
+
t5 = (page) => {
|
|
71
|
+
const { props, key, content } = buildComponentData(page, hrefBuilder, pageChange(page.num));
|
|
72
|
+
if (renderPage && props.as !== "span") return renderPage({
|
|
73
|
+
key,
|
|
74
|
+
children: /*#__PURE__*/ jsx(PageLabel, {
|
|
75
|
+
direction: key,
|
|
76
|
+
children: content
|
|
77
|
+
}),
|
|
78
|
+
number: page.num,
|
|
79
|
+
className: Pagination_module_css_default.Page,
|
|
80
|
+
"data-component": "Pagination.Page",
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
const Component = props.as || "a";
|
|
84
|
+
const dataComponentAttribute = props.rel === "prev" ? "Pagination.PreviousPage" : props.rel === "next" ? "Pagination.NextPage" : "Pagination.Page";
|
|
85
|
+
return /*#__PURE__*/ jsx(Component, {
|
|
86
|
+
className: clsx(Pagination_module_css_default.Page),
|
|
87
|
+
"data-component": dataComponentAttribute,
|
|
88
|
+
...props,
|
|
89
|
+
children: /*#__PURE__*/ jsx(PageLabel, {
|
|
90
|
+
direction: key,
|
|
91
|
+
children: content
|
|
92
|
+
})
|
|
93
|
+
}, key);
|
|
94
|
+
};
|
|
95
|
+
$[13] = hrefBuilder;
|
|
96
|
+
$[14] = pageChange;
|
|
97
|
+
$[15] = renderPage;
|
|
98
|
+
$[16] = t5;
|
|
99
|
+
} else t5 = $[16];
|
|
100
|
+
t4 = model.map(t5);
|
|
101
|
+
$[8] = hrefBuilder;
|
|
102
|
+
$[9] = model;
|
|
103
|
+
$[10] = pageChange;
|
|
104
|
+
$[11] = renderPage;
|
|
105
|
+
$[12] = t4;
|
|
106
|
+
} else t4 = $[12];
|
|
107
|
+
return t4;
|
|
62
108
|
}
|
|
63
|
-
function Pagination(
|
|
64
|
-
const
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
109
|
+
function Pagination(t0) {
|
|
110
|
+
const $ = c(31);
|
|
111
|
+
let className;
|
|
112
|
+
let currentPage;
|
|
113
|
+
let pageCount;
|
|
114
|
+
let renderPage;
|
|
115
|
+
let rest;
|
|
116
|
+
let t1;
|
|
117
|
+
let t2;
|
|
118
|
+
let t3;
|
|
119
|
+
let t4;
|
|
120
|
+
let t5;
|
|
121
|
+
if ($[0] !== t0) {
|
|
122
|
+
({className, pageCount, currentPage, onPageChange: t1, hrefBuilder: t2, marginPageCount: t3, showPages: t4, surroundingPageCount: t5, renderPage, ...rest} = t0);
|
|
123
|
+
$[0] = t0;
|
|
124
|
+
$[1] = className;
|
|
125
|
+
$[2] = currentPage;
|
|
126
|
+
$[3] = pageCount;
|
|
127
|
+
$[4] = renderPage;
|
|
128
|
+
$[5] = rest;
|
|
129
|
+
$[6] = t1;
|
|
130
|
+
$[7] = t2;
|
|
131
|
+
$[8] = t3;
|
|
132
|
+
$[9] = t4;
|
|
133
|
+
$[10] = t5;
|
|
134
|
+
} else {
|
|
135
|
+
className = $[1];
|
|
136
|
+
currentPage = $[2];
|
|
137
|
+
pageCount = $[3];
|
|
138
|
+
renderPage = $[4];
|
|
139
|
+
rest = $[5];
|
|
140
|
+
t1 = $[6];
|
|
141
|
+
t2 = $[7];
|
|
142
|
+
t3 = $[8];
|
|
143
|
+
t4 = $[9];
|
|
144
|
+
t5 = $[10];
|
|
145
|
+
}
|
|
146
|
+
const onPageChange = t1 === void 0 ? noop : t1;
|
|
147
|
+
const hrefBuilder = t2 === void 0 ? defaultHrefBuilder : t2;
|
|
148
|
+
const marginPageCount = t3 === void 0 ? 1 : t3;
|
|
149
|
+
const showPages = t4 === void 0 ? true : t4;
|
|
150
|
+
const surroundingPageCount = t5 === void 0 ? 2 : t5;
|
|
151
|
+
let t6;
|
|
152
|
+
if ($[11] !== currentPage || $[12] !== hrefBuilder || $[13] !== marginPageCount || $[14] !== onPageChange || $[15] !== pageCount || $[16] !== renderPage || $[17] !== showPages || $[18] !== surroundingPageCount) {
|
|
153
|
+
t6 = {
|
|
154
|
+
pageCount,
|
|
155
|
+
currentPage,
|
|
156
|
+
onPageChange,
|
|
157
|
+
hrefBuilder,
|
|
158
|
+
marginPageCount,
|
|
159
|
+
showPages,
|
|
160
|
+
surroundingPageCount,
|
|
161
|
+
renderPage
|
|
162
|
+
};
|
|
163
|
+
$[11] = currentPage;
|
|
164
|
+
$[12] = hrefBuilder;
|
|
165
|
+
$[13] = marginPageCount;
|
|
166
|
+
$[14] = onPageChange;
|
|
167
|
+
$[15] = pageCount;
|
|
168
|
+
$[16] = renderPage;
|
|
169
|
+
$[17] = showPages;
|
|
170
|
+
$[18] = surroundingPageCount;
|
|
171
|
+
$[19] = t6;
|
|
172
|
+
} else t6 = $[19];
|
|
173
|
+
const pageElements = usePaginationPages(t6);
|
|
174
|
+
let t7;
|
|
175
|
+
if ($[20] !== className) {
|
|
176
|
+
t7 = clsx(Pagination_module_css_default.PaginationContainer, className);
|
|
177
|
+
$[20] = className;
|
|
178
|
+
$[21] = t7;
|
|
179
|
+
} else t7 = $[21];
|
|
180
|
+
let t8;
|
|
181
|
+
if ($[22] !== showPages) {
|
|
182
|
+
t8 = getViewportRangesToHidePages(showPages).join(" ");
|
|
183
|
+
$[22] = showPages;
|
|
184
|
+
$[23] = t8;
|
|
185
|
+
} else t8 = $[23];
|
|
186
|
+
let t9;
|
|
187
|
+
if ($[24] !== pageElements || $[25] !== t8) {
|
|
188
|
+
t9 = /*#__PURE__*/ jsx("div", {
|
|
80
189
|
className: Pagination_module_css_default.TablePaginationSteps,
|
|
81
|
-
"data-hidden-viewport-ranges":
|
|
190
|
+
"data-hidden-viewport-ranges": t8,
|
|
82
191
|
children: pageElements
|
|
83
|
-
})
|
|
84
|
-
|
|
192
|
+
});
|
|
193
|
+
$[24] = pageElements;
|
|
194
|
+
$[25] = t8;
|
|
195
|
+
$[26] = t9;
|
|
196
|
+
} else t9 = $[26];
|
|
197
|
+
let t10;
|
|
198
|
+
if ($[27] !== rest || $[28] !== t7 || $[29] !== t9) {
|
|
199
|
+
t10 = /*#__PURE__*/ jsx("nav", {
|
|
200
|
+
className: t7,
|
|
201
|
+
"aria-label": "Pagination",
|
|
202
|
+
"data-component": "Pagination",
|
|
203
|
+
...rest,
|
|
204
|
+
children: t9
|
|
205
|
+
});
|
|
206
|
+
$[27] = rest;
|
|
207
|
+
$[28] = t7;
|
|
208
|
+
$[29] = t9;
|
|
209
|
+
$[30] = t10;
|
|
210
|
+
} else t10 = $[30];
|
|
211
|
+
return t10;
|
|
85
212
|
}
|
|
86
|
-
Pagination.displayName = "Pagination";
|
|
87
213
|
function defaultHrefBuilder(pageNum) {
|
|
88
214
|
return `#${pageNum}`;
|
|
89
215
|
}
|
|
@@ -1,40 +1,83 @@
|
|
|
1
1
|
import Text_default from "../Text/Text.js";
|
|
2
2
|
import Octicon from "../Octicon/Octicon.js";
|
|
3
3
|
import SelectPanel_module_css_default from "./SelectPanel.module.css.js";
|
|
4
|
+
import { c } from "react-compiler-runtime";
|
|
4
5
|
import { clsx } from "clsx";
|
|
5
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
7
|
import { AlertIcon } from "@primer/octicons-react";
|
|
7
8
|
//#region src/SelectPanel/SelectPanelMessage.tsx
|
|
8
|
-
const SelectPanelMessage = (
|
|
9
|
+
const SelectPanelMessage = (t0) => {
|
|
10
|
+
const $ = c(17);
|
|
11
|
+
const { variant, title, children, className, icon: CustomIcon, action } = t0;
|
|
9
12
|
const IconComponent = CustomIcon || (variant !== "empty" ? AlertIcon : void 0);
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
]
|
|
36
|
-
|
|
13
|
+
let t1;
|
|
14
|
+
if ($[0] !== className) {
|
|
15
|
+
t1 = clsx(SelectPanel_module_css_default.Message, className);
|
|
16
|
+
$[0] = className;
|
|
17
|
+
$[1] = t1;
|
|
18
|
+
} else t1 = $[1];
|
|
19
|
+
let t2;
|
|
20
|
+
if ($[2] !== IconComponent || $[3] !== variant) {
|
|
21
|
+
t2 = IconComponent && /*#__PURE__*/ jsx(Octicon, {
|
|
22
|
+
icon: IconComponent,
|
|
23
|
+
className: SelectPanel_module_css_default.MessageIcon,
|
|
24
|
+
"data-variant": variant,
|
|
25
|
+
"data-component": "SelectPanel.MessageIcon"
|
|
26
|
+
});
|
|
27
|
+
$[2] = IconComponent;
|
|
28
|
+
$[3] = variant;
|
|
29
|
+
$[4] = t2;
|
|
30
|
+
} else t2 = $[4];
|
|
31
|
+
let t3;
|
|
32
|
+
if ($[5] !== title) {
|
|
33
|
+
t3 = /*#__PURE__*/ jsx(Text_default, {
|
|
34
|
+
className: SelectPanel_module_css_default.MessageTitle,
|
|
35
|
+
"data-component": "SelectPanel.MessageTitle",
|
|
36
|
+
children: title
|
|
37
|
+
});
|
|
38
|
+
$[5] = title;
|
|
39
|
+
$[6] = t3;
|
|
40
|
+
} else t3 = $[6];
|
|
41
|
+
let t4;
|
|
42
|
+
if ($[7] !== children) {
|
|
43
|
+
t4 = /*#__PURE__*/ jsx(Text_default, {
|
|
44
|
+
className: SelectPanel_module_css_default.MessageBody,
|
|
45
|
+
"data-component": "SelectPanel.MessageBody",
|
|
46
|
+
children
|
|
47
|
+
});
|
|
48
|
+
$[7] = children;
|
|
49
|
+
$[8] = t4;
|
|
50
|
+
} else t4 = $[8];
|
|
51
|
+
let t5;
|
|
52
|
+
if ($[9] !== action) {
|
|
53
|
+
t5 = action && /*#__PURE__*/ jsx("div", {
|
|
54
|
+
className: SelectPanel_module_css_default.MessageAction,
|
|
55
|
+
"data-component": "SelectPanel.MessageAction",
|
|
56
|
+
children: action
|
|
57
|
+
});
|
|
58
|
+
$[9] = action;
|
|
59
|
+
$[10] = t5;
|
|
60
|
+
} else t5 = $[10];
|
|
61
|
+
let t6;
|
|
62
|
+
if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5) {
|
|
63
|
+
t6 = /*#__PURE__*/ jsxs("div", {
|
|
64
|
+
className: t1,
|
|
65
|
+
"data-component": "SelectPanel.Message",
|
|
66
|
+
children: [
|
|
67
|
+
t2,
|
|
68
|
+
t3,
|
|
69
|
+
t4,
|
|
70
|
+
t5
|
|
71
|
+
]
|
|
72
|
+
});
|
|
73
|
+
$[11] = t1;
|
|
74
|
+
$[12] = t2;
|
|
75
|
+
$[13] = t3;
|
|
76
|
+
$[14] = t4;
|
|
77
|
+
$[15] = t5;
|
|
78
|
+
$[16] = t6;
|
|
79
|
+
} else t6 = $[16];
|
|
80
|
+
return t6;
|
|
37
81
|
};
|
|
38
|
-
SelectPanelMessage.displayName = "SelectPanelMessage";
|
|
39
82
|
//#endregion
|
|
40
83
|
export { SelectPanelMessage };
|