@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

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

@@ -0,0 +1,347 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
+
+var _utils2 = require("@atlaskit/editor-tables/utils");
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+
+var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+
+var _analytics = require("@atlaskit/editor-common/analytics");
+
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _createPluginConfig = require("./create-plugin-config");
+
+var _tableLocalId = require("./pm-plugins/table-local-id");
+
+var _safariDelayedDomSelectionSyncingWorkaround = require("./pm-plugins/safari-delayed-dom-selection-syncing-workaround");
+
+var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
+
+var _plugin = require("./pm-plugins/decorations/plugin");
+
+var _keymap = require("./pm-plugins/keymap");
+
+var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
+
+var _main = require("./pm-plugins/main");
+
+var _pluginKey = require("./pm-plugins/plugin-key");
+
+var _stickyHeaders = require("./pm-plugins/sticky-headers");
+
+var _tableResizing = require("./pm-plugins/table-resizing");
+
+var _toolbar = require("./toolbar");
+
+var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
+
+var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
+
+var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteButton"));
+
+var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
+
+var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
+
+var _utils3 = require("./utils");
+
+var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+
+var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
+  var _document, _document$body;
+
+  return {
+    width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
+  };
+};
+
+var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
+  return {};
+};
+
+var tablesPlugin = function tablesPlugin(options) {
+  return {
+    name: 'table',
+    nodes: function nodes() {
+      return [{
+        name: 'table',
+        node: _adfSchema.table
+      }, {
+        name: 'tableHeader',
+        node: _adfSchema.tableHeader
+      }, {
+        name: 'tableRow',
+        node: _adfSchema.tableRow
+      }, {
+        name: 'tableCell',
+        node: _adfSchema.tableCell
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      var plugins = [{
+        name: 'table',
+        plugin: function plugin(_ref) {
+          var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+              dispatch = _ref.dispatch,
+              portalProviderAPI = _ref.portalProviderAPI,
+              eventDispatcher = _ref.eventDispatcher;
+
+          var _ref2 = options || {},
+              fullWidthEnabled = _ref2.fullWidthEnabled,
+              wasFullWidthEnabled = _ref2.wasFullWidthEnabled,
+              breakoutEnabled = _ref2.breakoutEnabled,
+              tableOptions = _ref2.tableOptions,
+              editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+              getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
+
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
+        }
+      }, {
+        name: 'tablePMColResizing',
+        plugin: function plugin(_ref3) {
+          var dispatch = _ref3.dispatch;
+
+          var _ref4 = options || {},
+              fullWidthEnabled = _ref4.fullWidthEnabled,
+              tableOptions = _ref4.tableOptions,
+              editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
+              getEditorContainerWidth = _ref4.getEditorContainerWidth,
+              getEditorFeatureFlags = _ref4.getEditorFeatureFlags;
+
+          var _pluginConfig = (0, _createPluginConfig.pluginConfig)(tableOptions),
+              allowColumnResizing = _pluginConfig.allowColumnResizing;
+
+          return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
+            lastColumnResizable: !fullWidthEnabled
+          }, getEditorContainerWidth || defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+        }
+      }, {
+        name: 'tableEditing',
+        plugin: function plugin() {
+          return (0, _plugin.createPlugin)();
+        }
+      }, // Needs to be lower priority than editor-tables.tableEditing
+      // plugin as it is currently swallowing backspace events inside tables
+      {
+        name: 'tableKeymap',
+        plugin: function plugin() {
+          return (0, _keymap.keymapPlugin)((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI);
+        }
+      }, {
+        name: 'tableSelectionKeymap',
+        plugin: function plugin() {
+          return (0, _tableSelectionKeymap.tableSelectionKeymapPlugin)(options === null || options === void 0 ? void 0 : options.editorSelectionAPI);
+        }
+      }, {
+        name: 'tableEditing',
+        plugin: function plugin() {
+          return (0, _pmPlugins.tableEditing)();
+        }
+      }, {
+        name: 'tableStickyHeaders',
+        plugin: function plugin(_ref5) {
+          var dispatch = _ref5.dispatch,
+              eventDispatcher = _ref5.eventDispatcher;
+          return options && options.tableOptions.stickyHeaders ? (0, _stickyHeaders.createPlugin)(dispatch, eventDispatcher, function () {
+            return [];
+          }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
+        }
+      }, {
+        name: 'tableLocalId',
+        plugin: function plugin(_ref6) {
+          var dispatch = _ref6.dispatch;
+          return (0, _tableLocalId.createPlugin)(dispatch);
+        }
+      }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
+      // causing issues with table selections in Safari
+      // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+      // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
+      // https://github.com/ProseMirror/prosemirror-view/pull/116
+
+      if (_utils.browser.safari) {
+        plugins.push({
+          name: 'tableSafariDelayedDomSelectionSyncingWorkaround',
+          plugin: function plugin() {
+            return (0, _safariDelayedDomSelectionSyncingWorkaround.createPlugin)();
+          }
+        });
+      } // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
+      // https://github.com/ProseMirror/prosemirror/issues/934
+
+
+      if (_utils.browser.safari) {
+        plugins.push({
+          name: 'tableSafariDeleteCompositionTextIssueWorkaround',
+          plugin: function plugin() {
+            return (0, _safariDeleteCompositionTextIssueWorkaround.createPlugin)();
+          }
+        });
+      }
+
+      return plugins;
+    },
+    contentComponent: function contentComponent(_ref7) {
+      var editorView = _ref7.editorView,
+          popupsMountPoint = _ref7.popupsMountPoint,
+          popupsBoundariesElement = _ref7.popupsBoundariesElement,
+          popupsScrollableElement = _ref7.popupsScrollableElement,
+          dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent;
+      return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+        component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        fallbackComponent: null
+      }, /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
+        plugins: {
+          tablePluginState: _pluginKey.pluginKey,
+          tableResizingPluginState: _tableResizing.pluginKey,
+          stickyHeadersState: _stickyHeaders.pluginKey
+        },
+        render: function render(_ref8) {
+          var resizingPluginState = _ref8.tableResizingPluginState,
+              stickyHeadersState = _ref8.stickyHeadersState,
+              tablePluginState = _ref8.tablePluginState;
+          var state = editorView.state;
+          var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          var _ref9 = tablePluginState,
+              tableNode = _ref9.tableNode,
+              tablePos = _ref9.tablePos,
+              targetCellPosition = _ref9.targetCellPosition,
+              isContextualMenuOpen = _ref9.isContextualMenuOpen,
+              layout = _ref9.layout,
+              tableRef = _ref9.tableRef,
+              pluginConfig = _ref9.pluginConfig,
+              insertColumnButtonIndex = _ref9.insertColumnButtonIndex,
+              insertRowButtonIndex = _ref9.insertRowButtonIndex,
+              isHeaderColumnEnabled = _ref9.isHeaderColumnEnabled,
+              isHeaderRowEnabled = _ref9.isHeaderRowEnabled,
+              tableWrapperTarget = _ref9.tableWrapperTarget;
+          var allowControls = pluginConfig.allowControls;
+          var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
+            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+            editorView: editorView,
+            tableNode: tableNode,
+            mountPoint: popupsMountPoint,
+            targetCellPosition: targetCellPosition,
+            scrollableElement: popupsScrollableElement,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            isContextualMenuOpen: isContextualMenuOpen,
+            layout: layout,
+            stickyHeader: stickyHeader
+          }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
+            tableNode: tableNode,
+            tableRef: tableRef,
+            insertColumnButtonIndex: insertColumnButtonIndex,
+            insertRowButtonIndex: insertRowButtonIndex,
+            isHeaderColumnEnabled: isHeaderColumnEnabled,
+            isHeaderRowEnabled: isHeaderRowEnabled,
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            hasStickyHeaders: stickyHeader && stickyHeader.sticky,
+            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            getEditorContainerWidth: (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth
+          }), /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            targetCellPosition: targetCellPosition,
+            isOpen: Boolean(isContextualMenuOpen),
+            pluginConfig: pluginConfig,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI,
+            getEditorContainerWidth: (options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth
+          }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
+            editorView: editorView,
+            selection: editorView.state.selection,
+            tableRef: tableRef,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            stickyHeaders: stickyHeader,
+            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+          }), (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled && /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            scrollableElement: popupsScrollableElement,
+            targetRef: tableWrapperTarget,
+            layout: layout,
+            isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
+            stickyHeader: stickyHeader,
+            editorAnalyticsAPI: options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI
+          }));
+        }
+      }));
+    },
+    pluginsOptions: {
+      // TODO: ED-14676 This is not the final API design
+      // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
+      createNodeHandler: function createNodeHandler(_ref10) {
+        var nodeName = _ref10.nodeName,
+            schema = _ref10.schema;
+
+        // An EditorPlugin may manage more than one node.
+        if (nodeName !== 'table') {
+          return null;
+        }
+
+        var table = (0, _utils2.createTable)({
+          schema: schema
+        });
+        return table;
+      },
+      quickInsert: function quickInsert(_ref11) {
+        var formatMessage = _ref11.formatMessage;
+        return [{
+          id: 'table',
+          title: formatMessage(_messages.toolbarInsertBlockMessages.table),
+          description: formatMessage(_messages.toolbarInsertBlockMessages.tableDescription),
+          keywords: ['cell', 'table'],
+          priority: 600,
+          keyshortcut: (0, _keymaps.tooltip)(_keymaps.toggleTable),
+          // icon: () => <IconTable />,
+          action: function action(insert, state) {
+            var _options$editorAnalyt;
+
+            var tr = insert((0, _utils2.createTable)({
+              schema: state.schema
+            }));
+            options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+              action: _analytics.ACTION.INSERTED,
+              actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+              actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+              attributes: {
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+              },
+              eventType: _analytics.EVENT_TYPE.TRACK
+            })(tr);
+            return tr;
+          }
+        }];
+      },
+      floatingToolbar: (0, _toolbar.getToolbarConfig)((options === null || options === void 0 ? void 0 : options.getEditorContainerWidth) || defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
+    }
+  };
+};
+
+var _default = tablesPlugin;
+exports.default = _default;

package/dist/cjs/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowShadowsObserver = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _types = require("../types");
+
+var _consts = require("../ui/consts");
+
+var _updateOverflowShadows = require("./update-overflow-shadows");
+
+var OverflowShadowsObserver = /*#__PURE__*/function () {
+  // updateShadowState is a method to update shadow key
+  function OverflowShadowsObserver(updateShadowState, _table, wrapper) {
+    var _this = this;
+
+    (0, _classCallCheck2.default)(this, OverflowShadowsObserver);
+    (0, _defineProperty2.default)(this, "firstCell", null);
+    (0, _defineProperty2.default)(this, "lastCell", null);
+    (0, _defineProperty2.default)(this, "getFirstCell", function (isSticky, hasHeaderRow) {
+      var _this$table;
+
+      return (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
+    });
+    (0, _defineProperty2.default)(this, "getLastCell", function (isSticky, hasHeaderRow) {
+      var _this$table2;
+
+      return (_this$table2 = _this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
+    });
+    (0, _defineProperty2.default)(this, "isSticky", false);
+    (0, _defineProperty2.default)(this, "stickyRowHeight", 0);
+    (0, _defineProperty2.default)(this, "init", function () {
+      var table = _this.table;
+
+      if (!_this.wrapper || !table) {
+        return;
+      }
+
+      if (!_this.tableIntersectionObserver) {
+        var intersectonOnbserverCallback = function intersectonOnbserverCallback(entry) {
+          var _entry$rootBounds, _entry$rootBounds2;
+
+          if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
+            return;
+          }
+
+          if (entry.target !== _this.firstCell && entry.target !== _this.lastCell) {
+            return;
+          }
+
+          _this.updateStickyShadowsHeightIfChanged();
+
+          _this.checkIntersectionEvent(entry, _this.firstCell === entry.target ? _types.ShadowEvent.SHOW_BEFORE_SHADOW : _types.ShadowEvent.SHOW_AFTER_SHADOW);
+        };
+
+        _this.tableIntersectionObserver = new IntersectionObserver(function (entries, _) {
+          entries.forEach(function (entry) {
+            return intersectonOnbserverCallback(entry);
+          });
+        }, {
+          threshold: [0, 1],
+          root: _this.wrapper,
+          rootMargin: "0px ".concat(_consts.tableInsertColumnButtonSize / 2, "px 0px 0px")
+        });
+        return;
+      }
+    });
+    (0, _defineProperty2.default)(this, "checkIntersectionEvent", function (entry, shadowKey) {
+      if ( // If it's in full view, don't show shadow.
+      entry.isIntersecting && entry.intersectionRatio === 1) {
+        _this.updateShadowState(shadowKey, false);
+      } else if ( // If it's in partial view, show a shadow
+      entry.intersectionRatio < 1) {
+        _this.updateShadowState(shadowKey, true);
+      }
+    });
+    (0, _defineProperty2.default)(this, "observeCells", function (isSticky, hasHeaderRow) {
+      var stickyChanged = !!isSticky !== _this.isSticky;
+      _this.isSticky = !!isSticky; // update sticky shadows
+
+      _this.updateStickyShadowsHeightIfChanged();
+
+      if (!stickyChanged) {
+        var firstCell = _this.getFirstCell(isSticky, hasHeaderRow);
+
+        var lastCell = _this.getLastCell(isSticky, hasHeaderRow);
+
+        if (!firstCell || !lastCell || firstCell === _this.firstCell && lastCell === _this.lastCell) {
+          return;
+        }
+      }
+
+      _this.firstCell = _this.getFirstCell(isSticky, hasHeaderRow);
+      _this.lastCell = _this.getLastCell(isSticky, hasHeaderRow);
+
+      if (_this.tableIntersectionObserver && _this.firstCell && _this.lastCell) {
+        _this.tableIntersectionObserver.disconnect();
+
+        _this.tableIntersectionObserver.observe(_this.firstCell);
+
+        _this.tableIntersectionObserver.observe(_this.lastCell);
+      }
+    });
+    (0, _defineProperty2.default)(this, "updateStickyShadows", function (stickyRowHeight) {
+      var _this$wrapper, _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
+
+      if (!_this.isSticky) {
+        return;
+      }
+
+      var stickyCell = _this.getStickyCell();
+
+      if (!stickyCell || !((_this$wrapper = _this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
+        return;
+      }
+
+      var heightStyleOrCompute = "".concat(stickyRowHeight || stickyCell.clientHeight + 1, "px"); // Use getElementsByClassName here for a live node list to capture
+      // sticky shadows
+
+      var liveRightShadows = (_this$wrapper2 = _this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW));
+      var liveLeftShadows = (_this$wrapper3 = _this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName("".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW));
+      (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveLeftShadows);
+      (0, _updateOverflowShadows.updateShadowListForStickyStyles)(heightStyleOrCompute, liveRightShadows);
+    });
+    this.updateShadowState = updateShadowState;
+    this.table = _table;
+    this.wrapper = wrapper;
+    this.init();
+  }
+
+  (0, _createClass2.default)(OverflowShadowsObserver, [{
+    key: "updateStickyShadowsHeightIfChanged",
+    value: function updateStickyShadowsHeightIfChanged() {
+      if (!this.isSticky) {
+        return;
+      }
+
+      var stickyCell = this.getStickyCell();
+
+      if (!stickyCell) {
+        return;
+      }
+
+      var newStickyRowHeight = stickyCell.clientHeight + 1;
+
+      if (newStickyRowHeight === this.stickyRowHeight) {
+        this.stickyRowHeight = newStickyRowHeight;
+        this.updateStickyShadows(this.stickyRowHeight);
+      }
+    }
+  }, {
+    key: "getStickyCell",
+    value: function getStickyCell() {
+      var _this$wrapper4;
+
+      var stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
+      var stickyCell = stickyRow && stickyRow.firstElementChild;
+      return stickyCell;
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      if (this.tableIntersectionObserver) {
+        this.tableIntersectionObserver.disconnect();
+        this.tableIntersectionObserver = undefined;
+      }
+    }
+  }]);
+  return OverflowShadowsObserver;
+}();
+
+exports.OverflowShadowsObserver = OverflowShadowsObserver;