@atlaskit/emoji 68.0.4 → 69.0.0

package/dist/es2019/components/compiled/common/EmojiUploadPicker.js

@@ -0,0 +1,276 @@
+/* EmojiUploadPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiUploadPicker.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useLayoutEffect, useState, useRef, memo, useCallback } from 'react';
+import { N300 } from '@atlaskit/theme/colors';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import TextField from '@atlaskit/textfield';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+import AkButton from '@atlaskit/button/standard-button';
+import { Text } from '@atlaskit/primitives';
+import FocusLock from 'react-focus-lock';
+import * as ImageUtil from '../../../util/image';
+import debug from '../../../util/logger';
+import { messages } from '../../i18n';
+import EmojiErrorMessage from './EmojiErrorMessage';
+import EmojiUploadPreview from './EmojiUploadPreview';
+import FileChooser from '../../common/FileChooser';
+import { UploadStatus } from '../../common/internal-types';
+const closeEmojiUploadButton = null;
+const emojiUpload = null;
+const emojiUploadTop = null;
+const headingH5 = null;
+const uploadChooseFileEmojiName = null;
+const uploadChooseFileMessage = null;
+const uploadChooseFileRow = null;
+export const uploadEmojiNameInputTestId = 'upload-emoji-name-input';
+export const uploadEmojiComponentTestId = 'upload-emoji-component';
+export const cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
+const disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
+const sanitizeName = name => {
+  // prevent / replace certain characters, allow others
+  disallowedReplacementsMap.forEach((replaceWith, exclude) => {
+    name = name.split(exclude).join(replaceWith);
+  });
+  return name;
+};
+const maxNameLength = 50;
+const toEmojiName = uploadName => {
+  const name = uploadName.split('_').join(' ');
+  return `${name.substr(0, 1).toLocaleUpperCase()}${name.substr(1)}`;
+};
+const ChooseEmojiFile = /*#__PURE__*/memo(props => {
+  const {
+    name = '',
+    onChooseFile,
+    onClick,
+    onNameChange,
+    onUploadCancelled,
+    errorMessage,
+    intl
+  } = props;
+  const {
+    formatMessage
+  } = intl;
+  const disableChooser = !name;
+  const fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id';
+  const inputRef = useRef(null);
+  const onKeyDownHandler = useCallback(event => {
+    if (event.key === 'Escape') {
+      onUploadCancelled();
+    }
+  }, [onUploadCancelled]);
+  useLayoutEffect(() => {
+    requestAnimationFrame(() => {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    });
+  }, []);
+  const cancelLabel = formatMessage(messages.cancelLabel);
+  const emojiPlaceholder = formatMessage(messages.emojiPlaceholder);
+  const emojiNameAriaLabel = formatMessage(messages.emojiNameAriaLabel);
+  const emojiChooseFileTitle = formatMessage(messages.emojiChooseFileTitle);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": uploadEmojiComponentTestId,
+    className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _4t3icae7 _1e0c1txw _2lx21bp4 _1bah1b1v"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_11c8dcr7 _n3td1v6z _1e0c1txw _1bah1yb4 _4cvresu3"])
+  }, /*#__PURE__*/React.createElement("label", {
+    htmlFor: "new-emoji-name-input",
+    className: ax(["_1w901n3s", "_fqoxdcr7 _12r21pd9"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw"])
+  }, /*#__PURE__*/React.createElement(AkButton, {
+    onClick: onUploadCancelled,
+    "aria-label": cancelLabel,
+    appearance: "subtle",
+    spacing: "none",
+    shouldFitContainer: true,
+    testId: cancelEmojiUploadPickerTestId
+  }, /*#__PURE__*/React.createElement(CrossIcon, {
+    color: "currentColor",
+    LEGACY_size: "small",
+    label: cancelLabel
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _1bah1yb4 _n3td1v6z"])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _2hwx14y2 _1rwq1j28 _scffidpf _xmji1r31 _gxxuglyw _34ir1o36 _coc6glyw _9bj2glyw"])
+  }, /*#__PURE__*/React.createElement(TextField, {
+    placeholder: emojiPlaceholder,
+    "aria-label": emojiNameAriaLabel,
+    maxLength: maxNameLength,
+    onChange: onNameChange,
+    onKeyDown: onKeyDownHandler,
+    value: name,
+    isCompact: true,
+    autoFocus: true,
+    testId: uploadEmojiNameInputTestId,
+    ref: inputRef,
+    id: "new-emoji-name-input",
+    "aria-required": true
+  })), /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, () => /*#__PURE__*/React.createElement(FileChooser, {
+    label: emojiChooseFileTitle,
+    onChange: onChooseFile,
+    onClick: onClick,
+    accept: "image/png,image/jpeg,image/gif",
+    ariaDescribedBy: fileChooserButtonDescriptionId,
+    isDisabled: disableChooser
+  })))), /*#__PURE__*/React.createElement("div", {
+    id: fileChooserButtonDescriptionId
+  }, !errorMessage ? /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    size: "small"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+    errorStyle: "chooseFile",
+    message: errorMessage
+  })));
+});
+const EmojiUploadPicker = props => {
+  var _document$activeEleme;
+  const {
+    errorMessage,
+    initialUploadName,
+    onUploadEmoji,
+    onFileChooserClicked,
+    onUploadCancelled,
+    intl
+  } = props;
+  const [uploadStatus, setUploadStatus] = useState(errorMessage ? UploadStatus.Error : UploadStatus.Waiting);
+  const [chooseEmojiErrorMessage, setChooseEmojiErrorMessage] = useState();
+  const [name, setName] = useState(initialUploadName && sanitizeName(initialUploadName));
+  const [filename, setFilename] = useState();
+  const [previewImage, setPreviewImage] = useState();
+  // document is undefined during ssr rendering and throws an error
+  const lastFocusedElementId = useRef(typeof document !== 'undefined' ? (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id : '');
+  useEffect(() => {
+    if (errorMessage) {
+      setUploadStatus(UploadStatus.Error);
+      return;
+    } else {
+      if (uploadStatus === UploadStatus.Error) {
+        setUploadStatus(UploadStatus.Waiting);
+      }
+    }
+  }, [errorMessage, uploadStatus]);
+  useEffect(() => {
+    if (initialUploadName) {
+      setName(sanitizeName(initialUploadName));
+    }
+  }, [initialUploadName]);
+  const clearUploadPicker = useCallback(() => {
+    setName(undefined);
+    setPreviewImage(undefined);
+    setUploadStatus(UploadStatus.Waiting);
+  }, []);
+  const onNameChange = useCallback(event => {
+    let newName = sanitizeName(event.target.value);
+    if (name !== newName) {
+      setName(newName);
+    }
+  }, [name]);
+  const onAddEmoji = useCallback(() => {
+    if (uploadStatus === UploadStatus.Uploading) {
+      return;
+    }
+    if (filename && name && previewImage) {
+      const notifyUpload = size => {
+        const {
+          width,
+          height
+        } = size;
+        setUploadStatus(UploadStatus.Uploading);
+        onUploadEmoji({
+          name: toEmojiName(name),
+          shortName: `:${name}:`,
+          filename,
+          dataURL: previewImage,
+          width,
+          height
+        }, uploadStatus === UploadStatus.Error, clearUploadPicker);
+      };
+      ImageUtil.getNaturalImageSize(previewImage).then(size => {
+        notifyUpload(size);
+      }).catch(error => {
+        debug('getNaturalImageSize error', error);
+        // Just set arbitrary size, worse case is it may render
+        // in wrong aspect ratio in some circumstances.
+        notifyUpload({
+          width: 32,
+          height: 32
+        });
+      });
+    }
+  }, [clearUploadPicker, filename, name, onUploadEmoji, previewImage, uploadStatus]);
+  const cancelChooseFile = useCallback(() => {
+    setPreviewImage(undefined);
+  }, []);
+  const errorOnUpload = useCallback(event => {
+    debug('File load error: ', event);
+    setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUploadFailed));
+    cancelChooseFile();
+  }, [cancelChooseFile]);
+  const onFileLoad = useCallback(file => async f => {
+    try {
+      setFilename(file.name);
+      await ImageUtil.parseImage(f.target.result);
+      setPreviewImage(f.target.result);
+    } catch {
+      setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiInvalidImage));
+      cancelChooseFile();
+    }
+  }, [cancelChooseFile]);
+  const onChooseFile = useCallback(event => {
+    const files = event.target.files;
+    if (files.length) {
+      const reader = new FileReader();
+      const file = files[0];
+      if (ImageUtil.hasFileExceededSize(file)) {
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageTooBig));
+        cancelChooseFile();
+        return;
+      }
+      reader.addEventListener('load', onFileLoad(file));
+      reader.addEventListener('abort', errorOnUpload);
+      reader.addEventListener('error', errorOnUpload);
+      reader.readAsDataURL(file);
+    } else {
+      cancelChooseFile();
+    }
+  }, [cancelChooseFile, errorOnUpload, onFileLoad]);
+  const cancelUpload = useCallback(() => {
+    clearUploadPicker();
+    onUploadCancelled();
+
+    // using setTimeout here to allow the UI to update before setting focus
+    setTimeout(lastFocus => {
+      if (lastFocus) {
+        var _document$getElementB;
+        (_document$getElementB = document.getElementById(lastFocus)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.focus();
+      }
+    }, 0, lastFocusedElementId.current);
+  }, [clearUploadPicker, onUploadCancelled]);
+  const onChooseFileClicked = () => {
+    onFileChooserClicked && onFileChooserClicked();
+  };
+  return /*#__PURE__*/React.createElement(FocusLock, {
+    noFocusGuards: true
+  }, name && previewImage ? /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+    errorMessage: errorMessage,
+    name: name,
+    onAddEmoji: onAddEmoji,
+    onUploadCancelled: cancelUpload,
+    previewImage: previewImage,
+    uploadStatus: uploadStatus
+  }) : /*#__PURE__*/React.createElement(ChooseEmojiFile, {
+    name: name,
+    onChooseFile: onChooseFile,
+    onClick: onChooseFileClicked,
+    onNameChange: onNameChange,
+    onUploadCancelled: cancelUpload,
+    errorMessage: chooseEmojiErrorMessage,
+    intl: intl
+  }));
+};
+const EmojiUploadPickerComponent = injectIntl( /*#__PURE__*/memo(EmojiUploadPicker));
+export default EmojiUploadPickerComponent;

package/dist/es2019/components/compiled/common/EmojiUploadPreview.compiled.css

@@ -0,0 +1,20 @@
+
+._1fztdcr7 h5{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._19bv19bv{padding-left:10px}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19l31ylp img{max-height:40px}
+._19l3gktf img{max-height:20px}
+._1bah1yb4{justify-content:space-between}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i53f4{height:75pt}
+._avw21b66 h5{padding-bottom:var(--ds-space-050,4px)}
+._bfhk1s4m{background-color:var(--ds-background-neutral,#f4f5f7)}
+._ca0q19bv{padding-top:10px}
+._jl6w1n3s h5{color:var(--ds-text-subtle,#5e6c84)}
+._n3td19bv{padding-bottom:10px}
+._rtys12am img{max-width:50px}
+._rtys53f4 img{max-width:75pt}
+._u5f319bv{padding-right:10px}

package/dist/es2019/components/compiled/common/EmojiUploadPreview.js

@@ -0,0 +1,96 @@
+/* EmojiUploadPreview.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./EmojiUploadPreview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { PureComponent } from 'react';
+import { N20, N300 } from '@atlaskit/theme/colors';
+import AkButton from '@atlaskit/button/standard-button';
+import Heading from '@atlaskit/heading';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { customCategory } from '../../../util/constants';
+import { messages } from '../../i18n';
+import Emoji from './Emoji';
+import EmojiErrorMessage from './EmojiErrorMessage';
+import { UploadStatus } from '../../common/internal-types';
+import RetryableButton from './RetryableButton';
+const bigEmojiPreview = null;
+const uploadAddRow = null;
+const uploadPreview = null;
+const uploadPreviewFooter = null;
+const uploadPreviewText = null;
+export const uploadPreviewTestId = 'upload-preview';
+export const cancelUploadButtonTestId = 'cancel-upload-button';
+const addEmojiPreviewDescriptionId = 'fabric.emoji.preview.description.id';
+class EmojiUploadPreview extends PureComponent {
+  render() {
+    const {
+      name,
+      previewImage,
+      uploadStatus,
+      errorMessage,
+      onAddEmoji,
+      onUploadCancelled,
+      intl
+    } = this.props;
+    const {
+      formatMessage
+    } = intl;
+    let emojiComponent;
+    if (previewImage) {
+      const emoji = {
+        shortName: `:${name}:`,
+        type: customCategory,
+        category: customCategory,
+        representation: {
+          imagePath: previewImage,
+          width: 24,
+          height: 24
+        },
+        searchable: true
+      };
+      emojiComponent = /*#__PURE__*/React.createElement(Emoji, {
+        emoji: emoji
+      });
+    }
+    const uploading = uploadStatus === UploadStatus.Uploading;
+    const retryableButtonLabel = errorMessage ? formatMessage(messages.retryLabel) : formatMessage(messages.addEmojiLabel);
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx21bp4 _4t3i53f4"])
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-testid": uploadPreviewTestId,
+      className: ax(["_2rkosqtm _ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _1bah1yb4 _4cvr1h6o _bfhk1s4m"])
+    }, /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1fztdcr7 _jl6w1n3s _avw21b66 _19l3gktf _rtys12am"])
+    }, /*#__PURE__*/React.createElement(Heading, {
+      size: "xsmall"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement("div", {
+      id: addEmojiPreviewDescriptionId
+    }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.emojiPreview, {
+      values: {
+        emoji: emojiComponent
+      }
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_19bv1b66 _19l31ylp _rtys53f4"])
+    }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1e0c1txw _1bahesu3 _4cvr1h6o _ca0q19bv"])
+    }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+      errorStyle: "preview",
+      message: errorMessage,
+      tooltip: true
+    }) : null, /*#__PURE__*/React.createElement(RetryableButton, {
+      label: retryableButtonLabel,
+      onSubmit: onAddEmoji,
+      appearance: "primary",
+      loading: uploading,
+      error: !!errorMessage,
+      ariaDescribedBy: addEmojiPreviewDescriptionId
+    }), /*#__PURE__*/React.createElement(AkButton, {
+      onClick: onUploadCancelled,
+      appearance: "subtle",
+      isDisabled: uploading,
+      testId: cancelUploadButtonTestId
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel))));
+  }
+}
+export default injectIntl(EmojiUploadPreview);

package/dist/es2019/components/compiled/common/RetryableButton.compiled.css

@@ -0,0 +1,2 @@
+._18u019bv{margin-left:10px}
+._2hwx19bv{margin-right:10px}

package/dist/es2019/components/compiled/common/RetryableButton.js

@@ -0,0 +1,67 @@
+/* RetryableButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./RetryableButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { FormattedMessage } from 'react-intl-next';
+import AkButton from '@atlaskit/button/new';
+import Spinner from '@atlaskit/spinner';
+import { Box } from '@atlaskit/primitives/compiled';
+import { messages } from '../../i18n';
+const buttonSpinner = null;
+export const retryUploadButtonTestId = 'retry-upload-button';
+export const uploadEmojiButtonTestId = 'upload-emoji-button';
+const LoadingSpinner = () => {
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_2hwx19bv _18u019bv"])
+  }, /*#__PURE__*/React.createElement(Spinner, null));
+};
+const RetryButton = props => {
+  const {
+    onSubmit,
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = props;
+  return /*#__PURE__*/React.createElement(FormattedMessage, messages.retryLabel, retryLabel => /*#__PURE__*/React.createElement(Box, {
+    paddingInlineEnd: "space.050"
+  }, /*#__PURE__*/React.createElement(AkButton, {
+    appearance: "warning",
+    onClick: onSubmit,
+    testId: retryUploadButtonTestId,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    autoFocus: true
+  }, retryLabel)));
+};
+const UploadButton = props => {
+  const {
+    appearance,
+    onSubmit,
+    label,
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    paddingInlineEnd: "space.050"
+  }, /*#__PURE__*/React.createElement(AkButton, {
+    appearance: appearance,
+    onClick: onSubmit,
+    testId: uploadEmojiButtonTestId,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    autoFocus: true
+  }, label));
+};
+const RetryableButton = props => {
+  const {
+    loading,
+    error
+  } = props;
+  if (loading) {
+    return /*#__PURE__*/React.createElement(LoadingSpinner, null);
+  }
+  if (error) {
+    return /*#__PURE__*/React.createElement(RetryButton, props);
+  }
+  return /*#__PURE__*/React.createElement(UploadButton, props);
+};
+export default RetryableButton;

package/dist/es2019/components/compiled/common/Scrollable.compiled.css

@@ -0,0 +1,13 @@
+
+._19it1l1c{border:1px solid var(--ds-border,#fff)}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._18m91wug{overflow-y:auto}
+._18u0idpf{margin-left:0}
+._19bvidpf{padding-left:0}
+._19pkidpf{margin-top:0}
+._1e0c1ule{display:block}
+._1reo15vq{overflow-x:hidden}
+._2hwxidpf{margin-right:0}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._otyridpf{margin-bottom:0}
+._u5f3idpf{padding-right:0}

package/dist/es2019/components/compiled/common/Scrollable.js

@@ -0,0 +1,69 @@
+/* Scrollable.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Scrollable.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+// FIXME - FAB-1732 looking at making a shared component for this
+
+import { PureComponent } from 'react';
+const emojiScrollable = null;
+export default class Scrollable extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "scrollableDiv", null);
+    // API
+    _defineProperty(this, "reveal", (child, forceToTop) => {
+      if (child && this.scrollableDiv) {
+        // Not using Element.scrollIntoView as it scrolls even to top/bottom of view even if
+        // already visible
+        const scrollableRect = this.scrollableDiv.getBoundingClientRect();
+        const elementRect = child.getBoundingClientRect();
+        if (forceToTop || elementRect.top < scrollableRect.top) {
+          this.scrollableDiv.scrollTop += elementRect.top - scrollableRect.top;
+        } else if (elementRect.bottom > scrollableRect.bottom) {
+          this.scrollableDiv.scrollTop += elementRect.bottom - scrollableRect.bottom;
+        }
+      }
+    });
+    _defineProperty(this, "scrollToBottom", () => {
+      if (this.scrollableDiv) {
+        this.scrollableDiv.scrollTop = this.scrollableDiv.scrollHeight;
+      }
+    });
+    _defineProperty(this, "handleScroll", event => {
+      const sampleOffset = 10;
+      let firstElement;
+      if (this.scrollableDiv) {
+        const scrollableRect = this.scrollableDiv.getBoundingClientRect();
+        firstElement = document.elementFromPoint(scrollableRect.left + sampleOffset, scrollableRect.top + sampleOffset);
+      }
+      if (this.props.onScroll && firstElement) {
+        this.props.onScroll(firstElement, event);
+      }
+    });
+    _defineProperty(this, "handleRef", ref => {
+      this.scrollableDiv = ref;
+    });
+  }
+  render() {
+    const {
+      children,
+      className,
+      maxHeight,
+      onMouseLeave
+    } = this.props;
+    const style = maxHeight ? {
+      maxHeight
+    } : {};
+    return /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ax(["_19it1l1c _2rkosqtm _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1e0c1ule _1reo15vq _18m91wug", `emoji-scrollable ${className}`]),
+      onMouseLeave: onMouseLeave,
+      onScroll: this.handleScroll,
+      ref: this.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
+      style: style
+    }, children);
+  }
+}

package/dist/es2019/components/compiled/common/TonePreviewButton.compiled.css

@@ -0,0 +1,32 @@
+
+._19itidpf{border:0}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._11bcidpf::-moz-focus-inner{border-width:0}
+._dqozglyw::-moz-focus-inner{border-style:none}
+._19bvidpf{padding-left:0}
+._1at812x7>span{padding-top:var(--ds-space-075,6px)}
+._1cjo12x7>span{padding-bottom:var(--ds-space-075,6px)}
+._1cx6idpf::-moz-focus-inner{padding-right:0}
+._1e0c1o8l{display:inline-block}
+._1e0cglyw{display:none}
+._1i911tcg>span>img{height:24px}
+._1s3c1tcg>span>.emoji-common-emoji-sprite{width:24px}
+._1ye71tcg>span>img{width:24px}
+._1yg612x7>span{padding-left:var(--ds-space-075,6px)}
+._2ewlidpf::-moz-focus-inner{padding-left:0}
+._3um015vq{visibility:hidden}
+._80omtlke{cursor:pointer}
+._bfhk1j28{background-color:transparent}
+._ca0qidpf{padding-top:0}
+._hjaq12x7>span{padding-right:var(--ds-space-075,6px)}
+._hlt21tcg>span>.emoji-common-emoji-sprite{height:24px}
+._kqswh2mm{position:relative}
+._lev4idpf::-moz-focus-inner{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._tyukidpf::-moz-focus-inner{padding-bottom:0}
+._tzy4idpf{opacity:0}
+._u5f3idpf{padding-right:0}
+._1hvw1o36:focus{outline-width:medium}
+._491113zc:focus{transition-duration:0s,.2s}
+._49pcglyw:focus{outline-style:none}
+._7ehi1n2i:focus{box-shadow:0 0 0 2px var(--ds-border-focused,#4c9aff)}
+._nt751r31:focus{outline-color:currentColor}

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

@@ -0,0 +1,41 @@
+/* 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 const tonePreviewTestId = 'tone-preview';
+const emojiButton = null;
+const hidden = null;
+export const TonePreviewButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    emoji,
+    selectOnHover,
+    ariaLabelText,
+    ariaExpanded,
+    onSelected,
+    isVisible = true
+  } = props;
+  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
+    ,
+    style: {
+      overflow: 'hidden'
+    },
+    "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 _7ehi1n2i _491113zc", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, /*#__PURE__*/React.createElement(Emoji, {
+    emoji: emoji,
+    selectOnHover: selectOnHover,
+    shouldBeInteractive: false,
+    "aria-hidden": true
+  }));
+});
+export default /*#__PURE__*/memo(TonePreviewButton);

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

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