@atlaskit/link-picker 0.8.1 → 0.11.0

package/dist/esm/ui/{LinkSearchList.js → link-search-list/index.js}

@@ -3,22 +3,17 @@ 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";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject, _templateObject2, _templateObject3;
 
 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; } }
 
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-import LinkSearchListItem from './LinkSearchListItem';
-var ListContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
-var SpinnerContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
-export var List = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+import LinkSearchListItem from '../list-item';
+import { listContainerStyles, spinnerContainerStyles, listStyles } from './styled';
 
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
   _inherits(LinkSearchList, _PureComponent);
@@ -50,13 +45,15 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var loadingContent;
 
       if (items && items.length > 0) {
-        itemsContent = /*#__PURE__*/React.createElement(List, {
+        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 /*#__PURE__*/React.createElement(LinkSearchListItem, {
+          return jsx(LinkSearchListItem, {
             id: "link-search-list-item-".concat(index),
             role: role && 'option',
             item: item,
@@ -71,13 +68,17 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (isLoading) {
-        loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+        loadingContent = jsx("div", {
+          css: spinnerContainerStyles
+        }, jsx(Spinner, {
           testId: "link-picker.results-loading-indicator",
           size: "medium"
         }));
       }
 
-      return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+      return jsx("div", {
+        css: listContainerStyles
+      }, itemsContent, loadingContent);
     }
   }]);
 

package/dist/esm/ui/link-search-list/styled.js

@@ -0,0 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));

package/dist/esm/ui/{LinkSearchListItem.js → list-item/index.js}

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import { Fragment } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import { transformTimeStamp } from '../transformTimeStamp';
-import { ItemNameWrapper, ItemIconWrapper, ListItemContext, ListItemName, ListItemWrapper, ImgStyles } from '../styles';
+import { transformTimeStamp } from '../../transformTimeStamp';
+import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles } from './styled';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
   var item = _ref.item,
@@ -28,37 +28,35 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
     return onMouseLeave(item.objectId);
   };
 
-  return jsx(ListItemWrapper, {
+  var container = item.container || null;
+  var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
+  return jsx("div", {
+    css: composeListItemStyles(active, selected),
     role: role,
     id: id,
     "aria-selected": selected,
     "data-testid": "link-search-list-item",
-    selected: selected,
-    active: active,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     onClick: handleSelect
   }, jsx(ListItemIcon, {
     item: item,
     intl: intl
-  }), jsx(ItemNameWrapper, null, jsx(ListItemName, null, item.name), jsx(ListItemContext, null, item.container, jsx(ItemTimeStamp, {
-    date: transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate)
-  }))));
+  }), jsx("div", {
+    css: itemNameStyles
+  }, jsx("div", {
+    "data-testid": "link-search-list-item-title",
+    css: listItemNameStyles
+  }, item.name), jsx("div", {
+    "data-testid": "link-search-list-item-subtitle",
+    css: listItemContextStyles
+  }, container, container && date && jsx(Fragment, null, "\xA0 \u2022\xA0 "), date && jsx(Fragment, null, formatDate(date)))));
 };
 
 export default injectIntl(LinkSearchListItem);
 
-var ItemTimeStamp = function ItemTimeStamp(props) {
-  var date = props.date;
-
-  if (!date) {
-    return null;
-  }
-
-  return jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
-    className: "link-search-timestamp",
-    "data-test-id": "link-search-timestamp"
-  }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
+var formatDate = function formatDate(date) {
+  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
 };
 
 var ListItemIcon = function ListItemIcon(props) {
@@ -75,14 +73,18 @@ var ListItemIcon = function ListItemIcon(props) {
 
   if (typeof icon !== 'string') {
     var Glyph = icon;
-    return jsx(ItemIconWrapper, null, jsx(Glyph, {
+    return jsx("span", {
+      css: itemIconStyles
+    }, jsx(Glyph, {
       alt: alt
     }));
   }
 
-  return jsx(ItemIconWrapper, null, jsx("img", {
+  return jsx("span", {
+    css: itemIconStyles
+  }, jsx("img", {
     src: icon,
     alt: alt,
-    css: ImgStyles
+    css: imgStyles
   }));
 };

package/dist/esm/ui/list-item/styled.js

@@ -0,0 +1,37 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+import { token } from '@atlaskit/tokens';
+import { css } from '@emotion/react';
+import { B50, N300, N800, N20, B400 } from '@atlaskit/theme/colors';
+import { gridSize } from '@atlaskit/theme/constants'; // AFP-2532 TODO: Fix automatic suppressions below
+// eslint-disable-next-line @atlassian/tangerine/import/entry-points
+
+import { fontSizeSmall, fontSize } from '@atlaskit/theme';
+export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
+  if (typeof px === 'string') {
+    px = parseInt(px);
+  }
+
+  if (isNaN(px)) {
+    throw new Error("Invalid font size: '".concat(px, "'"));
+  }
+
+  return "".concat(px / 16, "rem");
+};
+var listItemBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n"])), gridSize(), gridSize() * 2, gridSize() * 2);
+var listItemBoxShadow = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), token('color.border.selected', B400));
+var listItemActive = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.neutral.subtle.hovered', N20));
+var listItemSelected = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), token('color.background.selected', B50));
+export var composeListItemStyles = function composeListItemStyles() {
+  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  var selected = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var hasShadow = active || selected;
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, active && listItemActive, selected && listItemSelected, hasShadow && listItemBoxShadow);
+};
+export var itemNameStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var listItemNameStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), token('color.text', N800));
+export var listItemContextStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), token('color.text', N300), relativeFontSizeToBase16(fontSizeSmall()), fontSize());
+export var itemIconStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), gridSize() * 2);
+export var imgStyles = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), gridSize() * 2);

package/dist/esm/ui/styled.js

@@ -0,0 +1,16 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+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';
+var LINK_PICKER_WIDTH_IN_PX = 342;
+export var recentListStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
+export var containerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), gridSize() * 2);
+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);

package/dist/esm/ui/{PanelTextInput.js → text-input/index.js}

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
-import React, { useCallback, useRef } from 'react';
+
+/** @jsx jsx */
+import { useCallback, useRef, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { ErrorMessage, Field } from '@atlaskit/form';
 import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
-import { ClearText, FieldWrapper } from '../styles';
-import { isRedoEvent, isUndoEvent } from '../utils';
+import { isRedoEvent, isUndoEvent } from '../../utils';
+import { clearTextButtonStyles, fieldStyles } from './styled';
 
 var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
@@ -64,27 +67,30 @@ var PanelTextInput = function PanelTextInput(props) {
       onClear();
     }
   }, [onClear]);
-  var clearText = restProps.value !== '' && /*#__PURE__*/React.createElement(Tooltip, {
+  var clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel
-  }, /*#__PURE__*/React.createElement(ClearText, {
+  }, jsx("button", {
+    css: clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": "clear-text"
-  }, /*#__PURE__*/React.createElement(Selectclear, {
+  }, jsx(Selectclear, {
     size: "medium",
     label: clearLabel || ''
   })));
-  return /*#__PURE__*/React.createElement(FieldWrapper, null, /*#__PURE__*/React.createElement(Field, {
+  return jsx("div", {
+    css: fieldStyles
+  }, jsx(Field, {
     label: label,
     name: name
   }, function (_ref) {
     var fieldProps = _ref.fieldProps;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, fieldProps, restProps, {
+    return jsx(Fragment, null, jsx(Textfield, _extends({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       onChange: handleChange,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
-    })), error && /*#__PURE__*/React.createElement(ErrorMessage, {
+    })), error && jsx(ErrorMessage, {
       testId: "link-error"
     }, error));
   }));

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

@@ -0,0 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import { token } from '@atlaskit/tokens';
+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);

package/dist/esm/utils.js

@@ -1,15 +1,4 @@
 import { browser } from './browser';
-export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
-  if (typeof px === 'string') {
-    px = parseInt(px);
-  }
-
-  if (isNaN(px)) {
-    throw new Error("Invalid font size: '".concat(px, "'"));
-  }
-
-  return "".concat(px / 16, "rem");
-};
 var KeyZCode = 90;
 var KeyYCode = 89;
 export var isUndoEvent = function isUndoEvent(e) {

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -8,14 +8,14 @@ export interface LinkSearchListItemData {
     name: string;
     /** URL of the resource being linked to */
     url: string;
-    /** Context to display in link result */
-    container: string;
     /** Icon to display in link result */
     icon: string | React.ComponentType<{
         alt: string;
     }>;
     /** Alt text describing the icon */
     iconAlt: string | MessageDescriptor;
+    /** Context to display in link result */
+    container?: string;
     /** Optional last view date to display in link result */
     lastViewedDate?: Date;
     /** Optional last updated date to display in link result */
@@ -32,6 +32,9 @@ export interface LinkPickerState {
     /** Current query string / URL input field value */
     query: string;
 }
+export interface ResolveResult {
+    data: LinkSearchListItemData[];
+}
 export interface LinkPickerPlugin {
-    resolve: (state: LinkPickerState) => AsyncGenerator<LinkSearchListItemData[], LinkSearchListItemData[]>;
+    resolve: (state: LinkPickerState) => Promise<ResolveResult> | AsyncGenerator<ResolveResult, ResolveResult>;
 }

package/dist/types/ui/{LinkSearchList.d.ts → link-search-list/index.d.ts}

@@ -1,7 +1,7 @@
-import React from 'react';
+/** @jsx jsx */
 import { PureComponent } from 'react';
-import { LinkSearchListItemData } from '../types';
-export declare const List: import("styled-components").StyledComponentClass<React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>, any, React.ClassAttributes<HTMLUListElement> & React.HTMLAttributes<HTMLUListElement>>;
+import { jsx } from '@emotion/react';
+import { LinkSearchListItemData } from '../../types';
 export interface Props {
     items?: LinkSearchListItemData[];
     isLoading: boolean;
@@ -16,5 +16,5 @@ export interface Props {
     id?: string;
 }
 export default class LinkSearchList extends PureComponent<Props, {}> {
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }

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

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

package/dist/types/ui/{LinkSearchListItem.d.ts → list-item/index.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl-next';
-import { LinkSearchListItemData } from '../types';
+import { LinkSearchListItemData } from '../../types';
 export interface Props {
     item: LinkSearchListItemData;
     selected: boolean;

package/dist/types/ui/list-item/styled.d.ts

@@ -0,0 +1,7 @@
+export declare const relativeFontSizeToBase16: (px: number | string) => string;
+export declare const composeListItemStyles: (active?: boolean, selected?: boolean) => import("@emotion/react").SerializedStyles;
+export declare const itemNameStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemNameStyles: import("@emotion/react").SerializedStyles;
+export declare const listItemContextStyles: import("@emotion/react").SerializedStyles;
+export declare const itemIconStyles: import("@emotion/react").SerializedStyles;
+export declare const imgStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const recentListStyles: import("@emotion/react").SerializedStyles;
+export declare const containerStyles: import("@emotion/react").SerializedStyles;
+export declare const searchIconStyles: import("@emotion/react").SerializedStyles;
+export declare const listTitleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/{PanelTextInput.d.ts → text-input/index.d.ts}

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { TextFieldProps } from '@atlaskit/textfield';
 export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'autoFocus' | 'onSubmit'> {
     name: string;
@@ -13,5 +13,5 @@ export interface Props extends Omit<TextFieldProps, 'value' | 'onChange' | 'auto
     clearLabel?: string;
     error?: string | null;
 }
-declare const PanelTextInput: (props: Props) => JSX.Element;
+declare const PanelTextInput: (props: Props) => jsx.JSX.Element;
 export default PanelTextInput;

package/dist/types/ui/text-input/styled.d.ts

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

package/dist/types/utils.d.ts

@@ -1,4 +1,3 @@
 import { KeyboardEvent } from 'react';
-export declare const relativeFontSizeToBase16: (px: number | string) => string;
 export declare const isUndoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;
 export declare const isRedoEvent: (e: KeyboardEvent<HTMLInputElement>) => boolean;

package/example-helpers/mock-data.ts

@@ -33,6 +33,8 @@ const MOCK_DATA_V3: MockDataV3 = {
                       'ari:cloud:townsquare:a5a01d21-1cc3-4f29-9565-f2bb8cd969f5:project/cae6f0ae-bd95-439a-835f-d93907a63f23',
                     type: 'project',
                     product: 'townsquare',
+                    rootContainerId:
+                      'ari:cloud:platform::site/9a257bbc-b7c6-47c8-b1dc-c3db3dc8914b',
                     contributors: [
                       {
                         profile: {
@@ -178,6 +180,8 @@ const MOCK_DATA_V3: MockDataV3 = {
                       'ari:cloud:townsquare:a3a01d21-1cc3-4f29-9565-f2bb8cd969f5:project/cae6f0ae-bd95-439a-835f-d93907a63f53',
                     type: 'project',
                     product: 'townsquare',
+                    rootContainerId:
+                      'ari:cloud:platform::site/9a257bbc-b7c6-47c8-b1dc-c3db3dc8914b',
                     contributors: [
                       {
                         profile: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "0.8.1",
+  "version": "0.11.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -36,14 +36,13 @@
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "date-fns": "^2.17.0",
     "linkify-it": "^2.0.3"
   },
   "peerDependencies": {
     "react": "^16.8.0",
-    "react-intl-next": "npm:react-intl@^5.18.1",
-    "styled-components": "^3.2.6"
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
     "@atlaskit/activity-provider": "^2.3.2",
@@ -56,11 +55,13 @@
     "@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": "^6.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^9.0.0",
     "@atlassian/search-provider": "^2.3.0",
+    "@testing-library/dom": "^7.7.3",
     "@testing-library/react": "^8.0.1",
     "enzyme": "^3.10.0",
     "fetch-mock": "^8.0.0",
+    "mockdate": "^3.0.2",
     "react-dom": "^16.8.0",
     "sinon": "^2.2.0",
     "typescript": "4.2.4"

package/dist/cjs/styles.js

@@ -1,90 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.recentListStyles = exports.SearchIconWrapper = exports.ListTitleStyles = exports.ListItemWrapper = exports.ListItemName = exports.ListItemContext = exports.ItemNameWrapper = exports.ItemIconWrapper = exports.ImgStyles = exports.FieldWrapper = exports.Container = exports.ClearText = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _tokens = require("@atlaskit/tokens");
-
-var _core = require("@emotion/core");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _utils = require("./utils");
-
-var _theme = require("@atlaskit/theme");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
-var LINK_PICKER_WIDTH_IN_PX = 342;
-var recentListStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
-exports.recentListStyles = recentListStyles;
-
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px;\n  width: 100%;\n  overflow: hidden;\n  line-height: initial;\n  box-sizing: border-box;\n"])), (0, _constants.gridSize)() * 2);
-
-exports.Container = Container;
-
-var ClearText = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin-right: ", "px;\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon.subtle', _colors.N500));
-
-exports.ClearText = ClearText;
-
-var FieldWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
-
-exports.FieldWrapper = FieldWrapper;
-
-var SearchIconWrapper = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  color: ", ";\n  cursor: default;\n"])), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.icon', _colors.N500));
-
-exports.SearchIconWrapper = SearchIconWrapper;
-var ListTitleStyles = (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
-exports.ListTitleStyles = ListTitleStyles;
-
-var ListItemWrapper = _styledComponents.default.li(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n  background-color: ", ";\n  box-shadow: inset 2px 0px 0px\n    ", ";\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2, function (props) {
-  switch (true) {
-    case props.selected:
-      return (0, _tokens.token)('color.background.selected', _colors.B50);
-
-    case props.active:
-      return (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20);
-
-    default:
-      return 'transparent';
-  }
-}, function (props) {
-  switch (true) {
-    case props.active:
-    case props.selected:
-      return (0, _tokens.token)('color.border.selected', _colors.B400);
-
-    default:
-      return 'transparent';
-  }
-});
-
-exports.ListItemWrapper = ListItemWrapper;
-
-var ItemNameWrapper = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
-
-exports.ItemNameWrapper = ItemNameWrapper;
-
-var ListItemName = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), (0, _tokens.token)('color.text', _colors.N800));
-
-exports.ListItemName = ListItemName;
-
-var ListItemContext = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), (0, _tokens.token)('color.text', _colors.N300), (0, _utils.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
-
-exports.ListItemContext = ListItemContext;
-
-var ItemIconWrapper = _styledComponents.default.span(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), (0, _constants.gridSize)() * 2);
-
-exports.ItemIconWrapper = ItemIconWrapper;
-var ImgStyles = (0, _core.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), (0, _constants.gridSize)() * 2);
-exports.ImgStyles = ImgStyles;