@atlaskit/emoji 69.0.1 → 69.0.3

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -38,7 +37,7 @@ Object.defineProperty(exports, "EmojiLoader", {
 Object.defineProperty(exports, "EmojiPicker", {
   enumerable: true,
   get: function get() {
-    return _EmojiPicker.default;
+    return _picker.EmojiPicker;
   }
 });
 Object.defineProperty(exports, "EmojiPlaceholder", {
@@ -231,7 +230,8 @@ Object.defineProperty(exports, "withSampling", {
 var _utilServiceSupport = require("@atlaskit/util-service-support");
 var _element = require("./element");
 var _ResourcedEmoji = _interopRequireDefault(require("./components/common/ResourcedEmoji"));
-var _EmojiPicker = _interopRequireWildcard(require("./components/picker/EmojiPicker"));
+var _picker = require("./picker");
+var _EmojiPicker = require("./components/picker/EmojiPicker");
 var _EmojiUploader = _interopRequireDefault(require("./components/uploader/EmojiUploader"));
 var _EmojiTypeAhead = _interopRequireDefault(require("./components/typeahead/EmojiTypeAhead"));
 var _EmojiTypeAheadItem = _interopRequireDefault(require("./components/typeahead/EmojiTypeAheadItem"));
@@ -249,6 +249,4 @@ var _useEmojiContext = require("./hooks/useEmojiContext");
 var _EmojiContextProvider = require("./context/EmojiContextProvider");
 var _EmojiCommonProvider = require("./context/EmojiCommonProvider");
 var _types = require("./types");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var _default = exports.default = _EmojiPicker.default;
+var _default = exports.default = _picker.EmojiPicker;

package/dist/cjs/picker.js

@@ -4,10 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EmojiPicker", {
-  enumerable: true,
-  get: function get() {
-    return _EmojiPicker.default;
-  }
-});
-var _EmojiPicker = _interopRequireDefault(require("./components/picker/EmojiPicker"));
+exports.EmojiPicker = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _EmojiPicker = _interopRequireDefault(require("./components/picker/EmojiPicker"));
+var _EmojiPicker2 = _interopRequireDefault(require("./components/compiled/picker/EmojiPicker"));
+var EmojiPicker = exports.EmojiPicker = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_emoji', _EmojiPicker2.default, _EmojiPicker.default);

package/dist/cjs/util/analytics/analytics.js

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

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

@@ -10,7 +10,7 @@ import EmojiDeletePreview from './EmojiDeletePreview';
 import EmojiUploadPicker from './EmojiUploadPicker';
 import TonePreviewButton from './TonePreviewButton';
 import ToneSelector from './ToneSelector';
-import { EmojiPickerListSearch } from '../../picker/EmojiPickerListSearch';
+import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import { messages } from '../../i18n';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/core/migration/add';

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

@@ -37,7 +37,6 @@
 ._7mh21ule span[role=img]>img{display:block}
 ._8fp6dbra span[role=img]>img{transform:translateX(-50%) translateY(-50%)}
 ._ca0q19bv{padding-top:10px}
-._i0dl1wug{flex-basis:auto}
 ._n3td19bv{padding-bottom:10px}
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._o5721q9c{white-space:nowrap}

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

@@ -15,7 +15,7 @@ export const EmojiPreviewComponent = ({
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
+    className: ax(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule"])
   }, /*#__PURE__*/React.createElement(CachingEmoji, {
     key: emoji.id || emoji.shortName,
     emoji: emoji

package/dist/es2019/components/compiled/picker/CategorySelector.compiled.css

@@ -0,0 +1,24 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._v564h5h4{transition:color .2s ease}
+._189eidpf{border-width:0}._16jlidpf{flex-grow:0}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bah1b1v{justify-content:space-around}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._bfhk1nmp{background-color:var(--ds-surface-sunken,#ebecf0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._dpd31txw button{display:flex}
+._i0dl1wug{flex-basis:auto}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._30l3aqb7:hover{color:var(--ds-text-selected,#0c66e4)}

package/dist/es2019/components/compiled/picker/CategorySelector.js

@@ -0,0 +1,136 @@
+/* CategorySelector.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./CategorySelector.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { cx } from '@atlaskit/css';
+import { N30 } from '@atlaskit/theme/colors';
+import { useIntl } from 'react-intl-next';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import Tooltip from '@atlaskit/tooltip';
+import { CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED, defaultCategories, KeyboardKeys } from '../../../util/constants';
+import { messages } from '../../i18n';
+import { CategoryDescriptionMap } from '../../picker/categories';
+import { usePrevious } from '../../../hooks/usePrevious';
+import { RENDER_EMOJI_PICKER_LIST_TESTID } from '../../picker/EmojiPickerList';
+const styles = {
+  commonCategory: "_2rkoglpi _v564h5h4 _189eidpf _bfhksm61 _ca0qze3t _n3tdze3t _19bvze3t _u5f3ze3t",
+  defaultCategory: "_syaz131l _30l3aqb7",
+  activeCategory: "_syazaqb7 _30l3aqb7",
+  disabledCategory: "_syaz131l"
+};
+const categorySelector = null;
+const categorySelectorTablist = null;
+export const sortCategories = (c1, c2) => CategoryDescriptionMap[c1].order - CategoryDescriptionMap[c2].order;
+const addNewCategories = (oldCategories, newCategories) => {
+  if (!newCategories) {
+    return oldCategories;
+  }
+  return oldCategories.concat(newCategories.filter(category => !!CategoryDescriptionMap[category])).sort(sortCategories);
+};
+export const categorySelectorComponentTestId = 'category-selector-component';
+export const categorySelectorCategoryTestId = categoryId => `category-selector-${categoryId}`;
+const CategorySelector = props => {
+  const {
+    disableCategories,
+    dynamicCategories,
+    activeCategoryId,
+    onCategorySelected
+  } = props;
+  const [categories, setCategories] = useState(addNewCategories(defaultCategories, dynamicCategories));
+  const [currentFocus, setCurrentFocus] = useState(0);
+  const categoryRef = useRef(null);
+  const prevDynamicCategories = usePrevious(dynamicCategories);
+  const {
+    formatMessage
+  } = useIntl();
+  const updateCategories = useCallback(() => {
+    const newCategories = addNewCategories(defaultCategories, dynamicCategories);
+    setCategories(newCategories);
+  }, [dynamicCategories]);
+  useEffect(() => {
+    if (prevDynamicCategories !== dynamicCategories) {
+      updateCategories();
+    }
+  }, [prevDynamicCategories, dynamicCategories, updateCategories]);
+  const focusCategory = useCallback(index => {
+    var _categoryRef$current;
+    const categoryToFocus = (_categoryRef$current = categoryRef.current) === null || _categoryRef$current === void 0 ? void 0 : _categoryRef$current.querySelector(`[data-focus-index="${index}"]`);
+    categoryToFocus && categoryToFocus.focus();
+    setCurrentFocus(index);
+  }, [categoryRef, setCurrentFocus]);
+  const handleKeyDown = e => {
+    if (!CATEGORYSELECTOR_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const lastCategoryIndex = categories.length - 1;
+    switch (e.key) {
+      // navigate to the right category
+      case KeyboardKeys.ArrowRight:
+        focusCategory(currentFocus === lastCategoryIndex ? 0 : currentFocus + 1);
+        break;
+      // navigate to the left category
+      case KeyboardKeys.ArrowLeft:
+        focusCategory(currentFocus === 0 ? lastCategoryIndex : currentFocus - 1);
+        break;
+      // navigate to the first category
+      case KeyboardKeys.Home:
+        focusCategory(0);
+        break;
+      // navigate to the last category
+      case KeyboardKeys.End:
+        focusCategory(lastCategoryIndex);
+        break;
+    }
+  };
+  const handleClick = (categoryId, index) => event => {
+    if (disableCategories) {
+      event.preventDefault();
+      return;
+    }
+    if (onCategorySelected) {
+      onCategorySelected(categoryId);
+    }
+    setCurrentFocus(index);
+  };
+  let categoriesSection;
+  if (categories) {
+    categoriesSection = /*#__PURE__*/React.createElement("div", {
+      role: "tablist",
+      "aria-label": formatMessage(messages.categoriesSelectorLabel),
+      "data-testid": categorySelectorComponentTestId,
+      ref: categoryRef,
+      className: ax(["_ca0q12x7 _n3td12x7 _19bvu2gc _u5f3u2gc _1e0c1txw _2lx2vrvc _1bah1b1v _4cvr1h6o"])
+    }, categories.map((categoryId, index) => {
+      const category = CategoryDescriptionMap[categoryId];
+      const Icon = category.icon;
+      const categoryName = formatMessage(messages[category.name]);
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        content: categoryName,
+        position: "bottom",
+        key: category.id
+      }, /*#__PURE__*/React.createElement(Pressable, {
+        id: `category-selector-${category.id}`,
+        "data-focus-index": index,
+        "aria-label": categoryName,
+        "aria-controls": currentFocus === index ? RENDER_EMOJI_PICKER_LIST_TESTID : undefined,
+        "aria-selected": categoryId === activeCategoryId,
+        xcss: cx(styles.commonCategory, styles.defaultCategory, categoryId === activeCategoryId && styles.activeCategory, disableCategories && styles.disabledCategory),
+        isDisabled: disableCategories,
+        onClick: handleClick(categoryId, index),
+        testId: categorySelectorCategoryTestId(categoryId),
+        tabIndex: currentFocus === index ? 0 : -1,
+        onKeyDown: handleKeyDown,
+        role: "tab"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        label: categoryName
+      })));
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _bfhk1nmp _dpd31txw"])
+  }, categoriesSection);
+};
+export default CategorySelector;

package/dist/es2019/components/compiled/picker/EmojiPicker.compiled.css

@@ -0,0 +1,12 @@
+
+._19itcyqh{border:var(--ds-border,#dfe1e6) 1px solid}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._16qsp2xt{box-shadow:var(--ds-shadow-overlay,0 3px 6px rgba(0,0,0,.2))}
+._1bah1yb4{justify-content:space-between}
+._1bsb1edt{width:350px}
+._1e0c1txw{display:flex}
+._1tke5x59{min-height:340px}
+._1ul91edt{min-width:350px}
+._2lx21bp4{flex-direction:column}
+._4t3iixjv{height:375px}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71l1y6z{max-height:calc(80vh - 86px)}

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

@@ -0,0 +1,67 @@
+/* EmojiPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./EmojiPicker.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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 { 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 = () => {
+  emojiPickerLoader().then(component => {
+    EmojiPickerInternal.AsyncLoadedComponent = component;
+  });
+};
+export class EmojiPickerInternal extends LoadingEmojiComponent {
+  constructor(props) {
+    super(props, {});
+    _defineProperty(this, "state", {
+      asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
+    });
+    ufoExperiences['emoji-picker-opened'].start();
+  }
+  asyncLoadComponent() {
+    emojiPickerLoader().then(component => {
+      EmojiPickerInternal.AsyncLoadedComponent = component;
+      this.setAsyncState(component);
+    });
+  }
+  renderLoading() {
+    const item = new LoadingItem();
+    const handlePickerRef = ref => {
+      if (this.props.onPickerRef) {
+        this.props.onPickerRef(ref);
+      }
+    };
+    ufoExperiences['emoji-picker-opened'].markFMP();
+    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 /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+      experiences: [ufoExperiences['emoji-picker-opened']]
+    }, /*#__PURE__*/React.createElement(EmojiCommonProvider, {
+      emojiProvider: loadedEmojiProvider
+    }, /*#__PURE__*/React.createElement(EmojiPickerComponent, otherProps)));
+  }
+}
+// state initialised with static component to prevent
+// rerender when the module has already been loaded
+_defineProperty(EmojiPickerInternal, "defaultProps", {
+  size: defaultEmojiPickerSize
+});
+const EmojiPicker = withAnalyticsEvents()(EmojiPickerInternal);
+export default EmojiPicker;

package/dist/es2019/components/compiled/picker/EmojiPickerCategoryHeading.compiled.css

@@ -0,0 +1,9 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1p1d1qyh{text-transform:lowercase}
+._299mangw:first-letter{text-transform:uppercase}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
+._syazj3m3{color:var(--ds-text,#091e42)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi{box-sizing:border-box}

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

@@ -0,0 +1,30 @@
+/* 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';
+const emojiCategoryTitle = null;
+
+/**
+ * Test id for wrapper Emoji Picker List div
+ */
+export const RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID = 'render-emoji-picker-categorty-heading';
+const EmojiPickerCategoryHeading = ({
+  id,
+  title,
+  className
+}) => /*#__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
+  ,
+  className: className,
+  "data-testid": RENDER_EMOJI_PICKER_CATEGORY_HEADING_TESTID,
+  role: "rowheader"
+}, /*#__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/compiled/picker/EmojiPickerComponent.compiled.css

@@ -0,0 +1,19 @@
+
+._19itcyqh{border:var(--ds-border,#dfe1e6) 1px solid}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._16qsp2xt{box-shadow:var(--ds-shadow-overlay,0 3px 6px rgba(0,0,0,.2))}
+._1bah1yb4{justify-content:space-between}
+._1bsb1edt{width:350px}
+._1e0c1txw{display:flex}
+._1tke1pna{min-height:420px}
+._1tke5x59{min-height:340px}
+._1tkegx0z{min-height:260px}
+._1ul91edt{min-width:350px}
+._2lx21bp4{flex-direction:column}
+._4t3i1ckg{height:455px}
+._4t3i2300{height:429px}
+._4t3iaq3k{height:295px}
+._4t3iixjv{height:375px}
+._4t3ivixp{height:349px}
+._4t3ixt2k{height:509px}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._c71l1y6z{max-height:calc(80vh - 86px)}