@atlaskit/link-create 2.14.0 → 2.15.0

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

@@ -0,0 +1,145 @@
+/* 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';
+const 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: `${CREATE_FORM_MAX_WIDTH_IN_PX}px`,
+  padding: `0 0 ${"var(--ds-space-300, 24px)"} 0`,
+  margin: `${"var(--ds-space-0, 0px)"} auto`
+});
+const RESERVED_FIELDS = [LINK_CREATE_FORM_POST_CREATE_FIELD];
+export const TEST_ID = 'link-create-form';
+export const CreateFormOld = ({
+  children,
+  testId = TEST_ID,
+  onSubmit,
+  onCancel,
+  isLoading,
+  hideFooter,
+  hideRequiredFieldMessage,
+  initialValues
+}) => {
+  const {
+    setFormErrorMessage,
+    formErrorMessage,
+    enableEditView
+  } = useFormContext();
+  const intl = useIntl();
+  const {
+    setShouldShowWarning
+  } = useExitWarningModal();
+  const {
+    onFailure
+  } = useLinkCreateCallback();
+  const handleSubmit = useCallback(async data => {
+    const {
+      [LINK_CREATE_FORM_POST_CREATE_FIELD]: shouldEnableEditView,
+      ...formData
+    } = data;
+
+    /**
+     * 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 ? 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 onSubmit(formData);
+  }, [onSubmit, enableEditView]);
+  const handleSubmitWithErrorHandling = useCallback(async (...args) => {
+    try {
+      /**
+       * 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();
+      return await handleSubmit(...args);
+    } catch (error) {
+      /**
+       * Notify link create of failed experience
+       */
+      onFailure === null || onFailure === void 0 ? void 0 : onFailure(error);
+
+      /**
+       * Return a generic message for react final form to render
+       */
+      return {
+        [FORM_ERROR]: intl.formatMessage(messages.genericErrorMessage)
+      };
+    }
+  }, [handleSubmit, setFormErrorMessage, intl, onFailure]);
+  const handleCancel = useCallback(() => {
+    onCancel && onCancel();
+  }, [onCancel]);
+  if (isLoading) {
+    return jsx(CreateFormLoader, null);
+  }
+  return jsx(Form, {
+    onSubmit: handleSubmitWithErrorHandling,
+    initialValues: initialValues,
+    mutators: {
+      setField: (args, state, tools) => {
+        tools.changeValue(state, args[0].toString(), () => args[1]);
+      }
+    }
+  }, ({
+    submitError,
+    ...formProps
+  }) => {
+    return jsx("form", {
+      onSubmit: formProps.handleSubmit,
+      name: "link-create-form",
+      noValidate: true,
+      "data-testid": testId,
+      css: formStyles
+    }, jsx(FormSpy, {
+      subscription: {
+        modified: true
+      },
+      onChange: state => {
+        // determine if any of the fields have been modified
+        if (!state.modified) {
+          setShouldShowWarning(false);
+          return;
+        }
+        const isModified = Object.values(state.modified).some(value => 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/es2019/ui/create-form/select/main.js

@@ -1,18 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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 const TEST_ID = 'link-create-select';
 
 /**
@@ -21,7 +17,7 @@ export const 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({
+function SelectNew({
   id,
   name,
   label,
@@ -31,7 +27,7 @@ export function Select({
   testId = TEST_ID,
   ...restProps
 }) {
-  return jsx(CreateField, {
+  return /*#__PURE__*/React.createElement(CreateField, {
     id: id,
     name: name,
     label: label,
@@ -44,28 +40,34 @@ export function Select({
     isRequired,
     ...fieldProps
   }) => {
-    return jsx(AkSelect, _extends({
+    return /*#__PURE__*/React.createElement(AkSelect, _extends({
       required: isRequired,
       inputId: fieldId
     }, fieldProps, restProps));
   });
 }
-export const SiteSelect = ({
+export function Select(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SelectNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SelectOld, props);
+}
+const SiteSelectNew = ({
   options,
   name,
   testId
 }) => {
   const intl = useIntl();
   const 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: {
@@ -82,24 +84,42 @@ export const SiteSelect = ({
     }
   });
 };
+export const SiteSelect = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SiteSelectNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SiteSelectOld, props);
+};
 const SiteRow = ({
   avatarUrl,
   children
-}) => jsx(Inline, {
+}) => /*#__PURE__*/React.createElement(Inline, {
   space: "space.100",
   alignBlock: "center"
-}, avatarUrl ? jsx(UrlIcon, {
+}, avatarUrl ? /*#__PURE__*/React.createElement(UrlIcon, {
   url: avatarUrl
 }) : null, children);
-export const SitePickerOption = ({
+const SitePickerOptionNew = ({
   children,
   ...props
-}) => jsx(components.Option, props, jsx(SiteRow, {
+}) => /*#__PURE__*/React.createElement(components.Option, props, /*#__PURE__*/React.createElement(SiteRow, {
   avatarUrl: props.data.value.avatarUrl
 }, children));
-export const SitePickerSingleValue = ({
+export const SitePickerOption = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SitePickerOptionNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SitePickerOptionOld, props);
+};
+const SitePickerSingleValueNew = ({
   children,
   ...props
-}) => jsx(components.SingleValue, props, jsx(SiteRow, {
+}) => /*#__PURE__*/React.createElement(components.SingleValue, props, /*#__PURE__*/React.createElement(SiteRow, {
   avatarUrl: props.data.value.avatarUrl
-}, children));
+}, children));
+export const SitePickerSingleValue = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(SitePickerSingleValueNew, props);
+  }
+  return /*#__PURE__*/React.createElement(SitePickerSingleValueOld, props);
+};

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

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* 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 const 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({
+  id,
+  name,
+  label,
+  isRequired,
+  validators,
+  validationHelpText,
+  testId = TEST_ID,
+  ...restProps
+}) {
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, ({
+    fieldId,
+    isRequired,
+    ...fieldProps
+  }) => {
+    return jsx(AkSelect, _extends({
+      required: isRequired,
+      inputId: fieldId
+    }, fieldProps, restProps));
+  });
+}
+export const SiteSelectOld = ({
+  options,
+  name,
+  testId
+}) => {
+  const intl = useIntl();
+  const 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: base => ({
+        ...base,
+        zIndex: layers.modal()
+      }),
+      option: base => ({
+        ...base,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer'
+      })
+    }
+  });
+};
+const SiteRow = ({
+  avatarUrl,
+  children
+}) => jsx(Inline, {
+  space: "space.100",
+  alignBlock: "center"
+}, avatarUrl ? jsx(UrlIcon, {
+  url: avatarUrl
+}) : null, children);
+export const SitePickerOptionOld = ({
+  children,
+  ...props
+}) => jsx(components.Option, props, jsx(SiteRow, {
+  avatarUrl: props.data.value.avatarUrl
+}, children));
+export const SitePickerSingleValueOld = ({
+  children,
+  ...props
+}) => jsx(components.SingleValue, props, jsx(SiteRow, {
+  avatarUrl: props.data.value.avatarUrl
+}, children));

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

@@ -1,12 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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 const TEST_ID = 'link-create-text-field';
 
 /**
@@ -15,8 +12,7 @@ export const 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({
+const TextFieldNew = ({
   id,
   name,
   label,
@@ -25,8 +21,8 @@ export function TextField({
   validationHelpText,
   testId = TEST_ID,
   ...restProps
-}) {
-  return jsx(CreateField, {
+}) => {
+  return /*#__PURE__*/React.createElement(CreateField, {
     id: id,
     name: name,
     label: label,
@@ -38,8 +34,14 @@ export function TextField({
     fieldId,
     ...fieldProps
   }) => {
-    return jsx(AkTextfield, _extends({
+    return /*#__PURE__*/React.createElement(AkTextfield, _extends({
       id: fieldId
     }, fieldProps, restProps));
   });
-}
+};
+export const TextField = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(TextFieldNew, props);
+  }
+  return /*#__PURE__*/React.createElement(TextFieldOld, props);
+};

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

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* 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 const 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({
+  id,
+  name,
+  label,
+  isRequired,
+  validators,
+  validationHelpText,
+  testId = TEST_ID,
+  ...restProps
+}) {
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, ({
+    fieldId,
+    ...fieldProps
+  }) => {
+    return jsx(AkTextfield, _extends({
+      id: fieldId
+    }, fieldProps, restProps));
+  });
+}

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

@@ -1,11 +1,8 @@
-/**
- * @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 const TEST_ID = 'link-create-user-picker';
 const DEFAULT_DEBOUNCE_TIME = 400;
 const UserPickerWidth = '100%';
@@ -13,8 +10,7 @@ const UserPickerWidth = '100%';
 /**
  * A user picker utilising the SmartUserPicker.
  */
-
-export function UserPicker({
+const UserPickerNew = ({
   productKey,
   siteId,
   name,
@@ -23,8 +19,8 @@ export function UserPicker({
   validators,
   testId = TEST_ID,
   defaultValue
-}) {
-  return jsx(CreateField, {
+}) => {
+  return /*#__PURE__*/React.createElement(CreateField, {
     name: name,
     label: label,
     isRequired: true,
@@ -35,7 +31,7 @@ export function UserPicker({
     isRequired,
     ...fieldProps
   }) => {
-    return jsx(SmartUserPicker, {
+    return /*#__PURE__*/React.createElement(SmartUserPicker, {
       defaultValue: defaultValue ? {
         ...defaultValue,
         type: 'user'
@@ -55,4 +51,10 @@ export function UserPicker({
       required: isRequired
     });
   });
-}
+};
+export const UserPicker = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(UserPickerNew, props);
+  }
+  return /*#__PURE__*/React.createElement(UserPickerOld, props);
+};

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

@@ -0,0 +1,59 @@
+/* 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 const TEST_ID = 'link-create-user-picker';
+const DEFAULT_DEBOUNCE_TIME = 400;
+const UserPickerWidth = '100%';
+
+/**
+ * A user picker utilising the SmartUserPicker.
+ */
+
+export function UserPickerOld({
+  productKey,
+  siteId,
+  name,
+  label,
+  placeholder,
+  validators,
+  testId = TEST_ID,
+  defaultValue
+}) {
+  return jsx(CreateField, {
+    name: name,
+    label: label,
+    isRequired: true,
+    testId: testId,
+    validators: validators
+  }, ({
+    fieldId,
+    isRequired,
+    ...fieldProps
+  }) => {
+    return jsx(SmartUserPicker, {
+      defaultValue: defaultValue ? {
+        ...defaultValue,
+        type: 'user'
+      } : undefined,
+      placeholder: placeholder,
+      onChange: value => 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
+    });
+  });
+}

package/dist/es2019/ui/inline-create/index.js

@@ -1,13 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { memo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { memo } from 'react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { PACKAGE_DATA } from '../../common/constants';
 import { ErrorBoundary } from '../../common/ui/error-boundary';
 import { Experience } from '../../common/ui/experience-tracker';
@@ -15,15 +9,22 @@ import { withLinkCreateAnalyticsContext } from '../../common/utils/analytics';
 import { fetchMessagesForLocale } from '../../common/utils/locale/fetch-messages-for-locale';
 import i18nEN from '../../i18n/en';
 import InlineCreate from './main';
+import ComposedLinkCreateOld from './old';
 const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__*/memo(props => {
-  return jsx(Experience, null, jsx(ErrorBoundary, null, jsx(InlineCreate, props)));
+  return /*#__PURE__*/React.createElement(Experience, null, /*#__PURE__*/React.createElement(ErrorBoundary, null, /*#__PURE__*/React.createElement(InlineCreate, props)));
 }));
-const ComposedLinkCreate = /*#__PURE__*/memo(props => {
-  return jsx(AnalyticsContext, {
+const ComposedLinkCreateNew = /*#__PURE__*/memo(props => {
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: PACKAGE_DATA
-  }, jsx(IntlMessagesProvider, {
+  }, /*#__PURE__*/React.createElement(IntlMessagesProvider, {
     defaultMessages: i18nEN,
     loaderFn: fetchMessagesForLocale
-  }, jsx(LinkCreateWithAnalyticsContext, props)));
+  }, /*#__PURE__*/React.createElement(LinkCreateWithAnalyticsContext, props)));
+});
+const ComposedLinkCreate = /*#__PURE__*/memo(props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(ComposedLinkCreateNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ComposedLinkCreateOld, props);
 });
 export default ComposedLinkCreate;