@atlaskit/app-provider 3.3.1 → 3.3.3
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 +14 -0
- package/dist/cjs/theme-provider/index.js +26 -25
- package/dist/es2019/theme-provider/index.js +26 -25
- package/dist/esm/theme-provider/index.js +26 -25
- package/package.json +4 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/app-provider
|
|
2
2
|
|
|
3
|
+
## 3.3.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`e40fc5834a899`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e40fc5834a899) -
|
|
8
|
+
Further iteration of subtree theming implementation behind feature gate. Removing unnecessary
|
|
9
|
+
subtree theming container `div` for top-level theme providers.
|
|
10
|
+
|
|
11
|
+
## 3.3.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 3.3.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -84,30 +84,31 @@ function ThemeProvider(_ref) {
|
|
|
84
84
|
var isInsideAppProvider = (0, _context3.useIsInsideAppProvider)();
|
|
85
85
|
var isInsideThemeProvider = (0, _useIsInsideThemeProvider.useIsInsideThemeProvider)();
|
|
86
86
|
var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
|
|
87
|
+
var shouldUseGlobalTheming =
|
|
88
|
+
/**
|
|
89
|
+
* When not behind feature flag, partially revert to legacy behavior.
|
|
90
|
+
* This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
|
|
91
|
+
* as we still need to set global theme state to prevent breaking existing apps,
|
|
92
|
+
* but also prevent multiple theme providers from loading conflicting theme states.
|
|
93
|
+
*
|
|
94
|
+
* At some point this should be removed as we will
|
|
95
|
+
* only support sub-tree theming when used inside of AppProvider.
|
|
96
|
+
*/
|
|
97
|
+
!(0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') && !isInsideAppProvider && !isInsideThemeProvider ||
|
|
98
|
+
/**
|
|
99
|
+
* A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
|
|
100
|
+
*
|
|
101
|
+
* This will not use sub-tree theming but instead set the global theme state using the
|
|
102
|
+
* `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
|
|
103
|
+
* for compatibility with `@atlaskit/css-reset`.
|
|
104
|
+
*
|
|
105
|
+
* In the future we could consider moving away from DOM mutations and require AppProvider to wrap
|
|
106
|
+
* `html` in order to apply global theme state, which would allow a more consistent approach to
|
|
107
|
+
* theme loading.
|
|
108
|
+
*/
|
|
109
|
+
isRootThemeProvider;
|
|
87
110
|
(0, _react.useEffect)(function () {
|
|
88
|
-
if (
|
|
89
|
-
/**
|
|
90
|
-
* A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
|
|
91
|
-
*
|
|
92
|
-
* This will not use sub-tree theming but instead set the global theme state using the
|
|
93
|
-
* `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
|
|
94
|
-
* for compatibility with `@atlaskit/css-reset`.
|
|
95
|
-
*
|
|
96
|
-
* In the future we could consider moving away from DOM mutations and require AppProvider to wrap
|
|
97
|
-
* `html` in order to apply global theme state, which would allow a more consistent approach to
|
|
98
|
-
* theme loading.
|
|
99
|
-
*/
|
|
100
|
-
isRootThemeProvider || (
|
|
101
|
-
/**
|
|
102
|
-
* Or when not behind feature flag, partially revert to legacy behavior.
|
|
103
|
-
* This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
|
|
104
|
-
* as we still need to set global theme state to prevent breaking existing apps,
|
|
105
|
-
* but also prevent multiple theme providers from loading conflicting theme states.
|
|
106
|
-
*
|
|
107
|
-
* After we roll out the feature flag, this will be removed as we will
|
|
108
|
-
* only support sub-tree theming when used outside of AppProvider.
|
|
109
|
-
*/
|
|
110
|
-
!isInsideAppProvider && !isInsideThemeProvider && !(0, _platformFeatureFlags.fg)('platform_dst_subtree_theming'))) {
|
|
111
|
+
if (shouldUseGlobalTheming) {
|
|
111
112
|
/**
|
|
112
113
|
* We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
|
|
113
114
|
* This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
|
|
@@ -180,7 +181,7 @@ function ThemeProvider(_ref) {
|
|
|
180
181
|
// we treat them as sub-tree themes that do not load global theme state.
|
|
181
182
|
(0, _loadAndMountThemes.loadAndMountThemes)(theme);
|
|
182
183
|
}
|
|
183
|
-
}, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
|
|
184
|
+
}, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, shouldUseGlobalTheming, theme]);
|
|
184
185
|
(0, _react.useEffect)(function () {
|
|
185
186
|
if (!prefersDarkModeMql) {
|
|
186
187
|
return;
|
|
@@ -208,7 +209,7 @@ function ThemeProvider(_ref) {
|
|
|
208
209
|
value: theme
|
|
209
210
|
}, /*#__PURE__*/_react.default.createElement(_theme.SetThemeContext.Provider, {
|
|
210
211
|
value: setPartialTheme
|
|
211
|
-
}, (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, attrs, {
|
|
212
|
+
}, !shouldUseGlobalTheming && (0, _platformFeatureFlags.fg)('platform_dst_subtree_theming') ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, attrs, {
|
|
212
213
|
className: (0, _runtime.ax)([contentStyles.body])
|
|
213
214
|
}), children) : children)))));
|
|
214
215
|
}
|
|
@@ -62,30 +62,31 @@ function ThemeProvider({
|
|
|
62
62
|
const isInsideAppProvider = useIsInsideAppProvider();
|
|
63
63
|
const isInsideThemeProvider = useIsInsideThemeProvider();
|
|
64
64
|
const isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
|
|
65
|
+
const shouldUseGlobalTheming =
|
|
66
|
+
/**
|
|
67
|
+
* When not behind feature flag, partially revert to legacy behavior.
|
|
68
|
+
* This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
|
|
69
|
+
* as we still need to set global theme state to prevent breaking existing apps,
|
|
70
|
+
* but also prevent multiple theme providers from loading conflicting theme states.
|
|
71
|
+
*
|
|
72
|
+
* At some point this should be removed as we will
|
|
73
|
+
* only support sub-tree theming when used inside of AppProvider.
|
|
74
|
+
*/
|
|
75
|
+
!fg('platform_dst_subtree_theming') && !isInsideAppProvider && !isInsideThemeProvider ||
|
|
76
|
+
/**
|
|
77
|
+
* A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
|
|
78
|
+
*
|
|
79
|
+
* This will not use sub-tree theming but instead set the global theme state using the
|
|
80
|
+
* `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
|
|
81
|
+
* for compatibility with `@atlaskit/css-reset`.
|
|
82
|
+
*
|
|
83
|
+
* In the future we could consider moving away from DOM mutations and require AppProvider to wrap
|
|
84
|
+
* `html` in order to apply global theme state, which would allow a more consistent approach to
|
|
85
|
+
* theme loading.
|
|
86
|
+
*/
|
|
87
|
+
isRootThemeProvider;
|
|
65
88
|
useEffect(() => {
|
|
66
|
-
if (
|
|
67
|
-
/**
|
|
68
|
-
* A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
|
|
69
|
-
*
|
|
70
|
-
* This will not use sub-tree theming but instead set the global theme state using the
|
|
71
|
-
* `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
|
|
72
|
-
* for compatibility with `@atlaskit/css-reset`.
|
|
73
|
-
*
|
|
74
|
-
* In the future we could consider moving away from DOM mutations and require AppProvider to wrap
|
|
75
|
-
* `html` in order to apply global theme state, which would allow a more consistent approach to
|
|
76
|
-
* theme loading.
|
|
77
|
-
*/
|
|
78
|
-
isRootThemeProvider || (
|
|
79
|
-
/**
|
|
80
|
-
* Or when not behind feature flag, partially revert to legacy behavior.
|
|
81
|
-
* This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
|
|
82
|
-
* as we still need to set global theme state to prevent breaking existing apps,
|
|
83
|
-
* but also prevent multiple theme providers from loading conflicting theme states.
|
|
84
|
-
*
|
|
85
|
-
* After we roll out the feature flag, this will be removed as we will
|
|
86
|
-
* only support sub-tree theming when used outside of AppProvider.
|
|
87
|
-
*/
|
|
88
|
-
!isInsideAppProvider && !isInsideThemeProvider && !fg('platform_dst_subtree_theming'))) {
|
|
89
|
+
if (shouldUseGlobalTheming) {
|
|
89
90
|
/**
|
|
90
91
|
* We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
|
|
91
92
|
* This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
|
|
@@ -124,7 +125,7 @@ function ThemeProvider({
|
|
|
124
125
|
// we treat them as sub-tree themes that do not load global theme state.
|
|
125
126
|
loadAndMountThemes(theme);
|
|
126
127
|
}
|
|
127
|
-
}, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
|
|
128
|
+
}, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, shouldUseGlobalTheming, theme]);
|
|
128
129
|
useEffect(() => {
|
|
129
130
|
if (!prefersDarkModeMql) {
|
|
130
131
|
return;
|
|
@@ -156,7 +157,7 @@ function ThemeProvider({
|
|
|
156
157
|
value: theme
|
|
157
158
|
}, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
|
|
158
159
|
value: setPartialTheme
|
|
159
|
-
}, fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
|
|
160
|
+
}, !shouldUseGlobalTheming && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
|
|
160
161
|
className: ax([contentStyles.body])
|
|
161
162
|
}), children) : children)))));
|
|
162
163
|
}
|
|
@@ -75,30 +75,31 @@ function ThemeProvider(_ref) {
|
|
|
75
75
|
var isInsideAppProvider = useIsInsideAppProvider();
|
|
76
76
|
var isInsideThemeProvider = useIsInsideThemeProvider();
|
|
77
77
|
var isRootThemeProvider = isInsideAppProvider && !isInsideThemeProvider;
|
|
78
|
+
var shouldUseGlobalTheming =
|
|
79
|
+
/**
|
|
80
|
+
* When not behind feature flag, partially revert to legacy behavior.
|
|
81
|
+
* This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
|
|
82
|
+
* as we still need to set global theme state to prevent breaking existing apps,
|
|
83
|
+
* but also prevent multiple theme providers from loading conflicting theme states.
|
|
84
|
+
*
|
|
85
|
+
* At some point this should be removed as we will
|
|
86
|
+
* only support sub-tree theming when used inside of AppProvider.
|
|
87
|
+
*/
|
|
88
|
+
!fg('platform_dst_subtree_theming') && !isInsideAppProvider && !isInsideThemeProvider ||
|
|
89
|
+
/**
|
|
90
|
+
* A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
|
|
91
|
+
*
|
|
92
|
+
* This will not use sub-tree theming but instead set the global theme state using the
|
|
93
|
+
* `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
|
|
94
|
+
* for compatibility with `@atlaskit/css-reset`.
|
|
95
|
+
*
|
|
96
|
+
* In the future we could consider moving away from DOM mutations and require AppProvider to wrap
|
|
97
|
+
* `html` in order to apply global theme state, which would allow a more consistent approach to
|
|
98
|
+
* theme loading.
|
|
99
|
+
*/
|
|
100
|
+
isRootThemeProvider;
|
|
78
101
|
useEffect(function () {
|
|
79
|
-
if (
|
|
80
|
-
/**
|
|
81
|
-
* A top-level ThemeProvider is detected by being the first ThemeProvider inside an AppProvider.
|
|
82
|
-
*
|
|
83
|
-
* This will not use sub-tree theming but instead set the global theme state using the
|
|
84
|
-
* `@atlaskit/tokens` APIs, as it's required for styling root `html` and `body` elements
|
|
85
|
-
* for compatibility with `@atlaskit/css-reset`.
|
|
86
|
-
*
|
|
87
|
-
* In the future we could consider moving away from DOM mutations and require AppProvider to wrap
|
|
88
|
-
* `html` in order to apply global theme state, which would allow a more consistent approach to
|
|
89
|
-
* theme loading.
|
|
90
|
-
*/
|
|
91
|
-
isRootThemeProvider || (
|
|
92
|
-
/**
|
|
93
|
-
* Or when not behind feature flag, partially revert to legacy behavior.
|
|
94
|
-
* This only affects theme providers that are not inside an AppProvider or a ThemeProvider,
|
|
95
|
-
* as we still need to set global theme state to prevent breaking existing apps,
|
|
96
|
-
* but also prevent multiple theme providers from loading conflicting theme states.
|
|
97
|
-
*
|
|
98
|
-
* After we roll out the feature flag, this will be removed as we will
|
|
99
|
-
* only support sub-tree theming when used outside of AppProvider.
|
|
100
|
-
*/
|
|
101
|
-
!isInsideAppProvider && !isInsideThemeProvider && !fg('platform_dst_subtree_theming'))) {
|
|
102
|
+
if (shouldUseGlobalTheming) {
|
|
102
103
|
/**
|
|
103
104
|
* We need to wait for any previous `setGlobalTheme` calls to finish before calling it again.
|
|
104
105
|
* This is to prevent race conditions as `setGlobalTheme` is async and mutates the DOM (e.g. sets the
|
|
@@ -171,7 +172,7 @@ function ThemeProvider(_ref) {
|
|
|
171
172
|
// we treat them as sub-tree themes that do not load global theme state.
|
|
172
173
|
loadAndMountThemes(theme);
|
|
173
174
|
}
|
|
174
|
-
}, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, theme]);
|
|
175
|
+
}, [isInsideAppProvider, isInsideThemeProvider, isRootThemeProvider, reconciledColorMode, shouldUseGlobalTheming, theme]);
|
|
175
176
|
useEffect(function () {
|
|
176
177
|
if (!prefersDarkModeMql) {
|
|
177
178
|
return;
|
|
@@ -199,7 +200,7 @@ function ThemeProvider(_ref) {
|
|
|
199
200
|
value: theme
|
|
200
201
|
}, /*#__PURE__*/React.createElement(SetThemeContext.Provider, {
|
|
201
202
|
value: setPartialTheme
|
|
202
|
-
}, fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
|
|
203
|
+
}, !shouldUseGlobalTheming && fg('platform_dst_subtree_theming') ? /*#__PURE__*/React.createElement("div", _extends({}, attrs, {
|
|
203
204
|
className: ax([contentStyles.body])
|
|
204
205
|
}), children) : children)))));
|
|
205
206
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/app-provider",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.3",
|
|
4
4
|
"description": "A top level provider for the Design System.",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@atlaskit/browser-apis": "^0.0.1",
|
|
39
39
|
"@atlaskit/css": "^0.19.0",
|
|
40
40
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
41
|
-
"@atlaskit/tokens": "^
|
|
41
|
+
"@atlaskit/tokens": "^10.1.0",
|
|
42
42
|
"@babel/runtime": "^7.0.0",
|
|
43
43
|
"bind-event-listener": "^3.0.0"
|
|
44
44
|
},
|
|
@@ -48,11 +48,10 @@
|
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@af/visual-regression": "workspace:^",
|
|
50
50
|
"@atlaskit/dropdown-menu": "^16.4.0",
|
|
51
|
-
"@atlaskit/primitives": "^17.
|
|
51
|
+
"@atlaskit/primitives": "^17.1.0",
|
|
52
52
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
53
53
|
"@atlassian/ssr-tests": "workspace:^",
|
|
54
|
-
"@testing-library
|
|
55
|
-
"@testing-library/user-event": "^14.4.3",
|
|
54
|
+
"@atlassian/testing-library": "^0.4.0",
|
|
56
55
|
"react-dom": "^18.2.0",
|
|
57
56
|
"react-resource-router": "^0.20.0"
|
|
58
57
|
},
|