@primer/react 38.3.0 → 38.4.0-rc.3baa9bd2c
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.
Potentially problematic release.
This version of @primer/react might be problematic. Click here for more details.
- package/CHANGELOG.md +17 -0
- package/dist/Banner/Banner-f672cdf9.css +2 -0
- package/dist/Banner/Banner-f672cdf9.css.map +1 -0
- package/dist/Banner/Banner.d.ts +8 -0
- package/dist/Banner/Banner.d.ts.map +1 -1
- package/dist/Banner/Banner.js +2 -0
- package/dist/Banner/Banner.module.css.js +1 -1
- package/dist/Banner/index.d.ts +1 -0
- package/dist/Banner/index.d.ts.map +1 -1
- package/dist/DataTable/Pagination.d.ts.map +1 -1
- package/dist/DataTable/Pagination.js +181 -187
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +0 -1
- package/dist/FilteredActionList/FilteredActionList.js +15 -13
- package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
- package/dist/LabelGroup/LabelGroup.js +12 -5
- package/dist/SegmentedControl/{SegmentedControl-5cfe12ab.css → SegmentedControl-6389d0da.css} +2 -2
- package/dist/SegmentedControl/SegmentedControl-6389d0da.css.map +1 -0
- package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControl.js +11 -5
- package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
- package/dist/SegmentedControl/SegmentedControlButton.d.ts +2 -0
- package/dist/SegmentedControl/SegmentedControlButton.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlButton.js +104 -82
- package/dist/SegmentedControl/SegmentedControlIconButton.d.ts +2 -0
- package/dist/SegmentedControl/SegmentedControlIconButton.d.ts.map +1 -1
- package/dist/SegmentedControl/SegmentedControlIconButton.js +122 -181
- package/dist/TreeView/TreeView.d.ts.map +1 -1
- package/dist/TreeView/TreeView.js +5 -7
- package/dist/experimental/SelectPanel2/SelectPanel.d.ts.map +1 -1
- package/dist/experimental/SelectPanel2/SelectPanel.js +4 -5
- package/generated/components.json +6 -0
- package/package.json +2 -2
- package/dist/Banner/Banner-c1744c4b.css +0 -2
- package/dist/Banner/Banner-c1744c4b.css.map +0 -1
- package/dist/SegmentedControl/SegmentedControl-5cfe12ab.css.map +0 -1
- package/dist/internal/components/LiveRegion.d.ts +0 -14
- package/dist/internal/components/LiveRegion.d.ts.map +0 -1
- package/dist/internal/components/LiveRegion.js +0 -130
|
@@ -3,16 +3,16 @@ import { isElement } from 'react-is';
|
|
|
3
3
|
import classes from './SegmentedControl.module.css.js';
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
|
|
7
6
|
import { Tooltip } from '../TooltipV2/Tooltip.js';
|
|
8
7
|
|
|
9
8
|
const SegmentedControlIconButton = t0 => {
|
|
10
|
-
const $ = c(
|
|
9
|
+
const $ = c(35);
|
|
11
10
|
let Icon;
|
|
12
11
|
let ariaLabel;
|
|
13
12
|
let className;
|
|
14
13
|
let description;
|
|
15
|
-
let
|
|
14
|
+
let disabled;
|
|
15
|
+
let props;
|
|
16
16
|
let selected;
|
|
17
17
|
let tooltipDirection;
|
|
18
18
|
if ($[0] !== t0) {
|
|
@@ -23,198 +23,139 @@ const SegmentedControlIconButton = t0 => {
|
|
|
23
23
|
className,
|
|
24
24
|
description,
|
|
25
25
|
tooltipDirection,
|
|
26
|
-
|
|
26
|
+
disabled,
|
|
27
|
+
...props
|
|
27
28
|
} = t0);
|
|
28
29
|
$[0] = t0;
|
|
29
30
|
$[1] = Icon;
|
|
30
31
|
$[2] = ariaLabel;
|
|
31
32
|
$[3] = className;
|
|
32
33
|
$[4] = description;
|
|
33
|
-
$[5] =
|
|
34
|
-
$[6] =
|
|
35
|
-
$[7] =
|
|
34
|
+
$[5] = disabled;
|
|
35
|
+
$[6] = props;
|
|
36
|
+
$[7] = selected;
|
|
37
|
+
$[8] = tooltipDirection;
|
|
36
38
|
} else {
|
|
37
39
|
Icon = $[1];
|
|
38
40
|
ariaLabel = $[2];
|
|
39
41
|
className = $[3];
|
|
40
42
|
description = $[4];
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
43
|
+
disabled = $[5];
|
|
44
|
+
props = $[6];
|
|
45
|
+
selected = $[7];
|
|
46
|
+
tooltipDirection = $[8];
|
|
47
|
+
}
|
|
48
|
+
let ariaDisabled;
|
|
49
|
+
let rest;
|
|
50
|
+
if ($[9] !== props) {
|
|
51
|
+
({
|
|
52
|
+
"aria-disabled": ariaDisabled,
|
|
53
|
+
...rest
|
|
54
|
+
} = props);
|
|
55
|
+
$[9] = props;
|
|
56
|
+
$[10] = ariaDisabled;
|
|
57
|
+
$[11] = rest;
|
|
58
|
+
} else {
|
|
59
|
+
ariaDisabled = $[10];
|
|
60
|
+
rest = $[11];
|
|
61
|
+
}
|
|
62
|
+
let t1;
|
|
63
|
+
if ($[12] !== className) {
|
|
64
|
+
t1 = clsx(classes.Item, className);
|
|
65
|
+
$[12] = className;
|
|
66
|
+
$[13] = t1;
|
|
67
|
+
} else {
|
|
68
|
+
t1 = $[13];
|
|
69
|
+
}
|
|
70
|
+
const t2 = selected || undefined;
|
|
71
|
+
const t3 = description ? undefined : "label";
|
|
72
|
+
const t4 = description ? description : ariaLabel;
|
|
73
|
+
const t5 = description ? ariaLabel : undefined;
|
|
74
|
+
const t6 = disabled || ariaDisabled || undefined;
|
|
75
|
+
let t7;
|
|
76
|
+
if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
|
|
77
|
+
t7 = clsx(classes.Button, classes.IconButton);
|
|
78
|
+
$[14] = t7;
|
|
79
|
+
} else {
|
|
80
|
+
t7 = $[14];
|
|
81
|
+
}
|
|
82
|
+
let t8;
|
|
83
|
+
if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
|
|
84
|
+
t8 = clsx(classes.Content, "segmentedControl-content");
|
|
85
|
+
$[15] = t8;
|
|
86
|
+
} else {
|
|
87
|
+
t8 = $[15];
|
|
88
|
+
}
|
|
89
|
+
let t9;
|
|
90
|
+
if ($[16] !== Icon) {
|
|
91
|
+
t9 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
|
|
92
|
+
$[16] = Icon;
|
|
93
|
+
$[17] = t9;
|
|
94
|
+
} else {
|
|
95
|
+
t9 = $[17];
|
|
96
|
+
}
|
|
97
|
+
let t10;
|
|
98
|
+
if ($[18] !== t9) {
|
|
99
|
+
t10 = /*#__PURE__*/jsx("span", {
|
|
100
|
+
className: t8,
|
|
101
|
+
children: t9
|
|
102
|
+
});
|
|
103
|
+
$[18] = t9;
|
|
104
|
+
$[19] = t10;
|
|
105
|
+
} else {
|
|
106
|
+
t10 = $[19];
|
|
107
|
+
}
|
|
108
|
+
let t11;
|
|
109
|
+
if ($[20] !== rest || $[21] !== selected || $[22] !== t10 || $[23] !== t5 || $[24] !== t6) {
|
|
110
|
+
t11 = /*#__PURE__*/jsx("button", {
|
|
111
|
+
type: "button",
|
|
112
|
+
"aria-current": selected,
|
|
113
|
+
"aria-label": t5,
|
|
114
|
+
"aria-disabled": t6,
|
|
115
|
+
className: t7,
|
|
116
|
+
...rest,
|
|
117
|
+
children: t10
|
|
118
|
+
});
|
|
119
|
+
$[20] = rest;
|
|
120
|
+
$[21] = selected;
|
|
121
|
+
$[22] = t10;
|
|
122
|
+
$[23] = t5;
|
|
123
|
+
$[24] = t6;
|
|
124
|
+
$[25] = t11;
|
|
125
|
+
} else {
|
|
126
|
+
t11 = $[25];
|
|
127
|
+
}
|
|
128
|
+
let t12;
|
|
129
|
+
if ($[26] !== t11 || $[27] !== t3 || $[28] !== t4 || $[29] !== tooltipDirection) {
|
|
130
|
+
t12 = /*#__PURE__*/jsx(Tooltip, {
|
|
131
|
+
type: t3,
|
|
132
|
+
text: t4,
|
|
133
|
+
direction: tooltipDirection,
|
|
134
|
+
children: t11
|
|
135
|
+
});
|
|
136
|
+
$[26] = t11;
|
|
137
|
+
$[27] = t3;
|
|
138
|
+
$[28] = t4;
|
|
139
|
+
$[29] = tooltipDirection;
|
|
140
|
+
$[30] = t12;
|
|
141
|
+
} else {
|
|
142
|
+
t12 = $[30];
|
|
44
143
|
}
|
|
45
|
-
|
|
46
|
-
if (
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
const t3 = description ? undefined : "label";
|
|
57
|
-
const t4 = description ? description : ariaLabel;
|
|
58
|
-
const t5 = description ? ariaLabel : undefined;
|
|
59
|
-
let t6;
|
|
60
|
-
if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
|
|
61
|
-
t6 = clsx(classes.Button, classes.IconButton);
|
|
62
|
-
$[10] = t6;
|
|
63
|
-
} else {
|
|
64
|
-
t6 = $[10];
|
|
65
|
-
}
|
|
66
|
-
let t7;
|
|
67
|
-
if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
|
|
68
|
-
t7 = clsx(classes.Content, "segmentedControl-content");
|
|
69
|
-
$[11] = t7;
|
|
70
|
-
} else {
|
|
71
|
-
t7 = $[11];
|
|
72
|
-
}
|
|
73
|
-
let t8;
|
|
74
|
-
if ($[12] !== Icon) {
|
|
75
|
-
t8 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
|
|
76
|
-
$[12] = Icon;
|
|
77
|
-
$[13] = t8;
|
|
78
|
-
} else {
|
|
79
|
-
t8 = $[13];
|
|
80
|
-
}
|
|
81
|
-
let t9;
|
|
82
|
-
if ($[14] !== t8) {
|
|
83
|
-
t9 = /*#__PURE__*/jsx("span", {
|
|
84
|
-
className: t7,
|
|
85
|
-
children: t8
|
|
86
|
-
});
|
|
87
|
-
$[14] = t8;
|
|
88
|
-
$[15] = t9;
|
|
89
|
-
} else {
|
|
90
|
-
t9 = $[15];
|
|
91
|
-
}
|
|
92
|
-
let t10;
|
|
93
|
-
if ($[16] !== rest || $[17] !== selected || $[18] !== t5 || $[19] !== t9) {
|
|
94
|
-
t10 = /*#__PURE__*/jsx("button", {
|
|
95
|
-
type: "button",
|
|
96
|
-
"aria-current": selected,
|
|
97
|
-
"aria-label": t5,
|
|
98
|
-
className: t6,
|
|
99
|
-
...rest,
|
|
100
|
-
children: t9
|
|
101
|
-
});
|
|
102
|
-
$[16] = rest;
|
|
103
|
-
$[17] = selected;
|
|
104
|
-
$[18] = t5;
|
|
105
|
-
$[19] = t9;
|
|
106
|
-
$[20] = t10;
|
|
107
|
-
} else {
|
|
108
|
-
t10 = $[20];
|
|
109
|
-
}
|
|
110
|
-
let t11;
|
|
111
|
-
if ($[21] !== t10 || $[22] !== t3 || $[23] !== t4 || $[24] !== tooltipDirection) {
|
|
112
|
-
t11 = /*#__PURE__*/jsx(Tooltip, {
|
|
113
|
-
type: t3,
|
|
114
|
-
text: t4,
|
|
115
|
-
direction: tooltipDirection,
|
|
116
|
-
children: t10
|
|
117
|
-
});
|
|
118
|
-
$[21] = t10;
|
|
119
|
-
$[22] = t3;
|
|
120
|
-
$[23] = t4;
|
|
121
|
-
$[24] = tooltipDirection;
|
|
122
|
-
$[25] = t11;
|
|
123
|
-
} else {
|
|
124
|
-
t11 = $[25];
|
|
125
|
-
}
|
|
126
|
-
let t12;
|
|
127
|
-
if ($[26] !== t1 || $[27] !== t11 || $[28] !== t2) {
|
|
128
|
-
t12 = /*#__PURE__*/jsx("li", {
|
|
129
|
-
className: t1,
|
|
130
|
-
"data-selected": t2,
|
|
131
|
-
children: t11
|
|
132
|
-
});
|
|
133
|
-
$[26] = t1;
|
|
134
|
-
$[27] = t11;
|
|
135
|
-
$[28] = t2;
|
|
136
|
-
$[29] = t12;
|
|
137
|
-
} else {
|
|
138
|
-
t12 = $[29];
|
|
139
|
-
}
|
|
140
|
-
return t12;
|
|
144
|
+
let t13;
|
|
145
|
+
if ($[31] !== t1 || $[32] !== t12 || $[33] !== t2) {
|
|
146
|
+
t13 = /*#__PURE__*/jsx("li", {
|
|
147
|
+
className: t1,
|
|
148
|
+
"data-selected": t2,
|
|
149
|
+
children: t12
|
|
150
|
+
});
|
|
151
|
+
$[31] = t1;
|
|
152
|
+
$[32] = t12;
|
|
153
|
+
$[33] = t2;
|
|
154
|
+
$[34] = t13;
|
|
141
155
|
} else {
|
|
142
|
-
|
|
143
|
-
if ($[30] !== className) {
|
|
144
|
-
t1 = clsx(classes.Item, className);
|
|
145
|
-
$[30] = className;
|
|
146
|
-
$[31] = t1;
|
|
147
|
-
} else {
|
|
148
|
-
t1 = $[31];
|
|
149
|
-
}
|
|
150
|
-
const t2 = selected || undefined;
|
|
151
|
-
let t3;
|
|
152
|
-
if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
|
|
153
|
-
t3 = clsx(classes.Button, classes.IconButton);
|
|
154
|
-
$[32] = t3;
|
|
155
|
-
} else {
|
|
156
|
-
t3 = $[32];
|
|
157
|
-
}
|
|
158
|
-
let t4;
|
|
159
|
-
if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
|
|
160
|
-
t4 = clsx(classes.Content, "segmentedControl-content");
|
|
161
|
-
$[33] = t4;
|
|
162
|
-
} else {
|
|
163
|
-
t4 = $[33];
|
|
164
|
-
}
|
|
165
|
-
let t5;
|
|
166
|
-
if ($[34] !== Icon) {
|
|
167
|
-
t5 = isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {});
|
|
168
|
-
$[34] = Icon;
|
|
169
|
-
$[35] = t5;
|
|
170
|
-
} else {
|
|
171
|
-
t5 = $[35];
|
|
172
|
-
}
|
|
173
|
-
let t6;
|
|
174
|
-
if ($[36] !== t5) {
|
|
175
|
-
t6 = /*#__PURE__*/jsx("span", {
|
|
176
|
-
className: t4,
|
|
177
|
-
children: t5
|
|
178
|
-
});
|
|
179
|
-
$[36] = t5;
|
|
180
|
-
$[37] = t6;
|
|
181
|
-
} else {
|
|
182
|
-
t6 = $[37];
|
|
183
|
-
}
|
|
184
|
-
let t7;
|
|
185
|
-
if ($[38] !== ariaLabel || $[39] !== rest || $[40] !== selected || $[41] !== t6) {
|
|
186
|
-
t7 = /*#__PURE__*/jsx("button", {
|
|
187
|
-
type: "button",
|
|
188
|
-
"aria-label": ariaLabel,
|
|
189
|
-
"aria-current": selected,
|
|
190
|
-
className: t3,
|
|
191
|
-
...rest,
|
|
192
|
-
children: t6
|
|
193
|
-
});
|
|
194
|
-
$[38] = ariaLabel;
|
|
195
|
-
$[39] = rest;
|
|
196
|
-
$[40] = selected;
|
|
197
|
-
$[41] = t6;
|
|
198
|
-
$[42] = t7;
|
|
199
|
-
} else {
|
|
200
|
-
t7 = $[42];
|
|
201
|
-
}
|
|
202
|
-
let t8;
|
|
203
|
-
if ($[43] !== t1 || $[44] !== t2 || $[45] !== t7) {
|
|
204
|
-
t8 = /*#__PURE__*/jsx("li", {
|
|
205
|
-
className: t1,
|
|
206
|
-
"data-selected": t2,
|
|
207
|
-
children: t7
|
|
208
|
-
});
|
|
209
|
-
$[43] = t1;
|
|
210
|
-
$[44] = t2;
|
|
211
|
-
$[45] = t7;
|
|
212
|
-
$[46] = t8;
|
|
213
|
-
} else {
|
|
214
|
-
t8 = $[46];
|
|
215
|
-
}
|
|
216
|
-
return t8;
|
|
156
|
+
t13 = $[34];
|
|
217
157
|
}
|
|
158
|
+
return t13;
|
|
218
159
|
};
|
|
219
160
|
SegmentedControlIconButton.__SLOT__ = Symbol('SegmentedControl.IconButton');
|
|
220
161
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,IAAI,EACV,MAAM,wBAAwB,CAAA;AAE/B,OAAO,KAA+B,MAAM,OAAO,CAAA;AAsBnD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,6 +19,7 @@ import { ActionList } from '../ActionList/index.js';
|
|
|
19
19
|
import { isSlot } from '../utils/is-slot.js';
|
|
20
20
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
21
21
|
import { useIsMacOS } from '../hooks/useIsMacOS.js';
|
|
22
|
+
import { AriaStatus } from '../live-region/AriaStatus.js';
|
|
22
23
|
import Spinner from '../Spinner/Spinner.js';
|
|
23
24
|
import { Tooltip } from '../TooltipV2/Tooltip.js';
|
|
24
25
|
import Text from '../Text/Text.js';
|
|
@@ -26,9 +27,6 @@ import { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
|
|
|
26
27
|
import { SkeletonText } from '../SkeletonText/SkeletonText.js';
|
|
27
28
|
import { getAccessibleKeybindingHintString } from '../KeybindingHint/KeybindingHint.js';
|
|
28
29
|
|
|
29
|
-
// ----------------------------------------------------------------------------
|
|
30
|
-
// Context
|
|
31
|
-
|
|
32
30
|
const RootContext = /*#__PURE__*/React.createContext({
|
|
33
31
|
announceUpdate: () => {},
|
|
34
32
|
expandedStateCache: {
|
|
@@ -153,10 +151,10 @@ const Root = t0 => {
|
|
|
153
151
|
let t9;
|
|
154
152
|
if ($[8] !== ariaLiveMessage) {
|
|
155
153
|
t9 = /*#__PURE__*/jsx(VisuallyHidden, {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
154
|
+
children: /*#__PURE__*/jsx(AriaStatus, {
|
|
155
|
+
announceOnShow: true,
|
|
156
|
+
children: ariaLiveMessage
|
|
157
|
+
})
|
|
160
158
|
});
|
|
161
159
|
$[8] = ariaLiveMessage;
|
|
162
160
|
$[9] = t9;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAudD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;
|
|
1
|
+
{"version":3,"file":"SelectPanel.d.ts","sourceRoot":"","sources":["../../../src/experimental/SelectPanel2/SelectPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAGvE,OAAO,KAAK,EAAC,WAAW,EAAE,cAAc,EAAmB,SAAS,EAAE,aAAa,EAAC,MAAM,aAAa,CAAA;AAevG,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAMvD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAA;AAInE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AACvD,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAA;AA2BvE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,eAAe,CAAC,UAAU,GAAG,OAAO,EAAE,aAAa,GAAG,cAAc,CAAC,CAAA;IACtG,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAA;IACpD,EAAE,CAAC,EAAE,MAAM,CAAA;IAEX,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAEpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAA;IAG7D,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,QAAQ,CAAC,CAAA;IAExD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAudD,MAAM,MAAM,+BAA+B,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CACxE,CAAC;IAAC,OAAO,EAAE,QAAQ,CAAA;CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,GAC7D,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAC,GAAG,OAAO,CAAC,SAAS,CAAC,CAAC,GACxC,CAAC;IAAC,OAAO,EAAE,UAAU,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,aAAa,CAAC,CACvD,CAAA;AAwBD,MAAM,MAAM,uBAAuB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,GAAG,CAChE;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAA;CACvC,GACD;IACE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,OAAO,EAAE,SAAS,GAAG,OAAO,CAAA;CAC7B,CACJ,CAAA;AAqCD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;iBAtRoE,MAAM,IAAI;;;;;;;;;4BA6NxC,KAAK,CAAC,iBAAiB;;;CAiEnF,CAAA"}
|
|
@@ -14,6 +14,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
|
14
14
|
import { useProvidedRefOrCreate } from '../../hooks/useProvidedRefOrCreate.js';
|
|
15
15
|
import { useId } from '../../hooks/useId.js';
|
|
16
16
|
import { useAnchoredPosition } from '../../hooks/useAnchoredPosition.js';
|
|
17
|
+
import { AriaStatus } from '../../live-region/AriaStatus.js';
|
|
17
18
|
import Octicon from '../../Octicon/Octicon.js';
|
|
18
19
|
import TextInput from '../../TextInput/TextInput.js';
|
|
19
20
|
import { useFormControlForwardedProps } from '../../FormControl/_FormControlContext.js';
|
|
@@ -23,7 +24,6 @@ import Checkbox from '../../Checkbox/Checkbox.js';
|
|
|
23
24
|
import { IconButton } from '../../Button/IconButton.js';
|
|
24
25
|
import Heading from '../../Heading/Heading.js';
|
|
25
26
|
import Spinner from '../../Spinner/Spinner.js';
|
|
26
|
-
import { AriaStatus } from '../../live-region/AriaStatus.js';
|
|
27
27
|
|
|
28
28
|
const SelectPanelContext = /*#__PURE__*/React.createContext({
|
|
29
29
|
title: '',
|
|
@@ -932,9 +932,9 @@ const SelectPanelMessage = ({
|
|
|
932
932
|
title,
|
|
933
933
|
children
|
|
934
934
|
}) => {
|
|
935
|
+
const MessageWrapper = variant === 'empty' ? 'div' : AriaStatus;
|
|
935
936
|
if (size === 'full') {
|
|
936
|
-
return /*#__PURE__*/jsxs(
|
|
937
|
-
"aria-live": variant === 'empty' ? undefined : 'polite',
|
|
937
|
+
return /*#__PURE__*/jsxs(MessageWrapper, {
|
|
938
938
|
className: classes.MessageFull,
|
|
939
939
|
children: [variant !== 'empty' ? /*#__PURE__*/jsx(Octicon, {
|
|
940
940
|
icon: AlertIcon,
|
|
@@ -948,8 +948,7 @@ const SelectPanelMessage = ({
|
|
|
948
948
|
})]
|
|
949
949
|
});
|
|
950
950
|
} else {
|
|
951
|
-
return /*#__PURE__*/jsxs(
|
|
952
|
-
"aria-live": variant === 'empty' ? undefined : 'polite',
|
|
951
|
+
return /*#__PURE__*/jsxs(MessageWrapper, {
|
|
953
952
|
className: classes.MessageInline,
|
|
954
953
|
"data-variant": variant,
|
|
955
954
|
children: [/*#__PURE__*/jsx(AlertIcon, {
|
|
@@ -1419,6 +1419,12 @@
|
|
|
1419
1419
|
"name": "actionsLayout",
|
|
1420
1420
|
"type": "'default' | 'inline' | 'stacked'",
|
|
1421
1421
|
"description": "Override the responsive layout of the action buttons. 'inline' layout will display the buttons inline with the title and description, while 'stacked' layout will always render the buttons in a new row."
|
|
1422
|
+
},
|
|
1423
|
+
{
|
|
1424
|
+
"name": "flush",
|
|
1425
|
+
"type": "boolean",
|
|
1426
|
+
"defaultValue": "false",
|
|
1427
|
+
"description": "Full width banner specifically for use within confined spaces, such as dialogs, tables, cards, or boxes where available space is limited."
|
|
1422
1428
|
}
|
|
1423
1429
|
],
|
|
1424
1430
|
"subcomponents": [
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "38.
|
|
4
|
+
"version": "38.4.0-rc.3baa9bd2c",
|
|
5
5
|
"description": "An implementation of GitHub's Primer Design System using React",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
"react-is": "18.3.1",
|
|
173
173
|
"recast": "0.23.7",
|
|
174
174
|
"rimraf": "5.0.5",
|
|
175
|
-
"rollup": "4.53.
|
|
175
|
+
"rollup": "4.53.3",
|
|
176
176
|
"rollup-plugin-import-css": "^0.0.0",
|
|
177
177
|
"rollup-plugin-postcss": "4.0.2",
|
|
178
178
|
"rollup-plugin-visualizer": "6.0.5",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-Banner-Banner-IR8eJ{align-items:start;background-color:var(--banner-bgColor);border:var(--borderWidth-thin,.0625rem) solid var(--banner-borderColor);border-radius:var(--borderRadius-medium,.375rem);display:grid;grid-template-columns:auto minmax(0,1fr) auto;padding:var(--base-size-8,.5rem)}@supports (container-type:inline-size){.prc-Banner-Banner-IR8eJ[data-actions-layout=default]{container:banner/inline-size}}.prc-Banner-Banner-IR8eJ[data-actions-layout=stacked] .prc-Banner-BannerContainer-lbx3d{flex-direction:column}.prc-Banner-Banner-IR8eJ[data-actions-layout=stacked] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}.prc-Banner-Banner-IR8eJ[data-actions-layout=stacked] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:flex}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerContainer-lbx3d{flex-wrap:nowrap}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerActions-XCfHL{flex:0 0 auto}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:flex}.prc-Banner-Banner-IR8eJ[data-actions-layout=inline] .prc-Banner-BannerActions-XCfHL :where([data-primary-action=leading]){display:none}.prc-Banner-Banner-IR8eJ[data-layout=compact]{padding:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-variant=critical]{--banner-bgColor:var(--bgColor-danger-muted,var(--color-danger-subtle));--banner-borderColor:var(--borderColor-danger-muted,var(--color-danger-muted));--banner-icon-fgColor:var(--fgColor-danger,var(--color-danger-fg))}.prc-Banner-Banner-IR8eJ[data-variant=info]{--banner-bgColor:var(--bgColor-accent-muted,var(--color-accent-subtle));--banner-borderColor:var(--borderColor-accent-muted,var(--color-accent-muted));--banner-icon-fgColor:var(--fgColor-accent,var(--color-accent-fg))}.prc-Banner-Banner-IR8eJ[data-variant=success]{--banner-bgColor:var(--bgColor-success-muted,var(--color-success-subtle));--banner-borderColor:var(--borderColor-success-muted,var(--color-success-muted));--banner-icon-fgColor:var(--fgColor-success,var(--color-success-fg))}.prc-Banner-Banner-IR8eJ[data-variant=upsell]{--banner-bgColor:var(--bgColor-upsell-muted,#fbefff);--banner-borderColor:var(--borderColor-upsell-muted,#c297ff66);--banner-icon-fgColor:var(--fgColor-upsell,#8250df)}.prc-Banner-Banner-IR8eJ[data-variant=warning]{--banner-bgColor:var(--bgColor-attention-muted,var(--color-attention-subtle));--banner-borderColor:var(--borderColor-attention-muted,var(--color-attention-muted));--banner-icon-fgColor:var(--fgColor-attention,var(--color-attention-fg))}.prc-Banner-BannerContainer-lbx3d{align-items:start;column-gap:var(--base-size-4,.25rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ :where(.prc-Banner-BannerContainer-lbx3d){display:flex;flex-wrap:wrap;justify-content:space-between}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto;grid-template-rows:auto}.prc-Banner-BannerContent-zTITK{display:grid;grid-column-start:1;margin-block:var(--base-size-8,.5rem);row-gap:var(--base-size-4,.25rem)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerContent-zTITK{margin-block:var(--base-size-6,.375rem)}@media screen and (min-width:544px){.prc-Banner-BannerContent-zTITK{flex:1 1 0%}}.prc-Banner-BannerTitle-TcuJl{font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-Banner-BannerIcon-WuOyf{display:grid;padding:var(--base-size-8,.5rem);place-items:center}.prc-Banner-BannerIcon-WuOyf svg{color:var(--banner-icon-fgColor);height:var(--base-size-20,1.25rem);fill:var(--banner-icon-fgColor)}.prc-Banner-Banner-IR8eJ[data-title-hidden]:not(:has(.prc-Banner-BannerActions-XCfHL)) .prc-Banner-BannerIcon-WuOyf svg{height:var(--base-size-16,1rem)}.prc-Banner-BannerDismiss-uBZVm{display:grid;margin-inline-start:var(--base-size-4,.25rem);padding:var(--base-size-8,.5rem);place-items:center}:where(.prc-Banner-Banner-IR8eJ):has(.prc-Banner-BannerActions-XCfHL) .prc-Banner-BannerDismiss-uBZVm{margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerDismiss-uBZVm svg{color:var(--banner-icon-fgColor)}.prc-Banner-BannerActionsContainer-ukGMH{align-items:center;column-gap:var(--base-size-12,.75rem);display:flex;margin-block:var(--base-size-2,.125rem)}.prc-Banner-BannerActions-XCfHL :where([data-primary-action=trailing]){display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]{display:none}.prc-Banner-Banner-IR8eJ[data-dismissible]:not([data-title-hidden],[data-actions-layout=inline]) .prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=leading]{display:flex}@container banner (max-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid}.prc-Banner-BannerContainer-lbx3d:has(.prc-Banner-BannerActionsContainer-ukGMH){grid-template-rows:auto auto}.prc-Banner-BannerActions-XCfHL{margin-block-end:var(--base-size-6,.375rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:none}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:flex}}@container banner (min-width: 500px){.prc-Banner-BannerContainer-lbx3d{display:grid;grid-template-columns:auto auto}:where(.prc-Banner-Banner-IR8eJ):not([data-dismissible]) :where(.prc-Banner-BannerActionsContainer-ukGMH[data-primary-action=trailing]) :where([data-variant=link]:only-child){padding-inline:0 var(--base-size-12,.75rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=trailing]{display:flex;min-height:var(--base-size-32,2rem)}.prc-Banner-BannerActions-XCfHL [data-primary-action=leading]{display:none}}
|
|
2
|
-
/*# sourceMappingURL=Banner-c1744c4b.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Banner/Banner.module.css"],"names":[],"mappings":"AAAA,yBASE,iBAAkB,CALlB,sCAAuC,CAEvC,uEAA+D,CAC/D,gDAAyC,CANzC,YAAa,CAOb,6CAA+C,CAN/C,gCAgFF,CAtEI,uCADF,sDAEI,4BAEJ,CADE,CAIA,wFACE,qBACF,CAEA,6HACE,YACF,CAEA,4HACE,YACF,CAIA,uFACE,gBACF,CAEA,qFACE,aACF,CAEA,4HACE,YACF,CAEA,2HACE,YACF,CAGF,8CACE,iCACF,CAEA,gDACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,4CACE,uEAA6C,CAC7C,8EAAqD,CACrD,kEACF,CAEA,+CACE,yEAA8C,CAC9C,gFAAsD,CACtD,oEACF,CAEA,8CACE,oDAA6C,CAC7C,8DAAqD,CACrD,mDACF,CAEA,+CACE,6EAAgD,CAChD,oFAAwD,CACxD,wEACF,CAKF,kCAEE,iBAAkB,CAGlB,oCAA8B,CAJ9B,8CAAuC,CAEvC,sDAA+C,CAC/C,iCAEF,CAEA,mEACE,YAAa,CACb,cAAe,CACf,6BACF,CAEA,mIACE,YAAa,CACb,0BAA2B,CAC3B,uBACF,CAIA,gCACE,YAAa,CAEb,mBAAoB,CACpB,qCAAgC,CAFhC,iCAGF,CAEA,uHACE,uCACF,CAEA,oCACE,gCACE,WACF,CACF,CAEA,8BAEE,iBAAkB,CAClB,gDAA6C,CAF7C,QAGF,CAIA,6BACE,YAAa,CAEb,gCAA2B,CAD3B,kBAEF,CAEA,iCAIE,gCAAiC,CAFjC,kCAA2B,CAI3B,+BACF,CAGA,wHACE,+BACF,CAIA,gCACE,YAAa,CAGb,6CAAuC,CADvC,gCAA2B,CAD3B,kBAGF,CAEA,sGACE,uCACF,CAEA,oCAEE,gCACF,CAIA,yCAGE,kBAAmB,CADnB,qCAA+B,CAD/B,YAAa,CAGb,uCACF,CAEA,uEACE,YACF,CAEA,iIACE,2CACF,CAGA,wKAEE,YACF,CAGA,uKAEE,YACF,CAIA,qCACE,kCACE,YACF,CAEA,gFACE,4BACF,CAEA,gCACE,2CACF,CAEA,+DACE,YACF,CAEA,8DACE,YACF,CACF,CAEA,qCACE,kCACE,YAAa,CACb,+BACF,CAEA,+KAGE,2CACF,CAEA,+DACE,YAAa,CACb,mCACF,CAEA,8DACE,YACF,CACF","file":"Banner-c1744c4b.css","sourcesContent":[".Banner {\n display: grid;\n padding: var(--base-size-8);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--banner-bgColor);\n /* stylelint-disable-next-line primer/colors */\n border: var(--borderWidth-thin) solid var(--banner-borderColor);\n border-radius: var(--borderRadius-medium);\n grid-template-columns: auto minmax(0, 1fr) auto;\n align-items: start;\n\n &[data-actions-layout='default'] {\n @supports (container-type: inline-size) {\n container: banner / inline-size;\n }\n }\n\n &[data-actions-layout='stacked'] {\n & .BannerContainer {\n flex-direction: column;\n }\n\n & .BannerActions :where([data-primary-action='trailing']) {\n display: none;\n }\n\n & .BannerActions :where([data-primary-action='leading']) {\n display: flex;\n }\n }\n\n &[data-actions-layout='inline'] {\n & .BannerContainer {\n flex-wrap: nowrap;\n }\n\n & .BannerActions {\n flex: 0 0 auto;\n }\n\n & .BannerActions :where([data-primary-action='trailing']) {\n display: flex;\n }\n\n & .BannerActions :where([data-primary-action='leading']) {\n display: none;\n }\n }\n\n &[data-layout='compact'] {\n padding: var(--base-size-4);\n }\n\n &[data-variant='critical'] {\n --banner-bgColor: var(--bgColor-danger-muted);\n --banner-borderColor: var(--borderColor-danger-muted);\n --banner-icon-fgColor: var(--fgColor-danger);\n }\n\n &[data-variant='info'] {\n --banner-bgColor: var(--bgColor-accent-muted);\n --banner-borderColor: var(--borderColor-accent-muted);\n --banner-icon-fgColor: var(--fgColor-accent);\n }\n\n &[data-variant='success'] {\n --banner-bgColor: var(--bgColor-success-muted);\n --banner-borderColor: var(--borderColor-success-muted);\n --banner-icon-fgColor: var(--fgColor-success);\n }\n\n &[data-variant='upsell'] {\n --banner-bgColor: var(--bgColor-upsell-muted);\n --banner-borderColor: var(--borderColor-upsell-muted);\n --banner-icon-fgColor: var(--fgColor-upsell);\n }\n\n &[data-variant='warning'] {\n --banner-bgColor: var(--bgColor-attention-muted);\n --banner-borderColor: var(--borderColor-attention-muted);\n --banner-icon-fgColor: var(--fgColor-attention);\n }\n}\n\n/* BannerContainer -------------------------------------------------------- */\n\n.BannerContainer {\n font-size: var(--text-body-size-medium);\n align-items: start;\n line-height: var(--text-body-lineHeight-medium);\n row-gap: var(--base-size-4);\n column-gap: var(--base-size-4);\n}\n\n.Banner :where(.BannerContainer) {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerContainer {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto;\n}\n\n/* BannerContent ---------------------------------------------------------- */\n\n.BannerContent {\n display: grid;\n row-gap: var(--base-size-4);\n grid-column-start: 1;\n margin-block: var(--base-size-8);\n}\n\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerContent {\n margin-block: var(--base-size-6);\n}\n\n@media screen and (min-width: 544px) {\n .BannerContent {\n flex: 1 1 0%;\n }\n}\n\n.BannerTitle {\n margin: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n}\n\n/* BannerIcon ------------------------------------------------------------- */\n\n.BannerIcon {\n display: grid;\n place-items: center;\n padding: var(--base-size-8);\n}\n\n.BannerIcon svg {\n /* 20px is the line box height of the trailing action buttons */\n height: var(--base-size-20);\n /* stylelint-disable-next-line primer/colors */\n color: var(--banner-icon-fgColor);\n /* stylelint-disable-next-line primer/colors */\n fill: var(--banner-icon-fgColor);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-title-hidden]:not(:has(.BannerActions)) .BannerIcon svg {\n height: var(--base-size-16);\n}\n\n/* BannerDismiss ---------------------------------------------------------- */\n\n.BannerDismiss {\n display: grid;\n place-items: center;\n padding: var(--base-size-8);\n margin-inline-start: var(--base-size-4);\n}\n\n:where(.Banner):has(.BannerActions) .BannerDismiss {\n margin-block: var(--base-size-2);\n}\n\n.BannerDismiss svg {\n /* stylelint-disable-next-line primer/colors */\n color: var(--banner-icon-fgColor);\n}\n\n/* BannerActions ---------------------------------------------------------- */\n\n.BannerActionsContainer {\n display: flex;\n column-gap: var(--base-size-12);\n align-items: center;\n margin-block: var(--base-size-2);\n}\n\n.BannerActions :where([data-primary-action='trailing']) {\n display: none;\n}\n\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline']) .BannerActions {\n margin-block-end: var(--base-size-6);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])\n .BannerActionsContainer[data-primary-action='trailing'] {\n display: none;\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.Banner[data-dismissible]:not([data-title-hidden], [data-actions-layout='inline'])\n .BannerActionsContainer[data-primary-action='leading'] {\n display: flex;\n}\n\n/* Layout ------------------------------------------------------------------- */\n\n@container banner (max-width: 500px) {\n .BannerContainer {\n display: grid;\n }\n\n .BannerContainer:has(.BannerActionsContainer) {\n grid-template-rows: auto auto;\n }\n\n .BannerActions {\n margin-block-end: var(--base-size-6);\n }\n\n .BannerActions [data-primary-action='trailing'] {\n display: none;\n }\n\n .BannerActions [data-primary-action='leading'] {\n display: flex;\n }\n}\n\n@container banner (min-width: 500px) {\n .BannerContainer {\n display: grid;\n grid-template-columns: auto auto;\n }\n\n :where(.Banner):not([data-dismissible])\n :where(.BannerActionsContainer[data-primary-action='trailing'])\n :where([data-variant='link']:only-child) {\n padding-inline: 0 var(--base-size-12);\n }\n\n .BannerActions [data-primary-action='trailing'] {\n display: flex;\n min-height: var(--base-size-32, 2rem);\n }\n\n .BannerActions [data-primary-action='leading'] {\n display: none;\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/SegmentedControl/SegmentedControl.module.css"],"names":[],"mappings":"AAAA,6CAEE,mCAAoC,CASpC,8EAAkD,CAClD,8FAAuF,CACvF,gDAAyC,CATzC,mBAAoB,CAMpB,8CAAuC,CAHvC,WAAY,CAEZ,QAAS,CADT,SA0HF,CAlHE,mEACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,oEACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CAEA,wCACE,0EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,2EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,yBACE,2EACE,YAAa,CACb,UAAW,CAEX,mCACF,CAEA,4EACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAEA,2BACE,wEACE,YAAa,CACb,UAAW,CAEX,mCACF,CASA,qLACE,mBAAoB,CACpB,UAAW,CAEX,mCACF,CACF,CAQA,2KACE,YACF,CAEA,wCAKE,yLACE,YACF,CACF,CAEA,yBAKE,2LACE,YACF,CACF,CAEA,2BAKE,qLACE,YACF,CACF,CAEA,sEAGE,4CAAsC,CADtC,WAEF,CAGF,8CACE,YAwBF,CArBE,qEACE,aACF,CAEA,wCACE,4EACE,aACF,CACF,CAEA,yBACE,6EACE,aACF,CACF,CAEA,2BACE,0EACE,aACF,CACF,CAGF,iCAEE,aAAc,CAKd,WAAY,CADZ,kBAAmB,CAFnB,eAAgB,CAHhB,iBAgDF,CAxCE,kDAEE,gBAiBF,CAfE,wDAQE,uEAA4C,CAJ5C,+BAA0B,CAE1B,UAAW,CALX,iBAAkB,CAElB,yCAAoC,CADpC,4BAAuB,CAGvB,SAIF,CAEA,6JAEE,4BACF,CAGF,kEACE,4BACF,CAEA,6CAEE,gBACF,CAEA,4CAEE,iBACF,CAEA,qEAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAGF,mCAEE,6CAA8C,CAC9C,uCAAwC,CACxC,oEAA4D,CAW5D,4BAA6B,CAC7B,wBAAyB,CAGzB,mDAAoD,CAFpD,cAAe,CAJf,kBAAmB,CACnB,cAAe,CAJf,mBAAoB,CACpB,iBAAkB,CAClB,8CAA2C,CAL3C,WAAY,CAEZ,gDAAiD,CAHjD,UAwDF,CAzCE,uCACE,+CAA0B,CAC1B,gDACF,CAGA,wDAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAOF,CAHE,4EACE,6BACF,CAIF,gEAGE,eAAgB,CAFhB,qFAAuD,CACvD,mBAEF,CAGA,8EAEE,OACF,CAEA,wBACE,0CAME,UAAW,CAFX,MAAO,CACP,eAAgB,CAJhB,iBAAkB,CAElB,OAAQ,CADR,OAAQ,CAKR,0BACF,CACF,CAGF,uCACE,8CACF,CAEA,oCAiBE,kBAAmB,CAVnB,wBAAyB,CASzB,sGAAyG,CARzG,kBAAmB,CACnB,6CAAqC,CARrC,YAAa,CACb,WAAY,CAgBZ,sBAAuB,CAZvB,2GAA4G,CAF5G,4GAeF,CAEA,sDAEE,gDAA6C,CAD7C,SAaF,CAVE,0FAKE,4EAAiD,CACjD,gFAAiD,CAEjD,mDAAoD,CAJpD,0DAA2D,CAF3D,2DAOF,CAIA,sGACE,qFACF,CAEA,uGACE,uFACF,CAGF,uCAOE,uBAAwB,CANxB,aAAc,CAGd,gDAA6C,CAF7C,QAAS,CACT,eAAgB,CAEhB,mBAAoB,CAGpB,wBAAiB,CAAjB,gBAAiB,CAFjB,iBAGF,CAEA,wCACE,sCACF","file":"SegmentedControl-5cfe12ab.css","sourcesContent":[".SegmentedControl {\n /* TODO: use primitive `control.medium.size` when it is available instead of '32px' */\n --segmented-control-icon-width: 32px;\n\n display: inline-flex;\n\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 32px;\n padding: 0;\n margin: 0;\n font-size: var(--text-body-size-medium);\n background-color: var(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);\n border-radius: var(--borderRadius-medium);\n\n /* Responsive full-width */\n &[data-full-width='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n @media (--viewportRange-narrow) {\n &[data-full-width-narrow='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-narrow='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-full-width-regular='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-regular='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-full-width-wide='true'] {\n display: flex;\n width: 100%;\n\n --segmented-control-icon-width: 100%;\n }\n\n &[data-full-width-wide='false'] {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n\n &[data-full-width-regular='true']:not([data-full-width-wide='true']) {\n display: inline-flex;\n width: auto;\n\n --segmented-control-icon-width: 32px;\n }\n }\n\n /* Hide when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: none;\n }\n\n /* Handle hideLabels variant - hide button text */\n &[data-variant='hideLabels'] .Text {\n display: none;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: none;\n }\n\n &[data-variant-narrow='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: none;\n }\n\n &[data-variant-regular='hideLabels'] .Text {\n display: none;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: none;\n }\n\n &[data-variant-wide='hideLabels'] .Text {\n display: none;\n }\n }\n\n &:where([data-size='small']) {\n /* TODO: use primitive `control.{small|medium}.size` when it is available */\n height: 28px;\n font-size: var(--text-body-size-small);\n }\n}\n\n.DropdownContainer {\n display: none;\n\n /* Show when dropdown variant is active */\n &[data-variant='dropdown'] {\n display: block;\n }\n\n @media (--viewportRange-narrow) {\n &[data-variant-narrow='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-regular) {\n &[data-variant-regular='dropdown'] {\n display: block;\n }\n }\n\n @media (--viewportRange-wide) {\n &[data-variant-wide='dropdown'] {\n display: block;\n }\n }\n}\n\n.Item {\n position: relative;\n display: block;\n /* stylelint-disable-next-line primer/spacing */\n margin-top: -1px;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: -1px;\n flex-grow: 1;\n\n &:not(:last-child) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: 1px;\n\n &::after {\n position: absolute;\n top: var(--base-size-8);\n right: calc(-1 * var(--base-size-2));\n bottom: var(--base-size-8);\n width: 1px;\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:has(+ [data-selected])::after,\n &:where([data-selected])::after {\n background-color: transparent;\n }\n }\n\n &:focus-within:has(:focus-visible) {\n background-color: transparent;\n }\n\n &:first-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -1px;\n }\n\n &:last-child {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -1px;\n }\n\n .Counter {\n margin-inline-start: var(--base-size-8);\n display: flex;\n align-items: center;\n }\n}\n\n.Button {\n /* TODO: use primitive `primer.control.medium.paddingInline.normal` when it is available */\n --segmented-control-button-inner-padding: 12px;\n --segmented-control-button-bg-inset: 4px;\n --segmented-control-outer-radius: var(--borderRadius-medium);\n\n width: 100%;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--segmented-control-button-bg-inset);\n font-family: inherit;\n font-size: inherit;\n font-weight: var(--base-text-weight-normal);\n color: currentColor;\n cursor: pointer;\n background-color: transparent;\n border-color: transparent;\n border-width: 0;\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n\n & svg {\n fill: var(--fgColor-muted);\n color: var(--fgColor-muted);\n }\n\n /* fallback :focus state */\n &:focus:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n }\n }\n\n /* default focus state */\n &:focus-visible:not(:disabled) {\n outline: var(--base-size-2) solid var(--fgColor-accent);\n outline-offset: -1px;\n box-shadow: none;\n }\n\n /* stylelint-disable-next-line selector-max-specificity */\n &:focus:focus-visible:not(:last-child)::after {\n /* fixes an issue where the focus outline shows over the pseudo-element */\n width: 0;\n }\n\n @media (pointer: coarse) {\n &::before {\n position: absolute;\n top: 50%;\n right: 0;\n left: 0;\n min-height: 44px;\n content: '';\n transform: translateY(-50%);\n }\n }\n}\n\n.IconButton {\n width: var(--segmented-control-icon-width, 32px);\n}\n\n.Content {\n display: flex;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n padding-right: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n /* stylelint-disable-next-line primer/spacing */\n padding-left: calc(var(--segmented-control-button-inner-padding) - var(--segmented-control-button-bg-inset));\n border-color: transparent;\n border-style: solid;\n border-width: var(--borderWidth-thin);\n\n /*\n innerRadius = outerRadius - distance/2\n https://stackoverflow.com/questions/2932146/math-problem-determine-the-corner-radius-of-an-inner-border-based-on-outer-corn\n */\n /* stylelint-disable-next-line primer/borders */\n border-radius: calc(var(--segmented-control-outer-radius) - var(--segmented-control-button-bg-inset) / 2);\n align-items: center;\n justify-content: center;\n}\n\n.Button[aria-current='true'] {\n padding: 0;\n font-weight: var(--base-text-weight-semibold);\n\n .Content {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--segmented-control-button-inner-padding);\n /* stylelint-disable-next-line primer/spacing */\n padding-left: var(--segmented-control-button-inner-padding);\n background-color: var(--controlKnob-bgColor-rest);\n border-color: var(--controlKnob-borderColor-rest);\n /* stylelint-disable-next-line primer/borders */\n border-radius: var(--segmented-control-outer-radius);\n }\n}\n\n.Button:not([aria-current='true']) {\n &:hover .Content {\n background-color: var(--controlTrack-bgColor-hover);\n }\n\n &:active .Content {\n background-color: var(--controlTrack-bgColor-active);\n }\n}\n\n.Text::after {\n display: block;\n height: 0;\n overflow: hidden;\n font-weight: var(--base-text-weight-semibold);\n pointer-events: none;\n visibility: hidden;\n content: attr(data-text);\n user-select: none;\n}\n\n.LeadingIcon {\n margin-right: var(--base-size-4);\n}\n"]}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
type LiveRegionContext = {
|
|
3
|
-
announce: (message: string) => void;
|
|
4
|
-
message: string;
|
|
5
|
-
};
|
|
6
|
-
declare const LiveRegionContext: React.Context<LiveRegionContext | null>;
|
|
7
|
-
declare function useLiveRegion(): LiveRegionContext;
|
|
8
|
-
declare function LiveRegion({ children }: React.PropsWithChildren): React.JSX.Element;
|
|
9
|
-
declare function LiveRegionOutlet(): React.JSX.Element;
|
|
10
|
-
declare function Message({ value }: {
|
|
11
|
-
value: string;
|
|
12
|
-
}): null;
|
|
13
|
-
export { LiveRegion, LiveRegionOutlet, Message, useLiveRegion };
|
|
14
|
-
//# sourceMappingURL=LiveRegion.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LiveRegion.d.ts","sourceRoot":"","sources":["../../../src/internal/components/LiveRegion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,QAAA,MAAM,iBAAiB,yCAAsD,CAAA;AAE7E,iBAAS,aAAa,sBAMrB;AAED,iBAAS,UAAU,CAAC,EAAC,QAAQ,EAAC,EAAE,KAAK,CAAC,iBAAiB,qBAUtD;AAED,iBAAS,gBAAgB,sBAOxB;AAED,iBAAS,OAAO,CAAC,EAAC,KAAK,EAAC,EAAE;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,QA6BxC;AAED,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAC,CAAA"}
|