@atlaskit/editor-plugin-media/dist/esm/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

Media plugin for @atlaskit/editor-core

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import throttle from 'lodash/throttle';
import { findClosestSnap, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelinesWithHighlights, getGuidelineTypeFromKey, getRelativeGuidelines, getRelativeGuideSnaps } from '@atlaskit/editor-common/guideline';
import { calcMediaSingleMaxWidth, DEFAULT_IMAGE_WIDTH, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
import { ResizerNext } from '@atlaskit/editor-common/resizer';
import { resizerItemClassName, richMediaClassName } from '@atlaskit/editor-common/styles';
import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
import { nonWrappedLayouts } from '@atlaskit/editor-common/utils';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
import { getMediaResizeAnalyticsEvent } from '../../pm-plugins/utils/analytics';
import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
import { ResizableMediaMigrationNotification } from './ResizableMediaMigrationNotification';
import { wrapperStyle } from './styled';
export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
var getNodePosition = function getNodePosition(getPos) {
  if (typeof getPos !== 'function') {
    return null;
  }
  var pos = getPos();
  if (Number.isNaN(pos) || typeof pos !== 'number') {
    return null;
  }
  return pos;
};
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(_ref) {
  var isVideoFile = _ref.isVideoFile,
    contentWidth = _ref.contentWidth;
  return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
};
var calcMaxWidth = function calcMaxWidth(_ref2) {
  var containerWidth = _ref2.containerWidth,
    editorAppearance = _ref2.editorAppearance;
  return calcMediaSingleMaxWidth(containerWidth, editorAppearance);
};
var setIsResizingPluginState = function setIsResizingPluginState(_ref3) {
  var isResizing = _ref3.isResizing,
    nodePosition = _ref3.nodePosition,
    initialWidth = _ref3.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';
  }
  var padding = containerWidth <= akEditorFullPageNarrowBreakout && editorExperiment('platform_editor_preview_panel_responsiveness', true, {
    exposure: true
  }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
  if (width < Math.min(containerWidth - padding * 2, akEditorFullWidthLayoutWidth)) {
    return 'wide';
  }

  // set full width to be containerWidth - padding * 2
  // instead of containerWidth - akEditorBreakoutPadding,
  // so that we have image aligned with text
  return 'full-width';
};
var calcNewLayout = function calcNewLayout(_ref4) {
  var layout = _ref4.layout,
    containerWidth = _ref4.containerWidth,
    lineLength = _ref4.lineLength,
    fullWidthMode = _ref4.fullWidthMode,
    isNestedNode = _ref4.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(_ref5) {
  var width = _ref5.width,
    height = _ref5.height;
  if (width && height > 0) {
    return width / height;
  }

  // TODO: ED-26962 - handle this case
  return 1;
};
var updateSizeInPluginState = throttle(function (_ref6) {
  var width = _ref6.width,
    view = _ref6.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,
    forceHandlePositioning = props.forceHandlePositioning,
    disableHandles = props.disableHandles;
  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(false),
    _useState8 = _slicedToArray(_useState7, 2),
    isVideoFile = _useState8[0],
    setIsVideoFile = _useState8[1];
  var _useState9 = useState(false),
    _useState0 = _slicedToArray(_useState9, 2),
    hasResized = _useState0[0],
    setHasResized = _useState0[1];
  var nodePosition = expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? getNodePosition(getPos) :
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useMemo(function () {
    return getNodePosition(getPos);
  }, [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 isAdjacentMode = useMemo(function () {
    if (forceHandlePositioning === 'adjacent') {
      return true;
    }
    return isNestedNode;
  }, [isNestedNode, forceHandlePositioning]);
  var maybeContainerWidth = containerWidth || origWidth;
  var memoizedCss = useMemo(function () {
    return wrapperStyle({
      layout: layout,
      containerWidth: maybeContainerWidth,
      fullWidthMode: fullWidthMode,
      mediaSingleWidth: dimensions.width,
      isNestedNode: isAdjacentMode,
      isExtendedResizeExperienceOn: true
    });
  }, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isAdjacentMode]);
  var maxWidth = useMemo(function () {
    if (editorAppearance === 'chromeless' && forceHandlePositioning === 'adjacent') {
      return containerWidth - MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN * 2;
    }
    if (!isResizing && isAdjacentMode) {
      return undefined;
    }
    if (isAdjacentMode || fullWidthMode) {
      return lineLength;
    }
    if (!isResizing && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
      return "var(--ak-editor-max-container-width)";
    }
    return calcMaxWidth({
      containerWidth: containerWidth,
      editorAppearance: editorAppearance
    });
  }, [isAdjacentMode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing, forceHandlePositioning]);
  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 () {
    var classNameNext = classnames(richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, resizerItemClassName, {
      'display-handle': expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
      'richMedia-selected': selected,
      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
    });
    return classNameNext;
  }, [className, disableHandles, 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 () {
    if (disableHandles && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
      return {
        left: false,
        right: false
      };
    }
    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;
    }, {});
  }, [disableHandles, layout, isInsideInlineLike]);
  var defaultGuidelines = useMemo(function () {
    if (isAdjacentMode) {
      return [];
    }
    return generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
  }, [isAdjacentMode, lineLength, containerWidth, fullWidthMode]);
  var relativeGuidesRef = useRef({});
  var guidelinesRef = useRef([]);
  var updateGuidelines = useCallback(function () {
    var _generateDynamicGuide = generateDynamicGuidelines(view.state, lineLength, {
        styles: {
          lineStyle: 'dashed'
        },
        show: false
      }),
      relativeGuides = _generateDynamicGuide.relativeGuides,
      dynamicGuides = _generateDynamicGuide.dynamicGuides;

    // disable guidelines for nested media single node
    var dynamicGuidelines = isAdjacentMode ? [] : dynamicGuides;
    relativeGuidesRef.current = relativeGuides;
    guidelinesRef.current = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
  }, [view, lineLength, defaultGuidelines, isAdjacentMode]);
  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 _ref7 = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
        top: 0,
        left: 0
      },
      topOffset = _ref7.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 _findClosestSnap = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP),
      gap = _findClosestSnap.gap,
      activeGuidelineKeys = _findClosestSnap.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 resizerContainerRef = useRef(null);
  var handleResize = useCallback(function (size, delta) {
    var _calculateSizeState = calculateSizeState({
        layout: layout,
        containerWidth: containerWidth,
        lineLength: lineLength,
        fullWidthMode: fullWidthMode,
        isNestedNode: isAdjacentMode
      })(size, delta, false, aspectRatioRef.current),
      width = _calculateSizeState.width,
      height = _calculateSizeState.height,
      newLayout = _calculateSizeState.layout;
    var resizerDomEl = resizerContainerRef.current;
    if (resizerDomEl && !hasResized && expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true)) {
      // dispatch resize event to media node DOM element inside resizerDom
      var mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
      var event = new CustomEvent('resized');
      mediaDomEl === null || mediaDomEl === void 0 || mediaDomEl.dispatchEvent(event);
      setHasResized(true);
    }
    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);
    }
  }, [layout, containerWidth, lineLength, fullWidthMode, isAdjacentMode, hasResized, isGuidelineEnabled, view, updateActiveGuidelines, updateSize]);
  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: isAdjacentMode
      })(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, isAdjacentMode, 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]);
  var handlePositioning = useMemo(function () {
    if (forceHandlePositioning) {
      return forceHandlePositioning;
    }
    return isAdjacentMode ? 'adjacent' : undefined;
  }, [forceHandlePositioning, isAdjacentMode]);
  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,
    ref: resizerContainerRef
  }, 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: expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
    handlePositioning: handlePositioning,
    handleHighlight: "full-height"
  }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
};
var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref8) {
  var allowBreakoutSnapPoints = _ref8.allowBreakoutSnapPoints,
    children = _ref8.children,
    className = _ref8.className,
    containerWidth = _ref8.containerWidth,
    dataAttributes = _ref8.dataAttributes,
    disableHandles = _ref8.disableHandles,
    dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent,
    editorAppearance = _ref8.editorAppearance,
    fullWidthMode = _ref8.fullWidthMode,
    getPos = _ref8.getPos,
    gridSize = _ref8.gridSize,
    handleMediaSingleRef = _ref8.handleMediaSingleRef,
    hasFallbackContainer = _ref8.hasFallbackContainer,
    height = _ref8.height,
    isInsideOfInlineExtension = _ref8.isInsideOfInlineExtension,
    isLoading = _ref8.isLoading,
    layout = _ref8.layout,
    lineLength = _ref8.lineLength,
    mediaSingleWidth = _ref8.mediaSingleWidth,
    nodeType = _ref8.nodeType,
    pctWidth = _ref8.pctWidth,
    pluginInjectionApi = _ref8.pluginInjectionApi,
    selected = _ref8.selected,
    showLegacyNotification = _ref8.showLegacyNotification,
    size = _ref8.size,
    updateSize = _ref8.updateSize,
    view = _ref8.view,
    viewMediaClientConfig = _ref8.viewMediaClientConfig,
    width = _ref8.width,
    forceHandlePositioning = _ref8.forceHandlePositioning;
  return jsx(ResizableMediaSingleNextFunctional, {
    allowBreakoutSnapPoints: allowBreakoutSnapPoints
    // eslint-disable-next-line react/no-children-prop
    ,
    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,
    forceHandlePositioning: forceHandlePositioning
  });
};
export default ResizableMediaSingleToggle;