@primer/react 38.32.0-rc.68e0ffa22 → 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.
Files changed (49) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/ActionBar/ActionBar.js +130 -424
  3. package/dist/ActionList/{ActionList-65f7daac.css → ActionList-1ff5220c.css} +2 -2
  4. package/dist/ActionList/ActionList-1ff5220c.css.map +1 -0
  5. package/dist/ActionList/ActionList.module.css.js +1 -1
  6. package/dist/Breadcrumbs/{Breadcrumbs-54395fc6.css → Breadcrumbs-16d81430.css} +2 -2
  7. package/dist/Breadcrumbs/{Breadcrumbs-54395fc6.css.map → Breadcrumbs-16d81430.css.map} +1 -1
  8. package/dist/Breadcrumbs/Breadcrumbs.js +1 -0
  9. package/dist/Breadcrumbs/Breadcrumbs.module.css.js +2 -2
  10. package/dist/FilteredActionList/FilteredActionList.js +66 -155
  11. package/dist/FilteredActionList/useAnnouncements.js +66 -138
  12. package/dist/LabelGroup/LabelGroup.js +76 -110
  13. package/dist/Overlay/Overlay.js +45 -169
  14. package/dist/PageHeader/PageHeader-b12247c8.css +2 -0
  15. package/dist/PageHeader/PageHeader-b12247c8.css.map +1 -0
  16. package/dist/PageHeader/PageHeader.js +64 -23
  17. package/dist/PageHeader/PageHeader.module.css.js +1 -1
  18. package/dist/SegmentedControl/SegmentedControl-a004561f.css +2 -0
  19. package/dist/SegmentedControl/SegmentedControl-a004561f.css.map +1 -0
  20. package/dist/SegmentedControl/SegmentedControl.module.css.js +1 -1
  21. package/dist/TextInput/TextInput.js +7 -7
  22. package/dist/ToggleSwitch/ToggleSwitch.js +167 -186
  23. package/dist/TreeView/TreeView.js +309 -814
  24. package/dist/UnderlineNav/UnderlineNav-a06bbc74.css +2 -0
  25. package/dist/UnderlineNav/UnderlineNav-a06bbc74.css.map +1 -0
  26. package/dist/UnderlineNav/UnderlineNav.d.ts +5 -0
  27. package/dist/UnderlineNav/UnderlineNav.js +136 -129
  28. package/dist/UnderlineNav/UnderlineNav.module.css.js +2 -1
  29. package/dist/experimental/SelectPanel2/SelectPanel-917fdaef.css +2 -0
  30. package/dist/experimental/SelectPanel2/{SelectPanel-608e207e.css.map → SelectPanel-917fdaef.css.map} +1 -1
  31. package/dist/experimental/SelectPanel2/SelectPanel.module.css.js +1 -1
  32. package/dist/experimental/UnderlinePanels/UnderlinePanels.js +38 -95
  33. package/dist/hooks/useControllableState.js +3 -3
  34. package/dist/hooks/useMedia.js +44 -43
  35. package/dist/internal/components/UnderlineTabbedInterface-25587345.css +2 -0
  36. package/dist/internal/components/UnderlineTabbedInterface-25587345.css.map +1 -0
  37. package/dist/internal/components/UnderlineTabbedInterface.module.css.js +1 -1
  38. package/dist/internal/components/ValidationAnimationContainer.js +40 -34
  39. package/package.json +3 -1
  40. package/dist/ActionList/ActionList-65f7daac.css.map +0 -1
  41. package/dist/PageHeader/PageHeader-5e969745.css +0 -2
  42. package/dist/PageHeader/PageHeader-5e969745.css.map +0 -1
  43. package/dist/SegmentedControl/SegmentedControl-622e61a4.css +0 -2
  44. package/dist/SegmentedControl/SegmentedControl-622e61a4.css.map +0 -1
  45. package/dist/UnderlineNav/UnderlineNav-47547980.css +0 -2
  46. package/dist/UnderlineNav/UnderlineNav-47547980.css.map +0 -1
  47. package/dist/experimental/SelectPanel2/SelectPanel-608e207e.css +0 -2
  48. package/dist/internal/components/UnderlineTabbedInterface-1745a3d6.css +0 -2
  49. 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(95);
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] !== onClick || $[23] !== setIsOn) {
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 (!isControlled) setIsOn(!isOn);
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] = onClick;
155
- $[23] = setIsOn;
156
- $[24] = t5;
157
- } else t5 = $[24];
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 ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
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
- t9 = [
172
+ t7 = [
192
173
  loading,
193
174
  isLoadingLabelVisible,
194
175
  loadingLabelDelay,
195
176
  safeSetTimeout
196
177
  ];
197
- $[31] = isLoadingLabelVisible;
198
- $[32] = loading;
199
- $[33] = loadingLabelDelay;
200
- $[34] = safeSetTimeout;
201
- $[35] = t8;
202
- $[36] = t9;
178
+ $[26] = isLoadingLabelVisible;
179
+ $[27] = loading;
180
+ $[28] = loadingLabelDelay;
181
+ $[29] = safeSetTimeout;
182
+ $[30] = t6;
183
+ $[31] = t7;
203
184
  } else {
204
- t8 = $[35];
205
- t9 = $[36];
185
+ t6 = $[30];
186
+ t7 = $[31];
206
187
  }
207
- useEffect(t8, t9);
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 ($[37] !== className) {
212
- t10 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
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: t11
203
+ children: t9
223
204
  }) });
224
- $[39] = loadingLabelId;
225
- $[40] = t11;
226
- $[41] = t12;
227
- } else t12 = $[41];
228
- let t13;
229
- if ($[42] !== loading || $[43] !== statusLabelPosition) {
230
- t13 = loading ? /*#__PURE__*/ jsx("div", {
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
- $[42] = loading;
239
- $[43] = statusLabelPosition;
240
- $[44] = t13;
241
- } else t13 = $[44];
242
- const t14 = !acceptsInteraction;
243
- const t15 = !isOn;
244
- const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
245
- let t17;
246
- if ($[45] !== t15 || $[46] !== t16) {
247
- t17 = /*#__PURE__*/ jsx("span", {
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": t15,
250
- children: t16
230
+ "data-hidden": t13,
231
+ children: t14
251
232
  });
252
- $[45] = t15;
253
- $[46] = t16;
254
- $[47] = t17;
255
- } else t17 = $[47];
256
- const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
257
- let t19;
258
- if ($[48] !== isOn || $[49] !== t18) {
259
- t19 = /*#__PURE__*/ jsx("span", {
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: t18
243
+ children: t16
263
244
  });
264
- $[48] = isOn;
265
- $[49] = t18;
266
- $[50] = t19;
267
- } else t19 = $[50];
268
- let t20;
269
- if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
270
- t20 = /*#__PURE__*/ jsxs("span", {
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": t14,
254
+ "data-disabled": t12,
274
255
  "aria-hidden": "true",
275
256
  onClick: handleToggleClick,
276
- children: [t17, t19]
257
+ children: [t15, t17]
277
258
  });
278
- $[51] = handleToggleClick;
279
- $[52] = size;
280
- $[53] = t14;
281
- $[54] = t17;
282
- $[55] = t19;
283
- $[56] = t20;
284
- } else t20 = $[56];
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 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
287
- const t23 = !acceptsInteraction;
288
- const t24 = !acceptsInteraction;
289
- let t25;
290
- if ($[57] !== size) {
291
- t25 = /*#__PURE__*/ jsx(LineIcon, { size });
292
- $[57] = size;
293
- $[58] = t25;
294
- } else t25 = $[58];
295
- let t26;
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": t24,
301
- children: t25
281
+ "data-disabled": t22,
282
+ children: t23
302
283
  });
303
- $[59] = isOn;
304
- $[60] = t24;
305
- $[61] = t25;
306
- $[62] = t26;
307
- } else t26 = $[62];
308
- const t27 = !acceptsInteraction;
309
- let t28;
310
- if ($[63] !== size) {
311
- t28 = /*#__PURE__*/ jsx(CircleIcon, { size });
312
- $[63] = size;
313
- $[64] = t28;
314
- } else t28 = $[64];
315
- let t29;
316
- if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
317
- t29 = /*#__PURE__*/ jsx("div", {
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": t27,
321
- children: t28
301
+ "data-disabled": t25,
302
+ children: t26
322
303
  });
323
- $[65] = isOn;
324
- $[66] = t27;
325
- $[67] = t28;
326
- $[68] = t29;
327
- } else t29 = $[68];
328
- let t30;
329
- if ($[69] !== t26 || $[70] !== t29) {
330
- t30 = /*#__PURE__*/ jsxs("div", {
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: [t26, t29]
314
+ children: [t24, t27]
334
315
  });
335
- $[69] = t26;
336
- $[70] = t29;
337
- $[71] = t30;
338
- } else t30 = $[71];
339
- const t31 = !acceptsInteraction;
340
- let t32;
341
- if ($[72] !== isOn || $[73] !== t31) {
342
- t32 = /*#__PURE__*/ jsx("div", {
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": t31,
326
+ "data-disabled": t29,
346
327
  "aria-hidden": "true"
347
328
  });
348
- $[72] = isOn;
349
- $[73] = t31;
350
- $[74] = t32;
351
- } else t32 = $[74];
352
- let t33;
353
- if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
354
- t33 = /*#__PURE__*/ jsxs("button", {
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": t21,
341
+ "data-disabled": t19,
361
342
  onClick: handleToggleClick,
362
343
  "aria-labelledby": ariaLabelledby,
363
- "aria-describedby": t22,
344
+ "aria-describedby": t20,
364
345
  "aria-pressed": isOn,
365
- "aria-disabled": t23,
366
- children: [t30, t32]
346
+ "aria-disabled": t21,
347
+ children: [t28, t30]
367
348
  });
368
- $[75] = ariaLabelledby;
369
- $[76] = buttonType;
370
- $[77] = handleToggleClick;
371
- $[78] = isOn;
372
- $[79] = ref;
373
- $[80] = size;
374
- $[81] = t21;
375
- $[82] = t22;
376
- $[83] = t23;
377
- $[84] = t30;
378
- $[85] = t32;
379
- $[86] = t33;
380
- } else t33 = $[86];
381
- let t34;
382
- if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
383
- t34 = /*#__PURE__*/ jsxs("div", {
384
- className: t10,
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
- t12,
389
- t13,
390
- t20,
391
- t33
369
+ t10,
370
+ t11,
371
+ t18,
372
+ t31
392
373
  ]
393
374
  });
394
- $[87] = rest;
395
- $[88] = statusLabelPosition;
396
- $[89] = t10;
397
- $[90] = t12;
398
- $[91] = t13;
399
- $[92] = t20;
400
- $[93] = t33;
401
- $[94] = t34;
402
- } else t34 = $[94];
403
- return t34;
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