@atlaskit/link-create 3.1.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (166) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/common/constants.js +1 -1
  3. package/dist/cjs/common/ui/error-boundary-modal/index.js +1 -9
  4. package/dist/cjs/common/ui/error-boundary-ui/error-svg/index.js +1 -10
  5. package/dist/cjs/common/ui/icon/index.js +1 -9
  6. package/dist/cjs/common/ui/message/index.js +1 -9
  7. package/dist/cjs/common/ui/modal-hero/index.js +1 -9
  8. package/dist/cjs/controllers/create-field/main.js +1 -9
  9. package/dist/cjs/ui/create-form/async-select/main.js +1 -9
  10. package/dist/cjs/ui/create-form/form-footer/main.js +1 -9
  11. package/dist/cjs/ui/create-form/form-loader/main.js +1 -9
  12. package/dist/cjs/ui/create-form/main.js +1 -9
  13. package/dist/cjs/ui/create-form/select/main.js +7 -33
  14. package/dist/cjs/ui/create-form/textfield/main.js +1 -9
  15. package/dist/cjs/ui/create-form/user-picker/main.js +1 -9
  16. package/dist/cjs/ui/inline-create/index.js +1 -9
  17. package/dist/cjs/ui/inline-create/main.js +1 -9
  18. package/dist/cjs/ui/modal-create/index.js +1 -9
  19. package/dist/cjs/ui/modal-create/main.js +1 -9
  20. package/dist/es2019/common/constants.js +1 -1
  21. package/dist/es2019/common/ui/error-boundary-modal/index.js +1 -9
  22. package/dist/es2019/common/ui/error-boundary-ui/error-svg/index.js +1 -9
  23. package/dist/es2019/common/ui/icon/index.js +1 -9
  24. package/dist/es2019/common/ui/message/index.js +1 -9
  25. package/dist/es2019/common/ui/modal-hero/index.js +1 -9
  26. package/dist/es2019/controllers/create-field/main.js +1 -9
  27. package/dist/es2019/ui/create-form/async-select/main.js +1 -9
  28. package/dist/es2019/ui/create-form/form-footer/main.js +1 -9
  29. package/dist/es2019/ui/create-form/form-loader/main.js +1 -9
  30. package/dist/es2019/ui/create-form/main.js +1 -9
  31. package/dist/es2019/ui/create-form/select/main.js +8 -34
  32. package/dist/es2019/ui/create-form/textfield/main.js +1 -9
  33. package/dist/es2019/ui/create-form/user-picker/main.js +1 -9
  34. package/dist/es2019/ui/inline-create/index.js +1 -9
  35. package/dist/es2019/ui/inline-create/main.js +1 -9
  36. package/dist/es2019/ui/modal-create/index.js +1 -9
  37. package/dist/es2019/ui/modal-create/main.js +1 -9
  38. package/dist/esm/common/constants.js +1 -1
  39. package/dist/esm/common/ui/error-boundary-modal/index.js +1 -9
  40. package/dist/esm/common/ui/error-boundary-ui/error-svg/index.js +1 -9
  41. package/dist/esm/common/ui/icon/index.js +1 -9
  42. package/dist/esm/common/ui/message/index.js +1 -9
  43. package/dist/esm/common/ui/modal-hero/index.js +1 -9
  44. package/dist/esm/controllers/create-field/main.js +1 -9
  45. package/dist/esm/ui/create-form/async-select/main.js +1 -9
  46. package/dist/esm/ui/create-form/form-footer/main.js +1 -9
  47. package/dist/esm/ui/create-form/form-loader/main.js +1 -9
  48. package/dist/esm/ui/create-form/main.js +1 -9
  49. package/dist/esm/ui/create-form/select/main.js +7 -33
  50. package/dist/esm/ui/create-form/textfield/main.js +1 -9
  51. package/dist/esm/ui/create-form/user-picker/main.js +1 -9
  52. package/dist/esm/ui/inline-create/index.js +1 -9
  53. package/dist/esm/ui/inline-create/main.js +1 -9
  54. package/dist/esm/ui/modal-create/index.js +1 -9
  55. package/dist/esm/ui/modal-create/main.js +1 -9
  56. package/dist/types/common/ui/error-boundary-modal/index.d.ts +2 -2
  57. package/dist/types/common/ui/icon/index.d.ts +1 -1
  58. package/dist/types/common/ui/message/index.d.ts +1 -1
  59. package/dist/types/common/ui/modal-hero/index.d.ts +1 -1
  60. package/dist/types/controllers/create-field/main.d.ts +1 -1
  61. package/dist/types/ui/create-form/async-select/main.d.ts +8 -2
  62. package/dist/types/ui/create-form/form-footer/main.d.ts +6 -1
  63. package/dist/types/ui/create-form/form-loader/main.d.ts +5 -1
  64. package/dist/types/ui/create-form/main.d.ts +1 -1
  65. package/dist/types/ui/create-form/select/main.d.ts +11 -5
  66. package/dist/types/ui/create-form/textfield/main.d.ts +8 -2
  67. package/dist/types/ui/create-form/user-picker/main.d.ts +5 -2
  68. package/dist/types-ts4.5/common/ui/error-boundary-modal/index.d.ts +2 -2
  69. package/dist/types-ts4.5/common/ui/icon/index.d.ts +1 -1
  70. package/dist/types-ts4.5/common/ui/message/index.d.ts +1 -1
  71. package/dist/types-ts4.5/common/ui/modal-hero/index.d.ts +1 -1
  72. package/dist/types-ts4.5/controllers/create-field/main.d.ts +1 -1
  73. package/dist/types-ts4.5/ui/create-form/async-select/main.d.ts +8 -2
  74. package/dist/types-ts4.5/ui/create-form/form-footer/main.d.ts +6 -1
  75. package/dist/types-ts4.5/ui/create-form/form-loader/main.d.ts +5 -1
  76. package/dist/types-ts4.5/ui/create-form/main.d.ts +1 -1
  77. package/dist/types-ts4.5/ui/create-form/select/main.d.ts +11 -5
  78. package/dist/types-ts4.5/ui/create-form/textfield/main.d.ts +8 -2
  79. package/dist/types-ts4.5/ui/create-form/user-picker/main.d.ts +5 -2
  80. package/package.json +2 -10
  81. package/report.api.md +1 -1
  82. package/dist/cjs/common/ui/error-boundary-modal/old/index.js +0 -34
  83. package/dist/cjs/common/ui/error-boundary-ui/error-svg/old/index.js +0 -67
  84. package/dist/cjs/common/ui/icon/old/index.js +0 -26
  85. package/dist/cjs/common/ui/message/old/index.js +0 -81
  86. package/dist/cjs/common/ui/modal-hero/old/index.js +0 -27
  87. package/dist/cjs/controllers/create-field/old/main.js +0 -76
  88. package/dist/cjs/ui/create-form/async-select/old/main.js +0 -195
  89. package/dist/cjs/ui/create-form/form-footer/old/main.js +0 -64
  90. package/dist/cjs/ui/create-form/form-loader/old/main.js +0 -39
  91. package/dist/cjs/ui/create-form/old/main.js +0 -177
  92. package/dist/cjs/ui/create-form/select/old/main.js +0 -127
  93. package/dist/cjs/ui/create-form/textfield/old/main.js +0 -55
  94. package/dist/cjs/ui/create-form/user-picker/old/main.js +0 -72
  95. package/dist/cjs/ui/inline-create/old/index.js +0 -38
  96. package/dist/cjs/ui/inline-create/old/main.js +0 -120
  97. package/dist/cjs/ui/modal-create/old/index.js +0 -44
  98. package/dist/cjs/ui/modal-create/old/main.js +0 -164
  99. package/dist/es2019/common/ui/error-boundary-modal/old/index.js +0 -26
  100. package/dist/es2019/common/ui/error-boundary-ui/error-svg/old/index.js +0 -58
  101. package/dist/es2019/common/ui/icon/old/index.js +0 -18
  102. package/dist/es2019/common/ui/message/old/index.js +0 -74
  103. package/dist/es2019/common/ui/modal-hero/old/index.js +0 -19
  104. package/dist/es2019/controllers/create-field/old/main.js +0 -74
  105. package/dist/es2019/ui/create-form/async-select/old/main.js +0 -137
  106. package/dist/es2019/ui/create-form/form-footer/old/main.js +0 -57
  107. package/dist/es2019/ui/create-form/form-loader/old/main.js +0 -31
  108. package/dist/es2019/ui/create-form/old/main.js +0 -145
  109. package/dist/es2019/ui/create-form/select/old/main.js +0 -106
  110. package/dist/es2019/ui/create-form/textfield/old/main.js +0 -45
  111. package/dist/es2019/ui/create-form/user-picker/old/main.js +0 -59
  112. package/dist/es2019/ui/inline-create/old/index.js +0 -30
  113. package/dist/es2019/ui/inline-create/old/main.js +0 -96
  114. package/dist/es2019/ui/modal-create/old/index.js +0 -36
  115. package/dist/es2019/ui/modal-create/old/main.js +0 -137
  116. package/dist/esm/common/ui/error-boundary-modal/old/index.js +0 -25
  117. package/dist/esm/common/ui/error-boundary-ui/error-svg/old/index.js +0 -60
  118. package/dist/esm/common/ui/icon/old/index.js +0 -18
  119. package/dist/esm/common/ui/message/old/index.js +0 -73
  120. package/dist/esm/common/ui/modal-hero/old/index.js +0 -18
  121. package/dist/esm/controllers/create-field/old/main.js +0 -72
  122. package/dist/esm/ui/create-form/async-select/old/main.js +0 -188
  123. package/dist/esm/ui/create-form/form-footer/old/main.js +0 -56
  124. package/dist/esm/ui/create-form/form-loader/old/main.js +0 -31
  125. package/dist/esm/ui/create-form/old/main.js +0 -174
  126. package/dist/esm/ui/create-form/select/old/main.js +0 -117
  127. package/dist/esm/ui/create-form/textfield/old/main.js +0 -47
  128. package/dist/esm/ui/create-form/user-picker/old/main.js +0 -64
  129. package/dist/esm/ui/inline-create/old/index.js +0 -30
  130. package/dist/esm/ui/inline-create/old/main.js +0 -112
  131. package/dist/esm/ui/modal-create/old/index.js +0 -36
  132. package/dist/esm/ui/modal-create/old/main.js +0 -156
  133. package/dist/types/common/ui/error-boundary-modal/old/index.d.ts +0 -11
  134. package/dist/types/common/ui/error-boundary-ui/error-svg/old/index.d.ts +0 -7
  135. package/dist/types/common/ui/icon/old/index.d.ts +0 -7
  136. package/dist/types/common/ui/message/old/index.d.ts +0 -15
  137. package/dist/types/common/ui/modal-hero/old/index.d.ts +0 -4
  138. package/dist/types/controllers/create-field/old/main.d.ts +0 -7
  139. package/dist/types/ui/create-form/async-select/old/main.d.ts +0 -11
  140. package/dist/types/ui/create-form/form-footer/old/main.d.ts +0 -16
  141. package/dist/types/ui/create-form/form-loader/old/main.d.ts +0 -11
  142. package/dist/types/ui/create-form/old/main.d.ts +0 -54
  143. package/dist/types/ui/create-form/select/old/main.d.ts +0 -24
  144. package/dist/types/ui/create-form/textfield/old/main.d.ts +0 -14
  145. package/dist/types/ui/create-form/user-picker/old/main.d.ts +0 -11
  146. package/dist/types/ui/inline-create/old/index.d.ts +0 -5
  147. package/dist/types/ui/inline-create/old/main.d.ts +0 -8
  148. package/dist/types/ui/modal-create/old/index.d.ts +0 -5
  149. package/dist/types/ui/modal-create/old/main.d.ts +0 -4
  150. package/dist/types-ts4.5/common/ui/error-boundary-modal/old/index.d.ts +0 -11
  151. package/dist/types-ts4.5/common/ui/error-boundary-ui/error-svg/old/index.d.ts +0 -7
  152. package/dist/types-ts4.5/common/ui/icon/old/index.d.ts +0 -7
  153. package/dist/types-ts4.5/common/ui/message/old/index.d.ts +0 -15
  154. package/dist/types-ts4.5/common/ui/modal-hero/old/index.d.ts +0 -4
  155. package/dist/types-ts4.5/controllers/create-field/old/main.d.ts +0 -7
  156. package/dist/types-ts4.5/ui/create-form/async-select/old/main.d.ts +0 -11
  157. package/dist/types-ts4.5/ui/create-form/form-footer/old/main.d.ts +0 -16
  158. package/dist/types-ts4.5/ui/create-form/form-loader/old/main.d.ts +0 -11
  159. package/dist/types-ts4.5/ui/create-form/old/main.d.ts +0 -56
  160. package/dist/types-ts4.5/ui/create-form/select/old/main.d.ts +0 -24
  161. package/dist/types-ts4.5/ui/create-form/textfield/old/main.d.ts +0 -14
  162. package/dist/types-ts4.5/ui/create-form/user-picker/old/main.d.ts +0 -11
  163. package/dist/types-ts4.5/ui/inline-create/old/index.d.ts +0 -5
  164. package/dist/types-ts4.5/ui/inline-create/old/main.d.ts +0 -8
  165. package/dist/types-ts4.5/ui/modal-create/old/index.d.ts +0 -5
  166. package/dist/types-ts4.5/ui/modal-create/old/main.d.ts +0 -4
@@ -1,5 +1,11 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type OptionType } from '@atlaskit/select';
3
3
  import { type AsyncSelectProps } from './types';
4
4
  export declare const TEST_ID = "link-create-async-select";
5
- export declare function AsyncSelect<T = OptionType>(props: AsyncSelectProps<T>): React.JSX.Element;
5
+ /**
6
+ * An async select utilising the Atlaskit AsyncSelect and CreateField.
7
+ * Validation is handled by the form on form submission. Any
8
+ * errors returned by the handleSubmit function passed to the form <Form> that
9
+ * have a key matching the `name` of this field are shown below the field.
10
+ */
11
+ export declare function AsyncSelect<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, defaultOption: propsDefaultValue, loadOptions: loadOptionsFn, ...restProps }: AsyncSelectProps<T>): JSX.Element;
@@ -4,4 +4,9 @@ export interface CreateFormFooterProps {
4
4
  handleCancel: () => void;
5
5
  testId?: string;
6
6
  }
7
- export declare const CreateFormFooter: (props: CreateFormFooterProps) => JSX.Element;
7
+ /**
8
+ * Footer for the Create Form, used as a wrapper for action buttons
9
+ * and form error messages. This component is unmounted if
10
+ * hideFooter is true in the Create Form.
11
+ */
12
+ export declare const CreateFormFooter: ({ formErrorMessage, handleCancel, testId, }: CreateFormFooterProps) => JSX.Element;
@@ -1,3 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { type SpinnerProps } from '@atlaskit/spinner';
3
- export declare const CreateFormLoader: (props: Partial<SpinnerProps>) => JSX.Element;
3
+ /**
4
+ * Wrapper component for the Spinner, shows while the form
5
+ * performs async functions on load.
6
+ */
7
+ export declare const CreateFormLoader: ({ size }: Partial<SpinnerProps>) => JSX.Element;
@@ -49,5 +49,5 @@ export interface CreateFormProps<FormData> {
49
49
  initialValues?: DisallowReservedFields<FormData>;
50
50
  }
51
51
  export declare const TEST_ID = "link-create-form";
52
- export declare const CreateForm: <FormData extends Record<string, any> = {}>(props: CreateFormProps<FormData>) => JSX.Element;
52
+ export declare const CreateForm: <FormData extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, hideRequiredFieldMessage, initialValues, }: CreateFormProps<FormData>) => JSX.Element;
53
53
  export {};
@@ -1,13 +1,19 @@
1
- import React, { type PropsWithChildren } from 'react';
1
+ import { type PropsWithChildren } from 'react';
2
2
  import { type OptionProps, type OptionType, type SingleValueProps } from '@atlaskit/select';
3
3
  import { type SelectProps, type SitePickerOptionType } from './types';
4
4
  export declare const TEST_ID = "link-create-select";
5
- export declare function Select<T = OptionType>(props: SelectProps<T>): React.JSX.Element;
5
+ /**
6
+ * A select component utilising the Atlaskit Select and CreateField.
7
+ * Validation is handled by the form on form submission. Any
8
+ * errors returned by the handleSubmit function passed to the form <Form> that
9
+ * have a key matching the `name` of this field are shown below the field.
10
+ */
11
+ export declare function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): JSX.Element;
6
12
  export type SiteSelectProps = {
7
13
  testId?: string;
8
14
  options?: SitePickerOptionType[];
9
15
  name?: string;
10
16
  };
11
- export declare const SiteSelect: (props: SiteSelectProps) => React.JSX.Element;
12
- export declare const SitePickerOption: (props: PropsWithChildren<OptionProps<SitePickerOptionType, false>>) => React.JSX.Element;
13
- export declare const SitePickerSingleValue: (props: PropsWithChildren<SingleValueProps<SitePickerOptionType, false>>) => React.JSX.Element;
17
+ export declare const SiteSelect: ({ options, name, testId }: SiteSelectProps) => JSX.Element;
18
+ export declare const SitePickerOption: ({ children, ...props }: PropsWithChildren<OptionProps<SitePickerOptionType, false>>) => JSX.Element;
19
+ export declare const SitePickerSingleValue: ({ children, ...props }: PropsWithChildren<SingleValueProps<SitePickerOptionType, false>>) => JSX.Element;
@@ -1,4 +1,10 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type TextFieldProps } from './types';
3
3
  export declare const TEST_ID = "link-create-text-field";
4
- export declare const TextField: (props: TextFieldProps) => React.JSX.Element;
4
+ /**
5
+ * A text field utilising the Atlaskit Textfield and CreateField.
6
+ * Validation is handled by the form as it is on form submission. Any errors returned by
7
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
8
+ * of this text field are shown above the field.
9
+ */
10
+ export declare const TextField: ({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: TextFieldProps) => JSX.Element;
@@ -1,4 +1,7 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type UserPickerProps } from './types';
3
3
  export declare const TEST_ID = "link-create-user-picker";
4
- export declare const UserPicker: (props: UserPickerProps) => React.JSX.Element;
4
+ /**
5
+ * A user picker utilising the SmartUserPicker.
6
+ */
7
+ export declare const UserPicker: ({ productKey, siteId, name, label, placeholder, validators, testId, defaultValue, }: UserPickerProps) => JSX.Element;
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  /**
3
3
  * ErrorBoundaryModal props are the same as those passed to LinkCreate, which
4
4
  * are used to control its active state
@@ -7,5 +7,5 @@ type ErrorBoundaryModalProps = {
7
7
  active?: boolean;
8
8
  onClose?: () => void;
9
9
  };
10
- export declare const ErrorBoundaryModal: (props: ErrorBoundaryModalProps) => React.JSX.Element;
10
+ export declare const ErrorBoundaryModal: ({ active, onClose }: ErrorBoundaryModalProps) => JSX.Element;
11
11
  export {};
@@ -7,7 +7,7 @@ type UrlIconProps = {
7
7
  url?: string;
8
8
  children?: React.ReactNode;
9
9
  };
10
- export declare const UrlIcon: (props: UrlIconProps) => JSX.Element;
10
+ export declare const UrlIcon: ({ url, children }: UrlIconProps) => JSX.Element;
11
11
  export declare const PageIcon: () => JSX.Element;
12
12
  export declare const LiveDocIcon: () => JSX.Element;
13
13
  export {};
@@ -10,5 +10,5 @@ type MessageProps = {
10
10
  testId?: string;
11
11
  children: ReactNode;
12
12
  };
13
- export declare const Message: (props: MessageProps) => JSX.Element;
13
+ export declare const Message: ({ children, appearance, id, testId }: MessageProps) => JSX.Element;
14
14
  export {};
@@ -2,5 +2,5 @@ import React from 'react';
2
2
  type ModalHeroProps = {
3
3
  hero?: React.ReactNode;
4
4
  };
5
- export declare const ModalHero: (props: ModalHeroProps) => React.JSX.Element;
5
+ export declare const ModalHero: ({ hero }: ModalHeroProps) => React.JSX.Element | null;
6
6
  export {};
@@ -4,4 +4,4 @@
4
4
  * @jsx jsx
5
5
  */
6
6
  import { type CreateFieldProps } from './types';
7
- export declare const CreateField: (props: CreateFieldProps) => JSX.Element;
7
+ export declare const CreateField: ({ id, name, label, isRequired, validators, validationHelpText, testId, children, }: CreateFieldProps) => JSX.Element;
@@ -1,5 +1,11 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type OptionType } from '@atlaskit/select';
3
3
  import { type AsyncSelectProps } from './types';
4
4
  export declare const TEST_ID = "link-create-async-select";
5
- export declare function AsyncSelect<T = OptionType>(props: AsyncSelectProps<T>): React.JSX.Element;
5
+ /**
6
+ * An async select utilising the Atlaskit AsyncSelect and CreateField.
7
+ * Validation is handled by the form on form submission. Any
8
+ * errors returned by the handleSubmit function passed to the form <Form> that
9
+ * have a key matching the `name` of this field are shown below the field.
10
+ */
11
+ export declare function AsyncSelect<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, defaultOption: propsDefaultValue, loadOptions: loadOptionsFn, ...restProps }: AsyncSelectProps<T>): JSX.Element;
@@ -4,4 +4,9 @@ export interface CreateFormFooterProps {
4
4
  handleCancel: () => void;
5
5
  testId?: string;
6
6
  }
7
- export declare const CreateFormFooter: (props: CreateFormFooterProps) => JSX.Element;
7
+ /**
8
+ * Footer for the Create Form, used as a wrapper for action buttons
9
+ * and form error messages. This component is unmounted if
10
+ * hideFooter is true in the Create Form.
11
+ */
12
+ export declare const CreateFormFooter: ({ formErrorMessage, handleCancel, testId, }: CreateFormFooterProps) => JSX.Element;
@@ -1,3 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { type SpinnerProps } from '@atlaskit/spinner';
3
- export declare const CreateFormLoader: (props: Partial<SpinnerProps>) => JSX.Element;
3
+ /**
4
+ * Wrapper component for the Spinner, shows while the form
5
+ * performs async functions on load.
6
+ */
7
+ export declare const CreateFormLoader: ({ size }: Partial<SpinnerProps>) => JSX.Element;
@@ -51,5 +51,5 @@ export interface CreateFormProps<FormData> {
51
51
  initialValues?: DisallowReservedFields<FormData>;
52
52
  }
53
53
  export declare const TEST_ID = "link-create-form";
54
- export declare const CreateForm: <FormData extends Record<string, any> = {}>(props: CreateFormProps<FormData>) => JSX.Element;
54
+ export declare const CreateForm: <FormData extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, hideRequiredFieldMessage, initialValues, }: CreateFormProps<FormData>) => JSX.Element;
55
55
  export {};
@@ -1,13 +1,19 @@
1
- import React, { type PropsWithChildren } from 'react';
1
+ import { type PropsWithChildren } from 'react';
2
2
  import { type OptionProps, type OptionType, type SingleValueProps } from '@atlaskit/select';
3
3
  import { type SelectProps, type SitePickerOptionType } from './types';
4
4
  export declare const TEST_ID = "link-create-select";
5
- export declare function Select<T = OptionType>(props: SelectProps<T>): React.JSX.Element;
5
+ /**
6
+ * A select component utilising the Atlaskit Select and CreateField.
7
+ * Validation is handled by the form on form submission. Any
8
+ * errors returned by the handleSubmit function passed to the form <Form> that
9
+ * have a key matching the `name` of this field are shown below the field.
10
+ */
11
+ export declare function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): JSX.Element;
6
12
  export type SiteSelectProps = {
7
13
  testId?: string;
8
14
  options?: SitePickerOptionType[];
9
15
  name?: string;
10
16
  };
11
- export declare const SiteSelect: (props: SiteSelectProps) => React.JSX.Element;
12
- export declare const SitePickerOption: (props: PropsWithChildren<OptionProps<SitePickerOptionType, false>>) => React.JSX.Element;
13
- export declare const SitePickerSingleValue: (props: PropsWithChildren<SingleValueProps<SitePickerOptionType, false>>) => React.JSX.Element;
17
+ export declare const SiteSelect: ({ options, name, testId }: SiteSelectProps) => JSX.Element;
18
+ export declare const SitePickerOption: ({ children, ...props }: PropsWithChildren<OptionProps<SitePickerOptionType, false>>) => JSX.Element;
19
+ export declare const SitePickerSingleValue: ({ children, ...props }: PropsWithChildren<SingleValueProps<SitePickerOptionType, false>>) => JSX.Element;
@@ -1,4 +1,10 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type TextFieldProps } from './types';
3
3
  export declare const TEST_ID = "link-create-text-field";
4
- export declare const TextField: (props: TextFieldProps) => React.JSX.Element;
4
+ /**
5
+ * A text field utilising the Atlaskit Textfield and CreateField.
6
+ * Validation is handled by the form as it is on form submission. Any errors returned by
7
+ * the handleSubmit function passed to the form <Form> that have a key matching the `name`
8
+ * of this text field are shown above the field.
9
+ */
10
+ export declare const TextField: ({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: TextFieldProps) => JSX.Element;
@@ -1,4 +1,7 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import { type UserPickerProps } from './types';
3
3
  export declare const TEST_ID = "link-create-user-picker";
4
- export declare const UserPicker: (props: UserPickerProps) => React.JSX.Element;
4
+ /**
5
+ * A user picker utilising the SmartUserPicker.
6
+ */
7
+ export declare const UserPicker: ({ productKey, siteId, name, label, placeholder, validators, testId, defaultValue, }: UserPickerProps) => JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/link-create",
3
- "version": "3.1.0",
3
+ "version": "4.0.0",
4
4
  "description": "The driver component of meta creation flow",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/modal-dialog": "^13.0.0",
52
52
  "@atlaskit/platform-feature-flags": "^1.1.0",
53
53
  "@atlaskit/primitives": "^14.1.0",
54
- "@atlaskit/select": "^19.0.0",
54
+ "@atlaskit/select": "^20.0.0",
55
55
  "@atlaskit/smart-user-picker": "^8.0.0",
56
56
  "@atlaskit/spinner": "^18.0.0",
57
57
  "@atlaskit/textfield": "^8.0.0",
@@ -59,8 +59,6 @@
59
59
  "@atlaskit/tokens": "^4.2.0",
60
60
  "@babel/runtime": "^7.0.0",
61
61
  "@compiled/react": "^0.18.2",
62
- "@emotion/react": "^11.7.1",
63
- "@emotion/styled": "^11.0.0",
64
62
  "debounce-promise": "^3.1.2",
65
63
  "final-form": "^4.20.3",
66
64
  "react-final-form": "^6.5.3"
@@ -119,17 +117,11 @@
119
117
  ],
120
118
  "styling": [
121
119
  "static",
122
- "emotion",
123
120
  "compiled"
124
121
  ],
125
122
  "imports": [
126
123
  "import-no-extraneous-disable-for-examples-and-docs"
127
124
  ]
128
125
  }
129
- },
130
- "platform-feature-flags": {
131
- "platform_bandicoots-link-create-css": {
132
- "type": "boolean"
133
- }
134
126
  }
135
127
  }
package/report.api.md CHANGED
@@ -21,7 +21,7 @@
21
21
  import { AsyncSelectProps as AsyncSelectProps_2 } from '@atlaskit/select';
22
22
  import { FORM_ERROR } from 'final-form';
23
23
  import { GroupType } from '@atlaskit/select';
24
- import { jsx } from '@emotion/react';
24
+ import { jsx } from '@compiled/react';
25
25
  import { MemoExoticComponent } from 'react';
26
26
  import { ModalDialogProps } from '@atlaskit/modal-dialog';
27
27
  import { OptionType } from '@atlaskit/select';
@@ -1,34 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ErrorBoundaryModalOld = void 0;
8
- var _react = require("@emotion/react");
9
- var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
10
- var _constants = require("../../../constants");
11
- var _errorBoundaryUi = require("../../error-boundary-ui");
12
- 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); }
13
- 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; }
14
- /**
15
- * @jsxRuntime classic
16
- * @jsx jsx
17
- */
18
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
19
-
20
- /**
21
- * ErrorBoundaryModal props are the same as those passed to LinkCreate, which
22
- * are used to control its active state
23
- */
24
-
25
- var ErrorBoundaryModalOld = exports.ErrorBoundaryModalOld = function ErrorBoundaryModalOld(_ref) {
26
- var active = _ref.active,
27
- onClose = _ref.onClose;
28
- return (0, _react.jsx)(_modalDialog.ModalTransition, null, active && (0, _react.jsx)(_modalDialog.default, {
29
- testId: "link-create-error-boundary-modal",
30
- onClose: onClose,
31
- shouldScrollInViewport: true,
32
- width: "".concat(_constants.CREATE_FORM_MAX_WIDTH_IN_PX, "px")
33
- }, (0, _react.jsx)(_modalDialog.ModalBody, null, (0, _react.jsx)(_errorBoundaryUi.ErrorBoundaryUI, null))));
34
- };
@@ -1,67 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = void 0;
7
- var _react = require("@emotion/react");
8
- /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
9
- /**
10
- * @jsxRuntime classic
11
- * @jsx jsx
12
- */
13
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
14
-
15
- var WIDTH = 82;
16
- var errorStyles = (0, _react.css)({
17
- width: "".concat(WIDTH, "px"),
18
- margin: "0 auto ".concat("var(--ds-space-300, 24px)"),
19
- display: "block"
20
- });
21
- var id = 'link-create-error-svg';
22
- var ErrorSVGOld = function ErrorSVGOld() {
23
- return (0, _react.jsx)("svg", {
24
- height: "90",
25
- viewBox: "0 0 164 212",
26
- fill: "none",
27
- xmlns: "http://www.w3.org/2000/svg",
28
- css: errorStyles
29
- }, (0, _react.jsx)("path", {
30
- d: "m95.43 74.16 66.44 115.08c5.84 10.12-1.46 22.76-13.14 22.76H15.85c-11.68 0-18.98-12.65-13.14-22.76L69.15 74.16c5.84-10.12 20.44-10.12 26.28 0Zm-7.56 83.55 2.88-44.35c.34-5.29-3.86-9.78-9.16-9.78-5.31 0-9.51 4.48-9.16 9.78l2.88 44.35a6.3 6.3 0 0 0 6.28 5.89c3.31 0 6.06-2.58 6.28-5.89Zm-15.84 23.54c0 5.66 4.76 10.1 10.39 9.58 4.85-.45 8.73-4.5 8.83-9.37.11-5.45-4.31-9.94-9.73-9.94-5.23-.01-9.49 4.37-9.49 9.73Z",
31
- fill: "url(#".concat(id, ")")
32
- }), (0, _react.jsx)("path", {
33
- opacity: ".6",
34
- d: "M93.35 27.17 85.94.45c-.17-.62-1.07-.58-1.19.05l-4.66 25.1-5.8-1.08a.612.612 0 0 0-.7.76L81 52c.17.62 1.07.58 1.19-.05l4.66-25.1 5.8 1.08c.45.08.82-.33.7-.76ZM66.77 41.81 55.9 33.26c-.22-.18-.53.07-.41.33l5.53 11.43-2.66 1.29c-.18.09-.2.33-.05.45l10.87 8.55c.22.18.53-.07.41-.33l-5.53-11.43 2.66-1.29c.17-.08.2-.33.05-.45Z",
35
- fill: "#C1C7D0"
36
- }), (0, _react.jsx)("path", {
37
- opacity: ".6",
38
- d: "M102.78 56.75a.993.993 0 0 1-.92-1.38c-.24-.77-2.29-2.85-3.54-4.11-2.97-3.01-4.93-5-3.84-6.49 1.09-1.48 3.58-.22 7.35 1.7 1.32.67 3.35 1.7 4.45 2.03-.64-.95-2.24-2.58-3.28-3.63-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.58-.22 7.34 1.7 1.32.67 3.34 1.7 4.45 2.03-.64-.95-2.24-2.57-3.28-3.62-2.97-3.01-4.93-5-3.84-6.49 1.08-1.48 3.57-.22 7.34 1.7 1.58.8 4.18 2.13 4.98 2.13a1.005 1.005 0 0 1 1.46 1.36c-1.09 1.48-3.57.22-7.34-1.7-1.32-.67-3.34-1.7-4.44-2.03.64.95 2.24 2.57 3.28 3.62 2.97 3.01 4.93 5 3.84 6.49-1.08 1.48-3.57.22-7.34-1.7-1.32-.67-3.35-1.7-4.45-2.03.64.95 2.24 2.57 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-1.09 1.48-3.58.22-7.35-1.7-1.32-.67-3.35-1.71-4.45-2.03.64.95 2.24 2.58 3.28 3.63 2.97 3.01 4.93 5 3.84 6.49-.21.26-.51.4-.82.4Zm5.56 14.32c-.35 0-.69-.19-.88-.52-1.04-1.88-2.22-4.02-.91-5.21 1.31-1.2 3.34.18 5.49 1.63.87.59 2.26 1.53 2.93 1.71-.12-.68-.93-2.15-1.45-3.07-1.26-2.27-2.45-4.41-1.14-5.61 1.31-1.2 3.34.18 5.49 1.63.96.65 2.54 1.72 3.1 1.74a1 1 0 0 1 1.27 1.54c-1.31 1.2-3.34-.17-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.15 1.45 3.07 1.26 2.27 2.45 4.41 1.14 5.61-1.31 1.2-3.34-.18-5.49-1.63-.87-.59-2.26-1.53-2.93-1.71.12.68.93 2.14 1.22 2.67.27.48.09 1.09-.39 1.36-.15.09-.32.13-.48.13Zm-54.32-2.89c-.22 0-.44-.04-.67-.14-1.64-.69-1.24-3.11-.81-5.67.17-1.04.45-2.7.33-3.38-.57.39-1.56 1.75-2.18 2.6-1.53 2.09-2.99 4.07-4.62 3.38a.991.991 0 0 1-.53-1.31c.2-.48.73-.72 1.21-.57.52-.21 1.65-1.75 2.34-2.68 1.53-2.09 2.98-4.08 4.62-3.38 1.64.69 1.24 3.11.81 5.67-.17 1.04-.45 2.7-.33 3.38.57-.39 1.56-1.75 2.18-2.6 1.53-2.09 2.98-4.08 4.62-3.38 1.63.69 1.24 3.09.89 5.21-.09.54-.6.91-1.15.83-.54-.09-.92-.6-.83-1.15.1-.59.37-2.24.26-2.92-.57.39-1.56 1.75-2.18 2.6-1.33 1.79-2.59 3.51-3.96 3.51Z",
39
- fill: "#B3BAC5"
40
- }), (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
41
- id: id,
42
- x1: "26.169",
43
- y1: "228.621",
44
- x2: "138.408",
45
- y2: "116.382",
46
- gradientUnits: "userSpaceOnUse"
47
- }, (0, _react.jsx)("stop", {
48
- stopColor: "#C1C7D0"
49
- }), (0, _react.jsx)("stop", {
50
- offset: ".297",
51
- stopColor: "#C6CBD4",
52
- stopOpacity: ".881"
53
- }), (0, _react.jsx)("stop", {
54
- offset: ".63",
55
- stopColor: "#D3D7DE",
56
- stopOpacity: ".748"
57
- }), (0, _react.jsx)("stop", {
58
- offset: ".98",
59
- stopColor: "#E9EBEF",
60
- stopOpacity: ".608"
61
- }), (0, _react.jsx)("stop", {
62
- offset: "1",
63
- stopColor: "#EBECF0",
64
- stopOpacity: ".6"
65
- }))));
66
- };
67
- var _default = exports.default = ErrorSVGOld;
@@ -1,26 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.UrlIconOld = void 0;
8
- var _styled = _interopRequireDefault(require("@emotion/styled"));
9
- var _colors = require("@atlaskit/theme/colors");
10
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
-
12
- // eslint-disable-next-line @atlaskit/design-system/prefer-primitives, @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
13
- var UrlIconOld = exports.UrlIconOld = _styled.default.div(function (props) {
14
- var _props$url;
15
- return {
16
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
17
- backgroundImage: "url(".concat((_props$url = props.url) !== null && _props$url !== void 0 ? _props$url : '', ")"),
18
- backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
19
- backgroundSize: 'contain',
20
- backgroundRepeat: 'no-repeat',
21
- height: "var(--ds-space-200, 16px)",
22
- width: "var(--ds-space-200, 16px)",
23
- borderRadius: "var(--ds-border-radius, 3px)",
24
- flexShrink: 0
25
- };
26
- });
@@ -1,81 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.MessageOld = void 0;
8
- var _react = require("@emotion/react");
9
- var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/utility/check-circle"));
10
- var _error = _interopRequireDefault(require("@atlaskit/icon/utility/error"));
11
- var _primitives = require("@atlaskit/primitives");
12
- /**
13
- * @jsxRuntime classic
14
- * @jsx jsx
15
- */
16
-
17
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
18
-
19
- var messageStyles = (0, _primitives.xcss)({
20
- display: 'flex',
21
- justifyContent: 'baseline',
22
- gap: 'space.050',
23
- font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
24
- marginBlockStart: 'space.050'
25
- });
26
- var messageAppearanceStyles = {
27
- default: (0, _primitives.xcss)({
28
- color: 'color.text.subtlest'
29
- }),
30
- error: (0, _primitives.xcss)({
31
- color: 'color.text.danger'
32
- }),
33
- valid: (0, _primitives.xcss)({
34
- color: 'color.text.success'
35
- })
36
- };
37
- var iconWrapperStyles = (0, _react.css)({
38
- display: 'flex',
39
- alignItems: 'center',
40
- marginInlineStart: "var(--ds-space-025, 2px)",
41
- marginInlineEnd: "var(--ds-space-025, 2px)"
42
- });
43
- var IconWrapper = function IconWrapper(_ref) {
44
- var children = _ref.children;
45
- return (0, _react.jsx)("span", {
46
- css: iconWrapperStyles
47
- }, children);
48
- };
49
- var messageIcons = {
50
- error: (0, _react.jsx)(_error.default, {
51
- color: "var(--ds-text-danger, #AE2A19)",
52
- label: "error"
53
- }),
54
- valid: (0, _react.jsx)(_checkCircle.default, {
55
- color: "var(--ds-text-success, #216E4E)",
56
- label: "success"
57
- })
58
- };
59
- var MessageOld = exports.MessageOld = function MessageOld(_ref2) {
60
- var children = _ref2.children,
61
- _ref2$appearance = _ref2.appearance,
62
- appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
63
- id = _ref2.id,
64
- testId = _ref2.testId;
65
- var icon = messageIcons[appearance];
66
-
67
- /**
68
- * The wrapping span is necessary to preserve spaces between children.
69
- * Otherwise the flex layout of the message will remove any whitespace
70
- * between children.
71
- *
72
- * If the child is just a string, this is not required and we can use one
73
- * less DOM element.
74
- */
75
- var content = typeof children === 'string' ? children : (0, _react.jsx)("span", null, children);
76
- return (0, _react.jsx)(_primitives.Box, {
77
- xcss: [messageStyles, messageAppearanceStyles[appearance]],
78
- testId: testId,
79
- id: id
80
- }, icon && (0, _react.jsx)(IconWrapper, null, icon), content);
81
- };
@@ -1,27 +0,0 @@
1
- "use strict";
2
-
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.ModalHeroOld = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _primitives = require("@atlaskit/primitives");
10
- var _errorBoundary = require("../../../../common/ui/error-boundary");
11
- 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); }
12
- 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; }
13
- var ErrorComponent = function ErrorComponent() {
14
- // when there's an error, render nothing but report the issue
15
- return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, null);
16
- };
17
- var ModalHeroOld = exports.ModalHeroOld = function ModalHeroOld(_ref) {
18
- var hero = _ref.hero;
19
- if (!hero) {
20
- return null;
21
- }
22
- return /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
23
- testId: "link-create-modal-hero"
24
- }, /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
25
- errorComponent: /*#__PURE__*/_react.default.createElement(ErrorComponent, null)
26
- }, hero));
27
- };
@@ -1,76 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
6
- });
7
- exports.CreateFieldOld = CreateFieldOld;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
- var _react = require("@emotion/react");
10
- var _reactFinalForm = require("react-final-form");
11
- var _form = require("@atlaskit/form");
12
- var _message = require("../../../common/ui/message");
13
- var _form2 = require("../../../common/utils/form");
14
- 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; }
15
- 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; } /**
16
- * @jsxRuntime classic
17
- * @jsx jsx
18
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
19
- var fieldWrapperStyles = (0, _react.css)({
20
- marginTop: "var(--ds-space-100, 8px)"
21
- });
22
- function CreateFieldOld(_ref) {
23
- var id = _ref.id,
24
- name = _ref.name,
25
- label = _ref.label,
26
- isRequired = _ref.isRequired,
27
- validators = _ref.validators,
28
- validationHelpText = _ref.validationHelpText,
29
- testId = _ref.testId,
30
- children = _ref.children;
31
- var fieldId = id ? id : "link-create-field-".concat(name);
32
- return (0, _react.jsx)(_reactFinalForm.Field, {
33
- name: name,
34
- validate: function validate(value) {
35
- var _find;
36
- return (_find = (validators !== null && validators !== void 0 ? validators : []).find(function (validator) {
37
- return !validator.isValid(value);
38
- })) === null || _find === void 0 ? void 0 : _find.errorMessage;
39
- }
40
- }, function (_ref2) {
41
- var input = _ref2.input,
42
- meta = _ref2.meta;
43
- var isInvalid = (0, _form2.shouldShowValidationErrors)(meta);
44
- var submitError = meta.submitError,
45
- error = meta.error;
46
- var hasError = !!submitError || !!error;
47
- var showErrorMessage = hasError && isInvalid;
48
- var describedById = "".concat(fieldId, "-description");
49
- var errorMessageId = "".concat(fieldId, "-error");
50
- var ariaErrorMessage = showErrorMessage ? errorMessageId : undefined;
51
- return (0, _react.jsx)("div", {
52
- css: fieldWrapperStyles,
53
- "data-testid": testId
54
- }, label && (0, _react.jsx)(_form.Label, {
55
- htmlFor: fieldId,
56
- id: "".concat(fieldId, "-label"),
57
- testId: "".concat(testId, "-label")
58
- }, label, isRequired && (0, _react.jsx)(_form.RequiredAsterisk, null)), children(_objectSpread(_objectSpread({}, input), {}, {
59
- fieldId: fieldId,
60
- isInvalid: isInvalid,
61
- isRequired: isRequired,
62
- 'aria-errormessage': ariaErrorMessage,
63
- 'aria-describedby': describedById
64
- })), (0, _react.jsx)("div", {
65
- id: describedById
66
- }, !hasError && validationHelpText && (0, _react.jsx)(_message.Message, {
67
- testId: "".concat(testId, "-helper-message")
68
- }, validationHelpText), (0, _react.jsx)("div", {
69
- "aria-live": "polite"
70
- }, showErrorMessage && (0, _react.jsx)(_message.Message, {
71
- id: errorMessageId,
72
- appearance: "error",
73
- testId: "".concat(testId, "-error-message")
74
- }, submitError || error))));
75
- });
76
- }