@atlaskit/emoji 65.0.0 → 65.2.0

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

@@ -1,6 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { PureComponent } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
 const getTargetNode = target => {
@@ -12,140 +10,122 @@ const getTargetNode = target => {
   return target;
 };
 
-/*
- * Simple implementation of popup while waiting for ak-inline-dialog
- */
-export default class Popup extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "debounced", null);
-
-    _defineProperty(this, "handleResize", () => {
-      if (this.debounced) {
-        clearTimeout(this.debounced);
-        this.debounced = null;
-      }
-
-      if (typeof window === 'undefined') {
-        return;
-      } // Timeout set to 30ms as to not throttle IE11
-
-
-      this.debounced = window.setTimeout(() => {
-        this.applyAbsolutePosition();
-        this.debounced = null;
-      }, 30);
-    });
-  }
-
-  componentDidMount() {
-    this.popup = document.createElement('div');
-    document.body.appendChild(this.popup);
-    this.popup.style.position = 'absolute';
-
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', this.handleResize);
-    }
-
-    this.applyAbsolutePosition();
-    this.renderContent();
-  }
-
-  componentDidUpdate() {
-    this.applyAbsolutePosition();
-    this.renderContent();
-  }
-
-  componentWillUnmount() {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    window.removeEventListener('resize', this.handleResize);
-
-    if (this.popup) {
-      ReactDOM.unmountComponentAtNode(this.popup);
-      document.body.removeChild(this.popup);
-    }
-  } // Internal
-
-
-  applyBelowPosition() {
-    const targetNode = getTargetNode(this.props.target);
-
-    if (targetNode && this.popup) {
+const Popup = props => {
+  const {
+    relativePosition = 'auto',
+    offsetX = 0,
+    offsetY = 0,
+    zIndex = 9,
+    target,
+    children
+  } = props;
+  const popup = useRef();
+  const [debounced, setDebounced] = useState(null);
+  const applyBelowPosition = useCallback(() => {
+    const targetNode = getTargetNode(target);
+
+    if (targetNode && popup.current) {
       const box = targetNode.getBoundingClientRect();
-      const top = box.bottom + (this.props.offsetY || 0);
-      const left = box.left + (this.props.offsetX || 0);
-      this.popup.style.top = `${top}px`;
-      this.popup.style.bottom = '';
-      this.popup.style.left = `${left}px`;
+      const top = box.bottom + (offsetY || 0);
+      const left = box.left + (offsetX || 0);
+      popup.current.style.top = `${top}px`;
+      popup.current.style.bottom = '';
+      popup.current.style.left = `${left}px`;
     }
-  }
-
-  applyAbovePosition() {
+  }, [offsetX, offsetY, target]);
+  const applyAbovePosition = useCallback(() => {
     if (typeof window === 'undefined') {
       return;
     }
 
-    const targetNode = getTargetNode(this.props.target);
+    const targetNode = getTargetNode(target);
 
-    if (targetNode && this.popup) {
+    if (targetNode && popup.current) {
       const box = targetNode.getBoundingClientRect();
-      const bottom = window.innerHeight - box.top + (this.props.offsetY || 0);
-      const left = box.left + (this.props.offsetX || 0);
-      this.popup.style.top = '';
-      this.popup.style.bottom = `${bottom}px`;
-      this.popup.style.left = `${left}px`;
+      const bottom = window.innerHeight - box.top + (offsetY || 0);
+      const left = box.left + (offsetX || 0);
+      popup.current.style.top = '';
+      popup.current.style.bottom = `${bottom}px`;
+      popup.current.style.left = `${left}px`;
     }
-  }
-
-  applyAbsolutePosition() {
+  }, [offsetX, offsetY, target]);
+  const applyAbsolutePosition = useCallback(() => {
     if (typeof window === 'undefined') {
       return;
     }
 
-    if (this.props.relativePosition === 'above') {
-      this.applyAbovePosition();
-    } else if (this.props.relativePosition === 'below') {
-      this.applyBelowPosition();
+    if (relativePosition === 'above') {
+      applyAbovePosition();
+    } else if (relativePosition === 'below') {
+      applyBelowPosition();
     } else {
-      const targetNode = getTargetNode(this.props.target);
+      const targetNode = getTargetNode(target);
 
       if (targetNode) {
         const box = targetNode.getBoundingClientRect();
         const viewPortHeight = window.innerHeight;
 
         if (box.top < viewPortHeight / 2) {
-          this.applyBelowPosition();
+          applyBelowPosition();
         } else {
-          this.applyAbovePosition();
+          applyAbovePosition();
         }
       }
     }
 
-    if (this.props.zIndex && this.popup) {
-      this.popup.style.zIndex = `${this.props.zIndex}`;
+    if (zIndex && popup.current) {
+      popup.current.style.zIndex = `${zIndex}`;
+    }
+  }, [applyAbovePosition, applyBelowPosition, relativePosition, target, zIndex]);
+  const handleResize = useCallback(() => {
+    if (debounced) {
+      clearTimeout(debounced);
+      setDebounced(null);
     }
-  }
 
-  renderContent() {
-    if (this.popup) {
-      ReactDOM.render(this.props.children, this.popup);
+    if (typeof window === 'undefined') {
+      return;
+    } // Timeout set to 30ms as to not throttle IE11
+
+
+    const debounceId = window.setTimeout(() => {
+      applyAbsolutePosition();
+      setDebounced(null);
+    }, 30);
+    setDebounced(debounceId);
+  }, [applyAbsolutePosition, debounced]);
+  const renderPopup = useCallback(() => {
+    if (!popup.current) {
+      return;
     }
-  }
 
-  render() {
-    // inline placeholder element for react to render inplace
-    return /*#__PURE__*/React.createElement("div", null);
-  }
+    ReactDOM.render(children, popup.current);
+  }, [children]);
+  useEffect(() => {
+    popup.current = document.createElement('div');
+    document.body.appendChild(popup.current);
+    popup.current.style.position = 'absolute';
 
-}
+    if (typeof window !== 'undefined') {
+      window.addEventListener('resize', handleResize);
+    }
+
+    applyAbsolutePosition();
+    renderPopup();
+    return () => {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      window.removeEventListener('resize', handleResize);
+
+      if (popup.current) {
+        ReactDOM.unmountComponentAtNode(popup.current);
+        document.body.removeChild(popup.current);
+      }
+    };
+  }, [applyAbsolutePosition, handleResize, renderPopup]);
+  return /*#__PURE__*/React.createElement("div", null);
+};
 
-_defineProperty(Popup, "defaultProps", {
-  relativePosition: 'auto',
-  offsetX: 0,
-  offsetY: 0,
-  zIndex: 0
-});
+export default Popup;

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

@@ -20,11 +20,11 @@ var ResourcedEmojiComponentRenderStatesEnum;
 export const ResourcedEmojiComponent = ({
   emojiProvider,
   emojiId,
-  showTooltip,
-  customFallback,
+  showTooltip = false,
+  customFallback = undefined,
   fitToHeight = defaultEmojiHeight,
   optimistic = false,
-  optimisticImageURL
+  optimisticImageURL = undefined
 }) => {
   const {
     shortName,
@@ -170,4 +170,5 @@ export const ResourcedEmojiComponent = ({
     showTooltip: showTooltip,
     fitToHeight: fitToHeight
   })));
-};
+};
+export default ResourcedEmojiComponent;

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

@@ -2,46 +2,55 @@
 import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
-import { Component } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../i18n';
 import { buttonSpinner, uploadEmojiButton, uploadRetryButton } from './styles';
-export default class RetryableButton extends Component {
-  constructor(props) {
-    super(props);
-  }
 
-  renderLoading() {
-    return jsx("span", {
-      css: buttonSpinner
-    }, jsx(Spinner, null));
-  }
+const LoadingSpinner = () => {
+  return jsx("span", {
+    css: buttonSpinner
+  }, jsx(Spinner, null));
+};
+
+const RetryButton = props => {
+  const {
+    onSubmit
+  } = props;
+  return jsx(FormattedMessage, messages.retryLabel, retryLabel => jsx(AkButton, {
+    css: uploadRetryButton,
+    appearance: "warning",
+    onClick: onSubmit
+  }, retryLabel));
+};
 
-  renderRetry() {
-    const {
-      loading,
-      onSubmit
-    } = this.props;
-    return loading ? this.renderLoading() : jsx(FormattedMessage, messages.retryLabel, retryLabel => jsx(AkButton, {
-      css: uploadRetryButton,
-      appearance: "warning",
-      onClick: onSubmit
-    }, retryLabel));
+const UploadButton = props => {
+  const {
+    appearance,
+    onSubmit,
+    label
+  } = props;
+  return jsx(AkButton, {
+    css: uploadEmojiButton,
+    appearance: appearance,
+    onClick: onSubmit
+  }, label);
+};
+
+const RetryableButton = props => {
+  const {
+    loading,
+    error
+  } = props;
+
+  if (loading) {
+    return jsx(LoadingSpinner, null);
   }
 
-  render() {
-    const {
-      loading,
-      error,
-      appearance,
-      onSubmit,
-      label
-    } = this.props;
-    return error ? this.renderRetry() : loading ? this.renderLoading() : jsx(AkButton, {
-      css: uploadEmojiButton,
-      appearance: appearance,
-      onClick: onSubmit
-    }, label);
+  if (error) {
+    return jsx(RetryButton, props);
   }
 
-}
+  return jsx(UploadButton, props);
+};
+
+export default RetryableButton;

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

@@ -1,5 +1,4 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { createRef, PureComponent } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import EmojiButton from './EmojiButton';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createAndFireEventInElementsChannel, toneSelectedEvent, toneSelectorOpenedEvent } from '../../util/analytics';
@@ -13,70 +12,58 @@ const extractAllTones = emoji => {
   return [emoji];
 };
 
-export class ToneSelectorInternal extends PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "firstToneButtonRef", /*#__PURE__*/createRef());
-
-    _defineProperty(this, "onToneSelectedHandler", skinTone => {
-      const {
-        onToneSelected
-      } = this.props;
-      onToneSelected(skinTone);
-      const toneList = ['default', 'light', 'mediumLight', 'medium', 'mediumDark', 'dark'];
-      this.fireEvent(toneSelectedEvent({
-        skinToneModifier: toneList[skinTone]
-      }));
-    });
-  }
-
-  fireEvent(event) {
-    const {
-      createAnalyticsEvent
-    } = this.props;
+export const ToneSelectorInternal = props => {
+  const {
+    createAnalyticsEvent,
+    emoji,
+    previewEmojiId,
+    onToneSelected
+  } = props;
+  const isMounted = useRef(false);
+  const firstToneButtonRef = useRef(null);
+  const emojiToneCollection = useMemo(() => {
+    return extractAllTones(emoji).map((tone, index) => ({ ...tone,
+      focused: tone.id !== previewEmojiId,
+      label: setSkinToneAriaLabelText(tone.name),
+      toneId: index
+    }));
+  }, [emoji, previewEmojiId]);
+  useEffect(() => {
+    if (firstToneButtonRef.current) {
+      firstToneButtonRef.current.focus();
+    }
+  }, [firstToneButtonRef]);
 
+  const fireAnalyticsEvent = event => {
     if (createAnalyticsEvent) {
       createAndFireEventInElementsChannel(event)(createAnalyticsEvent);
     }
-  }
-
-  componentDidMount() {
-    var _this$firstToneButton, _this$firstToneButton2;
+  };
 
-    (_this$firstToneButton = this.firstToneButtonRef) === null || _this$firstToneButton === void 0 ? void 0 : (_this$firstToneButton2 = _this$firstToneButton.current) === null || _this$firstToneButton2 === void 0 ? void 0 : _this$firstToneButton2.focus();
-  }
-
-  UNSAFE_componentWillMount() {
-    this.fireEvent(toneSelectorOpenedEvent({}));
-  }
-
-  render() {
-    const {
-      emoji,
-      previewEmojiId
-    } = this.props;
-    const toneEmojis = extractAllTones(emoji);
-    let isRefAlreadySet = false;
-    return /*#__PURE__*/React.createElement("div", null, toneEmojis.map((tone, i) => {
-      const shouldSetRef = !isRefAlreadySet && tone.id !== previewEmojiId;
-
-      if (shouldSetRef) {
-        isRefAlreadySet = true;
-      }
-
-      return /*#__PURE__*/React.createElement(EmojiButton, {
-        ref: shouldSetRef ? this.firstToneButtonRef : null,
-        shouldHideButton: tone.id === previewEmojiId,
-        ariaLabelText: setSkinToneAriaLabelText(tone.name),
-        key: `${tone.id}`,
-        onSelected: () => this.onToneSelectedHandler(i),
-        emoji: tone,
-        selectOnHover: true
-      });
+  const onToneSelectedHandler = toneValue => () => {
+    onToneSelected(toneValue);
+    const 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", null, emojiToneCollection.map(tone => {
+    return /*#__PURE__*/React.createElement(EmojiButton, {
+      ref: tone.focused ? firstToneButtonRef : null,
+      shouldHideButton: tone.id === previewEmojiId,
+      ariaLabelText: tone.label,
+      key: `${tone.id}`,
+      onSelected: onToneSelectedHandler(tone.toneId),
+      emoji: tone,
+      selectOnHover: true
+    });
+  }));
+};
 const ToneSelector = withAnalyticsEvents()(ToneSelectorInternal);
 export default ToneSelector;

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

@@ -28,7 +28,7 @@ export const emojiToneSelectorContainer = css({
   flex: 1,
   display: 'flex',
   justifyContent: 'flex-end',
-  padding: '8px 10px 8px 0'
+  padding: '10px 10px 11px 0'
 });
 export const emojiStyles = css({
   borderRadius: `${borderRadius()}px`,
@@ -127,8 +127,6 @@ export const hiddenToneButton = css({
   display: 'none'
 }); // Emoji Preview
 
-export const buttons = 'emoji-common-buttons';
-export const toneSelectorContainer = 'emoji-common-tone-selector-container';
 export const emojiPickerAddEmoji = 'emoji-picker-add-emoji';
 export const previewText = css({
   display: 'flex',
@@ -172,7 +170,9 @@ export const preview = css({
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'nowrap',
-  padding: '10px'
+  padding: '10px',
+  height: '32px',
+  alignItems: 'center'
 });
 export const previewImg = css({
   display: 'inline-block',
@@ -194,11 +194,6 @@ export const previewImg = css({
     padding: 0,
     display: 'block'
   }
-});
-export const emojiPreview = css({
-  display: 'flex',
-  height: '50px',
-  boxSizing: 'border-box'
 }); // Scrollable
 
 export const emojiScrollable = css({
@@ -380,4 +375,9 @@ export const cancelButton = css({
 export const buttonSpinner = css({
   marginRight: '10px',
   marginLeft: '10px'
+});
+export const emojiActionsWrapper = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center'
 });

package/dist/es2019/components/hooks.js

@@ -0,0 +1,8 @@
+import { useRef, useEffect } from 'react';
+export function useDidMount() {
+  const didMountRef = useRef(false);
+  useEffect(() => {
+    didMountRef.current = true;
+  }, []);
+  return didMountRef.current;
+}

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

@@ -1,24 +1,20 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
 import { emojiCategoryTitle } from './styles';
-export default class EmojiPickerCategoryHeading extends PureComponent {
-  render() {
-    const {
-      id,
-      title,
-      className
-    } = this.props;
-    return jsx("div", {
-      id: id,
-      "data-category-id": id,
-      className: className
-    }, jsx("div", {
-      css: emojiCategoryTitle
-    }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
-  }
 
-}
+const EmojiPickerCategoryHeading = ({
+  id,
+  title,
+  className
+}) => jsx("div", {
+  id: id,
+  "data-category-id": id,
+  className: className
+}, jsx("div", {
+  css: emojiCategoryTitle
+}, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
+
+export default EmojiPickerCategoryHeading;