@atlaskit/link-picker 1.4.1 → 1.6.0

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

@@ -1,88 +1,60 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
-import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import LinkSearchListItem from '../list-item';
 import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
-
-var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
-  _inherits(LinkSearchList, _PureComponent);
-
-  var _super = _createSuper(LinkSearchList);
-
-  function LinkSearchList() {
-    _classCallCheck(this, LinkSearchList);
-
-    return _super.apply(this, arguments);
+import { testIds } from '../';
+
+var LinkSearchList = function LinkSearchList(_ref) {
+  var onSelect = _ref.onSelect,
+      onMouseEnter = _ref.onMouseEnter,
+      onMouseLeave = _ref.onMouseLeave,
+      items = _ref.items,
+      activeIndex = _ref.activeIndex,
+      selectedIndex = _ref.selectedIndex,
+      isLoading = _ref.isLoading,
+      ariaControls = _ref.ariaControls,
+      ariaLabelledBy = _ref.ariaLabelledBy,
+      role = _ref.role,
+      id = _ref.id;
+  var itemsContent;
+  var loadingContent;
+
+  if (items && items.length > 0) {
+    itemsContent = jsx("ul", {
+      id: id,
+      role: role,
+      css: listStyles,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledBy,
+      "data-testid": testIds.searchResultList
+    }, items.map(function (item, index) {
+      return jsx(LinkSearchListItem, {
+        id: "".concat(testIds.searchResultItem, "-").concat(index),
+        role: role && 'option',
+        item: item,
+        selected: selectedIndex === index,
+        active: activeIndex === index,
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        onSelect: onSelect,
+        key: item.objectId
+      });
+    }));
   }
 
-  _createClass(LinkSearchList, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          onSelect = _this$props.onSelect,
-          onMouseEnter = _this$props.onMouseEnter,
-          onMouseLeave = _this$props.onMouseLeave,
-          items = _this$props.items,
-          activeIndex = _this$props.activeIndex,
-          selectedIndex = _this$props.selectedIndex,
-          isLoading = _this$props.isLoading,
-          ariaControls = _this$props.ariaControls,
-          ariaLabelledBy = _this$props.ariaLabelledBy,
-          role = _this$props.role,
-          id = _this$props.id;
-      var itemsContent;
-      var loadingContent;
-
-      if (items && items.length > 0) {
-        itemsContent = jsx("ul", {
-          "data-testid": "link-search-list",
-          css: listStyles,
-          id: id,
-          role: role,
-          "aria-controls": ariaControls,
-          "aria-labelledby": ariaLabelledBy
-        }, items.map(function (item, index) {
-          return jsx(LinkSearchListItem, {
-            id: "link-search-list-item-".concat(index),
-            role: role && 'option',
-            item: item,
-            selected: selectedIndex === index,
-            active: activeIndex === index,
-            onMouseEnter: onMouseEnter,
-            onMouseLeave: onMouseLeave,
-            onSelect: onSelect,
-            key: item.objectId
-          });
-        }));
-      }
-
-      if (isLoading) {
-        loadingContent = jsx("div", {
-          css: spinnerContainerStyles
-        }, jsx(Spinner, {
-          testId: "link-picker.results-loading-indicator",
-          size: "medium"
-        }));
-      }
-
-      return jsx("div", {
-        css: listContainerStyles
-      }, itemsContent, loadingContent);
-    }
-  }]);
+  if (isLoading) {
+    loadingContent = jsx("div", {
+      css: spinnerContainerStyles
+    }, jsx(Spinner, {
+      testId: testIds.searchResultLoadingIndicator,
+      size: "medium"
+    }));
+  }
 
-  return LinkSearchList;
-}(PureComponent);
+  return jsx("div", {
+    css: listContainerStyles
+  }, itemsContent, loadingContent);
+};
 
-export { LinkSearchList as default };
+export default LinkSearchList;

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

@@ -4,6 +4,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
+import { testIds } from '../';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
   var item = _ref.item,
@@ -35,7 +36,7 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
     role: role,
     id: id,
     "aria-selected": selected,
-    "data-testid": "link-search-list-item",
+    "data-testid": testIds.searchResultItem,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleSelect
@@ -45,10 +46,10 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
   }), jsx("div", {
     css: itemNameStyles
   }, jsx("div", {
-    "data-testid": "link-search-list-item-title",
+    "data-testid": "".concat(testIds.searchResultItem, "-title"),
     css: listItemNameStyles
   }, item.name), jsx("div", {
-    "data-testid": "link-search-list-item-subtitle",
+    "data-testid": "".concat(testIds.searchResultItem, "-subtitle"),
     css: listItemContextStyles
   }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
 };

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

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
@@ -14,4 +14,5 @@ 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);
 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 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());

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

@@ -11,6 +11,7 @@ import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { isRedoEvent, isUndoEvent } from '../utils';
 import { clearTextButtonStyles, fieldStyles } from './styled';
+import { testIds } from '../';
 
 var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
@@ -64,15 +65,15 @@ var PanelTextInput = function PanelTextInput(props) {
   var handleClear = useCallback(function () {
     if (inputRef.current && onClear) {
       inputRef.current.focus();
-      onClear();
+      onClear(name);
     }
-  }, [onClear]);
+  }, [name, onClear]);
   var clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
   }, jsx("button", {
     css: clearTextButtonStyles,
     onClick: handleClear,
-    "data-testid": "clear-text"
+    "data-testid": testIds.clearUrlButton
   }, jsx(Selectclear, {
     size: "medium",
     label: clearLabel || ''
@@ -91,7 +92,7 @@ var PanelTextInput = function PanelTextInput(props) {
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && jsx(ErrorMessage, {
-      testId: "link-error"
+      testId: testIds.urlError
     }, error));
   }));
 };

package/dist/esm/version.json

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

package/dist/types/services/use-plugins/index.d.ts

@@ -0,0 +1,12 @@
+import { PickerState } from '../../ui/link-picker';
+import { LinkPickerPlugin, LinkSearchListItemData } from '../../ui/types';
+export interface LinkPickerPluginsService {
+    items: LinkSearchListItemData[];
+    isLoading: boolean;
+    isSelectedItem: boolean;
+    isActivePlugin: boolean;
+    tabs: {
+        tabTitle: string;
+    }[];
+}
+export declare function usePlugins(state: PickerState, plugins?: LinkPickerPlugin[]): LinkPickerPluginsService;

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

@@ -1,7 +1,23 @@
-/// <reference types="react" />
-import { WrappedComponentProps } from 'react-intl-next';
-import { LinkSearchListItemData, LinkInputType, LinkPickerPlugin } from '../types';
+import { jsx } from '@emotion/react';
+import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
+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;
+};
 interface Meta {
     /** Indicates how the link was picked. */
     inputMethod: LinkInputType;
@@ -28,6 +44,8 @@ export interface LinkPickerProps {
     onSubmit: (arg: OnSubmitParameter) => void;
     /** Callback to fire when the cancel button is clicked. */
     onCancel: () => void;
+    /** Callback to fire when content is changed inside the link picker e.g. items, when loading, tabs */
+    onContentResize?: () => void;
     /** The url of the linked resource for editing. */
     url?: string;
     /** The desired text to be displayed alternatively to the title of the linked resource for editing. */
@@ -35,18 +53,13 @@ export interface LinkPickerProps {
     /** Plugins that provide link suggestions / search capabilities. */
     plugins?: LinkPickerPlugin[];
 }
-export interface State {
-    items: LinkSearchListItemData[];
+export interface PickerState {
     selectedIndex: number;
     activeIndex: number;
     url: string;
-    isLoading: boolean;
-    isEditing: boolean;
     displayText: string;
-    invalidUrl: string | null;
-    activePlugin: number;
+    invalidUrl: boolean;
+    activeTab: number;
 }
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<WrappedComponentProps<"intl"> & LinkPickerProps>> & {
-    WrappedComponent: import("react").ComponentType<WrappedComponentProps<"intl"> & LinkPickerProps>;
-};
-export default _default;
+declare function LinkPicker({ onSubmit, onCancel, onContentResize, plugins, url: initUrl, displayText: initDisplayText, }: LinkPickerProps): jsx.JSX.Element;
+export default LinkPicker;

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

@@ -1,8 +1,7 @@
 /** @jsx jsx */
-import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { LinkSearchListItemData } from '../../types';
-export interface Props {
+export interface LinkSearchListProps {
     items?: LinkSearchListItemData[];
     isLoading: boolean;
     selectedIndex: number;
@@ -15,6 +14,5 @@ export interface Props {
     role?: string;
     id?: string;
 }
-export default class LinkSearchList extends PureComponent<Props, {}> {
-    render(): jsx.JSX.Element;
-}
+declare const LinkSearchList: ({ onSelect, onMouseEnter, onMouseLeave, items, activeIndex, selectedIndex, isLoading, ariaControls, ariaLabelledBy, role, id, }: LinkSearchListProps) => jsx.JSX.Element;
+export default LinkSearchList;

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

@@ -2,3 +2,4 @@ export declare const rootContainerStyles: import("@emotion/react").SerializedSty
 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;

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

@@ -9,7 +9,7 @@ export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'auto
     onSubmit?: (value: string) => void;
     onUndo?: Function;
     onRedo?: Function;
-    onClear?: () => void;
+    onClear?: Function;
     clearLabel?: string;
     error?: string | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.4.1",
+  "version": "1.6.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -57,15 +57,17 @@
     "@atlaskit/link-test-helpers": "^1.3.0",
     "@atlaskit/popup": "^1.3.5",
     "@atlaskit/ssr": "*",
+    "@atlaskit/toggle": "^12.4.0",
     "@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": "^14.0.0",
-    "@atlassian/link-picker-plugins": "^1.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^16.0.0",
+    "@atlassian/link-picker-plugins": "^3.0.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",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",