@primer/react 38.34.0 → 38.35.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 +6 -0
- package/dist/Popover/Popover.d.ts +1 -0
- package/dist/Popover/Popover.js +84 -47
- package/dist/Radio/Radio.js +1 -1
- package/generated/components.json +21 -2
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
+
## 38.35.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#8253](https://github.com/primer/react/pull/8253) [`da3df9a`](https://github.com/primer/react/commit/da3df9aba582c7bcedbe69f1bdc5ab64ac90d32b) Thanks [@llastflowers](https://github.com/llastflowers)! - Add default Esc-to-dismiss support to `Popover` component
|
|
8
|
+
|
|
3
9
|
## 38.34.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
|
@@ -16,6 +16,7 @@ type PopoverContentProps = {
|
|
|
16
16
|
height?: 'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'fit-content';
|
|
17
17
|
overflow?: 'auto' | 'hidden' | 'scroll' | 'visible';
|
|
18
18
|
onClickOutside?: (event: MouseEvent | TouchEvent) => void;
|
|
19
|
+
onEscape?: (event: KeyboardEvent) => void;
|
|
19
20
|
ignoreClickRefs?: React.RefObject<HTMLElement>[];
|
|
20
21
|
} & HTMLProps<HTMLDivElement>;
|
|
21
22
|
declare const _default: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useOnOutsideClick } from "../hooks/useOnOutsideClick.js";
|
|
2
|
+
import { useOnEscapePress } from "../hooks/useOnEscapePress.js";
|
|
2
3
|
import Popover_module_css_default from "./Popover.module.css.js";
|
|
3
4
|
import { c } from "react-compiler-runtime";
|
|
4
5
|
import { clsx } from "clsx";
|
|
@@ -6,8 +7,10 @@ import { jsx } from "react/jsx-runtime";
|
|
|
6
7
|
import React, { useRef } from "react";
|
|
7
8
|
//#region src/Popover/Popover.tsx
|
|
8
9
|
const EMPTY_IGNORE_CLICK_REFS = [];
|
|
10
|
+
const PopoverContext = /*#__PURE__*/ React.createContext(false);
|
|
9
11
|
const Popover = /*#__PURE__*/ React.forwardRef(function Popover(t0, forwardRef) {
|
|
10
|
-
|
|
12
|
+
var _open;
|
|
13
|
+
const $ = c(18);
|
|
11
14
|
let className;
|
|
12
15
|
let open;
|
|
13
16
|
let props;
|
|
@@ -29,102 +32,136 @@ const Popover = /*#__PURE__*/ React.forwardRef(function Popover(t0, forwardRef)
|
|
|
29
32
|
t1 = $[5];
|
|
30
33
|
}
|
|
31
34
|
const caret = t1 === void 0 ? "top" : t1;
|
|
32
|
-
const t2 = open
|
|
33
|
-
const t3 =
|
|
34
|
-
|
|
35
|
+
const t2 = (_open = open) !== null && _open !== void 0 ? _open : false;
|
|
36
|
+
const t3 = open ? "" : void 0;
|
|
37
|
+
const t4 = relative ? "" : void 0;
|
|
38
|
+
let t5;
|
|
35
39
|
if ($[6] !== className) {
|
|
36
|
-
|
|
40
|
+
t5 = clsx(className, Popover_module_css_default.Popover);
|
|
37
41
|
$[6] = className;
|
|
38
|
-
$[7] =
|
|
39
|
-
} else
|
|
40
|
-
let
|
|
41
|
-
if ($[8] !== caret || $[9] !== forwardRef || $[10] !== props || $[11] !==
|
|
42
|
-
|
|
42
|
+
$[7] = t5;
|
|
43
|
+
} else t5 = $[7];
|
|
44
|
+
let t6;
|
|
45
|
+
if ($[8] !== caret || $[9] !== forwardRef || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
|
|
46
|
+
t6 = /*#__PURE__*/ jsx("div", {
|
|
43
47
|
...props,
|
|
44
48
|
ref: forwardRef,
|
|
45
49
|
"data-component": "Popover",
|
|
46
|
-
"data-open":
|
|
47
|
-
"data-relative":
|
|
50
|
+
"data-open": t3,
|
|
51
|
+
"data-relative": t4,
|
|
48
52
|
"data-caret": caret,
|
|
49
|
-
className:
|
|
53
|
+
className: t5
|
|
50
54
|
});
|
|
51
55
|
$[8] = caret;
|
|
52
56
|
$[9] = forwardRef;
|
|
53
57
|
$[10] = props;
|
|
54
|
-
$[11] =
|
|
55
|
-
$[12] =
|
|
56
|
-
$[13] =
|
|
57
|
-
$[14] =
|
|
58
|
-
} else
|
|
59
|
-
|
|
58
|
+
$[11] = t3;
|
|
59
|
+
$[12] = t4;
|
|
60
|
+
$[13] = t5;
|
|
61
|
+
$[14] = t6;
|
|
62
|
+
} else t6 = $[14];
|
|
63
|
+
let t7;
|
|
64
|
+
if ($[15] !== t2 || $[16] !== t6) {
|
|
65
|
+
t7 = /*#__PURE__*/ jsx(PopoverContext.Provider, {
|
|
66
|
+
value: t2,
|
|
67
|
+
children: t6
|
|
68
|
+
});
|
|
69
|
+
$[15] = t2;
|
|
70
|
+
$[16] = t6;
|
|
71
|
+
$[17] = t7;
|
|
72
|
+
} else t7 = $[17];
|
|
73
|
+
return t7;
|
|
60
74
|
});
|
|
61
75
|
Popover.displayName = "Popover";
|
|
62
76
|
const PopoverContent = (t0) => {
|
|
63
77
|
var _onClickOutside, _ignoreClickRefs;
|
|
64
|
-
const $ = c(
|
|
78
|
+
const $ = c(22);
|
|
65
79
|
let className;
|
|
66
80
|
let ignoreClickRefs;
|
|
67
81
|
let onClickOutside;
|
|
82
|
+
let onEscape;
|
|
68
83
|
let props;
|
|
69
84
|
let t1;
|
|
70
85
|
let t2;
|
|
71
86
|
if ($[0] !== t0) {
|
|
72
|
-
({className, width: t1, height: t2, onClickOutside, ignoreClickRefs, ...props} = t0);
|
|
87
|
+
({className, width: t1, height: t2, onClickOutside, onEscape, ignoreClickRefs, ...props} = t0);
|
|
73
88
|
$[0] = t0;
|
|
74
89
|
$[1] = className;
|
|
75
90
|
$[2] = ignoreClickRefs;
|
|
76
91
|
$[3] = onClickOutside;
|
|
77
|
-
$[4] =
|
|
78
|
-
$[5] =
|
|
79
|
-
$[6] =
|
|
92
|
+
$[4] = onEscape;
|
|
93
|
+
$[5] = props;
|
|
94
|
+
$[6] = t1;
|
|
95
|
+
$[7] = t2;
|
|
80
96
|
} else {
|
|
81
97
|
className = $[1];
|
|
82
98
|
ignoreClickRefs = $[2];
|
|
83
99
|
onClickOutside = $[3];
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
100
|
+
onEscape = $[4];
|
|
101
|
+
props = $[5];
|
|
102
|
+
t1 = $[6];
|
|
103
|
+
t2 = $[7];
|
|
87
104
|
}
|
|
88
105
|
const width = t1 === void 0 ? "small" : t1;
|
|
89
106
|
const height = t2 === void 0 ? "fit-content" : t2;
|
|
90
107
|
const divRef = useRef(null);
|
|
108
|
+
const open = React.useContext(PopoverContext);
|
|
91
109
|
const outsideClickHandler = (_onClickOutside = onClickOutside) !== null && _onClickOutside !== void 0 ? _onClickOutside : _temp;
|
|
92
110
|
const t3 = (_ignoreClickRefs = ignoreClickRefs) !== null && _ignoreClickRefs !== void 0 ? _ignoreClickRefs : EMPTY_IGNORE_CLICK_REFS;
|
|
93
111
|
let t4;
|
|
94
|
-
if ($[
|
|
112
|
+
if ($[8] !== outsideClickHandler || $[9] !== t3) {
|
|
95
113
|
t4 = {
|
|
96
114
|
onClickOutside: outsideClickHandler,
|
|
97
115
|
containerRef: divRef,
|
|
98
116
|
ignoreClickRefs: t3
|
|
99
117
|
};
|
|
100
|
-
$[
|
|
101
|
-
$[
|
|
102
|
-
$[
|
|
103
|
-
} else t4 = $[
|
|
118
|
+
$[8] = outsideClickHandler;
|
|
119
|
+
$[9] = t3;
|
|
120
|
+
$[10] = t4;
|
|
121
|
+
} else t4 = $[10];
|
|
104
122
|
useOnOutsideClick(t4);
|
|
105
123
|
let t5;
|
|
106
|
-
if ($[10] !== className) {
|
|
107
|
-
t5 = clsx(className, Popover_module_css_default.PopoverContent);
|
|
108
|
-
$[10] = className;
|
|
109
|
-
$[11] = t5;
|
|
110
|
-
} else t5 = $[11];
|
|
111
124
|
let t6;
|
|
112
|
-
if ($[
|
|
113
|
-
|
|
125
|
+
if ($[11] !== onEscape || $[12] !== open) {
|
|
126
|
+
t5 = (event) => {
|
|
127
|
+
if (open && onEscape) {
|
|
128
|
+
onEscape(event);
|
|
129
|
+
event.preventDefault();
|
|
130
|
+
}
|
|
131
|
+
};
|
|
132
|
+
t6 = [open, onEscape];
|
|
133
|
+
$[11] = onEscape;
|
|
134
|
+
$[12] = open;
|
|
135
|
+
$[13] = t5;
|
|
136
|
+
$[14] = t6;
|
|
137
|
+
} else {
|
|
138
|
+
t5 = $[13];
|
|
139
|
+
t6 = $[14];
|
|
140
|
+
}
|
|
141
|
+
useOnEscapePress(t5, t6);
|
|
142
|
+
let t7;
|
|
143
|
+
if ($[15] !== className) {
|
|
144
|
+
t7 = clsx(className, Popover_module_css_default.PopoverContent);
|
|
145
|
+
$[15] = className;
|
|
146
|
+
$[16] = t7;
|
|
147
|
+
} else t7 = $[16];
|
|
148
|
+
let t8;
|
|
149
|
+
if ($[17] !== height || $[18] !== props || $[19] !== t7 || $[20] !== width) {
|
|
150
|
+
t8 = /*#__PURE__*/ jsx("div", {
|
|
114
151
|
ref: divRef,
|
|
115
152
|
"data-component": "Popover.Content",
|
|
116
153
|
"data-width": width,
|
|
117
154
|
"data-height": height,
|
|
118
|
-
className:
|
|
155
|
+
className: t7,
|
|
119
156
|
...props
|
|
120
157
|
});
|
|
121
|
-
$[
|
|
122
|
-
$[
|
|
123
|
-
$[
|
|
124
|
-
$[
|
|
125
|
-
$[
|
|
126
|
-
} else
|
|
127
|
-
return
|
|
158
|
+
$[17] = height;
|
|
159
|
+
$[18] = props;
|
|
160
|
+
$[19] = t7;
|
|
161
|
+
$[20] = width;
|
|
162
|
+
$[21] = t8;
|
|
163
|
+
} else t8 = $[21];
|
|
164
|
+
return t8;
|
|
128
165
|
};
|
|
129
166
|
PopoverContent.displayName = "Popover.Content";
|
|
130
167
|
var Popover_default = Object.assign(Popover, { Content: PopoverContent });
|
package/dist/Radio/Radio.js
CHANGED
|
@@ -48,7 +48,7 @@ const Radio = /*#__PURE__*/ React.forwardRef((t0, ref) => {
|
|
|
48
48
|
let t2;
|
|
49
49
|
if ($[10] !== onChange || $[11] !== radioGroupContext) {
|
|
50
50
|
t2 = (e) => {
|
|
51
|
-
|
|
51
|
+
radioGroupContext !== null && radioGroupContext !== void 0 && radioGroupContext.onChange && radioGroupContext.onChange(e);
|
|
52
52
|
onChange && onChange(e);
|
|
53
53
|
};
|
|
54
54
|
$[10] = onChange;
|
|
@@ -2656,11 +2656,18 @@
|
|
|
2656
2656
|
],
|
|
2657
2657
|
"importPath": "@primer/react",
|
|
2658
2658
|
"props": [
|
|
2659
|
+
{
|
|
2660
|
+
"name": "variant",
|
|
2661
|
+
"type": "'primary' | 'secondary'",
|
|
2662
|
+
"defaultValue": "",
|
|
2663
|
+
"description": "Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the variant prop renders the default counter scheme"
|
|
2664
|
+
},
|
|
2659
2665
|
{
|
|
2660
2666
|
"name": "scheme",
|
|
2661
2667
|
"type": "'primary' | 'secondary'",
|
|
2662
2668
|
"defaultValue": "",
|
|
2663
|
-
"description": "
|
|
2669
|
+
"description": "Use `variant` instead.",
|
|
2670
|
+
"deprecated": true
|
|
2664
2671
|
},
|
|
2665
2672
|
{
|
|
2666
2673
|
"name": "className",
|
|
@@ -5652,6 +5659,11 @@
|
|
|
5652
5659
|
"type": "(event: MouseEvent | TouchEvent) => void",
|
|
5653
5660
|
"description": "Callback fired when a click is detected outside the popover content"
|
|
5654
5661
|
},
|
|
5662
|
+
{
|
|
5663
|
+
"name": "onEscape",
|
|
5664
|
+
"type": "(event: KeyboardEvent) => void",
|
|
5665
|
+
"description": "Callback fired when the Escape key is pressed while the popover is open"
|
|
5666
|
+
},
|
|
5655
5667
|
{
|
|
5656
5668
|
"name": "ignoreClickRefs",
|
|
5657
5669
|
"type": "React.RefObject<HTMLElement>[]",
|
|
@@ -7439,10 +7451,17 @@
|
|
|
7439
7451
|
],
|
|
7440
7452
|
"importPath": "@primer/react",
|
|
7441
7453
|
"props": [
|
|
7454
|
+
{
|
|
7455
|
+
"name": "size",
|
|
7456
|
+
"type": "'small' | 'medium'",
|
|
7457
|
+
"defaultValue": "'medium'"
|
|
7458
|
+
},
|
|
7442
7459
|
{
|
|
7443
7460
|
"name": "variant",
|
|
7444
7461
|
"type": "'small' | 'normal'",
|
|
7445
|
-
"defaultValue": "'normal'"
|
|
7462
|
+
"defaultValue": "'normal'",
|
|
7463
|
+
"description": "Use `size` instead.",
|
|
7464
|
+
"deprecated": true
|
|
7446
7465
|
},
|
|
7447
7466
|
{
|
|
7448
7467
|
"name": "status",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "38.
|
|
4
|
+
"version": "38.35.0",
|
|
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",
|
|
@@ -110,12 +110,12 @@
|
|
|
110
110
|
"@primer/doc-gen": "^0.0.1",
|
|
111
111
|
"@primer/react-compiler-check": "^0.0.0",
|
|
112
112
|
"@rolldown/plugin-babel": "^0.2.3",
|
|
113
|
-
"@storybook/addon-a11y": "10.5.
|
|
114
|
-
"@storybook/addon-docs": "10.5.
|
|
115
|
-
"@storybook/addon-links": "10.5.
|
|
116
|
-
"@storybook/addon-mcp": "^0.
|
|
113
|
+
"@storybook/addon-a11y": "10.5.3",
|
|
114
|
+
"@storybook/addon-docs": "10.5.3",
|
|
115
|
+
"@storybook/addon-links": "10.5.3",
|
|
116
|
+
"@storybook/addon-mcp": "^0.7.0",
|
|
117
117
|
"@storybook/icons": "^2.1.0",
|
|
118
|
-
"@storybook/react-vite": "10.5.
|
|
118
|
+
"@storybook/react-vite": "10.5.3",
|
|
119
119
|
"@testing-library/dom": "^10.4.0",
|
|
120
120
|
"@testing-library/jest-dom": "^6.4.5",
|
|
121
121
|
"@testing-library/react": "^16.3.0",
|
|
@@ -168,11 +168,11 @@
|
|
|
168
168
|
"react-is": "18.3.1",
|
|
169
169
|
"recast": "0.23.7",
|
|
170
170
|
"rimraf": "5.0.5",
|
|
171
|
-
"rolldown": "^1.
|
|
171
|
+
"rolldown": "^1.2.0",
|
|
172
172
|
"rolldown-plugin-dts": "^0.26.0",
|
|
173
173
|
"rolldown-plugin-import-css": "^0.0.0",
|
|
174
174
|
"rolldown-plugin-preserve-directives": "^0.0.0",
|
|
175
|
-
"storybook": "10.5.
|
|
175
|
+
"storybook": "10.5.3",
|
|
176
176
|
"terser": "5.36.0",
|
|
177
177
|
"ts-toolbelt": "9.6.0",
|
|
178
178
|
"tsx": "4.20.3",
|