@atlaskit/emoji 71.17.1 → 72.0.0

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

@@ -0,0 +1,125 @@
+/* UnicodeEmoji.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useState } from 'react';
+import { defaultEmojiHeight } from '../../util/constants';
+import { isSSR } from '../../util/is-ssr';
+import { renderUnicodeEmojiToImagePath } from '../../util/renderUnicodeEmojiToImagePath';
+import { EmojiNodeWrapper, unicodeEmojiCanvasSize } from './Emoji';
+import EmojiPlaceholder from './EmojiPlaceholder';
+import { ImageEmoji } from './ImageEmoji';
+import { emojiNodeStyles, commonSelectedStyles, selectOnHoverStyles } from './styles';
+const useUnicodeEmojiImage = unicodeEmoji => {
+  const [state, setState] = useState({
+    status: 'loading'
+  });
+  useEffect(() => {
+    let cancelled = false;
+    let imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(imagePath => {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji,
+        imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji
+      });
+    }).catch(() => {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+const UnicodeEmojiImage = props => {
+  const {
+    emoji,
+    fitToHeight,
+    showTooltip
+  } = props;
+  const emojiText = emoji.representation.unicodeEmoji;
+  const unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  const hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
+      emoji: {
+        ...emoji,
+        altRepresentation: undefined,
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+export const UnicodeEmoji = props => {
+  const {
+    emoji,
+    selected,
+    selectOnHover,
+    className,
+    fitToHeight,
+    renderUnicodeEmojiAsImage = true
+  } = props;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
+  }
+  const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
+  const emojiText = emoji.representation.unicodeEmoji;
+  const defaultSize = `${fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight}px`;
+  const emojiSize = `var(--emoji-common-unicode-size, ${defaultSize})`;
+  const style = {
+    display: 'inline-flex',
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
+  };
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement(EmojiNodeWrapper, _extends({}, props, {
+      type: "unicode",
+      className: classes
+    }), /*#__PURE__*/React.createElement("span", {
+      style: style
+    }, emojiText))
+  );
+};

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

@@ -1,8 +1,9 @@
-import { supportsUploadFeature } from '../../api/EmojiResource';
-import { uploadFailedEvent, uploadSucceededEvent } from '../../util/analytics';
-import { messages } from '../i18n';
+import { supportsUploadFeature } from '../../api/supportsUploadFeature';
+import { extractErrorInfo } from '../../util/analytics/extractErrorInfo';
 import { ufoExperiences } from '../../util/analytics/ufoExperiences';
-import { extractErrorInfo } from '../../util/analytics/analytics';
+import { uploadFailedEvent } from '../../util/analytics/uploadFailedEvent';
+import { uploadSucceededEvent } from '../../util/analytics/uploadSucceededEvent';
+import { messages } from '../i18n';
 export const uploadEmoji = (upload, emojiProvider, errorSetter, onSuccess, fireAnalytics, retry) => {
   const startTime = Date.now();
   errorSetter(undefined);

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

@@ -0,0 +1,6 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+export const emojiPlaceholderTestId = shortName => `emoji-placeholder-${shortName}`;

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

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import { toEmojiId } from '../../util/to-emoji-id';
+export const handleDelete = (props, event) => {
+  const {
+    emoji,
+    onDelete
+  } = props;
+  if (onDelete) {
+    onDelete(toEmojiId(emoji), emoji, event);
+  }
+};

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

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+export const isRefreshEmojiPickerEnabled = () => {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};

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

@@ -0,0 +1,6 @@
+export class AbstractItem {
+  constructor(props, height) {
+    this.props = props;
+    this.height = height;
+  }
+}

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

@@ -0,0 +1,13 @@
+/* CategoryHeadingItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { AbstractItem } from './AbstractItem';
+import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
+import { sizes } from './EmojiPickerSizes';
+export class CategoryHeadingItem extends AbstractItem {
+  constructor(props) {
+    super(props, sizes.categoryHeadingHeight);
+    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, this.props));
+  }
+}

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

@@ -3,16 +3,19 @@ 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 { useIntl } from 'react-intl';
+import { cx } from '@atlaskit/css';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { usePrevious } from '../../hooks/usePrevious';
 import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../util/constants';
 import { messages } from '../i18n';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
-import { usePrevious } from '../../hooks/usePrevious';
+import { categorySelectorCategoryTestId } from './categorySelectorCategoryTestId';
 import { RENDER_EMOJI_PICKER_LIST_TESTID } from './EmojiPickerList';
+import { sortCategories } from './sortCategories';
+import { sortCategoriesNew } from './sortCategoriesNew';
 const isRefreshEmojiPickerEnabled = () => {
   if (!FeatureGates.initializeCompleted()) {
     return false;
@@ -43,8 +46,6 @@ const categorySelector = null;
 const categorySelectorNew = null;
 const categorySelectorTablist = null;
 const categorySelectorTablistNew = null;
-export const sortCategories = (c1, c2) => CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
-export const sortCategoriesNew = (c1, c2) => CategoryDescriptionMapNew[c1].order - CategoryDescriptionMapNew[c2].order;
 const addNewCategories = (oldCategories, newCategories) => {
   if (!newCategories) {
     return oldCategories;
@@ -52,7 +53,6 @@ const addNewCategories = (oldCategories, newCategories) => {
   return oldCategories.concat(newCategories.filter(category => !!(isRefreshEmojiPickerEnabled() ? CategoryDescriptionMapNew : CategoryDescriptionMap)[category])).sort(isRefreshEmojiPickerEnabled() ? sortCategoriesNew : sortCategories);
 };
 export const categorySelectorComponentTestId = 'category-selector-component';
-export const categorySelectorCategoryTestId = categoryId => `category-selector-${categoryId}`;
 const CategorySelector = props => {
   const {
     disableCategories,

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

@@ -1,80 +1,27 @@
-/* EmojiPicker.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import "./EmojiPicker.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ufoExperiences } from '../../util/analytics';
-import FeatureGates from '@atlaskit/feature-gate-js-client';
-import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
-import { LoadingItem } from './EmojiPickerVirtualItems';
-import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
-import { defaultEmojiPickerSize } from '../../util/constants';
-import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
-const isRefreshEmojiPickerEnabled = () => {
-  if (!FeatureGates.initializeCompleted()) {
-    return false;
-  }
+import { EmojiPickerInternal } from './EmojiPickerInternal';
+export const EmojiPicker = withAnalyticsEvents()(EmojiPickerInternal);
+export default EmojiPicker;
 
-  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
-  const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
-  return isEnabled;
-};
-const emojiPicker = null;
-const emojiPickerNew = null;
-const emojiPickerModuleLoader = () => import( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent');
-const emojiPickerLoader = () => emojiPickerModuleLoader().then(module => module.default);
-export const preloadEmojiPicker = () => {
-  emojiPickerLoader().then(component => {
-    EmojiPickerInternal.AsyncLoadedComponent = component;
-  });
-};
-export class EmojiPickerInternal extends LoadingEmojiComponent {
-  constructor(props) {
-    super(props, {});
-    _defineProperty(this, "state", {
-      asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
-    });
-    ufoExperiences['emoji-picker-opened'].start();
-  }
-  asyncLoadComponent() {
-    emojiPickerLoader().then(component => {
-      EmojiPickerInternal.AsyncLoadedComponent = component;
-      this.setAsyncState(component);
-    });
-  }
-  renderLoading() {
-    const item = new LoadingItem();
-    const handlePickerRef = ref => {
-      if (this.props.onPickerRef) {
-        this.props.onPickerRef(ref);
-      }
-    };
-    ufoExperiences['emoji-picker-opened'].markFMP();
-    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
-      ref: handlePickerRef,
-      className: ax(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
-    }, item.renderItem()) : /*#__PURE__*/React.createElement("div", {
-      ref: handlePickerRef,
-      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
-    }, item.renderItem());
-  }
-  renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
-    const {
-      emojiProvider,
-      ...otherProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-      experiences: [ufoExperiences['emoji-picker-opened']]
-    }, /*#__PURE__*/React.createElement(EmojiCommonProvider, {
-      emojiProvider: loadedEmojiProvider
-    }, /*#__PURE__*/React.createElement(EmojiPickerComponent, otherProps)));
-  }
-}
-// state initialised with static component to prevent
-// rerender when the module has already been loaded
-_defineProperty(EmojiPickerInternal, "defaultProps", {
-  size: defaultEmojiPickerSize
-});
-const EmojiPicker = withAnalyticsEvents()(EmojiPickerInternal);
-export default EmojiPicker;
+/**
+ * @deprecated Use `import { preloadEmojiPicker } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { preloadEmojiPicker } from './preloadEmojiPicker';
+/**
+ * @deprecated Use `import { EmojiPickerInternal } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { EmojiPickerInternal } from './EmojiPickerInternal';
+/**
+ * @deprecated Use `import { emojiPickerModuleLoader } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { emojiPickerModuleLoader } from './emojiPickerModuleLoader';
+/**
+ * @deprecated Use `import { emojiPickerLoader } from '@atlaskit/emoji/emoji-picker'` instead.
+ */
+export { emojiPickerLoader } from './emojiPickerLoader';

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

@@ -2,9 +2,9 @@
 import "./EmojiPickerCategoryHeading.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import Heading from '@atlaskit/heading';
 import { FormattedMessage } from 'react-intl';
-import { isMessagesKey } from '../../util/type-helpers';
+import Heading from '@atlaskit/heading';
+import { isMessagesKey } from '../../util/is-messages-key';
 import { messages } from '../i18n';
 const emojiCategoryTitle = null;
 

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

@@ -2,33 +2,49 @@
 import "./EmojiPickerComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import FeatureGates from '@atlaskit/feature-gate-js-client';
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
+import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
+import { FormattedMessage, useIntl } from 'react-intl';
 import { getDocument } from '@atlaskit/browser-apis';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
 import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
-import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { getEmojiVariation } from '../../api/EmojiRepository';
-import { supportsUploadFeature } from '../../api/EmojiResource';
-import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
-import { containsEmojiId, isPromise /*, isEmojiIdEqual, isEmojiLoaded*/, isEmojiDescription } from '../../util/type-helpers';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { getEmojiVariation } from '../../api/getEmojiVariation';
+import { supportsUploadFeature } from '../../api/supportsUploadFeature';
+import { useEmoji } from '../../hooks/useEmoji';
+import { useIsMounted } from '../../hooks/useIsMounted';
 import { SearchSort, SearchSourceTypes } from '../../types';
-import { getToneEmoji } from '../../util/filters';
-import { uploadEmoji } from '../common/UploadEmoji';
+import { createAndFireEventInElementsChannel } from '../../util/analytics/analytics';
+import { categoryClickedEvent } from '../../util/analytics/categoryClickedEvent';
+import { closedPickerEvent } from '../../util/analytics/closedPickerEvent';
+import { deleteBeginEvent } from '../../util/analytics/deleteBeginEvent';
+import { deleteCancelEvent } from '../../util/analytics/deleteCancelEvent';
+import { deleteConfirmEvent } from '../../util/analytics/deleteConfirmEvent';
+import { openedPickerEvent } from '../../util/analytics/openedPickerEvent';
+import { pickerClickedEvent } from '../../util/analytics/pickerClickedEvent';
+import { pickerSearchedEvent } from '../../util/analytics/pickerSearchedEvent';
+import { selectedFileEvent } from '../../util/analytics/selectedFileEvent';
+import { toneSelectorClosedEvent } from '../../util/analytics/toneSelectorClosedEvent';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { uploadBeginButton } from '../../util/analytics/uploadBeginButton';
+import { uploadCancelButton } from '../../util/analytics/uploadCancelButton';
+import { uploadConfirmButton } from '../../util/analytics/uploadConfirmButton';
+import { KeyboardKeys, customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
+import { containsEmojiId } from '../../util/contains-emoji-id';
+import { filterHiddenEmojis } from '../../util/filter-hidden-emojis';
+import { getToneEmoji } from '../../util/get-tone-emoji';
+import { isEmojiDescription } from '../../util/is-emoji-description';
+import { isPromise } from '../../util/is-promise';
+import { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } from '../../util/productivity-colors';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
+import { uploadEmoji } from '../common/UploadEmoji';
+import { messages } from '../i18n';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import { EmojiPickerVirtualListInternal as EmojiPickerList } from './EmojiPickerList';
-import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
-import { useEmoji } from '../../hooks/useEmoji';
-import { useIsMounted } from '../../hooks/useIsMounted';
-import { messages } from '../i18n';
-import { defaultProductivityColor, getStoredProductivityColor, storeProductivityColor } from '../../util/productivity-colors';
-import { filterHiddenEmojis } from '../../util/hidden-emojis';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const isRefreshEmojiPickerEnabled = () => {
   if (!FeatureGates.initializeCompleted()) {
     return false;

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

@@ -0,0 +1,71 @@
+/* EmojiPickerInternal.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./EmojiPickerInternal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import FeatureGates from '@atlaskit/feature-gate-js-client';
+import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { defaultEmojiPickerSize } from '../../util/constants';
+import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
+import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
+import { LoadingItem } from './LoadingItem';
+import { emojiPickerLoader } from './emojiPickerLoader';
+const isRefreshEmojiPickerEnabled = () => {
+  if (!FeatureGates.initializeCompleted()) {
+    return false;
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/use-recommended-utils
+  const isEnabled = FeatureGates.getExperimentValue('platform_teamoji_26_refresh_emoji_picker', 'isEnabled', false);
+  return isEnabled;
+};
+const emojiPicker = null;
+const emojiPickerNew = null;
+export class EmojiPickerInternal extends LoadingEmojiComponent {
+  constructor(props) {
+    super(props, {});
+    _defineProperty(this, "state", {
+      asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
+    });
+    ufoExperiences['emoji-picker-opened'].start();
+  }
+  asyncLoadComponent() {
+    emojiPickerLoader().then(component => {
+      EmojiPickerInternal.AsyncLoadedComponent = component;
+      this.setAsyncState(component);
+    });
+  }
+  renderLoading() {
+    const item = new LoadingItem();
+    const handlePickerRef = ref => {
+      if (this.props.onPickerRef) {
+        this.props.onPickerRef(ref);
+      }
+    };
+    ufoExperiences['emoji-picker-opened'].markFMP();
+    return isRefreshEmojiPickerEnabled() ? /*#__PURE__*/React.createElement("div", {
+      ref: handlePickerRef,
+      className: ax(["_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+    }, item.renderItem()) : /*#__PURE__*/React.createElement("div", {
+      ref: handlePickerRef,
+      className: ax(["_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+    }, item.renderItem());
+  }
+  renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
+    const {
+      emojiProvider,
+      ...otherProps
+    } = this.props;
+    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+      experiences: [ufoExperiences['emoji-picker-opened']]
+    }, /*#__PURE__*/React.createElement(EmojiCommonProvider, {
+      emojiProvider: loadedEmojiProvider
+    }, /*#__PURE__*/React.createElement(EmojiPickerComponent, otherProps)));
+  }
+}
+// state initialised with static component to prevent
+// rerender when the module has already been loaded
+_defineProperty(EmojiPickerInternal, "defaultProps", {
+  size: defaultEmojiPickerSize
+});

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

@@ -1,19 +1,24 @@
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import FeatureGates from '@atlaskit/feature-gate-js-client';
-import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
 import { customCategory, defaultEmojiPickerSize, emojiPickerPreviewHeight, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
+import { filterHiddenEmojis } from '../../util/filter-hidden-emojis';
 import { filterProductivityEmojisByColor, getProductivityColorPreviewEmojis } from '../../util/productivity-colors';
-import { filterHiddenEmojis } from '../../util/hidden-emojis';
+import EmojiActions from '../common/EmojiActions';
+import { messages } from '../i18n';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
+import { CategoryHeadingItem } from './CategoryHeadingItem';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
-import { CategoryHeadingItem, EmojisRowItem, LoadingItem, NoResultsItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
-import EmojiActions from '../common/EmojiActions';
-import { emojiPickerHeightOffset, scrollToRow } from './utils';
-import { VirtualList } from './VirtualList';
-import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
 import EmojiPickerTabPanel from './EmojiPickerTabPanel';
-import { messages } from '../i18n';
+import { EmojisRowItem } from './EmojisRowItem';
+import { LoadingItem } from './LoadingItem';
+import { NoResultsItem } from './NoResultsItem';
+import { VirtualList } from './VirtualList';
+import { emojiPickerHeightOffset } from './emojiPickerHeightOffset';
+import { scrollToRow } from './scrollToRow';
+import { virtualItemRenderer } from './virtualItemRenderer';
 
 /**
  * Test id for wrapper Emoji Picker List div

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

@@ -1,58 +1 @@
-/* EmojiPickerVirtualItems.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 EmojiPickerNoResults from './EmojiPickerNoResults';
-import { sizes } from './EmojiPickerSizes';
-const emojiPickerSpinner = null;
-export class AbstractItem {
-  constructor(props, height) {
-    this.props = props;
-    this.height = height;
-  }
-}
-export class EmojisRowItem extends AbstractItem {
-  constructor(props) {
-    super(props, sizes.emojiRowHeight);
-    _defineProperty(this, "renderItem", context => /*#__PURE__*/React.createElement(EmojiPickerEmojiRow, _extends({}, this.props, {
-      virtualItemContext: context
-    })));
-  }
-}
-export class LoadingItem extends AbstractItem {
-  constructor() {
-    super({}, sizes.loadingRowHeight);
-    _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", () => /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, this.props));
-  }
-}
-export class NoResultsItem extends AbstractItem {
-  constructor(props) {
-    super(props, sizes.noResultsHeight);
-    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerNoResults, this.props));
-  }
-}
-export const virtualItemRenderer = (rows, context) => {
-  const {
-    index,
-    key
-  } = context;
-  const row = rows[index];
-  return /*#__PURE__*/React.createElement("div", {
-    key: key
-  }, row && row.renderItem(context));
-};
+export {};

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

@@ -0,0 +1,16 @@
+/* EmojisRowItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { AbstractItem } from './AbstractItem';
+import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
+import { sizes } from './EmojiPickerSizes';
+export class EmojisRowItem extends AbstractItem {
+  constructor(props) {
+    super(props, sizes.emojiRowHeight);
+    _defineProperty(this, "renderItem", context => /*#__PURE__*/React.createElement(EmojiPickerEmojiRow, _extends({}, this.props, {
+      virtualItemContext: context
+    })));
+  }
+}

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

@@ -0,0 +1,19 @@
+/* LoadingItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./LoadingItem.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Spinner from '@atlaskit/spinner';
+import { AbstractItem } from './AbstractItem';
+import { sizes } from './EmojiPickerSizes';
+const emojiPickerSpinner = null;
+export class LoadingItem extends AbstractItem {
+  constructor() {
+    super({}, sizes.loadingRowHeight);
+    _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"
+    }))));
+  }
+}

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

@@ -0,0 +1,13 @@
+/* NoResultsItem.tsx generated by @compiled/babel-plugin v2.0.0 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { AbstractItem } from './AbstractItem';
+import EmojiPickerNoResults from './EmojiPickerNoResults';
+import { sizes } from './EmojiPickerSizes';
+export class NoResultsItem extends AbstractItem {
+  constructor(props) {
+    super(props, sizes.noResultsHeight);
+    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerNoResults, this.props));
+  }
+}