@atlaskit/link-create 2.14.0 → 2.15.1

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

@@ -1,20 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useEffect, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useEffect, useMemo, useState } from 'react';
 import debounce from 'debounce-promise';
 import { useForm } from 'react-final-form';
 import { useIntl } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
 import messages from '../../../common/messages';
 import { useLinkCreateCallback } from '../../../controllers/callback-context';
 import { CreateField } from '../../../controllers/create-field';
 import { useFormContext } from '../../../controllers/form-context';
+import { AsyncSelectOld } from './old/main';
 export const TEST_ID = 'link-create-async-select';
 
 /**
@@ -23,7 +18,7 @@ export const 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.
  */
-export function AsyncSelect({
+function AsyncSelectNew({
   id,
   name,
   label,
@@ -111,7 +106,7 @@ export function AsyncSelect({
     }
   }, [defaultValue, propsDefaultValue, name, mutators]);
   const debouncedLoadOptions = useMemo(() => loadOptions ? debounce(loadOptions, 300) : undefined, [loadOptions]);
-  return jsx(CreateField, {
+  return /*#__PURE__*/React.createElement(CreateField, {
     id: id,
     name: name,
     label: label,
@@ -124,7 +119,7 @@ export function AsyncSelect({
     isRequired,
     ...fieldProps
   }) => {
-    return jsx(AkAsyncSelect, _extends({
+    return /*#__PURE__*/React.createElement(AkAsyncSelect, _extends({
       inputId: fieldId
     }, fieldProps, restProps, {
       required: isRequired,
@@ -133,4 +128,10 @@ export function AsyncSelect({
       isLoading: isLoadingDefaultOptions
     }));
   });
+}
+export function AsyncSelect(props) {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(AsyncSelectNew, props);
+  }
+  return /*#__PURE__*/React.createElement(AsyncSelectOld, props);
 }

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

@@ -0,0 +1,137 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useEffect, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import debounce from 'debounce-promise';
+import { useForm } from 'react-final-form';
+import { useIntl } from 'react-intl-next';
+import { AsyncSelect as AkAsyncSelect } from '@atlaskit/select';
+import messages from '../../../../common/messages';
+import { useLinkCreateCallback } from '../../../../controllers/callback-context';
+import { CreateField } from '../../../../controllers/create-field';
+import { useFormContext } from '../../../../controllers/form-context';
+export const 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.
+ */
+export function AsyncSelectOld({
+  id,
+  name,
+  label,
+  isRequired,
+  validators,
+  validationHelpText,
+  testId = TEST_ID,
+  //@ts-ignore react-select unsupported props
+  defaultOption: propsDefaultValue,
+  loadOptions: loadOptionsFn,
+  ...restProps
+}) {
+  const {
+    mutators
+  } = useForm();
+  const {
+    onFailure
+  } = useLinkCreateCallback();
+  const {
+    setFormErrorMessage
+  } = useFormContext();
+  const intl = useIntl();
+  const [defaultValue, setDefaultValue] = useState(propsDefaultValue);
+  const [isLoadingDefaultOptions, setIsLoadingDefaultOptions] = useState(false);
+  const [defaultOptions, setDefaultOptions] = useState([]);
+
+  /**
+   * This binds experience to fail if async fetch ever fails to load
+   */
+  const loadOptions = useMemo(() => {
+    if (loadOptionsFn) {
+      return async function (...args) {
+        try {
+          return await loadOptionsFn(...args);
+        } catch (err) {
+          onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+          setFormErrorMessage(intl.formatMessage(messages.genericErrorMessage));
+          return [];
+        }
+      };
+    }
+  }, [intl, onFailure, loadOptionsFn, setFormErrorMessage]);
+  useEffect(() => {
+    let current = true;
+    const fetch = async (query = '') => {
+      if (!loadOptions) {
+        return;
+      }
+      try {
+        /**
+         * If we are fetching default options, clear the
+         * value the user has set
+         */
+        if (mutators.setField) {
+          mutators.setField(name, null);
+        }
+        setIsLoadingDefaultOptions(true);
+        setDefaultOptions([]);
+        const options = await loadOptions(query);
+        if (current) {
+          setDefaultOptions(options);
+          setIsLoadingDefaultOptions(false);
+        }
+      } catch (err) {
+        if (current) {
+          setIsLoadingDefaultOptions(false);
+        }
+      }
+    };
+    fetch();
+    return () => {
+      current = false;
+    };
+  }, [loadOptions, setIsLoadingDefaultOptions, setDefaultOptions, mutators, name]);
+  useEffect(() => {
+    /**
+     * 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]);
+  const debouncedLoadOptions = useMemo(() => loadOptions ? debounce(loadOptions, 300) : undefined, [loadOptions]);
+  return jsx(CreateField, {
+    id: id,
+    name: name,
+    label: label,
+    isRequired: isRequired,
+    validators: validators,
+    validationHelpText: validationHelpText,
+    testId: testId
+  }, ({
+    fieldId,
+    isRequired,
+    ...fieldProps
+  }) => {
+    return jsx(AkAsyncSelect, _extends({
+      inputId: fieldId
+    }, fieldProps, restProps, {
+      required: isRequired,
+      loadOptions: debouncedLoadOptions,
+      defaultOptions: defaultOptions,
+      isLoading: isLoadingDefaultOptions
+    }));
+  });
+}

package/dist/es2019/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/es2019/ui/create-form/form-footer/main.js

@@ -1,49 +1,41 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import { ButtonGroup } from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Button } from '../../../common/ui/Button';
 import { EditButton } from './edit-button';
 import { messages } from './messages';
+import { CreateFormFooterOld } from './old/main';
 import { SubmitButton } from './submit-button';
-const formFooterWrapperStyles = css({
-  display: 'flex',
-  marginTop: "var(--ds-space-300, 24px)",
-  justifyContent: 'flex-end'
-});
-const errorStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  marginRight: 'auto'
-});
+const formFooterWrapperStyles = null;
+const 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.
  */
-export function CreateFormFooter({
+const CreateFormFooterNew = ({
   formErrorMessage,
   handleCancel,
   testId
-}) {
+}) => {
   const intl = useIntl();
-  return jsx("footer", {
+  return /*#__PURE__*/React.createElement("footer", {
     "data-testid": `${testId}-footer`,
-    css: formFooterWrapperStyles
-  }, formErrorMessage && jsx("div", {
+    className: ax(["_1e0c1txw _19pk1ejb _1bahesu3"])
+  }, formErrorMessage && /*#__PURE__*/React.createElement("div", {
     role: "alert",
-    css: errorStyles,
-    "data-testid": `${testId}-error`
-  }, jsx(ErrorIcon, {
+    "data-testid": `${testId}-error`,
+    className: ax(["_1e0c1txw _4cvr1h6o _2hwx1wug"])
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
     label: formErrorMessage,
     color: "var(--ds-icon-danger, #E34935)",
     spacing: "spacious"
-  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+  }), formErrorMessage), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     actionSubjectId: "cancel",
     appearance: "subtle",
@@ -52,5 +44,11 @@ export function CreateFormFooter({
       handleCancel();
     },
     testId: `${testId}-button-cancel`
-  }, intl.formatMessage(messages.close)), jsx(EditButton, null), jsx(SubmitButton, null)));
-}
+  }, intl.formatMessage(messages.close)), /*#__PURE__*/React.createElement(EditButton, null), /*#__PURE__*/React.createElement(SubmitButton, null)));
+};
+export const CreateFormFooter = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormFooterNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFormFooterOld, props);
+};

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

@@ -0,0 +1,57 @@
+/* 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 { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { ButtonGroup } from '@atlaskit/button';
+import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { Button } from '../../../../common/ui/Button';
+import { EditButton } from '../edit-button';
+import { messages } from '../messages';
+import { SubmitButton } from '../submit-button';
+const formFooterWrapperStyles = css({
+  display: 'flex',
+  marginTop: "var(--ds-space-300, 24px)",
+  justifyContent: 'flex-end'
+});
+const errorStyles = 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.
+ */
+export function CreateFormFooterOld({
+  formErrorMessage,
+  handleCancel,
+  testId
+}) {
+  const intl = useIntl();
+  return jsx("footer", {
+    "data-testid": `${testId}-footer`,
+    css: formFooterWrapperStyles
+  }, formErrorMessage && jsx("div", {
+    role: "alert",
+    css: errorStyles,
+    "data-testid": `${testId}-error`
+  }, jsx(ErrorIcon, {
+    label: formErrorMessage,
+    color: "var(--ds-icon-danger, #E34935)",
+    spacing: "spacious"
+  }), formErrorMessage), jsx(ButtonGroup, null, jsx(Button, {
+    type: "button",
+    actionSubjectId: "cancel",
+    appearance: "subtle",
+    onClick: e => {
+      e.stopPropagation();
+      handleCancel();
+    },
+    testId: `${testId}-button-cancel`
+  }, intl.formatMessage(messages.close)), jsx(EditButton, null), jsx(SubmitButton, null)));
+}

package/dist/es2019/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}

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

@@ -1,31 +1,30 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
-import { CREATE_FORM_MIN_HEIGHT_IN_PX } from '../../../common/constants';
-const formLoaderStyles = css({
-  display: `flex`,
-  alignItems: `center`,
-  justifyContent: `center`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  minHeight: `${CREATE_FORM_MIN_HEIGHT_IN_PX}px`
-});
+import { CreateFormLoaderOld } from './old/main';
+const formLoaderStyles = null;
 
 /**
  * Wrapper component for the Spinner, shows while the form
  * performs async functions on load.
  */
-export function CreateFormLoader({
+const CreateFormLoaderNew = ({
   size = 'large'
-}) {
-  return jsx("div", {
-    css: formLoaderStyles
-  }, jsx(Spinner, {
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1h6o _1bah1h6o _1tkeuuw1"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
     size: size,
     interactionName: "load",
     testId: "link-create-form-loader"
   }));
-}
+};
+export const CreateFormLoader = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormLoaderNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFormLoaderOld, props);
+};

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

@@ -0,0 +1,31 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import Spinner from '@atlaskit/spinner';
+import { CREATE_FORM_MIN_HEIGHT_IN_PX } from '../../../../common/constants';
+const formLoaderStyles = css({
+  display: `flex`,
+  alignItems: `center`,
+  justifyContent: `center`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  minHeight: `${CREATE_FORM_MIN_HEIGHT_IN_PX}px`
+});
+
+/**
+ * Wrapper component for the Spinner, shows while the form
+ * performs async functions on load.
+ */
+export function CreateFormLoaderOld({
+  size = 'large'
+}) {
+  return jsx("div", {
+    css: formLoaderStyles
+  }, jsx(Spinner, {
+    size: size,
+    interactionName: "load",
+    testId: "link-create-form-loader"
+  }));
+}

package/dist/es2019/ui/create-form/main.compiled.css

@@ -0,0 +1,9 @@
+._18u01wug{margin-left:auto}
+._19bvidpf{padding-left:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._2hwx1wug{margin-right:auto}
+._ca0qidpf{padding-top:0}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._p12f1y37{max-width:5in}
+._u5f3idpf{padding-right:0}

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

@@ -1,32 +1,26 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* main.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./main.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 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 { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Text } from '@atlaskit/primitives/compiled';
+import { 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`
-});
+import { CreateFormOld } from './old/main';
+const formStyles = null;
 const RESERVED_FIELDS = [LINK_CREATE_FORM_POST_CREATE_FIELD];
 export const TEST_ID = 'link-create-form';
-export const CreateForm = ({
+const CreateFormNew = ({
   children,
   testId = TEST_ID,
   onSubmit,
@@ -94,9 +88,9 @@ export const CreateForm = ({
     onCancel && onCancel();
   }, [onCancel]);
   if (isLoading) {
-    return jsx(CreateFormLoader, null);
+    return /*#__PURE__*/React.createElement(CreateFormLoader, null);
   }
-  return jsx(Form, {
+  return /*#__PURE__*/React.createElement(Form, {
     onSubmit: handleSubmitWithErrorHandling,
     initialValues: initialValues,
     mutators: {
@@ -108,13 +102,13 @@ export const CreateForm = ({
     submitError,
     ...formProps
   }) => {
-    return jsx("form", {
+    return /*#__PURE__*/React.createElement("form", {
       onSubmit: formProps.handleSubmit,
       name: "link-create-form",
       noValidate: true,
       "data-testid": testId,
-      css: formStyles
-    }, jsx(FormSpy, {
+      className: ax(["_p12f1y37 _ca0qidpf _u5f3idpf _n3td1ejb _19bvidpf _19pkze3t _2hwx1wug _otyrze3t _18u01wug"])
+    }, /*#__PURE__*/React.createElement(FormSpy, {
       subscription: {
         modified: true
       },
@@ -127,9 +121,9 @@ export const CreateForm = ({
         const isModified = Object.values(state.modified).some(value => value);
         setShouldShowWarning(isModified);
       }
-    }), !hideRequiredFieldMessage && jsx(Text, {
+    }), !hideRequiredFieldMessage && /*#__PURE__*/React.createElement(Text, {
       as: "p"
-    }, intl.formatMessage(messages.requiredFieldInstruction), " ", jsx(RequiredAsterisk, null)), jsx(Box, null, children), !hideFooter && jsx(CreateFormFooter
+    }, intl.formatMessage(messages.requiredFieldInstruction), " ", /*#__PURE__*/React.createElement(RequiredAsterisk, null)), /*#__PURE__*/React.createElement(Box, null, children), !hideFooter && /*#__PURE__*/React.createElement(CreateFormFooter
     /**
      * We will prefer to render the error message connected to
      * react final form state (submitError) otherwise we can
@@ -141,4 +135,10 @@ export const CreateForm = ({
       testId: testId
     }));
   });
+};
+export const CreateForm = props => {
+  if (fg('platform_bandicoots-link-create-css')) {
+    return /*#__PURE__*/React.createElement(CreateFormNew, props);
+  }
+  return /*#__PURE__*/React.createElement(CreateFormOld, props);
 };