@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/cjs/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -9,17 +9,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -37,12 +37,28 @@ var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container
 
 var _useSelectAndFocusOnArrowNavigation = _interopRequireDefault(require("../hooks/use-select-and-focus-on-arrow-navigation"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 
 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 wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
+var baseBrowserContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
+var mobileElementBrowserContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
+var elementBrowserContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
+var baseSidebarStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
+var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: 12px 12px 0 12px;\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT);
+var mobileSideBarShowCategories = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+var sideBar = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
+var sideBarShowCategories = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, _constants.SIDEBAR_WIDTH);
+var sidebarHeading = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), _constants.SIDEBAR_HEADING_WRAPPER_HEIGHT, _constants.SIDEBAR_HEADING_PADDING_LEFT);
+var mobileMainContent = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
+var mainContent = (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, _constants.GRID_SIZE * 2);
+var searchContainer = (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: ", "px;\n"])), _constants.GRID_SIZE * 2);
+var mobileCategoryListWrapper = (0, _react2.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), _constants.GRID_SIZE, _constants.GRID_SIZE * 2, _constants.GRID_SIZE * 4);
+var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, _constants.GRID_SIZE * 3);
+
 function StatelessElementBrowser(props) {
   var items = props.items,
       onSelectItem = props.onSelectItem;
@@ -110,9 +126,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
-  return /*#__PURE__*/_react.default.createElement(Wrapper, {
+  return (0, _react2.jsx)("div", {
+    css: wrapper,
     "data-testid": "element-browser"
-  }, /*#__PURE__*/_react.default.createElement(ContainerWidthMonitor, null), containerWidth < _constants.DEVICE_BREAKPOINT_NUMBERS.medium ? /*#__PURE__*/_react.default.createElement(MobileBrowser, (0, _extends2.default)({}, props, {
+  }, (0, _react2.jsx)(ContainerWidthMonitor, null), containerWidth < _constants.DEVICE_BREAKPOINT_NUMBERS.medium ? (0, _react2.jsx)(MobileBrowser, (0, _extends2.default)({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -121,7 +138,7 @@ function StatelessElementBrowser(props) {
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterKeyPress,
     onKeyDown: onKeyDown
-  })) : /*#__PURE__*/_react.default.createElement(DesktopBrowser, (0, _extends2.default)({}, props, {
+  })) : (0, _react2.jsx)(DesktopBrowser, (0, _extends2.default)({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -133,10 +150,6 @@ function StatelessElementBrowser(props) {
   })));
 }
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
-
-Wrapper.displayName = 'Wrapper';
-
 function MobileBrowser(_ref) {
   var showCategories = _ref.showCategories,
       showSearch = _ref.showSearch,
@@ -158,25 +171,29 @@ function MobileBrowser(_ref) {
       searchTerm = _ref.searchTerm,
       createAnalyticsEvent = _ref.createAnalyticsEvent,
       emptyStateHandler = _ref.emptyStateHandler;
-  return /*#__PURE__*/_react.default.createElement(MobileElementBrowserContainer, {
+  return (0, _react2.jsx)("div", {
+    css: mobileElementBrowserContainer,
     onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
-  }, /*#__PURE__*/_react.default.createElement(MobileSideBar, {
-    showCategories: showCategories
-  }, showSearch && /*#__PURE__*/_react.default.createElement(_ElementSearch.default, {
+  }, (0, _react2.jsx)("div", {
+    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
+  }, showSearch && (0, _react2.jsx)(_ElementSearch.default, {
     onSearch: onSearch,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  }), showCategories && /*#__PURE__*/_react.default.createElement(MobileCategoryListWrapper, {
+  }), showCategories && (0, _react2.jsx)("nav", {
+    css: mobileCategoryListWrapper,
     tabIndex: -1
-  }, /*#__PURE__*/_react.default.createElement(_CategoryList.default, {
+  }, (0, _react2.jsx)(_CategoryList.default, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory
-  }))), /*#__PURE__*/_react.default.createElement(MobileMainContent, null, /*#__PURE__*/_react.default.createElement(_ElementList.default, {
+  }))), (0, _react2.jsx)("div", {
+    css: mobileMainContent
+  }, (0, _react2.jsx)(_ElementList.default, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -212,29 +229,39 @@ function DesktopBrowser(_ref2) {
       searchTerm = _ref2.searchTerm,
       createAnalyticsEvent = _ref2.createAnalyticsEvent,
       emptyStateHandler = _ref2.emptyStateHandler;
-  return /*#__PURE__*/_react.default.createElement(ElementBrowserContainer, {
+  return (0, _react2.jsx)("div", {
+    css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
-  }, showCategories && /*#__PURE__*/_react.default.createElement(SideBar, {
-    showCategories: true
-  }, /*#__PURE__*/_react.default.createElement(SidebarHeading, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
+  }, showCategories && (0, _react2.jsx)("div", {
+    css: showCategories ? sideBarShowCategories : sideBar
+  }, (0, _react2.jsx)("h2", {
+    css: sidebarHeading,
+    "data-testid": "sidebar-heading"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
-  })), /*#__PURE__*/_react.default.createElement(CategoryListWrapper, null, /*#__PURE__*/_react.default.createElement(_CategoryList.default, {
+  })), (0, _react2.jsx)("nav", {
+    css: categoryListWrapper
+  }, (0, _react2.jsx)(_CategoryList.default, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
     createAnalyticsEvent: createAnalyticsEvent
-  }))), /*#__PURE__*/_react.default.createElement(MainContent, {
+  }))), (0, _react2.jsx)("div", {
+    css: mainContent,
     onKeyPress: onKeyPress,
-    onKeyDown: onKeyDown
-  }, showSearch && /*#__PURE__*/_react.default.createElement(SearchContainer, null, /*#__PURE__*/_react.default.createElement(_ElementSearch.default, {
+    onKeyDown: onKeyDown,
+    "data-testid": "main-content"
+  }, showSearch && (0, _react2.jsx)("div", {
+    css: searchContainer
+  }, (0, _react2.jsx)(_ElementSearch.default, {
     onSearch: onSearch,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  })), /*#__PURE__*/_react.default.createElement(_ElementList.default, {
+  })), (0, _react2.jsx)(_ElementList.default, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -249,46 +276,6 @@ function DesktopBrowser(_ref2) {
   })));
 }
 
-var baseBrowserContainerStyles = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n  min-height: -webkit-fill-available;\n"])));
-
-var MobileElementBrowserContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
-
-MobileElementBrowserContainer.displayName = 'MobileElementBrowserContainer';
-
-var ElementBrowserContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
-
-var baseSidebarStyles = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-
-var MobileSideBar = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0\n    ", ";\n  padding: 12px 12px 0 12px;\n"])), baseSidebarStyles, function (_ref3) {
-  var showCategories = _ref3.showCategories;
-  return showCategories ? 'auto' : _constants.INLINE_SIDEBAR_HEIGHT;
-});
-
-var SideBar = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0\n    ", ";\n"])), baseSidebarStyles, function (_ref4) {
-  var showCategories = _ref4.showCategories;
-  return showCategories ? _constants.SIDEBAR_WIDTH : 'auto';
-});
-
-var SidebarHeading = _styledComponents.default.h2(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), _constants.SIDEBAR_HEADING_WRAPPER_HEIGHT, _constants.SIDEBAR_HEADING_PADDING_LEFT);
-/**
- *  In enzyme styled components show up as styled.element
- *  and if we don't wanna export SidebarHeading just for testing.
- *  https://github.com/styled-components/styled-components/issues/896
- */
-
-
-SidebarHeading.displayName = 'SidebarHeading';
-
-var MobileMainContent = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
-
-var MainContent = (0, _styledComponents.default)(MobileMainContent)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), _constants.GRID_SIZE * 2);
-MainContent.displayName = 'MainContent';
-
-var SearchContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: ", "px;\n"])), _constants.GRID_SIZE * 2);
-
-var MobileCategoryListWrapper = _styledComponents.default.nav(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), _constants.GRID_SIZE, _constants.GRID_SIZE * 2, _constants.GRID_SIZE * 4);
-
-var CategoryListWrapper = (0, _styledComponents.default)(MobileCategoryListWrapper)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), _constants.GRID_SIZE * 3);
 var MemoizedElementBrowser = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
   source: 'ElementBrowser'
 })((0, _analyticsNext.withAnalyticsEvents)()(StatelessElementBrowser)));

package/dist/cjs/ui/ElementBrowser/hooks/use-container-width.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = useContainerWidth;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _widthDetector = require("@atlaskit/width-detector");
 
@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 widthObserverWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+
 function useContainerWidth() {
   var _useState = (0, _react.useState)(0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -40,10 +42,11 @@ function useContainerWidth() {
     }
   }, [ref]);
   var ContainerWidthMonitor = /*#__PURE__*/(0, _react.memo)(function () {
-    return /*#__PURE__*/_react.default.createElement(WidthObserverWrapper, {
-      innerRef: ref,
+    return (0, _react2.jsx)("div", {
+      css: widthObserverWrapper,
+      ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
+    }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
       setWidth: setContainerWidth
     }));
   });
@@ -51,8 +54,4 @@ function useContainerWidth() {
     containerWidth: containerWidth,
     ContainerWidthMonitor: ContainerWidthMonitor
   };
-}
-
-var WidthObserverWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
-
-WidthObserverWrapper.displayName = 'WidthObserverWrapper';
+}

package/dist/cjs/ui/FloatingToolbar/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
 });
@@ -37,7 +35,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
@@ -45,10 +45,6 @@ var _styles = require("./styles");
 
 var _utils = require("./utils");
 
-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; }
-
 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; } }
@@ -67,7 +63,6 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          containerRef = _this$props.containerRef,
           children = _this$props.children,
           target = _this$props.target,
           offset = _this$props.offset,
@@ -86,7 +81,7 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      return (0, _react.jsx)(_ui.Popup, {
         alignX: alignX,
         alignY: alignY,
         target: target,
@@ -97,14 +92,14 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         fitHeight: fitHeight,
         onPositionCalculated: onPositionCalculated
-      }, /*#__PURE__*/_react.default.createElement(_styles.Container, {
-        height: fitHeight,
-        className: className,
-        innerRef: containerRef
+      }, (0, _react.jsx)("div", {
+        css: (0, _styles.container)(fitHeight),
+        "data-testid": "popup-container",
+        className: className
       }, children));
     }
   }]);
   return FloatingToolbar;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = FloatingToolbar;

package/dist/cjs/ui/FloatingToolbar/styles.js

@@ -2,16 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -21,13 +19,8 @@ var _styles = require("../styles");
 
 var _templateObject, _templateObject2;
 
-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 Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  ", " display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), _styles.dropShadow, _colors.N0, function (_ref) {
-  var height = _ref.height;
-  return height ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          height: ", "px;\n        "])), height) : '';
-});
+var container = function container(height) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), (0, _constants.borderRadius)(), _styles.dropShadow, _colors.N0, height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
+};
 
-exports.Container = Container;
+exports.container = container;

package/dist/cjs/ui/LinkSearch/LinkSearchList.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.linkSearchList = exports.default = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -21,31 +19,24 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _react2 = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
 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); }
-
-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; }
-
 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 listContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
+var spinnerContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+var linkSearchList = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  list-style: none;\n"])));
+exports.linkSearchList = linkSearchList;
 
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(LinkSearchList, _PureComponent);
@@ -75,12 +66,13 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var loadingContent;
 
       if (items && items.length > 0) {
-        itemsContent = /*#__PURE__*/_react.default.createElement(List, {
+        itemsContent = (0, _react.jsx)("ul", {
+          css: linkSearchList,
           id: id,
           role: role,
           "aria-controls": ariaControls
         }, items.map(function (item, index) {
-          return /*#__PURE__*/_react.default.createElement(_LinkSearchListItem.default, {
+          return (0, _react.jsx)(_LinkSearchListItem.default, {
             id: "link-search-list-item-".concat(index),
             role: role && 'option',
             item: item,
@@ -95,15 +87,19 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (isLoading) {
-        loadingContent = /*#__PURE__*/_react.default.createElement(SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+        loadingContent = (0, _react.jsx)("div", {
+          css: spinnerContainer
+        }, (0, _react.jsx)(_spinner.default, {
           size: "medium"
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement(ListContainer, null, itemsContent, loadingContent);
+      return (0, _react.jsx)("div", {
+        css: listContainer
+      }, itemsContent, loadingContent);
     }
   }]);
   return LinkSearchList;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = LinkSearchList;

package/dist/cjs/ui/LinkSearch/LinkSearchListItem.js

@@ -2,10 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Name = exports.ContainerName = exports.Container = void 0;
+exports.nameStyle = exports.default = exports.containerSelected = exports.containerName = exports.container = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,9 +25,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _theme = require("@atlaskit/theme");
 
@@ -39,29 +41,26 @@ var _transformTimeStamp = require("./transformTimeStamp");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var Container = _styledComponents.default.li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])), function (props) {
-  return props.selected ? _colors.N20 : 'transparent';
-});
+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); }
 
-exports.Container = Container;
+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 NameWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
-
-var Name = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), _colors.N800);
-
-exports.Name = Name;
-
-var ContainerName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N300, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+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); }; }
 
-exports.ContainerName = ContainerName;
+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 Icon = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
+var container = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
+exports.container = container;
+var containerSelected = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _colors.N20);
+exports.containerSelected = containerSelected;
+var nameWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
+var nameStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), _colors.N800);
+exports.nameStyle = nameStyle;
+var containerName = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N300, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+exports.containerName = containerName;
+var iconStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
 
 var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(LinkSearchListItem, _React$PureComponent);
@@ -117,11 +116,15 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           intl = _this$props5.intl;
 
       if (icon) {
-        return /*#__PURE__*/_react.default.createElement(Icon, null, icon);
+        return (0, _react2.jsx)("span", {
+          css: iconStyle
+        }, icon);
       }
 
       if (iconUrl) {
-        return /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement("img", {
+        return (0, _react2.jsx)("span", {
+          css: iconStyle
+        }, (0, _react2.jsx)("img", {
           src: iconUrl,
           alt: (0, _listItemAlts.getCorrectAltByIconUrl)(iconUrl, intl)
         }));
@@ -136,7 +139,7 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           item = _this$props6.item,
           intl = _this$props6.intl;
       var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
-      return date && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0 \u2022", /*#__PURE__*/_react.default.createElement("span", {
+      return date && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022", (0, _react2.jsx)("span", {
         className: "link-search-timestamp",
         "data-test-id": "link-search-timestamp"
       }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -149,17 +152,24 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props7.selected,
           id = _this$props7.id,
           role = _this$props7.role;
-      return /*#__PURE__*/_react.default.createElement(Container, {
+      return (0, _react2.jsx)("li", {
+        css: [container, selected && containerSelected],
         role: role,
         id: id,
         "aria-selected": selected,
         "data-testid": "link-search-list-item",
-        selected: selected,
         onMouseMove: this.handleMouseMove,
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         onClick: this.handleSelect
-      }, this.renderIcon(), /*#__PURE__*/_react.default.createElement(NameWrapper, null, /*#__PURE__*/_react.default.createElement(Name, null, item.name), /*#__PURE__*/_react.default.createElement(ContainerName, null, item.container, this.renderTimeStamp())));
+      }, this.renderIcon(), (0, _react2.jsx)("span", {
+        css: nameWrapper
+      }, (0, _react2.jsx)("div", {
+        css: nameStyle
+      }, item.name), (0, _react2.jsx)("div", {
+        "data-testid": "link-search-list-item-container",
+        css: containerName
+      }, item.container, this.renderTimeStamp())));
     }
   }]);
   return LinkSearchListItem;