@atlaskit/smart-user-picker 4.0.0

package/dist/es2019/service/users-client.js

@@ -0,0 +1,52 @@
+import { UNKNOWN_USER } from './constants';
+import { graphqlQuery } from './graphqlUtils';
+import { getConfig } from '../config';
+
+/**
+ * @param  {string} accountIds ids to hydrate
+ * @return GraphQL Query
+ */
+const buildUsersQuery = accountIds => ({
+  query: `query usersQuery($accountIds: [ID!]!) {
+    users(accountIds: $accountIds) {
+      name
+      accountId
+      picture
+    }
+  }`,
+  variables: {
+    accountIds
+  }
+});
+
+const makeRequest = async (url, accountIds) => {
+  const query = buildUsersQuery(accountIds);
+  return await graphqlQuery(url, query);
+};
+
+const modifyResponse = users => users.map(({
+  accountId,
+  name,
+  picture
+}) => ({
+  avatarUrl: picture,
+  id: accountId,
+  name,
+  type: 'user'
+}));
+
+const getHydratedUsers = (baseUrl, userIds) => {
+  const url = getConfig().getGraphQLUrl(baseUrl);
+  return new Promise(resolve => {
+    makeRequest(url, userIds).then(data => {
+      resolve(modifyResponse(data.users));
+    }).catch(() => {
+      // on network error, return original list with label 'Unknown'
+      resolve(userIds.map(id => ({ ...UNKNOWN_USER,
+        id
+      })));
+    });
+  });
+};
+
+export default getHydratedUsers;

package/dist/es2019/service/users-transformer.js

@@ -0,0 +1,73 @@
+import { TeamType, UserType, GroupType } from '@atlaskit/user-picker';
+import { messages } from '../i18n';
+var EntityType;
+
+(function (EntityType) {
+  EntityType["USER"] = "USER";
+  EntityType["TEAM"] = "TEAM";
+  EntityType["GROUP"] = "GROUP";
+})(EntityType || (EntityType = {}));
+
+const getLozenzeProperties = (entity, intl) => {
+  var _entity$attributes, _entity$attributes2;
+
+  if ((_entity$attributes = entity.attributes) !== null && _entity$attributes !== void 0 && _entity$attributes.workspaceMember) {
+    return intl.formatMessage(messages.memberLozengeText);
+  }
+
+  if ((_entity$attributes2 = entity.attributes) !== null && _entity$attributes2 !== void 0 && _entity$attributes2.isConfluenceExternalCollaborator) {
+    const lozengeTooltipMessage = entity.entityType === EntityType.GROUP ? messages.guestGroupLozengeTooltip : messages.guestUserLozengeTooltip;
+    return {
+      text: intl.formatMessage(messages.guestLozengeText),
+      tooltip: intl.formatMessage(lozengeTooltipMessage),
+      appearance: 'new'
+    };
+  }
+
+  return undefined;
+};
+
+const transformUser = (item, intl) => {
+  const type = item.entityType;
+
+  if (type === EntityType.USER) {
+    const user = item;
+    const lozenge = getLozenzeProperties(user, intl);
+    return {
+      id: user.id,
+      type: UserType,
+      avatarUrl: user.avatarUrl,
+      name: user.name,
+      email: user.email,
+      lozenge: lozenge
+    };
+  }
+
+  if (type === EntityType.TEAM) {
+    const team = item;
+    return {
+      id: team.id,
+      type: TeamType,
+      description: team.description || '',
+      name: team.displayName || '',
+      memberCount: team.memberCount,
+      includesYou: team.includesYou,
+      avatarUrl: team.largeAvatarImageUrl || team.smallAvatarImageUrl
+    };
+  }
+
+  if (type === EntityType.GROUP) {
+    const group = item;
+    const lozenge = getLozenzeProperties(group, intl);
+    return {
+      id: group.id,
+      type: GroupType,
+      name: group.name || '',
+      lozenge: lozenge
+    };
+  }
+
+  return;
+};
+
+export const transformUsers = (serverResponse, intl) => (serverResponse.recommendedUsers || []).map(item => transformUser(item, intl)).filter(user => !!user).map(user => user);

package/dist/es2019/types.js

@@ -0,0 +1,7 @@
+export let EntityType;
+
+(function (EntityType) {
+  EntityType["USER"] = "USER";
+  EntityType["TEAM"] = "TEAM";
+  EntityType["GROUP"] = "GROUP";
+})(EntityType || (EntityType = {}));

package/dist/es2019/ufoExperiences.js

@@ -0,0 +1,26 @@
+import { ExperiencePerformanceTypes, ExperienceTypes, ConcurrentExperience } from '@atlaskit/ufo';
+import { useEffect, useState } from 'react';
+const COMPONENT_NAME = 'smart-user-picker';
+export const smartUserPickerRenderedUfoExperience = new ConcurrentExperience('smart-user-picker-rendered', {
+  platform: {
+    component: COMPONENT_NAME
+  },
+  type: ExperienceTypes.Load,
+  performanceType: ExperiencePerformanceTypes.PageSegmentLoad
+});
+export const useUFOConcurrentExperience = (experience, id) => {
+  const experienceForId = experience.getInstance(id); // Equivalent to componentWillMount - replace with @atlaskit/ufo's
+  // useUFOComponentExperience when it supports ConcurrentExperience.
+
+  useState(() => {
+    experienceForId.start();
+  }); // Replace with @atlaskit/ufo's <ExperienceSuccess> when it supports ConcurrentExperience
+
+  useEffect(() => {
+    experienceForId.success();
+    return () => {
+      experienceForId.abort();
+    }; // We only want this useEffect to run once after component mount, so no deps are needed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

package/dist/es2019/util/i18n-util.js

@@ -0,0 +1,231 @@
+/**
+ * Tries to get the most specific messages bundle for a given locale.
+ *
+ * Strategy:
+ * 1. Try to find messages with the exact string (i.e. 'fr_FR')
+ * 2. If that doesn't work, try to find messages for the country locale (i.e. 'fr')
+ * 3. If that doesn't work, return english messages as a fallback.
+ *
+ * @param locale string specifying the locale like 'en_GB', or 'fr'.
+ */
+export const getMessagesForLocale = async locale => {
+  switch (locale) {
+    case 'cs':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-cs" */
+        '../i18n/cs').then(mod => mod.default);
+      }
+
+    case 'da':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-da" */
+        '../i18n/da').then(mod => mod.default);
+      }
+
+    case 'de':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-de" */
+        '../i18n/de').then(mod => mod.default);
+      }
+
+    case 'en':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-en" */
+        '../i18n/en').then(mod => mod.default);
+      }
+
+    case 'en_GB':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-en_GB" */
+        '../i18n/en_GB').then(mod => mod.default);
+      }
+
+    case 'es':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-es" */
+        '../i18n/es').then(mod => mod.default);
+      }
+
+    case 'et':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-et" */
+        '../i18n/et').then(mod => mod.default);
+      }
+
+    case 'fi':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-fi" */
+        '../i18n/fi').then(mod => mod.default);
+      }
+
+    case 'fr':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-fr" */
+        '../i18n/fr').then(mod => mod.default);
+      }
+
+    case 'hu':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-hu" */
+        '../i18n/hu').then(mod => mod.default);
+      }
+
+    case 'is':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-is" */
+        '../i18n/is').then(mod => mod.default);
+      }
+
+    case 'it':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-it" */
+        '../i18n/it').then(mod => mod.default);
+      }
+
+    case 'ja':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-ja" */
+        '../i18n/ja').then(mod => mod.default);
+      }
+
+    case 'ko':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-ko" */
+        '../i18n/ko').then(mod => mod.default);
+      }
+
+    case 'nb':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-nb" */
+        '../i18n/nb').then(mod => mod.default);
+      }
+
+    case 'nl':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-nl" */
+        '../i18n/nl').then(mod => mod.default);
+      }
+
+    case 'pl':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-pl" */
+        '../i18n/pl').then(mod => mod.default);
+      }
+
+    case 'pt_BR':
+    case 'pt-BR':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-pt_BR" */
+        '../i18n/pt_BR').then(mod => mod.default);
+      }
+
+    case 'pt_PT':
+    case 'pt-PT':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-pt_PT" */
+        '../i18n/pt_PT').then(mod => mod.default);
+      }
+
+    case 'ro':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-ro" */
+        '../i18n/ro').then(mod => mod.default);
+      }
+
+    case 'ru':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-ru" */
+        '../i18n/ru').then(mod => mod.default);
+      }
+
+    case 'sk':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-sk" */
+        '../i18n/sk').then(mod => mod.default);
+      }
+
+    case 'sv':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-sv" */
+        '../i18n/sv').then(mod => mod.default);
+      }
+
+    case 'th':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-th" */
+        '../i18n/th').then(mod => mod.default);
+      }
+
+    case 'tr':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-tr" */
+        '../i18n/tr').then(mod => mod.default);
+      }
+
+    case 'uk':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-uk" */
+        '../i18n/uk').then(mod => mod.default);
+      }
+
+    case 'vi':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-vi" */
+        '../i18n/vi').then(mod => mod.default);
+      }
+
+    case 'zh_TW':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-zh_TW" */
+        '../i18n/zh_TW').then(mod => mod.default);
+      }
+
+    case 'zh':
+      {
+        return import(
+        /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-zh" */
+        '../i18n/zh').then(mod => mod.default);
+      }
+
+    default:
+      {
+        const fragments = locale.split(/[_-]/);
+
+        if (fragments.length === 2) {
+          return getMessagesForLocale(fragments[0]);
+        } else {
+          return import(
+          /* webpackChunkName: "@atlaskit-internal_user-picker-i18n-en" */
+          '../i18n/en').then(mod => mod.default);
+        }
+      }
+  }
+};

package/dist/es2019/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/smart-user-picker",
+	"version": "4.0.0",
+	"sideEffects": false
+}

package/dist/esm/analytics.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { v4 as uuid } from 'uuid';
+import { name as packageName, version as packageVersion } from './version.json';
+export var startSession = function startSession() {
+  return {
+    id: uuid(),
+    start: Date.now(),
+    inputChangeTime: Date.now(),
+    upCount: 0,
+    downCount: 0,
+    lastKey: undefined
+  };
+};
+export var createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
+
+var createEvent = function createEvent(eventType, action, actionSubject) {
+  var attributes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  return {
+    eventType: eventType,
+    action: action,
+    actionSubject: actionSubject,
+    attributes: _objectSpread({
+      packageName: packageName,
+      packageVersion: packageVersion
+    }, attributes)
+  };
+};
+
+var createDefaultSmartPickerAttributes = function createDefaultSmartPickerAttributes(props, state) {
+  var fieldId = props.fieldId,
+      objectId = props.objectId,
+      containerId = props.containerId,
+      childObjectId = props.childObjectId,
+      prefetch = props.prefetch,
+      maxOptions = props.maxOptions,
+      includeTeams = props.includeTeams,
+      productKey = props.productKey,
+      principalId = props.principalId,
+      siteId = props.siteId,
+      orgId = props.orgId,
+      filterOptions = props.filterOptions;
+  var sessionId = state.sessionId,
+      query = state.query;
+  var maxNumberOfResults = maxOptions || 100;
+  return {
+    context: fieldId,
+    childObjectId: childObjectId,
+    containerId: containerId,
+    hasFilterOptions: Boolean(filterOptions),
+    includeTeams: includeTeams,
+    maxNumberOfResults: maxNumberOfResults,
+    objectId: objectId,
+    prefetch: prefetch,
+    principalId: principalId,
+    productKey: productKey,
+    queryLength: (query || '').length,
+    siteId: siteId,
+    orgId: orgId,
+    sessionId: sessionId
+  };
+};
+
+var createSmartUserPickerEvent = function createSmartUserPickerEvent(action, actionSubect) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return _objectSpread({
+    source: 'smart-user-picker'
+  }, createEvent('operational', action, actionSubect, attributes));
+};
+
+export var preparedUsersLoadedEvent = function preparedUsersLoadedEvent(props, state) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return createSmartUserPickerEvent('loaded', 'preparedUsers', _objectSpread(_objectSpread({}, createDefaultSmartPickerAttributes(props, state)), attributes));
+};
+export var mountedWithPrefetchEvent = function mountedWithPrefetchEvent(props, state) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return createSmartUserPickerEvent('mounted', 'prefetch', _objectSpread(_objectSpread({}, createDefaultSmartPickerAttributes(props, state)), attributes));
+};
+export var filterUsersEvent = function filterUsersEvent(props, state) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return createSmartUserPickerEvent('filtered', 'users', _objectSpread(_objectSpread({}, createDefaultSmartPickerAttributes(props, state)), attributes));
+};
+export var requestUsersEvent = function requestUsersEvent(props, state) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return createSmartUserPickerEvent('requested', 'users', _objectSpread(_objectSpread({}, createDefaultSmartPickerAttributes(props, state)), attributes));
+};
+export var successfulRequestUsersEvent = function successfulRequestUsersEvent(props, state) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return createSmartUserPickerEvent('successful', 'usersRequest', _objectSpread(_objectSpread({}, createDefaultSmartPickerAttributes(props, state)), attributes));
+};
+export var failedRequestUsersEvent = function failedRequestUsersEvent(props, state) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return createSmartUserPickerEvent('failed', 'usersRequest', _objectSpread(_objectSpread({}, createDefaultSmartPickerAttributes(props, state)), attributes));
+};

package/dist/esm/components/MessagesIntlProvider.js

@@ -0,0 +1,50 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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; }
+
+import React, { useMemo } from 'react';
+import { IntlProvider, injectIntl } from 'react-intl-next';
+import { getMessagesForLocale } from '../util/i18n-util';
+var EMPTY = {};
+
+var useI18n = function useI18n(locale) {
+  var _React$useState = React.useState(EMPTY),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      messages = _React$useState2[0],
+      setMessages = _React$useState2[1];
+
+  React.useEffect(function () {
+    var aborted = false;
+    setMessages(EMPTY);
+    getMessagesForLocale(locale).then(function (messages) {
+      if (!aborted) {
+        setMessages(messages);
+      }
+    }).catch(function (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    });
+    return function () {
+      aborted = true;
+    };
+  }, [locale]);
+  return messages;
+};
+
+var MessagesIntlProvider = function MessagesIntlProvider(props) {
+  var intl = props.intl,
+      children = props.children;
+  var messages = useI18n(intl.locale);
+  var mergedMessages = useMemo(function () {
+    return _objectSpread(_objectSpread({}, intl.messages), messages);
+  }, [intl.messages, messages]);
+  return /*#__PURE__*/React.createElement(IntlProvider, {
+    locale: intl.locale,
+    messages: mergedMessages
+  }, children);
+};
+
+export default injectIntl(MessagesIntlProvider);