@primer/react 38.32.0-rc.7fd08e0cc → 38.32.0-rc.85de10233
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 +8 -0
- package/dist/ActionBar/ActionBar.js +130 -424
- package/dist/FilteredActionList/FilteredActionList.js +66 -155
- package/dist/FilteredActionList/useAnnouncements.js +66 -138
- package/dist/LabelGroup/LabelGroup.js +76 -110
- package/dist/Overlay/Overlay.js +45 -169
- package/dist/TextInput/TextInput.js +7 -7
- package/dist/ToggleSwitch/ToggleSwitch.js +167 -186
- package/dist/TreeView/TreeView.js +309 -814
- package/dist/UnderlineNav/UnderlineNav-a06bbc74.css +2 -0
- package/dist/UnderlineNav/UnderlineNav-a06bbc74.css.map +1 -0
- package/dist/UnderlineNav/UnderlineNav.d.ts +5 -0
- package/dist/UnderlineNav/UnderlineNav.js +136 -129
- package/dist/UnderlineNav/UnderlineNav.module.css.js +2 -1
- package/dist/experimental/UnderlinePanels/UnderlinePanels.js +38 -95
- package/dist/hooks/useControllableState.js +3 -3
- package/dist/hooks/useMedia.js +44 -43
- package/dist/internal/components/UnderlineTabbedInterface-25587345.css +2 -0
- package/dist/internal/components/UnderlineTabbedInterface-25587345.css.map +1 -0
- package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
- package/dist/internal/components/ValidationAnimationContainer.js +40 -34
- package/package.json +3 -1
- package/dist/UnderlineNav/UnderlineNav-47547980.css +0 -2
- package/dist/UnderlineNav/UnderlineNav-47547980.css.map +0 -1
- package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css +0 -2
- package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css.map +0 -1
|
@@ -72,7 +72,7 @@ const LineIcon = (t0) => {
|
|
|
72
72
|
};
|
|
73
73
|
const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
|
|
74
74
|
var _buttonLabelOn, _buttonLabelOff;
|
|
75
|
-
const $ = c(
|
|
75
|
+
const $ = c(90);
|
|
76
76
|
let ariaDescribedby;
|
|
77
77
|
let ariaLabelledby;
|
|
78
78
|
let buttonLabelOff;
|
|
@@ -141,93 +141,74 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
|
|
|
141
141
|
const loadingLabelId = useId$1("loadingLabel");
|
|
142
142
|
const { safeSetTimeout } = useSafeTimeout();
|
|
143
143
|
let t5;
|
|
144
|
-
if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !==
|
|
144
|
+
if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onChange || $[23] !== onClick || $[24] !== setIsOn) {
|
|
145
145
|
t5 = (e) => {
|
|
146
146
|
if (disabled || loading) return;
|
|
147
|
-
if (
|
|
147
|
+
if (isControlled) {
|
|
148
|
+
var _onChange;
|
|
149
|
+
(_onChange = onChange) === null || _onChange === void 0 || _onChange(!isOn);
|
|
150
|
+
} else setIsOn(!isOn);
|
|
148
151
|
onClick && onClick(e);
|
|
149
152
|
};
|
|
150
153
|
$[18] = disabled;
|
|
151
154
|
$[19] = isControlled;
|
|
152
155
|
$[20] = isOn;
|
|
153
156
|
$[21] = loading;
|
|
154
|
-
$[22] =
|
|
155
|
-
$[23] =
|
|
156
|
-
$[24] =
|
|
157
|
-
|
|
157
|
+
$[22] = onChange;
|
|
158
|
+
$[23] = onClick;
|
|
159
|
+
$[24] = setIsOn;
|
|
160
|
+
$[25] = t5;
|
|
161
|
+
} else t5 = $[25];
|
|
158
162
|
const handleToggleClick = t5;
|
|
159
163
|
let t6;
|
|
160
164
|
let t7;
|
|
161
|
-
if ($[
|
|
165
|
+
if ($[26] !== isLoadingLabelVisible || $[27] !== loading || $[28] !== loadingLabelDelay || $[29] !== safeSetTimeout) {
|
|
162
166
|
t6 = () => {
|
|
163
|
-
if (onChange && isControlled && !disabled) onChange(Boolean(checked));
|
|
164
|
-
};
|
|
165
|
-
t7 = [
|
|
166
|
-
onChange,
|
|
167
|
-
checked,
|
|
168
|
-
isControlled,
|
|
169
|
-
disabled
|
|
170
|
-
];
|
|
171
|
-
$[25] = checked;
|
|
172
|
-
$[26] = disabled;
|
|
173
|
-
$[27] = isControlled;
|
|
174
|
-
$[28] = onChange;
|
|
175
|
-
$[29] = t6;
|
|
176
|
-
$[30] = t7;
|
|
177
|
-
} else {
|
|
178
|
-
t6 = $[29];
|
|
179
|
-
t7 = $[30];
|
|
180
|
-
}
|
|
181
|
-
useEffect(t6, t7);
|
|
182
|
-
let t8;
|
|
183
|
-
let t9;
|
|
184
|
-
if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
|
|
185
|
-
t8 = () => {
|
|
186
167
|
if (!loading && isLoadingLabelVisible) setIsLoadingLabelVisible(false);
|
|
187
168
|
else if (loading && !isLoadingLabelVisible) safeSetTimeout(() => {
|
|
188
169
|
setIsLoadingLabelVisible(true);
|
|
189
170
|
}, loadingLabelDelay);
|
|
190
171
|
};
|
|
191
|
-
|
|
172
|
+
t7 = [
|
|
192
173
|
loading,
|
|
193
174
|
isLoadingLabelVisible,
|
|
194
175
|
loadingLabelDelay,
|
|
195
176
|
safeSetTimeout
|
|
196
177
|
];
|
|
197
|
-
$[
|
|
198
|
-
$[
|
|
199
|
-
$[
|
|
200
|
-
$[
|
|
201
|
-
$[
|
|
202
|
-
$[
|
|
178
|
+
$[26] = isLoadingLabelVisible;
|
|
179
|
+
$[27] = loading;
|
|
180
|
+
$[28] = loadingLabelDelay;
|
|
181
|
+
$[29] = safeSetTimeout;
|
|
182
|
+
$[30] = t6;
|
|
183
|
+
$[31] = t7;
|
|
203
184
|
} else {
|
|
204
|
-
|
|
205
|
-
|
|
185
|
+
t6 = $[30];
|
|
186
|
+
t7 = $[31];
|
|
206
187
|
}
|
|
207
|
-
useEffect(
|
|
188
|
+
useEffect(t6, t7);
|
|
208
189
|
let switchButtonDescribedBy = loadingLabelId;
|
|
209
190
|
if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
|
|
191
|
+
let t8;
|
|
192
|
+
if ($[32] !== className) {
|
|
193
|
+
t8 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
|
|
194
|
+
$[32] = className;
|
|
195
|
+
$[33] = t8;
|
|
196
|
+
} else t8 = $[33];
|
|
197
|
+
const t9 = isLoadingLabelVisible && loadingLabel;
|
|
210
198
|
let t10;
|
|
211
|
-
if ($[
|
|
212
|
-
t10 =
|
|
213
|
-
$[37] = className;
|
|
214
|
-
$[38] = t10;
|
|
215
|
-
} else t10 = $[38];
|
|
216
|
-
const t11 = isLoadingLabelVisible && loadingLabel;
|
|
217
|
-
let t12;
|
|
218
|
-
if ($[39] !== loadingLabelId || $[40] !== t11) {
|
|
219
|
-
t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
|
|
199
|
+
if ($[34] !== loadingLabelId || $[35] !== t9) {
|
|
200
|
+
t10 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
|
|
220
201
|
announceOnShow: true,
|
|
221
202
|
id: loadingLabelId,
|
|
222
|
-
children:
|
|
203
|
+
children: t9
|
|
223
204
|
}) });
|
|
224
|
-
$[
|
|
225
|
-
$[
|
|
226
|
-
$[
|
|
227
|
-
} else
|
|
228
|
-
let
|
|
229
|
-
if ($[
|
|
230
|
-
|
|
205
|
+
$[34] = loadingLabelId;
|
|
206
|
+
$[35] = t9;
|
|
207
|
+
$[36] = t10;
|
|
208
|
+
} else t10 = $[36];
|
|
209
|
+
let t11;
|
|
210
|
+
if ($[37] !== loading || $[38] !== statusLabelPosition) {
|
|
211
|
+
t11 = loading ? /*#__PURE__*/ jsx("div", {
|
|
231
212
|
className: ToggleSwitch_module_css_default.LoadingSpinner,
|
|
232
213
|
"data-status-label-position": statusLabelPosition,
|
|
233
214
|
children: /*#__PURE__*/ jsx(Spinner, {
|
|
@@ -235,172 +216,172 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
|
|
|
235
216
|
srText: null
|
|
236
217
|
})
|
|
237
218
|
}) : null;
|
|
238
|
-
$[
|
|
239
|
-
$[
|
|
240
|
-
$[
|
|
241
|
-
} else
|
|
242
|
-
const
|
|
243
|
-
const
|
|
244
|
-
const
|
|
245
|
-
let
|
|
246
|
-
if ($[
|
|
247
|
-
|
|
219
|
+
$[37] = loading;
|
|
220
|
+
$[38] = statusLabelPosition;
|
|
221
|
+
$[39] = t11;
|
|
222
|
+
} else t11 = $[39];
|
|
223
|
+
const t12 = !acceptsInteraction;
|
|
224
|
+
const t13 = !isOn;
|
|
225
|
+
const t14 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
|
|
226
|
+
let t15;
|
|
227
|
+
if ($[40] !== t13 || $[41] !== t14) {
|
|
228
|
+
t15 = /*#__PURE__*/ jsx("span", {
|
|
248
229
|
className: ToggleSwitch_module_css_default.StatusTextItem,
|
|
249
|
-
"data-hidden":
|
|
250
|
-
children:
|
|
230
|
+
"data-hidden": t13,
|
|
231
|
+
children: t14
|
|
251
232
|
});
|
|
252
|
-
$[
|
|
253
|
-
$[
|
|
254
|
-
$[
|
|
255
|
-
} else
|
|
256
|
-
const
|
|
257
|
-
let
|
|
258
|
-
if ($[
|
|
259
|
-
|
|
233
|
+
$[40] = t13;
|
|
234
|
+
$[41] = t14;
|
|
235
|
+
$[42] = t15;
|
|
236
|
+
} else t15 = $[42];
|
|
237
|
+
const t16 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
|
|
238
|
+
let t17;
|
|
239
|
+
if ($[43] !== isOn || $[44] !== t16) {
|
|
240
|
+
t17 = /*#__PURE__*/ jsx("span", {
|
|
260
241
|
className: ToggleSwitch_module_css_default.StatusTextItem,
|
|
261
242
|
"data-hidden": isOn,
|
|
262
|
-
children:
|
|
243
|
+
children: t16
|
|
263
244
|
});
|
|
264
|
-
$[
|
|
265
|
-
$[
|
|
266
|
-
$[
|
|
267
|
-
} else
|
|
268
|
-
let
|
|
269
|
-
if ($[
|
|
270
|
-
|
|
245
|
+
$[43] = isOn;
|
|
246
|
+
$[44] = t16;
|
|
247
|
+
$[45] = t17;
|
|
248
|
+
} else t17 = $[45];
|
|
249
|
+
let t18;
|
|
250
|
+
if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t12 || $[49] !== t15 || $[50] !== t17) {
|
|
251
|
+
t18 = /*#__PURE__*/ jsxs("span", {
|
|
271
252
|
className: ToggleSwitch_module_css_default.StatusText,
|
|
272
253
|
"data-size": size,
|
|
273
|
-
"data-disabled":
|
|
254
|
+
"data-disabled": t12,
|
|
274
255
|
"aria-hidden": "true",
|
|
275
256
|
onClick: handleToggleClick,
|
|
276
|
-
children: [
|
|
257
|
+
children: [t15, t17]
|
|
277
258
|
});
|
|
278
|
-
$[
|
|
279
|
-
$[
|
|
280
|
-
$[
|
|
281
|
-
$[
|
|
282
|
-
$[
|
|
283
|
-
$[
|
|
284
|
-
} else
|
|
259
|
+
$[46] = handleToggleClick;
|
|
260
|
+
$[47] = size;
|
|
261
|
+
$[48] = t12;
|
|
262
|
+
$[49] = t15;
|
|
263
|
+
$[50] = t17;
|
|
264
|
+
$[51] = t18;
|
|
265
|
+
} else t18 = $[51];
|
|
266
|
+
const t19 = !acceptsInteraction;
|
|
267
|
+
const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
|
|
285
268
|
const t21 = !acceptsInteraction;
|
|
286
|
-
const t22 =
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
|
|
297
|
-
t26 = /*#__PURE__*/ jsx("div", {
|
|
269
|
+
const t22 = !acceptsInteraction;
|
|
270
|
+
let t23;
|
|
271
|
+
if ($[52] !== size) {
|
|
272
|
+
t23 = /*#__PURE__*/ jsx(LineIcon, { size });
|
|
273
|
+
$[52] = size;
|
|
274
|
+
$[53] = t23;
|
|
275
|
+
} else t23 = $[53];
|
|
276
|
+
let t24;
|
|
277
|
+
if ($[54] !== isOn || $[55] !== t22 || $[56] !== t23) {
|
|
278
|
+
t24 = /*#__PURE__*/ jsx("div", {
|
|
298
279
|
className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
|
|
299
280
|
"data-checked": isOn,
|
|
300
|
-
"data-disabled":
|
|
301
|
-
children:
|
|
281
|
+
"data-disabled": t22,
|
|
282
|
+
children: t23
|
|
302
283
|
});
|
|
303
|
-
$[
|
|
304
|
-
$[
|
|
305
|
-
$[
|
|
306
|
-
$[
|
|
307
|
-
} else
|
|
308
|
-
const
|
|
309
|
-
let
|
|
310
|
-
if ($[
|
|
311
|
-
|
|
312
|
-
$[
|
|
313
|
-
$[
|
|
314
|
-
} else
|
|
315
|
-
let
|
|
316
|
-
if ($[
|
|
317
|
-
|
|
284
|
+
$[54] = isOn;
|
|
285
|
+
$[55] = t22;
|
|
286
|
+
$[56] = t23;
|
|
287
|
+
$[57] = t24;
|
|
288
|
+
} else t24 = $[57];
|
|
289
|
+
const t25 = !acceptsInteraction;
|
|
290
|
+
let t26;
|
|
291
|
+
if ($[58] !== size) {
|
|
292
|
+
t26 = /*#__PURE__*/ jsx(CircleIcon, { size });
|
|
293
|
+
$[58] = size;
|
|
294
|
+
$[59] = t26;
|
|
295
|
+
} else t26 = $[59];
|
|
296
|
+
let t27;
|
|
297
|
+
if ($[60] !== isOn || $[61] !== t25 || $[62] !== t26) {
|
|
298
|
+
t27 = /*#__PURE__*/ jsx("div", {
|
|
318
299
|
className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
|
|
319
300
|
"data-checked": isOn,
|
|
320
|
-
"data-disabled":
|
|
321
|
-
children:
|
|
301
|
+
"data-disabled": t25,
|
|
302
|
+
children: t26
|
|
322
303
|
});
|
|
323
|
-
$[
|
|
324
|
-
$[
|
|
325
|
-
$[
|
|
326
|
-
$[
|
|
327
|
-
} else
|
|
328
|
-
let
|
|
329
|
-
if ($[
|
|
330
|
-
|
|
304
|
+
$[60] = isOn;
|
|
305
|
+
$[61] = t25;
|
|
306
|
+
$[62] = t26;
|
|
307
|
+
$[63] = t27;
|
|
308
|
+
} else t27 = $[63];
|
|
309
|
+
let t28;
|
|
310
|
+
if ($[64] !== t24 || $[65] !== t27) {
|
|
311
|
+
t28 = /*#__PURE__*/ jsxs("div", {
|
|
331
312
|
className: ToggleSwitch_module_css_default.SwitchButtonContent,
|
|
332
313
|
"aria-hidden": "true",
|
|
333
|
-
children: [
|
|
314
|
+
children: [t24, t27]
|
|
334
315
|
});
|
|
335
|
-
$[
|
|
336
|
-
$[
|
|
337
|
-
$[
|
|
338
|
-
} else
|
|
339
|
-
const
|
|
340
|
-
let
|
|
341
|
-
if ($[
|
|
342
|
-
|
|
316
|
+
$[64] = t24;
|
|
317
|
+
$[65] = t27;
|
|
318
|
+
$[66] = t28;
|
|
319
|
+
} else t28 = $[66];
|
|
320
|
+
const t29 = !acceptsInteraction;
|
|
321
|
+
let t30;
|
|
322
|
+
if ($[67] !== isOn || $[68] !== t29) {
|
|
323
|
+
t30 = /*#__PURE__*/ jsx("div", {
|
|
343
324
|
className: ToggleSwitch_module_css_default.ToggleKnob,
|
|
344
325
|
"data-checked": isOn,
|
|
345
|
-
"data-disabled":
|
|
326
|
+
"data-disabled": t29,
|
|
346
327
|
"aria-hidden": "true"
|
|
347
328
|
});
|
|
348
|
-
$[
|
|
349
|
-
$[
|
|
350
|
-
$[
|
|
351
|
-
} else
|
|
352
|
-
let
|
|
353
|
-
if ($[
|
|
354
|
-
|
|
329
|
+
$[67] = isOn;
|
|
330
|
+
$[68] = t29;
|
|
331
|
+
$[69] = t30;
|
|
332
|
+
} else t30 = $[69];
|
|
333
|
+
let t31;
|
|
334
|
+
if ($[70] !== ariaLabelledby || $[71] !== buttonType || $[72] !== handleToggleClick || $[73] !== isOn || $[74] !== ref || $[75] !== size || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t28 || $[80] !== t30) {
|
|
335
|
+
t31 = /*#__PURE__*/ jsxs("button", {
|
|
355
336
|
ref,
|
|
356
337
|
type: buttonType,
|
|
357
338
|
className: ToggleSwitch_module_css_default.SwitchButton,
|
|
358
339
|
"data-size": size,
|
|
359
340
|
"data-checked": isOn,
|
|
360
|
-
"data-disabled":
|
|
341
|
+
"data-disabled": t19,
|
|
361
342
|
onClick: handleToggleClick,
|
|
362
343
|
"aria-labelledby": ariaLabelledby,
|
|
363
|
-
"aria-describedby":
|
|
344
|
+
"aria-describedby": t20,
|
|
364
345
|
"aria-pressed": isOn,
|
|
365
|
-
"aria-disabled":
|
|
366
|
-
children: [
|
|
346
|
+
"aria-disabled": t21,
|
|
347
|
+
children: [t28, t30]
|
|
367
348
|
});
|
|
368
|
-
$[
|
|
369
|
-
$[
|
|
370
|
-
$[
|
|
371
|
-
$[
|
|
372
|
-
$[
|
|
373
|
-
$[
|
|
374
|
-
$[
|
|
375
|
-
$[
|
|
376
|
-
$[
|
|
377
|
-
$[
|
|
378
|
-
$[
|
|
379
|
-
$[
|
|
380
|
-
} else
|
|
381
|
-
let
|
|
382
|
-
if ($[
|
|
383
|
-
|
|
384
|
-
className:
|
|
349
|
+
$[70] = ariaLabelledby;
|
|
350
|
+
$[71] = buttonType;
|
|
351
|
+
$[72] = handleToggleClick;
|
|
352
|
+
$[73] = isOn;
|
|
353
|
+
$[74] = ref;
|
|
354
|
+
$[75] = size;
|
|
355
|
+
$[76] = t19;
|
|
356
|
+
$[77] = t20;
|
|
357
|
+
$[78] = t21;
|
|
358
|
+
$[79] = t28;
|
|
359
|
+
$[80] = t30;
|
|
360
|
+
$[81] = t31;
|
|
361
|
+
} else t31 = $[81];
|
|
362
|
+
let t32;
|
|
363
|
+
if ($[82] !== rest || $[83] !== statusLabelPosition || $[84] !== t10 || $[85] !== t11 || $[86] !== t18 || $[87] !== t31 || $[88] !== t8) {
|
|
364
|
+
t32 = /*#__PURE__*/ jsxs("div", {
|
|
365
|
+
className: t8,
|
|
385
366
|
"data-status-label-position": statusLabelPosition,
|
|
386
367
|
...rest,
|
|
387
368
|
children: [
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
369
|
+
t10,
|
|
370
|
+
t11,
|
|
371
|
+
t18,
|
|
372
|
+
t31
|
|
392
373
|
]
|
|
393
374
|
});
|
|
394
|
-
$[
|
|
395
|
-
$[
|
|
396
|
-
$[
|
|
397
|
-
$[
|
|
398
|
-
$[
|
|
399
|
-
$[
|
|
400
|
-
$[
|
|
401
|
-
$[
|
|
402
|
-
} else
|
|
403
|
-
return
|
|
375
|
+
$[82] = rest;
|
|
376
|
+
$[83] = statusLabelPosition;
|
|
377
|
+
$[84] = t10;
|
|
378
|
+
$[85] = t11;
|
|
379
|
+
$[86] = t18;
|
|
380
|
+
$[87] = t31;
|
|
381
|
+
$[88] = t8;
|
|
382
|
+
$[89] = t32;
|
|
383
|
+
} else t32 = $[89];
|
|
384
|
+
return t32;
|
|
404
385
|
});
|
|
405
386
|
ToggleSwitch.displayName = "ToggleSwitch";
|
|
406
387
|
//#endregion
|