@atlaskit/emoji 69.0.1 → 69.0.3

package/dist/cjs/components/compiled/picker/EmojiPickerFooter.compiled.css

@@ -0,0 +1,5 @@
+
+._x3do18ew{border-top:var(--_m6cf7x)}._16jlidpf{flex-grow:0}
+._16qs4j53{box-shadow:var(--_cfawkn)}
+._1o9zidpf{flex-shrink:0}
+._i0dl1wug{flex-basis:auto}

package/dist/cjs/components/compiled/picker/EmojiPickerFooter.js

@@ -0,0 +1,33 @@
+/* EmojiPickerFooter.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerFooterTestId = exports.default = void 0;
+require("./EmojiPickerFooter.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
+var _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
+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 emojiPickerFooter = null;
+var emojiPickerFooterWithTopShadow = null;
+var emojiPickerFooterTestId = exports.emojiPickerFooterTestId = 'emoji-picker-footer';
+var EmojiPickerFooter = function EmojiPickerFooter(_ref) {
+  var selectedEmoji = _ref.selectedEmoji;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": emojiPickerFooterTestId,
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug", "_x3do18ew _16qs4j53"]),
+    style: {
+      "--_m6cf7x": (0, _runtime.ix)("2px solid ".concat("var(--ds-border, ".concat(_colors.N30A, ")"))),
+      "--_cfawkn": (0, _runtime.ix)("0px -1px 1px 0px ".concat("var(--ds-border, rgba(0, 0, 0, 0.1))"))
+    }
+  }, selectedEmoji && /*#__PURE__*/React.createElement(_EmojiPreviewComponent.EmojiPreviewComponent, {
+    emoji: selectedEmoji
+  }));
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(EmojiPickerFooter);

package/dist/cjs/components/compiled/picker/EmojiPickerListSearch.compiled.css

@@ -0,0 +1,23 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._13xeglyw:invalid{box-shadow:none}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._1bsb1osq{width:100%}
+._1e0cglyw{display:none}
+._1goxglyw::-ms-clear{display:none}
+._1q51t94y{padding-block-start:1px}
+._1qu2glyw{outline-style:none}
+._3um015vq{visibility:hidden}
+._80om1kw7{cursor:inherit}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
+._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
+._syaz1kw7{color:inherit}
+._tzy4105o{opacity:.5}
+._tzy4idpf{opacity:0}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
+._vchhusvi{box-sizing:border-box}
+._y4tize3t{padding-inline-end:var(--ds-space-0,0)}

package/dist/cjs/components/compiled/picker/EmojiPickerListSearch.js

@@ -0,0 +1,93 @@
+/* EmojiPickerListSearch.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emojiPickerSearchTestId = exports.EmojiPickerListSearch = void 0;
+require("./EmojiPickerListSearch.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/migration/search"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _useDebounce = require("use-debounce");
+var _constants = require("../../../util/constants");
+var _i18n = require("../../i18n");
+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 input = null;
+var pickerSearch = null;
+var searchIcon = null;
+var hidden = null;
+var emojiPickerSearchTestId = exports.emojiPickerSearchTestId = 'emoji-picker-search';
+var EmojiPickerListSearch = exports.EmojiPickerListSearch = function EmojiPickerListSearch(props) {
+  var style = props.style,
+    query = props.query,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
+    resultsCount = props.resultsCount,
+    onChange = props.onChange;
+  var textRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dirty = _useState2[0],
+    setDirty = _useState2[1];
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+
+  // Debounce callback
+  var _useDebouncedCallback = (0, _useDebounce.useDebouncedCallback)(function (value) {
+      onChange(value);
+      setDirty(true);
+    },
+    // delay in ms
+    _constants.EMOJI_SEARCH_DEBOUNCE),
+    _useDebouncedCallback2 = (0, _slicedToArray2.default)(_useDebouncedCallback, 1),
+    debouncedSearch = _useDebouncedCallback2[0];
+  var handleOnChange = function handleOnChange(e) {
+    debouncedSearch(e.target.value);
+  };
+  (0, _react.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      if (textRef) {
+        var _textRef$current;
+        (_textRef$current = textRef.current) === null || _textRef$current === void 0 || _textRef$current.focus();
+      }
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    className: (0, _runtime.ax)(["_vchhusvi _ca0qutpp _n3tdutpp _19bvutpp _u5f3utpp _1bsb1osq", !isVisible && "_tzy4idpf _3um015vq _1e0cglyw"])
+  }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+    id: "emoji-search-results-status",
+    role: "status"
+  }, dirty && query === '' && formatMessage(_i18n.messages.searchResultsStatusSeeAll), query !== '' && formatMessage(_i18n.messages.searchResultsStatusSeeAll, {
+    // change to messages.searchResultsStatus once translated
+    count: resultsCount
+  })), /*#__PURE__*/_react.default.createElement(_textfield.default, {
+    role: "searchbox",
+    "aria-label": formatMessage(_i18n.messages.searchLabel),
+    autoComplete: "off",
+    name: "search",
+    placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
+    defaultValue: query || '',
+    onChange: handleOnChange,
+    elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _runtime.ax)(["_tzy4105o _18u01i6y"])
+    }, /*#__PURE__*/_react.default.createElement(_search.default, {
+      LEGACY_margin: "0 0 0 2px",
+      color: "currentColor",
+      spacing: "spacious",
+      label: ""
+    })),
+    testId: emojiPickerSearchTestId,
+    ref: textRef,
+    isCompact: true,
+    className: (0, _runtime.ax)(["_11c82smr _12ji1r31 _1qu2glyw _12y31o36 _vchhusvi _syaz1kw7 _80om1kw7 _1q51t94y _y4tize3t _85i5v77o _bozg12x7 _1bsb1osq _13xeglyw _1goxglyw"])
+  }));
+};

package/dist/cjs/components/compiled/picker/EmojiPickerTabPanel.compiled.css

@@ -0,0 +1,6 @@
+._16jlkb7n{flex-grow:1}
+._1e0c1txw{display:flex}
+._1o9zkb7n{flex-shrink:1}
+._2lx21bp4{flex-direction:column}
+._4t3iidpf{height:0}
+._i0dl1wug{flex-basis:auto}

package/dist/cjs/components/compiled/picker/EmojiPickerTabPanel.js

@@ -0,0 +1,60 @@
+/* EmojiPickerTabPanel.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./EmojiPickerTabPanel.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireWildcard(require("react"));
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../../i18n");
+var _EmojiPickerList = require("../../picker/EmojiPickerList");
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var emojiPickerList = null;
+
+/**
+ * TODO: have to use class component here as unit test is relying on ref.root. Will refactor this whole file + EmojiPickerList to functional component in future
+ * ticket: COLLAB-2317
+ */
+var EmojiPickerTabPanelInternal = /*#__PURE__*/function (_PureComponent) {
+  function EmojiPickerTabPanelInternal() {
+    (0, _classCallCheck2.default)(this, EmojiPickerTabPanelInternal);
+    return _callSuper(this, EmojiPickerTabPanelInternal, arguments);
+  }
+  (0, _inherits2.default)(EmojiPickerTabPanelInternal, _PureComponent);
+  return (0, _createClass2.default)(EmojiPickerTabPanelInternal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        formatMessage = _this$props.intl.formatMessage,
+        children = _this$props.children,
+        showSearchResults = _this$props.showSearchResults;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        ref: "root",
+        "data-testid": _EmojiPickerList.RENDER_EMOJI_PICKER_LIST_TESTID,
+        id: _EmojiPickerList.RENDER_EMOJI_PICKER_LIST_TESTID,
+        role: "tabpanel",
+        "aria-label": formatMessage(_i18n.messages.emojiPickerListPanel),
+        className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1e0c1txw _2lx21bp4 _4t3iidpf"])
+      }, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, {
+        id: "emoji-picker-table-description"
+      }, formatMessage(_i18n.messages.emojiPickerGrid, {
+        showSearchResults: showSearchResults
+      })), children);
+    }
+  }]);
+}(_react.PureComponent);
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(EmojiPickerTabPanelInternal);

package/dist/cjs/components/compiled/picker/EmojiPickerVirtualItems.compiled.css

@@ -0,0 +1,8 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1t3b1wug >div{flex-basis:auto}
+._4cvr1h6o{align-items:center}
+._4t3i1w81{height:150px}
+._nphsidpf >div{flex-grow:0}
+._t1edidpf >div{flex-shrink:0}

package/dist/cjs/components/compiled/picker/EmojiPickerVirtualItems.js

@@ -0,0 +1,86 @@
+/* EmojiPickerVirtualItems.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.virtualItemRenderer = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
+require("./EmojiPickerVirtualItems.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _EmojiPickerCategoryHeading = _interopRequireDefault(require("./EmojiPickerCategoryHeading"));
+var _EmojiPickerEmojiRow = _interopRequireDefault(require("./EmojiPickerEmojiRow"));
+var _EmojiPickerSizes = require("../../picker/EmojiPickerSizes");
+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; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var emojiPickerSpinner = null;
+var AbstractItem = exports.AbstractItem = /*#__PURE__*/(0, _createClass2.default)(function AbstractItem(props, height) {
+  (0, _classCallCheck2.default)(this, AbstractItem);
+  this.props = props;
+  this.height = height;
+});
+var EmojisRowItem = exports.EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
+  function EmojisRowItem(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, EmojisRowItem);
+    _this = _callSuper(this, EmojisRowItem, [props, _EmojiPickerSizes.sizes.emojiRowHeight]);
+    (0, _defineProperty2.default)(_this, "renderItem", function (context) {
+      return /*#__PURE__*/React.createElement(_EmojiPickerEmojiRow.default, (0, _extends2.default)({}, _this.props, {
+        virtualItemContext: context
+      }));
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(EmojisRowItem, _AbstractItem);
+  return (0, _createClass2.default)(EmojisRowItem);
+}(AbstractItem);
+var LoadingItem = exports.LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
+  function LoadingItem() {
+    var _this2;
+    (0, _classCallCheck2.default)(this, LoadingItem);
+    _this2 = _callSuper(this, LoadingItem, [{}, _EmojiPickerSizes.sizes.loadingRowHeight]);
+    (0, _defineProperty2.default)(_this2, "renderItem", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw _1bsb1osq _4t3i1w81 _1bah1h6o _4cvr1h6o _nphsidpf _t1edidpf _1t3b1wug"])
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_spinner.default, {
+        size: "medium"
+      })));
+    });
+    return _this2;
+  }
+  (0, _inherits2.default)(LoadingItem, _AbstractItem2);
+  return (0, _createClass2.default)(LoadingItem);
+}(AbstractItem);
+var CategoryHeadingItem = exports.CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
+  function CategoryHeadingItem(props) {
+    var _this3;
+    (0, _classCallCheck2.default)(this, CategoryHeadingItem);
+    _this3 = _callSuper(this, CategoryHeadingItem, [props, _EmojiPickerSizes.sizes.categoryHeadingHeight]);
+    (0, _defineProperty2.default)(_this3, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(_EmojiPickerCategoryHeading.default, _this3.props);
+    });
+    return _this3;
+  }
+  (0, _inherits2.default)(CategoryHeadingItem, _AbstractItem3);
+  return (0, _createClass2.default)(CategoryHeadingItem);
+}(AbstractItem);
+var virtualItemRenderer = exports.virtualItemRenderer = function virtualItemRenderer(rows, context) {
+  var index = context.index,
+    key = context.key;
+  var row = rows[index];
+  return /*#__PURE__*/React.createElement("div", {
+    key: key
+  }, row && row.renderItem(context));
+};

package/dist/cjs/components/compiled/picker/VirtualList.compiled.css

@@ -0,0 +1,10 @@
+._154iidpf{top:0}
+._18m91wug{overflow-y:auto}
+._1bsb1osq{width:100%}
+._1ltvidpf{left:0}
+._1reo15vq{overflow-x:hidden}
+._kqswstnw{position:absolute}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._1hvw1o36:focus{outline-width:medium}
+._49pcglyw:focus{outline-style:none}
+._nt751r31:focus{outline-color:currentColor}

package/dist/cjs/components/compiled/picker/VirtualList.js

@@ -0,0 +1,303 @@
+/* VirtualList.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.virtualListScrollContainerTestId = exports.VirtualList = void 0;
+require("./VirtualList.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactVirtual = require("@tanstack/react-virtual");
+var _useEmojiPickerListContext = require("../../../hooks/useEmojiPickerListContext");
+var _constants = require("../../../util/constants");
+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; }
+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) { (0, _defineProperty2.default)(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; }
+var virtualList = null;
+var virtualRowStyle = null;
+var virtualListScrollContainerTestId = exports.virtualListScrollContainerTestId = 'virtual-list-scroll-container';
+var VirtualList = exports.VirtualList = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var parentRef = _react.default.useRef(null);
+  var virtualistItemsRef = _react.default.useRef(null);
+  var rowRenderer = props.rowRenderer,
+    onRowsRendered = props.onRowsRendered,
+    scrollToAlignment = props.scrollToAlignment,
+    width = props.width,
+    height = props.height,
+    rowCount = props.rowCount;
+  var _useEmojiPickerListCo = (0, _useEmojiPickerListContext.useEmojiPickerListContext)(),
+    currentEmojisFocus = _useEmojiPickerListCo.currentEmojisFocus,
+    setEmojisFocus = _useEmojiPickerListCo.setEmojisFocus;
+  var getVirtualizerOptions = function getVirtualizerOptions() {
+    var rowCount = props.rowCount,
+      rowHeight = props.rowHeight,
+      overscanRowCount = props.overscanRowCount;
+    return {
+      count: rowCount,
+      getScrollElement: function getScrollElement() {
+        return parentRef.current;
+      },
+      estimateSize: rowHeight,
+      overscan: overscanRowCount,
+      onChange: function onChange() {
+        var startIndex = getFirstVisibleListElementIndex();
+        onRowsRendered({
+          startIndex: startIndex
+        });
+      },
+      scrollPaddingStart: 28,
+      scrollPaddingEnd: 28
+    };
+  };
+  var rowVirtualizer = (0, _reactVirtual.useVirtualizer)(getVirtualizerOptions());
+  var isElementVisible = function isElementVisible(element) {
+    var parent = parentRef.current;
+    var elementRect = element.getBoundingClientRect();
+    var parentRect = parent.getBoundingClientRect();
+    var elemTop = elementRect.top;
+    var elemBottom = elementRect.bottom;
+    var parentTop = parentRect.top;
+    var parentBottom = parentRect.bottom;
+
+    // Only completely visible elements return true:
+    var isVisible = elemTop >= parentTop && elemBottom <= parentBottom;
+    return isVisible;
+  };
+  var getFirstVisibleListElementIndex = (0, _react.useCallback)(function () {
+    var _parentRef$current;
+    var virtualList = rowVirtualizer.getVirtualItems();
+    var renderedElements = (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 || (_parentRef$current = _parentRef$current.firstChild) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.childNodes;
+    if (virtualList.length === 0 || !renderedElements || renderedElements.length === 0) {
+      return 0;
+    }
+    // Convert NodeListOf<ChildNodes> to ChildNodes[]
+    var renderedElementsToArray = Array.from(renderedElements);
+    var firstVisibleIndex = renderedElementsToArray.findIndex(function (elem) {
+      return isElementVisible(elem);
+    });
+    if (firstVisibleIndex !== -1) {
+      var _virtualList$firstVis;
+      return ((_virtualList$firstVis = virtualList[firstVisibleIndex]) === null || _virtualList$firstVis === void 0 ? void 0 : _virtualList$firstVis.index) || 0;
+    }
+    return 0;
+  }, [rowVirtualizer]);
+
+  /**
+   * Recurisive function to find next available emoji and it's focus indexes in the grid
+   *
+   * current focus element is at rowIndex.columnIndex
+   * if found element then return the element and focus indexes
+   * otherwise change row/column till find the element
+   * if can't find the element till reach the edge of grid, we keep current focus states
+   *
+   * @param rowIndex search from row index (0 based)
+   * @param columnIndex search from column index (0 based)
+   * @param direction search direction
+   */
+  var findNextEmoji = (0, _react.useCallback)(function (rowIndex, columnIndex, direction) {
+    var _virtualistItemsRef$c;
+    var emojiToFocus = (_virtualistItemsRef$c = virtualistItemsRef.current) === null || _virtualistItemsRef$c === void 0 ? void 0 : _virtualistItemsRef$c.querySelector("[data-focus-index=\"".concat(rowIndex, "-").concat(columnIndex, "\"]"));
+    var lastRowIndex = rowCount - 1;
+    var lastColumnIndex = _constants.EMOJI_LIST_COLUMNS - 1;
+    if (emojiToFocus) {
+      return {
+        element: emojiToFocus,
+        rowIndex: rowIndex,
+        columnIndex: columnIndex
+      };
+    }
+    switch (direction) {
+      case _constants.KeyboardNavigationDirection.Down:
+        if (rowIndex >= lastRowIndex) {
+          return null;
+        }
+        // find emoji in same column but lower row
+        return findNextEmoji(rowIndex + 1, columnIndex, _constants.KeyboardNavigationDirection.Down);
+      case _constants.KeyboardNavigationDirection.Up:
+        if (rowIndex <= 0) {
+          return null;
+        }
+        // find emoji in same column but upper row
+        return findNextEmoji(rowIndex - 1, columnIndex, _constants.KeyboardNavigationDirection.Up);
+      case _constants.KeyboardNavigationDirection.Left:
+        if (rowIndex <= 0) {
+          return null;
+        }
+        if (columnIndex < 0) {
+          // find emoji in upper row
+          return findNextEmoji(rowIndex - 1, lastColumnIndex, _constants.KeyboardNavigationDirection.Left);
+        }
+        // find emoji on left in the current row
+        return findNextEmoji(rowIndex, columnIndex - 1, _constants.KeyboardNavigationDirection.Left);
+      case _constants.KeyboardNavigationDirection.Right:
+        if (rowIndex >= lastRowIndex) {
+          return null;
+        }
+        // if no emoji on right, we try first emoji in next row
+        return findNextEmoji(rowIndex + 1, 0, _constants.KeyboardNavigationDirection.Right);
+      default:
+        return null;
+    }
+  }, [rowCount]);
+
+  /**
+   * Find the valid emoji to scroll and focus
+   */
+  var scrollToRowAndFocusEmoji = (0, _react.useCallback)(function (emojiToFocus) {
+    if (emojiToFocus) {
+      var _emojiToFocus$element;
+      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex);
+      (_emojiToFocus$element = emojiToFocus.element) === null || _emojiToFocus$element === void 0 || _emojiToFocus$element.focus({
+        preventScroll: true
+      });
+      setEmojisFocus({
+        rowIndex: emojiToFocus.rowIndex,
+        columnIndex: emojiToFocus.columnIndex
+      });
+    }
+  }, [rowVirtualizer, setEmojisFocus]);
+  var focusEmoji = (0, _react.useCallback)(function (rIndex, cIndex, direction) {
+    var waitForScrollFinish = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    if (waitForScrollFinish) {
+      // scroll to target rowIndex first to ensure the row is rendered in list.
+      // used in page up/down, ctrl+Home, ctrl+End
+      rowVirtualizer.scrollToIndex(rIndex);
+      setTimeout(function () {
+        var emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
+        scrollToRowAndFocusEmoji(emojiToFocus);
+      }, 100); // 100ms is virtual list scrolling time
+    } else {
+      var emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
+      scrollToRowAndFocusEmoji(emojiToFocus);
+    }
+  }, [scrollToRowAndFocusEmoji, findNextEmoji, rowVirtualizer]);
+
+  // following the guide from https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+  var handleKeyDown = function handleKeyDown(e) {
+    if (!_constants.EMOJIPICKERLIST_KEYBOARD_KEYS_SUPPORTED.includes(e.key)) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    var lastRowIndex = rowCount - 1;
+    var lastColumnIndex = _constants.EMOJI_LIST_COLUMNS - 1;
+
+    // focus first emoji on first row
+    if (e.key === _constants.KeyboardKeys.Home && e.ctrlKey) {
+      focusEmoji(1, 0, _constants.KeyboardNavigationDirection.Up, true);
+      return;
+    } else if (e.key === _constants.KeyboardKeys.End && e.ctrlKey) {
+      // focus last available emoji on last row
+      focusEmoji(lastRowIndex, lastColumnIndex, _constants.KeyboardNavigationDirection.Left, true);
+      return;
+    }
+    switch (e.key) {
+      // navigate to the right column
+      case _constants.KeyboardKeys.ArrowRight:
+        focusEmoji(currentEmojisFocus.rowIndex, currentEmojisFocus.columnIndex + 1, _constants.KeyboardNavigationDirection.Right);
+        break;
+      // navigate to the left column
+      case _constants.KeyboardKeys.ArrowLeft:
+        focusEmoji(currentEmojisFocus.rowIndex, currentEmojisFocus.columnIndex - 1, _constants.KeyboardNavigationDirection.Left);
+        break;
+      // navigate to the down row
+      case _constants.KeyboardKeys.ArrowDown:
+        focusEmoji(currentEmojisFocus.rowIndex === lastRowIndex ? lastRowIndex : currentEmojisFocus.rowIndex + 1, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Down);
+        break;
+      // navigate to the row after {EMOJI_LIST_PAGE_COUNT} rows
+      case _constants.KeyboardKeys.PageDown:
+        focusEmoji(currentEmojisFocus.rowIndex + _constants.EMOJI_LIST_PAGE_COUNT, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Down, true);
+        break;
+      // navigate to the up row
+      case _constants.KeyboardKeys.ArrowUp:
+        focusEmoji(currentEmojisFocus.rowIndex <= 1 ? 1 : currentEmojisFocus.rowIndex - 1, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Up);
+        break;
+      // navigate to the row before {EMOJI_LIST_PAGE_COUNT} rows
+      case _constants.KeyboardKeys.PageUp:
+        focusEmoji(currentEmojisFocus.rowIndex - _constants.EMOJI_LIST_PAGE_COUNT, currentEmojisFocus.columnIndex, _constants.KeyboardNavigationDirection.Up, true);
+        break;
+      // navigate to the first cell of current row
+      case _constants.KeyboardKeys.Home:
+        focusEmoji(currentEmojisFocus.rowIndex, 0, _constants.KeyboardNavigationDirection.Left);
+        break;
+      // navigate to the last cell of current row
+      case _constants.KeyboardKeys.End:
+        focusEmoji(currentEmojisFocus.rowIndex, lastColumnIndex, _constants.KeyboardNavigationDirection.Left);
+        break;
+    }
+  };
+
+  // Exposing a custom ref handle to the parent component EmojiPickerList to trigger scrollToRow via the listRef
+  // https://beta.reactjs.org/reference/react/useImperativeHandle
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      scrollToRow: function scrollToRow(index) {
+        if (index !== undefined) {
+          rowVirtualizer.setOptions(_objectSpread(_objectSpread({}, rowVirtualizer.options), {}, {
+            scrollPaddingStart: 0
+          }));
+          rowVirtualizer.scrollToIndex(index, {
+            align: scrollToAlignment
+          });
+        }
+      },
+      scrollToRowAndFocusLastEmoji: function scrollToRowAndFocusLastEmoji(index) {
+        if (index !== undefined) {
+          focusEmoji(index, _constants.EMOJI_LIST_COLUMNS, _constants.KeyboardNavigationDirection.Left, true);
+        }
+      },
+      scrollToEmojiAndFocus: function scrollToEmojiAndFocus(rowIndex, columnIndex) {
+        focusEmoji(rowIndex, columnIndex, _constants.KeyboardNavigationDirection.Left, true);
+      },
+      updateFocusIndex: function updateFocusIndex(rowIndex) {
+        var _virtualistItemsRef$c2;
+        var columnIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        // row could be removed from virtual list after scrolling, we'll update emoji cell tabIndex after losing focus
+        if (!((_virtualistItemsRef$c2 = virtualistItemsRef.current) !== null && _virtualistItemsRef$c2 !== void 0 && _virtualistItemsRef$c2.contains(document.activeElement))) {
+          setEmojisFocus({
+            rowIndex: rowIndex,
+            columnIndex: columnIndex
+          });
+        }
+      }
+    };
+  }, [setEmojisFocus, focusEmoji, rowVirtualizer, scrollToAlignment]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: parentRef,
+    style: {
+      height: "".concat(height, "px"),
+      width: "".concat(width, "px")
+    },
+    "data-testid": virtualListScrollContainerTestId,
+    "aria-labelledby": "emoji-picker-table-description",
+    role: "grid",
+    className: (0, _runtime.ax)(["_1reo15vq _18m91wug _n3tdu2gc _nt751r31 _49pcglyw _1hvw1o36"])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: "".concat(rowVirtualizer.getTotalSize(), "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      width: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      position: 'relative'
+    },
+    ref: virtualistItemsRef,
+    onKeyDown: handleKeyDown,
+    role: "presentation"
+  }, rowVirtualizer.getVirtualItems().map(function (virtualRow, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: virtualRow.key,
+      style: {
+        height: "".concat(virtualRow.size, "px"),
+        transform: "translateY(".concat(virtualRow.start, "px)")
+      },
+      role: "row",
+      "aria-rowindex": index + 1,
+      className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq"])
+    }, rowRenderer(virtualRow));
+  })));
+});

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

@@ -15,8 +15,6 @@ var _styles = require("./styles");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-// ED-26865: use compiled EmojiPreviewComponent when migrating picker to compiled css
-
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
 var emojiPickerFooterTestId = exports.emojiPickerFooterTestId = 'emoji-picker-footer';