@atlaskit/editor-common 74.53.0 → 74.54.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.54.0
+
+### Minor Changes
+
+- [`b08849ad727`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b08849ad727) - [ux] Added tooltip to table column resize handles, also added a tooltip to the custom table width table resizer handle
+
+## 74.53.1
+
+### Patch Changes
+
+- [`eab48233583`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eab48233583) - Calculate parent content width properly when inserting a nested media single node
+
 ## 74.53.0
 
 ### Minor Changes

package/dist/cjs/media-single/utils.js

@@ -7,7 +7,7 @@ exports.calcMinWidth = exports.calcMediaSinglePixelWidth = exports.calcMediaSing
 exports.calculateOffsetLeft = calculateOffsetLeft;
 exports.getMediaSingleInitialWidth = exports.getMaxWidthForNestedNodeNext = exports.getMaxWidthForNestedNode = void 0;
 exports.getMediaSinglePixelWidth = getMediaSinglePixelWidth;
-exports.roundToNearest = exports.getParentWidthForNestedMediaSingleNode = void 0;
+exports.roundToNearest = exports.getParentWidthForNestedMediaSingleNodeForInsertion = exports.getParentWidthForNestedMediaSingleNode = void 0;
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _richMediaUtils = require("../utils/rich-media-utils");
 var _constants = require("./constants");
@@ -174,20 +174,28 @@ var getMaxWidthForNestedNode = function getMaxWidthForNestedNode(view, pos) {
   }
   return null;
 };
+exports.getMaxWidthForNestedNode = getMaxWidthForNestedNode;
+var calcParentPadding = function calcParentPadding(view, resolvedPos) {
+  // since table has constant padding, use hardcoded constant instead of query the dom
+  var tablePadding = 8;
+  var _view$state$schema$no = view.state.schema.nodes,
+    tableCell = _view$state$schema$no.tableCell,
+    tableHeader = _view$state$schema$no.tableHeader;
+  return [tableCell, tableHeader].includes(resolvedPos.parent.type) ? tablePadding * 2 : 0;
+};
 
 /**
  * Get parent width for a nested media single node for new experience
  * @param view Editor view
  * @param pos node position
  */
-exports.getMaxWidthForNestedNode = getMaxWidthForNestedNode;
-var getMaxWidthForNestedNodeNext = function getMaxWidthForNestedNodeNext(view, pos) {
+var getMaxWidthForNestedNodeNext = function getMaxWidthForNestedNodeNext(view, pos, forInsertion) {
   if (typeof pos !== 'number') {
     return null;
   }
   var $pos = view.state.doc.resolve(pos);
   if ($pos && $pos.parent.type.name !== 'doc') {
-    return getParentWidthForNestedMediaSingleNode($pos, view);
+    return forInsertion ? getParentWidthForNestedMediaSingleNodeForInsertion($pos, view) : getParentWidthForNestedMediaSingleNode($pos, view);
   }
   return null;
 };
@@ -195,19 +203,22 @@ exports.getMaxWidthForNestedNodeNext = getMaxWidthForNestedNodeNext;
 var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
   var domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && _richMediaUtils.floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
-    var _view$state$schema$no = view.state.schema.nodes,
-      tableCell = _view$state$schema$no.tableCell,
-      tableHeader = _view$state$schema$no.tableHeader;
-    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
-      // since table has constant padding, use hardcoded constant instead of query the dom
-      var tablePadding = 8;
-      return domNode.parentElement.offsetWidth - tablePadding * 2;
-    }
-    return domNode.parentElement.offsetWidth;
+    var parentPadding = calcParentPadding(view, resolvedPos);
+    return domNode.parentElement.offsetWidth - parentPadding;
   }
   if (domNode instanceof HTMLElement) {
     return domNode.offsetWidth;
   }
   return null;
 };
-exports.getParentWidthForNestedMediaSingleNode = getParentWidthForNestedMediaSingleNode;
+exports.getParentWidthForNestedMediaSingleNode = getParentWidthForNestedMediaSingleNode;
+var getParentWidthForNestedMediaSingleNodeForInsertion = function getParentWidthForNestedMediaSingleNodeForInsertion(resolvedPos, view) {
+  var parentPos = resolvedPos.before(resolvedPos.depth);
+  var parentDomNode = view.nodeDOM(parentPos);
+  var parentPadding = calcParentPadding(view, resolvedPos);
+  if (parentDomNode instanceof HTMLElement) {
+    return parentDomNode.offsetWidth - parentPadding;
+  }
+  return null;
+};
+exports.getParentWidthForNestedMediaSingleNodeForInsertion = getParentWidthForNestedMediaSingleNodeForInsertion;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.53.0";
+var packageVersion = "74.54.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/resizer/Resizer.js

@@ -11,16 +11,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _classnames3 = _interopRequireDefault(require("classnames"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _reResizable = require("re-resizable");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _resizer = require("../styles/shared/resizer");
-var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleHeightSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "innerPadding", "snap", "snapGap", "handleMarginTop", "isHandleVisible"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleHeightSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "innerPadding", "snap", "snapGap", "handleMarginTop", "isHandleVisible", "handleComponent", "handleHighlight", "handleTooltipContent"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function ResizerNext(props) {
-  var _classnames, _classnames2;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isResizing = _useState2[0],
@@ -49,6 +49,10 @@ function ResizerNext(props) {
     handleMarginTop = props.handleMarginTop,
     _props$isHandleVisibl = props.isHandleVisible,
     isHandleVisible = _props$isHandleVisibl === void 0 ? false : _props$isHandleVisibl,
+    handleComponent = props.handleComponent,
+    _props$handleHighligh = props.handleHighlight,
+    handleHighlight = _props$handleHighligh === void 0 ? 'none' : _props$handleHighligh,
+    handleTooltipContent = props.handleTooltipContent,
     otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onResizeStart = _react.default.useCallback(function (event) {
     // prevent creating a drag event on Firefox
@@ -84,8 +88,8 @@ function ResizerNext(props) {
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   var handles = {
-    left: (0, _classnames3.default)(_resizer.resizerHandleClassName[handleHeightSize], (_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(handleClassName, "-left"), !!handleClassName), (0, _defineProperty2.default)(_classnames, _resizer.resizerHandleLeftClassName, !handleClassName), (0, _defineProperty2.default)(_classnames, _resizer.resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames)),
-    right: (0, _classnames3.default)(_resizer.resizerHandleClassName[handleHeightSize], (_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(handleClassName, "-right"), !!handleClassName), (0, _defineProperty2.default)(_classnames2, _resizer.resizerHandleRightClassName, !handleClassName), (0, _defineProperty2.default)(_classnames2, _resizer.resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames2))
+    left: (0, _classnames.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'left', handleHeightSize, handleAlignmentMethod),
+    right: (0, _classnames.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'right', handleHeightSize, handleAlignmentMethod)
   };
   var baseHandleStyles = {
     width: handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)",
@@ -106,10 +110,59 @@ function ResizerNext(props) {
       right: offset
     }, handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.right)
   };
-  var resizerClassName = (0, _classnames3.default)(className, _resizer.resizerItemClassName, {
+  var resizerClassName = (0, _classnames.default)(className, _resizer.resizerItemClassName, {
     'is-resizing': isResizing,
     'display-handle': isHandleVisible
   }, appearance);
+  var finalHandleComponent = (0, _react.useMemo)(function () {
+    if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent && !handleComponent) {
+      return {
+        left: /*#__PURE__*/_react.default.createElement("div", {
+          className: _resizer.resizerHandleThumbClassName
+        }),
+        right: /*#__PURE__*/_react.default.createElement("div", {
+          className: _resizer.resizerHandleThumbClassName
+        })
+      };
+    }
+
+    // If the handleComponent is set by the parent, then they're taking over control of the handle
+    if (handleComponent) {
+      return {
+        left: handleComponent.left && /*#__PURE__*/_react.default.cloneElement(handleComponent.left, {
+          className: _resizer.resizerHandleThumbClassName
+        }),
+        right: handleComponent.right && /*#__PURE__*/_react.default.cloneElement(handleComponent.right, {
+          className: _resizer.resizerHandleThumbClassName
+        })
+      };
+    }
+    var children = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)(_resizer.resizerHandleTrackClassName, handleHighlight)
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: _resizer.resizerHandleThumbClassName
+    }));
+    if (!!handleTooltipContent) {
+      return {
+        left: /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          content: handleTooltipContent,
+          hideTooltipOnClick: true,
+          position: "mouse",
+          mousePosition: "auto-start"
+        }, children),
+        right: /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+          content: handleTooltipContent,
+          hideTooltipOnClick: true,
+          position: "mouse",
+          mousePosition: "auto-start"
+        }, children)
+      };
+    }
+    return {
+      left: children,
+      right: children
+    };
+  }, [handleHighlight, handleTooltipContent, handleComponent]);
 
   // snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
   var snapGapActual = (0, _react.useMemo)(function () {
@@ -134,6 +187,7 @@ function ResizerNext(props) {
     onResizeStop: onResizeStop,
     resizeRatio: resizeRatio,
     snapGap: snapGapActual,
-    snap: snap
+    snap: snap,
+    handleComponent: finalHandleComponent
   }, otherProps), children);
 }

package/dist/cjs/styles/index.js

@@ -237,10 +237,22 @@ Object.defineProperty(exports, "paragraphSharedStyles", {
     return _paragraph.paragraphSharedStyles;
   }
 });
-Object.defineProperty(exports, "resizerHandleShadowClassName", {
+Object.defineProperty(exports, "resizerHandleClassName", {
   enumerable: true,
   get: function get() {
-    return _resizer.resizerHandleShadowClassName;
+    return _resizer.resizerHandleClassName;
+  }
+});
+Object.defineProperty(exports, "resizerHandleThumbClassName", {
+  enumerable: true,
+  get: function get() {
+    return _resizer.resizerHandleThumbClassName;
+  }
+});
+Object.defineProperty(exports, "resizerHandleTrackClassName", {
+  enumerable: true,
+  get: function get() {
+    return _resizer.resizerHandleTrackClassName;
   }
 });
 Object.defineProperty(exports, "resizerStyles", {

package/dist/cjs/styles/shared/resizer.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerStyles = exports.resizerItemClassName = exports.resizerHandleZIndex = exports.resizerHandleStickyClassName = exports.resizerHandleSmallClassName = exports.resizerHandleShadowClassName = exports.resizerHandleRightClassName = exports.resizerHandleMediumClassName = exports.resizerHandleLeftClassName = exports.resizerHandleLargeClassName = exports.resizerHandleClassName = void 0;
+exports.resizerStyles = exports.resizerItemClassName = exports.resizerHandleZIndex = exports.resizerHandleTrackClassName = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -17,30 +17,16 @@ var _templateObject;
 
 var resizerItemClassName = 'resizer-item';
 exports.resizerItemClassName = resizerItemClassName;
-var resizerHandleRightClassName = 'resizer-handle-right';
-exports.resizerHandleRightClassName = resizerHandleRightClassName;
-var resizerHandleLeftClassName = 'resizer-handle-left';
-exports.resizerHandleLeftClassName = resizerHandleLeftClassName;
-var resizerHandleStickyClassName = 'resizer-handle-sticky';
-exports.resizerHandleStickyClassName = resizerHandleStickyClassName;
-var resizerHandleShadowClassName = 'resizer-handle-shadow';
+var resizerHandleClassName = 'resizer-handle';
+exports.resizerHandleClassName = resizerHandleClassName;
+var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
+exports.resizerHandleTrackClassName = resizerHandleTrackClassName;
+var resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
 
 // akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
-exports.resizerHandleShadowClassName = resizerHandleShadowClassName;
+exports.resizerHandleThumbClassName = resizerHandleThumbClassName;
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 var resizerHandleZIndex = 99;
 exports.resizerHandleZIndex = resizerHandleZIndex;
-var resizerHandleSmallClassName = 'resizer-handle-small';
-exports.resizerHandleSmallClassName = resizerHandleSmallClassName;
-var resizerHandleMediumClassName = 'resizer-handle-medium';
-exports.resizerHandleMediumClassName = resizerHandleMediumClassName;
-var resizerHandleLargeClassName = 'resizer-handle-large';
-exports.resizerHandleLargeClassName = resizerHandleLargeClassName;
-var resizerHandleClassName = {
-  small: resizerHandleSmallClassName,
-  medium: resizerHandleMediumClassName,
-  large: resizerHandleLargeClassName
-};
-exports.resizerHandleClassName = resizerHandleClassName;
-var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    justify-content: center;\n    width: 7px;\n    transition: visibility 0.2s;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n    transition: background-color 0.2s;\n\n    border-radius: 6px;\n  }\n\n  .", " {\n    will-change: width;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", ",\n    .", ".display-handle\n    .", ",\n    .", ".display-handle\n    .", " {\n    visibility: visible;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after,\n    .", ".display-handle\n    .", "::after,\n    .", ".display-handle\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".danger {\n    &\n      .", "::after,\n      .", "::after {\n      transition: none;\n      background: ", ";\n    }\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", " {\n    visibility: visible;\n    background-color: ", ";\n    opacity: 0.5;\n  }\n"])), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border, ".concat(_colors.N60, ")"), resizerItemClassName, resizerHandleRightClassName, resizerHandleLeftClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandleClassName.medium, resizerHandleLeftClassName, resizerHandleClassName.medium, resizerHandleRightClassName, resizerHandleClassName.small, resizerHandleLeftClassName, resizerHandleClassName.small, resizerHandleRightClassName, resizerHandleClassName.large, resizerHandleLeftClassName, resizerHandleClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName, resizerHandleShadowClassName, resizerHandleRightClassName, resizerHandleShadowClassName, resizerHandleLeftClassName, resizerHandleShadowClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"));
+var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    will-change: width;\n\n    &:hover,\n    &.display-handle {\n      & .", " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    &.is-resizing {\n      & .", " {\n        background: ", ";\n      }\n    }\n\n    &.danger {\n      & .", " {\n        transition: none;\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 7px;\n    transition: visibility 0.2s, opacity 0.2s;\n\n    /*\n      NOTE: The below style is targetted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n    & div[role='presentation'] {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n\n    /*\n      Handle Positions\n    */\n    &.left {\n      align-items: flex-start;\n    }\n    &.right {\n      align-items: flex-end;\n    }\n\n    /*\n      Handle Sizing\n    */\n    &.small {\n      & .", " {\n        height: 43px;\n      }\n    }\n    &.medium {\n      & .", " {\n        height: 64px;\n      }\n    }\n    &.large {\n      & .", " {\n        height: 96px;\n      }\n    }\n\n    /*\n      Handle Alignment\n    */\n    &.sticky {\n      & .", " {\n        position: sticky;\n        top: ", ";\n        bottom: ", ";\n      }\n    }\n\n    &:hover {\n      & .", " {\n        background: ", ";\n      }\n\n      & .", " {\n        visibility: visible;\n        opacity: 0.5;\n      }\n    }\n  }\n\n  .", " {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n\n    background: ", ";\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    height: calc(100% - 24px);\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n    &.none {\n      background: none;\n    }\n\n    &.shadow {\n      background: ", ";\n    }\n  }\n\n  .", " {\n    & .", " {\n      background: ", ";\n    }\n  }\n"])), resizerItemClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleThumbClassName, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), resizerHandleClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-border, ".concat(_colors.N60, ")"), resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"));
 exports.resizerStyles = resizerStyles;

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

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.53.0";
+var packageVersion = "74.54.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/media-single/utils.js

@@ -151,38 +151,48 @@ export const getMaxWidthForNestedNode = (view, pos) => {
   }
   return null;
 };
+const calcParentPadding = (view, resolvedPos) => {
+  // since table has constant padding, use hardcoded constant instead of query the dom
+  const tablePadding = 8;
+  const {
+    tableCell,
+    tableHeader
+  } = view.state.schema.nodes;
+  return [tableCell, tableHeader].includes(resolvedPos.parent.type) ? tablePadding * 2 : 0;
+};
 
 /**
  * Get parent width for a nested media single node for new experience
  * @param view Editor view
  * @param pos node position
  */
-export const getMaxWidthForNestedNodeNext = (view, pos) => {
+export const getMaxWidthForNestedNodeNext = (view, pos, forInsertion) => {
   if (typeof pos !== 'number') {
     return null;
   }
   const $pos = view.state.doc.resolve(pos);
   if ($pos && $pos.parent.type.name !== 'doc') {
-    return getParentWidthForNestedMediaSingleNode($pos, view);
+    return forInsertion ? getParentWidthForNestedMediaSingleNodeForInsertion($pos, view) : getParentWidthForNestedMediaSingleNode($pos, view);
   }
   return null;
 };
 export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
   const domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
-    const {
-      tableCell,
-      tableHeader
-    } = view.state.schema.nodes;
-    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
-      // since table has constant padding, use hardcoded constant instead of query the dom
-      const tablePadding = 8;
-      return domNode.parentElement.offsetWidth - tablePadding * 2;
-    }
-    return domNode.parentElement.offsetWidth;
+    const parentPadding = calcParentPadding(view, resolvedPos);
+    return domNode.parentElement.offsetWidth - parentPadding;
   }
   if (domNode instanceof HTMLElement) {
     return domNode.offsetWidth;
   }
   return null;
+};
+export const getParentWidthForNestedMediaSingleNodeForInsertion = (resolvedPos, view) => {
+  const parentPos = resolvedPos.before(resolvedPos.depth);
+  const parentDomNode = view.nodeDOM(parentPos);
+  const parentPadding = calcParentPadding(view, resolvedPos);
+  if (parentDomNode instanceof HTMLElement) {
+    return parentDomNode.offsetWidth - parentPadding;
+  }
+  return null;
 };

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 = "74.53.0";
+const packageVersion = "74.54.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/resizer/Resizer.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { resizerHandleClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
+import Tooltip from '@atlaskit/tooltip';
+import { resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
 export default function ResizerNext(props) {
   const [isResizing, setIsResizing] = useState(false);
   const resizable = useRef(null);
@@ -25,6 +26,9 @@ export default function ResizerNext(props) {
     snapGap,
     handleMarginTop,
     isHandleVisible = false,
+    handleComponent,
+    handleHighlight = 'none',
+    handleTooltipContent,
     ...otherProps
   } = props;
   const onResizeStart = React.useCallback(event => {
@@ -61,16 +65,8 @@ export default function ResizerNext(props) {
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   const handles = {
-    left: classnames(resizerHandleClassName[handleHeightSize], {
-      [`${handleClassName}-left`]: !!handleClassName,
-      [resizerHandleLeftClassName]: !handleClassName,
-      [resizerHandleStickyClassName]: handleAlignmentMethod === 'sticky'
-    }),
-    right: classnames(resizerHandleClassName[handleHeightSize], {
-      [`${handleClassName}-right`]: !!handleClassName,
-      [resizerHandleRightClassName]: !handleClassName,
-      [resizerHandleStickyClassName]: handleAlignmentMethod === 'sticky'
-    })
+    left: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'left', handleHeightSize, handleAlignmentMethod),
+    right: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'right', handleHeightSize, handleAlignmentMethod)
   };
   const baseHandleStyles = {
     width: handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)",
@@ -99,6 +95,55 @@ export default function ResizerNext(props) {
     'is-resizing': isResizing,
     'display-handle': isHandleVisible
   }, appearance);
+  const finalHandleComponent = useMemo(() => {
+    if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent && !handleComponent) {
+      return {
+        left: /*#__PURE__*/React.createElement("div", {
+          className: resizerHandleThumbClassName
+        }),
+        right: /*#__PURE__*/React.createElement("div", {
+          className: resizerHandleThumbClassName
+        })
+      };
+    }
+
+    // If the handleComponent is set by the parent, then they're taking over control of the handle
+    if (handleComponent) {
+      return {
+        left: handleComponent.left && /*#__PURE__*/React.cloneElement(handleComponent.left, {
+          className: resizerHandleThumbClassName
+        }),
+        right: handleComponent.right && /*#__PURE__*/React.cloneElement(handleComponent.right, {
+          className: resizerHandleThumbClassName
+        })
+      };
+    }
+    const children = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames(resizerHandleTrackClassName, handleHighlight)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: resizerHandleThumbClassName
+    }));
+    if (!!handleTooltipContent) {
+      return {
+        left: /*#__PURE__*/React.createElement(Tooltip, {
+          content: handleTooltipContent,
+          hideTooltipOnClick: true,
+          position: "mouse",
+          mousePosition: "auto-start"
+        }, children),
+        right: /*#__PURE__*/React.createElement(Tooltip, {
+          content: handleTooltipContent,
+          hideTooltipOnClick: true,
+          position: "mouse",
+          mousePosition: "auto-start"
+        }, children)
+      };
+    }
+    return {
+      left: children,
+      right: children
+    };
+  }, [handleHighlight, handleTooltipContent, handleComponent]);
 
   // snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
   const snapGapActual = useMemo(() => {
@@ -123,6 +168,7 @@ export default function ResizerNext(props) {
     onResizeStop: onResizeStop,
     resizeRatio: resizeRatio,
     snapGap: snapGapActual,
-    snap: snap
+    snap: snap,
+    handleComponent: finalHandleComponent
   }, otherProps), children);
 }

package/dist/es2019/styles/index.js

@@ -22,7 +22,7 @@ export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
-export { resizerStyles, resizerHandleShadowClassName } from './shared/resizer';
+export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, resizerHandleThumbClassName } from './shared/resizer';
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles } from './shared/embedCard';

package/dist/es2019/styles/shared/resizer.js

@@ -7,138 +7,146 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
 */
 
 export const resizerItemClassName = 'resizer-item';
-export const resizerHandleRightClassName = 'resizer-handle-right';
-export const resizerHandleLeftClassName = 'resizer-handle-left';
-export const resizerHandleStickyClassName = 'resizer-handle-sticky';
-export const resizerHandleShadowClassName = 'resizer-handle-shadow';
+export const resizerHandleClassName = 'resizer-handle';
+export const resizerHandleTrackClassName = `${resizerHandleClassName}-track`;
+export const resizerHandleThumbClassName = `${resizerHandleClassName}-thumb`;
 
 // akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
 const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export const resizerHandleZIndex = 99;
-export const resizerHandleSmallClassName = 'resizer-handle-small';
-export const resizerHandleMediumClassName = 'resizer-handle-medium';
-export const resizerHandleLargeClassName = 'resizer-handle-large';
-export const resizerHandleClassName = {
-  small: resizerHandleSmallClassName,
-  medium: resizerHandleMediumClassName,
-  large: resizerHandleLargeClassName
-};
 export const resizerStyles = css`
-  .${resizerHandleRightClassName}, .${resizerHandleLeftClassName} {
+  .${resizerItemClassName} {
+    will-change: width;
+
+    &:hover,
+    &.display-handle {
+      & .${resizerHandleClassName} {
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
+    &.is-resizing {
+      & .${resizerHandleThumbClassName} {
+        background: ${`var(--ds-border-focused, ${B200})`};
+      }
+    }
+
+    &.danger {
+      & .${resizerHandleThumbClassName} {
+        transition: none;
+        background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      }
+    }
+  }
+
+  .${resizerHandleClassName} {
     display: flex;
     visibility: hidden;
+    opacity: 0;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
     width: 7px;
-    transition: visibility 0.2s;
-  }
+    transition: visibility 0.2s, opacity 0.2s;
+
+    /*
+      NOTE: The below style is targetted at the div element added by the tooltip. We don't have any means of injecting styles
+      into the tooltip
+    */
+    & div[role='presentation'] {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
 
-  .${resizerHandleRightClassName} {
-    align-items: flex-end;
-  }
+    /*
+      Handle Positions
+    */
+    &.left {
+      align-items: flex-start;
+    }
+    &.right {
+      align-items: flex-end;
+    }
+
+    /*
+      Handle Sizing
+    */
+    &.small {
+      & .${resizerHandleThumbClassName} {
+        height: 43px;
+      }
+    }
+    &.medium {
+      & .${resizerHandleThumbClassName} {
+        height: 64px;
+      }
+    }
+    &.large {
+      & .${resizerHandleThumbClassName} {
+        height: 96px;
+      }
+    }
 
-  .${resizerHandleLeftClassName} {
-    align-items: flex-start;
+    /*
+      Handle Alignment
+    */
+    &.sticky {
+      & .${resizerHandleThumbClassName} {
+        position: sticky;
+        top: ${"var(--ds-space-150, 12px)"};
+        bottom: ${"var(--ds-space-150, 12px)"};
+      }
+    }
+
+    &:hover {
+      & .${resizerHandleThumbClassName} {
+        background: ${`var(--ds-border-focused, ${B200})`};
+      }
+
+      & .${resizerHandleTrackClassName} {
+        visibility: visible;
+        opacity: 0.5;
+      }
+    }
   }
 
-  .${resizerHandleRightClassName}::after,
-    .${resizerHandleLeftClassName}::after {
+  .${resizerHandleThumbClassName} {
     content: ' ';
     display: flex;
     width: 3px;
     height: 64px;
     transition: background-color 0.2s;
-
     border-radius: 6px;
-  }
 
-  .${resizerItemClassName} {
-    will-change: width;
-  }
-
-  .${resizerItemClassName}:hover
-    .${resizerHandleLeftClassName},
-    .${resizerItemClassName}:hover
-    .${resizerHandleRightClassName},
-    .${resizerItemClassName}.display-handle
-    .${resizerHandleRightClassName},
-    .${resizerItemClassName}.display-handle
-    .${resizerHandleLeftClassName} {
-    visibility: visible;
-  }
-
-  .${resizerItemClassName}:hover
-    .${resizerHandleLeftClassName}::after,
-    .${resizerItemClassName}:hover
-    .${resizerHandleRightClassName}::after,
-    .${resizerItemClassName}.display-handle
-    .${resizerHandleRightClassName}::after,
-    .${resizerItemClassName}.display-handle
-    .${resizerHandleLeftClassName}::after {
     background: ${`var(--ds-border, ${N60})`};
   }
 
-  .${resizerItemClassName}.danger {
-    &
-      .${resizerHandleRightClassName}::after,
-      .${resizerHandleLeftClassName}::after {
-      transition: none;
-      background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
-    }
-  }
-
-  .${akEditorSelectedNodeClassName}
-    .${resizerHandleRightClassName}::after,
-    .${akEditorSelectedNodeClassName}
-    .${resizerHandleLeftClassName}::after,
-    .${resizerItemClassName}
-    .${resizerHandleRightClassName}:hover::after,
-    .${resizerItemClassName}
-    .${resizerHandleLeftClassName}:hover::after,
-    .${resizerItemClassName}.is-resizing
-    .${resizerHandleRightClassName}::after,
-    .${resizerItemClassName}.is-resizing
-    .${resizerHandleLeftClassName}::after {
-    background: ${`var(--ds-border-focused, ${B200})`};
-  }
-
-  .${resizerHandleRightClassName}.${resizerHandleClassName.medium}::after,
-    .${resizerHandleLeftClassName}.${resizerHandleClassName.medium}::after {
-    height: 64px;
-  }
-
-  .${resizerHandleRightClassName}.${resizerHandleClassName.small}::after,
-    .${resizerHandleLeftClassName}.${resizerHandleClassName.small}::after {
-    height: 43px;
-  }
-
-  .${resizerHandleRightClassName}.${resizerHandleClassName.large}::after,
-    .${resizerHandleLeftClassName}.${resizerHandleClassName.large}::after {
-    height: 96px;
-  }
-
-  .${resizerHandleRightClassName}.${resizerHandleStickyClassName}::after,
-    .${resizerHandleLeftClassName}.${resizerHandleStickyClassName}::after {
-    position: sticky;
-    top: 10px;
-    bottom: 10px;
-  }
-
-  .${resizerHandleShadowClassName} {
+  .${resizerHandleTrackClassName} {
     visibility: hidden;
     position: absolute;
     width: 7px;
+    height: calc(100% - 24px);
     border-radius: 4px;
     opacity: 0;
-    transition: background-color 0.2s, visibility 0.2s;
+    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;
+
+    &.none {
+      background: none;
+    }
+
+    &.shadow {
+      background: ${`var(--ds-background-selected, ${B50})`};
+    }
   }
 
-  .${resizerHandleRightClassName}:hover
-    .${resizerHandleShadowClassName},
-    .${resizerHandleLeftClassName}:hover
-    .${resizerHandleShadowClassName} {
-    visibility: visible;
-    background-color: ${`var(--ds-background-selected, ${B50})`};
-    opacity: 0.5;
+  .${akEditorSelectedNodeClassName} {
+    & .${resizerHandleThumbClassName} {
+      background: ${`var(--ds-border-focused, ${B200})`};
+    }
   }
 `;

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.53.0";
+const packageVersion = "74.54.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/media-single/utils.js

@@ -160,37 +160,47 @@ export var getMaxWidthForNestedNode = function getMaxWidthForNestedNode(view, po
   }
   return null;
 };
+var calcParentPadding = function calcParentPadding(view, resolvedPos) {
+  // since table has constant padding, use hardcoded constant instead of query the dom
+  var tablePadding = 8;
+  var _view$state$schema$no = view.state.schema.nodes,
+    tableCell = _view$state$schema$no.tableCell,
+    tableHeader = _view$state$schema$no.tableHeader;
+  return [tableCell, tableHeader].includes(resolvedPos.parent.type) ? tablePadding * 2 : 0;
+};
 
 /**
  * Get parent width for a nested media single node for new experience
  * @param view Editor view
  * @param pos node position
  */
-export var getMaxWidthForNestedNodeNext = function getMaxWidthForNestedNodeNext(view, pos) {
+export var getMaxWidthForNestedNodeNext = function getMaxWidthForNestedNodeNext(view, pos, forInsertion) {
   if (typeof pos !== 'number') {
     return null;
   }
   var $pos = view.state.doc.resolve(pos);
   if ($pos && $pos.parent.type.name !== 'doc') {
-    return getParentWidthForNestedMediaSingleNode($pos, view);
+    return forInsertion ? getParentWidthForNestedMediaSingleNodeForInsertion($pos, view) : getParentWidthForNestedMediaSingleNode($pos, view);
   }
   return null;
 };
 export var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
   var domNode = view.nodeDOM(resolvedPos.pos);
   if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
-    var _view$state$schema$no = view.state.schema.nodes,
-      tableCell = _view$state$schema$no.tableCell,
-      tableHeader = _view$state$schema$no.tableHeader;
-    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
-      // since table has constant padding, use hardcoded constant instead of query the dom
-      var tablePadding = 8;
-      return domNode.parentElement.offsetWidth - tablePadding * 2;
-    }
-    return domNode.parentElement.offsetWidth;
+    var parentPadding = calcParentPadding(view, resolvedPos);
+    return domNode.parentElement.offsetWidth - parentPadding;
   }
   if (domNode instanceof HTMLElement) {
     return domNode.offsetWidth;
   }
   return null;
+};
+export var getParentWidthForNestedMediaSingleNodeForInsertion = function getParentWidthForNestedMediaSingleNodeForInsertion(resolvedPos, view) {
+  var parentPos = resolvedPos.before(resolvedPos.depth);
+  var parentDomNode = view.nodeDOM(parentPos);
+  var parentPadding = calcParentPadding(view, resolvedPos);
+  if (parentDomNode instanceof HTMLElement) {
+    return parentDomNode.offsetWidth - parentPadding;
+  }
+  return null;
 };

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.53.0";
+var packageVersion = "74.54.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/resizer/Resizer.js

@@ -2,15 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleHeightSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "innerPadding", "snap", "snapGap", "handleMarginTop", "isHandleVisible"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleHeightSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "innerPadding", "snap", "snapGap", "handleMarginTop", "isHandleVisible", "handleComponent", "handleHighlight", "handleTooltipContent"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { resizerHandleClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
+import Tooltip from '@atlaskit/tooltip';
+import { resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
 export default function ResizerNext(props) {
-  var _classnames, _classnames2;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isResizing = _useState2[0],
@@ -39,6 +39,10 @@ export default function ResizerNext(props) {
     handleMarginTop = props.handleMarginTop,
     _props$isHandleVisibl = props.isHandleVisible,
     isHandleVisible = _props$isHandleVisibl === void 0 ? false : _props$isHandleVisibl,
+    handleComponent = props.handleComponent,
+    _props$handleHighligh = props.handleHighlight,
+    handleHighlight = _props$handleHighligh === void 0 ? 'none' : _props$handleHighligh,
+    handleTooltipContent = props.handleTooltipContent,
     otherProps = _objectWithoutProperties(props, _excluded);
   var onResizeStart = React.useCallback(function (event) {
     // prevent creating a drag event on Firefox
@@ -74,8 +78,8 @@ export default function ResizerNext(props) {
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   var handles = {
-    left: classnames(resizerHandleClassName[handleHeightSize], (_classnames = {}, _defineProperty(_classnames, "".concat(handleClassName, "-left"), !!handleClassName), _defineProperty(_classnames, resizerHandleLeftClassName, !handleClassName), _defineProperty(_classnames, resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames)),
-    right: classnames(resizerHandleClassName[handleHeightSize], (_classnames2 = {}, _defineProperty(_classnames2, "".concat(handleClassName, "-right"), !!handleClassName), _defineProperty(_classnames2, resizerHandleRightClassName, !handleClassName), _defineProperty(_classnames2, resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames2))
+    left: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'left', handleHeightSize, handleAlignmentMethod),
+    right: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'right', handleHeightSize, handleAlignmentMethod)
   };
   var baseHandleStyles = {
     width: handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)",
@@ -100,6 +104,55 @@ export default function ResizerNext(props) {
     'is-resizing': isResizing,
     'display-handle': isHandleVisible
   }, appearance);
+  var finalHandleComponent = useMemo(function () {
+    if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent && !handleComponent) {
+      return {
+        left: /*#__PURE__*/React.createElement("div", {
+          className: resizerHandleThumbClassName
+        }),
+        right: /*#__PURE__*/React.createElement("div", {
+          className: resizerHandleThumbClassName
+        })
+      };
+    }
+
+    // If the handleComponent is set by the parent, then they're taking over control of the handle
+    if (handleComponent) {
+      return {
+        left: handleComponent.left && /*#__PURE__*/React.cloneElement(handleComponent.left, {
+          className: resizerHandleThumbClassName
+        }),
+        right: handleComponent.right && /*#__PURE__*/React.cloneElement(handleComponent.right, {
+          className: resizerHandleThumbClassName
+        })
+      };
+    }
+    var children = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classnames(resizerHandleTrackClassName, handleHighlight)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: resizerHandleThumbClassName
+    }));
+    if (!!handleTooltipContent) {
+      return {
+        left: /*#__PURE__*/React.createElement(Tooltip, {
+          content: handleTooltipContent,
+          hideTooltipOnClick: true,
+          position: "mouse",
+          mousePosition: "auto-start"
+        }, children),
+        right: /*#__PURE__*/React.createElement(Tooltip, {
+          content: handleTooltipContent,
+          hideTooltipOnClick: true,
+          position: "mouse",
+          mousePosition: "auto-start"
+        }, children)
+      };
+    }
+    return {
+      left: children,
+      right: children
+    };
+  }, [handleHighlight, handleTooltipContent, handleComponent]);
 
   // snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
   var snapGapActual = useMemo(function () {
@@ -124,6 +177,7 @@ export default function ResizerNext(props) {
     onResizeStop: onResizeStop,
     resizeRatio: resizeRatio,
     snapGap: snapGapActual,
-    snap: snap
+    snap: snap,
+    handleComponent: finalHandleComponent
   }, otherProps), children);
 }

package/dist/esm/styles/index.js

@@ -22,7 +22,7 @@ export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
-export { resizerStyles, resizerHandleShadowClassName } from './shared/resizer';
+export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, resizerHandleThumbClassName } from './shared/resizer';
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles } from './shared/embedCard';

package/dist/esm/styles/shared/resizer.js

@@ -9,20 +9,11 @@ import { B200, B50, N60 } from '@atlaskit/theme/colors';
 */
 
 export var resizerItemClassName = 'resizer-item';
-export var resizerHandleRightClassName = 'resizer-handle-right';
-export var resizerHandleLeftClassName = 'resizer-handle-left';
-export var resizerHandleStickyClassName = 'resizer-handle-sticky';
-export var resizerHandleShadowClassName = 'resizer-handle-shadow';
+export var resizerHandleClassName = 'resizer-handle';
+export var resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
+export var resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
 
 // akEditorSelectedNodeClassName from '@atlaskit/editor-shared-styles';
 var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
 export var resizerHandleZIndex = 99;
-export var resizerHandleSmallClassName = 'resizer-handle-small';
-export var resizerHandleMediumClassName = 'resizer-handle-medium';
-export var resizerHandleLargeClassName = 'resizer-handle-large';
-export var resizerHandleClassName = {
-  small: resizerHandleSmallClassName,
-  medium: resizerHandleMediumClassName,
-  large: resizerHandleLargeClassName
-};
-export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", ", .", " {\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    justify-content: center;\n    width: 7px;\n    transition: visibility 0.2s;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n    transition: background-color 0.2s;\n\n    border-radius: 6px;\n  }\n\n  .", " {\n    will-change: width;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", ",\n    .", ".display-handle\n    .", ",\n    .", ".display-handle\n    .", " {\n    visibility: visible;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after,\n    .", ".display-handle\n    .", "::after,\n    .", ".display-handle\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".danger {\n    &\n      .", "::after,\n      .", "::after {\n      transition: none;\n      background: ", ";\n    }\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", " {\n    visibility: visible;\n    background-color: ", ";\n    opacity: 0.5;\n  }\n"])), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border, ".concat(N60, ")"), resizerItemClassName, resizerHandleRightClassName, resizerHandleLeftClassName, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleRightClassName, resizerHandleClassName.medium, resizerHandleLeftClassName, resizerHandleClassName.medium, resizerHandleRightClassName, resizerHandleClassName.small, resizerHandleLeftClassName, resizerHandleClassName.small, resizerHandleRightClassName, resizerHandleClassName.large, resizerHandleLeftClassName, resizerHandleClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName, resizerHandleShadowClassName, resizerHandleRightClassName, resizerHandleShadowClassName, resizerHandleLeftClassName, resizerHandleShadowClassName, "var(--ds-background-selected, ".concat(B50, ")"));
+export var resizerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    will-change: width;\n\n    &:hover,\n    &.display-handle {\n      & .", " {\n        visibility: visible;\n        opacity: 1;\n      }\n    }\n\n    &.is-resizing {\n      & .", " {\n        background: ", ";\n      }\n    }\n\n    &.danger {\n      & .", " {\n        transition: none;\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 7px;\n    transition: visibility 0.2s, opacity 0.2s;\n\n    /*\n      NOTE: The below style is targetted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n    & div[role='presentation'] {\n      width: 100%;\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      align-items: center;\n    }\n\n    /*\n      Handle Positions\n    */\n    &.left {\n      align-items: flex-start;\n    }\n    &.right {\n      align-items: flex-end;\n    }\n\n    /*\n      Handle Sizing\n    */\n    &.small {\n      & .", " {\n        height: 43px;\n      }\n    }\n    &.medium {\n      & .", " {\n        height: 64px;\n      }\n    }\n    &.large {\n      & .", " {\n        height: 96px;\n      }\n    }\n\n    /*\n      Handle Alignment\n    */\n    &.sticky {\n      & .", " {\n        position: sticky;\n        top: ", ";\n        bottom: ", ";\n      }\n    }\n\n    &:hover {\n      & .", " {\n        background: ", ";\n      }\n\n      & .", " {\n        visibility: visible;\n        opacity: 0.5;\n      }\n    }\n  }\n\n  .", " {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n    transition: background-color 0.2s;\n    border-radius: 6px;\n\n    background: ", ";\n  }\n\n  .", " {\n    visibility: hidden;\n    position: absolute;\n    width: 7px;\n    height: calc(100% - 24px);\n    border-radius: 4px;\n    opacity: 0;\n    transition: background-color 0.2s, visibility 0.2s, opacity 0.2s;\n\n    &.none {\n      background: none;\n    }\n\n    &.shadow {\n      background: ", ";\n    }\n  }\n\n  .", " {\n    & .", " {\n      background: ", ";\n    }\n  }\n"])), resizerItemClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleThumbClassName, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), resizerHandleClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"), resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-border, ".concat(N60, ")"), resizerHandleTrackClassName, "var(--ds-background-selected, ".concat(B50, ")"), akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, ".concat(B200, ")"));

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.53.0";
+var packageVersion = "74.54.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/media-single/utils.d.ts

@@ -73,5 +73,6 @@ export declare const getMaxWidthForNestedNode: (view: EditorView, pos: number |
  * @param view Editor view
  * @param pos node position
  */
-export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined) => number | null;
+export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined, forInsertion?: boolean) => number | null;
 export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
+export declare const getParentWidthForNestedMediaSingleNodeForInsertion: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/dist/types/resizer/Resizer.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
 import type { HandleComponent } from 're-resizable';
-import type { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandlePositioning, HandleResize, HandleResizeStart, HandleStyles, ResizerAppearance, Snap } from './types';
+import type { TooltipProps } from '@atlaskit/tooltip';
+import type { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandleHighlight, HandlePositioning, HandleResize, HandleResizeStart, HandleStyles, ResizerAppearance, Snap } from './types';
 export type ResizerProps = {
     enable: EnabledHandles;
     width: number;
@@ -25,5 +26,7 @@ export type ResizerProps = {
     resizeRatio?: number;
     isHandleVisible?: boolean;
     appearance?: ResizerAppearance;
+    handleHighlight?: HandleHighlight;
+    handleTooltipContent?: TooltipProps['content'];
 };
 export default function ResizerNext(props: PropsWithChildren<ResizerProps>): JSX.Element;

package/dist/types/resizer/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ResizerNext } from './Resizer';
-export type { HandleHeightSizeType, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
+export type { HandleAlignmentMethod, HandleHighlight, HandleHeightSizeType, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';

package/dist/types/resizer/types.d.ts

@@ -25,3 +25,4 @@ export type HandleHeightSizeType = 'small' | 'medium' | 'large';
 export type HandleAlignmentMethod = 'center' | 'sticky';
 export type HandlePositioning = 'overlap' | 'adjacent';
 export type ResizerAppearance = 'danger';
+export type HandleHighlight = 'none' | 'shadow';

package/dist/types/styles/index.d.ts

@@ -22,7 +22,7 @@ export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix, } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
-export { resizerStyles, resizerHandleShadowClassName } from './shared/resizer';
+export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, resizerHandleThumbClassName, } from './shared/resizer';
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles, } from './shared/embedCard';

package/dist/types/styles/shared/resizer.d.ts

@@ -1,15 +1,6 @@
 export declare const resizerItemClassName = "resizer-item";
-export declare const resizerHandleRightClassName = "resizer-handle-right";
-export declare const resizerHandleLeftClassName = "resizer-handle-left";
-export declare const resizerHandleStickyClassName = "resizer-handle-sticky";
-export declare const resizerHandleShadowClassName = "resizer-handle-shadow";
+export declare const resizerHandleClassName = "resizer-handle";
+export declare const resizerHandleTrackClassName: string;
+export declare const resizerHandleThumbClassName: string;
 export declare const resizerHandleZIndex = 99;
-export declare const resizerHandleSmallClassName = "resizer-handle-small";
-export declare const resizerHandleMediumClassName = "resizer-handle-medium";
-export declare const resizerHandleLargeClassName = "resizer-handle-large";
-export declare const resizerHandleClassName: {
-    small: string;
-    medium: string;
-    large: string;
-};
 export declare const resizerStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/media-single/utils.d.ts

@@ -73,5 +73,6 @@ export declare const getMaxWidthForNestedNode: (view: EditorView, pos: number |
  * @param view Editor view
  * @param pos node position
  */
-export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined) => number | null;
+export declare const getMaxWidthForNestedNodeNext: (view: EditorView, pos: number | undefined, forInsertion?: boolean) => number | null;
 export declare const getParentWidthForNestedMediaSingleNode: (resolvedPos: ResolvedPos, view: EditorView) => number | null;
+export declare const getParentWidthForNestedMediaSingleNodeForInsertion: (resolvedPos: ResolvedPos, view: EditorView) => number | null;

package/dist/types-ts4.5/resizer/Resizer.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import type { PropsWithChildren } from 'react';
 import type { HandleComponent } from 're-resizable';
-import type { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandlePositioning, HandleResize, HandleResizeStart, HandleStyles, ResizerAppearance, Snap } from './types';
+import type { TooltipProps } from '@atlaskit/tooltip';
+import type { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandleHighlight, HandlePositioning, HandleResize, HandleResizeStart, HandleStyles, ResizerAppearance, Snap } from './types';
 export type ResizerProps = {
     enable: EnabledHandles;
     width: number;
@@ -25,5 +26,7 @@ export type ResizerProps = {
     resizeRatio?: number;
     isHandleVisible?: boolean;
     appearance?: ResizerAppearance;
+    handleHighlight?: HandleHighlight;
+    handleTooltipContent?: TooltipProps['content'];
 };
 export default function ResizerNext(props: PropsWithChildren<ResizerProps>): JSX.Element;

package/dist/types-ts4.5/resizer/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ResizerNext } from './Resizer';
-export type { HandleHeightSizeType, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
+export type { HandleAlignmentMethod, HandleHighlight, HandleHeightSizeType, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';

package/dist/types-ts4.5/resizer/types.d.ts

@@ -25,3 +25,4 @@ export type HandleHeightSizeType = 'small' | 'medium' | 'large';
 export type HandleAlignmentMethod = 'center' | 'sticky';
 export type HandlePositioning = 'overlap' | 'adjacent';
 export type ResizerAppearance = 'danger';
+export type HandleHighlight = 'none' | 'shadow';

package/dist/types-ts4.5/styles/index.d.ts

@@ -22,7 +22,7 @@ export { DropdownMenuSharedCssClassName } from './shared/dropdown-menu';
 export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafariFix, } from './shared/code-block';
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
-export { resizerStyles, resizerHandleShadowClassName } from './shared/resizer';
+export { resizerStyles, resizerHandleClassName, resizerHandleTrackClassName, resizerHandleThumbClassName, } from './shared/resizer';
 export { gridStyles, GRID_GUTTER } from './shared/grid';
 export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME, } from './shared/smartCard';
 export { embedCardStyles, embedSpacingStyles, editIconStyles, } from './shared/embedCard';

package/dist/types-ts4.5/styles/shared/resizer.d.ts

@@ -1,15 +1,6 @@
 export declare const resizerItemClassName = "resizer-item";
-export declare const resizerHandleRightClassName = "resizer-handle-right";
-export declare const resizerHandleLeftClassName = "resizer-handle-left";
-export declare const resizerHandleStickyClassName = "resizer-handle-sticky";
-export declare const resizerHandleShadowClassName = "resizer-handle-shadow";
+export declare const resizerHandleClassName = "resizer-handle";
+export declare const resizerHandleTrackClassName: string;
+export declare const resizerHandleThumbClassName: string;
 export declare const resizerHandleZIndex = 99;
-export declare const resizerHandleSmallClassName = "resizer-handle-small";
-export declare const resizerHandleMediumClassName = "resizer-handle-medium";
-export declare const resizerHandleLargeClassName = "resizer-handle-large";
-export declare const resizerHandleClassName: {
-    small: string;
-    medium: string;
-    large: string;
-};
 export declare const resizerStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.53.0",
+  "version": "74.54.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -146,7 +146,7 @@
   "devDependencies": {
     "@atlaskit/media-core": "^34.1.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/smart-card": "^26.16.0",
+    "@atlaskit/smart-card": "^26.17.0",
     "@atlaskit/util-data-test": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",