@atlaskit/app-provider 2.0.0 → 2.1.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.
Files changed (7) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/theme-provider.js +28 -16
  3. package/dist/es2019/theme-provider.js +13 -6
  4. package/dist/esm/theme-provider.js +29 -17
  5. package/dist/types/theme-provider.d.ts +1 -1
  6. package/dist/types-ts4.5/theme-provider.d.ts +1 -1
  7. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/app-provider
2
2
 
3
+ ## 2.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#130763](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130763)
8
+ [`42fdfd64b606b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42fdfd64b606b) -
9
+ useTheme now falls back to reading theme state from the DOM for cases where the
10
+ AppProvider/ThemeProvider is not in use. This allows us to replace all usage of `useThemeObserver`
11
+ with `useTheme` in other Design System packages without issue.
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 2.0.0
4
18
 
5
19
  ### Major Changes
package/dist/cjs/theme-provider.js CHANGED
@@ -80,11 +80,23 @@ function useSetColorMode() {
80
80
  * Returns the current theme settings when inside the app provider.
81
81
  */
82
82
  function useTheme() {
83
- var value = (0, _react.useContext)(ThemeContext);
84
- if (!value) {
85
- throw new Error('useTheme must be used within AppProvider.');
86
- }
87
- return value;
83
+ var theme = (0, _react.useContext)(ThemeContext);
84
+ var _useState = (0, _react.useState)(theme || (0, _tokens.getGlobalTheme)()),
85
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
86
+ resolvedTheme = _useState2[0],
87
+ setResolvedTheme = _useState2[1];
88
+ (0, _react.useEffect)(function () {
89
+ // We are using theme from context so no need to reference the DOM
90
+ if (theme) {
91
+ return;
92
+ }
93
+ var observer = new _tokens.ThemeMutationObserver(setResolvedTheme);
94
+ observer.observe();
95
+ return function () {
96
+ return observer.disconnect();
97
+ };
98
+ }, [theme]);
99
+ return resolvedTheme;
88
100
  }
89
101
 
90
102
  /**
@@ -121,20 +133,20 @@ function ThemeProvider(_ref) {
121
133
  var children = _ref.children,
122
134
  defaultColorMode = _ref.defaultColorMode,
123
135
  defaultTheme = _ref.defaultTheme;
124
- var _useState = (0, _react.useState)(defaultColorMode),
125
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
126
- chosenColorMode = _useState2[0],
127
- setChosenColorMode = _useState2[1];
128
- var _useState3 = (0, _react.useState)(getReconciledColorMode(defaultColorMode)),
136
+ var _useState3 = (0, _react.useState)(defaultColorMode),
129
137
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
130
- reconciledColorMode = _useState4[0],
131
- setReconciledColorMode = _useState4[1];
132
- var _useState5 = (0, _react.useState)(function () {
138
+ chosenColorMode = _useState4[0],
139
+ setChosenColorMode = _useState4[1];
140
+ var _useState5 = (0, _react.useState)(getReconciledColorMode(defaultColorMode)),
141
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
142
+ reconciledColorMode = _useState6[0],
143
+ setReconciledColorMode = _useState6[1];
144
+ var _useState7 = (0, _react.useState)(function () {
133
145
  return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
134
146
  }),
135
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
136
- theme = _useState6[0],
137
- setTheme = _useState6[1];
147
+ _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
148
+ theme = _useState8[0],
149
+ setTheme = _useState8[1];
138
150
  var setColorMode = (0, _react.useCallback)(function (colorMode) {
139
151
  setChosenColorMode(colorMode);
140
152
  setReconciledColorMode(getReconciledColorMode(colorMode));
package/dist/es2019/theme-provider.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
2
2
  import { bind } from 'bind-event-listener';
3
3
  import { fg } from '@atlaskit/platform-feature-flags';
4
- import { setGlobalTheme } from '@atlaskit/tokens';
4
+ import { getGlobalTheme, setGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
5
5
  const defaultThemeSettings = () => ({
6
6
  dark: 'dark',
7
7
  light: 'light',
@@ -57,11 +57,18 @@ export function useSetColorMode() {
57
57
  * Returns the current theme settings when inside the app provider.
58
58
  */
59
59
  export function useTheme() {
60
- const value = useContext(ThemeContext);
61
- if (!value) {
62
- throw new Error('useTheme must be used within AppProvider.');
63
- }
64
- return value;
60
+ const theme = useContext(ThemeContext);
61
+ const [resolvedTheme, setResolvedTheme] = useState(theme || getGlobalTheme());
62
+ useEffect(() => {
63
+ // We are using theme from context so no need to reference the DOM
64
+ if (theme) {
65
+ return;
66
+ }
67
+ const observer = new ThemeMutationObserver(setResolvedTheme);
68
+ observer.observe();
69
+ return () => observer.disconnect();
70
+ }, [theme]);
71
+ return resolvedTheme;
65
72
  }
66
73
 
67
74
  /**
package/dist/esm/theme-provider.js CHANGED
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
8
8
  import { bind } from 'bind-event-listener';
9
9
  import { fg } from '@atlaskit/platform-feature-flags';
10
- import { setGlobalTheme } from '@atlaskit/tokens';
10
+ import { getGlobalTheme, setGlobalTheme, ThemeMutationObserver } from '@atlaskit/tokens';
11
11
  var defaultThemeSettings = function defaultThemeSettings() {
12
12
  return {
13
13
  dark: 'dark',
@@ -65,11 +65,23 @@ export function useSetColorMode() {
65
65
  * Returns the current theme settings when inside the app provider.
66
66
  */
67
67
  export function useTheme() {
68
- var value = useContext(ThemeContext);
69
- if (!value) {
70
- throw new Error('useTheme must be used within AppProvider.');
71
- }
72
- return value;
68
+ var theme = useContext(ThemeContext);
69
+ var _useState = useState(theme || getGlobalTheme()),
70
+ _useState2 = _slicedToArray(_useState, 2),
71
+ resolvedTheme = _useState2[0],
72
+ setResolvedTheme = _useState2[1];
73
+ useEffect(function () {
74
+ // We are using theme from context so no need to reference the DOM
75
+ if (theme) {
76
+ return;
77
+ }
78
+ var observer = new ThemeMutationObserver(setResolvedTheme);
79
+ observer.observe();
80
+ return function () {
81
+ return observer.disconnect();
82
+ };
83
+ }, [theme]);
84
+ return resolvedTheme;
73
85
  }
74
86
 
75
87
  /**
@@ -106,20 +118,20 @@ function ThemeProvider(_ref) {
106
118
  var children = _ref.children,
107
119
  defaultColorMode = _ref.defaultColorMode,
108
120
  defaultTheme = _ref.defaultTheme;
109
- var _useState = useState(defaultColorMode),
110
- _useState2 = _slicedToArray(_useState, 2),
111
- chosenColorMode = _useState2[0],
112
- setChosenColorMode = _useState2[1];
113
- var _useState3 = useState(getReconciledColorMode(defaultColorMode)),
121
+ var _useState3 = useState(defaultColorMode),
114
122
  _useState4 = _slicedToArray(_useState3, 2),
115
- reconciledColorMode = _useState4[0],
116
- setReconciledColorMode = _useState4[1];
117
- var _useState5 = useState(function () {
123
+ chosenColorMode = _useState4[0],
124
+ setChosenColorMode = _useState4[1];
125
+ var _useState5 = useState(getReconciledColorMode(defaultColorMode)),
126
+ _useState6 = _slicedToArray(_useState5, 2),
127
+ reconciledColorMode = _useState6[0],
128
+ setReconciledColorMode = _useState6[1];
129
+ var _useState7 = useState(function () {
118
130
  return _objectSpread(_objectSpread({}, defaultThemeSettings()), defaultTheme);
119
131
  }),
120
- _useState6 = _slicedToArray(_useState5, 2),
121
- theme = _useState6[0],
122
- setTheme = _useState6[1];
132
+ _useState8 = _slicedToArray(_useState7, 2),
133
+ theme = _useState8[0],
134
+ setTheme = _useState8[1];
123
135
  var setColorMode = useCallback(function (colorMode) {
124
136
  setChosenColorMode(colorMode);
125
137
  setReconciledColorMode(getReconciledColorMode(colorMode));
package/dist/types/theme-provider.d.ts CHANGED
@@ -28,7 +28,7 @@ export declare function useSetColorMode(): (value: ColorMode) => void;
28
28
  *
29
29
  * Returns the current theme settings when inside the app provider.
30
30
  */
31
- export declare function useTheme(): Theme;
31
+ export declare function useTheme(): Partial<Theme>;
32
32
  /**
33
33
  * __useSetTheme()__
34
34
  *
package/dist/types-ts4.5/theme-provider.d.ts CHANGED
@@ -28,7 +28,7 @@ export declare function useSetColorMode(): (value: ColorMode) => void;
28
28
  *
29
29
  * Returns the current theme settings when inside the app provider.
30
30
  */
31
- export declare function useTheme(): Theme;
31
+ export declare function useTheme(): Partial<Theme>;
32
32
  /**
33
33
  * __useSetTheme()__
34
34
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/app-provider",
3
- "version": "2.0.0",
3
+ "version": "2.1.0",
4
4
  "description": "A top level provider for the Design System.",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -40,7 +40,7 @@
40
40
  },
41
41
  "dependencies": {
42
42
  "@atlaskit/platform-feature-flags": "^1.1.0",
43
- "@atlaskit/tokens": "^4.0.0",
43
+ "@atlaskit/tokens": "^4.5.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "bind-event-listener": "^3.0.0"
46
46
  },
@@ -48,12 +48,12 @@
48
48
  "react": "^18.2.0"
49
49
  },
50
50
  "devDependencies": {
51
- "@af/visual-regression": "*",
52
- "@atlaskit/dropdown-menu": "^13.0.0",
51
+ "@af/visual-regression": "^1.3.0",
52
+ "@atlaskit/dropdown-menu": "^14.0.0",
53
53
  "@atlaskit/ds-lib": "^4.0.0",
54
- "@atlaskit/primitives": "^14.0.0",
55
- "@atlaskit/ssr": "*",
56
- "@atlaskit/visual-regression": "*",
54
+ "@atlaskit/primitives": "^14.2.0",
55
+ "@atlaskit/visual-regression": "^0.10.0",
56
+ "@atlassian/ssr-tests": "^0.2.0",
57
57
  "@testing-library/react": "^13.4.0",
58
58
  "@testing-library/user-event": "^14.4.3",
59
59
  "react-dom": "^18.2.0",