@atlaskit/editor-plugin-table 3.0.4 → 3.1.0

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

@@ -13,15 +13,18 @@ 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';
@@ -32,6 +35,10 @@ import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tabl
 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),

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);

package/dist/esm/plugins/table/transforms/delete-columns.js

@@ -3,9 +3,11 @@ 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; }
 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 { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { splitCellsInColumns } from './split';
 var deleteColumnsCustomStep = function deleteColumnsCustomStep(rect) {
   return function (tr) {
@@ -203,6 +205,9 @@ function fixRowSpans(table) {
 export var deleteColumns = function deleteColumns(rect) {
   var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (tr) {
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
+    });
     if (allowAddColumnCustomStep) {
       return deleteColumnsCustomStep(rect)(tr);
     }

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

@@ -72,7 +72,7 @@ export var hoveredWarningCell = css(_templateObject21 || (_templateObject21 = _t
 
 // move the resize handle zone completely inside the table cell to avoid overflow
 var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
-  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerZIndex) : '';
+  return getBooleanFF('platform.editor.custom-table-width') ? css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), ClassName.RESIZE_HANDLE_DECORATION, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth / 2, resizeHandlerZIndex) : '';
 };
 export var resizeHandle = function resizeHandle(props) {
   return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), ClassName.TABLE_CONTAINER, ClassName.RESIZE_HANDLE_DECORATION, resizeHandlerAreaWidth, resizeHandlerAreaWidth / 2, resizeHandlerZIndex, getLastColumnResizerOverrides(), ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, ClassName.WITH_RESIZE_LINE_LAST_COLUMN, resizeLineWidth, tableToolbarSize + tableCellBorderWidth, tableBorderSelectedColor(props), columnControlsZIndex * 2, tableToolbarSize + tableCellBorderWidth, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, tableToolbarSize + tableCellBorderWidth, tableToolbarSize + tableCellBorderWidth);

package/dist/types/plugins/table/commands/insert.d.ts

@@ -1,7 +1,6 @@
-import { Command } from '@atlaskit/editor-common/types';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
 export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
 export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types/plugins/table/commands/toggle.d.ts

@@ -1,5 +1,5 @@
-import { TableLayout } from '@atlaskit/adf-schema';
-import { Command } from '@atlaskit/editor-common/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { Command } from '@atlaskit/editor-common/types';
 /**
  * Table layout toggle logic
  * default -> wide -> full-width -> default

package/dist/types/plugins/table/nodeviews/TableComponent.d.ts

@@ -43,10 +43,12 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private containerWidth?;
     private layoutSize?;
     private overflowShadowsObserver?;
+    private isInitialOverflowSent;
+    private initialOverflowCaptureTimerId?;
     constructor(props: ComponentProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(): void;
+    componentDidUpdate(_: any, prevState: TableState): void;
     private updateShadowState;
     private createShadowSentinels;
     onStickyState: (state: StickyPluginState) => void;
@@ -55,6 +57,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private handleScroll;
     private handleTableResizing;
     private scaleTable;
+    private setTimerToSendInitialOverflowCaptured;
     private handleAutoSize;
     private handleWindowResize;
     private getParentNodeWidth;

package/dist/types/plugins/table/pm-plugins/table-analytics.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+ */
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+interface LastTrigger {
+    name: TABLE_OVERFLOW_CHANGE_TRIGGER;
+}
+type TableAnalyticsPluginState = {
+    lastTrigger: LastTrigger | undefined;
+};
+export declare const pluginKey: PluginKey<TableAnalyticsPluginState>;
+export declare const META_KEYS: {
+    OVERFLOW_TRIGGER: string;
+    OVERFLOW_STATE_CHANGED: string;
+};
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, tableResizingEnabled: boolean) => SafePlugin<{
+    lastTrigger: undefined;
+}>;
+export { createPlugin };

package/dist/types/plugins/table/pm-plugins/table-resizing/commands.d.ts

@@ -1,8 +1,8 @@
 import type { Command } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { ResizeState } from './utils';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { ResizeState } from './utils';
 export declare const evenColumns: ({ resizeState, table, start, event, }: {
     resizeState: ResizeState;
     table: PMNode;

package/dist/types/plugins/table/transforms/delete-columns.d.ts

@@ -1,3 +1,3 @@
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const deleteColumns: (rect: Rect, allowAddColumnCustomStep?: boolean) => (tr: Transaction) => Transaction;

package/dist/types-ts4.5/plugins/table/commands/insert.d.ts

@@ -1,7 +1,6 @@
-import { Command } from '@atlaskit/editor-common/types';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
 export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
 export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContainerWidth) => Command;

package/dist/types-ts4.5/plugins/table/commands/toggle.d.ts

@@ -1,5 +1,5 @@
-import { TableLayout } from '@atlaskit/adf-schema';
-import { Command } from '@atlaskit/editor-common/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { Command } from '@atlaskit/editor-common/types';
 /**
  * Table layout toggle logic
  * default -> wide -> full-width -> default

package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts

@@ -43,10 +43,12 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private containerWidth?;
     private layoutSize?;
     private overflowShadowsObserver?;
+    private isInitialOverflowSent;
+    private initialOverflowCaptureTimerId?;
     constructor(props: ComponentProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(): void;
+    componentDidUpdate(_: any, prevState: TableState): void;
     private updateShadowState;
     private createShadowSentinels;
     onStickyState: (state: StickyPluginState) => void;
@@ -55,6 +57,7 @@ declare class TableComponent extends React.Component<ComponentProps, TableState>
     private handleScroll;
     private handleTableResizing;
     private scaleTable;
+    private setTimerToSendInitialOverflowCaptured;
     private handleAutoSize;
     private handleWindowResize;
     private getParentNodeWidth;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-analytics.d.ts

@@ -0,0 +1,23 @@
+/**
+ * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+ */
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+interface LastTrigger {
+    name: TABLE_OVERFLOW_CHANGE_TRIGGER;
+}
+type TableAnalyticsPluginState = {
+    lastTrigger: LastTrigger | undefined;
+};
+export declare const pluginKey: PluginKey<TableAnalyticsPluginState>;
+export declare const META_KEYS: {
+    OVERFLOW_TRIGGER: string;
+    OVERFLOW_STATE_CHANGED: string;
+};
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, tableResizingEnabled: boolean) => SafePlugin<{
+    lastTrigger: undefined;
+}>;
+export { createPlugin };

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/commands.d.ts

@@ -1,8 +1,8 @@
 import type { Command } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import { ResizeState } from './utils';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { ResizeState } from './utils';
 export declare const evenColumns: ({ resizeState, table, start, event, }: {
     resizeState: ResizeState;
     table: PMNode;

package/dist/types-ts4.5/plugins/table/transforms/delete-columns.d.ts

@@ -1,3 +1,3 @@
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Rect } from '@atlaskit/editor-tables/table-map';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const deleteColumns: (rect: Rect, allowAddColumnCustomStep?: boolean) => (tr: Transaction) => Transaction;