@atlaskit/editor-plugin-table 7.16.8 → 7.16.9
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 +8 -0
- package/dist/cjs/nodeviews/ExternalDropTargets.js +4 -0
- package/dist/cjs/nodeviews/TableComponent.js +28 -5
- package/dist/cjs/nodeviews/TableContainer.js +32 -11
- package/dist/cjs/toolbar.js +17 -7
- package/dist/cjs/ui/ColumnResizeWidget/index.js +2 -0
- package/dist/cjs/ui/DragHandle/index.js +10 -3
- package/dist/cjs/ui/DragPreview/index.js +1 -0
- package/dist/cjs/ui/FloatingContextualButton/FixedButton.js +12 -1
- package/dist/cjs/ui/FloatingContextualButton/index.js +3 -1
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +7 -2
- package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js +7 -2
- package/dist/cjs/ui/FloatingDeleteButton/index.js +2 -0
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +7 -2
- package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js +61 -57
- package/dist/cjs/ui/FloatingInsertButton/InsertButton.js +36 -14
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +22 -4
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +2 -0
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +4 -1
- package/dist/cjs/ui/TableFloatingColumnControls/index.js +3 -1
- package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +12 -3
- package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -0
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +13 -4
- package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +50 -43
- package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +16 -2
- package/dist/cjs/ui/TableFloatingControls/RowDropTarget/index.js +3 -1
- package/dist/cjs/ui/TableFloatingControls/index.js +80 -76
- package/dist/cjs/ui/icons/DragHandleDisabledIcon.js +3 -1
- package/dist/cjs/ui/icons/DragInMotionIcon.js +3 -1
- package/dist/cjs/ui/icons/MinimisedHandle.js +1 -0
- package/dist/es2019/nodeviews/ExternalDropTargets.js +4 -0
- package/dist/es2019/nodeviews/TableComponent.js +28 -5
- package/dist/es2019/nodeviews/TableContainer.js +32 -11
- package/dist/es2019/toolbar.js +13 -3
- package/dist/es2019/ui/ColumnResizeWidget/index.js +2 -0
- package/dist/es2019/ui/DragHandle/index.js +10 -3
- package/dist/es2019/ui/DragPreview/index.js +1 -0
- package/dist/es2019/ui/FloatingContextualButton/FixedButton.js +12 -1
- package/dist/es2019/ui/FloatingContextualButton/index.js +3 -1
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +7 -2
- package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js +7 -2
- package/dist/es2019/ui/FloatingDeleteButton/index.js +2 -0
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +7 -2
- package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js +56 -52
- package/dist/es2019/ui/FloatingInsertButton/InsertButton.js +36 -14
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +22 -4
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +2 -0
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +4 -1
- package/dist/es2019/ui/TableFloatingColumnControls/index.js +3 -1
- package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +12 -3
- package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -0
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +13 -4
- package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +47 -40
- package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +16 -2
- package/dist/es2019/ui/TableFloatingControls/RowDropTarget/index.js +3 -1
- package/dist/es2019/ui/TableFloatingControls/index.js +78 -74
- package/dist/es2019/ui/icons/DragHandleDisabledIcon.js +3 -1
- package/dist/es2019/ui/icons/DragInMotionIcon.js +3 -1
- package/dist/es2019/ui/icons/MinimisedHandle.js +1 -0
- package/dist/esm/nodeviews/ExternalDropTargets.js +4 -0
- package/dist/esm/nodeviews/TableComponent.js +28 -5
- package/dist/esm/nodeviews/TableContainer.js +32 -11
- package/dist/esm/toolbar.js +16 -4
- package/dist/esm/ui/ColumnResizeWidget/index.js +2 -0
- package/dist/esm/ui/DragHandle/index.js +10 -3
- package/dist/esm/ui/DragPreview/index.js +1 -0
- package/dist/esm/ui/FloatingContextualButton/FixedButton.js +12 -1
- package/dist/esm/ui/FloatingContextualButton/index.js +3 -1
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +7 -2
- package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js +7 -2
- package/dist/esm/ui/FloatingDeleteButton/index.js +2 -0
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +7 -2
- package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js +61 -57
- package/dist/esm/ui/FloatingInsertButton/InsertButton.js +36 -14
- package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +22 -4
- package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +2 -0
- package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +4 -1
- package/dist/esm/ui/TableFloatingColumnControls/index.js +3 -1
- package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +12 -3
- package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -0
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +13 -4
- package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +50 -43
- package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +16 -2
- package/dist/esm/ui/TableFloatingControls/RowDropTarget/index.js +3 -1
- package/dist/esm/ui/TableFloatingControls/index.js +80 -76
- package/dist/esm/ui/icons/DragHandleDisabledIcon.js +3 -1
- package/dist/esm/ui/icons/DragInMotionIcon.js +3 -1
- package/dist/esm/ui/icons/MinimisedHandle.js +1 -0
- package/dist/types/toolbar.d.ts +2 -1
- package/dist/types-ts4.5/toolbar.d.ts +2 -1
- package/docs/0-intro.tsx +1 -0
- package/package.json +1 -1
- package/src/nodeviews/ExternalDropTargets.tsx +4 -0
- package/src/nodeviews/TableComponent.tsx +18 -0
- package/src/nodeviews/TableContainer.tsx +12 -0
- package/src/toolbar.tsx +20 -1
- package/src/ui/ColumnResizeWidget/index.tsx +2 -0
- package/src/ui/DragHandle/index.tsx +3 -0
- package/src/ui/DragPreview/index.tsx +1 -0
- package/src/ui/FloatingContextualButton/FixedButton.tsx +10 -0
- package/src/ui/FloatingContextualButton/index.tsx +1 -0
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +3 -0
- package/src/ui/FloatingDeleteButton/DeleteButton.tsx +4 -0
- package/src/ui/FloatingDeleteButton/index.tsx +2 -0
- package/src/ui/FloatingDragMenu/DragMenu.tsx +3 -0
- package/src/ui/FloatingDragMenu/DropdownMenu.tsx +3 -0
- package/src/ui/FloatingInsertButton/InsertButton.tsx +14 -0
- package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +16 -1
- package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +2 -0
- package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +2 -0
- package/src/ui/TableFloatingColumnControls/index.tsx +1 -0
- package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +6 -0
- package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +4 -0
- package/src/ui/TableFloatingControls/NumberColumn/index.tsx +5 -0
- package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +5 -0
- package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +15 -1
- package/src/ui/TableFloatingControls/RowDropTarget/index.tsx +1 -0
- package/src/ui/TableFloatingControls/index.tsx +1 -0
- package/src/ui/icons/DragHandleDisabledIcon.tsx +1 -0
- package/src/ui/icons/DragInMotionIcon.tsx +1 -0
- package/src/ui/icons/MinimisedHandle.tsx +1 -0
|
@@ -257,12 +257,17 @@ export const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
257
257
|
size: "medium"
|
|
258
258
|
})),
|
|
259
259
|
elemAfter: jsx("div", {
|
|
260
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
260
261
|
className: DropdownMenuSharedCssClassName.SUBMENU,
|
|
261
262
|
css: dragMenuBackgroundColorStyles
|
|
262
263
|
}, jsx("div", {
|
|
263
|
-
css: cellColourPreviewStyles(background)
|
|
264
|
+
css: cellColourPreviewStyles(background)
|
|
265
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
266
|
+
,
|
|
264
267
|
className: ClassName.DRAG_SUBMENU_ICON
|
|
265
|
-
}), isSubmenuOpen &&
|
|
268
|
+
}), isSubmenuOpen &&
|
|
269
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
270
|
+
jsx("div", {
|
|
266
271
|
className: ClassName.DRAG_SUBMENU,
|
|
267
272
|
ref: handleSubMenuRef
|
|
268
273
|
}, jsx(ArrowKeyNavigationProvider, {
|
|
@@ -72,63 +72,67 @@ export const DropdownMenu = ({
|
|
|
72
72
|
});
|
|
73
73
|
})))));
|
|
74
74
|
};
|
|
75
|
-
return
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
75
|
+
return (
|
|
76
|
+
/*#__PURE__*/
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
|
+
React.createElement("div", {
|
|
79
|
+
className: "drag-dropdown-menu-wrapper"
|
|
80
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
81
|
+
className: "drag-dropdown-menu-popup-ref",
|
|
82
|
+
ref: handleRef
|
|
83
|
+
}), /*#__PURE__*/React.createElement(Popup, {
|
|
84
|
+
target: targetRefDiv,
|
|
85
|
+
mountTo: mountPoint,
|
|
86
|
+
boundariesElement: boundariesElement,
|
|
87
|
+
scrollableElement: scrollableElement,
|
|
88
|
+
onPlacementChanged: placement => {
|
|
89
|
+
setPopupPlacement(placement);
|
|
90
|
+
},
|
|
91
|
+
fitHeight: fitHeight,
|
|
92
|
+
fitWidth: fitWidth,
|
|
93
|
+
zIndex: akEditorFloatingPanelZIndex,
|
|
94
|
+
offset: [offsetX, offsetY],
|
|
95
|
+
allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
|
|
96
|
+
}, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
97
|
+
closeOnTab: true,
|
|
98
|
+
type: ArrowKeyNavigationType.MENU,
|
|
99
|
+
handleClose: () => handleClose('handle'),
|
|
100
|
+
onSelection: index => {
|
|
101
|
+
const results = items.flatMap(item => 'items' in item ? item.items : item);
|
|
99
102
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
onItemActivated && onItemActivated({
|
|
111
|
-
item: results[index]
|
|
112
|
-
});
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
for (let i = firstIndex; i < results.length; i += 1) {
|
|
116
|
-
if (keys.includes(results[i].key)) {
|
|
117
|
-
doubleItemCount += 1;
|
|
118
|
-
}
|
|
119
|
-
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
103
|
+
// onSelection is called when any focusable element is 'activated'
|
|
104
|
+
// this is an issue as some menu items have toggles, which cause the index value
|
|
105
|
+
// in the callback to be outside of array length.
|
|
106
|
+
// The logic below normalises the index value based on the number
|
|
107
|
+
// of menu items with 2 focusable elements, and adjusts the index to ensure
|
|
108
|
+
// the correct menu item is sent in onItemActivated callback
|
|
109
|
+
const keys = ['row_numbers', 'header_row', 'header_column'];
|
|
110
|
+
let doubleItemCount = 0;
|
|
111
|
+
const firstIndex = results.findIndex(value => keys.includes(value.key));
|
|
112
|
+
if (firstIndex === -1 || index <= firstIndex) {
|
|
120
113
|
onItemActivated && onItemActivated({
|
|
121
|
-
item: results[
|
|
114
|
+
item: results[index]
|
|
122
115
|
});
|
|
123
116
|
return;
|
|
124
117
|
}
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
}
|
|
129
|
-
|
|
118
|
+
for (let i = firstIndex; i < results.length; i += 1) {
|
|
119
|
+
if (keys.includes(results[i].key)) {
|
|
120
|
+
doubleItemCount += 1;
|
|
121
|
+
}
|
|
122
|
+
if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
|
|
123
|
+
onItemActivated && onItemActivated({
|
|
124
|
+
item: results[i]
|
|
125
|
+
});
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
|
|
129
|
+
onItemActivated && onItemActivated({
|
|
130
|
+
item: results[i]
|
|
131
|
+
});
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
130
134
|
}
|
|
131
135
|
}
|
|
132
|
-
}
|
|
133
|
-
|
|
136
|
+
}, innerMenu())))
|
|
137
|
+
);
|
|
134
138
|
};
|
|
@@ -72,15 +72,19 @@ export const InsertButtonForDragAndDrop = ({
|
|
|
72
72
|
}),
|
|
73
73
|
position: "top"
|
|
74
74
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
75
76
|
className: classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
|
|
76
77
|
[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow,
|
|
77
78
|
[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow
|
|
78
79
|
})
|
|
79
80
|
}, /*#__PURE__*/React.createElement("button", {
|
|
80
|
-
type: "button"
|
|
81
|
+
type: "button"
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
83
|
+
,
|
|
81
84
|
className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
|
|
82
85
|
onMouseDown: onMouseDown
|
|
83
86
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
84
88
|
className: ClassName.CONTROLS_BUTTON_ICON,
|
|
85
89
|
width: "16",
|
|
86
90
|
height: "16",
|
|
@@ -91,7 +95,10 @@ export const InsertButtonForDragAndDrop = ({
|
|
|
91
95
|
d: "M8 4C7.44771 4 7 4.44771 7 5V7H5C4.44771 7 4 7.44771 4 8C4 8.55229 4.44771 9 5 9H7V11C7 11.5523 7.44771 12 8 12C8.55229 12 9 11.5523 9 11V9H11C11.5523 9 12 8.55229 12 8C12 7.44771 11.5523 7 11 7H9V5C9 4.44771 8.55229 4 8 4Z",
|
|
92
96
|
fill: "currentColor"
|
|
93
97
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
94
|
-
|
|
98
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
99
|
+
className: ClassName.CONTROLS_INSERT_LINE
|
|
100
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
101
|
+
,
|
|
95
102
|
style: type === 'row' ? {
|
|
96
103
|
width: getInsertLineWidth(tableRef, true),
|
|
97
104
|
left: "var(--ds-space-150, 12px)"
|
|
@@ -102,11 +109,16 @@ export const InsertButtonForDragAndDrop = ({
|
|
|
102
109
|
}
|
|
103
110
|
})));
|
|
104
111
|
const floatingButtonClassName = isRow ? ClassName.CONTROLS_FLOATING_BUTTON_ROW : ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
|
|
105
|
-
return
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
112
|
+
return (
|
|
113
|
+
/*#__PURE__*/
|
|
114
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
115
|
+
React.createElement("div", {
|
|
116
|
+
className: floatingButtonClassName
|
|
117
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
118
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
119
|
+
className: `${ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
|
|
120
|
+
}, content))
|
|
121
|
+
);
|
|
110
122
|
};
|
|
111
123
|
export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
|
|
112
124
|
const InsertButton = ({
|
|
@@ -127,7 +139,9 @@ const InsertButton = ({
|
|
|
127
139
|
}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
128
140
|
className: ClassName.CONTROLS_INSERT_BUTTON_INNER
|
|
129
141
|
}, /*#__PURE__*/React.createElement("button", {
|
|
130
|
-
type: "button"
|
|
142
|
+
type: "button"
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
144
|
+
,
|
|
131
145
|
className: ClassName.CONTROLS_INSERT_BUTTON,
|
|
132
146
|
onMouseDown: onMouseDown
|
|
133
147
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
@@ -137,7 +151,10 @@ const InsertButton = ({
|
|
|
137
151
|
fill: "currentColor",
|
|
138
152
|
fillRule: "evenodd"
|
|
139
153
|
})))), /*#__PURE__*/React.createElement("div", {
|
|
140
|
-
|
|
154
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
155
|
+
className: ClassName.CONTROLS_INSERT_LINE
|
|
156
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
157
|
+
,
|
|
141
158
|
style: type === 'row' ? {
|
|
142
159
|
width: getInsertLineWidth(tableRef)
|
|
143
160
|
} : {
|
|
@@ -145,10 +162,15 @@ const InsertButton = ({
|
|
|
145
162
|
}
|
|
146
163
|
})));
|
|
147
164
|
const floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
|
|
148
|
-
return
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
165
|
+
return (
|
|
166
|
+
/*#__PURE__*/
|
|
167
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
168
|
+
React.createElement("div", {
|
|
169
|
+
className: floatingButtonClassName
|
|
170
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
171
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
172
|
+
className: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
|
|
173
|
+
}, content))
|
|
174
|
+
);
|
|
153
175
|
};
|
|
154
176
|
export default injectIntl(InsertButton);
|
|
@@ -134,14 +134,23 @@ export const ColumnControls = ({
|
|
|
134
134
|
key: type,
|
|
135
135
|
style: {
|
|
136
136
|
gridColumn,
|
|
137
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
137
138
|
gridRow: '1',
|
|
139
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
138
140
|
display: 'flex',
|
|
141
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
139
142
|
justifyContent: 'center',
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
140
144
|
alignItems: 'center',
|
|
145
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
141
146
|
height: 'fit-content',
|
|
147
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
142
148
|
placeSelf: 'center',
|
|
149
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
143
150
|
zIndex: 99,
|
|
151
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
144
152
|
width: '100%',
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
145
154
|
position: 'relative'
|
|
146
155
|
},
|
|
147
156
|
"data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
|
|
@@ -183,15 +192,19 @@ export const ColumnControls = ({
|
|
|
183
192
|
};
|
|
184
193
|
const containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
|
|
185
194
|
return /*#__PURE__*/React.createElement("div", {
|
|
195
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
186
196
|
className: ClassName.DRAG_COLUMN_CONTROLS,
|
|
187
197
|
onMouseMove: handleMouseMove
|
|
188
198
|
}, /*#__PURE__*/React.createElement("div", {
|
|
189
|
-
ref: columnControlsRef
|
|
199
|
+
ref: columnControlsRef
|
|
200
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
201
|
+
,
|
|
190
202
|
className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
|
|
191
203
|
"data-testid": "table-floating-column-controls",
|
|
192
204
|
style: {
|
|
205
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
193
206
|
gridTemplateColumns: widths,
|
|
194
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
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
|
|
195
208
|
marginTop,
|
|
196
209
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
197
210
|
width: stickyTop ? containerWidth : undefined,
|
|
@@ -206,12 +219,17 @@ export const ColumnControls = ({
|
|
|
206
219
|
gridColumn: `${startIndex + 1} / span 1`
|
|
207
220
|
},
|
|
208
221
|
"data-start-index": startIndex,
|
|
209
|
-
"data-end-index": endIndex
|
|
222
|
+
"data-end-index": endIndex
|
|
223
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
224
|
+
,
|
|
210
225
|
className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
|
|
211
226
|
contentEditable: false,
|
|
212
227
|
key: index
|
|
213
228
|
}, /*#__PURE__*/React.createElement("div", {
|
|
214
|
-
|
|
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
|
+
,
|
|
215
233
|
style: columnParams.length - 1 === index ? {
|
|
216
234
|
right: '0'
|
|
217
235
|
} : {}
|
|
@@ -80,7 +80,9 @@ export const ColumnDropTarget = ({
|
|
|
80
80
|
height: height && `${height}px`,
|
|
81
81
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
82
82
|
marginTop: marginTop && `${marginTop}px`,
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
83
84
|
pointerEvents: 'auto',
|
|
85
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
84
86
|
flexShrink: 0
|
|
85
87
|
},
|
|
86
88
|
"data-drop-target-index": index,
|
|
@@ -18,10 +18,13 @@ export const ColumnDropTargets = ({
|
|
|
18
18
|
dropTargetRef.current.style.marginLeft = `-${(_getScrollOffset = getScrollOffset === null || getScrollOffset === void 0 ? void 0 : getScrollOffset()) !== null && _getScrollOffset !== void 0 ? _getScrollOffset : 0}px`;
|
|
19
19
|
}
|
|
20
20
|
return /*#__PURE__*/React.createElement("div", {
|
|
21
|
-
ref: dropTargetRef
|
|
21
|
+
ref: dropTargetRef
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
23
|
+
,
|
|
22
24
|
className: ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS,
|
|
23
25
|
contentEditable: false
|
|
24
26
|
}, /*#__PURE__*/React.createElement("div", {
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
25
28
|
className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
|
|
26
29
|
"data-testid": "table-floating-column-controls-drop-targets"
|
|
27
30
|
}, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map((width, index) => {
|
|
@@ -70,7 +70,9 @@ export const TableFloatingColumnControls = ({
|
|
|
70
70
|
containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');
|
|
71
71
|
}
|
|
72
72
|
return /*#__PURE__*/React.createElement("div", {
|
|
73
|
-
ref: containerRef
|
|
73
|
+
ref: containerRef
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
75
|
+
,
|
|
74
76
|
className: ClassName.DRAG_COLUMN_CONTROLS_WRAPPER,
|
|
75
77
|
"data-testid": "table-floating-column-controls-wrapper"
|
|
76
78
|
}, /*#__PURE__*/React.createElement(ColumnControls, {
|
|
@@ -62,6 +62,7 @@ class CornerControlComponent extends Component {
|
|
|
62
62
|
}
|
|
63
63
|
const isActive = this.isActive();
|
|
64
64
|
return /*#__PURE__*/React.createElement("div", {
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
65
66
|
className: classnames(ClassName.CORNER_CONTROLS, {
|
|
66
67
|
active: isActive,
|
|
67
68
|
sticky: this.props.stickyTop !== undefined
|
|
@@ -73,18 +74,26 @@ class CornerControlComponent extends Component {
|
|
|
73
74
|
contentEditable: false
|
|
74
75
|
}, /*#__PURE__*/React.createElement("button", {
|
|
75
76
|
"aria-label": formatMessage(messages.cornerControl),
|
|
76
|
-
type: "button"
|
|
77
|
+
type: "button"
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
79
|
+
,
|
|
77
80
|
className: classnames(ClassName.CONTROLS_CORNER_BUTTON, {
|
|
78
81
|
danger: isActive && isInDanger
|
|
79
82
|
}),
|
|
80
83
|
onClick: this.selectTable,
|
|
81
84
|
onMouseOver: this.hoverTable,
|
|
82
85
|
onMouseOut: this.clearHoverSelection
|
|
83
|
-
}), !isHeaderRowEnabled &&
|
|
86
|
+
}), !isHeaderRowEnabled &&
|
|
87
|
+
/*#__PURE__*/
|
|
88
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
89
|
+
React.createElement("div", {
|
|
84
90
|
className: ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER
|
|
85
91
|
}, /*#__PURE__*/React.createElement("div", {
|
|
86
92
|
className: ClassName.CONTROLS_INSERT_MARKER
|
|
87
|
-
})), !isHeaderColumnEnabled &&
|
|
93
|
+
})), !isHeaderColumnEnabled &&
|
|
94
|
+
/*#__PURE__*/
|
|
95
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
96
|
+
React.createElement("div", {
|
|
88
97
|
className: ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER
|
|
89
98
|
}, /*#__PURE__*/React.createElement("div", {
|
|
90
99
|
className: ClassName.CONTROLS_INSERT_MARKER
|
|
@@ -42,6 +42,7 @@ const DragCornerControlsComponent = ({
|
|
|
42
42
|
return null;
|
|
43
43
|
}
|
|
44
44
|
return /*#__PURE__*/React.createElement("button", {
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
45
46
|
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
46
47
|
active: isActive,
|
|
47
48
|
danger: isActive && isInDanger
|
|
@@ -95,6 +96,7 @@ const DragCornerControlsComponentWithSelection = ({
|
|
|
95
96
|
return null;
|
|
96
97
|
}
|
|
97
98
|
return /*#__PURE__*/React.createElement("button", {
|
|
99
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
98
100
|
className: classnames(ClassName.DRAG_CORNER_BUTTON, {
|
|
99
101
|
active: isActive,
|
|
100
102
|
danger: isActive && isInDanger
|
|
@@ -91,6 +91,7 @@ export default class NumberColumn extends Component {
|
|
|
91
91
|
} = this.props;
|
|
92
92
|
const rowHeights = getRowHeights(tableRef);
|
|
93
93
|
return /*#__PURE__*/React.createElement("div", {
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
94
95
|
className: ClassName.NUMBERED_COLUMN,
|
|
95
96
|
style: {
|
|
96
97
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
@@ -99,15 +100,23 @@ export default class NumberColumn extends Component {
|
|
|
99
100
|
},
|
|
100
101
|
contentEditable: false
|
|
101
102
|
}, rowHeights.map((rowHeight, index) => isDragAndDropEnabled ? /*#__PURE__*/React.createElement("div", {
|
|
102
|
-
key: `wrapper-${index}
|
|
103
|
+
key: `wrapper-${index}`
|
|
104
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
105
|
+
,
|
|
103
106
|
className: this.getClassNames(index, true),
|
|
104
|
-
"data-index": index
|
|
107
|
+
"data-index": index
|
|
108
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
109
|
+
,
|
|
105
110
|
style: this.getCellStyles(index, rowHeight),
|
|
106
111
|
onMouseOver: () => updateCellHoverLocation(index)
|
|
107
112
|
}, hasHeaderRow ? index > 0 ? index : null : index + 1) : /*#__PURE__*/React.createElement("div", {
|
|
108
|
-
key: `wrapper-${index}
|
|
113
|
+
key: `wrapper-${index}`
|
|
114
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
115
|
+
,
|
|
109
116
|
className: this.getClassNames(index),
|
|
110
|
-
"data-index": index
|
|
117
|
+
"data-index": index
|
|
118
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
119
|
+
,
|
|
111
120
|
style: this.getCellStyles(index, rowHeight),
|
|
112
121
|
onClick: event => this.selectRow(index, event),
|
|
113
122
|
onMouseOver: () => this.hoverRows(index),
|
|
@@ -39,47 +39,54 @@ class RowControlsComponent extends Component {
|
|
|
39
39
|
const rowsParams = getRowsParams(rowHeights);
|
|
40
40
|
const firstRow = tableRef.querySelector('tr');
|
|
41
41
|
const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
|
|
42
|
-
return
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
|
|
59
|
-
key: startIndex,
|
|
60
|
-
style: {
|
|
61
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
62
|
-
height: height,
|
|
63
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
64
|
-
marginTop: `${marginTop}px`,
|
|
65
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
66
|
-
top: thisRowSticky ? `${this.props.stickyTop + 3}px` : undefined,
|
|
67
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
68
|
-
paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
|
|
42
|
+
return (
|
|
43
|
+
/*#__PURE__*/
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
45
|
+
React.createElement("div", {
|
|
46
|
+
className: ClassName.ROW_CONTROLS
|
|
47
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
48
|
+
className: ClassName.ROW_CONTROLS_INNER
|
|
49
|
+
}, rowsParams.map(({
|
|
50
|
+
startIndex,
|
|
51
|
+
endIndex,
|
|
52
|
+
height
|
|
53
|
+
}, index) => {
|
|
54
|
+
// if previous row was header row, add its height to our margin
|
|
55
|
+
let marginTop = -1;
|
|
56
|
+
if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
|
|
57
|
+
marginTop += rowHeights[index - 1] + tableToolbarSize;
|
|
69
58
|
}
|
|
70
|
-
|
|
71
|
-
"
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
59
|
+
const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
|
|
60
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
62
|
+
className: `${ClassName.ROW_CONTROLS_BUTTON_WRAP} ${getRowClassNames(startIndex, selectionState || selection, hoveredRows, isInDanger, isResizing)} ${thisRowSticky ? 'sticky' : ''}`,
|
|
63
|
+
key: startIndex,
|
|
64
|
+
style: {
|
|
65
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
66
|
+
height: height,
|
|
67
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
68
|
+
marginTop: `${marginTop}px`,
|
|
69
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
70
|
+
top: thisRowSticky ? `${this.props.stickyTop + 3}px` : undefined,
|
|
71
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
72
|
+
paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
|
|
73
|
+
}
|
|
74
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
75
|
+
"aria-label": formatMessage(messages.rowControl),
|
|
76
|
+
type: "button"
|
|
77
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
|
+
,
|
|
79
|
+
className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
|
|
80
|
+
onClick: event => this.props.selectRow(startIndex, event.shiftKey),
|
|
81
|
+
onMouseOver: () => this.props.hoverRows([startIndex]),
|
|
82
|
+
onMouseOut: this.clearHoverSelection,
|
|
83
|
+
"data-start-index": startIndex,
|
|
84
|
+
"data-end-index": endIndex
|
|
85
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
className: ClassName.CONTROLS_INSERT_MARKER
|
|
87
|
+
}));
|
|
88
|
+
})))
|
|
89
|
+
);
|
|
83
90
|
}
|
|
84
91
|
}
|
|
85
92
|
export const RowControls = injectIntl(RowControlsComponent);
|
|
@@ -134,13 +134,18 @@ const DragControlsComponent = ({
|
|
|
134
134
|
key: type,
|
|
135
135
|
style: {
|
|
136
136
|
gridRow,
|
|
137
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
137
138
|
gridColumn: '2',
|
|
138
139
|
// DragHandle uses `transform: rotate(90)`, which doesn't affect its parent (this div) causing the width of this element to be the true height of the drag handle
|
|
140
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
139
141
|
display: 'flex',
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
140
143
|
width: '9px',
|
|
144
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
141
145
|
height: '100%',
|
|
146
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
142
147
|
position: 'relative',
|
|
143
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
148
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
144
149
|
right: '-0.5px'
|
|
145
150
|
},
|
|
146
151
|
"data-testid": `table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`
|
|
@@ -181,6 +186,7 @@ const DragControlsComponent = ({
|
|
|
181
186
|
return null;
|
|
182
187
|
}
|
|
183
188
|
return /*#__PURE__*/React.createElement("div", {
|
|
189
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
184
190
|
className: ClassName.DRAG_ROW_CONTROLS,
|
|
185
191
|
style: {
|
|
186
192
|
gridTemplateRows: heights,
|
|
@@ -198,10 +204,13 @@ const DragControlsComponent = ({
|
|
|
198
204
|
}, /*#__PURE__*/React.createElement("div", {
|
|
199
205
|
style: {
|
|
200
206
|
gridRow: `${index + 1} / span 1`,
|
|
207
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
201
208
|
gridColumn: '2'
|
|
202
209
|
},
|
|
203
210
|
"data-start-index": startIndex,
|
|
204
|
-
"data-end-index": endIndex
|
|
211
|
+
"data-end-index": endIndex
|
|
212
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
213
|
+
,
|
|
205
214
|
className: ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER,
|
|
206
215
|
contentEditable: false,
|
|
207
216
|
key: `insert-dot-${index}`
|
|
@@ -212,11 +221,16 @@ const DragControlsComponent = ({
|
|
|
212
221
|
index: index,
|
|
213
222
|
localId: currentNodeLocalId,
|
|
214
223
|
style: {
|
|
224
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
215
225
|
gridColumn: '1 / span 3',
|
|
216
226
|
gridRow: `${index + 1} / span 1`,
|
|
227
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
217
228
|
height: '100%',
|
|
229
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
218
230
|
pointerEvents: 'auto',
|
|
231
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
219
232
|
position: 'relative',
|
|
233
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
220
234
|
left: "var(--ds-space-negative-100, -8px)"
|
|
221
235
|
}
|
|
222
236
|
}))), rowHandles());
|
|
@@ -70,7 +70,9 @@ const RowDropTarget = ({
|
|
|
70
70
|
});
|
|
71
71
|
}, [index, localId]);
|
|
72
72
|
return /*#__PURE__*/React.createElement("div", {
|
|
73
|
-
ref: dropTargetRef
|
|
73
|
+
ref: dropTargetRef
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
75
|
+
,
|
|
74
76
|
style: style,
|
|
75
77
|
"data-drop-target-index": index,
|
|
76
78
|
"data-drop-target-localid": localId,
|