@atlaskit/editor-common 114.23.0 → 114.24.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-common
 
+## 114.24.0
+
+### Minor Changes
+
+- [`a9b1b25b3ec98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a9b1b25b3ec98) -
+  [ux] CTD-6569 add vertical resize for database native embed in pages
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 114.23.0
 
 ### Minor Changes

package/dist/cjs/monitoring/error.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 = "114.22.1";
+var packageVersion = "114.23.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/resizer/Resizer.js

@@ -20,7 +20,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _breakout = require("../messages/breakout");
 var _resizer = require("../styles/shared/resizer");
-var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef", "labelComponent"]; // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+var _excluded = ["width", "height", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef", "labelComponent"]; // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -36,6 +36,7 @@ var resizerLabelStyles = (0, _primitives.xcss)({
   zIndex: 'layer' // 400 same z-index as the floating toolbar
 });
 var SUPPORTED_HANDLES = ['left', 'right'];
+var SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE = ['left', 'right', 'bottom'];
 var inheritedCSS = {
   position: 'inherit',
   height: 'inherit',
@@ -60,6 +61,7 @@ var ResizerNext = function ResizerNext(props, ref) {
     };
   }, [resizeHandleThumbRef]);
   var width = props.width,
+    height = props.height,
     children = props.children,
     handleClassName = props.handleClassName,
     className = props.className,
@@ -88,13 +90,14 @@ var ResizerNext = function ResizerNext(props, ref) {
     childrenDOMRef = props.childrenDOMRef,
     labelComponent = props.labelComponent,
     otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var supportedHandles = (0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true) ? SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE : SUPPORTED_HANDLES;
   var onResizeStart = (0, _react.useCallback)(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
     setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
-  var onResize = (0, _react.useCallback)(function (_event, _direction, _elementRef, delta) {
+  var onResize = (0, _react.useCallback)(function (_event, direction, _elementRef, delta) {
     if (!handleResize) {
       return;
     }
@@ -108,9 +111,13 @@ var ResizerNext = function ResizerNext(props, ref) {
       width: resizableCurrent.state.original.width,
       height: resizableCurrent.state.original.height
     };
-    handleResize(originalState, delta);
+    if ((0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true)) {
+      handleResize(originalState, delta, direction);
+    } else {
+      handleResize(originalState, delta);
+    }
   }, [handleResize]);
-  var onResizeStop = (0, _react.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;
@@ -122,20 +129,31 @@ var ResizerNext = function ResizerNext(props, ref) {
       height: resizableCurrent.state.original.height
     };
     setIsResizing(false);
-    handleResizeStop(originalState, delta);
+    if ((0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true)) {
+      handleResizeStop(originalState, delta, direction);
+    } else {
+      handleResizeStop(originalState, delta);
+    }
   }, [handleResizeStop]);
-  var handles = {
-    left: (0, _classnames3.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'left', handleSize, handleAlignmentMethod),
-    right: (0, _classnames3.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, 'right', handleSize, handleAlignmentMethod)
-  };
+  var handles = (0, _react.useMemo)(function () {
+    return supportedHandles.reduce(function (result, position) {
+      return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, (0, _classnames3.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, position, handleSize, position === 'bottom' && (0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true) ? undefined : handleAlignmentMethod)));
+    }, {});
+  }, [handleClassName, handleSize, handleAlignmentMethod, supportedHandles]);
   var handleWidth = handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)";
-  var baseHandleStyles = {
+  var baseHorizontalHandleStyles = {
     width: handleWidth,
     zIndex: _resizer.resizerHandleZIndex,
     pointerEvents: 'auto',
     alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
   };
-  var memoizedBaseHandleStyles = (0, _react.useMemo)(function () {
+  var baseBottomHandleStyles = {
+    height: handleWidth,
+    zIndex: _resizer.resizerHandleZIndex,
+    pointerEvents: 'auto',
+    justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
+  };
+  var memoizedBaseHorizontalHandleStyles = (0, _react.useMemo)(function () {
     return {
       width: handleWidth,
       zIndex: _resizer.resizerHandleZIndex,
@@ -143,16 +161,24 @@ var ResizerNext = function ResizerNext(props, ref) {
       alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
     };
   }, [handleWidth, handlePositioning]);
+  var memoizedBaseBottomHandleStyles = (0, _react.useMemo)(function () {
+    return {
+      height: handleWidth,
+      zIndex: _resizer.resizerHandleZIndex,
+      pointerEvents: 'auto',
+      justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
+    };
+  }, [handleWidth, handlePositioning]);
   var offset = handlePositioning === 'adjacent' ? "calc(".concat(handleWidth, " * -1)") : "calc(".concat(handleWidth, " * -0.5)");
   var memoizedNextHandleStyles = (0, _react.useMemo)(function () {
-    return SUPPORTED_HANDLES.reduce(function (result, position) {
-      return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, _objectSpread(_objectSpread({}, memoizedBaseHandleStyles), {}, (0, _defineProperty2.default)({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
+    return supportedHandles.reduce(function (result, position) {
+      return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, _objectSpread(_objectSpread({}, position === 'bottom' ? memoizedBaseBottomHandleStyles : memoizedBaseHorizontalHandleStyles), {}, (0, _defineProperty2.default)({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
     }, {});
-  }, [memoizedBaseHandleStyles, offset, handleStyles]);
+  }, [memoizedBaseBottomHandleStyles, memoizedBaseHorizontalHandleStyles, offset, handleStyles, supportedHandles]);
   var nextHandleStyles = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedNextHandleStyles :
   // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
-  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])));
+  supportedHandles.reduce(function (result, position) {
+    return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, _objectSpread(_objectSpread({}, position === 'bottom' ? baseBottomHandleStyles : baseHorizontalHandleStyles), {}, (0, _defineProperty2.default)({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
   }, {});
   var resizerClassName = (0, _classnames3.default)(className, _resizer.resizerItemClassName, (0, _defineProperty2.default)({
     'is-resizing': isResizing,
@@ -162,7 +188,7 @@ var ResizerNext = function ResizerNext(props, ref) {
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var handleComponent = (0, _react.useMemo)(function () {
-    return SUPPORTED_HANDLES.reduce(function (result, position) {
+    return supportedHandles.reduce(function (result, position) {
       var thumb = /*#__PURE__*/_react.default.createElement("button", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _resizer.resizerHandleThumbClassName,
@@ -207,7 +233,7 @@ var ResizerNext = function ResizerNext(props, ref) {
         style: inheritedCSS
       }, thumbWithTrack)));
     }, {});
-  }, [handleHighlight, handleTooltipContent, formatMessage]);
+  }, [handleHighlight, handleTooltipContent, formatMessage, supportedHandles]);
 
   // 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 () {
@@ -217,17 +243,18 @@ var ResizerNext = function ResizerNext(props, ref) {
     }
     return snapGap;
   }, [snap, snapGap]);
+  var resolvedHeight = (0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true) ? height !== null && height !== void 0 ? height : 'auto' : 'auto';
   var resizerAutoSize = (0, _react.useMemo)(function () {
     return {
       width: width !== null && width !== void 0 ? width : 'auto',
-      height: 'auto'
+      height: resolvedHeight
     };
-  }, [width]);
+  }, [resolvedHeight, width]);
   var resizerSize = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? resizerAutoSize :
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
   {
     width: width !== null && width !== void 0 ? width : 'auto',
-    height: 'auto'
+    height: resolvedHeight
   };
   return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, (0, _extends2.default)({
     ref: resizable,

package/dist/cjs/resizer/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "114.22.1";
+var packageVersion = "114.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/es2019/monitoring/error.js

@@ -4,7 +4,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 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 = "114.22.1";
+const packageVersion = "114.23.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/resizer/Resizer.js

@@ -23,6 +23,7 @@ const resizerLabelStyles = xcss({
   zIndex: 'layer' // 400 same z-index as the floating toolbar
 });
 const SUPPORTED_HANDLES = ['left', 'right'];
+const SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE = ['left', 'right', 'bottom'];
 const inheritedCSS = {
   position: 'inherit',
   height: 'inherit',
@@ -45,6 +46,7 @@ const ResizerNext = (props, ref) => {
   }, [resizeHandleThumbRef]);
   const {
     width,
+    height,
     children,
     handleClassName,
     className,
@@ -67,13 +69,14 @@ const ResizerNext = (props, ref) => {
     labelComponent,
     ...otherProps
   } = props;
+  const supportedHandles = expValEquals('databases-native-embeds-v2', 'isEnabled', true) ? SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE : SUPPORTED_HANDLES;
   const onResizeStart = useCallback(event => {
     // prevent creating a drag event on Firefox
     event.preventDefault();
     setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
-  const onResize = useCallback((_event, _direction, _elementRef, delta) => {
+  const onResize = useCallback((_event, direction, _elementRef, delta) => {
     if (!handleResize) {
       return;
     }
@@ -87,9 +90,13 @@ const ResizerNext = (props, ref) => {
       width: resizableCurrent.state.original.width,
       height: resizableCurrent.state.original.height
     };
-    handleResize(originalState, delta);
+    if (expValEquals('databases-native-embeds-v2', 'isEnabled', true)) {
+      handleResize(originalState, delta, direction);
+    } else {
+      handleResize(originalState, delta);
+    }
   }, [handleResize]);
-  const onResizeStop = useCallback((_event, _direction, _elementRef, delta) => {
+  const onResizeStop = useCallback((_event, direction, _elementRef, delta) => {
     const resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -101,40 +108,56 @@ const ResizerNext = (props, ref) => {
       height: resizableCurrent.state.original.height
     };
     setIsResizing(false);
-    handleResizeStop(originalState, delta);
+    if (expValEquals('databases-native-embeds-v2', 'isEnabled', true)) {
+      handleResizeStop(originalState, delta, direction);
+    } else {
+      handleResizeStop(originalState, delta);
+    }
   }, [handleResizeStop]);
-  const handles = {
-    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 handles = useMemo(() => supportedHandles.reduce((result, position) => ({
+    ...result,
+    [position]: classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, position, handleSize, position === 'bottom' && expValEquals('databases-native-embeds-v2', 'isEnabled', true) ? undefined : handleAlignmentMethod)
+  }), {}), [handleClassName, handleSize, handleAlignmentMethod, supportedHandles]);
   const handleWidth = handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)";
-  const baseHandleStyles = {
+  const baseHorizontalHandleStyles = {
     width: handleWidth,
     zIndex: resizerHandleZIndex,
     pointerEvents: 'auto',
     alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
   };
-  const memoizedBaseHandleStyles = useMemo(() => ({
+  const baseBottomHandleStyles = {
+    height: handleWidth,
+    zIndex: resizerHandleZIndex,
+    pointerEvents: 'auto',
+    justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
+  };
+  const memoizedBaseHorizontalHandleStyles = useMemo(() => ({
     width: handleWidth,
     zIndex: resizerHandleZIndex,
     pointerEvents: 'auto',
     alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
   }), [handleWidth, handlePositioning]);
+  const memoizedBaseBottomHandleStyles = useMemo(() => ({
+    height: handleWidth,
+    zIndex: resizerHandleZIndex,
+    pointerEvents: 'auto',
+    justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
+  }), [handleWidth, handlePositioning]);
   const offset = handlePositioning === 'adjacent' ? `calc(${handleWidth} * -1)` : `calc(${handleWidth} * -0.5)`;
-  const memoizedNextHandleStyles = useMemo(() => SUPPORTED_HANDLES.reduce((result, position) => ({
+  const memoizedNextHandleStyles = useMemo(() => supportedHandles.reduce((result, position) => ({
     ...result,
     [position]: {
-      ...memoizedBaseHandleStyles,
+      ...(position === 'bottom' ? memoizedBaseBottomHandleStyles : memoizedBaseHorizontalHandleStyles),
       [position]: offset,
       ...(handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])
     }
-  }), {}), [memoizedBaseHandleStyles, offset, handleStyles]);
+  }), {}), [memoizedBaseBottomHandleStyles, memoizedBaseHorizontalHandleStyles, offset, handleStyles, supportedHandles]);
   const nextHandleStyles = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedNextHandleStyles :
   // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
-  SUPPORTED_HANDLES.reduce((result, position) => ({
+  supportedHandles.reduce((result, position) => ({
     ...result,
     [position]: {
-      ...baseHandleStyles,
+      ...(position === 'bottom' ? baseBottomHandleStyles : baseHorizontalHandleStyles),
       [position]: offset,
       ...(handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])
     }
@@ -151,7 +174,7 @@ const ResizerNext = (props, ref) => {
     formatMessage
   } = useIntl();
   const handleComponent = useMemo(() => {
-    return SUPPORTED_HANDLES.reduce((result, position) => {
+    return supportedHandles.reduce((result, position) => {
       const thumb = /*#__PURE__*/React.createElement("button", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: resizerHandleThumbClassName,
@@ -205,7 +228,7 @@ const ResizerNext = (props, ref) => {
         }, thumbWithTrack)
       };
     }, {});
-  }, [handleHighlight, handleTooltipContent, formatMessage]);
+  }, [handleHighlight, handleTooltipContent, formatMessage, supportedHandles]);
 
   // snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
   const snapGapActual = useMemo(() => {
@@ -215,15 +238,16 @@ const ResizerNext = (props, ref) => {
     }
     return snapGap;
   }, [snap, snapGap]);
+  const resolvedHeight = expValEquals('databases-native-embeds-v2', 'isEnabled', true) ? height !== null && height !== void 0 ? height : 'auto' : 'auto';
   const resizerAutoSize = useMemo(() => ({
     width: width !== null && width !== void 0 ? width : 'auto',
-    height: 'auto'
-  }), [width]);
+    height: resolvedHeight
+  }), [resolvedHeight, width]);
   const resizerSize = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? resizerAutoSize :
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
   {
     width: width !== null && width !== void 0 ? width : 'auto',
-    height: 'auto'
+    height: resolvedHeight
   };
   return /*#__PURE__*/React.createElement(Resizable, _extends({
     ref: resizable,

package/dist/es2019/resizer/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "114.22.1";
+const packageVersion = "114.23.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/monitoring/error.js

@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
 import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
 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 = "114.22.1";
+var packageVersion = "114.23.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/resizer/Resizer.js

@@ -2,7 +2,7 @@ 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", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef", "labelComponent"];
+var _excluded = ["width", "height", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef", "labelComponent"];
 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, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
@@ -29,6 +29,7 @@ var resizerLabelStyles = xcss({
   zIndex: 'layer' // 400 same z-index as the floating toolbar
 });
 var SUPPORTED_HANDLES = ['left', 'right'];
+var SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE = ['left', 'right', 'bottom'];
 var inheritedCSS = {
   position: 'inherit',
   height: 'inherit',
@@ -53,6 +54,7 @@ var ResizerNext = function ResizerNext(props, ref) {
     };
   }, [resizeHandleThumbRef]);
   var width = props.width,
+    height = props.height,
     children = props.children,
     handleClassName = props.handleClassName,
     className = props.className,
@@ -81,13 +83,14 @@ var ResizerNext = function ResizerNext(props, ref) {
     childrenDOMRef = props.childrenDOMRef,
     labelComponent = props.labelComponent,
     otherProps = _objectWithoutProperties(props, _excluded);
+  var supportedHandles = expValEquals('databases-native-embeds-v2', 'isEnabled', true) ? SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE : SUPPORTED_HANDLES;
   var onResizeStart = useCallback(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
     setIsResizing(true);
     handleResizeStart();
   }, [handleResizeStart]);
-  var onResize = useCallback(function (_event, _direction, _elementRef, delta) {
+  var onResize = useCallback(function (_event, direction, _elementRef, delta) {
     if (!handleResize) {
       return;
     }
@@ -101,9 +104,13 @@ var ResizerNext = function ResizerNext(props, ref) {
       width: resizableCurrent.state.original.width,
       height: resizableCurrent.state.original.height
     };
-    handleResize(originalState, delta);
+    if (expValEquals('databases-native-embeds-v2', 'isEnabled', true)) {
+      handleResize(originalState, delta, direction);
+    } else {
+      handleResize(originalState, delta);
+    }
   }, [handleResize]);
-  var onResizeStop = useCallback(function (_event, _direction, _elementRef, delta) {
+  var onResizeStop = useCallback(function (_event, direction, _elementRef, delta) {
     var resizableCurrent = resizable.current;
     if (!resizableCurrent || !resizableCurrent.state.original) {
       return;
@@ -115,20 +122,31 @@ var ResizerNext = function ResizerNext(props, ref) {
       height: resizableCurrent.state.original.height
     };
     setIsResizing(false);
-    handleResizeStop(originalState, delta);
+    if (expValEquals('databases-native-embeds-v2', 'isEnabled', true)) {
+      handleResizeStop(originalState, delta, direction);
+    } else {
+      handleResizeStop(originalState, delta);
+    }
   }, [handleResizeStop]);
-  var handles = {
-    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 handles = useMemo(function () {
+    return supportedHandles.reduce(function (result, position) {
+      return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, classnames(handleClassName !== null && handleClassName !== void 0 ? handleClassName : resizerHandleClassName, position, handleSize, position === 'bottom' && expValEquals('databases-native-embeds-v2', 'isEnabled', true) ? undefined : handleAlignmentMethod)));
+    }, {});
+  }, [handleClassName, handleSize, handleAlignmentMethod, supportedHandles]);
   var handleWidth = handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)";
-  var baseHandleStyles = {
+  var baseHorizontalHandleStyles = {
     width: handleWidth,
     zIndex: resizerHandleZIndex,
     pointerEvents: 'auto',
     alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
   };
-  var memoizedBaseHandleStyles = useMemo(function () {
+  var baseBottomHandleStyles = {
+    height: handleWidth,
+    zIndex: resizerHandleZIndex,
+    pointerEvents: 'auto',
+    justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
+  };
+  var memoizedBaseHorizontalHandleStyles = useMemo(function () {
     return {
       width: handleWidth,
       zIndex: resizerHandleZIndex,
@@ -136,16 +154,24 @@ var ResizerNext = function ResizerNext(props, ref) {
       alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
     };
   }, [handleWidth, handlePositioning]);
+  var memoizedBaseBottomHandleStyles = useMemo(function () {
+    return {
+      height: handleWidth,
+      zIndex: resizerHandleZIndex,
+      pointerEvents: 'auto',
+      justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
+    };
+  }, [handleWidth, handlePositioning]);
   var offset = handlePositioning === 'adjacent' ? "calc(".concat(handleWidth, " * -1)") : "calc(".concat(handleWidth, " * -0.5)");
   var memoizedNextHandleStyles = useMemo(function () {
-    return SUPPORTED_HANDLES.reduce(function (result, position) {
-      return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, _objectSpread(_objectSpread({}, memoizedBaseHandleStyles), {}, _defineProperty({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
+    return supportedHandles.reduce(function (result, position) {
+      return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, _objectSpread(_objectSpread({}, position === 'bottom' ? memoizedBaseBottomHandleStyles : memoizedBaseHorizontalHandleStyles), {}, _defineProperty({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
     }, {});
-  }, [memoizedBaseHandleStyles, offset, handleStyles]);
+  }, [memoizedBaseBottomHandleStyles, memoizedBaseHorizontalHandleStyles, offset, handleStyles, supportedHandles]);
   var nextHandleStyles = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedNextHandleStyles :
   // eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
-  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])));
+  supportedHandles.reduce(function (result, position) {
+    return _objectSpread(_objectSpread({}, result), {}, _defineProperty({}, position, _objectSpread(_objectSpread({}, position === 'bottom' ? baseBottomHandleStyles : baseHorizontalHandleStyles), {}, _defineProperty({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
   }, {});
   var resizerClassName = classnames(className, resizerItemClassName, _defineProperty({
     'is-resizing': isResizing,
@@ -155,7 +181,7 @@ var ResizerNext = function ResizerNext(props, ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleComponent = useMemo(function () {
-    return SUPPORTED_HANDLES.reduce(function (result, position) {
+    return supportedHandles.reduce(function (result, position) {
       var thumb = /*#__PURE__*/React.createElement("button", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: resizerHandleThumbClassName,
@@ -200,7 +226,7 @@ var ResizerNext = function ResizerNext(props, ref) {
         style: inheritedCSS
       }, thumbWithTrack)));
     }, {});
-  }, [handleHighlight, handleTooltipContent, formatMessage]);
+  }, [handleHighlight, handleTooltipContent, formatMessage, supportedHandles]);
 
   // snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
   var snapGapActual = useMemo(function () {
@@ -210,17 +236,18 @@ var ResizerNext = function ResizerNext(props, ref) {
     }
     return snapGap;
   }, [snap, snapGap]);
+  var resolvedHeight = expValEquals('databases-native-embeds-v2', 'isEnabled', true) ? height !== null && height !== void 0 ? height : 'auto' : 'auto';
   var resizerAutoSize = useMemo(function () {
     return {
       width: width !== null && width !== void 0 ? width : 'auto',
-      height: 'auto'
+      height: resolvedHeight
     };
-  }, [width]);
+  }, [resolvedHeight, width]);
   var resizerSize = expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? resizerAutoSize :
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
   {
     width: width !== null && width !== void 0 ? width : 'auto',
-    height: 'auto'
+    height: resolvedHeight
   };
   return /*#__PURE__*/React.createElement(Resizable, _extends({
     ref: resizable,

package/dist/esm/resizer/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "114.22.1";
+var packageVersion = "114.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

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

@@ -48,13 +48,16 @@ export type ResizerProps = {
      * This is used to override the style of resize handles wrapper.
      */
     handleWrapperStyle?: CSSProperties;
+    height?: number | string;
     isHandleVisible?: boolean;
     /**
      * Children of the component, this is going to be display below the resizer
      * useful for displaying a label such as size or layout
      */
     labelComponent?: React.ReactNode;
+    maxHeight?: number | string;
     maxWidth?: number | string;
+    minHeight?: number | string;
     minWidth?: number | string;
     /**
      * control if extended resize zone is needed, by default we apply it to the resizer

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

@@ -1,4 +1,6 @@
+import type { ResizeDirection } from 're-resizable';
 export type EnabledHandles = {
+    bottom?: boolean;
     left?: boolean;
     right?: boolean;
 };
@@ -14,9 +16,10 @@ export type Snap = {
     x?: Array<number>;
     y?: Array<number>;
 };
-export type HandleResize = (newWidth: Position & Dimensions, delta: Dimensions) => void;
+export type HandleResize = (newWidth: Position & Dimensions, delta: Dimensions, direction?: ResizeDirection) => void;
 export type HandleResizeStart = () => void;
 export type HandleStyles = {
+    bottom?: React.CSSProperties;
     left?: React.CSSProperties;
     right?: React.CSSProperties;
 };

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

@@ -48,13 +48,16 @@ export type ResizerProps = {
      * This is used to override the style of resize handles wrapper.
      */
     handleWrapperStyle?: CSSProperties;
+    height?: number | string;
     isHandleVisible?: boolean;
     /**
      * Children of the component, this is going to be display below the resizer
      * useful for displaying a label such as size or layout
      */
     labelComponent?: React.ReactNode;
+    maxHeight?: number | string;
     maxWidth?: number | string;
+    minHeight?: number | string;
     minWidth?: number | string;
     /**
      * control if extended resize zone is needed, by default we apply it to the resizer

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

@@ -1,4 +1,6 @@
+import type { ResizeDirection } from 're-resizable';
 export type EnabledHandles = {
+    bottom?: boolean;
     left?: boolean;
     right?: boolean;
 };
@@ -14,9 +16,10 @@ export type Snap = {
     x?: Array<number>;
     y?: Array<number>;
 };
-export type HandleResize = (newWidth: Position & Dimensions, delta: Dimensions) => void;
+export type HandleResize = (newWidth: Position & Dimensions, delta: Dimensions, direction?: ResizeDirection) => void;
 export type HandleResizeStart = () => void;
 export type HandleStyles = {
+    bottom?: React.CSSProperties;
     left?: React.CSSProperties;
     right?: React.CSSProperties;
 };

package/package.json

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