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