@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { memo, useState, useCallback, useEffect } from 'react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
-import styled, { css } from 'styled-components';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from '../../../plugins/analytics';
 import ElementList from './ElementList/ElementList';
@@ -10,6 +12,101 @@ import ElementSearch from './ElementSearch';
 import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_PADDING_LEFT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
 import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
+const wrapper = css`
+  width: 100%;
+  max-height: inherit;
+  overflow: hidden;
+`;
+const baseBrowserContainerStyles = css`
+  display: flex;
+  height: 100%;
+  /** Needed for Safari to work with current css.
+  * 100% heights wont work and
+  * will default to auto if one of the containers doesn't have a specified height in pixels.
+  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
+  */
+
+  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
+
+  /* stylelint-disable-next-line */
+  min-height: -webkit-fill-available;
+`;
+const mobileElementBrowserContainer = css`
+  ${baseBrowserContainerStyles};
+  flex-direction: column;
+`;
+const elementBrowserContainer = css`
+  ${baseBrowserContainerStyles};
+  flex-direction: row;
+`;
+const baseSidebarStyles = css`
+  display: flex;
+  flex-direction: column;
+
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+const mobileSideBar = css`
+  ${baseSidebarStyles};
+  flex: 0 0 ${INLINE_SIDEBAR_HEIGHT};
+  padding: 12px 12px 0 12px;
+`;
+const mobileSideBarShowCategories = css`
+  flex: 0 0 auto;
+`;
+const sideBar = css`
+  ${baseSidebarStyles};
+  flex: 0 0 'auto';
+`;
+const sideBarShowCategories = css`
+  ${baseSidebarStyles};
+  flex: 0 0 ${SIDEBAR_WIDTH};
+`;
+const sidebarHeading = css`
+  flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
+  display: inline-flex;
+  align-items: center;
+  padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
+  font-weight: 700;
+`;
+const mobileMainContent = css`
+  flex: 1 1 auto;
+
+  display: flex;
+  flex-direction: column;
+
+  overflow-y: auto;
+  height: 100%;
+`;
+const mainContent = css`
+  ${mobileMainContent}
+  margin-left: ${GRID_SIZE * 2}px;
+  // Needed for safari
+  height: auto;
+`;
+const searchContainer = css`
+  padding-bottom: ${GRID_SIZE * 2}px;
+`;
+const mobileCategoryListWrapper = css`
+  display: flex;
+  overflow-x: auto;
+
+  padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
+  min-height: ${GRID_SIZE * 4}px;
+
+  overflow: -moz-scrollbars-none;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+`;
+const categoryListWrapper = css`
+  ${mobileCategoryListWrapper}
+  padding: 0;
+  margin-top: ${GRID_SIZE * 3}px;
+  flex-direction: column;
+`;
 
 function StatelessElementBrowser(props) {
   const {
@@ -75,9 +172,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return jsx("div", {
+    css: wrapper,
     "data-testid": "element-browser"
-  }, /*#__PURE__*/React.createElement(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? /*#__PURE__*/React.createElement(MobileBrowser, _extends({}, props, {
+  }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -86,7 +184,7 @@ function StatelessElementBrowser(props) {
     setFocusOnSearch: setFocusOnSearch,
     onKeyPress: onItemsEnterKeyPress,
     onKeyDown: onKeyDown
-  })) : /*#__PURE__*/React.createElement(DesktopBrowser, _extends({}, props, {
+  })) : jsx(DesktopBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -98,13 +196,6 @@ function StatelessElementBrowser(props) {
   })));
 }
 
-const Wrapper = styled.div`
-  width: 100%;
-  max-height: inherit;
-  overflow: hidden;
-`;
-Wrapper.displayName = 'Wrapper';
-
 function MobileBrowser({
   showCategories,
   showSearch,
@@ -127,25 +218,29 @@ function MobileBrowser({
   createAnalyticsEvent,
   emptyStateHandler
 }) {
-  return /*#__PURE__*/React.createElement(MobileElementBrowserContainer, {
+  return jsx("div", {
+    css: mobileElementBrowserContainer,
     onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
-  }, /*#__PURE__*/React.createElement(MobileSideBar, {
-    showCategories: showCategories
-  }, showSearch && /*#__PURE__*/React.createElement(ElementSearch, {
+  }, jsx("div", {
+    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
+  }, showSearch && jsx(ElementSearch, {
     onSearch: onSearch,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  }), showCategories && /*#__PURE__*/React.createElement(MobileCategoryListWrapper, {
+  }), showCategories && jsx("nav", {
+    css: mobileCategoryListWrapper,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(CategoryList, {
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory
-  }))), /*#__PURE__*/React.createElement(MobileMainContent, null, /*#__PURE__*/React.createElement(ElementList, {
+  }))), jsx("div", {
+    css: mobileMainContent
+  }, jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -182,29 +277,39 @@ function DesktopBrowser({
   createAnalyticsEvent,
   emptyStateHandler
 }) {
-  return /*#__PURE__*/React.createElement(ElementBrowserContainer, {
+  return jsx("div", {
+    css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
-  }, showCategories && /*#__PURE__*/React.createElement(SideBar, {
-    showCategories: true
-  }, /*#__PURE__*/React.createElement(SidebarHeading, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, showCategories && jsx("div", {
+    css: showCategories ? sideBarShowCategories : sideBar
+  }, jsx("h2", {
+    css: sidebarHeading,
+    "data-testid": "sidebar-heading"
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
-  })), /*#__PURE__*/React.createElement(CategoryListWrapper, null, /*#__PURE__*/React.createElement(CategoryList, {
+  })), jsx("nav", {
+    css: categoryListWrapper
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
     createAnalyticsEvent: createAnalyticsEvent
-  }))), /*#__PURE__*/React.createElement(MainContent, {
+  }))), jsx("div", {
+    css: mainContent,
     onKeyPress: onKeyPress,
-    onKeyDown: onKeyDown
-  }, showSearch && /*#__PURE__*/React.createElement(SearchContainer, null, /*#__PURE__*/React.createElement(ElementSearch, {
+    onKeyDown: onKeyDown,
+    "data-testid": "main-content"
+  }, showSearch && jsx("div", {
+    css: searchContainer
+  }, jsx(ElementSearch, {
     onSearch: onSearch,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  })), /*#__PURE__*/React.createElement(ElementList, {
+  })), jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -219,98 +324,6 @@ function DesktopBrowser({
   })));
 }
 
-const baseBrowserContainerStyles = css`
-  display: flex;
-  height: 100%;
-  /** Needed for Safari to work with current css.
-  * 100% heights wont work and
-  * will default to auto if one of the containers doesn't have a specified height in pixels.
-  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.
-  */
-  min-height: -webkit-fill-available;
-`;
-const MobileElementBrowserContainer = styled.div`
-  ${baseBrowserContainerStyles};
-  flex-direction: column;
-`;
-MobileElementBrowserContainer.displayName = 'MobileElementBrowserContainer';
-const ElementBrowserContainer = styled.div`
-  ${baseBrowserContainerStyles};
-  flex-direction: row;
-`;
-const baseSidebarStyles = css`
-  display: flex;
-  flex-direction: column;
-
-  overflow-x: auto;
-  overflow-y: hidden;
-`;
-const MobileSideBar = styled.div`
-  ${baseSidebarStyles};
-  flex: 0 0
-    ${({
-  showCategories
-}) => showCategories ? 'auto' : INLINE_SIDEBAR_HEIGHT};
-  padding: 12px 12px 0 12px;
-`;
-const SideBar = styled.div`
-  ${baseSidebarStyles};
-  flex: 0 0
-    ${({
-  showCategories
-}) => showCategories ? SIDEBAR_WIDTH : 'auto'};
-`;
-const SidebarHeading = styled.h2`
-  flex: 0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT};
-  display: inline-flex;
-  align-items: center;
-  padding-left: ${SIDEBAR_HEADING_PADDING_LEFT};
-  font-weight: 700;
-`;
-/**
- *  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';
-const MobileMainContent = styled.div`
-  flex: 1 1 auto;
-
-  display: flex;
-  flex-direction: column;
-
-  overflow-y: auto;
-  height: 100%;
-`;
-const MainContent = styled(MobileMainContent)`
-  margin-left: ${GRID_SIZE * 2}px;
-  // Needed for safari
-  height: auto;
-`;
-MainContent.displayName = 'MainContent';
-const SearchContainer = styled.div`
-  padding-bottom: ${GRID_SIZE * 2}px;
-`;
-const MobileCategoryListWrapper = styled.nav`
-  display: flex;
-  overflow-x: auto;
-
-  padding: ${GRID_SIZE}px 0 ${GRID_SIZE * 2}px 0;
-  min-height: ${GRID_SIZE * 4}px;
-
-  overflow: -moz-scrollbars-none;
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-`;
-const CategoryListWrapper = styled(MobileCategoryListWrapper)`
-  padding: 0;
-  margin-top: ${GRID_SIZE * 3}px;
-  flex-direction: column;
-`;
 const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
   source: 'ElementBrowser'
 })(withAnalyticsEvents()(StatelessElementBrowser)));

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { memo, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 /**
  *
@@ -27,6 +28,9 @@ import { WidthObserver } from '@atlaskit/width-detector';
  *
  */
 
+const widthObserverWrapper = css`
+  position: relative;
+`;
 export default function useContainerWidth() {
   const [containerWidth, setContainerWidth] = useState(0);
   const ref = useRef(null);
@@ -40,10 +44,11 @@ export default function useContainerWidth() {
     }
   }, [ref]);
   const ContainerWidthMonitor = /*#__PURE__*/memo(() => {
-    return /*#__PURE__*/React.createElement(WidthObserverWrapper, {
-      innerRef: ref,
+    return jsx("div", {
+      css: widthObserverWrapper,
+      ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: setContainerWidth
     }));
   });
@@ -51,8 +56,4 @@ export default function useContainerWidth() {
     containerWidth,
     ContainerWidthMonitor
   };
-}
-const WidthObserverWrapper = styled.div`
-  position: relative;
-`;
-WidthObserverWrapper.displayName = 'WidthObserverWrapper';
+}

package/dist/es2019/ui/FloatingToolbar/index.js

@@ -1,12 +1,12 @@
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { Container } from './styles';
+import { container } from './styles';
 export { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from './utils';
 export default class FloatingToolbar extends PureComponent {
   render() {
     const {
-      containerRef,
       children,
       target,
       offset,
@@ -25,7 +25,7 @@ export default class FloatingToolbar extends PureComponent {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       alignX: alignX,
       alignY: alignY,
       target: target,
@@ -36,10 +36,10 @@ export default class FloatingToolbar extends PureComponent {
       fitWidth: fitWidth,
       fitHeight: fitHeight,
       onPositionCalculated: onPositionCalculated
-    }, /*#__PURE__*/React.createElement(Container, {
-      height: fitHeight,
-      className: className,
-      innerRef: containerRef
+    }, jsx("div", {
+      css: container(fitHeight),
+      "data-testid": "popup-container",
+      className: className
     }, children));
   }
 

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

@@ -1,17 +1,16 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
 import { dropShadow } from '../styles';
-export const Container = styled.div`
+export const container = height => css`
   border-radius: ${borderRadius()}px;
-  ${dropShadow} display: flex;
+  ${dropShadow}
+  display: flex;
   align-items: center;
   box-sizing: border-box;
   padding: 4px 8px;
   background-color: ${N0};
-  ${({
-  height
-}) => height ? css`
-          height: ${height}px;
-        ` : ''};
+  ${height ? css`
+        height: ${height}px;
+      ` : ''};
 `;

package/dist/es2019/ui/LinkSearch/LinkSearchList.js

@@ -1,17 +1,17 @@
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
 import LinkSearchListItem from './LinkSearchListItem';
-const ListContainer = styled.div`
+const listContainer = css`
   padding-top: 0;
 `;
-const SpinnerContainer = styled.div`
+const spinnerContainer = css`
   text-align: center;
   min-height: 80px;
   margin-top: 30px;
 `;
-export const List = styled.ul`
+export const linkSearchList = css`
   padding: 0;
   list-style: none;
 `;
@@ -33,11 +33,12 @@ export default class LinkSearchList extends PureComponent {
     let loadingContent;
 
     if (items && items.length > 0) {
-      itemsContent = /*#__PURE__*/React.createElement(List, {
+      itemsContent = jsx("ul", {
+        css: linkSearchList,
         id: id,
         role: role,
         "aria-controls": ariaControls
-      }, items.map((item, index) => /*#__PURE__*/React.createElement(LinkSearchListItem, {
+      }, items.map((item, index) => jsx(LinkSearchListItem, {
         id: `link-search-list-item-${index}`,
         role: role && 'option',
         item: item,
@@ -51,12 +52,16 @@ export default class LinkSearchList extends PureComponent {
     }
 
     if (isLoading) {
-      loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+      loadingContent = jsx("div", {
+        css: spinnerContainer
+      }, jsx(Spinner, {
         size: "medium"
       }));
     }
 
-    return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+    return jsx("div", {
+      css: listContainer
+    }, itemsContent, loadingContent);
   }
 
 }

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
@@ -9,29 +11,32 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 import { injectIntl } from 'react-intl-next';
-export const Container = styled.li`
-  background-color: ${props => props.selected ? N20 : 'transparent'};
+export const container = css`
+  background-color: transparent;
   padding: 8px 12px;
   cursor: pointer;
   display: flex;
   margin-top: 0;
 `;
-const NameWrapper = styled.span`
+export const containerSelected = css`
+  background-color: ${N20};
+`;
+const nameWrapper = css`
   overflow: hidden;
 `;
-export const Name = styled.div`
+export const nameStyle = css`
   color: ${N800};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 20px;
 `;
-export const ContainerName = styled.div`
+export const containerName = css`
   color: ${N300};
   line-height: 14px;
   font-size: ${relativeFontSizeToBase16(fontSizeSmall())};
 `;
-const Icon = styled.span`
+const iconStyle = css`
   min-width: 16px;
   margin-top: 3px;
   margin-right: 12px;
@@ -90,11 +95,15 @@ class LinkSearchListItem extends React.PureComponent {
     } = this.props;
 
     if (icon) {
-      return /*#__PURE__*/React.createElement(Icon, null, icon);
+      return jsx("span", {
+        css: iconStyle
+      }, icon);
     }
 
     if (iconUrl) {
-      return /*#__PURE__*/React.createElement(Icon, null, /*#__PURE__*/React.createElement("img", {
+      return jsx("span", {
+        css: iconStyle
+      }, jsx("img", {
         src: iconUrl,
         alt: getCorrectAltByIconUrl(iconUrl, intl)
       }));
@@ -109,7 +118,7 @@ class LinkSearchListItem extends React.PureComponent {
       intl
     } = this.props;
     const date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
-    return date && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0 \u2022", /*#__PURE__*/React.createElement("span", {
+    return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
       className: "link-search-timestamp",
       "data-test-id": "link-search-timestamp"
     }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -122,17 +131,24 @@ class LinkSearchListItem extends React.PureComponent {
       id,
       role
     } = this.props;
-    return /*#__PURE__*/React.createElement(Container, {
+    return 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.createElement(NameWrapper, null, /*#__PURE__*/React.createElement(Name, null, item.name), /*#__PURE__*/React.createElement(ContainerName, null, item.container, this.renderTimeStamp())));
+    }, this.renderIcon(), jsx("span", {
+      css: nameWrapper
+    }, jsx("div", {
+      css: nameStyle
+    }, item.name), jsx("div", {
+      "data-testid": "link-search-list-item-container",
+      css: containerName
+    }, item.container, this.renderTimeStamp())));
   }
 
 }

package/dist/es2019/ui/LinkSearch/ToolbarComponents.js

@@ -1,27 +1,22 @@
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 export const RECENT_SEARCH_WIDTH_IN_PX = 420;
 export const RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export const RECENT_SEARCH_HEIGHT_IN_PX = 360;
-export const InputWrapper = `
+export const inputWrapper = css`
   display: flex;
   line-height: 0;
   padding: 5px 0;
   align-items: center;
 `;
-export const UrlInputWrapper = styled.div`
-  ${InputWrapper}
-`;
-export const Container = styled.div`
-  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
+export const container = css`
   display: flex;
   flex-direction: column;
   overflow: auto;
   padding: 0;
 
-  ${({
-  provider
-}) => css`
-      width: ${provider ? RECENT_SEARCH_WIDTH_IN_PX : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
-    `};
+  width: ${RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX}px;
   line-height: initial;
+`;
+export const containerWithProvider = css`
+  width: ${RECENT_SEARCH_WIDTH_IN_PX}px;
 `;

package/dist/es2019/ui/PanelTextInput/index.js

@@ -1,7 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 import { browser } from '@atlaskit/editor-common/utils';
 const KeyZCode = 90;
 const KeyYCode = 89;
@@ -119,7 +121,8 @@ export default class PanelTextInput extends PureComponent {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/React.createElement(Input, {
+    return jsx("input", {
+      css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
       role: role,
       "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
       "aria-expanded": ariaExpanded,
@@ -134,8 +137,7 @@ export default class PanelTextInput extends PureComponent {
       onKeyDown: this.handleKeydown,
       onMouseDown: this.onMouseDown,
       onBlur: this.onBlur,
-      innerRef: this.handleRef,
-      width: width,
+      ref: this.handleRef,
       maxLength: maxLength,
       "aria-label": ariaLabel
     });