@atlaskit/tokens 1.45.0 → 1.46.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/tokens
 
+## 1.46.0
+
+### Minor Changes
+
+-   [#97306](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97306)
+    [`cefbd515c807`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cefbd515c807) -
+    Add support for React 18.
+
+### Patch Changes
+
+-   [#98562](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98562)
+    [`5c59b4fec679`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5c59b4fec679) -
+    ThemeMutationObserver only ever creates one instance of a mutation observer which reduces memory
+    impacts at scale. This change is behind a platform feature flag -
+    "platform.design-system-team.mutation-observer-performance-improvement_8usdg"
+
+## 1.45.1
+
+### Patch Changes
+
+-   [#96516](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96516)
+    [`fc7451742d3b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc7451742d3b) -
+    Remove the version from non-production warns to avoid internal conflicts as debugging like this
+    should not be necessary; this package should be a singleton.
+
 ## 1.45.0
 
 ### Minor Changes

package/dist/cjs/get-token-value.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
-var name = "@atlaskit/tokens";
-var version = "1.45.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.
@@ -35,7 +33,7 @@ function getTokenValue(tokenId) {
   var token = _tokenNames.default[tokenId];
   var tokenValue = fallback;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    (0, _warnOnce.default)("Unknown token id at path: ".concat(tokenId, " for ").concat(name, "@").concat(version));
+    (0, _warnOnce.default)("Unknown token id at path: ".concat(tokenId, " in @atlaskit/tokens"));
   }
   if (typeof window === 'undefined') {
     return tokenValue;

package/dist/cjs/get-token.js

@@ -8,8 +8,6 @@ exports.default = void 0;
 var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
 var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
 var _constants = require("./constants");
-var name = "@atlaskit/tokens";
-var version = "1.45.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.
@@ -35,7 +33,7 @@ var version = "1.45.0";
 function token(path, fallback) {
   var token = _tokenNames.default[path];
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    (0, _warnOnce.default)("Unknown token id at path: ".concat(path, " for ").concat(name, "@").concat(version));
+    (0, _warnOnce.default)("Unknown token id at path: ".concat(path, " in @atlaskit/tokens"));
   }
 
   // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css

package/dist/cjs/theme-mutation-observer.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("./constants");
 var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 /**
@@ -26,28 +27,57 @@ var _getGlobalTheme = _interopRequireDefault(require("./get-global-theme"));
 var ThemeMutationObserver = exports.default = /*#__PURE__*/function () {
   function ThemeMutationObserver(callback) {
     (0, _classCallCheck2.default)(this, ThemeMutationObserver);
-    (0, _defineProperty2.default)(this, "observer", null);
-    (0, _defineProperty2.default)(this, "mediaObserver", null);
+    (0, _defineProperty2.default)(this, "legacyObserver", null);
     this.callback = callback;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      ThemeMutationObserver.callbacks.add(callback);
+    }
   }
   (0, _createClass2.default)(ThemeMutationObserver, [{
     key: "observe",
     value: function observe() {
       var _this = this;
-      if (!this.observer) {
-        this.observer = new MutationObserver(function () {
-          _this.callback((0, _getGlobalTheme.default)());
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+        if (!ThemeMutationObserver.observer) {
+          ThemeMutationObserver.observer = new MutationObserver(function () {
+            var theme = (0, _getGlobalTheme.default)();
+            ThemeMutationObserver.callbacks.forEach(function (callback) {
+              return callback(theme);
+            });
+          });
+          // Observer only needs to be configured once
+          ThemeMutationObserver.observer.observe(document.documentElement, {
+            attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
+          });
+        }
+      } else {
+        if (!this.legacyObserver) {
+          this.legacyObserver = new MutationObserver(function () {
+            _this.callback((0, _getGlobalTheme.default)());
+          });
+        }
+        this.legacyObserver.observe(document.documentElement, {
+          attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
         });
       }
-      this.observer.observe(document.documentElement, {
-        attributeFilter: [_constants.THEME_DATA_ATTRIBUTE, _constants.COLOR_MODE_ATTRIBUTE]
-      });
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
-      this.observer && this.observer.disconnect();
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+        if (this.callback) {
+          ThemeMutationObserver.callbacks.delete(this.callback);
+        }
+        if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
+          ThemeMutationObserver.observer.disconnect();
+          ThemeMutationObserver.observer = null;
+        }
+      } else {
+        this.legacyObserver && this.legacyObserver.disconnect();
+      }
     }
   }]);
   return ThemeMutationObserver;
-}();
+}();
+(0, _defineProperty2.default)(ThemeMutationObserver, "observer", null);
+(0, _defineProperty2.default)(ThemeMutationObserver, "callbacks", new Set());

package/dist/es2019/get-token-value.js

@@ -1,7 +1,5 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
-const name = "@atlaskit/tokens";
-const version = "1.45.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.
@@ -27,7 +25,7 @@ function getTokenValue(tokenId, fallback = '') {
   let token = tokens[tokenId];
   let tokenValue = fallback;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    warnOnce(`Unknown token id at path: ${tokenId} for ${name}@${version}`);
+    warnOnce(`Unknown token id at path: ${tokenId} in @atlaskit/tokens`);
   }
   if (typeof window === 'undefined') {
     return tokenValue;

package/dist/es2019/get-token.js

@@ -1,8 +1,6 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
-const name = "@atlaskit/tokens";
-const version = "1.45.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.
@@ -28,7 +26,7 @@ const version = "1.45.0";
 function token(path, fallback) {
   let token = tokens[path];
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    warnOnce(`Unknown token id at path: ${path} for ${name}@${version}`);
+    warnOnce(`Unknown token id at path: ${path} in @atlaskit/tokens`);
   }
 
   // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css

package/dist/es2019/theme-mutation-observer.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import getGlobalTheme from './get-global-theme';
 /**
@@ -16,21 +17,48 @@ import getGlobalTheme from './get-global-theme';
  */
 export default class ThemeMutationObserver {
   constructor(callback) {
-    _defineProperty(this, "observer", null);
-    _defineProperty(this, "mediaObserver", null);
+    _defineProperty(this, "legacyObserver", null);
     this.callback = callback;
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      ThemeMutationObserver.callbacks.add(callback);
+    }
   }
   observe() {
-    if (!this.observer) {
-      this.observer = new MutationObserver(() => {
-        this.callback(getGlobalTheme());
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      if (!ThemeMutationObserver.observer) {
+        ThemeMutationObserver.observer = new MutationObserver(() => {
+          const theme = getGlobalTheme();
+          ThemeMutationObserver.callbacks.forEach(callback => callback(theme));
+        });
+        // Observer only needs to be configured once
+        ThemeMutationObserver.observer.observe(document.documentElement, {
+          attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
+        });
+      }
+    } else {
+      if (!this.legacyObserver) {
+        this.legacyObserver = new MutationObserver(() => {
+          this.callback(getGlobalTheme());
+        });
+      }
+      this.legacyObserver.observe(document.documentElement, {
+        attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
       });
     }
-    this.observer.observe(document.documentElement, {
-      attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
-    });
   }
   disconnect() {
-    this.observer && this.observer.disconnect();
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      if (this.callback) {
+        ThemeMutationObserver.callbacks.delete(this.callback);
+      }
+      if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
+        ThemeMutationObserver.observer.disconnect();
+        ThemeMutationObserver.observer = null;
+      }
+    } else {
+      this.legacyObserver && this.legacyObserver.disconnect();
+    }
   }
-}
+}
+_defineProperty(ThemeMutationObserver, "observer", null);
+_defineProperty(ThemeMutationObserver, "callbacks", new Set());

package/dist/esm/get-token-value.js

@@ -1,7 +1,5 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
-var name = "@atlaskit/tokens";
-var version = "1.45.0";
 /**
  * Takes a dot-separated token name and and an optional fallback, and returns the current computed CSS value for the
  * resulting CSS Custom Property.
@@ -28,7 +26,7 @@ function getTokenValue(tokenId) {
   var token = tokens[tokenId];
   var tokenValue = fallback;
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    warnOnce("Unknown token id at path: ".concat(tokenId, " for ").concat(name, "@").concat(version));
+    warnOnce("Unknown token id at path: ".concat(tokenId, " in @atlaskit/tokens"));
   }
   if (typeof window === 'undefined') {
     return tokenValue;

package/dist/esm/get-token.js

@@ -1,8 +1,6 @@
 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 import { TOKEN_NOT_FOUND_CSS_VAR } from './constants';
-var name = "@atlaskit/tokens";
-var version = "1.45.0";
 /**
  * Takes a dot-separated token name and an optional fallback, and returns the CSS custom property for the corresponding token.
  * This should be used to implement design decisions throughout your application.
@@ -28,7 +26,7 @@ var version = "1.45.0";
 function token(path, fallback) {
   var token = tokens[path];
   if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && !token) {
-    warnOnce("Unknown token id at path: ".concat(path, " for ").concat(name, "@").concat(version));
+    warnOnce("Unknown token id at path: ".concat(path, " in @atlaskit/tokens"));
   }
 
   // if the token is not found - replacing it with variable name without any value, to avoid it being undefined which would result in invalid css

package/dist/esm/theme-mutation-observer.js

@@ -1,6 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { COLOR_MODE_ATTRIBUTE, THEME_DATA_ATTRIBUTE } from './constants';
 import getGlobalTheme from './get-global-theme';
 /**
@@ -19,29 +20,58 @@ import getGlobalTheme from './get-global-theme';
 var ThemeMutationObserver = /*#__PURE__*/function () {
   function ThemeMutationObserver(callback) {
     _classCallCheck(this, ThemeMutationObserver);
-    _defineProperty(this, "observer", null);
-    _defineProperty(this, "mediaObserver", null);
+    _defineProperty(this, "legacyObserver", null);
     this.callback = callback;
+    if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+      ThemeMutationObserver.callbacks.add(callback);
+    }
   }
   _createClass(ThemeMutationObserver, [{
     key: "observe",
     value: function observe() {
       var _this = this;
-      if (!this.observer) {
-        this.observer = new MutationObserver(function () {
-          _this.callback(getGlobalTheme());
+      if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+        if (!ThemeMutationObserver.observer) {
+          ThemeMutationObserver.observer = new MutationObserver(function () {
+            var theme = getGlobalTheme();
+            ThemeMutationObserver.callbacks.forEach(function (callback) {
+              return callback(theme);
+            });
+          });
+          // Observer only needs to be configured once
+          ThemeMutationObserver.observer.observe(document.documentElement, {
+            attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
+          });
+        }
+      } else {
+        if (!this.legacyObserver) {
+          this.legacyObserver = new MutationObserver(function () {
+            _this.callback(getGlobalTheme());
+          });
+        }
+        this.legacyObserver.observe(document.documentElement, {
+          attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
         });
       }
-      this.observer.observe(document.documentElement, {
-        attributeFilter: [THEME_DATA_ATTRIBUTE, COLOR_MODE_ATTRIBUTE]
-      });
     }
   }, {
     key: "disconnect",
     value: function disconnect() {
-      this.observer && this.observer.disconnect();
+      if (getBooleanFF('platform.design-system-team.mutation-observer-performance-improvement_8usdg')) {
+        if (this.callback) {
+          ThemeMutationObserver.callbacks.delete(this.callback);
+        }
+        if (ThemeMutationObserver.callbacks.size === 0 && ThemeMutationObserver.observer) {
+          ThemeMutationObserver.observer.disconnect();
+          ThemeMutationObserver.observer = null;
+        }
+      } else {
+        this.legacyObserver && this.legacyObserver.disconnect();
+      }
     }
   }]);
   return ThemeMutationObserver;
 }();
+_defineProperty(ThemeMutationObserver, "observer", null);
+_defineProperty(ThemeMutationObserver, "callbacks", new Set());
 export { ThemeMutationObserver as default };

package/dist/types/theme-mutation-observer.d.ts

@@ -1,4 +1,5 @@
-import { ActiveThemeState } from './theme-config';
+import { type ActiveThemeState } from './theme-config';
+type ThemeCallback = (theme: Partial<ActiveThemeState>) => unknown;
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -13,10 +14,12 @@ import { ActiveThemeState } from './theme-config';
  * ```
  */
 export default class ThemeMutationObserver {
-    private callback;
-    observer: MutationObserver | null;
-    mediaObserver: any;
-    constructor(callback: (theme: Partial<ActiveThemeState>) => unknown);
+    legacyObserver: MutationObserver | null;
+    static observer: MutationObserver | null;
+    static callbacks: Set<ThemeCallback>;
+    callback: ThemeCallback;
+    constructor(callback: ThemeCallback);
     observe(): void;
     disconnect(): void;
 }
+export {};

package/dist/types/use-theme-observer.d.ts

@@ -1,4 +1,4 @@
-import { ActiveThemeState } from './theme-config';
+import { type ActiveThemeState } from './theme-config';
 /**
  * A React hook which returns the current themes and color-mode set on `<html>`.
  *

package/dist/types-ts4.5/theme-mutation-observer.d.ts

@@ -1,4 +1,5 @@
-import { ActiveThemeState } from './theme-config';
+import { type ActiveThemeState } from './theme-config';
+type ThemeCallback = (theme: Partial<ActiveThemeState>) => unknown;
 /**
  * A MutationObserver which watches the `<html>` element for changes to the theme.
  *
@@ -13,10 +14,12 @@ import { ActiveThemeState } from './theme-config';
  * ```
  */
 export default class ThemeMutationObserver {
-    private callback;
-    observer: MutationObserver | null;
-    mediaObserver: any;
-    constructor(callback: (theme: Partial<ActiveThemeState>) => unknown);
+    legacyObserver: MutationObserver | null;
+    static observer: MutationObserver | null;
+    static callbacks: Set<ThemeCallback>;
+    callback: ThemeCallback;
+    constructor(callback: ThemeCallback);
     observe(): void;
     disconnect(): void;
 }
+export {};

package/dist/types-ts4.5/use-theme-observer.d.ts

@@ -1,4 +1,4 @@
-import { ActiveThemeState } from './theme-config';
+import { type ActiveThemeState } from './theme-config';
 /**
  * A React hook which returns the current themes and color-mode set on `<html>`.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tokens",
-  "version": "1.45.0",
+  "version": "1.46.0",
   "description": "Design tokens are the single source of truth to name and store design decisions.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,6 +22,7 @@
       "jira"
     ],
     "releaseModel": "continuous",
+    "runReact18": true,
     "website": {
       "name": "Design tokens",
       "category": "Libraries"
@@ -42,7 +43,7 @@
     "bind-event-listener": "^3.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
@@ -50,6 +51,7 @@
     "@atlaskit/calendar": "^14.2.0",
     "@atlaskit/checkbox": "^13.3.0",
     "@atlaskit/radio": "^6.3.0",
+    "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/tooltip": "^18.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -129,6 +131,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.increased-contrast-themes": {
       "type": "boolean"
+    },
+    "platform.design-system-team.mutation-observer-performance-improvement_8usdg": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/tokens",