@atlaskit/editor-plugin-table 3.0.5 → 3.1.1

package/dist/es2019/plugins/table/ui/consts.js

@@ -98,6 +98,7 @@ export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const tableOverflowShadowWidth = 8;
+export const tableOverflowShadowWidthWide = 32;
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -5,7 +5,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -187,13 +187,14 @@ export const OverflowShadow = props => css`
     pointer-events: none;
     top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
-    width: ${tableOverflowShadowWidth}px;
+    width: ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
     background: linear-gradient(
         to left,
         transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 100%
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
+          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
       ),
       linear-gradient(
         to right,
@@ -209,14 +210,15 @@ export const OverflowShadow = props => css`
     background: linear-gradient(
         to right,
         transparent 0,
-        ${`var(--ds-shadow-overflow-spread, ${N40A})`} 100%
+        ${`var(--ds-shadow-overflow-spread, ${N40A})`}
+          ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? 140 : 100}%
       ),
       linear-gradient(
         to left,
         ${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
         transparent 1px
       );
-    left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${tableOverflowShadowWidth}px)` : 'calc(100% + 2px)'};
+    left: ${getBooleanFF('platform.editor.custom-table-width') ? `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth}px)` : `calc(100% - ${getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide - 10 : -2}px)`};
   }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {

package/dist/esm/plugins/table/commands/insert.js

@@ -1,9 +1,11 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { addColumnAt as addColumnAtPMUtils, addRowAt, createTable as createTableNode, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
@@ -35,6 +37,9 @@ export function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
+      });
       return updatedTr;
     };
   };

package/dist/esm/plugins/table/commands/toggle.js

@@ -3,8 +3,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 //#region Imports
 
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { findTable, toggleHeader } from '@atlaskit/editor-tables/utils';
 import { createCommand } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 //#endregion
 
 // #region Utils
@@ -50,10 +52,15 @@ export var toggleNumberColumn = function toggleNumberColumn(state, dispatch) {
   var _ref = findTable(state.selection),
     node = _ref.node,
     pos = _ref.pos;
+  var isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
   tr.setNodeMarkup(pos, state.schema.nodes.table, _objectSpread(_objectSpread({}, node.attrs), {}, {
-    isNumberColumnEnabled: !node.attrs.isNumberColumnEnabled
+    isNumberColumnEnabled: !isNumberedColumnEnabled
   }));
   tr.setMeta('scrollIntoView', false);
+  var tableOverflowChangeTriggerName = isNumberedColumnEnabled ? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN : TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: tableOverflowChangeTriggerName
+  });
   if (dispatch) {
     dispatch(tr);
   }
@@ -74,6 +81,9 @@ export var toggleTableLayout = function toggleTableLayout(state, dispatch) {
     tr.setNodeMarkup(table.pos, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.node.attrs), {}, {
       layout: layout
     }));
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     return tr.setMeta('scrollIntoView', false);
   })(state, dispatch);
 };

package/dist/esm/plugins/table/index.js

@@ -10,6 +10,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -17,6 +18,7 @@ import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
+import { createPlugin as createTableAnalyticsPlugin, pluginKey as tableAnalyticsPluginKey } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -182,6 +184,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref9.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
+      }, {
+        name: 'tableAnalyticsPlugin',
+        plugin: function plugin(_ref10) {
+          var _options$tableResizin;
+          var dispatch = _ref10.dispatch,
+            dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
+          return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: function plugin() {
@@ -210,45 +220,46 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref10) {
-      var editorView = _ref10.editorView,
-        popupsMountPoint = _ref10.popupsMountPoint,
-        popupsBoundariesElement = _ref10.popupsBoundariesElement,
-        popupsScrollableElement = _ref10.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        popupsMountPoint = _ref11.popupsMountPoint,
+        popupsBoundariesElement = _ref11.popupsBoundariesElement,
+        popupsScrollableElement = _ref11.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
+          tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        render: function render(_ref11) {
-          var resizingPluginState = _ref11.tableResizingPluginState,
-            stickyHeadersState = _ref11.stickyHeadersState,
-            tablePluginState = _ref11.tablePluginState,
-            tableWidthPluginState = _ref11.tableWidthPluginState;
+        render: function render(_ref12) {
+          var resizingPluginState = _ref12.tableResizingPluginState,
+            stickyHeadersState = _ref12.stickyHeadersState,
+            tablePluginState = _ref12.tablePluginState,
+            tableWidthPluginState = _ref12.tableWidthPluginState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref12 = tablePluginState,
-            tableNode = _ref12.tableNode,
-            tablePos = _ref12.tablePos,
-            targetCellPosition = _ref12.targetCellPosition,
-            isContextualMenuOpen = _ref12.isContextualMenuOpen,
-            layout = _ref12.layout,
-            tableRef = _ref12.tableRef,
-            pluginConfig = _ref12.pluginConfig,
-            insertColumnButtonIndex = _ref12.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref12.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref12.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref12.isHeaderRowEnabled,
-            tableWrapperTarget = _ref12.tableWrapperTarget;
+          var _ref13 = tablePluginState,
+            tableNode = _ref13.tableNode,
+            tablePos = _ref13.tablePos,
+            targetCellPosition = _ref13.targetCellPosition,
+            isContextualMenuOpen = _ref13.isContextualMenuOpen,
+            layout = _ref13.layout,
+            tableRef = _ref13.tableRef,
+            pluginConfig = _ref13.pluginConfig,
+            insertColumnButtonIndex = _ref13.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref13.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref13.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref13.isHeaderRowEnabled,
+            tableWrapperTarget = _ref13.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -314,8 +325,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref13) {
-        var formatMessage = _ref13.formatMessage;
+      quickInsert: function quickInsert(_ref14) {
+        var formatMessage = _ref14.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -13,25 +13,32 @@ import React from 'react';
 import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth } from '../ui/consts';
+import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 var isIE11 = browser.ie_version === 11;
+// When table is inserted via paste, keyboard shortcut or quickInsert,
+// componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
+// To make sure we capture the last update, we use setTimeout.
+var initialOverflowCaptureTimeroutDelay = 300;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -169,13 +176,40 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, options), domAtPos)(state.tr);
       dispatch(tr);
     });
+    _defineProperty(_assertThisInitialized(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
+      var _this$state;
+      var _this$props3 = _this.props,
+        eventDispatcher = _this$props3.eventDispatcher,
+        containerWidth = _this$props3.containerWidth,
+        options = _this$props3.options;
+      var dispatch = createDispatch(eventDispatcher);
+      var parentWidth = ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
+      _this.initialOverflowCaptureTimerId = setTimeout(function () {
+        dispatch(analyticsEventKey, {
+          payload: {
+            action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              editorWidth: containerWidth.width || 0,
+              isOverflowing: isOverflowing,
+              tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
+              width: _this.node.attrs.width || 0,
+              parentWidth: parentWidth
+            }
+          }
+        });
+        _this.isInitialOverflowSent = true;
+      }, initialOverflowCaptureTimeroutDelay);
+    });
     _defineProperty(_assertThisInitialized(_this), "handleAutoSize", function () {
       if (_this.table) {
-        var _this$props3 = _this.props,
-          view = _this$props3.view,
-          getNode = _this$props3.getNode,
-          getPos = _this$props3.getPos,
-          containerWidth = _this$props3.containerWidth;
+        var _this$props4 = _this.props,
+          view = _this$props4.view,
+          getNode = _this$props4.getNode,
+          getPos = _this$props4.getPos,
+          containerWidth = _this$props4.containerWidth;
         var _node = getNode();
         var pos = getPos();
         if (!isValidPosition(pos, view.state)) {
@@ -188,9 +222,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
     _defineProperty(_assertThisInitialized(_this), "handleWindowResize", function () {
       var _node$attrs, _node$attrs2;
-      var _this$props4 = _this.props,
-        getNode = _this$props4.getNode,
-        containerWidth = _this$props4.containerWidth;
+      var _this$props5 = _this.props,
+        getNode = _this$props5.getNode,
+        containerWidth = _this$props5.containerWidth;
       var node = getNode();
       var prevNode = _this.node;
       var layoutSize = _this.tableNodeLayoutSize(node);
@@ -206,11 +240,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "getParentNodeWidth", function () {
-      var _this$props5 = _this.props,
-        getPos = _this$props5.getPos,
-        containerWidth = _this$props5.containerWidth,
-        options = _this$props5.options,
-        state = _this$props5.view.state;
+      var _this$props6 = _this.props,
+        getPos = _this$props6.getPos,
+        containerWidth = _this$props6.containerWidth,
+        options = _this$props6.options,
+        state = _this$props6.view.state;
       var pos = getPos();
       if (!isValidPosition(pos, state)) {
         return;
@@ -236,6 +270,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
+    _this.isInitialOverflowSent = false;
 
     // store table size using previous full-width mode so can detect if it has changed
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -257,10 +292,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props6 = this.props,
-        allowColumnResizing = _this$props6.allowColumnResizing,
-        eventDispatcher = _this$props6.eventDispatcher,
-        options = _this$props6.options;
+      var _this$props7 = this.props,
+        allowColumnResizing = _this$props7.allowColumnResizing,
+        eventDispatcher = _this$props7.eventDispatcher,
+        options = _this$props7.options;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
       }
@@ -279,14 +314,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.onStickyState(currentStickyState);
       }
       eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
+      if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+        var initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+        this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props7 = this.props,
-        allowColumnResizing = _this$props7.allowColumnResizing,
-        eventDispatcher = _this$props7.eventDispatcher,
-        options = _this$props7.options;
+      var _this$props8 = this.props,
+        allowColumnResizing = _this$props8.allowColumnResizing,
+        eventDispatcher = _this$props8.eventDispatcher,
+        options = _this$props8.options;
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
@@ -304,18 +343,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.overflowShadowsObserver.dispose();
       }
       eventDispatcher.off(stickyHeadersPluginKey.key, this.onStickyState);
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(_, prevState) {
       var _this$wrapper;
-      var _this$props8 = this.props,
-        view = _this$props8.view,
-        getNode = _this$props8.getNode,
-        isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing,
-        isResizing = _this$props8.isResizing,
-        options = _this$props8.options;
+      var _this$props9 = this.props,
+        view = _this$props9.view,
+        getNode = _this$props9.getNode,
+        isMediaFullscreen = _this$props9.isMediaFullscreen,
+        allowColumnResizing = _this$props9.allowColumnResizing,
+        isResizing = _this$props9.isResizing,
+        options = _this$props9.options;
       var _getPluginState = getPluginState(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = findTable(view.state.selection);
@@ -350,29 +392,52 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         this.handleTableResizingDebounced();
       }
+      if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+        var newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+        var prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+        if (this.initialOverflowCaptureTimerId) {
+          clearTimeout(this.initialOverflowCaptureTimerId);
+        }
+        if (!this.isInitialOverflowSent) {
+          this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+        }
+        if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+          var _this$state2;
+          var _this$props$view = this.props.view,
+            dispatch = _this$props$view.dispatch,
+            tr = _this$props$view.state.tr;
+          dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+            isOverflowing: newIsOverflowing,
+            wasOverflowing: prevIsOverflowing,
+            editorWidth: this.props.containerWidth.width || 0,
+            width: this.node.attrs.width || 0,
+            parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+          }));
+        }
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _classnames,
         _this2 = this;
-      var _this$props9 = this.props,
-        view = _this$props9.view,
-        getNode = _this$props9.getNode,
-        isResizing = _this$props9.isResizing,
-        _this$props9$allowCon = _this$props9.allowControls,
-        allowControls = _this$props9$allowCon === void 0 ? true : _this$props9$allowCon,
-        isHeaderRowEnabled = _this$props9.isHeaderRowEnabled,
-        ordering = _this$props9.ordering,
-        isHeaderColumnEnabled = _this$props9.isHeaderColumnEnabled,
-        tableActive = _this$props9.tableActive,
-        containerWidth = _this$props9.containerWidth,
-        options = _this$props9.options,
-        getPos = _this$props9.getPos,
-        pluginInjectionApi = _this$props9.pluginInjectionApi;
-      var _this$state = this.state,
-        showBeforeShadow = _this$state.showBeforeShadow,
-        showAfterShadow = _this$state.showAfterShadow;
+      var _this$props10 = this.props,
+        view = _this$props10.view,
+        getNode = _this$props10.getNode,
+        isResizing = _this$props10.isResizing,
+        _this$props10$allowCo = _this$props10.allowControls,
+        allowControls = _this$props10$allowCo === void 0 ? true : _this$props10$allowCo,
+        isHeaderRowEnabled = _this$props10.isHeaderRowEnabled,
+        ordering = _this$props10.ordering,
+        isHeaderColumnEnabled = _this$props10.isHeaderColumnEnabled,
+        tableActive = _this$props10.tableActive,
+        containerWidth = _this$props10.containerWidth,
+        options = _this$props10.options,
+        getPos = _this$props10.getPos,
+        pluginInjectionApi = _this$props10.pluginInjectionApi;
+      var _this$state3 = this.state,
+        showBeforeShadow = _this$state3.showBeforeShadow,
+        showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
       // doesn't work well with WithPluginState
       var _getPluginState2 = getPluginState(view.state),
@@ -464,7 +529,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           position: 'absolute',
-          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(tableOverflowShadowWidth, "px") : '-2px'
+          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px") : '-2px'
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -5,11 +5,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
 import { defineMessages, useIntl } from 'react-intl-next';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
@@ -135,6 +137,9 @@ export var TableResizer = function TableResizer(_ref) {
       resizing: true
     });
     displayGapCursor(false);
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     dispatch(tr);
     var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));

package/dist/esm/plugins/table/pm-plugins/table-analytics.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+/**
+ * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+ */
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('tableAnalyticsPlugin');
+export var META_KEYS = {
+  OVERFLOW_TRIGGER: 'tableOverflowTrigger',
+  OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged'
+};
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, tableResizingEnabled) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          lastTrigger: undefined
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(META_KEYS.OVERFLOW_TRIGGER);
+        var newState = _objectSpread({}, pluginState);
+        if (meta) {
+          newState.lastTrigger = _objectSpread({}, meta);
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return pluginState;
+      }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _newPluginState$lastT;
+      var newPluginState = pluginKey.getState(newState);
+      var hasAnalyticsBeenDispatched = false;
+      var lastTriggerName = (newPluginState === null || newPluginState === void 0 ? void 0 : (_newPluginState$lastT = newPluginState.lastTrigger) === null || _newPluginState$lastT === void 0 ? void 0 : _newPluginState$lastT.name) ||
+      // NOTE: We assume that we know and can correctly differentiate
+      // between all triggers of table overflow state change.
+      // The only trigger we can't identify is viewport width change.
+      // However, since there is still a chance that there are other triggers we didn't think of,
+      // all these unknown triggers and viwport width change trigger are captured as EXTERNAL.
+      TABLE_OVERFLOW_CHANGE_TRIGGER.EXTERNAL;
+      transactions.forEach(function (tr) {
+        var payload = tr.getMeta(META_KEYS.OVERFLOW_STATE_CHANGED);
+        if (payload) {
+          dispatchAnalyticsEvent({
+            action: TABLE_ACTION.OVERFLOW_CHANGED,
+            actionSubject: ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: EVENT_TYPE.TRACK,
+            attributes: {
+              editorWidth: payload.editorWidth,
+              parentWidth: payload.parentWidth,
+              isOverflowing: payload.isOverflowing,
+              wasOverflowing: payload.wasOverflowing,
+              width: payload.width,
+              tableResizingEnabled: tableResizingEnabled,
+              trigger: lastTriggerName
+            }
+          });
+          hasAnalyticsBeenDispatched = true;
+        }
+      });
+      if (hasAnalyticsBeenDispatched) {
+        var tr = newState.tr;
+        return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
+      }
+      return undefined;
+    }
+  });
+};
+export { createPlugin };

package/dist/esm/plugins/table/pm-plugins/table-resizing/commands.js

@@ -1,5 +1,7 @@
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { updateColumnWidths } from '../../transforms';
+import { META_KEYS } from '../table-analytics';
 import { createCommand, getPluginState } from './plugin-factory';
 import { evenAllColumnsWidths, isClickNear } from './utils';
 export var evenColumns = function evenColumns(_ref) {
@@ -36,6 +38,9 @@ export var distributeColumnsWidths = function distributeColumnsWidths(newResizeS
   return function (state, dispatch) {
     if (dispatch) {
       var _tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
+      _tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS
+      });
       stopResizing(_tr)(state, dispatch);
     }
     return true;

package/dist/esm/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -1,4 +1,4 @@
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -8,6 +8,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
+import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
@@ -20,6 +21,13 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     return false;
   }
   event.preventDefault();
+  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+    var tr = view.state.tr;
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
+    });
+    dispatch(tr);
+  }
   var mouseDownTime = event.timeStamp;
   var cell = state.doc.nodeAt(localResizeHandlePos);
   var $cell = state.doc.resolve(localResizeHandlePos);