@atlaskit/editor-common 74.7.5 → 74.7.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.7.7
+
+### Patch Changes
+
+- [`8493df1e169`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8493df1e169) - NO-ISSUE Moved some purely type dependencies to dev dependencies
+
+## 74.7.6
+
+### Patch Changes
+
+- [`0edc12510fb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0edc12510fb) - Updating types, examples and general clean up of Resizer component
+
 ## 74.7.5
 
 ### Patch Changes

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.7.5";
+var packageVersion = "74.7.7";
 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

@@ -1,30 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = ResizerNext;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+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 _reResizable = require("re-resizable");
 var _resizer = require("../styles/shared/resizer");
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleHeightSize", "handleAlignmentMethod", "resizeRatio", "innerPadding"];
+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 ResizerNext(props) {
   var _classnames, _classnames2;
-  var resizable = _react.default.useRef(null);
-  var handleResize = props.handleResize,
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var resizable = (0, _react.useRef)(null);
+  var width = props.width,
+    children = props.children,
+    handleClassName = props.handleClassName,
+    className = props.className,
+    handleResize = props.handleResize,
     handleResizeStart = props.handleResizeStart,
     handleResizeStop = props.handleResizeStop,
-    _props$handlerHeightS = props.handlerHeightSize,
-    handlerHeightSize = _props$handlerHeightS === void 0 ? 'medium' : _props$handlerHeightS,
+    _props$handleHeightSi = props.handleHeightSize,
+    handleHeightSize = _props$handleHeightSi === void 0 ? 'medium' : _props$handleHeightSi,
     _props$handleAlignmen = props.handleAlignmentMethod,
     handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
     _props$resizeRatio = props.resizeRatio,
-    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio;
+    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio,
+    _props$innerPadding = props.innerPadding,
+    innerPadding = _props$innerPadding === void 0 ? _resizer.resizerHandlePadding : _props$innerPadding,
+    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var onResizeStart = _react.default.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) {
@@ -51,13 +70,13 @@ function ResizerNext(props) {
       width: resizableCurrent.state.original.width,
       height: resizableCurrent.state.original.height
     };
+    setIsResizing(false);
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   var handles = {
-    left: (0, _classnames3.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "".concat(props.handleClassName, "-left"), !!props.handleClassName), (0, _defineProperty2.default)(_classnames, _resizer.resizerHandleLeftClassName, !props.handleClassName), (0, _defineProperty2.default)(_classnames, _resizer.resizerHandlerClassName[handlerHeightSize], true), (0, _defineProperty2.default)(_classnames, _resizer.resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames)),
-    right: (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "".concat(props.handleClassName, "-right"), !!props.handleClassName), (0, _defineProperty2.default)(_classnames2, _resizer.resizerHandleRightClassName, !props.handleClassName), (0, _defineProperty2.default)(_classnames2, _resizer.resizerHandlerClassName[handlerHeightSize], true), (0, _defineProperty2.default)(_classnames2, _resizer.resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames2))
+    left: (0, _classnames3.default)(_resizer.resizerHandlerClassName[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.resizerHandlerClassName[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))
   };
-  var innerPadding = props.innerPadding || _resizer.resizerHandlePadding;
   var handleStyles = {
     left: {
       width: '24px',
@@ -72,27 +91,22 @@ function ResizerNext(props) {
       pointerEvents: 'auto'
     }
   };
-  var className = (0, _classnames3.default)(props.className, _resizer.resizerItemClassName);
-  return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, {
+  var resizerClassName = (0, _classnames3.default)(className, _resizer.resizerItemClassName, {
+    'is-resizing': isResizing
+  });
+  return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, (0, _extends2.default)({
     ref: resizable,
     size: {
-      width: props.width,
+      width: width,
       // just content itself (no paddings)
       height: 'auto'
     },
-    maxWidth: props.maxWidth,
-    minWidth: props.minWidth,
-    className: className,
-    enable: props.enable,
+    className: resizerClassName,
     handleClasses: handles,
     handleStyles: handleStyles,
-    handleWrapperStyle: props.handleWrapperStyle //  is used to override the style of resize handles wrapper, needed for media when it is selected and caption appears makes sure the handlers won't jump.
-    ,
-    handleComponent: props.handleComponent // in media was added as a workaround to fix Up arrow key bug when media has caption and the cursor is place below the image. Our epic has a separate ticket to address this problem.
-    ,
     onResizeStart: onResizeStart,
     onResize: onResize,
     onResizeStop: onResizeStop,
     resizeRatio: resizeRatio
-  }, props.children);
+  }, otherProps), 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 = "74.7.5";
+var packageVersion = "74.7.7";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -45,7 +45,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
   }
 });
 exports.messages = messages;
-var BORDER_RADIUS = "var(--ds-radius-100, 4px)";
+var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var EXPAND_SELECTED_BACKGROUND = (0, _components.themed)({
   light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
@@ -71,7 +71,7 @@ var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), (0, _components.themed)({
     light: "var(--ds-icon, ".concat(colors.N90, ")"),
     dark: "var(--ds-icon, #d9dde3)"
-  })(props), "var(--ds-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
+  })(props), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), _editorSharedStyles.akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
 var expandLayoutWrapperStyle = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.7.5",
+	"version": "74.7.7",
 	"sideEffects": false
 }

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.7.5";
+const packageVersion = "74.7.7";
 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,20 +1,29 @@
-import React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
 export default function ResizerNext(props) {
-  const resizable = React.useRef(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const resizable = useRef(null);
   const {
+    width,
+    children,
+    handleClassName,
+    className,
     handleResize,
     handleResizeStart,
     handleResizeStop,
-    handlerHeightSize = 'medium',
+    handleHeightSize = 'medium',
     handleAlignmentMethod = 'center',
-    resizeRatio = 1
+    resizeRatio = 1,
+    innerPadding = resizerHandlePadding,
+    ...otherProps
   } = props;
   const onResizeStart = React.useCallback(event => {
     // prevent creating a drag event on Firefox
     event.preventDefault();
+    setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
   const onResize = React.useCallback((_event, _direction, _elementRef, delta) => {
@@ -41,23 +50,21 @@ export default function ResizerNext(props) {
       width: resizableCurrent.state.original.width,
       height: resizableCurrent.state.original.height
     };
+    setIsResizing(false);
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   const handles = {
-    left: classnames({
-      [`${props.handleClassName}-left`]: !!props.handleClassName,
-      [resizerHandleLeftClassName]: !props.handleClassName,
-      [resizerHandlerClassName[handlerHeightSize]]: true,
+    left: classnames(resizerHandlerClassName[handleHeightSize], {
+      [`${handleClassName}-left`]: !!handleClassName,
+      [resizerHandleLeftClassName]: !handleClassName,
       [resizerHandleStickyClassName]: handleAlignmentMethod === 'sticky'
     }),
-    right: classnames({
-      [`${props.handleClassName}-right`]: !!props.handleClassName,
-      [resizerHandleRightClassName]: !props.handleClassName,
-      [resizerHandlerClassName[handlerHeightSize]]: true,
+    right: classnames(resizerHandlerClassName[handleHeightSize], {
+      [`${handleClassName}-right`]: !!handleClassName,
+      [resizerHandleRightClassName]: !handleClassName,
       [resizerHandleStickyClassName]: handleAlignmentMethod === 'sticky'
     })
   };
-  const innerPadding = props.innerPadding || resizerHandlePadding;
   const handleStyles = {
     left: {
       width: '24px',
@@ -72,27 +79,22 @@ export default function ResizerNext(props) {
       pointerEvents: 'auto'
     }
   };
-  const className = classnames(props.className, resizerItemClassName);
-  return /*#__PURE__*/React.createElement(Resizable, {
+  const resizerClassName = classnames(className, resizerItemClassName, {
+    'is-resizing': isResizing
+  });
+  return /*#__PURE__*/React.createElement(Resizable, _extends({
     ref: resizable,
     size: {
-      width: props.width,
+      width,
       // just content itself (no paddings)
       height: 'auto'
     },
-    maxWidth: props.maxWidth,
-    minWidth: props.minWidth,
-    className: className,
-    enable: props.enable,
+    className: resizerClassName,
     handleClasses: handles,
     handleStyles: handleStyles,
-    handleWrapperStyle: props.handleWrapperStyle //  is used to override the style of resize handles wrapper, needed for media when it is selected and caption appears makes sure the handlers won't jump.
-    ,
-    handleComponent: props.handleComponent // in media was added as a workaround to fix Up arrow key bug when media has caption and the cursor is place below the image. Our epic has a separate ticket to address this problem.
-    ,
     onResizeStart: onResizeStart,
     onResize: onResize,
     onResizeStop: onResizeStop,
     resizeRatio: resizeRatio
-  }, props.children);
+  }, otherProps), children);
 }

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.7.5";
+const packageVersion = "74.7.7";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -30,7 +30,7 @@ export const messages = defineMessages({
     description: 'Placeholder text for an expand node title input field'
   }
 });
-const BORDER_RADIUS = "var(--ds-radius-100, 4px)";
+const BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 const EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 const EXPAND_SELECTED_BACKGROUND = themed({
   light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
@@ -57,7 +57,7 @@ const expandIconWrapperStyle = props => css`
   light: `var(--ds-icon, ${colors.N90})`,
   dark: "var(--ds-icon, #d9dde3)"
 })(props)};
-  border-radius: ${"var(--ds-radius-100, 4px)"};
+  border-radius: ${"var(--ds-border-radius-100, 4px)"};
   width: 24px;
   height: 24px;
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.7.5",
+	"version": "74.7.7",
 	"sideEffects": false
 }

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.7.5";
+var packageVersion = "74.7.7";
 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

@@ -1,23 +1,39 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+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", "resizeRatio", "innerPadding"];
+import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
 export default function ResizerNext(props) {
   var _classnames, _classnames2;
-  var resizable = React.useRef(null);
-  var handleResize = props.handleResize,
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var resizable = useRef(null);
+  var width = props.width,
+    children = props.children,
+    handleClassName = props.handleClassName,
+    className = props.className,
+    handleResize = props.handleResize,
     handleResizeStart = props.handleResizeStart,
     handleResizeStop = props.handleResizeStop,
-    _props$handlerHeightS = props.handlerHeightSize,
-    handlerHeightSize = _props$handlerHeightS === void 0 ? 'medium' : _props$handlerHeightS,
+    _props$handleHeightSi = props.handleHeightSize,
+    handleHeightSize = _props$handleHeightSi === void 0 ? 'medium' : _props$handleHeightSi,
     _props$handleAlignmen = props.handleAlignmentMethod,
     handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
     _props$resizeRatio = props.resizeRatio,
-    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio;
+    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio,
+    _props$innerPadding = props.innerPadding,
+    innerPadding = _props$innerPadding === void 0 ? resizerHandlePadding : _props$innerPadding,
+    otherProps = _objectWithoutProperties(props, _excluded);
   var onResizeStart = React.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) {
@@ -44,13 +60,13 @@ export default function ResizerNext(props) {
       width: resizableCurrent.state.original.width,
       height: resizableCurrent.state.original.height
     };
+    setIsResizing(false);
     handleResizeStop(originalState, delta);
   }, [handleResizeStop]);
   var handles = {
-    left: classnames((_classnames = {}, _defineProperty(_classnames, "".concat(props.handleClassName, "-left"), !!props.handleClassName), _defineProperty(_classnames, resizerHandleLeftClassName, !props.handleClassName), _defineProperty(_classnames, resizerHandlerClassName[handlerHeightSize], true), _defineProperty(_classnames, resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames)),
-    right: classnames((_classnames2 = {}, _defineProperty(_classnames2, "".concat(props.handleClassName, "-right"), !!props.handleClassName), _defineProperty(_classnames2, resizerHandleRightClassName, !props.handleClassName), _defineProperty(_classnames2, resizerHandlerClassName[handlerHeightSize], true), _defineProperty(_classnames2, resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames2))
+    left: classnames(resizerHandlerClassName[handleHeightSize], (_classnames = {}, _defineProperty(_classnames, "".concat(handleClassName, "-left"), !!handleClassName), _defineProperty(_classnames, resizerHandleLeftClassName, !handleClassName), _defineProperty(_classnames, resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames)),
+    right: classnames(resizerHandlerClassName[handleHeightSize], (_classnames2 = {}, _defineProperty(_classnames2, "".concat(handleClassName, "-right"), !!handleClassName), _defineProperty(_classnames2, resizerHandleRightClassName, !handleClassName), _defineProperty(_classnames2, resizerHandleStickyClassName, handleAlignmentMethod === 'sticky'), _classnames2))
   };
-  var innerPadding = props.innerPadding || resizerHandlePadding;
   var handleStyles = {
     left: {
       width: '24px',
@@ -65,27 +81,22 @@ export default function ResizerNext(props) {
       pointerEvents: 'auto'
     }
   };
-  var className = classnames(props.className, resizerItemClassName);
-  return /*#__PURE__*/React.createElement(Resizable, {
+  var resizerClassName = classnames(className, resizerItemClassName, {
+    'is-resizing': isResizing
+  });
+  return /*#__PURE__*/React.createElement(Resizable, _extends({
     ref: resizable,
     size: {
-      width: props.width,
+      width: width,
       // just content itself (no paddings)
       height: 'auto'
     },
-    maxWidth: props.maxWidth,
-    minWidth: props.minWidth,
-    className: className,
-    enable: props.enable,
+    className: resizerClassName,
     handleClasses: handles,
     handleStyles: handleStyles,
-    handleWrapperStyle: props.handleWrapperStyle //  is used to override the style of resize handles wrapper, needed for media when it is selected and caption appears makes sure the handlers won't jump.
-    ,
-    handleComponent: props.handleComponent // in media was added as a workaround to fix Up arrow key bug when media has caption and the cursor is place below the image. Our epic has a separate ticket to address this problem.
-    ,
     onResizeStart: onResizeStart,
     onResize: onResize,
     onResizeStop: onResizeStop,
     resizeRatio: resizeRatio
-  }, props.children);
+  }, otherProps), children);
 }

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

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

@@ -34,7 +34,7 @@ export var messages = defineMessages({
     description: 'Placeholder text for an expand node title input field'
   }
 });
-var BORDER_RADIUS = "var(--ds-radius-100, 4px)";
+var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
 var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
 var EXPAND_SELECTED_BACKGROUND = themed({
   light: "var(--ds-surface, rgba(255, 255, 255, 0.6))",
@@ -59,7 +59,7 @@ var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", ";\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
     light: "var(--ds-icon, ".concat(colors.N90, ")"),
     dark: "var(--ds-icon, #d9dde3)"
-  })(props), "var(--ds-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), akEditorSwoopCubicBezier);
+  })(props), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), akEditorSwoopCubicBezier);
 };
 var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
 export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.7.5",
+	"version": "74.7.7",
 	"sideEffects": false
 }

package/dist/types/analytics/utils.d.ts

@@ -1,3 +1,3 @@
-import { ReadonlyTransaction, Transaction } from 'prosemirror-state';
-import { AnalyticsEventPayloadWithChannel } from './types';
+import type { ReadonlyTransaction, Transaction } from 'prosemirror-state';
+import type { AnalyticsEventPayloadWithChannel } from './types';
 export declare function getAnalyticsEventsFromTransaction(tr: Transaction | ReadonlyTransaction): AnalyticsEventPayloadWithChannel[];

package/dist/types/card/utils.d.ts

@@ -1,5 +1,5 @@
-import { EditorState, ReadonlyTransaction, Selection, Transaction } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
+import type { EditorState, ReadonlyTransaction, Selection, Transaction } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
 import { LinkStepMetadata } from '@atlaskit/adf-schema/steps';
 /**
  * Records metadata about the user action and input method relating to a transaction

package/dist/types/core-utils/inside.d.ts

@@ -1,2 +1,2 @@
-import { EditorState } from 'prosemirror-state';
+import type { EditorState } from 'prosemirror-state';
 export declare const insideTable: (state: EditorState) => Boolean;

package/dist/types/event-dispatcher/index.d.ts

@@ -1,4 +1,4 @@
-import { PluginKey } from 'prosemirror-state';
+import type { PluginKey } from 'prosemirror-state';
 export interface Listeners {
     [name: string]: Set<Listener>;
 }

package/dist/types/provider-factory/card-provider.d.ts

@@ -1,4 +1,4 @@
-import { CardAdf } from '@atlaskit/smart-card';
+import type { CardAdf } from '@atlaskit/smart-card';
 export type CardAppearance = 'inline' | 'block' | 'embed';
 export type { CardAdf };
 export interface CardProvider {

package/dist/types/provider-factory/quick-insert-provider.d.ts

@@ -1,6 +1,6 @@
-import { Node } from 'prosemirror-model';
-import { EditorState, Transaction } from 'prosemirror-state';
-import { TypeAheadItem } from '../types/type-ahead';
+import type { Node } from 'prosemirror-model';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { TypeAheadItem } from '../types/type-ahead';
 export type QuickInsertActionInsert = (node?: Node | Record<string, any> | string, opts?: {
     selectInlineNode?: boolean;
 }) => Transaction;

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

@@ -1,14 +1,10 @@
 import React, { PropsWithChildren } from 'react';
 import { HandleComponent } from 're-resizable';
-import { EnabledHandles, HandleAlignmentMethod, HandleResize, HandlerHeightSizeType } from './types';
-export interface ResizableNumberSize {
-    width: number;
-    height: number;
-}
+import { EnabledHandles, HandleAlignmentMethod, HandleHeightSizeType, HandleResize } from './types';
 export type ResizerProps = {
     enable: EnabledHandles;
     width: number;
-    handleResizeStart: () => number;
+    handleResizeStart: () => void;
     handleResize: HandleResize;
     handleResizeStop: HandleResize;
     innerPadding?: number;
@@ -18,7 +14,7 @@ export type ResizerProps = {
     maxWidth?: number;
     handleWrapperStyle?: React.CSSProperties;
     handleComponent?: HandleComponent;
-    handlerHeightSize?: HandlerHeightSizeType;
+    handleHeightSize?: HandleHeightSizeType;
     handleAlignmentMethod?: HandleAlignmentMethod;
     resizeRatio?: number;
 };

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

@@ -1,2 +1,2 @@
 export { default as ResizerNext } from './Resizer';
-export type { HandlerHeightSizeType, EnabledHandles } from './types';
+export type { HandleHeightSizeType, EnabledHandles, HandleResize, } from './types';

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

@@ -3,18 +3,17 @@ export type EnabledHandles = {
     left?: boolean;
     right?: boolean;
 };
+export type Dimensions = {
+    width: number;
+    height: number;
+};
 export type HandleResize = (newWidth: {
     x: number;
     y: number;
-    width: number;
-    height: number;
-}, delta: {
-    width: number;
-    height: number;
-}) => number;
+} & Dimensions, delta: Dimensions) => void;
 export type HandleStyles = {
     right?: React.CSSProperties;
     left?: React.CSSProperties;
 };
-export type HandlerHeightSizeType = 'small' | 'medium' | 'large';
+export type HandleHeightSizeType = 'small' | 'medium' | 'large';
 export type HandleAlignmentMethod = 'center' | 'sticky';

package/dist/types/safe-plugin/index.d.ts

@@ -1,4 +1,4 @@
-import { Schema } from 'prosemirror-model';
+import type { Schema } from 'prosemirror-model';
 import { Plugin, SafePluginSpec } from 'prosemirror-state';
 export declare class SafePlugin<T = any, S extends Schema = any> extends Plugin {
     _isATypeSafePlugin: never;

package/dist/types/selection/types.d.ts

@@ -1,5 +1,5 @@
-import { EditorState, Selection, Transaction } from 'prosemirror-state';
-import { DecorationSet } from 'prosemirror-view';
+import type { EditorState, Selection, Transaction } from 'prosemirror-state';
+import type { DecorationSet } from 'prosemirror-view';
 export declare enum RelativeSelectionPos {
     Before = "Before",
     Start = "Start",

package/dist/types/transforms/expand.d.ts

@@ -1,5 +1,5 @@
 import { Schema, Slice } from 'prosemirror-model';
-import { EditorState, Selection } from 'prosemirror-state';
+import type { EditorState, Selection } from 'prosemirror-state';
 export declare const findExpand: (state: EditorState, selection?: Selection<any> | null) => import("prosemirror-utils").ContentNodeWithPos | undefined;
 export declare const transformSliceToRemoveOpenExpand: (slice: Slice, schema: Schema) => Slice;
 export declare const transformSliceNestedExpandToExpand: (slice: Slice, schema: Schema) => Slice;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Step } from 'prosemirror-transform';
+import type { Step } from 'prosemirror-transform';
 import { AnnotationId, AnnotationTypes } from '@atlaskit/adf-schema';
-import { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import { AnnotationState, AnnotationUpdateEmitter, AnnotationUpdateEvent, AnnotationUpdateEventPayloads, OnAnnotationClickPayload } from './emitter';
 export type { AnnotationState };
 export type AnnotationByMatches = {

package/dist/types/types/command.d.ts

@@ -1,5 +1,5 @@
-import { EditorState, Transaction } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
+import type { EditorState, Transaction } from 'prosemirror-state';
+import type { EditorView } from 'prosemirror-view';
 export type CommandDispatch = (tr: Transaction) => void;
 export type Command = (state: EditorState, dispatch?: CommandDispatch, view?: EditorView) => boolean;
 export type HigherOrderCommand = (command: Command) => Command;