@atlaskit/user-picker 10.14.0 → 10.16.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/user-picker
 
+## 10.16.0
+
+### Minor Changes
+
+- [#69969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69969) [`c9939127a605`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c9939127a605) - [ux] Render the custom byline instead of email for external users.
+- [#70375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70375) [`723e4a0302b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/723e4a0302b6) - [ux] Adding tooltip to option shown on hover
+
+## 10.15.0
+
+### Minor Changes
+
+- [#68878](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/68878) [`6c49996cd842`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6c49996cd842) - update user recommendations api to return user's title
+
+### Patch Changes
+
+- [#69272](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/69272) [`35f47019f443`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/35f47019f443) - Migrate packages to use declarative entry points
+- Updated dependencies
+
 ## 10.14.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -39,6 +39,9 @@
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/select/afm-cc/tsconfig.json"
         },

package/dist/cjs/analytics.js

@@ -12,7 +12,7 @@ var _utils = require("./components/utils");
 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 packageName = "@atlaskit/user-picker";
-var packageVersion = "10.14.0";
+var packageVersion = "10.16.0";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/ExternalUserOption/main.js

@@ -56,26 +56,40 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
       }, name);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSecondaryText", function () {
-      var email = _this.props.user.email;
-      if (!email) {
+      var _this$props$user = _this.props.user,
+        byline = _this$props$user.byline,
+        email = _this$props$user.email;
+      if (!byline && !email) {
         return;
       }
-      var _email$split = email.split('@'),
-        _email$split2 = (0, _slicedToArray2.default)(_email$split, 2),
-        emailUser = _email$split2[0],
-        emailDomain = _email$split2[1];
-      var emailDomainWithAt = "@".concat(emailDomain);
-      return (0, _react2.jsx)("span", {
-        css: (0, _AvatarItemOption.textWrapper)(_this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
-      }, emailUser, (0, _react2.jsx)("span", {
-        css: emailDomainWrapper
-      }, emailDomainWithAt));
+      var textColor = _this.props.isSelected ? "var(--ds-text-selected, ".concat(_colors.B400, ")") : "var(--ds-text-subtlest, ".concat(_colors.N200, ")");
+
+      // Render byline if present
+      if (byline) {
+        return (0, _react2.jsx)("span", {
+          css: (0, _AvatarItemOption.textWrapper)(textColor)
+        }, byline);
+      }
+
+      // Render email if byline isn't present
+      if (email) {
+        var _email$split = email.split('@'),
+          _email$split2 = (0, _slicedToArray2.default)(_email$split, 2),
+          emailUser = _email$split2[0],
+          emailDomain = _email$split2[1];
+        var emailDomainWithAt = "@".concat(emailDomain);
+        return (0, _react2.jsx)("span", {
+          css: (0, _AvatarItemOption.textWrapper)(textColor)
+        }, emailUser, (0, _react2.jsx)("span", {
+          css: emailDomainWrapper
+        }, emailDomainWithAt));
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAvatar", function () {
       var _this$props = _this.props,
-        _this$props$user = _this$props.user,
-        avatarUrl = _this$props$user.avatarUrl,
-        name = _this$props$user.name,
+        _this$props$user2 = _this$props.user,
+        avatarUrl = _this$props$user2.avatarUrl,
+        name = _this$props$user2.name,
         status = _this$props.status;
       return (0, _react2.jsx)(_SizeableAvatar.SizeableAvatar, {
         appearance: "big",
@@ -120,10 +134,10 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "formattedTooltipContent",
     value: function formattedTooltipContent() {
-      var _this$props$user2 = this.props.user,
-        id = _this$props$user2.id,
-        requiresSourceHydration = _this$props$user2.requiresSourceHydration,
-        sources = _this$props$user2.sources;
+      var _this$props$user3 = this.props.user,
+        id = _this$props$user3.id,
+        requiresSourceHydration = _this$props$user3.requiresSourceHydration,
+        sources = _this$props$user3.sources;
       return (0, _react2.jsx)(_ExternalUserSourcesContainer.ExternalUserSourcesContainer, {
         accountId: id,
         shouldFetchSources: Boolean(requiresSourceHydration),

package/dist/cjs/components/Option.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Option = void 0;
+var _primitives = require("@atlaskit/primitives");
 var _select = require("@atlaskit/select");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _react = _interopRequireDefault(require("react"));
 var _UserOption = require("./UserOption");
 var _ExternalUserOption = _interopRequireDefault(require("./ExternalUserOption"));
@@ -76,8 +78,20 @@ var dataOption = function dataOption(_ref2) {
   }
   return null;
 };
+var dataOptionWithTooltip = function dataOptionWithTooltip(props) {
+  var _props$data;
+  if ((_props$data = props.data) !== null && _props$data !== void 0 && (_props$data = _props$data.data) !== null && _props$data !== void 0 && _props$data.tooltip) {
+    var _props$data2;
+    return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      content: (_props$data2 = props.data) === null || _props$data2 === void 0 || (_props$data2 = _props$data2.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.tooltip
+    }, function (tooltipProps) {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Box, tooltipProps, dataOption(props));
+    });
+  }
+  return dataOption(props);
+};
 var Option = exports.Option = function Option(props) {
   return /*#__PURE__*/_react.default.createElement(_select.components.Option, props, /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
     fallback: defaultOption(props)
-  }, dataOption(props)));
+  }, dataOptionWithTooltip(props)));
 };

package/dist/es2019/analytics.js

@@ -2,7 +2,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "10.14.0";
+const packageVersion = "10.16.0";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/ExternalUserOption/main.js

@@ -39,18 +39,31 @@ class ExternalUserOptionImpl extends React.PureComponent {
     });
     _defineProperty(this, "renderSecondaryText", () => {
       const {
+        byline,
         email
       } = this.props.user;
-      if (!email) {
+      if (!byline && !email) {
         return;
       }
-      const [emailUser, emailDomain] = email.split('@');
-      const emailDomainWithAt = `@${emailDomain}`;
-      return jsx("span", {
-        css: textWrapper(this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`)
-      }, emailUser, jsx("span", {
-        css: emailDomainWrapper
-      }, emailDomainWithAt));
+      const textColor = this.props.isSelected ? `var(--ds-text-selected, ${B400})` : `var(--ds-text-subtlest, ${N200})`;
+
+      // Render byline if present
+      if (byline) {
+        return jsx("span", {
+          css: textWrapper(textColor)
+        }, byline);
+      }
+
+      // Render email if byline isn't present
+      if (email) {
+        const [emailUser, emailDomain] = email.split('@');
+        const emailDomainWithAt = `@${emailDomain}`;
+        return jsx("span", {
+          css: textWrapper(textColor)
+        }, emailUser, jsx("span", {
+          css: emailDomainWrapper
+        }, emailDomainWithAt));
+      }
     });
     _defineProperty(this, "renderAvatar", () => {
       const {

package/dist/es2019/components/Option.js

@@ -1,4 +1,6 @@
+import { Box } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
+import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { UserOption } from './UserOption';
 import AsyncExternalOption from './ExternalUserOption';
@@ -72,6 +74,16 @@ const dataOption = ({
   }
   return null;
 };
+const dataOptionWithTooltip = props => {
+  var _props$data, _props$data$data;
+  if ((_props$data = props.data) !== null && _props$data !== void 0 && (_props$data$data = _props$data.data) !== null && _props$data$data !== void 0 && _props$data$data.tooltip) {
+    var _props$data2, _props$data2$data;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: (_props$data2 = props.data) === null || _props$data2 === void 0 ? void 0 : (_props$data2$data = _props$data2.data) === null || _props$data2$data === void 0 ? void 0 : _props$data2$data.tooltip
+    }, tooltipProps => /*#__PURE__*/React.createElement(Box, tooltipProps, dataOption(props)));
+  }
+  return dataOption(props);
+};
 export const Option = props => /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
   fallback: defaultOption(props)
-}, dataOption(props)));
+}, dataOptionWithTooltip(props)));

package/dist/esm/analytics.js

@@ -5,7 +5,7 @@ import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "10.14.0";
+var packageVersion = "10.16.0";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/ExternalUserOption/main.js

@@ -50,26 +50,40 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
       }, name);
     });
     _defineProperty(_assertThisInitialized(_this), "renderSecondaryText", function () {
-      var email = _this.props.user.email;
-      if (!email) {
+      var _this$props$user = _this.props.user,
+        byline = _this$props$user.byline,
+        email = _this$props$user.email;
+      if (!byline && !email) {
         return;
       }
-      var _email$split = email.split('@'),
-        _email$split2 = _slicedToArray(_email$split, 2),
-        emailUser = _email$split2[0],
-        emailDomain = _email$split2[1];
-      var emailDomainWithAt = "@".concat(emailDomain);
-      return jsx("span", {
-        css: textWrapper(_this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")"))
-      }, emailUser, jsx("span", {
-        css: emailDomainWrapper
-      }, emailDomainWithAt));
+      var textColor = _this.props.isSelected ? "var(--ds-text-selected, ".concat(B400, ")") : "var(--ds-text-subtlest, ".concat(N200, ")");
+
+      // Render byline if present
+      if (byline) {
+        return jsx("span", {
+          css: textWrapper(textColor)
+        }, byline);
+      }
+
+      // Render email if byline isn't present
+      if (email) {
+        var _email$split = email.split('@'),
+          _email$split2 = _slicedToArray(_email$split, 2),
+          emailUser = _email$split2[0],
+          emailDomain = _email$split2[1];
+        var emailDomainWithAt = "@".concat(emailDomain);
+        return jsx("span", {
+          css: textWrapper(textColor)
+        }, emailUser, jsx("span", {
+          css: emailDomainWrapper
+        }, emailDomainWithAt));
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "renderAvatar", function () {
       var _this$props = _this.props,
-        _this$props$user = _this$props.user,
-        avatarUrl = _this$props$user.avatarUrl,
-        name = _this$props$user.name,
+        _this$props$user2 = _this$props.user,
+        avatarUrl = _this$props$user2.avatarUrl,
+        name = _this$props$user2.name,
         status = _this$props.status;
       return jsx(SizeableAvatar, {
         appearance: "big",
@@ -114,10 +128,10 @@ var ExternalUserOptionImpl = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "formattedTooltipContent",
     value: function formattedTooltipContent() {
-      var _this$props$user2 = this.props.user,
-        id = _this$props$user2.id,
-        requiresSourceHydration = _this$props$user2.requiresSourceHydration,
-        sources = _this$props$user2.sources;
+      var _this$props$user3 = this.props.user,
+        id = _this$props$user3.id,
+        requiresSourceHydration = _this$props$user3.requiresSourceHydration,
+        sources = _this$props$user3.sources;
       return jsx(ExternalUserSourcesContainer, {
         accountId: id,
         shouldFetchSources: Boolean(requiresSourceHydration),

package/dist/esm/components/Option.js

@@ -1,4 +1,6 @@
+import { Box } from '@atlaskit/primitives';
 import { components } from '@atlaskit/select';
+import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { UserOption } from './UserOption';
 import AsyncExternalOption from './ExternalUserOption';
@@ -69,8 +71,20 @@ var dataOption = function dataOption(_ref2) {
   }
   return null;
 };
+var dataOptionWithTooltip = function dataOptionWithTooltip(props) {
+  var _props$data;
+  if ((_props$data = props.data) !== null && _props$data !== void 0 && (_props$data = _props$data.data) !== null && _props$data !== void 0 && _props$data.tooltip) {
+    var _props$data2;
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      content: (_props$data2 = props.data) === null || _props$data2 === void 0 || (_props$data2 = _props$data2.data) === null || _props$data2 === void 0 ? void 0 : _props$data2.tooltip
+    }, function (tooltipProps) {
+      return /*#__PURE__*/React.createElement(Box, tooltipProps, dataOption(props));
+    });
+  }
+  return dataOption(props);
+};
 export var Option = function Option(props) {
   return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: defaultOption(props)
-  }, dataOption(props)));
+  }, dataOptionWithTooltip(props)));
 };

package/dist/types/types.d.ts

@@ -239,6 +239,7 @@ export interface OptionData {
     lozenge?: string | LozengeProps | ReactNode;
     name: string;
     type?: 'user' | 'team' | 'email' | 'group' | 'custom' | 'external_user';
+    tooltip?: string;
 }
 export declare const UserType = "user";
 export type UserSource = 'google' | 'slack' | 'microsoft' | 'jira' | 'confluence' | 'other-atlassian';
@@ -256,6 +257,7 @@ export interface User extends OptionData {
     type?: 'user' | 'external_user';
     email?: string;
     isExternal?: boolean;
+    title?: string;
 }
 export type LozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
 export interface LozengeProps {

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

@@ -242,6 +242,7 @@ export interface OptionData {
     lozenge?: string | LozengeProps | ReactNode;
     name: string;
     type?: 'user' | 'team' | 'email' | 'group' | 'custom' | 'external_user';
+    tooltip?: string;
 }
 export declare const UserType = "user";
 export type UserSource = 'google' | 'slack' | 'microsoft' | 'jira' | 'confluence' | 'other-atlassian';
@@ -259,6 +260,7 @@ export interface User extends OptionData {
     type?: 'user' | 'external_user';
     email?: string;
     isExternal?: boolean;
+    title?: string;
 }
 export type LozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
 export interface LozengeProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.14.0",
+  "version": "10.16.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,9 +22,14 @@
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts",
+    "./analytics": "./src/analytics.ts",
+    "./option": "./src/option.ts",
+    "./types": "./src/types.ts"
+  },
   "atlassian": {
     "team": "Search Platform: Search Experience",
-    "deprecatedAutoEntryPoints": true,
     "releaseModel": "continuous",
     "website": {
       "name": "User Picker"
@@ -37,17 +42,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/logo": "^13.15.0",
     "@atlaskit/lozenge": "^11.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^5.5.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/select": "^17.0.3",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.34.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",
@@ -64,8 +70,7 @@
   "devDependencies": {
     "@atlaskit/analytics-viewer": "^0.5.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
-    "@atlaskit/heading": "^1.5.0",
-    "@atlaskit/primitives": "^1.18.0",
+    "@atlaskit/heading": "^1.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/styled": "^11.0.0",