@atlaskit/editor-plugin-table 8.1.0 → 8.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.
- package/CHANGELOG.md +21 -0
- 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/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/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 +7 -7
- 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
|
@@ -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);
|
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);
|
|
@@ -188,48 +188,52 @@ export var ColumnControls = function ColumnControls(_ref) {
|
|
|
188
188
|
return handles;
|
|
189
189
|
};
|
|
190
190
|
var containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
|
|
191
|
-
return
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
196
|
-
ref: columnControlsRef
|
|
197
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
198
|
-
,
|
|
199
|
-
className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
|
|
200
|
-
"data-testid": "table-floating-column-controls",
|
|
201
|
-
style: {
|
|
202
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
203
|
-
gridTemplateColumns: widths,
|
|
204
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
205
|
-
marginTop: marginTop,
|
|
206
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
207
|
-
width: stickyTop ? containerWidth : undefined,
|
|
208
|
-
overflowX: stickyTop ? 'hidden' : 'visible',
|
|
209
|
-
pointerEvents: isDragging ? 'none' : undefined
|
|
210
|
-
}
|
|
211
|
-
}, columnParams.map(function (_ref2, index) {
|
|
212
|
-
var startIndex = _ref2.startIndex,
|
|
213
|
-
endIndex = _ref2.endIndex;
|
|
214
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
215
|
-
style: {
|
|
216
|
-
gridColumn: "".concat(startIndex + 1, " / span 1")
|
|
217
|
-
},
|
|
218
|
-
"data-start-index": startIndex,
|
|
219
|
-
"data-end-index": endIndex
|
|
191
|
+
return (
|
|
192
|
+
/*#__PURE__*/
|
|
193
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
194
|
+
React.createElement("div", {
|
|
220
195
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
221
|
-
,
|
|
222
|
-
|
|
223
|
-
contentEditable: false,
|
|
224
|
-
key: index
|
|
196
|
+
className: ClassName.DRAG_COLUMN_CONTROLS,
|
|
197
|
+
onMouseMove: handleMouseMove
|
|
225
198
|
}, /*#__PURE__*/React.createElement("div", {
|
|
199
|
+
ref: columnControlsRef
|
|
226
200
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
227
|
-
className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
|
|
228
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
229
201
|
,
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
202
|
+
className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
|
|
203
|
+
"data-testid": "table-floating-column-controls",
|
|
204
|
+
style: {
|
|
205
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
206
|
+
gridTemplateColumns: widths,
|
|
207
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
208
|
+
marginTop: marginTop,
|
|
209
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
210
|
+
width: stickyTop ? containerWidth : undefined,
|
|
211
|
+
overflowX: stickyTop ? 'hidden' : 'visible',
|
|
212
|
+
pointerEvents: isDragging ? 'none' : undefined
|
|
213
|
+
}
|
|
214
|
+
}, columnParams.map(function (_ref2, index) {
|
|
215
|
+
var startIndex = _ref2.startIndex,
|
|
216
|
+
endIndex = _ref2.endIndex;
|
|
217
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
218
|
+
style: {
|
|
219
|
+
gridColumn: "".concat(startIndex + 1, " / span 1")
|
|
220
|
+
},
|
|
221
|
+
"data-start-index": startIndex,
|
|
222
|
+
"data-end-index": endIndex
|
|
223
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
224
|
+
,
|
|
225
|
+
className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
|
|
226
|
+
contentEditable: false,
|
|
227
|
+
key: index
|
|
228
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
229
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
230
|
+
className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
|
|
231
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
232
|
+
,
|
|
233
|
+
style: columnParams.length - 1 === index ? {
|
|
234
|
+
right: '0'
|
|
235
|
+
} : {}
|
|
236
|
+
}));
|
|
237
|
+
}), columnHandles()))
|
|
238
|
+
);
|
|
235
239
|
};
|
|
@@ -90,8 +90,12 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
|
|
|
90
90
|
className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
|
|
91
91
|
danger: isActive && isInDanger
|
|
92
92
|
}),
|
|
93
|
-
onClick: this.selectTable
|
|
94
|
-
|
|
93
|
+
onClick: this.selectTable
|
|
94
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
95
|
+
,
|
|
96
|
+
onMouseOver: this.hoverTable
|
|
97
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
98
|
+
,
|
|
95
99
|
onMouseOut: this.clearHoverSelection
|
|
96
100
|
}), !isHeaderRowEnabled &&
|
|
97
101
|
/*#__PURE__*/
|
|
@@ -40,7 +40,9 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
|
40
40
|
}),
|
|
41
41
|
"aria-label": formatMessage(messages.cornerControl),
|
|
42
42
|
type: "button",
|
|
43
|
-
onClick: handleOnClick
|
|
43
|
+
onClick: handleOnClick
|
|
44
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
45
|
+
,
|
|
44
46
|
onMouseOut: handleMouseOut,
|
|
45
47
|
contentEditable: false
|
|
46
48
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -86,7 +88,9 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
|
|
|
86
88
|
}),
|
|
87
89
|
"aria-label": formatMessage(messages.cornerControl),
|
|
88
90
|
type: "button",
|
|
89
|
-
onClick: handleOnClick
|
|
91
|
+
onClick: handleOnClick
|
|
92
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
93
|
+
,
|
|
90
94
|
onMouseOut: handleMouseOut,
|
|
91
95
|
contentEditable: false
|
|
92
96
|
}, /*#__PURE__*/React.createElement("div", {
|