@atlaskit/link-picker 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 0.10.0
+
+### Minor Changes
+
+- [`dbc82a03866`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dbc82a03866) - Removed styled-components as a peer dependency in favor of @emotion/react
+
+## 0.9.0
+
+### Minor Changes
+
+- [`c1c010c8ada`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1c010c8ada) - Remove required container param
+
+## 0.8.1
+
+### Patch Changes
+
+- [`eef8c2da75b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eef8c2da75b) - [ux] Remove link-picker background color as it conflicts with floatingToobar borders
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/cjs/ui/link-picker.js

@@ -29,19 +29,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
 var _messages = require("../messages");
 
-var _PanelTextInput = _interopRequireDefault(require("./PanelTextInput"));
+var _textInput = _interopRequireDefault(require("./text-input"));
 
-var _LinkSearchList = _interopRequireDefault(require("./LinkSearchList"));
+var _linkSearchList = _interopRequireDefault(require("./link-search-list"));
 
 var _url = require("../url");
 
-var _styles = require("../styles");
+var _styled = require("./styled");
 
 var _browser = require("../browser");
 
@@ -155,7 +155,8 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
             lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
             lastViewedDate = _items$selectedIndex.lastViewedDate;
         var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
-        return "".concat(name, ", ").concat(container, ", ").concat(date === null || date === void 0 ? void 0 : date.pageAction, " ").concat(date === null || date === void 0 ? void 0 : date.dateString, " ").concat((date === null || date === void 0 ? void 0 : date.timeSince) || '');
+        var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUrlPopulatedWithSelectedItem", function () {
@@ -468,27 +469,29 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
       var screenReaderText = _browser.browser.safari && this.getScreenReaderText();
-      var searchIcon = activePlugin && (0, _core.jsx)(_styles.SearchIconWrapper, {
+      var searchIcon = activePlugin && (0, _react2.jsx)("span", {
+        css: _styled.searchIconStyles,
         "data-testid": "link-picker-search-icon"
-      }, (0, _core.jsx)(_search.default, {
+      }, (0, _react2.jsx)(_search.default, {
         size: "medium",
         label: ''
       }));
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         "data-testid": "link-picker",
         className: "recent-list",
-        css: _styles.recentListStyles
-      }, (0, _core.jsx)(_styles.Container, {
-        innerRef: this.wrapperRef
-      }, screenReaderText && (0, _core.jsx)(_announcer.default, {
+        css: _styled.recentListStyles
+      }, (0, _react2.jsx)("div", {
+        css: _styled.containerStyles,
+        ref: this.wrapperRef
+      }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
         delay: 250
-      }), (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
+      }), (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
         "aria-hidden": "true",
         id: screenReaderDescriptionId
-      }, formatMessage(_messages.messages.searchLinkAriaDescription))), (0, _core.jsx)(_PanelTextInput.default, {
+      }, formatMessage(_messages.messages.searchLinkAriaDescription))), (0, _react2.jsx)(_textInput.default, {
         name: "link",
         testId: "link-url",
         role: "combobox",
@@ -509,7 +512,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         "aria-activedescendant": ariaActiveDescendant,
         "aria-describedby": screenReaderDescriptionId,
         "aria-expanded": true
-      }), (0, _core.jsx)(_PanelTextInput.default, {
+      }), (0, _react2.jsx)(_textInput.default, {
         name: "link-text",
         testId: "link-text",
         autoComplete: "off",
@@ -522,17 +525,17 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onChange: this.updateTextInput,
         onClear: this.handleClearDisplayText,
         clearLabel: formatMessage(_messages.messages.clearText)
-      }), !!items.length && (0, _core.jsx)("div", {
-        css: _styles.ListTitleStyles,
+      }), !!items.length && (0, _react2.jsx)("div", {
+        css: _styled.listTitleStyles,
         id: "link-picker-list-title",
         "data-testid": "link-picker-list-title"
-      }, formatMessage(this.state.url ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed)), (0, _core.jsx)(_visuallyHidden.default, null, (0, _core.jsx)("span", {
+      }, formatMessage(this.state.url ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed)), (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
         "aria-live": "polite",
         "aria-atomic": "true",
         id: "fabric.smartcard.linkpicker.suggested.results"
       }, url && formatMessage(_messages.messages.searchLinkResults, {
         count: items.length
-      }))), (0, _core.jsx)(_LinkSearchList.default, {
+      }))), (0, _react2.jsx)(_linkSearchList.default, {
         ariaLabelledBy: "link-picker-list-title",
         ariaControls: "fabric.smartcard.linkpicker.suggested.results",
         id: linkSearchListId,
@@ -544,13 +547,13 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
         onSelect: this.handleSelected,
         onMouseEnter: this.handleMouseEnterResultItem,
         onMouseLeave: this.handleMouseLeaveResultItem
-      }), (0, _core.jsx)(_form.FormFooter, {
+      }), (0, _react2.jsx)(_form.FormFooter, {
         align: "end"
-      }, (0, _core.jsx)(_button.ButtonGroup, null, (0, _core.jsx)(_button.default, {
+      }, (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
         appearance: "default",
         onClick: this.handleCancel,
         testId: "link-picker-cancel-button"
-      }, formatMessage(_messages.messages.cancelButton)), (0, _core.jsx)(_button.default, {
+      }, formatMessage(_messages.messages.cancelButton)), (0, _react2.jsx)(_button.default, {
         type: "submit",
         appearance: "primary",
         onClick: this.handleSubmit,

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

@@ -2,12 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.List = void 0;
+exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -19,34 +17,20 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _LinkSearchListItem = _interopRequireDefault(require("./LinkSearchListItem"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _listItem = _interopRequireDefault(require("../list-item"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _styled = require("./styled");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 
-var ListContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
-
-var SpinnerContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
-
-var List = _styledComponents.default.ul(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  list-style: none;\n"])));
-
-exports.List = List;
-
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(LinkSearchList, _PureComponent);
 
@@ -76,13 +60,15 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var loadingContent;
 
       if (items && items.length > 0) {
-        itemsContent = /*#__PURE__*/_react.default.createElement(List, {
+        itemsContent = (0, _react2.jsx)("ul", {
+          "data-testid": "link-search-list",
+          css: _styled.listStyles,
           id: id,
           role: role,
           "aria-controls": ariaControls,
           "aria-labelledby": ariaLabelledBy
         }, items.map(function (item, index) {
-          return /*#__PURE__*/_react.default.createElement(_LinkSearchListItem.default, {
+          return (0, _react2.jsx)(_listItem.default, {
             id: "link-search-list-item-".concat(index),
             role: role && 'option',
             item: item,
@@ -97,13 +83,17 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (isLoading) {
-        loadingContent = /*#__PURE__*/_react.default.createElement(SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+        loadingContent = (0, _react2.jsx)("div", {
+          css: _styled.spinnerContainerStyles
+        }, (0, _react2.jsx)(_spinner.default, {
           testId: "link-picker.results-loading-indicator",
           size: "medium"
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement(ListContainer, null, itemsContent, loadingContent);
+      return (0, _react2.jsx)("div", {
+        css: _styled.listContainerStyles
+      }, itemsContent, loadingContent);
     }
   }]);
   return LinkSearchList;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spinnerContainerStyles = exports.listStyles = exports.listContainerStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
+exports.listContainerStyles = listContainerStyles;
+var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+exports.spinnerContainerStyles = spinnerContainerStyles;
+var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  list-style: none;\n"])));
+exports.listStyles = listStyles;

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

@@ -7,13 +7,13 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _transformTimeStamp = require("../transformTimeStamp");
+var _transformTimeStamp = require("../../transformTimeStamp");
 
-var _styles = require("../styles");
+var _styled = require("./styled");
 
 /** @jsx jsx */
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
@@ -39,39 +39,37 @@ var LinkSearchListItem = function LinkSearchListItem(_ref) {
     return onMouseLeave(item.objectId);
   };
 
-  return (0, _core.jsx)(_styles.ListItemWrapper, {
+  var container = item.container || null;
+  var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
+  return (0, _react2.jsx)("div", {
+    css: (0, _styled.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
-  }, (0, _core.jsx)(ListItemIcon, {
+  }, (0, _react2.jsx)(ListItemIcon, {
     item: item,
     intl: intl
-  }), (0, _core.jsx)(_styles.ItemNameWrapper, null, (0, _core.jsx)(_styles.ListItemName, null, item.name), (0, _core.jsx)(_styles.ListItemContext, null, item.container, (0, _core.jsx)(ItemTimeStamp, {
-    date: (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate)
-  }))));
+  }), (0, _react2.jsx)("div", {
+    css: _styled.itemNameStyles
+  }, (0, _react2.jsx)("div", {
+    "data-testid": "link-search-list-item-title",
+    css: _styled.listItemNameStyles
+  }, item.name), (0, _react2.jsx)("div", {
+    "data-testid": "link-search-list-item-subtitle",
+    css: _styled.listItemContextStyles
+  }, container, container && date && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), date && (0, _react2.jsx)(_react.Fragment, null, formatDate(date)))));
 };
 
 var _default = (0, _reactIntlNext.injectIntl)(LinkSearchListItem);
 
 exports.default = _default;
 
-var ItemTimeStamp = function ItemTimeStamp(props) {
-  var date = props.date;
-
-  if (!date) {
-    return null;
-  }
-
-  return (0, _core.jsx)(_react.Fragment, null, "\xA0 \u2022", (0, _core.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) {
@@ -88,14 +86,18 @@ var ListItemIcon = function ListItemIcon(props) {
 
   if (typeof icon !== 'string') {
     var Glyph = icon;
-    return (0, _core.jsx)(_styles.ItemIconWrapper, null, (0, _core.jsx)(Glyph, {
+    return (0, _react2.jsx)("span", {
+      css: _styled.itemIconStyles
+    }, (0, _react2.jsx)(Glyph, {
       alt: alt
     }));
   }
 
-  return (0, _core.jsx)(_styles.ItemIconWrapper, null, (0, _core.jsx)("img", {
+  return (0, _react2.jsx)("span", {
+    css: _styled.itemIconStyles
+  }, (0, _react2.jsx)("img", {
     src: icon,
     alt: alt,
-    css: _styles.ImgStyles
+    css: _styled.imgStyles
   }));
 };

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.relativeFontSizeToBase16 = exports.listItemNameStyles = exports.listItemContextStyles = exports.itemNameStyles = exports.itemIconStyles = exports.imgStyles = exports.composeListItemStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _theme = require("@atlaskit/theme");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+
+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");
+};
+
+exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
+var listItemBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px ", "px;\n  margin: 0 -", "px;\n  cursor: pointer;\n"])), (0, _constants.gridSize)(), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 2);
+var listItemBoxShadow = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), (0, _tokens.token)('color.border.selected', _colors.B400));
+var listItemActive = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20));
+var listItemSelected = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), (0, _tokens.token)('color.background.selected', _colors.B50));
+
+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 (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  "])), listItemBaseStyles, active && listItemActive, selected && listItemSelected, hasShadow && listItemBoxShadow);
+};
+
+exports.composeListItemStyles = composeListItemStyles;
+var itemNameStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
+exports.itemNameStyles = itemNameStyles;
+var listItemNameStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (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.listItemNameStyles = listItemNameStyles;
+var listItemContextStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: ", ";\n  line-height: ", "px;\n"])), (0, _tokens.token)('color.text', _colors.N300), relativeFontSizeToBase16((0, _theme.fontSizeSmall)()), (0, _theme.fontSize)());
+exports.listItemContextStyles = listItemContextStyles;
+var itemIconStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n  margin-top: 3px;\n  margin-right: 12px;\n"])), (0, _constants.gridSize)() * 2);
+exports.itemIconStyles = itemIconStyles;
+var imgStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+exports.imgStyles = imgStyles;

package/dist/cjs/ui/styled.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.searchIconStyles = exports.recentListStyles = exports.listTitleStyles = exports.containerStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _theme = require("@atlaskit/theme");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var LINK_PICKER_WIDTH_IN_PX = 342;
+var recentListStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), LINK_PICKER_WIDTH_IN_PX);
+exports.recentListStyles = recentListStyles;
+var containerStyles = (0, _react.css)(_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.containerStyles = containerStyles;
+var searchIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (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.searchIconStyles = searchIconStyles;
+var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-bottom: ", "px;\n"])), _theme.typography.h100(), (0, _constants.gridSize)() / 2);
+exports.listTitleStyles = listTitleStyles;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _form = require("@atlaskit/form");
 
@@ -23,16 +23,12 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
 var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-clear"));
 
-var _styles = require("../styles");
+var _utils = require("../../utils");
 
-var _utils = require("../utils");
+var _styled = require("./styled");
 
 var _excluded = ["name", "label", "autoFocus", "onSubmit", "onRedo", "onUndo", "onChange", "onKeyDown", "onClear", "clearLabel", "error"];
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var PanelTextInput = function PanelTextInput(props) {
   var name = props.name,
       label = props.label,
@@ -87,29 +83,30 @@ var PanelTextInput = function PanelTextInput(props) {
       onClear();
     }
   }, [onClear]);
-
-  var clearText = restProps.value !== '' && /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  var clearText = restProps.value !== '' && (0, _react2.jsx)(_tooltip.default, {
     content: clearLabel
-  }, /*#__PURE__*/_react.default.createElement(_styles.ClearText, {
+  }, (0, _react2.jsx)("button", {
+    css: _styled.clearTextButtonStyles,
     onClick: handleClear,
     "data-testid": "clear-text"
-  }, /*#__PURE__*/_react.default.createElement(_selectClear.default, {
+  }, (0, _react2.jsx)(_selectClear.default, {
     size: "medium",
     label: clearLabel || ''
   })));
-
-  return /*#__PURE__*/_react.default.createElement(_styles.FieldWrapper, null, /*#__PURE__*/_react.default.createElement(_form.Field, {
+  return (0, _react2.jsx)("div", {
+    css: _styled.fieldStyles
+  }, (0, _react2.jsx)(_form.Field, {
     label: label,
     name: name
   }, function (_ref) {
     var fieldProps = _ref.fieldProps;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, restProps, {
       onKeyDown: handleKeydown,
       onChange: handleChange,
       ref: handleRef,
       elemAfterInput: clearText,
       isInvalid: !!error
-    })), error && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, {
+    })), error && (0, _react2.jsx)(_form.ErrorMessage, {
       testId: "link-error"
     }, error));
   }));

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

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fieldStyles = exports.clearTextButtonStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _tokens = require("@atlaskit/tokens");
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2;
+
+var clearTextButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (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.clearTextButtonStyles = clearTextButtonStyles;
+var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n"])), (0, _constants.gridSize)() * 2);
+exports.fieldStyles = fieldStyles;

package/dist/cjs/utils.js

@@ -3,23 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relativeFontSizeToBase16 = exports.isUndoEvent = exports.isRedoEvent = void 0;
+exports.isUndoEvent = exports.isRedoEvent = void 0;
 
 var _browser = require("./browser");
 
-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");
-};
-
-exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
 var KeyZCode = 90;
 var KeyYCode = 89;
 

package/dist/cjs/version.json

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

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

@@ -2,13 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React, { PureComponent } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../messages';
-import PanelTextInput from './PanelTextInput';
-import LinkSearchList from './LinkSearchList';
+import PanelTextInput from './text-input';
+import LinkSearchList from './link-search-list';
 import { normalizeUrl, isSafeUrl } from '../url';
-import { recentListStyles, Container, SearchIconWrapper, ListTitleStyles } from '../styles';
+import { recentListStyles, containerStyles, searchIconStyles, listTitleStyles } from './styled';
 import { browser } from '../browser';
 import { transformTimeStamp } from '../transformTimeStamp';
 import Announcer from './announcer';
@@ -84,7 +84,8 @@ class LinkPicker extends PureComponent {
           lastViewedDate
         } = items[selectedIndex];
         const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-        return `${name}, ${container}, ${date === null || date === void 0 ? void 0 : date.pageAction} ${date === null || date === void 0 ? void 0 : date.dateString} ${(date === null || date === void 0 ? void 0 : date.timeSince) || ''}`;
+        const formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
+        return [name, container, formattedDate].filter(Boolean).join(', ');
       }
     });
 
@@ -369,7 +370,8 @@ class LinkPicker extends PureComponent {
     // for details: https://a11y-internal.atlassian.net/browse/AK-740
 
     const screenReaderText = browser.safari && this.getScreenReaderText();
-    const searchIcon = activePlugin && jsx(SearchIconWrapper, {
+    const searchIcon = activePlugin && jsx("span", {
+      css: searchIconStyles,
       "data-testid": "link-picker-search-icon"
     }, jsx(EditorSearchIcon, {
       size: "medium",
@@ -379,8 +381,9 @@ class LinkPicker extends PureComponent {
       "data-testid": "link-picker",
       className: "recent-list",
       css: recentListStyles
-    }, jsx(Container, {
-      innerRef: this.wrapperRef
+    }, jsx("div", {
+      css: containerStyles,
+      ref: this.wrapperRef
     }, screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
@@ -424,7 +427,7 @@ class LinkPicker extends PureComponent {
       onClear: this.handleClearDisplayText,
       clearLabel: formatMessage(messages.clearText)
     }), !!items.length && jsx("div", {
-      css: ListTitleStyles,
+      css: listTitleStyles,
       id: "link-picker-list-title",
       "data-testid": "link-picker-list-title"
     }, formatMessage(this.state.url ? messages.titleResults : messages.titleRecentlyViewed)), jsx(VisuallyHidden, null, jsx("span", {