@atlaskit/editor-common 75.8.4 → 76.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-common
 
+## 76.1.0
+
+### Minor Changes
+
+- [#40698](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40698) [`37b11d838e4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/37b11d838e4) - ED-20017 Decouple floating toolbar from editor-core
+
+### Patch Changes
+
+- [#40700](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40700) [`07c8d720947`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07c8d720947) - [ED-17196] Refactored editor internal abstraction
+
+## 76.0.0
+
+### Major Changes
+
+- [`151b0d45db4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/151b0d45db4) - Changed Resizer API. Removed handleComponent, innerPadding & handleMarginTop. Also renamed HandleHeightSizeType to HandleSize. The resizer should be opionated and control the handle component itself. innerPadding & handleMarginTop can also be controlled via the handleStyles override property.
+
+### Patch Changes
+
+- [`6c7eda4573e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c7eda4573e) - ADFEXP-526: create a patch changeset for editor-common to try make Confluence Pipeline green
+
 ## 75.8.4
 
 ### Patch Changes

package/dist/cjs/element-browser/constants.js

@@ -7,7 +7,7 @@ exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR
 var _constants = require("@atlaskit/theme/constants");
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
-// TODO: Migrate away from gridSize
+// TODO: Migrate away from deprecated gridSize
 // Recommendation: Replace gridSize with 8
 var GRID_SIZE = (0, _constants.gridSize)();
 exports.GRID_SIZE = GRID_SIZE;

package/dist/cjs/floating-toolbar/index.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shallowEqual = exports.isSameItem = exports.compareArrays = exports.areSameItems = void 0;
+function makeSameType(_a, _b) {
+  return true;
+}
+var shallowEqual = function shallowEqual(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if (objA == null || objB == null) {
+    return false;
+  }
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+  for (var idx = 0; idx < keysA.length; idx++) {
+    var key = keysA[idx];
+    if (!bHasOwnProperty(key)) {
+      return false;
+    }
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+exports.shallowEqual = shallowEqual;
+var compareArrays = function compareArrays(left, right) {
+  var compareFn = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : shallowEqual;
+  if (left.length !== right.length) {
+    return false;
+  }
+  for (var idx = 0; idx < left.length; idx++) {
+    if (!compareFn(left[idx], right[idx])) {
+      return false;
+    }
+  }
+  return true;
+};
+exports.compareArrays = compareArrays;
+var compareItemWithKeys = function compareItemWithKeys(leftItem, rightItem) {
+  var excludedKeys = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  return Object.keys(leftItem).filter(function (key) {
+    return excludedKeys.indexOf(key) === -1;
+  }).every(function (key) {
+    return leftItem[key] instanceof Object ? shallowEqual(leftItem[key], rightItem[key]) : leftItem[key] === rightItem[key];
+  });
+};
+var isSameItem = function isSameItem(leftItem, rightItem) {
+  if (leftItem.type !== rightItem.type) {
+    return false;
+  }
+  switch (leftItem.type) {
+    case 'button':
+      // Need to typecast `rightItem as typeof leftItem` otherwise we will
+      // have to put the `type !==` inside each case.
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'onClick', 'onMouseEnter', 'onMouseLeave']);
+    case 'copy-button':
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'items']);
+    case 'input':
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'onSubmit', 'onBlur']);
+    case 'select':
+      if (makeSameType(leftItem, rightItem) && Array.isArray(leftItem.options) && Array.isArray(rightItem.options) && !compareArrays(leftItem.options, rightItem.options, function (left, right) {
+        return compareItemWithKeys(left, right);
+      })) {
+        return false;
+      }
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'onChange', 'options']);
+    case 'dropdown':
+      if (makeSameType(leftItem, rightItem) && Array.isArray(leftItem.options) && Array.isArray(rightItem.options) &&
+      // @ts-expect-error TS2345: Argument of type 'DropdownOptionT<Function>[]' is not assignable to parameter of type 'any[][]'
+      !compareArrays(leftItem.options, rightItem.options, function (left, right) {
+        return (
+          // @ts-expect-error  TS2322: Type '"onClick"' is not assignable to type 'keyof any[]'
+          compareItemWithKeys(left, right, ['onClick'])
+        );
+      })) {
+        return false;
+      }
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'options']);
+    case 'custom':
+      return false;
+    case 'separator':
+      return compareItemWithKeys(leftItem, rightItem);
+    case 'extensions-placeholder':
+      return compareItemWithKeys(leftItem, rightItem);
+  }
+};
+exports.isSameItem = isSameItem;
+var areSameItems = function areSameItems(leftArr, rightArr) {
+  if (leftArr === undefined && rightArr === undefined) {
+    return true;
+  }
+  if (leftArr === undefined || rightArr === undefined) {
+    return false;
+  }
+  if (leftArr.length !== rightArr.length) {
+    return false;
+  }
+  return leftArr.every(function (item, index) {
+    return isSameItem(rightArr[index], item);
+  });
+};
+exports.areSameItems = areSameItems;

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 = "75.8.4";
+var packageVersion = "76.1.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

@@ -15,11 +15,12 @@ var _classnames2 = _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", "handleComponent", "handleHighlight", "handleTooltipContent"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "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(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) { (0, _defineProperty2.default)(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; }
+var SUPPORTED_HANDLES = ['left', 'right'];
 function ResizerNext(props) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -33,8 +34,8 @@ function ResizerNext(props) {
     handleResize = props.handleResize,
     handleResizeStart = props.handleResizeStart,
     handleResizeStop = props.handleResizeStop,
-    _props$handleHeightSi = props.handleHeightSize,
-    handleHeightSize = _props$handleHeightSi === void 0 ? 'medium' : _props$handleHeightSi,
+    _props$handleSize = props.handleSize,
+    handleSize = _props$handleSize === void 0 ? 'medium' : _props$handleSize,
     _props$handleAlignmen = props.handleAlignmentMethod,
     handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
     _props$handlePosition = props.handlePositioning,
@@ -43,24 +44,21 @@ function ResizerNext(props) {
     handleStyles = props.handleStyles,
     _props$resizeRatio = props.resizeRatio,
     resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio,
-    innerPadding = props.innerPadding,
     snap = props.snap,
     snapGap = props.snapGap,
-    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) {
+  var onResizeStart = (0, _react.useCallback)(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
     setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
-  var onResize = _react.default.useCallback(function (_event, _direction, _elementRef, delta) {
+  var onResize = (0, _react.useCallback)(function (_event, _direction, _elementRef, delta) {
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -73,7 +71,7 @@ function ResizerNext(props) {
     };
     handleResize(originalState, delta);
   }, [handleResize]);
-  var onResizeStop = _react.default.useCallback(function (_event, _direction, _elementRef, delta) {
+  var onResizeStop = (0, _react.useCallback)(function (_event, _direction, _elementRef, delta) {
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -88,81 +86,49 @@ function ResizerNext(props) {
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   var handles = {
-    left: (0, _classnames2.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'left', handleHeightSize, handleAlignmentMethod),
-    right: (0, _classnames2.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'right', handleHeightSize, handleAlignmentMethod)
+    left: (0, _classnames2.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'left', handleSize, handleAlignmentMethod),
+    right: (0, _classnames2.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'right', handleSize, handleAlignmentMethod)
   };
   var baseHandleStyles = {
     width: handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)",
-    // eslint-disable-next-line
-    marginTop: Number.isFinite(handleMarginTop) ? "".concat(handleMarginTop, "px") : undefined,
     zIndex: _resizer.resizerHandleZIndex,
     pointerEvents: 'auto',
     alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
   };
-  var offset = Number.isFinite(innerPadding) ? "-".concat(innerPadding, "px") : handlePositioning === 'adjacent' ? "calc(".concat(baseHandleStyles.width, " * -1)") : "calc(".concat(baseHandleStyles.width, " * -0.5)");
-  var nextHandleStyles = {
-    left: _objectSpread(_objectSpread({}, baseHandleStyles), {}, {
-      // eslint-disable-next-line
-      left: offset
-    }, handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.left),
-    right: _objectSpread(_objectSpread({}, baseHandleStyles), {}, {
-      // eslint-disable-next-line
-      right: offset
-    }, handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.right)
-  };
+  var offset = handlePositioning === 'adjacent' ? "calc(".concat(baseHandleStyles.width, " * -1)") : "calc(".concat(baseHandleStyles.width, " * -0.5)");
+  var nextHandleStyles = SUPPORTED_HANDLES.reduce(function (result, position) {
+    return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, _objectSpread(_objectSpread({}, baseHandleStyles), {}, (0, _defineProperty2.default)({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
+  }, {});
   var resizerClassName = (0, _classnames2.default)(className, _resizer.resizerItemClassName, (0, _defineProperty2.default)({
     'is-resizing': isResizing,
     'display-handle': isHandleVisible
   }, _resizer.resizerDangerClassName, appearance === 'danger'));
-  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, _classnames2.default)(_resizer.resizerHandleTrackClassName, handleHighlight)
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: _resizer.resizerHandleThumbClassName
-    }));
-    if (!!handleTooltipContent) {
-      return {
-        left: /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  var handleComponent = (0, _react.useMemo)(function () {
+    return SUPPORTED_HANDLES.reduce(function (result, position) {
+      var thumb = /*#__PURE__*/_react.default.createElement("div", {
+        className: _resizer.resizerHandleThumbClassName,
+        "data-testid": "resizer-handle-".concat(position, "-thumb"),
+        contentEditable: false
+      });
+      if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
+        return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, thumb));
+      }
+      var thumbWithTrack = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames2.default)(_resizer.resizerHandleTrackClassName, handleHighlight),
+        "data-testid": "resizer-handle-".concat(position, "-track")
+      }), thumb);
+      if (!!handleTooltipContent) {
+        return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, /*#__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]);
+          mousePosition: "auto-start",
+          testId: "resizer-handle-".concat(position, "-tooltip")
+        }, thumbWithTrack)));
+      }
+      return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, thumbWithTrack));
+    }, {});
+  }, [handleHighlight, handleTooltipContent]);
 
   // 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 () {
@@ -189,7 +155,7 @@ function ResizerNext(props) {
     resizeRatio: resizeRatio,
     snapGap: snapGapActual,
     snap: snap,
-    handleComponent: finalHandleComponent
+    handleComponent: handleComponent
   }, otherProps), /*#__PURE__*/_react.default.createElement("span", {
     className: _resizer.resizerHoverZoneClassName
   }, children));

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 = "75.8.4";
+var packageVersion = "76.1.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/element-browser/constants.js

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
-// TODO: Migrate away from gridSize
+// TODO: Migrate away from deprecated gridSize
 // Recommendation: Replace gridSize with 8
 export const GRID_SIZE = gridSize();
 export const DEVICE_BREAKPOINT_NUMBERS = {

package/dist/es2019/floating-toolbar/index.js

@@ -0,0 +1,86 @@
+function makeSameType(_a, _b) {
+  return true;
+}
+export const shallowEqual = (objA, objB) => {
+  if (objA === objB) {
+    return true;
+  }
+  if (objA == null || objB == null) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);
+  for (let idx = 0; idx < keysA.length; idx++) {
+    const key = keysA[idx];
+    if (!bHasOwnProperty(key)) {
+      return false;
+    }
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+};
+export const compareArrays = (left, right, compareFn = shallowEqual) => {
+  if (left.length !== right.length) {
+    return false;
+  }
+  for (let idx = 0; idx < left.length; idx++) {
+    if (!compareFn(left[idx], right[idx])) {
+      return false;
+    }
+  }
+  return true;
+};
+const compareItemWithKeys = (leftItem, rightItem, excludedKeys = []) => Object.keys(leftItem).filter(key => excludedKeys.indexOf(key) === -1).every(key => leftItem[key] instanceof Object ? shallowEqual(leftItem[key], rightItem[key]) : leftItem[key] === rightItem[key]);
+export const isSameItem = (leftItem, rightItem) => {
+  if (leftItem.type !== rightItem.type) {
+    return false;
+  }
+  switch (leftItem.type) {
+    case 'button':
+      // Need to typecast `rightItem as typeof leftItem` otherwise we will
+      // have to put the `type !==` inside each case.
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'onClick', 'onMouseEnter', 'onMouseLeave']);
+    case 'copy-button':
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'items']);
+    case 'input':
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'onSubmit', 'onBlur']);
+    case 'select':
+      if (makeSameType(leftItem, rightItem) && Array.isArray(leftItem.options) && Array.isArray(rightItem.options) && !compareArrays(leftItem.options, rightItem.options, (left, right) => compareItemWithKeys(left, right))) {
+        return false;
+      }
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'onChange', 'options']);
+    case 'dropdown':
+      if (makeSameType(leftItem, rightItem) && Array.isArray(leftItem.options) && Array.isArray(rightItem.options) &&
+      // @ts-expect-error TS2345: Argument of type 'DropdownOptionT<Function>[]' is not assignable to parameter of type 'any[][]'
+      !compareArrays(leftItem.options, rightItem.options, (left, right) =>
+      // @ts-expect-error  TS2322: Type '"onClick"' is not assignable to type 'keyof any[]'
+      compareItemWithKeys(left, right, ['onClick']))) {
+        return false;
+      }
+      return compareItemWithKeys(leftItem, rightItem, ['type', 'options']);
+    case 'custom':
+      return false;
+    case 'separator':
+      return compareItemWithKeys(leftItem, rightItem);
+    case 'extensions-placeholder':
+      return compareItemWithKeys(leftItem, rightItem);
+  }
+};
+export const areSameItems = (leftArr, rightArr) => {
+  if (leftArr === undefined && rightArr === undefined) {
+    return true;
+  }
+  if (leftArr === undefined || rightArr === undefined) {
+    return false;
+  }
+  if (leftArr.length !== rightArr.length) {
+    return false;
+  }
+  return leftArr.every((item, index) => isSameItem(rightArr[index], item));
+};

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 = "75.8.4";
+const packageVersion = "76.1.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

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import Tooltip from '@atlaskit/tooltip';
 import { handleWrapperClass, resizerDangerClassName, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
+const SUPPORTED_HANDLES = ['left', 'right'];
 export default function ResizerNext(props) {
   const [isResizing, setIsResizing] = useState(false);
   const resizable = useRef(null);
@@ -15,29 +16,26 @@ export default function ResizerNext(props) {
     handleResize,
     handleResizeStart,
     handleResizeStop,
-    handleHeightSize = 'medium',
+    handleSize = 'medium',
     handleAlignmentMethod = 'center',
     handlePositioning = 'overlap',
     appearance,
     handleStyles,
     resizeRatio = 1,
-    innerPadding,
     snap,
     snapGap,
-    handleMarginTop,
     isHandleVisible = false,
-    handleComponent,
     handleHighlight = 'none',
     handleTooltipContent,
     ...otherProps
   } = props;
-  const onResizeStart = React.useCallback(event => {
+  const onResizeStart = useCallback(event => {
     // prevent creating a drag event on Firefox
     event.preventDefault();
     setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
-  const onResize = React.useCallback((_event, _direction, _elementRef, delta) => {
+  const onResize = useCallback((_event, _direction, _elementRef, delta) => {
     const resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -50,7 +48,7 @@ export default function ResizerNext(props) {
     };
     handleResize(originalState, delta);
   }, [handleResize]);
-  const onResizeStop = React.useCallback((_event, _direction, _elementRef, delta) => {
+  const onResizeStop = useCallback((_event, _direction, _elementRef, delta) => {
     const resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -65,86 +63,64 @@ export default function ResizerNext(props) {
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   const handles = {
-    left: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'left', handleHeightSize, handleAlignmentMethod),
-    right: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'right', handleHeightSize, handleAlignmentMethod)
+    left: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'left', handleSize, handleAlignmentMethod),
+    right: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, 'right', handleSize, handleAlignmentMethod)
   };
   const baseHandleStyles = {
     width: handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)",
-    // eslint-disable-next-line
-    marginTop: Number.isFinite(handleMarginTop) ? `${handleMarginTop}px` : undefined,
     zIndex: resizerHandleZIndex,
     pointerEvents: 'auto',
     alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
   };
-  const offset = Number.isFinite(innerPadding) ? `-${innerPadding}px` : handlePositioning === 'adjacent' ? `calc(${baseHandleStyles.width} * -1)` : `calc(${baseHandleStyles.width} * -0.5)`;
-  const nextHandleStyles = {
-    left: {
+  const offset = handlePositioning === 'adjacent' ? `calc(${baseHandleStyles.width} * -1)` : `calc(${baseHandleStyles.width} * -0.5)`;
+  const nextHandleStyles = SUPPORTED_HANDLES.reduce((result, position) => ({
+    ...result,
+    [position]: {
       ...baseHandleStyles,
-      // eslint-disable-next-line
-      left: offset,
-      ...(handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.left)
-    },
-    right: {
-      ...baseHandleStyles,
-      // eslint-disable-next-line
-      right: offset,
-      ...(handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles.right)
+      [position]: offset,
+      ...(handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])
     }
-  };
+  }), {});
   const resizerClassName = classnames(className, resizerItemClassName, {
     'is-resizing': isResizing,
     'display-handle': isHandleVisible,
     [resizerDangerClassName]: appearance === 'danger'
   });
-  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) {
+  const handleComponent = useMemo(() => {
+    return SUPPORTED_HANDLES.reduce((result, position) => {
+      const thumb = /*#__PURE__*/React.createElement("div", {
+        className: resizerHandleThumbClassName,
+        "data-testid": `resizer-handle-${position}-thumb`,
+        contentEditable: false
+      });
+      if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
+        return {
+          ...result,
+          [position]: thumb
+        };
+      }
+      const thumbWithTrack = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: classnames(resizerHandleTrackClassName, handleHighlight),
+        "data-testid": `resizer-handle-${position}-track`
+      }), thumb);
+      if (!!handleTooltipContent) {
+        return {
+          ...result,
+          [position]: /*#__PURE__*/React.createElement(Tooltip, {
+            content: handleTooltipContent,
+            hideTooltipOnClick: true,
+            position: "mouse",
+            mousePosition: "auto-start",
+            testId: `resizer-handle-${position}-tooltip`
+          }, thumbWithTrack)
+        };
+      }
       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)
+        ...result,
+        [position]: thumbWithTrack
       };
-    }
-    return {
-      left: children,
-      right: children
-    };
-  }, [handleHighlight, handleTooltipContent, handleComponent]);
+    }, {});
+  }, [handleHighlight, handleTooltipContent]);
 
   // snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
   const snapGapActual = useMemo(() => {
@@ -171,7 +147,7 @@ export default function ResizerNext(props) {
     resizeRatio: resizeRatio,
     snapGap: snapGapActual,
     snap: snap,
-    handleComponent: finalHandleComponent
+    handleComponent: handleComponent
   }, otherProps), /*#__PURE__*/React.createElement("span", {
     className: resizerHoverZoneClassName
   }, children));