@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
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 8.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#169553](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169553)
|
|
8
|
+
[`4232aaa0d75e4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4232aaa0d75e4) -
|
|
9
|
+
Fix type on resize handle for drag and drop table class name
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 8.1.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- [#165765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165765)
|
|
20
|
+
[`3f441f30e6507`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3f441f30e6507) -
|
|
21
|
+
Bump adf-schema to 46.0.0
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 8.1.0
|
|
4
25
|
|
|
5
26
|
### Minor Changes
|
package/dist/cjs/types.js
CHANGED
|
@@ -158,7 +158,7 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
|
|
|
158
158
|
WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-last-column-insert-line__inactive"),
|
|
159
159
|
WITH_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line"),
|
|
160
160
|
WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column"),
|
|
161
|
-
WITH_DRAG_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-drag-column
|
|
161
|
+
WITH_DRAG_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-resize-line"),
|
|
162
162
|
WITH_DRAG_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-drag-column-resize-line-last-column"),
|
|
163
163
|
WITH_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line"),
|
|
164
164
|
WITH_ROW_INSERT_LINE_INACTIVE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line__inactive"),
|
|
@@ -203,8 +203,12 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
|
|
|
203
203
|
"data-testid": "table-drag-handle-button",
|
|
204
204
|
"aria-label": formatMessage(isRow ? _messages.tableMessages.rowDragHandle : _messages.tableMessages.columnDragHandle),
|
|
205
205
|
"aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
|
|
206
|
-
"aria-haspopup": "menu"
|
|
207
|
-
|
|
206
|
+
"aria-haspopup": "menu"
|
|
207
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
208
|
+
,
|
|
209
|
+
onMouseOver: onMouseOver
|
|
210
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
211
|
+
,
|
|
208
212
|
onMouseOut: onMouseOut,
|
|
209
213
|
onMouseUp: function onMouseUp(e) {
|
|
210
214
|
// 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
|
|
@@ -695,37 +695,40 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
695
695
|
var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
|
|
696
696
|
var isOpenAllowed = false;
|
|
697
697
|
isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
|
|
698
|
-
return (
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
698
|
+
return (
|
|
699
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
700
|
+
(0, _react2.jsx)("div", {
|
|
701
|
+
"data-testid": "table-cell-contextual-menu",
|
|
702
|
+
onMouseLeave: this.closeSubmenu,
|
|
703
|
+
ref: this.dropdownMenuRef
|
|
704
|
+
}, (0, _react2.jsx)(_uiMenu.DropdownMenu, {
|
|
705
|
+
mountTo: mountPoint
|
|
706
|
+
//This needs be removed when the a11y is completely handled
|
|
707
|
+
//Disabling key navigation now as it works only partially
|
|
708
|
+
,
|
|
709
|
+
arrowKeyNavigationProviderOptions: {
|
|
710
|
+
type: _uiMenu.ArrowKeyNavigationType.MENU,
|
|
711
|
+
disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
|
|
712
|
+
},
|
|
713
|
+
items: items,
|
|
714
|
+
isOpen: isOpenAllowed,
|
|
715
|
+
onOpenChange: this.handleOpenChange,
|
|
716
|
+
onItemActivated: this.onMenuItemActivated,
|
|
717
|
+
onMouseEnter: this.handleItemMouseEnter,
|
|
718
|
+
onMouseLeave: this.handleItemMouseLeave,
|
|
719
|
+
fitHeight: 188,
|
|
720
|
+
fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
|
|
721
|
+
shouldFocusFirstItem: function shouldFocusFirstItem() {
|
|
722
|
+
return Boolean(isCellMenuOpenByKeyboard);
|
|
723
|
+
},
|
|
724
|
+
boundariesElement: boundariesElement,
|
|
725
|
+
offset: offset,
|
|
726
|
+
section: isDragAndDropEnabled ? {
|
|
727
|
+
hasSeparator: true
|
|
728
|
+
} : undefined,
|
|
729
|
+
allowEnterDefaultBehavior: this.state.isSubmenuOpen
|
|
730
|
+
}))
|
|
731
|
+
);
|
|
729
732
|
}
|
|
730
733
|
}]);
|
|
731
734
|
return ContextualMenu;
|
|
@@ -15,32 +15,36 @@ var DeleteButton = function DeleteButton(_ref) {
|
|
|
15
15
|
onMouseLeave = _ref.onMouseLeave,
|
|
16
16
|
removeLabel = _ref.removeLabel,
|
|
17
17
|
formatMessage = _ref.intl.formatMessage;
|
|
18
|
-
return
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
18
|
+
return (
|
|
19
|
+
/*#__PURE__*/
|
|
20
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
21
|
+
_react.default.createElement("div", {
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
23
|
+
className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
25
|
+
,
|
|
26
|
+
style: style,
|
|
27
|
+
onMouseEnter: onMouseEnter,
|
|
28
|
+
onMouseLeave: onMouseLeave
|
|
29
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
30
|
+
type: "button",
|
|
31
|
+
"aria-label": formatMessage(removeLabel, {
|
|
32
|
+
0: 1
|
|
33
|
+
})
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
35
|
+
,
|
|
36
|
+
className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON,
|
|
37
|
+
onMouseDown: onClick,
|
|
38
|
+
onMouseMove: function onMouseMove(e) {
|
|
39
|
+
return e.preventDefault();
|
|
40
|
+
}
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement("svg", {
|
|
42
|
+
className: _types.TableCssClassName.CONTROLS_BUTTON_ICON
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
44
|
+
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",
|
|
45
|
+
fill: "currentColor",
|
|
46
|
+
fillRule: "evenodd"
|
|
47
|
+
}))))
|
|
48
|
+
);
|
|
45
49
|
};
|
|
46
50
|
var _default = exports.default = (0, _reactIntlNext.injectIntl)(DeleteButton);
|
|
@@ -197,48 +197,52 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
|
|
|
197
197
|
return handles;
|
|
198
198
|
};
|
|
199
199
|
var containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : tableContainerWidth;
|
|
200
|
-
return
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
205
|
-
ref: columnControlsRef
|
|
206
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
207
|
-
,
|
|
208
|
-
className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
|
|
209
|
-
"data-testid": "table-floating-column-controls",
|
|
210
|
-
style: {
|
|
211
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
212
|
-
gridTemplateColumns: widths,
|
|
213
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
214
|
-
marginTop: marginTop,
|
|
215
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
216
|
-
width: stickyTop ? containerWidth : undefined,
|
|
217
|
-
overflowX: stickyTop ? 'hidden' : 'visible',
|
|
218
|
-
pointerEvents: isDragging ? 'none' : undefined
|
|
219
|
-
}
|
|
220
|
-
}, columnParams.map(function (_ref2, index) {
|
|
221
|
-
var startIndex = _ref2.startIndex,
|
|
222
|
-
endIndex = _ref2.endIndex;
|
|
223
|
-
return /*#__PURE__*/_react.default.createElement("div", {
|
|
224
|
-
style: {
|
|
225
|
-
gridColumn: "".concat(startIndex + 1, " / span 1")
|
|
226
|
-
},
|
|
227
|
-
"data-start-index": startIndex,
|
|
228
|
-
"data-end-index": endIndex
|
|
200
|
+
return (
|
|
201
|
+
/*#__PURE__*/
|
|
202
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
203
|
+
_react.default.createElement("div", {
|
|
229
204
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
230
|
-
,
|
|
231
|
-
|
|
232
|
-
contentEditable: false,
|
|
233
|
-
key: index
|
|
205
|
+
className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS,
|
|
206
|
+
onMouseMove: handleMouseMove
|
|
234
207
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
208
|
+
ref: columnControlsRef
|
|
235
209
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
236
|
-
className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
|
|
237
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
238
210
|
,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
211
|
+
className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER,
|
|
212
|
+
"data-testid": "table-floating-column-controls",
|
|
213
|
+
style: {
|
|
214
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
215
|
+
gridTemplateColumns: widths,
|
|
216
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
217
|
+
marginTop: marginTop,
|
|
218
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
219
|
+
width: stickyTop ? containerWidth : undefined,
|
|
220
|
+
overflowX: stickyTop ? 'hidden' : 'visible',
|
|
221
|
+
pointerEvents: isDragging ? 'none' : undefined
|
|
222
|
+
}
|
|
223
|
+
}, columnParams.map(function (_ref2, index) {
|
|
224
|
+
var startIndex = _ref2.startIndex,
|
|
225
|
+
endIndex = _ref2.endIndex;
|
|
226
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
227
|
+
style: {
|
|
228
|
+
gridColumn: "".concat(startIndex + 1, " / span 1")
|
|
229
|
+
},
|
|
230
|
+
"data-start-index": startIndex,
|
|
231
|
+
"data-end-index": endIndex
|
|
232
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
233
|
+
,
|
|
234
|
+
className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
|
|
235
|
+
contentEditable: false,
|
|
236
|
+
key: index
|
|
237
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
238
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
239
|
+
className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
|
|
240
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
241
|
+
,
|
|
242
|
+
style: columnParams.length - 1 === index ? {
|
|
243
|
+
right: '0'
|
|
244
|
+
} : {}
|
|
245
|
+
}));
|
|
246
|
+
}), columnHandles()))
|
|
247
|
+
);
|
|
244
248
|
};
|
|
@@ -100,8 +100,12 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
|
|
|
100
100
|
className: (0, _classnames.default)(_types.TableCssClassName.CONTROLS_CORNER_BUTTON, {
|
|
101
101
|
danger: isActive && isInDanger
|
|
102
102
|
}),
|
|
103
|
-
onClick: this.selectTable
|
|
104
|
-
|
|
103
|
+
onClick: this.selectTable
|
|
104
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
105
|
+
,
|
|
106
|
+
onMouseOver: this.hoverTable
|
|
107
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
108
|
+
,
|
|
105
109
|
onMouseOut: this.clearHoverSelection
|
|
106
110
|
}), !isHeaderRowEnabled &&
|
|
107
111
|
/*#__PURE__*/
|
|
@@ -50,7 +50,9 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
|
|
|
50
50
|
}),
|
|
51
51
|
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
52
52
|
type: "button",
|
|
53
|
-
onClick: handleOnClick
|
|
53
|
+
onClick: handleOnClick
|
|
54
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
55
|
+
,
|
|
54
56
|
onMouseOut: handleMouseOut,
|
|
55
57
|
contentEditable: false
|
|
56
58
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -96,7 +98,9 @@ var DragCornerControlsComponentWithSelection = function DragCornerControlsCompon
|
|
|
96
98
|
}),
|
|
97
99
|
"aria-label": formatMessage(_messages.tableMessages.cornerControl),
|
|
98
100
|
type: "button",
|
|
99
|
-
onClick: handleOnClick
|
|
101
|
+
onClick: handleOnClick
|
|
102
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
103
|
+
,
|
|
100
104
|
onMouseOut: handleMouseOut,
|
|
101
105
|
contentEditable: false
|
|
102
106
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -123,7 +123,10 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
123
123
|
},
|
|
124
124
|
contentEditable: false
|
|
125
125
|
}, rowHeights.map(function (rowHeight, index) {
|
|
126
|
-
return isDragAndDropEnabled ?
|
|
126
|
+
return isDragAndDropEnabled ?
|
|
127
|
+
/*#__PURE__*/
|
|
128
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
129
|
+
_react.default.createElement("div", {
|
|
127
130
|
key: "wrapper-".concat(index)
|
|
128
131
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
129
132
|
,
|
|
@@ -131,11 +134,16 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
131
134
|
"data-index": index
|
|
132
135
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
133
136
|
,
|
|
134
|
-
style: _this2.getCellStyles(index, rowHeight)
|
|
137
|
+
style: _this2.getCellStyles(index, rowHeight)
|
|
138
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
139
|
+
,
|
|
135
140
|
onMouseOver: function onMouseOver() {
|
|
136
141
|
return updateCellHoverLocation(index);
|
|
137
142
|
}
|
|
138
|
-
}, hasHeaderRow ? index > 0 ? index : null : index + 1) :
|
|
143
|
+
}, hasHeaderRow ? index > 0 ? index : null : index + 1) :
|
|
144
|
+
/*#__PURE__*/
|
|
145
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
|
|
146
|
+
_react.default.createElement("div", {
|
|
139
147
|
key: "wrapper-".concat(index)
|
|
140
148
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
141
149
|
,
|
|
@@ -146,10 +154,14 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
146
154
|
style: _this2.getCellStyles(index, rowHeight),
|
|
147
155
|
onClick: function onClick(event) {
|
|
148
156
|
return _this2.selectRow(index, event);
|
|
149
|
-
}
|
|
157
|
+
}
|
|
158
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
159
|
+
,
|
|
150
160
|
onMouseOver: function onMouseOver() {
|
|
151
161
|
return _this2.hoverRows(index);
|
|
152
|
-
}
|
|
162
|
+
}
|
|
163
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
164
|
+
,
|
|
153
165
|
onMouseOut: _this2.clearHoverSelection
|
|
154
166
|
}, hasHeaderRow ? index > 0 ? index : null : index + 1);
|
|
155
167
|
}));
|
|
@@ -102,10 +102,14 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
|
|
|
102
102
|
className: "".concat(_types.TableCssClassName.ROW_CONTROLS_BUTTON, " ").concat(_types.TableCssClassName.CONTROLS_BUTTON),
|
|
103
103
|
onClick: function onClick(event) {
|
|
104
104
|
return _this2.props.selectRow(startIndex, event.shiftKey);
|
|
105
|
-
}
|
|
105
|
+
}
|
|
106
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
107
|
+
,
|
|
106
108
|
onMouseOver: function onMouseOver() {
|
|
107
109
|
return _this2.props.hoverRows([startIndex]);
|
|
108
|
-
}
|
|
110
|
+
}
|
|
111
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
112
|
+
,
|
|
109
113
|
onMouseOut: _this2.clearHoverSelection,
|
|
110
114
|
"data-start-index": startIndex,
|
|
111
115
|
"data-end-index": endIndex
|
|
@@ -187,57 +187,61 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
|
|
|
187
187
|
if (isResizing) {
|
|
188
188
|
return null;
|
|
189
189
|
}
|
|
190
|
-
return
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
gridTemplateRows: heights,
|
|
195
|
-
gridTemplateColumns: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
196
|
-
"".concat(_consts.dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
|
|
197
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
198
|
-
left: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
199
|
-
"-".concat(_consts.dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
|
|
200
|
-
},
|
|
201
|
-
onMouseMove: handleMouseMove,
|
|
202
|
-
contentEditable: false
|
|
203
|
-
}, rowsParams.map(function (_ref4, index) {
|
|
204
|
-
var startIndex = _ref4.startIndex,
|
|
205
|
-
endIndex = _ref4.endIndex;
|
|
206
|
-
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
|
|
207
|
-
key: index
|
|
208
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
209
|
-
style: {
|
|
210
|
-
gridRow: "".concat(index + 1, " / span 1"),
|
|
211
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
212
|
-
gridColumn: '2'
|
|
213
|
-
},
|
|
214
|
-
"data-start-index": startIndex,
|
|
215
|
-
"data-end-index": endIndex
|
|
190
|
+
return (
|
|
191
|
+
/*#__PURE__*/
|
|
192
|
+
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
193
|
+
_react.default.createElement("div", {
|
|
216
194
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
217
|
-
,
|
|
218
|
-
className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
|
|
219
|
-
contentEditable: false,
|
|
220
|
-
key: "insert-dot-".concat(index)
|
|
221
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
222
|
-
className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
|
|
223
|
-
})), isDragging && /*#__PURE__*/_react.default.createElement(_RowDropTarget.default, {
|
|
224
|
-
key: "drop-target-".concat(index),
|
|
225
|
-
index: index,
|
|
226
|
-
localId: currentNodeLocalId,
|
|
195
|
+
className: _types.TableCssClassName.DRAG_ROW_CONTROLS,
|
|
227
196
|
style: {
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
// eslint-disable-next-line @atlaskit/
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
197
|
+
gridTemplateRows: heights,
|
|
198
|
+
gridTemplateColumns: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
199
|
+
"".concat(_consts.dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
|
|
200
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
201
|
+
left: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
202
|
+
"-".concat(_consts.dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
|
|
203
|
+
},
|
|
204
|
+
onMouseMove: handleMouseMove,
|
|
205
|
+
contentEditable: false
|
|
206
|
+
}, rowsParams.map(function (_ref4, index) {
|
|
207
|
+
var startIndex = _ref4.startIndex,
|
|
208
|
+
endIndex = _ref4.endIndex;
|
|
209
|
+
return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
|
|
210
|
+
key: index
|
|
211
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
212
|
+
style: {
|
|
213
|
+
gridRow: "".concat(index + 1, " / span 1"),
|
|
214
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
215
|
+
gridColumn: '2'
|
|
216
|
+
},
|
|
217
|
+
"data-start-index": startIndex,
|
|
218
|
+
"data-end-index": endIndex
|
|
219
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
220
|
+
,
|
|
221
|
+
className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
|
|
222
|
+
contentEditable: false,
|
|
223
|
+
key: "insert-dot-".concat(index)
|
|
224
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
225
|
+
className: _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT
|
|
226
|
+
})), isDragging && /*#__PURE__*/_react.default.createElement(_RowDropTarget.default, {
|
|
227
|
+
key: "drop-target-".concat(index),
|
|
228
|
+
index: index,
|
|
229
|
+
localId: currentNodeLocalId,
|
|
230
|
+
style: {
|
|
231
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
232
|
+
gridColumn: '1 / span 3',
|
|
233
|
+
gridRow: "".concat(index + 1, " / span 1"),
|
|
234
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
235
|
+
height: '100%',
|
|
236
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
237
|
+
pointerEvents: 'auto',
|
|
238
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
239
|
+
position: 'relative',
|
|
240
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
241
|
+
left: "var(--ds-space-negative-100, -8px)"
|
|
242
|
+
}
|
|
243
|
+
}));
|
|
244
|
+
}), rowHandles())
|
|
245
|
+
);
|
|
242
246
|
};
|
|
243
247
|
var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);
|
package/dist/es2019/types.js
CHANGED
|
@@ -150,7 +150,7 @@ export const TableCssClassName = {
|
|
|
150
150
|
WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-column-insert-line__inactive`,
|
|
151
151
|
WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
|
|
152
152
|
WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
|
|
153
|
-
WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column
|
|
153
|
+
WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column-resize-line`,
|
|
154
154
|
WITH_DRAG_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-drag-column-resize-line-last-column`,
|
|
155
155
|
WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
|
|
156
156
|
WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
|
|
@@ -198,8 +198,12 @@ const DragHandleComponent = ({
|
|
|
198
198
|
"data-testid": "table-drag-handle-button",
|
|
199
199
|
"aria-label": formatMessage(isRow ? messages.rowDragHandle : messages.columnDragHandle),
|
|
200
200
|
"aria-expanded": isDragMenuOpen && isDragMenuTarget ? 'true' : 'false',
|
|
201
|
-
"aria-haspopup": "menu"
|
|
202
|
-
|
|
201
|
+
"aria-haspopup": "menu"
|
|
202
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
203
|
+
,
|
|
204
|
+
onMouseOver: onMouseOver
|
|
205
|
+
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
|
|
206
|
+
,
|
|
203
207
|
onMouseOut: onMouseOut,
|
|
204
208
|
onMouseUp: e => {
|
|
205
209
|
// 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
|
|
@@ -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
|