@atlaskit/link-create 2.14.0 → 2.15.1

package/dist/cjs/common/ui/modal-hero/old/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalHeroOld = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _errorBoundary = require("../../../../common/ui/error-boundary");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var ErrorComponent = function ErrorComponent() {
+  // when there's an error, render nothing but report the issue
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, null);
+};
+var ModalHeroOld = exports.ModalHeroOld = function ModalHeroOld(_ref) {
+  var hero = _ref.hero;
+  if (!hero) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    testId: "link-create-modal-hero"
+  }, /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+    errorComponent: /*#__PURE__*/_react.default.createElement(ErrorComponent, null)
+  }, hero));
+};

package/dist/cjs/controllers/create-field/main.compiled.css

@@ -0,0 +1 @@
+._19pku2gc{margin-top:var(--ds-space-100,8px)}

package/dist/cjs/controllers/create-field/main.js

@@ -1,25 +1,28 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CreateField = CreateField;
+exports.CreateField = void 0;
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
 var _reactFinalForm = require("react-final-form");
 var _form = require("@atlaskit/form");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _message = require("../../common/ui/message");
 var _form2 = require("../../common/utils/form");
+var _main = require("./old/main");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-var fieldWrapperStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-100, 8px)"
-});
-function CreateField(_ref) {
+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 fieldWrapperStyles = null;
+var CreateFieldNew = function CreateFieldNew(_ref) {
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -29,7 +32,7 @@ function CreateField(_ref) {
     testId = _ref.testId,
     children = _ref.children;
   var fieldId = id ? id : "link-create-field-".concat(name);
-  return (0, _react.jsx)(_reactFinalForm.Field, {
+  return /*#__PURE__*/React.createElement(_reactFinalForm.Field, {
     name: name,
     validate: function validate(value) {
       var _find;
@@ -48,29 +51,35 @@ function CreateField(_ref) {
     var describedById = "".concat(fieldId, "-description");
     var errorMessageId = "".concat(fieldId, "-error");
     var ariaErrorMessage = showErrorMessage ? errorMessageId : undefined;
-    return (0, _react.jsx)("div", {
-      css: fieldWrapperStyles,
-      "data-testid": testId
-    }, label && (0, _react.jsx)(_form.Label, {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": testId,
+      className: (0, _runtime.ax)(["_19pku2gc"])
+    }, label && /*#__PURE__*/React.createElement(_form.Label, {
       htmlFor: fieldId,
       id: "".concat(fieldId, "-label"),
       testId: "".concat(testId, "-label")
-    }, label, isRequired && (0, _react.jsx)(_form.RequiredAsterisk, null)), children(_objectSpread(_objectSpread({}, input), {}, {
+    }, label, isRequired && /*#__PURE__*/React.createElement(_form.RequiredAsterisk, null)), children(_objectSpread(_objectSpread({}, input), {}, {
       fieldId: fieldId,
       isInvalid: isInvalid,
       isRequired: isRequired,
       'aria-errormessage': ariaErrorMessage,
       'aria-describedby': describedById
-    })), (0, _react.jsx)("div", {
+    })), /*#__PURE__*/React.createElement("div", {
       id: describedById
-    }, !hasError && validationHelpText && (0, _react.jsx)(_message.Message, {
+    }, !hasError && validationHelpText && /*#__PURE__*/React.createElement(_message.Message, {
       testId: "".concat(testId, "-helper-message")
-    }, validationHelpText), (0, _react.jsx)("div", {
+    }, validationHelpText), /*#__PURE__*/React.createElement("div", {
       "aria-live": "polite"
-    }, showErrorMessage && (0, _react.jsx)(_message.Message, {
+    }, showErrorMessage && /*#__PURE__*/React.createElement(_message.Message, {
       id: errorMessageId,
       appearance: "error",
       testId: "".concat(testId, "-error-message")
     }, submitError || error))));
   });
-}
+};
+var CreateField = exports.CreateField = function CreateField(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFieldNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_main.CreateFieldOld, props);
+};

package/dist/cjs/controllers/create-field/old/main.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateFieldOld = CreateFieldOld;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _reactFinalForm = require("react-final-form");
+var _form = require("@atlaskit/form");
+var _message = require("../../../common/ui/message");
+var _form2 = require("../../../common/utils/form");
+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; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+var fieldWrapperStyles = (0, _react.css)({
+  marginTop: "var(--ds-space-100, 8px)"
+});
+function CreateFieldOld(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label = _ref.label,
+    isRequired = _ref.isRequired,
+    validators = _ref.validators,
+    validationHelpText = _ref.validationHelpText,
+    testId = _ref.testId,
+    children = _ref.children;
+  var fieldId = id ? id : "link-create-field-".concat(name);
+  return (0, _react.jsx)(_reactFinalForm.Field, {
+    name: name,
+    validate: function validate(value) {
+      var _find;
+      return (_find = (validators !== null && validators !== void 0 ? validators : []).find(function (validator) {
+        return !validator.isValid(value);
+      })) === null || _find === void 0 ? void 0 : _find.errorMessage;
+    }
+  }, function (_ref2) {
+    var input = _ref2.input,
+      meta = _ref2.meta;
+    var isInvalid = (0, _form2.shouldShowValidationErrors)(meta);
+    var submitError = meta.submitError,
+      error = meta.error;
+    var hasError = !!submitError || !!error;
+    var showErrorMessage = hasError && isInvalid;
+    var describedById = "".concat(fieldId, "-description");
+    var errorMessageId = "".concat(fieldId, "-error");
+    var ariaErrorMessage = showErrorMessage ? errorMessageId : undefined;
+    return (0, _react.jsx)("div", {
+      css: fieldWrapperStyles,
+      "data-testid": testId
+    }, label && (0, _react.jsx)(_form.Label, {
+      htmlFor: fieldId,
+      id: "".concat(fieldId, "-label"),
+      testId: "".concat(testId, "-label")
+    }, label, isRequired && (0, _react.jsx)(_form.RequiredAsterisk, null)), children(_objectSpread(_objectSpread({}, input), {}, {
+      fieldId: fieldId,
+      isInvalid: isInvalid,
+      isRequired: isRequired,
+      'aria-errormessage': ariaErrorMessage,
+      'aria-describedby': describedById
+    })), (0, _react.jsx)("div", {
+      id: describedById
+    }, !hasError && validationHelpText && (0, _react.jsx)(_message.Message, {
+      testId: "".concat(testId, "-helper-message")
+    }, validationHelpText), (0, _react.jsx)("div", {
+      "aria-live": "polite"
+    }, showErrorMessage && (0, _react.jsx)(_message.Message, {
+      id: errorMessageId,
+      appearance: "error",
+      testId: "".concat(testId, "-error-message")
+    }, submitError || error))));
+  });
+}

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,23 +12,21 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _debouncePromise = _interopRequireDefault(require("debounce-promise"));
 var _reactFinalForm = require("react-final-form");
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _messages = _interopRequireDefault(require("../../../common/messages"));
 var _callbackContext = require("../../../controllers/callback-context");
 var _createField = require("../../../controllers/create-field");
 var _formContext = require("../../../controllers/form-context");
+var _main = require("./old/main");
 var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId", "defaultOption", "loadOptions"],
   _excluded2 = ["fieldId", "isRequired"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var TEST_ID = exports.TEST_ID = 'link-create-async-select';
 
 /**
@@ -36,7 +35,7 @@ var TEST_ID = exports.TEST_ID = 'link-create-async-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.
  */
-function AsyncSelect(_ref) {
+function AsyncSelectNew(_ref) {
   var id = _ref.id,
     name = _ref.name,
     label = _ref.label,
@@ -170,7 +169,7 @@ function AsyncSelect(_ref) {
   var debouncedLoadOptions = (0, _react.useMemo)(function () {
     return loadOptions ? (0, _debouncePromise.default)(loadOptions, 300) : undefined;
   }, [loadOptions]);
-  return (0, _react2.jsx)(_createField.CreateField, {
+  return /*#__PURE__*/_react.default.createElement(_createField.CreateField, {
     id: id,
     name: name,
     label: label,
@@ -182,7 +181,7 @@ function AsyncSelect(_ref) {
     var fieldId = _ref4.fieldId,
       isRequired = _ref4.isRequired,
       fieldProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
-    return (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({
+    return /*#__PURE__*/_react.default.createElement(_select.AsyncSelect, (0, _extends2.default)({
       inputId: fieldId
     }, fieldProps, restProps, {
       required: isRequired,
@@ -191,4 +190,10 @@ function AsyncSelect(_ref) {
       isLoading: isLoadingDefaultOptions
     }));
   });
+}
+function AsyncSelect(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/_react.default.createElement(AsyncSelectNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_main.AsyncSelectOld, props);
 }

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

@@ -0,0 +1,195 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AsyncSelectOld = AsyncSelectOld;
+exports.TEST_ID = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _debouncePromise = _interopRequireDefault(require("debounce-promise"));
+var _reactFinalForm = require("react-final-form");
+var _reactIntlNext = require("react-intl-next");
+var _select = require("@atlaskit/select");
+var _messages = _interopRequireDefault(require("../../../../common/messages"));
+var _callbackContext = require("../../../../controllers/callback-context");
+var _createField = require("../../../../controllers/create-field");
+var _formContext = require("../../../../controllers/form-context");
+var _excluded = ["id", "name", "label", "isRequired", "validators", "validationHelpText", "testId", "defaultOption", "loadOptions"],
+  _excluded2 = ["fieldId", "isRequired"];
+/* 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
+var TEST_ID = exports.TEST_ID = 'link-create-async-select';
+
+/**
+ * An async select utilising the Atlaskit AsyncSelect 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.
+ */
+function AsyncSelectOld(_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,
+    propsDefaultValue = _ref.defaultOption,
+    loadOptionsFn = _ref.loadOptions,
+    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useForm = (0, _reactFinalForm.useForm)(),
+    mutators = _useForm.mutators;
+  var _useLinkCreateCallbac = (0, _callbackContext.useLinkCreateCallback)(),
+    onFailure = _useLinkCreateCallbac.onFailure;
+  var _useFormContext = (0, _formContext.useFormContext)(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var _useState = (0, _react.useState)(propsDefaultValue),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    defaultValue = _useState2[0],
+    setDefaultValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isLoadingDefaultOptions = _useState4[0],
+    setIsLoadingDefaultOptions = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    defaultOptions = _useState6[0],
+    setDefaultOptions = _useState6[1];
+
+  /**
+   * This binds experience to fail if async fetch ever fails to load
+   */
+  var loadOptions = (0, _react.useMemo)(function () {
+    if (loadOptionsFn) {
+      return /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _args = arguments;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.next = 3;
+              return loadOptionsFn.apply(void 0, _args);
+            case 3:
+              return _context.abrupt("return", _context.sent);
+            case 6:
+              _context.prev = 6;
+              _context.t0 = _context["catch"](0);
+              onFailure === null || onFailure === void 0 || onFailure(_context.t0);
+              setFormErrorMessage(intl.formatMessage(_messages.default.genericErrorMessage));
+              return _context.abrupt("return", []);
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 6]]);
+      }));
+    }
+  }, [intl, onFailure, loadOptionsFn, setFormErrorMessage]);
+  (0, _react.useEffect)(function () {
+    var current = true;
+    var fetch = /*#__PURE__*/function () {
+      var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+        var query,
+          options,
+          _args2 = arguments;
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              query = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : '';
+              if (loadOptions) {
+                _context2.next = 3;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
+              _context2.prev = 3;
+              /**
+               * If we are fetching default options, clear the
+               * value the user has set
+               */
+              if (mutators.setField) {
+                mutators.setField(name, null);
+              }
+              setIsLoadingDefaultOptions(true);
+              setDefaultOptions([]);
+              _context2.next = 9;
+              return loadOptions(query);
+            case 9:
+              options = _context2.sent;
+              if (current) {
+                setDefaultOptions(options);
+                setIsLoadingDefaultOptions(false);
+              }
+              _context2.next = 16;
+              break;
+            case 13:
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](3);
+              if (current) {
+                setIsLoadingDefaultOptions(false);
+              }
+            case 16:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[3, 13]]);
+      }));
+      return function fetch() {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+    fetch();
+    return function () {
+      current = false;
+    };
+  }, [loadOptions, setIsLoadingDefaultOptions, setDefaultOptions, mutators, name]);
+  (0, _react.useEffect)(function () {
+    /**
+     * Mutate the form state to set a default value for this field
+     * if `defaultOption` is a prop and we have not set a value for it yet
+     */
+    if (!defaultValue && propsDefaultValue) {
+      setDefaultValue(propsDefaultValue);
+      if (mutators.setField) {
+        mutators.setField(name, propsDefaultValue);
+      }
+    }
+  }, [defaultValue, propsDefaultValue, name, mutators]);
+  var debouncedLoadOptions = (0, _react.useMemo)(function () {
+    return loadOptions ? (0, _debouncePromise.default)(loadOptions, 300) : undefined;
+  }, [loadOptions]);
+  return (0, _react2.jsx)(_createField.CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, function (_ref4) {
+    var fieldId = _ref4.fieldId,
+      isRequired = _ref4.isRequired,
+      fieldProps = (0, _objectWithoutProperties2.default)(_ref4, _excluded2);
+    return (0, _react2.jsx)(_select.AsyncSelect, (0, _extends2.default)({
+      inputId: fieldId
+    }, fieldProps, restProps, {
+      required: isRequired,
+      loadOptions: debouncedLoadOptions,
+      defaultOptions: defaultOptions,
+      isLoading: isLoadingDefaultOptions
+    }));
+  });
+}

package/dist/cjs/ui/create-form/form-footer/main.compiled.css

@@ -0,0 +1,5 @@
+._19pk1ejb{margin-top:var(--ds-space-300,24px)}
+._1bahesu3{justify-content:flex-end}
+._1e0c1txw{display:flex}
+._2hwx1wug{margin-right:auto}
+._4cvr1h6o{align-items:center}

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

@@ -1,56 +1,50 @@
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CreateFormFooter = CreateFormFooter;
-var _react = require("@emotion/react");
+exports.CreateFormFooter = void 0;
+require("./main.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _reactIntlNext = require("react-intl-next");
 var _button = require("@atlaskit/button");
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _Button = require("../../../common/ui/Button");
 var _editButton = require("./edit-button");
 var _messages = require("./messages");
+var _main = require("./old/main");
 var _submitButton = require("./submit-button");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var formFooterWrapperStyles = (0, _react.css)({
-  display: 'flex',
-  marginTop: "var(--ds-space-300, 24px)",
-  justifyContent: 'flex-end'
-});
-var errorStyles = (0, _react.css)({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var formFooterWrapperStyles = null;
+var errorStyles = null;
 /**
  * Footer for the Create Form, used as a wrapper for action buttons
  * and form error messages. This component is unmounted if
  * hideFooter is true in the Create Form.
  */
-function CreateFormFooter(_ref) {
+var CreateFormFooterNew = function CreateFormFooterNew(_ref) {
   var formErrorMessage = _ref.formErrorMessage,
     handleCancel = _ref.handleCancel,
     testId = _ref.testId;
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)("footer", {
+  return /*#__PURE__*/React.createElement("footer", {
     "data-testid": "".concat(testId, "-footer"),
-    css: formFooterWrapperStyles
-  }, formErrorMessage && (0, _react.jsx)("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _19pk1ejb _1bahesu3"])
+  }, formErrorMessage && /*#__PURE__*/React.createElement("div", {
     role: "alert",
-    css: errorStyles,
-    "data-testid": "".concat(testId, "-error")
-  }, (0, _react.jsx)(_error.default, {
+    "data-testid": "".concat(testId, "-error"),
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _2hwx1wug"])
+  }, /*#__PURE__*/React.createElement(_error.default, {
     label: formErrorMessage,
     color: "var(--ds-icon-danger, #E34935)",
     spacing: "spacious"
-  }), formErrorMessage), (0, _react.jsx)(_button.ButtonGroup, null, (0, _react.jsx)(_Button.Button, {
+  }), formErrorMessage), /*#__PURE__*/React.createElement(_button.ButtonGroup, null, /*#__PURE__*/React.createElement(_Button.Button, {
     type: "button",
     actionSubjectId: "cancel",
     appearance: "subtle",
@@ -59,5 +53,11 @@ function CreateFormFooter(_ref) {
       handleCancel();
     },
     testId: "".concat(testId, "-button-cancel")
-  }, intl.formatMessage(_messages.messages.close)), (0, _react.jsx)(_editButton.EditButton, null), (0, _react.jsx)(_submitButton.SubmitButton, null)));
-}
+  }, intl.formatMessage(_messages.messages.close)), /*#__PURE__*/React.createElement(_editButton.EditButton, null), /*#__PURE__*/React.createElement(_submitButton.SubmitButton, null)));
+};
+var CreateFormFooter = exports.CreateFormFooter = function CreateFormFooter(props) {
+  if ((0, _platformFeatureFlags.fg)('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormFooterNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_main.CreateFormFooterOld, props);
+};

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateFormFooterOld = CreateFormFooterOld;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = require("@atlaskit/button");
+var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _Button = require("../../../../common/ui/Button");
+var _editButton = require("../edit-button");
+var _messages = require("../messages");
+var _submitButton = require("../submit-button");
+/* 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
+
+var formFooterWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  marginTop: "var(--ds-space-300, 24px)",
+  justifyContent: 'flex-end'
+});
+var errorStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  marginRight: 'auto'
+});
+/**
+ * Footer for the Create Form, used as a wrapper for action buttons
+ * and form error messages. This component is unmounted if
+ * hideFooter is true in the Create Form.
+ */
+function CreateFormFooterOld(_ref) {
+  var formErrorMessage = _ref.formErrorMessage,
+    handleCancel = _ref.handleCancel,
+    testId = _ref.testId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)("footer", {
+    "data-testid": "".concat(testId, "-footer"),
+    css: formFooterWrapperStyles
+  }, formErrorMessage && (0, _react.jsx)("div", {
+    role: "alert",
+    css: errorStyles,
+    "data-testid": "".concat(testId, "-error")
+  }, (0, _react.jsx)(_error.default, {
+    label: formErrorMessage,
+    color: "var(--ds-icon-danger, #E34935)",
+    spacing: "spacious"
+  }), formErrorMessage), (0, _react.jsx)(_button.ButtonGroup, null, (0, _react.jsx)(_Button.Button, {
+    type: "button",
+    actionSubjectId: "cancel",
+    appearance: "subtle",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      handleCancel();
+    },
+    testId: "".concat(testId, "-button-cancel")
+  }, intl.formatMessage(_messages.messages.close)), (0, _react.jsx)(_editButton.EditButton, null), (0, _react.jsx)(_submitButton.SubmitButton, null)));
+}

package/dist/cjs/ui/create-form/form-loader/main.compiled.css

@@ -0,0 +1,4 @@
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkeuuw1{min-height:200px}
+._4cvr1h6o{align-items:center}