@atlaskit/emoji 69.0.7 → 69.0.9

package/dist/esm/components/picker/CategorySelector.js

@@ -1,20 +1,27 @@
+/* CategorySelector.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./CategorySelector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cx } from '@atlaskit/css';
+import { N30 } from '@atlaskit/theme/colors';
 import { useIntl } from 'react-intl-next';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
 import { messages } from '../i18n';
 import { CategoryDescriptionMap } from './categories';
-import { categorySelector, categorySelectorTablist } from './styles';
 import { usePrevious } from '../../hooks/usePrevious';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
+var styles = {
+  commonCategory: "_2rkoglpi _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
+  defaultCategory: "_syaz131l _30l3aqb7",
+  activeCategory: "_syazaqb7 _30l3aqb7",
+  disabledCategory: "_syaz131l"
+};
+var categorySelector = null;
+var categorySelectorTablist = null;
 export var sortCategories = function sortCategories(c1, c2) {
   return CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
 };
@@ -26,28 +33,6 @@ var addNewCategories = function addNewCategories(oldCategories, newCategories) {
     return !!CategoryDescriptionMap[category];
   })).sort(sortCategories);
 };
-var commonCategoryStyles = xcss({
-  backgroundColor: 'color.background.neutral.subtle',
-  border: 0,
-  borderRadius: 'border.radius',
-  padding: 'space.0',
-  transition: 'color 0.2s ease'
-});
-var defaultCategoryStyles = xcss({
-  color: 'color.text.subtlest',
-  ':hover': {
-    color: 'color.text.selected'
-  }
-});
-var activeCategoryStyles = xcss({
-  color: 'color.text.selected',
-  ':hover': {
-    color: 'color.text.selected'
-  }
-});
-var disabledCategoryStyles = xcss({
-  color: 'color.text.subtlest'
-});
 export var categorySelectorComponentTestId = 'category-selector-component';
 export var categorySelectorCategoryTestId = function categorySelectorCategoryTestId(categoryId) {
   return "category-selector-".concat(categoryId);
@@ -124,43 +109,43 @@ var CategorySelector = function CategorySelector(props) {
   };
   var categoriesSection;
   if (categories) {
-    categoriesSection = jsx("div", {
+    categoriesSection = /*#__PURE__*/React.createElement("div", {
       role: "tablist",
       "aria-label": formatMessage(messages.categoriesSelectorLabel),
       "data-testid": categorySelectorComponentTestId,
-      ref: categoryRef
-      // 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: categorySelectorTablist
+      ref: categoryRef,
+      className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
     }, categories.map(function (categoryId, index) {
       var category = CategoryDescriptionMap[categoryId];
       var Icon = category.icon;
       var categoryName = formatMessage(messages[category.name]);
-      return jsx(Tooltip, {
+      return /*#__PURE__*/React.createElement(Tooltip, {
         content: categoryName,
         position: "bottom",
         key: category.id
-      }, jsx(Pressable, {
+      }, /*#__PURE__*/React.createElement(Pressable, {
         id: "category-selector-".concat(category.id),
         "data-focus-index": index,
         "aria-label": categoryName,
         "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
         "aria-selected": categoryId === activeCategoryId,
-        xcss: [commonCategoryStyles, defaultCategoryStyles, categoryId === activeCategoryId && activeCategoryStyles, disableCategories && disabledCategoryStyles],
+        xcss: cx(styles.commonCategory, styles.defaultCategory, categoryId === activeCategoryId && styles.activeCategory, disableCategories && styles.disabledCategory),
         isDisabled: disableCategories,
         onClick: handleClick(categoryId, index),
         testId: categorySelectorCategoryTestId(categoryId),
         tabIndex: currentFocus === index ? 0 : -1,
         onKeyDown: handleKeyDown,
         role: "tab"
-      }, jsx(Icon, {
+      }, /*#__PURE__*/React.createElement(Icon, {
         label: categoryName
       })));
     }));
   }
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  return jsx("div", {
-    css: categorySelector
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhkxd9y _dpd31txw"]),
+    style: {
+      "--_mj39lq": ix("var(--ds-surface-sunken, ".concat(N30, ")"))
+    }
   }, categoriesSection);
 };
 export default CategorySelector;

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

@@ -1,3 +1,4 @@
+/* EmojiPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,23 +7,20 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["emojiProvider"];
+import "./EmojiPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
+import { N40 } from '@atlaskit/theme/colors';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
 import { LoadingItem } from './EmojiPickerVirtualItems';
-import { emojiPicker } from './styles';
 import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 import { defaultEmojiPickerSize } from '../../util/constants';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
+var emojiPicker = null;
 var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
   return import( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent');
 };
@@ -68,13 +66,13 @@ export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
         }
       };
       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
-        jsx("div", {
-          css: emojiPicker(),
-          ref: handlePickerRef
-        }, item.renderItem())
-      );
+      return /*#__PURE__*/React.createElement("div", {
+        ref: handlePickerRef,
+        className: ax(["_19itbw7i _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"]),
+        style: {
+          "--_t8mjz6": ix("".concat("var(--ds-border, ".concat(N40, ")"), " 1px solid"))
+        }
+      }, item.renderItem());
     }
   }, {
     key: "renderLoaded",
@@ -82,11 +80,11 @@ export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
       var _this$props = this.props,
         emojiProvider = _this$props.emojiProvider,
         otherProps = _objectWithoutProperties(_this$props, _excluded);
-      return jsx(UfoErrorBoundary, {
+      return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
         experiences: [ufoExperiences['emoji-picker-opened']]
-      }, jsx(EmojiCommonProvider, {
+      }, /*#__PURE__*/React.createElement(EmojiCommonProvider, {
         emojiProvider: loadedEmojiProvider
-      }, jsx(EmojiPickerComponent, otherProps)));
+      }, /*#__PURE__*/React.createElement(EmojiPickerComponent, otherProps)));
     }
   }]);
 }(LoadingEmojiComponent);

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

@@ -1,13 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* EmojiPickerCategoryHeading.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerCategoryHeading.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N900 } from '@atlaskit/theme/colors';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
-import { emojiCategoryTitle } from './styles';
+var emojiCategoryTitle = null;
+
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -16,7 +16,7 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
   var id = _ref.id,
     title = _ref.title,
     className = _ref.className;
-  return 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
@@ -24,8 +24,11 @@ var EmojiPickerCategoryHeading = function EmojiPickerCategoryHeading(_ref) {
     className: className,
     "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
     role: "rowheader"
-  }, jsx("div", {
-    css: emojiCategoryTitle
-  }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c82smr _vchhusvi _syazovqm _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"]),
+    style: {
+      "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")"))
+    }
+  }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
 };
 export default EmojiPickerCategoryHeading;

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

@@ -1,15 +1,14 @@
+/* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./EmojiPickerComponent.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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
- */
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -24,11 +23,27 @@ import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import { EmojiPickerVirtualListInternalOld as EmojiPickerListOld, EmojiPickerVirtualListInternalNew as EmojiPickerListNew } from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
-import { emojiPicker } from './styles';
 import { useEmoji } from '../../hooks/useEmoji';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
 import { fg } from '@atlaskit/platform-feature-flags';
+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,
@@ -298,7 +313,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     });
   }, [emojiProvider, fireAnalytics, onSelectWrapper]);
   var formattedErrorMessage = useMemo(function () {
-    return uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
+    return uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
   }, [uploadErrorMessage]);
   var onFileChooserClicked = useCallback(function () {
     fireAnalytics(selectedFileEvent());
@@ -466,83 +481,84 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     };
   }, [emojiProvider, onProviderChange]);
   var showPreview = selectedEmoji && !uploading;
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    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: emojiPicker(showPreview, size),
-      ref: onPickerRef,
-      "data-emoji-picker-container": true,
-      role: "dialog",
-      "aria-label": formatMessage(messages.emojiPickerTitle),
-      "aria-modal": true,
-      onKeyPress: suppressKeyPress,
-      onKeyUp: suppressKeyPress,
-      onKeyDown: suppressKeyPress
-    }, jsx(CategorySelector, {
-      activeCategoryId: activeCategory,
-      dynamicCategories: dynamicCategories,
-      disableCategories: disableCategories,
-      onCategorySelected: onCategorySelected
-    }), fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? jsx(EmojiPickerListNew, {
-      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
-    }) : jsx(EmojiPickerListOld, {
-      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 && jsx(EmojiPickerFooter, {
-      selectedEmoji: selectedEmoji
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: onPickerRef,
+    "data-emoji-picker-container": true,
+    role: "dialog",
+    "aria-label": formatMessage(messages.emojiPickerTitle),
+    "aria-modal": true,
+    onKeyPress: suppressKeyPress,
+    onKeyUp: suppressKeyPress,
+    onKeyDown: suppressKeyPress,
+    className: ax(["_19itbw7i _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]]),
+    style: {
+      "--_t8mjz6": ix("".concat("var(--ds-border, ".concat(N40, ")"), " 1px solid")),
+      "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
+      "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
+    }
+  }, /*#__PURE__*/React.createElement(CategorySelector, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? /*#__PURE__*/React.createElement(EmojiPickerListNew, {
+    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(EmojiPickerListOld, {
+    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, {
+    selectedEmoji: selectedEmoji
+  }));
 };
 export default /*#__PURE__*/memo(EmojiPickerComponent);

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

@@ -1,15 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerEmojiRow.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import CachingEmoji from '../common/CachingEmoji';
-import { emojiItem, emojiPickerRow } from './styles';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { messages } from '../i18n';
+var emojiItem = null;
+var emojiPickerRow = null;
 var EmojiPickerEmojiRow = function EmojiPickerEmojiRow(_ref) {
   var emojis = _ref.emojis,
     onSelected = _ref.onSelected,
@@ -34,37 +33,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
-    jsx("div", {
-      css: 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 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: emojiItem,
-        key: key,
-        role: "gridcell",
-        "aria-colindex": index + 1 // aria-colindex is 1 based
-      }, jsx(CachingEmoji, {
-        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(messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
-      }));
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: 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: 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, {
+      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(messages.emojiButtonRoleDescription),
+      shouldBeInteractive: true
+    }));
+  }));
 };
 export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

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

@@ -1,21 +1,23 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerFooter.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerFooter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { N30A } from '@atlaskit/theme/colors';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
-import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
+var emojiPickerFooter = null;
+var emojiPickerFooterWithTopShadow = null;
 export var emojiPickerFooterTestId = 'emoji-picker-footer';
 var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
   var selectedEmoji = _ref.selectedEmoji;
-  return jsx("div", {
-    css: previewFooterClassnames,
-    "data-testid": emojiPickerFooterTestId
-  }, selectedEmoji && jsx(EmojiPreviewComponent, {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiPickerFooterTestId,
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do18ew _16qs4j53"]),
+    style: {
+      "--_m6cf7x": ix("2px solid ".concat("var(--ds-border, ".concat(N30A, ")"))),
+      "--_cfawkn": ix("0px -1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+    }
+  }, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
     emoji: selectedEmoji
   }));
 };