@atlaskit/editor-common 102.13.11 → 102.15.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/editor-common
 
+## 102.15.0
+
+### Minor Changes
+
+- [#133497](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133497)
+  [`dccd8bcdef0a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dccd8bcdef0a3) -
+  [ED-23460] Adding the objectId, containerId and childObjectId to the mention typeahead inserted
+  events
+
+### Patch Changes
+
+- Updated dependencies
+
+## 102.14.0
+
+### Minor Changes
+
+- [#132381](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132381)
+  [`19e52e77d3cfc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19e52e77d3cfc) -
+  ED-27195 enable guildeline for breakout resizer
+
+### Patch Changes
+
+- [#132269](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132269)
+  [`f6984f0b31c02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6984f0b31c02) -
+  [ux] Fixed alignment of the icon in OpenButtonOverlay on header link.
+- Updated dependencies
+
 ## 102.13.11
 
 ### Patch Changes

package/dist/cjs/ai-messages/ai-config-items.js

@@ -58,122 +58,6 @@ var aiConfigItemMessages = exports.aiConfigItemMessages = (0, _reactIntlNext.def
     defaultMessage: 'Open in Chat',
     description: 'Tooltip and label for Open in Chat button'
   },
-  // Advanced prompt messages
-  advancedPromptTitle: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.title',
-    defaultMessage: 'Build an advanced prompt',
-    description: 'Describes an option to use Atlassian Intelligence to show a more advanced prompt'
-  },
-  advancedPromptDescription: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.description',
-    defaultMessage: 'Specify task, instructions and rules',
-    description: 'Description for the the Atlassian Intelligence "Build an advanced prompt".'
-  },
-  advancedPromptLabel: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.promptLabel',
-    defaultMessage: 'Build an advanced prompt',
-    description: 'Label text in the prompt input.'
-  },
-  advancedPromptTaskLabel: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.label',
-    defaultMessage: 'Task',
-    description: 'Label for the Task input in the prompt builder.'
-  },
-  advancedPromptTaskPlaceholder: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.placeholder',
-    defaultMessage: 'Describe the task that needs completing.',
-    description: 'Placeholder for the Task input in the prompt builder.'
-  },
-  advancedPromptTaskHelperMessage: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.helperMessage',
-    defaultMessage: 'For example: Create an onboarding documentation for new employees joining the team.',
-    description: 'Helper message for the Task input in the prompt builder.'
-  },
-  advancedPromptTaskRequired: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.task.error.required',
-    defaultMessage: 'Please provide task',
-    description: 'Error message for the Task input in the prompt builder.'
-  },
-  advancedPromptInstructionsLabel: {
-    id: 'fabric.editor.ai.config.item.advanced-prompt.form.instructions.label',
-    defaultMessage: 'Instructions',
-    description: 'Label for the Instructions input in the prompt builder.'
-  },
-  advancedPromptInstructionsPlaceholder: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.instructions.placeholder',
-    defaultMessage: 'Provide task instructions to help generate specific outputs.',
-    description: 'Placeholder for the Instructions input in the prompt builder.'
-  },
-  advancedPromptInstructionsHelperMessage: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.instructions.helperMessage',
-    defaultMessage: 'For example: 1. Start the document with a brief overview of our company goals. 2. Create a list of key team members to meet in their first week.',
-    description: 'Helper message for the Instructions input in the prompt builder.'
-  },
-  advancedPromptRulesLabel: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.label',
-    defaultMessage: 'Rules',
-    description: 'Label for the Rules input in the prompt builder.'
-  },
-  advancedPromptRulesPlaceholder: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.placeholder',
-    defaultMessage: 'Outline any rules you want followed.',
-    description: 'Placeholder for the Rules input in the prompt builder.'
-  },
-  advancedPromptRulesHelperMessage: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.rules.helperMessage',
-    defaultMessage: 'For example: The output must follow the company style guidelines and not use unverified data.',
-    description: 'Helper message for the Rules input in the prompt builder.'
-  },
-  advancedPromptToneLabel: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.label',
-    defaultMessage: 'Tone',
-    description: 'Label for the Tone input in the prompt builder.'
-  },
-  advancedPromptToneProfessional: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.professional',
-    defaultMessage: 'Professional',
-    description: 'Option for the Tone input in the prompt builder.'
-  },
-  advancedPromptToneEmpathetic: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.empathetic',
-    defaultMessage: 'Empathetic',
-    description: 'Option for the Tone input in the prompt builder.'
-  },
-  advancedPromptToneCasual: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.casual',
-    defaultMessage: 'Casual',
-    description: 'Option for the Tone input in the prompt builder.'
-  },
-  advancedPromptToneNeutral: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.neutral',
-    defaultMessage: 'Neutral',
-    description: 'Option for the Tone input in the prompt builder.'
-  },
-  advancedPromptToneEducational: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.tone.option.educational',
-    defaultMessage: 'Educational',
-    description: 'Option for the Tone input in the prompt builder.'
-  },
-  advancedPromptCreativityLabel: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.label',
-    defaultMessage: 'Creativity',
-    description: 'Label for the Creativity input in the prompt builder.'
-  },
-  advancedPromptCreativityLow: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.low',
-    defaultMessage: 'Low',
-    description: 'Option for the Creativity input in the prompt builder.'
-  },
-  advancedPromptCreativityMedium: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.medium',
-    defaultMessage: 'Medium',
-    description: 'Option for the Creativity input in the prompt builder.'
-  },
-  advancedPromptCreativityHigh: {
-    id: 'fabric.editor.ai.config.item.advancedPrompt.form.creativity.option.high',
-    defaultMessage: 'High',
-    description: 'Option for the Creativity input in the prompt builder.'
-  },
   // Atlas shorten update messages
   atlasShortenUpdatetitle: {
     id: 'fabric.editor.ai.config.item.atlas-shorten-update.title',

package/dist/cjs/analytics/types/enums.js

@@ -33,6 +33,7 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["CLICKED"] = "clicked";
   ACTION["CLOSED"] = "closed";
   ACTION["COMMITTED"] = "committed";
+  /** used in @atlassian/editor-referentiality */
   ACTION["CONNECTED_NODES"] = "connectedNodes";
   ACTION["CONVERTED"] = "converted";
   ACTION["COPIED"] = "copied";
@@ -41,7 +42,9 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["DECREMENTED"] = "decremented";
   ACTION["DELETED"] = "deleted";
   ACTION["DISCARDED_INVALID_STEPS_FROM_TRANSACTION"] = "discardedInvalidStepsFromTransaction";
+  /** used in @atlassian/editor-referentiality */
   ACTION["DISCONNECTED_SOURCE"] = "disconnectedSource";
+  /** used in @atlassian/editor-referentiality */
   ACTION["DISCONNECTED_TARGET"] = "disconnectedTarget";
   ACTION["DISMISSED"] = "dismissed";
   ACTION["DISPATCHED_INVALID_TRANSACTION"] = "dispatchedInvalidTransaction";
@@ -71,6 +74,7 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["INDENTED"] = "indented";
   ACTION["INITIALISED"] = "initialised";
   ACTION["INITIATED"] = "initiated";
+  /** used in @atlassian/editor-referentiality */
   ACTION["INITIALISED_FRAGMENT_MARK"] = "initialisedFragmentMark";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
   ACTION["INPUT_PERF_SAMPLING_AVG"] = "inputPerfSamplingAvg";
@@ -81,6 +85,7 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["INSERTED"] = "inserted";
   ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";
+  /** used in @atlassian/editor-referentiality */
   ACTION["GOT_CONNECTIONS"] = "gotConnections";
   ACTION["LANGUAGE_SELECTED"] = "languageSelected";
   ACTION["LIST_ITEM_JOINED"] = "listItemJoined";
@@ -125,8 +130,11 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["UNLINK"] = "unlinked";
   ACTION["UNSUPPORTED_CONTENT_ENCOUNTERED"] = "unsupportedContentEncounteredV2";
   ACTION["UPDATED"] = "updated";
+  /** used in @atlassian/editor-referentiality */
   ACTION["UPDATED_FRAGMENT_MARK_NAME"] = "updatedFragmentMarkName";
+  /** used in @atlassian/editor-referentiality */
   ACTION["UPDATED_SOURCE"] = "updatedSource";
+  /** used in @atlassian/editor-referentiality */
   ACTION["UPDATED_TARGET"] = "updatedTarget";
   ACTION["UPLOAD_EXTERNAL_FAIL"] = "uploadExternalFailed";
   ACTION["VIEWED"] = "viewed";
@@ -134,6 +142,12 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["WITH_PLUGIN_STATE_CALLED"] = "withPluginStateCalled";
   ACTION["RENDERED"] = "rendered";
   ACTION["ON_EDITOR_READY_CALLBACK"] = "onEditorReadyCallback";
+  /**
+   * @private
+   * @deprecated
+   *
+   * This is no longer used and can be removed at a later date
+   */
   ACTION["ON_CHANGE_CALLBACK"] = "onChangeCalled";
   ACTION["NESTED_TABLE_TRANSFORMED"] = "nestedTableTransformed";
   ACTION["NEW_COLLAB_SYNC_UP_ERROR_NO_STEPS"] = "newCollabSyncUpErrorNoSteps";
@@ -169,6 +183,11 @@ var ACTION = exports.ACTION = /*#__PURE__*/function (ACTION) {
   ACTION["RESIZED"] = "resized";
   ACTION["BLOCKS_DRAG_INIT"] = "blocksDragInit";
   ACTION["SINGLE_COL_LAYOUT_DETECTED"] = "singleColumLayoutDetected";
+  /**
+   * used in Editor AI inline suggestion for a track event when a suggestion is inserted
+   * previously tracked events being used by Editor AI proactive suggestion
+   *
+   */
   ACTION["SUGGESTION_INSERTED"] = "suggestionInserted";
   ACTION["SUGGESTION_DISMISSED"] = "suggestionDismissed";
   ACTION["SUGGESTION_VIEWED"] = "suggestionViewed";
@@ -220,7 +239,9 @@ var INSERT_MEDIA_VIA = exports.INSERT_MEDIA_VIA = /*#__PURE__*/function (INSERT_
 var TRIGGER_METHOD = exports.TRIGGER_METHOD = /*#__PURE__*/function (TRIGGER_METHOD) {
   TRIGGER_METHOD["BUTTON"] = "button";
   TRIGGER_METHOD["KEYBOARD"] = "keyboard";
+  // single key, e.g. Esc, Enter
   TRIGGER_METHOD["SHORTCUT"] = "shortcut";
+  // combination of keys, e.g. Mod + F
   TRIGGER_METHOD["TOOLBAR"] = "toolbar";
   TRIGGER_METHOD["EXTERNAL"] = "external";
   return TRIGGER_METHOD;

package/dist/cjs/analytics/types/table-events.js

@@ -35,9 +35,14 @@ var TABLE_ACTION = exports.TABLE_ACTION = /*#__PURE__*/function (TABLE_ACTION) {
   TABLE_ACTION["MOVED_COLUMN"] = "movedColumn";
   TABLE_ACTION["CLONED_ROW"] = "clonedRow";
   TABLE_ACTION["CLONED_COLUMN"] = "clonedColumn";
+  /**
+   * This is a unique action that's used to track legacy table move behaviour flow of insert+copy+paste. Please use
+   * the MOVED_ROW | MOVED_COLUMN actions if you want to track events which move row/cols in a single step.
+   */
   TABLE_ACTION["ROW_OR_COLUMN_MOVED"] = "rowOrColumnMoved";
   TABLE_ACTION["CHANGED_DISPLAY_MODE"] = "changedDisplayMode";
   TABLE_ACTION["CHANGED_ALIGNMENT"] = "changedAlignment";
+  // Temporary to track usage of CONFCLOUD-78239 bug
   TABLE_ACTION["TABLE_CELL_BACKGROUND_FIXED"] = "tableCellBackgroundFixed";
   return TABLE_ACTION;
 }({});

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 = "102.13.11";
+var packageVersion = "102.15.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/resizer/BreakoutResizer.js

@@ -16,6 +16,7 @@ var _analytics = require("../analytics");
 var _styles = require("../styles");
 var _browser = require("../utils/browser");
 var _Resizer = _interopRequireDefault(require("./Resizer"));
+var _useBreakoutGuidelines = require("./useBreakoutGuidelines");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
@@ -89,6 +90,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     disabled = _ref.disabled,
     getEditorWidth = _ref.getEditorWidth,
     parentRef = _ref.parentRef,
+    displayGuidelines = _ref.displayGuidelines,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     displayGapCursor = _ref.displayGapCursor;
   var _useState = (0, _react.useState)({
@@ -104,6 +106,16 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     setResizingState = _useState2[1];
   var areResizeMetaKeysPressed = (0, _react.useRef)(false);
   var resizerRef = (0, _react.useRef)(null);
+  var _useBreakoutGuideline = (0, _useBreakoutGuidelines.useBreakoutGuidelines)(getEditorWidth, isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true)),
+    snaps = _useBreakoutGuideline.snaps,
+    currentLayout = _useBreakoutGuideline.currentLayout,
+    guidelines = _useBreakoutGuideline.guidelines,
+    setCurrentWidth = _useBreakoutGuideline.setCurrentWidth;
+  (0, _react.useEffect)(function () {
+    if (displayGuidelines) {
+      displayGuidelines(guidelines || []);
+    }
+  }, [displayGuidelines, guidelines]);
 
   // Relying on re-renders caused by selection changes inside/around node
   var isSelectionInNode = (0, _react.useMemo)(function () {
@@ -140,6 +152,12 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
   }, [getEditorWidth, editorView, displayGapCursor]);
+  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
+    if ((0, _experiments.editorExperiment)('single_column_layouts', true)) {
+      var newWidth = originalState.width + delta.width;
+      setCurrentWidth(newWidth);
+    }
+  }, [setCurrentWidth]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
@@ -152,21 +170,29 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     var node = state.doc.nodeAt(pos);
     var newTr = state.tr;
     if (node && breakoutSupportedNodes.includes(node.type.name)) {
-      var newBreakoutWidth = Math.max(newWidth, _editorSharedStyles.akEditorDefaultLayoutWidth);
-      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newBreakoutWidth
-      })]);
-      var breakoutResizePayload = {
-        action: _analytics.ACTION.RESIZED,
-        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
-        eventType: _analytics.EVENT_TYPE.TRACK,
-        attributes: {
-          nodeType: node.type.name,
-          prevWidth: originalState.width,
-          newWidth: newBreakoutWidth
-        }
-      };
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      if (currentLayout && ['wide', 'full-width'].includes(currentLayout) && (0, _experiments.editorExperiment)('single_column_layouts', true)) {
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          mode: currentLayout,
+          width: null
+        })]);
+      } else {
+        var newBreakoutWidth = Math.max(newWidth, _editorSharedStyles.akEditorDefaultLayoutWidth);
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: newBreakoutWidth,
+          mode: null
+        })]);
+        var breakoutResizePayload = {
+          action: _analytics.ACTION.RESIZED,
+          actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            nodeType: node.type.name,
+            prevWidth: originalState.width,
+            newWidth: newBreakoutWidth
+          }
+        };
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      }
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
     displayGapCursor(true);
@@ -176,7 +202,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+    setCurrentWidth(null);
+  }, [getPos, editorView, displayGapCursor, setCurrentWidth, currentLayout, editorAnalyticsApi]);
   var handleEscape = (0, _react.useCallback)(function () {
     editorView === null || editorView === void 0 || editorView.focus();
   }, [editorView]);
@@ -282,6 +309,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       left: true,
       right: true
     },
+    snap: snaps || undefined,
+    snapGap: _useBreakoutGuidelines.SNAP_GAP,
     handleStyles: getHandleStyle(nodeType),
     minWidth: minWidth,
     maxWidth: maxWidth
@@ -290,6 +319,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     style: isResizing ? resizingStyles : defaultStyles,
     handleResizeStart: handleResizeStart,
     handleResizeStop: handleResizeStop,
+    handleResize: handleResize,
     childrenDOMRef: getRef,
     resizeRatio: 2,
     isHandleVisible: isSelectionInNode,

package/dist/cjs/resizer/index.js

@@ -22,5 +22,12 @@ Object.defineProperty(exports, "ignoreResizerMutations", {
     return _BreakoutResizer.ignoreResizerMutations;
   }
 });
+Object.defineProperty(exports, "useBreakoutGuidelines", {
+  enumerable: true,
+  get: function get() {
+    return _useBreakoutGuidelines.useBreakoutGuidelines;
+  }
+});
 var _Resizer = _interopRequireDefault(require("./Resizer"));
-var _BreakoutResizer = require("./BreakoutResizer");
+var _BreakoutResizer = require("./BreakoutResizer");
+var _useBreakoutGuidelines = require("./useBreakoutGuidelines");

package/dist/cjs/resizer/useBreakoutGuidelines.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SNAP_GAP = void 0;
+exports.useBreakoutGuidelines = useBreakoutGuidelines;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var SNAP_GAP = exports.SNAP_GAP = 8;
+var roundToNearest = function roundToNearest(value) {
+  var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
+  return Math.round(value / interval) * interval;
+};
+function useBreakoutGuidelines(getEditorWidth, isResizing) {
+  var widthState = getEditorWidth();
+  var _useMemo = (0, _react.useMemo)(function () {
+      if (!isResizing) {
+        return {};
+      }
+      var _ref = widthState || {},
+        width = _ref.width,
+        lineLength = _ref.lineLength;
+      var wide = lineLength ? Math.round(lineLength * _editorSharedStyles.breakoutWideScaleRatio) : undefined;
+      var fullWidth = width ? Math.min(width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2) : undefined;
+      return {
+        wide: wide,
+        fullWidth: fullWidth,
+        lineLength: lineLength
+      };
+    }, [widthState, isResizing]),
+    lineLength = _useMemo.lineLength,
+    wide = _useMemo.wide,
+    fullWidth = _useMemo.fullWidth;
+  var snaps = (0, _react.useMemo)(function () {
+    if (!isResizing) {
+      return null;
+    }
+    var xSnaps = [];
+    if (typeof lineLength === 'number') {
+      xSnaps.push(lineLength);
+    }
+    if (typeof wide === 'number') {
+      xSnaps.push(wide);
+    }
+    if (typeof fullWidth === 'number') {
+      xSnaps.push(fullWidth - _editorSharedStyles.akEditorGutterPadding);
+    }
+    return {
+      x: xSnaps
+    };
+  }, [isResizing, wide, fullWidth, lineLength]);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentLayout = _useState2[0],
+    setCurrentLayout = _useState2[1];
+  var guidelines = (0, _react.useMemo)(function () {
+    var guidelines = [];
+    if (!isResizing) {
+      return guidelines;
+    }
+    if (lineLength) {
+      guidelines.push({
+        key: 'grid_left',
+        position: {
+          x: -roundToNearest(lineLength / 2)
+        },
+        active: currentLayout === 'center'
+      });
+      guidelines.push({
+        key: 'grid_right',
+        position: {
+          x: roundToNearest(lineLength / 2)
+        },
+        active: currentLayout === 'center'
+      });
+    }
+    if (wide) {
+      guidelines.push({
+        key: 'wide_left',
+        position: {
+          x: -roundToNearest(wide / 2)
+        },
+        active: currentLayout === 'wide'
+      });
+      guidelines.push({
+        key: 'wide_right',
+        position: {
+          x: roundToNearest(wide / 2)
+        },
+        active: currentLayout === 'wide'
+      });
+    }
+    if (fullWidth) {
+      guidelines.push({
+        key: 'full_width_left',
+        position: {
+          x: -roundToNearest(fullWidth / 2)
+        },
+        active: currentLayout === 'full-width'
+      });
+      guidelines.push({
+        key: 'full_width_right',
+        position: {
+          x: roundToNearest(fullWidth) / 2
+        },
+        active: currentLayout === 'full-width'
+      });
+    }
+    return guidelines;
+  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  var setCurrentWidth = (0, _react.useCallback)(function (newWidth) {
+    if (typeof newWidth !== 'number') {
+      setCurrentLayout(null);
+      return;
+    }
+    if (lineLength && Math.abs(newWidth - lineLength) < SNAP_GAP / 2) {
+      setCurrentLayout('center');
+    } else if (wide && Math.abs(newWidth - wide) < SNAP_GAP / 2) {
+      setCurrentLayout('wide');
+    } else if (fullWidth && (Math.abs(newWidth - fullWidth + _editorSharedStyles.akEditorGutterPadding) < SNAP_GAP / 2 || newWidth >= fullWidth)) {
+      setCurrentLayout('full-width');
+    } else {
+      setCurrentLayout(null);
+    }
+  }, [lineLength, wide, fullWidth]);
+  return {
+    snaps: snaps,
+    currentLayout: currentLayout,
+    guidelines: guidelines,
+    setCurrentWidth: setCurrentWidth
+  };
+}

package/dist/cjs/styles/shared/smartCard.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _smartCard = require("./smart-card");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var DATASOURCE_INNER_CONTAINER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
@@ -16,7 +17,7 @@ var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.FLOATING_TOOLBAR_LINKPICKER_
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var smartCardStyles = exports.smartCardStyles = function smartCardStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\tinput::selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t\tinput::-moz-selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n          box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER,
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\tinput::selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t\tinput::-moz-selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n          box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? "[data-inlinecard-button-overlay='icon-wrapper-line-height'] span {\n\t\t\t\tline-height: 0;\n\t\t\t}" : '', _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER,
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
   (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages') ? 'text' : 'pointer',
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration

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

@@ -23,7 +23,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 = "102.13.11";
+var packageVersion = "102.15.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005