@atlaskit/link-create 0.10.0 → 1.0.1

package/dist/types-ts4.5/controllers/create-field/main.d.ts

@@ -0,0 +1,3 @@
+import { jsx } from '@emotion/react';
+import { CreateFieldProps } from './types';
+export declare function CreateField({ id, name, label, isRequired, validators, validationHelpText, testId, children, }: CreateFieldProps): jsx.JSX.Element;

package/dist/types-ts4.5/controllers/create-field/types.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { FieldInputProps } from 'react-final-form';
+import { Validator } from '../../common/types';
+type FieldProps = FieldInputProps<any, HTMLElement> & {
+    fieldId: string;
+    isInvalid: boolean;
+};
+export type CreateFieldProps = {
+    id?: string;
+    /** Name passed to the <Field>.*/
+    name: string;
+    label?: string;
+    /**
+     * Optional text below the textfield explaining any requirements for a valid value.
+     * eg. "Must be 4 or more letters"
+     */
+    validationHelpText?: string;
+    /** Validators for this field */
+    validators?: Validator[];
+    isRequired?: boolean;
+    testId: string;
+    children: (fieldProps: FieldProps) => React.ReactNode;
+};
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -1,5 +1,5 @@
 export type { CreateFormProps } from './ui/index';
 export type { LinkCreateProps, LinkCreatePlugin, LinkCreateWithModalProps, CreatePayload, } from './common/types';
-export { default, TextField, CreateForm, AsyncSelect, CreateFormLoader, } from './ui/index';
+export { default, TextField, CreateForm, Select, AsyncSelect, CreateFormLoader, FormSpy, } from './ui/index';
 export { useLinkCreateCallback, LinkCreateCallbackProvider, } from './controllers/callback-context';
 export type { Validator, ValidatorMap } from './common/types';

package/dist/types-ts4.5/ui/create-form/async-select/main.d.ts

@@ -3,9 +3,9 @@ import { OptionType } from '@atlaskit/select';
 import { AsyncSelectProps } from './types';
 export declare const TEST_ID = "link-create-async-select";
 /**
- * An async select utilising the Atlaskit AsyncSelect and Field objects from `@atlaskit/form`.
- * 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.
+ * An async select utilising the Atlaskit AsyncSelect and Field components from
+ * `@atlaskit/form`.  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 declare function AsyncSelect<T = OptionType>({ label, name, validationHelpText, isRequired, testId, validators, defaultValue, ...rest }: AsyncSelectProps<T>): jsx.JSX.Element;
+export declare function AsyncSelect<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, defaultOption: propsDefaultValue, loadOptions, ...restProps }: AsyncSelectProps<T>): jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/async-select/types.d.ts

@@ -1,12 +1,12 @@
-import { AsyncSelectProps as AKAsyncSelectProps, OptionType } from '@atlaskit/select';
+import { AsyncSelectProps as AKAsyncSelectProps, GroupType, OptionType } from '@atlaskit/select';
 import { Validator } from '../../../common/types';
-export type AsyncSelectProps<T = OptionType> = AKAsyncSelectProps<T> & {
-    /** Name passed to the <Field>.*/
+export type AsyncSelectProps<T = OptionType> = Omit<AKAsyncSelectProps<T>, 'loadOptions'> & {
+    /** Name passed to the <Field> */
     name: string;
     /** This should be properly internationalization-ed */
     label: string;
     /**
-     * Optional text below the textfield explaining any requirements for a valid value.
+     * Optional text below the field explaining any requirements for a valid value.
      * eg. "Must be 4 or more letters"
      */
     validationHelpText?: string;
@@ -15,4 +15,9 @@ export type AsyncSelectProps<T = OptionType> = AKAsyncSelectProps<T> & {
     isRequired?: boolean;
     /** Validators for this field */
     validators?: Validator[];
+    /**
+     * Function to options to display in async select.
+     * **WARNING** Will refetch if function changes.
+     */
+    loadOptions?: (inputValue: string) => Promise<T[] | GroupType<T>[]>;
 };

package/dist/types-ts4.5/ui/create-form/form-spy/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type FormSpyProps<T> = {
+    children: ({ values }: {
+        values: T;
+    }) => React.ReactNode;
+};
+/**
+ * Lightweight wrapper around the react-final-form
+ * FormSpy component so that we can control selectively
+ * how much of the API we are commited to.
+ */
+export declare const FormSpy: <T extends Record<string, unknown>>({ children, }: FormSpyProps<T>) => JSX.Element;

package/dist/types-ts4.5/ui/create-form/index.d.ts

@@ -1,4 +1,6 @@
 export { CreateForm } from './main';
+export { Select } from './select';
 export { AsyncSelect } from './async-select';
 export { CreateFormLoader } from './form-loader';
 export { TextField } from './textfield';
+export { FormSpy } from './form-spy';

package/dist/types-ts4.5/ui/create-form/main.d.ts

@@ -8,6 +8,7 @@ export interface CreateFormProps<FormData> {
     onCancel?: () => void;
     isLoading?: boolean;
     hideFooter?: boolean;
+    initialValues?: FormData;
 }
 export declare const TEST_ID = "link-create-form";
-export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, initialValues, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/select/index.d.ts

@@ -0,0 +1 @@
+export { Select } from './main';

package/dist/types-ts4.5/ui/create-form/select/main.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { OptionType } from '@atlaskit/select';
+import { SelectProps } from './types';
+export declare const TEST_ID = "link-create-select";
+/**
+ * A select utilising the Atlaskit Select and Field components from
+ * `@atlaskit/form`.  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 declare function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): jsx.JSX.Element;

package/dist/types-ts4.5/ui/create-form/select/types.d.ts

@@ -0,0 +1,18 @@
+import { SelectProps as AKSelectProps, OptionType } from '@atlaskit/select';
+import { Validator } from '../../../common/types';
+export type SelectProps<T = OptionType> = AKSelectProps<T> & {
+    /** Name passed to the <Field> */
+    name: string;
+    /** This should be properly internationalization-ed */
+    label: string;
+    /**
+     * Optional text below the field explaining any requirements for a valid value.
+     * eg. "Must be 4 or more letters"
+     */
+    validationHelpText?: string;
+    testId?: string;
+    /** Will display a red astrix next to the field title if true */
+    isRequired?: boolean;
+    /** Validators for this field */
+    validators?: Validator[];
+};

package/dist/types-ts4.5/ui/create-form/textfield/main.d.ts

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TextFieldProps } from './types';
 export declare const TEST_ID = "link-create-text-field";
@@ -7,4 +8,4 @@ export declare 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 declare function TextField({ label, name, testId, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;
+export declare function TextField({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: TextFieldProps): jsx.JSX.Element;

package/dist/types-ts4.5/ui/index.d.ts

@@ -3,4 +3,6 @@ export { TextField } from './create-form/textfield';
 export { CreateForm } from './create-form/main';
 export { CreateFormLoader } from './create-form/form-loader';
 export type { CreateFormProps } from './create-form/main';
+export { Select } from './create-form/select';
 export { AsyncSelect } from './create-form/async-select';
+export { FormSpy } from './create-form/form-spy';

package/example-helpers/mock-plugin-form.tsx

@@ -1,7 +1,5 @@
 import React, { useMemo } from 'react';
 
-import { OptionsType } from '@atlaskit/select';
-
 import {
   AsyncSelect,
   CreateForm,
@@ -42,7 +40,7 @@ export function MockPluginForm({ shouldThrowError }: pluginProps) {
     [],
   );
 
-  const exampleOptions: OptionsType<MockOptions> = [
+  const exampleOptions = [
     { label: 'Option 1', value: 'option-1' },
     { label: 'Option 2', value: 'option-2' },
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.10.0",
+  "version": "1.0.1",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -44,9 +44,12 @@
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.4.0",
     "@atlaskit/textfield": "^5.6.0",
-    "@atlaskit/tokens": "^1.13.0",
+    "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1"
+    "@emotion/react": "^11.7.1",
+    "debounce-promise": "^3.1.2",
+    "final-form": "^4.20.1",
+    "react-final-form": "^6.5.3"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -54,7 +57,7 @@
   },
   "devDependencies": {
     "@af/visual-regression": "*",
-    "@atlaskit/link-test-helpers": "^4.2.0",
+    "@atlaskit/link-test-helpers": "^6.0.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",

package/report.api.md

@@ -18,35 +18,43 @@
 /// <reference types="react" />
 
 import { AsyncSelectProps as AsyncSelectProps_2 } from '@atlaskit/select';
+import { GroupType } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
 import { ModalDialogProps } from '@atlaskit/modal-dialog';
 import { OptionType } from '@atlaskit/select';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { SelectProps as SelectProps_2 } from '@atlaskit/select';
 import { SpinnerProps } from '@atlaskit/spinner';
 import { TextFieldProps as TextFieldProps_2 } from '@atlaskit/textfield';
 
 // @public
 export function AsyncSelect<T = OptionType>({
-  label,
+  id,
   name,
-  validationHelpText,
+  label,
   isRequired,
-  testId,
   validators,
-  defaultValue,
-  ...rest
+  validationHelpText,
+  testId,
+  defaultOption: propsDefaultValue,
+  loadOptions,
+  ...restProps
 }: AsyncSelectProps<T>): jsx.JSX.Element;
 
 // @public (undocumented)
-type AsyncSelectProps<T = OptionType> = AsyncSelectProps_2<T> & {
+type AsyncSelectProps<T = OptionType> = Omit<
+  AsyncSelectProps_2<T>,
+  'loadOptions'
+> & {
   name: string;
   label: string;
   validationHelpText?: string;
   testId?: string;
   isRequired?: boolean;
   validators?: Validator[];
+  loadOptions?: (inputValue: string) => Promise<GroupType<T>[] | T[]>;
 };
 
 // @public (undocumented)
@@ -63,6 +71,7 @@ export const CreateForm: <FormData_1 extends Record<string, any> = {}>({
   onCancel,
   isLoading,
   hideFooter,
+  initialValues,
 }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
 
 // @public (undocumented)
@@ -77,6 +86,8 @@ export interface CreateFormProps<FormData> {
   // (undocumented)
   hideFooter?: boolean;
   // (undocumented)
+  initialValues?: FormData;
+  // (undocumented)
   isLoading?: boolean;
   // (undocumented)
   onCancel?: () => void;
@@ -94,6 +105,16 @@ export type CreatePayload = {
   data?: Record<string, unknown>;
 };
 
+// @public
+export const FormSpy: <T extends Record<string, unknown>>({
+  children,
+}: FormSpyProps<T>) => JSX.Element;
+
+// @public (undocumented)
+type FormSpyProps<T> = {
+  children: ({ values }: { values: T }) => React_2.ReactNode;
+};
+
 // @public (undocumented)
 interface Group {
   icon: string;
@@ -142,14 +163,36 @@ export interface LinkCreateWithModalProps
 }
 
 // @public
-export function TextField({
-  label,
+export function Select<T = OptionType>({
+  id,
   name,
-  testId,
-  validationHelpText,
+  label,
+  isRequired,
   validators,
-  defaultValue,
+  validationHelpText,
+  testId,
+  ...restProps
+}: SelectProps<T>): jsx.JSX.Element;
+
+// @public (undocumented)
+type SelectProps<T = OptionType> = SelectProps_2<T> & {
+  name: string;
+  label: string;
+  validationHelpText?: string;
+  testId?: string;
+  isRequired?: boolean;
+  validators?: Validator[];
+};
+
+// @public
+export function TextField({
+  id,
+  name,
+  label,
   isRequired,
+  validators,
+  validationHelpText,
+  testId,
   ...restProps
 }: TextFieldProps): jsx.JSX.Element;
 

package/tmp/api-report-tmp.d.ts

@@ -7,26 +7,29 @@
 /// <reference types="react" />
 
 import { AsyncSelectProps as AsyncSelectProps_2 } from '@atlaskit/select';
+import { GroupType } from '@atlaskit/select';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
 import { ModalDialogProps } from '@atlaskit/modal-dialog';
 import { OptionType } from '@atlaskit/select';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
+import { SelectProps as SelectProps_2 } from '@atlaskit/select';
 import { SpinnerProps } from '@atlaskit/spinner';
 import { TextFieldProps as TextFieldProps_2 } from '@atlaskit/textfield';
 
 // @public
-export function AsyncSelect<T = OptionType>({ label, name, validationHelpText, isRequired, testId, validators, defaultValue, ...rest }: AsyncSelectProps<T>): jsx.JSX.Element;
+export function AsyncSelect<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, defaultOption: propsDefaultValue, loadOptions, ...restProps }: AsyncSelectProps<T>): jsx.JSX.Element;
 
 // @public (undocumented)
-type AsyncSelectProps<T = OptionType> = AsyncSelectProps_2<T> & {
+type AsyncSelectProps<T = OptionType> = Omit<AsyncSelectProps_2<T>, 'loadOptions'> & {
     name: string;
     label: string;
     validationHelpText?: string;
     testId?: string;
     isRequired?: boolean;
     validators?: Validator[];
+    loadOptions?: (inputValue: string) => Promise<GroupType<T>[] | T[]>;
 };
 
 // @public (undocumented)
@@ -34,7 +37,7 @@ const ComposedLinkCreate: MemoExoticComponent<(props: LinkCreateWithModalProps)
 export default ComposedLinkCreate;
 
 // @public (undocumented)
-export const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
+export const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onSubmit, onCancel, isLoading, hideFooter, initialValues, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;
 
 // @public (undocumented)
 export function CreateFormLoader({ size }: Partial<SpinnerProps>): jsx.JSX.Element;
@@ -46,6 +49,8 @@ export interface CreateFormProps<FormData> {
     // (undocumented)
     hideFooter?: boolean;
     // (undocumented)
+    initialValues?: FormData;
+    // (undocumented)
     isLoading?: boolean;
     // (undocumented)
     onCancel?: () => void;
@@ -63,6 +68,16 @@ export type CreatePayload = {
     data?: Record<string, unknown>;
 };
 
+// @public
+export const FormSpy: <T extends Record<string, unknown>>({ children, }: FormSpyProps<T>) => JSX.Element;
+
+// @public (undocumented)
+type FormSpyProps<T> = {
+    children: ({ values }: {
+        values: T;
+    }) => React_2.ReactNode;
+};
+
 // @public (undocumented)
 interface Group {
     icon: string;
@@ -109,7 +124,20 @@ export interface LinkCreateWithModalProps extends LinkCreateProps, Partial<Pick<
 }
 
 // @public
-export function TextField({ label, name, testId, validationHelpText, validators, defaultValue, isRequired, ...restProps }: TextFieldProps): jsx.JSX.Element;
+export function Select<T = OptionType>({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: SelectProps<T>): jsx.JSX.Element;
+
+// @public (undocumented)
+type SelectProps<T = OptionType> = SelectProps_2<T> & {
+    name: string;
+    label: string;
+    validationHelpText?: string;
+    testId?: string;
+    isRequired?: boolean;
+    validators?: Validator[];
+};
+
+// @public
+export function TextField({ id, name, label, isRequired, validators, validationHelpText, testId, ...restProps }: TextFieldProps): jsx.JSX.Element;
 
 // @public (undocumented)
 type TextFieldProps = Omit<TextFieldProps_2, 'name'> & {

package/dist/cjs/ui/group-selection/index.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = GroupSelect;
-var _react = require("@emotion/react");
-/** @jsx jsx */
-
-var containerStyles = (0, _react.css)({
-  padding: '8px',
-  border: '1px solid',
-  borderRadius: '4px'
-});
-function GroupSelect(_ref) {
-  var testId = _ref.testId,
-    groups = _ref.groups;
-  return (0, _react.jsx)("div", {
-    css: [containerStyles],
-    "data-testid": testId
-  }, "Not build yet");
-}

package/dist/es2019/ui/group-selection/index.js

@@ -1,16 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-const containerStyles = css({
-  padding: '8px',
-  border: '1px solid',
-  borderRadius: '4px'
-});
-export default function GroupSelect({
-  testId,
-  groups
-}) {
-  return jsx("div", {
-    css: [containerStyles],
-    "data-testid": testId
-  }, "Not build yet");
-}

package/dist/esm/ui/group-selection/index.js

@@ -1,15 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-var containerStyles = css({
-  padding: '8px',
-  border: '1px solid',
-  borderRadius: '4px'
-});
-export default function GroupSelect(_ref) {
-  var testId = _ref.testId,
-    groups = _ref.groups;
-  return jsx("div", {
-    css: [containerStyles],
-    "data-testid": testId
-  }, "Not build yet");
-}

package/dist/types/ui/group-selection/index.d.ts

@@ -1,4 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { GroupSelectProps } from './types';
-export default function GroupSelect({ testId, groups }: GroupSelectProps): jsx.JSX.Element;

package/dist/types/ui/group-selection/types.d.ts

@@ -1,12 +0,0 @@
-import { Group } from '../../common/types';
-export interface GroupSelectProps {
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests */
-    testId?: string;
-    /**
-     * Available groups to display
-     */
-    groups: Group[];
-}

package/dist/types-ts4.5/ui/group-selection/index.d.ts

@@ -1,4 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { GroupSelectProps } from './types';
-export default function GroupSelect({ testId, groups }: GroupSelectProps): jsx.JSX.Element;

package/dist/types-ts4.5/ui/group-selection/types.d.ts

@@ -1,12 +0,0 @@
-import { Group } from '../../common/types';
-export interface GroupSelectProps {
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests */
-    testId?: string;
-    /**
-     * Available groups to display
-     */
-    groups: Group[];
-}