@atlaskit/emoji 69.0.7 → 69.0.9

package/dist/cjs/components/picker/EmojiPicker.js

@@ -1,3 +1,4 @@
+/* EmojiPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.preloadEmojiPicker = exports.default = exports.EmojiPickerInternal = void 0;
+require("./EmojiPicker.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -13,12 +16,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _colors = require("@atlaskit/theme/colors");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("../../util/analytics");
 var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
 var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
-var _styles = require("./styles");
 var _UfoErrorBoundary = require("../common/UfoErrorBoundary");
 var _constants = require("../../util/constants");
 var _EmojiCommonProvider = require("../../context/EmojiCommonProvider");
@@ -26,10 +29,8 @@ var _excluded = ["emojiProvider"];
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var emojiPicker = null;
 var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
   return Promise.resolve().then(function () {
     return _interopRequireWildcard(require( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent'));
@@ -77,13 +78,13 @@ var EmojiPickerInternal = exports.EmojiPickerInternal = /*#__PURE__*/function (_
         }
       };
       _analytics.ufoExperiences['emoji-picker-opened'].markFMP();
-      return (
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        (0, _react.jsx)("div", {
-          css: (0, _styles.emojiPicker)(),
-          ref: handlePickerRef
-        }, item.renderItem())
-      );
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: handlePickerRef,
+        className: (0, _runtime.ax)(["_19itbw7i _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"]),
+        style: {
+          "--_t8mjz6": (0, _runtime.ix)("".concat("var(--ds-border, ".concat(_colors.N40, ")"), " 1px solid"))
+        }
+      }, item.renderItem());
     }
   }, {
     key: "renderLoaded",
@@ -91,11 +92,11 @@ var EmojiPickerInternal = exports.EmojiPickerInternal = /*#__PURE__*/function (_
       var _this$props = this.props,
         emojiProvider = _this$props.emojiProvider,
         otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return (0, _react.jsx)(_UfoErrorBoundary.UfoErrorBoundary, {
+      return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
         experiences: [_analytics.ufoExperiences['emoji-picker-opened']]
-      }, (0, _react.jsx)(_EmojiCommonProvider.EmojiCommonProvider, {
+      }, /*#__PURE__*/_react.default.createElement(_EmojiCommonProvider.EmojiCommonProvider, {
         emojiProvider: loadedEmojiProvider
-      }, (0, _react.jsx)(EmojiPickerComponent, otherProps)));
+      }, /*#__PURE__*/_react.default.createElement(EmojiPickerComponent, otherProps)));
     }
   }]);
 }(_LoadingEmojiComponent.default);

package/dist/cjs/components/picker/EmojiPickerCategoryHeading.js

@@ -1,19 +1,21 @@
+/* EmojiPickerCategoryHeading.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID = void 0;
-var _react = require("@emotion/react");
+require("./EmojiPickerCategoryHeading.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _typeHelpers = require("../../util/type-helpers");
 var _i18n = require("../i18n");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var emojiCategoryTitle = null;
 
 /**
  * Test id for wrapper Emoji Picker List div
@@ -23,7 +25,7 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
   var id = _ref.id,
     title = _ref.title,
     className = _ref.className;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     id: id,
     "data-category-id": id
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -31,8 +33,11 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     className: className,
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
     role: "rowheader"
-  }, (0, _react.jsx)("div", {
-    css: _styles.emojiCategoryTitle
-  }, (0, _typeHelpers.isMessagesKey)(title) ? (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_11c82smr _vchhusvi _syazovqm _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"]),
+    style: {
+      "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")"))
+    }
+  }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
 };
 var _default = exports.default = EmojiPickerCategoryHeading;

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -1,15 +1,20 @@
+/* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./EmojiPickerComponent.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _reactDom = require("react-dom");
 var _reactIntlNext = require("react-intl-next");
 var _EmojiRepository = require("../../api/EmojiRepository");
@@ -24,16 +29,31 @@ var _CategorySelector = _interopRequireDefault(require("./CategorySelector"));
 var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
 var _EmojiPickerList = require("./EmojiPickerList");
 var _analytics = require("../../util/analytics");
-var _styles = require("./styles");
 var _useEmoji2 = require("../../hooks/useEmoji");
 var _useIsMounted = require("../../hooks/useIsMounted");
 var _i18n = require("../i18n");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+var emojiPickerHeight = 295;
+var emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+var emojiPickerWidth = 350;
+var emojiPickerMinHeight = 260;
+var heightOffset = 80;
+var emojiPicker = null;
+var withPreviewHeight = {
+  small: "_4t3ivixp _1tkegx0z",
+  medium: "_4t3i2300 _1tke5x59",
+  large: "_4t3ixt2k _1tke1pna"
+};
+var withoutPreviewHeight = {
+  small: "_4t3iaq3k _1tkegx0z",
+  medium: "_4t3iixjv _1tke5x59",
+  large: "_4t3i1ckg _1tke1pna"
+};
 var FREQUENTLY_USED_MAX = 16;
 var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onSelection = _ref.onSelection,
@@ -303,7 +323,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     });
   }, [emojiProvider, fireAnalytics, onSelectWrapper]);
   var formattedErrorMessage = (0, _react.useMemo)(function () {
-    return uploadErrorMessage ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
+    return uploadErrorMessage ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
   }, [uploadErrorMessage]);
   var onFileChooserClicked = (0, _react.useCallback)(function () {
     fireAnalytics((0, _analytics.selectedFileEvent)());
@@ -471,83 +491,84 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     };
   }, [emojiProvider, onProviderChange]);
   var showPreview = selectedEmoji && !uploading;
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    (0, _react2.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      css: (0, _styles.emojiPicker)(showPreview, size),
-      ref: onPickerRef,
-      "data-emoji-picker-container": true,
-      role: "dialog",
-      "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
-      "aria-modal": true,
-      onKeyPress: suppressKeyPress,
-      onKeyUp: suppressKeyPress,
-      onKeyDown: suppressKeyPress
-    }, (0, _react2.jsx)(_CategorySelector.default, {
-      activeCategoryId: activeCategory,
-      dynamicCategories: dynamicCategories,
-      disableCategories: disableCategories,
-      onCategorySelected: onCategorySelected
-    }), (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') || (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji_jira_bb') ? (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalNew, {
-      emojis: filteredEmojis,
-      currentUser: currentUser,
-      onEmojiSelected: recordUsageOnSelection,
-      onEmojiActive: onEmojiActive,
-      onEmojiDelete: onTriggerDelete,
-      onCategoryActivated: onCategoryActivated,
-      onSearch: onSearch,
-      query: query,
-      selectedTone: selectedTone,
-      loading: loading,
-      ref: emojiPickerList,
-      initialUploadName: query,
-      onToneSelected: onToneSelected,
-      onToneSelectorCancelled: onToneSelectorCancelled,
-      toneEmoji: toneEmoji,
-      uploading: uploading,
-      emojiToDelete: emojiToDelete,
-      uploadErrorMessage: formattedErrorMessage,
-      uploadEnabled: isUploadSupported && !uploading,
-      onUploadEmoji: onUploadEmoji,
-      onUploadCancelled: onUploadCancelled,
-      onDeleteEmoji: onDeleteEmoji,
-      onCloseDelete: onCloseDelete,
-      onFileChooserClicked: onFileChooserClicked,
-      onOpenUpload: onOpenUpload,
-      size: size,
-      activeCategoryId: activeCategory
-    }) : (0, _react2.jsx)(_EmojiPickerList.EmojiPickerVirtualListInternalOld, {
-      emojis: filteredEmojis,
-      currentUser: currentUser,
-      onEmojiSelected: recordUsageOnSelection,
-      onEmojiActive: onEmojiActive,
-      onEmojiDelete: onTriggerDelete,
-      onCategoryActivated: onCategoryActivated,
-      onSearch: onSearch,
-      query: query,
-      selectedTone: selectedTone,
-      loading: loading,
-      ref: emojiPickerList,
-      initialUploadName: query,
-      onToneSelected: onToneSelected,
-      onToneSelectorCancelled: onToneSelectorCancelled,
-      toneEmoji: toneEmoji,
-      uploading: uploading,
-      emojiToDelete: emojiToDelete,
-      uploadErrorMessage: formattedErrorMessage,
-      uploadEnabled: isUploadSupported && !uploading,
-      onUploadEmoji: onUploadEmoji,
-      onUploadCancelled: onUploadCancelled,
-      onDeleteEmoji: onDeleteEmoji,
-      onCloseDelete: onCloseDelete,
-      onFileChooserClicked: onFileChooserClicked,
-      onOpenUpload: onOpenUpload,
-      size: size,
-      activeCategoryId: activeCategory
-    }), showPreview && (0, _react2.jsx)(_EmojiPickerFooter.default, {
-      selectedEmoji: selectedEmoji
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: onPickerRef,
+    "data-emoji-picker-container": true,
+    role: "dialog",
+    "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
+    "aria-modal": true,
+    onKeyPress: suppressKeyPress,
+    onKeyUp: suppressKeyPress,
+    onKeyDown: suppressKeyPress,
+    className: (0, _runtime.ax)(["_19itbw7i _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    style: {
+      "--_t8mjz6": (0, _runtime.ix)("".concat("var(--ds-border, ".concat(_colors.N40, ")"), " 1px solid")),
+      "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
+      "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
+    }
+  }, /*#__PURE__*/React.createElement(_CategorySelector.default, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji') || (0, _platformFeatureFlags.fg)('platform_editor_react18_elements_emoji_jira_bb') ? /*#__PURE__*/React.createElement(_EmojiPickerList.EmojiPickerVirtualListInternalNew, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }) : /*#__PURE__*/React.createElement(_EmojiPickerList.EmojiPickerVirtualListInternalOld, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }), showPreview && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
+    selectedEmoji: selectedEmoji
+  }));
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiPickerComponent);

package/dist/cjs/components/picker/EmojiPickerEmojiRow.js

@@ -1,24 +1,24 @@
+/* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./EmojiPickerEmojiRow.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
 var _CachingEmoji = _interopRequireDefault(require("../common/CachingEmoji"));
-var _styles = require("./styles");
 var _useEmojiPickerListContext = require("../../hooks/useEmojiPickerListContext");
 var _i18n = require("../i18n");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var emojiItem = null;
+var emojiPickerRow = null;
 var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
@@ -43,37 +43,34 @@ var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
       onFocus && onFocus(emojiId, emoji, event);
     };
   };
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("div", {
-      css: _styles.emojiPickerRow,
-      role: "presentation"
-    }, emojis.map(function (emoji, index) {
-      var shortName = emoji.shortName,
-        id = emoji.id;
-      var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
-      var focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
-      return (0, _react2.jsx)("span", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: _styles.emojiItem,
-        key: key,
-        role: "gridcell",
-        "aria-colindex": index + 1 // aria-colindex is 1 based
-      }, (0, _react2.jsx)(_CachingEmoji.default, {
-        emoji: emoji,
-        selectOnHover: true,
-        onSelected: onSelected,
-        onMouseMove: onMouseMove,
-        onFocus: handleFocus(index),
-        showDelete: showDelete,
-        onDelete: onDelete,
-        placeholderSize: 24,
-        "data-focus-index": "".concat(rowIndex, "-").concat(index),
-        tabIndex: focus ? 0 : -1,
-        "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
-      }));
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: (0, _runtime.ax)(["_18u0u2gc"])
+  }, emojis.map(function (emoji, index) {
+    var shortName = emoji.shortName,
+      id = emoji.id;
+    var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
+    var focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
+    return /*#__PURE__*/React.createElement("span", {
+      key: key,
+      role: "gridcell",
+      "aria-colindex": index + 1 // aria-colindex is 1 based
+      ,
+      className: (0, _runtime.ax)(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg14y2 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
+    }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
+      emoji: emoji,
+      selectOnHover: true,
+      onSelected: onSelected,
+      onMouseMove: onMouseMove,
+      onFocus: handleFocus(index),
+      showDelete: showDelete,
+      onDelete: onDelete,
+      placeholderSize: 24,
+      "data-focus-index": "".concat(rowIndex, "-").concat(index),
+      tabIndex: focus ? 0 : -1,
+      "aria-roledescription": formatMessage(_i18n.messages.emojiButtonRoleDescription),
+      shouldBeInteractive: true
+    }));
+  }));
 };
 var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiPickerEmojiRow);

package/dist/cjs/components/picker/EmojiPickerFooter.js

@@ -1,29 +1,32 @@
+/* EmojiPickerFooter.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiPickerFooterTestId = exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./EmojiPickerFooter.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
 var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var emojiPickerFooter = null;
+var emojiPickerFooterWithTopShadow = null;
 var emojiPickerFooterTestId = exports.emojiPickerFooterTestId = 'emoji-picker-footer';
 var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
   var selectedEmoji = _ref.selectedEmoji;
-  return (0, _react2.jsx)("div", {
-    css: previewFooterClassnames,
-    "data-testid": emojiPickerFooterTestId
-  }, selectedEmoji && (0, _react2.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiPickerFooterTestId,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do18ew _16qs4j53"]),
+    style: {
+      "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+      "--_cfawkn": (0, _runtime.ix)("0px -1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+    }
+  }, selectedEmoji && /*#__PURE__*/React.createElement(_EmojiPreviewComponent.EmojiPreviewComponent, {
     emoji: selectedEmoji
   }));
 };