@atlaskit/editor-plugin-media 1.37.2 → 1.37.4

package/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -14,7 +15,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -27,8 +28,10 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerStyles, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import { checkMediaType } from '../../utils/check-media-type';
@@ -77,7 +80,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           return layout;
         }
       }
-      return _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
+      return _this.calcUnwrappedLayout(newWidth, containerWidth || 0, lineLength, fullWidthMode, _this.isNestedNode());
     });
     _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
       if (isNestedNode) {
@@ -420,7 +423,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         fullWidthMode = _this$props7.fullWidthMode;
 
       // disable guidelines for nested media single node
-      return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+      return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth || 0, fullWidthMode);
     }
   }, {
     key: "checkVideoFile",
@@ -541,4 +544,549 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }]);
   return ResizableMediaSingleNext;
 }(React.Component);
-export default ResizableMediaSingleNext;
+var calcPxHeight = function calcPxHeight(props) {
+  var newWidth = props.newWidth,
+    previousWidth = props.previousWidth,
+    previousHeight = props.previousHeight;
+  return Math.round(previousHeight / previousWidth * newWidth);
+};
+var calcMinWidth = function calcMinWidth(_ref2) {
+  var isVideoFile = _ref2.isVideoFile,
+    contentWidth = _ref2.contentWidth;
+  return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
+};
+var calcMaxWidth = function calcMaxWidth(_ref3) {
+  var containerWidth = _ref3.containerWidth,
+    editorAppearance = _ref3.editorAppearance;
+  return calcMediaSingleMaxWidth(containerWidth, editorAppearance);
+};
+var setIsResizingPluginState = function setIsResizingPluginState(_ref4) {
+  var isResizing = _ref4.isResizing,
+    nodePosition = _ref4.nodePosition,
+    initialWidth = _ref4.initialWidth;
+  return function (state, dispatch) {
+    var tr = state.tr;
+    tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+    tr.setMeta('is-resizer-resizing', isResizing);
+    if (isResizing && typeof nodePosition === 'number') {
+      tr.setSelection(NodeSelection.create(state.doc, nodePosition));
+    }
+    if (isResizing && typeof initialWidth === 'number') {
+      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, initialWidth);
+    }
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var calcUnwrappedLayout = function calcUnwrappedLayout(width, containerWidth, contentWidth, fullWidthMode, isNestedNode) {
+  if (isNestedNode) {
+    return 'center';
+  }
+  if (fullWidthMode) {
+    if (width < contentWidth) {
+      return 'center';
+    }
+    return 'full-width';
+  }
+
+  // handle top-level node in fixed-width editor
+  if (width <= contentWidth) {
+    return 'center';
+  }
+  if (width < Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)) {
+    return 'wide';
+  }
+
+  // set full width to be containerWidth - akEditorGutterPaddingDynamic() * 2
+  // instead of containerWidth - akEditorBreakoutPadding,
+  // so that we have image aligned with text
+  return 'full-width';
+};
+var calcNewLayout = function calcNewLayout(_ref5) {
+  var layout = _ref5.layout,
+    containerWidth = _ref5.containerWidth,
+    lineLength = _ref5.lineLength,
+    fullWidthMode = _ref5.fullWidthMode,
+    isNestedNode = _ref5.isNestedNode;
+  return function (newWidth, stop) {
+    var newPct = calcPctFromPx(newWidth, lineLength) * 100;
+    var wrappedLayout = wrappedLayouts.indexOf(layout) > -1;
+    if (newPct <= 100 && wrappedLayout) {
+      if (!stop || newPct !== 100) {
+        return layout;
+      }
+    }
+    return calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, isNestedNode);
+  };
+};
+var calculateSizeState = function calculateSizeState(props) {
+  return function (size, delta) {
+    var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var aspectRatio = arguments.length > 3 ? arguments[3] : undefined;
+    var calculatedWidth = Math.round(size.width + delta.width);
+    var calculatedWidthWithLayout = calcNewLayout(props)(calculatedWidth, onResizeStop);
+    return {
+      width: calculatedWidth,
+      height: calculatedWidth / aspectRatio,
+      layout: calculatedWidthWithLayout
+    };
+  };
+};
+var getAspectRatio = function getAspectRatio(_ref6) {
+  var width = _ref6.width,
+    height = _ref6.height;
+  if (width && height > 0) {
+    return width / height;
+  }
+
+  // TODO handle this case
+  return 1;
+};
+var updateSizeInPluginState = throttle(function (_ref7) {
+  var width = _ref7.width,
+    view = _ref7.view;
+  var state = view.state,
+    dispatch = view.dispatch;
+  var tr = state.tr;
+  tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
+  return dispatch(tr);
+}, MEDIA_SINGLE_RESIZE_THROTTLE_TIME);
+export var ResizableMediaSingleNextFunctional = function ResizableMediaSingleNextFunctional(props) {
+  var origWidth = props.width,
+    children = props.children,
+    containerWidth = props.containerWidth,
+    fullWidthMode = props.fullWidthMode,
+    layout = props.layout,
+    selected = props.selected,
+    showLegacyNotification = props.showLegacyNotification,
+    className = props.className,
+    dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
+    editorAppearance = props.editorAppearance,
+    getPos = props.getPos,
+    lineLength = props.lineLength,
+    mediaSingleWidth = props.mediaSingleWidth,
+    height = props.height,
+    nodeType = props.nodeType,
+    pluginInjectionApi = props.pluginInjectionApi,
+    updateSize = props.updateSize,
+    view = props.view,
+    viewMediaClientConfig = props.viewMediaClientConfig;
+  var initialWidth = useMemo(function () {
+    return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
+  }, [mediaSingleWidth]);
+  var _useState = useState({
+      width: initialWidth,
+      height: calcPxHeight({
+        newWidth: initialWidth,
+        previousWidth: initialWidth,
+        previousHeight: height
+      })
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dimensions = _useState2[0],
+    setDimensions = _useState2[1];
+  var dimensionsRef = useRef(dimensions);
+  var lastSnappedGuidelineKeysRef = useRef([]);
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    snaps = _useState4[0],
+    setSnaps = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isResizing = _useState6[0],
+    setIsResizing = _useState6[1];
+  var _useState7 = useState(true),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isVideoFile = _useState8[0],
+    setIsVideoFile = _useState8[1];
+  var nodePosition = useMemo(function () {
+    if (typeof getPos !== 'function') {
+      return null;
+    }
+    var pos = getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+    return pos;
+  }, [getPos]);
+  var isNestedNode = useMemo(function () {
+    if (nodePosition === null) {
+      return false;
+    }
+    var $pos = view.state.doc.resolve(nodePosition);
+    return !!($pos && $pos.depth !== 0);
+  }, [nodePosition, view]);
+  var maybeContainerWidth = containerWidth || origWidth;
+  var memoizedCss = useMemo(function () {
+    return wrapperStyle({
+      layout: layout,
+      containerWidth: maybeContainerWidth,
+      fullWidthMode: fullWidthMode,
+      mediaSingleWidth: dimensions.width,
+      isNestedNode: isNestedNode,
+      isExtendedResizeExperienceOn: true
+    });
+  }, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isNestedNode]);
+  var maxWidth = useMemo(function () {
+    if (!isResizing && isNestedNode) {
+      return undefined;
+    }
+    if (isNestedNode || fullWidthMode) {
+      return lineLength;
+    }
+    return calcMaxWidth({
+      containerWidth: containerWidth,
+      editorAppearance: editorAppearance
+    });
+  }, [isNestedNode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing]);
+  var minWidth = calcMinWidth({
+    isVideoFile: isVideoFile,
+    contentWidth: lineLength
+  });
+
+  // while is not resizing, we take 100% as min-width if the container width is less than the min-width
+  var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
+  var resizerNextClassName = useMemo(function () {
+    // TODO: Clean up where this lives and how it gets generated
+    var classNameNext = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, {
+      'richMedia-selected': selected,
+      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+    });
+    return classnames(classNameNext, resizerStyles);
+  }, [className, isResizing, layout, selected]);
+  var isInsideInlineLike = useMemo(function () {
+    if (nodePosition === null) {
+      return false;
+    }
+    var $pos = view.state.doc.resolve(nodePosition);
+    var listItem = view.state.schema.nodes.listItem;
+    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+  }, [nodePosition, view]);
+  var enable = useMemo(function () {
+    return handleSides.reduce(function (acc, side) {
+      var oppositeSide = side === 'left' ? 'right' : 'left';
+      acc[side] = nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
+      if (side === 'left' && isInsideInlineLike) {
+        acc[side] = false;
+      }
+      return acc;
+    }, {});
+  }, [layout, isInsideInlineLike]);
+  var defaultGuidelines = useMemo(function () {
+    if (isNestedNode) {
+      return [];
+    }
+    return generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+  }, [isNestedNode, lineLength, containerWidth, fullWidthMode]);
+  var relativeGuidesRef = useRef({});
+  var guidelinesRef = useRef([]);
+  var updateGuidelines = useCallback(function () {
+    var _generateDynamicGuide2 = generateDynamicGuidelines(view.state, lineLength, {
+        styles: {
+          lineStyle: 'dashed'
+        },
+        show: false
+      }),
+      relativeGuides = _generateDynamicGuide2.relativeGuides,
+      dynamicGuides = _generateDynamicGuide2.dynamicGuides;
+
+    // disable guidelines for nested media single node
+    var dynamicGuidelines = isNestedNode ? [] : dynamicGuides;
+    relativeGuidesRef.current = relativeGuides;
+    guidelinesRef.current = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
+  }, [view, lineLength, defaultGuidelines, isNestedNode]);
+  var isGuidelineEnabled = useMemo(function () {
+    return !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.guideline);
+  }, [pluginInjectionApi]);
+  var handleResizeStart = useCallback(function () {
+    setIsResizing(true);
+    setIsResizingPluginState({
+      isResizing: true,
+      nodePosition: nodePosition,
+      initialWidth: dimensionsRef.current.width
+    })(view.state, view.dispatch);
+    if (isGuidelineEnabled) {
+      updateGuidelines();
+    }
+  }, [view, nodePosition, updateGuidelines, isGuidelineEnabled]);
+  var getRelativeGuides = useCallback(function () {
+    var _pluginInjectionApi$g;
+    if (typeof nodePosition !== 'number') {
+      return [];
+    }
+    var guidelinePluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 || (_pluginInjectionApi$g = _pluginInjectionApi$g.sharedState) === null || _pluginInjectionApi$g === void 0 ? void 0 : _pluginInjectionApi$g.currentState();
+    var _ref8 = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
+        top: 0,
+        left: 0
+      },
+      topOffset = _ref8.top;
+    var $pos = view.state.doc.resolve(nodePosition);
+    var relativeGuides = $pos && $pos.nodeAfter && dimensionsRef.current.width ? getRelativeGuidelines(relativeGuidesRef.current, {
+      node: $pos.nodeAfter,
+      pos: $pos.pos
+    }, view, lineLength, topOffset, dimensionsRef.current) : [];
+    return relativeGuides;
+  }, [pluginInjectionApi, nodePosition, view, lineLength]);
+  var updateActiveGuidelines = useCallback(function () {
+    var _pluginInjectionApi$g2;
+    var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var guidelines = arguments.length > 1 ? arguments[1] : undefined;
+    var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
+    if (!guidelineSnapsReference.snaps.x) {
+      return;
+    }
+    var _findClosestSnap2 = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
+      gap = _findClosestSnap2.gap,
+      activeGuidelineKeys = _findClosestSnap2.keys;
+    var relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();
+    lastSnappedGuidelineKeysRef.current = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
+      return rg.key;
+    });
+    var nextGuideLines = [].concat(_toConsumableArray(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), _toConsumableArray(relativeGuidelines));
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 || (_pluginInjectionApi$g2 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g2 === void 0 || _pluginInjectionApi$g2.displayGuideline(view)({
+      guidelines: nextGuideLines
+    });
+  }, [getRelativeGuides, pluginInjectionApi, view]);
+  var aspectRatioRef = useRef(getAspectRatio({
+    width: props.width,
+    height: props.height
+  }));
+  var handleResize = useCallback(function (size, delta) {
+    var _calculateSizeState = calculateSizeState({
+        layout: layout,
+        containerWidth: containerWidth,
+        lineLength: lineLength,
+        fullWidthMode: fullWidthMode,
+        isNestedNode: isNestedNode
+      })(size, delta, false, aspectRatioRef.current),
+      width = _calculateSizeState.width,
+      height = _calculateSizeState.height,
+      newLayout = _calculateSizeState.layout;
+    if (isGuidelineEnabled) {
+      var guidelineSnaps = getGuidelineSnaps(guidelinesRef.current, lineLength, layout);
+      updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
+      var relativeSnaps = getRelativeGuideSnaps(relativeGuidesRef.current, aspectRatioRef.current);
+      setSnaps({
+        x: [].concat(_toConsumableArray(guidelineSnaps.snaps.x || []), _toConsumableArray(relativeSnaps))
+      });
+    }
+    setDimensions({
+      width: width,
+      height: height
+    });
+    updateSizeInPluginState({
+      width: width,
+      view: view
+    });
+    if (newLayout !== layout) {
+      updateSize(width, newLayout);
+    }
+  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isNestedNode, updateActiveGuidelines]);
+  var handleResizeStop = useCallback(function (size, delta) {
+    var _pluginInjectionApi$g3;
+    if (typeof nodePosition !== 'number') {
+      return;
+    }
+    var _calculateSizeState2 = calculateSizeState({
+        layout: layout,
+        containerWidth: containerWidth,
+        lineLength: lineLength,
+        fullWidthMode: fullWidthMode,
+        isNestedNode: isNestedNode
+      })(size, delta, false, aspectRatioRef.current),
+      width = _calculateSizeState2.width,
+      height = _calculateSizeState2.height,
+      newLayout = _calculateSizeState2.layout;
+    if (dispatchAnalyticsEvent) {
+      var $pos = view.state.doc.resolve(nodePosition);
+      var event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
+        width: width,
+        layout: newLayout,
+        widthType: 'pixel',
+        snapType: getGuidelineTypeFromKey(lastSnappedGuidelineKeysRef.current, guidelinesRef.current),
+        parentNode: $pos ? $pos.parent.type.name : undefined,
+        inputMethod: 'mouse'
+      });
+      if (event) {
+        dispatchAnalyticsEvent(event);
+      }
+    }
+    setIsResizing(false);
+    setIsResizingPluginState({
+      isResizing: false
+    })(view.state, view.dispatch);
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g3 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g3 === void 0 || (_pluginInjectionApi$g3 = _pluginInjectionApi$g3.actions) === null || _pluginInjectionApi$g3 === void 0 || _pluginInjectionApi$g3.displayGuideline(view)({
+      guidelines: []
+    });
+    var newWidth = width;
+    if (newLayout === 'full-width') {
+      // When a node reaches full width in current viewport,
+      // update its width with 1800 to align with pixel entry
+      newWidth = akEditorFullWidthLayoutWidth;
+    }
+    setDimensions({
+      width: newWidth,
+      height: height
+    });
+    updateSize(newWidth, newLayout);
+  }, [nodeType, dispatchAnalyticsEvent, containerWidth, fullWidthMode, isNestedNode, layout, lineLength, view, nodePosition, pluginInjectionApi, updateSize]);
+  var mountedRef = React.useRef(true);
+  useLayoutEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  useLayoutEffect(function () {
+    setDimensions({
+      width: initialWidth,
+      height: calcPxHeight({
+        newWidth: initialWidth,
+        previousWidth: initialWidth,
+        previousHeight: height
+      })
+    });
+  }, [initialWidth, height]);
+  useEffect(function () {
+    dimensionsRef.current = dimensions;
+  }, [dimensions]);
+  useEffect(function () {
+    if (!viewMediaClientConfig || typeof nodePosition !== 'number') {
+      return;
+    }
+    var mediaNode = view.state.doc.nodeAt(nodePosition + 1);
+    if (!mediaNode) {
+      return;
+    }
+    checkMediaType(mediaNode, viewMediaClientConfig).then(function (mediaType) {
+      if (mountedRef.current) {
+        var _isVideoFile = mediaType !== 'external' && mediaType !== 'image';
+        setIsVideoFile(_isVideoFile);
+      }
+    });
+  }, [view, viewMediaClientConfig, nodePosition]);
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: memoizedCss
+  }, jsx(ResizerNext, {
+    minWidth: minViewWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: resizerNextClassName,
+    snapGap: MEDIA_SINGLE_SNAP_GAP,
+    enable: enable,
+    width: dimensions.width,
+    handleResizeStart: handleResizeStart,
+    handleResize: handleResize,
+    handleResizeStop: handleResizeStop,
+    snap: snaps,
+    resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
+    "data-testid": resizerNextTestId,
+    isHandleVisible: selected,
+    handlePositioning: isNestedNode ? 'adjacent' : undefined,
+    handleHighlight: "full-height"
+  }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
+};
+var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref9) {
+  var allowBreakoutSnapPoints = _ref9.allowBreakoutSnapPoints,
+    children = _ref9.children,
+    className = _ref9.className,
+    containerWidth = _ref9.containerWidth,
+    dataAttributes = _ref9.dataAttributes,
+    disableHandles = _ref9.disableHandles,
+    dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
+    editorAppearance = _ref9.editorAppearance,
+    fullWidthMode = _ref9.fullWidthMode,
+    getPos = _ref9.getPos,
+    gridSize = _ref9.gridSize,
+    handleMediaSingleRef = _ref9.handleMediaSingleRef,
+    hasFallbackContainer = _ref9.hasFallbackContainer,
+    height = _ref9.height,
+    isInsideOfInlineExtension = _ref9.isInsideOfInlineExtension,
+    isLoading = _ref9.isLoading,
+    layout = _ref9.layout,
+    lineLength = _ref9.lineLength,
+    mediaSingleWidth = _ref9.mediaSingleWidth,
+    nodeType = _ref9.nodeType,
+    pctWidth = _ref9.pctWidth,
+    pluginInjectionApi = _ref9.pluginInjectionApi,
+    selected = _ref9.selected,
+    showLegacyNotification = _ref9.showLegacyNotification,
+    size = _ref9.size,
+    updateSize = _ref9.updateSize,
+    view = _ref9.view,
+    viewMediaClientConfig = _ref9.viewMediaClientConfig,
+    width = _ref9.width;
+  if (fg('platform_editor_react18_phase2__media_single')) {
+    return jsx(ResizableMediaSingleNextFunctional, {
+      allowBreakoutSnapPoints: allowBreakoutSnapPoints,
+      children: children
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: className,
+      containerWidth: containerWidth,
+      dataAttributes: dataAttributes,
+      disableHandles: disableHandles,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      editorAppearance: editorAppearance,
+      fullWidthMode: fullWidthMode,
+      getPos: getPos,
+      gridSize: gridSize,
+      handleMediaSingleRef: handleMediaSingleRef,
+      hasFallbackContainer: hasFallbackContainer,
+      height: height,
+      isInsideOfInlineExtension: isInsideOfInlineExtension,
+      isLoading: isLoading,
+      layout: layout,
+      lineLength: lineLength,
+      mediaSingleWidth: mediaSingleWidth,
+      nodeType: nodeType,
+      pctWidth: pctWidth,
+      pluginInjectionApi: pluginInjectionApi,
+      selected: selected,
+      showLegacyNotification: showLegacyNotification,
+      size: size,
+      updateSize: updateSize,
+      view: view,
+      viewMediaClientConfig: viewMediaClientConfig,
+      width: width
+    });
+  }
+  return jsx(ResizableMediaSingleNext, {
+    allowBreakoutSnapPoints: allowBreakoutSnapPoints,
+    children: children
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: className,
+    containerWidth: containerWidth,
+    dataAttributes: dataAttributes,
+    disableHandles: disableHandles,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorAppearance: editorAppearance,
+    fullWidthMode: fullWidthMode,
+    getPos: getPos,
+    gridSize: gridSize,
+    handleMediaSingleRef: handleMediaSingleRef,
+    hasFallbackContainer: hasFallbackContainer,
+    height: height,
+    isInsideOfInlineExtension: isInsideOfInlineExtension,
+    isLoading: isLoading,
+    layout: layout,
+    lineLength: lineLength,
+    mediaSingleWidth: mediaSingleWidth,
+    nodeType: nodeType,
+    pctWidth: pctWidth,
+    pluginInjectionApi: pluginInjectionApi,
+    selected: selected,
+    showLegacyNotification: showLegacyNotification,
+    size: size,
+    updateSize: updateSize,
+    view: view,
+    viewMediaClientConfig: viewMediaClientConfig,
+    width: width
+  });
+};
+export default ResizableMediaSingleToggle;

package/dist/types/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -1,62 +1,9 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
 import { jsx } from '@emotion/react';
-import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
-import type { GuidelineConfig, GuidelineSnapsReference, RelativeGuides } from '@atlaskit/editor-common/guideline';
-import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
-import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { Props } from './types';
-type State = {
-    isVideoFile: boolean;
-    isResizing: boolean;
-    size: Dimensions;
-    snaps: Snap;
-    relativeGuides: RelativeGuides;
-    guidelines: GuidelineConfig[];
-};
 export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props & {
     showLegacyNotification?: boolean;
 };
-declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
-    private lastSnappedGuidelineKeys;
-    constructor(props: ResizableMediaSingleNextProps);
-    componentDidUpdate(prevProps: Props): boolean;
-    componentDidMount(): Promise<void>;
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    get wrappedLayout(): boolean;
-    get pos(): number | null;
-    get $pos(): import("prosemirror-model").ResolvedPos | null;
-    get aspectRatio(): number;
-    get insideInlineLike(): boolean;
-    get insideLayout(): boolean;
-    get isGuidelineEnabled(): boolean;
-    isNestedNode(): boolean;
-    private getDefaultGuidelines;
-    private updateGuidelines;
-    checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
-    calcNewLayout: (newWidth: number, stop: boolean) => MediaSingleLayout;
-    calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number, fullWidthMode?: boolean, isNestedNode?: boolean) => 'center' | 'wide' | 'full-width';
-    calcPxHeight: (newWidth: number) => number;
-    private displayGuideline;
-    private setIsResizing;
-    private updateSizeInPluginState;
-    private calcMaxWidth;
-    private calcMinWidth;
-    private getRelativeGuides;
-    updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
-    calculateSizeState: (size: Position & Dimensions, delta: Dimensions, onResizeStop?: boolean) => {
-        width: number;
-        height: number;
-        layout: MediaSingleLayout;
-    };
-    selectCurrentMediaNode: () => void;
-    handleResizeStart: HandleResizeStart;
-    handleResize: HandleResize;
-    handleResizeStop: HandleResize;
-    render(): jsx.JSX.Element;
-}
-export default ResizableMediaSingleNext;
+export declare const ResizableMediaSingleNextFunctional: (props: ResizableMediaSingleNextProps) => jsx.JSX.Element;
+declare const ResizableMediaSingleToggle: ({ allowBreakoutSnapPoints, children, className, containerWidth, dataAttributes, disableHandles, dispatchAnalyticsEvent, editorAppearance, fullWidthMode, getPos, gridSize, handleMediaSingleRef, hasFallbackContainer, height, isInsideOfInlineExtension, isLoading, layout, lineLength, mediaSingleWidth, nodeType, pctWidth, pluginInjectionApi, selected, showLegacyNotification, size, updateSize, view, viewMediaClientConfig, width, }: ResizableMediaSingleNextProps) => jsx.JSX.Element;
+export default ResizableMediaSingleToggle;