@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/es2019/ui/issue-like-table/draggable-table-heading-old.js

@@ -0,0 +1,368 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import ReactDOM from 'react-dom';
+import { FormattedMessage } from 'react-intl-next';
+import invariant from 'tiny-invariant';
+import Button from '@atlaskit/button/new';
+import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
+import ChevronDown from '@atlaskit/icon/utility/migration/chevron-down';
+import ChevronUp from '@atlaskit/icon/utility/migration/chevron-up';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box-without-terminal';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
+import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { useDatasourceAnalyticsEvents } from '../../analytics';
+import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
+import { issueLikeTableMessages } from './messages';
+import { TableHeading } from './styled';
+import { getColumnMinWidth, getWidthCss } from './utils';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+const DropdownParent = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& button': {
+    textAlign: 'left' /* By default button center in the middle without props to control it */,
+    height: 'auto' /* By default button is not happy with tall (up to lines in our case) content */,
+    paddingBlock: "var(--ds-space-0, 0px)",
+    paddingLeft: "var(--ds-space-0, 0px)" /* By default button's padding left and right is 8 + 4. We control that 8, so left with 4 that we need.  */,
+    paddingRight: "var(--ds-space-0, 0px)"
+  }
+});
+const dropTargetStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%'
+});
+const noPointerEventsStyles = css({
+  pointerEvents: 'none'
+});
+const resizerStyles = css({
+  '--local-hitbox-width': "var(--ds-space-300, 24px)",
+  width: 'var(--local-hitbox-width)',
+  cursor: 'col-resize',
+  flexGrow: '0',
+  position: 'absolute',
+  zIndex: 1,
+  // we want this to sit on top of adjacent column headers
+  right: 'calc(-1 * calc(var(--local-hitbox-width) / 2))',
+  top: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '::before': {
+    opacity: 0,
+    '--local-line-width': "var(--ds-border-width, 2px)",
+    content: '""',
+    position: 'absolute',
+    background: "var(--ds-border-brand, #0052CC)",
+    width: 'var(--local-line-width)',
+    inset: 0,
+    left: `calc(50% - calc(var(--local-line-width) / 2))`,
+    transition: 'opacity 0.2s ease'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover::before': {
+    opacity: 1
+  }
+});
+const resizingStyles = css({
+  // turning off the resizing cursor as sometimes it can cause the cursor to flicker
+  // while resizing. The browser controls the cursor while dragging, but the browser
+  // can sometimes bug out.
+  cursor: 'unset',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '::before': {
+    opacity: 1
+  }
+});
+const idleState = {
+  type: 'idle'
+};
+const draggingState = {
+  type: 'dragging'
+};
+export const DraggableTableHeadingOld = ({
+  children,
+  id,
+  index,
+  tableId,
+  dndPreviewHeight,
+  dragPreview,
+  width,
+  onWidthChange,
+  isWrapped,
+  onIsWrappedChange
+}) => {
+  const {
+    fireEvent
+  } = useDatasourceAnalyticsEvents();
+  const mainHeaderCellRef = useRef(null);
+  const columnResizeHandleRef = useRef(null);
+  const [state, setState] = useState(idleState);
+  const [isDraggingAnyColumn, setIsDraggingAnyColumn] = useState(false);
+  const [closestEdge, setClosestEdge] = useState(null);
+  const dropTargetRef = useRef(null);
+  /**
+   * When width is not set (or callback is not set) we assume not resizing is needed.
+   * In our case width won't be set for last cell when table container is bigger than sum of all columns
+   */
+  const resizeIsEnabled = !!onWidthChange && !!width;
+  useEffect(() => {
+    const cell = mainHeaderCellRef.current;
+    invariant(cell);
+    return combine(draggable({
+      element: cell,
+      getInitialData() {
+        return {
+          type: 'table-header',
+          id,
+          index,
+          tableId
+        };
+      },
+      onGenerateDragPreview({
+        nativeSetDragImage
+      }) {
+        setCustomNativeDragPreview({
+          getOffset: pointerOutsideOfPreview({
+            x: '18px',
+            y: '18px'
+          }),
+          render: ({
+            container
+          }) => {
+            // Cause a `react` re-render to create your portal synchronously
+            setState({
+              type: 'preview',
+              container
+            });
+            // In our cleanup function: cause a `react` re-render to create remove your portal
+            // Note: you can also remove the portal in `onDragStart`,
+            // which is when the cleanup function is called
+            return () => setState(draggingState);
+          },
+          nativeSetDragImage
+        });
+      },
+      onDragStart() {
+        setState(draggingState);
+      },
+      onDrop() {
+        setState(idleState);
+      }
+    }));
+  }, [id, index, tableId]);
+
+  // Here we handle drop target, that in our case is absolutely positioned div that covers full width and height
+  // of this column (has height of whole table). It sits on top of everything, but has `pointerEvents: 'none'` by default
+  useEffect(() => {
+    const dropTarget = dropTargetRef.current;
+    invariant(dropTarget);
+    return dropTargetForElements({
+      element: dropTarget,
+      getIsSticky() {
+        return true;
+      },
+      getData({
+        input,
+        element
+      }) {
+        const data = {
+          id,
+          index
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['left', 'right']
+        });
+      },
+      canDrop(args) {
+        return args.source.data.type === 'table-header' && args.source.data.tableId === tableId;
+      },
+      onDrag(args) {
+        if (args.source.data.id !== id) {
+          setClosestEdge(extractClosestEdge(args.self.data));
+        }
+      },
+      onDragLeave() {
+        setClosestEdge(null);
+      },
+      onDrop() {
+        setClosestEdge(null);
+      }
+    });
+  }, [id, index, tableId]);
+
+  // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor({
+        source
+      }) {
+        return source.data.type === 'table-header' && source.data.tableId === tableId;
+      },
+      onDragStart() {
+        /**
+         * Should cause a synchronous re-render.
+         */
+        setIsDraggingAnyColumn(true);
+      },
+      onDrop() {
+        setIsDraggingAnyColumn(false);
+      }
+    });
+  }, [tableId]);
+
+  // Handling column resizing
+  useEffect(() => {
+    if (!resizeIsEnabled) {
+      return;
+    }
+    const resizeHandle = columnResizeHandleRef.current;
+    invariant(resizeHandle);
+    const mainHeaderCell = mainHeaderCellRef.current;
+    invariant(mainHeaderCell);
+    return draggable({
+      element: resizeHandle,
+      getInitialData() {
+        // metadata related to currently dragging item (can be read by drop events etc)
+        return {
+          type: 'column-resize',
+          id,
+          index,
+          tableId
+        };
+      },
+      // Is called when dragging started
+      onGenerateDragPreview({
+        nativeSetDragImage
+      }) {
+        // We don't show any preview, since column separator (handle) is moving with the cursor
+        disableNativeDragPreview({
+          nativeSetDragImage
+        });
+        // Block drag operations outside `@atlaskit/pragmatic-drag-and-drop`
+        preventUnhandled.start();
+        setState({
+          type: 'resizing',
+          initialWidth: width
+        });
+      },
+      onDrag({
+        location
+      }) {
+        const relativeDistanceX = location.current.input.clientX - location.initial.input.clientX;
+        invariant(state.type === 'resizing');
+        const {
+          initialWidth
+        } = state;
+
+        // Set the width of our header being resized
+        let proposedWidth = initialWidth + relativeDistanceX;
+        if (proposedWidth < getColumnMinWidth(id)) {
+          proposedWidth = getColumnMinWidth(id);
+        }
+
+        // We update width css directly live
+        mainHeaderCell.style.setProperty('width', `${proposedWidth}px`);
+      },
+      onDrop() {
+        preventUnhandled.stop();
+        setState(idleState);
+        if (onWidthChange) {
+          let cssWidth = +mainHeaderCell.style.getPropertyValue('width').slice(0, -2);
+          onWidthChange(cssWidth);
+        }
+      }
+    });
+  }, [id, index, onWidthChange, resizeIsEnabled, state, tableId, width]);
+  const [buttonHovered, setButtonHovered] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // Width is not set when it is a last cell in a wide table.
+  // We make assumption thus that there is enough width for chevron.
+  const isWideEnoughToHaveChevron = !width || width > 76;
+  const shouldShowTriggerIcon = (buttonHovered || isDropdownOpen) && isWideEnoughToHaveChevron;
+  const triggerIcon = useMemo(() => shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
+  const getTriggerButton = useCallback(({
+    triggerRef,
+    ...props
+  }) => {
+    return jsx(Button, _extends({}, props, {
+      testId: `${id}-column-dropdown`,
+      shouldFitContainer: true,
+      iconAfter: triggerIcon,
+      ref: triggerRef,
+      appearance: "subtle",
+      spacing: "compact",
+      onMouseEnter: () => setButtonHovered(true),
+      onMouseLeave: () => setButtonHovered(false)
+    }), children);
+  }, [children, id, triggerIcon]);
+  const onDropdownOpenChange = useCallback(({
+    isOpen
+  }) => setIsDropdownOpen(isOpen), []);
+  const toggleWrap = useCallback(() => {
+    if (!onIsWrappedChange) {
+      return;
+    }
+    const nextIsWrap = !(isWrapped || false);
+    if (nextIsWrap) {
+      fireEvent('ui.button.clicked.wrap', {});
+    } else {
+      fireEvent('ui.button.clicked.unwrap', {});
+    }
+    onIsWrappedChange(nextIsWrap);
+  }, [fireEvent, isWrapped, onIsWrappedChange]);
+  return jsx(TableHeading, {
+    ref: mainHeaderCellRef,
+    "data-testid": `${id}-column-heading`,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      cursor: 'grab',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ...getWidthCss({
+        shouldUseWidth: resizeIsEnabled,
+        width
+      })
+    }
+  }, resizeIsEnabled ? jsx("div", {
+    ref: columnResizeHandleRef,
+    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
+    style: {
+      height: `${dndPreviewHeight}px`
+    },
+    "data-testid": "column-resize-handle"
+  }) : null, onIsWrappedChange ? jsx(DropdownParent, null, jsx(DropdownMenu, {
+    trigger: getTriggerButton,
+    onOpenChange: onDropdownOpenChange,
+    placement: 'bottom'
+  }, jsx(DropdownItem, {
+    elemBefore: isWrapped ? jsx(UnwrapTextIcon, null) : jsx(WrapTextIcon, null),
+    testId: `${id}-column-dropdown-item-toggle-wrapping`,
+    onClick: toggleWrap
+  }, isWrapped ? jsx(FormattedMessage, issueLikeTableMessages.unwrapText) : jsx(FormattedMessage, issueLikeTableMessages.wrapText)))) : children, jsx("div", {
+    ref: dropTargetRef,
+    css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
+    style: {
+      height: `${dndPreviewHeight}px`
+    },
+    "data-testid": 'column-drop-target'
+  }, closestEdge && jsx(DropIndicator, {
+    edge: closestEdge
+  })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+};

package/dist/es2019/ui/issue-like-table/draggable-table-heading.compiled.css

@@ -0,0 +1,60 @@
+
+._19itidpf, .ProseMirror .pm-table-wrapper>table thead ._aks5idpf, .pm-table-wrapper>table thead ._1u3bidpf{border:0}
+._1tesidpf:before{inset:0}
+._pdyk1hrg:before{transition:opacity .2s ease}
+._1wtnze3t button{padding-block:var(--ds-space-0,0)}.ProseMirror .pm-table-wrapper>table thead.has-column-picker ._1hkzidpf:nth-last-of-type(2), .pm-table-wrapper>table thead.has-column-picker ._1r3pidpf:nth-last-of-type(2), thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}
+._1ls2idpf:last-of-type, .ProseMirror .pm-table-wrapper>table thead ._ocbzidpf:last-of-type, .pm-table-wrapper>table thead ._3tfiidpf:last-of-type{border-right:0}
+._1s7zl0fh, .ProseMirror .pm-table-wrapper>table thead ._1o9ml0fh, .pm-table-wrapper>table thead ._1oupl0fh{border-right:.5px solid var(--ds-border,#dfe1e6)}
+._n7zl1on0, .ProseMirror .pm-table-wrapper>table thead ._1fqk1on0, .pm-table-wrapper>table thead ._1vvv1on0{border-bottom:2px solid var(--ds-border,#dfe1e6)}
+._11681tcg [data-testid=datasource-header-content--container]{line-height:24px}
+._11j11b66 [data-testid=datasource-header-content--container]{padding-right:var(--ds-space-050,4px)}
+._11lvze3t button{padding-left:var(--ds-space-0,0)}
+._12pn15vq [data-testid=datasource-header-content--container]{overflow-x:hidden}
+._154iidpf{top:0}
+._154pidpf:before{opacity:0}
+._154pkb7n:before{opacity:1}
+._16jlidpf{flex-grow:0}
+._198v15vq [data-testid=datasource-header-content--container]{overflow-y:hidden}
+._19bv1b66, .ProseMirror .pm-table-wrapper>table thead ._9iya1b66, .pm-table-wrapper>table thead ._15hu1b66{padding-left:var(--ds-space-050,4px)}
+._1bsb1osq{width:100%}
+._1bsbaakz{width:var(--local-hitbox-width)}
+._1cs8stnw:before{position:absolute}
+._1ct3kb7n:hover._1ct3kb7n:before{opacity:1}
+._1e0c1txw{display:flex}
+._1eqz4jg8 [data-testid=datasource-header-content--container]{white-space:normal}
+._1kt9b3bt:before{content:""}
+._1lhc1b66:first-of-type, .ProseMirror .pm-table-wrapper>table thead ._n2z81b66:first-of-type, .pm-table-wrapper>table thead ._3ixo1b66:first-of-type{padding-left:var(--ds-space-050,4px)}
+._1ltvidpf{left:0}
+._1mp4atg7:before{width:var(--local-line-width)}
+._1nd0cs5v [data-testid=datasource-header-content--container]{-webkit-line-clamp:2}
+._1pbykb7n{z-index:1}
+._1rusopvu:before{background-color:var(--ds-border-brand,#0052cc)}
+._1t0u1e54 [data-testid=datasource-header-content--container]{-webkit-box-orient:vertical}
+._1xanv77o [data-testid=datasource-header-content--container]{padding-bottom:var(--ds-space-025,2px)}
+._1xi2aesa{right:calc(var(--local-hitbox-width)/2*-1)}
+._1y7c1ejb{--local-hitbox-width:var(--ds-space-300,24px)}
+._4cvr1h6o{align-items:center}
+._4t3iqagn, .ProseMirror .pm-table-wrapper>table thead ._qccgqagn, .pm-table-wrapper>table thead ._xo89qagn{height:calc(50px + var(--ds-space-025, 2px)*4)}
+._80om11mm{cursor:col-resize}
+._80omn7od{cursor:unset}
+._8lvj1b66 [data-testid=datasource-header-content--container]{padding-left:var(--ds-space-050,4px)}
+._95ex1hna [data-testid=datasource-header-content--container]{word-wrap:break-word}
+._ab8av77o [data-testid=datasource-header-content--container]{padding-top:var(--ds-space-025,2px)}
+._bfhkchd4, .ProseMirror .pm-table-wrapper>table thead ._i7olchd4, .pm-table-wrapper>table thead ._1oe6chd4{background-color:var(--ds-elevation-surface-current,#fff)}
+._ca0qv77o, .ProseMirror .pm-table-wrapper>table thead ._7cz2v77o, .pm-table-wrapper>table thead ._pcwyv77o{padding-top:var(--ds-space-025,2px)}
+._dydkssc3:before{--local-line-width:var(--ds-border-width,2px)}
+._ficf1e5h button{text-align:left}
+._iscccj1k [data-testid=datasource-header-content--container]{display:-webkit-box}
+._jq8g1wug button{height:auto}
+._kqswh2mm, .ProseMirror .pm-table-wrapper>table thead ._rc4eh2mm, .pm-table-wrapper>table thead ._q46wh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._lura1osq [data-testid=datasource-header-content--container]{width:100%}
+._n3tdv77o, .ProseMirror .pm-table-wrapper>table thead ._6dd7v77o, .pm-table-wrapper>table thead ._191qv77o{padding-bottom:var(--ds-space-025,2px)}
+._o5721q9c{white-space:nowrap}
+._qneczvxw:before{left:calc(50% - var(--local-line-width)/2)}
+._s7n4yfq0, .ProseMirror .pm-table-wrapper>table thead ._ntwryfq0, .pm-table-wrapper>table thead ._3eneyfq0{vertical-align:bottom}
+._u5f31b66, .ProseMirror .pm-table-wrapper>table thead ._1pmc1b66, .pm-table-wrapper>table thead ._11ep1b66{padding-right:var(--ds-space-050,4px)}
+._vchhusvi, .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi, .pm-table-wrapper>table thead ._1gbausvi{box-sizing:border-box}
+._vwz41tcg, .ProseMirror .pm-table-wrapper>table thead ._s99e1tcg, .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
+._yhjmze3t button{padding-right:var(--ds-space-0,0)}

package/dist/es2019/ui/issue-like-table/draggable-table-heading.js

@@ -1,14 +1,12 @@
+/* draggable-table-heading.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import "./draggable-table-heading.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import invariant from 'tiny-invariant';
@@ -16,6 +14,7 @@ import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
 import ChevronDown from '@atlaskit/icon/utility/migration/chevron-down';
 import ChevronUp from '@atlaskit/icon/utility/migration/chevron-up';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box-without-terminal';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -24,78 +23,54 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/elem
 import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { N40 } from "@atlaskit/theme/colors";
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
+import { DraggableTableHeadingOld } from './draggable-table-heading-old';
 import { issueLikeTableMessages } from './messages';
-import { TableHeading } from './styled';
 import { getColumnMinWidth, getWidthCss } from './utils';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const DropdownParent = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& button': {
-    textAlign: 'left' /* By default button center in the middle without props to control it */,
-    height: 'auto' /* By default button is not happy with tall (up to lines in our case) content */,
-    paddingBlock: "var(--ds-space-0, 0px)",
-    paddingLeft: "var(--ds-space-0, 0px)" /* By default button's padding left and right is 8 + 4. We control that 8, so left with 4 that we need.  */,
-    paddingRight: "var(--ds-space-0, 0px)"
-  }
-});
-const dropTargetStyles = css({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%'
-});
-const noPointerEventsStyles = css({
-  pointerEvents: 'none'
-});
-const resizerStyles = css({
-  '--local-hitbox-width': "var(--ds-space-300, 24px)",
-  width: 'var(--local-hitbox-width)',
-  cursor: 'col-resize',
-  flexGrow: '0',
-  position: 'absolute',
-  zIndex: 1,
-  // we want this to sit on top of adjacent column headers
-  right: 'calc(-1 * calc(var(--local-hitbox-width) / 2))',
-  top: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    opacity: 0,
-    '--local-line-width': "var(--ds-border-width, 2px)",
-    content: '""',
-    position: 'absolute',
-    background: "var(--ds-border-brand, #0052CC)",
-    width: 'var(--local-line-width)',
-    inset: 0,
-    left: `calc(50% - calc(var(--local-line-width) / 2))`,
-    transition: 'opacity 0.2s ease'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover::before': {
-    opacity: 1
-  }
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+const TableHeading = forwardRef(({
+  as: C = "th",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_19itidpf _aks5idpf _1u3bidpf _1s7zl0fh _1o9ml0fh _1oupl0fh _n7zl1on0 _1fqk1on0 _1vvv1on0 _kqswh2mm _rc4eh2mm _q46wh2mm _vchhusvi _1wwnusvi _1gbausvi _vwz41tcg _s99e1tcg _3mvc1tcg _ca0qv77o _7cz2v77o _pcwyv77o _u5f31b66 _1pmc1b66 _11ep1b66 _n3tdv77o _6dd7v77o _191qv77o _19bv1b66 _9iya1b66 _15hu1b66 _4t3iqagn _qccgqagn _xo89qagn _s7n4yfq0 _ntwryfq0 _3eneyfq0 _bfhkchd4 _i7olchd4 _1oe6chd4 _12pn15vq _198v15vq _lura1osq _11681tcg _ab8av77o _11j11b66 _1xanv77o _8lvj1b66 _iscccj1k _1nd0cs5v _1t0u1e54 _1eqz4jg8 _95ex1hna _1hkzidpf _1r3pidpf _10i2idpf _1ls2idpf _ocbzidpf _3tfiidpf _1lhc1b66 _n2z81b66 _3ixo1b66", __cmplp.className])
+  }));
 });
-const resizingStyles = css({
-  // turning off the resizing cursor as sometimes it can cause the cursor to flicker
-  // while resizing. The browser controls the cursor while dragging, but the browser
-  // can sometimes bug out.
-  cursor: 'unset',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    opacity: 1
-  }
+if (process.env.NODE_ENV !== 'production') {
+  TableHeading.displayName = 'TableHeading';
+}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+const DropdownParent = forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjmze3t", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  DropdownParent.displayName = 'DropdownParent';
+}
+const dropTargetStyles = null;
+const noPointerEventsStyles = null;
+const resizerStyles = null;
+const resizingStyles = null;
 const idleState = {
   type: 'idle'
 };
 const draggingState = {
   type: 'dragging'
 };
-export const DraggableTableHeading = ({
+const DraggableTableHeadingNew = ({
   children,
   id,
   index,
@@ -302,7 +277,7 @@ export const DraggableTableHeading = ({
     triggerRef,
     ...props
   }) => {
-    return jsx(Button, _extends({}, props, {
+    return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
       testId: `${id}-column-dropdown`,
       shouldFitContainer: true,
       iconAfter: triggerIcon,
@@ -328,7 +303,7 @@ export const DraggableTableHeading = ({
     }
     onIsWrappedChange(nextIsWrap);
   }, [fireEvent, isWrapped, onIsWrappedChange]);
-  return jsx(TableHeading, {
+  return /*#__PURE__*/React.createElement(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": `${id}-column-heading`,
     style: {
@@ -340,29 +315,36 @@ export const DraggableTableHeading = ({
         width
       })
     }
-  }, resizeIsEnabled ? jsx("div", {
+  }, resizeIsEnabled ? /*#__PURE__*/React.createElement("div", {
     ref: columnResizeHandleRef,
-    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: `${dndPreviewHeight}px`
     },
-    "data-testid": "column-resize-handle"
-  }) : null, onIsWrappedChange ? jsx(DropdownParent, null, jsx(DropdownMenu, {
+    "data-testid": "column-resize-handle",
+    className: ax(["_1y7c1ejb _1bsbaakz _80om11mm _16jlidpf _kqswstnw _1pbykb7n _1xi2aesa _154iidpf _1tesidpf _pdyk1hrg _154pidpf _dydkssc3 _1kt9b3bt _1cs8stnw _1rusopvu _1mp4atg7 _qneczvxw _1ct3kb7n", state.type === 'resizing' && "_80omn7od _154pkb7n"])
+  }) : null, onIsWrappedChange ? /*#__PURE__*/React.createElement(DropdownParent, null, /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: getTriggerButton,
     onOpenChange: onDropdownOpenChange,
     placement: 'bottom'
-  }, jsx(DropdownItem, {
-    elemBefore: isWrapped ? jsx(UnwrapTextIcon, null) : jsx(WrapTextIcon, null),
+  }, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: isWrapped ? /*#__PURE__*/React.createElement(UnwrapTextIcon, null) : /*#__PURE__*/React.createElement(WrapTextIcon, null),
     testId: `${id}-column-dropdown-item-toggle-wrapping`,
     onClick: toggleWrap
-  }, isWrapped ? jsx(FormattedMessage, issueLikeTableMessages.unwrapText) : jsx(FormattedMessage, issueLikeTableMessages.wrapText)))) : children, jsx("div", {
+  }, isWrapped ? /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.unwrapText) : /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.wrapText)))) : children, /*#__PURE__*/React.createElement("div", {
     ref: dropTargetRef,
-    css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {
       height: `${dndPreviewHeight}px`
     },
-    "data-testid": 'column-drop-target'
-  }, closestEdge && jsx(DropIndicator, {
+    "data-testid": 'column-drop-target',
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq", !isDraggingAnyColumn && "_lcxvglyw"])
+  }, closestEdge && /*#__PURE__*/React.createElement(DropIndicator, {
     edge: closestEdge
   })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+};
+export const DraggableTableHeading = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(DraggableTableHeadingNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(DraggableTableHeadingOld, props);
+  }
 };