@atlaskit/editor-plugin-table 24.5.1 → 24.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +15 -6
  3. package/dist/cjs/nodeviews/toDOM.js +14 -3
  4. package/dist/es2019/nodeviews/TableComponent.js +15 -4
  5. package/dist/es2019/nodeviews/toDOM.js +15 -2
  6. package/dist/esm/nodeviews/TableComponent.js +13 -4
  7. package/dist/esm/nodeviews/toDOM.js +14 -3
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 24.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`109c3998554f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/109c3998554f2) -
8
+ Add SSR-safe, experiment-gated CSS overflow shadows for editor tables and keep renderer shadows
9
+ within table bounds when sticky scrollbars are present.
10
+ - Updated dependencies
11
+
3
12
  ## 24.5.1
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/nodeviews/TableComponent.js CHANGED
@@ -13,7 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
13
13
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
14
14
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
15
15
  var _react = _interopRequireDefault(require("react"));
16
- var _classnames2 = _interopRequireDefault(require("classnames"));
16
+ var _classnames3 = _interopRequireDefault(require("classnames"));
17
17
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
18
18
  var _reactIntl = require("react-intl");
19
19
  var _browser = require("@atlaskit/editor-common/browser");
@@ -928,7 +928,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
928
928
  return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
929
929
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
930
930
  , {
931
- className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
931
+ className: (0, _classnames3.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
932
932
  editorView: view,
933
933
  getPos: getPos,
934
934
  node: node
@@ -973,10 +973,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
973
973
  return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
974
974
  }
975
975
  }), /*#__PURE__*/_react.default.createElement(_reactNodeView.NodeViewContentHole
976
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
977
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
976
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
978
977
  , {
979
- className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
978
+ className: (0, _classnames3.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _defineProperty2.default)({}, _types.TableCssClassName.TABLE_SCROLL_INLINE_SHADOW, (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true))),
980
979
  ref: this.setWrapperRef
981
980
  }, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
982
981
  contentEditable: false,
@@ -992,7 +991,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
992
991
  ,
993
992
  className: _types.TableCssClassName.TABLE_CORNER_MASK,
994
993
  "data-corner": "right"
995
- })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
994
+ })), allowControls && colControls), (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
995
+ contentEditable: false,
996
+ "aria-hidden": "true",
997
+ "data-vc-nvs": "true",
998
+ "data-table-overflow-shadow": "start"
999
+ }), /*#__PURE__*/_react.default.createElement("div", {
1000
+ contentEditable: false,
1001
+ "aria-hidden": "true",
1002
+ "data-vc-nvs": "true",
1003
+ "data-table-overflow-shadow": "end"
1004
+ })), !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
996
1005
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
997
1006
  className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
998
1007
  "data-vc-nvs": "true",
package/dist/cjs/nodeviews/toDOM.js CHANGED
@@ -67,6 +67,17 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
67
67
  if (config.allowColumnResizing) {
68
68
  colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
69
69
  }
70
+ var overflowShadows = (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) ? [['div', {
71
+ contenteditable: 'false',
72
+ 'aria-hidden': 'true',
73
+ 'data-vc-nvs': 'true',
74
+ 'data-table-overflow-shadow': 'start'
75
+ }], ['div', {
76
+ contenteditable: 'false',
77
+ 'aria-hidden': 'true',
78
+ 'data-vc-nvs': 'true',
79
+ 'data-table-overflow-shadow': 'end'
80
+ }]] : [];
70
81
  var roundedTableCornerMasks = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
71
82
  contenteditable: 'false',
72
83
  'aria-hidden': 'true',
@@ -89,11 +100,11 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
89
100
  }], ['div', {
90
101
  class: 'pm-table-row-controls-wrapper'
91
102
  }, ['div']], ['div', {
92
- class: 'pm-table-wrapper'
93
- }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]]), ['div', {
103
+ class: (0, _classnames.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _defineProperty2.default)({}, _types.TableCssClassName.TABLE_SCROLL_INLINE_SHADOW, (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true)))
104
+ }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
94
105
  class: 'pm-table-sticky-sentinel-bottom',
95
106
  'data-testid': 'sticky-sentinel-bottom'
96
- }]].concat((0, _toConsumableArray2.default)((0, _coreUtils.isSSRStreaming)() ? [['div', {
107
+ }]], (0, _toConsumableArray2.default)((0, _coreUtils.isSSRStreaming)() ? [['div', {
97
108
  contenteditable: 'false',
98
109
  class: 'pm-table-left-border',
99
110
  'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
package/dist/es2019/nodeviews/TableComponent.js CHANGED
@@ -936,10 +936,11 @@ class TableComponent extends React.Component {
936
936
  return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
937
937
  }
938
938
  }), /*#__PURE__*/React.createElement(NodeViewContentHole
939
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
940
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
939
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
941
940
  , {
942
- className: classnames(ClassName.TABLE_NODE_WRAPPER),
941
+ className: classnames(ClassName.TABLE_NODE_WRAPPER, {
942
+ [ClassName.TABLE_SCROLL_INLINE_SHADOW]: expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true)
943
+ }),
943
944
  ref: this.setWrapperRef
944
945
  }, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
945
946
  contentEditable: false,
@@ -955,7 +956,17 @@ class TableComponent extends React.Component {
955
956
  ,
956
957
  className: ClassName.TABLE_CORNER_MASK,
957
958
  "data-corner": "right"
958
- })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
959
+ })), allowControls && colControls), expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
960
+ contentEditable: false,
961
+ "aria-hidden": "true",
962
+ "data-vc-nvs": "true",
963
+ "data-table-overflow-shadow": "start"
964
+ }), /*#__PURE__*/React.createElement("div", {
965
+ contentEditable: false,
966
+ "aria-hidden": "true",
967
+ "data-vc-nvs": "true",
968
+ "data-table-overflow-shadow": "end"
969
+ })), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
959
970
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
960
971
  className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
961
972
  "data-vc-nvs": "true",
package/dist/es2019/nodeviews/toDOM.js CHANGED
@@ -51,6 +51,17 @@ export const tableNodeSpecWithFixedToDOM = config => {
51
51
  if (config.allowColumnResizing) {
52
52
  colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
53
53
  }
54
+ const overflowShadows = expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) ? [['div', {
55
+ contenteditable: 'false',
56
+ 'aria-hidden': 'true',
57
+ 'data-vc-nvs': 'true',
58
+ 'data-table-overflow-shadow': 'start'
59
+ }], ['div', {
60
+ contenteditable: 'false',
61
+ 'aria-hidden': 'true',
62
+ 'data-vc-nvs': 'true',
63
+ 'data-table-overflow-shadow': 'end'
64
+ }]] : [];
54
65
  const roundedTableCornerMasks = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
55
66
  contenteditable: 'false',
56
67
  'aria-hidden': 'true',
@@ -73,8 +84,10 @@ export const tableNodeSpecWithFixedToDOM = config => {
73
84
  }], ['div', {
74
85
  class: 'pm-table-row-controls-wrapper'
75
86
  }, ['div']], ['div', {
76
- class: 'pm-table-wrapper'
77
- }, ...roundedTableCornerMasks, ['table', attrs, colgroup, ['tbody', 0]]], ['div', {
87
+ class: classNames(ClassName.TABLE_NODE_WRAPPER, {
88
+ [ClassName.TABLE_SCROLL_INLINE_SHADOW]: expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true)
89
+ })
90
+ }, ...roundedTableCornerMasks, ['table', attrs, colgroup, ['tbody', 0]]], ...overflowShadows, ['div', {
78
91
  class: 'pm-table-sticky-sentinel-bottom',
79
92
  'data-testid': 'sticky-sentinel-bottom'
80
93
  }], ...(isSSRStreaming() ? [['div', {
package/dist/esm/nodeviews/TableComponent.js CHANGED
@@ -967,10 +967,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
967
967
  return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
968
968
  }
969
969
  }), /*#__PURE__*/React.createElement(NodeViewContentHole
970
- // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
971
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
970
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
972
971
  , {
973
- className: classnames(ClassName.TABLE_NODE_WRAPPER),
972
+ className: classnames(ClassName.TABLE_NODE_WRAPPER, _defineProperty({}, ClassName.TABLE_SCROLL_INLINE_SHADOW, expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true))),
974
973
  ref: this.setWrapperRef
975
974
  }, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
976
975
  contentEditable: false,
@@ -986,7 +985,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
986
985
  ,
987
986
  className: ClassName.TABLE_CORNER_MASK,
988
987
  "data-corner": "right"
989
- })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
988
+ })), allowControls && colControls), expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
989
+ contentEditable: false,
990
+ "aria-hidden": "true",
991
+ "data-vc-nvs": "true",
992
+ "data-table-overflow-shadow": "start"
993
+ }), /*#__PURE__*/React.createElement("div", {
994
+ contentEditable: false,
995
+ "aria-hidden": "true",
996
+ "data-vc-nvs": "true",
997
+ "data-table-overflow-shadow": "end"
998
+ })), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
990
999
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
991
1000
  className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
992
1001
  "data-vc-nvs": "true",
package/dist/esm/nodeviews/toDOM.js CHANGED
@@ -60,6 +60,17 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
60
60
  if (config.allowColumnResizing) {
61
61
  colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
62
62
  }
63
+ var overflowShadows = expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) ? [['div', {
64
+ contenteditable: 'false',
65
+ 'aria-hidden': 'true',
66
+ 'data-vc-nvs': 'true',
67
+ 'data-table-overflow-shadow': 'start'
68
+ }], ['div', {
69
+ contenteditable: 'false',
70
+ 'aria-hidden': 'true',
71
+ 'data-vc-nvs': 'true',
72
+ 'data-table-overflow-shadow': 'end'
73
+ }]] : [];
63
74
  var roundedTableCornerMasks = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
64
75
  contenteditable: 'false',
65
76
  'aria-hidden': 'true',
@@ -82,11 +93,11 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
82
93
  }], ['div', {
83
94
  class: 'pm-table-row-controls-wrapper'
84
95
  }, ['div']], ['div', {
85
- class: 'pm-table-wrapper'
86
- }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]]), ['div', {
96
+ class: classNames(ClassName.TABLE_NODE_WRAPPER, _defineProperty({}, ClassName.TABLE_SCROLL_INLINE_SHADOW, expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true)))
97
+ }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
87
98
  class: 'pm-table-sticky-sentinel-bottom',
88
99
  'data-testid': 'sticky-sentinel-bottom'
89
- }]].concat(_toConsumableArray(isSSRStreaming() ? [['div', {
100
+ }]], _toConsumableArray(isSSRStreaming() ? [['div', {
90
101
  contenteditable: 'false',
91
102
  class: 'pm-table-left-border',
92
103
  'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "24.5.1",
3
+ "version": "24.5.2",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
53
53
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
54
54
  "@atlaskit/primitives": "^22.2.0",
55
- "@atlaskit/tmp-editor-statsig": "^135.8.0",
55
+ "@atlaskit/tmp-editor-statsig": "^135.9.0",
56
56
  "@atlaskit/toggle": "^17.1.0",
57
57
  "@atlaskit/tokens": "^16.3.0",
58
58
  "@atlaskit/tooltip": "^24.0.0",