@atlaskit/emoji 64.2.0 → 64.2.1

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

@@ -0,0 +1,259 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+export var ufoExperiencesSampled = {};
+
+var sampleChance = function sampleChance(min, max) {
+  // min and max included
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export var clearSampled = function clearSampled() {
+  var _iterator = _createForOfIteratorHelper(Object.getOwnPropertyNames(ufoExperiencesSampled)),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var prop = _step.value;
+      delete ufoExperiencesSampled[prop];
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+}; // default sampling function to determine which one to be sampled
+
+export var isExperienceSampled = function isExperienceSampled(rate) {
+  // if invalid sampling rate provided, we sample it
+  if (rate > 1 || rate < 0) {
+    return true;
+  }
+
+  if (rate === 1) {
+    return true;
+  }
+
+  if (rate === 0) {
+    return false;
+  }
+
+  var maxCount = Math.ceil(1 / rate);
+  var chance = sampleChance(1, maxCount);
+  return chance === maxCount;
+};
+
+var hasSampledFromStart = function hasSampledFromStart(experience) {
+  if (!ufoExperiencesSampled[experience.id]) {
+    return false;
+  }
+
+  if (experience.instanceId) {
+    // if the instance of concurrent exp has been sampled from start, allow it.
+    return ufoExperiencesSampled[experience.id].sampledInstance[experience.instanceId];
+  }
+
+  return ufoExperiencesSampled[experience.id].sampled;
+};
+
+/**
+ * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
+ *
+ * e.g. Emoji Picker contains thousands of emojis, which means will trigger a large number of renderred events without sampling
+ * @param ufoExperience
+ * @returns
+ */
+export var withSampling = function withSampling(ufoExperience) {
+  var init = function init() {
+    if (!ufoExperiencesSampled[ufoExperience.id]) {
+      ufoExperiencesSampled[ufoExperience.id] = {
+        sampled: false,
+        sampledInstance: {}
+      };
+    }
+  };
+
+  var start = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(options) {
+      var isSampled;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!hasSampledFromStart(ufoExperience)) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 2:
+              isSampled = options.samplingFunc || isExperienceSampled;
+
+              if (isSampled(options.samplingRate)) {
+                _context.next = 7;
+                break;
+              }
+
+              if (ufoExperience.instanceId) {
+                ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = false;
+              }
+
+              ufoExperiencesSampled[ufoExperience.id].sampled = false;
+              return _context.abrupt("return");
+
+            case 7:
+              // update sampled records
+              if (ufoExperience.instanceId) {
+                ufoExperiencesSampled[ufoExperience.id].sampledInstance[ufoExperience.instanceId] = true;
+                ufoExperiencesSampled[ufoExperience.id].sampled = true;
+              }
+
+              return _context.abrupt("return", ufoExperience.start(options.startTime));
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function start(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  var success = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(config) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (hasSampledFromStart(ufoExperience)) {
+                _context2.next = 2;
+                break;
+              }
+
+              return _context2.abrupt("return", null);
+
+            case 2:
+              return _context2.abrupt("return", ufoExperience.success(config));
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function success(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var failure = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(config) {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (hasSampledFromStart(ufoExperience)) {
+                _context3.next = 2;
+                break;
+              }
+
+              return _context3.abrupt("return", null);
+
+            case 2:
+              return _context3.abrupt("return", ufoExperience.failure(config));
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function failure(_x3) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  var abort = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(config) {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              if (hasSampledFromStart(ufoExperience)) {
+                _context4.next = 2;
+                break;
+              }
+
+              return _context4.abrupt("return", null);
+
+            case 2:
+              return _context4.abrupt("return", ufoExperience.abort(config));
+
+            case 3:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    return function abort(_x4) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var mark = function mark(name, timestamp) {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.mark(name, timestamp);
+  };
+
+  var markFMP = function markFMP(timestamp) {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.markFMP(timestamp);
+  };
+
+  var markInlineResponse = function markInlineResponse(timestamp) {
+    if (!hasSampledFromStart(ufoExperience)) {
+      return;
+    }
+
+    return ufoExperience.markInlineResponse(timestamp);
+  };
+
+  init();
+  return _objectSpread(_objectSpread({}, ufoExperience), {}, {
+    start: start,
+    success: success,
+    failure: failure,
+    abort: abort,
+    mark: mark,
+    markFMP: markFMP,
+    markInlineResponse: markInlineResponse
+  });
+};

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

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+import { withSampling } from './samplingUfo';
+
+var useConstructor = function useConstructor(callback) {
+  var hasBeenFired = useRef(false);
+
+  if (!hasBeenFired.current) {
+    callback();
+    hasBeenFired.current = true;
+  }
+
+  return null;
+};
+/**
+ * A hook to start an experience and to auto abort the experience when the parent component is unmounted.
+ * Use this instead of a direct call to `experience.start`. If you need to restart the experience
+ * simply trigger an unmount and remount of the parent component.
+ * @param experience the experience to start and abort
+ */
+
+
+export var useSampledUFOComponentExperience = function useSampledUFOComponentExperience(experience, samplingRate, metadata) {
+  useEffect(function () {
+    return function () {
+      withSampling(experience).abort();
+    }; // we want this cleanup to only happen on unmount so this is a legit use of empty array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useConstructor(function () {
+    withSampling(experience).start({
+      samplingRate: samplingRate
+    });
+
+    if (metadata) {
+      experience.addMetadata(metadata);
+    }
+  });
+  return null;
+};

package/dist/esm/util/constants.js

@@ -19,4 +19,8 @@ export var selectedToneStorageKey = "".concat(localStoragePrefix, ".selectedTone
 export var defaultCategories = ['PEOPLE', 'NATURE', 'FOODS', 'ACTIVITY', 'PLACES', 'OBJECTS', 'SYMBOLS', 'FLAGS'];
 export var defaultListLimit = 50;
 export var migrationUserId = 'hipchat_migration_emoticons';
-export var analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker';
+export var analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker'; // This is the base sampling rate in Emoji
+
+export var SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05; // This rate is used in ResourceEmoji which will be used in stead of base sampling rate above
+
+export var SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1; // add more sampling rate in parent components like EmojiTypeAheadItem.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "64.2.0",
+	"version": "64.2.1",
 	"sideEffects": false
 }

package/dist/types/api/EmojiResource.d.ts

@@ -59,6 +59,7 @@ export declare class EmojiResource extends AbstractResource<string, EmojiSearchR
     protected selectedTone: ToneSelection;
     protected currentUser?: User;
     constructor(config: EmojiResourceConfig);
+    private getProviderType;
     protected initEmojiRepository(emojiResponses: EmojiResponse[]): void;
     protected initSiteEmojiResource(emojiResponse: EmojiResponse, provider: ServiceConfig): Promise<void>;
     private performRetries;

package/dist/types/components/common/ResourcedEmoji.d.ts

@@ -10,6 +10,8 @@ export default class ResourcedEmoji extends LoadingEmojiComponent<Props, Loading
     state: {
         asyncLoadedComponent: React.ComponentClass<ComponentProps, any>;
     };
+    constructor(props: Props);
+    componentWillUnmount(): void;
     asyncLoadComponent(): void;
     renderLoading(): JSX.Element;
     renderLoaded(loadedEmojiProvider: EmojiProvider, ResourcedEmojiComponent: ComponentClass<ComponentProps>): JSX.Element;

package/dist/types/components/common/UfoErrorBoundary.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UFOExperience } from '@atlaskit/ufo';
+export declare class UfoErrorBoundary extends React.Component<{
+    experiences: UFOExperience[];
+}> {
+    componentDidCatch(): void;
+    render(): React.ReactNode;
+}

package/dist/types/types.d.ts

@@ -296,3 +296,9 @@ export interface User {
 }
 export declare type OptionalUser = User | undefined;
 export declare type Message = React.ReactNode;
+export declare enum ProviderTypes {
+    SITE = "SITE",
+    STANDARD = "STANDARD",
+    ATLASSIAN = "ATLASSIAN",
+    UNKNOWN = "UNKNOWN"
+}

package/dist/types/util/{analytics.d.ts → analytics/analytics.d.ts}

@@ -1,5 +1,9 @@
 import { AnalyticsEventPayload, CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { EmojiDescription } from '../types';
+import { EmojiDescription, EmojiId } from '../../types';
+import { ConcurrentExperience } from '@atlaskit/ufo';
+export declare type UfoExperienceName = 'emoji-rendered' | 'emoji-resource-fetched';
+export declare const ufoExperiences: Record<UfoExperienceName, ConcurrentExperience>;
+export declare const sampledUfoRenderedEmoji: (emojiId: EmojiId) => import("./samplingUfo").WithSampling;
 export declare const createAndFireEventInElementsChannel: (payload: Record<string, any>) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
 export declare type EmojiInsertionAnalytic = (source: 'picker' | 'typeahead') => AnalyticsEventPayload;
 export declare const insertionSucceeded: EmojiInsertionAnalytic;
@@ -42,12 +46,12 @@ export declare const uploadSucceededEvent: (attributes: Duration) => Record<stri
 export declare const uploadFailedEvent: (attributes: {
     reason: string;
 } & Duration) => Record<string, any>;
-interface EmojiId {
+interface Attributes {
     emojiId?: string;
 }
-export declare const deleteBeginEvent: (attributes: EmojiId) => Record<string, any>;
-export declare const deleteConfirmEvent: (attributes: EmojiId) => Record<string, any>;
-export declare const deleteCancelEvent: (attributes: EmojiId) => Record<string, any>;
+export declare const deleteBeginEvent: (attributes: Attributes) => Record<string, any>;
+export declare const deleteConfirmEvent: (attributes: Attributes) => Record<string, any>;
+export declare const deleteCancelEvent: (attributes: Attributes) => Record<string, any>;
 export declare const selectedFileEvent: () => Record<string, any>;
 export declare const typeaheadCancelledEvent: (duration: number, query?: string | undefined, emojiList?: EmojiDescription[] | undefined) => Record<string, any>;
 export declare const typeaheadSelectedEvent: (pressed: boolean, duration: number, emoji: EmojiDescription, emojiList?: EmojiDescription[] | undefined, query?: string | undefined, exactMatch?: boolean | undefined) => Record<string, any>;

package/dist/types/util/analytics/index.d.ts

@@ -0,0 +1,5 @@
+export { ufoExperiencesSampled, clearSampled, isExperienceSampled, withSampling, } from './samplingUfo';
+export type { UFOExperienceSampledRecords, WithSampling } from './samplingUfo';
+export { categoryClickedEvent, createAndFireEventInElementsChannel, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, insertionFailed, insertionSucceeded, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, recordSelectionFailedSli, recordSelectionSucceededSli, sampledUfoRenderedEmoji, selectedFileEvent, toneSelectedEvent, toneSelectorClosedEvent, toneSelectorOpenedEvent, typeaheadCancelledEvent, typeaheadRenderedEvent, typeaheadSelectedEvent, ufoExperiences, uploadBeginButton, uploadCancelButton, uploadConfirmButton, uploadFailedEvent, uploadSucceededEvent, } from './analytics';
+export type { EmojiInsertionAnalytic, UfoExperienceName } from './analytics';
+export { useSampledUFOComponentExperience } from './useSampledUFOComponentExperience';

package/dist/types/util/analytics/samplingUfo.d.ts

@@ -0,0 +1,31 @@
+import { UFOExperience } from '@atlaskit/ufo';
+export interface UFOExperienceSampledRecords {
+    [experienceName: string]: UFOExperienceSampledRecord;
+}
+interface SamplingInstancesRecord {
+    [key: string]: boolean;
+}
+interface UFOExperienceSampledRecord {
+    sampledInstance: SamplingInstancesRecord;
+    sampled: boolean;
+}
+export declare const ufoExperiencesSampled: UFOExperienceSampledRecords;
+declare type SamplingFunc = (rate: number) => boolean;
+export declare const clearSampled: () => void;
+export declare const isExperienceSampled: (rate: number) => boolean;
+export interface WithSampling extends Omit<UFOExperience, 'start'> {
+    start: (options: {
+        samplingRate: number;
+        samplingFunc?: SamplingFunc;
+        startTime?: number;
+    }) => Promise<void>;
+}
+/**
+ * This function is a temp solution to reduce the event traffic, as UFO package does not support it.
+ *
+ * e.g. Emoji Picker contains thousands of emojis, which means will trigger a large number of renderred events without sampling
+ * @param ufoExperience
+ * @returns
+ */
+export declare const withSampling: (ufoExperience: UFOExperience) => WithSampling;
+export {};

package/dist/types/util/analytics/useSampledUFOComponentExperience.d.ts

@@ -0,0 +1,8 @@
+import { CustomData, UFOExperience } from '@atlaskit/ufo';
+/**
+ * A hook to start an experience and to auto abort the experience when the parent component is unmounted.
+ * Use this instead of a direct call to `experience.start`. If you need to restart the experience
+ * simply trigger an unmount and remount of the parent component.
+ * @param experience the experience to start and abort
+ */
+export declare const useSampledUFOComponentExperience: (experience: UFOExperience, samplingRate: number, metadata?: CustomData | undefined) => null;

package/dist/types/util/constants.d.ts

@@ -20,3 +20,5 @@ export declare const defaultCategories: CategoryId[];
 export declare const defaultListLimit = 50;
 export declare const migrationUserId = "hipchat_migration_emoticons";
 export declare const analyticsEmojiPrefix = "atlassian.fabric.emoji.picker";
+export declare const SAMPLING_RATE_EMOJI_RENDERED_EXP = 0.05;
+export declare const SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI = 0.1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "64.2.0",
+  "version": "64.2.1",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,6 +35,7 @@
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",
     "@babel/runtime": "^7.0.0",
     "classnames": "^2.2.5",
@@ -59,6 +60,7 @@
     "@atlaskit/util-data-test": "^17.2.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/ufo": "^0.1.10",
     "@testing-library/react": "^8.0.1",
     "@types/js-search": "^1.4.0",
     "@types/react-virtualized": "^9.18.12",