@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.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/nodeviews/TableResizer.js +12 -4
- package/dist/cjs/types.js +1 -1
- package/dist/cjs/ui/DragHandle/index.js +6 -2
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +34 -31
- package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js +31 -27
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +44 -40
- package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +6 -2
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +6 -2
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +17 -5
- package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -2
- package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +54 -50
- package/dist/es2019/nodeviews/TableResizer.js +14 -5
- package/dist/es2019/types.js +1 -1
- package/dist/es2019/ui/DragHandle/index.js +6 -2
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +34 -31
- package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js +4 -1
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +46 -42
- package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +6 -2
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +6 -2
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +17 -5
- package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -2
- package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +57 -53
- package/dist/esm/nodeviews/TableResizer.js +12 -4
- package/dist/esm/types.js +1 -1
- package/dist/esm/ui/DragHandle/index.js +6 -2
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +34 -31
- package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js +31 -27
- package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +44 -40
- package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +6 -2
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +6 -2
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +17 -5
- package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +6 -2
- package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +54 -50
- package/package.json +9 -6
- package/src/nodeviews/TableResizer.tsx +25 -13
- package/src/types.ts +1 -1
- package/src/ui/DragHandle/index.tsx +2 -0
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +1 -0
- package/src/ui/FloatingDeleteButton/DeleteButton.tsx +1 -0
- package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +1 -0
- package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +2 -0
- package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +2 -0
- package/src/ui/TableFloatingControls/NumberColumn/index.tsx +5 -0
- package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +2 -0
- package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +1 -0
- 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
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
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
|
-
}) =>
|
|
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
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
,
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
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
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
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
|
-
|
|
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 ?
|
|
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) :
|
|
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
|
-
|
|
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
|
-
|
|
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
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
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
|
-
|
|
316
|
-
|
|
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
|
-
}, [
|
|
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
|
|
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
|
-
|
|
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
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
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
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
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);
|