@atlaskit/editor-core 162.0.1 → 163.0.0

package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,60 +1,22 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
 import React, { useMemo, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
-import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+import { jsx, css } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import { ItemGroup, itemThemeNamespace } from '@atlaskit/item';
-import { themed } from '@atlaskit/theme/components';
-import { ThemeProvider } from 'styled-components';
-import { ICON_HEIGHT } from './TypeAheadListItem';
+import { ItemGroup } from '@atlaskit/item';
+import { ICON_HEIGHT, itemTheme, ITEM_PADDING } from './TypeAheadListItem';
 import { VariableSizeList as List } from 'react-window';
 import { ResizeObserverProvider } from './hooks/use-resize-observer';
 import { useDynamicListHeightCalculation } from './hooks/use-dynamic-list-height-calculation';
 import { DynamicHeightListItem, SelectedIndexContext, ListItemActionsContext, UpdateListItemHeightContext } from './DynamicHeightListItem';
 import { injectIntl } from 'react-intl-next';
 import { typeAheadListMessages } from '../messages';
-var ITEM_PADDING = 12;
 var LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 var LIST_MAX_HEIGHT = 380;
 var LIST_WIDTH = 320;
-
-var itemTheme = _defineProperty({}, itemThemeNamespace, {
-  padding: {
-    default: {
-      bottom: ITEM_PADDING,
-      left: ITEM_PADDING,
-      right: ITEM_PADDING,
-      top: ITEM_PADDING
-    }
-  },
-  beforeItemSpacing: {
-    default: function _default() {
-      return ITEM_PADDING;
-    }
-  },
-  borderRadius: function borderRadius() {
-    return 0;
-  },
-  hover: {
-    // background: colors.transparent, transparent is not a thing
-    text: colorsText,
-    secondaryText: N200
-  },
-  selected: {
-    background: themed({
-      light: N20,
-      dark: DN70
-    }),
-    text: themed({
-      light: N800,
-      dark: DN600
-    }),
-    secondaryText: themed({
-      light: N200,
-      dark: DN300
-    })
-  }
-});
-
 var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
       selectedIndex = _ref.selectedIndex,
@@ -142,20 +104,19 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
 
   var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   var height = Math.min(typeof renderedListHeight === 'number' ? renderedListHeight : estimatedHeight, LIST_MAX_HEIGHT);
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: itemTheme
-  }, /*#__PURE__*/React.createElement(ItemGroup, {
+  return jsx(ItemGroup, {
     role: "listbox",
     "aria-live": "polite",
     "aria-label": intl.formatMessage(typeAheadListMessages.typeAheadResultLabel),
-    "aria-relevant": "additions removals"
-  }, /*#__PURE__*/React.createElement(ResizeObserverProvider, null, /*#__PURE__*/React.createElement(UpdateListItemHeightContext.Provider, {
+    "aria-relevant": "additions removals",
+    theme: itemTheme
+  }, jsx(ResizeObserverProvider, null, jsx(UpdateListItemHeightContext.Provider, {
     value: setListItemHeight
-  }, /*#__PURE__*/React.createElement(ListItemActionsContext.Provider, {
+  }, jsx(ListItemActionsContext.Provider, {
     value: actions
-  }, /*#__PURE__*/React.createElement(SelectedIndexContext.Provider, {
+  }, jsx(SelectedIndexContext.Provider, {
     value: selectedIndex
-  }, /*#__PURE__*/React.createElement(List, {
+  }, jsx(List, {
     useIsScrolling: true,
     ref: listRef,
     itemData: items,
@@ -166,8 +127,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref) {
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    // temporary solution before we migrated off dst/item\n                    & span[class^='ItemParts__Before'] {\n                      margin-right: 12px;\n                    }\n                  "])))
+  }, DynamicHeightListItem))))));
 });
 export var TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/esm/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,12 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React, { useCallback, useMemo, useRef, useLayoutEffect } from 'react';
-import { N200 } from '@atlaskit/theme/colors';
+import { text as colorsText, N200, N20, DN70, N800, DN600, DN300 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-import Item from '@atlaskit/item';
+import Item, { itemThemeNamespace } from '@atlaskit/item';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import styled from 'styled-components';
 import IconFallback from '../../quick-insert/assets/fallback';
@@ -14,6 +16,44 @@ import { Shortcut } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export var ICON_HEIGHT = 40;
 export var ICON_WIDTH = 40;
+export var ITEM_PADDING = 12;
+export var itemTheme = _defineProperty({}, itemThemeNamespace, {
+  padding: {
+    default: {
+      bottom: ITEM_PADDING,
+      left: ITEM_PADDING,
+      right: ITEM_PADDING,
+      top: ITEM_PADDING
+    }
+  },
+  beforeItemSpacing: {
+    default: function _default() {
+      return ITEM_PADDING;
+    }
+  },
+  borderRadius: function borderRadius() {
+    return 0;
+  },
+  hover: {
+    // background: colors.transparent, transparent is not a thing
+    text: colorsText,
+    secondaryText: N200
+  },
+  selected: {
+    background: themed({
+      light: N20,
+      dark: DN70
+    }),
+    text: themed({
+      light: N800,
+      dark: DN600
+    }),
+    secondaryText: themed({
+      light: N200,
+      dark: DN300
+    })
+  }
+});
 export var ItemIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, borderRadius(), ICON_WIDTH, ICON_HEIGHT);
 var ItemBody = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n"])));
 var ItemText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: initial;\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
@@ -97,7 +137,8 @@ export var TypeAheadListItem = function TypeAheadListItem(_ref2) {
     isSelected: isSelected,
     "aria-selected": isSelected,
     "aria-label": item.title,
-    role: "option"
+    role: "option",
+    theme: itemTheme
   }, /*#__PURE__*/React.createElement(ItemBody, null, /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
     className: "item-title"
   }, item.title), item.description && /*#__PURE__*/React.createElement("div", {

package/dist/esm/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -9,6 +9,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N0, N60A, N50A } from '@atlaskit/theme/colors';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { TypeAheadList } from './TypeAheadList';
 var TypeAheadContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 1px ", ", 0 4px 8px -2px ", ";\n  padding: ", "px 0;\n  width: 320px;\n  max-height: 380px; /* ~5.5 visibile items */\n  overflow-y: auto;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  position: relative;\n"])), N0, borderRadius(), N60A, N50A, gridSize() / 2);
 
@@ -99,7 +100,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
     fitWidth: 340,
     offset: OFFSET
   }, /*#__PURE__*/React.createElement(TypeAheadContent, {
-    className: "fabric-editor-typeahead"
+    tabIndex: 0,
+    className: TYPE_AHEAD_POPUP_CONTENT_CLASS
   }, /*#__PURE__*/React.createElement(Highlight, {
     state: editorView.state,
     triggerHandler: triggerHandler

package/dist/esm/plugins/unsupported-content/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export var UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',

package/dist/esm/profiler/render-count.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import uuid from 'uuid';
-import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
 import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common/utils';
 export var ProfiledComponentIds;
 

package/dist/esm/ui/Appearance/Comment/Toolbar.js

@@ -11,7 +11,7 @@ import { akEditorToolbarKeylineHeight, akEditorGridLineZIndex, akEditorMenuZInde
 export var TableControlsPadding = 20;
 export var MainToolbarWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  padding: ", "px ", "px 0;\n  display: flex;\n  height: auto;\n  background-color: white;\n  box-shadow: none;\n  padding-left: ", "px;\n\n  & > div > *:first-child {\n    margin-left: 0;\n  }\n\n  .block-type-btn {\n    padding-left: 0;\n  }\n"])), gridSize(), gridSize(), TableControlsPadding);
 MainToolbarWrapper.displayName = 'MainToolbar';
-var StickyToolbarWrapper = styled(MainToolbarWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  position: sticky;\n  top: ", ";\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0 ", ";\n  }\n"])), function (props) {
+var StickyToolbarWrapper = styled(MainToolbarWrapper)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  /* stylelint-disable declaration-block-no-duplicate-properties */\n  position: relative;\n  position: sticky;\n  /* stylelint-enable declaration-block-no-duplicate-properties */\n  top: ", ";\n  padding-bottom: ", "px;\n  z-index: ", ";\n  transition: box-shadow ease-in-out 0.2s;\n  &.show-keyline {\n    box-shadow: 0 ", "px 0 0 ", ";\n  }\n"])), function (props) {
   return "".concat(props.top, "px");
 }, gridSize(), akEditorGridLineZIndex + akEditorMenuZIndex, akEditorToolbarKeylineHeight, N30);
 StickyToolbarWrapper.displayName = 'MainToolbarSticky';

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -126,7 +126,6 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
         showKeyline: showKeyline,
         featureFlags: featureFlags
       }), /*#__PURE__*/React.createElement(FullPageContentArea, {
-        allowAnnotation: props.allowAnnotation,
         appearance: props.appearance,
         contentArea: this.contentArea,
         contentAreaRef: this.contentAreaRef,

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -19,7 +19,6 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         positionedOverEditor: positionedOverEditor
       }, /*#__PURE__*/React.createElement(ScrollContainer, {
         innerRef: props.scrollContainerRef,
-        allowAnnotation: props.allowAnnotation,
         className: "fabric-editor-popup-scroll-parent"
       }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
         editorView: props.editorView

package/dist/esm/ui/Appearance/FullPage/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   toolbarLabel: {
     id: 'fabric.editor.toolbarLabel',

package/dist/esm/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -2,63 +2,66 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-var ImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), gridSize() * 3);
+var imageContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 auto ", "px;\n  height: 80px;\n"])), gridSize() * 3);
 
 var ErrorImage = function ErrorImage() {
-  return /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement("svg", {
+  return jsx("div", {
+    css: imageContainer
+  }, jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 163.28 218",
     height: "80"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  }, jsx("defs", null, jsx("linearGradient", {
     id: "linear-gradient",
     x1: "133.86",
     x2: "-2.79",
     y1: "136.43",
     y2: "200.15",
     gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
+  }, jsx("stop", {
     offset: "0",
     stopColor: "#ffd740"
-  }), /*#__PURE__*/React.createElement("stop", {
+  }), jsx("stop", {
     offset: "1",
     stopColor: "#ffab00"
-  })), /*#__PURE__*/React.createElement("clipPath", {
+  })), jsx("clipPath", {
     id: "clip-path"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     id: "_Polygon_",
     d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
     className: "cls-1",
     "data-name": "<Polygon>"
-  })), /*#__PURE__*/React.createElement("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), /*#__PURE__*/React.createElement("g", {
+  })), jsx("style", null, ".cls-1{fill:url(#linear-gradient)}.cls-2{fill:#253858}.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;stroke:#5e6c84}")), jsx("g", {
     id: "Layer_2",
     "data-name": "Layer 2"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, jsx("g", {
     id: "Software"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     id: "_Polygon_2",
     d: "M94.78 80.16l66.44 115.08A15.17 15.17 0 01148.08 218H15.2a15.17 15.17 0 01-13.14-22.76L68.5 80.16a15.17 15.17 0 0126.28 0z",
     className: "cls-1",
     "data-name": "<Polygon>"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M87.22 163.71l2.88-44.35a9.18 9.18 0 00-9.16-9.78 9.18 9.18 0 00-9.16 9.78l2.88 44.35a6.3 6.3 0 006.28 5.89 6.3 6.3 0 006.28-5.89zM71.38 187.25a9.53 9.53 0 0010.39 9.58 9.68 9.68 0 00-.9-19.32 9.64 9.64 0 00-9.49 9.74z",
     className: "cls-2"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "#ffc400",
     d: "M91.7 27.17L84.29.45A.61.61 0 0083.1.5l-4.66 25.1-5.8-1.08a.61.61 0 00-.7.76L79.35 52a.61.61 0 001.19 0l4.66-25.1 5.8 1.03a.61.61 0 00.7-.76z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "#ffab00",
     d: "M65.12 41.81l-10.88-8.55a.27.27 0 00-.41.33L59.36 45l-2.66 1.31a.27.27 0 000 .45l10.87 8.55a.27.27 0 00.41-.33l-5.57-11.43 2.66-1.29a.27.27 0 00.05-.45z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     fill: "none",
     stroke: "#344563",
     strokeLinecap: "round",
     strokeMiterlimit: "10",
     strokeWidth: "2",
     d: "M115.15 36.6c-1.17 1.59-11-5.6-12.16-4s8.66 8.79 7.5 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39-11-5.6-12.17-4 8.66 8.79 7.49 10.39"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M119.92 64.19c-1.46 1.33-7.05-4.78-8.51-3.44s4.13 7.45 2.67 8.78-7.05-4.78-8.51-3.44c-.68.62.16 2.27 1.11 4M44.8 64c1.82.77 5-6.87 6.86-6.1s-1.39 8.4.43 9.17 5-6.87 6.86-6.1c.85.36.61 2.19.29 4.13",
     className: "cls-6"
   })))));

package/dist/esm/ui/ConfigPanel/Fields/Boolean.js

@@ -6,16 +6,17 @@ var _excluded = ["value"],
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field } from '@atlaskit/form';
 import AKToggle from '@atlaskit/toggle';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
 import { RequiredIndicator } from './common/RequiredIndicator';
-var ToggleFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-var ToggleLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 3px 3px 3px 0px;\n  flex-grow: 1;\n"])));
+var toggleFieldWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var toggleLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 3px 3px 3px 0px;\n  flex-grow: 1;\n"])));
 
 function _validate(value, isRequired) {
   if (isRequired && !value) {
@@ -40,7 +41,7 @@ function Checkbox(_ref) {
       isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
       _field$defaultValue = field.defaultValue,
       defaultValue = _field$defaultValue === void 0 ? false : _field$defaultValue;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: function validate(value) {
@@ -54,13 +55,13 @@ function Checkbox(_ref) {
     var isChecked = fieldProps.value,
         restFieldProps = _objectWithoutProperties(fieldProps, _excluded);
 
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AKCheckbox, _extends({}, restFieldProps, {
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
       label: label,
       onChange: function onChange(event) {
         return handleOnChange(fieldProps.onChange, onFieldChange, event);
       },
       isChecked: isChecked
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -77,7 +78,7 @@ function Toggle(_ref3) {
       isRequired = _field$isRequired2 === void 0 ? false : _field$isRequired2,
       _field$defaultValue2 = field.defaultValue,
       defaultValue = _field$defaultValue2 === void 0 ? false : _field$defaultValue2;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: function validate(value) {
@@ -92,17 +93,20 @@ function Toggle(_ref3) {
         isChecked = fieldProps.value,
         restFieldProps = _objectWithoutProperties(fieldProps, _excluded2);
 
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ToggleFieldWrapper, null, /*#__PURE__*/React.createElement(ToggleLabel, {
+    return jsx(Fragment, null, jsx("div", {
+      css: toggleFieldWrapper
+    }, jsx("label", {
+      css: toggleLabel,
       id: id,
       htmlFor: id
-    }, label, isRequired ? /*#__PURE__*/React.createElement(RequiredIndicator, {
+    }, label, isRequired ? jsx(RequiredIndicator, {
       "aria-hidden": "true"
-    }, "*") : null), /*#__PURE__*/React.createElement(AKToggle, _extends({}, restFieldProps, {
+    }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: function onChange(event) {
         return handleOnChange(fieldProps.onChange, onFieldChange, event);
       },
       isChecked: isChecked
-    }))), /*#__PURE__*/React.createElement(FieldMessages, {
+    }))), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -115,14 +119,14 @@ export default function Boolean(_ref5) {
       onFieldChange = _ref5.onFieldChange;
 
   if (field.style === 'toggle') {
-    return /*#__PURE__*/React.createElement(Toggle, {
+    return jsx(Toggle, {
       name: name,
       field: field,
       onFieldChange: onFieldChange
     });
   }
 
-  return /*#__PURE__*/React.createElement(Checkbox, {
+  return jsx(Checkbox, {
     name: name,
     field: field,
     onFieldChange: onFieldChange

package/dist/esm/ui/ConfigPanel/Fields/TabGroup.js

@@ -3,12 +3,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
-var TabWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // increase specificity to make sure the tab style is overridden\n  &&& [role='tabpanel'][tabindex] {\n    padding: 0;\n  }\n\n  &&& [role='tablist']::before {\n    left: 0;\n    right: 0;\n  }\n"])));
-var PanelWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n"])));
+var tabWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // increase specificity to make sure the tab style is overridden\n  &&& [role='tabpanel'][tabindex] {\n    padding: 0;\n  }\n\n  &&& [role='tablist']::before {\n    left: 0;\n    right: 0;\n  }\n"])));
+var panelWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  max-width: 100%;\n"])));
 
 var TabGroupImpl = function TabGroupImpl(props) {
   var field = props.field,
@@ -29,20 +30,24 @@ var TabGroupImpl = function TabGroupImpl(props) {
   var onChange = React.useCallback(function (index) {
     setActiveTab(index);
   }, [setActiveTab]);
-  return /*#__PURE__*/React.createElement(TabWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
+  return jsx("div", {
+    css: tabWrapper
+  }, jsx(Tabs, {
     id: "configPanelTabs-".concat(field.name),
     onChange: onChange,
     selected: activeTab
-  }, /*#__PURE__*/React.createElement(TabList, null, fields.map(function (_ref) {
+  }, jsx(TabList, null, fields.map(function (_ref) {
     var name = _ref.name,
         label = _ref.label;
-    return /*#__PURE__*/React.createElement(Tab, {
+    return jsx(Tab, {
       key: "tab-".concat(name)
     }, label);
   })), fields.map(function (field) {
-    return /*#__PURE__*/React.createElement(TabPanel, {
+    return jsx(TabPanel, {
       key: "panel-".concat(field.name)
-    }, /*#__PURE__*/React.createElement(PanelWrapper, null, renderPanel(field)));
+    }, jsx("div", {
+      css: panelWrapper
+    }, renderPanel(field)));
   })));
 };
 

package/dist/esm/ui/ConfigPanel/Fields/UserSelect.js

@@ -13,7 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 import React, { useEffect, useState } from 'react';
 import { Field } from '@atlaskit/form';
-import { hydrateDefaultValues, SmartUserPicker } from '@atlaskit/user-picker';
+import SmartUserPicker, { hydrateDefaultValues } from '@atlaskit/smart-user-picker';
 import { getUserFieldContextProvider } from '@atlaskit/editor-common/extensions';
 import UnhandledType from './UnhandledType';
 import { validate as _validate } from '../utils';
@@ -67,6 +67,16 @@ function makeSafe(value) {
   return value.id;
 }
 
+var isOptionData = function isOptionData(value) {
+  if (!value) {
+    return false;
+  }
+
+  return (Array.isArray(value) ? value : [value]).every(function (item) {
+    return 'name' in item;
+  });
+};
+
 function SafeSmartUserPicker(_ref) {
   var context = _ref.context,
       field = _ref.field,
@@ -117,12 +127,13 @@ function SafeSmartUserPicker(_ref) {
             switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return hydrateDefaultValues(makeCompat(safeValue), productKey);
+                return hydrateDefaultValues(undefined, // no need to override baseUrl
+                makeCompat(safeValue), productKey);
 
               case 2:
                 hydrated = _context.sent;
 
-                if (!cancel) {
+                if (!(cancel || !isOptionData(hydrated))) {
                   _context.next = 5;
                   break;
                 }

package/dist/esm/ui/ConfigPanel/Header.js

@@ -2,9 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-import React from 'react';
+/** @jsx jsx */
+import { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import Loadable from 'react-loadable';
 import Button from '@atlaskit/button/custom-theme-button';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -16,16 +17,13 @@ var iconWidth = 40;
 var buttonWidth = 40;
 var margin = 16;
 var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
-var Item = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
-var ItemIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, borderRadius(), iconWidth, iconWidth);
-var ItemBody = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
-var CenteredItemTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
-CenteredItemTitle.displayName = 'CenteredItemTitle';
-var ItemText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
-ItemText.displayName = 'ItemText';
-var Description = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
-Description.displayName = 'Description';
-var CloseButtonWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
+var item = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-bottom: 24px;\n"])));
+var itemIcon = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), iconWidth, iconWidth, borderRadius(), iconWidth, iconWidth);
+var itemBody = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  margin: 0 16px;\n  flex-grow: 3;\n  max-width: calc(100% - ", "px);\n"])), gapSizeForEllipsis);
+var centeredItemTitle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"])));
+var itemText = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-width: 100%;\n  white-space: initial;\n  .item-summary {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 4px;\n\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), relativeFontSizeToBase16(11.67), N200);
+var descriptionStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
+var closeButtonWrapper = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: ", "px;\n  text-align: right;\n"])), buttonWidth);
 
 var Header = function Header(_ref) {
   var icon = _ref.icon,
@@ -41,22 +39,35 @@ var Header = function Header(_ref) {
       return null;
     }
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemIcon, null, /*#__PURE__*/React.createElement(ResolvedIcon, {
+  return jsx(Fragment, null, jsx("div", {
+    css: item
+  }, jsx("div", {
+    css: itemIcon
+  }, jsx(ResolvedIcon, {
     label: title
-  })), /*#__PURE__*/React.createElement(ItemBody, null, summary ? /*#__PURE__*/React.createElement(ItemText, null, /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
+    css: itemBody
+  }, summary ? jsx("div", {
+    css: itemText
+  }, jsx("div", {
     className: "item-title",
     id: "context-panel-title"
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, title), jsx("div", {
     className: "item-summary"
-  }, summary)) : /*#__PURE__*/React.createElement(CenteredItemTitle, {
+  }, summary)) : jsx("div", {
+    css: centeredItemTitle,
     id: "context-panel-title"
-  }, title)), /*#__PURE__*/React.createElement(CloseButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  }, title)), jsx("div", {
+    css: closeButtonWrapper
+  }, jsx(Button, {
     appearance: "subtle",
-    iconBefore: /*#__PURE__*/React.createElement(CrossIcon, {
+    iconBefore: jsx(CrossIcon, {
       label: intl.formatMessage(messages.close)
     }),
     onClick: onClose
-  }))), (description || documentationUrl) && /*#__PURE__*/React.createElement(Description, null, description && /*#__PURE__*/React.createElement(React.Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && /*#__PURE__*/React.createElement("a", {
+  }))), (description || documentationUrl) && jsx("p", {
+    css: descriptionStyle
+  }, description && jsx(Fragment, null, description.replace(/([^.])$/, '$1.'), " "), documentationUrl && jsx("a", {
     target: "_blank",
     rel: "noopener noreferrer",
     href: documentationUrl