@atlaskit/link-create 2.13.20 → 2.15.0

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

@@ -0,0 +1,174 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+var _excluded = ["submitError"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FORM_ERROR } from 'final-form';
+import { Form, FormSpy } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import { RequiredAsterisk } from '@atlaskit/form';
+import { Box, Text } from '@atlaskit/primitives';
+import { CREATE_FORM_MAX_WIDTH_IN_PX, LINK_CREATE_FORM_POST_CREATE_FIELD } from '../../../common/constants';
+import messages from '../../../common/messages';
+import { useLinkCreateCallback } from '../../../controllers/callback-context';
+import { useExitWarningModal } from '../../../controllers/exit-warning-modal-context';
+import { useFormContext } from '../../../controllers/form-context';
+import { CreateFormFooter } from '../form-footer';
+import { CreateFormLoader } from '../form-loader';
+var formStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  maxWidth: "".concat(CREATE_FORM_MAX_WIDTH_IN_PX, "px"),
+  padding: "0 0 ".concat("var(--ds-space-300, 24px)", " 0"),
+  margin: "var(--ds-space-0, 0px)".concat(" auto")
+});
+var RESERVED_FIELDS = [LINK_CREATE_FORM_POST_CREATE_FIELD];
+export var TEST_ID = 'link-create-form';
+export var CreateFormOld = function CreateFormOld(_ref) {
+  var children = _ref.children,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    onSubmit = _ref.onSubmit,
+    onCancel = _ref.onCancel,
+    isLoading = _ref.isLoading,
+    hideFooter = _ref.hideFooter,
+    hideRequiredFieldMessage = _ref.hideRequiredFieldMessage,
+    initialValues = _ref.initialValues;
+  var _useFormContext = useFormContext(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage,
+    formErrorMessage = _useFormContext.formErrorMessage,
+    enableEditView = _useFormContext.enableEditView;
+  var intl = useIntl();
+  var _useExitWarningModal = useExitWarningModal(),
+    setShouldShowWarning = _useExitWarningModal.setShouldShowWarning;
+  var _useLinkCreateCallbac = useLinkCreateCallback(),
+    onFailure = _useLinkCreateCallbac.onFailure;
+  var handleSubmit = useCallback( /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
+      var shouldEnableEditView, formData;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            shouldEnableEditView = data[LINK_CREATE_FORM_POST_CREATE_FIELD], formData = _objectWithoutProperties(data, [LINK_CREATE_FORM_POST_CREATE_FIELD].map(_toPropertyKey));
+            /**
+             * If form has post-create field set to trigger post-create edit
+             * send this to the form context so we know what to do next
+             * if submission is successful
+             */
+            enableEditView === null || enableEditView === void 0 || enableEditView(!!shouldEnableEditView);
+
+            /**
+             * This is the onSubmit handler provided by the plugin
+             * It will be async, and it will likely involve awaiting `onCreate` (the adopters handler)
+             */
+            return _context.abrupt("return", onSubmit(formData));
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [onSubmit, enableEditView]);
+  var handleSubmitWithErrorHandling = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _args2 = arguments;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          /**
+           * Clear any error message that may have been set by async select fields
+           * This will immediately remove any indication of an error, but the form likely will fail to submit,
+           * it will be likely a 400 because the user probably could not set all fields anyway
+           */
+          setFormErrorMessage();
+          _context2.next = 4;
+          return handleSubmit.apply(void 0, _args2);
+        case 4:
+          return _context2.abrupt("return", _context2.sent);
+        case 7:
+          _context2.prev = 7;
+          _context2.t0 = _context2["catch"](0);
+          /**
+           * Notify link create of failed experience
+           */
+          onFailure === null || onFailure === void 0 || onFailure(_context2.t0);
+
+          /**
+           * Return a generic message for react final form to render
+           */
+          return _context2.abrupt("return", _defineProperty({}, FORM_ERROR, intl.formatMessage(messages.genericErrorMessage)));
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 7]]);
+  })), [handleSubmit, setFormErrorMessage, intl, onFailure]);
+  var handleCancel = useCallback(function () {
+    onCancel && onCancel();
+  }, [onCancel]);
+  if (isLoading) {
+    return jsx(CreateFormLoader, null);
+  }
+  return jsx(Form, {
+    onSubmit: handleSubmitWithErrorHandling,
+    initialValues: initialValues,
+    mutators: {
+      setField: function setField(args, state, tools) {
+        tools.changeValue(state, args[0].toString(), function () {
+          return args[1];
+        });
+      }
+    }
+  }, function (_ref5) {
+    var submitError = _ref5.submitError,
+      formProps = _objectWithoutProperties(_ref5, _excluded);
+    return jsx("form", {
+      onSubmit: formProps.handleSubmit,
+      name: "link-create-form",
+      noValidate: true,
+      "data-testid": testId,
+      css: formStyles
+    }, jsx(FormSpy, {
+      subscription: {
+        modified: true
+      },
+      onChange: function onChange(state) {
+        // determine if any of the fields have been modified
+        if (!state.modified) {
+          setShouldShowWarning(false);
+          return;
+        }
+        var isModified = Object.values(state.modified).some(function (value) {
+          return value;
+        });
+        setShouldShowWarning(isModified);
+      }
+    }), !hideRequiredFieldMessage && jsx(Text, {
+      as: "p"
+    }, 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
+     * default to the `formErrorMessage` that we sometimes use with our own
+     * "form context" (only currently used for AsyncSelect field reporting failed loading)
+     */, {
+      formErrorMessage: submitError || formErrorMessage,
+      handleCancel: handleCancel,
+      testId: testId
+    }));
+  });
+};

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

@@ -7,20 +7,16 @@ var _excluded = ["id", "name", "label", "isRequired", "validators", "validationH
   _excluded4 = ["children"];
 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) { _defineProperty(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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { Inline } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline } from '@atlaskit/primitives/compiled';
 import AkSelect, { components } from '@atlaskit/select';
 import { layers } from '@atlaskit/theme/constants';
 import { UrlIcon } from '../../../common/ui/icon';
 import { CreateField } from '../../../controllers/create-field';
 import { messages } from './messages';
+import { SelectOld, SitePickerOptionOld, SitePickerSingleValueOld, SiteSelectOld } from './old/main';
 export var TEST_ID = 'link-create-select';
 
 /**
@@ -29,7 +25,7 @@ export var TEST_ID = 'link-create-select';
  * errors returned by the handleSubmit function passed to the form <Form> that
  * have a key matching the `name` of this field are shown below the field.
  */
-export function Select(_ref) {
+function SelectNew(_ref) {
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -39,7 +35,7 @@ export function Select(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return jsx(CreateField, {
+  return /*#__PURE__*/React.createElement(CreateField, {
     id: id,
     name: name,
     label: label,
@@ -51,27 +47,33 @@ export function Select(_ref) {
     var fieldId = _ref2.fieldId,
       isRequired = _ref2.isRequired,
       fieldProps = _objectWithoutProperties(_ref2, _excluded2);
-    return jsx(AkSelect, _extends({
+    return /*#__PURE__*/React.createElement(AkSelect, _extends({
       required: isRequired,
       inputId: fieldId
     }, fieldProps, restProps));
   });
 }
-export var SiteSelect = function SiteSelect(_ref3) {
+export function Select(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SelectNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SelectOld, props);
+}
+var SiteSelectNew = function SiteSelectNew(_ref3) {
   var options = _ref3.options,
     name = _ref3.name,
     testId = _ref3.testId;
   var intl = useIntl();
   var siteTestId = testId ? testId : 'link-create-site-picker';
-  return jsx(Select, {
+  return /*#__PURE__*/React.createElement(SelectOld, {
     isRequired: true,
     isSearchable: true,
     name: name !== null && name !== void 0 ? name : 'site',
     options: options,
     label: intl.formatMessage(messages.siteLabel),
     components: {
-      Option: SitePickerOption,
-      SingleValue: SitePickerSingleValue
+      Option: SitePickerOptionNew,
+      SingleValue: SitePickerSingleValueNew
     },
     testId: siteTestId,
     styles: {
@@ -90,27 +92,45 @@ export var SiteSelect = function SiteSelect(_ref3) {
     }
   });
 };
+export var SiteSelect = function SiteSelect(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SiteSelectNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SiteSelectOld, props);
+};
 var SiteRow = function SiteRow(_ref4) {
   var avatarUrl = _ref4.avatarUrl,
     children = _ref4.children;
-  return jsx(Inline, {
+  return /*#__PURE__*/React.createElement(Inline, {
     space: "space.100",
     alignBlock: "center"
-  }, avatarUrl ? jsx(UrlIcon, {
+  }, avatarUrl ? /*#__PURE__*/React.createElement(UrlIcon, {
     url: avatarUrl
   }) : null, children);
 };
-export var SitePickerOption = function SitePickerOption(_ref5) {
+var SitePickerOptionNew = function SitePickerOptionNew(_ref5) {
   var children = _ref5.children,
     props = _objectWithoutProperties(_ref5, _excluded3);
-  return jsx(components.Option, props, jsx(SiteRow, {
+  return /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(SiteRow, {
     avatarUrl: props.data.value.avatarUrl
   }, children));
 };
-export var SitePickerSingleValue = function SitePickerSingleValue(_ref6) {
+export var SitePickerOption = function SitePickerOption(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SitePickerOptionNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SitePickerOptionOld, props);
+};
+var SitePickerSingleValueNew = function SitePickerSingleValueNew(_ref6) {
   var children = _ref6.children,
     props = _objectWithoutProperties(_ref6, _excluded4);
-  return jsx(components.SingleValue, props, jsx(SiteRow, {
+  return /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(SiteRow, {
     avatarUrl: props.data.value.avatarUrl
   }, children));
+};
+export var SitePickerSingleValue = function SitePickerSingleValue(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SitePickerSingleValueNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SitePickerSingleValueOld, props);
 };

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

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
+  _excluded2 = ["fieldId", "isRequired"],
+  _excluded3 = ["children"],
+  _excluded4 = ["children"];
+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) { _defineProperty(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 @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { Inline } from '@atlaskit/primitives';
+import AkSelect, { components } from '@atlaskit/select';
+import { layers } from '@atlaskit/theme/constants';
+import { UrlIcon } from '../../../../common/ui/icon';
+import { CreateField } from '../../../../controllers/create-field';
+import { messages } from '../messages';
+export var TEST_ID = 'link-create-select';
+
+/**
+ * A select component utilising the Atlaskit Select and CreateField.
+ * Validation is handled by the form on form submission. Any
+ * errors returned by the handleSubmit function passed to the form <Form> that
+ * have a key matching the `name` of this field are shown below the field.
+ */
+export function SelectOld(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      isRequired = _ref2.isRequired,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded2);
+    return jsx(AkSelect, _extends({
+      required: isRequired,
+      inputId: fieldId
+    }, fieldProps, restProps));
+  });
+}
+export var SiteSelectOld = function SiteSelectOld(_ref3) {
+  var options = _ref3.options,
+    name = _ref3.name,
+    testId = _ref3.testId;
+  var intl = useIntl();
+  var siteTestId = testId ? testId : 'link-create-site-picker';
+  return jsx(SelectOld, {
+    isRequired: true,
+    isSearchable: true,
+    name: name !== null && name !== void 0 ? name : 'site',
+    options: options,
+    label: intl.formatMessage(messages.siteLabel),
+    components: {
+      Option: SitePickerOptionOld,
+      SingleValue: SitePickerSingleValueOld
+    },
+    testId: siteTestId,
+    styles: {
+      menuPortal: function menuPortal(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          zIndex: layers.modal()
+        });
+      },
+      option: function option(base) {
+        return _objectSpread(_objectSpread({}, base), {}, {
+          display: 'flex',
+          alignItems: 'center',
+          cursor: 'pointer'
+        });
+      }
+    }
+  });
+};
+var SiteRow = function SiteRow(_ref4) {
+  var avatarUrl = _ref4.avatarUrl,
+    children = _ref4.children;
+  return jsx(Inline, {
+    space: "space.100",
+    alignBlock: "center"
+  }, avatarUrl ? jsx(UrlIcon, {
+    url: avatarUrl
+  }) : null, children);
+};
+export var SitePickerOptionOld = function SitePickerOptionOld(_ref5) {
+  var children = _ref5.children,
+    props = _objectWithoutProperties(_ref5, _excluded3);
+  return jsx(components.Option, props, jsx(SiteRow, {
+    avatarUrl: props.data.value.avatarUrl
+  }, children));
+};
+export var SitePickerSingleValueOld = function SitePickerSingleValueOld(_ref6) {
+  var children = _ref6.children,
+    props = _objectWithoutProperties(_ref6, _excluded4);
+  return jsx(components.SingleValue, props, jsx(SiteRow, {
+    avatarUrl: props.data.value.avatarUrl
+  }, children));
+};

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

@@ -2,14 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
   _excluded2 = ["fieldId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import AkTextfield from '@atlaskit/textfield';
 import { CreateField } from '../../../controllers/create-field';
+import { TextFieldOld } from './old/main';
 export var TEST_ID = 'link-create-text-field';
 
 /**
@@ -18,8 +15,7 @@ export var TEST_ID = 'link-create-text-field';
  * the handleSubmit function passed to the form <Form> that have a key matching the `name`
  * of this text field are shown above the field.
  */
-
-export function TextField(_ref) {
+var TextFieldNew = function TextFieldNew(_ref) {
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -29,7 +25,7 @@ export function TextField(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     restProps = _objectWithoutProperties(_ref, _excluded);
-  return jsx(CreateField, {
+  return /*#__PURE__*/React.createElement(CreateField, {
     id: id,
     name: name,
     label: label,
@@ -40,8 +36,14 @@ export function TextField(_ref) {
   }, function (_ref2) {
     var fieldId = _ref2.fieldId,
       fieldProps = _objectWithoutProperties(_ref2, _excluded2);
-    return jsx(AkTextfield, _extends({
+    return /*#__PURE__*/React.createElement(AkTextfield, _extends({
       id: fieldId
     }, fieldProps, restProps));
   });
-}
+};
+export var TextField = function TextField(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(TextFieldNew, props);
+  }
+  return /*#__PURE__*/React.createElement(TextFieldOld, props);
+};

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

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId"],
+  _excluded2 = ["fieldId"];
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import AkTextfield from '@atlaskit/textfield';
+import { CreateField } from '../../../../controllers/create-field';
+export var TEST_ID = 'link-create-text-field';
+
+/**
+ * A text field utilising the Atlaskit Textfield and CreateField.
+ * Validation is handled by the form as it is on form submission. Any errors returned by
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
+ * of this text field are shown above the field.
+ */
+export function TextFieldOld(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref2) {
+    var fieldId = _ref2.fieldId,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded2);
+    return jsx(AkTextfield, _extends({
+      id: fieldId
+    }, fieldProps, restProps));
+  });
+}

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

@@ -3,14 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["fieldId", "isRequired"];
 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) { _defineProperty(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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import SmartUserPicker from '@atlaskit/smart-user-picker';
 import { CreateField } from '../../../controllers/create-field';
+import { UserPickerOld } from './old/main';
 export var TEST_ID = 'link-create-user-picker';
 var DEFAULT_DEBOUNCE_TIME = 400;
 var UserPickerWidth = '100%';
@@ -18,8 +15,7 @@ var UserPickerWidth = '100%';
 /**
  * A user picker utilising the SmartUserPicker.
  */
-
-export function UserPicker(_ref) {
+var UserPickerNew = function UserPickerNew(_ref) {
   var productKey = _ref.productKey,
     siteId = _ref.siteId,
     name = _ref.name,
@@ -29,7 +25,7 @@ export function UserPicker(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? TEST_ID : _ref$testId,
     defaultValue = _ref.defaultValue;
-  return jsx(CreateField, {
+  return /*#__PURE__*/React.createElement(CreateField, {
     name: name,
     label: label,
     isRequired: true,
@@ -39,7 +35,7 @@ export function UserPicker(_ref) {
     var fieldId = _ref2.fieldId,
       isRequired = _ref2.isRequired,
       fieldProps = _objectWithoutProperties(_ref2, _excluded);
-    return jsx(SmartUserPicker, {
+    return /*#__PURE__*/React.createElement(SmartUserPicker, {
       defaultValue: defaultValue ? _objectSpread(_objectSpread({}, defaultValue), {}, {
         type: 'user'
       }) : undefined,
@@ -60,4 +56,10 @@ export function UserPicker(_ref) {
       required: isRequired
     });
   });
-}
+};
+export var UserPicker = function UserPicker(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(UserPickerNew, props);
+  }
+  return /*#__PURE__*/React.createElement(UserPickerOld, props);
+};

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

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["fieldId", "isRequired"];
+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) { _defineProperty(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 @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 UserPickerOld(_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,
+      isRequired = _ref2.isRequired,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded);
+    return jsx(SmartUserPicker, {
+      defaultValue: defaultValue ? _objectSpread(_objectSpread({}, defaultValue), {}, {
+        type: 'user'
+      }) : undefined,
+      placeholder: placeholder,
+      onChange: function onChange(value) {
+        return fieldProps.onChange(value);
+      },
+      subtle: true,
+      isMulti: false,
+      productKey: productKey,
+      siteId: siteId,
+      fieldId: fieldId,
+      inputId: fieldId,
+      debounceTime: DEFAULT_DEBOUNCE_TIME,
+      prefetch: true,
+      isClearable: false,
+      width: UserPickerWidth,
+      required: isRequired
+    });
+  });
+}