@atlaskit/editor-plugin-table 8.1.1 → 8.2.1

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 (47) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/nodeviews/TableResizer.js +12 -4
  3. package/dist/cjs/types.js +1 -1
  4. package/dist/cjs/ui/DragHandle/index.js +6 -2
  5. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +34 -31
  6. package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js +31 -27
  7. package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +44 -40
  8. package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +6 -2
  9. package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +6 -2
  10. package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +17 -5
  11. package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -2
  12. package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +54 -50
  13. package/dist/es2019/nodeviews/TableResizer.js +14 -5
  14. package/dist/es2019/types.js +1 -1
  15. package/dist/es2019/ui/DragHandle/index.js +6 -2
  16. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +34 -31
  17. package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js +4 -1
  18. package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +46 -42
  19. package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +6 -2
  20. package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +6 -2
  21. package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +17 -5
  22. package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -2
  23. package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +57 -53
  24. package/dist/esm/nodeviews/TableResizer.js +12 -4
  25. package/dist/esm/types.js +1 -1
  26. package/dist/esm/ui/DragHandle/index.js +6 -2
  27. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +34 -31
  28. package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js +31 -27
  29. package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +44 -40
  30. package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +6 -2
  31. package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +6 -2
  32. package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +17 -5
  33. package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -2
  34. package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +54 -50
  35. package/package.json +9 -6
  36. package/src/nodeviews/TableResizer.tsx +25 -13
  37. package/src/types.ts +1 -1
  38. package/src/ui/DragHandle/index.tsx +2 -0
  39. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +1 -0
  40. package/src/ui/FloatingDeleteButton/DeleteButton.tsx +1 -0
  41. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +1 -0
  42. package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +2 -0
  43. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +2 -0
  44. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +5 -0
  45. package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +2 -0
  46. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +1 -0
  47. package/src/ui/TableFloatingControls/index.tsx +1 -0
@@ -744,37 +744,40 @@ export class ContextualMenu extends Component {
744
744
  const items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
745
745
  let isOpenAllowed = false;
746
746
  isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
747
- return jsx("div", {
748
- "data-testid": "table-cell-contextual-menu",
749
- onMouseLeave: this.closeSubmenu,
750
- ref: this.dropdownMenuRef
751
- }, jsx(DropdownMenu, {
752
- mountTo: mountPoint
753
- //This needs be removed when the a11y is completely handled
754
- //Disabling key navigation now as it works only partially
755
- ,
756
- arrowKeyNavigationProviderOptions: {
757
- type: ArrowKeyNavigationType.MENU,
758
- disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
759
- },
760
- items: items,
761
- isOpen: isOpenAllowed,
762
- onOpenChange: this.handleOpenChange,
763
- onItemActivated: this.onMenuItemActivated,
764
- onMouseEnter: this.handleItemMouseEnter,
765
- onMouseLeave: this.handleItemMouseLeave,
766
- fitHeight: 188,
767
- fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
768
- shouldFocusFirstItem: () => {
769
- return Boolean(isCellMenuOpenByKeyboard);
770
- },
771
- boundariesElement: boundariesElement,
772
- offset: offset,
773
- section: isDragAndDropEnabled ? {
774
- hasSeparator: true
775
- } : undefined,
776
- allowEnterDefaultBehavior: this.state.isSubmenuOpen
777
- }));
747
+ return (
748
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
749
+ jsx("div", {
750
+ "data-testid": "table-cell-contextual-menu",
751
+ onMouseLeave: this.closeSubmenu,
752
+ ref: this.dropdownMenuRef
753
+ }, jsx(DropdownMenu, {
754
+ mountTo: mountPoint
755
+ //This needs be removed when the a11y is completely handled
756
+ //Disabling key navigation now as it works only partially
757
+ ,
758
+ arrowKeyNavigationProviderOptions: {
759
+ type: ArrowKeyNavigationType.MENU,
760
+ disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
761
+ },
762
+ items: items,
763
+ isOpen: isOpenAllowed,
764
+ onOpenChange: this.handleOpenChange,
765
+ onItemActivated: this.onMenuItemActivated,
766
+ onMouseEnter: this.handleItemMouseEnter,
767
+ onMouseLeave: this.handleItemMouseLeave,
768
+ fitHeight: 188,
769
+ fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
770
+ shouldFocusFirstItem: () => {
771
+ return Boolean(isCellMenuOpenByKeyboard);
772
+ },
773
+ boundariesElement: boundariesElement,
774
+ offset: offset,
775
+ section: isDragAndDropEnabled ? {
776
+ hasSeparator: true
777
+ } : undefined,
778
+ allowEnterDefaultBehavior: this.state.isSubmenuOpen
779
+ }))
780
+ );
778
781
  }
779
782
  }
780
783
  _defineProperty(ContextualMenu, "defaultProps", {
@@ -10,7 +10,10 @@ const DeleteButton = ({
10
10
  intl: {
11
11
  formatMessage
12
12
  }
13
- }) => /*#__PURE__*/React.createElement("div", {
13
+ }) =>
14
+ /*#__PURE__*/
15
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
16
+ React.createElement("div", {
14
17
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
15
18
  className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
16
19
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -193,47 +193,51 @@ export const ColumnControls = ({
193
193
  return handles;
194
194
  };
195
195
  const containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
196
- return /*#__PURE__*/React.createElement("div", {
197
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
198
- className: ClassName.DRAG_COLUMN_CONTROLS,
199
- onMouseMove: handleMouseMove
200
- }, /*#__PURE__*/React.createElement("div", {
201
- ref: columnControlsRef
202
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
203
- ,
204
- className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
205
- "data-testid": "table-floating-column-controls",
206
- style: {
196
+ return (
197
+ /*#__PURE__*/
198
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
199
+ React.createElement("div", {
200
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
201
+ className: ClassName.DRAG_COLUMN_CONTROLS,
202
+ onMouseMove: handleMouseMove
203
+ }, /*#__PURE__*/React.createElement("div", {
204
+ ref: columnControlsRef
205
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
206
+ ,
207
+ className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
208
+ "data-testid": "table-floating-column-controls",
209
+ style: {
210
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
211
+ gridTemplateColumns: widths,
212
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
213
+ marginTop,
214
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
215
+ width: stickyTop ? containerWidth : undefined,
216
+ overflowX: stickyTop ? 'hidden' : 'visible',
217
+ pointerEvents: isDragging ? 'none' : undefined
218
+ }
219
+ }, columnParams.map(({
220
+ startIndex,
221
+ endIndex
222
+ }, index) => /*#__PURE__*/React.createElement("div", {
223
+ style: {
224
+ gridColumn: `${startIndex + 1} / span 1`
225
+ },
226
+ "data-start-index": startIndex,
227
+ "data-end-index": endIndex
228
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
229
+ ,
230
+ className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
231
+ contentEditable: false,
232
+ key: index
233
+ }, /*#__PURE__*/React.createElement("div", {
234
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
235
+ className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
207
236
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
208
- gridTemplateColumns: widths,
209
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
210
- marginTop,
211
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
212
- width: stickyTop ? containerWidth : undefined,
213
- overflowX: stickyTop ? 'hidden' : 'visible',
214
- pointerEvents: isDragging ? 'none' : undefined
215
- }
216
- }, columnParams.map(({
217
- startIndex,
218
- endIndex
219
- }, index) => /*#__PURE__*/React.createElement("div", {
220
- style: {
221
- gridColumn: `${startIndex + 1} / span 1`
222
- },
223
- "data-start-index": startIndex,
224
- "data-end-index": endIndex
225
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
226
- ,
227
- className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
228
- contentEditable: false,
229
- key: index
230
- }, /*#__PURE__*/React.createElement("div", {
231
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
232
- className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
233
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
234
- ,
235
- style: columnParams.length - 1 === index ? {
236
- right: '0'
237
- } : {}
238
- }))), columnHandles()));
237
+ ,
238
+ style: columnParams.length - 1 === index ? {
239
+ right: '0'
240
+ } : {}
241
+ }))), columnHandles()))
242
+ );
239
243
  };
@@ -81,8 +81,12 @@ class CornerControlComponent extends Component {
81
81
  className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
82
82
  danger: isActive && isInDanger
83
83
  }),
84
- onClick: this.selectTable,
85
- onMouseOver: this.hoverTable,
84
+ onClick: this.selectTable
85
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
86
+ ,
87
+ onMouseOver: this.hoverTable
88
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
89
+ ,
86
90
  onMouseOut: this.clearHoverSelection
87
91
  }), !isHeaderRowEnabled &&
88
92
  /*#__PURE__*/
@@ -49,7 +49,9 @@ const DragCornerControlsComponent = ({
49
49
  }),
50
50
  "aria-label": formatMessage(messages.cornerControl),
51
51
  type: "button",
52
- onClick: handleOnClick,
52
+ onClick: handleOnClick
53
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
54
+ ,
53
55
  onMouseOut: handleMouseOut,
54
56
  contentEditable: false
55
57
  }, /*#__PURE__*/React.createElement("div", {
@@ -103,7 +105,9 @@ const DragCornerControlsComponentWithSelection = ({
103
105
  }),
104
106
  "aria-label": formatMessage(messages.cornerControl),
105
107
  type: "button",
106
- onClick: handleOnClick,
108
+ onClick: handleOnClick
109
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
110
+ ,
107
111
  onMouseOut: handleMouseOut,
108
112
  contentEditable: false
109
113
  }, /*#__PURE__*/React.createElement("div", {
@@ -103,7 +103,10 @@ export default class NumberColumn extends Component {
103
103
  isDragAndDropEnabled && tableActive ? `1px solid ${tableBorderColor}` : undefined
104
104
  },
105
105
  contentEditable: false
106
- }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {
106
+ }, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ?
107
+ /*#__PURE__*/
108
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
109
+ React.createElement("div", {
107
110
  key: `wrapper-${index}`
108
111
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
109
112
  ,
@@ -111,9 +114,14 @@ export default class NumberColumn extends Component {
111
114
  "data-index": index
112
115
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
113
116
  ,
114
- style: this.getCellStyles(index, rowHeight),
117
+ style: this.getCellStyles(index, rowHeight)
118
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
119
+ ,
115
120
  onMouseOver: () => updateCellHoverLocation(index)
116
- }, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
121
+ }, hasHeaderRow ? index > 0 ? index : null : index + 1) :
122
+ /*#__PURE__*/
123
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
124
+ React.createElement("div", {
117
125
  key: `wrapper-${index}`
118
126
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
119
127
  ,
@@ -122,8 +130,12 @@ export default class NumberColumn extends Component {
122
130
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
123
131
  ,
124
132
  style: this.getCellStyles(index, rowHeight),
125
- onClick: event => this.selectRow(index, event),
126
- onMouseOver: () => this.hoverRows(index),
133
+ onClick: event => this.selectRow(index, event)
134
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
135
+ ,
136
+ onMouseOver: () => this.hoverRows(index)
137
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
138
+ ,
127
139
  onMouseOut: this.clearHoverSelection
128
140
  }, hasHeaderRow ? index > 0 ? index : null : index + 1)));
129
141
  }
@@ -78,8 +78,12 @@ class RowControlsComponent extends Component {
78
78
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
79
79
  ,
80
80
  className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
81
- onClick: event => this.props.selectRow(startIndex, event.shiftKey),
82
- onMouseOver: () => this.props.hoverRows([startIndex]),
81
+ onClick: event => this.props.selectRow(startIndex, event.shiftKey)
82
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
83
+ ,
84
+ onMouseOver: () => this.props.hoverRows([startIndex])
85
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
86
+ ,
83
87
  onMouseOut: this.clearHoverSelection,
84
88
  "data-start-index": startIndex,
85
89
  "data-end-index": endIndex
@@ -175,58 +175,62 @@ const DragControlsComponent = ({
175
175
  if (isResizing) {
176
176
  return null;
177
177
  }
178
- return /*#__PURE__*/React.createElement("div", {
179
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
180
- className: ClassName.DRAG_ROW_CONTROLS,
181
- style: {
182
- gridTemplateRows: heights,
183
- gridTemplateColumns: isDragging ?
184
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
185
- `${dropTargetExtendedWidth}px 14px ${tableWidth}px` : '0px 14px 0px',
186
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
187
- left: isDragging ?
188
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
189
- `-${dropTargetExtendedWidth + 2}px` : "var(--ds-space-negative-025, -2px)"
190
- },
191
- onMouseMove: handleMouseMove,
192
- contentEditable: false
193
- }, rowsParams.map(({
194
- startIndex,
195
- endIndex
196
- }, index) => /*#__PURE__*/React.createElement(Fragment, {
197
- key: index
198
- }, /*#__PURE__*/React.createElement("div", {
199
- style: {
200
- gridRow: `${index + 1} / span 1`,
201
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
202
- gridColumn: '2'
203
- },
204
- "data-start-index": startIndex,
205
- "data-end-index": endIndex
206
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
207
- ,
208
- className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
209
- contentEditable: false,
210
- key: `insert-dot-${index}`
211
- }, /*#__PURE__*/React.createElement("div", {
212
- className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
213
- })), isDragging && /*#__PURE__*/React.createElement(RowDropTarget, {
214
- key: `drop-target-${index}`,
215
- index: index,
216
- localId: currentNodeLocalId,
217
- style: {
218
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
219
- gridColumn: '1 / span 3',
220
- gridRow: `${index + 1} / span 1`,
221
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
222
- height: '100%',
223
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
224
- pointerEvents: 'auto',
225
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
226
- position: 'relative',
227
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
228
- left: "var(--ds-space-negative-100, -8px)"
229
- }
230
- }))), rowHandles());
178
+ return (
179
+ /*#__PURE__*/
180
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
181
+ React.createElement("div", {
182
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
183
+ className: ClassName.DRAG_ROW_CONTROLS,
184
+ style: {
185
+ gridTemplateRows: heights,
186
+ gridTemplateColumns: isDragging ?
187
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
188
+ `${dropTargetExtendedWidth}px 14px ${tableWidth}px` : '0px 14px 0px',
189
+ // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
190
+ left: isDragging ?
191
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
192
+ `-${dropTargetExtendedWidth + 2}px` : "var(--ds-space-negative-025, -2px)"
193
+ },
194
+ onMouseMove: handleMouseMove,
195
+ contentEditable: false
196
+ }, rowsParams.map(({
197
+ startIndex,
198
+ endIndex
199
+ }, index) => /*#__PURE__*/React.createElement(Fragment, {
200
+ key: index
201
+ }, /*#__PURE__*/React.createElement("div", {
202
+ style: {
203
+ gridRow: `${index + 1} / span 1`,
204
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
205
+ gridColumn: '2'
206
+ },
207
+ "data-start-index": startIndex,
208
+ "data-end-index": endIndex
209
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
210
+ ,
211
+ className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
212
+ contentEditable: false,
213
+ key: `insert-dot-${index}`
214
+ }, /*#__PURE__*/React.createElement("div", {
215
+ className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT
216
+ })), isDragging && /*#__PURE__*/React.createElement(RowDropTarget, {
217
+ key: `drop-target-${index}`,
218
+ index: index,
219
+ localId: currentNodeLocalId,
220
+ style: {
221
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
222
+ gridColumn: '1 / span 3',
223
+ gridRow: `${index + 1} / span 1`,
224
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
225
+ height: '100%',
226
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
227
+ pointerEvents: 'auto',
228
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
229
+ position: 'relative',
230
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
231
+ left: "var(--ds-space-negative-100, -8px)"
232
+ }
233
+ }))), rowHandles())
234
+ );
231
235
  };
232
236
  export const DragControls = injectIntl(DragControlsComponent);
@@ -16,6 +16,7 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
16
16
  import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
17
17
  import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
18
18
  import { findTable } from '@atlaskit/editor-tables/utils';
19
+ import { fg } from '@atlaskit/platform-feature-flags';
19
20
  import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
20
21
  import { updateWidthToWidest } from '../commands/misc';
21
22
  import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -312,9 +313,16 @@ export var TableResizer = function TableResizer(_ref) {
312
313
  }
313
314
  if (typeof pos === 'number') {
314
315
  var _attachAnalyticsEvent2;
315
- tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
316
- width: newWidth
317
- }));
316
+ if (fg('platform_editor_set_alignment_when_resized')) {
317
+ tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
318
+ width: newWidth,
319
+ layout: node.attrs.layout !== ALIGN_START && node.attrs.layout !== ALIGN_CENTER ? ALIGN_CENTER : node.attrs.layout
320
+ }));
321
+ } else {
322
+ tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
323
+ width: newWidth
324
+ }));
325
+ }
318
326
  var newNode = tr.doc.nodeAt(pos);
319
327
  tr = scaleTable(tableRef, {
320
328
  node: newNode,
@@ -353,7 +361,7 @@ export var TableResizer = function TableResizer(_ref) {
353
361
  onResizeStop();
354
362
  }
355
363
  return newWidth;
356
- }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, isTableScalingEnabled, shouldUseIncreasedScalingPercent, widthToWidest, formatMessage, pluginInjectionApi, isCommentEditor]);
364
+ }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, attachAnalyticsEvent, tableRef, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
357
365
  var handleTableSizeChangeOnKeypress = useCallback(function (step) {
358
366
  var newWidth = width + step;
359
367
  if (newWidth > maxWidth || newWidth < resizerMinWidth) {
package/dist/esm/types.js CHANGED
@@ -152,7 +152,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
152
152
  WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-last-column-insert-line__inactive"),
153
153
  WITH_RESIZE_LINE: "".concat(tablePrefixSelector, "-column-resize-line"),
154
154
  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(tablePrefixSelector, "-column-resize-line-last-column"),
155
- WITH_DRAG_RESIZE_LINE: "".concat(tablePrefixSelector, "-drag-column--resize-line"),
155
+ WITH_DRAG_RESIZE_LINE: "".concat(tablePrefixSelector, "-drag-column-resize-line"),
156
156
  WITH_DRAG_RESIZE_LINE_LAST_COLUMN: "".concat(tablePrefixSelector, "-drag-column-resize-line-last-column"),
157
157
  WITH_ROW_INSERT_LINE: "".concat(tablePrefixSelector, "-row-insert-line"),
158
158
  WITH_ROW_INSERT_LINE_INACTIVE: "".concat(tablePrefixSelector, "-row-insert-line__inactive"),
@@ -193,8 +193,12 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
193
193
  "data-testid": "table-drag-handle-button",
194
194
  "aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
195
195
  "aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
196
- "aria-haspopup": "menu",
197
- onMouseOver: onMouseOver,
196
+ "aria-haspopup": "menu"
197
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
198
+ ,
199
+ onMouseOver: onMouseOver
200
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
201
+ ,
198
202
  onMouseOut: onMouseOut,
199
203
  onMouseUp: function onMouseUp(e) {
200
204
  // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
@@ -688,37 +688,40 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
688
688
  var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
689
689
  var isOpenAllowed = false;
690
690
  isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
691
- return jsx("div", {
692
- "data-testid": "table-cell-contextual-menu",
693
- onMouseLeave: this.closeSubmenu,
694
- ref: this.dropdownMenuRef
695
- }, jsx(DropdownMenu, {
696
- mountTo: mountPoint
697
- //This needs be removed when the a11y is completely handled
698
- //Disabling key navigation now as it works only partially
699
- ,
700
- arrowKeyNavigationProviderOptions: {
701
- type: ArrowKeyNavigationType.MENU,
702
- disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
703
- },
704
- items: items,
705
- isOpen: isOpenAllowed,
706
- onOpenChange: this.handleOpenChange,
707
- onItemActivated: this.onMenuItemActivated,
708
- onMouseEnter: this.handleItemMouseEnter,
709
- onMouseLeave: this.handleItemMouseLeave,
710
- fitHeight: 188,
711
- fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
712
- shouldFocusFirstItem: function shouldFocusFirstItem() {
713
- return Boolean(isCellMenuOpenByKeyboard);
714
- },
715
- boundariesElement: boundariesElement,
716
- offset: offset,
717
- section: isDragAndDropEnabled ? {
718
- hasSeparator: true
719
- } : undefined,
720
- allowEnterDefaultBehavior: this.state.isSubmenuOpen
721
- }));
691
+ return (
692
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
693
+ jsx("div", {
694
+ "data-testid": "table-cell-contextual-menu",
695
+ onMouseLeave: this.closeSubmenu,
696
+ ref: this.dropdownMenuRef
697
+ }, jsx(DropdownMenu, {
698
+ mountTo: mountPoint
699
+ //This needs be removed when the a11y is completely handled
700
+ //Disabling key navigation now as it works only partially
701
+ ,
702
+ arrowKeyNavigationProviderOptions: {
703
+ type: ArrowKeyNavigationType.MENU,
704
+ disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
705
+ },
706
+ items: items,
707
+ isOpen: isOpenAllowed,
708
+ onOpenChange: this.handleOpenChange,
709
+ onItemActivated: this.onMenuItemActivated,
710
+ onMouseEnter: this.handleItemMouseEnter,
711
+ onMouseLeave: this.handleItemMouseLeave,
712
+ fitHeight: 188,
713
+ fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
714
+ shouldFocusFirstItem: function shouldFocusFirstItem() {
715
+ return Boolean(isCellMenuOpenByKeyboard);
716
+ },
717
+ boundariesElement: boundariesElement,
718
+ offset: offset,
719
+ section: isDragAndDropEnabled ? {
720
+ hasSeparator: true
721
+ } : undefined,
722
+ allowEnterDefaultBehavior: this.state.isSubmenuOpen
723
+ }))
724
+ );
722
725
  }
723
726
  }]);
724
727
  return ContextualMenu;
@@ -8,32 +8,36 @@ var DeleteButton = function DeleteButton(_ref) {
8
8
  onMouseLeave = _ref.onMouseLeave,
9
9
  removeLabel = _ref.removeLabel,
10
10
  formatMessage = _ref.intl.formatMessage;
11
- return /*#__PURE__*/React.createElement("div", {
12
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
13
- className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
14
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
15
- ,
16
- style: style,
17
- onMouseEnter: onMouseEnter,
18
- onMouseLeave: onMouseLeave
19
- }, /*#__PURE__*/React.createElement("button", {
20
- type: "button",
21
- "aria-label": formatMessage(removeLabel, {
22
- 0: 1
23
- })
24
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
25
- ,
26
- className: ClassName.CONTROLS_DELETE_BUTTON,
27
- onMouseDown: onClick,
28
- onMouseMove: function onMouseMove(e) {
29
- return e.preventDefault();
30
- }
31
- }, /*#__PURE__*/React.createElement("svg", {
32
- className: ClassName.CONTROLS_BUTTON_ICON
33
- }, /*#__PURE__*/React.createElement("path", {
34
- d: "M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414",
35
- fill: "currentColor",
36
- fillRule: "evenodd"
37
- }))));
11
+ return (
12
+ /*#__PURE__*/
13
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions
14
+ React.createElement("div", {
15
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
16
+ className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
18
+ ,
19
+ style: style,
20
+ onMouseEnter: onMouseEnter,
21
+ onMouseLeave: onMouseLeave
22
+ }, /*#__PURE__*/React.createElement("button", {
23
+ type: "button",
24
+ "aria-label": formatMessage(removeLabel, {
25
+ 0: 1
26
+ })
27
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
28
+ ,
29
+ className: ClassName.CONTROLS_DELETE_BUTTON,
30
+ onMouseDown: onClick,
31
+ onMouseMove: function onMouseMove(e) {
32
+ return e.preventDefault();
33
+ }
34
+ }, /*#__PURE__*/React.createElement("svg", {
35
+ className: ClassName.CONTROLS_BUTTON_ICON
36
+ }, /*#__PURE__*/React.createElement("path", {
37
+ d: "M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414",
38
+ fill: "currentColor",
39
+ fillRule: "evenodd"
40
+ }))))
41
+ );
38
42
  };
39
43
  export default injectIntl(DeleteButton);