@atlaskit/editor-common 78.29.3 → 78.30.1

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

@@ -1,8 +1,8 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
 
 import React, { forwardRef } from 'react';
@@ -50,10 +50,30 @@ export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   }, children);
 };
 var expandIconWrapperStyle = function expandIconWrapperStyle() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), "var(--ds-icon, ".concat(N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"), akEditorSwoopCubicBezier);
+  return css({
+    cursor: 'pointer',
+    display: 'flex',
+    color: "var(--ds-icon, ".concat(N90, ")"),
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    width: '24px',
+    height: '24px',
+    '&:hover': {
+      background: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+    },
+    svg: {
+      transition: "transform 0.2s ".concat(akEditorSwoopCubicBezier)
+    }
+  });
 };
-var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
-export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
+var expandIconWrapperExpandedStyle = css({
+  svg: {
+    transform: 'rotate(90deg)'
+  }
+});
+export var expandLayoutWrapperStyle = css({
+  width: "var(--ds-space-300, 24px)",
+  height: "var(--ds-space-300, 24px)"
+});
 export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
@@ -73,19 +93,71 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function () {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", ";\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", ";\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND, margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N50A, ")"), EXPAND_SELECTED_BACKGROUND);
+    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 ".concat(akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(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 ".concat("var(--ds-border, ".concat(N50A, ")")),
+        background: EXPAND_SELECTED_BACKGROUND
+      },
+      'td > :not(style):first-child, td > style:first-child + *': {
+        marginTop: 0
+      }
+    });
   };
 };
 var contentStyles = function contentStyles(styleProps) {
   return function () {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    margin-left: ", ";\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '');
+    return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+      css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-left: ", ";\n    margin-left: ", ";\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          user-select: none;\n        }\n      " : '')
+    );
   };
 };
 var titleInputStyles = function titleInputStyles() {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", ";\n  width: 100%;\n\n  &::placeholder {\n    opacity: 1;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, "var(--ds-text-subtlest, ".concat(N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(N200, ")"));
+  return css({
+    outline: 'none',
+    border: 'none',
+    fontSize: relativeFontSizeToBase16(fontSize()),
+    lineHeight: akEditorLineHeight,
+    fontWeight: 'normal',
+    color: "var(--ds-text-subtlest, ".concat(N200A, ")"),
+    background: 'transparent',
+    display: 'flex',
+    flex: 1,
+    padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
+    width: '100%',
+    '&::placeholder': {
+      opacity: 1,
+      color: "var(--ds-text-subtlest, ".concat(N200, ")")
+    }
+  });
 };
 var titleContainerStyles = function titleContainerStyles() {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), "var(--ds-text-subtle, ".concat(N300A, ")"));
+  return css({
+    padding: 0,
+    display: 'flex',
+    alignItems: 'flex-start',
+    background: 'none',
+    border: 'none',
+    fontSize: relativeFontSizeToBase16(fontSize()),
+    width: '100%',
+    color: "var(--ds-text-subtle, ".concat(N300A, ")"),
+    overflow: 'hidden',
+    cursor: 'pointer',
+    '&:focus': {
+      outline: 0
+    }
+  });
 };
 export var sharedExpandStyles = {
   titleInputStyles: titleInputStyles,

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

@@ -1,9 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-var separator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 ", ";\n  align-self: center;\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-space-050, 4px)");
+var separator = css({
+  background: "var(--ds-border, ".concat(N30, ")"),
+  width: '1px',
+  height: '20px',
+  margin: "0 ".concat("var(--ds-space-050, 4px)"),
+  alignSelf: 'center'
+});
 export default (function () {
   return jsx("div", {
     css: separator,

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

@@ -1,9 +1,9 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
-var editIconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 20px;\n"])));
+var editIconStyles = css({
+  width: '20px'
+});
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export var SmallerEditIcon = function SmallerEditIcon() {

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

@@ -1,4 +1,12 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-export var mediaLinkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  background: transparent;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n"])));
+export var mediaLinkStyle = css({
+  position: 'absolute',
+  background: 'transparent',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  cursor: 'pointer',
+  width: '100%',
+  height: '100%'
+});

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
@@ -7,12 +5,25 @@ 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';
-var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
-var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
+var errorColor = css({
+  color: "var(--ds-text-danger, ".concat(R400, ")")
+});
+var validColor = css({
+  color: "var(--ds-text-success, ".concat(G400, ")")
+});
 var messageStyle = function messageStyle() {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), h200(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
+  return css(h200(), {
+    fontWeight: 'normal',
+    color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+    marginTop: "var(--ds-space-050, 4px)",
+    display: 'flex',
+    justifyContent: 'baseline'
+  });
 };
-var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+var iconWrapperStyle = css({
+  display: 'flex',
+  marginRight: "var(--ds-space-050, 4px)"
+});
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
   return jsx("div", {

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

@@ -1,10 +1,36 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 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 var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 2px solid ", ";\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: ", " ", "\n      ", " ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-border, ".concat(N30, ")"), "var(--ds-text-subtle, ".concat(N400, ")"), relativeFontSizeToBase16(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B100, ")"), "var(--ds-text-subtlest, ".concat(N100, ")"));
+export var panelTextInput = css({
+  'input&': {
+    background: 'transparent',
+    border: "2px solid ".concat("var(--ds-border, ".concat(N30, ")")),
+    borderRadius: 0,
+    boxSizing: 'content-box',
+    color: "var(--ds-text-subtle, ".concat(N400, ")"),
+    flexGrow: 1,
+    fontSize: relativeFontSizeToBase16(13),
+    lineHeight: '20px',
+    padding: "var(--ds-space-075, 6px)".concat(" ", "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',
+      borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+    },
+    '&::placeholder': {
+      color: "var(--ds-text-subtlest, ".concat(N100, ")")
+    }
+  }
+});
 export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+  return css({
+    'input&': {
+      width: "".concat(width, "px")
+    }
+  });
 };

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

@@ -35,10 +35,11 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   }
   _createClass(PortalProviderAPI, [{
     key: "render",
-    value: function render(children, container) {
-      var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    value: function render(children, container, key) {
+      var hasAnalyticsContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+      var hasIntlContext = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
       this.portals.set(container, {
+        key: key,
         children: children,
         hasAnalyticsContext: hasAnalyticsContext,
         hasIntlContext: hasIntlContext
@@ -79,7 +80,7 @@ export var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
     }
   }, {
     key: "remove",
-    value: function remove(container) {
+    value: function remove(key, container) {
       this.portals.delete(container);
 
       // There is a race condition that can happen caused by Prosemirror vs React,

package/dist/esm/ui/UnsupportedBlock/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -13,7 +11,23 @@ import { ACTION_SUBJECT_ID } from '../../analytics';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: ", " 0;\n  min-height: 24px;\n  padding: ", ";\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), "var(--ds-background-disabled, ".concat(N30, ")"), "var(--ds-border-disabled, ".concat(N50, ")"), borderRadius(), relativeFontSizeToBase16(fontSize()), "var(--ds-space-100, 8px)", "var(--ds-space-150, 12px)");
+var blockNodeStyle = css({
+  background: "var(--ds-background-disabled, ".concat(N30, ")"),
+  border: "1px dashed ".concat("var(--ds-border-disabled, ".concat(N50, ")")),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxSizing: 'border-box',
+  cursor: 'default',
+  display: 'flex',
+  fontSize: relativeFontSizeToBase16(fontSize()),
+  margin: "var(--ds-space-100, 8px)".concat(" 0"),
+  minHeight: '24px',
+  padding: "var(--ds-space-150, 12px)",
+  textAlign: 'center',
+  verticalAlign: 'text-bottom',
+  minWidth: '120px',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,
     intl = _ref.intl,

package/dist/esm/ui/WidthProvider/index.js

@@ -1,11 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
+var styles = css({
+  position: 'relative',
+  width: '100%'
+});
 var SCROLLBAR_WIDTH = 30;
 export function getBreakpoint() {
   var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -49,7 +51,7 @@ export var WidthProvider = function WidthProvider(_ref) {
   });
   var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
   return jsx("div", {
-    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        width: 100%;\n      "]))),
+    css: styles,
     className: className
   }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
     setWidth: updateWidth,

package/dist/esm/ui-color/ColorPalette/styles.js

@@ -1,4 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-export var colorPaletteWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", ";\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), "var(--ds-space-100, 8px)");
+export var colorPaletteWrapper = css({
+  padding: "0 ".concat("var(--ds-space-100, 8px)"),
+  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */
+  display: 'flex'
+});

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -11,7 +11,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -32,16 +32,26 @@ import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
 import { ArrowKeyNavigationProvider } from '../ArrowKeyNavigationProvider';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
-var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-var focusedMenuItemStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-shadow: inset 0px 0px 0px 2px ", ";\n  outline: none;\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
+var wrapper = css({
+  /* tooltip in ToolbarButton is display:block */
+  '& > div > div': {
+    display: 'flex'
+  }
+});
+var focusedMenuItemStyle = css({
+  boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(B100, ")")),
+  outline: 'none'
+});
 var buttonStyles = function buttonStyles(isActive, submenuActive) {
   if (isActive) {
     /**
      * Hack for item to imitate old dropdown-menu selected styles
      */
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      > span,\n      > span:hover,\n      > span:active {\n        background: ", ";\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-background-selected, #6c798f)", "var(--ds-text, #fff)", focusedMenuItemStyle);
   } else {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      ", "\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n          }"), "var(--ds-text-disabled, ".concat(N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      > span:hover[aria-disabled='false'] {\n        color: ", ";\n        background-color: ", ";\n      }\n      ", "\n      > span[aria-disabled='true'] {\n        color: ", ";\n      }\n      :focus > span[aria-disabled='false'] {\n        ", ";\n      }\n      :focus-visible,\n      :focus-visible > span[aria-disabled='false'] {\n        outline: none;\n      }\n    "])), "var(--ds-text, ".concat(N900, ")"), "var(--ds-background-neutral-subtle-hovered, rgb(244, 245, 247))", !submenuActive && "\n          > span:active[aria-disabled='false'] {\n            background-color: ".concat("var(--ds-background-neutral-subtle-pressed, rgb(179, 212, 255))", ";\n          }"), "var(--ds-text-disabled, ".concat(N70, ")"), focusedMenuItemStyle); // The default focus-visible style is removed to ensure consistency across browsers
   }
 };
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);

package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 /* eslint-disable no-console */
 
@@ -17,7 +15,11 @@ export var KeyDownHandlerContext = /*#__PURE__*/React.createContext({
   handleArrowRight: function handleArrowRight() {},
   handleTab: function handleTab() {}
 });
-var centeredToolbarContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n"])));
+var centeredToolbarContainer = css({
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center'
+});
 
 /**
  * This component is a wrapper of main toolbar which listens to keydown events of children

package/dist/esm/ui-menu/ToolbarButton/index.js

@@ -1,6 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/index.tsx`
@@ -14,7 +12,10 @@ import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
 import Button from './styles';
 export var TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+var buttonWrapper = css({
+  display: 'flex',
+  height: '100%'
+});
 var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var buttonId = props.buttonId,
     testId = props.testId,

package/dist/types/react-node-view/generateUniqueNodeKey.d.ts

@@ -0,0 +1 @@
+export declare const generateUniqueNodeKey: () => string;

package/dist/types/react-node-view/index.d.ts

@@ -22,6 +22,7 @@ export default class ReactNodeView<P = ReactComponentProps> implements NodeView
     getPos: getPosHandler;
     contentDOM: HTMLElement | null | undefined;
     node: PMNode;
+    key: string;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, reactComponentProps?: P, reactComponent?: React.ComponentType<React.PropsWithChildren<any>>, hasAnalyticsContext?: boolean, viewShouldUpdate?: shouldUpdate, hasIntlContext?: boolean);
     /**
      * This method exists to move initialization logic out of the constructor,

package/dist/types/types/feature-flags.d.ts

@@ -80,6 +80,8 @@ export type FeatureFlags = {
      */
     catchAllTracking?: boolean;
     /**
+     * @private
+     * @deprecated This is always on now and this prop is no longer required.
      * @description
      * Yield to user interaction work before sending analytics
      *

package/dist/types/ui/Caption/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     selected?: boolean;
     hasContent?: boolean;

package/dist/types/ui/PortalProvider/index.d.ts

@@ -12,6 +12,7 @@ export type PortalRendererState = {
     portals: Portals;
 };
 type MountedPortal = {
+    key: string;
     children: () => React.ReactChild | null;
     hasAnalyticsContext: boolean;
     hasIntlContext: boolean;
@@ -24,11 +25,11 @@ export declare class PortalProviderAPI extends EventDispatcher {
     useAnalyticsContext?: boolean;
     constructor(intl: IntlShape, onAnalyticsEvent?: FireAnalyticsCallback, analyticsContext?: boolean);
     setContext: (context: any) => void;
-    render(children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, hasAnalyticsContext?: boolean, hasIntlContext?: boolean): void;
+    render(children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, key: string, hasAnalyticsContext?: boolean, hasIntlContext?: boolean): void;
     forceUpdate({ intl }: {
         intl: IntlShape;
     }): void;
-    remove(container: HTMLElement): void;
+    remove(key: string, container: HTMLElement): void;
 }
 export declare const PortalProvider: React.FC<import("react-intl-next").WithIntlProps<BasePortalProviderProps>> & {
     WrappedComponent: React.ComponentType<BasePortalProviderProps>;

package/dist/types/ui/UnsupportedBlock/index.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { UnsupportedContentTooltipPayload } from '../../utils';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { UnsupportedContentTooltipPayload } from '../../utils';
 export interface Props {
     node?: PMNode;
     children?: React.ReactNode;

package/dist/types-ts4.5/react-node-view/generateUniqueNodeKey.d.ts

@@ -0,0 +1 @@
+export declare const generateUniqueNodeKey: () => string;

package/dist/types-ts4.5/react-node-view/index.d.ts

@@ -22,6 +22,7 @@ export default class ReactNodeView<P = ReactComponentProps> implements NodeView
     getPos: getPosHandler;
     contentDOM: HTMLElement | null | undefined;
     node: PMNode;
+    key: string;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, reactComponentProps?: P, reactComponent?: React.ComponentType<React.PropsWithChildren<any>>, hasAnalyticsContext?: boolean, viewShouldUpdate?: shouldUpdate, hasIntlContext?: boolean);
     /**
      * This method exists to move initialization logic out of the constructor,

package/dist/types-ts4.5/types/feature-flags.d.ts

@@ -80,6 +80,8 @@ export type FeatureFlags = {
      */
     catchAllTracking?: boolean;
     /**
+     * @private
+     * @deprecated This is always on now and this prop is no longer required.
      * @description
      * Yield to user interaction work before sending analytics
      *

package/dist/types-ts4.5/ui/Caption/index.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 type Props = {
     selected?: boolean;
     hasContent?: boolean;

package/dist/types-ts4.5/ui/PortalProvider/index.d.ts

@@ -12,6 +12,7 @@ export type PortalRendererState = {
     portals: Portals;
 };
 type MountedPortal = {
+    key: string;
     children: () => React.ReactChild | null;
     hasAnalyticsContext: boolean;
     hasIntlContext: boolean;
@@ -24,11 +25,11 @@ export declare class PortalProviderAPI extends EventDispatcher {
     useAnalyticsContext?: boolean;
     constructor(intl: IntlShape, onAnalyticsEvent?: FireAnalyticsCallback, analyticsContext?: boolean);
     setContext: (context: any) => void;
-    render(children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, hasAnalyticsContext?: boolean, hasIntlContext?: boolean): void;
+    render(children: () => React.ReactChild | JSX.Element | null, container: HTMLElement, key: string, hasAnalyticsContext?: boolean, hasIntlContext?: boolean): void;
     forceUpdate({ intl }: {
         intl: IntlShape;
     }): void;
-    remove(container: HTMLElement): void;
+    remove(key: string, container: HTMLElement): void;
 }
 export declare const PortalProvider: React.FC<import("react-intl-next").WithIntlProps<BasePortalProviderProps>> & {
     WrappedComponent: React.ComponentType<BasePortalProviderProps>;

package/dist/types-ts4.5/ui/UnsupportedBlock/index.d.ts

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { UnsupportedContentTooltipPayload } from '../../utils';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { UnsupportedContentTooltipPayload } from '../../utils';
 export interface Props {
     node?: PMNode;
     children?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.29.3",
+  "version": "78.30.1",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -130,7 +130,7 @@
     "@atlaskit/primitives": "^5.5.0",
     "@atlaskit/profilecard": "^19.11.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/smart-card": "^26.56.0",
+    "@atlaskit/smart-card": "^26.57.0",
     "@atlaskit/smart-user-picker": "^6.9.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/task-decision": "^17.9.0",
@@ -162,6 +162,7 @@
     "react-loadable": "^5.1.0",
     "react-virtualized": "^9.8.0",
     "rusha": "^0.8.13",
+    "uuid": "^3.1.0",
     "w3c-keyname": "^2.1.8"
   },
   "peerDependencies": {