@atlaskit/editor-plugin-table 7.16.11 → 7.16.12

package/src/ui/DragPreview/index.tsx

@@ -6,44 +6,44 @@ import type { TableDirection } from '../../types';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 
 const boxStyles = xcss({
-  borderColor: 'color.border.focused',
-  borderStyle: 'solid',
-  borderRadius: 'border.radius.100',
-  borderWidth: 'border.width.outline',
-  backgroundColor: 'color.blanket.selected',
+	borderColor: 'color.border.focused',
+	borderStyle: 'solid',
+	borderRadius: 'border.radius.100',
+	borderWidth: 'border.width.outline',
+	backgroundColor: 'color.blanket.selected',
 });
 
 export const DragPreview = ({
-  direction,
-  width,
-  height,
+	direction,
+	width,
+	height,
 }: {
-  direction: TableDirection;
-  width: number;
-  height: number;
+	direction: TableDirection;
+	width: number;
+	height: number;
 }) => {
-  let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
-  let marginTop = direction === 'row' ? height / 2 - 14 : -10;
-  let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
-  return (
-    <Box
-      xcss={boxStyles}
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-      }}
-    >
-      <DragInMotionIcon
-        style={{
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          position: 'absolute',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          marginLeft: `${marginLeft}px`,
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          marginTop: `${marginTop}px`,
-          transform: transform,
-        }}
-      />
-    </Box>
-  );
+	let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+	let marginTop = direction === 'row' ? height / 2 - 14 : -10;
+	let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+	return (
+		<Box
+			xcss={boxStyles}
+			style={{
+				width: `${width}px`,
+				height: `${height}px`,
+			}}
+		>
+			<DragInMotionIcon
+				style={{
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+					position: 'absolute',
+					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+					marginLeft: `${marginLeft}px`,
+					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+					marginTop: `${marginTop}px`,
+					transform: transform,
+				}}
+			/>
+		</Box>
+	);
 };

package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx

@@ -2,55 +2,47 @@
 import { jsx } from '@emotion/react';
 
 import { ButtonGroup } from '@atlaskit/button';
-import type {
-  Command,
-  FloatingToolbarItem,
-} from '@atlaskit/editor-common/types';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import {
-  FloatingToolbarButton as Button,
-  FloatingToolbarSeparator,
+	FloatingToolbarButton as Button,
+	FloatingToolbarSeparator,
 } from '@atlaskit/editor-common/ui';
 import { Box, xcss } from '@atlaskit/primitives';
 
 const containerStyles = xcss({
-  marginLeft: 'space.100',
+	marginLeft: 'space.100',
 });
 
 type Props = {
-  alignmentButtons: FloatingToolbarItem<Command>[];
-  dispatchCommand: (command: Command) => void;
+	alignmentButtons: FloatingToolbarItem<Command>[];
+	dispatchCommand: (command: Command) => void;
 };
 
-export const FloatingAlignmentButtons = ({
-  alignmentButtons,
-  dispatchCommand,
-}: Props) => {
-  return (
-    <Box xcss={containerStyles}>
-      <ButtonGroup>
-        {alignmentButtons.map((item, idx) => {
-          switch (item.type) {
-            case 'separator':
-              return <FloatingToolbarSeparator key={idx} />;
-            case 'button':
-              const ButtonIcon = item.icon as React.ComponentClass<any>;
-              return (
-                <Button
-                  key={idx}
-                  icon={
-                    item.icon ? <ButtonIcon label={item.title} /> : undefined
-                  }
-                  title={item.title}
-                  selected={item.selected}
-                  disabled={item.disabled}
-                  onClick={() => {
-                    dispatchCommand(item.onClick);
-                  }}
-                />
-              );
-          }
-        })}
-      </ButtonGroup>
-    </Box>
-  );
+export const FloatingAlignmentButtons = ({ alignmentButtons, dispatchCommand }: Props) => {
+	return (
+		<Box xcss={containerStyles}>
+			<ButtonGroup>
+				{alignmentButtons.map((item, idx) => {
+					switch (item.type) {
+						case 'separator':
+							return <FloatingToolbarSeparator key={idx} />;
+						case 'button':
+							const ButtonIcon = item.icon as React.ComponentClass<any>;
+							return (
+								<Button
+									key={idx}
+									icon={item.icon ? <ButtonIcon label={item.title} /> : undefined}
+									title={item.title}
+									selected={item.selected}
+									disabled={item.disabled}
+									onClick={() => {
+										dispatchCommand(item.onClick);
+									}}
+								/>
+							);
+					}
+				})}
+			</ButtonGroup>
+		</Box>
+	);
 };

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -13,178 +13,175 @@ import { insertColumnButtonOffset } from '../common-styles';
 export const BUTTON_WIDTH = 20;
 
 export interface Props {
-  children: React.ReactNode;
-  mountTo: HTMLElement;
-  offset: number;
-  stickyHeader: RowStickyState;
-  targetCellPosition: number;
-  targetCellRef: HTMLElement;
-  tableWrapper: HTMLElement;
-  isContextualMenuOpen: boolean | undefined;
+	children: React.ReactNode;
+	mountTo: HTMLElement;
+	offset: number;
+	stickyHeader: RowStickyState;
+	targetCellPosition: number;
+	targetCellRef: HTMLElement;
+	tableWrapper: HTMLElement;
+	isContextualMenuOpen: boolean | undefined;
 }
 
 interface CalcLeftPosData {
-  buttonWidth: number;
-  cellRectLeft: number;
-  cellRefWidth: number;
-  offset: number;
+	buttonWidth: number;
+	cellRectLeft: number;
+	cellRefWidth: number;
+	offset: number;
 }
 
 export const calcLeftPos = ({
-  buttonWidth,
-  cellRectLeft,
-  cellRefWidth,
-  offset,
+	buttonWidth,
+	cellRectLeft,
+	cellRefWidth,
+	offset,
 }: CalcLeftPosData) => {
-  return cellRectLeft + cellRefWidth - buttonWidth - offset;
+	return cellRectLeft + cellRefWidth - buttonWidth - offset;
 };
 
 export const calcObserverTargetMargin = (
-  tableWrapper: HTMLElement,
-  fixedButtonRefCurrent: HTMLElement,
+	tableWrapper: HTMLElement,
+	fixedButtonRefCurrent: HTMLElement,
 ) => {
-  const tableWrapperRect = tableWrapper.getBoundingClientRect();
-  const fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
-  const scrollLeft = tableWrapper.scrollLeft;
-  return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
+	const tableWrapperRect = tableWrapper.getBoundingClientRect();
+	const fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
+	const scrollLeft = tableWrapper.scrollLeft;
+	return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
 };
 
 export const FixedButton = ({
-  children,
-  isContextualMenuOpen,
-  mountTo,
-  offset,
-  stickyHeader,
-  tableWrapper,
-  targetCellPosition,
-  targetCellRef,
+	children,
+	isContextualMenuOpen,
+	mountTo,
+	offset,
+	stickyHeader,
+	tableWrapper,
+	targetCellPosition,
+	targetCellRef,
 }: Props) => {
-  const fixedButtonRef = useRef<HTMLDivElement | null>(null);
-  const observerTargetRef = useRef<HTMLDivElement | null>(null);
-
-  // Using refs here rather than state to prevent heaps of renders on scroll
-  const scrollDataRef = useRef(0);
-  const leftPosDataRef = useRef(0);
-
-  useEffect(() => {
-    const observerTargetRefCurrent = observerTargetRef.current;
-    const fixedButtonRefCurrent = fixedButtonRef.current;
-
-    if (fixedButtonRefCurrent && observerTargetRefCurrent) {
-      scrollDataRef.current = tableWrapper.scrollLeft;
-      leftPosDataRef.current = 0;
-      // Hide the button initially in case there's a flash of the button being
-      // outside the table before the Intersection Observer fires
-      fixedButtonRefCurrent.style.visibility = 'hidden';
-
-      const margin = calcObserverTargetMargin(
-        tableWrapper,
-        fixedButtonRefCurrent,
-      );
-
-      // Much more simple and predictable to add this margin to the observer target
-      // rather than using it to calculate the rootMargin values
-      observerTargetRefCurrent.style.marginLeft = `${margin}px`;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              fixedButtonRefCurrent.style.visibility = 'visible';
-            } else {
-              fixedButtonRefCurrent.style.visibility = 'hidden';
-            }
-          });
-        },
-        {
-          root: tableWrapper,
-          rootMargin: `0px ${insertColumnButtonOffset}px 0px 0px`,
-          threshold: 1,
-        },
-      );
-
-      const handleScroll = rafSchedule((event) => {
-        if (fixedButtonRef.current) {
-          const delta = event.target.scrollLeft - scrollDataRef.current;
-          const style = `translateX(${leftPosDataRef.current - delta}px)`;
-          fixedButtonRef.current.style.transform = style;
-
-          scrollDataRef.current = event.target.scrollLeft;
-          leftPosDataRef.current = leftPosDataRef.current - delta;
-        }
-      });
-
-      observer.observe(observerTargetRefCurrent);
-      tableWrapper.addEventListener('scroll', handleScroll);
-
-      return () => {
-        tableWrapper.removeEventListener('scroll', handleScroll);
-        fixedButtonRefCurrent.style.transform = '';
-        observer.unobserve(observerTargetRefCurrent);
-      };
-    }
-  }, [
-    fixedButtonRef,
-    observerTargetRef,
-    tableWrapper,
-    targetCellPosition,
-    targetCellRef,
-    isContextualMenuOpen,
-  ]);
-
-  const targetCellRect = targetCellRef.getBoundingClientRect();
-
-  // Using a portal here to ensure wrapperRef has the tableWrapper as an
-  // ancestor. This is required to make the Intersection Observer work.
-  return createPortal(
-    // Using observerTargetRef here for our Intersection Observer. There is issues
-    // getting the observer to work just using the fixedButtonRef, possible due
-    // to using position fixed on this Element, or possibly due to its position
-    // being changed on scroll.
-    <div
-      ref={observerTargetRef}
-      style={{
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        position: 'absolute',
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        top: token('space.0', '0px'),
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        left: token('space.0', '0px'),
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        width: token('space.250', '20px'), // BUTTON_WIDTH
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        height: token('space.250', '20px'), // BUTTON_WIDTH
-      }}
-    >
-      <div
-        ref={fixedButtonRef}
-        style={{
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          position: 'fixed',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          top: stickyHeader.top + stickyHeader.padding + offset * 2,
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          zIndex: akEditorTableCellOnStickyHeaderZIndex,
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          left: calcLeftPos({
-            buttonWidth: BUTTON_WIDTH,
-            cellRectLeft: targetCellRect.left,
-            cellRefWidth: targetCellRef.clientWidth,
-            offset,
-          }),
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          width: token('space.250', '20px'), // BUTTON_WIDTH
-// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: token('space.250', '20px'), // BUTTON_WIDTH
-        }}
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
-      >
-        {children}
-      </div>
-    </div>,
-    mountTo,
-  );
+	const fixedButtonRef = useRef<HTMLDivElement | null>(null);
+	const observerTargetRef = useRef<HTMLDivElement | null>(null);
+
+	// Using refs here rather than state to prevent heaps of renders on scroll
+	const scrollDataRef = useRef(0);
+	const leftPosDataRef = useRef(0);
+
+	useEffect(() => {
+		const observerTargetRefCurrent = observerTargetRef.current;
+		const fixedButtonRefCurrent = fixedButtonRef.current;
+
+		if (fixedButtonRefCurrent && observerTargetRefCurrent) {
+			scrollDataRef.current = tableWrapper.scrollLeft;
+			leftPosDataRef.current = 0;
+			// Hide the button initially in case there's a flash of the button being
+			// outside the table before the Intersection Observer fires
+			fixedButtonRefCurrent.style.visibility = 'hidden';
+
+			const margin = calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent);
+
+			// Much more simple and predictable to add this margin to the observer target
+			// rather than using it to calculate the rootMargin values
+			observerTargetRefCurrent.style.marginLeft = `${margin}px`;
+
+			const observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							fixedButtonRefCurrent.style.visibility = 'visible';
+						} else {
+							fixedButtonRefCurrent.style.visibility = 'hidden';
+						}
+					});
+				},
+				{
+					root: tableWrapper,
+					rootMargin: `0px ${insertColumnButtonOffset}px 0px 0px`,
+					threshold: 1,
+				},
+			);
+
+			const handleScroll = rafSchedule((event) => {
+				if (fixedButtonRef.current) {
+					const delta = event.target.scrollLeft - scrollDataRef.current;
+					const style = `translateX(${leftPosDataRef.current - delta}px)`;
+					fixedButtonRef.current.style.transform = style;
+
+					scrollDataRef.current = event.target.scrollLeft;
+					leftPosDataRef.current = leftPosDataRef.current - delta;
+				}
+			});
+
+			observer.observe(observerTargetRefCurrent);
+			tableWrapper.addEventListener('scroll', handleScroll);
+
+			return () => {
+				tableWrapper.removeEventListener('scroll', handleScroll);
+				fixedButtonRefCurrent.style.transform = '';
+				observer.unobserve(observerTargetRefCurrent);
+			};
+		}
+	}, [
+		fixedButtonRef,
+		observerTargetRef,
+		tableWrapper,
+		targetCellPosition,
+		targetCellRef,
+		isContextualMenuOpen,
+	]);
+
+	const targetCellRect = targetCellRef.getBoundingClientRect();
+
+	// Using a portal here to ensure wrapperRef has the tableWrapper as an
+	// ancestor. This is required to make the Intersection Observer work.
+	return createPortal(
+		// Using observerTargetRef here for our Intersection Observer. There is issues
+		// getting the observer to work just using the fixedButtonRef, possible due
+		// to using position fixed on this Element, or possibly due to its position
+		// being changed on scroll.
+		<div
+			ref={observerTargetRef}
+			style={{
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				position: 'absolute',
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				top: token('space.0', '0px'),
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				left: token('space.0', '0px'),
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				width: token('space.250', '20px'), // BUTTON_WIDTH
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+				height: token('space.250', '20px'), // BUTTON_WIDTH
+			}}
+		>
+			<div
+				ref={fixedButtonRef}
+				style={{
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+					position: 'fixed',
+					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+					top: stickyHeader.top + stickyHeader.padding + offset * 2,
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+					zIndex: akEditorTableCellOnStickyHeaderZIndex,
+					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+					left: calcLeftPos({
+						buttonWidth: BUTTON_WIDTH,
+						cellRectLeft: targetCellRect.left,
+						cellRefWidth: targetCellRef.clientWidth,
+						offset,
+					}),
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+					width: token('space.250', '20px'), // BUTTON_WIDTH
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+					height: token('space.250', '20px'), // BUTTON_WIDTH
+				}}
+				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+				className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
+			>
+				{children}
+			</div>
+		</div>,
+		mountTo,
+	);
 };
 
 export default FixedButton;