@atlaskit/editor-common 78.29.3 → 78.30.1

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -25,44 +25,44 @@ import { filterUniqueItems, mapContentTypeToIcon, sha1, wordCount } from './util
  * Visible only to screenreaders. Use when there is a need
  * to provide more context to a non-sighted user.
  */
-export const visuallyHiddenStyles = css`
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-  height: 1px;
-  width: 1px;
-  margin: ${"var(--ds-space-negative-025, -2px)"};
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-`;
+export const visuallyHiddenStyles = css({
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  clipPath: 'inset(50%)',
+  height: '1px',
+  width: '1px',
+  margin: "var(--ds-space-negative-025, -2px)",
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute'
+});
 export const RECENT_SEARCH_LIST_SIZE = 5;
-const clearText = css`
-  cursor: pointer;
-  padding: 0;
-  margin-right: ${"var(--ds-space-100, 8px)"};
-  color: ${`var(--ds-icon-subtle, ${N90})`};
-  background: transparent;
-  border: none;
-`;
-const clearTextWrapper = css`
-  position: absolute;
-  right: 0;
-`;
-const containerPadding = css`
-  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"};
-`;
-const textLabelMargin = css`
-  margin-top: ${"var(--ds-space-150, 12px)"};
-`;
-const inputLabel = css`
-  font-size: ${fontSizeSmall()}px;
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  font-weight: 500;
-  padding-bottom: ${"var(--ds-space-050, 4px)"};
-`;
-const inputWrapperPosition = css`
-  position: relative;
-`;
+const clearText = css({
+  cursor: 'pointer',
+  padding: 0,
+  marginRight: "var(--ds-space-100, 8px)",
+  color: `var(--ds-icon-subtle, ${N90})`,
+  background: 'transparent',
+  border: 'none'
+});
+const clearTextWrapper = css({
+  position: 'absolute',
+  right: 0
+});
+const containerPadding = css({
+  padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"}`
+});
+const textLabelMargin = css({
+  marginTop: "var(--ds-space-150, 12px)"
+});
+const inputLabel = css({
+  fontSize: `${fontSizeSmall()}px`,
+  color: `var(--ds-text-subtlest, ${N200})`,
+  fontWeight: 500,
+  paddingBottom: "var(--ds-space-050, 4px)"
+});
+const inputWrapperPosition = css({
+  position: 'relative'
+});
 export const messages = defineMessages({
   displayText: {
     id: 'fabric.editor.displayText',

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.29.3";
+const packageVersion = "78.30.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/react-node-view/generateUniqueNodeKey.js

@@ -0,0 +1,4 @@
+import uuid from 'uuid/v4';
+export const generateUniqueNodeKey = () => {
+  return uuid();
+};

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -6,6 +6,7 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { browser } from '../utils';
 import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
+import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 export const inlineNodeViewClassname = 'inlineNodeView';
 function createNodeView({
   nodeViewParams,
@@ -17,6 +18,7 @@ function createNodeView({
   // used for comparisions when doing updates, before being
   // overwritten to the updated node.
   let currentNode = nodeViewParams.node;
+  const key = generateUniqueNodeKey();
 
   // First we setup the dom element which will be rendered and "tracked" by prosemirror
   // and also used as a "editor portal" (not react portal) target by the editor
@@ -53,7 +55,7 @@ function createNodeView({
       nodeViewParams,
       Component,
       extraComponentProps
-    }), domRef, false,
+    }), domRef, key, false,
     // node views should be rendered with intl context
     true);
   }
@@ -112,7 +114,7 @@ function createNodeView({
       // When prosemirror destroys the node view, we need to clean up
       // what we have previously rendered using the editor portal
       // provider api.
-      pmPluginFactoryParams.portalProviderAPI.remove(domRef);
+      pmPluginFactoryParams.portalProviderAPI.remove(key, domRef);
       // @ts-expect-error Expect an error as domRef is expected to be
       // of HTMLSpanElement type however once the node view has
       // been destroyed no other consumers should still be using it.

package/dist/es2019/react-node-view/index.js

@@ -6,6 +6,7 @@ import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { analyticsEventKey } from '../utils/analytics';
+import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
 export default class ReactNodeView {
   constructor(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent, hasAnalyticsContext = false, viewShouldUpdate, hasIntlContext = false) {
@@ -29,6 +30,7 @@ export default class ReactNodeView {
     this._viewShouldUpdate = viewShouldUpdate;
     this.eventDispatcher = eventDispatcher;
     this.hasIntlContext = hasIntlContext;
+    this.key = generateUniqueNodeKey();
   }
 
   /**
@@ -90,7 +92,7 @@ export default class ReactNodeView {
         dispatchAnalyticsEvent: this.dispatchAnalyticsEvent
       }, component());
     };
-    this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.hasAnalyticsContext, this.hasIntlContext);
+    this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.key, this.hasAnalyticsContext, this.hasIntlContext);
   }
   createDomRef() {
     if (!this.node.isInline) {
@@ -163,7 +165,7 @@ export default class ReactNodeView {
     if (!this.domRef) {
       return;
     }
-    this.portalProviderAPI.remove(this.domRef);
+    this.portalProviderAPI.remove(this.key, this.domRef);
     this.domRef = undefined;
     this.contentDOM = undefined;
   }

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

@@ -5,18 +5,18 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-const captionWrapperStyle = css`
-  margin-top: ${"var(--ds-space-100, 8px)"};
-  text-align: center;
-  position: relative;
-  color: ${`var(--ds-text-subtle, ${N400})`};
-`;
-const placeholderStyle = css`
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  position: absolute;
-  top: 0;
-  width: 100%;
-`;
+const captionWrapperStyle = css({
+  marginTop: "var(--ds-space-100, 8px)",
+  textAlign: 'center',
+  position: 'relative',
+  color: `var(--ds-text-subtle, ${N400})`
+});
+const placeholderStyle = css({
+  color: `var(--ds-text-subtlest, ${N200})`,
+  position: 'absolute',
+  top: 0,
+  width: '100%'
+});
 export class CaptionComponent extends React.Component {
   render() {
     const {

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

@@ -7,34 +7,36 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.29.3";
+const packageVersion = "78.30.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "wrapperStyles", css`
-    ${this.props.shouldFitContainer ? 'display: block; flex: 1 1 auto;' : 'display: inline-flex;'}
-    transition-duration: 0.2s;
-    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
-  `);
-    _defineProperty(this, "triggerStyles", css`
-    transition-duration: 0.2s;
-    transition: box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);
-    ${this.props.shouldFitContainer ? 'display: block; box-sizing: border-box;' : 'display: inline-flex;'}
-  `);
+    _defineProperty(this, "wrapperStyles", css({
+      display: this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      flex: this.props.shouldFitContainer ? '1 1 auto' : undefined,
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)'
+    }));
+    _defineProperty(this, "triggerStyles", css({
+      transitionDuration: '0.2s',
+      transition: 'box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38)',
+      display: this.props.shouldFitContainer ? 'block' : 'inline-flex',
+      boxSizing: this.props.shouldFitContainer ? 'border-box' : undefined
+    }));
     /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(this, "menuWrapper", () => {
-      return css`
-      color: ${`var(--ds-text, ${N900})`};
-      background-color: ${`var(--ds-surface-overlay, ${N0})`};
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`};
-      box-sizing: border-box;
-      overflow: auto;
-      padding: ${"var(--ds-space-050, 4px)"} 0;
-      max-height: 90vh;
-    `;
+      return css({
+        color: `var(--ds-text, ${N900})`,
+        backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+        borderRadius: "var(--ds-border-radius, 3px)",
+        boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px calc(-1 * 2px) ${N50A}, 0 0 1px ${N60A}`})`,
+        boxSizing: 'border-box',
+        overflow: 'auto',
+        padding: `${"var(--ds-space-050, 4px)"} 0`,
+        maxHeight: '90vh'
+      });
     });
     /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
     _defineProperty(this, "componentDidMount", () => {

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

@@ -44,31 +44,29 @@ export const ExpandIconWrapper = ({
     css: () => expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle()
   }, children);
 };
-const expandIconWrapperStyle = () => css`
-  cursor: pointer;
-  display: flex;
-  color: ${`var(--ds-icon, ${N90})`};
-  border-radius: ${"var(--ds-border-radius-100, 4px)"};
-  width: 24px;
-  height: 24px;
-
-  &:hover {
-    background: ${`var(--ds-background-neutral-subtle-hovered, ${N30A})`};
-  }
-
-  svg {
-    transition: transform 0.2s ${akEditorSwoopCubicBezier};
+const expandIconWrapperStyle = () => css({
+  cursor: 'pointer',
+  display: 'flex',
+  color: `var(--ds-icon, ${N90})`,
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  width: '24px',
+  height: '24px',
+  '&:hover': {
+    background: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+  },
+  svg: {
+    transition: `transform 0.2s ${akEditorSwoopCubicBezier}`
   }
-`;
-const expandIconWrapperExpandedStyle = css`
-  svg {
-    transform: rotate(90deg);
+});
+const expandIconWrapperExpandedStyle = css({
+  svg: {
+    transform: 'rotate(90deg)'
   }
-`;
-export const expandLayoutWrapperStyle = css`
-  width: ${"var(--ds-space-300, 24px)"};
-  height: ${"var(--ds-space-300, 24px)"};
-`;
+});
+export const expandLayoutWrapperStyle = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
+});
 export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
@@ -91,34 +89,31 @@ const containerStyles = styleProps => {
   // and is the root level expand.
   const marginHorizontal = styleProps['data-node-type'] === 'expand' ? `-${akLayoutGutterOffset}px` : 0;
   const margin = `${marginTop} ${marginHorizontal} ${marginBottom}`;
-  return () => css`
-    border-width: 1px;
-    border-style: solid;
-    border-color: ${focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR};
-    border-radius: ${BORDER_RADIUS};
-    min-height: 25px;
-    background: ${!expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND};
-    margin: ${margin};
-
-    transition: background 0.3s ${akEditorSwoopCubicBezier},
-      border-color 0.3s ${akEditorSwoopCubicBezier};
-    padding: ${"var(--ds-space-100, 8px)"};
-
-    &:hover {
+  return () => css({
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR,
+    borderRadius: BORDER_RADIUS,
+    minHeight: '25px',
+    background: !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND,
+    margin: margin,
+    transition: `background 0.3s ${akEditorSwoopCubicBezier}, border-color 0.3s ${akEditorSwoopCubicBezier}`,
+    padding: "var(--ds-space-100, 8px)",
+    '&:hover': {
       // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
       // This is because the default state already uses the same token and, as such, the hover style won't change anything.
       // https://product-fabric.atlassian.net/browse/DSP-4152
-      border: 1px solid ${`var(--ds-border, ${N50A})`};
-      background: ${EXPAND_SELECTED_BACKGROUND};
-    }
-
-    td > :not(style):first-child,
-    td > style:first-child + * {
-      margin-top: 0;
+      border: `1px solid ${`var(--ds-border, ${N50A})`}`,
+      background: EXPAND_SELECTED_BACKGROUND
+    },
+    'td > :not(style):first-child, td > style:first-child + *': {
+      marginTop: 0
     }
-  `;
+  });
 };
-const contentStyles = styleProps => () => css`
+const contentStyles = styleProps => () =>
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+css`
     padding-top: ${styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)"};
     padding-right: ${"var(--ds-space-100, 8px)"};
     padding-left: ${"var(--ds-space-300, 24px)"};
@@ -146,40 +141,38 @@ const contentStyles = styleProps => () => css`
         }
       ` : ''}
   `;
-const titleInputStyles = () => css`
-  outline: none;
-  border: none;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  line-height: ${akEditorLineHeight};
-  font-weight: normal;
-  color: ${`var(--ds-text-subtlest, ${N200A})`};
-  background: transparent;
-  display: flex;
-  flex: 1;
-  padding: 0 0 0 ${"var(--ds-space-050, 4px)"};
-  width: 100%;
-
-  &::placeholder {
-    opacity: 1;
-    color: ${`var(--ds-text-subtlest, ${N200})`};
+const titleInputStyles = () => css({
+  outline: 'none',
+  border: 'none',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  lineHeight: akEditorLineHeight,
+  fontWeight: 'normal',
+  color: `var(--ds-text-subtlest, ${N200A})`,
+  background: 'transparent',
+  display: 'flex',
+  flex: 1,
+  padding: `0 0 0 ${"var(--ds-space-050, 4px)"}`,
+  width: '100%',
+  '&::placeholder': {
+    opacity: 1,
+    color: `var(--ds-text-subtlest, ${N200})`
   }
-`;
-const titleContainerStyles = () => css`
-  padding: 0;
-  display: flex;
-  align-items: flex-start;
-  background: none;
-  border: none;
-  font-size: ${relativeFontSizeToBase16(fontSize())};
-  width: 100%;
-  color: ${`var(--ds-text-subtle, ${N300A})`};
-  overflow: hidden;
-  cursor: pointer;
-
-  &:focus {
-    outline: 0;
+});
+const titleContainerStyles = () => css({
+  padding: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  background: 'none',
+  border: 'none',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  width: '100%',
+  color: `var(--ds-text-subtle, ${N300A})`,
+  overflow: 'hidden',
+  cursor: 'pointer',
+  '&:focus': {
+    outline: 0
   }
-`;
+});
 export const sharedExpandStyles = {
   titleInputStyles,
   titleContainerStyles,

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

@@ -1,13 +1,13 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-const separator = css`
-  background: ${`var(--ds-border, ${N30})`};
-  width: 1px;
-  height: 20px;
-  margin: 0 ${"var(--ds-space-050, 4px)"};
-  align-self: center;
-`;
+const separator = css({
+  background: `var(--ds-border, ${N30})`,
+  width: '1px',
+  height: '20px',
+  margin: `0 ${"var(--ds-space-050, 4px)"}`,
+  alignSelf: 'center'
+});
 export default (() => jsx("div", {
   css: separator,
   className: "separator"

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

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
-const editIconStyles = css`
-  width: 20px;
-`;
+const editIconStyles = css({
+  width: '20px'
+});
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export const SmallerEditIcon = () => {

package/dist/es2019/ui/MediaSingle/link.js

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
-export const mediaLinkStyle = css`
-  position: absolute;
-  background: transparent;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-`;
+export const mediaLinkStyle = css({
+  position: 'absolute',
+  background: 'transparent',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  cursor: 'pointer',
+  width: '100%',
+  height: '100%'
+});

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

@@ -5,23 +5,23 @@ import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { h200 } from '@atlaskit/theme/typography';
-const errorColor = css`
-  color: ${`var(--ds-text-danger, ${R400})`};
-`;
-const validColor = css`
-  color: ${`var(--ds-text-success, ${G400})`};
-`;
-const messageStyle = () => css`
-  ${h200()} font-weight: normal;
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-top: ${"var(--ds-space-050, 4px)"};
-  display: flex;
-  justify-content: baseline;
-`;
-const iconWrapperStyle = css`
-  display: flex;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-`;
+const errorColor = css({
+  color: `var(--ds-text-danger, ${R400})`
+});
+const validColor = css({
+  color: `var(--ds-text-success, ${G400})`
+});
+const messageStyle = () => css(h200(), {
+  fontWeight: 'normal',
+  color: `var(--ds-text-subtlest, ${N200})`,
+  marginTop: "var(--ds-space-050, 4px)",
+  display: 'flex',
+  justifyContent: 'baseline'
+});
+const iconWrapperStyle = css({
+  display: 'flex',
+  marginRight: "var(--ds-space-050, 4px)"
+});
 export const HelperMessage = ({
   children
 }) => jsx("div", {

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

@@ -2,37 +2,33 @@ import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-export const panelTextInput = css`
-  input& {
-    background: transparent;
-    border: 2px solid ${`var(--ds-border, ${N30})`};
-    border-radius: 0;
-    box-sizing: content-box;
-    color: ${`var(--ds-text-subtle, ${N400})`};
-    flex-grow: 1;
-    font-size: ${relativeFontSizeToBase16(13)};
-    line-height: 20px;
-    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"}
-      ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"};
-    min-width: 145px;
-
+export const panelTextInput = css({
+  'input&': {
+    background: 'transparent',
+    border: `2px solid ${`var(--ds-border, ${N30})`}`,
+    borderRadius: 0,
+    boxSizing: 'content-box',
+    color: `var(--ds-text-subtle, ${N400})`,
+    flexGrow: 1,
+    fontSize: relativeFontSizeToBase16(13),
+    lineHeight: '20px',
+    padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"} ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`,
+    minWidth: '145px',
     /* Hides IE10+ built-in [x] clear input button */
-    &::-ms-clear {
-      display: none;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: ${`var(--ds-border-focused, ${B100})`};
-    }
-
-    &::placeholder {
-      color: ${`var(--ds-text-subtlest, ${N100})`};
+    '&::-ms-clear': {
+      display: 'none'
+    },
+    '&:focus': {
+      outline: 'none',
+      borderColor: `var(--ds-border-focused, ${B100})`
+    },
+    '&::placeholder': {
+      color: `var(--ds-text-subtlest, ${N100})`
     }
   }
-`;
-export const panelTextInputWithCustomWidth = width => css`
-  input& {
-    width: ${width}px;
+});
+export const panelTextInputWithCustomWidth = width => css({
+  'input&': {
+    width: `${width}px`
   }
-`;
+});

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

@@ -19,9 +19,10 @@ export class PortalProviderAPI extends EventDispatcher {
     this.onAnalyticsEvent = onAnalyticsEvent;
     this.useAnalyticsContext = analyticsContext;
   }
-  render(children, container, hasAnalyticsContext = false, hasIntlContext = false) {
+  render(children, container, key, hasAnalyticsContext = false, hasIntlContext = false) {
     this.portals.set(container, {
-      children: children,
+      key,
+      children,
       hasAnalyticsContext,
       hasIntlContext
     });
@@ -57,7 +58,7 @@ export class PortalProviderAPI extends EventDispatcher {
       unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
     });
   }
-  remove(container) {
+  remove(key, container) {
     this.portals.delete(container);
 
     // There is a race condition that can happen caused by Prosemirror vs React,