@atlaskit/tokens 1.45.1 → 1.46.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 (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/theme-mutation-observer.js +40 -10
  3. package/dist/es2019/theme-mutation-observer.js +38 -10
  4. package/dist/esm/theme-mutation-observer.js +39 -9
  5. package/dist/types/theme-mutation-observer.d.ts +8 -5
  6. package/dist/types/use-theme-observer.d.ts +1 -1
  7. package/dist/types-ts4.5/theme-mutation-observer.d.ts +8 -5
  8. package/dist/types-ts4.5/use-theme-observer.d.ts +1 -1
  9. package/package.json +7 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/tokens
2
2
 
3
+ ## 1.46.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#97306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97306)
8
+ [`cefbd515c807`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cefbd515c807) -
9
+ Add support for React 18.
10
+
11
+ ### Patch Changes
12
+
13
+ - [#98562](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98562)
14
+ [`5c59b4fec679`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c59b4fec679) -
15
+ ThemeMutationObserver only ever creates one instance of a mutation observer which reduces memory
16
+ impacts at scale. This change is behind a platform feature flag -
17
+ "platform.design-system-team.mutation-observer-performance-improvement_8usdg"
18
+
3
19
  ## 1.45.1
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/theme-mutation-observer.js CHANGED
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
9
9
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
12
  var _constants = require("./constants");
12
13
  var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
13
14
  /**
@@ -26,28 +27,57 @@ var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
26
27
  var ThemeMutationObserver = exports.default = /*#__PURE__*/function () {
27
28
  function ThemeMutationObserver(callback) {
28
29
  (0, _classCallCheck2.default)(this, ThemeMutationObserver);
29
- (0, _defineProperty2.default)(this, "observer", null);
30
- (0, _defineProperty2.default)(this, "mediaObserver", null);
30
+ (0, _defineProperty2.default)(this, "legacyObserver", null);
31
31
  this.callback = callback;
32
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
33
+ ThemeMutationObserver.callbacks.add(callback);
34
+ }
32
35
  }
33
36
  (0, _createClass2.default)(ThemeMutationObserver, [{
34
37
  key: "observe",
35
38
  value: function observe() {
36
39
  var _this = this;
37
- if (!this.observer) {
38
- this.observer = new MutationObserver(function () {
39
- _this.callback((0, _getGlobalTheme.default)());
40
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
41
+ if (!ThemeMutationObserver.observer) {
42
+ ThemeMutationObserver.observer = new MutationObserver(function () {
43
+ var theme = (0, _getGlobalTheme.default)();
44
+ ThemeMutationObserver.callbacks.forEach(function (callback) {
45
+ return callback(theme);
46
+ });
47
+ });
48
+ // Observer only needs to be configured once
49
+ ThemeMutationObserver.observer.observe(document.documentElement, {
50
+ attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
51
+ });
52
+ }
53
+ } else {
54
+ if (!this.legacyObserver) {
55
+ this.legacyObserver = new MutationObserver(function () {
56
+ _this.callback((0, _getGlobalTheme.default)());
57
+ });
58
+ }
59
+ this.legacyObserver.observe(document.documentElement, {
60
+ attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
40
61
  });
41
62
  }
42
- this.observer.observe(document.documentElement, {
43
- attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
44
- });
45
63
  }
46
64
  }, {
47
65
  key: "disconnect",
48
66
  value: function disconnect() {
49
- this.observer && this.observer.disconnect();
67
+ if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
68
+ if (this.callback) {
69
+ ThemeMutationObserver.callbacks.delete(this.callback);
70
+ }
71
+ if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
72
+ ThemeMutationObserver.observer.disconnect();
73
+ ThemeMutationObserver.observer = null;
74
+ }
75
+ } else {
76
+ this.legacyObserver && this.legacyObserver.disconnect();
77
+ }
50
78
  }
51
79
  }]);
52
80
  return ThemeMutationObserver;
53
- }();
81
+ }();
82
+ (0, _defineProperty2.default)(ThemeMutationObserver, "observer", null);
83
+ (0, _defineProperty2.default)(ThemeMutationObserver, "callbacks", new Set());
package/dist/es2019/theme-mutation-observer.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
3
  import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
3
4
  import getGlobalTheme from './get-global-theme';
4
5
  /**
@@ -16,21 +17,48 @@ import getGlobalTheme from './get-global-theme';
16
17
  */
17
18
  export default class ThemeMutationObserver {
18
19
  constructor(callback) {
19
- _defineProperty(this, "observer", null);
20
- _defineProperty(this, "mediaObserver", null);
20
+ _defineProperty(this, "legacyObserver", null);
21
21
  this.callback = callback;
22
+ if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
23
+ ThemeMutationObserver.callbacks.add(callback);
24
+ }
22
25
  }
23
26
  observe() {
24
- if (!this.observer) {
25
- this.observer = new MutationObserver(() => {
26
- this.callback(getGlobalTheme());
27
+ if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
28
+ if (!ThemeMutationObserver.observer) {
29
+ ThemeMutationObserver.observer = new MutationObserver(() => {
30
+ const theme = getGlobalTheme();
31
+ ThemeMutationObserver.callbacks.forEach(callback => callback(theme));
32
+ });
33
+ // Observer only needs to be configured once
34
+ ThemeMutationObserver.observer.observe(document.documentElement, {
35
+ attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
36
+ });
37
+ }
38
+ } else {
39
+ if (!this.legacyObserver) {
40
+ this.legacyObserver = new MutationObserver(() => {
41
+ this.callback(getGlobalTheme());
42
+ });
43
+ }
44
+ this.legacyObserver.observe(document.documentElement, {
45
+ attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
27
46
  });
28
47
  }
29
- this.observer.observe(document.documentElement, {
30
- attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
31
- });
32
48
  }
33
49
  disconnect() {
34
- this.observer && this.observer.disconnect();
50
+ if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
51
+ if (this.callback) {
52
+ ThemeMutationObserver.callbacks.delete(this.callback);
53
+ }
54
+ if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
55
+ ThemeMutationObserver.observer.disconnect();
56
+ ThemeMutationObserver.observer = null;
57
+ }
58
+ } else {
59
+ this.legacyObserver && this.legacyObserver.disconnect();
60
+ }
35
61
  }
36
- }
62
+ }
63
+ _defineProperty(ThemeMutationObserver, "observer", null);
64
+ _defineProperty(ThemeMutationObserver, "callbacks", new Set());
package/dist/esm/theme-mutation-observer.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2
2
  import _createClass from "@babel/runtime/helpers/createClass";
3
3
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
4
5
  import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
5
6
  import getGlobalTheme from './get-global-theme';
6
7
  /**
@@ -19,29 +20,58 @@ import getGlobalTheme from './get-global-theme';
19
20
  var ThemeMutationObserver = /*#__PURE__*/function () {
20
21
  function ThemeMutationObserver(callback) {
21
22
  _classCallCheck(this, ThemeMutationObserver);
22
- _defineProperty(this, "observer", null);
23
- _defineProperty(this, "mediaObserver", null);
23
+ _defineProperty(this, "legacyObserver", null);
24
24
  this.callback = callback;
25
+ if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
26
+ ThemeMutationObserver.callbacks.add(callback);
27
+ }
25
28
  }
26
29
  _createClass(ThemeMutationObserver, [{
27
30
  key: "observe",
28
31
  value: function observe() {
29
32
  var _this = this;
30
- if (!this.observer) {
31
- this.observer = new MutationObserver(function () {
32
- _this.callback(getGlobalTheme());
33
+ if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
34
+ if (!ThemeMutationObserver.observer) {
35
+ ThemeMutationObserver.observer = new MutationObserver(function () {
36
+ var theme = getGlobalTheme();
37
+ ThemeMutationObserver.callbacks.forEach(function (callback) {
38
+ return callback(theme);
39
+ });
40
+ });
41
+ // Observer only needs to be configured once
42
+ ThemeMutationObserver.observer.observe(document.documentElement, {
43
+ attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
44
+ });
45
+ }
46
+ } else {
47
+ if (!this.legacyObserver) {
48
+ this.legacyObserver = new MutationObserver(function () {
49
+ _this.callback(getGlobalTheme());
50
+ });
51
+ }
52
+ this.legacyObserver.observe(document.documentElement, {
53
+ attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
33
54
  });
34
55
  }
35
- this.observer.observe(document.documentElement, {
36
- attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
37
- });
38
56
  }
39
57
  }, {
40
58
  key: "disconnect",
41
59
  value: function disconnect() {
42
- this.observer && this.observer.disconnect();
60
+ if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
61
+ if (this.callback) {
62
+ ThemeMutationObserver.callbacks.delete(this.callback);
63
+ }
64
+ if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
65
+ ThemeMutationObserver.observer.disconnect();
66
+ ThemeMutationObserver.observer = null;
67
+ }
68
+ } else {
69
+ this.legacyObserver && this.legacyObserver.disconnect();
70
+ }
43
71
  }
44
72
  }]);
45
73
  return ThemeMutationObserver;
46
74
  }();
75
+ _defineProperty(ThemeMutationObserver, "observer", null);
76
+ _defineProperty(ThemeMutationObserver, "callbacks", new Set());
47
77
  export { ThemeMutationObserver as default };
package/dist/types/theme-mutation-observer.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { ActiveThemeState } from './theme-config';
1
+ import { type ActiveThemeState } from './theme-config';
2
+ type ThemeCallback = (theme: Partial<ActiveThemeState>) => unknown;
2
3
  /**
3
4
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
5
  *
@@ -13,10 +14,12 @@ import { ActiveThemeState } from './theme-config';
13
14
  * ```
14
15
  */
15
16
  export default class ThemeMutationObserver {
16
- private callback;
17
- observer: MutationObserver | null;
18
- mediaObserver: any;
19
- constructor(callback: (theme: Partial<ActiveThemeState>) => unknown);
17
+ legacyObserver: MutationObserver | null;
18
+ static observer: MutationObserver | null;
19
+ static callbacks: Set<ThemeCallback>;
20
+ callback: ThemeCallback;
21
+ constructor(callback: ThemeCallback);
20
22
  observe(): void;
21
23
  disconnect(): void;
22
24
  }
25
+ export {};
package/dist/types/use-theme-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ActiveThemeState } from './theme-config';
1
+ import { type ActiveThemeState } from './theme-config';
2
2
  /**
3
3
  * A React hook which returns the current themes and color-mode set on `<html>`.
4
4
  *
package/dist/types-ts4.5/theme-mutation-observer.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { ActiveThemeState } from './theme-config';
1
+ import { type ActiveThemeState } from './theme-config';
2
+ type ThemeCallback = (theme: Partial<ActiveThemeState>) => unknown;
2
3
  /**
3
4
  * A MutationObserver which watches the `<html>` element for changes to the theme.
4
5
  *
@@ -13,10 +14,12 @@ import { ActiveThemeState } from './theme-config';
13
14
  * ```
14
15
  */
15
16
  export default class ThemeMutationObserver {
16
- private callback;
17
- observer: MutationObserver | null;
18
- mediaObserver: any;
19
- constructor(callback: (theme: Partial<ActiveThemeState>) => unknown);
17
+ legacyObserver: MutationObserver | null;
18
+ static observer: MutationObserver | null;
19
+ static callbacks: Set<ThemeCallback>;
20
+ callback: ThemeCallback;
21
+ constructor(callback: ThemeCallback);
20
22
  observe(): void;
21
23
  disconnect(): void;
22
24
  }
25
+ export {};
package/dist/types-ts4.5/use-theme-observer.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ActiveThemeState } from './theme-config';
1
+ import { type ActiveThemeState } from './theme-config';
2
2
  /**
3
3
  * A React hook which returns the current themes and color-mode set on `<html>`.
4
4
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "1.45.1",
3
+ "version": "1.46.0",
4
4
  "description": "Design tokens are the single source of truth to name and store design decisions.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -22,6 +22,7 @@
22
22
  "jira"
23
23
  ],
24
24
  "releaseModel": "continuous",
25
+ "runReact18": true,
25
26
  "website": {
26
27
  "name": "Design tokens",
27
28
  "category": "Libraries"
@@ -42,7 +43,7 @@
42
43
  "bind-event-listener": "^3.0.0"
43
44
  },
44
45
  "peerDependencies": {
45
- "react": "^16.8.0"
46
+ "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
46
47
  },
47
48
  "devDependencies": {
48
49
  "@af/accessibility-testing": "*",
@@ -50,6 +51,7 @@
50
51
  "@atlaskit/calendar": "^14.2.0",
51
52
  "@atlaskit/checkbox": "^13.3.0",
52
53
  "@atlaskit/radio": "^6.3.0",
54
+ "@atlaskit/textfield": "^6.3.0",
53
55
  "@atlaskit/tooltip": "^18.3.0",
54
56
  "@atlaskit/visual-regression": "*",
55
57
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -129,6 +131,9 @@
129
131
  "platform-feature-flags": {
130
132
  "platform.design-system-team.increased-contrast-themes": {
131
133
  "type": "boolean"
134
+ },
135
+ "platform.design-system-team.mutation-observer-performance-improvement_8usdg": {
136
+ "type": "boolean"
132
137
  }
133
138
  },
134
139
  "homepage": "https://atlassian.design/components/tokens",