@atlaskit/link-picker 1.8.4 → 1.8.5

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

@@ -45,11 +45,6 @@ export var 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 var 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/esm/ui/link-picker/styled.js

@@ -1,18 +1,21 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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';
 var LINK_PICKER_WIDTH_IN_PX = 342;
-var LINK_PICKER_MIN_HEIGHT_IN_PX = 234;
-export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize() * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
+var LINK_PICKER_MIN_HEIGHT_IN_PX = 220;
+var gridSize = getGridSize();
+/**
+ * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
+ */
+
+export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  padding: ", "px ", "px ", "px;\n  box-sizing: border-box;\n  line-height: initial;\n  min-height: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX, gridSize, gridSize * 2, gridSize * 2, LINK_PICKER_MIN_HEIGHT_IN_PX);
 export var rootContainerStylesForLoader = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), rootContainerStyles);
-export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize() / 2, token('color.icon', N500));
-export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), typography.h100(), gridSize() / 2);
-export var tabsWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), gridSize(), gridSize());
+export var searchIconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), gridSize / 2, token('color.icon', N500));
+export var tabsWrapperStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n  margin-left: -", "px;\n  margin-right: -", "px;\n"])), gridSize * 1.5, gridSize, gridSize);
+export var flexColumnStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
+export var formFooterMargin = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-top: ", "px;\n"])), gridSize * 2);

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

@@ -7,4 +7,4 @@ import { css } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 export var clearTextButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), gridSize() / 2, token('color.icon.subtle', N500));
-export var fieldStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);
+export var fieldStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & + & {\n    margin-top: ", "px;\n  }\n"])), gridSize() * 2);

package/dist/esm/version.json

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

package/dist/types/controllers/use-fix-height/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const useFixHeight: (shouldFixHeight: boolean) => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    style: {
+        minHeight: string | number;
+    } | undefined;
+};
+export default useFixHeight;

package/dist/types/ui/link-picker/form-footer/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const testIds: {
+    readonly insertButton: "link-picker-insert-button";
+    readonly cancelButton: "link-picker-cancel-button";
+};
+interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
+    isEditing?: boolean;
+    onCancel?: () => void;
+}
+declare const _default: import("react").MemoExoticComponent<({ isEditing, onCancel, ...restProps }: FormFooterProps) => jsx.JSX.Element>;
+export default _default;

package/dist/types/ui/link-picker/form-footer/styled.d.ts

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

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

@@ -3,22 +3,22 @@ import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const CONTACT_SUPPORT_LINK = "https://support.atlassian.com/contact/";
 export declare const testIds: {
-    linkPicker: string;
-    urlInputField: string;
-    textInputField: string;
-    searchIcon: string;
-    insertButton: string;
-    cancelButton: string;
-    clearUrlButton: string;
-    resultListTitle: string;
-    emptyResultPage: string;
-    searchResultList: string;
-    searchResultItem: string;
-    searchResultLoadingIndicator: string;
-    urlError: string;
-    tabList: string;
-    tabItem: string;
-    searchError: string;
+    readonly clearUrlButton: "clear-text";
+    readonly urlError: "link-error";
+    readonly tabList: "link-picker-tabs";
+    readonly tabItem: "link-picker-tab";
+    readonly resultListTitle: string;
+    readonly searchResultItem: string;
+    readonly searchResultList: string;
+    readonly searchResultLoadingIndicator: string;
+    readonly emptyResultPage: string;
+    readonly searchError: string;
+    readonly insertButton: "link-picker-insert-button";
+    readonly cancelButton: "link-picker-cancel-button";
+    readonly linkPicker: "link-picker";
+    readonly urlInputField: "link-url";
+    readonly textInputField: "link-text";
+    readonly searchIcon: "link-picker-search-icon";
 };
 interface Meta {
     /** Indicates how the link was picked. */

package/dist/types/ui/link-picker/link-search-error/index.d.ts

@@ -1,4 +1,20 @@
-/// <reference types="react" />
-import { EmptyStateProps } from '@atlaskit/empty-state';
-declare const LinkSearchError: (props: EmptyStateProps) => JSX.Element;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const CONTACT_SUPPORT_LINK = "https://support.atlassian.com/contact/";
+export declare const messages: {
+    searchErrorHeader: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchErrorDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const testIds: {
+    searchError: string;
+};
+declare const LinkSearchError: () => jsx.JSX.Element;
 export default LinkSearchError;

package/dist/types/ui/link-picker/link-search-list/index.d.ts

@@ -1,8 +1,31 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { LinkSearchListItemData } from '../../types';
-export interface LinkSearchListProps {
-    items?: LinkSearchListItemData[];
+export declare const messages: {
+    titleRecentlyViewed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    titleResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    searchLinkResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const testIds: {
+    resultListTitle: string;
+    searchResultItem: string;
+    searchResultList: string;
+    searchResultLoadingIndicator: string;
+    emptyResultPage: string;
+};
+export interface LinkSearchListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onMouseEnter' | 'onMouseLeave'> {
+    items?: LinkSearchListItemData[] | null;
     isLoading: boolean;
     selectedIndex: number;
     activeIndex: number;
@@ -13,6 +36,8 @@ export interface LinkSearchListProps {
     ariaLabelledBy?: string;
     role?: string;
     id?: string;
+    error?: unknown;
+    hasSearchTerm?: boolean;
 }
-declare const LinkSearchList: ({ onSelect, onMouseEnter, onMouseLeave, items, activeIndex, selectedIndex, isLoading, ariaControls, ariaLabelledBy, role, id, }: LinkSearchListProps) => jsx.JSX.Element;
+declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;
 export default LinkSearchList;

package/dist/types/ui/link-picker/link-search-list/link-search-no-results/index.d.ts

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+export declare const messages: {
+    noResults: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    noResultsDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export declare const testIds: {
+    emptyResultPage: string;
+};
+declare const NoResults: () => jsx.JSX.Element;
+export default NoResults;

package/dist/types/ui/link-picker/link-search-list/link-search-no-results/styled.d.ts

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

package/dist/types/ui/link-picker/link-search-list/styled.d.ts

@@ -1,3 +1,4 @@
 export declare const listContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const spinnerContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const listStyles: import("@emotion/react").SerializedStyles;
+export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

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

@@ -44,11 +44,6 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    searchLinkResults: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
     linkAriaLabel: {
         id: string;
         defaultMessage: string;
@@ -69,49 +64,4 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
-    titleRecentlyViewed: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    titleResults: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    cancelButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    insertButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    noResults: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    noResultsDescription: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    saveButton: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    searchErrorHeader: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    searchErrorDescription: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

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

@@ -1,5 +1,9 @@
+/**
+ * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
+ */
 export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const rootContainerStylesForLoader: import("@emotion/react").SerializedStyles;
 export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
-export declare const listTitleStyles: import("@emotion/react").SerializedStyles;
 export declare const tabsWrapperStyles: import("@emotion/react").SerializedStyles;
+export declare const flexColumnStyles: import("@emotion/react").SerializedStyles;
+export declare const formFooterMargin: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -67,11 +67,11 @@
     "@atlassian/link-picker-plugins": "^5.1.0",
     "@atlassian/recent-work-client": "^1.6.0",
     "@atlassian/search-provider": "^2.3.0",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/jest-dom": "^4.1.0",
-    "@testing-library/react": "^8.0.1",
-    "@testing-library/react-hooks": "^1.0.4",
-    "@testing-library/user-event": "10.4.0",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^1.1.0",
+    "@testing-library/user-event": "^13.5.0",
     "@types/js-yaml": "^3.12.5",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",

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

@@ -1,27 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _emptyState = _interopRequireDefault(require("@atlaskit/empty-state"));
-
-var _noResultsSvg = _interopRequireDefault(require("./no-results-svg"));
-
-var NoResults = function NoResults(props) {
-  return /*#__PURE__*/_react.default.createElement(_emptyState.default, (0, _extends2.default)({}, props, {
-    renderImage: function renderImage() {
-      return /*#__PURE__*/_react.default.createElement(_noResultsSvg.default, null);
-    }
-  }));
-};
-
-var _default = NoResults;
-exports.default = _default;

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

@@ -1,10 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import EmptyState from '@atlaskit/empty-state';
-import NoResultsSVG from './no-results-svg';
-
-const NoResults = props => /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
-  renderImage: () => /*#__PURE__*/React.createElement(NoResultsSVG, null)
-}));
-
-export default NoResults;

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

@@ -1,14 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import EmptyState from '@atlaskit/empty-state';
-import NoResultsSVG from './no-results-svg';
-
-var NoResults = function NoResults(props) {
-  return /*#__PURE__*/React.createElement(EmptyState, _extends({}, props, {
-    renderImage: function renderImage() {
-      return /*#__PURE__*/React.createElement(NoResultsSVG, null);
-    }
-  }));
-};
-
-export default NoResults;

package/dist/types/ui/link-picker/link-search-no-results/index.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { EmptyStateProps } from '@atlaskit/empty-state';
-declare const NoResults: (props: EmptyStateProps) => JSX.Element;
-export default NoResults;