@atlaskit/emoji 69.0.7 → 69.0.9

package/dist/es2019/components/picker/EmojiPickerList.js

@@ -4,24 +4,12 @@ import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategor
 import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
-import { CategoryHeadingItem as EmotionCategoryHeadingItem, EmojisRowItem as EmotionEmojisRowItem, LoadingItem as EmotionLoadingItem, virtualItemRenderer as virtualItemRendererEmotion } from './EmojiPickerVirtualItems';
-import { CategoryHeadingItem as CompiledCategoryHeadingItem, EmojisRowItem as CompiledEmojisRowItem, LoadingItem as CompiledLoadingItem, virtualItemRenderer as virtualItemRendererCompiled } from '../compiled/picker/EmojiPickerVirtualItems';
-import { default as EmotionEmojiActions } from '../common/EmojiActions';
-import { default as CompiledEmojiActions } from '../compiled/common/EmojiActions';
+import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
+import EmojiActions from '../common/EmojiActions';
 import { emojiPickerHeightOffset, scrollToRow } from './utils';
-import { VirtualList as EmotionVirtualList } from './VirtualList';
-import { VirtualList as CompiledVirtualList } from '../compiled/picker/VirtualList';
+import { VirtualList } from './VirtualList';
 import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
-import { default as EmotionEmojiPickerTabPanel } from './EmojiPickerTabPanel';
-import { default as CompiledEmojiPickerTabPanel } from '../compiled/picker/EmojiPickerTabPanel';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithFG, functionWithFG } from '@atlaskit/platform-feature-flags-react';
-
-// when cleaning up `platform_editor_css_migrate_emoji`, delete these consts and rename the import
-const EmojiActions = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiActions, EmotionEmojiActions);
-const EmojiPickerTabPanel = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPickerTabPanel, EmotionEmojiPickerTabPanel);
-const VirtualList = componentWithFG('platform_editor_css_migrate_emoji', CompiledVirtualList, EmotionVirtualList);
-const virtualItemRenderer = functionWithFG('platform_editor_css_migrate_emoji', virtualItemRendererCompiled, virtualItemRendererEmotion);
+import EmojiPickerTabPanel from './EmojiPickerTabPanel';
 
 /**
  * Test id for wrapper Emoji Picker List div
@@ -54,18 +42,10 @@ export class EmojiPickerVirtualListInternalOld extends PureComponent {
       let columnIndex = -1;
       // for most of cases, it'd be in first emoji row, so should be quite fast to find in real world
       let rowIndex = this.virtualItems.findIndex(rowItem => {
-        if (fg('platform_editor_css_migrate_emoji')) {
-          if (rowItem instanceof CompiledEmojisRowItem) {
-            // find uploaded emoji in each emoji row
-            columnIndex = rowItem.props.emojis.findIndex(emoji => emoji.id === emojiId);
-            return columnIndex !== -1;
-          }
-        } else {
-          if (rowItem instanceof EmotionEmojisRowItem) {
-            // find uploaded emoji in each emoji row
-            columnIndex = rowItem.props.emojis.findIndex(emoji => emoji.id === emojiId);
-            return columnIndex !== -1;
-          }
+        if (rowItem instanceof EmojisRowItem) {
+          // find uploaded emoji in each emoji row
+          columnIndex = rowItem.props.emojis.findIndex(emoji => emoji.id === emojiId);
+          return columnIndex !== -1;
         }
         return false;
       });
@@ -80,46 +60,25 @@ export class EmojiPickerVirtualListInternalOld extends PureComponent {
         onEmojiDelete
       } = this.props;
       const items = [];
-      if (fg('platform_editor_css_migrate_emoji')) {
-        items.push(new CompiledCategoryHeadingItem({
-          id: group.category,
-          title: group.title,
-          className: categoryClassname
-        }));
-      } else {
-        items.push(new EmotionCategoryHeadingItem({
-          id: group.category,
-          title: group.title,
-          className: categoryClassname
-        }));
-      }
+      items.push(new CategoryHeadingItem({
+        id: group.category,
+        title: group.title,
+        className: categoryClassname
+      }));
       let remainingEmojis = group.emojis;
       while (remainingEmojis.length > 0) {
         const rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
         remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
-        if (fg('platform_editor_css_migrate_emoji')) {
-          items.push(new CompiledEmojisRowItem({
-            category: group.category,
-            emojis: rowEmojis,
-            title: group.title,
-            showDelete: group.title === userCustomTitle,
-            onSelected: onEmojiSelected,
-            onDelete: onEmojiDelete,
-            onMouseMove: this.onEmojiActive,
-            onFocus: this.onEmojiActive
-          }));
-        } else {
-          items.push(new EmotionEmojisRowItem({
-            category: group.category,
-            emojis: rowEmojis,
-            title: group.title,
-            showDelete: group.title === userCustomTitle,
-            onSelected: onEmojiSelected,
-            onDelete: onEmojiDelete,
-            onMouseMove: this.onEmojiActive,
-            onFocus: this.onEmojiActive
-          }));
-        }
+        items.push(new EmojisRowItem({
+          category: group.category,
+          emojis: rowEmojis,
+          title: group.title,
+          showDelete: group.title === userCustomTitle,
+          onSelected: onEmojiSelected,
+          onDelete: onEmojiDelete,
+          onMouseMove: this.onEmojiActive,
+          onFocus: this.onEmojiActive
+        }));
       }
       return items;
     });
@@ -133,11 +92,7 @@ export class EmojiPickerVirtualListInternalOld extends PureComponent {
       const prevFirstCategory = this.categoryTracker.getFirstCategory();
       this.categoryTracker.reset();
       if (loading) {
-        if (fg('platform_editor_css_migrate_emoji')) {
-          items.push(new CompiledLoadingItem());
-        } else {
-          items.push(new EmotionLoadingItem());
-        }
+        items.push(new LoadingItem());
       } else {
         if (query) {
           const search = CategoryDescriptionMap.SEARCH;
@@ -206,19 +161,12 @@ export class EmojiPickerVirtualListInternalOld extends PureComponent {
     });
     _defineProperty(this, "findCategoryToActivate", row => {
       let category = null;
-      if (fg('platform_editor_css_migrate_emoji')) {
-        if (row instanceof CompiledCategoryHeadingItem) {
-          category = row.props.id;
-        } else if (row instanceof CompiledEmojisRowItem) {
-          category = row.props.category;
-        }
-      } else {
-        if (row instanceof EmotionCategoryHeadingItem) {
-          category = row.props.id;
-        } else if (row instanceof EmotionEmojisRowItem) {
-          category = row.props.category;
-        }
+      if (row instanceof CategoryHeadingItem) {
+        category = row.props.id;
+      } else if (row instanceof EmojisRowItem) {
+        category = row.props.category;
       }
+
       // your uploads is rendered, take it as upload category, so could be highlighted in category selector
       if (category === yourUploadsCategory) {
         return customCategory;
@@ -242,22 +190,12 @@ export class EmojiPickerVirtualListInternalOld extends PureComponent {
       const list = this.listRef.current;
 
       // update tabIndex manually, startIndex is not 0 based here
-      if (fg('platform_editor_css_migrate_emoji')) {
-        if (rowItem instanceof CompiledCategoryHeadingItem) {
-          // if top of row rendered is category heading, update tabIndex for the next emoji row
-          list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
-        } else if (rowItem instanceof CompiledEmojisRowItem) {
-          // if top of row rendered is emoji row, update it's tabIndex.
-          list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
-        }
-      } else {
-        if (rowItem instanceof EmotionCategoryHeadingItem) {
-          // if top of row rendered is category heading, update tabIndex for the next emoji row
-          list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
-        } else if (rowItem instanceof EmotionEmojisRowItem) {
-          // if top of row rendered is emoji row, update it's tabIndex.
-          list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
-        }
+      if (rowItem instanceof CategoryHeadingItem) {
+        // if top of row rendered is category heading, update tabIndex for the next emoji row
+        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
+      } else if (rowItem instanceof EmojisRowItem) {
+        // if top of row rendered is emoji row, update it's tabIndex.
+        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
       }
       if (!this.props.query) {
         // Calculate category in view - only relevant if categories shown, i.e. no query
@@ -462,22 +400,12 @@ export const EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef((
     const list = listRef.current;
 
     // update tabIndex manually, startIndex is not 0 based here
-    if (fg('platform_editor_css_migrate_emoji')) {
-      if (rowItem instanceof CompiledCategoryHeadingItem) {
-        // if top of row rendered is category heading, update tabIndex for the next emoji row
-        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
-      } else if (rowItem instanceof CompiledEmojisRowItem) {
-        // if top of row rendered is emoji row, update it's tabIndex.
-        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
-      }
-    } else {
-      if (rowItem instanceof EmotionCategoryHeadingItem) {
-        // if top of row rendered is category heading, update tabIndex for the next emoji row
-        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
-      } else if (rowItem instanceof EmotionEmojisRowItem) {
-        // if top of row rendered is emoji row, update it's tabIndex.
-        list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
-      }
+    if (rowItem instanceof CategoryHeadingItem) {
+      // if top of row rendered is category heading, update tabIndex for the next emoji row
+      list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex + 1);
+    } else if (rowItem instanceof EmojisRowItem) {
+      // if top of row rendered is emoji row, update it's tabIndex.
+      list === null || list === void 0 ? void 0 : list.updateFocusIndex(startIndex);
     }
     if (!query) {
       // Calculate category in view - only relevant if categories shown, i.e. no query
@@ -513,46 +441,25 @@ export const EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef((
   };
   const buildVirtualItemFromGroup = useCallback(group => {
     const items = [];
-    if (fg('platform_editor_css_migrate_emoji')) {
-      items.push(new CompiledCategoryHeadingItem({
-        id: group.category,
-        title: group.title,
-        className: categoryClassname
-      }));
-    } else {
-      items.push(new EmotionCategoryHeadingItem({
-        id: group.category,
-        title: group.title,
-        className: categoryClassname
-      }));
-    }
+    items.push(new CategoryHeadingItem({
+      id: group.category,
+      title: group.title,
+      className: categoryClassname
+    }));
     let remainingEmojis = group.emojis;
     while (remainingEmojis.length > 0) {
       const rowEmojis = remainingEmojis.slice(0, sizes.emojiPerRow);
       remainingEmojis = remainingEmojis.slice(sizes.emojiPerRow);
-      if (fg('platform_editor_css_migrate_emoji')) {
-        items.push(new CompiledEmojisRowItem({
-          category: group.category,
-          emojis: rowEmojis,
-          title: group.title,
-          showDelete: group.title === userCustomTitle,
-          onSelected: onEmojiSelected,
-          onDelete: onEmojiDelete,
-          onMouseMove: onEmojiActive,
-          onFocus: onEmojiActive
-        }));
-      } else {
-        items.push(new EmotionEmojisRowItem({
-          category: group.category,
-          emojis: rowEmojis,
-          title: group.title,
-          showDelete: group.title === userCustomTitle,
-          onSelected: onEmojiSelected,
-          onDelete: onEmojiDelete,
-          onMouseMove: onEmojiActive,
-          onFocus: onEmojiActive
-        }));
-      }
+      items.push(new EmojisRowItem({
+        category: group.category,
+        emojis: rowEmojis,
+        title: group.title,
+        showDelete: group.title === userCustomTitle,
+        onSelected: onEmojiSelected,
+        onDelete: onEmojiDelete,
+        onMouseMove: onEmojiActive,
+        onFocus: onEmojiActive
+      }));
     }
     return items;
   }, [onEmojiSelected, onEmojiDelete, onEmojiActive]);
@@ -561,11 +468,7 @@ export const EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef((
     const prevFirstCategory = categoryTracker.getFirstCategory();
     categoryTracker.reset();
     if (loading) {
-      if (fg('platform_editor_css_migrate_emoji')) {
-        items.push(new CompiledLoadingItem());
-      } else {
-        items.push(new EmotionLoadingItem());
-      }
+      items.push(new LoadingItem());
     } else {
       if (query) {
         const search = CategoryDescriptionMap.SEARCH;
@@ -603,18 +506,10 @@ export const EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef((
   }, [allEmojiGroups, loading, query, emojis]);
   const findCategoryToActivate = row => {
     let category = null;
-    if (fg('platform_editor_css_migrate_emoji')) {
-      if (row instanceof CompiledCategoryHeadingItem) {
-        category = row.props.id;
-      } else if (row instanceof CompiledEmojisRowItem) {
-        category = row.props.category;
-      }
-    } else {
-      if (row instanceof EmotionCategoryHeadingItem) {
-        category = row.props.id;
-      } else if (row instanceof EmotionEmojisRowItem) {
-        category = row.props.category;
-      }
+    if (row instanceof CategoryHeadingItem) {
+      category = row.props.id;
+    } else if (row instanceof EmojisRowItem) {
+      category = row.props.category;
     }
     // your uploads is rendered, take it as upload category, so could be highlighted in category selector
     if (category === yourUploadsCategory) {
@@ -647,18 +542,10 @@ export const EmojiPickerVirtualListInternalNew = /*#__PURE__*/React.forwardRef((
     let columnIndex = -1;
     // for most of cases, it'd be in first emoji row, so should be quite fast to find in real world
     let rowIndex = virtualItems.findIndex(rowItem => {
-      if (fg('platform_editor_css_migrate_emoji')) {
-        if (rowItem instanceof CompiledEmojisRowItem) {
-          // find uploaded emoji in each emoji row
-          columnIndex = rowItem.props.emojis.findIndex(emoji => emoji.id === emojiId);
-          return columnIndex !== -1;
-        }
-      } else {
-        if (rowItem instanceof EmotionEmojisRowItem) {
-          // find uploaded emoji in each emoji row
-          columnIndex = rowItem.props.emojis.findIndex(emoji => emoji.id === emojiId);
-          return columnIndex !== -1;
-        }
+      if (rowItem instanceof EmojisRowItem) {
+        // find uploaded emoji in each emoji row
+        columnIndex = rowItem.props.emojis.findIndex(emoji => emoji.id === emojiId);
+        return columnIndex !== -1;
       }
       return false;
     });

package/dist/es2019/components/picker/EmojiPickerListSearch.js

@@ -1,19 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerListSearch.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerListSearch.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import SearchIcon from '@atlaskit/icon/core/migration/search';
 import TextField from '@atlaskit/textfield';
 import VisuallyHidden from '@atlaskit/visually-hidden';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import { EMOJI_SEARCH_DEBOUNCE } from '../../util/constants';
-import { hidden } from '../common/styles';
 import { messages } from '../i18n';
-import { input, pickerSearch, searchIcon } from './styles';
+const input = null;
+const pickerSearch = null;
+const searchIcon = null;
+const hidden = null;
 export const emojiPickerSearchTestId = 'emoji-picker-search';
 export const EmojiPickerListSearch = props => {
   const {
@@ -47,41 +46,34 @@ export const EmojiPickerListSearch = props => {
       }
     });
   }, []);
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: [pickerSearch, !isVisible && hidden],
-      style: style
-    }, jsx(VisuallyHidden, {
-      id: "emoji-search-results-status",
-      role: "status"
-    }, dirty && query === '' && formatMessage(messages.searchResultsStatusSeeAll), query !== '' && formatMessage(messages.searchResultsStatusSeeAll, {
-      // change to messages.searchResultsStatus once translated
-      count: resultsCount
-    })), jsx(TextField, {
-      role: "searchbox",
-      "aria-label": formatMessage(messages.searchLabel)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: input,
-      autoComplete: "off",
-      name: "search",
-      placeholder: `${formatMessage(messages.searchPlaceholder)}...`,
-      defaultValue: query || '',
-      onChange: handleOnChange,
-      elemBeforeInput:
-      // 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("span", {
-        css: searchIcon
-      }, jsx(SearchIcon, {
-        LEGACY_margin: "0 0 0 2px",
-        color: "currentColor",
-        spacing: "spacious",
-        label: ""
-      })),
-      testId: emojiPickerSearchTestId,
-      ref: textRef,
-      isCompact: true
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: ax(["_vchhusvi _ca0qutpp _n3tdutpp _19bvutpp _u5f3utpp _1bsb1osq", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, /*#__PURE__*/React.createElement(VisuallyHidden, {
+    id: "emoji-search-results-status",
+    role: "status"
+  }, dirty && query === '' && formatMessage(messages.searchResultsStatusSeeAll), query !== '' && formatMessage(messages.searchResultsStatusSeeAll, {
+    // change to messages.searchResultsStatus once translated
+    count: resultsCount
+  })), /*#__PURE__*/React.createElement(TextField, {
+    role: "searchbox",
+    "aria-label": formatMessage(messages.searchLabel),
+    autoComplete: "off",
+    name: "search",
+    placeholder: `${formatMessage(messages.searchPlaceholder)}...`,
+    defaultValue: query || '',
+    onChange: handleOnChange,
+    elemBeforeInput: /*#__PURE__*/React.createElement("span", {
+      className: ax(["_tzy4105o _18u01i6y"])
+    }, /*#__PURE__*/React.createElement(SearchIcon, {
+      LEGACY_margin: "0 0 0 2px",
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    testId: emojiPickerSearchTestId,
+    ref: textRef,
+    isCompact: true,
+    className: ax(["_11c82smr _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _syaz1kw7 _80om1kw7 _1q51t94y _y4tize3t _85i5v77o _bozg12x7 _1bsb1osq _13xeglyw _1goxglyw"])
+  }));
 };

package/dist/es2019/components/picker/EmojiPickerTabPanel.js

@@ -1,21 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerTabPanel.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerTabPanel.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { PureComponent } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
-const emojiPickerList = css({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: '1 1 auto',
-  // To force Firefox/IE/Edge to shrink the list, if necessary (e.g. when upload panel in place)
-  height: '0'
-});
+const emojiPickerList = null;
 
 /**
  * TODO: have to use class component here as unit test is relying on ref.root. Will refactor this whole file + EmojiPickerList to functional component in future
@@ -31,14 +22,14 @@ class EmojiPickerTabPanelInternal extends PureComponent {
       children,
       showSearchResults
     } = this.props;
-    return jsx("div", {
+    return /*#__PURE__*/React.createElement("div", {
       ref: "root",
-      css: emojiPickerList,
       "data-testid": RENDER_EMOJI_PICKER_LIST_TESTID,
       id: RENDER_EMOJI_PICKER_LIST_TESTID,
       role: "tabpanel",
-      "aria-label": formatMessage(messages.emojiPickerListPanel)
-    }, jsx(VisuallyHidden, {
+      "aria-label": formatMessage(messages.emojiPickerListPanel),
+      className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1txw _2lx21bp4 _4t3iidpf"])
+    }, /*#__PURE__*/React.createElement(VisuallyHidden, {
       id: "emoji-picker-table-description"
     }, formatMessage(messages.emojiPickerGrid, {
       showSearchResults

package/dist/es2019/components/picker/EmojiPickerVirtualItems.js

@@ -1,17 +1,14 @@
+/* EmojiPickerVirtualItems.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @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 "./EmojiPickerVirtualItems.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import Spinner from '@atlaskit/spinner';
 import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
 import { sizes } from './EmojiPickerSizes';
-import { emojiPickerSpinner } from './styles';
+const emojiPickerSpinner = null;
 export class AbstractItem {
   constructor(props, height) {
     this.props = props;
@@ -21,7 +18,7 @@ export class AbstractItem {
 export class EmojisRowItem extends AbstractItem {
   constructor(props) {
     super(props, sizes.emojiRowHeight);
-    _defineProperty(this, "renderItem", context => jsx(EmojiPickerEmojiRow, _extends({}, this.props, {
+    _defineProperty(this, "renderItem", context => /*#__PURE__*/React.createElement(EmojiPickerEmojiRow, _extends({}, this.props, {
       virtualItemContext: context
     })));
   }
@@ -29,20 +26,17 @@ export class EmojisRowItem extends AbstractItem {
 export class LoadingItem extends AbstractItem {
   constructor() {
     super({}, sizes.loadingRowHeight);
-    _defineProperty(this, "renderItem", () =>
-    // 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: emojiPickerSpinner
-    }, jsx("div", null, jsx(Spinner, {
-      size: "medium",
-      interactionName: "emoji-picker-loading-item-spinner"
+    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1e0c1txw _1bsb1osq _4t3i1w81 _1bah1h6o _4cvr1h6o _nphsidpf _t1edidpf _1t3b1wug"])
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Spinner, {
+      size: "medium"
     }))));
   }
 }
 export class CategoryHeadingItem extends AbstractItem {
   constructor(props) {
     super(props, sizes.categoryHeadingHeight);
-    _defineProperty(this, "renderItem", () => jsx(EmojiPickerCategoryHeading, this.props));
+    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, this.props));
   }
 }
 export const virtualItemRenderer = (rows, context) => {
@@ -51,7 +45,7 @@ export const virtualItemRenderer = (rows, context) => {
     key
   } = context;
   const row = rows[index];
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     key: key
   }, row && row.renderItem(context));
 };

package/dist/es2019/components/picker/VirtualList.js

@@ -1,14 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* VirtualList.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./VirtualList.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useImperativeHandle } from 'react';
-import { virtualList } from './styles';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED, EMOJI_LIST_COLUMNS, EMOJI_LIST_PAGE_COUNT, KeyboardNavigationDirection, KeyboardKeys } from '../../util/constants';
+const virtualList = null;
+const virtualRowStyle = null;
 export const virtualListScrollContainerTestId = 'virtual-list-scroll-container';
 export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const parentRef = React.useRef(null);
@@ -256,19 +254,17 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     };
   }, [setEmojisFocus, focusEmoji, rowVirtualizer, scrollToAlignment]);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: parentRef,
     style: {
       height: `${height}px`,
       width: `${width}px`
-    }
-    // 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: virtualList,
+    },
     "data-testid": virtualListScrollContainerTestId,
     "aria-labelledby": "emoji-picker-table-description",
-    role: "grid"
-  }, jsx("div", {
+    role: "grid",
+    className: ax(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       height: `${rowVirtualizer.getTotalSize()}px`,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -279,21 +275,14 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: virtualistItemsRef,
     onKeyDown: handleKeyDown,
     role: "presentation"
-  }, rowVirtualizer.getVirtualItems().map((virtualRow, index) => jsx("div", {
+  }, rowVirtualizer.getVirtualItems().map((virtualRow, index) => /*#__PURE__*/React.createElement("div", {
     key: virtualRow.key,
     style: {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      position: 'absolute',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      top: 0,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      left: 0,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      width: '100%',
       height: `${virtualRow.size}px`,
       transform: `translateY(${virtualRow.start}px)`
     },
     role: "row",
-    "aria-rowindex": index + 1
+    "aria-rowindex": index + 1,
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])
   }, rowRenderer(virtualRow)))));
 });

package/dist/es2019/components/typeahead/EmojiTypeAheadItemInternalCompiled.js

@@ -6,7 +6,7 @@ import { N30 } from '@atlaskit/theme/colors';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { leftClick } from '../../util/mouse';
 import { toEmojiId } from '../../util/type-helpers';
-import { EmojiPreviewComponent } from '../compiled/common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
 import { typeaheadSelected } from './styles';
 const typeAheadWidth = 350;
 const typeAheadItem = null;