@primer/react 38.24.0-rc.76f4c2c0c → 38.24.0-rc.bcb737db8
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 +8 -0
- package/dist/ActionBar/ActionBar-e63def3c.css +2 -0
- package/dist/ActionBar/ActionBar-e63def3c.css.map +1 -0
- package/dist/ActionBar/ActionBar.d.ts +1 -1
- package/dist/ActionBar/ActionBar.d.ts.map +1 -1
- package/dist/ActionBar/ActionBar.js +298 -384
- package/dist/ActionBar/ActionBar.module.css.js +2 -2
- package/dist/ActionBar/index.d.ts +1 -1
- package/dist/ActionList/Heading.js +17 -16
- package/dist/Autocomplete/AutocompleteInput.js +3 -3
- package/dist/Autocomplete/AutocompleteOverlay.js +3 -3
- package/dist/Button/ButtonBase.js +3 -3
- package/dist/DataTable/useTable.d.ts.map +1 -1
- package/dist/DataTable/useTable.js +8 -3
- package/dist/Dialog/Dialog-b7da369a.css +2 -0
- package/dist/Dialog/Dialog-b7da369a.css.map +1 -0
- package/dist/Dialog/Dialog.d.ts +4 -2
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +18 -5
- package/dist/Dialog/Dialog.module.css.js +1 -1
- package/dist/Heading/Heading.js +3 -3
- package/dist/Link/Link.js +3 -3
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +20 -19
- package/dist/PageLayout/PageLayout.js +5 -5
- package/dist/PageLayout/usePaneWidth.d.ts.map +1 -1
- package/dist/PageLayout/usePaneWidth.js +12 -6
- package/dist/TextInputWithTokens/TextInputWithTokens.js +91 -90
- package/dist/deprecated/DialogV1/Dialog.js +10 -9
- package/generated/components.json +2 -2
- package/package.json +1 -1
- package/dist/ActionBar/ActionBar-a41224b2.css +0 -2
- package/dist/ActionBar/ActionBar-a41224b2.css.map +0 -1
- package/dist/Dialog/Dialog-f9bb927a.css +0 -2
- package/dist/Dialog/Dialog-f9bb927a.css.map +0 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './ActionBar-
|
|
1
|
+
import './ActionBar-e63def3c.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"List":"prc-ActionBar-List-9uz46","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk"};
|
|
3
|
+
var styles = {"List":"prc-ActionBar-List-9uz46","detect-overflow":"prc-ActionBar-detect-overflow-mAuJu","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk","OverflowContainer":"prc-ActionBar-OverflowContainer-AkYZs","OverflowSpacer":"prc-ActionBar-OverflowSpacer-tbHkV","MoreButton":"prc-ActionBar-MoreButton-RHqpx"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
|
|
2
2
|
declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
|
|
3
3
|
IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
|
|
4
|
-
Divider: () => import("react").JSX.Element
|
|
4
|
+
Divider: () => import("react").JSX.Element;
|
|
5
5
|
Group: import("react").ForwardRefExoticComponent<{
|
|
6
6
|
children?: import("react").ReactNode | undefined;
|
|
7
7
|
} & import("react").RefAttributes<unknown>>;
|
|
@@ -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 { useMergedRefs } from '../hooks/useMergedRefs.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(21);
|
|
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
|
+
const mergedRef = useMergedRefs(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] !== mergedRef || $[13] !== props || $[14] !== size || $[15] !== t3 || $[16] !== t4) {
|
|
69
69
|
t5 = /*#__PURE__*/jsx(Heading$1, {
|
|
70
70
|
as: as,
|
|
71
71
|
variant: size,
|
|
72
|
-
ref:
|
|
72
|
+
ref: mergedRef,
|
|
73
73
|
id: t3,
|
|
74
74
|
className: t4,
|
|
75
75
|
"data-component": "ActionList.Heading",
|
|
@@ -80,25 +80,26 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
|
|
|
80
80
|
$[9] = as;
|
|
81
81
|
$[10] = children;
|
|
82
82
|
$[11] = listVariant;
|
|
83
|
-
$[12] =
|
|
84
|
-
$[13] =
|
|
85
|
-
$[14] =
|
|
86
|
-
$[15] =
|
|
87
|
-
$[16] =
|
|
83
|
+
$[12] = mergedRef;
|
|
84
|
+
$[13] = props;
|
|
85
|
+
$[14] = size;
|
|
86
|
+
$[15] = t3;
|
|
87
|
+
$[16] = t4;
|
|
88
|
+
$[17] = t5;
|
|
88
89
|
} else {
|
|
89
|
-
t5 = $[
|
|
90
|
+
t5 = $[17];
|
|
90
91
|
}
|
|
91
92
|
let t6;
|
|
92
|
-
if ($[
|
|
93
|
+
if ($[18] !== t2 || $[19] !== t5) {
|
|
93
94
|
t6 = /*#__PURE__*/jsx(VisuallyHidden, {
|
|
94
95
|
isVisible: t2,
|
|
95
96
|
children: t5
|
|
96
97
|
});
|
|
97
|
-
$[
|
|
98
|
-
$[
|
|
99
|
-
$[
|
|
98
|
+
$[18] = t2;
|
|
99
|
+
$[19] = t5;
|
|
100
|
+
$[20] = t6;
|
|
100
101
|
} else {
|
|
101
|
-
t6 = $[
|
|
102
|
+
t6 = $[20];
|
|
102
103
|
}
|
|
103
104
|
return t6;
|
|
104
105
|
});
|
|
@@ -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 { useMergedRefs } from '../hooks/useMergedRefs.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
|
+
const mergedRef = useMergedRefs(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: mergedRef,
|
|
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 { useMergedRefs } from '../hooks/useMergedRefs.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
|
+
const mergedScrollContainerRef = useMergedRefs(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: mergedScrollContainerRef,
|
|
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,5 +1,5 @@
|
|
|
1
1
|
import React, { forwardRef } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useMergedRefs } from '../hooks/useMergedRefs.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
|
+
const mergedRef = useMergedRefs(forwardedRef, innerRef);
|
|
50
50
|
const uuid = useId(id);
|
|
51
51
|
const loadingAnnouncementID = `${uuid}-loading-announcement`;
|
|
52
52
|
|
|
@@ -76,7 +76,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
|
|
|
76
76
|
"data-component": "Button",
|
|
77
77
|
...rest,
|
|
78
78
|
// @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
|
|
79
|
-
ref:
|
|
79
|
+
ref: mergedRef,
|
|
80
80
|
className: clsx(classes.ButtonBase, className),
|
|
81
81
|
"data-block": block ? 'block' : null,
|
|
82
82
|
"data-inactive": inactive ? true : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/useTable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAyB,aAAa,EAAyB,MAAM,WAAW,CAAA;AAGvF,UAAU,WAAW,CAAC,IAAI,SAAS,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACrD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAAA;CAC7C;AAED,UAAU,KAAK,CAAC,IAAI,SAAS,SAAS;IACpC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;IACtB,OAAO,EAAE;QACP,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;KACvC,CAAA;IACD,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;CAChE;AAED,UAAU,MAAM,CAAC,IAAI,SAAS,SAAS;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,UAAU,EAAE,MAAM,OAAO,CAAA;IACzB,gBAAgB,EAAE,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;CACvE;AAED,UAAU,GAAG,CAAC,IAAI,SAAS,SAAS;IAClC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,UAAU,IAAI,CAAC,IAAI,SAAS,SAAS;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;IAChC,SAAS,EAAE,OAAO,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,IAAI,SAAS,SAAS,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,QAAQ,GACT,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"useTable.d.ts","sourceRoot":"","sources":["../../src/DataTable/useTable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AACpC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,EAAyB,aAAa,EAAyB,MAAM,WAAW,CAAA;AAGvF,UAAU,WAAW,CAAC,IAAI,SAAS,SAAS;IAC1C,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,oBAAoB,CAAC,EAAE,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;IACrD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,EAAE,CAAC,OAAO,EAAE,IAAI,KAAK,MAAM,GAAG,MAAM,CAAA;CAC7C;AAED,UAAU,KAAK,CAAC,IAAI,SAAS,SAAS;IACpC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAA;IAC5B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAA;IACtB,OAAO,EAAE;QACP,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;KACvC,CAAA;IACD,mBAAmB,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAA;CAChE;AAED,UAAU,MAAM,CAAC,IAAI,SAAS,SAAS;IACrC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,UAAU,EAAE,MAAM,OAAO,CAAA;IACzB,gBAAgB,EAAE,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA;CACvE;AAED,UAAU,GAAG,CAAC,IAAI,SAAS,SAAS;IAClC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACjC,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,UAAU,IAAI,CAAC,IAAI,SAAS,SAAS;IACnC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC,MAAM,IAAI,CAAC,CAAA;IAChC,SAAS,EAAE,OAAO,CAAA;CACnB;AAID,wBAAgB,QAAQ,CAAC,IAAI,SAAS,SAAS,EAAE,EAC/C,OAAO,EACP,IAAI,EACJ,iBAAiB,EACjB,oBAAoB,EACpB,eAAe,EACf,QAAQ,GACT,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CA0KjC;AAyED,wBAAgB,cAAc,CAAC,IAAI,SAAS,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG;IAAC,mBAAmB,EAAE,MAAM,CAAA;CAAC,CAIlH;AAED,wBAAgB,0BAA0B,CAAC,IAAI,SAAS,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,MAAM,EAAE,CAwCzG"}
|
|
@@ -114,16 +114,18 @@ function useTable(t0) {
|
|
|
114
114
|
}
|
|
115
115
|
const valueA = get(a, header_1.column.field);
|
|
116
116
|
const valueB = get(b, header_1.column.field);
|
|
117
|
-
|
|
117
|
+
const valueAIsBlank = isBlankValue(valueA);
|
|
118
|
+
const valueBIsBlank = isBlankValue(valueB);
|
|
119
|
+
if (!valueAIsBlank && !valueBIsBlank) {
|
|
118
120
|
if (state.direction === SortDirection.ASC) {
|
|
119
121
|
return sortMethod(valueA, valueB);
|
|
120
122
|
}
|
|
121
123
|
return sortMethod(valueB, valueA);
|
|
122
124
|
}
|
|
123
|
-
if (
|
|
125
|
+
if (!valueAIsBlank) {
|
|
124
126
|
return -1;
|
|
125
127
|
}
|
|
126
|
-
if (
|
|
128
|
+
if (!valueBIsBlank) {
|
|
127
129
|
return 1;
|
|
128
130
|
}
|
|
129
131
|
return 0;
|
|
@@ -296,5 +298,8 @@ function get(object, path) {
|
|
|
296
298
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
297
299
|
}, object);
|
|
298
300
|
}
|
|
301
|
+
function isBlankValue(value) {
|
|
302
|
+
return value === null || value === undefined || value === '';
|
|
303
|
+
}
|
|
299
304
|
|
|
300
305
|
export { getGridTemplateFromColumns, useTable, useTableLayout };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
|
|
2
|
+
/*# sourceMappingURL=Dialog-b7da369a.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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,0DAAiD,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,4CAAwC,CACxC,8CAAwC,CACxC,wEAAmE,CACnE,4GAAwC,CAXxC,YAAa,CAOb,qBAAsB,CAFtB,WAAY,CACZ,8BAA+B,CAF/B,6BAA8B,CAD9B,eAAgB,CAShB,SAAU,CAVV,+BAuJF,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,+BAwBF,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,CAOF,kCAGE,yBAA2B,CAD3B,sDAEF,CAEA,wCACE,WACF,CAQA,0CACE,cAYF,CAVE,kFAGE,wCAAwB,CADxB,0FAA0E,CAE1E,+BAKF,CAHE,4CANF,kFAOI,+GAEJ,CADE,CAIJ,yBAME,qDAA8C,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,kCAA2B,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-b7da369a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n from,\n to {\n --can-scroll: 1;\n }\n}\n\n.Backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n background-color: var(--overlay-backdrop-bgColor);\n animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n align-items: center;\n justify-content: center;\n\n &[data-position-regular='center'] {\n align-items: center;\n justify-content: center;\n }\n\n &[data-position-regular='left'] {\n align-items: center;\n justify-content: flex-start;\n }\n\n &[data-position-regular='right'] {\n align-items: center;\n justify-content: flex-end;\n }\n\n /* align only applies when regular position is center (or absent).\n * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n * always win when data-position-narrow is bottom or fullscreen. */\n &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n align-items: center;\n justify-content: center;\n\n /* align still applies when narrow position is center */\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n &[data-position-narrow='bottom'] {\n align-items: end;\n justify-content: center;\n }\n }\n}\n\n.Dialog {\n display: flex;\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n min-width: 296px;\n max-width: calc(100dvw - 64px);\n height: auto;\n max-height: calc(100dvh - 64px);\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n &[data-position-regular='center'] {\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n /* align margins only apply when regular position is center */\n &[data-align='top'] {\n margin-top: var(--base-size-64);\n }\n\n &[data-align='bottom'] {\n margin-bottom: var(--base-size-64);\n }\n }\n\n &[data-position-regular='left'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-regular='right'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n height: auto;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n }\n\n @media (max-height: 280px) {\n max-height: calc(100dvh - 12px);\n max-width: calc(100dvw - 12px);\n }\n\n &[data-position-narrow='bottom'] {\n width: 100dvw;\n max-width: 100dvw;\n height: auto;\n max-height: calc(100dvh - 64px);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n /* reset align margins since position wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-narrow='fullscreen'] {\n width: 100%;\n max-width: 100dvw;\n height: 100%;\n max-height: 100dvh;\n border-radius: unset !important;\n flex-grow: 1;\n\n /* reset align margins since fullscreen wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--prc-dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n --can-scroll: 0;\n\n .DialogOverflowWrapper {\n /* If the browser does not support the `animation-timeline` property, always show a border */\n border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n animation: detect-scroll;\n animation-timeline: scroll(self);\n\n @supports (animation-timeline: scroll(self)) {\n border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n }\n }\n}\n\n.Header {\n z-index: 1;\n max-height: 35vh;\n padding: var(--base-size-8);\n overflow-y: auto;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n flex-shrink: 0;\n}\n\n.HeaderInner {\n display: flex;\n}\n\n.HeaderContent {\n display: flex;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Title {\n margin: 0; /* override default margin */\n font-size: var(--text-body-size-medium);\n font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n margin: 0; /* override default margin */\n margin-top: var(--base-size-4);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n}\n\n.Body {\n padding: var(--base-size-16);\n overflow: auto;\n flex-grow: 1;\n}\n\n.Footer {\n z-index: 1;\n display: flex;\n flex-flow: wrap;\n justify-content: flex-end;\n padding: var(--base-size-16);\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n flex-wrap: nowrap;\n overflow-x: scroll;\n flex-direction: row;\n justify-content: unset;\n}\n"]}
|
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { type CSSProperties } from 'react';
|
|
2
2
|
import type { ButtonProps } from '../Button';
|
|
3
3
|
import type { ResponsiveValue } from '../hooks/useResponsiveValue';
|
|
4
4
|
import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
|
|
@@ -88,6 +88,8 @@ export interface DialogProps {
|
|
|
88
88
|
* medium: 320px
|
|
89
89
|
* large: 480px
|
|
90
90
|
* xlarge: 640px
|
|
91
|
+
*
|
|
92
|
+
* Also accepts any valid CSS width value (e.g. '400px', '80rem').
|
|
91
93
|
*/
|
|
92
94
|
width?: DialogWidth;
|
|
93
95
|
/**
|
|
@@ -152,7 +154,7 @@ declare const widthMap: {
|
|
|
152
154
|
readonly large: "480px";
|
|
153
155
|
readonly xlarge: "640px";
|
|
154
156
|
};
|
|
155
|
-
export type DialogWidth = keyof typeof widthMap
|
|
157
|
+
export type DialogWidth = keyof typeof widthMap | Exclude<CSSProperties['width'], undefined>;
|
|
156
158
|
export type DialogHeight = keyof typeof heightMap;
|
|
157
159
|
export declare const DialogContext: React.Context<object | undefined>;
|
|
158
160
|
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
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,18 +6,26 @@ import { XIcon } from '@primer/octicons-react';
|
|
|
6
6
|
import { useFocusZone } from '../hooks/useFocusZone.js';
|
|
7
7
|
import { FocusKeys } from '@primer/behaviors';
|
|
8
8
|
import { Portal } from '../Portal/Portal.js';
|
|
9
|
-
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
|
|
10
9
|
import { useId } from '../hooks/useId.js';
|
|
11
10
|
import classes from './Dialog.module.css.js';
|
|
12
11
|
import { clsx } from 'clsx';
|
|
13
12
|
import { useSlots } from '../hooks/useSlots.js';
|
|
14
13
|
import { useResizeObserver } from '../hooks/useResizeObserver.js';
|
|
15
14
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
15
|
+
import { useMergedRefs } from '../hooks/useMergedRefs.js';
|
|
16
16
|
import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
|
|
17
17
|
import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
|
|
18
18
|
import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
|
|
19
19
|
|
|
20
20
|
let dialogScrollDisabledCount = 0;
|
|
21
|
+
const widthMap = {
|
|
22
|
+
small: '296px',
|
|
23
|
+
medium: '320px',
|
|
24
|
+
large: '480px',
|
|
25
|
+
xlarge: '640px'
|
|
26
|
+
};
|
|
27
|
+
const isWidthMapKey = width => typeof width === 'string' && Object.hasOwn(widthMap, width);
|
|
28
|
+
const normalizeWidth = width => typeof width === 'number' ? `${width}px` : width;
|
|
21
29
|
const DefaultHeader = ({
|
|
22
30
|
dialogLabelId,
|
|
23
31
|
title,
|
|
@@ -133,7 +141,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
133
141
|
footer: Dialog.Footer
|
|
134
142
|
});
|
|
135
143
|
const dialogRef = useRef(null);
|
|
136
|
-
|
|
144
|
+
const mergedDialogRef = useMergedRefs(forwardedRef, dialogRef);
|
|
137
145
|
const backdropRef = useRef(null);
|
|
138
146
|
useFocusTrap({
|
|
139
147
|
containerRef: dialogRef,
|
|
@@ -209,7 +217,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
209
217
|
setLastMouseDownIsBackdrop(e.target === e.currentTarget);
|
|
210
218
|
},
|
|
211
219
|
children: /*#__PURE__*/jsxs("div", {
|
|
212
|
-
ref:
|
|
220
|
+
ref: mergedDialogRef,
|
|
213
221
|
role: role,
|
|
214
222
|
"aria-labelledby": dialogLabelId,
|
|
215
223
|
"aria-describedby": dialogDescriptionId,
|
|
@@ -218,12 +226,17 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
218
226
|
...(align && {
|
|
219
227
|
'data-align': align
|
|
220
228
|
}),
|
|
221
|
-
"data-width": width,
|
|
229
|
+
"data-width": isWidthMapKey(width) ? width : undefined,
|
|
222
230
|
"data-height": height,
|
|
223
231
|
"data-has-footer": hasFooter ? '' : undefined,
|
|
224
232
|
"data-footer-button-layout": hasFooter ? footerButtonLayout : undefined,
|
|
225
233
|
className: clsx(className, classes.Dialog),
|
|
226
|
-
style:
|
|
234
|
+
style: {
|
|
235
|
+
...style,
|
|
236
|
+
...(!isWidthMapKey(width) ? {
|
|
237
|
+
'--dialog-width': normalizeWidth(width)
|
|
238
|
+
} : {})
|
|
239
|
+
},
|
|
227
240
|
"data-component": dataComponent,
|
|
228
241
|
children: [header, /*#__PURE__*/jsx(ScrollableRegion, {
|
|
229
242
|
"aria-labelledby": dialogLabelId,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './Dialog-
|
|
1
|
+
import './Dialog-b7da369a.css';
|
|
2
2
|
|
|
3
3
|
var classes = {"Backdrop":"prc-Dialog-Backdrop-5Nt2U","dialog-backdrop-appear":"prc-Dialog-dialog-backdrop-appear-tCG2K","Dialog":"prc-Dialog-Dialog-G8cDF","Overlay--motion-scaleFade":"prc-Dialog-Overlay--motion-scaleFade-mE6-C","Overlay--motion-slideInRight":"prc-Dialog-Overlay--motion-slideInRight-BR-CZ","Overlay--motion-slideInLeft":"prc-Dialog-Overlay--motion-slideInLeft-ISmQZ","Overlay--motion-slideUp":"prc-Dialog-Overlay--motion-slideUp-tPElO","DialogOverflowWrapper":"prc-Dialog-DialogOverflowWrapper-JvHzz","detect-scroll":"prc-Dialog-detect-scroll-b3i8Q","Header":"prc-Dialog-Header-f7Me-","HeaderInner":"prc-Dialog-HeaderInner-H-fFY","HeaderContent":"prc-Dialog-HeaderContent-mjAsn","Title":"prc-Dialog-Title-M-iPn","Subtitle":"prc-Dialog-Subtitle-aBFSq","Body":"prc-Dialog-Body-bB903","Footer":"prc-Dialog-Footer-PMeQk"};
|
|
4
4
|
|
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 { useMergedRefs } from '../hooks/useMergedRefs.js';
|
|
6
6
|
|
|
7
7
|
const Heading = /*#__PURE__*/forwardRef(({
|
|
8
8
|
as: Component = 'h2',
|
|
@@ -11,7 +11,7 @@ const Heading = /*#__PURE__*/forwardRef(({
|
|
|
11
11
|
...props
|
|
12
12
|
}, forwardedRef) => {
|
|
13
13
|
const innerRef = React.useRef(null);
|
|
14
|
-
|
|
14
|
+
const mergedRef = useMergedRefs(forwardedRef, innerRef);
|
|
15
15
|
if (process.env.NODE_ENV !== "production") {
|
|
16
16
|
/**
|
|
17
17
|
* The Linter yells because it thinks this conditionally calls an effect,
|
|
@@ -32,7 +32,7 @@ const Heading = /*#__PURE__*/forwardRef(({
|
|
|
32
32
|
"data-variant": variant,
|
|
33
33
|
"data-component": "Heading",
|
|
34
34
|
...props,
|
|
35
|
-
ref:
|
|
35
|
+
ref: mergedRef
|
|
36
36
|
});
|
|
37
37
|
});
|
|
38
38
|
Heading.displayName = 'Heading';
|
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 { useMergedRefs } from '../hooks/useMergedRefs.js';
|
|
7
7
|
|
|
8
8
|
const UnwrappedLink = (props, ref) => {
|
|
9
9
|
const {
|
|
@@ -15,7 +15,7 @@ const UnwrappedLink = (props, ref) => {
|
|
|
15
15
|
...restProps
|
|
16
16
|
} = props;
|
|
17
17
|
const innerRef = React.useRef(null);
|
|
18
|
-
|
|
18
|
+
const mergedRef = useMergedRefs(ref, innerRef);
|
|
19
19
|
if (process.env.NODE_ENV !== "production") {
|
|
20
20
|
/**
|
|
21
21
|
* The Linter yells because it thinks this conditionally calls an effect,
|
|
@@ -39,7 +39,7 @@ const UnwrappedLink = (props, ref) => {
|
|
|
39
39
|
"data-hover-color": hoverColor,
|
|
40
40
|
...restProps,
|
|
41
41
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
42
|
-
ref:
|
|
42
|
+
ref: mergedRef
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
45
|
UnwrappedLink.displayName = "UnwrappedLink";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC9D,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
|
package/dist/Overlay/Overlay.js
CHANGED
|
@@ -2,10 +2,10 @@ 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 { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
|
|
6
5
|
import classes from './Overlay.module.css.js';
|
|
7
6
|
import { clsx } from 'clsx';
|
|
8
7
|
import { jsx } from 'react/jsx-runtime';
|
|
8
|
+
import { useMergedRefs } from '../hooks/useMergedRefs.js';
|
|
9
9
|
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
|
|
10
10
|
import { useOverlay } from '../hooks/useOverlay.js';
|
|
11
11
|
|
|
@@ -124,7 +124,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
|
|
|
124
124
|
|
|
125
125
|
*/
|
|
126
126
|
const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
127
|
-
const $ = c(
|
|
127
|
+
const $ = c(47);
|
|
128
128
|
let _PrivateDisablePortal;
|
|
129
129
|
let anchorSide;
|
|
130
130
|
let ignoreClickRefs;
|
|
@@ -209,7 +209,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
209
209
|
const visibility = t4 === undefined ? "visible" : t4;
|
|
210
210
|
const width = t5 === undefined ? "auto" : t5;
|
|
211
211
|
const overlayRef = useRef(null);
|
|
212
|
-
|
|
212
|
+
const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
|
|
213
213
|
const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
|
|
214
214
|
let t6;
|
|
215
215
|
if ($[19] !== ignoreClickRefs || $[20] !== initialFocusRef || $[21] !== onClickOutside || $[22] !== onEscape || $[23] !== preventFocusOnOpen || $[24] !== returnFocusRef) {
|
|
@@ -283,12 +283,12 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
283
283
|
const leftPosition = left === undefined && right === undefined ? 0 : left;
|
|
284
284
|
const t11 = !preventOverflow ? true : undefined;
|
|
285
285
|
let t12;
|
|
286
|
-
if ($[33] !== height || $[34] !== leftPosition || $[35] !==
|
|
286
|
+
if ($[33] !== height || $[34] !== leftPosition || $[35] !== mergedOverlayRef || $[36] !== props || $[37] !== responsiveVariant || $[38] !== right || $[39] !== role || $[40] !== t11 || $[41] !== visibility || $[42] !== width) {
|
|
287
287
|
t12 = /*#__PURE__*/jsx(BaseOverlay, {
|
|
288
288
|
role: role,
|
|
289
289
|
width: width,
|
|
290
290
|
"data-reflow-container": t11,
|
|
291
|
-
ref:
|
|
291
|
+
ref: mergedOverlayRef,
|
|
292
292
|
left: leftPosition,
|
|
293
293
|
right: right,
|
|
294
294
|
height: height,
|
|
@@ -298,32 +298,33 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
298
298
|
});
|
|
299
299
|
$[33] = height;
|
|
300
300
|
$[34] = leftPosition;
|
|
301
|
-
$[35] =
|
|
302
|
-
$[36] =
|
|
303
|
-
$[37] =
|
|
304
|
-
$[38] =
|
|
305
|
-
$[39] =
|
|
306
|
-
$[40] =
|
|
307
|
-
$[41] =
|
|
308
|
-
$[42] =
|
|
301
|
+
$[35] = mergedOverlayRef;
|
|
302
|
+
$[36] = props;
|
|
303
|
+
$[37] = responsiveVariant;
|
|
304
|
+
$[38] = right;
|
|
305
|
+
$[39] = role;
|
|
306
|
+
$[40] = t11;
|
|
307
|
+
$[41] = visibility;
|
|
308
|
+
$[42] = width;
|
|
309
|
+
$[43] = t12;
|
|
309
310
|
} else {
|
|
310
|
-
t12 = $[
|
|
311
|
+
t12 = $[43];
|
|
311
312
|
}
|
|
312
313
|
const overlayContent = t12;
|
|
313
314
|
if (_PrivateDisablePortal && cssAnchorPositioning) {
|
|
314
315
|
return overlayContent;
|
|
315
316
|
}
|
|
316
317
|
let t13;
|
|
317
|
-
if ($[
|
|
318
|
+
if ($[44] !== overlayContent || $[45] !== portalContainerName) {
|
|
318
319
|
t13 = /*#__PURE__*/jsx(Portal, {
|
|
319
320
|
containerName: portalContainerName,
|
|
320
321
|
children: overlayContent
|
|
321
322
|
});
|
|
322
|
-
$[
|
|
323
|
-
$[
|
|
324
|
-
$[
|
|
323
|
+
$[44] = overlayContent;
|
|
324
|
+
$[45] = portalContainerName;
|
|
325
|
+
$[46] = t13;
|
|
325
326
|
} else {
|
|
326
|
-
t13 = $[
|
|
327
|
+
t13 = $[46];
|
|
327
328
|
}
|
|
328
329
|
return t13;
|
|
329
330
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useRef, memo } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useId } from '../hooks/useId.js';
|
|
4
|
-
import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
|
|
5
4
|
import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
|
|
6
5
|
import { useSlots } from '../hooks/useSlots.js';
|
|
7
6
|
import { useOverflow } from '../hooks/useOverflow.js';
|
|
@@ -11,6 +10,7 @@ import classes from './PageLayout.module.css.js';
|
|
|
11
10
|
import { usePaneWidth, isPaneWidth, isCustomWidthOptions, updateAriaValues, ARROW_KEY_STEP } from './usePaneWidth.js';
|
|
12
11
|
import { setDraggingStyles, removeDraggingStyles } from './paneUtils.js';
|
|
13
12
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
13
|
+
import { useMergedRefs } from '../hooks/useMergedRefs.js';
|
|
14
14
|
|
|
15
15
|
const isArrowKey = key => key === 'ArrowLeft' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowDown';
|
|
16
16
|
const isShrinkKey = key => key === 'ArrowLeft' || key === 'ArrowDown';
|
|
@@ -581,7 +581,7 @@ const Pane = /*#__PURE__*/React.forwardRef(({
|
|
|
581
581
|
onResizeEnd,
|
|
582
582
|
currentWidth: controlledWidth
|
|
583
583
|
});
|
|
584
|
-
|
|
584
|
+
const mergedPaneRef = useMergedRefs(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: mergedPaneRef
|
|
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
|
+
const mergedSidebarRef = useMergedRefs(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: mergedSidebarRef
|
|
828
828
|
// Suppress hydration mismatch for --pane-width when localStorage
|
|
829
829
|
// provides a width that differs from the server-rendered default.
|
|
830
830
|
,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePaneWidth.d.ts","sourceRoot":"","sources":["../../src/PageLayout/usePaneWidth.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"usePaneWidth.d.ts","sourceRoot":"","sources":["../../src/PageLayout/usePaneWidth.ts"],"names":[],"mappings":"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"}
|