@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 +1 -1
- package/dist/ActionBar/ActionBar.js +3 -3
- package/dist/ActionList/Heading.js +16 -17
- package/dist/Autocomplete/AutocompleteInput.js +3 -3
- package/dist/Autocomplete/AutocompleteOverlay.js +3 -3
- package/dist/Button/ButtonBase.d.ts.map +1 -1
- package/dist/Button/ButtonBase.js +4 -3
- package/dist/Dialog/{Dialog-b577691f.css → Dialog-f9bb927a.css} +2 -2
- package/dist/Dialog/Dialog-f9bb927a.css.map +1 -0
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +9 -21
- package/dist/Dialog/Dialog.module.css.js +2 -2
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +0 -1
- package/dist/FeatureFlags/FeatureFlags.d.ts +0 -6
- package/dist/FeatureFlags/FeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/FeatureFlags.js +32 -41
- package/dist/Heading/Heading.js +3 -3
- package/dist/Link/Link.d.ts.map +1 -1
- package/dist/Link/Link.js +4 -3
- package/dist/Overlay/Overlay.js +20 -21
- package/dist/PageLayout/PageLayout.js +5 -5
- package/dist/TextInputWithTokens/TextInputWithTokens.js +90 -91
- package/dist/deprecated/DialogV1/Dialog.js +9 -10
- package/dist/hooks/useMergedRefs.d.ts +4 -4
- package/dist/hooks/useMergedRefs.js +4 -4
- package/package.json +1 -1
- package/dist/Dialog/Dialog-b577691f.css.map +0 -1
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
|
-
- [#
|
|
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 {
|
|
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
|
-
|
|
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:
|
|
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 {
|
|
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(
|
|
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
|
-
|
|
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] !==
|
|
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:
|
|
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] =
|
|
83
|
-
$[13] =
|
|
84
|
-
$[14] =
|
|
85
|
-
$[15] =
|
|
86
|
-
$[16] =
|
|
87
|
-
$[17] = t5;
|
|
82
|
+
$[12] = props;
|
|
83
|
+
$[13] = size;
|
|
84
|
+
$[14] = t3;
|
|
85
|
+
$[15] = t4;
|
|
86
|
+
$[16] = t5;
|
|
88
87
|
} else {
|
|
89
|
-
t5 = $[
|
|
88
|
+
t5 = $[16];
|
|
90
89
|
}
|
|
91
90
|
let t6;
|
|
92
|
-
if ($[
|
|
91
|
+
if ($[17] !== t2 || $[18] !== t5) {
|
|
93
92
|
t6 = /*#__PURE__*/jsx(VisuallyHidden, {
|
|
94
93
|
isVisible: t2,
|
|
95
94
|
children: t5
|
|
96
95
|
});
|
|
97
|
-
$[
|
|
98
|
-
$[
|
|
99
|
-
$[
|
|
96
|
+
$[17] = t2;
|
|
97
|
+
$[18] = t5;
|
|
98
|
+
$[19] = t6;
|
|
100
99
|
} else {
|
|
101
|
-
t6 = $[
|
|
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 {
|
|
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
|
-
|
|
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:
|
|
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 {
|
|
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
|
-
|
|
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:
|
|
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,
|
|
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 {
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
2
|
-
/*# sourceMappingURL=Dialog-
|
|
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":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAW1C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAChE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -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 {
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
162
|
-
|
|
163
|
-
if (remainingDialogs.length === 0) {
|
|
152
|
+
dialogScrollDisabledCount--;
|
|
153
|
+
if (dialogScrollDisabledCount === 0) {
|
|
164
154
|
document.body.style.removeProperty('--prc-dialog-scrollgutter');
|
|
165
|
-
|
|
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:
|
|
208
|
+
ref: dialogRef,
|
|
221
209
|
role: role,
|
|
222
210
|
"aria-labelledby": dialogLabelId,
|
|
223
211
|
"aria-describedby": dialogDescriptionId,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './Dialog-
|
|
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","
|
|
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,
|
|
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;
|
|
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 {
|
|
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
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
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 };
|
package/dist/Heading/Heading.js
CHANGED
|
@@ -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 {
|
|
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
|
-
|
|
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:
|
|
34
|
+
ref: innerRef
|
|
35
35
|
});
|
|
36
36
|
});
|
|
37
37
|
Heading.displayName = 'Heading';
|
package/dist/Link/Link.d.ts.map
CHANGED
|
@@ -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,
|
|
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 {
|
|
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
|
-
|
|
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
|
-
|
|
40
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
41
|
+
ref: innerRef
|
|
41
42
|
});
|
|
42
43
|
};
|
|
43
44
|
UnwrappedLink.displayName = "UnwrappedLink";
|
package/dist/Overlay/Overlay.js
CHANGED
|
@@ -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 {
|
|
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(
|
|
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
|
-
|
|
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] !==
|
|
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:
|
|
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] =
|
|
306
|
-
$[38] =
|
|
307
|
-
$[39] =
|
|
308
|
-
$[40] =
|
|
309
|
-
$[41] =
|
|
310
|
-
$[42] =
|
|
311
|
-
$[43] =
|
|
312
|
-
$[44] =
|
|
313
|
-
$[45] =
|
|
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 = $[
|
|
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 ($[
|
|
322
|
+
if ($[46] !== overlayContent || $[47] !== portalContainerName) {
|
|
324
323
|
t14 = /*#__PURE__*/jsx(Portal, {
|
|
325
324
|
containerName: portalContainerName,
|
|
326
325
|
children: overlayContent
|
|
327
326
|
});
|
|
328
|
-
$[
|
|
329
|
-
$[
|
|
330
|
-
$[
|
|
327
|
+
$[46] = overlayContent;
|
|
328
|
+
$[47] = portalContainerName;
|
|
329
|
+
$[48] = t14;
|
|
331
330
|
} else {
|
|
332
|
-
t14 = $[
|
|
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 {
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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 {
|
|
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(
|
|
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
|
-
|
|
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] !==
|
|
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:
|
|
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] =
|
|
478
|
-
$[86] =
|
|
479
|
-
$[87] =
|
|
480
|
-
$[88] =
|
|
481
|
-
$[89] = t34;
|
|
477
|
+
$[85] = role;
|
|
478
|
+
$[86] = t32;
|
|
479
|
+
$[87] = t33;
|
|
480
|
+
$[88] = t34;
|
|
482
481
|
} else {
|
|
483
|
-
t34 = $[
|
|
482
|
+
t34 = $[88];
|
|
484
483
|
}
|
|
485
484
|
let t35;
|
|
486
|
-
if ($[
|
|
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
|
-
$[
|
|
492
|
-
$[
|
|
493
|
-
$[
|
|
494
|
-
$[
|
|
490
|
+
$[89] = selectedValuesDescription;
|
|
491
|
+
$[90] = selectedValuesDescriptionId;
|
|
492
|
+
$[91] = shouldExposeSelectedValuesDescription;
|
|
493
|
+
$[92] = t35;
|
|
495
494
|
} else {
|
|
496
|
-
t35 = $[
|
|
495
|
+
t35 = $[92];
|
|
497
496
|
}
|
|
498
497
|
let t36;
|
|
499
|
-
if ($[
|
|
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
|
-
$[
|
|
505
|
-
$[
|
|
506
|
-
$[
|
|
503
|
+
$[93] = t34;
|
|
504
|
+
$[94] = t35;
|
|
505
|
+
$[95] = t36;
|
|
507
506
|
} else {
|
|
508
|
-
t36 = $[
|
|
507
|
+
t36 = $[95];
|
|
509
508
|
}
|
|
510
509
|
let t37;
|
|
511
|
-
if ($[
|
|
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 ($[
|
|
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
|
-
$[
|
|
536
|
-
$[
|
|
537
|
-
$[
|
|
538
|
-
$[
|
|
539
|
-
$[
|
|
540
|
-
$[
|
|
541
|
-
$[
|
|
542
|
-
$[
|
|
543
|
-
$[
|
|
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 = $[
|
|
544
|
+
t38 = $[114];
|
|
546
545
|
}
|
|
547
546
|
t37 = visibleTokens.map(t38);
|
|
548
|
-
$[
|
|
549
|
-
$[
|
|
550
|
-
$[
|
|
551
|
-
$[
|
|
552
|
-
$[
|
|
553
|
-
$[
|
|
554
|
-
$[
|
|
555
|
-
$[
|
|
556
|
-
$[
|
|
557
|
-
$[
|
|
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 = $[
|
|
558
|
+
t37 = $[105];
|
|
560
559
|
}
|
|
561
560
|
let t38;
|
|
562
|
-
if ($[
|
|
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
|
-
$[
|
|
568
|
-
$[
|
|
569
|
-
$[
|
|
570
|
-
$[
|
|
571
|
-
$[
|
|
566
|
+
$[115] = size;
|
|
567
|
+
$[116] = tokens.length;
|
|
568
|
+
$[117] = tokensAreTruncated;
|
|
569
|
+
$[118] = visibleTokens.length;
|
|
570
|
+
$[119] = t38;
|
|
572
571
|
} else {
|
|
573
|
-
t38 = $[
|
|
572
|
+
t38 = $[119];
|
|
574
573
|
}
|
|
575
574
|
let t39;
|
|
576
|
-
if ($[
|
|
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
|
-
$[
|
|
584
|
-
$[
|
|
585
|
-
$[
|
|
586
|
-
$[
|
|
587
|
-
$[
|
|
588
|
-
$[
|
|
582
|
+
$[120] = preventTokenWrapping;
|
|
583
|
+
$[121] = t31;
|
|
584
|
+
$[122] = t36;
|
|
585
|
+
$[123] = t37;
|
|
586
|
+
$[124] = t38;
|
|
587
|
+
$[125] = t39;
|
|
589
588
|
} else {
|
|
590
|
-
t39 = $[
|
|
589
|
+
t39 = $[125];
|
|
591
590
|
}
|
|
592
591
|
const t40 = typeof loading === "boolean";
|
|
593
592
|
let t41;
|
|
594
|
-
if ($[
|
|
593
|
+
if ($[126] !== TrailingVisual) {
|
|
595
594
|
t41 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual;
|
|
596
|
-
$[
|
|
597
|
-
$[
|
|
595
|
+
$[126] = TrailingVisual;
|
|
596
|
+
$[127] = t41;
|
|
598
597
|
} else {
|
|
599
|
-
t41 = $[
|
|
598
|
+
t41 = $[127];
|
|
600
599
|
}
|
|
601
600
|
let t42;
|
|
602
|
-
if ($[
|
|
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
|
-
$[
|
|
610
|
-
$[
|
|
611
|
-
$[
|
|
612
|
-
$[
|
|
608
|
+
$[128] = showTrailingLoadingIndicator;
|
|
609
|
+
$[129] = t40;
|
|
610
|
+
$[130] = t41;
|
|
611
|
+
$[131] = t42;
|
|
613
612
|
} else {
|
|
614
|
-
t42 = $[
|
|
613
|
+
t42 = $[131];
|
|
615
614
|
}
|
|
616
615
|
let t43;
|
|
617
|
-
if ($[
|
|
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
|
-
$[
|
|
637
|
-
$[
|
|
638
|
-
$[
|
|
639
|
-
$[
|
|
640
|
-
$[
|
|
641
|
-
$[
|
|
642
|
-
$[
|
|
643
|
-
$[
|
|
644
|
-
$[
|
|
645
|
-
$[
|
|
646
|
-
$[
|
|
647
|
-
$[
|
|
648
|
-
$[
|
|
649
|
-
$[
|
|
650
|
-
$[
|
|
651
|
-
$[
|
|
652
|
-
$[
|
|
653
|
-
$[
|
|
654
|
-
$[
|
|
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 = $[
|
|
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 {
|
|
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(
|
|
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
|
-
|
|
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] !==
|
|
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:
|
|
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] =
|
|
194
|
-
$[23] =
|
|
195
|
-
$[24] =
|
|
196
|
-
$[25] = t5;
|
|
193
|
+
$[22] = onCloseClick;
|
|
194
|
+
$[23] = props;
|
|
195
|
+
$[24] = t5;
|
|
197
196
|
} else {
|
|
198
|
-
t5 = $[
|
|
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
|
|
18
|
+
* const combinedRef = useMergedRefs(forwardedRef, ref)
|
|
19
19
|
*
|
|
20
|
-
* return <button ref={
|
|
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
|
|
27
|
+
* const combinedRef = useMergedRefs(externalRef, ref)
|
|
28
28
|
*
|
|
29
|
-
* return <button ref={
|
|
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
|
|
20
|
+
* const combinedRef = useMergedRefs(forwardedRef, ref)
|
|
21
21
|
*
|
|
22
|
-
* return <button ref={
|
|
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
|
|
29
|
+
* const combinedRef = useMergedRefs(externalRef, ref)
|
|
30
30
|
*
|
|
31
|
-
* return <button ref={
|
|
31
|
+
* return <button ref={combinedRef} />
|
|
32
32
|
* }
|
|
33
33
|
*/
|
|
34
34
|
function useMergedRefs(refA, refB) {
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","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"]}
|