@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/ui/consts.ts

@@ -1,29 +1,16 @@
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import {
-  tableCellBorderWidth,
-  tableMarginTop,
-} from '@atlaskit/editor-common/styles';
-import {
-  akEditorTableBorder,
-  akEditorTableBorderSelected,
-  akEditorTableCellBlanketDeleted,
-  akEditorTableCellBlanketSelected,
-  akEditorTableHeaderCellBackground,
-  akEditorTableToolbar,
-  akEditorTableToolbarSize,
-  akEditorUnitZIndex,
-  akRichMediaResizeZIndex,
+	akEditorTableBorder,
+	akEditorTableBorderSelected,
+	akEditorTableCellBlanketDeleted,
+	akEditorTableCellBlanketSelected,
+	akEditorTableHeaderCellBackground,
+	akEditorTableToolbar,
+	akEditorTableToolbarSize,
+	akEditorUnitZIndex,
+	akRichMediaResizeZIndex,
 } from '@atlaskit/editor-shared-styles';
-import {
-  B200,
-  N0,
-  N20,
-  N200,
-  N20A,
-  N300,
-  R300,
-  R400,
-  R75,
-} from '@atlaskit/theme/colors';
+import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -36,63 +23,33 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 export const tableCellBackgroundColor = token('elevation.surface', N0);
 
 export const tableHeaderCellBackgroundColor = token(
-  'color.background.accent.gray.subtlest',
-  akEditorTableHeaderCellBackground,
+	'color.background.accent.gray.subtlest',
+	akEditorTableHeaderCellBackground,
 );
 
-export const tableToolbarColor = token(
-  'color.background.neutral.subtle',
-  akEditorTableToolbar,
-);
+export const tableToolbarColor = token('color.background.neutral.subtle', akEditorTableToolbar);
 export const tableTextColor = token('color.text.subtlest', N200);
-export const tableBorderColor = token(
-  'color.background.accent.gray.subtler',
-  akEditorTableBorder,
-);
-export const tableFloatingControlsColor = token(
-  'color.background.neutral',
-  N20,
-);
+export const tableBorderColor = token('color.background.accent.gray.subtler', akEditorTableBorder);
+export const tableFloatingControlsColor = token('color.background.neutral', N20);
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
 export const tableCellSelectedColor = token(
-  'color.blanket.selected',
-  akEditorTableCellBlanketSelected,
-);
-export const tableToolbarSelectedColor = token(
-  'color.background.selected.pressed',
-  B200,
-);
-export const tableBorderSelectedColor = token(
-  'color.border.focused',
-  akEditorTableBorderSelected,
-);
-export const tableCellSelectedDeleteIconColor = token(
-  'color.icon.subtle',
-  N300,
+	'color.blanket.selected',
+	akEditorTableCellBlanketSelected,
 );
+export const tableToolbarSelectedColor = token('color.background.selected.pressed', B200);
+export const tableBorderSelectedColor = token('color.border.focused', akEditorTableBorderSelected);
+export const tableCellSelectedDeleteIconColor = token('color.icon.subtle', N300);
 export const tableCellSelectedDeleteIconBackground = token(
-  'color.background.accent.gray.subtlest',
-  N20A,
-);
-export const tableCellDeleteColor = token(
-  'color.blanket.danger',
-  akEditorTableCellBlanketDeleted,
+	'color.background.accent.gray.subtlest',
+	N20A,
 );
+export const tableCellDeleteColor = token('color.blanket.danger', akEditorTableCellBlanketDeleted);
 
 export const tableBorderDeleteColor = token('color.border.danger', R400);
-export const tableToolbarDeleteColor = token(
-  'color.background.danger.pressed',
-  R75,
-);
-export const tableCellHoverDeleteIconColor = token(
-  'color.icon.inverse',
-  'white',
-);
-export const tableCellHoverDeleteIconBackground = token(
-  'color.background.danger.bold',
-  R300,
-);
+export const tableToolbarDeleteColor = token('color.background.danger.pressed', R75);
+export const tableCellHoverDeleteIconColor = token('color.icon.inverse', 'white');
+export const tableCellHoverDeleteIconBackground = token('color.background.danger.bold', R300);
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;
@@ -101,8 +58,7 @@ export const tableInsertColumnButtonSize = 20;
 export const tableDeleteButtonSize = 16;
 export const tableDeleteButtonOffset = 6;
 export const tableToolbarSize = akEditorTableToolbarSize;
-export const tableControlsSpacing =
-  tableMarginTop + tablePadding - tableCellBorderWidth;
+export const tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
 export const tableInsertColumnButtonOffset = 3;
 export const layoutButtonSize = 32;
 export const lineMarkerOffsetFromColumnControls = 13;
@@ -115,8 +71,7 @@ export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
 export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
-export const resizeHandlerZIndex =
-  columnControlsZIndex + akRichMediaResizeZIndex;
+export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
 export const contextualMenuDropdownWidth = 180;
 export const contextualMenuDropdownWidthDnD = 250;

package/src/ui/icons/AddColLeftIcon.tsx

@@ -1,43 +1,37 @@
 import React from 'react';
 
 export const AddColLeftIcon = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      width="24"
-      height="24"
-      transform="matrix(0 -1 1 0 0 24)"
-      fill="none"
-      fillOpacity="0.01"
-    />
-    <rect
-      x="12"
-      y="18"
-      width="12"
-      height="3"
-      rx="0.5"
-      transform="rotate(-90 12 18)"
-      fill="currentColor"
-    />
-    <rect
-      x="16"
-      y="18"
-      width="12"
-      height="3"
-      rx="0.5"
-      transform="rotate(-90 16 18)"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M7 11H5.99C5.72652 11.0026 5.47473 11.1092 5.28935 11.2964C5.10397 11.4837 4.99999 11.7365 5 12C5 12.556 5.444 13 5.99 13H7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V13H10.01C10.2735 12.9974 10.5253 12.8908 10.7107 12.7036C10.896 12.5163 11 12.2635 11 12C11 11.444 10.556 11 10.01 11H9V10C9 9.73478 8.89464 9.48043 8.70711 9.29289C8.51957 9.10536 8.26522 9 8 9C7.73478 9 7.48043 9.10536 7.29289 9.29289C7.10536 9.48043 7 9.73478 7 10V11Z"
-      fill="currentColor"
-    />
-  </svg>
+	<svg
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="currentColor"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="24" height="24" transform="matrix(0 -1 1 0 0 24)" fill="none" fillOpacity="0.01" />
+		<rect
+			x="12"
+			y="18"
+			width="12"
+			height="3"
+			rx="0.5"
+			transform="rotate(-90 12 18)"
+			fill="currentColor"
+		/>
+		<rect
+			x="16"
+			y="18"
+			width="12"
+			height="3"
+			rx="0.5"
+			transform="rotate(-90 16 18)"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M7 11H5.99C5.72652 11.0026 5.47473 11.1092 5.28935 11.2964C5.10397 11.4837 4.99999 11.7365 5 12C5 12.556 5.444 13 5.99 13H7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V13H10.01C10.2735 12.9974 10.5253 12.8908 10.7107 12.7036C10.896 12.5163 11 12.2635 11 12C11 11.444 10.556 11 10.01 11H9V10C9 9.73478 8.89464 9.48043 8.70711 9.29289C8.51957 9.10536 8.26522 9 8 9C7.73478 9 7.48043 9.10536 7.29289 9.29289C7.10536 9.48043 7 9.73478 7 10V11Z"
+			fill="currentColor"
+		/>
+	</svg>
 );

package/src/ui/icons/AddColRightIcon.tsx

@@ -1,43 +1,37 @@
 import React from 'react';
 
 export const AddColRightIcon = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      width="24"
-      height="24"
-      transform="translate(0 24) rotate(-90)"
-      fill="none"
-      fillOpacity="0.01"
-    />
-    <rect
-      x="9"
-      y="18"
-      width="12"
-      height="3"
-      rx="0.5"
-      transform="rotate(-90 9 18)"
-      fill="currentColor"
-    />
-    <rect
-      x="5"
-      y="18"
-      width="12"
-      height="3"
-      rx="0.5"
-      transform="rotate(-90 5 18)"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15 11L13.99 11C13.7265 11.0026 13.4747 11.1092 13.2893 11.2964C13.104 11.4837 13 11.7365 13 12C13 12.556 13.444 13 13.99 13L15 13L15 14C15 14.2652 15.1054 14.5196 15.2929 14.7071C15.4804 14.8946 15.7348 15 16 15C16.2652 15 16.5196 14.8946 16.7071 14.7071C16.8946 14.5196 17 14.2652 17 14L17 13L18.01 13C18.2735 12.9974 18.5253 12.8908 18.7107 12.7036C18.896 12.5163 19 12.2635 19 12C19 11.444 18.556 11 18.01 11L17 11L17 10C17 9.73478 16.8946 9.48043 16.7071 9.29289C16.5196 9.10536 16.2652 9 16 9C15.7348 9 15.4804 9.10536 15.2929 9.29289C15.1054 9.48043 15 9.73478 15 10L15 11Z"
-      fill="currentColor"
-    />
-  </svg>
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect
+			width="24"
+			height="24"
+			transform="translate(0 24) rotate(-90)"
+			fill="none"
+			fillOpacity="0.01"
+		/>
+		<rect
+			x="9"
+			y="18"
+			width="12"
+			height="3"
+			rx="0.5"
+			transform="rotate(-90 9 18)"
+			fill="currentColor"
+		/>
+		<rect
+			x="5"
+			y="18"
+			width="12"
+			height="3"
+			rx="0.5"
+			transform="rotate(-90 5 18)"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15 11L13.99 11C13.7265 11.0026 13.4747 11.1092 13.2893 11.2964C13.104 11.4837 13 11.7365 13 12C13 12.556 13.444 13 13.99 13L15 13L15 14C15 14.2652 15.1054 14.5196 15.2929 14.7071C15.4804 14.8946 15.7348 15 16 15C16.2652 15 16.5196 14.8946 16.7071 14.7071C16.8946 14.5196 17 14.2652 17 14L17 13L18.01 13C18.2735 12.9974 18.5253 12.8908 18.7107 12.7036C18.896 12.5163 19 12.2635 19 12C19 11.444 18.556 11 18.01 11L17 11L17 10C17 9.73478 16.8946 9.48043 16.7071 9.29289C16.5196 9.10536 16.2652 9 16 9C15.7348 9 15.4804 9.10536 15.2929 9.29289C15.1054 9.48043 15 9.73478 15 10L15 11Z"
+			fill="currentColor"
+		/>
+	</svg>
 );

package/src/ui/icons/AddRowAboveIcon.tsx

@@ -3,26 +3,20 @@ import React from 'react';
 import { token } from '@atlaskit/tokens';
 
 export const AddRowAboveIcon = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      width="24"
-      height="24"
-      fill={token('color.border.inverse', '#FFFFFF')}
-      fillOpacity="0.01"
-    />
-    <rect x="6" y="12" width="12" height="3" rx="0.5" fill="currentColor" />
-    <rect x="6" y="16" width="12" height="3" rx="0.5" fill="currentColor" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M13 7V5.99C12.9974 5.72652 12.8908 5.47473 12.7036 5.28935C12.5163 5.10397 12.2635 4.99999 12 5C11.444 5 11 5.444 11 5.99V7H10C9.73478 7 9.48043 7.10536 9.29289 7.29289C9.10536 7.48043 9 7.73478 9 8C9 8.26522 9.10536 8.51957 9.29289 8.70711C9.48043 8.89464 9.73478 9 10 9H11V10.01C11.0026 10.2735 11.1092 10.5253 11.2964 10.7107C11.4837 10.896 11.7365 11 12 11C12.556 11 13 10.556 13 10.01V9H14C14.2652 9 14.5196 8.89464 14.7071 8.70711C14.8946 8.51957 15 8.26522 15 8C15 7.73478 14.8946 7.48043 14.7071 7.29289C14.5196 7.10536 14.2652 7 14 7H13Z"
-      fill="currentColor"
-    />
-  </svg>
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect
+			width="24"
+			height="24"
+			fill={token('color.border.inverse', '#FFFFFF')}
+			fillOpacity="0.01"
+		/>
+		<rect x="6" y="12" width="12" height="3" rx="0.5" fill="currentColor" />
+		<rect x="6" y="16" width="12" height="3" rx="0.5" fill="currentColor" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M13 7V5.99C12.9974 5.72652 12.8908 5.47473 12.7036 5.28935C12.5163 5.10397 12.2635 4.99999 12 5C11.444 5 11 5.444 11 5.99V7H10C9.73478 7 9.48043 7.10536 9.29289 7.29289C9.10536 7.48043 9 7.73478 9 8C9 8.26522 9.10536 8.51957 9.29289 8.70711C9.48043 8.89464 9.73478 9 10 9H11V10.01C11.0026 10.2735 11.1092 10.5253 11.2964 10.7107C11.4837 10.896 11.7365 11 12 11C12.556 11 13 10.556 13 10.01V9H14C14.2652 9 14.5196 8.89464 14.7071 8.70711C14.8946 8.51957 15 8.26522 15 8C15 7.73478 14.8946 7.48043 14.7071 7.29289C14.5196 7.10536 14.2652 7 14 7H13Z"
+			fill="currentColor"
+		/>
+	</svg>
 );

package/src/ui/icons/AddRowBelowIcon.tsx

@@ -3,43 +3,37 @@ import React from 'react';
 import { token } from '@atlaskit/tokens';
 
 export const AddRowBelowIcon = () => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      width="24"
-      height="24"
-      transform="matrix(-1 0 0 -1 24 24)"
-      fill={token('color.border.inverse', '#FFFFFF')}
-      fillOpacity="0.01"
-    />
-    <rect
-      x="18"
-      y="12"
-      width="12"
-      height="3"
-      rx="0.5"
-      transform="rotate(-180 18 12)"
-      fill="currentColor"
-    />
-    <rect
-      x="18"
-      y="8"
-      width="12"
-      height="3"
-      rx="0.5"
-      transform="rotate(-180 18 8)"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z"
-      fill="currentColor"
-    />
-  </svg>
+	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect
+			width="24"
+			height="24"
+			transform="matrix(-1 0 0 -1 24 24)"
+			fill={token('color.border.inverse', '#FFFFFF')}
+			fillOpacity="0.01"
+		/>
+		<rect
+			x="18"
+			y="12"
+			width="12"
+			height="3"
+			rx="0.5"
+			transform="rotate(-180 18 12)"
+			fill="currentColor"
+		/>
+		<rect
+			x="18"
+			y="8"
+			width="12"
+			height="3"
+			rx="0.5"
+			transform="rotate(-180 18 8)"
+			fill="currentColor"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M11 17V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11Z"
+			fill="currentColor"
+		/>
+	</svg>
 );

package/src/ui/icons/DisplayModeIcon.tsx

@@ -4,38 +4,38 @@ import Icon from '@atlaskit/icon';
 import type { CustomGlyphProps, GlyphProps } from '@atlaskit/icon/types';
 
 export const DisplayModeGlyth = (props: CustomGlyphProps) => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <rect x="4" y="5" width="4" height="14" rx="1" fill="currentColor" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z"
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z"
-        fill="currentColor"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
+	return (
+		<svg
+			width="24"
+			height="24"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<rect x="4" y="5" width="4" height="14" rx="1" fill="currentColor" />
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M11 5C10.4477 5 10 5.44772 10 6V9.10102C11.0503 8.02921 12.4424 7.29368 14 7.07089V6C14 5.44772 13.5523 5 13 5H11Z"
+				fill="currentColor"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M17 5C16.4477 5 16 5.44772 16 6V7.07089C17.5576 7.29368 18.9497 8.02921 20 9.10102V6C20 5.44772 19.5523 5 19 5H17Z"
+				fill="currentColor"
+			/>
+			<path
+				fillRule="evenodd"
+				clipRule="evenodd"
+				d="M21 14C21 17.3137 18.3137 20 15 20C11.6863 20 9 17.3137 9 14C9 10.6863 11.6863 8 15 8C18.3137 8 21 10.6863 21 14ZM12 15C12 14.4477 12.4477 14 13 14V12C13 10.8954 13.8954 10 15 10C16.1046 10 17 10.8954 17 12V14C17.5523 14 18 14.4477 18 15V17C18 17.5523 17.5523 18 17 18H13C12.4477 18 12 17.5523 12 17V15ZM16 14V12C16 11.4477 15.5523 11 15 11C14.4477 11 14 11.4477 14 12V14H16Z"
+				fill="currentColor"
+			/>
+		</svg>
+	);
 };
 
 export const DisplayModeIcon = (props: GlyphProps) => {
-  return <Icon glyph={DisplayModeGlyth} {...props} />;
+	return <Icon glyph={DisplayModeGlyth} {...props} />;
 };

package/src/ui/icons/DragHandleDisabledIcon.tsx

@@ -1,27 +1,25 @@
 import React from 'react';
 
 interface DragHandleDisabledIconProps {
-  style?: React.CSSProperties;
+	style?: React.CSSProperties;
 }
 
-export const DragHandleDisabledIcon = ({
-  style,
-}: DragHandleDisabledIconProps) => (
-  <svg
-    width="24"
-    height="16"
-    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"
-  >
-    <rect width="24" height="16" rx="4" />
-    <g>
-      <rect x="7" y="4" width="2" height="8" rx="1" />
-      <rect x="11" y="4" width="2" height="8" rx="1" />
-      <rect x="15" y="4" width="2" height="8" rx="1" />
-    </g>
-  </svg>
+export const DragHandleDisabledIcon = ({ style }: DragHandleDisabledIconProps) => (
+	<svg
+		width="24"
+		height="16"
+		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"
+	>
+		<rect width="24" height="16" rx="4" />
+		<g>
+			<rect x="7" y="4" width="2" height="8" rx="1" />
+			<rect x="11" y="4" width="2" height="8" rx="1" />
+			<rect x="15" y="4" width="2" height="8" rx="1" />
+		</g>
+	</svg>
 );

package/src/ui/icons/DragHandleIcon.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 
 export const DragHandleIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="16"
-    fill="none"
-    data-testid="drag-icon-enabled"
-  >
-    <rect width="24" height="16" rx="4" />
-    <g>
-      <path d="M9 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM9 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" />
-    </g>
-  </svg>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="16"
+		fill="none"
+		data-testid="drag-icon-enabled"
+	>
+		<rect width="24" height="16" rx="4" />
+		<g>
+			<path d="M9 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM9 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" />
+		</g>
+	</svg>
 );