@atlaskit/editor-common 94.17.2 → 94.18.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 94.18.1
+
+### Patch Changes
+
+- [#162554](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162554)
+  [`bb0f938202ca0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bb0f938202ca0) -
+  [ux] Advanced layout responsiveness in Editor
+- Updated dependencies
+
+## 94.18.0
+
+### Minor Changes
+
+- [#161860](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/161860)
+  [`a147e2be38608`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a147e2be38608) -
+  [ux] ED-25319 Support forced media resize handle positions in media options
+
 ## 94.17.2
 
 ### Patch Changes

package/dist/cjs/media-single/constants.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrappedLayouts = exports.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_SNAP_GAP = exports.MEDIA_SINGLE_RESIZE_THROTTLE_TIME = exports.MEDIA_SINGLE_HIGHLIGHT_GAP = exports.MEDIA_SINGLE_HANDLE_MARGIN = exports.MEDIA_SINGLE_GUTTER_SIZE = exports.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH = exports.Layout = exports.DEFAULT_ROUNDING_INTERVAL = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = exports.CAPTION_PLACEHOLDER_ID = void 0;
+exports.wrappedLayouts = exports.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_SNAP_GAP = exports.MEDIA_SINGLE_RESIZE_THROTTLE_TIME = exports.MEDIA_SINGLE_HIGHLIGHT_GAP = exports.MEDIA_SINGLE_HANDLE_MARGIN = exports.MEDIA_SINGLE_GUTTER_SIZE = exports.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = exports.Layout = exports.DEFAULT_ROUNDING_INTERVAL = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = exports.CAPTION_PLACEHOLDER_ID = void 0;
 var MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH = 24;
 var MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = exports.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = 320;
 var MEDIA_SINGLE_SNAP_GAP = exports.MEDIA_SINGLE_SNAP_GAP = 3;
 var MEDIA_SINGLE_HIGHLIGHT_GAP = exports.MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 var MEDIA_SINGLE_HANDLE_MARGIN = exports.MEDIA_SINGLE_HANDLE_MARGIN = 12;
+var MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = exports.MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = 8;
 var MEDIA_SINGLE_GUTTER_SIZE = exports.MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
 var DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_WIDTH = 250;
 var DEFAULT_IMAGE_HEIGHT = exports.DEFAULT_IMAGE_HEIGHT = 200;

package/dist/cjs/media-single/index.js

@@ -39,6 +39,12 @@ Object.defineProperty(exports, "ExternalImageBadge", {
     return _ExternalImageBadge.ExternalImageBadge;
   }
 });
+Object.defineProperty(exports, "MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN", {
+  enumerable: true,
+  get: function get() {
+    return _constants.MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN;
+  }
+});
 Object.defineProperty(exports, "MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH", {
   enumerable: true,
   get: function get() {

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 = "94.17.2";
+var packageVersion = "94.18.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/resizer/BreakoutResizer.js

@@ -28,7 +28,7 @@ var getHandleStyle = function getHandleStyle(node) {
       };
     // expand and layout section elements have a negative margin applied
     default:
-      var handleOffset = (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.LAYOUT_COLUMN_PADDING * 2 + 8 : _styles.LAYOUT_COLUMN_PADDING * 2;
+      var handleOffset = (0, _experiments.editorExperiment)('nested-dnd', true) ? _styles.LAYOUT_SECTION_MARGIN * 2 + 8 : _styles.LAYOUT_COLUMN_PADDING * 2;
       return {
         left: {
           left: "-".concat(handleOffset, "px"),

package/dist/cjs/styles/shared/column-layout.js

@@ -8,7 +8,8 @@ exports.columnLayoutSharedStyle = exports.columnLayoutResponsiveSharedStyle = vo
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _dataLayoutSection2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var columnLayoutSharedStyle = exports.columnLayoutSharedStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '[data-layout-section]': (0, _defineProperty2.default)({
@@ -29,28 +30,29 @@ var columnLayoutSharedStyle = exports.columnLayoutSharedStyle = (0, _react.css)(
   })
 });
 var columnLayoutResponsiveSharedStyle = exports.columnLayoutResponsiveSharedStyle = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout-section]': {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.layout-section-container': {
     containerType: 'inline-size',
     containerName: 'layout-area',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': (_dataLayoutSection2 = {
-      display: 'grid',
-      gap: "var(--ds-space-200, 16px)",
-      gridTemplateColumns: "repeat(auto-fit, minmax(0, 1fr))"
-    }, (0, _defineProperty2.default)(_dataLayoutSection2, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px) and (min-width: ").concat(_editorSharedStyles.layoutBreakpointWidth.SMALL, "px)"), {
-      gridTemplateColumns: "repeat(1, 1fr)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-      '&[data-layout-columns="4"], &[data-layout-columns="5"]': {
-        gridTemplateColumns: "repeat(2, 1fr)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '& > :nth-child(5)': {
-          gridColumn: 'span 2'
-        }
-      }
-    }), (0, _defineProperty2.default)(_dataLayoutSection2, "@container layout-area (width < ".concat(_editorSharedStyles.layoutBreakpointWidth.SMALL, "px)"), {
-      gridTemplateColumns: "repeat(1, 1fr)"
-    }), _dataLayoutSection2)
+    '[data-layout-section]': (0, _defineProperty2.default)({}, "@container layout-area (max-width:".concat(_editorSharedStyles.layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+      flexDirection: 'column'
+    })
   }
 });
 

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

package/dist/es2019/media-single/constants.js

@@ -3,6 +3,7 @@ export const MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = 320;
 export const MEDIA_SINGLE_SNAP_GAP = 3;
 export const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export const MEDIA_SINGLE_HANDLE_MARGIN = 12;
+export const MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = 8;
 export const MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;

package/dist/es2019/media-single/index.js

@@ -1,4 +1,4 @@
-export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID } from './constants';
+export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN } from './constants';
 export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, currentMediaNodeWithPos } from './utils';
 export { CommentBadge } from './CommentBadge';
 export { CommentBadgeNext } from './CommentBadgeNext';

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 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 = "94.17.2";
+const packageVersion = "94.18.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/resizer/BreakoutResizer.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { LAYOUT_COLUMN_PADDING } from '../styles';
+import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
 import Resizer from './Resizer';
 const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 const getHandleStyle = node => {
@@ -17,7 +17,7 @@ const getHandleStyle = node => {
       };
     // expand and layout section elements have a negative margin applied
     default:
-      const handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_COLUMN_PADDING * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
+      const handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_SECTION_MARGIN * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
       return {
         left: {
           left: `-${handleOffset}px`,

package/dist/es2019/styles/shared/column-layout.js

@@ -23,30 +23,30 @@ const columnLayoutSharedStyle = css({
   }
 });
 const columnLayoutResponsiveSharedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout-section]': {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.layout-section-container': {
     containerType: 'inline-size',
     containerName: 'layout-area',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '[data-layout-section]': {
-      display: 'grid',
-      gap: "var(--ds-space-200, 16px)",
-      gridTemplateColumns: `repeat(auto-fit, minmax(0, 1fr))`,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px) and (min-width: ${layoutBreakpointWidth.SMALL}px)`]: {
-        gridTemplateColumns: `repeat(1, 1fr)`,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-        '&[data-layout-columns="4"], &[data-layout-columns="5"]': {
-          gridTemplateColumns: `repeat(2, 1fr)`,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-          '& > :nth-child(5)': {
-            gridColumn: 'span 2'
-          }
-        }
-      },
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      [`@container layout-area (width < ${layoutBreakpointWidth.SMALL}px)`]: {
-        gridTemplateColumns: `repeat(1, 1fr)`
+      [`@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)`]: {
+        flexDirection: 'column'
       }
     }
   }

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "94.17.2";
+const packageVersion = "94.18.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/media-single/constants.js

@@ -3,6 +3,7 @@ export var MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = 320;
 export var MEDIA_SINGLE_SNAP_GAP = 3;
 export var MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export var MEDIA_SINGLE_HANDLE_MARGIN = 12;
+export var MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = 8;
 export var MEDIA_SINGLE_GUTTER_SIZE = MEDIA_SINGLE_HANDLE_MARGIN * 2;
 export var DEFAULT_IMAGE_WIDTH = 250;
 export var DEFAULT_IMAGE_HEIGHT = 200;

package/dist/esm/media-single/index.js

@@ -1,4 +1,4 @@
-export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID } from './constants';
+export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN } from './constants';
 export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, currentMediaNodeWithPos } from './utils';
 export { CommentBadge } from './CommentBadge';
 export { CommentBadgeNext } from './CommentBadgeNext';

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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 = "94.17.2";
+var packageVersion = "94.18.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/resizer/BreakoutResizer.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useMemo, useState } from 'react';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { LAYOUT_COLUMN_PADDING } from '../styles';
+import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
 import Resizer from './Resizer';
 var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 var getHandleStyle = function getHandleStyle(node) {
@@ -18,7 +18,7 @@ var getHandleStyle = function getHandleStyle(node) {
       };
     // expand and layout section elements have a negative margin applied
     default:
-      var handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_COLUMN_PADDING * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
+      var handleOffset = editorExperiment('nested-dnd', true) ? LAYOUT_SECTION_MARGIN * 2 + 8 : LAYOUT_COLUMN_PADDING * 2;
       return {
         left: {
           left: "-".concat(handleOffset, "px"),

package/dist/esm/styles/shared/column-layout.js

@@ -1,5 +1,4 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _dataLayoutSection2;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { gridMediumMaxWidth, layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
@@ -23,28 +22,29 @@ var columnLayoutSharedStyle = css({
   })
 });
 var columnLayoutResponsiveSharedStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '[data-layout-section]': {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > *': {
+      flex: 1,
+      minWidth: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+    '& > .unsupportedBlockView-content-wrap': {
+      minWidth: 'initial'
+    }
+  },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.layout-section-container': {
     containerType: 'inline-size',
     containerName: 'layout-area',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-layout-section]': (_dataLayoutSection2 = {
-      display: 'grid',
-      gap: "var(--ds-space-200, 16px)",
-      gridTemplateColumns: "repeat(auto-fit, minmax(0, 1fr))"
-    }, _defineProperty(_dataLayoutSection2, "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px) and (min-width: ").concat(layoutBreakpointWidth.SMALL, "px)"), {
-      gridTemplateColumns: "repeat(1, 1fr)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
-      '&[data-layout-columns="4"], &[data-layout-columns="5"]': {
-        gridTemplateColumns: "repeat(2, 1fr)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-        '& > :nth-child(5)': {
-          gridColumn: 'span 2'
-        }
-      }
-    }), _defineProperty(_dataLayoutSection2, "@container layout-area (width < ".concat(layoutBreakpointWidth.SMALL, "px)"), {
-      gridTemplateColumns: "repeat(1, 1fr)"
-    }), _dataLayoutSection2)
+    '[data-layout-section]': _defineProperty({}, "@container layout-area (max-width:".concat(layoutBreakpointWidth.MEDIUM - 1, "px)"), {
+      flexDirection: 'column'
+    })
   }
 });
 

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

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.17.2";
+var packageVersion = "94.18.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/media-single/constants.d.ts

@@ -4,6 +4,7 @@ export declare const MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = 320;
 export declare const MEDIA_SINGLE_SNAP_GAP = 3;
 export declare const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export declare const MEDIA_SINGLE_HANDLE_MARGIN = 12;
+export declare const MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = 8;
 export declare const MEDIA_SINGLE_GUTTER_SIZE: number;
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;

package/dist/types/media-single/index.d.ts

@@ -1,4 +1,4 @@
-export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID, } from './constants';
+export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, } from './constants';
 export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, currentMediaNodeWithPos, } from './utils';
 export { CommentBadge } from './CommentBadge';
 export { CommentBadgeNext } from './CommentBadgeNext';

package/dist/types-ts4.5/media-single/constants.d.ts

@@ -4,6 +4,7 @@ export declare const MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH = 320;
 export declare const MEDIA_SINGLE_SNAP_GAP = 3;
 export declare const MEDIA_SINGLE_HIGHLIGHT_GAP = 10;
 export declare const MEDIA_SINGLE_HANDLE_MARGIN = 12;
+export declare const MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN = 8;
 export declare const MEDIA_SINGLE_GUTTER_SIZE: number;
 export declare const DEFAULT_IMAGE_WIDTH = 250;
 export declare const DEFAULT_IMAGE_HEIGHT = 200;

package/dist/types-ts4.5/media-single/index.d.ts

@@ -1,4 +1,4 @@
-export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID, } from './constants';
+export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID, MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN, } from './constants';
 export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, currentMediaNodeWithPos, } from './utils';
 export { CommentBadge } from './CommentBadge';
 export { CommentBadgeNext } from './CommentBadgeNext';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "94.17.2",
+	"version": "94.18.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -130,21 +130,21 @@
 		"@atlaskit/icon-object": "^6.7.0",
 		"@atlaskit/link-datasource": "^3.8.0",
 		"@atlaskit/link-picker": "^1.47.0",
-		"@atlaskit/media-card": "^78.12.0",
-		"@atlaskit/media-client": "^28.2.0",
+		"@atlaskit/media-card": "^78.13.0",
+		"@atlaskit/media-client": "^28.3.0",
 		"@atlaskit/media-client-react": "^2.3.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^67.0.0",
 		"@atlaskit/media-ui": "^26.1.0",
-		"@atlaskit/media-viewer": "49.3.0",
+		"@atlaskit/media-viewer": "49.4.0",
 		"@atlaskit/mention": "^23.3.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^12.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^13.1.0",
-		"@atlaskit/profilecard": "^20.9.0",
+		"@atlaskit/profilecard": "^20.10.0",
 		"@atlaskit/section-message": "^6.6.0",
 		"@atlaskit/smart-card": "^30.2.0",
 		"@atlaskit/smart-user-picker": "^6.11.0",
@@ -190,7 +190,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/media-core": "^34.3.0",
 		"@atlaskit/media-test-helpers": "^34.6.0",
-		"@atlaskit/util-data-test": "^17.12.0",
+		"@atlaskit/util-data-test": "^17.13.0",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",