@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/es2019/ui/issue-like-table/column-picker/column-picker-old.js

@@ -0,0 +1,155 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import BoardIcon from '@atlaskit/icon/core/migration/board';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
+import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
+import Tooltip from '@atlaskit/tooltip';
+import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
+import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { ConcatenatedMenuList } from './concatenated-menu-list';
+import { columnPickerMessages } from './messages';
+const chevronIconStyles = xcss({
+  display: 'flex',
+  alignItems: 'center'
+});
+export const ColumnPickerOld = ({
+  columns,
+  selectedColumnKeys,
+  onSelectedColumnKeysChange,
+  onOpen
+}) => {
+  const intl = useIntl();
+  const experienceId = useDatasourceExperienceId();
+  const [allOptions, setAllOptions] = useState([]);
+  const pickerRef = useRef(null);
+  const mapColumnToOption = useCallback(({
+    key,
+    title
+  }) => ({
+    label: title,
+    value: key
+  }), []);
+  const selectedOptions = columns.filter(({
+    key
+  }) => selectedColumnKeys.includes(key)).map(mapColumnToOption);
+  useEffect(() => {
+    setAllOptions(columns.filter(({
+      title
+    }) => title).map(mapColumnToOption));
+  }, [columns, mapColumnToOption]);
+  const handleChange = useCallback(selectedOptions => {
+    const selectedValues = selectedOptions.map(({
+      value
+    }) => value);
+    selectedValues.sort((a, b) => {
+      const indexB = columns.findIndex(({
+        key
+      }) => key === b);
+      const indexA = columns.findIndex(({
+        key
+      }) => key === a);
+      return indexA - indexB;
+    });
+    onSelectedColumnKeysChange(selectedValues);
+  }, [columns, onSelectedColumnKeysChange]);
+  const sortSelectedColumnsTop = useCallback(() => {
+    if (!allOptions.length) {
+      return;
+    }
+    const nonSelectedOptions = allOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
+    const sortedOptions = [...selectedOptions, ...nonSelectedOptions];
+    sortedOptions.length > 0 && setAllOptions(sortedOptions);
+  }, [allOptions, selectedOptions]);
+  const stopEscapePropagationWhenOpen = e => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  };
+  const handleOpen = useCallback(() => {
+    onOpen && onOpen();
+    void sortSelectedColumnsTop();
+  }, [onOpen, sortSelectedColumnsTop]);
+
+  // If only 1 option is selected, disable it since we don't want user to uncheck everything
+  const handleIsOptionDisabled = (option, selectValue) => {
+    return selectValue.length === 1 && selectValue.some(selectedValue => selectedValue.value === option.value);
+  };
+  useEffect(() => {
+    if (allOptions.length) {
+      var _pickerRef$current, _pickerRef$current$se, _pickerRef$current$se2, _pickerRef$current$se3;
+      // necessary to refocus the search input after the loading state
+      pickerRef === null || pickerRef === void 0 ? void 0 : (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 ? void 0 : (_pickerRef$current$se = _pickerRef$current.selectRef) === null || _pickerRef$current$se === void 0 ? void 0 : (_pickerRef$current$se2 = _pickerRef$current$se.select) === null || _pickerRef$current$se2 === void 0 ? void 0 : (_pickerRef$current$se3 = _pickerRef$current$se2.inputRef) === null || _pickerRef$current$se3 === void 0 ? void 0 : _pickerRef$current$se3.focus();
+    }
+  }, [allOptions]);
+  useEffect(() => {
+    if (allOptions.length) {
+      if (experienceId) {
+        succeedUfoExperience({
+          name: 'column-picker-rendered'
+        }, experienceId);
+      }
+    }
+  }, [allOptions, experienceId]);
+  return jsx(PopupSelect, {
+    classNamePrefix: 'column-picker-popup',
+    testId: 'column-picker-popup',
+    components: {
+      Option: CheckboxOption,
+      MenuList: ConcatenatedMenuList
+    },
+    filterOption: createFilter({
+      ignoreAccents: false
+    }),
+    options: allOptions,
+    value: selectedOptions
+    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+    ,
+    onOpen: handleOpen,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    id: 'column-picker-popup',
+    isMulti: true,
+    ref: pickerRef,
+    isOptionDisabled: handleIsOptionDisabled,
+    placeholder: intl.formatMessage(columnPickerMessages.search),
+    onKeyDown: stopEscapePropagationWhenOpen,
+    label: "Search for fields",
+    onChange: handleChange,
+    isLoading: allOptions.length === 0,
+    target: ({
+      isOpen,
+      ...triggerProps
+    }) => jsx(Tooltip, {
+      content: intl.formatMessage(columnPickerMessages.tooltip)
+    }, tooltipProps => jsx(Button, _extends({}, tooltipProps, triggerProps, {
+      isSelected: isOpen,
+      spacing: "compact",
+      appearance: "subtle",
+      testId: "column-picker-trigger-button",
+      iconBefore: () => jsx(Box, {
+        as: "span",
+        xcss: chevronIconStyles
+      }, jsx(BoardIcon, {
+        color: "currentColor",
+        label: "board",
+        LEGACY_size: "medium",
+        spacing: "spacious",
+        LEGACY_margin: "0 0 0 4px"
+      }), jsx(ChevronDownIcon, {
+        color: "currentColor",
+        label: "down",
+        LEGACY_size: "medium"
+      }))
+    }), ''))
+  });
+};

package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list-old.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { components } from '@atlaskit/select';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { columnPickerMessages } from './messages';
+export const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+const messageStyles = css({
+  color: "var(--ds-text-subtle, #44546F)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
+  fontWeight: "var(--ds-font-weight-regular, 400)"
+});
+export const ConcatenatedMenuListOld = ({
+  children,
+  ...props
+}) => {
+  const shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
+  if (shouldUseDefaultMenuList) {
+    return jsx(components.MenuList, props, children);
+  }
+  const optionStyle = {
+    padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"}`,
+    height: 'auto'
+  };
+  const maximumLimitReachedMessage =
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  jsx("div", {
+    css: messageStyles,
+    style: optionStyle
+  }, jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
+    tagName: 'div'
+  }, columnPickerMessages.maximumItemsShownLine2)));
+  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};

package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.compiled.css

@@ -0,0 +1,3 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -1,42 +1,42 @@
+/* concatenated-menu-list.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import "./concatenated-menu-list.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { components } from '@atlaskit/select';
 import { fontFallback } from '@atlaskit/theme/typography';
+import { ConcatenatedMenuListOld } from './concatenated-menu-list-old';
 import { columnPickerMessages } from './messages';
 export const SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
-const messageStyles = css({
-  color: "var(--ds-text-subtle, #44546F)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body-small, ${fontFallback.body.small})`,
-  fontWeight: "var(--ds-font-weight-regular, 400)"
-});
-export const ConcatenatedMenuList = ({
+const messageStyles = null;
+const ConcatenatedMenuListNew = ({
   children,
   ...props
 }) => {
   const shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
   if (shouldUseDefaultMenuList) {
-    return jsx(components.MenuList, props, children);
+    return /*#__PURE__*/React.createElement(components.MenuList, props, children);
   }
   const optionStyle = {
     padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"}`,
     height: 'auto'
   };
-  const maximumLimitReachedMessage =
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  jsx("div", {
-    css: messageStyles,
-    style: optionStyle
-  }, jsx(FormattedMessage, _extends({
+  const maximumLimitReachedMessage = /*#__PURE__*/React.createElement("div", {
+    style: optionStyle,
+    className: ax(["_11c81vlj _syaz1gjq _k48pi7a9"])
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({
     tagName: 'div'
-  }, columnPickerMessages.maximumItemsShownLine1)), jsx(FormattedMessage, _extends({
+  }, columnPickerMessages.maximumItemsShownLine1)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({
     tagName: 'div'
   }, columnPickerMessages.maximumItemsShownLine2)));
-  return jsx(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+  return /*#__PURE__*/React.createElement(components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};
+export const ConcatenatedMenuList = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ConcatenatedMenuListNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ConcatenatedMenuListOld, props);
+  }
 };

package/dist/es2019/ui/issue-like-table/column-picker/index.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -1,28 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import BoardIcon from '@atlaskit/icon/core/migration/board';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import { CheckboxOption, createFilter, PopupSelect } from '@atlaskit/select';
 import Tooltip from '@atlaskit/tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences';
 import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id';
+import { ColumnPickerOld } from './column-picker-old';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { columnPickerMessages } from './messages';
-const chevronIconStyles = xcss({
-  display: 'flex',
-  alignItems: 'center'
-});
-export const ColumnPicker = ({
+const styles = {
+  chevronIconStyles: "_1e0c1txw _4cvr1h6o"
+};
+const ColumnPickerNew = ({
   columns,
   selectedColumnKeys,
   onSelectedColumnKeysChange,
@@ -100,7 +97,7 @@ export const ColumnPicker = ({
       }
     }
   }, [allOptions, experienceId]);
-  return jsx(PopupSelect, {
+  return /*#__PURE__*/React.createElement(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
     components: {
@@ -129,27 +126,34 @@ export const ColumnPicker = ({
     target: ({
       isOpen,
       ...triggerProps
-    }) => jsx(Tooltip, {
+    }) => /*#__PURE__*/React.createElement(Tooltip, {
       content: intl.formatMessage(columnPickerMessages.tooltip)
-    }, tooltipProps => jsx(Button, _extends({}, tooltipProps, triggerProps, {
+    }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, triggerProps, {
       isSelected: isOpen,
       spacing: "compact",
       appearance: "subtle",
       testId: "column-picker-trigger-button",
-      iconBefore: () => jsx(Box, {
+      iconBefore: () => /*#__PURE__*/React.createElement(Box, {
         as: "span",
-        xcss: chevronIconStyles
-      }, jsx(BoardIcon, {
+        xcss: styles.chevronIconStyles
+      }, /*#__PURE__*/React.createElement(BoardIcon, {
         color: "currentColor",
         label: "board",
         LEGACY_size: "medium",
         spacing: "spacious",
         LEGACY_margin: "0 0 0 4px"
-      }), jsx(ChevronDownIcon, {
+      }), /*#__PURE__*/React.createElement(ChevronDownIcon, {
         color: "currentColor",
         label: "down",
         LEGACY_size: "medium"
       }))
     }), ''))
   });
+};
+export const ColumnPicker = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ColumnPickerNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ColumnPickerOld, props);
+  }
 };

package/dist/es2019/ui/issue-like-table/drag-column-preview-old.js

@@ -0,0 +1,62 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React 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 { N40 } from '@atlaskit/theme/colors';
+import { fontFallback } from '@atlaskit/theme/typography';
+import { TableHeading } from './styled';
+const maxWidth = '200px';
+const firstLastChildOverride = `
+  &:first-of-type, &:last-of-type {
+    padding-left: ${"var(--ds-space-100, 8px)"};
+    padding-right: ${"var(--ds-space-100, 8px)"};
+  }
+`;
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+const TablePreviewHeading = styled(TableHeading)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  background: "var(--ds-background-disabled, #091E4224)",
+  maxWidth: maxWidth
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+firstLastChildOverride);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+const TablePreviewCell = styled.td({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  maxWidth: maxWidth,
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
+  boxSizing: 'border-box',
+  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
+  height: '30px'
+},
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+firstLastChildOverride);
+const tableStyles = css({
+  background: "var(--ds-surface, #FFF)",
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: `var(--ds-font-body, ${fontFallback.body.medium})`,
+  maxWidth
+});
+export const DragColumnPreviewOld = ({
+  title,
+  rows
+}) => {
+  return jsx("table", {
+    css: tableStyles
+  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map((data, i) => jsx("tr", {
+    key: i
+  }, jsx(TablePreviewCell, null, data))), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
+};

package/dist/es2019/ui/issue-like-table/drag-column-preview.compiled.css

@@ -0,0 +1,48 @@
+
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._19itidpf, .ProseMirror .pm-table-wrapper>table thead ._aks5idpf, .pm-table-wrapper>table thead ._1u3bidpf{border: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)}
+._n7zll0fh{border-bottom:.5px 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)}
+._12pn15vq [data-testid=datasource-header-content--container]{overflow-x:hidden}
+._18m915vq{overflow-y:hidden}
+._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)}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1djhu2gc:first-of-type, ._1o59u2gc:last-of-type{padding-right:var(--ds-space-100,8px)}
+._1eqz4jg8 [data-testid=datasource-header-content--container]{white-space:normal}
+._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)}
+._1lhcu2gc:first-of-type, ._u128u2gc:last-of-type{padding-left:var(--ds-space-100,8px)}
+._1nd0cs5v [data-testid=datasource-header-content--container]{-webkit-line-clamp:2}
+._1reo15vq{overflow-x:hidden}
+._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)}
+._4t3i1ul9{height:30px}
+._4t3iqagn, .ProseMirror .pm-table-wrapper>table thead ._qccgqagn, .pm-table-wrapper>table thead ._xo89qagn{height:calc(50px + var(--ds-space-025, 2px)*4)}
+._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)}
+._bfhk98cj{background-color:var(--ds-background-disabled,#091e4224)}
+._bfhkchd4, .ProseMirror .pm-table-wrapper>table thead ._i7olchd4, .pm-table-wrapper>table thead ._1oe6chd4{background-color:var(--ds-elevation-surface-current,#fff)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._btyzidpf{border-spacing:0}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qv77o, .ProseMirror .pm-table-wrapper>table thead ._7cz2v77o, .pm-table-wrapper>table thead ._pcwyv77o{padding-top:var(--ds-space-025,2px)}
+._iscccj1k [data-testid=datasource-header-content--container]{display:-webkit-box}
+._kqswh2mm, .ProseMirror .pm-table-wrapper>table thead ._rc4eh2mm, .pm-table-wrapper>table thead ._q46wh2mm{position:relative}
+._lura1osq [data-testid=datasource-header-content--container]{width:100%}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._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}
+._p12fuuw1{max-width:200px}
+._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)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vchhusvi, .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi, .pm-table-wrapper>table thead ._1gbausvi{box-sizing:border-box}
+._vchhusvi{box-sizing:border-box}
+._vwz41tcg, .ProseMirror .pm-table-wrapper>table thead ._s99e1tcg, .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
+._yq5h18uv{border-collapse:initial}

package/dist/es2019/ui/issue-like-table/drag-column-preview.js

@@ -1,62 +1,78 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React from 'react';
+/* drag-column-preview.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./drag-column-preview.compiled.css";
+import { forwardRef } 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 React from 'react';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { N40 } from '@atlaskit/theme/colors';
 import { fontFallback } from '@atlaskit/theme/typography';
-import { TableHeading } from './styled';
-const maxWidth = '200px';
-const firstLastChildOverride = `
-  &:first-of-type, &:last-of-type {
-    padding-left: ${"var(--ds-space-100, 8px)"};
-    padding-right: ${"var(--ds-space-100, 8px)"};
-  }
-`;
+import { DragColumnPreviewOld } from './drag-column-preview-old';
+
+// 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])
+  }));
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const TablePreviewHeading = styled(TableHeading)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  background: "var(--ds-background-disabled, #091E4224)",
-  maxWidth: maxWidth
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-firstLastChildOverride);
+if (process.env.NODE_ENV !== 'production') {
+  TableHeading.displayName = 'TableHeading';
+}
+const TablePreviewHeading = forwardRef(({
+  as: C = TableHeading,
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1reo15vq _18m915vq _1bto1l2s _o5721q9c _bfhk98cj _p12fuuw1 _1lhcu2gc _u128u2gc _1djhu2gc _1o59u2gc", __cmplp.className])
+  }));
+});
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const TablePreviewCell = styled.td({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  maxWidth: maxWidth,
-  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
-  boxSizing: 'border-box',
-  borderBottom: `0.5px solid ${`var(--ds-border, ${N40})`}`,
-  height: '30px'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-firstLastChildOverride);
-const tableStyles = css({
-  background: "var(--ds-surface, #FFF)",
-  borderCollapse: 'separate',
-  borderSpacing: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body, ${fontFallback.body.medium})`,
-  maxWidth
+if (process.env.NODE_ENV !== 'production') {
+  TablePreviewHeading.displayName = 'TablePreviewHeading';
+}
+const TablePreviewCell = forwardRef(({
+  as: C = "td",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1reo15vq _18m915vq _n7zll0fh _1bto1l2s _o5721q9c _p12fuuw1 _ca0q1b66 _u5f3u2gc _n3td1b66 _19bvu2gc _vchhusvi _4t3i1ul9 _1lhcu2gc _u128u2gc _1djhu2gc _1o59u2gc", __cmplp.className])
+  }));
 });
-export const DragColumnPreview = ({
+if (process.env.NODE_ENV !== 'production') {
+  TablePreviewCell.displayName = 'TablePreviewCell';
+}
+const tableStyles = null;
+const DragColumnPreviewNew = ({
   title,
   rows
 }) => {
-  return jsx("table", {
-    css: tableStyles
-  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map((data, i) => jsx("tr", {
+  return /*#__PURE__*/React.createElement("table", {
+    className: ax(["_11c81oud _bfhkvuon _yq5h18uv _btyzidpf _p12fuuw1"])
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TablePreviewHeading, null, title))), /*#__PURE__*/React.createElement("tbody", null, rows.map((data, i) => /*#__PURE__*/React.createElement("tr", {
     key: i
-  }, jsx(TablePreviewCell, null, data))), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
+  }, /*#__PURE__*/React.createElement(TablePreviewCell, null, data))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TablePreviewCell, null, "..."))));
+};
+export const DragColumnPreview = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(DragColumnPreviewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(DragColumnPreviewOld, props);
+  }
 };