@atlaskit/link-create 3.1.1 → 4.0.0

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

@@ -1,74 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
-import { css, jsx } from '@emotion/react';
-import { Field } from 'react-final-form';
-import { Label, RequiredAsterisk } from '@atlaskit/form';
-import { Message } from '../../../common/ui/message';
-import { shouldShowValidationErrors } from '../../../common/utils/form';
-const fieldWrapperStyles = css({
-  marginTop: "var(--ds-space-100, 8px)"
-});
-export function CreateFieldOld({
-  id,
-  name,
-  label,
-  isRequired,
-  validators,
-  validationHelpText,
-  testId,
-  children
-}) {
-  const fieldId = id ? id : `link-create-field-${name}`;
-  return jsx(Field, {
-    name: name,
-    validate: value => {
-      var _find;
-      return (_find = (validators !== null && validators !== void 0 ? validators : []).find(validator => {
-        return !validator.isValid(value);
-      })) === null || _find === void 0 ? void 0 : _find.errorMessage;
-    }
-  }, ({
-    input,
-    meta
-  }) => {
-    const isInvalid = shouldShowValidationErrors(meta);
-    const {
-      submitError,
-      error
-    } = meta;
-    const hasError = !!submitError || !!error;
-    const showErrorMessage = hasError && isInvalid;
-    const describedById = `${fieldId}-description`;
-    const errorMessageId = `${fieldId}-error`;
-    const ariaErrorMessage = showErrorMessage ? errorMessageId : undefined;
-    return jsx("div", {
-      css: fieldWrapperStyles,
-      "data-testid": testId
-    }, label && jsx(Label, {
-      htmlFor: fieldId,
-      id: `${fieldId}-label`,
-      testId: `${testId}-label`
-    }, label, isRequired && jsx(RequiredAsterisk, null)), children({
-      ...input,
-      fieldId,
-      isInvalid,
-      isRequired,
-      'aria-errormessage': ariaErrorMessage,
-      'aria-describedby': describedById
-    }), jsx("div", {
-      id: describedById
-    }, !hasError && validationHelpText && jsx(Message, {
-      testId: `${testId}-helper-message`
-    }, validationHelpText), jsx("div", {
-      "aria-live": "polite"
-    }, showErrorMessage && jsx(Message, {
-      id: errorMessageId,
-      appearance: "error",
-      testId: `${testId}-error-message`
-    }, submitError || error))));
-  });
-}

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

@@ -1,137 +0,0 @@
-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/old/main.js

@@ -1,57 +0,0 @@
-/* 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/old/main.js

@@ -1,31 +0,0 @@
-/**
- * @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/old/main.js

@@ -1,145 +0,0 @@
-/* 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/old/main.js

@@ -1,106 +0,0 @@
-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/old/main.js

@@ -1,45 +0,0 @@
-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/old/main.js

@@ -1,59 +0,0 @@
-/* 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/old/index.js

@@ -1,30 +0,0 @@
-/* eslint-disable @atlassian/tangerine/import/no-parent-imports */
-/**
- * @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 { AnalyticsContext } from '@atlaskit/analytics-next';
-import { IntlMessagesProvider } from '@atlaskit/intl-messages-provider';
-import { PACKAGE_DATA } from '../../../common/constants';
-import { ErrorBoundary } from '../../../common/ui/error-boundary';
-import { Experience } from '../../../common/ui/experience-tracker';
-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';
-const LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__*/memo(props => {
-  return jsx(Experience, null, jsx(ErrorBoundary, null, jsx(InlineCreate, props)));
-}));
-const ComposedLinkCreateOld = /*#__PURE__*/memo(props => {
-  return jsx(AnalyticsContext, {
-    data: PACKAGE_DATA
-  }, jsx(IntlMessagesProvider, {
-    defaultMessages: i18nEN,
-    loaderFn: fetchMessagesForLocale
-  }, jsx(LinkCreateWithAnalyticsContext, props)));
-});
-export default ComposedLinkCreateOld;