@atlaskit/link-picker 1.8.2 → 1.8.5

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

@@ -1,11 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @jsx jsx */
+import { forwardRef, Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { defineMessages, FormattedMessage } from 'react-intl-next';
 import Spinner from '@atlaskit/spinner';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import LinkSearchListItem from '../list-item';
-import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
-import { testIds } from '../';
-
-const LinkSearchList = ({
+import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyles } from './styled';
+import LinkSearchNoResults, { testIds as noResultsTestIds } from './link-search-no-results';
+export const messages = defineMessages({
+  titleRecentlyViewed: {
+    id: 'fabric.linkPicker.listTitle.recentlyViewed',
+    defaultMessage: 'Recently Viewed',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  titleResults: {
+    id: 'fabric.linkPicker.listTitle.results',
+    defaultMessage: 'Results',
+    description: 'Describes type of items shown in the list for screen-reader users'
+  },
+  searchLinkResults: {
+    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
+    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
+    description: 'Announce search results for screen-reader users.'
+  }
+});
+export const testIds = { ...noResultsTestIds,
+  resultListTitle: 'link-picker-list-title',
+  searchResultItem: 'link-search-list-item',
+  searchResultList: 'link-search-list',
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+};
+const LinkSearchList = /*#__PURE__*/forwardRef(({
   onSelect,
   onMouseEnter,
   onMouseLeave,
@@ -16,18 +43,37 @@ const LinkSearchList = ({
   ariaControls,
   ariaLabelledBy,
   role,
-  id
-}) => {
+  id,
+  hasSearchTerm,
+  ...restProps
+}, ref) => {
   let itemsContent;
   let loadingContent;
+  const linkListTitle = hasSearchTerm ? messages.titleResults : messages.titleRecentlyViewed;
+
+  if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
+    return jsx(LinkSearchNoResults, null);
+  }
 
   if (items && items.length > 0) {
-    itemsContent = jsx("ul", {
+    itemsContent = jsx(Fragment, null, jsx("div", {
+      css: listTitleStyles,
+      id: testIds.resultListTitle,
+      "data-testid": testIds.resultListTitle
+    }, jsx(FormattedMessage, linkListTitle)), jsx(VisuallyHidden, {
+      id: "fabric.smartcard.linkpicker.suggested.results"
+    }, hasSearchTerm && jsx(FormattedMessage, _extends({}, messages.searchLinkResults, {
+      values: {
+        count: items.length
+      },
+      "aria-live": "polite",
+      "aria-atomic": "true"
+    }))), jsx("ul", {
       id: id,
       role: role,
       css: listStyles,
-      "aria-controls": ariaControls,
-      "aria-labelledby": ariaLabelledBy,
+      "aria-controls": "fabric.smartcard.linkpicker.suggested.results",
+      "aria-labelledby": testIds.resultListTitle,
       "data-testid": testIds.searchResultList
     }, items.map((item, index) => jsx(LinkSearchListItem, {
       id: `${testIds.searchResultItem}-${index}`,
@@ -39,7 +85,7 @@ const LinkSearchList = ({
       onMouseLeave: onMouseLeave,
       onSelect: onSelect,
       key: item.objectId
-    })));
+    }))));
   }
 
   if (isLoading) {
@@ -51,9 +97,9 @@ const LinkSearchList = ({
     }));
   }
 
-  return jsx("div", {
+  return jsx("div", _extends({
+    ref: ref,
     css: listContainerStyles
-  }, itemsContent, loadingContent);
-};
-
+  }, restProps), itemsContent, loadingContent);
+});
 export default LinkSearchList;

package/dist/es2019/ui/link-picker/link-search-list/link-search-no-results/index.js

@@ -0,0 +1,35 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EmptyState from '@atlaskit/empty-state';
+import { useIntl, defineMessages } from 'react-intl-next';
+import NoResultsSVG from './no-results-svg';
+import { emptyStateWrapperStyles } from './styled';
+export const messages = defineMessages({
+  noResults: {
+    id: 'fabric.linkPicker.search.noResults.heading',
+    defaultMessage: 'We couldn’t find anything matching your search.',
+    description: 'Heading message shown when a search has no results'
+  },
+  noResultsDescription: {
+    id: 'fabric.linkPicker.search.noResults.description',
+    defaultMessage: 'Try again with a different term.',
+    description: 'Describes possible action when a search returns no results'
+  }
+});
+export const testIds = {
+  emptyResultPage: 'link-search-no-results'
+};
+
+const NoResults = () => {
+  const intl = useIntl();
+  return jsx("div", {
+    css: emptyStateWrapperStyles
+  }, jsx(EmptyState, {
+    testId: testIds.emptyResultPage,
+    header: intl.formatMessage(messages.noResults),
+    description: intl.formatMessage(messages.noResultsDescription),
+    renderImage: () => jsx(NoResultsSVG, null)
+  }));
+};
+
+export default NoResults;

package/dist/es2019/ui/link-picker/link-search-list/link-search-no-results/styled.js

@@ -0,0 +1,6 @@
+import { css } from '@emotion/react';
+export const emptyStateWrapperStyles = css`
+  & p {
+    margin: 0;
+  }
+`;

package/dist/es2019/ui/link-picker/link-search-list/styled.js

@@ -1,13 +1,34 @@
-import { css } from '@emotion/react';
+import { css } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { typography } from '@atlaskit/theme';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+const gridSize = getGridSize();
 export const listContainerStyles = css`
   padding-top: 0;
+  min-height: 80px;
+  margin-top: ${gridSize * 2}px;
+  margin-bottom: ${gridSize * 2}px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 `;
 export const spinnerContainerStyles = css`
   text-align: center;
   min-height: 80px;
-  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
 `;
 export const listStyles = css`
   padding: 0;
+  margin: 0;
   list-style: none;
+`;
+export const listTitleStyles = css`
+  ${typography.h100()}
+  text-transform: uppercase;
+  margin-top: 0;
+  margin-bottom: ${gridSize / 2}px;
 `;

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

@@ -45,11 +45,6 @@ export const messages = defineMessages({
     defaultMessage: 'Suggestions will appear below as you type into the field',
     description: 'Describes what the search field does for screen reader users.'
   },
-  searchLinkResults: {
-    id: 'fabric.linkPicker.hyperlink.searchLinkResults',
-    defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
-    description: 'Announce search results for screen-reader users.'
-  },
   linkAriaLabel: {
     id: 'fabric.linkPicker.hyperlink.linkAriaLabel',
     defaultMessage: 'Link label',
@@ -69,50 +64,5 @@ export const messages = defineMessages({
     id: 'fabric.linkPicker.time.ago',
     defaultMessage: 'ago',
     description: 'Some time ago'
-  },
-  titleRecentlyViewed: {
-    id: 'fabric.linkPicker.listTitle.recentlyViewed',
-    defaultMessage: 'Recently Viewed',
-    description: 'Describes type of items shown in the list for screen-reader users'
-  },
-  titleResults: {
-    id: 'fabric.linkPicker.listTitle.results',
-    defaultMessage: 'Results',
-    description: 'Describes type of items shown in the list for screen-reader users'
-  },
-  cancelButton: {
-    id: 'fabric.linkPicker.button.cancel',
-    defaultMessage: 'Cancel',
-    description: 'Button to cancel and dismiss the link picker'
-  },
-  insertButton: {
-    id: 'fabric.linkPicker.button.insert',
-    defaultMessage: 'Insert',
-    description: 'Button to insert searched or selected link'
-  },
-  noResults: {
-    id: 'fabric.linkPicker.search.noResults.heading',
-    defaultMessage: 'We couldn’t find anything matching your search.',
-    description: 'Heading message shown when a search has no results'
-  },
-  noResultsDescription: {
-    id: 'fabric.linkPicker.search.noResults.description',
-    defaultMessage: 'Try again with a different term.',
-    description: 'Describes possible action when a search returns no results'
-  },
-  saveButton: {
-    id: 'fabric.linkPicker.button.save',
-    defaultMessage: 'Save',
-    description: 'Button to save edited link'
-  },
-  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'
   }
 });

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

@@ -1,15 +1,17 @@
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
-import { N500 } from '@atlaskit/theme/colors'; // AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-
-import { typography } from '@atlaskit/theme';
-import { gridSize } from '@atlaskit/theme/constants';
+import { N500 } from '@atlaskit/theme/colors';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
 const LINK_PICKER_WIDTH_IN_PX = 342;
-const LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
+const LINK_PICKER_MIN_HEIGHT_IN_PX = 220;
+const gridSize = getGridSize();
+/**
+ * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
+ */
+
 export const rootContainerStyles = css`
   width: ${LINK_PICKER_WIDTH_IN_PX}px;
-  padding: ${gridSize() * 2}px;
+  padding: ${gridSize}px ${gridSize * 2}px ${gridSize * 2}px;
   box-sizing: border-box;
   line-height: initial;
   min-height: ${LINK_PICKER_MIN_HEIGHT_IN_PX}px;
@@ -21,16 +23,19 @@ export const rootContainerStylesForLoader = css`
   justify-content: center;
 `;
 export const searchIconStyles = css`
-  margin-left: ${gridSize() / 2}px;
+  margin-left: ${gridSize / 2}px;
   color: ${token('color.icon', N500)};
   cursor: default;
 `;
-export const listTitleStyles = css`
-  ${typography.h100()}
-  text-transform: uppercase;
-  margin-bottom: ${gridSize() / 2}px;
-`;
 export const tabsWrapperStyles = css`
-  margin-left: -${gridSize()}px;
-  margin-right: -${gridSize()}px;
+  margin-top: ${gridSize * 1.5}px;
+  margin-left: -${gridSize}px;
+  margin-right: -${gridSize}px;
+`;
+export const flexColumnStyles = css`
+  display: flex;
+  flex-direction: column;
+`;
+export const formFooterMargin = css`
+  margin-top: ${gridSize * 2}px;
 `;

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

@@ -11,5 +11,7 @@ export const clearTextButtonStyles = css`
   cursor: pointer;
 `;
 export const fieldStyles = css`
-  margin-bottom: ${gridSize() * 2}px;
+  & + & {
+    margin-top: ${gridSize() * 2}px;
+  }
 `;

package/dist/es2019/version.json

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

package/dist/esm/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/esm/controllers/use-fix-height/index.js

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

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

@@ -1,38 +1,21 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 _objectSpread(_objectSpread({}, state), payload);
-}
-
+import { CancellationError, resolvePluginUpdates } from './utils';
+import { usePluginReducer } from './reducer';
 export function usePlugins(state, activeTab, plugins) {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       retries = _useState2[0],
       setRetries = _useState2[1];
 
-  var _useReducer = useReducer(reducer, {
-    items: null,
-    error: null,
-    isLoading: false
-  }),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      pluginState = _useReducer2[0],
-      dispatch = _useReducer2[1];
+  var _usePluginReducer = usePluginReducer(),
+      _usePluginReducer2 = _slicedToArray(_usePluginReducer, 2),
+      pluginState = _usePluginReducer2[0],
+      dispatch = _usePluginReducer2[1];
 
-  var items = pluginState.items,
-      isLoading = pluginState.isLoading,
-      error = pluginState.error;
-  var queryVersion = useRef(0);
   var activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
   useEffect(function () {
     if (!activePlugin) {
@@ -41,107 +24,75 @@ export function usePlugins(state, activeTab, plugins) {
 
     if (!state) {
       dispatch({
-        items: null,
-        isLoading: false,
-        error: null
+        type: 'CLEAR'
       });
       return;
     }
 
-    var updates = activePlugin.resolve(state);
     dispatch({
-      items: null,
-      isLoading: true,
-      error: null
+      type: 'LOADING'
     });
-    var newQuery = ++queryVersion.current;
+
+    var _resolvePluginUpdates = resolvePluginUpdates(activePlugin, state),
+        next = _resolvePluginUpdates.next,
+        cancel = _resolvePluginUpdates.cancel;
 
     var updateResults = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var done, value, _result$done, result;
+        var _isLoading, _yield$next, value, done;
 
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.prev = 0;
+                _isLoading = true;
 
-              case 1:
-                if (!(newQuery === queryVersion.current)) {
-                  _context.next = 23;
-                  break;
-                }
-
-                done = false;
-                value = void 0;
-
-                if (!(updates instanceof Promise)) {
-                  _context.next = 11;
-                  break;
-                }
-
-                done = true;
-                _context.next = 8;
-                return updates;
-
-              case 8:
-                value = _context.sent;
-                _context.next = 16;
-                break;
-
-              case 11:
-                _context.next = 13;
-                return updates.next();
-
-              case 13:
-                result = _context.sent;
-                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-                value = result.value;
-
-              case 16:
-                if (!(newQuery !== queryVersion.current)) {
-                  _context.next = 18;
+              case 2:
+                if (!_isLoading) {
+                  _context.next = 12;
                   break;
                 }
 
-                return _context.abrupt("return");
+                _context.next = 5;
+                return next();
 
-              case 18:
+              case 5:
+                _yield$next = _context.sent;
+                value = _yield$next.value;
+                done = _yield$next.done;
+                _isLoading = !done;
                 dispatch({
-                  items: limit(value.data),
-                  isLoading: !done
+                  type: 'SUCCESS',
+                  payload: {
+                    items: limit(value.data),
+                    isLoading: !done
+                  }
                 });
-
-                if (!done) {
-                  _context.next = 21;
-                  break;
-                }
-
-                return _context.abrupt("return");
-
-              case 21:
-                _context.next = 1;
+                _context.next = 2;
                 break;
 
-              case 23:
-                _context.next = 28;
+              case 12:
+                _context.next = 17;
                 break;
 
-              case 25:
-                _context.prev = 25;
+              case 14:
+                _context.prev = 14;
                 _context.t0 = _context["catch"](0);
-                dispatch({
-                  error: _context.t0,
-                  items: null,
-                  isLoading: false
-                });
 
-              case 28:
+                if (!(_context.t0 instanceof CancellationError)) {
+                  dispatch({
+                    type: 'ERROR',
+                    payload: _context.t0
+                  });
+                }
+
+              case 17:
               case "end":
                 return _context.stop();
             }
           }
-        }, _callee, null, [[0, 25]]);
+        }, _callee, null, [[0, 14]]);
       }));
 
       return function updateResults() {
@@ -150,7 +101,8 @@ export function usePlugins(state, activeTab, plugins) {
     }();
 
     updateResults();
-  }, [activePlugin, queryVersion, state, retries]);
+    return cancel;
+  }, [activePlugin, state, retries, dispatch]);
   var tabs = useMemo(function () {
     if (!plugins || plugins.length <= 1) {
       return [];
@@ -169,6 +121,9 @@ export function usePlugins(state, activeTab, plugins) {
       return ++prev;
     });
   }, []);
+  var items = pluginState.items,
+      isLoading = pluginState.isLoading,
+      error = pluginState.error;
   return {
     tabs: tabs,
     items: items,

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

@@ -0,0 +1,43 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { useReducer } from 'react';
+export var ACTION_CLEAR = 'CLEAR';
+export var ACTION_LOADING = 'LOADING';
+export var ACTION_SUCCESS = 'SUCCESS';
+export var ACTION_ERRORED = 'ERROR';
+export var INITIAL_STATE = {
+  items: null,
+  error: null,
+  isLoading: false
+};
+export function reducer(state, action) {
+  switch (action.type) {
+    case ACTION_CLEAR:
+      return _objectSpread({}, INITIAL_STATE);
+
+    case ACTION_LOADING:
+      return _objectSpread(_objectSpread({}, INITIAL_STATE), {}, {
+        isLoading: true
+      });
+
+    case ACTION_SUCCESS:
+      return _objectSpread(_objectSpread(_objectSpread({}, state), action.payload), {}, {
+        error: null
+      });
+
+    case ACTION_ERRORED:
+      return _objectSpread(_objectSpread({}, INITIAL_STATE), {}, {
+        error: action.payload
+      });
+
+    default:
+      return state;
+  }
+}
+export var usePluginReducer = function usePluginReducer() {
+  return useReducer(reducer, INITIAL_STATE);
+};