@atlaskit/editor-plugin-table 24.1.0 → 24.2.0

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 +12 -0
  2. package/dist/cjs/ui/FloatingInsertButton/index.js +11 -4
  3. package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +16 -2
  4. package/dist/es2019/ui/FloatingInsertButton/index.js +11 -4
  5. package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +16 -2
  6. package/dist/esm/ui/FloatingInsertButton/index.js +11 -4
  7. package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +16 -2
  8. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 24.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`298f9a506cb5f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/298f9a506cb5f) -
8
+ [EDITOR-6790] Allow inserting a column to the left of the first column, behind the
9
+ platform_editor_table_col_insert experiment
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 24.1.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/ui/FloatingInsertButton/index.js CHANGED
@@ -58,8 +58,13 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
58
58
  dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
59
59
  isChromelessEditor = _this$props.isChromelessEditor;
60
60
 
61
- // ED-26961 - disable insert button for first column and row
62
- if (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0) {
61
+ // EDITOR-6790 - when platform_editor_table_col_insert is enabled, allow the first column
62
+ // (index 0) insert button so a column can be inserted to the left of the first column.
63
+ var isFirstColumnInsertEnabled = (0, _expValEquals.expValEquals)('platform_editor_table_col_insert', 'isEnabled', true);
64
+
65
+ // ED-26961 - disable insert button for first row, and keep first-column behavior
66
+ // disabled until platform_editor_table_col_insert is enabled.
67
+ if (insertColumnButtonIndex === 0 && !isFirstColumnInsertEnabled || insertRowButtonIndex === 0) {
63
68
  return null;
64
69
  }
65
70
  var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
@@ -68,8 +73,10 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
68
73
  }
69
74
 
70
75
  // We can’t display the insert button for row|colum index 0
71
- // when the header row|colum is enabled, this feature will be change on the future
72
- if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
76
+ // when the header row|colum is enabled, this feature will be change on the future.
77
+ // EDITOR-6790 - when platform_editor_table_col_insert is enabled, still allow the first
78
+ // column (index 0) insert button even when the header column is enabled.
79
+ if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 && !isFirstColumnInsertEnabled || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
73
80
  return null;
74
81
  }
75
82
  var tr = editorView.state.tr;
package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js CHANGED
@@ -182,6 +182,10 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
182
182
  var _getScrollOffset;
183
183
  columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
184
184
  }
185
+
186
+ // EDITOR-6790 - render a dot on the left edge of the first column so users have a visible
187
+ // affordance to insert a column to the left of the first column.
188
+ var isFirstColumnInsertEnabled = (0, _expValEquals.expValEquals)('platform_editor_table_col_insert', 'isEnabled', true);
185
189
  var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
186
190
  var _rowHeights$reduce, _colWidths$reduce;
187
191
  var isHover = type === 'hover';
@@ -214,7 +218,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
214
218
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
215
219
  width: '100%',
216
220
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
217
- position: 'relative'
221
+ position: 'relative',
222
+ pointerEvents: isPlaceholder && isFirstColumnInsertEnabled ? 'none' : undefined
218
223
  },
219
224
  "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
220
225
  }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
@@ -296,7 +301,16 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
296
301
  // eslint-disable-next-line react/no-array-index-key
297
302
  ,
298
303
  key: index
299
- }, /*#__PURE__*/_react.default.createElement("div", {
304
+ }, isFirstColumnInsertEnabled && index === 0 && /*#__PURE__*/_react.default.createElement("div", {
305
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
306
+ className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
307
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
308
+ ,
309
+ style: {
310
+ left: '0',
311
+ right: 'auto'
312
+ }
313
+ }), /*#__PURE__*/_react.default.createElement("div", {
300
314
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
301
315
  className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
302
316
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/es2019/ui/FloatingInsertButton/index.js CHANGED
@@ -39,8 +39,13 @@ export class FloatingInsertButton extends React.Component {
39
39
  isChromelessEditor
40
40
  } = this.props;
41
41
 
42
- // ED-26961 - disable insert button for first column and row
43
- if (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0) {
42
+ // EDITOR-6790 - when platform_editor_table_col_insert is enabled, allow the first column
43
+ // (index 0) insert button so a column can be inserted to the left of the first column.
44
+ const isFirstColumnInsertEnabled = expValEquals('platform_editor_table_col_insert', 'isEnabled', true);
45
+
46
+ // ED-26961 - disable insert button for first row, and keep first-column behavior
47
+ // disabled until platform_editor_table_col_insert is enabled.
48
+ if (insertColumnButtonIndex === 0 && !isFirstColumnInsertEnabled || insertRowButtonIndex === 0) {
44
49
  return null;
45
50
  }
46
51
  const type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
@@ -49,8 +54,10 @@ export class FloatingInsertButton extends React.Component {
49
54
  }
50
55
 
51
56
  // We can’t display the insert button for row|colum index 0
52
- // when the header row|colum is enabled, this feature will be change on the future
53
- if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
57
+ // when the header row|colum is enabled, this feature will be change on the future.
58
+ // EDITOR-6790 - when platform_editor_table_col_insert is enabled, still allow the first
59
+ // column (index 0) insert button even when the header column is enabled.
60
+ if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 && !isFirstColumnInsertEnabled || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
54
61
  return null;
55
62
  }
56
63
  const {
package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js CHANGED
@@ -185,6 +185,10 @@ export const ColumnControls = ({
185
185
  var _getScrollOffset;
186
186
  columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
187
187
  }
188
+
189
+ // EDITOR-6790 - render a dot on the left edge of the first column so users have a visible
190
+ // affordance to insert a column to the left of the first column.
191
+ const isFirstColumnInsertEnabled = expValEquals('platform_editor_table_col_insert', 'isEnabled', true);
188
192
  const generateHandleByType = (type, appearance, gridColumn, indexes) => {
189
193
  var _rowHeights$reduce, _colWidths$reduce;
190
194
  const isHover = type === 'hover';
@@ -213,7 +217,8 @@ export const ColumnControls = ({
213
217
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
214
218
  width: '100%',
215
219
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
216
- position: 'relative'
220
+ position: 'relative',
221
+ pointerEvents: isPlaceholder && isFirstColumnInsertEnabled ? 'none' : undefined
217
222
  },
218
223
  "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
219
224
  }, /*#__PURE__*/React.createElement(DragHandle, {
@@ -295,7 +300,16 @@ export const ColumnControls = ({
295
300
  // eslint-disable-next-line react/no-array-index-key
296
301
  ,
297
302
  key: index
298
- }, /*#__PURE__*/React.createElement("div", {
303
+ }, isFirstColumnInsertEnabled && index === 0 && /*#__PURE__*/React.createElement("div", {
304
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
305
+ className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
306
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
307
+ ,
308
+ style: {
309
+ left: '0',
310
+ right: 'auto'
311
+ }
312
+ }), /*#__PURE__*/React.createElement("div", {
299
313
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
300
314
  className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
301
315
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/dist/esm/ui/FloatingInsertButton/index.js CHANGED
@@ -51,8 +51,13 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
51
51
  dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
52
52
  isChromelessEditor = _this$props.isChromelessEditor;
53
53
 
54
- // ED-26961 - disable insert button for first column and row
55
- if (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0) {
54
+ // EDITOR-6790 - when platform_editor_table_col_insert is enabled, allow the first column
55
+ // (index 0) insert button so a column can be inserted to the left of the first column.
56
+ var isFirstColumnInsertEnabled = expValEquals('platform_editor_table_col_insert', 'isEnabled', true);
57
+
58
+ // ED-26961 - disable insert button for first row, and keep first-column behavior
59
+ // disabled until platform_editor_table_col_insert is enabled.
60
+ if (insertColumnButtonIndex === 0 && !isFirstColumnInsertEnabled || insertRowButtonIndex === 0) {
56
61
  return null;
57
62
  }
58
63
  var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
@@ -61,8 +66,10 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
61
66
  }
62
67
 
63
68
  // We can’t display the insert button for row|colum index 0
64
- // when the header row|colum is enabled, this feature will be change on the future
65
- if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
69
+ // when the header row|colum is enabled, this feature will be change on the future.
70
+ // EDITOR-6790 - when platform_editor_table_col_insert is enabled, still allow the first
71
+ // column (index 0) insert button even when the header column is enabled.
72
+ if (type === 'column' && isHeaderColumnEnabled && insertColumnButtonIndex === 0 && !isFirstColumnInsertEnabled || type === 'row' && isHeaderRowEnabled && insertRowButtonIndex === 0) {
66
73
  return null;
67
74
  }
68
75
  var tr = editorView.state.tr;
package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js CHANGED
@@ -174,6 +174,10 @@ export var ColumnControls = function ColumnControls(_ref) {
174
174
  var _getScrollOffset;
175
175
  columnControlsRef.current.scrollLeft = (_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0;
176
176
  }
177
+
178
+ // EDITOR-6790 - render a dot on the left edge of the first column so users have a visible
179
+ // affordance to insert a column to the left of the first column.
180
+ var isFirstColumnInsertEnabled = expValEquals('platform_editor_table_col_insert', 'isEnabled', true);
177
181
  var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
178
182
  var _rowHeights$reduce, _colWidths$reduce;
179
183
  var isHover = type === 'hover';
@@ -206,7 +210,8 @@ export var ColumnControls = function ColumnControls(_ref) {
206
210
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
207
211
  width: '100%',
208
212
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
209
- position: 'relative'
213
+ position: 'relative',
214
+ pointerEvents: isPlaceholder && isFirstColumnInsertEnabled ? 'none' : undefined
210
215
  },
211
216
  "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
212
217
  }, /*#__PURE__*/React.createElement(DragHandle, {
@@ -288,7 +293,16 @@ export var ColumnControls = function ColumnControls(_ref) {
288
293
  // eslint-disable-next-line react/no-array-index-key
289
294
  ,
290
295
  key: index
291
- }, /*#__PURE__*/React.createElement("div", {
296
+ }, isFirstColumnInsertEnabled && index === 0 && /*#__PURE__*/React.createElement("div", {
297
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
298
+ className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
299
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
300
+ ,
301
+ style: {
302
+ left: '0',
303
+ right: 'auto'
304
+ }
305
+ }), /*#__PURE__*/React.createElement("div", {
292
306
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
293
307
  className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
294
308
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "24.1.0",
3
+ "version": "24.2.0",
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": "^20.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^108.3.0",
55
+ "@atlaskit/tmp-editor-statsig": "^108.4.0",
56
56
  "@atlaskit/toggle": "^17.0.0",
57
57
  "@atlaskit/tokens": "^14.0.0",
58
58
  "@atlaskit/tooltip": "^23.0.0",