@atlaskit/editor-plugin-table 7.16.8 → 7.16.10

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -211,14 +211,23 @@ export const ColumnControls = ({
         key={type}
         style={{
           gridColumn,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           gridRow: '1',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'flex',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           justifyContent: 'center',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           alignItems: 'center',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: 'fit-content',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           placeSelf: 'center',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           zIndex: 99,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           width: '100%',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'relative',
         }}
         data-testid={`table-floating-column-${
@@ -306,16 +315,19 @@ export const ColumnControls = ({
 
   return (
     <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={ClassName.DRAG_COLUMN_CONTROLS}
       onMouseMove={handleMouseMove}
     >
       <div
         ref={columnControlsRef}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls"
         style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           gridTemplateColumns: widths,
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           marginTop,
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           width: stickyTop ? containerWidth : undefined,
@@ -330,12 +342,15 @@ export const ColumnControls = ({
             }}
             data-start-index={startIndex}
             data-end-index={endIndex}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER}
             contentEditable={false}
             key={index}
           >
             <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               style={columnParams.length - 1 === index ? { right: '0' } : {}}
             />
           </div>

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -101,7 +101,9 @@ export const ColumnDropTarget = ({
         height: height && `${height}px`,
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         marginTop: marginTop && `${marginTop}px`,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         pointerEvents: 'auto',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         flexShrink: 0,
       }}
       data-drop-target-index={index}

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -34,10 +34,12 @@ export const ColumnDropTargets = ({
   return (
     <div
       ref={dropTargetRef}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={ClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS}
       contentEditable={false}
     >
       <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={ClassName.DRAG_COLUMN_CONTROLS_INNER}
         data-testid="table-floating-column-controls-drop-targets"
       >

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -124,6 +124,7 @@ export const TableFloatingColumnControls = ({
   return (
     <div
       ref={containerRef}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
       data-testid="table-floating-column-controls-wrapper"
     >

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -36,6 +36,7 @@ class CornerControlComponent extends Component<
 
     return (
       <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={classnames(ClassName.CORNER_CONTROLS, {
           active: isActive,
           sticky: this.props.stickyTop !== undefined,
@@ -52,6 +53,7 @@ class CornerControlComponent extends Component<
         <button
           aria-label={formatMessage(messages.cornerControl)}
           type="button"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={classnames(ClassName.CONTROLS_CORNER_BUTTON, {
             danger: isActive && isInDanger,
           })}
@@ -61,12 +63,16 @@ class CornerControlComponent extends Component<
         />
 
         {!isHeaderRowEnabled && (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           <div className={ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER}>
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
             <div className={ClassName.CONTROLS_INSERT_MARKER} />
           </div>
         )}
         {!isHeaderColumnEnabled && (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           <div className={ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER}>
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
             <div className={ClassName.CONTROLS_INSERT_MARKER} />
           </div>
         )}

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -50,6 +50,7 @@ const DragCornerControlsComponent = ({
 
   return (
     <button
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={classnames(ClassName.DRAG_CORNER_BUTTON, {
         active: isActive,
         danger: isActive && isInDanger,
@@ -60,6 +61,7 @@ const DragCornerControlsComponent = ({
       onMouseOut={handleMouseOut}
       contentEditable={false}
     >
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
       <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
     </button>
   );
@@ -101,6 +103,7 @@ const DragCornerControlsComponentWithSelection = ({
 
   return (
     <button
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={classnames(ClassName.DRAG_CORNER_BUTTON, {
         active: isActive,
         danger: isActive && isInDanger,
@@ -111,6 +114,7 @@ const DragCornerControlsComponentWithSelection = ({
       onMouseOut={handleMouseOut}
       contentEditable={false}
     >
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
       <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
     </button>
   );

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -39,6 +39,7 @@ export default class NumberColumn extends Component<Props, any> {
 
     return (
       <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={ClassName.NUMBERED_COLUMN}
         style={{
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -57,8 +58,10 @@ export default class NumberColumn extends Component<Props, any> {
           isDragAndDropEnabled ? (
             <div
               key={`wrapper-${index}`}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={this.getClassNames(index, true)}
               data-index={index}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               style={this.getCellStyles(index, rowHeight)}
               onMouseOver={() => updateCellHoverLocation(index)}
             >
@@ -67,8 +70,10 @@ export default class NumberColumn extends Component<Props, any> {
           ) : (
             <div
               key={`wrapper-${index}`}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={this.getClassNames(index)}
               data-index={index}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               style={this.getCellStyles(index, rowHeight)}
               onClick={(event) => this.selectRow(index, event)}
               onMouseOver={() => this.hoverRows(index)}

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -50,7 +50,9 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
       : false;
 
     return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       <div className={ClassName.ROW_CONTROLS}>
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
         <div className={ClassName.ROW_CONTROLS_INNER}>
           {rowsParams.map(
             ({ startIndex, endIndex, height }: RowParams, index) => {
@@ -71,6 +73,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
 
               return (
                 <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
                   className={`${
                     ClassName.ROW_CONTROLS_BUTTON_WRAP
                   } ${getRowClassNames(
@@ -99,6 +102,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
                   <button
                     aria-label={formatMessage(messages.rowControl)}
                     type="button"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
                     className={`${ClassName.ROW_CONTROLS_BUTTON} ${ClassName.CONTROLS_BUTTON}`}
                     onClick={(event) =>
                       this.props.selectRow(startIndex, event.shiftKey)
@@ -109,6 +113,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
                     data-end-index={endIndex}
                   />
 
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
                   <div className={ClassName.CONTROLS_INSERT_MARKER} />
                 </div>
               );

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -226,13 +226,18 @@ const DragControlsComponent = ({
         key={type}
         style={{
           gridRow,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           gridColumn: '2',
           // 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
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'flex',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           width: '9px',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: '100%',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'relative',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           right: '-0.5px',
         }}
         data-testid={`table-floating-row-${
@@ -309,6 +314,7 @@ const DragControlsComponent = ({
 
   return (
     <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={ClassName.DRAG_ROW_CONTROLS}
       style={{
         gridTemplateRows: heights,
@@ -328,14 +334,17 @@ const DragControlsComponent = ({
           <div
             style={{
               gridRow: `${index + 1} / span 1`,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               gridColumn: '2',
             }}
             data-start-index={startIndex}
             data-end-index={endIndex}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER}
             contentEditable={false}
             key={`insert-dot-${index}`}
           >
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
             <div className={ClassName.DRAG_ROW_FLOATING_INSERT_DOT} />
           </div>
           {isDragging && (
@@ -344,11 +353,16 @@ const DragControlsComponent = ({
               index={index}
               localId={currentNodeLocalId}
               style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 gridColumn: '1 / span 3',
                 gridRow: `${index + 1} / span 1`,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 height: '100%',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 pointerEvents: 'auto',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 position: 'relative',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 left: token('space.negative.100', '-8px'),
               }}
             />

package/src/ui/TableFloatingControls/RowDropTarget/index.tsx

@@ -87,6 +87,7 @@ const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
   return (
     <div
       ref={dropTargetRef}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style={style}
       data-drop-target-index={index}
       data-drop-target-localid={localId}

package/src/ui/TableFloatingControls/index.tsx

@@ -127,6 +127,7 @@ export const TableFloatingControls = ({
     : ClassName.ROW_CONTROLS_WRAPPER;
 
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     <div className={wrapperClassName}>
       <div onMouseDown={(e) => !isDragAndDropEnabled && e.preventDefault()}>
         {isNumberColumnEnabled ? (

package/src/ui/icons/DragHandleDisabledIcon.tsx

@@ -13,6 +13,7 @@ export const DragHandleDisabledIcon = ({
     viewBox="0 0 24 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style={style}
     data-testid="drag-icon-disabled"
   >

package/src/ui/icons/DragInMotionIcon.tsx

@@ -13,6 +13,7 @@ export const DragInMotionIcon = ({ style }: DragInMotionIconProps) => (
     viewBox="0 0 28 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style={style}
   >
     <rect

package/src/ui/icons/MinimisedHandle.tsx

@@ -5,6 +5,7 @@ import { TableCssClassName as ClassName } from '../../types';
 export const MinimisedHandleIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="5" fill="none">
     <rect
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={ClassName.DRAG_HANDLE_MINIMISED}
       width="24"
       height="5"

package/src/utils/guidelines.ts

@@ -1,6 +1,7 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 
+import type { GuidelineExcludeConfig } from './snapping';
 import {
   calculateDefaultSnappings,
   calculateDefaultTablePreserveSnappings,
@@ -15,12 +16,15 @@ export const defaultGuidelines = createFixedGuidelinesFromLengths([
 
 export const defaultGuidelinesForPreserveTable = (
   editorContainerWidth: number,
-  excludeInnerGuidelines = false,
+  exclude: GuidelineExcludeConfig = {
+    innerGuidelines: false,
+    breakoutPoints: false,
+  },
 ) => {
   const lengths = calculateDefaultTablePreserveSnappings(
     -1,
     editorContainerWidth,
-    excludeInnerGuidelines,
+    exclude,
   );
 
   return createFixedGuidelinesFromLengths(

package/src/utils/snapping.ts

@@ -26,11 +26,19 @@ export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
   akEditorFullWidthLayoutWidth + lengthOffset,
 ];
 
+export type GuidelineExcludeConfig = {
+  innerGuidelines: boolean;
+  breakoutPoints: boolean;
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (
-  lengthOffset: number = 0,
-  editorContainerWith: number = akEditorFullWidthLayoutWidth,
-  excludeInnerGuidelines = false,
+  lengthOffset = 0,
+  editorContainerWith = akEditorFullWidthLayoutWidth,
+  exclude: GuidelineExcludeConfig = {
+    innerGuidelines: false,
+    breakoutPoints: false,
+  },
 ) => {
   const dynamicFullWidthLine =
     editorContainerWith - akEditorGutterPadding * 2 >=
@@ -38,24 +46,26 @@ export const calculateDefaultTablePreserveSnappings = (
       ? akEditorFullWidthLayoutWidth
       : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
 
-  if (excludeInnerGuidelines) {
-    return [
+  const guides = [dynamicFullWidthLine - lengthOffset];
+
+  if (!exclude.breakoutPoints) {
+    guides.unshift(
       akEditorDefaultLayoutWidth + lengthOffset,
       akEditorCalculatedWideLayoutWidth + lengthOffset,
-      dynamicFullWidthLine - lengthOffset,
-    ];
+    );
   }
 
-  return [
-    0,
-    ...calculateSubSnappingWidths(
-      numberOfLanesInDefaultLayoutWidth,
-      akEditorDefaultLayoutWidth + lengthOffset,
-    ),
-    akEditorDefaultLayoutWidth + lengthOffset,
-    akEditorCalculatedWideLayoutWidth + lengthOffset,
-    dynamicFullWidthLine - lengthOffset,
-  ];
+  if (!exclude.innerGuidelines) {
+    guides.unshift(
+      0,
+      ...calculateSubSnappingWidths(
+        numberOfLanesInDefaultLayoutWidth,
+        akEditorDefaultLayoutWidth + lengthOffset,
+      ),
+    );
+  }
+
+  return guides;
 };
 
 export const defaultSnappingWidths = calculateDefaultSnappings();
@@ -63,7 +73,10 @@ export const defaultSnappingWidths = calculateDefaultSnappings();
 // FF TablePreserve for defaultSnappingWidths
 export const defaultTablePreserveSnappingWidths = (
   editorContainerWidth: number,
-  excludeInnerGuidelines = false,
+  exclude: GuidelineExcludeConfig = {
+    innerGuidelines: false,
+    breakoutPoints: false,
+  },
 ) => {
   return editorContainerWidth - akEditorGutterPadding * 2 >
     akEditorFullWidthLayoutWidth
@@ -71,7 +84,7 @@ export const defaultTablePreserveSnappingWidths = (
     : calculateDefaultTablePreserveSnappings(
         0,
         editorContainerWidth,
-        excludeInnerGuidelines,
+        exclude,
       );
 };