@primer/react 38.24.0-rc.c4c5e3e6a → 38.24.0

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 (84) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/ActionBar/ActionBar-e63def3c.css +2 -0
  3. package/dist/ActionBar/ActionBar-e63def3c.css.map +1 -0
  4. package/dist/ActionBar/ActionBar.d.ts +1 -1
  5. package/dist/ActionBar/ActionBar.d.ts.map +1 -1
  6. package/dist/ActionBar/ActionBar.js +298 -384
  7. package/dist/ActionBar/ActionBar.module.css.js +2 -2
  8. package/dist/ActionBar/index.d.ts +1 -1
  9. package/dist/ActionList/Heading.js +17 -16
  10. package/dist/Autocomplete/AutocompleteInput.js +3 -3
  11. package/dist/Autocomplete/AutocompleteOverlay.js +3 -3
  12. package/dist/Blankslate/Blankslate.d.ts.map +1 -1
  13. package/dist/Blankslate/Blankslate.js +6 -0
  14. package/dist/BranchName/BranchName.js +1 -0
  15. package/dist/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
  16. package/dist/Breadcrumbs/Breadcrumbs.js +3 -0
  17. package/dist/Button/ButtonBase.js +3 -3
  18. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  19. package/dist/ButtonGroup/ButtonGroup.js +1 -0
  20. package/dist/Checkbox/Checkbox.d.ts +1 -0
  21. package/dist/Checkbox/Checkbox.d.ts.map +1 -1
  22. package/dist/Checkbox/Checkbox.js +10 -5
  23. package/dist/CheckboxGroup/CheckboxGroup.js +1 -0
  24. package/dist/CircleBadge/CircleBadge.d.ts.map +1 -1
  25. package/dist/CircleBadge/CircleBadge.js +44 -28
  26. package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
  27. package/dist/ConfirmationDialog/ConfirmationDialog.js +1 -0
  28. package/dist/CounterLabel/CounterLabel.d.ts +2 -0
  29. package/dist/CounterLabel/CounterLabel.d.ts.map +1 -1
  30. package/dist/CounterLabel/CounterLabel.js +25 -90
  31. package/dist/DataTable/useTable.d.ts.map +1 -1
  32. package/dist/DataTable/useTable.js +8 -3
  33. package/dist/Details/Details.d.ts +6 -2
  34. package/dist/Details/Details.d.ts.map +1 -1
  35. package/dist/Details/Details.js +30 -23
  36. package/dist/Dialog/Dialog-b7da369a.css +2 -0
  37. package/dist/Dialog/Dialog-b7da369a.css.map +1 -0
  38. package/dist/Dialog/Dialog.d.ts +5 -2
  39. package/dist/Dialog/Dialog.d.ts.map +1 -1
  40. package/dist/Dialog/Dialog.js +34 -11
  41. package/dist/Dialog/Dialog.module.css.js +1 -1
  42. package/dist/Heading/Heading.js +3 -3
  43. package/dist/Hidden/Hidden.d.ts.map +1 -1
  44. package/dist/Hidden/Hidden.js +1 -0
  45. package/dist/InlineMessage/InlineMessage.d.ts.map +1 -1
  46. package/dist/InlineMessage/InlineMessage.js +1 -0
  47. package/dist/KeybindingHint/KeybindingHint.d.ts.map +1 -1
  48. package/dist/KeybindingHint/KeybindingHint.js +1 -0
  49. package/dist/Label/Label.d.ts.map +1 -1
  50. package/dist/Label/Label.js +2 -1
  51. package/dist/LabelGroup/LabelGroup.d.ts.map +1 -1
  52. package/dist/LabelGroup/LabelGroup.js +4 -1
  53. package/dist/Link/Link.js +3 -3
  54. package/dist/Overlay/Overlay.d.ts.map +1 -1
  55. package/dist/Overlay/Overlay.js +20 -19
  56. package/dist/PageLayout/PageLayout.js +5 -5
  57. package/dist/PageLayout/usePaneWidth.d.ts.map +1 -1
  58. package/dist/PageLayout/usePaneWidth.js +12 -6
  59. package/dist/TextInputWithTokens/TextInputWithTokens.js +91 -90
  60. package/dist/Timeline/{Timeline-ad31a7fb.css → Timeline-05decc91.css} +2 -2
  61. package/dist/Timeline/Timeline-05decc91.css.map +1 -0
  62. package/dist/Timeline/Timeline.module.css.js +1 -1
  63. package/dist/deprecated/DialogV1/Dialog.js +10 -9
  64. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts +1 -0
  65. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map +1 -1
  66. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +5 -2
  67. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.d.ts.map +1 -1
  68. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupCaption.js +3 -1
  69. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.d.ts +1 -0
  70. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.d.ts.map +1 -1
  71. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.d.ts.map +1 -1
  72. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.js +3 -1
  73. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.d.ts.map +1 -1
  74. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.js +3 -1
  75. package/dist/internal/components/InputValidation.d.ts +1 -1
  76. package/dist/internal/components/InputValidation.d.ts.map +1 -1
  77. package/dist/internal/components/InputValidation.js +63 -35
  78. package/generated/components.json +2 -2
  79. package/package.json +1 -1
  80. package/dist/ActionBar/ActionBar-a41224b2.css +0 -2
  81. package/dist/ActionBar/ActionBar-a41224b2.css.map +0 -1
  82. package/dist/Dialog/Dialog-f9bb927a.css +0 -2
  83. package/dist/Dialog/Dialog-f9bb927a.css.map +0 -1
  84. package/dist/Timeline/Timeline-ad31a7fb.css.map +0 -1
@@ -114,16 +114,18 @@ function useTable(t0) {
114
114
  }
115
115
  const valueA = get(a, header_1.column.field);
116
116
  const valueB = get(b, header_1.column.field);
117
- if (valueA && valueB) {
117
+ const valueAIsBlank = isBlankValue(valueA);
118
+ const valueBIsBlank = isBlankValue(valueB);
119
+ if (!valueAIsBlank && !valueBIsBlank) {
118
120
  if (state.direction === SortDirection.ASC) {
119
121
  return sortMethod(valueA, valueB);
120
122
  }
121
123
  return sortMethod(valueB, valueA);
122
124
  }
123
- if (valueA) {
125
+ if (!valueAIsBlank) {
124
126
  return -1;
125
127
  }
126
- if (valueB) {
128
+ if (!valueBIsBlank) {
127
129
  return 1;
128
130
  }
129
131
  return 0;
@@ -296,5 +298,8 @@ function get(object, path) {
296
298
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
297
299
  }, object);
298
300
  }
301
+ function isBlankValue(value) {
302
+ return value === null || value === undefined || value === '';
303
+ }
299
304
 
300
305
  export { getGridTemplateFromColumns, useTable, useTableLayout };
@@ -11,9 +11,13 @@ declare namespace Summary {
11
11
  var displayName: string;
12
12
  }
13
13
  export { Summary };
14
- declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>> & {
14
+ declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & {
15
+ 'data-component'?: string;
16
+ } & React.RefAttributes<HTMLDetailsElement>> & {
15
17
  Summary: typeof Summary;
16
18
  };
17
- export type DetailsProps = ComponentPropsWithoutRef<'details'>;
19
+ export type DetailsProps = ComponentPropsWithoutRef<'details'> & {
20
+ 'data-component'?: string;
21
+ };
18
22
  export default Details;
19
23
  //# sourceMappingURL=Details.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,wBAAwB,EAAoB,MAAM,OAAO,CAAA;AAsCxF,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACvD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,CAAA;AAEjF,iBAAS,OAAO,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,CAAC,EAAE,CAAC,qBAOxF;kBAPQ,OAAO;;;AAUhB,OAAO,EAAC,OAAO,EAAC,CAAA;AAEhB,QAAA,MAAM,OAAO;;CAEX,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAA;AAC9D,eAAe,OAAO,CAAA"}
1
+ {"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAY,KAAK,wBAAwB,EAAoB,MAAM,OAAO,CAAA;AA2CxF,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACvD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,CAAA;AAEjF,iBAAS,OAAO,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,CAAC,EAAE,CAAC,qBAOxF;kBAPQ,OAAO;;;AAUhB,OAAO,EAAC,OAAO,EAAC,CAAA;AAEhB,QAAA,MAAM,OAAO;uBAKQ,MAAM;;;CAHzB,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,GAAG;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AACD,eAAe,OAAO,CAAA"}
@@ -9,30 +9,35 @@ import { jsx } from 'react/jsx-runtime';
9
9
  const Root = /*#__PURE__*/React.forwardRef(
10
10
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
11
11
  (t0, forwardRef) => {
12
- const $ = c(13);
12
+ var _dataComponent;
13
+ const $ = c(15);
13
14
  let children;
14
15
  let className;
16
+ let dataComponent;
15
17
  let rest;
16
18
  if ($[0] !== t0) {
17
19
  ({
18
20
  className,
19
21
  children,
22
+ "data-component": dataComponent,
20
23
  ...rest
21
24
  } = t0);
22
25
  $[0] = t0;
23
26
  $[1] = children;
24
27
  $[2] = className;
25
- $[3] = rest;
28
+ $[3] = dataComponent;
29
+ $[4] = rest;
26
30
  } else {
27
31
  children = $[1];
28
32
  className = $[2];
29
- rest = $[3];
33
+ dataComponent = $[3];
34
+ rest = $[4];
30
35
  }
31
36
  const detailsRef = React.useRef(null);
32
37
  const ref = useMergedRefs(forwardRef, detailsRef);
33
38
  let t1;
34
39
  let t2;
35
- if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
40
+ if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
36
41
  t1 = () => {
37
42
  if (!(process.env.NODE_ENV !== "production")) {
38
43
  return;
@@ -47,39 +52,41 @@ const Root = /*#__PURE__*/React.forwardRef(
47
52
  process.env.NODE_ENV !== "production" ? warning(summary === null, "The <Details> component must have a <summary> child component. You can either use <Details.Summary> or a native <summary> element.") : void 0;
48
53
  };
49
54
  t2 = [];
50
- $[4] = t1;
51
- $[5] = t2;
55
+ $[5] = t1;
56
+ $[6] = t2;
52
57
  } else {
53
- t1 = $[4];
54
- t2 = $[5];
58
+ t1 = $[5];
59
+ t2 = $[6];
55
60
  }
56
61
  useEffect(t1, t2);
57
62
  let t3;
58
- if ($[6] !== className) {
63
+ if ($[7] !== className) {
59
64
  t3 = clsx(className, classes.Details);
60
- $[6] = className;
61
- $[7] = t3;
65
+ $[7] = className;
66
+ $[8] = t3;
62
67
  } else {
63
- t3 = $[7];
68
+ t3 = $[8];
64
69
  }
65
- let t4;
66
- if ($[8] !== children || $[9] !== ref || $[10] !== rest || $[11] !== t3) {
67
- t4 = /*#__PURE__*/jsx("details", {
70
+ const t4 = (_dataComponent = dataComponent) !== null && _dataComponent !== void 0 ? _dataComponent : "Details";
71
+ let t5;
72
+ if ($[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t3 || $[13] !== t4) {
73
+ t5 = /*#__PURE__*/jsx("details", {
68
74
  className: t3,
69
75
  ...rest,
70
76
  ref: ref,
71
- "data-component": "Details",
77
+ "data-component": t4,
72
78
  children: children
73
79
  });
74
- $[8] = children;
75
- $[9] = ref;
76
- $[10] = rest;
77
- $[11] = t3;
78
- $[12] = t4;
80
+ $[9] = children;
81
+ $[10] = ref;
82
+ $[11] = rest;
83
+ $[12] = t3;
84
+ $[13] = t4;
85
+ $[14] = t5;
79
86
  } else {
80
- t4 = $[12];
87
+ t5 = $[14];
81
88
  }
82
- return t4;
89
+ return t5;
83
90
  });
84
91
  Root.displayName = 'Details';
85
92
  function Summary(t0) {
@@ -0,0 +1,2 @@
1
+ @property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
2
+ /*# sourceMappingURL=Dialog-b7da369a.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","file":"Dialog-b7da369a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n from,\n to {\n --can-scroll: 1;\n }\n}\n\n.Backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n background-color: var(--overlay-backdrop-bgColor);\n animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n align-items: center;\n justify-content: center;\n\n &[data-position-regular='center'] {\n align-items: center;\n justify-content: center;\n }\n\n &[data-position-regular='left'] {\n align-items: center;\n justify-content: flex-start;\n }\n\n &[data-position-regular='right'] {\n align-items: center;\n justify-content: flex-end;\n }\n\n /* align only applies when regular position is center (or absent).\n * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n * always win when data-position-narrow is bottom or fullscreen. */\n &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n align-items: center;\n justify-content: center;\n\n /* align still applies when narrow position is center */\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n &[data-position-narrow='bottom'] {\n align-items: end;\n justify-content: center;\n }\n }\n}\n\n.Dialog {\n display: flex;\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n min-width: 296px;\n max-width: calc(100dvw - 64px);\n height: auto;\n max-height: calc(100dvh - 64px);\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n &[data-position-regular='center'] {\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n /* align margins only apply when regular position is center */\n &[data-align='top'] {\n margin-top: var(--base-size-64);\n }\n\n &[data-align='bottom'] {\n margin-bottom: var(--base-size-64);\n }\n }\n\n &[data-position-regular='left'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-regular='right'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n height: auto;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n }\n\n @media (max-height: 280px) {\n max-height: calc(100dvh - 12px);\n max-width: calc(100dvw - 12px);\n }\n\n &[data-position-narrow='bottom'] {\n width: 100dvw;\n max-width: 100dvw;\n height: auto;\n max-height: calc(100dvh - 64px);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n /* reset align margins since position wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-narrow='fullscreen'] {\n width: 100%;\n max-width: 100dvw;\n height: 100%;\n max-height: 100dvh;\n border-radius: unset !important;\n flex-grow: 1;\n\n /* reset align margins since fullscreen wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--prc-dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n --can-scroll: 0;\n\n .DialogOverflowWrapper {\n /* If the browser does not support the `animation-timeline` property, always show a border */\n border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n animation: detect-scroll;\n animation-timeline: scroll(self);\n\n @supports (animation-timeline: scroll(self)) {\n border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n }\n }\n}\n\n.Header {\n z-index: 1;\n max-height: 35vh;\n padding: var(--base-size-8);\n overflow-y: auto;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n flex-shrink: 0;\n}\n\n.HeaderInner {\n display: flex;\n}\n\n.HeaderContent {\n display: flex;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Title {\n margin: 0; /* override default margin */\n font-size: var(--text-body-size-medium);\n font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n margin: 0; /* override default margin */\n margin-top: var(--base-size-4);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n}\n\n.Body {\n padding: var(--base-size-16);\n overflow: auto;\n flex-grow: 1;\n}\n\n.Footer {\n z-index: 1;\n display: flex;\n flex-flow: wrap;\n justify-content: flex-end;\n padding: var(--base-size-16);\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n flex-wrap: nowrap;\n overflow-x: scroll;\n flex-direction: row;\n justify-content: unset;\n}\n"]}
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { type CSSProperties } from 'react';
2
2
  import type { ButtonProps } from '../Button';
3
3
  import type { ResponsiveValue } from '../hooks/useResponsiveValue';
4
4
  import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
@@ -30,6 +30,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
30
30
  * Props to customize the rendering of the Dialog.
31
31
  */
32
32
  export interface DialogProps {
33
+ 'data-component'?: string;
33
34
  /**
34
35
  * Title of the Dialog. Also serves as the aria-label for this Dialog.
35
36
  */
@@ -87,6 +88,8 @@ export interface DialogProps {
87
88
  * medium: 320px
88
89
  * large: 480px
89
90
  * xlarge: 640px
91
+ *
92
+ * Also accepts any valid CSS width value (e.g. '400px', '80rem').
90
93
  */
91
94
  width?: DialogWidth;
92
95
  /**
@@ -151,7 +154,7 @@ declare const widthMap: {
151
154
  readonly large: "480px";
152
155
  readonly xlarge: "640px";
153
156
  };
154
- export type DialogWidth = keyof typeof widthMap;
157
+ export type DialogWidth = keyof typeof widthMap | Exclude<CSSProperties['width'], undefined>;
155
158
  export type DialogHeight = keyof typeof heightMap;
156
159
  export declare const DialogContext: React.Context<object | undefined>;
157
160
  export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2C,KAAK,aAAa,EAAsB,MAAM,OAAO,CAAA;AAC9G,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAU1C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAChE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAgB/F;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7D;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAExD;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAA;CAChD,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAElF;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAA;IAE1E;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAA;IAE5E;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAEnC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,QAAQ,KAAK,IAAI,CAAA;IAErD;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAA;IAE/B;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC,CAAA;IAE/G;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAEnC;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAEpD;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAGD,QAAA,MAAM,SAAS;;;;CAIL,CAAA;AAEV,QAAA,MAAM,QAAQ;;;;;CAKJ,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,CAAA;AAC5F,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,SAAS,CAAA;AAsDjD,eAAO,MAAM,aAAa,mCAAqD,CAAA;AA+R/E,eAAO,MAAM,MAAM;;;;;;;;;;iBA1EuC,iBAAiB,EAAE;;;iBAoCf,MAAM,IAAI;;CA+CtE,CAAA"}
@@ -6,18 +6,26 @@ import { XIcon } from '@primer/octicons-react';
6
6
  import { useFocusZone } from '../hooks/useFocusZone.js';
7
7
  import { FocusKeys } from '@primer/behaviors';
8
8
  import { Portal } from '../Portal/Portal.js';
9
- import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
10
9
  import { useId } from '../hooks/useId.js';
11
10
  import classes from './Dialog.module.css.js';
12
11
  import { clsx } from 'clsx';
13
12
  import { useSlots } from '../hooks/useSlots.js';
14
13
  import { useResizeObserver } from '../hooks/useResizeObserver.js';
15
14
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
15
+ import { useMergedRefs } from '../hooks/useMergedRefs.js';
16
16
  import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
17
17
  import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
18
18
  import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
19
19
 
20
20
  let dialogScrollDisabledCount = 0;
21
+ const widthMap = {
22
+ small: '296px',
23
+ medium: '320px',
24
+ large: '480px',
25
+ xlarge: '640px'
26
+ };
27
+ const isWidthMapKey = width => typeof width === 'string' && Object.hasOwn(widthMap, width);
28
+ const normalizeWidth = width => typeof width === 'number' ? `${width}px` : width;
21
29
  const DefaultHeader = ({
22
30
  dialogLabelId,
23
31
  title,
@@ -85,6 +93,7 @@ const DIALOG_CONTEXT_VALUE = Object.freeze({});
85
93
  const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
86
94
  var _slots$header, _slots$body, _slots$footer;
87
95
  const {
96
+ 'data-component': dataComponentProp,
88
97
  title = 'Dialog',
89
98
  subtitle = '',
90
99
  renderHeader,
@@ -132,7 +141,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
132
141
  footer: Dialog.Footer
133
142
  });
134
143
  const dialogRef = useRef(null);
135
- useRefObjectAsForwardedRef(forwardedRef, dialogRef);
144
+ const mergedDialogRef = useMergedRefs(forwardedRef, dialogRef);
136
145
  const backdropRef = useRef(null);
137
146
  useFocusTrap({
138
147
  containerRef: dialogRef,
@@ -192,6 +201,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
192
201
  } : Object.fromEntries(Object.entries(position).map(([key, value]) => {
193
202
  return [`data-position-${key}`, value];
194
203
  }));
204
+ const dataComponent = dataComponentProp !== null && dataComponentProp !== void 0 ? dataComponentProp : 'Dialog';
195
205
  return /*#__PURE__*/jsx(DialogContext.Provider, {
196
206
  value: DIALOG_CONTEXT_VALUE,
197
207
  children: /*#__PURE__*/jsx(Portal, {
@@ -207,7 +217,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
207
217
  setLastMouseDownIsBackdrop(e.target === e.currentTarget);
208
218
  },
209
219
  children: /*#__PURE__*/jsxs("div", {
210
- ref: dialogRef,
220
+ ref: mergedDialogRef,
211
221
  role: role,
212
222
  "aria-labelledby": dialogLabelId,
213
223
  "aria-describedby": dialogDescriptionId,
@@ -216,12 +226,18 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
216
226
  ...(align && {
217
227
  'data-align': align
218
228
  }),
219
- "data-width": width,
229
+ "data-width": isWidthMapKey(width) ? width : undefined,
220
230
  "data-height": height,
221
231
  "data-has-footer": hasFooter ? '' : undefined,
222
232
  "data-footer-button-layout": hasFooter ? footerButtonLayout : undefined,
223
233
  className: clsx(className, classes.Dialog),
224
- style: style,
234
+ style: {
235
+ ...style,
236
+ ...(!isWidthMapKey(width) ? {
237
+ '--dialog-width': normalizeWidth(width)
238
+ } : {})
239
+ },
240
+ "data-component": dataComponent,
225
241
  children: [header, /*#__PURE__*/jsx(ScrollableRegion, {
226
242
  "aria-labelledby": dialogLabelId,
227
243
  className: classes.DialogOverflowWrapper,
@@ -240,7 +256,8 @@ const Header = /*#__PURE__*/React.forwardRef(function Header({
240
256
  return /*#__PURE__*/jsx("div", {
241
257
  ref: forwardRef,
242
258
  className: clsx(className, classes.Header),
243
- ...rest
259
+ ...rest,
260
+ "data-component": "Dialog.Header"
244
261
  });
245
262
  });
246
263
  Header.displayName = 'Dialog.Header';
@@ -251,7 +268,8 @@ const Title = /*#__PURE__*/React.forwardRef(function Title({
251
268
  return /*#__PURE__*/jsx("h1", {
252
269
  ref: forwardRef,
253
270
  className: clsx(className, classes.Title),
254
- ...rest
271
+ ...rest,
272
+ "data-component": "Dialog.Title"
255
273
  });
256
274
  });
257
275
  Title.displayName = 'Dialog.Title';
@@ -262,7 +280,8 @@ const Subtitle = /*#__PURE__*/React.forwardRef(function Subtitle({
262
280
  return /*#__PURE__*/jsx("h2", {
263
281
  ref: forwardRef,
264
282
  className: clsx(className, classes.Subtitle),
265
- ...rest
283
+ ...rest,
284
+ "data-component": "Dialog.Subtitle"
266
285
  });
267
286
  });
268
287
  Subtitle.displayName = 'Dialog.Subtitle';
@@ -273,7 +292,8 @@ const Body = /*#__PURE__*/React.forwardRef(function Body({
273
292
  return /*#__PURE__*/jsx("div", {
274
293
  ref: forwardRef,
275
294
  className: clsx(className, classes.Body),
276
- ...rest
295
+ ...rest,
296
+ "data-component": "Dialog.Body"
277
297
  });
278
298
  });
279
299
  Body.displayName = 'Dialog.Body';
@@ -284,7 +304,8 @@ const Footer = /*#__PURE__*/React.forwardRef(function Footer({
284
304
  return /*#__PURE__*/jsx("div", {
285
305
  ref: forwardRef,
286
306
  className: clsx(className, classes.Footer),
287
- ...rest
307
+ ...rest,
308
+ "data-component": "Dialog.Footer"
288
309
  });
289
310
  });
290
311
  Footer.displayName = 'Dialog.Footer';
@@ -314,6 +335,7 @@ const Buttons = ({
314
335
  ...buttonProps
315
336
  } = dialogButtonProps;
316
337
  return /*#__PURE__*/jsx(ButtonComponent, {
338
+ "data-component": "Dialog.FooterButton",
317
339
  ...buttonProps,
318
340
  // 'normal' value is equivalent to 'default', this is used for backwards compatibility
319
341
  variant: buttonType === 'normal' ? 'default' : buttonType
@@ -332,7 +354,8 @@ const CloseButton = ({
332
354
  icon: XIcon,
333
355
  "aria-label": "Close",
334
356
  onClick: onClose,
335
- variant: "invisible"
357
+ variant: "invisible",
358
+ "data-component": "Dialog.CloseButton"
336
359
  });
337
360
  };
338
361
  CloseButton.displayName = "CloseButton";
@@ -1,4 +1,4 @@
1
- import './Dialog-f9bb927a.css';
1
+ import './Dialog-b7da369a.css';
2
2
 
3
3
  var classes = {"Backdrop":"prc-Dialog-Backdrop-5Nt2U","dialog-backdrop-appear":"prc-Dialog-dialog-backdrop-appear-tCG2K","Dialog":"prc-Dialog-Dialog-G8cDF","Overlay--motion-scaleFade":"prc-Dialog-Overlay--motion-scaleFade-mE6-C","Overlay--motion-slideInRight":"prc-Dialog-Overlay--motion-slideInRight-BR-CZ","Overlay--motion-slideInLeft":"prc-Dialog-Overlay--motion-slideInLeft-ISmQZ","Overlay--motion-slideUp":"prc-Dialog-Overlay--motion-slideUp-tPElO","DialogOverflowWrapper":"prc-Dialog-DialogOverflowWrapper-JvHzz","detect-scroll":"prc-Dialog-detect-scroll-b3i8Q","Header":"prc-Dialog-Header-f7Me-","HeaderInner":"prc-Dialog-HeaderInner-H-fFY","HeaderContent":"prc-Dialog-HeaderContent-mjAsn","Title":"prc-Dialog-Title-M-iPn","Subtitle":"prc-Dialog-Subtitle-aBFSq","Body":"prc-Dialog-Body-bB903","Footer":"prc-Dialog-Footer-PMeQk"};
4
4
 
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
2
2
  import React, { forwardRef, useEffect } from 'react';
3
3
  import classes from './Heading.module.css.js';
4
4
  import { jsx } from 'react/jsx-runtime';
5
- import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
5
+ import { useMergedRefs } from '../hooks/useMergedRefs.js';
6
6
 
7
7
  const Heading = /*#__PURE__*/forwardRef(({
8
8
  as: Component = 'h2',
@@ -11,7 +11,7 @@ const Heading = /*#__PURE__*/forwardRef(({
11
11
  ...props
12
12
  }, forwardedRef) => {
13
13
  const innerRef = React.useRef(null);
14
- useRefObjectAsForwardedRef(forwardedRef, innerRef);
14
+ const mergedRef = useMergedRefs(forwardedRef, innerRef);
15
15
  if (process.env.NODE_ENV !== "production") {
16
16
  /**
17
17
  * The Linter yells because it thinks this conditionally calls an effect,
@@ -32,7 +32,7 @@ const Heading = /*#__PURE__*/forwardRef(({
32
32
  "data-variant": variant,
33
33
  "data-component": "Heading",
34
34
  ...props,
35
- ref: innerRef
35
+ ref: mergedRef
36
36
  });
37
37
  });
38
38
  Heading.displayName = 'Heading';
@@ -1 +1 @@
1
- {"version":3,"file":"Hidden.d.ts","sourceRoot":"","sources":["../../src/Hidden/Hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAKxC,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAuBD,eAAO,MAAM,MAAM;2CAAwC,WAAW;;CAkBrE,CAAA"}
1
+ {"version":3,"file":"Hidden.d.ts","sourceRoot":"","sources":["../../src/Hidden/Hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAKxC,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAuBD,eAAO,MAAM,MAAM;2CAAwC,WAAW;;CAmBrE,CAAA"}
@@ -65,6 +65,7 @@ const Hidden = t0 => {
65
65
  t7 = /*#__PURE__*/jsx("div", {
66
66
  className: t1,
67
67
  style: t6,
68
+ "data-component": "Hidden",
68
69
  children: children
69
70
  });
70
71
  $[7] = children;
@@ -1 +1 @@
1
- {"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;CACpD,CAAA;AAgBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,aAAa,EAAE,aAAa,EAC5B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAoBpB"}
1
+ {"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;CACpD,CAAA;AAgBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,aAAa,EAAE,aAAa,EAC5B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA0BpB"}
@@ -105,6 +105,7 @@ function InlineMessage(t0) {
105
105
  className: t2,
106
106
  "data-size": size,
107
107
  "data-variant": variant,
108
+ "data-component": "InlineMessage",
108
109
  children: [icon, children]
109
110
  });
110
111
  $[11] = children;
@@ -1 +1 @@
1
- {"version":3,"file":"KeybindingHint.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/KeybindingHint.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAehD,yDAAyD;AAEzD,eAAO,MAAM,cAAc,gEAAgC,mBAAmB,iCAI5E,CAAA;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,iCAAiC,gDAA2B,CAAA"}
1
+ {"version":3,"file":"KeybindingHint.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/KeybindingHint.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAoBhD,yDAAyD;AAEzD,eAAO,MAAM,cAAc,gEAAgC,mBAAmB,iCAI5E,CAAA;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,iCAAiC,gDAA2B,CAAA"}
@@ -26,6 +26,7 @@ const Kbd = t0 => {
26
26
  as: "kbd",
27
27
  className: t1,
28
28
  "data-testid": "keybinding-hint",
29
+ "data-component": "KeybindingHint",
29
30
  children: children
30
31
  });
31
32
  $[2] = children;
@@ -1 +1 @@
1
- {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,QAAA,MAAM,KAAK,EAOL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}
1
+ {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,QAAA,MAAM,KAAK,EAcL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}
@@ -50,7 +50,8 @@ const Label = /*#__PURE__*/React.forwardRef(function Label(t0, ref) {
50
50
  "data-size": size,
51
51
  "data-variant": variant,
52
52
  ref: ref,
53
- ...rest
53
+ ...rest,
54
+ "data-component": "Label"
54
55
  });
55
56
  $[8] = Component;
56
57
  $[9] = ref;
@@ -1 +1 @@
1
- {"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6FD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA6OlE,CAAA;AAID,eAAe,UAAU,CAAA"}
1
+ {"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6FD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAmPlE,CAAA;AAID,eAAe,UAAU,CAAA"}
@@ -296,7 +296,7 @@ const LabelGroup = ({
296
296
  }
297
297
  }, [overflowStyle, isOverflowShown]);
298
298
  const isList = Component === 'ul' || Component === 'ol';
299
- const ToggleWrapper = isList ? 'li' : React.Fragment;
299
+ const ToggleWrapper = isList ? 'li' : 'span';
300
300
  const ItemWrapperComponent = isList ? 'li' : 'span';
301
301
 
302
302
  // If truncation is enabled, we need to render based on truncation logic.
@@ -305,6 +305,7 @@ const LabelGroup = ({
305
305
  "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
306
306
  "data-list": isList || undefined,
307
307
  className: clsx(className, classes.Container),
308
+ "data-component": "LabelGroup",
308
309
  children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapperComponent
309
310
  // data-index is used as an identifier we can use in the IntersectionObserver
310
311
  , {
@@ -314,6 +315,7 @@ const LabelGroup = ({
314
315
  }),
315
316
  children: child_0
316
317
  }, index)), /*#__PURE__*/jsx(ToggleWrapper, {
318
+ "data-component": "LabelGroup.Toggle",
317
319
  children: overflowStyle === 'inline' ? /*#__PURE__*/jsx(InlineToggle, {
318
320
  collapseButtonRef: collapseButtonRef,
319
321
  collapseInlineExpandedChildren: collapseInlineExpandedChildren,
@@ -338,6 +340,7 @@ const LabelGroup = ({
338
340
  "data-overflow": "inline",
339
341
  "data-list": isList || undefined,
340
342
  className: clsx(className, classes.Container),
343
+ "data-component": "LabelGroup",
341
344
  children: isList ? React.Children.map(children, (child_1, index_0) => {
342
345
  return /*#__PURE__*/jsx("li", {
343
346
  children: child_1
package/dist/Link/Link.js CHANGED
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
3
3
  import classes from './Link.module.css.js';
4
4
  import { fixedForwardRef } from '../utils/modern-polymorphic.js';
5
5
  import { jsx } from 'react/jsx-runtime';
6
- import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
6
+ import { useMergedRefs } from '../hooks/useMergedRefs.js';
7
7
 
8
8
  const UnwrappedLink = (props, ref) => {
9
9
  const {
@@ -15,7 +15,7 @@ const UnwrappedLink = (props, ref) => {
15
15
  ...restProps
16
16
  } = props;
17
17
  const innerRef = React.useRef(null);
18
- useRefObjectAsForwardedRef(ref, innerRef);
18
+ const mergedRef = useMergedRefs(ref, innerRef);
19
19
  if (process.env.NODE_ENV !== "production") {
20
20
  /**
21
21
  * The Linter yells because it thinks this conditionally calls an effect,
@@ -39,7 +39,7 @@ const UnwrappedLink = (props, ref) => {
39
39
  "data-hover-color": hoverColor,
40
40
  ...restProps,
41
41
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
42
- ref: innerRef
42
+ ref: mergedRef
43
43
  });
44
44
  };
45
45
  UnwrappedLink.displayName = "UnwrappedLink";
@@ -1 +1 @@
1
- {"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}