@atlaskit/editor-common 103.6.0 → 103.7.0

package/dist/es2019/resizer/BreakoutResizer.js

@@ -7,6 +7,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
 import { browser } from '../utils/browser';
 import Resizer from './Resizer';
+import { ResizerBreakoutModeLabel } from './ResizerBreakoutModeLabel';
 import { SNAP_GAP, useBreakoutGuidelines } from './useBreakoutGuidelines';
 const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 const getHandleStyle = node => {
@@ -64,7 +65,6 @@ const defaultStyles = {
   display: 'grid'
 };
 const RESIZE_STEP_VALUE = 10;
-
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
  * correct ADF support.
@@ -81,7 +81,8 @@ const BreakoutResizer = ({
   parentRef,
   displayGuidelines,
   editorAnalyticsApi,
-  displayGapCursor
+  displayGapCursor,
+  onResizeStart
 }) => {
   const [{
     minWidth,
@@ -125,6 +126,7 @@ const BreakoutResizer = ({
     return $from.pos >= startPos && endPos >= $to.pos;
   }, [editorView.state.doc, editorView.state.selection, getPos]);
   const handleResizeStart = useCallback(() => {
+    onResizeStart === null || onResizeStart === void 0 ? void 0 : onResizeStart();
     let newMinWidth;
     let newMaxWidth;
     const widthState = getEditorWidth();
@@ -143,7 +145,7 @@ const BreakoutResizer = ({
       maxWidth: newMaxWidth
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
-  }, [getEditorWidth, editorView, displayGapCursor]);
+  }, [onResizeStart, getEditorWidth, editorView, displayGapCursor]);
   const handleResize = useCallback((originalState, delta) => {
     if (editorExperiment('single_column_layouts', true)) {
       const newWidth = originalState.width + delta.width;
@@ -319,7 +321,10 @@ const BreakoutResizer = ({
     handleSize: "clamped",
     handleHighlight: "full-height",
     handlePositioning: "adjacent",
-    handleAlignmentMethod: "sticky"
+    handleAlignmentMethod: "sticky",
+    labelComponent: currentLayout && editorExperiment('single_column_layouts', true) && ['full-width', 'wide'].includes(currentLayout || '') && /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+      layout: currentLayout
+    })
   });
 };
 export { BreakoutResizer };

package/dist/es2019/resizer/Resizer.js

@@ -2,8 +2,20 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
+import { Box, xcss } from '@atlaskit/primitives';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { handleWrapperClass, resizerDangerClassName, resizerExtendedZone, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
+const resizerLabelStyles = xcss({
+  position: 'absolute',
+  bottom: "var(--ds-space-negative-400, -32px)",
+  width: '100%',
+  overflow: 'visible',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-0, 0px)"
+});
 const SUPPORTED_HANDLES = ['left', 'right'];
 const inheritedCSS = {
   position: 'inherit',
@@ -46,6 +58,7 @@ const ResizerNext = (props, ref) => {
     handleTooltipContent,
     needExtendedResizeZone = true,
     childrenDOMRef,
+    labelComponent,
     ...otherProps
   } = props;
   const onResizeStart = useCallback(event => {
@@ -200,6 +213,8 @@ const ResizerNext = (props, ref) => {
   }, otherProps), /*#__PURE__*/React.createElement("span", {
     className: resizerZoneClassName,
     ref: ref => childrenDOMRef && childrenDOMRef(ref)
-  }, children));
+  }, children), labelComponent && editorExperiment('single_column_layouts', true) && /*#__PURE__*/React.createElement(Box, {
+    xcss: resizerLabelStyles
+  }, labelComponent));
 };
 export default /*#__PURE__*/forwardRef(ResizerNext);

package/dist/es2019/resizer/ResizerBreakoutModeLabel.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { breakoutMessages as messages } from '../messages';
+const fullWidthLabelWrapperStyles = xcss({
+  height: "var(--ds-space-400, 32px)",
+  display: 'flex',
+  backgroundColor: 'elevation.surface.overlay',
+  borderRadius: 'border.radius',
+  boxShadow: 'elevation.shadow.overlay',
+  boxSizing: 'border-box',
+  alignItems: 'center'
+});
+const fullWidthLabelStyles = xcss({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050'
+});
+export const ResizerBreakoutModeLabel = ({
+  layout: breaktoutLayout
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const message = React.useMemo(() => {
+    switch (breaktoutLayout) {
+      case 'full-width':
+        return formatMessage(messages.fullWidthLabel);
+      case 'wide':
+        return formatMessage(messages.wideWidthLabel);
+      default:
+        return null;
+    }
+  }, [breaktoutLayout, formatMessage]);
+  return message && /*#__PURE__*/React.createElement(Box, {
+    xcss: fullWidthLabelWrapperStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: fullWidthLabelStyles
+  }, message));
+};

package/dist/es2019/resizer/index.js

@@ -3,4 +3,5 @@
 
 export { default as ResizerNext } from './Resizer';
 export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
-export { useBreakoutGuidelines } from './useBreakoutGuidelines';
+export { useBreakoutGuidelines } from './useBreakoutGuidelines';
+export { ResizerBreakoutModeLabel } from './ResizerBreakoutModeLabel';

package/dist/es2019/styles/index.js

@@ -3,7 +3,7 @@
 
 export { textColorStyles } from './shared/text-color';
 export { backgroundColorStyles } from './shared/background-color';
-export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl } from './shared/table';
+export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl, tableControlsSpacing, tablePadding } from './shared/table';
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle, columnLayoutResponsiveSharedStyle, columnLayoutResponsiveRendererStyles } from './shared/column-layout';
 export { mediaSingleSharedStyle, mediaSingleSharedStyleNew, richMediaClassName } from './shared/media-single';

package/dist/es2019/styles/shared/table.js

@@ -15,6 +15,8 @@ export const tableNewColumnMinWidth = 140;
 export const tableCellBorderWidth = 1;
 export const tableCellPadding = 8;
 export const tableResizeHandleWidth = 6;
+export const tablePadding = 8;
+export const tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
 export const TableSharedCssClassName = {
   TABLE_CONTAINER: `${tablePrefixSelector}-container`,
   TABLE_NODE_WRAPPER: `${tablePrefixSelector}-wrapper`,

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 = "103.6.0";
+const packageVersion = "103.7.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -427,6 +427,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["PICKER_MEDIA"] = "mediaPicker";
   ACTION_SUBJECT_ID["PICKER_COLOR"] = "colorPicker";
   ACTION_SUBJECT_ID["PICKER_EMOJI"] = "emojiPicker";
+  ACTION_SUBJECT_ID["DOCKED_PRIMARY_TOOLBAR"] = "dockedPrimaryToolbar";
   ACTION_SUBJECT_ID["PLACEHOLDER_TEXT"] = "placeholderText";
   ACTION_SUBJECT_ID["POST_QUERY_SEARCH_RESULTS"] = "postQuerySearchResults";
   ACTION_SUBJECT_ID["PRE_QUERY_SEARCH_RESULTS"] = "preQuerySearchResults";

package/dist/esm/i18n/da.js

@@ -328,6 +328,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Rediger søgning',
   'fabric.editor.date': 'Dato',
   'fabric.editor.date.description': 'Tilføj en dato med en kalender',
+  'fabric.editor.datePickerOpenedAlert': 'Pop op-vinduet til datoredigering er åbnet. Tryk på Tabulatorknappen for at få adgang til pop op-vinduet',
   'fabric.editor.decision': 'Beslutning',
   'fabric.editor.decision.description': 'Registrér beslutninger, så de er lette at finde igen',
   'fabric.editor.decisionPlaceholder': 'Tilføj en beslutning ...',

package/dist/esm/i18n/de.js

@@ -706,6 +706,7 @@ export default {
   'fabric.editor.toolbarLabel': 'Editor',
   'fabric.editor.toolbarMediaTitle': 'Bild, Video oder Datei hinzufügen',
   'fabric.editor.toolbarPositionFixedAtTop': 'Oben fixiert',
+  'fabric.editor.toolbarPositionInline': 'Auf gleicher Höhe wie der Text',
   'fabric.editor.tooltip.blockPanel': 'ein Panel',
   'fabric.editor.tooltip.bulletList': 'eine Liste',
   'fabric.editor.tooltip.decisionList': 'eine Entscheidungsliste',

package/dist/esm/i18n/hu.js

@@ -327,6 +327,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Keresési lekérdezés szerkesztése',
   'fabric.editor.date': 'Dátum',
   'fabric.editor.date.description': 'Dátum hozzáadása naptár használatával',
+  'fabric.editor.datePickerOpenedAlert': 'Megnyílt a dátumszerkesztő előugró ablak, amelyet a Tab billentyűvel érhetsz el',
   'fabric.editor.decision': 'Döntés',
   'fabric.editor.decision.description': 'Döntések rögzítése az egyszerű nyomon követés érdekében',
   'fabric.editor.decisionPlaceholder': 'Döntés hozzáadása...',

package/dist/esm/i18n/ja.js

@@ -329,6 +329,7 @@ export default {
   'fabric.editor.datasourceTitle': '検索クエリを編集',
   'fabric.editor.date': '日付',
   'fabric.editor.date.description': 'カレンダーを使用して日付を追加',
+  'fabric.editor.datePickerOpenedAlert': '日付エディターのポップアップが開きました。Tab キーを押してポップアップにアクセスしてください',
   'fabric.editor.decision': '決定事項',
   'fabric.editor.decision.description': '決定事項をキャプチャして簡単に追跡',
   'fabric.editor.decisionPlaceholder': '決定事項を追加…',

package/dist/esm/i18n/ko.js

@@ -329,6 +329,7 @@ export default {
   'fabric.editor.datasourceTitle': '검색 쿼리 편집',
   'fabric.editor.date': '날짜',
   'fabric.editor.date.description': '캘린더로 날짜 추가',
+  'fabric.editor.datePickerOpenedAlert': '날짜 편집기 팝업이 열렸습니다. Tab 키를 눌러 팝업에 액세스하세요',
   'fabric.editor.decision': '결정',
   'fabric.editor.decision.description': '결정을 추적하기 쉽도록 캡처',
   'fabric.editor.decisionPlaceholder': '결정 추가...',

package/dist/esm/i18n/nb.js

@@ -328,6 +328,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Rediger søkespørring',
   'fabric.editor.date': 'Dato',
   'fabric.editor.date.description': 'Legg til en dato med en kalender',
+  'fabric.editor.datePickerOpenedAlert': 'Pop-up for å redigere dato er åpnet, trykk på Tab for å gå til pop-up-vinduet',
   'fabric.editor.decision': 'Beslutning',
   'fabric.editor.decision.description': 'Registrer beslutninger slik at det er lett å spore dem',
   'fabric.editor.decisionPlaceholder': 'Legg til en beslutning …',

package/dist/esm/i18n/pt_BR.js

@@ -327,6 +327,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Editar consulta de pesquisa',
   'fabric.editor.date': 'Data',
   'fabric.editor.date.description': 'Adicionar data usando um calendário',
+  'fabric.editor.datePickerOpenedAlert': 'O pop-up do editor de data foi aberto, pressione Tab para acessar',
   'fabric.editor.decision': 'Decisão',
   'fabric.editor.decision.description': 'Registre decisões para facilitar o acompanhamento',
   'fabric.editor.decisionPlaceholder': 'Adicionar uma decisão...',

package/dist/esm/i18n/ru.js

@@ -329,6 +329,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Изменить поисковый запрос',
   'fabric.editor.date': 'Дата',
   'fabric.editor.date.description': 'Добавление даты из календаря',
+  'fabric.editor.datePickerOpenedAlert': 'Открылось всплывающее окно реактора даты. Для перехода к всплывающему окну нажмите клавишу табуляции',
   'fabric.editor.decision': 'Решение',
   'fabric.editor.decision.description': 'Записывайте решения для удобного отслеживания',
   'fabric.editor.decisionPlaceholder': 'Добавить решение…',

package/dist/esm/i18n/th.js

@@ -314,6 +314,7 @@ export default {
   'fabric.editor.datasourceTitle': 'แก้ไขคำถามการค้นหา',
   'fabric.editor.date': 'วันที่',
   'fabric.editor.date.description': 'เพิ่มวันที่โดยใช้ปฏิทิน',
+  'fabric.editor.datePickerOpenedAlert': 'เปิดป๊อบอัพแก้ไขวันที่ แล้วกดที่ "แท็บ" เพื่อเข้าถึงป๊อบอัพ',
   'fabric.editor.decision': 'การตัดสินใจ',
   'fabric.editor.decision.description': 'สร้างกรอบการตัดสินใจเพื่อให้คุณติดตามได้ง่าย',
   'fabric.editor.decisionPlaceholder': 'เพิ่มการตัดสินใจ…',

package/dist/esm/i18n/uk.js

@@ -314,6 +314,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Редагувати пошуковий запит',
   'fabric.editor.date': 'Дата',
   'fabric.editor.date.description': 'Вставити дату через календар',
+  'fabric.editor.datePickerOpenedAlert': 'Відкрито спливне вікно редактора дат. Натисніть Tab, щоб викликати його.',
   'fabric.editor.decision': 'Рішення',
   'fabric.editor.decision.description': 'Зафіксувати рішення, щоб його було легко знайти',
   'fabric.editor.decisionPlaceholder': 'Додати рішення...',

package/dist/esm/i18n/vi.js

@@ -314,6 +314,7 @@ export default {
   'fabric.editor.datasourceTitle': 'Sửa truy vấn tìm kiếm',
   'fabric.editor.date': 'Ngày',
   'fabric.editor.date.description': 'Thêm ngày bằng cách sử dụng lịch',
+  'fabric.editor.datePickerOpenedAlert': 'Cửa sổ bật lên của trình chỉnh sửa ngày đã mở, hãy nhấn Tab để truy cập cửa sổ bật lên',
   'fabric.editor.decision': 'Quyết định',
   'fabric.editor.decision.description': 'Thu thập các quyết định để dễ dàng theo dõi',
   'fabric.editor.decisionPlaceholder': 'Thêm quyết định…',

package/dist/esm/i18n/zh.js

@@ -329,6 +329,7 @@ export default {
   'fabric.editor.datasourceTitle': '编辑搜索查询',
   'fabric.editor.date': '日期',
   'fabric.editor.date.description': '使用日历添加日期',
+  'fabric.editor.datePickerOpenedAlert': '日期编辑器弹出窗口已打开，按 Tab 键可访问弹出窗口',
   'fabric.editor.decision': '决定',
   'fabric.editor.decision.description': '捕获决策，以便轻松跟踪',
   'fabric.editor.decisionPlaceholder': '添加决定...',

package/dist/esm/i18n/zh_TW.js

@@ -329,6 +329,7 @@ export default {
   'fabric.editor.datasourceTitle': '編輯搜尋查詢',
   'fabric.editor.date': '日期',
   'fabric.editor.date.description': '使用日曆新增日期',
+  'fabric.editor.datePickerOpenedAlert': '日期編輯器快顯視窗已開啟，按 Tab 即可前往快顯視窗',
   'fabric.editor.decision': '決定',
   'fabric.editor.decision.description': '擷取決定以便追蹤',
   'fabric.editor.decisionPlaceholder': '新增決定…',

package/dist/esm/messages/breakout.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  fullWidthLabel: {
+    id: 'fabric.editor.breakoutFullWidthLabel',
+    defaultMessage: 'Full-width',
+    description: 'Resize current element to full-width mode'
+  },
+  wideWidthLabel: {
+    id: 'fabric.editor.breakoutWideWidthLabel',
+    defaultMessage: 'Wide',
+    description: 'Resize current element to wide mode'
+  }
+});

package/dist/esm/messages/index.js

@@ -4,6 +4,7 @@
 import { defineMessages } from 'react-intl-next';
 export { alignmentMessages } from './alignment';
 export { annotationMessages } from './annotation';
+export { messages as breakoutMessages } from './breakout';
 export { messages as blockTypeMessages } from './block-type';
 export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';

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

package/dist/esm/resizer/BreakoutResizer.js

@@ -8,6 +8,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
 import { browser } from '../utils/browser';
 import Resizer from './Resizer';
+import { ResizerBreakoutModeLabel } from './ResizerBreakoutModeLabel';
 import { SNAP_GAP, useBreakoutGuidelines } from './useBreakoutGuidelines';
 var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 var getHandleStyle = function getHandleStyle(node) {
@@ -65,7 +66,6 @@ var defaultStyles = {
   display: 'grid'
 };
 var RESIZE_STEP_VALUE = 10;
-
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
  * correct ADF support.
@@ -82,7 +82,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     parentRef = _ref.parentRef,
     displayGuidelines = _ref.displayGuidelines,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
-    displayGapCursor = _ref.displayGapCursor;
+    displayGapCursor = _ref.displayGapCursor,
+    onResizeStart = _ref.onResizeStart;
   var _useState = useState({
       minWidth: undefined,
       maxWidth: undefined,
@@ -125,6 +126,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     return $from.pos >= startPos && endPos >= $to.pos;
   }, [editorView.state.doc, editorView.state.selection, getPos]);
   var handleResizeStart = useCallback(function () {
+    onResizeStart === null || onResizeStart === void 0 || onResizeStart();
     var newMinWidth;
     var newMaxWidth;
     var widthState = getEditorWidth();
@@ -141,7 +143,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
       maxWidth: newMaxWidth
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
-  }, [getEditorWidth, editorView, displayGapCursor]);
+  }, [onResizeStart, getEditorWidth, editorView, displayGapCursor]);
   var handleResize = useCallback(function (originalState, delta) {
     if (editorExperiment('single_column_layouts', true)) {
       var newWidth = originalState.width + delta.width;
@@ -315,7 +317,10 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     handleSize: "clamped",
     handleHighlight: "full-height",
     handlePositioning: "adjacent",
-    handleAlignmentMethod: "sticky"
+    handleAlignmentMethod: "sticky",
+    labelComponent: currentLayout && editorExperiment('single_column_layouts', true) && ['full-width', 'wide'].includes(currentLayout || '') && /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
+      layout: currentLayout
+    })
   });
 };
 export { BreakoutResizer };

package/dist/esm/resizer/Resizer.js

@@ -2,14 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef"];
+var _excluded = ["width", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef", "labelComponent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
+import { Box, xcss } from '@atlaskit/primitives';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { handleWrapperClass, resizerDangerClassName, resizerExtendedZone, resizerHandleClassName, resizerHandleThumbClassName, resizerHandleTrackClassName, resizerHandleZIndex, resizerHoverZoneClassName, resizerItemClassName } from '../styles/shared/resizer';
+var resizerLabelStyles = xcss({
+  position: 'absolute',
+  bottom: "var(--ds-space-negative-400, -32px)",
+  width: '100%',
+  overflow: 'visible',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: "var(--ds-space-0, 0px)"
+});
 var SUPPORTED_HANDLES = ['left', 'right'];
 var inheritedCSS = {
   position: 'inherit',
@@ -61,6 +73,7 @@ var ResizerNext = function ResizerNext(props, ref) {
     _props$needExtendedRe = props.needExtendedResizeZone,
     needExtendedResizeZone = _props$needExtendedRe === void 0 ? true : _props$needExtendedRe,
     childrenDOMRef = props.childrenDOMRef,
+    labelComponent = props.labelComponent,
     otherProps = _objectWithoutProperties(props, _excluded);
   var onResizeStart = useCallback(function (event) {
     // prevent creating a drag event on Firefox
@@ -199,6 +212,8 @@ var ResizerNext = function ResizerNext(props, ref) {
     ref: function ref(_ref) {
       return childrenDOMRef && childrenDOMRef(_ref);
     }
-  }, children));
+  }, children), labelComponent && editorExperiment('single_column_layouts', true) && /*#__PURE__*/React.createElement(Box, {
+    xcss: resizerLabelStyles
+  }, labelComponent));
 };
 export default /*#__PURE__*/forwardRef(ResizerNext);

package/dist/esm/resizer/ResizerBreakoutModeLabel.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+import { breakoutMessages as messages } from '../messages';
+var fullWidthLabelWrapperStyles = xcss({
+  height: "var(--ds-space-400, 32px)",
+  display: 'flex',
+  backgroundColor: 'elevation.surface.overlay',
+  borderRadius: 'border.radius',
+  boxShadow: 'elevation.shadow.overlay',
+  boxSizing: 'border-box',
+  alignItems: 'center'
+});
+var fullWidthLabelStyles = xcss({
+  marginLeft: 'space.100',
+  marginRight: 'space.100',
+  paddingLeft: 'space.075',
+  paddingRight: 'space.075',
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050'
+});
+export var ResizerBreakoutModeLabel = function ResizerBreakoutModeLabel(_ref) {
+  var breaktoutLayout = _ref.layout;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var message = React.useMemo(function () {
+    switch (breaktoutLayout) {
+      case 'full-width':
+        return formatMessage(messages.fullWidthLabel);
+      case 'wide':
+        return formatMessage(messages.wideWidthLabel);
+      default:
+        return null;
+    }
+  }, [breaktoutLayout, formatMessage]);
+  return message && /*#__PURE__*/React.createElement(Box, {
+    xcss: fullWidthLabelWrapperStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: fullWidthLabelStyles
+  }, message));
+};

package/dist/esm/resizer/index.js

@@ -3,4 +3,5 @@
 
 export { default as ResizerNext } from './Resizer';
 export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
-export { useBreakoutGuidelines } from './useBreakoutGuidelines';
+export { useBreakoutGuidelines } from './useBreakoutGuidelines';
+export { ResizerBreakoutModeLabel } from './ResizerBreakoutModeLabel';

package/dist/esm/styles/index.js

@@ -3,7 +3,7 @@
 
 export { textColorStyles } from './shared/text-color';
 export { backgroundColorStyles } from './shared/background-color';
-export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl } from './shared/table';
+export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl, tableControlsSpacing, tablePadding } from './shared/table';
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle, columnLayoutResponsiveSharedStyle, columnLayoutResponsiveRendererStyles } from './shared/column-layout';
 export { mediaSingleSharedStyle, mediaSingleSharedStyleNew, richMediaClassName } from './shared/media-single';

package/dist/esm/styles/shared/table.js

@@ -17,6 +17,8 @@ export var tableNewColumnMinWidth = 140;
 export var tableCellBorderWidth = 1;
 export var tableCellPadding = 8;
 export var tableResizeHandleWidth = 6;
+export var tablePadding = 8;
+export var tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
 export var TableSharedCssClassName = {
   TABLE_CONTAINER: "".concat(tablePrefixSelector, "-container"),
   TABLE_NODE_WRAPPER: "".concat(tablePrefixSelector, "-wrapper"),

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

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

package/dist/types/analytics/types/enums.d.ts

@@ -419,6 +419,7 @@ export declare enum ACTION_SUBJECT_ID {
     PICKER_MEDIA = "mediaPicker",
     PICKER_COLOR = "colorPicker",
     PICKER_EMOJI = "emojiPicker",
+    DOCKED_PRIMARY_TOOLBAR = "dockedPrimaryToolbar",
     PLACEHOLDER_TEXT = "placeholderText",
     POST_QUERY_SEARCH_RESULTS = "postQuerySearchResults",
     PRE_QUERY_SEARCH_RESULTS = "preQuerySearchResults",

package/dist/types/analytics/types/general-events.d.ts

@@ -144,6 +144,7 @@ type PickerMediaInsertClosedAEP = PickerClosedAEP<ACTION_SUBJECT_ID.PICKER_MEDIA
     exitMethod: INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
 }>;
 type PickerMediaInsertCancelledAEP = UIAEP<ACTION.CANCELLED, ACTION_SUBJECT.PICKER, ACTION_SUBJECT_ID.PICKER_MEDIA, undefined, undefined>;
+type DockedPrimaryToolbarRenderedAEP = UIAEP<ACTION.RENDERED, ACTION_SUBJECT.TOOLBAR, ACTION_SUBJECT_ID.DOCKED_PRIMARY_TOOLBAR, undefined, undefined>;
 type HelpQuickInsertAEP = UIAEP<ACTION.HELP_OPENED, ACTION_SUBJECT.HELP, ACTION_SUBJECT_ID.HELP_QUICK_INSERT, {
     inputMethod: INPUT_METHOD.QUICK_INSERT;
 }, undefined>;
@@ -208,5 +209,5 @@ type CopyLinkToAnchorButtonAEP = ButtonAEP<ACTION_SUBJECT_ID.COPY_LINK_TO_ANCHOR
     extensionType?: string;
     isLivePage?: boolean;
 }>;
-export type GeneralEventPayload<T = void> = AnnotateButtonAEP | AnnotationAEP | BrowserFreezePayload | ButtonFeedbackAEP | ButtonHelpAEP | ButtonUploadMediaAEP | ColorPickerAEP | DispatchedTransactionAEP | EditorPerfAEP | EditorRenderedAEP<T> | EditorStartAEP | EditorStopAEP | EditorTTIAEP | ExpandToggleAEP | FeedbackAEP | FullWidthModeAEP | HelpQuickInsertAEP | InputPerfSamlingAEP | InputPerfSamplingAvgAEP | PickerEmojiAEP | PickerImageAEP | PickerMediaInsertAEP | PickerMediaInsertClosedAEP | PickerMediaInsertCancelledAEP | ReactNodeViewRenderedAEP | RichMediaLayoutAEP | SelectionAEP | SlowInputAEP | TransactionMutatedAEP | UploadExternalFailedAEP | WithPluginStateCalledAEP | CodeBlockLanguageSelectedAEP | EditorContentRetrievalPerformedAEP | MediaLinkTransformedAEP | TextLinkCodeMarkTransformedAEP | DedupeMarksTransformedAEP | IndentationMarksTransformedAEP | NodesMissingContentTransformedAEP | InvalidProsemirrorDocumentErrorAEP | DocumentProcessingErrorAEP | InvalidMediaContentTransformedAEP | HeadingAnchorLinkButtonAEP | CollabStepsTrackerPayloadAEP | BlocksDragInitAEP | CodeBlockWordWrapToggleAEP | RequestToEditAEP | SingleColumLayoutDetectedAEP | CopyLinkToAnchorButtonAEP;
+export type GeneralEventPayload<T = void> = AnnotateButtonAEP | AnnotationAEP | BrowserFreezePayload | ButtonFeedbackAEP | ButtonHelpAEP | ButtonUploadMediaAEP | ColorPickerAEP | DispatchedTransactionAEP | EditorPerfAEP | EditorRenderedAEP<T> | EditorStartAEP | EditorStopAEP | EditorTTIAEP | ExpandToggleAEP | FeedbackAEP | FullWidthModeAEP | HelpQuickInsertAEP | InputPerfSamlingAEP | InputPerfSamplingAvgAEP | PickerEmojiAEP | PickerImageAEP | PickerMediaInsertAEP | PickerMediaInsertClosedAEP | PickerMediaInsertCancelledAEP | ReactNodeViewRenderedAEP | RichMediaLayoutAEP | SelectionAEP | SlowInputAEP | TransactionMutatedAEP | UploadExternalFailedAEP | WithPluginStateCalledAEP | CodeBlockLanguageSelectedAEP | EditorContentRetrievalPerformedAEP | MediaLinkTransformedAEP | TextLinkCodeMarkTransformedAEP | DedupeMarksTransformedAEP | IndentationMarksTransformedAEP | NodesMissingContentTransformedAEP | InvalidProsemirrorDocumentErrorAEP | DocumentProcessingErrorAEP | InvalidMediaContentTransformedAEP | HeadingAnchorLinkButtonAEP | CollabStepsTrackerPayloadAEP | BlocksDragInitAEP | CodeBlockWordWrapToggleAEP | RequestToEditAEP | SingleColumLayoutDetectedAEP | CopyLinkToAnchorButtonAEP | DockedPrimaryToolbarRenderedAEP;
 export {};

package/dist/types/i18n/da.d.ts

@@ -326,6 +326,7 @@ declare const _default: {
     'fabric.editor.datasourceTitle': string;
     'fabric.editor.date': string;
     'fabric.editor.date.description': string;
+    'fabric.editor.datePickerOpenedAlert': string;
     'fabric.editor.decision': string;
     'fabric.editor.decision.description': string;
     'fabric.editor.decisionPlaceholder': string;

package/dist/types/i18n/de.d.ts

@@ -704,6 +704,7 @@ declare const _default: {
     'fabric.editor.toolbarLabel': string;
     'fabric.editor.toolbarMediaTitle': string;
     'fabric.editor.toolbarPositionFixedAtTop': string;
+    'fabric.editor.toolbarPositionInline': string;
     'fabric.editor.tooltip.blockPanel': string;
     'fabric.editor.tooltip.bulletList': string;
     'fabric.editor.tooltip.decisionList': string;

package/dist/types/i18n/hu.d.ts

@@ -325,6 +325,7 @@ declare const _default: {
     'fabric.editor.datasourceTitle': string;
     'fabric.editor.date': string;
     'fabric.editor.date.description': string;
+    'fabric.editor.datePickerOpenedAlert': string;
     'fabric.editor.decision': string;
     'fabric.editor.decision.description': string;
     'fabric.editor.decisionPlaceholder': string;

package/dist/types/i18n/ja.d.ts

@@ -327,6 +327,7 @@ declare const _default: {
     'fabric.editor.datasourceTitle': string;
     'fabric.editor.date': string;
     'fabric.editor.date.description': string;
+    'fabric.editor.datePickerOpenedAlert': string;
     'fabric.editor.decision': string;
     'fabric.editor.decision.description': string;
     'fabric.editor.decisionPlaceholder': string;

package/dist/types/i18n/ko.d.ts

@@ -327,6 +327,7 @@ declare const _default: {
     'fabric.editor.datasourceTitle': string;
     'fabric.editor.date': string;
     'fabric.editor.date.description': string;
+    'fabric.editor.datePickerOpenedAlert': string;
     'fabric.editor.decision': string;
     'fabric.editor.decision.description': string;
     'fabric.editor.decisionPlaceholder': string;

package/dist/types/i18n/nb.d.ts

@@ -326,6 +326,7 @@ declare const _default: {
     'fabric.editor.datasourceTitle': string;
     'fabric.editor.date': string;
     'fabric.editor.date.description': string;
+    'fabric.editor.datePickerOpenedAlert': string;
     'fabric.editor.decision': string;
     'fabric.editor.decision.description': string;
     'fabric.editor.decisionPlaceholder': string;

package/dist/types/i18n/pt_BR.d.ts

@@ -325,6 +325,7 @@ declare const _default: {
     'fabric.editor.datasourceTitle': string;
     'fabric.editor.date': string;
     'fabric.editor.date.description': string;
+    'fabric.editor.datePickerOpenedAlert': string;
     'fabric.editor.decision': string;
     'fabric.editor.decision.description': string;
     'fabric.editor.decisionPlaceholder': string;