@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.
Files changed (121) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/nodeviews/ExternalDropTargets.js +4 -0
  3. package/dist/cjs/nodeviews/TableComponent.js +28 -5
  4. package/dist/cjs/nodeviews/TableContainer.js +32 -11
  5. package/dist/cjs/toolbar.js +17 -7
  6. package/dist/cjs/ui/ColumnResizeWidget/index.js +2 -0
  7. package/dist/cjs/ui/DragHandle/index.js +10 -3
  8. package/dist/cjs/ui/DragPreview/index.js +1 -0
  9. package/dist/cjs/ui/FloatingContextualButton/FixedButton.js +12 -1
  10. package/dist/cjs/ui/FloatingContextualButton/index.js +3 -1
  11. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +7 -2
  12. package/dist/cjs/ui/FloatingDeleteButton/DeleteButton.js +7 -2
  13. package/dist/cjs/ui/FloatingDeleteButton/index.js +2 -0
  14. package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +7 -2
  15. package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js +61 -57
  16. package/dist/cjs/ui/FloatingInsertButton/InsertButton.js +36 -14
  17. package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +22 -4
  18. package/dist/cjs/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +2 -0
  19. package/dist/cjs/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +4 -1
  20. package/dist/cjs/ui/TableFloatingColumnControls/index.js +3 -1
  21. package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +12 -3
  22. package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -0
  23. package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +13 -4
  24. package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js +50 -43
  25. package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +16 -2
  26. package/dist/cjs/ui/TableFloatingControls/RowDropTarget/index.js +3 -1
  27. package/dist/cjs/ui/TableFloatingControls/index.js +80 -76
  28. package/dist/cjs/ui/icons/DragHandleDisabledIcon.js +3 -1
  29. package/dist/cjs/ui/icons/DragInMotionIcon.js +3 -1
  30. package/dist/cjs/ui/icons/MinimisedHandle.js +1 -0
  31. package/dist/es2019/nodeviews/ExternalDropTargets.js +4 -0
  32. package/dist/es2019/nodeviews/TableComponent.js +28 -5
  33. package/dist/es2019/nodeviews/TableContainer.js +32 -11
  34. package/dist/es2019/toolbar.js +13 -3
  35. package/dist/es2019/ui/ColumnResizeWidget/index.js +2 -0
  36. package/dist/es2019/ui/DragHandle/index.js +10 -3
  37. package/dist/es2019/ui/DragPreview/index.js +1 -0
  38. package/dist/es2019/ui/FloatingContextualButton/FixedButton.js +12 -1
  39. package/dist/es2019/ui/FloatingContextualButton/index.js +3 -1
  40. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +7 -2
  41. package/dist/es2019/ui/FloatingDeleteButton/DeleteButton.js +7 -2
  42. package/dist/es2019/ui/FloatingDeleteButton/index.js +2 -0
  43. package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +7 -2
  44. package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js +56 -52
  45. package/dist/es2019/ui/FloatingInsertButton/InsertButton.js +36 -14
  46. package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +22 -4
  47. package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +2 -0
  48. package/dist/es2019/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +4 -1
  49. package/dist/es2019/ui/TableFloatingColumnControls/index.js +3 -1
  50. package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +12 -3
  51. package/dist/es2019/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -0
  52. package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +13 -4
  53. package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js +47 -40
  54. package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +16 -2
  55. package/dist/es2019/ui/TableFloatingControls/RowDropTarget/index.js +3 -1
  56. package/dist/es2019/ui/TableFloatingControls/index.js +78 -74
  57. package/dist/es2019/ui/icons/DragHandleDisabledIcon.js +3 -1
  58. package/dist/es2019/ui/icons/DragInMotionIcon.js +3 -1
  59. package/dist/es2019/ui/icons/MinimisedHandle.js +1 -0
  60. package/dist/esm/nodeviews/ExternalDropTargets.js +4 -0
  61. package/dist/esm/nodeviews/TableComponent.js +28 -5
  62. package/dist/esm/nodeviews/TableContainer.js +32 -11
  63. package/dist/esm/toolbar.js +16 -4
  64. package/dist/esm/ui/ColumnResizeWidget/index.js +2 -0
  65. package/dist/esm/ui/DragHandle/index.js +10 -3
  66. package/dist/esm/ui/DragPreview/index.js +1 -0
  67. package/dist/esm/ui/FloatingContextualButton/FixedButton.js +12 -1
  68. package/dist/esm/ui/FloatingContextualButton/index.js +3 -1
  69. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +7 -2
  70. package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js +7 -2
  71. package/dist/esm/ui/FloatingDeleteButton/index.js +2 -0
  72. package/dist/esm/ui/FloatingDragMenu/DragMenu.js +7 -2
  73. package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js +61 -57
  74. package/dist/esm/ui/FloatingInsertButton/InsertButton.js +36 -14
  75. package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +22 -4
  76. package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js +2 -0
  77. package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/index.js +4 -1
  78. package/dist/esm/ui/TableFloatingColumnControls/index.js +3 -1
  79. package/dist/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js +12 -3
  80. package/dist/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js +2 -0
  81. package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +13 -4
  82. package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js +50 -43
  83. package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +16 -2
  84. package/dist/esm/ui/TableFloatingControls/RowDropTarget/index.js +3 -1
  85. package/dist/esm/ui/TableFloatingControls/index.js +80 -76
  86. package/dist/esm/ui/icons/DragHandleDisabledIcon.js +3 -1
  87. package/dist/esm/ui/icons/DragInMotionIcon.js +3 -1
  88. package/dist/esm/ui/icons/MinimisedHandle.js +1 -0
  89. package/dist/types/toolbar.d.ts +2 -1
  90. package/dist/types-ts4.5/toolbar.d.ts +2 -1
  91. package/docs/0-intro.tsx +1 -0
  92. package/package.json +1 -1
  93. package/src/nodeviews/ExternalDropTargets.tsx +4 -0
  94. package/src/nodeviews/TableComponent.tsx +18 -0
  95. package/src/nodeviews/TableContainer.tsx +12 -0
  96. package/src/toolbar.tsx +20 -1
  97. package/src/ui/ColumnResizeWidget/index.tsx +2 -0
  98. package/src/ui/DragHandle/index.tsx +3 -0
  99. package/src/ui/DragPreview/index.tsx +1 -0
  100. package/src/ui/FloatingContextualButton/FixedButton.tsx +10 -0
  101. package/src/ui/FloatingContextualButton/index.tsx +1 -0
  102. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +3 -0
  103. package/src/ui/FloatingDeleteButton/DeleteButton.tsx +4 -0
  104. package/src/ui/FloatingDeleteButton/index.tsx +2 -0
  105. package/src/ui/FloatingDragMenu/DragMenu.tsx +3 -0
  106. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +3 -0
  107. package/src/ui/FloatingInsertButton/InsertButton.tsx +14 -0
  108. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +16 -1
  109. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +2 -0
  110. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +2 -0
  111. package/src/ui/TableFloatingColumnControls/index.tsx +1 -0
  112. package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +6 -0
  113. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +4 -0
  114. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +5 -0
  115. package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +5 -0
  116. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +15 -1
  117. package/src/ui/TableFloatingControls/RowDropTarget/index.tsx +1 -0
  118. package/src/ui/TableFloatingControls/index.tsx +1 -0
  119. package/src/ui/icons/DragHandleDisabledIcon.tsx +1 -0
  120. package/src/ui/icons/DragInMotionIcon.tsx +1 -0
  121. 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 && jsx("div", {
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 /*#__PURE__*/React.createElement("div", {
76
- className: "drag-dropdown-menu-wrapper"
77
- }, /*#__PURE__*/React.createElement("div", {
78
- className: "drag-dropdown-menu-popup-ref",
79
- ref: handleRef
80
- }), /*#__PURE__*/React.createElement(Popup, {
81
- target: targetRefDiv,
82
- mountTo: mountPoint,
83
- boundariesElement: boundariesElement,
84
- scrollableElement: scrollableElement,
85
- onPlacementChanged: placement => {
86
- setPopupPlacement(placement);
87
- },
88
- fitHeight: fitHeight,
89
- fitWidth: fitWidth,
90
- zIndex: akEditorFloatingPanelZIndex,
91
- offset: [offsetX, offsetY],
92
- 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
93
- }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
94
- closeOnTab: true,
95
- type: ArrowKeyNavigationType.MENU,
96
- handleClose: () => handleClose('handle'),
97
- onSelection: index => {
98
- const results = items.flatMap(item => 'items' in item ? item.items : item);
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
- // onSelection is called when any focusable element is 'activated'
101
- // this is an issue as some menu items have toggles, which cause the index value
102
- // in the callback to be outside of array length.
103
- // The logic below normalises the index value based on the number
104
- // of menu items with 2 focusable elements, and adjusts the index to ensure
105
- // the correct menu item is sent in onItemActivated callback
106
- const keys = ['row_numbers', 'header_row', 'header_column'];
107
- let doubleItemCount = 0;
108
- const firstIndex = results.findIndex(value => keys.includes(value.key));
109
- if (firstIndex === -1 || index <= firstIndex) {
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[i]
114
+ item: results[index]
122
115
  });
123
116
  return;
124
117
  }
125
- if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
126
- onItemActivated && onItemActivated({
127
- item: results[i]
128
- });
129
- return;
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
- }, innerMenu())));
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
- className: ClassName.CONTROLS_INSERT_LINE,
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 /*#__PURE__*/React.createElement("div", {
106
- className: floatingButtonClassName
107
- }, /*#__PURE__*/React.createElement("div", {
108
- className: `${ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
109
- }, content));
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
- className: ClassName.CONTROLS_INSERT_LINE,
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 /*#__PURE__*/React.createElement("div", {
149
- className: floatingButtonClassName
150
- }, /*#__PURE__*/React.createElement("div", {
151
- className: `${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`
152
- }, content));
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
- className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
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 && /*#__PURE__*/React.createElement("div", {
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 && /*#__PURE__*/React.createElement("div", {
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 /*#__PURE__*/React.createElement("div", {
43
- className: ClassName.ROW_CONTROLS
44
- }, /*#__PURE__*/React.createElement("div", {
45
- className: ClassName.ROW_CONTROLS_INNER
46
- }, rowsParams.map(({
47
- startIndex,
48
- endIndex,
49
- height
50
- }, index) => {
51
- // if previous row was header row, add its height to our margin
52
- let marginTop = -1;
53
- if (index === 1 && hasHeaderRow && this.props.stickyTop !== undefined) {
54
- marginTop += rowHeights[index - 1] + tableToolbarSize;
55
- }
56
- const thisRowSticky = this.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
57
- return /*#__PURE__*/React.createElement("div", {
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
- }, /*#__PURE__*/React.createElement("button", {
71
- "aria-label": formatMessage(messages.rowControl),
72
- type: "button",
73
- className: `${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`,
74
- onClick: event => this.props.selectRow(startIndex, event.shiftKey),
75
- onMouseOver: () => this.props.hoverRows([startIndex]),
76
- onMouseOut: this.clearHoverSelection,
77
- "data-start-index": startIndex,
78
- "data-end-index": endIndex
79
- }), /*#__PURE__*/React.createElement("div", {
80
- className: ClassName.CONTROLS_INSERT_MARKER
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,