@atlaskit/editor-common 75.8.4 → 76.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-common
 
+## 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/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.0.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.0.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/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.0.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));

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

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

package/dist/esm/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 var GRID_SIZE = gridSize();
 export var DEVICE_BREAKPOINT_NUMBERS = {

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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.0.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,14 +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", "handleComponent", "handleHighlight", "handleTooltipContent"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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';
+var SUPPORTED_HANDLES = ['left', 'right'];
 export default function ResizerNext(props) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -23,8 +24,8 @@ export default 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,
@@ -33,24 +34,21 @@ export default 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 = _objectWithoutProperties(props, _excluded);
-  var onResizeStart = React.useCallback(function (event) {
+  var onResizeStart = useCallback(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
     setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
-  var onResize = React.useCallback(function (_event, _direction, _elementRef, delta) {
+  var onResize = useCallback(function (_event, _direction, _elementRef, delta) {
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -63,7 +61,7 @@ export default function ResizerNext(props) {
     };
     handleResize(originalState, delta);
   }, [handleResize]);
-  var onResizeStop = React.useCallback(function (_event, _direction, _elementRef, delta) {
+  var onResizeStop = useCallback(function (_event, _direction, _elementRef, delta) {
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -78,81 +76,49 @@ export default function ResizerNext(props) {
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   var 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)
   };
   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: 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), {}, _defineProperty({}, position, _objectSpread(_objectSpread({}, baseHandleStyles), {}, _defineProperty({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
+  }, {});
   var resizerClassName = classnames(className, resizerItemClassName, _defineProperty({
     'is-resizing': isResizing,
     'display-handle': isHandleVisible
   }, resizerDangerClassName, appearance === 'danger'));
-  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, {
+  var handleComponent = useMemo(function () {
+    return SUPPORTED_HANDLES.reduce(function (result, position) {
+      var thumb = /*#__PURE__*/React.createElement("div", {
+        className: resizerHandleThumbClassName,
+        "data-testid": "resizer-handle-".concat(position, "-thumb"),
+        contentEditable: false
+      });
+      if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
+        return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, thumb));
+      }
+      var thumbWithTrack = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: classnames(resizerHandleTrackClassName, handleHighlight),
+        "data-testid": "resizer-handle-".concat(position, "-track")
+      }), thumb);
+      if (!!handleTooltipContent) {
+        return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, /*#__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]);
+          mousePosition: "auto-start",
+          testId: "resizer-handle-".concat(position, "-tooltip")
+        }, thumbWithTrack)));
+      }
+      return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, 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 = useMemo(function () {
@@ -179,7 +145,7 @@ export default function ResizerNext(props) {
     resizeRatio: resizeRatio,
     snapGap: snapGapActual,
     snap: snap,
-    handleComponent: finalHandleComponent
+    handleComponent: handleComponent
   }, otherProps), /*#__PURE__*/React.createElement("span", {
     className: resizerHoverZoneClassName
   }, children));

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

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

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

@@ -1,32 +1,52 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { HandleComponent } from 're-resizable';
+import type { CSSProperties, PropsWithChildren } from 'react';
 import type { TooltipProps } from '@atlaskit/tooltip';
-import type { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandleHighlight, HandlePositioning, HandleResize, HandleResizeStart, HandleStyles, ResizerAppearance, Snap } from './types';
+import type { EnabledHandles, HandleAlignmentMethod, HandleHighlight, HandlePositioning, HandleResize, HandleResizeStart, HandleSize, HandleStyles, ResizerAppearance, Snap } from './types';
 export type ResizerProps = {
+    className?: string;
     enable: EnabledHandles;
     width: number;
-    handleResizeStart: HandleResizeStart;
-    handleResize: HandleResize;
-    handleResizeStop: HandleResize;
-    innerPadding?: number;
-    handleClassName?: string;
-    className?: string;
     minWidth?: number;
     maxWidth?: number;
-    handleWrapperStyle?: React.CSSProperties;
-    handleComponent?: HandleComponent;
-    handleStyles?: HandleStyles;
-    handlePositioning?: HandlePositioning;
-    handleHeightSize?: HandleHeightSizeType;
-    handleMarginTop?: number;
     snap?: Snap;
     snapGap?: number;
-    handleAlignmentMethod?: HandleAlignmentMethod;
     resizeRatio?: number;
-    isHandleVisible?: boolean;
     appearance?: ResizerAppearance;
+    isHandleVisible?: boolean;
+    handleResizeStart: HandleResizeStart;
+    handleResize: HandleResize;
+    handleResizeStop: HandleResize;
+    /**
+     * This can be used to override the css class name applied to the resize handle.
+     */
+    handleClassName?: string;
+    /**
+     * This is used to override the style of resize handles wrapper.
+     */
+    handleWrapperStyle?: CSSProperties;
+    /**
+     * This property is used to override the style of one or more resize handles. Only the axis you specify will have
+     * its handle style overriden.
+     */
+    handleStyles?: HandleStyles;
+    /**
+     * The handleAlignmentMethod is used in determining the vertical positioning of the resizer handle in relation to its children.
+     */
+    handleAlignmentMethod?: HandleAlignmentMethod;
+    /**
+     * The handlePositioning is used to determine the horizontal position of the resizer handle in relation to its children.
+     */
+    handlePositioning?: HandlePositioning;
+    /**
+     * The handleSize is used to determine the width/height of the handle element.
+     */
+    handleSize?: HandleSize;
+    /**
+     * The handleHighlight is used to determine how the handle looks when the users mouse hovers over the handle element.
+     */
     handleHighlight?: HandleHighlight;
+    /**
+     * The handle can display a tooltip when mouse hovers.
+     */
     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 { HandleAlignmentMethod, HandleHighlight, HandleHeightSizeType, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
+export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';

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

@@ -21,7 +21,7 @@ export type HandleStyles = {
     right?: React.CSSProperties;
     left?: React.CSSProperties;
 };
-export type HandleHeightSizeType = 'small' | 'medium' | 'large';
+export type HandleSize = 'small' | 'medium' | 'large';
 export type HandleAlignmentMethod = 'center' | 'sticky';
 export type HandlePositioning = 'overlap' | 'adjacent';
 export type ResizerAppearance = 'danger';

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

@@ -1,32 +1,52 @@
-import React from 'react';
-import type { PropsWithChildren } from 'react';
-import type { HandleComponent } from 're-resizable';
+import type { CSSProperties, PropsWithChildren } from 'react';
 import type { TooltipProps } from '@atlaskit/tooltip';
-import type { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandleHighlight, HandlePositioning, HandleResize, HandleResizeStart, HandleStyles, ResizerAppearance, Snap } from './types';
+import type { EnabledHandles, HandleAlignmentMethod, HandleHighlight, HandlePositioning, HandleResize, HandleResizeStart, HandleSize, HandleStyles, ResizerAppearance, Snap } from './types';
 export type ResizerProps = {
+    className?: string;
     enable: EnabledHandles;
     width: number;
-    handleResizeStart: HandleResizeStart;
-    handleResize: HandleResize;
-    handleResizeStop: HandleResize;
-    innerPadding?: number;
-    handleClassName?: string;
-    className?: string;
     minWidth?: number;
     maxWidth?: number;
-    handleWrapperStyle?: React.CSSProperties;
-    handleComponent?: HandleComponent;
-    handleStyles?: HandleStyles;
-    handlePositioning?: HandlePositioning;
-    handleHeightSize?: HandleHeightSizeType;
-    handleMarginTop?: number;
     snap?: Snap;
     snapGap?: number;
-    handleAlignmentMethod?: HandleAlignmentMethod;
     resizeRatio?: number;
-    isHandleVisible?: boolean;
     appearance?: ResizerAppearance;
+    isHandleVisible?: boolean;
+    handleResizeStart: HandleResizeStart;
+    handleResize: HandleResize;
+    handleResizeStop: HandleResize;
+    /**
+     * This can be used to override the css class name applied to the resize handle.
+     */
+    handleClassName?: string;
+    /**
+     * This is used to override the style of resize handles wrapper.
+     */
+    handleWrapperStyle?: CSSProperties;
+    /**
+     * This property is used to override the style of one or more resize handles. Only the axis you specify will have
+     * its handle style overriden.
+     */
+    handleStyles?: HandleStyles;
+    /**
+     * The handleAlignmentMethod is used in determining the vertical positioning of the resizer handle in relation to its children.
+     */
+    handleAlignmentMethod?: HandleAlignmentMethod;
+    /**
+     * The handlePositioning is used to determine the horizontal position of the resizer handle in relation to its children.
+     */
+    handlePositioning?: HandlePositioning;
+    /**
+     * The handleSize is used to determine the width/height of the handle element.
+     */
+    handleSize?: HandleSize;
+    /**
+     * The handleHighlight is used to determine how the handle looks when the users mouse hovers over the handle element.
+     */
     handleHighlight?: HandleHighlight;
+    /**
+     * The handle can display a tooltip when mouse hovers.
+     */
     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 { HandleAlignmentMethod, HandleHighlight, HandleHeightSizeType, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
+export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';

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

@@ -21,7 +21,7 @@ export type HandleStyles = {
     right?: React.CSSProperties;
     left?: React.CSSProperties;
 };
-export type HandleHeightSizeType = 'small' | 'medium' | 'large';
+export type HandleSize = 'small' | 'medium' | 'large';
 export type HandleAlignmentMethod = 'center' | 'sticky';
 export type HandlePositioning = 'overlap' | 'adjacent';
 export type ResizerAppearance = 'danger';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "75.8.4",
+  "version": "76.0.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"