@atlaskit/link-picker 1.8.2 → 1.8.5

package/dist/cjs/version.json

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

package/dist/es2019/analytics.codegen.js

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::ffa7ec78cc793f941d06cdb25b07dc8a>>
+ * @codegen <<SignedSource::115bafba068f36f76da67200ee2d08c4>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

package/dist/es2019/controllers/use-fix-height/index.js

@@ -0,0 +1,19 @@
+import { useLayoutEffect, useRef } from 'react';
+
+const useFixHeight = shouldFixHeight => {
+  const ref = useRef(null);
+  const currentHeight = useRef(null);
+  useLayoutEffect(() => {
+    if (ref.current) {
+      currentHeight.current = ref.current.getBoundingClientRect().height;
+    }
+  });
+  return {
+    ref,
+    style: shouldFixHeight ? {
+      minHeight: currentHeight.current || 'auto'
+    } : undefined
+  };
+};
+
+export default useFixHeight;

package/dist/es2019/services/use-plugins/index.js

@@ -1,25 +1,10 @@
-import { useEffect, useReducer, useMemo, useRef, useState, useCallback } from 'react';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import { RECENT_SEARCH_LIST_SIZE } from '../../ui/link-picker';
-
-function reducer(state, payload) {
-  return { ...state,
-    ...payload
-  };
-}
-
+import { CancellationError, resolvePluginUpdates } from './utils';
+import { usePluginReducer } from './reducer';
 export function usePlugins(state, activeTab, plugins) {
   const [retries, setRetries] = useState(0);
-  const [pluginState, dispatch] = useReducer(reducer, {
-    items: null,
-    error: null,
-    isLoading: false
-  });
-  const {
-    items,
-    isLoading,
-    error
-  } = pluginState;
-  const queryVersion = useRef(0);
+  const [pluginState, dispatch] = usePluginReducer();
   const activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
   useEffect(() => {
     if (!activePlugin) {
@@ -28,62 +13,50 @@ export function usePlugins(state, activeTab, plugins) {
 
     if (!state) {
       dispatch({
-        items: null,
-        isLoading: false,
-        error: null
+        type: 'CLEAR'
       });
       return;
     }
 
-    const updates = activePlugin.resolve(state);
     dispatch({
-      items: null,
-      isLoading: true,
-      error: null
+      type: 'LOADING'
     });
-    const newQuery = ++queryVersion.current;
+    const {
+      next,
+      cancel
+    } = resolvePluginUpdates(activePlugin, state);
 
     const updateResults = async () => {
       try {
-        while (newQuery === queryVersion.current) {
-          let done = false;
-          let value;
-
-          if (updates instanceof Promise) {
-            done = true;
-            value = await updates;
-          } else {
-            var _result$done;
-
-            const result = await updates.next();
-            done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-            value = result.value;
-          }
-
-          if (newQuery !== queryVersion.current) {
-            return;
-          }
+        let isLoading = true;
 
+        while (isLoading) {
+          const {
+            value,
+            done
+          } = await next();
+          isLoading = !done;
           dispatch({
-            items: limit(value.data),
-            isLoading: !done
+            type: 'SUCCESS',
+            payload: {
+              items: limit(value.data),
+              isLoading: !done
+            }
           });
-
-          if (done) {
-            return;
-          }
         }
       } catch (error) {
-        dispatch({
-          error,
-          items: null,
-          isLoading: false
-        });
+        if (!(error instanceof CancellationError)) {
+          dispatch({
+            type: 'ERROR',
+            payload: error
+          });
+        }
       }
     };
 
     updateResults();
-  }, [activePlugin, queryVersion, state, retries]);
+    return cancel;
+  }, [activePlugin, state, retries, dispatch]);
   const tabs = useMemo(() => {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -96,6 +69,11 @@ export function usePlugins(state, activeTab, plugins) {
   const handleRetry = useCallback(() => {
     setRetries(prev => ++prev);
   }, []);
+  const {
+    items,
+    isLoading,
+    error
+  } = pluginState;
   return {
     tabs,
     items,

package/dist/es2019/services/use-plugins/reducer.js

@@ -0,0 +1,37 @@
+import { useReducer } from 'react';
+export const ACTION_CLEAR = 'CLEAR';
+export const ACTION_LOADING = 'LOADING';
+export const ACTION_SUCCESS = 'SUCCESS';
+export const ACTION_ERRORED = 'ERROR';
+export const INITIAL_STATE = {
+  items: null,
+  error: null,
+  isLoading: false
+};
+export function reducer(state, action) {
+  switch (action.type) {
+    case ACTION_CLEAR:
+      return { ...INITIAL_STATE
+      };
+
+    case ACTION_LOADING:
+      return { ...INITIAL_STATE,
+        isLoading: true
+      };
+
+    case ACTION_SUCCESS:
+      return { ...state,
+        ...action.payload,
+        error: null
+      };
+
+    case ACTION_ERRORED:
+      return { ...INITIAL_STATE,
+        error: action.payload
+      };
+
+    default:
+      return state;
+  }
+}
+export const usePluginReducer = () => useReducer(reducer, INITIAL_STATE);

package/dist/es2019/services/use-plugins/utils.js

@@ -0,0 +1,59 @@
+export class CancellationError extends Error {}
+export const cancellable = promise => {
+  let reject;
+  return {
+    promise: new Promise((resolve, _reject) => {
+      reject = _reject;
+      promise.then(resolve, reject);
+    }),
+    cancel: () => {
+      reject(new CancellationError('Promise cancelled'));
+    }
+  };
+};
+/**
+ * Wraps the resolve with a cancellation wrapper and makes promise + generator plugin resolves more compatible
+ * Calling cancel for generator plugin prevents it from yielding any further updates
+ */
+
+export const resolvePluginUpdates = (plugin, state) => {
+  const updates = plugin.resolve(state); // Promise plugin
+
+  if (updates instanceof Promise) {
+    const {
+      promise,
+      cancel
+    } = cancellable(updates);
+    return {
+      cancel,
+      next: async () => ({
+        value: await promise,
+        done: true
+      })
+    };
+  } // Generator plugin
+
+
+  const cancellationCallbacks = [];
+  let cancelled = false;
+  return {
+    cancel: () => {
+      cancelled = true;
+      cancellationCallbacks.forEach(cb => cb());
+    },
+    next: () => {
+      const {
+        promise,
+        cancel
+      } = cancellable(updates.next());
+
+      if (cancelled) {
+        cancel();
+      } else {
+        cancellationCallbacks.push(cancel);
+      }
+
+      return promise;
+    }
+  };
+};

package/dist/es2019/services/use-search-query/index.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { isSafeUrl } from '../../ui/link-picker/url';
+import { isSafeUrl } from '../../common/utils/url';
 export function useSearchQuery(state) {
   var _queryState$current;
 

package/dist/es2019/services/with-link-picker-analytics/index.js

@@ -0,0 +1,15 @@
+import React, { useMemo } from 'react';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { normalizeUrl } from '../../common/utils/url';
+export function withLinkPickerAnalyticsContext(WrappedComponent) {
+  return props => {
+    const data = useMemo(() => ({
+      attributes: {
+        linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink'
+      }
+    }), [props.url]);
+    return /*#__PURE__*/React.createElement(AnalyticsContext, {
+      data: data
+    }, /*#__PURE__*/React.createElement(WrappedComponent, props));
+  };
+}

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useIntl, defineMessages } from 'react-intl-next';
+import Button, { ButtonGroup } from '@atlaskit/button';
+import { formFooterStyles } from './styled';
+import { memo } from 'react';
+const messages = defineMessages({
+  cancelButton: {
+    id: 'fabric.linkPicker.button.cancel',
+    defaultMessage: 'Cancel',
+    description: 'Button to cancel and dismiss the link picker'
+  },
+  saveButton: {
+    id: 'fabric.linkPicker.button.save',
+    defaultMessage: 'Save',
+    description: 'Button to save edited link'
+  },
+  insertButton: {
+    id: 'fabric.linkPicker.button.insert',
+    defaultMessage: 'Insert',
+    description: 'Button to insert searched or selected link'
+  }
+});
+export const testIds = {
+  insertButton: 'link-picker-insert-button',
+  cancelButton: 'link-picker-cancel-button'
+};
+
+const FormFooter = ({
+  isEditing,
+  onCancel,
+  ...restProps
+}) => {
+  const intl = useIntl();
+  const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
+  return jsx("footer", _extends({
+    css: formFooterStyles
+  }, restProps), jsx(ButtonGroup, null, jsx(Button, {
+    appearance: "default",
+    onClick: onCancel,
+    testId: testIds.cancelButton
+  }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
+    type: "submit",
+    appearance: "primary",
+    testId: testIds.insertButton
+  }, intl.formatMessage(insertButtonMsg))));
+};
+
+export default /*#__PURE__*/memo(FormFooter);

package/dist/es2019/ui/link-picker/form-footer/styled.js

@@ -0,0 +1,5 @@
+import { css } from '@emotion/react';
+export const formFooterStyles = css`
+  display: flex;
+  justify-content: flex-end;
+`;

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

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
-import Button, { ButtonGroup } from '@atlaskit/button';
-import { FormFooter } from '@atlaskit/form';
 import EditorSearchIcon from '@atlaskit/icon/glyph/editor/search';
 import Tabs, { Tab, TabList } from '@atlaskit/tabs';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -14,16 +12,18 @@ import createEventPayload from '../../analytics.codegen';
 import { ANALYTICS_CHANNEL } from '../../common/constants';
 import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
+import { withLinkPickerAnalyticsContext } from '../../services/with-link-picker-analytics';
 import { messages } from './messages';
 import PanelTextInput from './text-input';
-import LinkSearchList from './link-search-list';
-import { normalizeUrl, isSafeUrl } from './url';
-import { rootContainerStyles, searchIconStyles, listTitleStyles, tabsWrapperStyles } from './styled';
+import { normalizeUrl, isSafeUrl } from '../../common/utils/url';
+import useFixHeight from '../../controllers/use-fix-height';
+import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
-import LinkSearchNoResults from './link-search-no-results';
 import { transformTimeStamp } from './transformTimeStamp';
-import LinkSearchError from './link-search-error';
+import LinkSearchList, { testIds as listTestIds } from './link-search-list';
+import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
+import FormFooter, { testIds as formFooterTestIds } from './form-footer';
 export const RECENT_SEARCH_LIST_SIZE = 5;
 export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
 export const testIds = {
@@ -31,18 +31,13 @@ export const testIds = {
   urlInputField: 'link-url',
   textInputField: 'link-text',
   searchIcon: 'link-picker-search-icon',
-  insertButton: 'link-picker-insert-button',
-  cancelButton: 'link-picker-cancel-button',
+  ...formFooterTestIds,
+  ...searchErrorTestIds,
+  ...listTestIds,
   clearUrlButton: 'clear-text',
-  resultListTitle: 'link-picker-list-title',
-  emptyResultPage: 'link-search-no-results',
-  searchResultList: 'link-search-list',
-  searchResultItem: 'link-search-list-item',
-  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
   urlError: 'link-error',
   tabList: 'link-picker-tabs',
-  tabItem: 'link-picker-tab',
-  searchError: 'link-search-error'
+  tabItem: 'link-picker-tab'
 };
 const initState = {
   url: '',
@@ -75,7 +70,7 @@ function LinkPicker({
   url: initUrl,
   displayText: initDisplayText
 }) {
-  var _queryState$query, _items$length, _errorFallback;
+  var _errorFallback;
 
   const {
     createAnalyticsEvent
@@ -103,6 +98,7 @@ function LinkPicker({
     retry,
     errorFallback
   } = usePlugins(queryState, activeTab, plugins);
+  const fixListHeightProps = useFixHeight(isLoading);
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -232,9 +228,6 @@ function LinkPicker({
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
   const linkPlaceHolder = isActivePlugin ? messages.placeholder : messages.linkPlaceholder;
-  const linkListTitle = (queryState === null || queryState === void 0 ? void 0 : (_queryState$query = queryState.query) === null || _queryState$query === void 0 ? void 0 : _queryState$query.length) !== 0 ? messages.titleResults : messages.titleRecentlyViewed;
-  const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
-  const noResults = (items === null || items === void 0 ? void 0 : items.length) === 0 && !error;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
   const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
@@ -292,7 +285,7 @@ function LinkPicker({
     onClear: handleClear,
     onKeyDown: handleKeyDown,
     onChange: handleChangeText
-  }), queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
+  }), isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
     css: tabsWrapperStyles
   }, jsx(Tabs, {
     id: testIds.tabList,
@@ -306,62 +299,28 @@ function LinkPicker({
   }, jsx(TabList, null, tabs.map(tab => jsx(Tab, {
     key: tab.tabTitle,
     testId: testIds.tabItem
-  }, tab.tabTitle))))), !!(items !== null && items !== void 0 && items.length) && jsx("div", {
-    css: listTitleStyles,
-    id: testIds.resultListTitle,
-    "data-testid": testIds.resultListTitle
-  }, jsx(FormattedMessage, linkListTitle)), jsx(VisuallyHidden, {
-    id: "fabric.smartcard.linkpicker.suggested.results"
-  }, url && jsx(FormattedMessage, _extends({}, messages.searchLinkResults, {
-    values: {
-      count: (_items$length = items === null || items === void 0 ? void 0 : items.length) !== null && _items$length !== void 0 ? _items$length : 0
-    },
-    "aria-live": "polite",
-    "aria-atomic": "true"
-  }))), jsx(LinkSearchList, {
-    ariaLabelledBy: testIds.resultListTitle,
-    ariaControls: "fabric.smartcard.linkpicker.suggested.results",
+  }, tab.tabTitle))))), jsx("div", _extends({
+    css: flexColumnStyles
+  }, fixListHeightProps), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
     role: "listbox",
-    items: items !== null && items !== void 0 ? items : [],
+    items: items,
     isLoading: isLoading,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
-    onMouseLeave: handleMouseLeaveResultItem
-  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, {
-    testId: testIds.searchError,
-    header: intl.formatMessage(messages.searchErrorHeader),
-    description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {
-      values: {
-        a: label => jsx(Button, {
-          appearance: "link",
-          spacing: "none",
-          href: CONTACT_SUPPORT_LINK,
-          target: "_blank",
-          rel: "noopener noreferrer"
-        }, label)
-      }
-    }))
-  })), noResults && jsx(LinkSearchNoResults, {
-    testId: testIds.emptyResultPage,
-    header: intl.formatMessage(messages.noResults),
-    description: intl.formatMessage(messages.noResultsDescription)
-  })), jsx(FormFooter, {
-    align: "end"
-  }, jsx(ButtonGroup, null, jsx(Button, {
-    appearance: "default",
-    onClick: onCancel,
-    testId: testIds.cancelButton
-  }, intl.formatMessage(messages.cancelButton)), jsx(Button, {
-    type: "submit",
-    appearance: "primary",
-    testId: testIds.insertButton
-  }, intl.formatMessage(insertButtonMsg)))));
+    onMouseLeave: handleMouseLeaveResultItem,
+    error: error,
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
+  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, null)))), jsx(FormFooter, {
+    css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined,
+    isEditing: isEditing,
+    onCancel: onCancel
+  }));
 }
 
-export default LinkPicker;
+export default withLinkPickerAnalyticsContext( /*#__PURE__*/memo(LinkPicker));
 
 function getScreenReaderText(items, selectedIndex, intl) {
   if (items.length && selectedIndex > -1) {

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

@@ -1,10 +1,46 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { useIntl, FormattedMessage, defineMessages } from 'react-intl-next';
+import Button from '@atlaskit/button';
+export const CONTACT_SUPPORT_LINK = 'https://support.atlassian.com/contact/';
+export const messages = defineMessages({
+  searchErrorHeader: {
+    id: 'fabric.linkPicker.search.error.heading',
+    defaultMessage: 'We’re having trouble loading data.',
+    description: 'Heading message shown when a search throws an error'
+  },
+  searchErrorDescription: {
+    id: 'fabric.linkPicker.search.error.description',
+    defaultMessage: 'Refresh the page, or contact <a>Atlassian Support</a> if this keeps happening.',
+    description: 'Describes possible actions when search throws an error'
+  }
+});
 import EmptyState from '@atlaskit/empty-state';
 import GenericErrorSVG from '../../../common/generic-error-svg';
+export const testIds = {
+  searchError: 'link-search-error'
+};
 
-const LinkSearchError = props => /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
-  renderImage: () => /*#__PURE__*/React.createElement(GenericErrorSVG, null)
-}));
+const LinkSearchError = () => {
+  const intl = useIntl();
+  return jsx(EmptyState, {
+    testId: testIds.searchError,
+    header: intl.formatMessage(messages.searchErrorHeader),
+    description: jsx(FormattedMessage, _extends({}, messages.searchErrorDescription, {
+      values: {
+        a: label => jsx(Button, {
+          appearance: "link",
+          spacing: "none",
+          href: CONTACT_SUPPORT_LINK,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, label)
+      }
+    })),
+    renderImage: () => jsx(GenericErrorSVG, null)
+  });
+};
 
 export default LinkSearchError;