@atlaskit/link-create 0.3.2 → 0.4.0

package/dist/esm/ui/main.js

@@ -1,16 +1,25 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { memo, useCallback } from 'react';
 import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import { AnalyticsContext, useAnalyticsEvents } from '@atlaskit/analytics-next';
 import Modal, { ModalBody, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { ANALYTICS_CHANNEL, COMPONENT_NAME } from '../common/constants';
 import { withLinkCreateAnalyticsContext } from '../common/utils/analytics';
 import createEventPayload from '../common/utils/analytics/analytics.codegen';
 import { LinkCreateCallbackProvider } from '../controllers/callback-context';
+import { FormContextProvider, useFormContext } from '../controllers/form-context';
 import { name as packageName, version as packageVersion } from '../version.json';
 import { ErrorBoundary } from './error-boundary';
-var LinkCreate = function LinkCreate(_ref) {
+import { messages } from './messages';
+var withFormContext = function withFormContext(Component) {
+  return function (props) {
+    return jsx(FormContextProvider, null, jsx(Component, props));
+  };
+};
+var LinkCreate = withFormContext(function (_ref) {
   var plugins = _ref.plugins,
     entityKey = _ref.entityKey,
     onCreate = _ref.onCreate,
@@ -19,24 +28,34 @@ var LinkCreate = function LinkCreate(_ref) {
   var chosenOne = plugins.find(function (plugin) {
     return plugin.key === entityKey;
   });
+  var _useFormContext = useFormContext(),
+    setFormErrorMessage = _useFormContext.setFormErrorMessage;
   if (!chosenOne) {
     throw new Error('Make sure you specified a valid entityKey');
   }
   var handleCreate = useCallback(function (result) {
+    // Reset the form error message
+    setFormErrorMessage(undefined);
     onCreate && onCreate(result.url);
-  }, [onCreate]);
+  }, [onCreate, setFormErrorMessage]);
+  var handleFailure = useCallback(function (errorMessage) {
+    // Set the form error message
+    setFormErrorMessage(errorMessage);
+    onFailure && onFailure(errorMessage);
+  }, [onFailure, setFormErrorMessage]);
   return jsx(LinkCreateCallbackProvider, {
     onCreate: handleCreate,
-    onFailure: onFailure,
+    onFailure: handleFailure,
     onCancel: onCancel
   }, chosenOne.form);
-};
+});
 var LinkCreateWithModal = function LinkCreateWithModal(props) {
   var testId = props.testId,
     onCancel = props.onCancel,
     active = props.active;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var intl = useIntl();
   var handleOpenComplete = useCallback(function () {
     createAnalyticsEvent(createEventPayload('screen.linkCreateScreen.viewed', {})).fire(ANALYTICS_CHANNEL);
   }, [createAnalyticsEvent]);
@@ -49,10 +68,10 @@ var LinkCreateWithModal = function LinkCreateWithModal(props) {
     shouldScrollInViewport: true,
     onOpenComplete: handleOpenComplete,
     onCloseComplete: handleCloseComplete
-  }, jsx(ModalHeader, null, jsx(ModalTitle, null, "Create New")), jsx(ModalBody, null, jsx(ErrorBoundary, null, jsx(LinkCreate, props)))));
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, intl.formatMessage(messages.heading))), jsx(ModalBody, null, jsx(ErrorBoundary, null, jsx(FormContextProvider, null, jsx(LinkCreate, props))))));
 };
 var LinkCreateWithAnalyticsContext = withLinkCreateAnalyticsContext( /*#__PURE__*/memo(function (_ref2) {
-  var props = _extends({}, _ref2);
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return jsx(LinkCreateWithModal, props);
 }));
 export var PACKAGE_DATA = {

package/dist/esm/ui/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  heading: {
+    id: 'linkCreate.modal.heading',
+    defaultMessage: 'Create new',
+    description: 'Header for the create modal'
+  }
+});

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-create",
-	"version": "0.3.2",
+	"version": "0.4.0",
 	"sideEffects": false
 }

package/dist/types/common/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const ANALYTICS_CHANNEL = "media";
 export declare const COMPONENT_NAME = "linkCreate";
+export declare const CREATE_FORM_MAX_WIDTH_IN_PX = "600";

package/dist/types/controllers/callback-context/main.d.ts

@@ -11,7 +11,7 @@ interface LinkCreateCallbackProviderProps {
     /**
      * This callback for any errors
      */
-    onFailure?: (error: unknown) => void;
+    onFailure?: (errorMessage: string) => void;
     /**
      * This callback for when the form was manually discarded by user
      */

package/dist/types/controllers/form-context/main.d.ts

@@ -3,6 +3,8 @@ import { Validator, ValidatorMap } from '../../common/types';
 interface FormContextType {
     assignValidator: (name: string, validators: Validator[]) => void;
     getValidators: () => ValidatorMap;
+    setFormErrorMessage: (errorMessage?: string) => void;
+    formErrorMessage?: string;
 }
 export declare const FormContext: React.Context<FormContextType>;
 declare const FormContextProvider: React.FC<{}>;

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

@@ -1,10 +1,10 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-export interface CreateFormProps {
+export interface CreateFormProps<FormData> {
     children: ReactNode;
     testId?: string;
     onCancel?: () => void;
-    onSubmit: (data: Record<string, unknown>) => void;
+    onSubmit: (data: FormData) => void;
 }
-export declare const CreateForm: (props: any) => jsx.JSX.Element;
+export declare const CreateForm: <FormData_1 extends Record<string, any> = {}>({ children, testId, onCancel, onSubmit, }: CreateFormProps<FormData_1>) => jsx.JSX.Element;

package/dist/types/ui/create-form/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    cancel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    create: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -6,4 +6,4 @@ import { TextFieldProps } from './types';
  * 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, validationHelpText, isRequired, testId, validators, }: TextFieldProps): jsx.JSX.Element;
+export declare function TextField({ label, name, validationHelpText, isRequired, testId, validators, placeholder, }: TextFieldProps): jsx.JSX.Element;

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

@@ -4,6 +4,8 @@ export interface TextFieldProps {
     name: string;
     /** This should be properly internationalization-ed */
     label: string;
+    /** This should be properly internationalization-ed */
+    placeholder?: string;
     /**
      * Optional text below the textfield explaining any requirements for a valid value.
      * eg. "Must be 4 or more letters"

package/dist/types/ui/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    heading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-create",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "The driver component of meta creation flow",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -26,14 +26,15 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.6.0",
-    "@atlaskit/empty-state": "^7.4.0",
-    "@atlaskit/form": "^8.8.4",
-    "@atlaskit/modal-dialog": "^12.4.4",
-    "@atlaskit/select": "^16.1.5",
-    "@atlaskit/textfield": "^5.3.5",
-    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/empty-state": "^7.5.0",
+    "@atlaskit/form": "^8.11.0",
+    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/select": "^16.2.0",
+    "@atlaskit/textfield": "^5.4.0",
+    "@atlaskit/tokens": "^1.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -43,21 +44,22 @@
   },
   "devDependencies": {
     "@atlaskit/docs": "*",
-    "@atlaskit/link-picker": "^1.18.0",
-    "@atlaskit/link-provider": "^1.4.0",
-    "@atlaskit/link-test-helpers": "^2.2.0",
-    "@atlaskit/popup": "^1.5.0",
+    "@atlaskit/link-picker": "^1.19.0",
+    "@atlaskit/link-provider": "^1.6.0",
+    "@atlaskit/link-test-helpers": "^2.3.0",
+    "@atlaskit/popup": "^1.6.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-create-confluence": "^3.0.0",
-    "@atlassian/link-create-presets": "^2.0.0",
-    "@atlassian/link-picker-plugins": "^18.1.0",
-    "@atlassian/recent-work-client": "^1.7.0",
-    "@atlassian/search-client": "^0.6.0",
+    "@atlassian/link-create-confluence": "^5.0.0",
+    "@atlassian/link-create-presets": "^3.0.0",
+    "@atlassian/link-picker-plugins": "^19.0.0",
+    "@atlassian/recent-work-client": "^1.8.0",
+    "@atlassian/search-client": "^0.8.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
+    "fetch-mock": "^8.0.0",
     "react-dom": "^16.8.0",
     "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"

package/report.api.md

@@ -52,16 +52,21 @@ const ComposedLinkCreate: MemoExoticComponent<
 export default ComposedLinkCreate;
 
 // @public (undocumented)
-export const CreateForm: (props: any) => jsx.JSX.Element;
+export const CreateForm: <FormData_1 extends Record<string, any> = {}>({
+  children,
+  testId,
+  onCancel,
+  onSubmit,
+}: CreateFormProps<FormData_1>) => jsx.JSX.Element;
 
 // @public (undocumented)
-export interface CreateFormProps {
+export interface CreateFormProps<FormData> {
   // (undocumented)
   children: ReactNode;
   // (undocumented)
   onCancel?: () => void;
   // (undocumented)
-  onSubmit: (data: Record<string, unknown>) => void;
+  onSubmit: (data: FormData) => void;
   // (undocumented)
   testId?: string;
 }
@@ -74,7 +79,11 @@ interface FormContextType {
   // (undocumented)
   assignValidator: (name: string, validators: Validator[]) => void;
   // (undocumented)
+  formErrorMessage?: string;
+  // (undocumented)
   getValidators: () => ValidatorMap;
+  // (undocumented)
+  setFormErrorMessage: (errorMessage?: string) => void;
 }
 
 // @public (undocumented)
@@ -95,7 +104,7 @@ interface LinkCreateCallbackProviderProps {
     objectId: string;
     objectType: string;
   }) => void;
-  onFailure?: (error: unknown) => void;
+  onFailure?: (errorMessage: string) => void;
 }
 
 // @public (undocumented)
@@ -136,6 +145,7 @@ export function TextField({
   isRequired,
   testId,
   validators,
+  placeholder,
 }: TextFieldProps): jsx.JSX.Element;
 
 // @public (undocumented)
@@ -143,6 +153,7 @@ interface TextFieldProps {
   isRequired?: boolean;
   label: string;
   name: string;
+  placeholder?: string;
   // (undocumented)
   testId?: string;
   validationHelpText?: string;

package/dist/cjs/ui/create-form/styled.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.formStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _templateObject;
-var CREATE_FORM_MAX_WIDTH_IN_PX = '600';
-var formStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 auto;\n  max-width: ", "px;\n  padding: 0 0 ", " 0;\n"])), CREATE_FORM_MAX_WIDTH_IN_PX, "var(--ds-space-300, 24px)");
-exports.formStyles = formStyles;

package/dist/cjs/ui/error-boundary/error-boundary-ui/error-svg/styled.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.errorStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _templateObject;
-var WIDTH = 82;
-var errorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  margin: 0 auto ", ";\n  display: block;\n"])), WIDTH, "var(--ds-space-300, 24px)");
-exports.errorStyles = errorStyles;

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

@@ -1,7 +0,0 @@
-import { css } from '@emotion/react';
-const CREATE_FORM_MAX_WIDTH_IN_PX = '600';
-export const formStyles = css`
-  margin: 0 auto;
-  max-width: ${CREATE_FORM_MAX_WIDTH_IN_PX}px;
-  padding: 0 0 ${"var(--ds-space-300, 24px)"} 0;
-`;

package/dist/es2019/ui/error-boundary/error-boundary-ui/error-svg/styled.js

@@ -1,7 +0,0 @@
-import { css } from '@emotion/react';
-const WIDTH = 82;
-export const errorStyles = css`
-  width: ${WIDTH}px;
-  margin: 0 auto ${"var(--ds-space-300, 24px)"};
-  display: block;
-`;

package/dist/esm/ui/create-form/styled.js

@@ -1,5 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import { css } from '@emotion/react';
-var CREATE_FORM_MAX_WIDTH_IN_PX = '600';
-export var formStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  max-width: ", "px;\n  padding: 0 0 ", " 0;\n"])), CREATE_FORM_MAX_WIDTH_IN_PX, "var(--ds-space-300, 24px)");

package/dist/esm/ui/error-boundary/error-boundary-ui/error-svg/styled.js

@@ -1,5 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import { css } from '@emotion/react';
-var WIDTH = 82;
-export var errorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  margin: 0 auto ", ";\n  display: block;\n"])), WIDTH, "var(--ds-space-300, 24px)");

package/dist/types/ui/create-form/styled.d.ts

@@ -1 +0,0 @@
-export declare const formStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/error-boundary/error-boundary-ui/error-svg/styled.d.ts

@@ -1 +0,0 @@
-export declare const errorStyles: import("@emotion/react").SerializedStyles;

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

@@ -1,141 +0,0 @@
-## API Report File for "@atlaskit/link-create"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { AsyncSelectProps as AsyncSelectProps_2 } from '@atlaskit/select';
-import { jsx } from '@emotion/react';
-import { MemoExoticComponent } from 'react';
-import { OptionType } from '@atlaskit/select';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-
-// @public
-export function AsyncSelect<T = OptionType>({ label, name, validationHelpText, isRequired, testId, validators, ...rest }: AsyncSelectProps<T>): jsx.JSX.Element;
-
-// @public (undocumented)
-type AsyncSelectProps<T = OptionType> = AsyncSelectProps_2<T> & {
-    name: string;
-    label: string;
-    validationHelpText?: string;
-    testId?: string;
-    isRequired?: boolean;
-    validators?: Validator[];
-};
-
-// @public (undocumented)
-const ComposedLinkCreate: MemoExoticComponent<(props: LinkCreateProps) => jsx.JSX.Element>;
-export default ComposedLinkCreate;
-
-// @public (undocumented)
-export const CreateForm: (props: any) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface CreateFormProps {
-    // (undocumented)
-    children: ReactNode;
-    // (undocumented)
-    onCancel?: () => void;
-    // (undocumented)
-    onSubmit: (data: Record<string, unknown>) => void;
-    // (undocumented)
-    testId?: string;
-}
-
-// @public (undocumented)
-export const FormContextProvider: React_2.FC<{}>;
-
-// @public (undocumented)
-interface FormContextType {
-    // (undocumented)
-    assignValidator: (name: string, validators: Validator[]) => void;
-    // (undocumented)
-    getValidators: () => ValidatorMap;
-}
-
-// @public (undocumented)
-interface Group {
-    icon: string;
-    key: string;
-    label: string;
-}
-
-// @public (undocumented)
-export const LinkCreateCallbackProvider: React_2.FC<LinkCreateCallbackProviderProps>;
-
-// @public (undocumented)
-interface LinkCreateCallbackProviderProps {
-    onCancel?: () => void;
-    onCreate?: (result: {
-        url: string;
-        objectId: string;
-        objectType: string;
-    }) => void;
-    onFailure?: (error: unknown) => void;
-}
-
-// @public (undocumented)
-export interface LinkCreatePlugin {
-    form: ReactNode;
-    group: Group;
-    icon: string;
-    key: string;
-    label: string;
-}
-
-// @public (undocumented)
-export interface LinkCreateProps {
-    active?: boolean;
-    entityKey: string;
-    groupKey?: string;
-    onCancel?: () => void;
-    onCreate?: (url: string) => void;
-    onFailure?: (error: unknown) => void;
-    // (undocumented)
-    plugins: LinkCreatePlugin[];
-    testId?: string;
-    triggeredFrom?: string;
-}
-
-// @public (undocumented)
-interface Option_2 {
-    label: string;
-    value: string;
-}
-export { Option_2 as Option }
-
-// @public
-export function TextField({ label, name, validationHelpText, isRequired, testId, validators, }: TextFieldProps): jsx.JSX.Element;
-
-// @public (undocumented)
-interface TextFieldProps {
-    isRequired?: boolean;
-    label: string;
-    name: string;
-    // (undocumented)
-    testId?: string;
-    validationHelpText?: string;
-    validators?: Validator[];
-}
-
-// @public (undocumented)
-export const useFormContext: () => FormContextType;
-
-// @public (undocumented)
-export const useLinkCreateCallback: () => LinkCreateCallbackProviderProps;
-
-// @public (undocumented)
-export type Validator = {
-    isValid: (val: unknown) => boolean;
-    errorMessage: string;
-};
-
-// @public
-export type ValidatorMap = Record<string, Validator[]>;
-
-// (No @packageDocumentation comment for this package)
-
-```