@atlaskit/link-picker 1.7.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-picker
 
+## 1.8.0
+
+### Minor Changes
+
+- [`89fffde2a59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89fffde2a59) - Wrap link picker in native form element
+
 ## 1.7.1
 
 ### Patch Changes

package/dist/cjs/ui/link-picker/index.js

@@ -247,10 +247,13 @@ function LinkPicker(_ref) {
     if (selectedItem) {
       var _url = selectedItem.url,
           name = selectedItem.name;
+      dispatchEvent(new Event('submit'));
       handleInsert(_url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  var handleSubmit = (0, _react.useCallback)(function () {
+  var handleSubmit = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -283,9 +286,10 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
-    css: _styled.rootContainerStyles
+    css: _styled.rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -311,7 +315,6 @@ function LinkPicker(_ref) {
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(_messages.messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), (0, _react2.jsx)(_textInput.default, {
@@ -324,7 +327,6 @@ function LinkPicker(_ref) {
     clearLabel: intl.formatMessage(_messages.messages.clearText),
     "aria-label": intl.formatMessage(_messages.messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
@@ -398,7 +400,6 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(_messages.messages.cancelButton)), (0, _react2.jsx)(_button.default, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }

package/dist/cjs/ui/link-picker/text-input/index.js

@@ -29,13 +29,12 @@ var _styled = require("./styled");
 
 var _ = require("../");
 
-var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
 
 var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
       label = props.label,
       autoFocus = props.autoFocus,
-      onSubmit = props.onSubmit,
       onRedo = props.onRedo,
       onUndo = props.onUndo,
       onChange = props.onChange,
@@ -61,13 +60,7 @@ var PanelTextInput = function PanelTextInput(props) {
     onChange(e.currentTarget.value);
   }, [onChange]);
   var handleKeydown = (0, _react.useCallback)(function (e) {
-    var value = e.currentTarget.value;
-
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
-      onSubmit(value);
-    } else if (typeof onUndo === 'function' && (0, _utils.isUndoEvent)(e)) {
+    if (typeof onUndo === 'function' && (0, _utils.isUndoEvent)(e)) {
       e.preventDefault();
       onUndo();
     } else if (typeof onRedo === 'function' && (0, _utils.isRedoEvent)(e)) {
@@ -78,7 +71,7 @@ var PanelTextInput = function PanelTextInput(props) {
     if (onKeyDown) {
       onKeyDown(e);
     }
-  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  }, [onUndo, onRedo, onKeyDown]);
   var handleClear = (0, _react.useCallback)(function () {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
@@ -88,6 +81,7 @@ var PanelTextInput = function PanelTextInput(props) {
   var clearText = restProps.value !== '' && (0, _react2.jsx)(_tooltip.default, {
     content: clearLabel
   }, (0, _react2.jsx)("button", {
+    type: "button",
     css: _styled.clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": _.testIds.clearUrlButton

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.7.1",
+	"version": "1.8.0",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/index.js

@@ -200,10 +200,13 @@ function LinkPicker({
         url,
         name
       } = selectedItem;
+      dispatchEvent(new Event('submit'));
       handleInsert(url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  const handleSubmit = useCallback(() => {
+  const handleSubmit = useCallback(event => {
+    event.preventDefault();
+
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -236,9 +239,10 @@ function LinkPicker({
     size: "medium",
     label: ''
   }));
-  return jsx("div", {
+  return jsx("form", {
     "data-testid": testIds.linkPicker,
-    css: rootContainerStyles
+    css: rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -264,7 +268,6 @@ function LinkPicker({
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), jsx(PanelTextInput, {
@@ -277,7 +280,6 @@ function LinkPicker({
     clearLabel: intl.formatMessage(messages.clearText),
     "aria-label": intl.formatMessage(messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
@@ -345,7 +347,6 @@ function LinkPicker({
   }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }

package/dist/es2019/ui/link-picker/text-input/index.js

@@ -16,7 +16,6 @@ const PanelTextInput = props => {
     name,
     label,
     autoFocus,
-    onSubmit,
     onRedo,
     onUndo,
     onChange,
@@ -43,13 +42,7 @@ const PanelTextInput = props => {
     onChange(e.currentTarget.value);
   }, [onChange]);
   const handleKeydown = useCallback(e => {
-    const value = e.currentTarget.value;
-
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
-      onSubmit(value);
-    } else if (typeof onUndo === 'function' && isUndoEvent(e)) {
+    if (typeof onUndo === 'function' && isUndoEvent(e)) {
       e.preventDefault();
       onUndo();
     } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
@@ -60,7 +53,7 @@ const PanelTextInput = props => {
     if (onKeyDown) {
       onKeyDown(e);
     }
-  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  }, [onUndo, onRedo, onKeyDown]);
   const handleClear = useCallback(() => {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
@@ -70,6 +63,7 @@ const PanelTextInput = props => {
   const clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
   }, jsx("button", {
+    type: "button",
     css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": testIds.clearUrlButton

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.7.1",
+	"version": "1.8.0",
 	"sideEffects": false
 }

package/dist/esm/ui/link-picker/index.js

@@ -205,10 +205,13 @@ function LinkPicker(_ref) {
     if (selectedItem) {
       var _url = selectedItem.url,
           name = selectedItem.name;
+      dispatchEvent(new Event('submit'));
       handleInsert(_url, name, 'typeAhead');
     }
   }, [handleInsert, items]);
-  var handleSubmit = useCallback(function () {
+  var handleSubmit = useCallback(function (event) {
+    event.preventDefault();
+
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -241,9 +244,10 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
-  return jsx("div", {
+  return jsx("form", {
     "data-testid": testIds.linkPicker,
-    css: rootContainerStyles
+    css: rootContainerStyles,
+    onSubmit: handleSubmit
   }, screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
@@ -269,7 +273,6 @@ function LinkPicker(_ref) {
     "aria-describedby": screenReaderDescriptionId,
     error: invalidUrl ? intl.formatMessage(messages.linkInvalid) : null,
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeUrl
   }), jsx(PanelTextInput, {
@@ -282,7 +285,6 @@ function LinkPicker(_ref) {
     clearLabel: intl.formatMessage(messages.clearText),
     "aria-label": intl.formatMessage(messages.linkAriaLabel),
     onClear: handleClear,
-    onSubmit: handleSubmit,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
   }), queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
@@ -356,7 +358,6 @@ function LinkPicker(_ref) {
   }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
     type: "submit",
     appearance: "primary",
-    onClick: handleSubmit,
     testId: testIds.insertButton
   }, intl.formatMessage(insertButtonMsg)))));
 }

package/dist/esm/ui/link-picker/text-input/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
+var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
 
 /** @jsx jsx */
 import { useCallback, useRef, Fragment } from 'react';
@@ -17,7 +17,6 @@ var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
       label = props.label,
       autoFocus = props.autoFocus,
-      onSubmit = props.onSubmit,
       onRedo = props.onRedo,
       onUndo = props.onUndo,
       onChange = props.onChange,
@@ -44,13 +43,7 @@ var PanelTextInput = function PanelTextInput(props) {
     onChange(e.currentTarget.value);
   }, [onChange]);
   var handleKeydown = useCallback(function (e) {
-    var value = e.currentTarget.value;
-
-    if (e.keyCode === 13 && onSubmit) {
-      e.preventDefault(); // Prevent from submitting if an editor is inside a form.
-
-      onSubmit(value);
-    } else if (typeof onUndo === 'function' && isUndoEvent(e)) {
+    if (typeof onUndo === 'function' && isUndoEvent(e)) {
       e.preventDefault();
       onUndo();
     } else if (typeof onRedo === 'function' && isRedoEvent(e)) {
@@ -61,7 +54,7 @@ var PanelTextInput = function PanelTextInput(props) {
     if (onKeyDown) {
       onKeyDown(e);
     }
-  }, [onSubmit, onUndo, onRedo, onKeyDown]);
+  }, [onUndo, onRedo, onKeyDown]);
   var handleClear = useCallback(function () {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
@@ -71,6 +64,7 @@ var PanelTextInput = function PanelTextInput(props) {
   var clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
   }, jsx("button", {
+    type: "button",
     css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": testIds.clearUrlButton

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.7.1",
+	"version": "1.8.0",
 	"sideEffects": false
 }

package/dist/types/ui/link-picker/text-input/index.d.ts

@@ -6,7 +6,6 @@ export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'auto
     autoFocus?: boolean;
     value: string;
     onChange: (value: string) => void;
-    onSubmit?: (value: string) => void;
     onUndo?: Function;
     onRedo?: Function;
     onClear?: Function;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -63,8 +63,8 @@
     "@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-picker-atlassian-plugin": "^17.0.0",
-    "@atlassian/link-picker-plugins": "^4.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^18.0.0",
+    "@atlassian/link-picker-plugins": "^5.0.0",
     "@atlassian/recent-work-client": "^1.5.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^7.7.3",