@atlaskit/link-picker 3.13.0 → 3.14.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/link-picker
 
+## 3.14.0
+
+### Minor Changes
+
+- [`d21c47b4f935f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d21c47b4f935f) -
+  [ux] New prop submitOnInputChange for link picker that removes the submit button and adds a submit
+  on input change
+
 ## 3.13.0
 
 ### Minor Changes

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _useDebounce3 = require("use-debounce");
+var _url = require("@atlaskit/linking-common/url");
+var AutoSubmitOnChange = function AutoSubmitOnChange(_ref) {
+  var url = _ref.url,
+    isSubmitting = _ref.isSubmitting,
+    isSelectedItem = _ref.isSelectedItem,
+    onSubmit = _ref.onSubmit,
+    onClearInvalidUrl = _ref.onClearInvalidUrl;
+  // Debounce the URL to avoid rapid successive submissions during typing
+  var _useDebounce = (0, _useDebounce3.useDebounce)(url, 300),
+    _useDebounce2 = (0, _slicedToArray2.default)(_useDebounce, 1),
+    debouncedUrl = _useDebounce2[0];
+  var isBlank = url === '';
+  // Auto-submit when URL changes
+  (0, _react.useEffect)(function () {
+    //prevents misalignment between url and debounced url when clear button is clicked
+    if (isBlank) {
+      onClearInvalidUrl();
+      return;
+    }
+    // Only auto-submit if debouncedUrl is not empty and not already submitting
+    if (debouncedUrl.trim() && !isSubmitting && !isSelectedItem) {
+      var normalized = (0, _url.normalizeUrl)(debouncedUrl);
+      if (normalized) {
+        onSubmit();
+      }
+    }
+    //onSubmit() left out to prevent infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedUrl, isSubmitting, isSelectedItem, onClearInvalidUrl, isBlank]);
+
+  // This component renders nothing
+  return null;
+};
+var _default = exports.default = AutoSubmitOnChange;

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

@@ -36,6 +36,7 @@ var _handleNavKeyDown = require("../../common/utils/handleNavKeyDown");
 var _usePlugins2 = require("../../services/use-plugins");
 var _useSearchQuery = require("../../services/use-search-query");
 var _announcer = require("./announcer");
+var _autoSubmitOnChange = _interopRequireDefault(require("./autoSubmitOnChange"));
 var _formFooter = require("./form-footer");
 var _linkPickerSubmitButton = require("./form-footer/link-picker-submit-button");
 var _messages = require("./messages");
@@ -118,6 +119,8 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     _ref$previewableLinks = _ref.previewableLinksOnly,
     previewableLinksOnly = _ref$previewableLinks === void 0 ? false : _ref$previewableLinks,
     additionalError = _ref.additionalError,
+    _ref$submitOnInputCha = _ref.submitOnInputChange,
+    submitOnInputChange = _ref$submitOnInputCha === void 0 ? false : _ref$submitOnInputCha,
     recentSearchListSize = _ref.recentSearchListSize,
     shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
@@ -159,6 +162,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
   var previewableOnly = (0, _platformFeatureFlags.fg)('platform-linking-link-picker-previewable-only') && previewableLinksOnly;
+  var flaggedSubmitOnInputChange = (0, _platformFeatureFlags.fg)('platform-linking-link-picker-previewable-only') && submitOnInputChange;
   var _useLinkPickerAnalyti = (0, _analytics.useLinkPickerAnalytics)(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
@@ -249,6 +253,13 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
       handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  var handleClearInvalidUrl = (0, _platformFeatureFlags.fg)('platform-linking-link-picker-previewable-only') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  (0, _react.useCallback)(function () {
+    dispatch({
+      invalidUrl: false
+    });
+  }, [dispatch]) : function () {};
   var handleSubmit = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(event) {
       var normalized, urlResponse, responseObject;
@@ -432,7 +443,13 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     onSubmitCapture: handleSubmit,
     className: (0, _runtime.ax)(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq"])
-  }, /*#__PURE__*/React.createElement(_trackMount.TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(_react.Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(_announcer.Announcer, {
+  }, /*#__PURE__*/React.createElement(_trackMount.TrackMount, null), flaggedSubmitOnInputChange && /*#__PURE__*/React.createElement(_autoSubmitOnChange.default, {
+    url: url,
+    isSubmitting: isSubmitting,
+    isSelectedItem: isSelectedItem,
+    onSubmit: handleSubmit,
+    onClearInvalidUrl: handleClearInvalidUrl
+  }), isActivePlugin && /*#__PURE__*/React.createElement(_react.Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(_announcer.Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -517,7 +534,7 @@ var LinkPicker = exports.LinkPicker = (0, _analytics.withLinkPickerAnalyticsCont
     action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: moveSubmitButton,
+    hideSubmitButton: moveSubmitButton || flaggedSubmitOnInputChange,
     className: (0, _runtime.ax)([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
 }));

package/dist/cjs/ui/main.js

@@ -25,7 +25,7 @@ var testIds = exports.testIds = {
 };
 var PACKAGE_DATA = exports.PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.12.1" || '',
+  packageVersion: "0.0.0-development" || '',
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };

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

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import { useDebounce } from 'use-debounce';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+const AutoSubmitOnChange = ({
+  url,
+  isSubmitting,
+  isSelectedItem,
+  onSubmit,
+  onClearInvalidUrl
+}) => {
+  // Debounce the URL to avoid rapid successive submissions during typing
+  const [debouncedUrl] = useDebounce(url, 300);
+  const isBlank = url === '';
+  // Auto-submit when URL changes
+  useEffect(() => {
+    //prevents misalignment between url and debounced url when clear button is clicked
+    if (isBlank) {
+      onClearInvalidUrl();
+      return;
+    }
+    // Only auto-submit if debouncedUrl is not empty and not already submitting
+    if (debouncedUrl.trim() && !isSubmitting && !isSelectedItem) {
+      const normalized = normalizeUrl(debouncedUrl);
+      if (normalized) {
+        onSubmit();
+      }
+    }
+    //onSubmit() left out to prevent infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedUrl, isSubmitting, isSelectedItem, onClearInvalidUrl, isBlank]);
+
+  // This component renders nothing
+  return null;
+};
+export default AutoSubmitOnChange;

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

@@ -24,6 +24,7 @@ import { handleNavKeyDown } from '../../common/utils/handleNavKeyDown';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
+import AutoSubmitOnChange from './autoSubmitOnChange';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
 import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
@@ -106,6 +107,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   inputRef,
   previewableLinksOnly = false,
   additionalError,
+  submitOnInputChange = false,
   recentSearchListSize,
   shouldRenderNoResultsImage
 }) => {
@@ -150,6 +152,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
   const previewableOnly = fg('platform-linking-link-picker-previewable-only') && previewableLinksOnly;
+  const flaggedSubmitOnInputChange = fg('platform-linking-link-picker-previewable-only') && submitOnInputChange;
   const {
     trackAttribute,
     getAttributes
@@ -244,6 +247,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
       });
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  const handleClearInvalidUrl = fg('platform-linking-link-picker-previewable-only') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallback(() => {
+    dispatch({
+      invalidUrl: false
+    });
+  }, [dispatch]) : () => {};
   const handleSubmit = useCallback(async event => {
     event === null || event === void 0 ? void 0 : event.preventDefault();
     if (isSubmitting) {
@@ -387,7 +397,13 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     onSubmitCapture: handleSubmit,
     className: ax(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq"])
-  }, /*#__PURE__*/React.createElement(TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+  }, /*#__PURE__*/React.createElement(TrackMount, null), flaggedSubmitOnInputChange && /*#__PURE__*/React.createElement(AutoSubmitOnChange, {
+    url: url,
+    isSubmitting: isSubmitting,
+    isSelectedItem: isSelectedItem,
+    onSubmit: handleSubmit,
+    onClearInvalidUrl: handleClearInvalidUrl
+  }), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -472,7 +488,7 @@ export const LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(({
     action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: moveSubmitButton,
+    hideSubmitButton: moveSubmitButton || flaggedSubmitOnInputChange,
     className: ax([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
 }));

package/dist/es2019/ui/main.js

@@ -15,7 +15,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.12.1" || '',
+  packageVersion: "0.0.0-development" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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

@@ -0,0 +1,37 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect } from 'react';
+import { useDebounce } from 'use-debounce';
+import { normalizeUrl } from '@atlaskit/linking-common/url';
+var AutoSubmitOnChange = function AutoSubmitOnChange(_ref) {
+  var url = _ref.url,
+    isSubmitting = _ref.isSubmitting,
+    isSelectedItem = _ref.isSelectedItem,
+    onSubmit = _ref.onSubmit,
+    onClearInvalidUrl = _ref.onClearInvalidUrl;
+  // Debounce the URL to avoid rapid successive submissions during typing
+  var _useDebounce = useDebounce(url, 300),
+    _useDebounce2 = _slicedToArray(_useDebounce, 1),
+    debouncedUrl = _useDebounce2[0];
+  var isBlank = url === '';
+  // Auto-submit when URL changes
+  useEffect(function () {
+    //prevents misalignment between url and debounced url when clear button is clicked
+    if (isBlank) {
+      onClearInvalidUrl();
+      return;
+    }
+    // Only auto-submit if debouncedUrl is not empty and not already submitting
+    if (debouncedUrl.trim() && !isSubmitting && !isSelectedItem) {
+      var normalized = normalizeUrl(debouncedUrl);
+      if (normalized) {
+        onSubmit();
+      }
+    }
+    //onSubmit() left out to prevent infinite loop
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedUrl, isSubmitting, isSelectedItem, onClearInvalidUrl, isBlank]);
+
+  // This component renders nothing
+  return null;
+};
+export default AutoSubmitOnChange;

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

@@ -30,6 +30,7 @@ import { handleNavKeyDown } from '../../common/utils/handleNavKeyDown';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import { Announcer } from './announcer';
+import AutoSubmitOnChange from './autoSubmitOnChange';
 import { FormFooter, testIds as formFooterTestIds } from './form-footer';
 import { LinkPickerSubmitButton } from './form-footer/link-picker-submit-button';
 import { formMessages, linkMessages, linkTextMessages, searchMessages } from './messages';
@@ -109,6 +110,8 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     _ref$previewableLinks = _ref.previewableLinksOnly,
     previewableLinksOnly = _ref$previewableLinks === void 0 ? false : _ref$previewableLinks,
     additionalError = _ref.additionalError,
+    _ref$submitOnInputCha = _ref.submitOnInputChange,
+    submitOnInputChange = _ref$submitOnInputCha === void 0 ? false : _ref$submitOnInputCha,
     recentSearchListSize = _ref.recentSearchListSize,
     shouldRenderNoResultsImage = _ref.shouldRenderNoResultsImage;
   var _useAnalyticsEvents = useAnalyticsEvents(),
@@ -150,6 +153,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
   var previewableOnly = fg('platform-linking-link-picker-previewable-only') && previewableLinksOnly;
+  var flaggedSubmitOnInputChange = fg('platform-linking-link-picker-previewable-only') && submitOnInputChange;
   var _useLinkPickerAnalyti = useLinkPickerAnalytics(),
     trackAttribute = _useLinkPickerAnalyti.trackAttribute,
     getAttributes = _useLinkPickerAnalyti.getAttributes;
@@ -240,6 +244,13 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       handleInsert(_url, name, 'typeAhead', _objectSpread({}, selectedItem));
     }
   }, [handleInsert, trackAttribute, items, activePlugin, isSubmitting]);
+  var handleClearInvalidUrl = fg('platform-linking-link-picker-previewable-only') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useCallback(function () {
+    dispatch({
+      invalidUrl: false
+    });
+  }, [dispatch]) : function () {};
   var handleSubmit = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
       var normalized, urlResponse, responseObject;
@@ -423,7 +434,13 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     // Use onSubmitCapture instead of onSubmit so that any possible parent form isn't submitted
     onSubmitCapture: handleSubmit,
     className: ax(["_19bv164s _u5f31pah _ca0q1k79 _n3td1t3k _vchhusvi _1e0ctcjq"])
-  }, /*#__PURE__*/React.createElement(TrackMount, null), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+  }, /*#__PURE__*/React.createElement(TrackMount, null), flaggedSubmitOnInputChange && /*#__PURE__*/React.createElement(AutoSubmitOnChange, {
+    url: url,
+    isSubmitting: isSubmitting,
+    isSelectedItem: isSelectedItem,
+    onSubmit: handleSubmit,
+    onClearInvalidUrl: handleClearInvalidUrl
+  }), isActivePlugin && /*#__PURE__*/React.createElement(Fragment, null, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -508,7 +525,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     action: pluginAction,
     customSubmitButtonLabel: customSubmitButtonLabel,
     submitMessageId: submitMessageId,
-    hideSubmitButton: moveSubmitButton,
+    hideSubmitButton: moveSubmitButton || flaggedSubmitOnInputChange,
     className: ax([(!queryState || !(plugins !== null && plugins !== void 0 && plugins.length)) && "_19pkpxbi"])
   }));
 }));

package/dist/esm/ui/main.js

@@ -16,7 +16,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker" || '',
-  packageVersion: "3.12.1" || '',
+  packageVersion: "0.0.0-development" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };

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

@@ -171,6 +171,8 @@ export interface LinkPickerProps {
     previewableLinksOnly?: boolean;
     /**This prop passes one additional error that is secondary to component errors */
     additionalError?: React.ReactNode;
+    /**This prop disables submit button and handles submit on input change */
+    submitOnInputChange?: boolean;
     /** Showing dynamic list size based on window height */
     recentSearchListSize?: number;
     /** Controls showing the image in the no results state */

package/dist/types/ui/link-picker/autoSubmitOnChange.d.ts

@@ -0,0 +1,9 @@
+interface AutoSubmitOnChangeProps {
+    url: string;
+    isSubmitting: boolean;
+    isSelectedItem: boolean;
+    onSubmit: () => void;
+    onClearInvalidUrl: () => void;
+}
+declare const AutoSubmitOnChange: ({ url, isSubmitting, isSelectedItem, onSubmit, onClearInvalidUrl, }: AutoSubmitOnChangeProps) => null;
+export default AutoSubmitOnChange;

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

@@ -174,6 +174,8 @@ export interface LinkPickerProps {
     previewableLinksOnly?: boolean;
     /**This prop passes one additional error that is secondary to component errors */
     additionalError?: React.ReactNode;
+    /**This prop disables submit button and handles submit on input change */
+    submitOnInputChange?: boolean;
     /** Showing dynamic list size based on window height */
     recentSearchListSize?: number;
     /** Controls showing the image in the no results state */

package/dist/types-ts4.5/ui/link-picker/autoSubmitOnChange.d.ts

@@ -0,0 +1,9 @@
+interface AutoSubmitOnChangeProps {
+    url: string;
+    isSubmitting: boolean;
+    isSelectedItem: boolean;
+    onSubmit: () => void;
+    onClearInvalidUrl: () => void;
+}
+declare const AutoSubmitOnChange: ({ url, isSubmitting, isSelectedItem, onSubmit, onClearInvalidUrl, }: AutoSubmitOnChangeProps) => null;
+export default AutoSubmitOnChange;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "3.13.0",
+	"version": "3.14.0",
 	"description": "Standalone link picker",
 	"author": "Atlassian Pty Ltd",
 	"publishConfig": {