@atlaskit/user-picker 13.8.8 → 13.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/user-picker
 
+## 13.9.0
+
+### Minor Changes
+
+- [`079dc2326a811`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/079dc2326a811) -
+  Added an optional `renderOptionContent` prop to `Option`'s props, letting consumers wrap the
+  default rendered option content (e.g. to add a profile card) without losing the built-in avatar,
+  name, and email rendering.
+
+  ```tsx
+  <Option
+  	renderOptionContent={(content) => <ProfileCard accountId={accountId}>{content}</ProfileCard>}
+  />
+  ```
+
 ## 13.8.8
 
 ### Patch Changes

package/dist/cjs/analytics.js

@@ -15,7 +15,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "13.8.7";
+var packageVersion = "13.8.8";
 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/Option.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Option = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -17,6 +18,7 @@ var _EmailOption = _interopRequireDefault(require("./EmailOption"));
 var _CustomOption = _interopRequireDefault(require("./CustomOption"));
 var _utils = require("./utils");
 var _emailValidation = require("./emailValidation");
+var _excluded = ["renderOptionContent"];
 var defaultOption = function defaultOption(_ref) {
   var data = _ref.data.data,
     isSelected = _ref.isSelected,
@@ -92,8 +94,11 @@ var dataOptionWithTooltip = function dataOptionWithTooltip(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, {
+var Option = exports.Option = function Option(_ref3) {
+  var renderOptionContent = _ref3.renderOptionContent,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var defaultContent = /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
     fallback: defaultOption(props)
-  }, dataOptionWithTooltip(props)));
+  }, dataOptionWithTooltip(props));
+  return /*#__PURE__*/_react.default.createElement(_select.components.Option, props, renderOptionContent ? renderOptionContent(defaultContent) : defaultContent);
 };

package/dist/es2019/analytics.js

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "13.8.7";
+const packageVersion = "13.8.8";
 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/Option.js

@@ -86,6 +86,12 @@ const dataOptionWithTooltip = props => {
   }
   return dataOption(props);
 };
-export const Option = props => /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
-  fallback: defaultOption(props)
-}, dataOptionWithTooltip(props)));
+export const Option = ({
+  renderOptionContent,
+  ...props
+}) => {
+  const defaultContent = /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: defaultOption(props)
+  }, dataOptionWithTooltip(props));
+  return /*#__PURE__*/React.createElement(components.Option, props, renderOptionContent ? renderOptionContent(defaultContent) : defaultContent);
+};

package/dist/esm/analytics.js

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "13.8.7";
+var packageVersion = "13.8.8";
 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/Option.js

@@ -1,3 +1,5 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["renderOptionContent"];
 import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import Tooltip from '@atlaskit/tooltip';
@@ -85,8 +87,11 @@ var dataOptionWithTooltip = function dataOptionWithTooltip(props) {
   }
   return dataOption(props);
 };
-export var Option = function Option(props) {
-  return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(React.Suspense, {
+export var Option = function Option(_ref3) {
+  var renderOptionContent = _ref3.renderOptionContent,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var defaultContent = /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: defaultOption(props)
-  }, dataOptionWithTooltip(props)));
+  }, dataOptionWithTooltip(props));
+  return /*#__PURE__*/React.createElement(components.Option, props, renderOptionContent ? renderOptionContent(defaultContent) : defaultContent);
 };

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

@@ -1,5 +1,5 @@
 import { type OptionProps as AkOptionProps } from '@atlaskit/select';
-import { type FC } from 'react';
+import React, { type ReactNode } from 'react';
 import { type Option as OptionType } from '../types';
 export type OptionProps = AkOptionProps & {
     data: OptionType;
@@ -7,9 +7,10 @@ export type OptionProps = AkOptionProps & {
     isDisabled: boolean;
     isFocused: boolean;
     isSelected: boolean;
+    renderOptionContent?: (defaultContent: ReactNode) => ReactNode;
     selectProps: {
         emailLabel?: string;
     };
     status?: string;
 };
-export declare const Option: FC<OptionProps>;
+export declare const Option: ({ renderOptionContent, ...props }: OptionProps) => React.ReactElement;

package/docs/0-intro.tsx

@@ -31,9 +31,9 @@ const _default_1: any = md`
   ${(
 		<Example
 			packageName="@atlaskit/user-picker"
-			Component={require('../examples/01-multi').default}
+			Component={require('../examples/01-multi.vr.ap').default}
 			title="Multi User Picker"
-			source={require('!!raw-loader!../examples/01-multi')}
+			source={require('!!raw-loader!../examples/01-multi.vr.ap')}
 		/>
 	)}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "13.8.8",
+	"version": "13.9.0",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -79,11 +79,11 @@
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tag": "^15.4.0",
 		"@atlaskit/teams-avatar": "^4.1.0",
-		"@atlaskit/tokens": "^16.4.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",

package/user-picker.docs.tsx

@@ -1,55 +0,0 @@
-/**
- * Structured MCP docs for `@atlaskit/user-picker`.
- */
-
-import path from 'path';
-
-import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
-
-import packageJson from './package.json';
-
-const packagePath = path.resolve(__dirname);
-
-const documentation: StructuredContentSource = {
-	package: {
-		package: '@atlaskit/user-picker',
-		packagePath,
-		packageJson,
-		overview:
-			'A React component for selecting users, teams, and groups. It provides a searchable dropdown with support for single and multi-select modes, custom options, and external users.',
-	},
-	components: [
-		{
-			name: 'UserPicker',
-			description: 'The main user picker component.',
-			status: 'general-availability',
-			import: {
-				name: 'default',
-				package: '@atlaskit/user-picker',
-				type: 'default',
-				packagePath,
-				packageJson,
-			},
-			usageGuidelines: [
-				'Use `UserPicker` for selecting users or teams in forms or filters.',
-				'Supports `isMulti` for selecting multiple items.',
-			],
-			keywords: ['user-picker', 'select', 'user', 'team'],
-			categories: ['elements'],
-			examples: [
-				{
-					name: 'Single user picker',
-					description: 'Basic usage of UserPicker in single-select mode.',
-					source: path.resolve(packagePath, './examples/00-single.tsx'),
-				},
-				{
-					name: 'Multi user picker',
-					description: 'Basic usage of UserPicker in multi-select mode.',
-					source: path.resolve(packagePath, './examples/01-multi.tsx'),
-				},
-			],
-		},
-	],
-};
-
-export default documentation;