@atlaskit/emoji 68.0.4 → 69.0.0

package/dist/esm/components/compiled/common/TonePreviewButton.js

@@ -0,0 +1,42 @@
+/* TonePreviewButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./TonePreviewButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef, memo } from 'react';
+import { B100 } from '@atlaskit/theme/colors';
+import Emoji from './Emoji';
+export var tonePreviewTestId = 'tone-preview';
+var emojiButton = null;
+var hidden = null;
+export var TonePreviewButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var emoji = props.emoji,
+    selectOnHover = props.selectOnHover,
+    ariaLabelText = props.ariaLabelText,
+    ariaExpanded = props.ariaExpanded,
+    onSelected = props.onSelected,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible;
+  return /*#__PURE__*/React.createElement("button", {
+    ref: ref,
+    onClick: onSelected,
+    "aria-label": ariaLabelText,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": "emoji-picker-tone-selector"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+
+    "data-testid": tonePreviewTestId,
+    type: "button",
+    className: ax(["_19itidpf _2rkosqtm _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _bfhk1j28 _80omtlke _kqswh2mm _1e0c1o8l _lev4idpf _1cx6idpf _tyukidpf _2ewlidpf _11bcidpf _dqozglyw _1at812x7 _1cjo12x7 _1yg612x7 _hjaq12x7 _hlt21tcg _1s3c1tcg _1i911tcg _1ye71tcg _nt751r31 _49pcglyw _1hvw1o36 _7ehi1r2v _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"]),
+    style: {
+      overflow: 'hidden',
+      "--_1rebzxw": ix("0 0 0 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")))
+    }
+  }, /*#__PURE__*/React.createElement(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(TonePreviewButton);

package/dist/esm/components/compiled/common/ToneSelector.compiled.css

@@ -0,0 +1,3 @@
+._1e0cglyw{display:none}
+._3um015vq{visibility:hidden}
+._tzy4idpf{opacity:0}

package/dist/esm/components/compiled/common/ToneSelector.js

@@ -0,0 +1,101 @@
+/* ToneSelector.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import "./ToneSelector.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; }
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../../util/analytics';
+import { setSkinToneAriaLabelText } from '../../common/setSkinToneAriaLabelText';
+import EmojiRadioButton from './EmojiRadioButton';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../i18n';
+var hidden = null;
+export var toneSelectorTestId = 'tone-selector';
+var extractAllTones = function extractAllTones(emoji) {
+  if (emoji.skinVariations) {
+    return [emoji].concat(_toConsumableArray(emoji.skinVariations));
+  }
+  return [emoji];
+};
+export var ToneSelectorInternal = function ToneSelectorInternal(props) {
+  var createAnalyticsEvent = props.createAnalyticsEvent,
+    emoji = props.emoji,
+    onToneSelected = props.onToneSelected,
+    onToneClose = props.onToneClose,
+    selectedTone = props.selectedTone,
+    isVisible = props.isVisible;
+  var isMounted = useRef(false);
+  var selectedToneRadioRef = useRef(null);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var emojiToneCollection = useMemo(function () {
+    var selectedToneIndex = -1;
+    var toneColletion = extractAllTones(emoji).map(function (tone, index) {
+      var isSelected = index === selectedTone;
+      if (isSelected) {
+        selectedToneIndex = index;
+      }
+      return _objectSpread(_objectSpread({}, tone), {}, {
+        isSelected: isSelected,
+        label: setSkinToneAriaLabelText(tone.name),
+        toneIndex: index
+      });
+    });
+
+    // push description of selected tone to the end of the array
+    // so that it gets rendered last/rightmost
+    toneColletion.push(toneColletion.splice(selectedToneIndex, 1)[0]);
+    return toneColletion;
+  }, [emoji, selectedTone]);
+  useEffect(function () {
+    if (isVisible) {
+      var _selectedToneRadioRef;
+      (_selectedToneRadioRef = selectedToneRadioRef.current) === null || _selectedToneRadioRef === void 0 || _selectedToneRadioRef.focus();
+    }
+  }, [isVisible, selectedToneRadioRef]);
+  var fireAnalyticsEvent = function fireAnalyticsEvent(event) {
+    if (createAnalyticsEvent) {
+      createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
+    }
+  };
+  var onToneSelectedHandler = function onToneSelectedHandler(toneValue) {
+    return function () {
+      if (selectedTone === toneValue && onToneClose) {
+        onToneClose();
+        return;
+      }
+      onToneSelected(toneValue);
+      var toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
+      fireAnalyticsEvent(toneSelectedEvent({
+        skinToneModifier: toneList[toneValue]
+      }));
+    };
+  };
+  if (!isMounted.current) {
+    fireAnalyticsEvent(toneSelectorOpenedEvent({}));
+  }
+  isMounted.current = true;
+  return /*#__PURE__*/React.createElement("div", {
+    role: "radiogroup",
+    "data-testid": toneSelectorTestId,
+    id: "emoji-picker-tone-selector",
+    "aria-label": formatMessage(messages.emojiSelectSkinToneListAriaLabelText),
+    className: ax([!isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, emojiToneCollection.map(function (tone) {
+    return /*#__PURE__*/React.createElement(EmojiRadioButton, {
+      ref: tone.isSelected ? selectedToneRadioRef : null,
+      defaultChecked: tone.isSelected,
+      ariaLabelText: tone.label,
+      key: "".concat(tone.id),
+      emoji: tone,
+      onSelected: onToneSelectedHandler(tone.toneIndex),
+      selectOnHover: true
+    });
+  }));
+};
+var ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
+export default /*#__PURE__*/memo(ToneSelector);

package/dist/esm/components/compiled/common/ToolTipContentWithKeymap.compiled.css

@@ -0,0 +1,7 @@
+
+._2rko1l7b{border-radius:3px}._19bvv77o{padding-left:var(--ds-space-025,2px)}
+._bfhk1v65{background-color:var(--_1kd7x7o)}
+._ca0qidpf{padding-top:0}
+._jqf61teg{label:tooltip-shortcut}
+._n3tdidpf{padding-bottom:0}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}

package/dist/esm/components/compiled/common/ToolTipContentWithKeymap.js

@@ -0,0 +1,19 @@
+/* ToolTipContentWithKeymap.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./ToolTipContentWithKeymap.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { Fragment } from 'react';
+import { N400 } from '@atlaskit/theme/colors';
+import { formatShortcut } from '../../../util/keymaps';
+var tooltipShortcutStyle = null;
+export var ToolTipContentWithKeymap = /*#__PURE__*/React.memo(function (_ref) {
+  var description = _ref.description,
+    shortcutOverride = _ref.shortcutOverride,
+    keymap = _ref.keymap;
+  var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
+  return shortcut || description ? /*#__PURE__*/React.createElement(Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2rko1l7b _bfhk1v65 _ca0qidpf _n3tdidpf _19bvv77o _u5f3v77o _jqf61teg"]),
+    style: {
+      "--_1kd7x7o": ix("var(--ds-background-inverse-subtle, ".concat(N400, ")"))
+    }
+  }, shortcut)) : null;
+});

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

@@ -5,7 +5,7 @@
 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 { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent'; // ED-26865: use compiled EmojiPreviewComponent when migrating picker to compiled css
 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];

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

@@ -21,7 +21,8 @@ import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
-import EmojiActions from '../common/EmojiActions';
+import EmojiActions from '../common/EmojiActions'; // ED-26865: use compiled EmojiActions when migrating picker to compiled css
+
 import { emojiPickerList } from './styles';
 import { emojiPickerHeightOffset, scrollToRow as _scrollToRow } from './utils';
 import { VirtualList } from './VirtualList';

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

@@ -50,7 +50,8 @@ export var LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
         jsx("div", {
           css: emojiPickerSpinner
         }, jsx("div", null, jsx(Spinner, {
-          size: "medium"
+          size: "medium",
+          interactionName: "emoji-picker-loading-item-spinner"
         })))
       );
     });

package/dist/esm/components/typeahead/EmojiTypeAheadItem.js

@@ -17,7 +17,7 @@ import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent'; // ED-26864: use compiled EmojiPreviewComponent when migrating typeahead to compiled css
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
 import { typeAheadItem, selected as selectedStyles, typeAheadItemRow, typeaheadSelected } from './styles';
 var EmojiTypeAheadItemInternal = /*#__PURE__*/function (_PureComponent) {

package/dist/esm/components/typeahead/EmojiTypeAheadList.js

@@ -18,7 +18,7 @@ import { emojiTypeAheadMaxHeight } from '../../util/shared-styles';
 import { toEmojiId } from '../../util/type-helpers';
 import debug from '../../util/logger';
 import { actualMouseMove, mouseLocation } from '../../util/mouse';
-import Scrollable from '../common/Scrollable';
+import Scrollable from '../common/Scrollable'; // ED-26864: use compiled Scrollable when migrating typeahead to compiled css
 import EmojiItem from './EmojiTypeAheadItem';
 import { emojiTypeAheadSpinner, emojiTypeAheadSpinnerContainer, typeAheadEmpty, typeAheadList, typeAheadListContainer } from './styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -241,7 +241,8 @@ var EmojiTypeAheadList = /*#__PURE__*/function (_PureComponent) {
         }, jsx("div", {
           css: emojiTypeAheadSpinner
         }, jsx(Spinner, {
-          size: "medium"
+          size: "medium",
+          interactionName: "empji-type-ahead-list-spinner"
         })));
       } else {
         listBody = this.renderItems(emojis);

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

@@ -10,7 +10,7 @@ import { useState, memo, useEffect } from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { supportsUploadFeature } from '../../api/EmojiResource';
-import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
+import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker'; // ED-26866: use compiled EmojiUploadPicker when migrating uploader to compiled css
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 import { emojiUploadFooter, emojiUploadWidget } from './styles';

package/dist/esm/element.js

@@ -1,3 +1,10 @@
-export { default as EmojiPlaceholder } from './components/common/EmojiPlaceholder';
-export { default as Emoji } from './components/common/Emoji';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { default as CompiledEmojiPlaceholder } from './components/compiled/common/EmojiPlaceholder';
+import { default as EmotionEmojiPlaceholder } from './components/common/EmojiPlaceholder';
+var EmojiPlaceholder = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmojiPlaceholder, EmotionEmojiPlaceholder);
+export { EmojiPlaceholder };
+import { default as CompiledEmoji } from './components/compiled/common/Emoji';
+import { default as EmotionEmoji } from './components/common/Emoji';
+var Emoji = componentWithFG('platform_editor_css_migrate_emoji', CompiledEmoji, EmotionEmoji);
+export { Emoji };
 export { default as ResourcedEmoji } from './components/common/ResourcedEmoji';

package/dist/esm/index.js

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

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: "68.0.4"
+      packageVersion: "69.0.0"
     }, attributes)
   };
 };

package/dist/types/components/common/EmojiActions.d.ts

@@ -2,8 +2,8 @@
 import { jsx } from '@emotion/react';
 import { type WrappedComponentProps } from 'react-intl-next';
 import type { EmojiDescription, EmojiDescriptionWithVariations, Message, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../types';
-import { type OnDeleteEmoji } from '../common/EmojiDeletePreview';
-import { type OnUploadEmoji } from '../common/EmojiUploadPicker';
+import { type OnDeleteEmoji } from './EmojiDeletePreview';
+import { type OnUploadEmoji } from './EmojiUploadPicker';
 export interface Props {
     selectedTone?: ToneSelection;
     onToneSelected?: OnToneSelected;

package/dist/types/components/compiled/common/DeleteButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { type ButtonProps } from '@atlaskit/button/standard-button';
+/**
+ * Test id for wrapper Emoji delete button
+ */
+export declare const RENDER_EMOJI_DELETE_BUTTON_TESTID = "render-emoji-delete-button";
+declare const DeleteButton: (props: ButtonProps) => JSX.Element;
+export default DeleteButton;

package/dist/types/components/compiled/common/Emoji.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type EmojiDescription, type OnEmojiEvent } from '../../../types';
+export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMouseMove' | 'onFocus'> {
+    /**
+     * The emoji to render
+     */
+    emoji: EmojiDescription;
+    /**
+     * Show the emoji as selected
+     */
+    selected?: boolean;
+    /**
+     * Automatically show the emoji as selected based on mouse hover.
+     * CSS, fast, does not require a re-render, but selected state not
+     * externally controlled via props.
+     */
+    selectOnHover?: boolean;
+    /**
+     * Called when an emoji is selected
+     */
+    onSelected?: OnEmojiEvent;
+    /**
+     * Called when the mouse moves over the emoji.
+     */
+    onMouseMove?: OnEmojiEvent;
+    /**
+     * Called when the mouse moves over the emoji.
+     */
+    onFocus?: OnEmojiEvent;
+    /**
+     * Called when an emoji is deleted
+     */
+    onDelete?: OnEmojiEvent;
+    /**
+     * Callback for if an emoji image fails to load.
+     */
+    onLoadError?: OnEmojiEvent<HTMLImageElement>;
+    /**
+     * Callback for if an emoji image succesfully loads.
+     */
+    onLoadSuccess?: (emoji: EmojiDescription) => void;
+    /**
+     * Additional css classes, if required.
+     */
+    className?: string;
+    /**
+     * Show a tooltip on mouse hover.
+     */
+    showTooltip?: boolean;
+    /**
+     * Show a delete button on mouse hover
+     * Used only for custom emoji
+     */
+    showDelete?: boolean;
+    /**
+     * Fits emoji to height in pixels, keeping aspect ratio
+     */
+    fitToHeight?: number;
+    /**
+     * Indicates whether emoji is an interactive element (tab index and role) or just a view
+     */
+    shouldBeInteractive?: boolean;
+    /**
+     * Disables lazy load on images
+     */
+    disableLazyLoad?: boolean;
+    /**
+     * Auto Width takes the constraint of height and enables native scaling based on the emojis image.
+     * This is primarily used when rendering emojis for SSR as the component does not know the width and height
+     * at the time of the render. It overrides the emoji representations width with 'auto' on the images width attribute
+     *
+     * Used only for image based emojis
+     */
+    autoWidth?: boolean;
+    /**
+     * This should only be set when the emoji is being used in the Editor.
+     * Currently when set -- this prevents any aria labels being added.
+     * This is acceptable in Editor -- as it uses another technique to announce the emoji nodes.
+     */
+    editorEmoji?: true;
+}
+export declare const SpriteEmoji: (props: Props) => JSX.Element;
+export declare const ImageEmoji: (props: Props) => JSX.Element;
+interface EmojiNodeWrapperProps extends Props {
+    type: 'sprite' | 'image';
+}
+export declare const EmojiNodeWrapper: React.ForwardRefExoticComponent<EmojiNodeWrapperProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare const Emoji: (props: Props) => JSX.Element;
+export default Emoji;

package/dist/types/components/compiled/common/EmojiActions.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { type WrappedComponentProps } from 'react-intl-next';
+import type { EmojiDescription, EmojiDescriptionWithVariations, Message, OnToneSelected, OnToneSelectorCancelled, ToneSelection } from '../../../types';
+import { type OnDeleteEmoji } from './EmojiDeletePreview';
+import { type OnUploadEmoji } from './EmojiUploadPicker';
+export interface Props {
+    selectedTone?: ToneSelection;
+    onToneSelected?: OnToneSelected;
+    onToneSelectorCancelled?: OnToneSelectorCancelled;
+    toneEmoji?: EmojiDescriptionWithVariations;
+    uploading: boolean;
+    uploadEnabled: boolean;
+    emojiToDelete?: EmojiDescription;
+    initialUploadName?: string;
+    uploadErrorMessage?: Message;
+    onUploadCancelled: () => void;
+    onUploadEmoji: OnUploadEmoji;
+    onCloseDelete: () => void;
+    onDeleteEmoji: OnDeleteEmoji;
+    onFileChooserClicked?: () => void;
+    onOpenUpload: () => void;
+    query?: string;
+    onChange: (value: string) => void;
+    resultsCount?: number;
+}
+export declare const emojiActionsTestId = "emoji-actions";
+export declare const uploadEmojiTestId = "upload-emoji";
+type PropsWithWrappedComponentPropsType = Props & WrappedComponentProps;
+type EmojiActionsProps = PropsWithWrappedComponentPropsType;
+export declare const EmojiActions: (props: EmojiActionsProps) => JSX.Element;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/components/compiled/common/EmojiDeletePreview.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type WrappedComponentProps } from 'react-intl-next';
+import type { EmojiDescription } from '../../../types';
+export interface OnDeleteEmoji {
+    (emoji: EmojiDescription): Promise<boolean>;
+}
+export declare const emojiDeletePreviewTestId = "emoji-delete-preview";
+export interface Props {
+    emoji: EmojiDescription;
+    onDeleteEmoji: OnDeleteEmoji;
+    onCloseDelete: () => void;
+    errorMessage?: string;
+}
+export interface State {
+    loading: boolean;
+    error: boolean;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/components/compiled/common/EmojiErrorMessage.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { Message } from '../../../types';
+export type ErrorStyle = 'chooseFile' | 'delete' | 'preview';
+export interface Props {
+    message: Message;
+    tooltip?: boolean;
+    errorStyle: ErrorStyle;
+}
+export declare const emojiErrorScreenreaderTestId = "emoji-error-screenreader-message";
+export declare const emojiErrorMessageTestId = "emoji-error-message";
+export declare const emojiErrorMessageTooltipTestId = "emoji-error-message-tooltip";
+export declare const emojiErrorIconTestId = "emoji-error-icon";
+declare const EmojiErrorMessage: (props: Props) => JSX.Element;
+export default EmojiErrorMessage;

package/dist/types/components/compiled/common/EmojiFallback.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { type Props as EmojiProps } from './Emoji';
+export declare const EmojiFallback: (props: React.PropsWithChildren<EmojiProps>) => JSX.Element;
+export default EmojiFallback;

package/dist/types/components/compiled/common/EmojiPlaceholder.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { EmojiImageRepresentation } from '../../../types';
+export interface Props {
+    shortName: string;
+    size?: number;
+    showTooltip?: boolean;
+    representation?: EmojiImageRepresentation;
+    loading?: boolean;
+}
+export declare const emojiPlaceholderTestId: (shortName: string) => string;
+declare const EmojiPlaceholder: (props: Props) => JSX.Element;
+export default EmojiPlaceholder;

package/dist/types/components/compiled/common/EmojiPreviewComponent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { EmojiDescription } from '../../../types';
+type Props = {
+    emoji: EmojiDescription;
+};
+export declare const EmojiPreviewComponent: ({ emoji }: Props) => JSX.Element;
+export {};

package/dist/types/components/compiled/common/EmojiRadioButton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { EmojiDescription } from '../../../types';
+export interface Props {
+    emoji: EmojiDescription;
+    onSelected?: () => void;
+    selectOnHover?: boolean;
+    ariaLabelText?: string;
+    defaultChecked?: boolean;
+}
+export declare const EmojiRadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>>;
+export default _default;

package/dist/types/components/compiled/common/EmojiUploadPicker.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type WrappedComponentProps } from 'react-intl-next';
+import type { EmojiUpload, Message } from '../../../types';
+export interface OnUploadEmoji {
+    (upload: EmojiUpload, retry: boolean, onSuccessHandler?: () => void): void;
+}
+export declare const uploadEmojiNameInputTestId = "upload-emoji-name-input";
+export declare const uploadEmojiComponentTestId = "upload-emoji-component";
+export declare const cancelEmojiUploadPickerTestId = "cancel-emoji-upload-picker";
+export interface Props {
+    onUploadEmoji: OnUploadEmoji;
+    onUploadCancelled: () => void;
+    onFileChooserClicked?: () => void;
+    errorMessage?: Message;
+    initialUploadName?: string;
+}
+declare const EmojiUploadPickerComponent: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps>;
+};
+export default EmojiUploadPickerComponent;

package/dist/types/components/compiled/common/EmojiUploadPreview.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { type WrappedComponentProps } from 'react-intl-next';
+import type { Message } from '../../../types';
+import { UploadStatus } from '../../common/internal-types';
+export interface EmojiUploadPreviewProps {
+    name: string;
+    previewImage: string;
+    uploadStatus?: UploadStatus;
+    errorMessage?: Message;
+    onUploadCancelled: () => void;
+    onAddEmoji: () => void;
+}
+export declare const uploadPreviewTestId = "upload-preview";
+export declare const cancelUploadButtonTestId = "cancel-upload-button";
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<EmojiUploadPreviewProps & WrappedComponentProps>> & {
+    WrappedComponent: import("react").ComponentType<EmojiUploadPreviewProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/components/compiled/common/RetryableButton.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface Props {
+    label: string;
+    appearance: string;
+    error: boolean;
+    onSubmit: () => void;
+    loading: boolean;
+    ariaDescribedBy?: string;
+    ariaLabelledBy?: string;
+}
+export declare const retryUploadButtonTestId = "retry-upload-button";
+export declare const uploadEmojiButtonTestId = "upload-emoji-button";
+declare const RetryableButton: (props: Props) => JSX.Element;
+export default RetryableButton;

package/dist/types/components/compiled/common/Scrollable.d.ts

@@ -0,0 +1,19 @@
+import { type MouseEventHandler, PureComponent, type ReactNode, type UIEvent } from 'react';
+export interface OnScroll {
+    (element: Element, event: UIEvent<any>): void;
+}
+export interface Props {
+    className?: string;
+    maxHeight?: string;
+    children?: ReactNode;
+    onScroll?: OnScroll;
+    onMouseLeave?: MouseEventHandler<any>;
+}
+export default class Scrollable extends PureComponent<Props, {}> {
+    private scrollableDiv;
+    reveal: (child: HTMLElement, forceToTop?: boolean) => void;
+    scrollToBottom: () => void;
+    private handleScroll;
+    private handleRef;
+    render(): JSX.Element;
+}

package/dist/types/components/compiled/common/TonePreviewButton.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { EmojiDescription } from '../../../types';
+export declare const tonePreviewTestId = "tone-preview";
+export interface Props {
+    emoji: EmojiDescription;
+    isVisible?: boolean;
+    onSelected?: () => void;
+    selectOnHover?: boolean;
+    ariaLabelText?: string;
+    ariaExpanded?: boolean;
+}
+export declare const TonePreviewButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>>;
+export default _default;

package/dist/types/components/compiled/common/ToneSelector.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { EmojiDescriptionWithVariations, OnToneSelected, ToneSelection } from '../../../types';
+import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+export interface Props {
+    emoji: EmojiDescriptionWithVariations;
+    isVisible: boolean;
+    onToneSelected: OnToneSelected;
+    onToneClose?: () => void;
+    selectedTone?: ToneSelection;
+}
+export declare const toneSelectorTestId = "tone-selector";
+type PropsWithAnalyticsEventsPropsType = Props & WithAnalyticsEventsProps;
+export declare const ToneSelectorInternal: (props: PropsWithAnalyticsEventsPropsType) => JSX.Element;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>>;
+export default _default;