@atlaskit/editor-core 161.0.0 → 163.0.0

package/dist/es2019/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -1,11 +1,12 @@
 import { TextSelection } from 'prosemirror-state';
 import { pluginKey } from '../pm-plugins/key';
 import { ACTIONS } from '../pm-plugins/actions';
-export const openTypeAheadAtCursor = ({
-  triggerHandler,
-  inputMethod,
-  query
-}) => tr => {
+export const openTypeAhead = props => tr => {
+  const {
+    triggerHandler,
+    inputMethod,
+    query
+  } = props;
   tr.setMeta(pluginKey, {
     action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
     params: {
@@ -14,6 +15,17 @@ export const openTypeAheadAtCursor = ({
       query
     }
   });
+};
+export const openTypeAheadAtCursor = ({
+  triggerHandler,
+  inputMethod,
+  query
+}) => tr => {
+  openTypeAhead({
+    triggerHandler,
+    inputMethod,
+    query
+  })(tr);
   const {
     selection
   } = tr;

package/dist/es2019/plugins/type-ahead/ui/InputQuery.js

@@ -2,7 +2,7 @@ import React, { useRef, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
 import { keyName as keyNameNormalized } from 'w3c-keyname';
 import { browser, ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
-import { CloseSelectionOptions } from '../constants';
+import { CloseSelectionOptions, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../constants';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 const QuerySpan = styled.span`
   outline: none;
@@ -181,6 +181,16 @@ export const InputQuery = /*#__PURE__*/React.memo(({
     };
 
     const onFocusOut = event => {
+      const {
+        relatedTarget
+      } = event; // Given the user is changing the focus
+      // When the target is inside the TypeAhead Popup
+      // Then the popup should stay open
+
+      if (relatedTarget instanceof HTMLElement && relatedTarget.closest && relatedTarget.closest(`.${TYPE_AHEAD_POPUP_CONTENT_CLASS}`)) {
+        return;
+      }
+
       cancel({
         addPrefixTrigger: true,
         text: cleanedInputContent(),

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

@@ -1,55 +1,18 @@
+/** @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';
-const ITEM_PADDING = 12;
 const LIST_ITEM_ESTIMATED_HEIGHT = ICON_HEIGHT + ITEM_PADDING * 2;
 const LIST_MAX_HEIGHT = 380;
 const LIST_WIDTH = 320;
-const itemTheme = {
-  [itemThemeNamespace]: {
-    padding: {
-      default: {
-        bottom: ITEM_PADDING,
-        left: ITEM_PADDING,
-        right: ITEM_PADDING,
-        top: ITEM_PADDING
-      }
-    },
-    beforeItemSpacing: {
-      default: () => ITEM_PADDING
-    },
-    borderRadius: () => 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
-      })
-    }
-  }
-};
 const TypeAheadListComponent = /*#__PURE__*/React.memo(({
   items,
   selectedIndex,
@@ -137,20 +100,19 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
 
   const estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
   const 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,
@@ -161,8 +123,14 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
     itemSize: getListItemHeight,
     width: LIST_WIDTH,
     height: height,
-    overscanCount: 3
-  }, DynamicHeightListItem)))))));
+    overscanCount: 3,
+    css: css`
+                    // temporary solution before we migrated off dst/item
+                    & span[class^='ItemParts__Before'] {
+                      margin-right: 12px;
+                    }
+                  `
+  }, DynamicHeightListItem))))));
 });
 export const TypeAheadList = injectIntl(TypeAheadListComponent);
 TypeAheadList.displayName = 'TypeAheadList';

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

@@ -1,8 +1,9 @@
 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';
@@ -10,6 +11,42 @@ import { Shortcut } from '../../../ui/styles';
 import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
 export const ICON_HEIGHT = 40;
 export const ICON_WIDTH = 40;
+export const ITEM_PADDING = 12;
+export const itemTheme = {
+  [itemThemeNamespace]: {
+    padding: {
+      default: {
+        bottom: ITEM_PADDING,
+        left: ITEM_PADDING,
+        right: ITEM_PADDING,
+        top: ITEM_PADDING
+      }
+    },
+    beforeItemSpacing: {
+      default: () => ITEM_PADDING
+    },
+    borderRadius: () => 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 const ItemIcon = styled.div`
   width: ${ICON_WIDTH}px;
   height: ${ICON_HEIGHT}px;
@@ -128,7 +165,8 @@ export const TypeAheadListItem = ({
     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/es2019/plugins/type-ahead/ui/TypeAheadPopup.js

@@ -5,6 +5,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';
 const TypeAheadContent = styled.div`
   background: ${N0};
@@ -105,7 +106,8 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(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/es2019/plugins/type-ahead/utils.js

@@ -64,6 +64,21 @@ export const findHandler = (id, state) => {
   } = pluginState;
   return typeAheadHandlers.find(h => h.id === id) || null;
 };
+export const findHandlerByTrigger = ({
+  trigger,
+  editorState
+}) => {
+  const pluginState = typeAheadPluginKey.getState(editorState);
+
+  if (!pluginState || !pluginState.typeAheadHandlers || pluginState.typeAheadHandlers.length === 0) {
+    return null;
+  }
+
+  const {
+    typeAheadHandlers
+  } = pluginState;
+  return typeAheadHandlers.find(h => h.trigger === trigger) || null;
+};
 export const moveSelectedIndex = ({
   editorView,
   direction

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

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export const UnsupportedSharedCssClassName = {
   BLOCK_CONTAINER: 'unsupportedBlockView-content-wrap',

package/dist/es2019/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 let ProfiledComponentIds;
 

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -12,7 +12,7 @@ import ContentStyles from '../../ContentStyles';
 import { pluginKey as maxContentSizePluginKey } from '../../../plugins/max-content-size';
 import { stateKey as mediaPluginKey } from '../../../plugins/media/pm-plugins/plugin-key';
 import { ClickAreaBlock } from '../../Addon';
-import { tableCommentEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableCommentEditorStyles } from '../../../plugins/table/ui/common-styles';
 import WithFlash from '../../WithFlash';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -67,7 +67,7 @@ const ContentArea = styled(ContentStyles)`
 
   padding: ${TableControlsPadding}px;
 
-  ${tableCommentEditorStyles};
+  ${deprecatedTableCommentEditorStyles};
 `;
 ContentArea.displayName = 'ContentArea';
 const SecondaryToolbar = styled.div`

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

@@ -24,8 +24,10 @@ export const MainToolbarWrapper = styled.div`
 `;
 MainToolbarWrapper.displayName = 'MainToolbar';
 const StickyToolbarWrapper = styled(MainToolbarWrapper)`
+  /* stylelint-disable declaration-block-no-duplicate-properties */
   position: relative;
   position: sticky;
+  /* stylelint-enable declaration-block-no-duplicate-properties */
   top: ${props => `${props.top}px`};
   padding-bottom: ${gridSize()}px;
   z-index: ${akEditorGridLineZIndex + akEditorMenuZIndex};

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

@@ -102,7 +102,6 @@ export class FullPageEditor extends React.Component {
       showKeyline: showKeyline,
       featureFlags: featureFlags
     }), /*#__PURE__*/React.createElement(FullPageContentArea, {
-      allowAnnotation: props.allowAnnotation,
       appearance: props.appearance,
       contentArea: this.contentArea,
       contentAreaRef: this.contentAreaRef,

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

@@ -19,7 +19,6 @@ const Content = /*#__PURE__*/React.memo(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/es2019/ui/Appearance/FullPage/StyledComponents.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
 import ContentStyles from '../../ContentStyles';
-import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles.css';
+import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
@@ -93,7 +93,7 @@ export const EditorContentArea = styled.div`
     }
   }
 
-  ${tableFullPageEditorStyles};
+  ${deprecatedTableFullPageEditorStyles};
 
   .fabric-editor--full-width-mode {
     /* Full Width Mode styles for ignoring breakout sizes */

package/dist/es2019/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/es2019/ui/ConfigPanel/ErrorMessage/ErrorImage.js

@@ -1,62 +1,65 @@
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-const ImageContainer = styled.div`
+const imageContainer = css`
   margin: 0 auto ${gridSize() * 3}px;
   height: 80px;
 `;
 
-const ErrorImage = () => /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement("svg", {
+const ErrorImage = () => 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/es2019/ui/ConfigPanel/Fields/Boolean.js

@@ -1,16 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
-const ToggleFieldWrapper = styled.div`
+const toggleFieldWrapper = css`
   display: flex;
 `;
-const ToggleLabel = styled.label`
+const toggleLabel = css`
   display: flex;
   padding: 3px 3px 3px 0px;
   flex-grow: 1;
@@ -40,7 +42,7 @@ function Checkbox({
     isRequired = false,
     defaultValue = false
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
@@ -53,11 +55,11 @@ function Checkbox({
       value: isChecked,
       ...restFieldProps
     } = fieldProps;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(AKCheckbox, _extends({}, restFieldProps, {
+    return jsx(Fragment, null, jsx(AKCheckbox, _extends({}, restFieldProps, {
       label: label,
       onChange: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
       isChecked: isChecked
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -75,7 +77,7 @@ function Toggle({
     isRequired = false,
     defaultValue = false
   } = field;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     validate: value => validate(value, isRequired),
@@ -89,15 +91,18 @@ function Toggle({
       value: isChecked,
       ...restFieldProps
     } = fieldProps;
-    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: event => handleOnChange(fieldProps.onChange, onFieldChange, event),
       isChecked: isChecked
-    }))), /*#__PURE__*/React.createElement(FieldMessages, {
+    }))), jsx(FieldMessages, {
       error: error,
       description: description
     }));
@@ -110,14 +115,14 @@ export default function Boolean({
   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/es2019/ui/ConfigPanel/Fields/TabGroup.js

@@ -1,8 +1,9 @@
+/** @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';
-const TabWrapper = styled.div`
+const tabWrapper = css`
   // increase specificity to make sure the tab style is overridden
   &&& [role='tabpanel'][tabindex] {
     padding: 0;
@@ -13,8 +14,9 @@ const TabWrapper = styled.div`
     right: 0;
   }
 `;
-const PanelWrapper = styled.div`
+const panelWrapper = css`
   flex-grow: 1;
+  max-width: 100%;
 `;
 
 const TabGroupImpl = props => {
@@ -33,18 +35,22 @@ const TabGroupImpl = props => {
   const onChange = React.useCallback(index => {
     setActiveTab(index);
   }, [setActiveTab]);
-  return /*#__PURE__*/React.createElement(TabWrapper, null, /*#__PURE__*/React.createElement(Tabs, {
+  return jsx("div", {
+    css: tabWrapper
+  }, jsx(Tabs, {
     id: `configPanelTabs-${field.name}`,
     onChange: onChange,
     selected: activeTab
-  }, /*#__PURE__*/React.createElement(TabList, null, fields.map(({
+  }, jsx(TabList, null, fields.map(({
     name,
     label
-  }) => /*#__PURE__*/React.createElement(Tab, {
+  }) => jsx(Tab, {
     key: `tab-${name}`
-  }, label))), fields.map(field => /*#__PURE__*/React.createElement(TabPanel, {
+  }, label))), fields.map(field => jsx(TabPanel, {
     key: `panel-${field.name}`
-  }, /*#__PURE__*/React.createElement(PanelWrapper, null, renderPanel(field))))));
+  }, jsx("div", {
+    css: panelWrapper
+  }, renderPanel(field))))));
 };
 
 TabGroupImpl.displayName = 'TabGroup';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 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 } from '../utils';
@@ -45,6 +45,14 @@ function makeSafe(value) {
   return value.id;
 }
 
+const isOptionData = value => {
+  if (!value) {
+    return false;
+  }
+
+  return (Array.isArray(value) ? value : [value]).every(item => 'name' in item);
+};
+
 function SafeSmartUserPicker({
   context,
   field,
@@ -83,9 +91,10 @@ function SafeSmartUserPicker({
     let cancel = false;
 
     async function hydrate() {
-      const hydrated = await hydrateDefaultValues(makeCompat(safeValue), productKey);
+      const hydrated = await hydrateDefaultValues(undefined, // no need to override baseUrl
+      makeCompat(safeValue), productKey);
 
-      if (cancel) {
+      if (cancel || !isOptionData(hydrated)) {
         return;
       }