@atlaskit/emoji 70.13.0 → 70.14.0

package/dist/esm/components/picker/EmojiPickerNoResults.js

@@ -0,0 +1,38 @@
+/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./EmojiPickerNoResults.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback } from 'react';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { FormattedMessage } from 'react-intl';
+import AkButton from '@atlaskit/button/standard-button';
+import { messages } from '../i18n';
+import SearchNoResultDark from './assets/spot/search-no-result/SearchNoResultDark';
+import SearchNoResultLight from './assets/spot/search-no-result/SearchNoResultLight';
+var noResultsContainer = null;
+export var RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
+var EmojiPickerNoResults = function EmojiPickerNoResults(_ref) {
+  var onOpenUpload = _ref.onOpenUpload,
+    uploadEnabled = _ref.uploadEnabled;
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  var handleOpenUpload = useCallback(function (event) {
+    if (fg('platform_emoji_keep_picker_open_on_upload')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    onOpenUpload();
+  }, [onOpenUpload]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDER_EMOJI_PICKER_NO_RESULTS_TESTID,
+    className: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
+  }, colorMode === 'dark' ? /*#__PURE__*/React.createElement(SearchNoResultDark, null) : /*#__PURE__*/React.createElement(SearchNoResultLight, null), uploadEnabled && /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPickerAddCustomEmoji, function (label) {
+    return /*#__PURE__*/React.createElement(AkButton, {
+      onClick: handleOpenUpload,
+      appearance: "default",
+      tabIndex: 0
+    }, label);
+  }));
+};
+export default EmojiPickerNoResults;

package/dist/esm/components/picker/EmojiPickerSizes.js

@@ -13,6 +13,8 @@ export var sizes = {
   // 32px height
   loadingRowHeight: 150,
   // Fills remaining space without scrolling when loading.
+  noResultsHeight: 300,
+  // illustration (200px) + button + padding + gap
   uploadActionHeight: 40,
   // 40px height
   emojiPerRow: 8

package/dist/esm/components/picker/EmojiPickerVirtualItems.js

@@ -14,6 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import Spinner from '@atlaskit/spinner';
 import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
+import EmojiPickerNoResults from './EmojiPickerNoResults';
 import { sizes } from './EmojiPickerSizes';
 var emojiPickerSpinner = null;
 export var AbstractItem = /*#__PURE__*/_createClass(function AbstractItem(props, height) {
@@ -66,6 +67,19 @@ export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
   _inherits(CategoryHeadingItem, _AbstractItem3);
   return _createClass(CategoryHeadingItem);
 }(AbstractItem);
+export var NoResultsItem = /*#__PURE__*/function (_AbstractItem4) {
+  function NoResultsItem(props) {
+    var _this4;
+    _classCallCheck(this, NoResultsItem);
+    _this4 = _callSuper(this, NoResultsItem, [props, sizes.noResultsHeight]);
+    _defineProperty(_this4, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(EmojiPickerNoResults, _this4.props);
+    });
+    return _this4;
+  }
+  _inherits(NoResultsItem, _AbstractItem4);
+  return _createClass(NoResultsItem);
+}(AbstractItem);
 export var virtualItemRenderer = function virtualItemRenderer(rows, context) {
   var index = context.index,
     key = context.key;

package/dist/esm/components/picker/assets/spot/search-no-result/SearchNoResultDark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+var SearchNoResultDark = function SearchNoResultDark() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "200",
+    height: "200",
+    viewBox: "0 0 275 275",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M191.87 88.6702C189.59 84.3102 186.8 79.9902 183.57 75.8102C180.3 71.5802 176.77 67.7402 173.07 64.4102C151.47 44.9002 123.96 41.9102 97.58 56.2202C93.31 58.5402 89.09 61.3002 85.04 64.4402C80.83 67.6902 76.96 71.2302 73.51 74.9502C53.12 96.9602 49.08 124.3 62.42 149.98C64.72 154.4 67.54 158.79 70.81 163.02C74.04 167.2 77.53 170.98 81.18 174.28C93.68 185.57 108.23 191.29 123.43 191.29C134.33 191.29 145.56 188.35 156.61 182.41C161.07 180.01 165.47 177.15 169.68 173.89C173.74 170.75 177.47 167.36 180.79 163.82C201.31 141.86 205.35 114.47 191.87 88.6802V88.6702ZM161.31 163.04C157.7 165.83 153.94 168.29 150.14 170.33C128.76 181.81 107.54 179.6 90.38 164.1C87.33 161.34 84.4 158.16 81.66 154.62C78.89 151.03 76.5 147.34 74.58 143.65C63.91 123.12 67.1 102.02 83.56 84.2502C86.49 81.0802 89.81 78.0602 93.42 75.2702C96.89 72.5802 100.49 70.2302 104.12 68.2602C113.08 63.4002 122.03 60.9802 130.69 60.9802C142.58 60.9802 153.9 65.5402 163.89 74.5702C166.98 77.3602 169.96 80.6002 172.73 84.1902C175.46 87.7302 177.82 91.3702 179.72 95.0102C190.49 115.63 187.32 136.74 170.77 154.45C167.96 157.46 164.77 160.35 161.29 163.04H161.31Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M179.96 171C176.42 166.07 172.62 166.1 168.91 168.97C165.43 171.66 164.5 175.3 168.21 180.09L172.45 185.57L184.2 176.48L179.96 171Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+    fill: "#7E8188"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M157.715 95.8255L103.735 149.805L96.6643 142.734L150.644 88.7544L157.715 95.8255Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M150.644 149.805L96.6643 95.8255L103.735 88.7544L157.715 142.734L150.644 149.805Z",
+    fill: "#4B4D51"
+  }));
+};
+export default SearchNoResultDark;

package/dist/esm/components/picker/assets/spot/search-no-result/SearchNoResultLight.js

@@ -0,0 +1,36 @@
+import React from 'react';
+var SearchNoResultLight = function SearchNoResultLight() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "200",
+    height: "200",
+    viewBox: "0 0 275 275",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M185.8 91.8398C183.73 87.8698 181.19 83.9198 178.16 79.9998C175.09 76.0298 171.85 72.5298 168.49 69.4898C148.48 51.4098 123.89 49.7498 100.86 62.2398C96.93 64.3698 93.05 66.9098 89.24 69.8498C85.27 72.9198 81.7 76.1798 78.54 79.5898C60.71 98.8298 56.14 123 68.5 146.8C70.59 150.82 73.16 154.83 76.23 158.81C79.26 162.73 82.45 166.18 85.77 169.18C105.65 187.13 130.22 188.8 153.36 176.36C157.46 174.16 161.51 171.53 165.48 168.46C169.29 165.52 172.72 162.39 175.77 159.13C193.68 139.96 198.25 115.7 185.78 91.8398H185.8Z",
+    fill: "white"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.44 191.28C108.24 191.28 93.7 185.56 81.19 174.27C77.54 170.97 74.05 167.18 70.82 163.01C67.55 158.78 64.72 154.39 62.43 149.97C49.09 124.3 53.13 96.9499 73.52 74.9399C76.97 71.2199 80.85 67.6799 85.05 64.4299C89.1 61.2999 93.32 58.5299 97.59 56.2099C123.97 41.8999 151.49 44.8899 173.08 64.3999C176.77 67.7399 180.3 71.5699 183.58 75.7999C186.81 79.9699 189.6 84.2999 191.88 88.6599C205.36 114.45 201.32 141.84 180.8 163.8C177.49 167.35 173.75 170.74 169.69 173.87C165.48 177.12 161.08 179.99 156.62 182.39C145.57 188.33 134.33 191.27 123.44 191.27V191.28ZM130.69 60.9799C122.04 60.9799 113.08 63.3899 104.12 68.2599C100.5 70.2299 96.9 72.5899 93.42 75.2699C89.81 78.0599 86.49 81.0799 83.56 84.2499C67.1 102.02 63.91 123.11 74.58 143.65C76.5 147.34 78.88 151.04 81.66 154.62C84.39 158.15 87.32 161.34 90.38 164.1C107.54 179.6 128.76 181.81 150.14 170.33C153.94 168.29 157.7 165.84 161.31 163.04C164.79 160.35 167.97 157.46 170.79 154.45C187.34 136.74 190.51 115.63 179.74 95.0099C177.84 91.3699 175.48 87.7199 172.75 84.1899C169.97 80.5999 167 77.3599 163.91 74.5699C153.91 65.5399 142.59 60.9799 130.71 60.9799H130.69Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M179.96 171C176.42 166.07 172.62 166.1 168.91 168.97C165.43 171.66 164.5 175.3 168.21 180.09L172.45 185.57L184.2 176.48L179.96 171Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+    fill: "#B7B9BE"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M157.715 95.8255L103.735 149.805L96.6643 142.734L150.644 88.7544L157.715 95.8255Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M150.644 149.805L96.6643 95.8255L103.735 88.7544L157.715 142.734L150.644 149.805Z",
+    fill: "#DDDEE1"
+  }));
+};
+export default SearchNoResultLight;

package/dist/esm/util/analytics/analytics.js

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

package/dist/types/components/i18n.d.ts

@@ -119,11 +119,21 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiPickerAddCustomEmoji: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiPickerGrid: {
         defaultMessage: string;
         description: string;
         id: string;
     };
+    emojiPickerNoResults: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiPickerListPanel: {
         defaultMessage: string;
         description: string;

package/dist/types/components/picker/EmojiPickerNoResults.d.ts

@@ -0,0 +1,7 @@
+export declare const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = "render-emoji-picker-no-results";
+export interface Props {
+    onOpenUpload: () => void;
+    uploadEnabled: boolean;
+}
+declare const EmojiPickerNoResults: ({ onOpenUpload, uploadEnabled }: Props) => JSX.Element;
+export default EmojiPickerNoResults;

package/dist/types/components/picker/EmojiPickerSizes.d.ts

@@ -7,6 +7,7 @@ export declare const sizes: {
     listHeightNew: number;
     listWidth: number;
     loadingRowHeight: number;
+    noResultsHeight: number;
     searchHeight: number;
     uploadActionHeight: number;
 };

package/dist/types/components/picker/EmojiPickerVirtualItems.d.ts

@@ -5,6 +5,7 @@
 import type { ReactNode } from 'react';
 import { type Props as CategoryHeadingProps } from './EmojiPickerCategoryHeading';
 import { type Props as EmojiRowProps } from './EmojiPickerEmojiRow';
+import { type Props as NoResultsProps } from './EmojiPickerNoResults';
 import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
 export interface RenderItem {
     (context?: VirtualItemContext): ReactNode;
@@ -32,4 +33,8 @@ export declare class CategoryHeadingItem extends AbstractItem<CategoryHeadingPro
     constructor(props: CategoryHeadingProps);
     renderItem: () => JSX.Element;
 }
-export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | {}>[], context: VirtualItemContext) => JSX.Element;
+export declare class NoResultsItem extends AbstractItem<NoResultsProps> {
+    constructor(props: NoResultsProps);
+    renderItem: () => JSX.Element;
+}
+export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | NoResultsProps | {}>[], context: VirtualItemContext) => JSX.Element;

package/dist/types/components/picker/assets/spot/search-no-result/SearchNoResultDark.d.ts

@@ -0,0 +1,2 @@
+declare const SearchNoResultDark: () => JSX.Element;
+export default SearchNoResultDark;

package/dist/types/components/picker/assets/spot/search-no-result/SearchNoResultLight.d.ts

@@ -0,0 +1,2 @@
+declare const SearchNoResultLight: () => JSX.Element;
+export default SearchNoResultLight;

package/dist/types-ts4.5/components/i18n.d.ts

@@ -119,11 +119,21 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiPickerAddCustomEmoji: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiPickerGrid: {
         defaultMessage: string;
         description: string;
         id: string;
     };
+    emojiPickerNoResults: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiPickerListPanel: {
         defaultMessage: string;
         description: string;

package/dist/types-ts4.5/components/picker/EmojiPickerNoResults.d.ts

@@ -0,0 +1,7 @@
+export declare const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = "render-emoji-picker-no-results";
+export interface Props {
+    onOpenUpload: () => void;
+    uploadEnabled: boolean;
+}
+declare const EmojiPickerNoResults: ({ onOpenUpload, uploadEnabled }: Props) => JSX.Element;
+export default EmojiPickerNoResults;

package/dist/types-ts4.5/components/picker/EmojiPickerSizes.d.ts

@@ -7,6 +7,7 @@ export declare const sizes: {
     listHeightNew: number;
     listWidth: number;
     loadingRowHeight: number;
+    noResultsHeight: number;
     searchHeight: number;
     uploadActionHeight: number;
 };

package/dist/types-ts4.5/components/picker/EmojiPickerVirtualItems.d.ts

@@ -5,6 +5,7 @@
 import type { ReactNode } from 'react';
 import { type Props as CategoryHeadingProps } from './EmojiPickerCategoryHeading';
 import { type Props as EmojiRowProps } from './EmojiPickerEmojiRow';
+import { type Props as NoResultsProps } from './EmojiPickerNoResults';
 import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
 export interface RenderItem {
     (context?: VirtualItemContext): ReactNode;
@@ -32,4 +33,8 @@ export declare class CategoryHeadingItem extends AbstractItem<CategoryHeadingPro
     constructor(props: CategoryHeadingProps);
     renderItem: () => JSX.Element;
 }
-export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | {}>[], context: VirtualItemContext) => JSX.Element;
+export declare class NoResultsItem extends AbstractItem<NoResultsProps> {
+    constructor(props: NoResultsProps);
+    renderItem: () => JSX.Element;
+}
+export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | NoResultsProps | {}>[], context: VirtualItemContext) => JSX.Element;

package/dist/types-ts4.5/components/picker/assets/spot/search-no-result/SearchNoResultDark.d.ts

@@ -0,0 +1,2 @@
+declare const SearchNoResultDark: () => JSX.Element;
+export default SearchNoResultDark;

package/dist/types-ts4.5/components/picker/assets/spot/search-no-result/SearchNoResultLight.d.ts

@@ -0,0 +1,2 @@
+declare const SearchNoResultLight: () => JSX.Element;
+export default SearchNoResultLight;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "70.13.0",
+	"version": "70.14.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -45,6 +45,7 @@
 		"@atlaskit/form": "^15.5.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/icon": "^35.3.0",
+		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/media-client": "^36.3.0",
 		"@atlaskit/media-client-react": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",