@atlaskit/editor-plugin-table 15.4.23 → 15.4.24

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 15.4.24
+
+### Patch Changes
+
+- [`e51da6f828fe9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e51da6f828fe9) -
+  Exclude Safari due to contenteditable in sticky positioned table header bug
+- Updated dependencies
+
 ## 15.4.23
 
 ### Patch Changes

package/dist/cjs/nodeviews/table-node-views.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableView = exports.tableRowView = exports.tableHeaderView = exports.tableCellView = void 0;
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _anchor = require("../pm-plugins/utils/anchor");
+var _stickyHeader = require("../pm-plugins/utils/sticky-header");
 var _table = require("./table");
 var _TableCell = _interopRequireDefault(require("./TableCell"));
 var _TableRow = _interopRequireDefault(require("./TableRow"));
@@ -32,7 +32,8 @@ var tableHeaderView = exports.tableHeaderView = function tableHeaderView(options
 };
 var tableRowView = exports.tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    if ((0, _anchor.isAnchorSupported)() && options.isDragAndDropEnabled && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    var _options$isDragAndDro;
+    if ((0, _stickyHeader.isNativeStickySupported)((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new _TableRowNativeStickyWithFallback.default(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new _TableRow.default(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/cjs/pm-plugins/utils/sticky-header.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNativeStickySupported = exports.isAnchorSupported = void 0;
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _browser = require("@atlaskit/editor-common/browser");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(function () {
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --anchor');
+  }
+  return false;
+});
+var isNativeStickySupported = exports.isNativeStickySupported = function isNativeStickySupported(isDragAndDropEnabled) {
+  var safariVersion = (0, _browser.getBrowserInfo)().safari_version;
+  var isBrowserSafari = !Number.isNaN(safariVersion);
+  return (
+    // Safari has a bug with position: sticky and content editable, so we don't support it
+    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true)
+  );
+};

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

@@ -20,7 +20,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down"));
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../pm-plugins/commands");
-var _anchor = require("../../pm-plugins/utils/anchor");
+var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
 var _types = require("../../types");
 var _FixedButton = _interopRequireDefault(require("./FixedButton"));
 var _styles = require("./styles");
@@ -104,7 +104,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(_types.TableCssClassName.NATIVE_STICKY);
-  if ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _anchor.isAnchorSupported)() && targetCellRef.nodeName === 'TH' && parentStickyNative && isDragAndDropEnabled) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && (0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     var anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     var rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';

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

@@ -10,10 +10,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var _anchor = require("../../pm-plugins/utils/anchor");
 var _columnControls = require("../../pm-plugins/utils/column-controls");
 var _nodes = require("../../pm-plugins/utils/nodes");
 var _rowControls = require("../../pm-plugins/utils/row-controls");
+var _stickyHeader = require("../../pm-plugins/utils/sticky-header");
 var _types = require("../../types");
 var _ColumnControls = require("./ColumnControls");
 var _ColumnDropTargets = require("./ColumnDropTargets");
@@ -84,7 +84,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   var anchorStyles = {};
-  if ((0, _anchor.isAnchorSupported)() && isDragAndDropEnabled && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if ((0, _stickyHeader.isNativeStickySupported)(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

package/dist/es2019/nodeviews/table-node-views.js

@@ -1,5 +1,5 @@
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../pm-plugins/utils/sticky-header';
 // TODO: ED-23976 - Clean up
 import { createTableView } from './table';
 import TableCell from './TableCell';
@@ -24,7 +24,8 @@ export const tableHeaderView = options => {
 };
 export const tableRowView = options => {
   return (node, view, getPos) => {
-    if (isAnchorSupported() && options.isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    var _options$isDragAndDro;
+    if (isNativeStickySupported((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/es2019/pm-plugins/utils/sticky-header.js

@@ -0,0 +1,17 @@
+import memorizeOne from 'memoize-one';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export const isAnchorSupported = memorizeOne(() => {
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --anchor');
+  }
+  return false;
+});
+export const isNativeStickySupported = isDragAndDropEnabled => {
+  const safariVersion = getBrowserInfo().safari_version;
+  const isBrowserSafari = !Number.isNaN(safariVersion);
+  return (
+    // Safari has a bug with position: sticky and content editable, so we don't support it
+    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)
+  );
+};

package/dist/es2019/ui/FloatingContextualButton/index.js

@@ -18,7 +18,7 @@ import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleContextualMenu } from '../../pm-plugins/commands';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
 // Ignored via go/ees005
@@ -102,7 +102,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
   }));
   const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   const parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY);
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative && isDragAndDropEnabled) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     const anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     const rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -74,7 +74,7 @@ const TableFloatingColumnControls = ({
     containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
   }
   let anchorStyles = {};
-  if (isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

package/dist/esm/nodeviews/table-node-views.js

@@ -1,5 +1,5 @@
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../pm-plugins/utils/sticky-header';
 // TODO: ED-23976 - Clean up
 import { createTableView } from './table';
 import TableCell from './TableCell';
@@ -24,7 +24,8 @@ export var tableHeaderView = function tableHeaderView(options) {
 };
 export var tableRowView = function tableRowView(options) {
   return function (node, view, getPos) {
-    if (isAnchorSupported() && options.isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+    var _options$isDragAndDro;
+    if (isNativeStickySupported((_options$isDragAndDro = options.isDragAndDropEnabled) !== null && _options$isDragAndDro !== void 0 ? _options$isDragAndDro : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
       return new TableRowNativeStickyWithFallback(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
     } else {
       return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);

package/dist/esm/pm-plugins/utils/sticky-header.js

@@ -0,0 +1,17 @@
+import memorizeOne from 'memoize-one';
+import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export var isAnchorSupported = memorizeOne(function () {
+  if (window.CSS && window.CSS.supports) {
+    return window.CSS.supports('anchor-name: --anchor');
+  }
+  return false;
+});
+export var isNativeStickySupported = function isNativeStickySupported(isDragAndDropEnabled) {
+  var safariVersion = getBrowserInfo().safari_version;
+  var isBrowserSafari = !Number.isNaN(safariVersion);
+  return (
+    // Safari has a bug with position: sticky and content editable, so we don't support it
+    !isBrowserSafari && isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true)
+  );
+};

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

@@ -18,7 +18,7 @@ import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/core/migration/chevron-down';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { toggleContextualMenu } from '../../pm-plugins/commands';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 
 // Ignored via go/ees005
@@ -94,7 +94,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   }));
   var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
   var parentStickyNative = targetCellRef.parentElement && targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY);
-  if (expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && isAnchorSupported() && targetCellRef.nodeName === 'TH' && parentStickyNative && isDragAndDropEnabled) {
+  if (parentStickyNative && targetCellRef.nodeName === 'TH' && isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _targetCellRef$datase, _targetCellRef$parent, _targetCellRef$parent2;
     var anchorName = (_targetCellRef$datase = targetCellRef.dataset.nodeAnchor) !== null && _targetCellRef$datase !== void 0 ? _targetCellRef$datase : '';
     var rowAnchorName = (_targetCellRef$parent = (_targetCellRef$parent2 = targetCellRef.parentElement) === null || _targetCellRef$parent2 === void 0 ? void 0 : _targetCellRef$parent2.dataset.nodeAnchor) !== null && _targetCellRef$parent !== void 0 ? _targetCellRef$parent : '';

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

@@ -2,10 +2,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { isAnchorSupported } from '../../pm-plugins/utils/anchor';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
 import { getRowHeights } from '../../pm-plugins/utils/row-controls';
+import { isNativeStickySupported } from '../../pm-plugins/utils/sticky-header';
 import { TableCssClassName as ClassName } from '../../types';
 import { ColumnControls } from './ColumnControls';
 import { ColumnDropTargets } from './ColumnDropTargets';
@@ -75,7 +75,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');
   }
   var anchorStyles = {};
-  if (isAnchorSupported() && isDragAndDropEnabled && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
+  if (isNativeStickySupported(isDragAndDropEnabled !== null && isDragAndDropEnabled !== void 0 ? isDragAndDropEnabled : false) && expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow')) {
     var _tableRef$querySelect;
     // cast here is due to CSSProperties missing valid positionAnchor property
     anchorStyles = {

package/dist/types/pm-plugins/utils/sticky-header.d.ts

@@ -0,0 +1,2 @@
+export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
+export declare const isNativeStickySupported: (isDragAndDropEnabled: boolean) => boolean;

package/dist/types-ts4.5/pm-plugins/utils/sticky-header.d.ts

@@ -0,0 +1,2 @@
+export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;
+export declare const isNativeStickySupported: (isDragAndDropEnabled: boolean) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.4.23",
+	"version": "15.4.24",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"

package/dist/cjs/pm-plugins/utils/anchor.js

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isAnchorSupported = void 0;
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var isAnchorSupported = exports.isAnchorSupported = (0, _memoizeOne.default)(function () {
-  if (window.CSS && window.CSS.supports) {
-    return window.CSS.supports('anchor-name: --anchor');
-  }
-  return false;
-});

package/dist/es2019/pm-plugins/utils/anchor.js

@@ -1,7 +0,0 @@
-import memorizeOne from 'memoize-one';
-export const isAnchorSupported = memorizeOne(() => {
-  if (window.CSS && window.CSS.supports) {
-    return window.CSS.supports('anchor-name: --anchor');
-  }
-  return false;
-});

package/dist/esm/pm-plugins/utils/anchor.js

@@ -1,7 +0,0 @@
-import memorizeOne from 'memoize-one';
-export var isAnchorSupported = memorizeOne(function () {
-  if (window.CSS && window.CSS.supports) {
-    return window.CSS.supports('anchor-name: --anchor');
-  }
-  return false;
-});

package/dist/types/pm-plugins/utils/anchor.d.ts

@@ -1 +0,0 @@
-export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;

package/dist/types-ts4.5/pm-plugins/utils/anchor.d.ts

@@ -1 +0,0 @@
-export declare const isAnchorSupported: import("memoize-one").MemoizedFn<() => boolean>;