@primer/react 38.19.0-rc.f678a3d2b → 38.19.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.
package/CHANGELOG.md CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  - [#7707](https://github.com/primer/react/pull/7707) [`6431bfe`](https://github.com/primer/react/commit/6431bfecd72e24db1dfa90b02f8a42834e63843b) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fix anchor-name not being set on the anchor element when SelectPanel is opened in Copilot code agent.
16
16
 
17
- - [#7638](https://github.com/primer/react/pull/7638) [`f04e85d`](https://github.com/primer/react/commit/f04e85df536cd6e8047f70b070bd3cf7c0961f92) Thanks [@iansan5653](https://github.com/iansan5653)! - Update internal implementations of combined refs to improve performance and add support for React 19 callback refs
17
+ - [#7633](https://github.com/primer/react/pull/7633) [`a107d39`](https://github.com/primer/react/commit/a107d398e0574b5f8085485c96b27a168061eb50) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Graduate `primer_react_css_has_selector_perf` feature flag: the CSS `:has()` performance optimization (`body[data-dialog-scroll-disabled]`) is now the default behavior for Dialog scroll disabling
18
18
 
19
19
  - [#7695](https://github.com/primer/react/pull/7695) [`780fc3d`](https://github.com/primer/react/commit/780fc3d7b52fd0f9b63f313af6355398180a0118) Thanks [@mattcosta7](https://github.com/mattcosta7)! - perf(ThemeProvider): Reduce unnecessary renders and effect cascades
20
20
 
@@ -10,7 +10,7 @@ import styles from './ActionBar.module.css.js';
10
10
  import { clsx } from 'clsx';
11
11
  import { createDescendantRegistry } from '../utils/descendant-registry.js';
12
12
  import { jsxs, jsx } from 'react/jsx-runtime';
13
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
13
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
14
14
  import { FocusKeys } from '@primer/behaviors';
15
15
  import { ActionMenu } from '../ActionMenu/ActionMenu.js';
16
16
 
@@ -423,7 +423,7 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
423
423
  ...props
424
424
  }, forwardedRef) => {
425
425
  const ref = useRef(null);
426
- const mergedRef = useMergedRefs(ref, forwardedRef);
426
+ useRefObjectAsForwardedRef(forwardedRef, ref);
427
427
  const {
428
428
  size,
429
429
  isVisibleChild
@@ -453,7 +453,7 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
453
453
  if (!isVisibleChild(id) || groupId && !isVisibleChild(groupId)) return null;
454
454
  return /*#__PURE__*/jsx(IconButton, {
455
455
  "aria-disabled": disabled,
456
- ref: mergedRef,
456
+ ref: ref,
457
457
  size: size,
458
458
  onClick: clickHandler,
459
459
  ...props,
@@ -7,12 +7,12 @@ import { invariant } from '../utils/invariant.js';
7
7
  import { clsx } from 'clsx';
8
8
  import classes from './Heading.module.css.js';
9
9
  import { jsx } from 'react/jsx-runtime';
10
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
10
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
11
11
  import Heading$1 from '../Heading/Heading.js';
12
12
 
13
13
  const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
14
14
  var _props$id;
15
- const $ = c(21);
15
+ const $ = c(20);
16
16
  let as;
17
17
  let children;
18
18
  let className;
@@ -45,7 +45,7 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
45
45
  }
46
46
  const visuallyHidden = t1 === undefined ? false : t1;
47
47
  const innerRef = React.useRef(null);
48
- const mergedRef = useMergedRefs(forwardedRef, innerRef);
48
+ useRefObjectAsForwardedRef(forwardedRef, innerRef);
49
49
  const {
50
50
  headingId,
51
51
  variant: listVariant
@@ -65,11 +65,11 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
65
65
  t4 = $[8];
66
66
  }
67
67
  let t5;
68
- if ($[9] !== as || $[10] !== children || $[11] !== listVariant || $[12] !== mergedRef || $[13] !== props || $[14] !== size || $[15] !== t3 || $[16] !== t4) {
68
+ if ($[9] !== as || $[10] !== children || $[11] !== listVariant || $[12] !== props || $[13] !== size || $[14] !== t3 || $[15] !== t4) {
69
69
  t5 = /*#__PURE__*/jsx(Heading$1, {
70
70
  as: as,
71
71
  variant: size,
72
- ref: mergedRef,
72
+ ref: innerRef,
73
73
  id: t3,
74
74
  className: t4,
75
75
  "data-list-variant": listVariant,
@@ -79,26 +79,25 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
79
79
  $[9] = as;
80
80
  $[10] = children;
81
81
  $[11] = listVariant;
82
- $[12] = mergedRef;
83
- $[13] = props;
84
- $[14] = size;
85
- $[15] = t3;
86
- $[16] = t4;
87
- $[17] = t5;
82
+ $[12] = props;
83
+ $[13] = size;
84
+ $[14] = t3;
85
+ $[15] = t4;
86
+ $[16] = t5;
88
87
  } else {
89
- t5 = $[17];
88
+ t5 = $[16];
90
89
  }
91
90
  let t6;
92
- if ($[18] !== t2 || $[19] !== t5) {
91
+ if ($[17] !== t2 || $[18] !== t5) {
93
92
  t6 = /*#__PURE__*/jsx(VisuallyHidden, {
94
93
  isVisible: t2,
95
94
  children: t5
96
95
  });
97
- $[18] = t2;
98
- $[19] = t5;
99
- $[20] = t6;
96
+ $[17] = t2;
97
+ $[18] = t5;
98
+ $[19] = t6;
100
99
  } else {
101
- t6 = $[20];
100
+ t6 = $[19];
102
101
  }
103
102
  return t6;
104
103
  });
@@ -1,6 +1,6 @@
1
1
  import React, { useContext, useState, useCallback, useEffect } from 'react';
2
2
  import { AutocompleteContext, AutocompleteInputContext } from './AutocompleteContext.js';
3
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
3
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
4
4
  import useSafeTimeout from '../hooks/useSafeTimeout.js';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
  import TextInput from '../TextInput/TextInput.js';
@@ -36,7 +36,7 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
36
36
  inputValue = '',
37
37
  isMenuDirectlyActivated
38
38
  } = inputContext;
39
- const mergedRef = useMergedRefs(forwardedRef, inputRef);
39
+ useRefObjectAsForwardedRef(forwardedRef, inputRef);
40
40
  const [highlightRemainingText, setHighlightRemainingText] = useState(true);
41
41
  const {
42
42
  safeSetTimeout
@@ -130,7 +130,7 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
130
130
  onKeyDown: handleInputKeyDown,
131
131
  onKeyPress: onInputKeyPress,
132
132
  onKeyUp: handleInputKeyUp,
133
- ref: mergedRef,
133
+ ref: inputRef,
134
134
  "aria-controls": `${id}-listbox`,
135
135
  "aria-autocomplete": "both",
136
136
  role: "combobox",
@@ -1,6 +1,6 @@
1
1
  import { useContext, useRef, useEffect, useCallback } from 'react';
2
2
  import { AutocompleteContext } from './AutocompleteContext.js';
3
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
3
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
4
4
  import VisuallyHidden from '../_VisuallyHidden.js';
5
5
  import classes from './AutocompleteOverlay.module.css.js';
6
6
  import { clsx } from 'clsx';
@@ -48,7 +48,7 @@ function AutocompleteOverlay({
48
48
  align: 'start',
49
49
  anchorElementRef: computedAnchorRef
50
50
  }, [showMenu, selectedItemLength]);
51
- const mergedRef = useMergedRefs(scrollContainerRef, floatingElementRef);
51
+ useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
52
52
  const closeOptionList = useCallback(() => {
53
53
  setShowMenu(false);
54
54
  }, [setShowMenu]);
@@ -60,7 +60,7 @@ function AutocompleteOverlay({
60
60
  preventFocusOnOpen: true,
61
61
  onClickOutside: closeOptionList,
62
62
  onEscape: closeOptionList,
63
- ref: mergedRef,
63
+ ref: floatingElementRef,
64
64
  top: position === null || position === void 0 ? void 0 : position.top,
65
65
  left: position === null || position === void 0 ? void 0 : position.left,
66
66
  className: clsx(classes.Overlay, className),
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AA2BxC,QAAA,MAAM,UAAU,EA0JV,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,WAAW,CAAC,CAAA;AAEjE,OAAO,EAAC,UAAU,EAAC,CAAA"}
1
+ {"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AA2BxC,QAAA,MAAM,UAAU,EA2JV,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,WAAW,CAAC,CAAA;AAEjE,OAAO,EAAC,UAAU,EAAC,CAAA"}
@@ -1,5 +1,5 @@
1
1
  import React, { forwardRef } from 'react';
2
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
2
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
3
3
  import { ConditionalWrapper } from '../internal/components/ConditionalWrapper.js';
4
4
  import { clsx } from 'clsx';
5
5
  import classes from './ButtonBase.module.css.js';
@@ -46,7 +46,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
46
46
  ...rest
47
47
  } = props;
48
48
  const innerRef = React.useRef(null);
49
- const combinedRefs = useMergedRefs(forwardedRef, innerRef);
49
+ useRefObjectAsForwardedRef(forwardedRef, innerRef);
50
50
  const uuid = useId(id);
51
51
  const loadingAnnouncementID = `${uuid}-loading-announcement`;
52
52
 
@@ -74,7 +74,8 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
74
74
  children: [/*#__PURE__*/jsx(Component, {
75
75
  "aria-disabled": loading ? true : undefined,
76
76
  ...rest,
77
- ref: combinedRefs,
77
+ // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
78
+ ref: innerRef,
78
79
  className: clsx(classes.ButtonBase, className),
79
80
  "data-block": block ? 'block' : null,
80
81
  "data-inactive": inactive ? true : undefined,
@@ -1,2 +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,var(--color-overlay-backdrop));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,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;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: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:not([data-dialog-scroll-optimized]):has(.prc-Dialog-Dialog-G8cDF.prc-Dialog-DisableScroll-UkWFM){overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}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,var(--color-border-default));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,var(--color-border-default))}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));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,var(--color-fg-muted));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-b577691f.css.map */
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,var(--color-overlay-backdrop));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,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;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: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,var(--color-border-default));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,var(--color-border-default))}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));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,var(--color-fg-muted));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-f9bb927a.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","file":"Dialog-f9bb927a.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: 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: 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 +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":"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"}
@@ -6,7 +6,7 @@ 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 { useMergedRefs } from '../hooks/useMergedRefs.js';
9
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
10
10
  import { useId } from '../hooks/useId.js';
11
11
  import classes from './Dialog.module.css.js';
12
12
  import { clsx } from 'clsx';
@@ -17,6 +17,7 @@ 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
+ let dialogScrollDisabledCount = 0;
20
21
  const DefaultHeader = ({
21
22
  dialogLabelId,
22
23
  title,
@@ -106,7 +107,6 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
106
107
  const autoFocusedFooterButtonRef = useRef(null);
107
108
  for (const footerButton of footerButtons) {
108
109
  if (footerButton.autoFocus) {
109
- // eslint-disable-next-line react-hooks/immutability
110
110
  footerButton.ref = autoFocusedFooterButtonRef;
111
111
  }
112
112
  }
@@ -131,7 +131,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
131
131
  footer: Dialog.Footer
132
132
  });
133
133
  const dialogRef = useRef(null);
134
- const mergedRef = useMergedRefs(forwardedRef, dialogRef);
134
+ useRefObjectAsForwardedRef(forwardedRef, dialogRef);
135
135
  const backdropRef = useRef(null);
136
136
  useFocusTrap({
137
137
  containerRef: dialogRef,
@@ -145,26 +145,14 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
145
145
  }, [onClose]);
146
146
  React.useEffect(() => {
147
147
  const scrollbarWidth = window.innerWidth - document.body.clientWidth;
148
- const dialog = dialogRef.current;
149
- const usePerfOptimization = document.body.hasAttribute('data-dialog-scroll-optimized');
150
-
151
- // Add DisableScroll class to this dialog (for legacy :has() selector path)
152
- dialog === null || dialog === void 0 ? void 0 : dialog.classList.add(classes.DisableScroll);
148
+ dialogScrollDisabledCount++;
153
149
  document.body.style.setProperty('--prc-dialog-scrollgutter', `${scrollbarWidth}px`);
154
- if (usePerfOptimization) {
155
- // Optimized path: set attribute on body for direct CSS targeting
156
- document.body.setAttribute('data-dialog-scroll-disabled', '');
157
- }
158
- // Legacy path: no action needed - CSS :has(.Dialog.DisableScroll) handles it
159
-
150
+ document.body.setAttribute('data-dialog-scroll-disabled', '');
160
151
  return () => {
161
- dialog === null || dialog === void 0 ? void 0 : dialog.classList.remove(classes.DisableScroll);
162
- const remainingDialogs = document.querySelectorAll(`.${classes.DisableScroll}`);
163
- if (remainingDialogs.length === 0) {
152
+ dialogScrollDisabledCount--;
153
+ if (dialogScrollDisabledCount === 0) {
164
154
  document.body.style.removeProperty('--prc-dialog-scrollgutter');
165
- if (usePerfOptimization) {
166
- document.body.removeAttribute('data-dialog-scroll-disabled');
167
- }
155
+ document.body.removeAttribute('data-dialog-scroll-disabled');
168
156
  }
169
157
  };
170
158
  }, []);
@@ -217,7 +205,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
217
205
  setLastMouseDownIsBackdrop(e.target === e.currentTarget);
218
206
  },
219
207
  children: /*#__PURE__*/jsxs("div", {
220
- ref: mergedRef,
208
+ ref: dialogRef,
221
209
  role: role,
222
210
  "aria-labelledby": dialogLabelId,
223
211
  "aria-describedby": dialogDescriptionId,
@@ -1,5 +1,5 @@
1
- import './Dialog-b577691f.css';
1
+ import './Dialog-f9bb927a.css';
2
2
 
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","DisableScroll":"prc-Dialog-DisableScroll-UkWFM","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"};
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
 
5
5
  export { classes as default };
@@ -1 +1 @@
1
- {"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAS9B,CAAA"}
1
+ {"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAQ9B,CAAA"}
@@ -3,7 +3,6 @@ import { FeatureFlagScope } from './FeatureFlagScope.js';
3
3
  const DefaultFeatureFlags = FeatureFlagScope.create({
4
4
  primer_react_breadcrumbs_overflow_menu: false,
5
5
  primer_react_css_anchor_positioning: false,
6
- primer_react_css_has_selector_perf: false,
7
6
  primer_react_select_panel_fullscreen_on_narrow: false,
8
7
  primer_react_select_panel_order_selected_at_top: false,
9
8
  primer_react_select_panel_remove_active_descendant: false,
@@ -3,11 +3,5 @@ import { type FeatureFlags } from './FeatureFlagScope';
3
3
  export type FeatureFlagsProps = React.PropsWithChildren<{
4
4
  flags: FeatureFlags;
5
5
  }>;
6
- /**
7
- * Reset the ref count for testing purposes only.
8
- *
9
- * @internal - Not part of the public API. Only exported for test isolation.
10
- */
11
- export declare function __resetDialogScrollOptimizedCount(): void;
12
6
  export declare function FeatureFlags({ children, flags }: FeatureFlagsProps): React.JSX.Element;
13
7
  //# sourceMappingURL=FeatureFlags.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"FeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/FeatureFlags.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAmB,KAAK,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAGtE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtD,KAAK,EAAE,YAAY,CAAA;CACpB,CAAC,CAAA;AAcF;;;;GAIG;AACH,wBAAgB,iCAAiC,IAAI,IAAI,CAGxD;AAED,wBAAgB,YAAY,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC,EAAE,iBAAiB,qBAyBhE"}
1
+ {"version":3,"file":"FeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/FeatureFlags.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAmB,KAAK,YAAY,EAAC,MAAM,oBAAoB,CAAA;AAEtE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACtD,KAAK,EAAE,YAAY,CAAA;CACpB,CAAC,CAAA;AAEF,wBAAgB,YAAY,CAAC,EAAC,QAAQ,EAAE,KAAK,EAAC,EAAE,iBAAiB,qBAQhE"}
@@ -1,49 +1,40 @@
1
- import { useContext, useMemo } from 'react';
1
+ import { c } from 'react-compiler-runtime';
2
+ import { useContext } from 'react';
2
3
  import { FeatureFlagContext } from './FeatureFlagContext.js';
3
4
  import { FeatureFlagScope } from './FeatureFlagScope.js';
4
- import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
5
5
  import { jsx } from 'react/jsx-runtime';
6
6
 
7
- /**
8
- * Ref count for data-dialog-scroll-optimized attribute management.
9
- *
10
- * NOTE: This is temporary infrastructure while we feature flag the CSS :has()
11
- * performance optimization (primer_react_css_has_selector_perf). Once the flag
12
- * is removed and the optimization is the default behavior, this ref counting
13
- * can be removed - the attribute can simply always be present.
14
- *
15
- * @internal - Not part of the public API
16
- */
17
- let dialogScrollOptimizedCount = 0;
18
- function FeatureFlags({
19
- children,
20
- flags
21
- }) {
7
+ function FeatureFlags(t0) {
8
+ const $ = c(6);
9
+ const {
10
+ children,
11
+ flags
12
+ } = t0;
22
13
  const parentFeatureFlags = useContext(FeatureFlagContext);
23
- const value = useMemo(() => {
24
- const scope = FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.create(flags));
25
- return scope;
26
- }, [parentFeatureFlags, flags]);
27
- const isOptimizationEnabled = value.enabled('primer_react_css_has_selector_perf');
28
-
29
- // Set body attribute for CSS :has() optimization when flag is enabled
30
- useIsomorphicLayoutEffect(() => {
31
- if (isOptimizationEnabled) {
32
- dialogScrollOptimizedCount++;
33
- document.body.setAttribute('data-dialog-scroll-optimized', '');
34
- return () => {
35
- dialogScrollOptimizedCount--;
36
- if (dialogScrollOptimizedCount === 0) {
37
- document.body.removeAttribute('data-dialog-scroll-optimized');
38
- }
39
- };
40
- }
41
- }, [isOptimizationEnabled]);
42
- return /*#__PURE__*/jsx(FeatureFlagContext.Provider, {
43
- value: value,
44
- children: children
45
- });
14
+ let t1;
15
+ if ($[0] !== flags || $[1] !== parentFeatureFlags) {
16
+ t1 = FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.create(flags));
17
+ $[0] = flags;
18
+ $[1] = parentFeatureFlags;
19
+ $[2] = t1;
20
+ } else {
21
+ t1 = $[2];
22
+ }
23
+ const scope = t1;
24
+ const value = scope;
25
+ let t2;
26
+ if ($[3] !== children || $[4] !== value) {
27
+ t2 = /*#__PURE__*/jsx(FeatureFlagContext.Provider, {
28
+ value: value,
29
+ children: children
30
+ });
31
+ $[3] = children;
32
+ $[4] = value;
33
+ $[5] = t2;
34
+ } else {
35
+ t2 = $[5];
36
+ }
37
+ return t2;
46
38
  }
47
- FeatureFlags.displayName = "FeatureFlags";
48
39
 
49
40
  export { FeatureFlags };
@@ -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 { useMergedRefs } from '../hooks/useMergedRefs.js';
5
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.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
- const mergedRef = useMergedRefs(forwardedRef, innerRef);
14
+ useRefObjectAsForwardedRef(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,
@@ -31,7 +31,7 @@ const Heading = /*#__PURE__*/forwardRef(({
31
31
  className: clsx(className, classes.Heading),
32
32
  "data-variant": variant,
33
33
  ...props,
34
- ref: mergedRef
34
+ ref: innerRef
35
35
  });
36
36
  });
37
37
  Heading.displayName = 'Heading';
@@ -1 +1 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAA;AAG1E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IACzD,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC9D,OAAO,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,EACjD,KAAK,YAAY,CAAC,OAAO,CAAC,sBAwC3B,CAAA;AAID,QAAA,MAAM,IAAI,IA9CoB,EAAE,SAAS,KAAK,CAAC,WAAW;;;;CA8CM,CAAA;AAEhE,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AACnD,eAAe,IAAI,CAAA"}
1
+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAY,KAAK,YAAY,EAAkB,MAAM,OAAO,CAAA;AAG1E,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAClD,OAAO,EAAC,KAAK,gBAAgB,EAAkB,MAAM,6BAA6B,CAAA;AAElF,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,IAAI;IACzD,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC9D,OAAO,gBAAgB,CAAC,EAAE,EAAE,GAAG,EAAE,eAAe,CAAC,EACjD,KAAK,YAAY,CAAC,OAAO,CAAC,sBAyC3B,CAAA;AAID,QAAA,MAAM,IAAI,IA/CoB,EAAE,SAAS,KAAK,CAAC,WAAW;;;;CA+CM,CAAA;AAEhE,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAA;AACnD,eAAe,IAAI,CAAA"}
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 { useMergedRefs } from '../hooks/useMergedRefs.js';
6
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.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
- const mergedRef = useMergedRefs(ref, innerRef);
18
+ useRefObjectAsForwardedRef(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,
@@ -37,7 +37,8 @@ const UnwrappedLink = (props, ref) => {
37
37
  "data-inline": inline,
38
38
  "data-hover-color": hoverColor,
39
39
  ...restProps,
40
- ref: mergedRef
40
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
41
+ ref: innerRef
41
42
  });
42
43
  };
43
44
  UnwrappedLink.displayName = "UnwrappedLink";
@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
2
2
  import React, { useRef, useEffect } from 'react';
3
3
  import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
4
4
  import { Portal } from '../Portal/Portal.js';
5
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
5
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
6
6
  import classes from './Overlay.module.css.js';
7
7
  import { clsx } from 'clsx';
8
8
  import { jsx } from 'react/jsx-runtime';
@@ -116,7 +116,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
116
116
 
117
117
  */
118
118
  const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
119
- const $ = c(50);
119
+ const $ = c(49);
120
120
  let _PrivateDisablePortal;
121
121
  let anchorSide;
122
122
  let ignoreClickRefs;
@@ -202,7 +202,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
202
202
  const width = t5 === undefined ? "auto" : t5;
203
203
  const featureFlagMaxHeightClampToViewport = useFeatureFlag("primer_react_overlay_max_height_clamp_to_viewport");
204
204
  const overlayRef = useRef(null);
205
- const mergedRef = useMergedRefs(forwardedRef, overlayRef);
205
+ useRefObjectAsForwardedRef(forwardedRef, overlayRef);
206
206
  const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
207
207
  let t6;
208
208
  if ($[19] !== ignoreClickRefs || $[20] !== initialFocusRef || $[21] !== onClickOutside || $[22] !== onEscape || $[23] !== preventFocusOnOpen || $[24] !== returnFocusRef) {
@@ -286,12 +286,12 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
286
286
  t12 = $[34];
287
287
  }
288
288
  let t13;
289
- if ($[35] !== height || $[36] !== leftPosition || $[37] !== mergedRef || $[38] !== props || $[39] !== responsiveVariant || $[40] !== right || $[41] !== role || $[42] !== t11 || $[43] !== t12 || $[44] !== visibility || $[45] !== width) {
289
+ if ($[35] !== height || $[36] !== leftPosition || $[37] !== props || $[38] !== responsiveVariant || $[39] !== right || $[40] !== role || $[41] !== t11 || $[42] !== t12 || $[43] !== visibility || $[44] !== width) {
290
290
  t13 = /*#__PURE__*/jsx(BaseOverlay, {
291
291
  role: role,
292
292
  width: width,
293
293
  "data-reflow-container": t11,
294
- ref: mergedRef,
294
+ ref: overlayRef,
295
295
  left: leftPosition,
296
296
  right: right,
297
297
  height: height,
@@ -302,34 +302,33 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
302
302
  });
303
303
  $[35] = height;
304
304
  $[36] = leftPosition;
305
- $[37] = mergedRef;
306
- $[38] = props;
307
- $[39] = responsiveVariant;
308
- $[40] = right;
309
- $[41] = role;
310
- $[42] = t11;
311
- $[43] = t12;
312
- $[44] = visibility;
313
- $[45] = width;
314
- $[46] = t13;
305
+ $[37] = props;
306
+ $[38] = responsiveVariant;
307
+ $[39] = right;
308
+ $[40] = role;
309
+ $[41] = t11;
310
+ $[42] = t12;
311
+ $[43] = visibility;
312
+ $[44] = width;
313
+ $[45] = t13;
315
314
  } else {
316
- t13 = $[46];
315
+ t13 = $[45];
317
316
  }
318
317
  const overlayContent = t13;
319
318
  if (_PrivateDisablePortal && cssAnchorPositioning) {
320
319
  return overlayContent;
321
320
  }
322
321
  let t14;
323
- if ($[47] !== overlayContent || $[48] !== portalContainerName) {
322
+ if ($[46] !== overlayContent || $[47] !== portalContainerName) {
324
323
  t14 = /*#__PURE__*/jsx(Portal, {
325
324
  containerName: portalContainerName,
326
325
  children: overlayContent
327
326
  });
328
- $[47] = overlayContent;
329
- $[48] = portalContainerName;
330
- $[49] = t14;
327
+ $[46] = overlayContent;
328
+ $[47] = portalContainerName;
329
+ $[48] = t14;
331
330
  } else {
332
- t14 = $[49];
331
+ t14 = $[48];
333
332
  }
334
333
  return t14;
335
334
  });
@@ -1,7 +1,7 @@
1
1
  import React, { useRef, memo } from 'react';
2
2
  import { clsx } from 'clsx';
3
3
  import { useId } from '../hooks/useId.js';
4
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
4
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
5
5
  import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
6
6
  import { useSlots } from '../hooks/useSlots.js';
7
7
  import { useOverflow } from '../hooks/useOverflow.js';
@@ -581,7 +581,7 @@ const Pane = /*#__PURE__*/React.forwardRef(({
581
581
  onResizeEnd,
582
582
  currentWidth: controlledWidth
583
583
  });
584
- const mergedRef = useMergedRefs(forwardRef, paneRef);
584
+ useRefObjectAsForwardedRef(forwardRef, paneRef);
585
585
  const hasOverflow = useOverflow(paneRef);
586
586
  const paneId = useId(id);
587
587
  const labelProp = {};
@@ -615,7 +615,7 @@ const Pane = /*#__PURE__*/React.forwardRef(({
615
615
  },
616
616
  position: positionProp
617
617
  }), /*#__PURE__*/jsx("div", {
618
- ref: mergedRef
618
+ ref: paneRef
619
619
  // Suppress hydration mismatch for --pane-width when localStorage
620
620
  // provides a width that differs from the server-rendered default.
621
621
  // Not needed when onResizeEnd is provided (localStorage isn't read).
@@ -785,7 +785,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
785
785
  contentWrapperRef: sidebarContentWrapperRef,
786
786
  constrainToViewport: true
787
787
  });
788
- const mergedRef = useMergedRefs(forwardRef, sidebarRef);
788
+ useRefObjectAsForwardedRef(forwardRef, sidebarRef);
789
789
  const hasOverflow = useOverflow(sidebarRef);
790
790
  const sidebarId = useId(id);
791
791
  const labelProp = {};
@@ -824,7 +824,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
824
824
  getDefaultWidth: getDefaultWidth,
825
825
  saveWidth: saveWidth
826
826
  }), /*#__PURE__*/jsx("div", {
827
- ref: mergedRef
827
+ ref: sidebarRef
828
828
  // Suppress hydration mismatch for --pane-width when localStorage
829
829
  // provides a width that differs from the server-rendered default.
830
830
  ,
@@ -3,7 +3,7 @@ import { FocusKeys } from '@primer/behaviors';
3
3
  import { isFocusable } from '@primer/behaviors/utils';
4
4
  import React, { useRef, useState } from 'react';
5
5
  import { isValidElementType } from 'react-is';
6
- import { useMergedRefs } from '../hooks/useMergedRefs.js';
6
+ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
7
7
  import { useFocusZone } from '../hooks/useFocusZone.js';
8
8
  import { useId } from '../hooks/useId.js';
9
9
  import Token from '../Token/Token.js';
@@ -25,7 +25,7 @@ const overflowCountClassMap = {
25
25
 
26
26
  // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
27
27
  function TextInputWithTokensInnerComponent(t0, forwardedRef) {
28
- const $ = c(152);
28
+ const $ = c(151);
29
29
  let IconComponent;
30
30
  let LeadingVisual;
31
31
  let TrailingVisual;
@@ -165,7 +165,7 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
165
165
  }
166
166
  const ref = useRef(null);
167
167
  const selectedValuesDescriptionId = useId();
168
- const mergedRef = useMergedRefs(forwardedRef, ref);
168
+ useRefObjectAsForwardedRef(forwardedRef, ref);
169
169
  const [selectedTokenIndex, setSelectedTokenIndex] = useState();
170
170
  const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
171
171
  let t6;
@@ -455,9 +455,9 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
455
455
  const t32 = validationStatus === "error" ? "true" : "false";
456
456
  const t33 = ariaDescribedBy || undefined;
457
457
  let t34;
458
- if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== mergedRef || $[86] !== role || $[87] !== t32 || $[88] !== t33) {
458
+ if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== role || $[86] !== t32 || $[87] !== t33) {
459
459
  t34 = /*#__PURE__*/jsx(UnstyledTextInput, {
460
- ref: mergedRef,
460
+ ref: ref,
461
461
  disabled: disabled,
462
462
  onFocus: handleInputFocus,
463
463
  onBlur: handleInputBlur,
@@ -474,43 +474,42 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
474
474
  $[82] = handleInputFocus;
475
475
  $[83] = handleInputKeyDown;
476
476
  $[84] = inputPropsRest;
477
- $[85] = mergedRef;
478
- $[86] = role;
479
- $[87] = t32;
480
- $[88] = t33;
481
- $[89] = t34;
477
+ $[85] = role;
478
+ $[86] = t32;
479
+ $[87] = t33;
480
+ $[88] = t34;
482
481
  } else {
483
- t34 = $[89];
482
+ t34 = $[88];
484
483
  }
485
484
  let t35;
486
- if ($[90] !== selectedValuesDescription || $[91] !== selectedValuesDescriptionId || $[92] !== shouldExposeSelectedValuesDescription) {
485
+ if ($[89] !== selectedValuesDescription || $[90] !== selectedValuesDescriptionId || $[91] !== shouldExposeSelectedValuesDescription) {
487
486
  t35 = shouldExposeSelectedValuesDescription ? /*#__PURE__*/jsx(VisuallyHidden, {
488
487
  id: selectedValuesDescriptionId,
489
488
  children: selectedValuesDescription
490
489
  }) : null;
491
- $[90] = selectedValuesDescription;
492
- $[91] = selectedValuesDescriptionId;
493
- $[92] = shouldExposeSelectedValuesDescription;
494
- $[93] = t35;
490
+ $[89] = selectedValuesDescription;
491
+ $[90] = selectedValuesDescriptionId;
492
+ $[91] = shouldExposeSelectedValuesDescription;
493
+ $[92] = t35;
495
494
  } else {
496
- t35 = $[93];
495
+ t35 = $[92];
497
496
  }
498
497
  let t36;
499
- if ($[94] !== t34 || $[95] !== t35) {
498
+ if ($[93] !== t34 || $[94] !== t35) {
500
499
  t36 = /*#__PURE__*/jsxs("div", {
501
500
  className: styles.InputWrapper,
502
501
  children: [t34, t35]
503
502
  });
504
- $[94] = t34;
505
- $[95] = t35;
506
- $[96] = t36;
503
+ $[93] = t34;
504
+ $[94] = t35;
505
+ $[95] = t36;
507
506
  } else {
508
- t36 = $[96];
507
+ t36 = $[95];
509
508
  }
510
509
  let t37;
511
- if ($[97] !== TokenComponent || $[98] !== disabled || $[99] !== handleTokenBlur || $[100] !== handleTokenFocus || $[101] !== handleTokenRemove || $[102] !== hideTokenRemoveButtons || $[103] !== selectedTokenIndex || $[104] !== size || $[105] !== visibleTokens) {
510
+ if ($[96] !== TokenComponent || $[97] !== disabled || $[98] !== handleTokenBlur || $[99] !== handleTokenFocus || $[100] !== handleTokenRemove || $[101] !== hideTokenRemoveButtons || $[102] !== selectedTokenIndex || $[103] !== size || $[104] !== visibleTokens) {
512
511
  let t38;
513
- if ($[107] !== TokenComponent || $[108] !== disabled || $[109] !== handleTokenBlur || $[110] !== handleTokenFocus || $[111] !== handleTokenRemove || $[112] !== hideTokenRemoveButtons || $[113] !== selectedTokenIndex || $[114] !== size) {
512
+ if ($[106] !== TokenComponent || $[107] !== disabled || $[108] !== handleTokenBlur || $[109] !== handleTokenFocus || $[110] !== handleTokenRemove || $[111] !== hideTokenRemoveButtons || $[112] !== selectedTokenIndex || $[113] !== size) {
514
513
  t38 = (t39, i) => {
515
514
  const {
516
515
  id,
@@ -532,89 +531,89 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
532
531
  ...tokenRest
533
532
  }, id);
534
533
  };
535
- $[107] = TokenComponent;
536
- $[108] = disabled;
537
- $[109] = handleTokenBlur;
538
- $[110] = handleTokenFocus;
539
- $[111] = handleTokenRemove;
540
- $[112] = hideTokenRemoveButtons;
541
- $[113] = selectedTokenIndex;
542
- $[114] = size;
543
- $[115] = t38;
534
+ $[106] = TokenComponent;
535
+ $[107] = disabled;
536
+ $[108] = handleTokenBlur;
537
+ $[109] = handleTokenFocus;
538
+ $[110] = handleTokenRemove;
539
+ $[111] = hideTokenRemoveButtons;
540
+ $[112] = selectedTokenIndex;
541
+ $[113] = size;
542
+ $[114] = t38;
544
543
  } else {
545
- t38 = $[115];
544
+ t38 = $[114];
546
545
  }
547
546
  t37 = visibleTokens.map(t38);
548
- $[97] = TokenComponent;
549
- $[98] = disabled;
550
- $[99] = handleTokenBlur;
551
- $[100] = handleTokenFocus;
552
- $[101] = handleTokenRemove;
553
- $[102] = hideTokenRemoveButtons;
554
- $[103] = selectedTokenIndex;
555
- $[104] = size;
556
- $[105] = visibleTokens;
557
- $[106] = t37;
547
+ $[96] = TokenComponent;
548
+ $[97] = disabled;
549
+ $[98] = handleTokenBlur;
550
+ $[99] = handleTokenFocus;
551
+ $[100] = handleTokenRemove;
552
+ $[101] = hideTokenRemoveButtons;
553
+ $[102] = selectedTokenIndex;
554
+ $[103] = size;
555
+ $[104] = visibleTokens;
556
+ $[105] = t37;
558
557
  } else {
559
- t37 = $[106];
558
+ t37 = $[105];
560
559
  }
561
560
  let t38;
562
- if ($[116] !== size || $[117] !== tokens.length || $[118] !== tokensAreTruncated || $[119] !== visibleTokens.length) {
561
+ if ($[115] !== size || $[116] !== tokens.length || $[117] !== tokensAreTruncated || $[118] !== visibleTokens.length) {
563
562
  t38 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxs(Text, {
564
563
  className: overflowCountClassMap[size],
565
564
  children: ["+", tokens.length - visibleTokens.length]
566
565
  }) : null;
567
- $[116] = size;
568
- $[117] = tokens.length;
569
- $[118] = tokensAreTruncated;
570
- $[119] = visibleTokens.length;
571
- $[120] = t38;
566
+ $[115] = size;
567
+ $[116] = tokens.length;
568
+ $[117] = tokensAreTruncated;
569
+ $[118] = visibleTokens.length;
570
+ $[119] = t38;
572
571
  } else {
573
- t38 = $[120];
572
+ t38 = $[119];
574
573
  }
575
574
  let t39;
576
- if ($[121] !== preventTokenWrapping || $[122] !== t31 || $[123] !== t36 || $[124] !== t37 || $[125] !== t38) {
575
+ if ($[120] !== preventTokenWrapping || $[121] !== t31 || $[122] !== t36 || $[123] !== t37 || $[124] !== t38) {
577
576
  t39 = /*#__PURE__*/jsxs("div", {
578
577
  ref: t31,
579
578
  className: styles.Container,
580
579
  "data-prevent-token-wrapping": preventTokenWrapping,
581
580
  children: [t36, t37, t38]
582
581
  });
583
- $[121] = preventTokenWrapping;
584
- $[122] = t31;
585
- $[123] = t36;
586
- $[124] = t37;
587
- $[125] = t38;
588
- $[126] = t39;
582
+ $[120] = preventTokenWrapping;
583
+ $[121] = t31;
584
+ $[122] = t36;
585
+ $[123] = t37;
586
+ $[124] = t38;
587
+ $[125] = t39;
589
588
  } else {
590
- t39 = $[126];
589
+ t39 = $[125];
591
590
  }
592
591
  const t40 = typeof loading === "boolean";
593
592
  let t41;
594
- if ($[127] !== TrailingVisual) {
593
+ if ($[126] !== TrailingVisual) {
595
594
  t41 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual;
596
- $[127] = TrailingVisual;
597
- $[128] = t41;
595
+ $[126] = TrailingVisual;
596
+ $[127] = t41;
598
597
  } else {
599
- t41 = $[128];
598
+ t41 = $[127];
600
599
  }
601
600
  let t42;
602
- if ($[129] !== showTrailingLoadingIndicator || $[130] !== t40 || $[131] !== t41) {
601
+ if ($[128] !== showTrailingLoadingIndicator || $[129] !== t40 || $[130] !== t41) {
603
602
  t42 = /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
604
603
  hasLoadingIndicator: t40,
605
604
  visualPosition: "trailing",
606
605
  showLoadingIndicator: showTrailingLoadingIndicator,
607
606
  children: t41
608
607
  });
609
- $[129] = showTrailingLoadingIndicator;
610
- $[130] = t40;
611
- $[131] = t41;
612
- $[132] = t42;
608
+ $[128] = showTrailingLoadingIndicator;
609
+ $[129] = t40;
610
+ $[130] = t41;
611
+ $[131] = t42;
613
612
  } else {
614
- t42 = $[132];
613
+ t42 = $[131];
615
614
  }
616
615
  let t43;
617
- if ($[133] !== block || $[134] !== contrast || $[135] !== disabled || $[136] !== maxWidthProp || $[137] !== minWidthProp || $[138] !== t21 || $[139] !== t22 || $[140] !== t23 || $[141] !== t24 || $[142] !== t25 || $[143] !== t26 || $[144] !== t27 || $[145] !== t30 || $[146] !== t39 || $[147] !== t42 || $[148] !== validationStatus || $[149] !== variantProp || $[150] !== widthProp) {
616
+ if ($[132] !== block || $[133] !== contrast || $[134] !== disabled || $[135] !== maxWidthProp || $[136] !== minWidthProp || $[137] !== t21 || $[138] !== t22 || $[139] !== t23 || $[140] !== t24 || $[141] !== t25 || $[142] !== t26 || $[143] !== t27 || $[144] !== t30 || $[145] !== t39 || $[146] !== t42 || $[147] !== validationStatus || $[148] !== variantProp || $[149] !== widthProp) {
618
617
  t43 = /*#__PURE__*/jsxs(TextInputWrapper, {
619
618
  block: block,
620
619
  contrast: contrast,
@@ -633,27 +632,27 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
633
632
  style: t26,
634
633
  children: [t27, t30, t39, t42]
635
634
  });
636
- $[133] = block;
637
- $[134] = contrast;
638
- $[135] = disabled;
639
- $[136] = maxWidthProp;
640
- $[137] = minWidthProp;
641
- $[138] = t21;
642
- $[139] = t22;
643
- $[140] = t23;
644
- $[141] = t24;
645
- $[142] = t25;
646
- $[143] = t26;
647
- $[144] = t27;
648
- $[145] = t30;
649
- $[146] = t39;
650
- $[147] = t42;
651
- $[148] = validationStatus;
652
- $[149] = variantProp;
653
- $[150] = widthProp;
654
- $[151] = t43;
635
+ $[132] = block;
636
+ $[133] = contrast;
637
+ $[134] = disabled;
638
+ $[135] = maxWidthProp;
639
+ $[136] = minWidthProp;
640
+ $[137] = t21;
641
+ $[138] = t22;
642
+ $[139] = t23;
643
+ $[140] = t24;
644
+ $[141] = t25;
645
+ $[142] = t26;
646
+ $[143] = t27;
647
+ $[144] = t30;
648
+ $[145] = t39;
649
+ $[146] = t42;
650
+ $[147] = validationStatus;
651
+ $[148] = variantProp;
652
+ $[149] = widthProp;
653
+ $[150] = t43;
655
654
  } else {
656
- t43 = $[151];
655
+ t43 = $[150];
657
656
  }
658
657
  return t43;
659
658
  }
@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
2
2
  import React, { forwardRef, useRef } from 'react';
3
3
  import { IconButton } from '../../Button/IconButton.js';
4
4
  import useDialog from '../../hooks/useDialog.js';
5
- import { useMergedRefs } from '../../hooks/useMergedRefs.js';
5
+ import { useRefObjectAsForwardedRef } from '../../hooks/useRefObjectAsForwardedRef.js';
6
6
  import { XIcon } from '@primer/octicons-react';
7
7
  import { clsx } from 'clsx';
8
8
  import classes from './Dialog.module.css.js';
@@ -78,7 +78,7 @@ function _temp(ch) {
78
78
  return typeof ch === "string";
79
79
  }
80
80
  const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
81
- const $ = c(26);
81
+ const $ = c(25);
82
82
  let children;
83
83
  let className;
84
84
  let initialFocusRef;
@@ -121,7 +121,7 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
121
121
  const Component = t2 === undefined ? "div" : t2;
122
122
  const overlayRef = useRef(null);
123
123
  const modalRef = useRef(null);
124
- const mergedRef = useMergedRefs(forwardedRef, modalRef);
124
+ useRefObjectAsForwardedRef(forwardedRef, modalRef);
125
125
  const closeButtonRef = useRef(null);
126
126
  let t3;
127
127
  if ($[9] !== onDismiss || $[10] !== returnFocusRef) {
@@ -161,14 +161,14 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
161
161
  getDialogProps
162
162
  } = useDialog(t4);
163
163
  let t5;
164
- if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== mergedRef || $[23] !== onCloseClick || $[24] !== props) {
164
+ if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== onCloseClick || $[23] !== props) {
165
165
  t5 = isOpen ? /*#__PURE__*/jsxs(Fragment, {
166
166
  children: [/*#__PURE__*/jsx("span", {
167
167
  className: classes.Overlay,
168
168
  ref: overlayRef
169
169
  }), /*#__PURE__*/jsxs(Component, {
170
170
  tabIndex: -1,
171
- ref: mergedRef,
171
+ ref: modalRef,
172
172
  role: "dialog",
173
173
  "aria-modal": "true",
174
174
  ...props,
@@ -190,12 +190,11 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
190
190
  $[19] = className;
191
191
  $[20] = getDialogProps;
192
192
  $[21] = isOpen;
193
- $[22] = mergedRef;
194
- $[23] = onCloseClick;
195
- $[24] = props;
196
- $[25] = t5;
193
+ $[22] = onCloseClick;
194
+ $[23] = props;
195
+ $[24] = t5;
197
196
  } else {
198
- t5 = $[25];
197
+ t5 = $[24];
199
198
  }
200
199
  return t5;
201
200
  });
@@ -15,18 +15,18 @@ import type { ForwardedRef, Ref as StandardRef } from 'react';
15
15
  * // React 18
16
16
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
17
17
  * const ref = useRef<HTMLButtonElement>(null)
18
- * const mergedRef = useMergedRefs(forwardedRef, ref)
18
+ * const combinedRef = useMergedRefs(forwardedRef, ref)
19
19
  *
20
- * return <button ref={mergedRef} />
20
+ * return <button ref={combinedRef} />
21
21
  * })
22
22
  *
23
23
  * @example
24
24
  * // React 19
25
25
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
26
26
  * const ref = useRef<HTMLButtonElement>(null)
27
- * const mergedRef = useMergedRefs(externalRef, ref)
27
+ * const combinedRef = useMergedRefs(externalRef, ref)
28
28
  *
29
- * return <button ref={mergedRef} />
29
+ * return <button ref={combinedRef} />
30
30
  * }
31
31
  */
32
32
  export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => () => void;
@@ -17,18 +17,18 @@ import 'react';
17
17
  * // React 18
18
18
  * const Example = forwardRef<HTMLButtonElement, {}>((props, forwardedRef) => {
19
19
  * const ref = useRef<HTMLButtonElement>(null)
20
- * const mergedRef = useMergedRefs(forwardedRef, ref)
20
+ * const combinedRef = useMergedRefs(forwardedRef, ref)
21
21
  *
22
- * return <button ref={mergedRef} />
22
+ * return <button ref={combinedRef} />
23
23
  * })
24
24
  *
25
25
  * @example
26
26
  * // React 19
27
27
  * const Example = ({ref: externalRef}: {ref?: Ref<HTMLButtonElement>}) => {
28
28
  * const ref = useRef<HTMLButtonElement>(null)
29
- * const mergedRef = useMergedRefs(externalRef, ref)
29
+ * const combinedRef = useMergedRefs(externalRef, ref)
30
30
  *
31
- * return <button ref={mergedRef} />
31
+ * return <button ref={combinedRef} />
32
32
  * }
33
33
  */
34
34
  function useMergedRefs(refA, refB) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.19.0-rc.f678a3d2b",
4
+ "version": "38.19.0",
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",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"AAOA,oCACE,eAAgB,CAChB,cAAe,CACf,iBACF,CAEA,mDACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,sDACE,GACE,SAAU,CACV,mBACF,CAEA,GACE,SAAU,CACV,kBACF,CACF,CAEA,oDACE,GACE,0BACF,CACF,CAEA,yDACE,GACE,2BACF,CACF,CAEA,wDACE,GACE,0BACF,CACF,CAGA,0CACE,MAEE,cACF,CACF,CAEA,2BAQE,+EAAsE,CADtE,8EAAiD,CAHjD,QAAS,CAET,YAAa,CADb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAkEF,CAxDE,oFAHA,kBAAmB,CACnB,sBAKA,CAEA,uDACE,kBAAmB,CACnB,0BACF,CAEA,wDACE,kBAAmB,CACnB,wBACF,CAME,wHACE,sBACF,CAEA,2HACE,kBACF,CAEA,2HACE,oBACF,CAGF,yBACE,wDACE,kBAAmB,CACnB,sBAcF,CAXE,wEACE,sBACF,CAEA,2EACE,kBACF,CAEA,2EACE,oBACF,CAGF,wDACE,eAAgB,CAChB,sBACF,CACF,CAGF,yBASE,mEAAwC,CACxC,8CAAwC,CACxC,wEAAmE,CACnE,mEAAwC,CAXxC,YAAa,CAOb,qBAAsB,CAFtB,WAAY,CACZ,8BAA+B,CAF/B,6BAA8B,CAD9B,eAAgB,CAShB,SAAU,CAVV,WAuJF,CA3IE,mDACE,WACF,CAEA,oDACE,WACF,CAEA,mDAEE,WACF,CAEA,oDACE,YACF,CAEA,oDACE,YACF,CAEA,yDApCF,yBAqCI,4GAqHJ,CApHE,CAEA,uDACE,wEAcF,CAZE,yDAHF,uDAII,4GAWJ,CAVE,CAGA,uEACE,mCACF,CAEA,0EACE,sCACF,CAGF,qDAGE,wEAAmE,CAEnE,2BAA4B,CAD5B,wBAAyB,CAHzB,aAAc,CACd,gBAQF,CAHE,yDAPF,qDAQI,gHAEJ,CADE,CAGF,sDAGE,wEAAmE,CAEnE,4BAA6B,CAD7B,yBAA0B,CAH1B,aAAc,CACd,gBAQF,CAHE,yDAPF,sDAQI,8GAEJ,CADE,CAGF,yBACE,sDAIE,wEAAmE,CADnE,WAAY,CADZ,WAwBF,CApBE,gFACE,WACF,CAEA,iFACE,WACF,CAEA,gFAEE,WACF,CAEA,iFACE,YACF,CAEA,iFACE,YACF,CAGF,0BA9GJ,yBA+GM,8BAA+B,CAC/B,6BA0CN,CAzCI,CAEA,sDAKE,wEAAmE,CAEnE,2BAA4B,CAD5B,4BAA6B,CAH7B,WAAY,CACZ,8BAA+B,CAF/B,gBAAiB,CADjB,YAiBF,CARE,kEAEE,eAAgB,CADhB,YAEF,CAEA,yDAfF,sDAgBI,2GAEJ,CADE,CAGF,0DAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,iBAAkB,CAFlB,gBAAiB,CADjB,UAgBF,CARE,sEAEE,eAAgB,CADhB,YAEF,CAEA,yDAdF,0DAeI,4GAEJ,CADE,CAEJ,CAeF,sGAGE,yBAA2B,CAD3B,sDAEF,CAOA,kCAGE,yBAA2B,CAD3B,sDAEF,CAEA,wCACE,WACF,CAQA,0CACE,cAYF,CAVE,kFAGE,wCAAwB,CADxB,8GAA0E,CAE1E,+BAKF,CAHE,4CANF,kFAOI,mIAEJ,CADE,CAIJ,yBAME,yEAA8C,CAC9C,aAAc,CALd,eAAgB,CAEhB,eAAgB,CADhB,gCAA2B,CAF3B,SAOF,CAEA,8BACE,YACF,CAEA,gCACE,YAAa,CAGb,qBAAsB,CACtB,WAAY,CAFZ,wCAAiC,CADjC,uCAIF,CAEA,wBAEE,8CAAuC,CACvC,8CAA2C,CAF3C,QAGF,CAEA,2BAKE,gDAA2B,CAF3B,4CAAsC,CACtC,8CAA2C,CAH3C,QAAS,CACT,oCAIF,CAEA,uBAGE,WAAY,CADZ,aAEF,CAEA,gDALE,gCAaF,CARA,yBAEE,YAAa,CACb,cAAe,CAIf,aAAc,CADd,4BAAuB,CAFvB,wBAAyB,CAHzB,SAOF,CAEA,oFAGE,kBAAmB,CAFnB,gBAAiB,CAGjB,qBAAsB,CAFtB,iBAGF","file":"Dialog-b577691f.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: 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: 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/* DisableScroll class is added to Dialog when scroll should be disabled on body */\n.DisableScroll {\n /* This class is used as a selector target for the legacy :has() CSS selector */\n}\n\n/*\n * LEGACY: Scoped :has() selector with negation guard\n * Only evaluates when data-dialog-scroll-optimized is NOT present on body.\n * When the attribute IS present (flag ON), browser skips :has() evaluation\n * because the :not() check fails first (O(1) attribute lookup).\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody:not([data-dialog-scroll-optimized]):has(.Dialog.DisableScroll) {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--prc-dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n * Active when primer_react_css_has_selector_perf flag is ON\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"]}