@atlaskit/emoji 67.4.10 → 67.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/emoji
 
+## 67.5.1
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
+## 67.5.0
+
+### Minor Changes
+
+- [`630ece558fe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/630ece558fe) - Added onlyFetchOnDemand config to disable fetching by default in EmojiCommonProvider
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 67.4.10
 
 ### Patch Changes

package/dist/cjs/api/EmojiResource.js

@@ -55,6 +55,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "initialLoaders", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "retries", new Map());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isInitialised", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fetchOnDemand", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getOptimisticImageURL", function (emojiId) {
       if (_this.emojiProviderConfig.optimisticImageApi) {
         return _this.emojiProviderConfig.optimisticImageApi.getUrl(emojiId);
@@ -76,6 +77,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
     if (config.providers.length === 0) {
       throw new Error('No providers specified');
     }
+    _this.fetchOnDemand = !!config.options && !!config.options.onlyFetchOnDemand;
     _this.initialLoaders = _this.emojiProviderConfig.providers.length;
     _this.activeLoaders = _this.emojiProviderConfig.providers.length;
     _this.emojiResponses = [];
@@ -96,7 +98,7 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {
-                fetchAtStart: true
+                fetchAtStart: !this.fetchOnDemand
               };
               if (!options.fetchAtStart) {
                 _context.next = 11;
@@ -219,6 +221,11 @@ var EmojiResource = /*#__PURE__*/function (_ref) {
       }
       return fetchEmojiProvider;
     }()
+  }, {
+    key: "onlyFetchOnDemand",
+    value: function onlyFetchOnDemand() {
+      return this.fetchOnDemand;
+    }
   }, {
     key: "fetchByEmojiId",
     value: function () {

package/dist/cjs/components/common/styles.js

@@ -34,8 +34,8 @@ var deleteButton = (0, _react.css)({
   visibility: 'hidden',
   display: 'flex',
   position: 'absolute',
-  top: '-8px',
-  right: '-8px',
+  top: "var(--ds-space-negative-100, -8px)",
+  right: "var(--ds-space-negative-100, -8px)",
   zIndex: 1
 });
 exports.deleteButton = deleteButton;
@@ -136,7 +136,7 @@ var emojiButton = (0, _react.css)((_css3 = {
   border: '0 none',
   padding: 0
 }), (0, _defineProperty2.default)(_css3, '&>span', (_span = {
-  padding: '6px'
+  padding: "var(--ds-space-075, 6px)"
 }, (0, _defineProperty2.default)(_span, "&>.".concat(emojiSprite), {
   height: '24px',
   width: '24px'
@@ -172,7 +172,7 @@ var previewText = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column',
   alignSelf: 'center',
-  marginTop: '-2px',
+  marginTop: "var(--ds-space-negative-025, -2px)",
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -195,9 +195,9 @@ var emojiShortName = (0, _react.css)((0, _defineProperty2.default)({
   color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   fontSize: '12px',
   lineHeight: 1,
-  marginBottom: '-2px',
+  marginBottom: "var(--ds-space-negative-025, -2px)",
   overflow: 'hidden',
-  paddingBottom: '2px',
+  paddingBottom: "var(--ds-space-025, 2px)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 }, '&:first-of-type', {
@@ -321,7 +321,7 @@ exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _react.css)({
   h5: {
     color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-    paddingBottom: '4px',
+    paddingBottom: "var(--ds-space-050, 4px)",
     fontSize: '12px'
   },
   img: {
@@ -331,7 +331,7 @@ var uploadPreviewText = (0, _react.css)({
 });
 exports.uploadPreviewText = uploadPreviewText;
 var bigEmojiPreview = (0, _react.css)({
-  paddingLeft: '4px',
+  paddingLeft: "var(--ds-space-050, 4px)",
   img: {
     maxHeight: '40px',
     maxWidth: '100px'
@@ -382,7 +382,7 @@ var headingH5 = (0, _react.css)({
 });
 exports.headingH5 = headingH5;
 var requiredSymbol = (0, _react.css)({
-  paddingLeft: "".concat((0, _constants2.gridSize)() / 4, "px"),
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   fontFamily: (0, _constants2.fontFamily)()
 });
@@ -404,7 +404,7 @@ var deleteFooter = (0, _react.css)((0, _defineProperty2.default)({
 }, ".".concat(submitDelete), {
   width: '84px',
   fontWeight: 'bold',
-  marginRight: '4px'
+  marginRight: "var(--ds-space-050, 4px)"
 }));
 exports.deleteFooter = deleteFooter;
 var emojiDeleteErrorMessage = (0, _react.css)({
@@ -412,7 +412,7 @@ var emojiDeleteErrorMessage = (0, _react.css)({
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   alignItems: 'center',
   justifyContent: 'flex-end',
-  paddingRight: '4px'
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 exports.emojiDeleteErrorMessage = emojiDeleteErrorMessage;
 var emojiChooseFileErrorMessage = (0, _react.css)({
@@ -438,7 +438,7 @@ var uploadRetryButton = (0, _react.css)({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -447,7 +447,7 @@ exports.uploadRetryButton = uploadRetryButton;
 var uploadEmojiButton = (0, _react.css)({
   maxWidth: '187px',
   justifyContent: 'center',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -471,7 +471,7 @@ exports.emojiActionsWrapper = emojiActionsWrapper;
 var tooltipShortcutStyle = (0, _react.css)({
   borderRadius: '3px',
   backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"),
-  padding: '0 2px',
+  padding: "0 ".concat("var(--ds-space-025, 2px)"),
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'tooltip-shortcut'

package/dist/cjs/components/uploader/styles.js

@@ -16,10 +16,10 @@ var emojiUploadWidget = (0, _react.css)({
   background: "var(--ds-surface-overlay, white)",
   height: "120px",
   width: "".concat(_constants.emojiPickerWidth, "px"),
-  marginBottom: '8px',
+  marginBottom: "var(--ds-space-100, 8px)",
   minWidth: "".concat(_constants.emojiPickerWidth, "px"),
   margin: '-10px',
-  marginTop: '-16px'
+  marginTop: "var(--ds-space-negative-200, -16px)"
 });
 
 /// Footer

package/dist/cjs/context/EmojiContextProvider.js

@@ -47,7 +47,14 @@ var EmojiContextProvider = function EmojiContextProvider(_ref) {
       }));
       return _fetchEmojiProvider.apply(this, arguments);
     }
-    fetchEmojiProvider();
+    if (memoizedEmojiContextValue !== null && memoizedEmojiContextValue !== void 0 && memoizedEmojiContextValue.emoji.emojiProvider.onlyFetchOnDemand) {
+      var isFetchingOnDemand = memoizedEmojiContextValue === null || memoizedEmojiContextValue === void 0 ? void 0 : memoizedEmojiContextValue.emoji.emojiProvider.onlyFetchOnDemand();
+      if (!isFetchingOnDemand) {
+        fetchEmojiProvider();
+      }
+    } else {
+      fetchEmojiProvider();
+    }
   }, [memoizedEmojiContextValue]);
   return /*#__PURE__*/_react.default.createElement(_EmojiContext.EmojiContext.Provider, {
     value: memoizedEmojiContextValue

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.4.10"
+      packageVersion: "67.5.1"
     }, attributes)
   };
 };

package/dist/es2019/api/EmojiResource.js

@@ -30,6 +30,7 @@ export class EmojiResource extends AbstractResource {
     _defineProperty(this, "initialLoaders", 0);
     _defineProperty(this, "retries", new Map());
     _defineProperty(this, "isInitialised", false);
+    _defineProperty(this, "fetchOnDemand", false);
     _defineProperty(this, "getOptimisticImageURL", emojiId => {
       if (this.emojiProviderConfig.optimisticImageApi) {
         return this.emojiProviderConfig.optimisticImageApi.getUrl(emojiId);
@@ -49,6 +50,7 @@ export class EmojiResource extends AbstractResource {
     if (config.providers.length === 0) {
       throw new Error('No providers specified');
     }
+    this.fetchOnDemand = !!config.options && !!config.options.onlyFetchOnDemand;
     this.initialLoaders = this.emojiProviderConfig.providers.length;
     this.activeLoaders = this.emojiProviderConfig.providers.length;
     this.emojiResponses = [];
@@ -59,7 +61,7 @@ export class EmojiResource extends AbstractResource {
    * @returns Promise<EmojiProvider>
    */
   async getEmojiProvider(options = {
-    fetchAtStart: true
+    fetchAtStart: !this.fetchOnDemand
   }) {
     if (options.fetchAtStart) {
       try {
@@ -118,6 +120,9 @@ export class EmojiResource extends AbstractResource {
     }
     return Promise.resolve(this.emojiRepository);
   }
+  onlyFetchOnDemand() {
+    return this.fetchOnDemand;
+  }
   async fetchByEmojiId(emojiId, optimistic) {
     // Check if repository exists and emoji is defined.
     if (this.isLoaded() && this.isRepositoryAvailable(this.emojiRepository)) {

package/dist/es2019/components/common/styles.js

@@ -2,7 +2,7 @@ import { css, keyframes } from '@emotion/react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 export const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -16,8 +16,8 @@ export const deleteButton = css({
   visibility: 'hidden',
   display: 'flex',
   position: 'absolute',
-  top: '-8px',
-  right: '-8px',
+  top: "var(--ds-space-negative-100, -8px)",
+  right: "var(--ds-space-negative-100, -8px)",
   zIndex: 1
 });
 export const emojiToneSelectorContainer = css({
@@ -128,7 +128,7 @@ export const emojiButton = css({
     padding: 0
   },
   '&>span': {
-    padding: '6px',
+    padding: "var(--ds-space-075, 6px)",
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {
       height: '24px',
@@ -167,7 +167,7 @@ export const previewText = css({
   display: 'flex',
   flexDirection: 'column',
   alignSelf: 'center',
-  marginTop: '-2px',
+  marginTop: "var(--ds-space-negative-025, -2px)",
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -189,9 +189,9 @@ export const emojiShortName = css({
   color: `var(--ds-text-subtle, ${N200})`,
   fontSize: '12px',
   lineHeight: 1,
-  marginBottom: '-2px',
+  marginBottom: "var(--ds-space-negative-025, -2px)",
   overflow: 'hidden',
-  paddingBottom: '2px',
+  paddingBottom: "var(--ds-space-025, 2px)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   ['&:first-of-type']: {
@@ -308,7 +308,7 @@ export const uploadPreview = css({
 export const uploadPreviewText = css({
   h5: {
     color: `var(--ds-text-subtle, ${N300})`,
-    paddingBottom: '4px',
+    paddingBottom: "var(--ds-space-050, 4px)",
     fontSize: '12px'
   },
   img: {
@@ -317,7 +317,7 @@ export const uploadPreviewText = css({
   }
 });
 export const bigEmojiPreview = css({
-  paddingLeft: '4px',
+  paddingLeft: "var(--ds-space-050, 4px)",
   img: {
     maxHeight: '40px',
     maxWidth: '100px'
@@ -362,7 +362,7 @@ export const headingH5 = css({
   }
 });
 export const requiredSymbol = css({
-  paddingLeft: `${getGridSize() / 4}px`,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: `var(--ds-text-danger, ${R400})`,
   fontFamily: getFontFamily()
 });
@@ -382,7 +382,7 @@ export const deleteFooter = css({
   [`.${submitDelete}`]: {
     width: '84px',
     fontWeight: 'bold',
-    marginRight: '4px'
+    marginRight: "var(--ds-space-050, 4px)"
   }
 });
 export const emojiDeleteErrorMessage = css({
@@ -390,7 +390,7 @@ export const emojiDeleteErrorMessage = css({
   color: `var(--ds-text-danger, ${R400})`,
   alignItems: 'center',
   justifyContent: 'flex-end',
-  paddingRight: '4px'
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 export const emojiChooseFileErrorMessage = css({
   display: 'flex',
@@ -412,7 +412,7 @@ export const uploadRetryButton = css({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -420,7 +420,7 @@ export const uploadRetryButton = css({
 export const uploadEmojiButton = css({
   maxWidth: '187px',
   justifyContent: 'center',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -440,7 +440,7 @@ export const emojiActionsWrapper = css({
 export const tooltipShortcutStyle = css({
   borderRadius: '3px',
   backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
-  padding: '0 2px',
+  padding: `0 ${"var(--ds-space-025, 2px)"}`,
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'tooltip-shortcut'

package/dist/es2019/components/uploader/styles.js

@@ -11,10 +11,10 @@ export const emojiUploadWidget = css({
   background: "var(--ds-surface-overlay, white)",
   height: `120px`,
   width: `${emojiPickerWidth}px`,
-  marginBottom: '8px',
+  marginBottom: "var(--ds-space-100, 8px)",
   minWidth: `${emojiPickerWidth}px`,
   margin: '-10px',
-  marginTop: '-16px'
+  marginTop: "var(--ds-space-negative-200, -16px)"
 });
 
 /// Footer

package/dist/es2019/context/EmojiContextProvider.js

@@ -15,7 +15,14 @@ export const EmojiContextProvider = ({
         debug('fetchEmojiProvider error catched from outside', error);
       }
     }
-    fetchEmojiProvider();
+    if (memoizedEmojiContextValue !== null && memoizedEmojiContextValue !== void 0 && memoizedEmojiContextValue.emoji.emojiProvider.onlyFetchOnDemand) {
+      const isFetchingOnDemand = memoizedEmojiContextValue === null || memoizedEmojiContextValue === void 0 ? void 0 : memoizedEmojiContextValue.emoji.emojiProvider.onlyFetchOnDemand();
+      if (!isFetchingOnDemand) {
+        fetchEmojiProvider();
+      }
+    } else {
+      fetchEmojiProvider();
+    }
   }, [memoizedEmojiContextValue]);
   return /*#__PURE__*/React.createElement(EmojiContext.Provider, {
     value: memoizedEmojiContextValue

package/dist/es2019/util/analytics/analytics.js

@@ -7,7 +7,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "67.4.10",
+    packageVersion: "67.5.1",
     ...attributes
   }
 });

package/dist/esm/api/EmojiResource.js

@@ -47,6 +47,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     _defineProperty(_assertThisInitialized(_this), "initialLoaders", 0);
     _defineProperty(_assertThisInitialized(_this), "retries", new Map());
     _defineProperty(_assertThisInitialized(_this), "isInitialised", false);
+    _defineProperty(_assertThisInitialized(_this), "fetchOnDemand", false);
     _defineProperty(_assertThisInitialized(_this), "getOptimisticImageURL", function (emojiId) {
       if (_this.emojiProviderConfig.optimisticImageApi) {
         return _this.emojiProviderConfig.optimisticImageApi.getUrl(emojiId);
@@ -68,6 +69,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
     if (config.providers.length === 0) {
       throw new Error('No providers specified');
     }
+    _this.fetchOnDemand = !!config.options && !!config.options.onlyFetchOnDemand;
     _this.initialLoaders = _this.emojiProviderConfig.providers.length;
     _this.activeLoaders = _this.emojiProviderConfig.providers.length;
     _this.emojiResponses = [];
@@ -88,7 +90,7 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
               options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {
-                fetchAtStart: true
+                fetchAtStart: !this.fetchOnDemand
               };
               if (!options.fetchAtStart) {
                 _context.next = 11;
@@ -211,6 +213,11 @@ export var EmojiResource = /*#__PURE__*/function (_ref) {
       }
       return fetchEmojiProvider;
     }()
+  }, {
+    key: "onlyFetchOnDemand",
+    value: function onlyFetchOnDemand() {
+      return this.fetchOnDemand;
+    }
   }, {
     key: "fetchByEmojiId",
     value: function () {

package/dist/esm/components/common/styles.js

@@ -5,7 +5,7 @@ import { css, keyframes } from '@emotion/react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 export var commonSelectedStyles = 'emoji-common-selected';
 export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
@@ -19,8 +19,8 @@ export var deleteButton = css({
   visibility: 'hidden',
   display: 'flex',
   position: 'absolute',
-  top: '-8px',
-  right: '-8px',
+  top: "var(--ds-space-negative-100, -8px)",
+  right: "var(--ds-space-negative-100, -8px)",
   zIndex: 1
 });
 export var emojiToneSelectorContainer = css({
@@ -113,7 +113,7 @@ export var emojiButton = css((_css3 = {
   border: '0 none',
   padding: 0
 }), _defineProperty(_css3, '&>span', (_span = {
-  padding: '6px'
+  padding: "var(--ds-space-075, 6px)"
 }, _defineProperty(_span, "&>.".concat(emojiSprite), {
   height: '24px',
   width: '24px'
@@ -146,7 +146,7 @@ export var previewText = css({
   display: 'flex',
   flexDirection: 'column',
   alignSelf: 'center',
-  marginTop: '-2px',
+  marginTop: "var(--ds-space-negative-025, -2px)",
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -167,9 +167,9 @@ export var emojiShortName = css(_defineProperty({
   color: "var(--ds-text-subtle, ".concat(N200, ")"),
   fontSize: '12px',
   lineHeight: 1,
-  marginBottom: '-2px',
+  marginBottom: "var(--ds-space-negative-025, -2px)",
   overflow: 'hidden',
-  paddingBottom: '2px',
+  paddingBottom: "var(--ds-space-025, 2px)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 }, '&:first-of-type', {
@@ -281,7 +281,7 @@ export var uploadPreview = css({
 export var uploadPreviewText = css({
   h5: {
     color: "var(--ds-text-subtle, ".concat(N300, ")"),
-    paddingBottom: '4px',
+    paddingBottom: "var(--ds-space-050, 4px)",
     fontSize: '12px'
   },
   img: {
@@ -290,7 +290,7 @@ export var uploadPreviewText = css({
   }
 });
 export var bigEmojiPreview = css({
-  paddingLeft: '4px',
+  paddingLeft: "var(--ds-space-050, 4px)",
   img: {
     maxHeight: '40px',
     maxWidth: '100px'
@@ -335,7 +335,7 @@ export var headingH5 = css({
   }
 });
 export var requiredSymbol = css({
-  paddingLeft: "".concat(getGridSize() / 4, "px"),
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   fontFamily: getFontFamily()
 });
@@ -355,14 +355,14 @@ export var deleteFooter = css(_defineProperty({
 }, ".".concat(submitDelete), {
   width: '84px',
   fontWeight: 'bold',
-  marginRight: '4px'
+  marginRight: "var(--ds-space-050, 4px)"
 }));
 export var emojiDeleteErrorMessage = css({
   display: 'flex',
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   alignItems: 'center',
   justifyContent: 'flex-end',
-  paddingRight: '4px'
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 export var emojiChooseFileErrorMessage = css({
   display: 'flex',
@@ -384,7 +384,7 @@ export var uploadRetryButton = css({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -392,7 +392,7 @@ export var uploadRetryButton = css({
 export var uploadEmojiButton = css({
   maxWidth: '187px',
   justifyContent: 'center',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -412,7 +412,7 @@ export var emojiActionsWrapper = css({
 export var tooltipShortcutStyle = css({
   borderRadius: '3px',
   backgroundColor: "var(--ds-background-inverse-subtle, ".concat(N400, ")"),
-  padding: '0 2px',
+  padding: "0 ".concat("var(--ds-space-025, 2px)"),
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'tooltip-shortcut'

package/dist/esm/components/uploader/styles.js

@@ -11,10 +11,10 @@ export var emojiUploadWidget = css({
   background: "var(--ds-surface-overlay, white)",
   height: "120px",
   width: "".concat(emojiPickerWidth, "px"),
-  marginBottom: '8px',
+  marginBottom: "var(--ds-space-100, 8px)",
   minWidth: "".concat(emojiPickerWidth, "px"),
   margin: '-10px',
-  marginTop: '-16px'
+  marginTop: "var(--ds-space-negative-200, -16px)"
 });
 
 /// Footer

package/dist/esm/context/EmojiContextProvider.js

@@ -37,7 +37,14 @@ export var EmojiContextProvider = function EmojiContextProvider(_ref) {
       }));
       return _fetchEmojiProvider.apply(this, arguments);
     }
-    fetchEmojiProvider();
+    if (memoizedEmojiContextValue !== null && memoizedEmojiContextValue !== void 0 && memoizedEmojiContextValue.emoji.emojiProvider.onlyFetchOnDemand) {
+      var isFetchingOnDemand = memoizedEmojiContextValue === null || memoizedEmojiContextValue === void 0 ? void 0 : memoizedEmojiContextValue.emoji.emojiProvider.onlyFetchOnDemand();
+      if (!isFetchingOnDemand) {
+        fetchEmojiProvider();
+      }
+    } else {
+      fetchEmojiProvider();
+    }
   }, [memoizedEmojiContextValue]);
   return /*#__PURE__*/React.createElement(EmojiContext.Provider, {
     value: memoizedEmojiContextValue

package/dist/esm/util/analytics/analytics.js

@@ -12,7 +12,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.4.10"
+      packageVersion: "67.5.1"
     }, attributes)
   };
 };

package/dist/types/api/EmojiResource.d.ts

@@ -3,7 +3,7 @@ import { CategoryId } from '../components/picker/categories';
 import { EmojiDescription, EmojiId, EmojiProvider, EmojiResponse, EmojiSearchResult, EmojiUpload, OptionalEmojiDescription, OptionalEmojiDescriptionWithVariations, OptionalUser, SearchOptions, ToneSelection, UploadingEmojiProvider, User } from '../types';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
-import { OptimisticImageApiLoaderConfig, SingleEmojiApiLoaderConfig } from './EmojiUtils';
+import { OptimisticImageApiLoaderConfig, Options, SingleEmojiApiLoaderConfig } from './EmojiUtils';
 interface GetEmojiProviderOptions {
     /**
      * Whether fetch emoji provider at start
@@ -23,6 +23,11 @@ export interface EmojiResourceConfig {
      * providers when performing shortName based look up.
      */
     providers: ServiceConfig[];
+    /**
+     * Additional configuration:
+     * * On-demand Fetching - Useful for when a product may prefer manually controlling when providers are fetched
+     */
+    options?: Options;
     /**
      * Must be set to true to enable upload support in the emoji components.
      *
@@ -80,6 +85,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     protected selectedTone: ToneSelection;
     protected currentUser?: User;
     protected isInitialised: boolean;
+    protected fetchOnDemand: boolean;
     protected emojiResponses: EmojiResponse[];
     emojiProviderConfig: EmojiResourceConfig;
     constructor(config: EmojiResourceConfig);
@@ -90,6 +96,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     getEmojiProvider(options?: GetEmojiProviderOptions): Promise<EmojiProvider>;
     private fetchIndividualProvider;
     fetchEmojiProvider(force?: boolean): Promise<EmojiRepository | undefined>;
+    onlyFetchOnDemand(): boolean;
     fetchByEmojiId(emojiId: EmojiId, optimistic: boolean): Promise<OptionalEmojiDescriptionWithVariations>;
     private getProviderType;
     protected initEmojiRepository(emojiResponses: EmojiResponse[]): void;

package/dist/types/api/EmojiUtils.d.ts

@@ -3,6 +3,9 @@ import { AltRepresentations, EmojiDescription, EmojiDescriptionWithVariations, E
 export interface EmojiLoaderConfig extends ServiceConfig {
     getRatio?: () => number;
 }
+export interface Options {
+    onlyFetchOnDemand?: boolean;
+}
 export interface SingleEmojiApiLoaderConfig extends Omit<ServiceConfig, 'url'> {
     getUrl: (emojiId: EmojiId) => string;
 }

package/dist/types/types.d.ts

@@ -121,6 +121,12 @@ export interface EmojiProvider extends Provider<string, EmojiSearchResult, any,
      * Returns a constructed URL to fetch emoji media asset if 'optimisticImageApi' config has been provided
      */
     getOptimisticImageURL(emojiId: EmojiId): string | undefined;
+    /**
+     * @return a boolean indicating whether providers should be fetched on-demand only, and automatic fetches prevented
+     *
+     * Optional.
+     */
+    onlyFetchOnDemand?(): boolean;
 }
 export interface UploadingEmojiProvider extends EmojiProvider {
     /**

package/dist/types-ts4.5/api/EmojiResource.d.ts

@@ -3,7 +3,7 @@ import { CategoryId } from '../components/picker/categories';
 import { EmojiDescription, EmojiId, EmojiProvider, EmojiResponse, EmojiSearchResult, EmojiUpload, OptionalEmojiDescription, OptionalEmojiDescriptionWithVariations, OptionalUser, SearchOptions, ToneSelection, UploadingEmojiProvider, User } from '../types';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
-import { OptimisticImageApiLoaderConfig, SingleEmojiApiLoaderConfig } from './EmojiUtils';
+import { OptimisticImageApiLoaderConfig, Options, SingleEmojiApiLoaderConfig } from './EmojiUtils';
 interface GetEmojiProviderOptions {
     /**
      * Whether fetch emoji provider at start
@@ -23,6 +23,11 @@ export interface EmojiResourceConfig {
      * providers when performing shortName based look up.
      */
     providers: ServiceConfig[];
+    /**
+     * Additional configuration:
+     * * On-demand Fetching - Useful for when a product may prefer manually controlling when providers are fetched
+     */
+    options?: Options;
     /**
      * Must be set to true to enable upload support in the emoji components.
      *
@@ -80,6 +85,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     protected selectedTone: ToneSelection;
     protected currentUser?: User;
     protected isInitialised: boolean;
+    protected fetchOnDemand: boolean;
     protected emojiResponses: EmojiResponse[];
     emojiProviderConfig: EmojiResourceConfig;
     constructor(config: EmojiResourceConfig);
@@ -90,6 +96,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     getEmojiProvider(options?: GetEmojiProviderOptions): Promise<EmojiProvider>;
     private fetchIndividualProvider;
     fetchEmojiProvider(force?: boolean): Promise<EmojiRepository | undefined>;
+    onlyFetchOnDemand(): boolean;
     fetchByEmojiId(emojiId: EmojiId, optimistic: boolean): Promise<OptionalEmojiDescriptionWithVariations>;
     private getProviderType;
     protected initEmojiRepository(emojiResponses: EmojiResponse[]): void;

package/dist/types-ts4.5/api/EmojiUtils.d.ts

@@ -3,6 +3,9 @@ import { AltRepresentations, EmojiDescription, EmojiDescriptionWithVariations, E
 export interface EmojiLoaderConfig extends ServiceConfig {
     getRatio?: () => number;
 }
+export interface Options {
+    onlyFetchOnDemand?: boolean;
+}
 export interface SingleEmojiApiLoaderConfig extends Omit<ServiceConfig, 'url'> {
     getUrl: (emojiId: EmojiId) => string;
 }

package/dist/types-ts4.5/types.d.ts

@@ -121,6 +121,12 @@ export interface EmojiProvider extends Provider<string, EmojiSearchResult, any,
      * Returns a constructed URL to fetch emoji media asset if 'optimisticImageApi' config has been provided
      */
     getOptimisticImageURL(emojiId: EmojiId): string | undefined;
+    /**
+     * @return a boolean indicating whether providers should be fetched on-demand only, and automatic fetches prevented
+     *
+     * Optional.
+     */
+    onlyFetchOnDemand?(): boolean;
 }
 export interface UploadingEmojiProvider extends EmojiProvider {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.4.10",
+  "version": "67.5.1",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,13 +34,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/media-client": "^24.0.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.20.0",
+    "@atlaskit/tokens": "^1.21.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",

package/report.api.md

@@ -291,6 +291,7 @@ export interface EmojiProvider
     emoji: EmojiDescription,
     useAlt?: boolean,
   ): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+  onlyFetchOnDemand?(): boolean;
   optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
   recordSelection?(emoji: EmojiDescription): Promise<any>;
   setSelectedTone(tone: ToneSelection): void;
@@ -384,6 +385,8 @@ class EmojiResource_2
   // (undocumented)
   fetchEmojiProvider(force?: boolean): Promise<EmojiRepository | undefined>;
   // (undocumented)
+  protected fetchOnDemand: boolean;
+  // (undocumented)
   filter(query?: string, options?: SearchOptions): void;
   // (undocumented)
   findByEmojiId(
@@ -438,6 +441,8 @@ class EmojiResource_2
   // (undocumented)
   protected notifyResult(result: EmojiSearchResult): void;
   // (undocumented)
+  onlyFetchOnDemand(): boolean;
+  // (undocumented)
   optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
   // (undocumented)
   protected recordConfig?: ServiceConfig;
@@ -461,6 +466,7 @@ export interface EmojiResourceConfig {
   allowUpload?: boolean;
   currentUser?: User;
   optimisticImageApi?: OptimisticImageApiLoaderConfig;
+  options?: Options;
   providers: ServiceConfig[];
   recordConfig?: ServiceConfig;
   singleEmojiApi?: SingleEmojiApiLoaderConfig;
@@ -978,6 +984,12 @@ export type OptionalEmojiDescriptionWithVariations =
 // @public (undocumented)
 export type OptionalUser = User | undefined;
 
+// @public (undocumented)
+interface Options {
+  // (undocumented)
+  onlyFetchOnDemand?: boolean;
+}
+
 // @public (undocumented)
 interface PickerRefHandler {
   // (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -229,6 +229,7 @@ export interface EmojiProvider extends Provider<string, EmojiSearchResult, any,
     getOptimisticImageURL(emojiId: EmojiId): string | undefined;
     getSelectedTone(): ToneSelection;
     loadMediaEmoji(emoji: EmojiDescription, useAlt?: boolean): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
+    onlyFetchOnDemand?(): boolean;
     optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
     recordSelection?(emoji: EmojiDescription): Promise<any>;
     setSelectedTone(tone: ToneSelection): void;
@@ -300,6 +301,8 @@ class EmojiResource_2 extends AbstractResource<string, EmojiSearchResult, any, u
     // (undocumented)
     fetchEmojiProvider(force?: boolean): Promise<EmojiRepository | undefined>;
     // (undocumented)
+    protected fetchOnDemand: boolean;
+    // (undocumented)
     filter(query?: string, options?: SearchOptions): void;
     // (undocumented)
     findByEmojiId(emojiId: EmojiId): OptionalEmojiDescription | Promise<OptionalEmojiDescription>;
@@ -338,6 +341,8 @@ class EmojiResource_2 extends AbstractResource<string, EmojiSearchResult, any, u
     // (undocumented)
     protected notifyResult(result: EmojiSearchResult): void;
     // (undocumented)
+    onlyFetchOnDemand(): boolean;
+    // (undocumented)
     optimisticMediaRendering(emoji: EmojiDescription, useAlt?: boolean): boolean;
     // (undocumented)
     protected recordConfig?: ServiceConfig;
@@ -361,6 +366,7 @@ export interface EmojiResourceConfig {
     allowUpload?: boolean;
     currentUser?: User;
     optimisticImageApi?: OptimisticImageApiLoaderConfig;
+    options?: Options;
     providers: ServiceConfig[];
     recordConfig?: ServiceConfig;
     singleEmojiApi?: SingleEmojiApiLoaderConfig;
@@ -855,6 +861,12 @@ export type OptionalEmojiDescriptionWithVariations = EmojiDescriptionWithVariati
 // @public (undocumented)
 export type OptionalUser = User | undefined;
 
+// @public (undocumented)
+interface Options {
+    // (undocumented)
+    onlyFetchOnDemand?: boolean;
+}
+
 // @public (undocumented)
 interface PickerRefHandler {
     // (undocumented)