@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
 
 import {
-  attachClosestEdge,
-  type Edge,
+	attachClosestEdge,
+	type Edge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
@@ -10,90 +10,87 @@ import { getDragBehaviour } from '../../../pm-plugins/drag-and-drop/utils/getDra
 import type { DraggableSourceData } from '../../../types';
 
 export type RowDropTargetProps = {
-  index: number;
-  localId?: string;
-  style?: React.CSSProperties;
+	index: number;
+	localId?: string;
+	style?: React.CSSProperties;
 };
 
 const RowDropTarget = ({ index, localId, style }: RowDropTargetProps) => {
-  const dropTargetRef = useRef<HTMLDivElement | null>(null);
+	const dropTargetRef = useRef<HTMLDivElement | null>(null);
 
-  useEffect(() => {
-    if (!dropTargetRef.current) {
-      return;
-    }
+	useEffect(() => {
+		if (!dropTargetRef.current) {
+			return;
+		}
 
-    return dropTargetForElements({
-      element: dropTargetRef.current,
-      canDrop({ source, input }) {
-        const data = source.data as DraggableSourceData;
-        const behaviour = getDragBehaviour(input);
+		return dropTargetForElements({
+			element: dropTargetRef.current,
+			canDrop({ source, input }) {
+				const data = source.data as DraggableSourceData;
+				const behaviour = getDragBehaviour(input);
 
-        // A move drop is limited too where it can go, however a clone can drop can go anywhere.
-        const isDropValid =
-          behaviour === 'move'
-            ? data.indexes?.indexOf(index) === -1
-            : behaviour === 'clone';
+				// A move drop is limited too where it can go, however a clone can drop can go anywhere.
+				const isDropValid =
+					behaviour === 'move' ? data.indexes?.indexOf(index) === -1 : behaviour === 'clone';
 
-        return (
-          // Only draggables of row type can be dropped on this target
-          data.type === 'table-row' &&
-          // Only draggables which came from the same table can be dropped on this target
-          data.localId === localId &&
-          // Only draggables which DO NOT include this drop targets index can be dropped
-          !!data.indexes?.length &&
-          isDropValid
-        );
-      },
-      getDropEffect: ({ input }) =>
-        getDragBehaviour(input) === 'clone' ? 'copy' : 'move',
-      getIsSticky: () => true,
-      getData({ source, input, element }) {
-        const data = {
-          localId,
-          type: 'table-row',
-          targetIndex: index,
-        };
+				return (
+					// Only draggables of row type can be dropped on this target
+					data.type === 'table-row' &&
+					// Only draggables which came from the same table can be dropped on this target
+					data.localId === localId &&
+					// Only draggables which DO NOT include this drop targets index can be dropped
+					!!data.indexes?.length &&
+					isDropValid
+				);
+			},
+			getDropEffect: ({ input }) => (getDragBehaviour(input) === 'clone' ? 'copy' : 'move'),
+			getIsSticky: () => true,
+			getData({ source, input, element }) {
+				const data = {
+					localId,
+					type: 'table-row',
+					targetIndex: index,
+				};
 
-        const srcData = source.data as DraggableSourceData;
-        const behaviour = getDragBehaviour(input);
+				const srcData = source.data as DraggableSourceData;
+				const behaviour = getDragBehaviour(input);
 
-        // During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
-        const allowedEdges: Edge[] =
-          behaviour === 'move'
-            ? srcData.indexes?.reduce(
-                (acc, v) => {
-                  if (v - index === -1) {
-                    acc.shift();
-                  }
-                  if (v - index === 1) {
-                    acc.pop();
-                  }
-                  return acc;
-                },
-                ['top', 'bottom'],
-              )
-            : ['top', 'bottom'];
+				// During a move op there's no point in allowing edges to be dropped on which result in no change/move to occur.
+				const allowedEdges: Edge[] =
+					behaviour === 'move'
+						? srcData.indexes?.reduce(
+								(acc, v) => {
+									if (v - index === -1) {
+										acc.shift();
+									}
+									if (v - index === 1) {
+										acc.pop();
+									}
+									return acc;
+								},
+								['top', 'bottom'],
+							)
+						: ['top', 'bottom'];
 
-        return attachClosestEdge(data, {
-          input,
-          element,
-          allowedEdges,
-        });
-      },
-    });
-  }, [index, localId]);
+				return attachClosestEdge(data, {
+					input,
+					element,
+					allowedEdges,
+				});
+			},
+		});
+	}, [index, localId]);
 
-  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}
-      data-testid="table-floating-row-controls-drop-target"
-    ></div>
-  );
+	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}
+			data-testid="table-floating-row-controls-drop-target"
+		></div>
+	);
 };
 
 export default RowDropTarget;

package/src/ui/TableFloatingControls/index.tsx

@@ -15,218 +15,216 @@ import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
 
 import {
-  CornerControls,
-  DragCornerControls,
-  DragCornerControlsWithSelection,
+	CornerControls,
+	DragCornerControls,
+	DragCornerControlsWithSelection,
 } from './CornerControls';
 import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { DragControls, RowControls } from './RowControls';
 
 export interface TableFloatingControlsProps {
-  editorView: EditorView;
-  selection?: Selection;
-  tableRef?: HTMLTableElement;
-  tableNode?: PmNode;
-  tableActive?: boolean;
-  isInDanger?: boolean;
-  isTableHovered?: boolean;
-  isResizing?: boolean;
-  isHeaderRowEnabled?: boolean;
-  isHeaderColumnEnabled?: boolean;
-  isNumberColumnEnabled?: boolean;
-  isDragAndDropEnabled?: boolean;
-  hasHeaderRow?: boolean;
-  headerRowHeight?: number;
-  hoveredRows?: number[];
-  hoveredCell?: CellHoverMeta;
-  ordering?: TableColumnOrdering;
-  stickyHeader?: RowStickyState;
-  insertRowButtonIndex?: number;
-  tableWrapperWidth?: number;
+	editorView: EditorView;
+	selection?: Selection;
+	tableRef?: HTMLTableElement;
+	tableNode?: PmNode;
+	tableActive?: boolean;
+	isInDanger?: boolean;
+	isTableHovered?: boolean;
+	isResizing?: boolean;
+	isHeaderRowEnabled?: boolean;
+	isHeaderColumnEnabled?: boolean;
+	isNumberColumnEnabled?: boolean;
+	isDragAndDropEnabled?: boolean;
+	hasHeaderRow?: boolean;
+	headerRowHeight?: number;
+	hoveredRows?: number[];
+	hoveredCell?: CellHoverMeta;
+	ordering?: TableColumnOrdering;
+	stickyHeader?: RowStickyState;
+	insertRowButtonIndex?: number;
+	tableWrapperWidth?: number;
 }
 
 export const TableFloatingControls = ({
-  editorView,
-  tableRef,
-  tableNode,
-  isInDanger,
-  isResizing,
-  isNumberColumnEnabled,
-  isHeaderRowEnabled,
-  isHeaderColumnEnabled,
-  tableActive,
-  hasHeaderRow,
-  hoveredRows,
-  stickyHeader,
-  isDragAndDropEnabled,
-  hoveredCell,
-  isTableHovered,
-  tableWrapperWidth,
-  api,
+	editorView,
+	tableRef,
+	tableNode,
+	isInDanger,
+	isResizing,
+	isNumberColumnEnabled,
+	isHeaderRowEnabled,
+	isHeaderColumnEnabled,
+	tableActive,
+	hasHeaderRow,
+	hoveredRows,
+	stickyHeader,
+	isDragAndDropEnabled,
+	hoveredCell,
+	isTableHovered,
+	tableWrapperWidth,
+	api,
 }: TableFloatingControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
-  const _selectRow = useCallback(
-    (row: number, expand: boolean) => {
-      const { state, dispatch } = editorView;
-      // fix for issue ED-4665
-      if (browser.ie_version === 11) {
-        (editorView.dom as HTMLElement).blur();
-      }
-      selectRow(row, expand)(state, dispatch);
-    },
-    [editorView],
-  );
+	const _selectRow = useCallback(
+		(row: number, expand: boolean) => {
+			const { state, dispatch } = editorView;
+			// fix for issue ED-4665
+			if (browser.ie_version === 11) {
+				(editorView.dom as HTMLElement).blur();
+			}
+			selectRow(row, expand)(state, dispatch);
+		},
+		[editorView],
+	);
 
-  const _selectRows = useCallback(
-    (rowIndexes: number[]) => {
-      const { state, dispatch } = editorView;
-      // fix for issue ED-4665
-      if (browser.ie_version === 11) {
-        (editorView.dom as HTMLElement).blur();
-      }
-      selectRows(rowIndexes)(state, dispatch);
-    },
-    [editorView],
-  );
+	const _selectRows = useCallback(
+		(rowIndexes: number[]) => {
+			const { state, dispatch } = editorView;
+			// fix for issue ED-4665
+			if (browser.ie_version === 11) {
+				(editorView.dom as HTMLElement).blur();
+			}
+			selectRows(rowIndexes)(state, dispatch);
+		},
+		[editorView],
+	);
 
-  const _hoverRows = useCallback(
-    (rows: Array<number>, danger?: boolean) => {
-      const { state, dispatch } = editorView;
-      hoverRows(rows, danger)(state, dispatch);
-    },
-    [editorView],
-  );
+	const _hoverRows = useCallback(
+		(rows: Array<number>, danger?: boolean) => {
+			const { state, dispatch } = editorView;
+			hoverRows(rows, danger)(state, dispatch);
+		},
+		[editorView],
+	);
 
-  // re-use across numbered columns and row controls
-  const updateCellHoverLocation = useCallback(
-    (rowIndex: number) => {
-      const { state, dispatch } = editorView;
+	// re-use across numbered columns and row controls
+	const updateCellHoverLocation = useCallback(
+		(rowIndex: number) => {
+			const { state, dispatch } = editorView;
 
-      if (tableActive) {
-        // For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
-        // of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
-        // also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
-        // current column index. We can just force it to 0.
-        hoverCell(rowIndex, 0)(state, dispatch);
-      }
-    },
-    [editorView, tableActive],
-  );
+			if (tableActive) {
+				// For context:  Whenever we mouse over a column or row drag handle, we will ALWAYS be hovering over the 0 index
+				// of the opposite dimension. For example; here when we mouse over the row drag handle then we're technically
+				// also hovering over column 0 index. And vice-versa with columns. This means we don't need to worry about knowing the
+				// current column index. We can just force it to 0.
+				hoverCell(rowIndex, 0)(state, dispatch);
+			}
+		},
+		[editorView, tableActive],
+	);
 
-  if (!tableRef) {
-    return null;
-  }
+	if (!tableRef) {
+		return null;
+	}
 
-  const stickyTop =
-    stickyHeader && stickyHeader.sticky && hasHeaderRow
-      ? stickyHeader.top
-      : undefined;
+	const stickyTop =
+		stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
 
-  const wrapperClassName = isDragAndDropEnabled
-    ? ClassName.DRAG_ROW_CONTROLS_WRAPPER
-    : ClassName.ROW_CONTROLS_WRAPPER;
+	const wrapperClassName = isDragAndDropEnabled
+		? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+		: 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 ? (
-          <NumberColumn
-            editorView={editorView}
-            hoverRows={_hoverRows}
-            tableRef={tableRef}
-            tableActive={tableActive}
-            hoveredRows={hoveredRows}
-            hasHeaderRow={hasHeaderRow}
-            isInDanger={isInDanger}
-            isResizing={isResizing}
-            selectRow={_selectRow}
-            updateCellHoverLocation={updateCellHoverLocation}
-            stickyTop={stickyTop}
-            isDragAndDropEnabled={isDragAndDropEnabled}
-          />
-        ) : null}
+	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 ? (
+					<NumberColumn
+						editorView={editorView}
+						hoverRows={_hoverRows}
+						tableRef={tableRef}
+						tableActive={tableActive}
+						hoveredRows={hoveredRows}
+						hasHeaderRow={hasHeaderRow}
+						isInDanger={isInDanger}
+						isResizing={isResizing}
+						selectRow={_selectRow}
+						updateCellHoverLocation={updateCellHoverLocation}
+						stickyTop={stickyTop}
+						isDragAndDropEnabled={isDragAndDropEnabled}
+					/>
+				) : null}
 
-        {tableActive && (
-          <>
-            {isDragAndDropEnabled ? (
-              <>
-                {getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
-                  <DragCornerControlsWithSelection
-                    editorView={editorView}
-                    tableRef={tableRef}
-                    isInDanger={isInDanger}
-                    isResizing={isResizing}
-                    api={api}
-                  />
-                ) : (
-                  <DragCornerControls
-                    editorView={editorView}
-                    tableRef={tableRef}
-                    isInDanger={isInDanger}
-                    isResizing={isResizing}
-                  />
-                )}
-                <DragControls
-                  tableRef={tableRef}
-                  tableNode={tableNode}
-                  hoveredCell={hoveredCell}
-                  isTableHovered={isTableHovered}
-                  editorView={editorView}
-                  tableActive={tableActive}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  tableWidth={tableWrapperWidth!}
-                  hoverRows={_hoverRows}
-                  selectRow={_selectRow}
-                  selectRows={_selectRows}
-                  updateCellHoverLocation={updateCellHoverLocation}
-                />
-              </>
-            ) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
-              <FloatingControlsWithSelection
-                editorView={editorView}
-                tableRef={tableRef}
-                isInDanger={isInDanger}
-                isResizing={isResizing}
-                isHeaderRowEnabled={isHeaderRowEnabled}
-                isHeaderColumnEnabled={isHeaderColumnEnabled}
-                hoveredRows={hoveredRows}
-                stickyTop={tableActive ? stickyTop : undefined}
-                tableActive={tableActive}
-                hoverRows={_hoverRows}
-                selectRow={_selectRow}
-                api={api}
-              />
-            ) : (
-              <>
-                <CornerControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  isHeaderRowEnabled={isHeaderRowEnabled}
-                  isHeaderColumnEnabled={isHeaderColumnEnabled}
-                  hoveredRows={hoveredRows}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-                <RowControls
-                  editorView={editorView}
-                  tableRef={tableRef}
-                  hoverRows={_hoverRows}
-                  hoveredRows={hoveredRows}
-                  isInDanger={isInDanger}
-                  isResizing={isResizing}
-                  selectRow={_selectRow}
-                  stickyTop={tableActive ? stickyTop : undefined}
-                />
-              </>
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
+				{tableActive && (
+					<>
+						{isDragAndDropEnabled ? (
+							<>
+								{getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+									<DragCornerControlsWithSelection
+										editorView={editorView}
+										tableRef={tableRef}
+										isInDanger={isInDanger}
+										isResizing={isResizing}
+										api={api}
+									/>
+								) : (
+									<DragCornerControls
+										editorView={editorView}
+										tableRef={tableRef}
+										isInDanger={isInDanger}
+										isResizing={isResizing}
+									/>
+								)}
+								<DragControls
+									tableRef={tableRef}
+									tableNode={tableNode}
+									hoveredCell={hoveredCell}
+									isTableHovered={isTableHovered}
+									editorView={editorView}
+									tableActive={tableActive}
+									isInDanger={isInDanger}
+									isResizing={isResizing}
+									tableWidth={tableWrapperWidth!}
+									hoverRows={_hoverRows}
+									selectRow={_selectRow}
+									selectRows={_selectRows}
+									updateCellHoverLocation={updateCellHoverLocation}
+								/>
+							</>
+						) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+							<FloatingControlsWithSelection
+								editorView={editorView}
+								tableRef={tableRef}
+								isInDanger={isInDanger}
+								isResizing={isResizing}
+								isHeaderRowEnabled={isHeaderRowEnabled}
+								isHeaderColumnEnabled={isHeaderColumnEnabled}
+								hoveredRows={hoveredRows}
+								stickyTop={tableActive ? stickyTop : undefined}
+								tableActive={tableActive}
+								hoverRows={_hoverRows}
+								selectRow={_selectRow}
+								api={api}
+							/>
+						) : (
+							<>
+								<CornerControls
+									editorView={editorView}
+									tableRef={tableRef}
+									isInDanger={isInDanger}
+									isResizing={isResizing}
+									isHeaderRowEnabled={isHeaderRowEnabled}
+									isHeaderColumnEnabled={isHeaderColumnEnabled}
+									hoveredRows={hoveredRows}
+									stickyTop={tableActive ? stickyTop : undefined}
+								/>
+								<RowControls
+									editorView={editorView}
+									tableRef={tableRef}
+									hoverRows={_hoverRows}
+									hoveredRows={hoveredRows}
+									isInDanger={isInDanger}
+									isResizing={isResizing}
+									selectRow={_selectRow}
+									stickyTop={tableActive ? stickyTop : undefined}
+								/>
+							</>
+						)}
+					</>
+				)}
+			</div>
+		</div>
+	);
 };
 
 export default TableFloatingControls;

package/src/ui/TableFullWidthLabel/index.tsx

@@ -7,30 +7,30 @@ import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
 const tableFullWidthLabelWrapperStyles = xcss({
-  height: token('space.400', '32px'),
-  display: 'flex',
-  backgroundColor: 'elevation.surface.overlay',
-  borderRadius: 'border.radius',
-  boxShadow:'elevation.shadow.overlay',
-  lineHeight: 1,
-  boxSizing: 'border-box',
-  alignItems: 'center',
+	height: token('space.400', '32px'),
+	display: 'flex',
+	backgroundColor: 'elevation.surface.overlay',
+	borderRadius: 'border.radius',
+	boxShadow: 'elevation.shadow.overlay',
+	lineHeight: 1,
+	boxSizing: 'border-box',
+	alignItems: 'center',
 });
 
 const tableFullWidthLabelStyles = xcss({
-  marginLeft: 'space.100',
-  marginRight: 'space.100',
-  paddingLeft: 'space.075',
-  paddingRight: 'space.075',
-  paddingTop: 'space.050',
-  paddingBottom: 'space.050',
+	marginLeft: 'space.100',
+	marginRight: 'space.100',
+	paddingLeft: 'space.075',
+	paddingRight: 'space.075',
+	paddingTop: 'space.050',
+	paddingBottom: 'space.050',
 });
 
 export const FullWidthDisplay = () => {
-  const { formatMessage } = useIntl();
-  return (
-      <Box xcss={tableFullWidthLabelWrapperStyles}>
-        <Inline xcss={tableFullWidthLabelStyles}>{formatMessage(messages.fullWidthLabel)}</Inline>
-      </Box>
-  );
+	const { formatMessage } = useIntl();
+	return (
+		<Box xcss={tableFullWidthLabelWrapperStyles}>
+			<Inline xcss={tableFullWidthLabelStyles}>{formatMessage(messages.fullWidthLabel)}</Inline>
+		</Box>
+	);
 };