@atlaskit/emoji 69.0.0 → 69.0.2

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

@@ -0,0 +1,139 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useState, memo, useEffect } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx, css } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { supportsUploadFeature } from '../../api/EmojiResource';
+import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
+import { uploadEmoji } from '../common/UploadEmoji';
+import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
+import { ufoExperiences } from '../../util/analytics/ufoExperiences';
+import { messages } from '../i18n';
+var emojiPickerWidth = 350;
+var emojiUploadWidget = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'stretch',
+  background: "var(--ds-surface-overlay, white)",
+  height: "120px",
+  width: "".concat(emojiPickerWidth, "px"),
+  marginBottom: "var(--ds-space-100, 8px)",
+  minWidth: "".concat(emojiPickerWidth, "px"),
+  margin: "var(--ds-space-negative-150, -12px)",
+  marginTop: "var(--ds-space-negative-200, -16px)"
+});
+var emojiUploadFooter = css({
+  flex: '0 0 auto'
+});
+var EmojiUploadComponent = function EmojiUploadComponent(props) {
+  var emojiProvider = props.emojiProvider,
+    createAnalyticsEvent = props.createAnalyticsEvent,
+    onUploaderRef = props.onUploaderRef;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    uploadErrorMessage = _useState2[0],
+    setUploadErrorMessage = _useState2[1];
+  useEffect(function () {
+    if (supportsUploadFeature(emojiProvider)) {
+      emojiProvider.prepareForUpload();
+    }
+  }, [emojiProvider]);
+  useEffect(function () {
+    return function () {
+      ufoExperiences['emoji-uploaded'].abort({
+        metadata: {
+          source: 'EmojiUploadComponent',
+          reason: 'unmount'
+        }
+      });
+    };
+  }, []);
+  var onUploadEmoji = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(upload, retry, onSuccessHandler) {
+      var errorSetter, message;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            ufoExperiences['emoji-uploaded'].start();
+            ufoExperiences['emoji-uploaded'].addMetadata({
+              retry: retry
+            });
+            if (!supportsUploadFeature(emojiProvider)) {
+              _context.next = 16;
+              break;
+            }
+            fireAnalytics(uploadConfirmButton({
+              retry: retry
+            }));
+            _context.prev = 4;
+            _context.next = 7;
+            return emojiProvider.prepareForUpload();
+          case 7:
+            errorSetter = function errorSetter(message) {
+              setUploadErrorMessage(message);
+            }; // internally handled error from upload callback
+            uploadEmoji(upload, emojiProvider, errorSetter, onUploaded(onSuccessHandler), fireAnalytics, retry);
+            _context.next = 16;
+            break;
+          case 11:
+            _context.prev = 11;
+            _context.t0 = _context["catch"](4);
+            // error from upload token generation
+            message = _context.t0 instanceof Error ? _context.t0.message : 'Issue with generating upload token';
+            ufoExperiences['emoji-uploaded'].failure({
+              metadata: {
+                source: 'EmojiUploadComponent',
+                error: message
+              }
+            });
+            setUploadErrorMessage(messages.emojiUploadFailed);
+          case 16:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 11]]);
+    }));
+    return function onUploadEmoji(_x, _x2, _x3) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var onUploaded = function onUploaded(onSuccessHandler) {
+    return function () {
+      setUploadErrorMessage(undefined);
+      if (onSuccessHandler) {
+        onSuccessHandler();
+      }
+    };
+  };
+  var onFileChooserClicked = function onFileChooserClicked() {
+    fireAnalytics(selectedFileEvent());
+  };
+  var onUploadCancelled = function onUploadCancelled() {
+    fireAnalytics(uploadCancelButton());
+    onUploaded();
+  };
+  var fireAnalytics = function fireAnalytics(analyticsEvent) {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
+    }
+  };
+  return jsx("div", {
+    css: emojiUploadWidget,
+    ref: onUploaderRef
+  }, jsx("div", {
+    css: emojiUploadFooter
+  }, jsx(EmojiUploadPickerWithIntl, {
+    onFileChooserClicked: onFileChooserClicked,
+    onUploadCancelled: onUploadCancelled,
+    onUploadEmoji: onUploadEmoji,
+    errorMessage: uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null
+  })));
+};
+export default /*#__PURE__*/memo(EmojiUploadComponent);

package/dist/esm/index.js

@@ -1,7 +1,8 @@
 import { AbstractResource } from '@atlaskit/util-service-support';
 import { Emoji, EmojiPlaceholder } from './element';
 import ResourcedEmoji from './components/common/ResourcedEmoji';
-import EmojiPicker, { preloadEmojiPicker } from './components/picker/EmojiPicker';
+import { EmojiPicker } from './picker';
+import { preloadEmojiPicker } from './components/picker/EmojiPicker';
 import EmojiUploader from './components/uploader/EmojiUploader';
 import EmojiTypeAhead from './components/typeahead/EmojiTypeAhead';
 import EmojiTypeAheadItem from './components/typeahead/EmojiTypeAheadItem';

package/dist/esm/picker.js

@@ -1 +1,5 @@
-export { default as EmojiPicker } from './components/picker/EmojiPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { default as EmotionEmojiPicker } from './components/picker/EmojiPicker';
+import { default as CompiledEmojiPicker } from './components/compiled/picker/EmojiPicker';
+var EmojiPicker = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPicker, EmotionEmojiPicker);
+export { EmojiPicker };

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

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

package/dist/types/components/compiled/picker/CategorySelector.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { CategoryDescription, OnCategory } from '../../../types';
+import { type CategoryGroupKey, type CategoryId } from '../../picker/categories';
+export interface Props {
+    dynamicCategories?: CategoryId[];
+    activeCategoryId?: CategoryId | null;
+    disableCategories?: boolean;
+    onCategorySelected?: OnCategory;
+}
+export type CategoryMap = {
+    [id: string]: CategoryDescription;
+};
+export declare const sortCategories: (c1: CategoryGroupKey, c2: CategoryGroupKey) => number;
+export declare const categorySelectorComponentTestId = "category-selector-component";
+export declare const categorySelectorCategoryTestId: (categoryId: string) => string;
+declare const CategorySelector: (props: Props) => JSX.Element;
+export default CategorySelector;

package/dist/types/components/compiled/picker/EmojiPicker.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ComponentClass } from 'react';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { EmojiProvider } from '../../../api/EmojiResource';
+import type { OnEmojiEvent, PickerSize } from '../../../types';
+import LoadingEmojiComponent, { type Props as LoadingProps, type State as LoadingState } from '../../common/LoadingEmojiComponent';
+import type { PickerRefHandler, Props as ComponentProps } from './EmojiPickerComponent';
+export declare const preloadEmojiPicker: () => void;
+export interface Props extends LoadingProps {
+    /**
+     * Callback to be executed on emoji selection.
+     */
+    onSelection?: OnEmojiEvent;
+    /**
+     * Callback to handle picker reference.
+     */
+    onPickerRef?: PickerRefHandler;
+    /**
+     * Flag to disable tone selector.
+     */
+    hideToneSelector?: boolean;
+    /**
+     * Size of Emoji Picker. default value is 'medium'.
+     */
+    size?: PickerSize;
+}
+export declare class EmojiPickerInternal extends LoadingEmojiComponent<Props & WithAnalyticsEventsProps, LoadingState> {
+    static AsyncLoadedComponent?: React.ComponentType<React.PropsWithChildren<ComponentProps>>;
+    static defaultProps: {
+        size: string;
+    };
+    state: {
+        asyncLoadedComponent: import("react").ComponentType<import("react").PropsWithChildren<ComponentProps>> | undefined;
+    };
+    constructor(props: Props);
+    asyncLoadComponent(): void;
+    renderLoading(): JSX.Element | null;
+    renderLoaded(loadedEmojiProvider: EmojiProvider, EmojiPickerComponent: ComponentClass<ComponentProps>): JSX.Element;
+}
+declare const EmojiPicker: import("react").ForwardRefExoticComponent<Omit<Props & WithAnalyticsEventsProps, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;
+export default EmojiPicker;

package/dist/types/components/compiled/picker/EmojiPickerCategoryHeading.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CategoryGroupKey } from '../../picker/categories';
+/**
+ * Test id for wrapper Emoji Picker List div
+ */
+export declare const RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID = "render-emoji-picker-categorty-heading";
+export interface Props {
+    id: CategoryGroupKey;
+    title: string;
+    className?: string;
+}
+declare const EmojiPickerCategoryHeading: ({ id, title, className }: Props) => JSX.Element;
+export default EmojiPickerCategoryHeading;

package/dist/types/components/compiled/picker/EmojiPickerComponent.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { type OnEmojiEvent, type PickerSize } from '../../../types';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+export interface PickerRefHandler {
+    (ref: any): any;
+}
+export interface Props {
+    /**
+     * Callback to be executed when user selects an emoji.
+     */
+    onSelection?: OnEmojiEvent;
+    /**
+     * Callback performed when picker reference is being set.
+     */
+    onPickerRef?: PickerRefHandler;
+    /**
+     * Flag to disable tone selector.
+     */
+    hideToneSelector?: boolean;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+    size?: PickerSize;
+}
+declare const _default: import("react").MemoExoticComponent<({ onSelection, onPickerRef, hideToneSelector, createAnalyticsEvent, size, }: Props) => JSX.Element>;
+export default _default;

package/dist/types/components/compiled/picker/EmojiPickerEmojiRow.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { EmojiDescription, OnEmojiEvent } from '../../../types';
+import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
+import type { CategoryGroupKey } from '../../picker/categories';
+export interface Props {
+    category: CategoryGroupKey;
+    emojis: EmojiDescription[];
+    title: string;
+    showDelete: boolean;
+    onSelected?: OnEmojiEvent;
+    onMouseMove?: OnEmojiEvent;
+    onFocus?: OnEmojiEvent;
+    onDelete?: OnEmojiEvent;
+    virtualItemContext?: VirtualItemContext;
+}
+declare const _default: import("react").MemoExoticComponent<({ emojis, onSelected, onMouseMove, onFocus, title, showDelete, onDelete, virtualItemContext, }: Props) => JSX.Element>;
+export default _default;

package/dist/types/components/compiled/picker/EmojiPickerFooter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { EmojiDescription } from '../../../types';
+export interface Props {
+    selectedEmoji?: EmojiDescription;
+}
+export declare const emojiPickerFooterTestId = "emoji-picker-footer";
+declare const _default: import("react").MemoExoticComponent<({ selectedEmoji }: Props) => JSX.Element>;
+export default _default;

package/dist/types/components/compiled/picker/EmojiPickerListSearch.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { Styles } from '../../../types';
+export interface Props {
+    style?: Styles;
+    query?: string;
+    isVisible?: boolean;
+    onChange: (value: string) => void;
+    resultsCount: number;
+}
+export declare const emojiPickerSearchTestId = "emoji-picker-search";
+export declare const EmojiPickerListSearch: (props: Props) => JSX.Element;

package/dist/types/components/compiled/picker/EmojiPickerTabPanel.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type WrappedComponentProps } from 'react-intl-next';
+/**
+ * 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
+ * ticket: COLLAB-2317
+ */
+interface EmojiPickerTabPanelProps extends WrappedComponentProps {
+    /**
+     * Indicate whether the panel shows search results or full emojis list
+     */
+    showSearchResults: boolean;
+    children?: React.ReactNode;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<React.PropsWithChildren<EmojiPickerTabPanelProps>>> & {
+    WrappedComponent: React.ComponentType<React.PropsWithChildren<EmojiPickerTabPanelProps>>;
+};
+export default _default;

package/dist/types/components/compiled/picker/EmojiPickerVirtualItems.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { ReactNode } from 'react';
+import { type Props as CategoryHeadingProps } from './EmojiPickerCategoryHeading';
+import { type Props as EmojiRowProps } from './EmojiPickerEmojiRow';
+import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
+export interface RenderItem {
+    (context?: VirtualItemContext): ReactNode;
+}
+export interface VirtualItem<P> {
+    height: number;
+    props: P;
+    renderItem: RenderItem;
+}
+export declare abstract class AbstractItem<P> implements VirtualItem<P> {
+    readonly height: number;
+    readonly props: P;
+    constructor(props: P, height: number);
+    abstract renderItem: RenderItem;
+}
+export declare class EmojisRowItem extends AbstractItem<EmojiRowProps> {
+    constructor(props: EmojiRowProps);
+    renderItem: (context?: VirtualItemContext) => JSX.Element;
+}
+export declare class LoadingItem extends AbstractItem<{}> {
+    constructor();
+    renderItem: () => JSX.Element;
+}
+export declare class CategoryHeadingItem extends AbstractItem<CategoryHeadingProps> {
+    constructor(props: CategoryHeadingProps);
+    renderItem: () => JSX.Element;
+}
+export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | {}>[], context: VirtualItemContext) => JSX.Element;

package/dist/types/components/compiled/picker/VirtualList.d.ts

@@ -0,0 +1,42 @@
+import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
+import React from 'react';
+type Props = {
+    overscanRowCount: number;
+    rowHeight: (index: number) => number;
+    rowRenderer: (context: VirtualItemContext) => JSX.Element;
+    onRowsRendered: (indexes: {
+        startIndex: number;
+    }) => void;
+    rowCount: number;
+    scrollToAlignment: 'start' | 'end';
+    width: number;
+    height: number;
+};
+export type ListRef = {
+    /**
+     * Scroll to the row by row index
+     * @param index row index of virtual list
+     */
+    scrollToRow: (index?: number) => void;
+    /**
+     * Scroll to the row by row index, and focus on last emoji in that row
+     * @param index row index of virtual list
+     * @returns
+     */
+    scrollToRowAndFocusLastEmoji: (index?: number) => void;
+    /**
+     * Scroll to a emoji in virtual list and focus on it
+     * @param rIndex row index of virtual list
+     * @param cIndex column index of virtual list
+     */
+    scrollToEmojiAndFocus: (rIndex: number, cIndex: number) => void;
+    /**
+     * Update the focus index of virtual list, which will manage tabIndex via EmojiPickerListContext
+     * @param rIndex row index of virtual list
+     * @param cIndex column index of virtual list
+     */
+    updateFocusIndex: (rIndex: number, cIndex?: number) => void;
+};
+export declare const virtualListScrollContainerTestId = "virtual-list-scroll-container";
+export declare const VirtualList: React.ForwardRefExoticComponent<Props & React.RefAttributes<ListRef>>;
+export {};

package/dist/types/components/picker/EmojiPickerList.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { PureComponent } from 'react';
-import { jsx } from '@emotion/react';
 import type { EmojiDescription, EmojiDescriptionWithVariations, Message, OnCategory, OnEmojiEvent, OnToneSelected, OnToneSelectorCancelled, PickerSize, ToneSelection, User } from '../../types';
 import { type CategoryId } from './categories';
 import type { OnUploadEmoji } from '../common/EmojiUploadPicker';
@@ -100,6 +95,6 @@ export declare class EmojiPickerVirtualListInternalOld extends PureComponent<Pro
      * however, it'll trigger onChange from VirtualList, which will update focus index automatically for us
      */
     private handleOnCloseDelete;
-    render(): jsx.JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const EmojiPickerVirtualListInternalNew: React.ForwardRefExoticComponent<Props & React.RefAttributes<PickerListRef>>;

package/dist/types/components/picker/EmojiPickerSizes.d.ts

@@ -1,6 +1,6 @@
 export declare const sizes: {
     listHeight: number;
-    listWidth: number;
+    listWidth: 350;
     searchHeight: number;
     categoryHeadingHeight: number;
     emojiRowHeight: number;

package/dist/types/components/picker/EmojiPickerTabPanel.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type WrappedComponentProps } from 'react-intl-next';
+/**
+ * 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
+ * ticket: COLLAB-2317
+ */
+interface EmojiPickerTabPanelProps extends WrappedComponentProps {
+    /**
+     * Indicate whether the panel shows search results or full emojis list
+     */
+    showSearchResults: boolean;
+    children?: React.ReactNode;
+}
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<React.PropsWithChildren<EmojiPickerTabPanelProps>>> & {
+    WrappedComponent: React.ComponentType<React.PropsWithChildren<EmojiPickerTabPanelProps>>;
+};
+export default _default;

package/dist/types/components/picker/styles.d.ts

@@ -2,7 +2,6 @@ import type { PickerSize } from '../../types';
 export declare const emojiPicker: (hasPreview?: boolean, size?: PickerSize) => import("@emotion/react").SerializedStyles;
 export declare const categorySelector: import("@emotion/react").SerializedStyles;
 export declare const categorySelectorTablist: import("@emotion/react").SerializedStyles;
-export declare const emojiPickerList: import("@emotion/react").SerializedStyles;
 export declare const virtualList: import("@emotion/react").SerializedStyles;
 export declare const searchIcon: import("@emotion/react").SerializedStyles;
 export declare const input: import("@emotion/react").SerializedStyles;

package/dist/types/components/typeahead/EmojiTypeAheadComponent.d.ts

@@ -1,10 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { PureComponent } from 'react';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import { type EmojiDescription, type OnEmojiEvent } from '../../types';
 export interface OnLifecycle {
@@ -74,5 +70,5 @@ export default class EmojiTypeAheadComponent extends PureComponent<Props, State>
     private fireSelectionEvent;
     private onProviderChange;
     private onEmojiListRef;
-    render(): jsx.JSX.Element;
+    render(): React.JSX.Element;
 }

package/dist/types/components/typeahead/EmojiTypeAheadItemInternalCompiled.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { EmojiDescription, EmojiProvider, OnEmojiEvent } from '../../types';
+export interface Props {
+    onMouseMove: OnEmojiEvent;
+    onSelection: OnEmojiEvent;
+    selected: boolean;
+    emoji: EmojiDescription;
+    emojiProvider?: EmojiProvider;
+    forwardedRef?: React.Ref<HTMLDivElement>;
+}
+export declare function EmojiTypeAheadItemInternalCompiled(props: Props): JSX.Element;

package/dist/types/components/typeahead/EmojiTypeAheadList.d.ts

@@ -1,9 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { PureComponent } from 'react';
-import { jsx } from '@emotion/react';
+import React, { PureComponent } from 'react';
 import type { EmojiDescription, OnEmojiEvent } from '../../types';
 export interface Props {
     emojis: EmojiDescription[];
@@ -35,6 +30,6 @@ export default class EmojiTypeAheadList extends PureComponent<Props, State> {
     private itemSelected;
     private renderItems;
     private isSelectedEmoji;
-    render(): jsx.JSX.Element;
+    render(): React.JSX.Element;
     private handleScrollableRef;
 }

package/dist/types/components/typeahead/EmojiTypeAheadListContainer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const EmojiTypeAheadListContainer: import("react").FC<{
+    hasEmoji: boolean;
+    loading?: boolean | undefined;
+    children: import("react").ReactNode;
+} & {
+    hasEmoji: boolean;
+    loading?: boolean | undefined;
+    children: import("react").ReactNode;
+}>;

package/dist/types/components/typeahead/EmojiTypeAheadListContainerCompiled.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+export declare function EmojiTypeAheadListContainerCompiled(props: {
+    hasEmoji: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+}): JSX.Element;

package/dist/types/components/typeahead/EmojiTypeAheadListContainerEmotion.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+export declare function EmojiTypeAheadListContainerEmotion(props: {
+    hasEmoji: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+}): jsx.JSX.Element;

package/dist/types/components/typeahead/EmojiTypeAheadSpinner.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmojiTypeAheadSpinner: import("react").FC<import("react").RefAttributes<unknown>>;

package/dist/types/components/typeahead/EmojiTypeAheadSpinnerCompiled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function EmojiTypeAheadSpinnerCompiled(): JSX.Element;

package/dist/types/components/typeahead/EmojiTypeAheadSpinnerEmotion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+export declare function EmojiTypeAheadSpinnerEmotion(): jsx.JSX.Element;

package/dist/types/components/typeahead/styles.d.ts

@@ -1,10 +1,6 @@
 export declare const emojiTypeAhead = "emoji-typeahead-element";
 export declare const typeAheadListContainer = "emoji-typeahead-list-container";
 export declare const typeaheadSelected = "emoji-typeahead-selected";
-export declare const typeAheadList: import("@emotion/react").SerializedStyles;
-export declare const typeAheadEmpty: import("@emotion/react").SerializedStyles;
 export declare const selected: import("@emotion/react").SerializedStyles;
 export declare const typeAheadItem: import("@emotion/react").SerializedStyles;
 export declare const typeAheadItemRow: import("@emotion/react").SerializedStyles;
-export declare const emojiTypeAheadSpinnerContainer: import("@emotion/react").SerializedStyles;
-export declare const emojiTypeAheadSpinner: import("@emotion/react").SerializedStyles;

package/dist/types/components/uploader/EmojiUploadComponent.d.ts

@@ -1,14 +1,3 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
-import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { type EmojiProvider } from '../../api/EmojiResource';
-export interface UploadRefHandler {
-    (ref: HTMLDivElement): void;
-}
-export interface Props {
-    emojiProvider: EmojiProvider;
-    onUploaderRef?: UploadRefHandler;
-    createAnalyticsEvent?: CreateUIAnalyticsEvent;
-}
-declare const _default: import("react").MemoExoticComponent<(props: Props) => jsx.JSX.Element>;
-export default _default;
+declare const EmojiUploadComponent: import("react").FC<import("./EmojiUploadComponentCompiled").Props & import("./EmojiUploadComponentEmotion").Props>;
+export default EmojiUploadComponent;

package/dist/types/components/uploader/EmojiUploadComponentCompiled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type EmojiProvider } from '../../api/EmojiResource';
+export interface UploadRefHandler {
+    (ref: HTMLDivElement): void;
+}
+export interface Props {
+    emojiProvider: EmojiProvider;
+    onUploaderRef?: UploadRefHandler;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+}
+declare const _default: import("react").MemoExoticComponent<(props: Props) => JSX.Element>;
+export default _default;

package/dist/types/components/uploader/EmojiUploadComponentEmotion.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { type EmojiProvider } from '../../api/EmojiResource';
+export interface UploadRefHandler {
+    (ref: HTMLDivElement): void;
+}
+export interface Props {
+    emojiProvider: EmojiProvider;
+    onUploaderRef?: UploadRefHandler;
+    createAnalyticsEvent?: CreateUIAnalyticsEvent;
+}
+declare const _default: import("react").MemoExoticComponent<(props: Props) => jsx.JSX.Element>;
+export default _default;

package/dist/types/components/uploader/EmojiUploader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import LoadingEmojiComponent, { type Props as LoadingProps, type State as LoadingState } from '../common/LoadingEmojiComponent';
-import type { Props as ComponentProps } from './EmojiUploadComponent';
+import type { Props as ComponentProps } from './EmojiUploadComponentCompiled';
 import type { EmojiProvider } from '../../api/EmojiResource';
 import { type CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 export interface Props extends LoadingProps {