@atlaskit/link-picker 0.9.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/link-picker
 
+## 1.0.0
+
+### Major Changes
+
+- [`2e20b02bb2c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2e20b02bb2c) - Initial major version release
+
+## 0.11.0
+
+### Minor Changes
+
+- [`a2286b0746a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a2286b0746a) - Added support for link picker plugins to resolve using a promise
+
+## 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

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");
 
@@ -357,7 +357,7 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
     key: "updateResults",
     value: function () {
       var _updateResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var queryVersion, activePlugin, updates, _yield$updates$next, done, value;
+        var queryVersion, activePlugin, updates, done, value, _result$done, result;
 
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) {
@@ -385,59 +385,78 @@ var LinkPicker = /*#__PURE__*/function (_PureComponent) {
 
               case 7:
                 if (!(queryVersion === this.queryVersion)) {
-                  _context2.next = 20;
+                  _context2.next = 29;
                   break;
                 }
 
-                _context2.next = 10;
+                done = false;
+                value = void 0;
+
+                if (!(updates instanceof Promise)) {
+                  _context2.next = 17;
+                  break;
+                }
+
+                done = true;
+                _context2.next = 14;
+                return updates;
+
+              case 14:
+                value = _context2.sent;
+                _context2.next = 22;
+                break;
+
+              case 17:
+                _context2.next = 19;
                 return updates.next();
 
-              case 10:
-                _yield$updates$next = _context2.sent;
-                done = _yield$updates$next.done;
-                value = _yield$updates$next.value;
+              case 19:
+                result = _context2.sent;
+                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
+                value = result.value;
 
+              case 22:
                 if (!(queryVersion !== this.queryVersion)) {
-                  _context2.next = 15;
+                  _context2.next = 24;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 15:
+              case 24:
                 this.setState({
-                  items: limit(value),
+                  items: limit(value.data),
                   isLoading: !done
                 });
 
                 if (!done) {
-                  _context2.next = 18;
+                  _context2.next = 27;
                   break;
                 }
 
                 return _context2.abrupt("return");
 
-              case 18:
+              case 27:
                 _context2.next = 7;
                 break;
 
-              case 20:
-                _context2.next = 25;
+              case 29:
+                _context2.next = 34;
                 break;
 
-              case 22:
-                _context2.prev = 22;
+              case 31:
+                _context2.prev = 31;
                 _context2.t0 = _context2["catch"](6);
                 this.setState({
                   isLoading: false
                 });
 
-              case 25:
+              case 34:
               case "end":
                 return _context2.stop();
             }
           }
-        }, _callee2, this, [[6, 22]]);
+        }, _callee2, this, [[6, 31]]);
       }));
 
       function updateResults() {
@@ -469,27 +488,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",
@@ -510,7 +531,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",
@@ -523,17 +544,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,
@@ -545,13 +566,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)(_react.Fragment, null, item.container, "\xA0 \u2022"), (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, (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;