@primer/react 0.0.0-20260324011943 → 0.0.0-20260324015348

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 (5) hide show
  1. package/CHANGELOG.md +1 -3
  2. package/dist/Link/Link.js +1 -2
  3. package/dist/ThemeProvider.d.ts.map +1 -1
  4. package/dist/ThemeProvider.js +139 -54
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @primer/react
2
2
 
3
- ## 0.0.0-20260324011943
3
+ ## 0.0.0-20260324015348
4
4
 
5
5
  ### Minor Changes
6
6
 
@@ -21,8 +21,6 @@
21
21
 
22
22
  - [#7682](https://github.com/primer/react/pull/7682) [`8aed331`](https://github.com/primer/react/commit/8aed331f9dcb8c51d86bf531f7e331a6ccd23d9a) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CheckboxOrRadioGroup.tsx to add `required` announcement
23
23
 
24
- - [#7631](https://github.com/primer/react/pull/7631) [`230d875`](https://github.com/primer/react/commit/230d875ed78cb501ad942c997a1568b3504d3b06) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Add test to validate that the `muted` prop is not leaked as a bare DOM attribute on `Link`
25
-
26
24
  ## 38.16.0
27
25
 
28
26
  ### Minor Changes
package/dist/Link/Link.js CHANGED
@@ -10,7 +10,6 @@ const UnwrappedLink = (props, ref) => {
10
10
  as: Component = 'a',
11
11
  className,
12
12
  inline,
13
- muted,
14
13
  hoverColor,
15
14
  ...restProps
16
15
  } = props;
@@ -33,7 +32,7 @@ const UnwrappedLink = (props, ref) => {
33
32
  }
34
33
  return /*#__PURE__*/jsx(Component, {
35
34
  className: clsx(className, classes.Link),
36
- "data-muted": muted,
35
+ "data-muted": restProps.muted,
37
36
  "data-inline": inline,
38
37
  "data-hover-color": hoverColor,
39
38
  ...restProps,
package/dist/ThemeProvider.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAsF/E,CAAA;AAED,wBAAgB,QAAQ;YAnHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA4G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,eAAO,MAAM,gBAAgB,QAAQ,CAAA;AAKrC,MAAM,MAAM,KAAK,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAAA;AACxC,KAAK,SAAS,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AACnD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AA8BD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAoF/E,CAAA;AAED,wBAAgB,QAAQ;YAjHd,KAAK;kBACC,MAAM;gBACR,iBAAiB;wBACT,SAAS;0BACP,MAAM;gBAChB,MAAM;kBACJ,MAAM;kBACN,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;kBACvD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;oBAC1C,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;EA0G7D;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,UAG1F;AAqGD,eAAe,aAAa,CAAA"}
package/dist/ThemeProvider.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { c } from 'react-compiler-runtime';
2
2
  import React from 'react';
3
- import ReactDOM from 'react-dom';
4
3
  import theme from './theme.js';
5
4
  import deepmerge from 'deepmerge';
6
5
  import { useSyncedState } from './hooks/useSyncedState.js';
@@ -30,61 +29,99 @@ const getServerHandoff = id => {
30
29
  }
31
30
  return {};
32
31
  };
33
- const ThemeProvider = ({
34
- children,
35
- ...props
36
- }) => {
32
+ const ThemeProvider = t0 => {
37
33
  var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
38
- // Get fallback values from parent ThemeProvider (if exists)
34
+ const $ = c(43);
35
+ let children;
36
+ let props;
37
+ if ($[0] !== t0) {
38
+ ({
39
+ children,
40
+ ...props
41
+ } = t0);
42
+ $[0] = t0;
43
+ $[1] = children;
44
+ $[2] = props;
45
+ } else {
46
+ children = $[1];
47
+ props = $[2];
48
+ }
39
49
  const {
40
50
  theme: fallbackTheme,
41
51
  colorMode: fallbackColorMode,
42
52
  dayScheme: fallbackDayScheme,
43
53
  nightScheme: fallbackNightScheme
44
54
  } = useTheme();
45
-
46
- // Initialize state
47
55
  const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
48
56
  const uniqueDataId = useId();
49
- const {
50
- resolvedServerColorMode
51
- } = getServerHandoff(uniqueDataId);
52
- const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode);
57
+ let t1;
58
+ if ($[3] !== uniqueDataId) {
59
+ t1 = () => getServerHandoff(uniqueDataId).resolvedServerColorMode;
60
+ $[3] = uniqueDataId;
61
+ $[4] = t1;
62
+ } else {
63
+ t1 = $[4];
64
+ }
65
+ const [serverColorMode, setServerColorMode] = React.useState(t1);
53
66
  const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : defaultColorMode);
54
67
  const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
55
68
  const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
56
69
  const systemColorMode = useSystemColorMode();
57
- // eslint-disable-next-line react-hooks/refs
58
- const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode);
59
- const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
70
+ let t2;
71
+ if ($[5] !== colorMode || $[6] !== serverColorMode || $[7] !== systemColorMode) {
72
+ t2 = serverColorMode !== null && serverColorMode !== void 0 ? serverColorMode : resolveColorMode(colorMode, systemColorMode);
73
+ $[5] = colorMode;
74
+ $[6] = serverColorMode;
75
+ $[7] = systemColorMode;
76
+ $[8] = t2;
77
+ } else {
78
+ t2 = $[8];
79
+ }
80
+ const resolvedColorMode = t2;
81
+ let t3;
82
+ if ($[9] !== dayScheme || $[10] !== nightScheme || $[11] !== resolvedColorMode) {
83
+ t3 = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
84
+ $[9] = dayScheme;
85
+ $[10] = nightScheme;
86
+ $[11] = resolvedColorMode;
87
+ $[12] = t3;
88
+ } else {
89
+ t3 = $[12];
90
+ }
91
+ const colorScheme = t3;
92
+ let t4;
93
+ if ($[13] !== colorScheme || $[14] !== theme$1) {
94
+ t4 = applyColorScheme(theme$1, colorScheme);
95
+ $[13] = colorScheme;
96
+ $[14] = theme$1;
97
+ $[15] = t4;
98
+ } else {
99
+ t4 = $[15];
100
+ }
60
101
  const {
61
102
  resolvedTheme,
62
103
  resolvedColorScheme
63
- } = React.useMemo(() => applyColorScheme(theme$1, colorScheme), [theme$1, colorScheme]);
64
-
65
- // this effect will only run on client
66
- React.useEffect(function updateColorModeAfterServerPassthrough() {
67
- const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode);
68
- if (resolvedColorModePassthrough.current) {
69
- // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
70
- if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
71
- window.setTimeout(() => {
72
- // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
73
- // ref: https://github.com/reactwg/react-18/discussions/21
74
- ReactDOM.flushSync(() => {
75
- // override colorMode to whatever is resolved on the client to get a re-render
76
- setColorMode(resolvedColorModeOnClient);
77
- });
78
-
79
- // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
80
- setColorMode(colorMode);
81
- });
104
+ } = t4;
105
+ let t5;
106
+ let t6;
107
+ if ($[16] !== serverColorMode) {
108
+ t5 = function clearServerPassthrough() {
109
+ if (serverColorMode !== undefined) {
110
+ setServerColorMode(undefined);
82
111
  }
83
- resolvedColorModePassthrough.current = null;
84
- }
85
- }, [colorMode, systemColorMode, setColorMode]);
86
- return /*#__PURE__*/jsx(ThemeContext.Provider, {
87
- value: {
112
+ };
113
+ t6 = [serverColorMode];
114
+ $[16] = serverColorMode;
115
+ $[17] = t5;
116
+ $[18] = t6;
117
+ } else {
118
+ t5 = $[17];
119
+ t6 = $[18];
120
+ }
121
+ React.useEffect(t5, t6);
122
+ let t7;
123
+ if ($[19] !== colorMode || $[20] !== colorScheme || $[21] !== dayScheme || $[22] !== nightScheme || $[23] !== resolvedColorMode || $[24] !== resolvedColorScheme || $[25] !== resolvedTheme || $[26] !== setColorMode || $[27] !== setDayScheme || $[28] !== setNightScheme) {
124
+ t7 = {
88
125
  theme: resolvedTheme,
89
126
  colorScheme,
90
127
  colorMode,
@@ -95,24 +132,72 @@ const ThemeProvider = ({
95
132
  setColorMode,
96
133
  setDayScheme,
97
134
  setNightScheme
98
- },
99
- children: /*#__PURE__*/jsxs("div", {
100
- "data-color-mode": colorMode === 'auto' ? 'auto' : colorScheme.includes('dark') ? 'dark' : 'light',
135
+ };
136
+ $[19] = colorMode;
137
+ $[20] = colorScheme;
138
+ $[21] = dayScheme;
139
+ $[22] = nightScheme;
140
+ $[23] = resolvedColorMode;
141
+ $[24] = resolvedColorScheme;
142
+ $[25] = resolvedTheme;
143
+ $[26] = setColorMode;
144
+ $[27] = setDayScheme;
145
+ $[28] = setNightScheme;
146
+ $[29] = t7;
147
+ } else {
148
+ t7 = $[29];
149
+ }
150
+ const contextValue = t7;
151
+ const t8 = colorMode === "auto" ? "auto" : colorScheme.includes("dark") ? "dark" : "light";
152
+ let t9;
153
+ if ($[30] !== props.preventSSRMismatch || $[31] !== resolvedColorMode || $[32] !== uniqueDataId) {
154
+ t9 = props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
155
+ type: "application/json",
156
+ id: `__PRIMER_DATA_${uniqueDataId}__`,
157
+ dangerouslySetInnerHTML: {
158
+ __html: JSON.stringify({
159
+ resolvedServerColorMode: resolvedColorMode
160
+ })
161
+ }
162
+ }) : null;
163
+ $[30] = props.preventSSRMismatch;
164
+ $[31] = resolvedColorMode;
165
+ $[32] = uniqueDataId;
166
+ $[33] = t9;
167
+ } else {
168
+ t9 = $[33];
169
+ }
170
+ let t10;
171
+ if ($[34] !== children || $[35] !== dayScheme || $[36] !== nightScheme || $[37] !== t8 || $[38] !== t9) {
172
+ t10 = /*#__PURE__*/jsxs("div", {
173
+ "data-color-mode": t8,
101
174
  "data-light-theme": dayScheme,
102
175
  "data-dark-theme": nightScheme,
103
- children: [children, props.preventSSRMismatch ? /*#__PURE__*/jsx("script", {
104
- type: "application/json",
105
- id: `__PRIMER_DATA_${uniqueDataId}__`,
106
- dangerouslySetInnerHTML: {
107
- __html: JSON.stringify({
108
- resolvedServerColorMode: resolvedColorMode
109
- })
110
- }
111
- }) : null]
112
- })
113
- });
176
+ children: [children, t9]
177
+ });
178
+ $[34] = children;
179
+ $[35] = dayScheme;
180
+ $[36] = nightScheme;
181
+ $[37] = t8;
182
+ $[38] = t9;
183
+ $[39] = t10;
184
+ } else {
185
+ t10 = $[39];
186
+ }
187
+ let t11;
188
+ if ($[40] !== contextValue || $[41] !== t10) {
189
+ t11 = /*#__PURE__*/jsx(ThemeContext.Provider, {
190
+ value: contextValue,
191
+ children: t10
192
+ });
193
+ $[40] = contextValue;
194
+ $[41] = t10;
195
+ $[42] = t11;
196
+ } else {
197
+ t11 = $[42];
198
+ }
199
+ return t11;
114
200
  };
115
- ThemeProvider.displayName = "ThemeProvider";
116
201
  function useTheme() {
117
202
  return React.useContext(ThemeContext);
118
203
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "0.0.0-20260324011943",
4
+ "version": "0.0.0-20260324015348",
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",