@primer/react 38.1.0-rc.2446ad616 → 38.1.0-rc.430f77ae3
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 +4 -0
- package/dist/Dialog/Dialog.d.ts +3 -23
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/Dialog.js +18 -3
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts +4 -0
- package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts.map +1 -1
- package/dist/internal/components/UnderlineTabbedInterface.js +1 -1
- package/generated/components.json +6 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -8,8 +8,12 @@
|
|
|
8
8
|
|
|
9
9
|
### Patch Changes
|
|
10
10
|
|
|
11
|
+
- [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
|
|
12
|
+
|
|
11
13
|
- [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element
|
|
12
14
|
|
|
15
|
+
- [#7097](https://github.com/primer/react/pull/7097) [`12fad7a`](https://github.com/primer/react/commit/12fad7af4d9d31898dfff5d3419987100b398d9e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix UnderlineWrapper html structure
|
|
16
|
+
|
|
13
17
|
## 38.0.0
|
|
14
18
|
|
|
15
19
|
### Major Changes
|
package/dist/Dialog/Dialog.d.ts
CHANGED
|
@@ -142,35 +142,15 @@ declare const widthMap: {
|
|
|
142
142
|
};
|
|
143
143
|
export type DialogWidth = keyof typeof widthMap;
|
|
144
144
|
export type DialogHeight = keyof typeof heightMap;
|
|
145
|
-
/**
|
|
146
|
-
* A dialog is a type of overlay that can be used for confirming actions, asking
|
|
147
|
-
* for disambiguation, and presenting small forms. They generally allow the user
|
|
148
|
-
* to focus on a quick task without having to navigate to a different page.
|
|
149
|
-
*
|
|
150
|
-
* Dialogs appear in the page after a direct user interaction. Don't show dialogs
|
|
151
|
-
* on page load or as system alerts.
|
|
152
|
-
*
|
|
153
|
-
* Dialogs appear centered in the page, with a visible backdrop that dims the rest
|
|
154
|
-
* of the window for focus.
|
|
155
|
-
*
|
|
156
|
-
* All dialogs have a title and a close button.
|
|
157
|
-
*
|
|
158
|
-
* Dialogs are modal. Dialogs can be dismissed by clicking on the close button,
|
|
159
|
-
* pressing the escape key, or by interacting with another button in the dialog.
|
|
160
|
-
* To avoid losing information and missing important messages, clicking outside
|
|
161
|
-
* of the dialog will not close it.
|
|
162
|
-
*
|
|
163
|
-
* The sub components provided (e.g. Header, Title, etc.) are available for custom
|
|
164
|
-
* renderers only. They are not intended to be used otherwise.
|
|
165
|
-
*/
|
|
166
145
|
export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
|
|
167
146
|
children?: React.ReactNode | undefined;
|
|
168
147
|
} & React.RefAttributes<HTMLDivElement>> & {
|
|
169
|
-
|
|
148
|
+
__SLOT__: symbol;
|
|
149
|
+
Header: PolymorphicForwardRefComponent<"div", React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
170
150
|
Title: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
171
151
|
Subtitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
172
152
|
Body: PolymorphicForwardRefComponent<"div", React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
173
|
-
Footer:
|
|
153
|
+
Footer: PolymorphicForwardRefComponent<"div", React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
174
154
|
Buttons: React.FC<React.PropsWithChildren<{
|
|
175
155
|
buttons: DialogButtonProps[];
|
|
176
156
|
}>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAW1C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAChE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAA;AAC1F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAW1C,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAChE,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAQ/F;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG;IAC7D;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAExD;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAA;CACzC,CAAA;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAElF;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAA;IAE1E;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC,CAAA;IAE5E;;OAEG;IACH,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAEnC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,QAAQ,KAAK,IAAI,CAAA;IAErD;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAA;IAE/B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,eAAe,CAAC,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,CAAC,CAAA;IAE/G;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAE7C;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAE9C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;OAGG;IACH,aAAa,EAAE,MAAM,CAAA;IAErB;;;OAGG;IACH,mBAAmB,EAAE,MAAM,CAAA;CAC5B;AAGD,QAAA,MAAM,SAAS;;;;CAIL,CAAA;AAGV,QAAA,MAAM,QAAQ;;;;;CAKJ,CAAA;AAEV,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,QAAQ,CAAA;AAC/C,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,SAAS,CAAA;AA0QjD,eAAO,MAAM,MAAM;;;;;;;;;;iBA/DuC,iBAAiB,EAAE;;;iBAiCf,MAAM,IAAI;;CAuCtE,CAAA"}
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -11,6 +11,7 @@ import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.
|
|
|
11
11
|
import { useId } from '../hooks/useId.js';
|
|
12
12
|
import classes from './Dialog.module.css.js';
|
|
13
13
|
import { clsx } from 'clsx';
|
|
14
|
+
import { useSlots } from '../hooks/useSlots.js';
|
|
14
15
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
15
16
|
import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
|
|
16
17
|
import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
|
|
@@ -156,6 +157,7 @@ const defaultPosition = {
|
|
|
156
157
|
};
|
|
157
158
|
const defaultFooterButtons = [];
|
|
158
159
|
const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
160
|
+
var _slots$header, _slots$body, _slots$footer;
|
|
159
161
|
const {
|
|
160
162
|
title = 'Dialog',
|
|
161
163
|
subtitle = '',
|
|
@@ -195,6 +197,11 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
195
197
|
onClose('escape');
|
|
196
198
|
}
|
|
197
199
|
}, [onClose, lastMouseDownIsBackdrop]);
|
|
200
|
+
const [slots, childrenWithoutSlots] = useSlots(props.children, {
|
|
201
|
+
body: Dialog.Body,
|
|
202
|
+
header: Dialog.Header,
|
|
203
|
+
footer: Dialog.Footer
|
|
204
|
+
});
|
|
198
205
|
const dialogRef = useRef(null);
|
|
199
206
|
useRefObjectAsForwardedRef(forwardedRef, dialogRef);
|
|
200
207
|
const backdropRef = useRef(null);
|
|
@@ -217,9 +224,12 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
|
|
|
217
224
|
// account for the scrollbar width when calculating its width.
|
|
218
225
|
document.body.style.setProperty('--prc-dialog-scrollgutter', `${scrollbarWidth}px`);
|
|
219
226
|
}, []);
|
|
220
|
-
const header = (renderHeader !== null && renderHeader !== void 0 ? renderHeader : DefaultHeader)(defaultedProps);
|
|
221
|
-
const body = (renderBody !== null && renderBody !== void 0 ? renderBody : DefaultBody)(
|
|
222
|
-
|
|
227
|
+
const header = (_slots$header = slots.header) !== null && _slots$header !== void 0 ? _slots$header : (renderHeader !== null && renderHeader !== void 0 ? renderHeader : DefaultHeader)(defaultedProps);
|
|
228
|
+
const body = (_slots$body = slots.body) !== null && _slots$body !== void 0 ? _slots$body : (renderBody !== null && renderBody !== void 0 ? renderBody : DefaultBody)({
|
|
229
|
+
...defaultedProps,
|
|
230
|
+
children: childrenWithoutSlots
|
|
231
|
+
});
|
|
232
|
+
const footer = (_slots$footer = slots.footer) !== null && _slots$footer !== void 0 ? _slots$footer : (renderFooter !== null && renderFooter !== void 0 ? renderFooter : DefaultFooter)(defaultedProps);
|
|
223
233
|
const positionDataAttributes = typeof position === 'string' ? {
|
|
224
234
|
'data-position-regular': position
|
|
225
235
|
} : Object.fromEntries(Object.entries(position).map(([key, value]) => {
|
|
@@ -537,7 +547,12 @@ const CloseButton = t0 => {
|
|
|
537
547
|
* The sub components provided (e.g. Header, Title, etc.) are available for custom
|
|
538
548
|
* renderers only. They are not intended to be used otherwise.
|
|
539
549
|
*/
|
|
550
|
+
|
|
551
|
+
Header.__SLOT__ = Symbol('Dialog.Header');
|
|
552
|
+
Footer.__SLOT__ = Symbol('Dialog.Footer');
|
|
553
|
+
Body.__SLOT__ = Symbol('Dialog.Body');
|
|
540
554
|
const Dialog = Object.assign(_Dialog, {
|
|
555
|
+
__SLOT__: Symbol('Dialog'),
|
|
541
556
|
Header,
|
|
542
557
|
Title,
|
|
543
558
|
Subtitle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"UnderlinePanels.d.ts","sourceRoot":"","sources":["../../../src/experimental/UnderlinePanels/UnderlinePanels.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAMZ,KAAK,EAAE,EACP,KAAK,iBAAiB,EAGvB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAerD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AAEvD,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,YAAY,CAAC,CAAA;IACjD;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAA;IAC3D;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,iBAAiB,CAAC;IACvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACxG;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,CAAA;CACrB,CAAC,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;;;;;AA8J7D,wBAA2D"}
|
|
@@ -31,7 +31,7 @@ const UnderlineWrapper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
31
31
|
rest = $[3];
|
|
32
32
|
t0 = $[4];
|
|
33
33
|
}
|
|
34
|
-
const Component = t0 === undefined ? "
|
|
34
|
+
const Component = t0 === undefined ? "div" : t0;
|
|
35
35
|
let t1;
|
|
36
36
|
if ($[5] !== className) {
|
|
37
37
|
t1 = clsx(classes.UnderlineWrapper, className);
|
|
@@ -8782,6 +8782,12 @@
|
|
|
8782
8782
|
"type": "boolean",
|
|
8783
8783
|
"defaultValue": "false",
|
|
8784
8784
|
"description": "Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift."
|
|
8785
|
+
},
|
|
8786
|
+
{
|
|
8787
|
+
"name": "as",
|
|
8788
|
+
"type": "React.ElementType",
|
|
8789
|
+
"defaultValue": "'div'",
|
|
8790
|
+
"description": "The HTML element or React component used to render the outermost element."
|
|
8785
8791
|
}
|
|
8786
8792
|
],
|
|
8787
8793
|
"subcomponents": [
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "38.1.0-rc.
|
|
4
|
+
"version": "38.1.0-rc.430f77ae3",
|
|
5
5
|
"description": "An implementation of GitHub's Primer Design System using React",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -103,13 +103,13 @@
|
|
|
103
103
|
"@figma/code-connect": "1.3.2",
|
|
104
104
|
"@primer/css": "^21.5.1",
|
|
105
105
|
"@primer/doc-gen": "^0.0.1",
|
|
106
|
-
"@rollup/plugin-babel": "6.0
|
|
107
|
-
"@rollup/plugin-commonjs": "28.0.
|
|
106
|
+
"@rollup/plugin-babel": "6.1.0",
|
|
107
|
+
"@rollup/plugin-commonjs": "28.0.9",
|
|
108
108
|
"@rollup/plugin-json": "6.1.0",
|
|
109
|
-
"@rollup/plugin-node-resolve": "16.0.
|
|
109
|
+
"@rollup/plugin-node-resolve": "16.0.3",
|
|
110
110
|
"@rollup/plugin-replace": "6.0.2",
|
|
111
111
|
"@rollup/plugin-terser": "0.4.4",
|
|
112
|
-
"@rollup/plugin-typescript": "12.
|
|
112
|
+
"@rollup/plugin-typescript": "12.3.0",
|
|
113
113
|
"@rollup/plugin-virtual": "3.0.2",
|
|
114
114
|
"@storybook/addon-a11y": "^9.1.10",
|
|
115
115
|
"@storybook/addon-docs": "^9.1.10",
|
|
@@ -169,10 +169,10 @@
|
|
|
169
169
|
"react-test-renderer": "18.3.1",
|
|
170
170
|
"recast": "0.23.7",
|
|
171
171
|
"rimraf": "5.0.5",
|
|
172
|
-
"rollup": "4.
|
|
172
|
+
"rollup": "4.52.5",
|
|
173
173
|
"rollup-plugin-import-css": "^0.0.0",
|
|
174
174
|
"rollup-plugin-postcss": "4.0.2",
|
|
175
|
-
"rollup-plugin-visualizer": "6.0.
|
|
175
|
+
"rollup-plugin-visualizer": "6.0.5",
|
|
176
176
|
"storybook": "^9.1.10",
|
|
177
177
|
"terser": "5.36.0",
|
|
178
178
|
"ts-toolbelt": "9.6.0",
|