@atlaskit/emoji 69.0.7 → 69.0.9

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

@@ -1,19 +1,17 @@
+/* EmojiPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./EmojiPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { N40 } from '@atlaskit/theme/colors';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
 import { LoadingItem } from './EmojiPickerVirtualItems';
-import { emojiPicker } from './styles';
 import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 import { defaultEmojiPickerSize } from '../../util/constants';
 import { EmojiCommonProvider } from '../../context/EmojiCommonProvider';
+const emojiPicker = null;
 const emojiPickerModuleLoader = () => import( /* webpackChunkName:"@atlaskit-internal_emojiPickerComponent" */'./EmojiPickerComponent');
 const emojiPickerLoader = () => emojiPickerModuleLoader().then(module => module.default);
 export const preloadEmojiPicker = () => {
@@ -43,24 +41,21 @@ export class EmojiPickerInternal extends LoadingEmojiComponent {
       }
     };
     ufoExperiences['emoji-picker-opened'].markFMP();
-    return (
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      jsx("div", {
-        css: emojiPicker(),
-        ref: handlePickerRef
-      }, item.renderItem())
-    );
+    return /*#__PURE__*/React.createElement("div", {
+      ref: handlePickerRef,
+      className: ax(["_19itcyqh _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iixjv _1bsb1edt _1ul91edt _1tke5x59 _c71l1y6z"])
+    }, item.renderItem());
   }
   renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
     const {
       emojiProvider,
       ...otherProps
     } = this.props;
-    return jsx(UfoErrorBoundary, {
+    return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
       experiences: [ufoExperiences['emoji-picker-opened']]
-    }, jsx(EmojiCommonProvider, {
+    }, /*#__PURE__*/React.createElement(EmojiCommonProvider, {
       emojiProvider: loadedEmojiProvider
-    }, jsx(EmojiPickerComponent, otherProps)));
+    }, /*#__PURE__*/React.createElement(EmojiPickerComponent, otherProps)));
   }
 }
 // state initialised with static component to prevent

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

@@ -1,13 +1,13 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* EmojiPickerCategoryHeading.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerCategoryHeading.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { N900 } from '@atlaskit/theme/colors';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
-import { emojiCategoryTitle } from './styles';
+const emojiCategoryTitle = null;
+
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -16,7 +16,7 @@ const EmojiPickerCategoryHeading = ({
   id,
   title,
   className
-}) => jsx("div", {
+}) => /*#__PURE__*/React.createElement("div", {
   id: id,
   "data-category-id": id
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -24,7 +24,7 @@ const EmojiPickerCategoryHeading = ({
   className: className,
   "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
   role: "rowheader"
-}, jsx("div", {
-  css: emojiCategoryTitle
-}, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
+}, /*#__PURE__*/React.createElement("div", {
+  className: ax(["_11c82smr _vchhusvi _syazj3m3 _ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1p1d1qyh _299mangw"])
+}, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
 export default EmojiPickerCategoryHeading;

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

@@ -1,10 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerComponent.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, createRef, memo } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import { N40 } from '@atlaskit/theme/colors';
 import { unstable_batchedUpdates as batchedUpdates } from 'react-dom';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -19,11 +18,27 @@ import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import { EmojiPickerVirtualListInternalOld as EmojiPickerListOld, EmojiPickerVirtualListInternalNew as EmojiPickerListNew } from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
-import { emojiPicker } from './styles';
 import { useEmoji } from '../../hooks/useEmoji';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { messages } from '../i18n';
 import { fg } from '@atlaskit/platform-feature-flags';
+const emojiPickerBoxShadow = "var(--ds-shadow-overlay, 0 3px 6px rgba(0, 0, 0, 0.2))";
+const emojiPickerHeight = 295;
+const emojiPickerHeightWithPreview = 349; // emojiPickerHeight + emojiPickerPreviewHeight;
+const emojiPickerWidth = 350;
+const emojiPickerMinHeight = 260;
+const heightOffset = 80;
+const emojiPicker = null;
+const withPreviewHeight = {
+  small: "_4t3ivixp _1tkegx0z",
+  medium: "_4t3i2300 _1tke5x59",
+  large: "_4t3ixt2k _1tke1pna"
+};
+const withoutPreviewHeight = {
+  small: "_4t3iaq3k _1tkegx0z",
+  medium: "_4t3iixjv _1tke5x59",
+  large: "_4t3i1ckg _1tke1pna"
+};
 const FREQUENTLY_USED_MAX = 16;
 const EmojiPickerComponent = ({
   onSelection,
@@ -248,7 +263,7 @@ const EmojiPickerComponent = ({
     });
   }, [disableCategories, emojiPickerList, emojiProvider, fireAnalytics, selectedTone]);
   const recordUsageOnSelection = useMemo(() => createRecordSelectionDefault(emojiProvider, onSelectWrapper, analytic => fireAnalytics(analytic(SearchSourceTypes.PICKER))), [emojiProvider, fireAnalytics, onSelectWrapper]);
-  const formattedErrorMessage = useMemo(() => uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
+  const formattedErrorMessage = useMemo(() => uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null, [uploadErrorMessage]);
   const onFileChooserClicked = useCallback(() => {
     fireAnalytics(selectedFileEvent());
   }, [fireAnalytics]);
@@ -413,83 +428,79 @@ const EmojiPickerComponent = ({
     };
   }, [emojiProvider, onProviderChange]);
   const showPreview = selectedEmoji && !uploading;
-  return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    jsx("div", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      css: emojiPicker(showPreview, size),
-      ref: onPickerRef,
-      "data-emoji-picker-container": true,
-      role: "dialog",
-      "aria-label": formatMessage(messages.emojiPickerTitle),
-      "aria-modal": true,
-      onKeyPress: suppressKeyPress,
-      onKeyUp: suppressKeyPress,
-      onKeyDown: suppressKeyPress
-    }, jsx(CategorySelector, {
-      activeCategoryId: activeCategory,
-      dynamicCategories: dynamicCategories,
-      disableCategories: disableCategories,
-      onCategorySelected: onCategorySelected
-    }), fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? jsx(EmojiPickerListNew, {
-      emojis: filteredEmojis,
-      currentUser: currentUser,
-      onEmojiSelected: recordUsageOnSelection,
-      onEmojiActive: onEmojiActive,
-      onEmojiDelete: onTriggerDelete,
-      onCategoryActivated: onCategoryActivated,
-      onSearch: onSearch,
-      query: query,
-      selectedTone: selectedTone,
-      loading: loading,
-      ref: emojiPickerList,
-      initialUploadName: query,
-      onToneSelected: onToneSelected,
-      onToneSelectorCancelled: onToneSelectorCancelled,
-      toneEmoji: toneEmoji,
-      uploading: uploading,
-      emojiToDelete: emojiToDelete,
-      uploadErrorMessage: formattedErrorMessage,
-      uploadEnabled: isUploadSupported && !uploading,
-      onUploadEmoji: onUploadEmoji,
-      onUploadCancelled: onUploadCancelled,
-      onDeleteEmoji: onDeleteEmoji,
-      onCloseDelete: onCloseDelete,
-      onFileChooserClicked: onFileChooserClicked,
-      onOpenUpload: onOpenUpload,
-      size: size,
-      activeCategoryId: activeCategory
-    }) : jsx(EmojiPickerListOld, {
-      emojis: filteredEmojis,
-      currentUser: currentUser,
-      onEmojiSelected: recordUsageOnSelection,
-      onEmojiActive: onEmojiActive,
-      onEmojiDelete: onTriggerDelete,
-      onCategoryActivated: onCategoryActivated,
-      onSearch: onSearch,
-      query: query,
-      selectedTone: selectedTone,
-      loading: loading,
-      ref: emojiPickerList,
-      initialUploadName: query,
-      onToneSelected: onToneSelected,
-      onToneSelectorCancelled: onToneSelectorCancelled,
-      toneEmoji: toneEmoji,
-      uploading: uploading,
-      emojiToDelete: emojiToDelete,
-      uploadErrorMessage: formattedErrorMessage,
-      uploadEnabled: isUploadSupported && !uploading,
-      onUploadEmoji: onUploadEmoji,
-      onUploadCancelled: onUploadCancelled,
-      onDeleteEmoji: onDeleteEmoji,
-      onCloseDelete: onCloseDelete,
-      onFileChooserClicked: onFileChooserClicked,
-      onOpenUpload: onOpenUpload,
-      size: size,
-      activeCategoryId: activeCategory
-    }), showPreview && jsx(EmojiPickerFooter, {
-      selectedEmoji: selectedEmoji
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: onPickerRef,
+    "data-emoji-picker-container": true,
+    role: "dialog",
+    "aria-label": formatMessage(messages.emojiPickerTitle),
+    "aria-modal": true,
+    onKeyPress: suppressKeyPress,
+    onKeyUp: suppressKeyPress,
+    onKeyDown: suppressKeyPress,
+    className: ax(["_19itcyqh _2rkosqtm _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qsp2xt _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z", showPreview && withPreviewHeight[size], !showPreview && withoutPreviewHeight[size]])
+  }, /*#__PURE__*/React.createElement(CategorySelector, {
+    activeCategoryId: activeCategory,
+    dynamicCategories: dynamicCategories,
+    disableCategories: disableCategories,
+    onCategorySelected: onCategorySelected
+  }), fg('platform_editor_react18_elements_emoji') || fg('platform_editor_react18_elements_emoji_jira_bb') ? /*#__PURE__*/React.createElement(EmojiPickerListNew, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }) : /*#__PURE__*/React.createElement(EmojiPickerListOld, {
+    emojis: filteredEmojis,
+    currentUser: currentUser,
+    onEmojiSelected: recordUsageOnSelection,
+    onEmojiActive: onEmojiActive,
+    onEmojiDelete: onTriggerDelete,
+    onCategoryActivated: onCategoryActivated,
+    onSearch: onSearch,
+    query: query,
+    selectedTone: selectedTone,
+    loading: loading,
+    ref: emojiPickerList,
+    initialUploadName: query,
+    onToneSelected: onToneSelected,
+    onToneSelectorCancelled: onToneSelectorCancelled,
+    toneEmoji: toneEmoji,
+    uploading: uploading,
+    emojiToDelete: emojiToDelete,
+    uploadErrorMessage: formattedErrorMessage,
+    uploadEnabled: isUploadSupported && !uploading,
+    onUploadEmoji: onUploadEmoji,
+    onUploadCancelled: onUploadCancelled,
+    onDeleteEmoji: onDeleteEmoji,
+    onCloseDelete: onCloseDelete,
+    onFileChooserClicked: onFileChooserClicked,
+    onOpenUpload: onOpenUpload,
+    size: size,
+    activeCategoryId: activeCategory
+  }), showPreview && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+    selectedEmoji: selectedEmoji
+  }));
 };
 export default /*#__PURE__*/memo(EmojiPickerComponent);

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

@@ -1,15 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerEmojiRow.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerEmojiRow.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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 { useIntl } from 'react-intl-next';
 import CachingEmoji from '../common/CachingEmoji';
-import { emojiItem, emojiPickerRow } from './styles';
 import { useEmojiPickerListContext } from '../../hooks/useEmojiPickerListContext';
 import { messages } from '../i18n';
+const emojiItem = null;
+const emojiPickerRow = null;
 const EmojiPickerEmojiRow = ({
   emojis,
   onSelected,
@@ -35,39 +34,36 @@ const EmojiPickerEmojiRow = ({
     });
     onFocus && onFocus(emojiId, emoji, event);
   };
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: emojiPickerRow,
-      role: "presentation"
-    }, emojis.map((emoji, index) => {
-      const {
-        shortName,
-        id
-      } = emoji;
-      const key = id ? `${id}-${title}` : `${shortName}-${title}`;
-      const focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
-      return jsx("span", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: emojiItem,
-        key: key,
-        role: "gridcell",
-        "aria-colindex": index + 1 // aria-colindex is 1 based
-      }, jsx(CachingEmoji, {
-        emoji: emoji,
-        selectOnHover: true,
-        onSelected: onSelected,
-        onMouseMove: onMouseMove,
-        onFocus: handleFocus(index),
-        showDelete: showDelete,
-        onDelete: onDelete,
-        placeholderSize: 24,
-        "data-focus-index": `${rowIndex}-${index}`,
-        tabIndex: focus ? 0 : -1,
-        "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
-        shouldBeInteractive: true
-      }));
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: ax(["_18u0u2gc"])
+  }, emojis.map((emoji, index) => {
+    const {
+      shortName,
+      id
+    } = emoji;
+    const key = id ? `${id}-${title}` : `${shortName}-${title}`;
+    const focus = currentEmojisFocus.rowIndex === rowIndex && currentEmojisFocus.columnIndex === index;
+    return /*#__PURE__*/React.createElement("span", {
+      key: key,
+      role: "gridcell",
+      "aria-colindex": index + 1 // aria-colindex is 1 based
+      ,
+      className: ax(["_1e0c1o8l _y3gn1h6o _1bsb1ylp _1wcg14y2 _1678tlke _7b50u2gc _1rf4u2gc _b4kiu2gc _bm9mu2gc _1lvc1tcg _1cf71tcg _8vlfze3t _1909ze3t _1tcfze3t _n7xcze3t _4ubfu2gc _18x3u2gc _fw9su2gc _29jju2gc _qpkw1tcg _elsp1tcg _vtzrze3t _w2q0ze3t _o5kcze3t _1mc3ze3t _115ch2mm _yrst1ssb _85ft1ssb _5mfndbra _1k8z1tcg _17dz1tcg _zdyf1ule _1mn81tcg _u5ah1tcg"])
+    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      emoji: emoji,
+      selectOnHover: true,
+      onSelected: onSelected,
+      onMouseMove: onMouseMove,
+      onFocus: handleFocus(index),
+      showDelete: showDelete,
+      onDelete: onDelete,
+      placeholderSize: 24,
+      "data-focus-index": `${rowIndex}-${index}`,
+      tabIndex: focus ? 0 : -1,
+      "aria-roledescription": formatMessage(messages.emojiButtonRoleDescription),
+      shouldBeInteractive: true
+    }));
+  }));
 };
 export default /*#__PURE__*/memo(EmojiPickerEmojiRow);

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

@@ -1,21 +1,19 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* EmojiPickerFooter.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./EmojiPickerFooter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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 { N30A } from '@atlaskit/theme/colors';
 import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
-import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-const previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
+const emojiPickerFooter = null;
+const emojiPickerFooterWithTopShadow = null;
 export const emojiPickerFooterTestId = 'emoji-picker-footer';
 const EmojiPickerFooter = ({
   selectedEmoji
-}) => jsx("div", {
-  css: previewFooterClassnames,
-  "data-testid": emojiPickerFooterTestId
-}, selectedEmoji && jsx(EmojiPreviewComponent, {
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-testid": emojiPickerFooterTestId,
+  className: ax(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do1kuc _16qs2hsd"])
+}, selectedEmoji && /*#__PURE__*/React.createElement(EmojiPreviewComponent, {
   emoji: selectedEmoji
 }));
 export default /*#__PURE__*/memo(EmojiPickerFooter);