@primer/react 38.40.1-rc.e1840f86c → 38.40.2-rc.39d4b3b97

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 (18) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/ActionList/Description.js +2 -2
  3. package/dist/ActionList/Item.js +116 -115
  4. package/dist/AvatarStack/{AvatarStack-e6a99916.css → AvatarStack-937ec7c1.css} +2 -2
  5. package/dist/AvatarStack/{AvatarStack-e6a99916.css.map → AvatarStack-937ec7c1.css.map} +1 -1
  6. package/dist/AvatarStack/AvatarStack.module.css.js +1 -1
  7. package/dist/FormControl/FormControl.js +1 -1
  8. package/dist/FormControl/_FormControlContext.js +1 -2
  9. package/dist/FormControl/_FormControlContextProvider.js +5 -0
  10. package/dist/Truncate/Truncate.d.ts +9 -4
  11. package/dist/Truncate/Truncate.js +8 -4
  12. package/dist/Truncate/index.d.ts +2 -2
  13. package/dist/UnderlineNav/UnderlineNavItem.js +51 -43
  14. package/dist/deprecated/ActionList/Item.js +2 -2
  15. package/dist/index.d.ts +2 -2
  16. package/dist/index.js +2 -2
  17. package/generated/components.json +5 -1
  18. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,11 +1,23 @@
1
1
  # @primer/react
2
2
 
3
+ ## 38.40.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#8463](https://github.com/primer/react/pull/8463) [`f710336`](https://github.com/primer/react/commit/f7103363ce5c916b8aa27a3fd5d4c9d564d3a13f) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Truncate: Infer accepted props from the `as` prop and forward `inline` to custom `as` components (e.g. `Link`).
8
+
3
9
  ## 38.40.1
4
10
 
5
11
  ### Patch Changes
6
12
 
7
13
  - [#8413](https://github.com/primer/react/pull/8413) [`d4e30ed`](https://github.com/primer/react/commit/d4e30ed186af6ae781b3adcf83278e0c2001a834) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SelectPanel: Announce the filter input label when focus moves into the panel
8
14
 
15
+ - [#8434](https://github.com/primer/react/pull/8434) [`6794582`](https://github.com/primer/react/commit/67945828439898ace865bd5f7417c562033bcbc2) Thanks [@siddharthkp](https://github.com/siddharthkp)! - AvatarStack: Prevent a thin edge from a masked avatar over the next avatar
16
+
17
+ - [#8443](https://github.com/primer/react/pull/8443) [`e2d6cb9`](https://github.com/primer/react/commit/e2d6cb931bbde9446701056f204b055789b16dd9) Thanks [@siddharthkp](https://github.com/siddharthkp)! - UnderlineNav: Avoid adding a default `href` when items render as custom link components
18
+
19
+ - [#8429](https://github.com/primer/react/pull/8429) [`f2c075a`](https://github.com/primer/react/commit/f2c075a5d4d0b51a279c39effa18226ad909929d) Thanks [@tay1orjones](https://github.com/tay1orjones)! - SelectPanel: Prevent console warnings when measuring virtualized items
20
+
9
21
  ## 38.40.0
10
22
 
11
23
  ### Minor Changes
package/dist/ActionList/Description.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { c } from "../utils/react-compiler-runtime.js";
2
2
  import { ItemContext } from "./shared.js";
3
3
  import ActionList_module_css_default from "./ActionList.module.css.js";
4
- import Truncate from "../Truncate/Truncate.js";
4
+ import Truncate_default from "../Truncate/Truncate.js";
5
5
  import React from "react";
6
6
  import { jsx } from "react/jsx-runtime";
7
7
  import { clsx } from "clsx";
@@ -93,7 +93,7 @@ const Description = (t0) => {
93
93
  const t5 = setTruncatedText ? "" : effectiveTitle;
94
94
  let t6;
95
95
  if ($[20] !== inlineDescriptionId || $[21] !== props.children || $[22] !== style || $[23] !== t4 || $[24] !== t5) {
96
- t6 = /*#__PURE__*/ jsx(Truncate, {
96
+ t6 = /*#__PURE__*/ jsx(Truncate_default, {
97
97
  ref: containerRef,
98
98
  id: inlineDescriptionId,
99
99
  className: t4,
package/dist/ActionList/Item.js CHANGED
@@ -471,33 +471,34 @@ const UnwrappedItem = (t0, forwardedRef) => {
471
471
  $[92] = t35;
472
472
  } else t35 = $[92];
473
473
  const t36 = (_PrivateTooltipText2 = _PrivateTooltipText) !== null && _PrivateTooltipText2 !== void 0 ? _PrivateTooltipText2 : truncatedText;
474
- let t37;
474
+ const t37 = listSemantics ? null : forwardedRef;
475
475
  let t38;
476
+ let t39;
476
477
  if ($[93] === Symbol.for("react.memo_cache_sentinel")) {
477
- t37 = {};
478
- t38 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
479
- $[93] = t37;
480
- $[94] = t38;
478
+ t38 = {};
479
+ t39 = /*#__PURE__*/ jsx("span", { className: ActionList_module_css_default.Spacer });
480
+ $[93] = t38;
481
+ $[94] = t39;
481
482
  } else {
482
- t37 = $[93];
483
- t38 = $[94];
483
+ t38 = $[93];
484
+ t39 = $[94];
484
485
  }
485
- let t39;
486
+ let t40;
486
487
  if ($[95] !== selected) {
487
- t39 = /*#__PURE__*/ jsx(Selection, {
488
+ t40 = /*#__PURE__*/ jsx(Selection, {
488
489
  selected,
489
490
  className: ActionList_module_css_default.LeadingAction
490
491
  });
491
492
  $[95] = selected;
492
- $[96] = t39;
493
- } else t39 = $[96];
494
- const t40 = showInactiveIndicator ? inactiveText : void 0;
495
- const t41 = Boolean(slots.leadingVisual);
496
- let t42;
497
- if ($[97] !== labelId || $[98] !== loading || $[99] !== slots.leadingVisual || $[100] !== t40 || $[101] !== t41) {
498
- t42 = /*#__PURE__*/ jsx(VisualOrIndicator, {
499
- inactiveText: t40,
500
- itemHasLeadingVisual: t41,
493
+ $[96] = t40;
494
+ } else t40 = $[96];
495
+ const t41 = showInactiveIndicator ? inactiveText : void 0;
496
+ const t42 = Boolean(slots.leadingVisual);
497
+ let t43;
498
+ if ($[97] !== labelId || $[98] !== loading || $[99] !== slots.leadingVisual || $[100] !== t41 || $[101] !== t42) {
499
+ t43 = /*#__PURE__*/ jsx(VisualOrIndicator, {
500
+ inactiveText: t41,
501
+ itemHasLeadingVisual: t42,
501
502
  labelId,
502
503
  loading,
503
504
  position: "leading",
@@ -506,52 +507,52 @@ const UnwrappedItem = (t0, forwardedRef) => {
506
507
  $[97] = labelId;
507
508
  $[98] = loading;
508
509
  $[99] = slots.leadingVisual;
509
- $[100] = t40;
510
- $[101] = t41;
511
- $[102] = t42;
512
- } else t42 = $[102];
513
- const t43 = !!slots.description;
514
- let t44;
510
+ $[100] = t41;
511
+ $[101] = t42;
512
+ $[102] = t43;
513
+ } else t43 = $[102];
514
+ const t44 = !!slots.description;
515
+ let t45;
515
516
  if ($[103] !== inactive || $[104] !== loading) {
516
- t44 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
517
+ t45 = loading === true && !inactive && /*#__PURE__*/ jsx(VisuallyHidden, { children: "Loading" });
517
518
  $[103] = inactive;
518
519
  $[104] = loading;
519
- $[105] = t44;
520
- } else t44 = $[105];
521
- let t45;
522
- if ($[106] !== childrenWithoutSlots || $[107] !== labelId || $[108] !== t44) {
523
- t45 = /*#__PURE__*/ jsxs("span", {
520
+ $[105] = t45;
521
+ } else t45 = $[105];
522
+ let t46;
523
+ if ($[106] !== childrenWithoutSlots || $[107] !== labelId || $[108] !== t45) {
524
+ t46 = /*#__PURE__*/ jsxs("span", {
524
525
  id: labelId,
525
526
  className: ActionList_module_css_default.ItemLabel,
526
527
  "data-component": "ActionList.Item.Label",
527
- children: [childrenWithoutSlots, t44]
528
+ children: [childrenWithoutSlots, t45]
528
529
  });
529
530
  $[106] = childrenWithoutSlots;
530
531
  $[107] = labelId;
531
- $[108] = t44;
532
- $[109] = t45;
533
- } else t45 = $[109];
534
- let t46;
535
- if ($[110] !== descriptionVariant || $[111] !== slots.description || $[112] !== t43 || $[113] !== t45) {
536
- t46 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
537
- if: t43,
532
+ $[108] = t45;
533
+ $[109] = t46;
534
+ } else t46 = $[109];
535
+ let t47;
536
+ if ($[110] !== descriptionVariant || $[111] !== slots.description || $[112] !== t44 || $[113] !== t46) {
537
+ t47 = /*#__PURE__*/ jsxs(ConditionalWrapper, {
538
+ if: t44,
538
539
  className: ActionList_module_css_default.ItemDescriptionWrap,
539
540
  "data-description-variant": descriptionVariant,
540
- children: [t45, slots.description]
541
+ children: [t46, slots.description]
541
542
  });
542
543
  $[110] = descriptionVariant;
543
544
  $[111] = slots.description;
544
- $[112] = t43;
545
- $[113] = t45;
546
- $[114] = t46;
547
- } else t46 = $[114];
548
- const t47 = showInactiveIndicator ? inactiveText : void 0;
549
- const t48 = Boolean(slots.leadingVisual);
550
- let t49;
551
- if ($[115] !== labelId || $[116] !== loading || $[117] !== t47 || $[118] !== t48 || $[119] !== trailingVisual) {
552
- t49 = /*#__PURE__*/ jsx(VisualOrIndicator, {
553
- inactiveText: t47,
554
- itemHasLeadingVisual: t48,
545
+ $[112] = t44;
546
+ $[113] = t46;
547
+ $[114] = t47;
548
+ } else t47 = $[114];
549
+ const t48 = showInactiveIndicator ? inactiveText : void 0;
550
+ const t49 = Boolean(slots.leadingVisual);
551
+ let t50;
552
+ if ($[115] !== labelId || $[116] !== loading || $[117] !== t48 || $[118] !== t49 || $[119] !== trailingVisual) {
553
+ t50 = /*#__PURE__*/ jsx(VisualOrIndicator, {
554
+ inactiveText: t48,
555
+ itemHasLeadingVisual: t49,
555
556
  labelId,
556
557
  loading,
557
558
  position: "trailing",
@@ -559,14 +560,14 @@ const UnwrappedItem = (t0, forwardedRef) => {
559
560
  });
560
561
  $[115] = labelId;
561
562
  $[116] = loading;
562
- $[117] = t47;
563
- $[118] = t48;
563
+ $[117] = t48;
564
+ $[118] = t49;
564
565
  $[119] = trailingVisual;
565
- $[120] = t49;
566
- } else t49 = $[120];
567
- let t50;
566
+ $[120] = t50;
567
+ } else t50 = $[120];
568
+ let t51;
568
569
  if ($[121] !== inactiveText || $[122] !== inactiveWarningId || $[123] !== showInactiveIndicator) {
569
- t50 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
570
+ t51 = !showInactiveIndicator && inactiveText ? /*#__PURE__*/ jsx("span", {
570
571
  className: ActionList_module_css_default.InactiveWarning,
571
572
  id: inactiveWarningId,
572
573
  children: inactiveText
@@ -574,74 +575,74 @@ const UnwrappedItem = (t0, forwardedRef) => {
574
575
  $[121] = inactiveText;
575
576
  $[122] = inactiveWarningId;
576
577
  $[123] = showInactiveIndicator;
577
- $[124] = t50;
578
- } else t50 = $[124];
579
- let t51;
580
- if ($[125] !== t46 || $[126] !== t49 || $[127] !== t50) {
581
- t51 = /*#__PURE__*/ jsxs("span", {
578
+ $[124] = t51;
579
+ } else t51 = $[124];
580
+ let t52;
581
+ if ($[125] !== t47 || $[126] !== t50 || $[127] !== t51) {
582
+ t52 = /*#__PURE__*/ jsxs("span", {
582
583
  className: ActionList_module_css_default.ActionListSubContent,
583
584
  "data-component": "ActionList.Item--DividerContainer",
584
585
  children: [
585
- t46,
586
- t49,
587
- t50
586
+ t47,
587
+ t50,
588
+ t51
588
589
  ]
589
590
  });
590
- $[125] = t46;
591
- $[126] = t49;
592
- $[127] = t50;
593
- $[128] = t51;
594
- } else t51 = $[128];
595
- let t52;
596
- if ($[129] !== t39 || $[130] !== t42 || $[131] !== t51) {
597
- t52 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
598
- value: t37,
591
+ $[125] = t47;
592
+ $[126] = t50;
593
+ $[127] = t51;
594
+ $[128] = t52;
595
+ } else t52 = $[128];
596
+ let t53;
597
+ if ($[129] !== t40 || $[130] !== t43 || $[131] !== t52) {
598
+ t53 = /*#__PURE__*/ jsxs(TooltipContext.Provider, {
599
+ value: t38,
599
600
  children: [
600
- t38,
601
601
  t39,
602
- t42,
603
- t51
602
+ t40,
603
+ t43,
604
+ t52
604
605
  ]
605
606
  });
606
- $[129] = t39;
607
- $[130] = t42;
608
- $[131] = t51;
609
- $[132] = t52;
610
- } else t52 = $[132];
611
- let t53;
612
- if ($[133] !== ItemWrapper || $[134] !== forwardedRef || $[135] !== size || $[136] !== t52 || $[137] !== wrapperProps) {
613
- t53 = /*#__PURE__*/ jsx(ItemWrapper, {
607
+ $[129] = t40;
608
+ $[130] = t43;
609
+ $[131] = t52;
610
+ $[132] = t53;
611
+ } else t53 = $[132];
612
+ let t54;
613
+ if ($[133] !== ItemWrapper || $[134] !== size || $[135] !== t37 || $[136] !== t53 || $[137] !== wrapperProps) {
614
+ t54 = /*#__PURE__*/ jsx(ItemWrapper, {
614
615
  ...wrapperProps,
615
616
  className: ActionList_module_css_default.ActionListContent,
616
617
  "data-size": size,
617
- ref: forwardedRef,
618
- children: t52
618
+ ref: t37,
619
+ children: t53
619
620
  });
620
621
  $[133] = ItemWrapper;
621
- $[134] = forwardedRef;
622
- $[135] = size;
623
- $[136] = t52;
622
+ $[134] = size;
623
+ $[135] = t37;
624
+ $[136] = t53;
624
625
  $[137] = wrapperProps;
625
- $[138] = t53;
626
- } else t53 = $[138];
627
- let t54;
628
- if ($[139] !== buttonSemantics || $[140] !== forwardedRef || $[141] !== t36 || $[142] !== t53) {
629
- t54 = /*#__PURE__*/ jsx(ConditionalTooltip, {
626
+ $[138] = t54;
627
+ } else t54 = $[138];
628
+ let t55;
629
+ if ($[139] !== buttonSemantics || $[140] !== forwardedRef || $[141] !== t36 || $[142] !== t54) {
630
+ t55 = /*#__PURE__*/ jsx(ConditionalTooltip, {
630
631
  ref: forwardedRef,
631
632
  text: t36,
632
633
  enabled: buttonSemantics,
633
- children: t53
634
+ children: t54
634
635
  });
635
636
  $[139] = buttonSemantics;
636
637
  $[140] = forwardedRef;
637
638
  $[141] = t36;
638
- $[142] = t53;
639
- $[143] = t54;
640
- } else t54 = $[143];
641
- const t55 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
642
- let t56;
643
- if ($[144] !== containerProps || $[145] !== slots.subItem || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32 || $[153] !== t33 || $[154] !== t34 || $[155] !== t35 || $[156] !== t54 || $[157] !== t55) {
644
- t56 = /*#__PURE__*/ jsxs("li", {
639
+ $[142] = t54;
640
+ $[143] = t55;
641
+ } else t55 = $[143];
642
+ const t56 = !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction;
643
+ let t57;
644
+ if ($[144] !== containerProps || $[145] !== slots.subItem || $[146] !== t26 || $[147] !== t27 || $[148] !== t28 || $[149] !== t29 || $[150] !== t30 || $[151] !== t31 || $[152] !== t32 || $[153] !== t33 || $[154] !== t34 || $[155] !== t35 || $[156] !== t55 || $[157] !== t56) {
645
+ t57 = /*#__PURE__*/ jsxs("li", {
645
646
  ...containerProps,
646
647
  ref: t26,
647
648
  "data-component": "ActionList.Item",
@@ -655,8 +656,8 @@ const UnwrappedItem = (t0, forwardedRef) => {
655
656
  "data-trailing-action-loading": t34,
656
657
  className: t35,
657
658
  children: [
658
- t54,
659
659
  t55,
660
+ t56,
660
661
  slots.subItem
661
662
  ]
662
663
  });
@@ -672,21 +673,21 @@ const UnwrappedItem = (t0, forwardedRef) => {
672
673
  $[153] = t33;
673
674
  $[154] = t34;
674
675
  $[155] = t35;
675
- $[156] = t54;
676
- $[157] = t55;
677
- $[158] = t56;
678
- } else t56 = $[158];
679
- let t57;
680
- if ($[159] !== itemContextValue || $[160] !== t56) {
681
- t57 = /*#__PURE__*/ jsx(ItemContext.Provider, {
676
+ $[156] = t55;
677
+ $[157] = t56;
678
+ $[158] = t57;
679
+ } else t57 = $[158];
680
+ let t58;
681
+ if ($[159] !== itemContextValue || $[160] !== t57) {
682
+ t58 = /*#__PURE__*/ jsx(ItemContext.Provider, {
682
683
  value: itemContextValue,
683
- children: t56
684
+ children: t57
684
685
  });
685
686
  $[159] = itemContextValue;
686
- $[160] = t56;
687
- $[161] = t57;
688
- } else t57 = $[161];
689
- return t57;
687
+ $[160] = t57;
688
+ $[161] = t58;
689
+ } else t58 = $[161];
690
+ return t58;
690
691
  };
691
692
  const Item = Object.assign(fixedForwardRef(UnwrappedItem), {
692
693
  displayName: "ActionList.Item",
package/dist/AvatarStack/{AvatarStack-e6a99916.css → AvatarStack-937ec7c1.css} RENAMED
@@ -1,2 +1,2 @@
1
- .prc-AvatarStack-AvatarStack-vkIK2{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:where([data-component=Avatar]){box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,#1f232826)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-JFK4u{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-JFK4u:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-70eW3{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-70eW3:not([data-component=Avatar]):not(:has([data-square])){border-radius:50%}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square][data-align-right]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:first-child{z-index:5}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(2){z-index:4}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(3){z-index:3}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(4){z-index:2}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+6){opacity:0;position:absolute;visibility:hidden}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover{width:auto}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}
2
- /*# sourceMappingURL=AvatarStack-e6a99916.css.map */
1
+ .prc-AvatarStack-AvatarStack-vkIK2{--avatar-border-width:1px;--mask-size:calc(100% + var(--avatar-border-width)*2);--mask-start:-1;--opacity-step:15%;display:flex;height:var(--avatar-stack-size);isolation:isolate;min-width:var(--avatar-stack-size);position:relative}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.85)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=stack]){--overlap-size:calc(var(--avatar-stack-size)*0.55);--overlap-size-avatar-three-plus:calc(var(--avatar-stack-size)*0.55)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-narrow)}}@media screen and (min-width:48rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-regular)}}@media screen and (min-width:87.5rem){.prc-AvatarStack-AvatarStack-vkIK2:where([data-responsive]){--avatar-stack-size:var(--stackSize-wide)}}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:where([data-component=Avatar]){box-shadow:0 0 0 var(--avatar-border-width) var(--avatar-borderColor,#1f232826)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="1"][data-shape=square][data-align-right]) .prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #000}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="2"]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=cascade]){min-width:calc(var(--avatar-stack-size) + var(--avatar-stack-size) - var(--overlap-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-avatar-count="3+"][data-variant=stack]){min-width:calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))*3);--overlap-size:var(--overlap-size-avatar-three-plus)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-align-right]){--mask-start:1;direction:rtl}.prc-AvatarStack-AvatarStackBody-JFK4u{display:flex;position:absolute}.prc-AvatarStack-AvatarStackBody-JFK4u:where([data-disable-expand]){position:relative}.prc-AvatarStack-AvatarItem-70eW3{--avatarSize-regular:var(--avatar-stack-size);display:flex;flex-shrink:0;height:var(--avatar-stack-size);overflow:hidden;position:relative;transition:margin .2s ease-in-out,opacity .2s ease-in-out,mask-position .2s ease-in-out,mask-size .2s ease-in-out;width:var(--avatar-stack-size)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:0 0 0 var(--avatar-border-width) transparent}.prc-AvatarStack-AvatarItem-70eW3:not([data-component=Avatar]):not(:has([data-square])){border-radius:50%}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:1px 0 #fff}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square][data-align-right]) img.prc-AvatarStack-AvatarItem-70eW3{box-shadow:-1px 0 #fff}.prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){margin-inline-start:calc(var(--overlap-size)*-1);mask-composite:exclude;mask-position:calc((var(--avatar-stack-size) - var(--overlap-size))*var(--mask-start) - var(--avatar-border-width)) center,0 0;mask-repeat:no-repeat,no-repeat;mask-size:var(--mask-size) var(--mask-size),auto;padding:.1px}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=circle]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:radial-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-shape=square]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+2){mask-image:linear-gradient(at 50% 50%,#000 70%,transparent 71%),linear-gradient(#000 0 0)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+3){--overlap-size:var(--overlap-size-avatar-three-plus);opacity:calc(100% - var(--opacity-step)*2)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+4){opacity:calc(100% - var(--opacity-step)*3)}.prc-AvatarStack-AvatarStack-vkIK2:where([data-variant=cascade]) .prc-AvatarStack-AvatarItem-70eW3:nth-child(n+5){opacity:calc(100% - var(--opacity-step)*4)}.prc-AvatarStack-AvatarItem-70eW3:first-child{z-index:5}.prc-AvatarStack-AvatarItem-70eW3:nth-child(2){z-index:4}.prc-AvatarStack-AvatarItem-70eW3:nth-child(3){z-index:3}.prc-AvatarStack-AvatarItem-70eW3:nth-child(4){z-index:2}.prc-AvatarStack-AvatarItem-70eW3:nth-child(5){z-index:1}.prc-AvatarStack-AvatarItem-70eW3:nth-child(n+6){opacity:0;position:absolute;visibility:hidden}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within,.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover{width:auto}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3{--mask-size:100%;margin-inline-start:var(--base-size-4,.25rem);mask-position:calc(var(--avatar-stack-size)*var(--mask-start)) center,0 0;opacity:1;position:relative;visibility:visible}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):hover .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}.prc-AvatarStack-AvatarStackBody-JFK4u:not([data-disable-expand]):focus-within .prc-AvatarStack-AvatarItem-70eW3:first-child{margin-inline-start:0}
2
+ /*# sourceMappingURL=AvatarStack-937ec7c1.css.map */
package/dist/AvatarStack/{AvatarStack-e6a99916.css.map → AvatarStack-937ec7c1.css.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css.js"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,sJAEE,+EACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAqHF,CA1GE,mGAEE,uDACF,CAGA,wFACE,iBACF,CAGA,mGAEE,qBACF,CAGA,qHAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GACE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,4GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,6GACE,SACF,CAEA,iDAGE,SAAU,CAFV,iBAAkB,CAClB,iBAEF,CAGF,uJAEE,UAuBF,CArBE,iHACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CApBA,0GACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CAHE,sHACE,qBACF,CAFA,6HACE,qBACF","file":"AvatarStack-e6a99916.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem:where([data-component='Avatar']) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:not([data-component='Avatar']):not(:has([data-square])) {\n border-radius: 50%;\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(255, 255, 255, 1);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(1) {\n z-index: 5;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(2) {\n z-index: 4;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(3) {\n z-index: 3;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(4) {\n z-index: 2;\n }\n\n .AvatarStack:where([data-shape='square']) &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */\n\n position: relative;\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["../src/AvatarStack/AvatarStack.module.css.js"],"names":[],"mappings":"AACA,mCACE,yBAA0B,CAC1B,qDAA0D,CAC1D,eAAgB,CAChB,kBAAmB,CAGnB,YAAa,CAEb,+BAAgC,CAChC,iBAAkB,CAFlB,kCAAmC,CAFnC,iBA2GF,CArGE,iEACE,kDAAqD,CACrD,oEACF,CAEA,+DACE,kDAAqD,CACrD,oEACF,CAGE,mDADF,4DAEI,2CAUJ,CATE,CAEA,oCALF,4DAMI,4CAMJ,CALE,CAEA,sCATF,4DAUI,yCAEJ,CADE,CAIA,sJAEE,+EACF,CAGF,uHAEE,qBACF,CAEA,yIAEE,sBACF,CAEA,kEAME,yFACF,CAEA,wFAOE,4JAIF,CAEA,sFAME,+GACF,CAEA,yFAOE,gKAIF,CAEA,uFAME,+GAAkH,CAElH,oDACF,CAEA,6DACE,cAAe,CAEf,aACF,CAGF,uCAEE,YAAa,CADb,iBAMF,CAHE,oEACE,iBACF,CAGF,kCACE,6CAA8C,CAG9C,YAAa,CAIb,aAAc,CAFd,+BAAgC,CAChC,eAAgB,CAJhB,iBAAkB,CAMlB,iHAI4B,CAR5B,8BAqHF,CA1GE,mGAEE,uDACF,CAGA,wFACE,iBACF,CAGA,mGAEE,qBACF,CAGA,qHAEE,sBACF,CAEA,8CACE,qBACF,CAEA,iDAEE,gDAAmD,CAKnD,sBAAuB,CAQvB,8HAEK,CAdL,+BAAiC,CACjC,gDAEM,CAeN,YACF,CAGA,+GACE,yFACF,CAGA,+GAEE,yFACF,CAGA,kHACE,oDAAqD,CAGrD,0CACF,CAGA,kHAEE,0CACF,CAGA,kHAEE,0CACF,CAEA,8CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,+CACE,SACF,CAEA,iDAGE,SAAU,CAFV,iBAAkB,CAClB,iBAEF,CAGF,uJAEE,UAuBF,CArBE,iHACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CApBA,0GACE,gBAAiB,CAGjB,6CAAuC,CASvC,yEAEK,CATL,SAAU,CAHV,iBAAkB,CAElB,kBAeF,CAHE,sHACE,qBACF,CAFA,6HACE,qBACF","file":"AvatarStack-937ec7c1.css","sourcesContent":["/* stylelint-disable selector-max-specificity */\n.AvatarStack {\n --avatar-border-width: 1px;\n --mask-size: calc(100% + (var(--avatar-border-width) * 2));\n --mask-start: -1;\n --opacity-step: 15%;\n\n position: relative;\n display: flex;\n min-width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n isolation: isolate;\n\n &:where([data-variant='cascade']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.85);\n }\n\n &:where([data-variant='stack']) {\n --overlap-size: calc(var(--avatar-stack-size) * 0.55);\n --overlap-size-avatar-three-plus: calc(var(--avatar-stack-size) * 0.55);\n }\n\n &:where([data-responsive]) {\n @media screen and (--viewportRange-narrow) {\n --avatar-stack-size: var(--stackSize-narrow);\n }\n\n @media screen and (--viewportRange-regular) {\n --avatar-stack-size: var(--stackSize-regular);\n }\n\n @media screen and (--viewportRange-wide) {\n --avatar-stack-size: var(--stackSize-wide);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='circle']) {\n .AvatarItem:where([data-component='Avatar']) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) var(--avatar-borderColor);\n }\n }\n\n &:where([data-avatar-count='1'][data-shape='square']) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='1'][data-shape='square'][data-align-right]) .AvatarItem {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(0, 0, 0, 1);\n }\n\n &:where([data-avatar-count='2']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)));\n }\n\n &:where([data-avatar-count='3'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus))\n );\n }\n\n &:where([data-avatar-count='3'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar & 3rd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 2\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2);\n }\n\n &:where([data-avatar-count='3+'][data-variant='cascade']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n plus the visible part of the 3rd AND 4th avatar ➡️ (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n */\n min-width: calc(\n var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size)) +\n (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 2\n );\n }\n\n &:where([data-avatar-count='3+'][data-variant='stack']) {\n /*\n MIN-WIDTH CALC FORMULA EXPLAINED:\n avatar size ➡️ var(--avatar-stack-size)\n plus the visible part of the 2nd to 4th avatars ➡️ var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus) * 3\n */\n min-width: calc(var(--avatar-stack-size) + (var(--avatar-stack-size) - var(--overlap-size-avatar-three-plus)) * 3);\n\n --overlap-size: var(--overlap-size-avatar-three-plus);\n }\n\n &:where([data-align-right]) {\n --mask-start: 1;\n\n direction: rtl;\n }\n}\n\n.AvatarStackBody {\n position: absolute;\n display: flex;\n\n &:where([data-disable-expand]) {\n position: relative;\n }\n}\n\n.AvatarItem {\n --avatarSize-regular: var(--avatar-stack-size);\n\n position: relative;\n display: flex;\n width: var(--avatar-stack-size);\n height: var(--avatar-stack-size);\n overflow: hidden;\n flex-shrink: 0;\n transition:\n margin 0.2s ease-in-out,\n opacity 0.2s ease-in-out,\n mask-position 0.2s ease-in-out,\n mask-size 0.2s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='circle']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 0 0 var(--avatar-border-width) transparent;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- scoped to CSS Module, audited (github/github-ui#17224) */\n &:not([data-component='Avatar']):not(:has([data-square])) {\n border-radius: 50%;\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square']) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 1px 0 rgb(255, 255, 255, 1);\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .AvatarStack:where([data-shape='square'][data-align-right]) &:is(img) {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: -1px 0 rgb(255, 255, 255, 1);\n }\n\n &:first-child {\n margin-inline-start: 0;\n }\n\n &:nth-child(n + 2) {\n /* stylelint-disable-next-line primer/spacing */\n margin-inline-start: calc(var(--overlap-size) * -1);\n mask-repeat: no-repeat, no-repeat;\n mask-size:\n var(--mask-size) var(--mask-size),\n auto;\n mask-composite: exclude;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the visible part of the avatar ➡️ var(--avatar-stack-size) - var(--overlap-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n subtract the avatar border width ➡️ var(--avatar-border-width)\n */\n mask-position:\n calc((var(--avatar-stack-size) - var(--overlap-size)) * var(--mask-start) - var(--avatar-border-width)) center,\n 0 0;\n\n /* HACK: This padding fixes a weird rendering bug where a tiiiiny outline is visible at the edges of the element */\n /* stylelint-disable-next-line primer/spacing */\n padding: 0.1px;\n }\n\n /* Circular mask */\n .AvatarStack:where([data-shape='circle']) &:nth-child(n + 2) {\n mask-image: radial-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Square mask */\n .AvatarStack:where([data-shape='square']) &:nth-child(n + 2) {\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n mask-image: linear-gradient(at 50% 50%, rgb(0, 0, 0) 70%, rgb(0, 0, 0, 0) 71%), linear-gradient(rgb(0, 0, 0) 0 0);\n }\n\n /* Cascade variant override for nth-child(n + 3) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 3) {\n --overlap-size: var(--overlap-size-avatar-three-plus);\n\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 2 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 4) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 4) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 3 * var(--opacity-step));\n }\n\n /* Cascade variant override for nth-child(n + 5) */\n .AvatarStack:where([data-variant='cascade']) &:nth-child(n + 5) {\n /* stylelint-disable-next-line alpha-value-notation */\n opacity: calc(100% - 4 * var(--opacity-step));\n }\n\n &:nth-child(1) {\n z-index: 5;\n }\n\n &:nth-child(2) {\n z-index: 4;\n }\n\n &:nth-child(3) {\n z-index: 3;\n }\n\n &:nth-child(4) {\n z-index: 2;\n }\n\n &:nth-child(5) {\n z-index: 1;\n }\n\n &:nth-child(n + 6) {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n }\n}\n\n.AvatarStackBody:not([data-disable-expand]):hover,\n.AvatarStackBody:not([data-disable-expand]):focus-within {\n width: auto;\n\n .AvatarItem {\n --mask-size: 100%; /* reset size of the mask to prevent unintentionally clipping due to the additional size created by the border width */\n\n position: relative;\n margin-inline-start: var(--base-size-4);\n visibility: visible;\n opacity: 1;\n\n /*\n HORIZONTAL POSITION CALC FORMULA EXPLAINED:\n width of the full avatar ➡️ var(--avatar-stack-size)\n multiply by -1 for left-aligned, 1 for right-aligned ➡️ var(--mask-start)\n */\n mask-position:\n calc(var(--avatar-stack-size) * var(--mask-start)) center,\n 0 0;\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n}\n"]}
package/dist/AvatarStack/AvatarStack.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./AvatarStack-e6a99916.css";
1
+ import "./AvatarStack-937ec7c1.css";
2
2
  //#region src/AvatarStack/AvatarStack.module.css.js
3
3
  var AvatarStack_module_css_default = {
4
4
  "AvatarStack": "prc-AvatarStack-AvatarStack-vkIK2",
package/dist/FormControl/FormControl.js CHANGED
@@ -8,7 +8,6 @@ import TextInput_default from "../TextInput/TextInput.js";
8
8
  import Autocomplete_default from "../Autocomplete/Autocomplete.js";
9
9
  import ValidationAnimationContainer from "../internal/components/ValidationAnimationContainer.js";
10
10
  import CheckboxOrRadioGroupContext from "../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js";
11
- import { FormControlContextProvider } from "./_FormControlContext.js";
12
11
  import Checkbox from "../Checkbox/Checkbox.js";
13
12
  import Select_default from "../Select/Select.js";
14
13
  import { SelectPanel } from "../SelectPanel/SelectPanel.js";
@@ -18,6 +17,7 @@ import { FormControlCaption } from "./FormControlCaption.js";
18
17
  import FormControlLabel from "./FormControlLabel.js";
19
18
  import FormControlLeadingVisual from "./FormControlLeadingVisual.js";
20
19
  import FormControlValidation from "./_FormControlValidation.js";
20
+ import { FormControlContextProvider } from "./_FormControlContextProvider.js";
21
21
  import FormControl_module_css_default from "./FormControl.module.css.js";
22
22
  import React, { useContext } from "react";
23
23
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
package/dist/FormControl/_FormControlContext.js CHANGED
@@ -2,7 +2,6 @@ import { c } from "../utils/react-compiler-runtime.js";
2
2
  import { createContext, useContext } from "react";
3
3
  //#region src/FormControl/_FormControlContext.tsx
4
4
  const FormControlContext = /*#__PURE__*/ createContext(null);
5
- const FormControlContextProvider = FormControlContext.Provider;
6
5
  /** This is the private/internal interface for subcomponents of `FormControl`. */
7
6
  function useFormControlContext() {
8
7
  var _useContext;
@@ -46,4 +45,4 @@ function useFormControlForwardedProps(externalProps) {
46
45
  return t1;
47
46
  }
48
47
  //#endregion
49
- export { FormControlContextProvider, useFormControlContext, useFormControlForwardedProps };
48
+ export { FormControlContext, useFormControlContext, useFormControlForwardedProps };
package/dist/FormControl/_FormControlContextProvider.js ADDED
@@ -0,0 +1,5 @@
1
+ import { FormControlContext } from "./_FormControlContext.js";
2
+ //#region src/FormControl/_FormControlContextProvider.tsx
3
+ const FormControlContextProvider = FormControlContext.Provider;
4
+ //#endregion
5
+ export { FormControlContextProvider };
package/dist/Truncate/Truncate.d.ts CHANGED
@@ -1,13 +1,18 @@
1
- import { ForwardRefComponent } from "../utils/polymorphic.js";
1
+ import { DistributiveOmit, PolymorphicProps } from "../utils/modern-polymorphic.js";
2
2
  import React from "react";
3
3
 
4
4
  //#region src/Truncate/Truncate.d.ts
5
- type TruncateProps = React.HTMLAttributes<HTMLElement> & {
5
+ type TruncateOwnProps = {
6
6
  title: string;
7
7
  inline?: boolean;
8
8
  expandable?: boolean;
9
9
  maxWidth?: number | string;
10
+ className?: string;
11
+ style?: React.CSSProperties;
10
12
  };
11
- declare const Truncate: ForwardRefComponent<"div", TruncateProps>;
13
+ type TruncateProps<As extends React.ElementType = 'div'> = PolymorphicProps<As, 'div', TruncateOwnProps>;
14
+ declare const _default: <As extends React.ElementType = "div">(props: DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "div" : As> & TruncateOwnProps, "as"> & {
15
+ as?: As | undefined;
16
+ } & React.RefAttributes<any>) => React.ReactNode;
12
17
  //#endregion
13
- export { type TruncateProps, Truncate as default };
18
+ export { TruncateProps, _default as default };
package/dist/Truncate/Truncate.js CHANGED
@@ -1,10 +1,12 @@
1
+ import { fixedForwardRef } from "../utils/modern-polymorphic.js";
1
2
  import Truncate_module_css_default from "./Truncate.module.css.js";
2
- import React from "react";
3
3
  import { jsx } from "react/jsx-runtime";
4
4
  import { clsx } from "clsx";
5
5
  //#region src/Truncate/Truncate.tsx
6
- const Truncate = /*#__PURE__*/ React.forwardRef(function Truncate({ as: Component = "div", children, className, title, inline, expandable, maxWidth = 125, style, ...rest }, ref) {
6
+ function Truncate(props, ref) {
7
+ const { as: Component = "div", children, className, title, inline, expandable, maxWidth = 125, style, ...rest } = props;
7
8
  return /*#__PURE__*/ jsx(Component, {
9
+ ...typeof Component === "string" ? {} : { inline },
8
10
  ...rest,
9
11
  ref,
10
12
  className: clsx(className, Truncate_module_css_default.Truncate),
@@ -17,7 +19,9 @@ const Truncate = /*#__PURE__*/ React.forwardRef(function Truncate({ as: Componen
17
19
  },
18
20
  children
19
21
  });
20
- });
22
+ }
21
23
  Truncate.displayName = "Truncate";
24
+ Truncate.displayName = "Truncate";
25
+ var Truncate_default = fixedForwardRef(Truncate);
22
26
  //#endregion
23
- export { Truncate as default };
27
+ export { Truncate_default as default };
package/dist/Truncate/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- import Truncate, { TruncateProps } from "./Truncate.js";
2
- export { type TruncateProps, Truncate as default };
1
+ import _default, { TruncateProps } from "./Truncate.js";
2
+ export { type TruncateProps, _default as default };
package/dist/UnderlineNav/UnderlineNavItem.js CHANGED
@@ -9,72 +9,80 @@ import { jsx } from "react/jsx-runtime";
9
9
  //#region src/UnderlineNav/UnderlineNavItem.tsx
10
10
  const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
11
11
  var _leadingVisual;
12
- const $ = c(30);
12
+ const $ = c(33);
13
13
  let Icon;
14
14
  let ariaCurrent;
15
15
  let children;
16
16
  let counter;
17
+ let href;
17
18
  let leadingVisual;
18
19
  let onSelect;
19
20
  let props;
20
21
  let t0;
21
- let t1;
22
22
  if ($[0] !== allProps) {
23
- ({as: t0, href: t1, children, counter, onSelect, "aria-current": ariaCurrent, icon: Icon, leadingVisual, ...props} = allProps);
23
+ ({as: t0, href, children, counter, onSelect, "aria-current": ariaCurrent, icon: Icon, leadingVisual, ...props} = allProps);
24
24
  $[0] = allProps;
25
25
  $[1] = Icon;
26
26
  $[2] = ariaCurrent;
27
27
  $[3] = children;
28
28
  $[4] = counter;
29
- $[5] = leadingVisual;
30
- $[6] = onSelect;
31
- $[7] = props;
32
- $[8] = t0;
33
- $[9] = t1;
29
+ $[5] = href;
30
+ $[6] = leadingVisual;
31
+ $[7] = onSelect;
32
+ $[8] = props;
33
+ $[9] = t0;
34
34
  } else {
35
35
  Icon = $[1];
36
36
  ariaCurrent = $[2];
37
37
  children = $[3];
38
38
  counter = $[4];
39
- leadingVisual = $[5];
40
- onSelect = $[6];
41
- props = $[7];
42
- t0 = $[8];
43
- t1 = $[9];
39
+ href = $[5];
40
+ leadingVisual = $[6];
41
+ onSelect = $[7];
42
+ props = $[8];
43
+ t0 = $[9];
44
44
  }
45
45
  const Component = t0 === void 0 ? "a" : t0;
46
- const href = t1 === void 0 ? "#" : t1;
46
+ let t1;
47
+ if ($[10] !== Component || $[11] !== href) {
48
+ var _href;
49
+ t1 = Component === "a" ? { href: (_href = href) !== null && _href !== void 0 ? _href : "#" } : href === void 0 ? {} : { href };
50
+ $[10] = Component;
51
+ $[11] = href;
52
+ $[12] = t1;
53
+ } else t1 = $[12];
54
+ const hrefProps = t1;
47
55
  const ref = useRef(null);
48
56
  const { loadingCounters } = useContext(UnderlineNavContext);
49
57
  const isOverflowing = useIsClipped(ref);
50
58
  UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
51
59
  let t2;
52
- if ($[10] !== onSelect) {
60
+ if ($[13] !== onSelect) {
53
61
  t2 = (event) => {
54
62
  if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
55
63
  };
56
- $[10] = onSelect;
57
- $[11] = t2;
58
- } else t2 = $[11];
64
+ $[13] = onSelect;
65
+ $[14] = t2;
66
+ } else t2 = $[14];
59
67
  const keyDownHandler = t2;
60
68
  let t3;
61
- if ($[12] !== onSelect) {
69
+ if ($[15] !== onSelect) {
62
70
  t3 = (event_0) => {
63
71
  if (!event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
64
72
  };
65
- $[12] = onSelect;
66
- $[13] = t3;
67
- } else t3 = $[13];
73
+ $[15] = onSelect;
74
+ $[16] = t3;
75
+ } else t3 = $[16];
68
76
  const clickHandler = t3;
69
77
  const t4 = isOverflowing ? true : allProps["aria-hidden"];
70
78
  const t5 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
71
79
  const t6 = isOverflowing ? -1 : allProps.tabIndex;
72
80
  let t7;
73
- if ($[14] !== Component || $[15] !== ariaCurrent || $[16] !== children || $[17] !== clickHandler || $[18] !== counter || $[19] !== forwardedRef || $[20] !== href || $[21] !== keyDownHandler || $[22] !== loadingCounters || $[23] !== props || $[24] !== t5 || $[25] !== t6) {
81
+ if ($[17] !== Component || $[18] !== ariaCurrent || $[19] !== children || $[20] !== clickHandler || $[21] !== counter || $[22] !== forwardedRef || $[23] !== hrefProps || $[24] !== keyDownHandler || $[25] !== loadingCounters || $[26] !== props || $[27] !== t5 || $[28] !== t6) {
74
82
  t7 = /*#__PURE__*/ jsx(UnderlineItem, {
75
83
  ref: forwardedRef,
76
84
  as: Component,
77
- href,
85
+ ...hrefProps,
78
86
  "aria-current": ariaCurrent,
79
87
  onKeyDown: keyDownHandler,
80
88
  onClick: clickHandler,
@@ -85,32 +93,32 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
85
93
  tabIndex: t6,
86
94
  children
87
95
  });
88
- $[14] = Component;
89
- $[15] = ariaCurrent;
90
- $[16] = children;
91
- $[17] = clickHandler;
92
- $[18] = counter;
93
- $[19] = forwardedRef;
94
- $[20] = href;
95
- $[21] = keyDownHandler;
96
- $[22] = loadingCounters;
97
- $[23] = props;
98
- $[24] = t5;
99
- $[25] = t6;
100
- $[26] = t7;
101
- } else t7 = $[26];
96
+ $[17] = Component;
97
+ $[18] = ariaCurrent;
98
+ $[19] = children;
99
+ $[20] = clickHandler;
100
+ $[21] = counter;
101
+ $[22] = forwardedRef;
102
+ $[23] = hrefProps;
103
+ $[24] = keyDownHandler;
104
+ $[25] = loadingCounters;
105
+ $[26] = props;
106
+ $[27] = t5;
107
+ $[28] = t6;
108
+ $[29] = t7;
109
+ } else t7 = $[29];
102
110
  let t8;
103
- if ($[27] !== t4 || $[28] !== t7) {
111
+ if ($[30] !== t4 || $[31] !== t7) {
104
112
  t8 = /*#__PURE__*/ jsx("li", {
105
113
  className: UnderlineNavItem_module_css_default.UnderlineNavItem,
106
114
  ref,
107
115
  "aria-hidden": t4,
108
116
  children: t7
109
117
  });
110
- $[27] = t4;
111
- $[28] = t7;
112
- $[29] = t8;
113
- } else t8 = $[29];
118
+ $[30] = t4;
119
+ $[31] = t7;
120
+ $[32] = t8;
121
+ } else t8 = $[32];
114
122
  return t8;
115
123
  });
116
124
  UnderlineNavItem.displayName = "UnderlineNavItem";
package/dist/deprecated/ActionList/Item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { c } from "../../utils/react-compiler-runtime.js";
2
2
  import { useId as useId$1 } from "../../hooks/useId.js";
3
- import Truncate from "../../Truncate/Truncate.js";
3
+ import Truncate_default from "../../Truncate/Truncate.js";
4
4
  import Item_module_css_default from "./Item.module.css.js";
5
5
  import React from "react";
6
6
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -205,7 +205,7 @@ const Item = /*#__PURE__*/ React.forwardRef((itemProps, ref) => {
205
205
  "--description-container-flex-basis": descriptionVariant === "inline" ? 0 : "auto"
206
206
  },
207
207
  className: Item_module_css_default.DescriptionContainer,
208
- children: descriptionVariant === "block" ? description : /*#__PURE__*/ jsx(Truncate, {
208
+ children: descriptionVariant === "block" ? description : /*#__PURE__*/ jsx(Truncate_default, {
209
209
  title: description,
210
210
  inline: true,
211
211
  maxWidth: "100%",
package/dist/index.d.ts CHANGED
@@ -106,7 +106,7 @@ import _default$16, { TextInputWithTokensProps } from "./TextInputWithTokens/Tex
106
106
  import _default$14, { TextProps } from "./Text/Text.js";
107
107
  import _default$18, { TimelineActionsProps, TimelineAvatarProps, TimelineBadgeProps, TimelineBadgeVariant, TimelineBodyProps, TimelineBreakProps, TimelineItemProps, TimelineItemsProps, TimelineProps } from "./Timeline/Timeline.js";
108
108
  import IssueLabelToken, { IssueLabelTokenProps } from "./Token/IssueLabelToken.js";
109
- import Truncate, { TruncateProps } from "./Truncate/Truncate.js";
109
+ import _default$19, { TruncateProps } from "./Truncate/Truncate.js";
110
110
  import _default$3, { CheckboxProps } from "./Checkbox/Checkbox.js";
111
111
  import _default$17, { TextareaProps } from "./Textarea/Textarea.js";
112
112
  import { TreeView, TreeViewErrorDialogProps, TreeViewItemProps, TreeViewProps, TreeViewSubTreeProps, TreeViewVisualProps } from "./TreeView/TreeView.js";
@@ -123,4 +123,4 @@ import { ActionsProps, ChildrenPropTypes, PageHeader, PageHeaderProps, TitleArea
123
123
  import { SkeletonBox, SkeletonBoxProps } from "./Skeleton/SkeletonBox.js";
124
124
  import { ActionMenu, ActionMenuAnchorProps, ActionMenuButtonProps, ActionMenuProps } from "./ActionMenu/ActionMenu.js";
125
125
  import Overlay, { OverlayProps } from "./Overlay/Overlay.js";
126
- export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
126
+ export { ActionBar, type ActionBarProps, ActionList, type ActionListDescriptionProps, type ActionListDividerProps, type ActionListGroupHeadingProps, type ActionListGroupHeadingTrailingActionProps, type ActionListGroupProps, type ActionListItemProps, type ActionListLeadingVisualProps, type ActionListLinkItemProps, type ActionListProps, type ActionListTrailingActionProps, type ActionListTrailingVisualProps, ActionMenu, type ActionMenuAnchorProps, type ActionMenuButtonProps, type ActionMenuProps, AnchoredOverlay, type AnchoredOverlayProps, type AnchoredPositionHookSettings, AriaAlert, type AriaAlertProps, AriaStatus, type AriaStatusProps, _default as Autocomplete, type AutocompleteInputProps, type AutocompleteMenuProps, type AutocompleteOverlayProps, Avatar, type AvatarProps, AvatarStack, type AvatarStackProps, Banner, type BannerProps, BaseStyles, type BaseStylesProps, _default$1 as BranchName, type BranchNameProps, Breadcrumb, type BreadcrumbItemProps, type BreadcrumbProps, _default$2 as Breadcrumbs, type BreadcrumbsItemProps, type BreadcrumbsProps, ButtonComponent as Button, ButtonBase, type ButtonBaseProps, ButtonGroup, type ButtonGroupProps, type ButtonProps, _default$3 as Checkbox, _default$4 as CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, _default$5 as CircleBadge, type CircleBadgeIconProps, type CircleBadgeProps, ConfirmationDialog, type ConfirmationDialogProps, CounterLabel, type CounterLabelProps, type CustomWidthOptions, Details, type DetailsProps, Dialog, type DialogButtonProps, type DialogHeaderProps, type DialogHeight, type DialogProps, type DialogWidth, DragHandle, type DragHandleProps, type FCWithSlotMarker, Flash, type FlashProps, FocusKeys, type FocusTrapHookSettings, type FocusZoneHookSettings, _default$6 as FormControl, type FormControlCaptionProps, type Props as FormControlLabelProps, type FormControlProps, type FormControlValidationProps, _default$7 as Header, type HeaderItemProps, type HeaderLinkProps, type HeaderProps, Heading, type HeadingProps, IconButton, type IconButtonProps, IssueLabelToken, type IssueLabelTokenProps, Label, type LabelColorOptions, LabelGroup, type LabelGroupProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, NavList, type NavListDividerProps, type NavListGroupHeadingProps, type NavListGroupProps, type NavListItemProps, type NavListLeadingVisualProps, type NavListProps, type NavListSubNavProps, type NavListTrailingVisualProps, Overlay, type OverlayProps, PageHeader, type ActionsProps as PageHeaderActionsProps, type ChildrenPropTypes as PageHeaderChildrenPropTypes, type PageHeaderProps, type TitleAreaProps as PageHeaderTitleAreaProps, type TitleProps as PageHeaderTitleProps, PageLayout, type PageLayoutContentProps, type PageLayoutFooterProps, type PageLayoutHeaderProps, type PageLayoutPaneProps, type PageLayoutProps, Pagination, type PaginationProps, type PaneWidth, type PaneWidthValue, _default$8 as Popover, type PopoverContentProps, type PopoverProps, Portal, PortalContext, type PortalProps, ProgressBar, type ProgressBarItemProps, type ProgressBarProps, _default$9 as Radio, _default$10 as RadioGroup, type RadioGroupProps, type RadioProps, RelativeTime, type RelativeTimeProps, type ResponsiveValue, SegmentedControl, type SegmentedControlActionProps, type SegmentedControlButtonProps, type SegmentedControlDividerProps, type SegmentedControlIconButtonProps, type SegmentedControlProps, _default$11 as Select, SelectPanel, type GroupedListProps as SelectPanelGroupedListProps, type ItemInput as SelectPanelItemInput, type FilteredActionListItemProps as SelectPanelItemProps, type SelectPanelProps, type SelectProps, _default$12 as SideNav, type SideNavLinkProps, type SideNavProps, SkeletonBox, type SkeletonBoxProps, type SlotMarker, Spinner, type SpinnerProps, SplitPageLayout, type SplitPageLayoutContentProps, type SplitPageLayoutFooterProps, type SplitPageLayoutHeaderProps, type SplitPageLayoutPaneProps, type SplitPageLayoutProps, Stack, type StackItemProps, type StackProps, StateLabel, type StateLabelProps, _default$13 as SubNav, type SubNavLinkProps, type SubNavLinksProps, type SubNavProps, _default$14 as Text, _default$15 as TextInput, type TextInputActionProps, type TextInputProps, _default$16 as TextInputWithTokens, type TextInputWithTokensProps, type TextProps, _default$17 as Textarea, type TextareaProps, type ThemeColorPaths, ThemeProvider, type ThemeProviderProps, type ThemeShadowPaths, _default$18 as Timeline, type TimelineActionsProps, type TimelineAvatarProps, type TimelineBadgeProps, type TimelineBadgeVariant, type TimelineBodyProps, type TimelineBreakProps, type TimelineItemProps, type TimelineItemsProps, type TimelineProps, ToggleSwitch, type ToggleSwitchProps, Token, type TokenProps, Tooltip, type TooltipProps, type TouchOrMouseEvent, TreeView, type TreeViewErrorDialogProps, type TreeViewItemProps, type TreeViewProps, type TreeViewSubTreeProps, type TreeViewVisualProps, _default$19 as Truncate, type TruncateProps, UnderlineNav, type UnderlineNavItemProps, type UnderlineNavProps, type UsePaneWidthOptions, type UsePaneWidthResult, VisuallyHidden, type VisuallyHiddenProps, type WithSlotMarker, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
package/dist/index.js CHANGED
@@ -47,7 +47,7 @@ import { createComponent } from "./utils/create-component.js";
47
47
  import { asSlot } from "./utils/as-slot.js";
48
48
  import Radio from "./Radio/Radio.js";
49
49
  import Heading from "./Heading/Heading.js";
50
- import Truncate from "./Truncate/Truncate.js";
50
+ import Truncate_default from "./Truncate/Truncate.js";
51
51
  import Link from "./Link/Link.js";
52
52
  import { ActionList } from "./ActionList/index.js";
53
53
  import Overlay from "./Overlay/Overlay.js";
@@ -96,4 +96,4 @@ import { TreeView } from "./TreeView/TreeView.js";
96
96
  import { UnderlineNav } from "./UnderlineNav/index.js";
97
97
  import { ActionBar } from "./ActionBar/index.js";
98
98
  import { PageHeader } from "./PageHeader/PageHeader.js";
99
- export { ActionBar, ActionList, ActionMenu, AnchoredOverlay, AriaAlert, AriaStatus, Autocomplete_default as Autocomplete, Avatar, AvatarStack, Banner, BaseStyles, BranchName_default as BranchName, Breadcrumb, Breadcrumbs_default as Breadcrumbs, ButtonComponent as Button, ButtonBase, ButtonGroup, Checkbox, CheckboxGroup_default as CheckboxGroup, CircleBadge_default as CircleBadge, ConfirmationDialog, CounterLabel, Details, Dialog, DragHandle, Flash, FocusKeys, FormControl_default as FormControl, Header_default as Header, Heading, IconButton, IssueLabelToken, Label_default as Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Pagination_default as Pagination, Popover_default as Popover, Portal_default as Portal, PortalContext, ProgressBar, Radio, RadioGroup_default as RadioGroup, RelativeTime, SegmentedControl, Select_default as Select, SelectPanel, SideNav_default as SideNav, SkeletonBox, Spinner, SplitPageLayout, Stack, StateLabel, SubNav_default as SubNav, Text_default as Text, TextInput_default as TextInput, TextInputWithTokens, Textarea, ThemeProvider, Timeline_default as Timeline, ToggleSwitch, Token, Tooltip, TreeView, Truncate, UnderlineNav, VisuallyHidden, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
99
+ export { ActionBar, ActionList, ActionMenu, AnchoredOverlay, AriaAlert, AriaStatus, Autocomplete_default as Autocomplete, Avatar, AvatarStack, Banner, BaseStyles, BranchName_default as BranchName, Breadcrumb, Breadcrumbs_default as Breadcrumbs, ButtonComponent as Button, ButtonBase, ButtonGroup, Checkbox, CheckboxGroup_default as CheckboxGroup, CircleBadge_default as CircleBadge, ConfirmationDialog, CounterLabel, Details, Dialog, DragHandle, Flash, FocusKeys, FormControl_default as FormControl, Header_default as Header, Heading, IconButton, IssueLabelToken, Label_default as Label, LabelGroup, Link, LinkButton, NavList, Overlay, PageHeader, PageLayout, Pagination_default as Pagination, Popover_default as Popover, Portal_default as Portal, PortalContext, ProgressBar, Radio, RadioGroup_default as RadioGroup, RelativeTime, SegmentedControl, Select_default as Select, SelectPanel, SideNav_default as SideNav, SkeletonBox, Spinner, SplitPageLayout, Stack, StateLabel, SubNav_default as SubNav, Text_default as Text, TextInput_default as TextInput, TextInputWithTokens, Textarea, ThemeProvider, Timeline_default as Timeline, ToggleSwitch, Token, Tooltip, TreeView, Truncate_default as Truncate, UnderlineNav, VisuallyHidden, asSlot, createComponent, defaultPaneWidth, isSlot, registerPortalRoot, theme, useAnchoredPosition, useColorSchemeVar, useConfirm, useDetails, useFocusTrap, useFocusZone, useFormControlForwardedProps, useId, useIsomorphicLayoutEffect, useMergedRefs, useOnEscapePress, useOnOutsideClick, useOpenAndCloseFocus, useOverlay, usePaneWidth, useProvidedRefOrCreate, useRefObjectAsForwardedRef, useResizeObserver, useResponsiveValue, useRovingTabIndex, useSafeTimeout, useSlots, useSyncedState, useTheme };
package/generated/components.json CHANGED
@@ -9115,6 +9115,10 @@
9115
9115
  {
9116
9116
  "id": "components-truncate-features--max-width",
9117
9117
  "code": "() => (\n <Truncate title=\"Some example text with a max width\" maxWidth={200}>\n Some example text with a max width\n </Truncate>\n)"
9118
+ },
9119
+ {
9120
+ "id": "components-truncate-features--as-link",
9121
+ "code": "() => {\n const url =\n 'https://github.com/primer/react/blob/main/packages/react/src/Truncate/Truncate.tsx'\n return (\n <p>\n Mirror:{' '}\n <Truncate as={Link} href={url} title={url} maxWidth={300} inline>\n {url}\n </Truncate>{' '}\n (inline link inside text)\n </p>\n )\n}"
9118
9122
  }
9119
9123
  ],
9120
9124
  "importPath": "@primer/react",
@@ -9235,7 +9239,7 @@
9235
9239
  "name": "href",
9236
9240
  "type": "string",
9237
9241
  "defaultValue": "",
9238
- "description": "The URL that the item navigates to. `href` is passed to the underlying `<a>` element. If 'as' is specified, the component may need different props and 'href' is ignored. (Required prop for the react router is 'to' for example)"
9242
+ "description": "The URL that the item navigates to. Native anchor items default to `href=\"#\"`. When a custom component is supplied with `as`, no default `href` is added; provide the navigation props required by that component, such as `to` for React Router."
9239
9243
  },
9240
9244
  {
9241
9245
  "name": "icon",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.40.1-rc.e1840f86c",
4
+ "version": "38.40.2-rc.39d4b3b97",
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",