@atlaskit/link-create 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/link-create
 
+## 2.2.0
+
+### Minor Changes
+
+- [#105330](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105330)
+  [`9fb53f33cb33`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9fb53f33cb33) -
+  [ux] Added a goal owner selector component to the goal creation modal. Additionally, added a new
+  user-picker component to be used in CreateForm. Goal picker has a new mandatory default owner prop
+
 ## 2.1.0
 
 ### Minor Changes

package/dist/cjs/common/constants.js

@@ -11,7 +11,7 @@ var CREATE_FORM_MIN_HEIGHT_IN_PX = exports.CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 var LINK_CREATE_FORM_POST_CREATE_FIELD = exports.LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.1.0" || '',
+  packageVersion: "2.2.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/cjs/index.js

@@ -52,6 +52,12 @@ Object.defineProperty(exports, "TextField", {
     return _index.TextField;
   }
 });
+Object.defineProperty(exports, "UserPicker", {
+  enumerable: true,
+  get: function get() {
+    return _index.UserPicker;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {

package/dist/cjs/ui/create-form/main.js

@@ -156,7 +156,7 @@ var CreateForm = exports.CreateForm = function CreateForm(_ref) {
       }
     }), (0, _react2.jsx)("p", {
       "aria-hidden": "true"
-    }, intl.formatMessage(_messages.default.requiredFieldInstruction), ' ', (0, _react2.jsx)(_form.RequiredAsterisk, null)), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter
+    }, intl.formatMessage(_messages.default.requiredFieldInstruction), " ", (0, _react2.jsx)(_form.RequiredAsterisk, null)), (0, _react2.jsx)(_primitives.Box, null, children), !hideFooter && (0, _react2.jsx)(_formFooter.CreateFormFooter
     /**
      * We will prefer to render the error message connected to
      * react final form state (submitError) otherwise we can

package/dist/cjs/ui/create-form/user-picker/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UserPicker", {
+  enumerable: true,
+  get: function get() {
+    return _main.UserPicker;
+  }
+});
+var _main = require("./main");

package/dist/cjs/ui/create-form/user-picker/main.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TEST_ID = void 0;
+exports.UserPicker = UserPicker;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _smartUserPicker = _interopRequireDefault(require("@atlaskit/smart-user-picker"));
+var _createField = require("../../../controllers/create-field");
+var _excluded = ["fieldId"];
+/** @jsx jsx */
+var TEST_ID = exports.TEST_ID = 'link-create-user-picker';
+var DEFAULT_DEBOUNCE_TIME = 400;
+var UserPickerWidth = "100%";
+
+/**
+ * A user picker utilising the SmartUserPicker.
+ */
+
+function UserPicker(_ref) {
+  var productKey = _ref.productKey,
+    siteId = _ref.siteId,
+    name = _ref.name,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    validators = _ref.validators,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    defaultValue = _ref.defaultValue;
+  return (0, _react.jsx)(_createField.CreateField, {
+    name: name,
+    label: label,
+    isRequired: true,
+    testId: testId,
+    validators: validators
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return (0, _react.jsx)(_smartUserPicker.default, {
+      defaultValue: defaultValue,
+      placeholder: placeholder,
+      onChange: function onChange(value) {
+        return fieldProps.onChange(value);
+      },
+      subtle: true,
+      isMulti: false,
+      productKey: productKey,
+      siteId: siteId,
+      fieldId: fieldId,
+      debounceTime: DEFAULT_DEBOUNCE_TIME,
+      prefetch: true,
+      isClearable: false,
+      width: UserPickerWidth
+    });
+  });
+}

package/dist/cjs/ui/create-form/user-picker/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/index.js

@@ -46,6 +46,12 @@ Object.defineProperty(exports, "TextField", {
     return _textfield.TextField;
   }
 });
+Object.defineProperty(exports, "UserPicker", {
+  enumerable: true,
+  get: function get() {
+    return _userPicker.UserPicker;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -59,4 +65,5 @@ var _main = require("./create-form/main");
 var _formLoader = require("./create-form/form-loader");
 var _select = require("./create-form/select");
 var _asyncSelect = require("./create-form/async-select");
-var _formSpy = require("./create-form/form-spy");
+var _formSpy = require("./create-form/form-spy");
+var _userPicker = require("./create-form/user-picker");

package/dist/es2019/common/constants.js

@@ -5,7 +5,7 @@ export const CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 export const LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.1.0" || '',
+  packageVersion: "2.2.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/es2019/index.js

@@ -1,6 +1,6 @@
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy
+export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy,
 // todo: EDM-10077 - export this once inline-create is tested/ready
 //InlineCreate,
-} from './ui/index';
+UserPicker } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
 export { FORM_ERROR } from 'final-form';

package/dist/es2019/ui/create-form/main.js

@@ -121,7 +121,7 @@ export const CreateForm = ({
       }
     }), jsx("p", {
       "aria-hidden": "true"
-    }, intl.formatMessage(messages.requiredFieldInstruction), ' ', jsx(RequiredAsterisk, null)), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
+    }, intl.formatMessage(messages.requiredFieldInstruction), " ", jsx(RequiredAsterisk, null)), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
     /**
      * We will prefer to render the error message connected to
      * react final form state (submitError) otherwise we can

package/dist/es2019/ui/create-form/user-picker/index.js

@@ -0,0 +1 @@
+export { UserPicker } from './main';

package/dist/es2019/ui/create-form/user-picker/main.js

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import SmartUserPicker from '@atlaskit/smart-user-picker';
+import { CreateField } from '../../../controllers/create-field';
+export const TEST_ID = 'link-create-user-picker';
+const DEFAULT_DEBOUNCE_TIME = 400;
+const UserPickerWidth = "100%";
+
+/**
+ * A user picker utilising the SmartUserPicker.
+ */
+
+export function UserPicker({
+  productKey,
+  siteId,
+  name,
+  label,
+  placeholder,
+  validators,
+  testId = TEST_ID,
+  defaultValue
+}) {
+  return jsx(CreateField, {
+    name: name,
+    label: label,
+    isRequired: true,
+    testId: testId,
+    validators: validators
+  }, ({
+    fieldId,
+    ...fieldProps
+  }) => {
+    return jsx(SmartUserPicker, {
+      defaultValue: defaultValue,
+      placeholder: placeholder,
+      onChange: value => fieldProps.onChange(value),
+      subtle: true,
+      isMulti: false,
+      productKey: productKey,
+      siteId: siteId,
+      fieldId: fieldId,
+      debounceTime: DEFAULT_DEBOUNCE_TIME,
+      prefetch: true,
+      isClearable: false,
+      width: UserPickerWidth
+    });
+  });
+}

package/dist/es2019/ui/create-form/user-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/index.js

@@ -5,4 +5,5 @@ export { CreateForm } from './create-form/main';
 export { CreateFormLoader } from './create-form/form-loader';
 export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
-export { FormSpy } from './create-form/form-spy';
+export { FormSpy } from './create-form/form-spy';
+export { UserPicker } from './create-form/user-picker';

package/dist/esm/common/constants.js

@@ -5,7 +5,7 @@ export var CREATE_FORM_MIN_HEIGHT_IN_PX = '200';
 export var LINK_CREATE_FORM_POST_CREATE_FIELD = '__post_create__';
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-create" || '',
-  packageVersion: "2.1.0" || '',
+  packageVersion: "2.2.0" || '',
   component: COMPONENT_NAME,
   componentName: COMPONENT_NAME
 };

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy
+export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy,
 // todo: EDM-10077 - export this once inline-create is tested/ready
 //InlineCreate,
-} from './ui/index';
+UserPicker } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
 export { FORM_ERROR } from 'final-form';

package/dist/esm/ui/create-form/main.js

@@ -150,7 +150,7 @@ export var CreateForm = function CreateForm(_ref) {
       }
     }), jsx("p", {
       "aria-hidden": "true"
-    }, intl.formatMessage(messages.requiredFieldInstruction), ' ', jsx(RequiredAsterisk, null)), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
+    }, intl.formatMessage(messages.requiredFieldInstruction), " ", jsx(RequiredAsterisk, null)), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
     /**
      * We will prefer to render the error message connected to
      * react final form state (submitError) otherwise we can

package/dist/esm/ui/create-form/user-picker/index.js

@@ -0,0 +1 @@
+export { UserPicker } from './main';

package/dist/esm/ui/create-form/user-picker/main.js

@@ -0,0 +1,51 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fieldId"];
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import SmartUserPicker from '@atlaskit/smart-user-picker';
+import { CreateField } from '../../../controllers/create-field';
+export var TEST_ID = 'link-create-user-picker';
+var DEFAULT_DEBOUNCE_TIME = 400;
+var UserPickerWidth = "100%";
+
+/**
+ * A user picker utilising the SmartUserPicker.
+ */
+
+export function UserPicker(_ref) {
+  var productKey = _ref.productKey,
+    siteId = _ref.siteId,
+    name = _ref.name,
+    label = _ref.label,
+    placeholder = _ref.placeholder,
+    validators = _ref.validators,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    defaultValue = _ref.defaultValue;
+  return jsx(CreateField, {
+    name: name,
+    label: label,
+    isRequired: true,
+    testId: testId,
+    validators: validators
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded);
+    return jsx(SmartUserPicker, {
+      defaultValue: defaultValue,
+      placeholder: placeholder,
+      onChange: function onChange(value) {
+        return fieldProps.onChange(value);
+      },
+      subtle: true,
+      isMulti: false,
+      productKey: productKey,
+      siteId: siteId,
+      fieldId: fieldId,
+      debounceTime: DEFAULT_DEBOUNCE_TIME,
+      prefetch: true,
+      isClearable: false,
+      width: UserPickerWidth
+    });
+  });
+}

package/dist/esm/ui/create-form/user-picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/index.js

@@ -5,4 +5,5 @@ export { CreateForm } from './create-form/main';
 export { CreateFormLoader } from './create-form/form-loader';
 export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
-export { FormSpy } from './create-form/form-spy';
+export { FormSpy } from './create-form/form-spy';
+export { UserPicker } from './create-form/user-picker';

package/dist/types/common/ui/confirm-dismiss-dialog/main.d.ts

@@ -4,4 +4,4 @@ export type ConfirmDismissDialogProps = {
     onClose: () => void;
     onCancel?: () => void;
 };
-export declare const ConfirmDismissDialog: ({ active, onClose, onCancel, }: ConfirmDismissDialogProps) => JSX.Element;
+export declare const ConfirmDismissDialog: ({ active, onClose, onCancel }: ConfirmDismissDialogProps) => JSX.Element;

package/dist/types/common/ui/error-boundary/index.d.ts

@@ -2,5 +2,5 @@ import { type PropsWithChildren } from 'react';
 type ErrorBoundaryProps = PropsWithChildren<{
     errorComponent?: JSX.Element;
 }>;
-export declare const ErrorBoundary: ({ children, errorComponent, }: ErrorBoundaryProps) => JSX.Element;
+export declare const ErrorBoundary: ({ children, errorComponent }: ErrorBoundaryProps) => JSX.Element;
 export {};

package/dist/types/common/ui/link-create-content/index.d.ts

@@ -4,5 +4,5 @@ type LinkCreateContentProps = {
     plugins: LinkCreatePlugin[];
     entityKey: string;
 };
-export declare const LinkCreateContent: ({ plugins, entityKey, }: LinkCreateContentProps) => JSX.Element;
+export declare const LinkCreateContent: ({ plugins, entityKey }: LinkCreateContentProps) => JSX.Element;
 export {};

package/dist/types/common/utils/analytics/index.d.ts

@@ -1 +1 @@
-export { useLinkCreateAnalytics, withLinkCreateAnalyticsContext, } from './context';
+export { useLinkCreateAnalytics, withLinkCreateAnalyticsContext } from './context';

package/dist/types/controllers/exit-warning-modal-context/index.d.ts

@@ -3,7 +3,7 @@ type ExitWarningModalContextValue = {
     getShouldShowWarning: () => boolean;
     setShouldShowWarning: (show: boolean) => void;
 };
-export declare const ExitWarningModalProvider: ({ children, }: {
+export declare const ExitWarningModalProvider: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const useExitWarningModal: () => ExitWarningModalContextValue;

package/dist/types/controllers/form-context/index.d.ts

@@ -1 +1 @@
-export { FormContextProvider, useFormContext, withLinkCreateFormContext, } from './main';
+export { FormContextProvider, useFormContext, withLinkCreateFormContext } from './main';

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 export type { CreateFormProps } from './ui/index';
 export type { LinkCreateProps, LinkCreatePlugin, LinkCreateWithModalProps, CreatePayload, EditViewProps, } from './common/types';
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, } from './ui/index';
-export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
+export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, UserPicker, } from './ui/index';
+export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
 export type { Validator, ValidatorMap } from './common/types';
 export { FORM_ERROR } from 'final-form';

package/dist/types/ui/create-form/form-spy/index.d.ts

@@ -9,4 +9,4 @@ export type FormSpyProps<T> = {
  * FormSpy component so that we can control selectively
  * how much of the API we are commited to.
  */
-export declare const FormSpy: <T extends Record<string, unknown>>({ children, }: FormSpyProps<T>) => JSX.Element;
+export declare const FormSpy: <T extends Record<string, unknown>>({ children }: FormSpyProps<T>) => JSX.Element;

package/dist/types/ui/create-form/user-picker/index.d.ts

@@ -0,0 +1 @@
+export { UserPicker } from './main';

package/dist/types/ui/create-form/user-picker/main.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { type UserPickerProps } from './types';
+export declare const TEST_ID = "link-create-user-picker";
+/**
+ * A user picker utilising the SmartUserPicker.
+ */
+export declare function UserPicker({ productKey, siteId, name, label, placeholder, validators, testId, defaultValue, }: UserPickerProps): jsx.JSX.Element;

package/dist/types/ui/create-form/user-picker/types.d.ts

@@ -0,0 +1,25 @@
+import { type Validator } from '../../../common/types';
+export type UserPickerProps = {
+    /** Name to pass into the <Field>  */
+    name: string;
+    /** Refers to a product identifier, Jira, Confluence, Townsquare, ect. */
+    productKey: string;
+    /** Identifier for the product's tenant, also known as tenantId or cloudId */
+    siteId: string;
+    /** The label text above the component */
+    label?: string;
+    /** Placeholder text to display in the text field whenever it is empty. */
+    placeholder?: string;
+    /** Validators for this field */
+    validators?: Validator[];
+    testId?: string;
+    defaultValue: User;
+};
+type User = {
+    id: string;
+    userId: string;
+    name: string;
+    avatar: string;
+    email: string;
+};
+export {};

package/dist/types/ui/index.d.ts

@@ -7,3 +7,4 @@ export type { CreateFormProps } from './create-form/main';
 export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
 export { FormSpy } from './create-form/form-spy';
+export { UserPicker } from './create-form/user-picker';

package/dist/types-ts4.5/common/ui/confirm-dismiss-dialog/main.d.ts

@@ -4,4 +4,4 @@ export type ConfirmDismissDialogProps = {
     onClose: () => void;
     onCancel?: () => void;
 };
-export declare const ConfirmDismissDialog: ({ active, onClose, onCancel, }: ConfirmDismissDialogProps) => JSX.Element;
+export declare const ConfirmDismissDialog: ({ active, onClose, onCancel }: ConfirmDismissDialogProps) => JSX.Element;

package/dist/types-ts4.5/common/ui/error-boundary/index.d.ts

@@ -2,5 +2,5 @@ import { type PropsWithChildren } from 'react';
 type ErrorBoundaryProps = PropsWithChildren<{
     errorComponent?: JSX.Element;
 }>;
-export declare const ErrorBoundary: ({ children, errorComponent, }: ErrorBoundaryProps) => JSX.Element;
+export declare const ErrorBoundary: ({ children, errorComponent }: ErrorBoundaryProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/common/ui/link-create-content/index.d.ts

@@ -4,5 +4,5 @@ type LinkCreateContentProps = {
     plugins: LinkCreatePlugin[];
     entityKey: string;
 };
-export declare const LinkCreateContent: ({ plugins, entityKey, }: LinkCreateContentProps) => JSX.Element;
+export declare const LinkCreateContent: ({ plugins, entityKey }: LinkCreateContentProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/common/utils/analytics/index.d.ts

@@ -1 +1 @@
-export { useLinkCreateAnalytics, withLinkCreateAnalyticsContext, } from './context';
+export { useLinkCreateAnalytics, withLinkCreateAnalyticsContext } from './context';

package/dist/types-ts4.5/controllers/exit-warning-modal-context/index.d.ts

@@ -3,7 +3,7 @@ type ExitWarningModalContextValue = {
     getShouldShowWarning: () => boolean;
     setShouldShowWarning: (show: boolean) => void;
 };
-export declare const ExitWarningModalProvider: ({ children, }: {
+export declare const ExitWarningModalProvider: ({ children }: {
     children: React.ReactNode;
 }) => JSX.Element;
 export declare const useExitWarningModal: () => ExitWarningModalContextValue;

package/dist/types-ts4.5/controllers/form-context/index.d.ts

@@ -1 +1 @@
-export { FormContextProvider, useFormContext, withLinkCreateFormContext, } from './main';
+export { FormContextProvider, useFormContext, withLinkCreateFormContext } from './main';

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

@@ -1,6 +1,6 @@
 export type { CreateFormProps } from './ui/index';
 export type { LinkCreateProps, LinkCreatePlugin, LinkCreateWithModalProps, CreatePayload, EditViewProps, } from './common/types';
-export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, } from './ui/index';
-export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
+export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, UserPicker, } from './ui/index';
+export { useLinkCreateCallback, LinkCreateCallbackProvider } from './controllers/callback-context';
 export type { Validator, ValidatorMap } from './common/types';
 export { FORM_ERROR } from 'final-form';

package/dist/types-ts4.5/ui/create-form/form-spy/index.d.ts

@@ -9,4 +9,4 @@ export type FormSpyProps<T> = {
  * FormSpy component so that we can control selectively
  * how much of the API we are commited to.
  */
-export declare const FormSpy: <T extends Record<string, unknown>>({ children, }: FormSpyProps<T>) => JSX.Element;
+export declare const FormSpy: <T extends Record<string, unknown>>({ children }: FormSpyProps<T>) => JSX.Element;

package/dist/types-ts4.5/ui/create-form/user-picker/index.d.ts

@@ -0,0 +1 @@
+export { UserPicker } from './main';

package/dist/types-ts4.5/ui/create-form/user-picker/main.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { type UserPickerProps } from './types';
+export declare const TEST_ID = "link-create-user-picker";
+/**
+ * A user picker utilising the SmartUserPicker.
+ */
+export declare function UserPicker({ productKey, siteId, name, label, placeholder, validators, testId, defaultValue, }: UserPickerProps): jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/user-picker/types.d.ts

@@ -0,0 +1,25 @@
+import { type Validator } from '../../../common/types';
+export type UserPickerProps = {
+    /** Name to pass into the <Field>  */
+    name: string;
+    /** Refers to a product identifier, Jira, Confluence, Townsquare, ect. */
+    productKey: string;
+    /** Identifier for the product's tenant, also known as tenantId or cloudId */
+    siteId: string;
+    /** The label text above the component */
+    label?: string;
+    /** Placeholder text to display in the text field whenever it is empty. */
+    placeholder?: string;
+    /** Validators for this field */
+    validators?: Validator[];
+    testId?: string;
+    defaultValue: User;
+};
+type User = {
+    id: string;
+    userId: string;
+    name: string;
+    avatar: string;
+    email: string;
+};
+export {};

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

@@ -7,3 +7,4 @@ export type { CreateFormProps } from './create-form/main';
 export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
 export { FormSpy } from './create-form/form-spy';
+export { UserPicker } from './create-form/user-picker';

package/example-helpers/mock-disclaimer.tsx

@@ -3,17 +3,17 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 
 export const MockDisclaimer = () => {
-  const { locale } = useIntl();
-  const parentLocale = locale.split(/[-_]/)[0];
-  const disclaimer = 'This is a mocked plugin.';
+	const { locale } = useIntl();
+	const parentLocale = locale.split(/[-_]/)[0];
+	const disclaimer = 'This is a mocked plugin.';
 
-  if (parentLocale !== 'en') {
-    return (
-      <p>
-        {disclaimer} <small>{`(locale ${locale} not available)`}</small>
-      </p>
-    );
-  }
+	if (parentLocale !== 'en') {
+		return (
+			<p>
+				{disclaimer} <small>{`(locale ${locale} not available)`}</small>
+			</p>
+		);
+	}
 
-  return <p>{disclaimer}</p>;
+	return <p>{disclaimer}</p>;
 };

package/example-helpers/mock-plugin-form.tsx

@@ -1,92 +1,89 @@
 import React, { useCallback, useMemo } from 'react';
 
 import {
-  AsyncSelect,
-  CreateForm,
-  type CreateFormProps,
-  TextField,
-  useLinkCreateCallback,
-  type Validator,
+	AsyncSelect,
+	CreateForm,
+	type CreateFormProps,
+	TextField,
+	useLinkCreateCallback,
+	type Validator,
 } from '../src';
 
 import { MockDisclaimer } from './mock-disclaimer';
 
 interface pluginProps {
-  shouldThrowError?: boolean;
+	shouldThrowError?: boolean;
 }
 
 export function MockPluginForm({ shouldThrowError }: pluginProps) {
-  const { onCreate, onFailure, onCancel } = useLinkCreateCallback();
+	const { onCreate, onFailure, onCancel } = useLinkCreateCallback();
 
-  type MockOptions = {
-    label: string;
-    value: string;
-  };
+	type MockOptions = {
+		label: string;
+		value: string;
+	};
 
-  const mockHandleSubmit = async () => {
-    if (onCreate) {
-      await onCreate({
-        url: 'https://atlassian.com/product/new-object-id',
-        objectId: 'new-object-id',
-        objectType: 'object-type',
-        data: {},
-        ari: 'example-ari',
-      });
-    }
-  };
+	const mockHandleSubmit = async () => {
+		if (onCreate) {
+			await onCreate({
+				url: 'https://atlassian.com/product/new-object-id',
+				objectId: 'new-object-id',
+				objectType: 'object-type',
+				data: {},
+				ari: 'example-ari',
+			});
+		}
+	};
 
-  const mockValidator: Validator = useMemo(
-    () => ({
-      isValid: (val: unknown) => !!val,
-      errorMessage: 'Validation Error: You need to provide a value.',
-    }),
-    [],
-  );
+	const mockValidator: Validator = useMemo(
+		() => ({
+			isValid: (val: unknown) => !!val,
+			errorMessage: 'Validation Error: You need to provide a value.',
+		}),
+		[],
+	);
 
-  const mockLoadOptions = useCallback(async () => {
-    const exampleOptions = [
-      { label: 'Option 1', value: 'option-1' },
-      { label: 'Option 2', value: 'option-2' },
-    ];
+	const mockLoadOptions = useCallback(async () => {
+		const exampleOptions = [
+			{ label: 'Option 1', value: 'option-1' },
+			{ label: 'Option 2', value: 'option-2' },
+		];
 
-    try {
-      if (shouldThrowError) {
-        throw new Error('This is an error message.');
-      }
-      return exampleOptions;
-    } catch (error) {
-      if (error instanceof Error) {
-        onFailure && onFailure(error);
-      }
-      return [];
-    }
-  }, [onFailure, shouldThrowError]);
+		try {
+			if (shouldThrowError) {
+				throw new Error('This is an error message.');
+			}
+			return exampleOptions;
+		} catch (error) {
+			if (error instanceof Error) {
+				onFailure && onFailure(error);
+			}
+			return [];
+		}
+	}, [onFailure, shouldThrowError]);
 
-  return (
-    <div>
-      <MockDisclaimer />
-      <CreateForm<CreateFormProps<FormData>>
-        onSubmit={mockHandleSubmit}
-        onCancel={onCancel}
-      >
-        <TextField
-          name={'textField-name'}
-          label={'Enter some Text'}
-          placeholder={'Type something here...'}
-          validators={[mockValidator]}
-          autoFocus
-          maxLength={255}
-        />
-        <AsyncSelect<MockOptions>
-          isRequired
-          isSearchable
-          name={'asyncSelect-name'}
-          label={'Select an Option'}
-          validators={[mockValidator]}
-          defaultOptions={true}
-          loadOptions={mockLoadOptions}
-        ></AsyncSelect>
-      </CreateForm>
-    </div>
-  );
+	return (
+		<div>
+			<MockDisclaimer />
+			<CreateForm<CreateFormProps<FormData>> onSubmit={mockHandleSubmit} onCancel={onCancel}>
+				<TextField
+					name={'textField-name'}
+					label={'Enter some Text'}
+					placeholder={'Type something here...'}
+					validators={[mockValidator]}
+					autoFocus
+					maxLength={255}
+				/>
+				<AsyncSelect<MockOptions>
+					isRequired
+					isSearchable
+					name={'asyncSelect-name'}
+					label={'Select an Option'}
+					validators={[mockValidator]}
+					defaultOptions={true}
+					loadOptions={mockLoadOptions}
+				></AsyncSelect>
+			</CreateForm>
+		</div>
+	);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -46,8 +46,9 @@
     "@atlaskit/intl-messages-provider": "^1.0.2",
     "@atlaskit/linking-common": "^5.7.0",
     "@atlaskit/modal-dialog": "^12.13.0",
-    "@atlaskit/primitives": "^6.4.0",
+    "@atlaskit/primitives": "^6.5.0",
     "@atlaskit/select": "^17.10.0",
+    "@atlaskit/smart-user-picker": "^6.9.0",
     "@atlaskit/spinner": "^16.1.0",
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/tokens": "^1.49.0",