@atlaskit/user-picker 10.17.0 → 10.18.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/user-picker
 
+## 10.18.0
+
+### Minor Changes
+
+- [#71808](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71808) [`eaf1018c6017`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eaf1018c6017) - Displaying users title in Atlas search results and changing meta style to align to the right without fixed width
+
+## 10.17.1
+
+### Patch Changes
+
+- [#72162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72162) [`dadc682d36ba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dadc682d36ba) - Replace hardcoded values with space tokens
+
 ## 10.17.0
 
 ### Minor Changes

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.17.0";
+var packageVersion = "10.18.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/AddOptionAvatar.js

@@ -7,14 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddOptionAvatar = void 0;
 var _email = _interopRequireDefault(require("@atlaskit/icon/glyph/email"));
 var _colors = require("@atlaskit/theme/colors");
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
 /** @jsx jsx */
 
 var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
-  var padding = isLozenge ? 0 : 4;
-  return (0, _react2.css)({
-    padding: "".concat(padding, "px"),
+  var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
+  return (0, _react.css)({
+    padding: padding,
     backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
     borderRadius: '50%',
     display: 'flex',
@@ -24,9 +24,9 @@ var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge)
 var AddOptionAvatar = exports.AddOptionAvatar = function AddOptionAvatar(_ref) {
   var isLozenge = _ref.isLozenge,
     label = _ref.label;
-  return (0, _react2.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: getEmailAvatarWrapperStyle(isLozenge)
-  }, (0, _react2.jsx)(_email.default, {
+  }, (0, _react.jsx)(_email.default, {
     label: label,
     size: isLozenge ? 'small' : 'medium',
     primaryColor: "var(--ds-text-subtle, ".concat(_colors.N500, ")")

package/dist/cjs/components/MultiValue.js

@@ -44,7 +44,7 @@ var groupTagContainer = (0, _primitives.xcss)({
   paddingLeft: 'space.025'
 });
 var nameWrapper = (0, _react2.css)({
-  paddingLeft: '5px'
+  paddingLeft: "var(--ds-space-050, 4px)"
 });
 var MultiValue = exports.MultiValue = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(MultiValue, _React$Component);

package/dist/cjs/components/SingleValue.js

@@ -16,7 +16,7 @@ var _excluded = ["ref"];
 /** @jsx jsx */
 var avatarItemComponent = (0, _react.css)({
   border: 'none !important',
-  padding: '0 !important',
+  padding: "var(--ds-space-0, 0px)".concat(" !important"),
   width: 'auto',
   overflow: 'hidden',
   minWidth: '100px',

package/dist/cjs/components/SingleValueContainer.js

@@ -23,7 +23,7 @@ var _excluded = ["children"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var placeholderIconContainer = (0, _react.css)({
-  paddingLeft: "".concat(_styles.BORDER_PADDING, "px"),
+  paddingLeft: _styles.BORDER_PADDING,
   lineHeight: 0,
   gridArea: '1/1/2/2'
 });

package/dist/cjs/components/styles.js

@@ -14,7 +14,7 @@ var _excluded = ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
   _excluded2 = ["paddingTop", "paddingBottom", "position"];
 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 BORDER_PADDING = exports.BORDER_PADDING = 6;
+var BORDER_PADDING = exports.BORDER_PADDING = "var(--ds-space-075, 6px)";
 var AVATAR_PADDING = exports.AVATAR_PADDING = 6;
 var INDICATOR_WIDTH = exports.INDICATOR_WIDTH = 39;
 var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, isMulti, isCompact, overrideStyles) {
@@ -85,8 +85,8 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
-        paddingBottom: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingTop: isCompact ? 0 : BORDER_PADDING,
+        paddingBottom: isCompact ? 0 : BORDER_PADDING,
         paddingLeft: isMulti ? BORDER_PADDING : 0,
         overflowX: 'hidden',
         overflowY: 'auto',
@@ -125,7 +125,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
       }
       return _objectSpread(_objectSpread({}, css), {}, {
         gridArea: '1/2/2/3',
-        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         /* Margin left right of 2px set by default */
         // margin: `0 ${BORDER_PADDING}px`,
         margin: 0,
@@ -148,7 +148,7 @@ var getStyles = exports.getStyles = (0, _memoizeOne.default)(function (width, is
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
         paddingBottom: 0,
-        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
           color: "var(--ds-text-subtlest, ".concat(_colors.N100, ")"),

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.17.0";
+const packageVersion = "10.18.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/AddOptionAvatar.js

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
-import React from 'react';
 import { css, jsx } from '@emotion/react';
+import React from 'react';
 const getEmailAvatarWrapperStyle = isLozenge => {
-  const padding = isLozenge ? 0 : 4;
+  const padding = isLozenge ? `${"var(--ds-space-0, 0px)"}` : `${"var(--ds-space-050, 4px)"}`;
   return css({
-    padding: `${padding}px`,
+    padding: padding,
     backgroundColor: `var(--ds-background-neutral, ${N40})`,
     borderRadius: '50%',
     display: 'flex',

package/dist/es2019/components/MultiValue.js

@@ -30,7 +30,7 @@ const groupTagContainer = xcss({
   paddingLeft: 'space.025'
 });
 const nameWrapper = css({
-  paddingLeft: '5px'
+  paddingLeft: `${"var(--ds-space-050, 4px)"}`
 });
 export class MultiValue extends React.Component {
   constructor(props) {

package/dist/es2019/components/SingleValue.js

@@ -7,7 +7,7 @@ import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 const avatarItemComponent = css({
   border: 'none !important',
-  padding: '0 !important',
+  padding: `${"var(--ds-space-0, 0px)"} !important`,
   width: 'auto',
   overflow: 'hidden',
   minWidth: '100px',

package/dist/es2019/components/SingleValueContainer.js

@@ -7,7 +7,7 @@ import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
 import ValueContainerWrapper from './ValueContainerWrapper';
 const placeholderIconContainer = css({
-  paddingLeft: `${BORDER_PADDING}px`,
+  paddingLeft: BORDER_PADDING,
   lineHeight: 0,
   gridArea: '1/1/2/2'
 });

package/dist/es2019/components/styles.js

@@ -1,7 +1,7 @@
 import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { mergeStyles } from '@atlaskit/select';
-export const BORDER_PADDING = 6;
+export const BORDER_PADDING = "var(--ds-space-075, 6px)";
 export const AVATAR_PADDING = 6;
 export const INDICATOR_WIDTH = 39;
 export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles) => {
@@ -73,8 +73,8 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       return {
         ...css,
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? 0 : `${BORDER_PADDING}px`,
-        paddingBottom: isCompact ? 0 : `${BORDER_PADDING}px`,
+        paddingTop: isCompact ? 0 : BORDER_PADDING,
+        paddingBottom: isCompact ? 0 : BORDER_PADDING,
         paddingLeft: isMulti ? BORDER_PADDING : 0,
         overflowX: 'hidden',
         overflowY: 'auto',
@@ -111,7 +111,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       return {
         ...css,
         gridArea: '1/2/2/3',
-        paddingLeft: state.selectProps.isMulti ? 0 : `${BORDER_PADDING}px`,
+        paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         /* Margin left right of 2px set by default */
         // margin: `0 ${BORDER_PADDING}px`,
         margin: 0,
@@ -133,7 +133,7 @@ export const getStyles = memoizeOne((width, isMulti, isCompact, overrideStyles)
       /* Padding top and bottom of 2 is set by default. */
       paddingTop: 0,
       paddingBottom: 0,
-      paddingLeft: state.selectProps.isMulti ? 0 : `${BORDER_PADDING}px`,
+      paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
       '& input::placeholder': {
         /* Chrome, Firefox, Opera, Safari 10.1+ */
         color: `var(--ds-text-subtlest, ${N100})`,

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.17.0";
+var packageVersion = "10.18.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/AddOptionAvatar.js

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import EmailIcon from '@atlaskit/icon/glyph/email';
 import { N40, N500 } from '@atlaskit/theme/colors';
-import React from 'react';
 import { css, jsx } from '@emotion/react';
+import React from 'react';
 var getEmailAvatarWrapperStyle = function getEmailAvatarWrapperStyle(isLozenge) {
-  var padding = isLozenge ? 0 : 4;
+  var padding = isLozenge ? "var(--ds-space-0, 0px)" : "var(--ds-space-050, 4px)";
   return css({
-    padding: "".concat(padding, "px"),
+    padding: padding,
     backgroundColor: "var(--ds-background-neutral, ".concat(N40, ")"),
     borderRadius: '50%',
     display: 'flex',

package/dist/esm/components/MultiValue.js

@@ -38,7 +38,7 @@ var groupTagContainer = xcss({
   paddingLeft: 'space.025'
 });
 var nameWrapper = css({
-  paddingLeft: '5px'
+  paddingLeft: "var(--ds-space-050, 4px)"
 });
 export var MultiValue = /*#__PURE__*/function (_React$Component) {
   _inherits(MultiValue, _React$Component);

package/dist/esm/components/SingleValue.js

@@ -9,7 +9,7 @@ import { SizeableAvatar } from './SizeableAvatar';
 import { getAvatarUrl } from './utils';
 var avatarItemComponent = css({
   border: 'none !important',
-  padding: '0 !important',
+  padding: "var(--ds-space-0, 0px)".concat(" !important"),
   width: 'auto',
   overflow: 'hidden',
   minWidth: '100px',

package/dist/esm/components/SingleValueContainer.js

@@ -17,7 +17,7 @@ import { SizeableAvatar } from './SizeableAvatar';
 import { BORDER_PADDING } from './styles';
 import ValueContainerWrapper from './ValueContainerWrapper';
 var placeholderIconContainer = css({
-  paddingLeft: "".concat(BORDER_PADDING, "px"),
+  paddingLeft: BORDER_PADDING,
   lineHeight: 0,
   gridArea: '1/1/2/2'
 });

package/dist/esm/components/styles.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { B100, N0, N10, N20, N30, N40, N100, R50, R400 } from '@atlaskit/theme/colors';
 import memoizeOne from 'memoize-one';
 import { mergeStyles } from '@atlaskit/select';
-export var BORDER_PADDING = 6;
+export var BORDER_PADDING = "var(--ds-space-075, 6px)";
 export var AVATAR_PADDING = 6;
 export var INDICATOR_WIDTH = 39;
 export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideStyles) {
@@ -78,8 +78,8 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       var isMulti = state.selectProps.isMulti;
       return _objectSpread(_objectSpread({}, css), {}, {
         gridTemplateColumns: 'auto 1fr',
-        paddingTop: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
-        paddingBottom: isCompact ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingTop: isCompact ? 0 : BORDER_PADDING,
+        paddingBottom: isCompact ? 0 : BORDER_PADDING,
         paddingLeft: isMulti ? BORDER_PADDING : 0,
         overflowX: 'hidden',
         overflowY: 'auto',
@@ -118,7 +118,7 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
       }
       return _objectSpread(_objectSpread({}, css), {}, {
         gridArea: '1/2/2/3',
-        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         /* Margin left right of 2px set by default */
         // margin: `0 ${BORDER_PADDING}px`,
         margin: 0,
@@ -141,7 +141,7 @@ export var getStyles = memoizeOne(function (width, isMulti, isCompact, overrideS
         /* Padding top and bottom of 2 is set by default. */
         paddingTop: 0,
         paddingBottom: 0,
-        paddingLeft: state.selectProps.isMulti ? 0 : "".concat(BORDER_PADDING, "px"),
+        paddingLeft: state.selectProps.isMulti ? 0 : BORDER_PADDING,
         '& input::placeholder': {
           /* Chrome, Firefox, Opera, Safari 10.1+ */
           color: "var(--ds-text-subtlest, ".concat(N100, ")"),

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

@@ -1,5 +1,5 @@
 import { StylesConfig } from '@atlaskit/select';
-export declare const BORDER_PADDING = 6;
+export declare const BORDER_PADDING: "var(--ds-space-075)";
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
 export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig) => {

package/dist/types/types.d.ts

@@ -240,6 +240,7 @@ export interface OptionData {
     name: string;
     type?: 'user' | 'team' | 'email' | 'group' | 'custom' | 'external_user';
     tooltip?: string;
+    title?: string;
 }
 export declare const UserType = "user";
 export declare const ExternalUserType = "external_user";

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

@@ -1,5 +1,5 @@
 import { StylesConfig } from '@atlaskit/select';
-export declare const BORDER_PADDING = 6;
+export declare const BORDER_PADDING: "var(--ds-space-075)";
 export declare const AVATAR_PADDING = 6;
 export declare const INDICATOR_WIDTH = 39;
 export declare const getStyles: import("memoize-one").MemoizedFn<(width: string | number, isMulti?: boolean, isCompact?: boolean, overrideStyles?: StylesConfig) => {

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

@@ -243,6 +243,7 @@ export interface OptionData {
     name: string;
     type?: 'user' | 'team' | 'email' | 'group' | 'custom' | 'external_user';
     tooltip?: string;
+    title?: string;
 }
 export declare const UserType = "user";
 export declare const ExternalUserType = "external_user";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/user-picker",
-  "version": "10.17.0",
+  "version": "10.18.0",
   "description": "Fabric component for display a dropdown to select a user from",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"