@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.
Files changed (35) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/ActionBar/ActionBar-e63def3c.css +2 -0
  3. package/dist/ActionBar/ActionBar-e63def3c.css.map +1 -0
  4. package/dist/ActionBar/ActionBar.d.ts +1 -1
  5. package/dist/ActionBar/ActionBar.d.ts.map +1 -1
  6. package/dist/ActionBar/ActionBar.js +298 -384
  7. package/dist/ActionBar/ActionBar.module.css.js +2 -2
  8. package/dist/ActionBar/index.d.ts +1 -1
  9. package/dist/ActionList/Heading.js +17 -16
  10. package/dist/Autocomplete/AutocompleteInput.js +3 -3
  11. package/dist/Autocomplete/AutocompleteOverlay.js +3 -3
  12. package/dist/Button/ButtonBase.js +3 -3
  13. package/dist/DataTable/useTable.d.ts.map +1 -1
  14. package/dist/DataTable/useTable.js +8 -3
  15. package/dist/Dialog/Dialog-b7da369a.css +2 -0
  16. package/dist/Dialog/Dialog-b7da369a.css.map +1 -0
  17. package/dist/Dialog/Dialog.d.ts +4 -2
  18. package/dist/Dialog/Dialog.d.ts.map +1 -1
  19. package/dist/Dialog/Dialog.js +18 -5
  20. package/dist/Dialog/Dialog.module.css.js +1 -1
  21. package/dist/Heading/Heading.js +3 -3
  22. package/dist/Link/Link.js +3 -3
  23. package/dist/Overlay/Overlay.d.ts.map +1 -1
  24. package/dist/Overlay/Overlay.js +20 -19
  25. package/dist/PageLayout/PageLayout.js +5 -5
  26. package/dist/PageLayout/usePaneWidth.d.ts.map +1 -1
  27. package/dist/PageLayout/usePaneWidth.js +12 -6
  28. package/dist/TextInputWithTokens/TextInputWithTokens.js +91 -90
  29. package/dist/deprecated/DialogV1/Dialog.js +10 -9
  30. package/generated/components.json +2 -2
  31. package/package.json +1 -1
  32. package/dist/ActionBar/ActionBar-a41224b2.css +0 -2
  33. package/dist/ActionBar/ActionBar-a41224b2.css.map +0 -1
  34. package/dist/Dialog/Dialog-f9bb927a.css +0 -2
  35. package/dist/Dialog/Dialog-f9bb927a.css.map +0 -1
@@ -1,5 +1,5 @@
1
- import './ActionBar-a41224b2.css';
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 | null;
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 { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
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(20);
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
- useRefObjectAsForwardedRef(forwardedRef, innerRef);
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] !== props || $[13] !== size || $[14] !== t3 || $[15] !== t4) {
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: innerRef,
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] = props;
84
- $[13] = size;
85
- $[14] = t3;
86
- $[15] = t4;
87
- $[16] = t5;
83
+ $[12] = mergedRef;
84
+ $[13] = props;
85
+ $[14] = size;
86
+ $[15] = t3;
87
+ $[16] = t4;
88
+ $[17] = t5;
88
89
  } else {
89
- t5 = $[16];
90
+ t5 = $[17];
90
91
  }
91
92
  let t6;
92
- if ($[17] !== t2 || $[18] !== t5) {
93
+ if ($[18] !== t2 || $[19] !== t5) {
93
94
  t6 = /*#__PURE__*/jsx(VisuallyHidden, {
94
95
  isVisible: t2,
95
96
  children: t5
96
97
  });
97
- $[17] = t2;
98
- $[18] = t5;
99
- $[19] = t6;
98
+ $[18] = t2;
99
+ $[19] = t5;
100
+ $[20] = t6;
100
101
  } else {
101
- t6 = $[19];
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 { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
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
- useRefObjectAsForwardedRef(forwardedRef, inputRef);
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: inputRef,
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 { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
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
- useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
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: floatingElementRef,
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 { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
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
- useRefObjectAsForwardedRef(forwardedRef, innerRef);
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: innerRef,
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,CAuKjC;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"}
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
- if (valueA && valueB) {
117
+ const valueAIsBlank = isBlankValue(valueA);
118
+ const valueBIsBlank = isBlankValue(valueB);
119
+ if (!valueAIsBlank && !valueBIsBlank) {
118
120
  if (state.direction === SortDirection.ASC) {
119
121
  return sortMethod(valueA, valueB);
120
122
  }
121
123
  return sortMethod(valueB, valueA);
122
124
  }
123
- if (valueA) {
125
+ if (!valueAIsBlank) {
124
126
  return -1;
125
127
  }
126
- if (valueB) {
128
+ if (!valueBIsBlank) {
127
129
  return 1;
128
130
  }
129
131
  return 0;
@@ -296,5 +298,8 @@ function get(object, path) {
296
298
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
297
299
  }, object);
298
300
  }
301
+ function isBlankValue(value) {
302
+ return value === null || value === undefined || value === '';
303
+ }
299
304
 
300
305
  export { getGridTemplateFromColumns, useTable, useTableLayout };
@@ -0,0 +1,2 @@
1
+ @property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
2
+ /*# sourceMappingURL=Dialog-b7da369a.css.map */
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","file":"Dialog-b7da369a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n initial-value: 0;\n inherits: false;\n syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n from,\n to {\n --can-scroll: 1;\n }\n}\n\n.Backdrop {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n background-color: var(--overlay-backdrop-bgColor);\n animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n align-items: center;\n justify-content: center;\n\n &[data-position-regular='center'] {\n align-items: center;\n justify-content: center;\n }\n\n &[data-position-regular='left'] {\n align-items: center;\n justify-content: flex-start;\n }\n\n &[data-position-regular='right'] {\n align-items: center;\n justify-content: flex-end;\n }\n\n /* align only applies when regular position is center (or absent).\n * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n * always win when data-position-narrow is bottom or fullscreen. */\n &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n align-items: center;\n justify-content: center;\n\n /* align still applies when narrow position is center */\n &[data-align='top'] {\n align-items: flex-start;\n }\n\n &[data-align='center'] {\n align-items: center;\n }\n\n &[data-align='bottom'] {\n align-items: flex-end;\n }\n }\n\n &[data-position-narrow='bottom'] {\n align-items: end;\n justify-content: center;\n }\n }\n}\n\n.Dialog {\n display: flex;\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n min-width: 296px;\n max-width: calc(100dvw - 64px);\n height: auto;\n max-height: calc(100dvh - 64px);\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n &[data-position-regular='center'] {\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n\n /* align margins only apply when regular position is center */\n &[data-align='top'] {\n margin-top: var(--base-size-64);\n }\n\n &[data-align='bottom'] {\n margin-bottom: var(--base-size-64);\n }\n }\n\n &[data-position-regular='left'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-regular='right'] {\n height: 100dvh;\n max-height: unset;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n }\n }\n\n @media (max-width: 767px) {\n &[data-position-narrow='center'] {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: var(--dialog-width, 640px);\n height: auto;\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n &:where([data-width='small']) {\n width: 296px;\n }\n\n &:where([data-width='medium']) {\n width: 320px;\n }\n\n &:where([data-width='large']) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-height='small']) {\n height: 480px;\n }\n\n &:where([data-height='large']) {\n height: 640px;\n }\n }\n\n @media (max-height: 280px) {\n max-height: calc(100dvh - 12px);\n max-width: calc(100dvw - 12px);\n }\n\n &[data-position-narrow='bottom'] {\n width: 100dvw;\n max-width: 100dvw;\n height: auto;\n max-height: calc(100dvh - 64px);\n border-radius: var(--borderRadius-large, var(--borderRadius-large));\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n /* reset align margins since position wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n\n &[data-position-narrow='fullscreen'] {\n width: 100%;\n max-width: 100dvw;\n height: 100%;\n max-height: 100dvh;\n border-radius: unset !important;\n flex-grow: 1;\n\n /* reset align margins since fullscreen wins at narrow */\n &[data-align] {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n }\n }\n }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n /* stylelint-disable-next-line primer/spacing */\n padding-right: var(--prc-dialog-scrollgutter) !important;\n overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n --can-scroll: 0;\n\n .DialogOverflowWrapper {\n /* If the browser does not support the `animation-timeline` property, always show a border */\n border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n animation: detect-scroll;\n animation-timeline: scroll(self);\n\n @supports (animation-timeline: scroll(self)) {\n border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n }\n }\n}\n\n.Header {\n z-index: 1;\n max-height: 35vh;\n padding: var(--base-size-8);\n overflow-y: auto;\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n flex-shrink: 0;\n}\n\n.HeaderInner {\n display: flex;\n}\n\n.HeaderContent {\n display: flex;\n padding-inline: var(--base-size-8);\n padding-block: var(--base-size-6);\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Title {\n margin: 0; /* override default margin */\n font-size: var(--text-body-size-medium);\n font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n margin: 0; /* override default margin */\n margin-top: var(--base-size-4);\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n}\n\n.Body {\n padding: var(--base-size-16);\n overflow: auto;\n flex-grow: 1;\n}\n\n.Footer {\n z-index: 1;\n display: flex;\n flex-flow: wrap;\n justify-content: flex-end;\n padding: var(--base-size-16);\n gap: var(--base-size-8);\n flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n flex-wrap: nowrap;\n overflow-x: scroll;\n flex-direction: row;\n justify-content: unset;\n}\n"]}
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { type CSSProperties } from 'react';
2
2
  import type { ButtonProps } from '../Button';
3
3
  import type { ResponsiveValue } from '../hooks/useResponsiveValue';
4
4
  import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
@@ -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":"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"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"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"}
@@ -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
- useRefObjectAsForwardedRef(forwardedRef, dialogRef);
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: dialogRef,
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: 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-f9bb927a.css';
1
+ import './Dialog-b7da369a.css';
2
2
 
3
3
  var classes = {"Backdrop":"prc-Dialog-Backdrop-5Nt2U","dialog-backdrop-appear":"prc-Dialog-dialog-backdrop-appear-tCG2K","Dialog":"prc-Dialog-Dialog-G8cDF","Overlay--motion-scaleFade":"prc-Dialog-Overlay--motion-scaleFade-mE6-C","Overlay--motion-slideInRight":"prc-Dialog-Overlay--motion-slideInRight-BR-CZ","Overlay--motion-slideInLeft":"prc-Dialog-Overlay--motion-slideInLeft-ISmQZ","Overlay--motion-slideUp":"prc-Dialog-Overlay--motion-slideUp-tPElO","DialogOverflowWrapper":"prc-Dialog-DialogOverflowWrapper-JvHzz","detect-scroll":"prc-Dialog-detect-scroll-b3i8Q","Header":"prc-Dialog-Header-f7Me-","HeaderInner":"prc-Dialog-HeaderInner-H-fFY","HeaderContent":"prc-Dialog-HeaderContent-mjAsn","Title":"prc-Dialog-Title-M-iPn","Subtitle":"prc-Dialog-Subtitle-aBFSq","Body":"prc-Dialog-Body-bB903","Footer":"prc-Dialog-Footer-PMeQk"};
4
4
 
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
2
2
  import React, { forwardRef, useEffect } from 'react';
3
3
  import classes from './Heading.module.css.js';
4
4
  import { jsx } from 'react/jsx-runtime';
5
- import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
5
+ import { useMergedRefs } from '../hooks/useMergedRefs.js';
6
6
 
7
7
  const Heading = /*#__PURE__*/forwardRef(({
8
8
  as: Component = 'h2',
@@ -11,7 +11,7 @@ const Heading = /*#__PURE__*/forwardRef(({
11
11
  ...props
12
12
  }, forwardedRef) => {
13
13
  const innerRef = React.useRef(null);
14
- useRefObjectAsForwardedRef(forwardedRef, innerRef);
14
+ const mergedRef = useMergedRefs(forwardedRef, innerRef);
15
15
  if (process.env.NODE_ENV !== "production") {
16
16
  /**
17
17
  * The Linter yells because it thinks this conditionally calls an effect,
@@ -32,7 +32,7 @@ const Heading = /*#__PURE__*/forwardRef(({
32
32
  "data-variant": variant,
33
33
  "data-component": "Heading",
34
34
  ...props,
35
- ref: innerRef
35
+ ref: mergedRef
36
36
  });
37
37
  });
38
38
  Heading.displayName = 'Heading';
package/dist/Link/Link.js CHANGED
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
3
3
  import classes from './Link.module.css.js';
4
4
  import { fixedForwardRef } from '../utils/modern-polymorphic.js';
5
5
  import { jsx } from 'react/jsx-runtime';
6
- import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
6
+ import { useMergedRefs } from '../hooks/useMergedRefs.js';
7
7
 
8
8
  const UnwrappedLink = (props, ref) => {
9
9
  const {
@@ -15,7 +15,7 @@ const UnwrappedLink = (props, ref) => {
15
15
  ...restProps
16
16
  } = props;
17
17
  const innerRef = React.useRef(null);
18
- useRefObjectAsForwardedRef(ref, innerRef);
18
+ const mergedRef = useMergedRefs(ref, innerRef);
19
19
  if (process.env.NODE_ENV !== "production") {
20
20
  /**
21
21
  * The Linter yells because it thinks this conditionally calls an effect,
@@ -39,7 +39,7 @@ const UnwrappedLink = (props, ref) => {
39
39
  "data-hover-color": hoverColor,
40
40
  ...restProps,
41
41
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
42
- ref: innerRef
42
+ ref: mergedRef
43
43
  });
44
44
  };
45
45
  UnwrappedLink.displayName = "UnwrappedLink";
@@ -1 +1 @@
1
- {"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
@@ -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(46);
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
- useRefObjectAsForwardedRef(forwardedRef, overlayRef);
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] !== props || $[36] !== responsiveVariant || $[37] !== right || $[38] !== role || $[39] !== t11 || $[40] !== visibility || $[41] !== width) {
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: overlayRef,
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] = props;
302
- $[36] = responsiveVariant;
303
- $[37] = right;
304
- $[38] = role;
305
- $[39] = t11;
306
- $[40] = visibility;
307
- $[41] = width;
308
- $[42] = t12;
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 = $[42];
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 ($[43] !== overlayContent || $[44] !== portalContainerName) {
318
+ if ($[44] !== overlayContent || $[45] !== portalContainerName) {
318
319
  t13 = /*#__PURE__*/jsx(Portal, {
319
320
  containerName: portalContainerName,
320
321
  children: overlayContent
321
322
  });
322
- $[43] = overlayContent;
323
- $[44] = portalContainerName;
324
- $[45] = t13;
323
+ $[44] = overlayContent;
324
+ $[45] = portalContainerName;
325
+ $[46] = t13;
325
326
  } else {
326
- t13 = $[45];
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
- useRefObjectAsForwardedRef(forwardRef, paneRef);
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: paneRef
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
- useRefObjectAsForwardedRef(forwardRef, sidebarRef);
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: sidebarRef
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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"}