@atlaskit/link-datasource 0.31.1 → 0.31.3

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

@@ -3,30 +3,42 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import styled from '@emotion/styled';
 import invariant from 'tiny-invariant';
+import Heading from '@atlaskit/heading';
 import { Skeleton } from '@atlaskit/linking-common';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { N40 } from '@atlaskit/theme/colors';
 import { ColumnPicker } from './column-picker';
+import { DragColumnPreview } from './drag-column-preview';
 import { DraggableTableHeading } from './draggable-table-heading';
 import TableEmptyState from './empty-state';
 import { fallbackRenderType } from './render-type';
 import { Table, TableHeading } from './styled';
 import { useIsOnScreen } from './useIsOnScreen';
+const tableSidePadding = "var(--ds-space-200, 16px)";
 const tableHeadStyles = css({
   background: "var(--ds-surface, #FFF)",
-  borderTop: '2px solid transparent'
+  position: 'sticky',
+  top: 0,
+  zIndex: 10
 });
-const ColumnPickerHeader = styled.td`
+const ColumnPickerHeader = styled.th`
   width: 40px;
-  padding-block: ${"var(--ds-space-100, 8px)"};
   position: sticky;
-  right: 0px;
+  right: calc(-1 * ${tableSidePadding});
   background-color: ${"var(--ds-surface, #FFF)"};
-  &:last-child {
-    padding-right: ${"var(--ds-space-100, 8px)"};
+  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}; /* It is required to have solid (not half-transparent) color because of this gradient business bellow */
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0%,
+    ${"var(--ds-surface, #FFF)"} 10%
+  );
+  vertical-align: middle; /* Keeps dropdown button in the middle */
+  &:last-of-type {
+    padding-right: ${tableSidePadding};
   }
 `;
 const truncatedCellStyles = css({
@@ -34,11 +46,22 @@ const truncatedCellStyles = css({
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 });
-const tableDragPreviewStyles = css({
-  backgroundColor: "var(--ds-surface, #FFF)"
+const scrollableContainerStyles = css({
+  overflow: 'auto',
+  padding: `0 ${tableSidePadding} 0 ${tableSidePadding}`,
+  boxSizing: 'border-box'
 });
-const containerDragPreviewStyles = css({
-  overflow: 'hidden'
+const tableStyles = css({
+  // These styles are needed to prevent thead bottom border from scrolling away.
+  // This happens because it is sticky. https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
+  borderCollapse: 'separate',
+  borderSpacing: 0
+});
+
+// By default tbody and thead have border-bottom: 2px ...
+// This removes it, because for header we handle it via `th` styling and footer supply bottom border
+const noDefaultBorderStyles = css({
+  borderBottom: 0
 });
 function extractIndex(data) {
   const {
@@ -69,7 +92,6 @@ const BASE_WIDTH = 8;
 function getColumnWidth(key, type) {
   const keyBasedWidth = {
     assignee: BASE_WIDTH * 22,
-    key: BASE_WIDTH * 10,
     labels: BASE_WIDTH * 22,
     priority: BASE_WIDTH * 8,
     status: BASE_WIDTH * 18,
@@ -98,11 +120,11 @@ export const IssueLikeDataTableView = ({
   visibleColumnKeys,
   onVisibleColumnKeysChange,
   status,
-  hasNextPage
+  hasNextPage,
+  scrollableContainerHeight
 }) => {
   const tableId = useMemo(() => Symbol('unique-id'), []);
   const [lastRowElement, setLastRowElement] = useState(null);
-  const [isDragPreview, setIsDragPreview] = useState(false);
   const [hasFullSchema, setHasFullSchema] = useState(false);
   const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
   const containerRef = useRef(null);
@@ -135,7 +157,7 @@ export const IssueLikeDataTableView = ({
       };
     })
   }), [visibleSortedColumns]);
-  const headColumns = visibleSortedColumns.map(({
+  const headColumns = useMemo(() => visibleSortedColumns.map(({
     key,
     title,
     type
@@ -144,7 +166,7 @@ export const IssueLikeDataTableView = ({
     content: title,
     shouldTruncate: true,
     maxWidth: getColumnWidth(key, type)
-  }));
+  })), [visibleSortedColumns]);
   useEffect(() => {
     if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
       void onNextPage({
@@ -152,37 +174,41 @@ export const IssueLikeDataTableView = ({
       });
     }
   }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  let dndPreviewHeight = 0;
-  if (items.length > 0 && containerRef.current) {
-    const containerEl = containerRef.current;
-    invariant(containerEl);
-    dndPreviewHeight = containerEl.offsetHeight;
-  }
+  const hasData = items.length > 0;
 
   // This variable contains initial Y mouse coordinate, so we can restrict
   // autoScroller in X axis only
   const initialAutoScrollerClientY = useRef();
   useEffect(() => {
-    if (!onVisibleColumnKeysChange) {
+    if (!onVisibleColumnKeysChange || !hasData) {
       return;
     }
     return combine(monitorForElements({
       onDragStart: ({
         location
       }) => {
+        var _containerRef$current;
         initialAutoScrollerClientY.current = location.current.input.clientY;
         autoScroller.start({
-          input: location.current.input,
+          input: {
+            ...location.current.input,
+            clientY:
+            // The goal is to have clientY the same and in the middle of the scrollable area
+            // Since clientY is taken from to of the viewport we need to plus that in order to get
+            // middle of the scrollable area in reference to the viewport
+            (initialAutoScrollerClientY.current || 0) + (((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetHeight) || 0) / 2
+          },
           behavior: 'container-only'
         });
       },
       onDrag: ({
         location
       }) => {
+        var _containerRef$current2;
         autoScroller.updateInput({
           input: {
             ...location.current.input,
-            clientY: initialAutoScrollerClientY.current || 0
+            clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
           }
         });
       },
@@ -190,7 +216,6 @@ export const IssueLikeDataTableView = ({
         source,
         location
       }) {
-        initialAutoScrollerClientY.current = null;
         autoScroller.stop();
         if (location.current.dropTargets.length === 0) {
           return;
@@ -220,7 +245,7 @@ export const IssueLikeDataTableView = ({
         }
       }
     }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
   const tableRows = useMemo(() => items.map((newRowData, rowIndex) => ({
     key: `${identityColumnKey && newRowData[identityColumnKey] && newRowData[identityColumnKey].data || rowIndex}`,
     cells: visibleSortedColumns.map(({
@@ -242,9 +267,7 @@ export const IssueLikeDataTableView = ({
     }),
     ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
   })), [identityColumnKey, renderItem, items, visibleSortedColumns]);
-  const rows = [...tableRows, ...(status === 'loading' ? [loadingRow] : [])];
-  const setIsDragPreviewOn = useCallback(() => setIsDragPreview(true), [setIsDragPreview]);
-  const setIsDragPreviewOff = useCallback(() => setIsDragPreview(false), [setIsDragPreview]);
+  const rows = useMemo(() => [...tableRows, ...(status === 'loading' ? [loadingRow] : [])], [loadingRow, status, tableRows]);
   const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
     onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
   }, [onVisibleColumnKeysChange]);
@@ -261,32 +284,50 @@ export const IssueLikeDataTableView = ({
   }, [hasFullSchema, onLoadDatasourceDetails]);
   return jsx("div", {
     ref: containerRef,
-    css: isDragPreview ? containerDragPreviewStyles : null
+    css: scrollableContainerHeight ? scrollableContainerStyles : null,
+    style: scrollableContainerHeight ? {
+      maxHeight: `${scrollableContainerHeight}px`
+    } : undefined
   }, jsx(Table, {
-    css: isDragPreview ? tableDragPreviewStyles : null,
+    css: tableStyles,
     "data-testid": testId
   }, jsx("thead", {
     "data-testid": testId && `${testId}--head`,
-    css: tableHeadStyles
+    css: [noDefaultBorderStyles, tableHeadStyles]
   }, jsx("tr", null, headColumns.map(({
     key,
     content,
     maxWidth
   }, cellIndex) => {
-    const TruncatedContent = () => jsx("div", {
-      css: truncatedCellStyles
-    }, content);
-    if (onVisibleColumnKeysChange && status !== 'loading') {
+    if (onVisibleColumnKeysChange && hasData) {
+      var _containerRef$current3;
+      const previewRows = tableRows.map(({
+        cells
+      }) => {
+        const cell = cells.find(({
+          key: cellKey
+        }) => cellKey === key);
+        if (cell) {
+          return cell.content;
+        }
+      }).slice(0, 5);
+      const dragPreview = jsx(DragColumnPreview, {
+        title: jsx(Heading, {
+          level: "h400"
+        }, content),
+        rows: previewRows
+      });
       return jsx(DraggableTableHeading, {
         tableId: tableId,
         key: key,
         id: key,
         index: cellIndex,
         maxWidth: maxWidth,
-        dndPreviewHeight: dndPreviewHeight,
-        onDragPreviewStart: setIsDragPreviewOn,
-        onDragPreviewEnd: setIsDragPreviewOff
-      }, jsx(TruncatedContent, null));
+        dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
+        dragPreview: dragPreview
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     } else {
       return jsx(TableHeading, {
         key: key,
@@ -294,15 +335,17 @@ export const IssueLikeDataTableView = ({
         style: {
           maxWidth
         }
-      }, jsx(TruncatedContent, null));
+      }, jsx(Heading, {
+        level: "h400"
+      }, content));
     }
-  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
+  }), onVisibleColumnKeysChange && hasData && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
     columns: hasFullSchema ? orderedColumns : [],
     selectedColumnKeys: hasFullSchema ? visibleColumnKeys : [],
-    isDatasourceLoading: status === 'loading',
     onSelectedColumnKeysChange: onSelectedColumnKeysChange,
     onOpen: handlePickerOpen
   })))), jsx("tbody", {
+    css: noDefaultBorderStyles,
     "data-testid": testId && `${testId}--body`
   }, rows.map(({
     key,

package/dist/es2019/ui/issue-like-table/styled.js

@@ -1,11 +1,29 @@
 import styled from '@emotion/styled';
+import { N40 } from '@atlaskit/theme/colors';
 export const Table = styled.table`
   width: 100%;
 `;
 export const TableHeading = styled.th`
+  cursor: grab;
   position: relative;
   padding-block: ${"var(--ds-space-100, 8px)"};
   line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
+  border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
+  .ProseMirror & h5,
+  & h5 {
+    margin-top: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 24px; /* Is needed to keep overall height consistent with or without drag handle icon present */
+  }
+
+  &:hover .issue-like-table-drag-handle {
+    width: 24px;
+  }
+  &:hover .issue-like-table-drag-handle-spacer {
+    width: 0px;
+  }
 `;
 export const EmptyStateTableHeading = styled(TableHeading)`
   &:first-child {

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -5,7 +5,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage, FormattedNumber, useIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
-import { B400, N0, N800 } from '@atlaskit/theme/colors';
+import { B400, N0, N40, N800 } from '@atlaskit/theme/colors';
 import { useDatasourceTableState } from '../../../hooks/useDatasourceTableState';
 import { getAvailableJiraSites } from '../../../services/getAvailableJiraSites';
 import { AccessRequired } from '../../common/error-state/access-required';
@@ -23,8 +23,9 @@ const dropdownContainerStyles = css({
 });
 const contentContainerStyles = css({
   display: 'grid',
-  height: '420px',
-  overflow: 'auto'
+  maxHeight: '420px',
+  overflow: 'auto',
+  borderBottom: `2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`}`
 });
 const placeholderSmartLinkStyles = css({
   backgroundColor: `var(--ds-surface-raised, ${N0})`,
@@ -159,7 +160,9 @@ export const JiraIssuesConfigModal = props => {
   const handleViewModeChange = selectedMode => {
     setCurrentViewMode(selectedMode);
   };
-  const issueLikeDataTableView = useMemo(() => jsx(IssueLikeDataTableView, {
+  const issueLikeDataTableView = useMemo(() => jsx("div", {
+    css: contentContainerStyles
+  }, jsx(IssueLikeDataTableView, {
     testId: "jira-jql-datasource-table",
     status: status,
     columns: columns,
@@ -169,7 +172,7 @@ export const JiraIssuesConfigModal = props => {
     onNextPage: onNextPage,
     onLoadDatasourceDetails: loadDatasourceDetails,
     onVisibleColumnKeysChange: setVisibleColumnKeys
-  }), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
+  })), [columns, defaultVisibleColumnKeys, hasNextPage, loadDatasourceDetails, onNextPage, responseItems, status, visibleColumnKeys]);
   const renderCountModeContent = useCallback(() => {
     const url = selectedJiraSite === null || selectedJiraSite === void 0 ? void 0 : selectedJiraSite.url;
     if (status === 'unauthorized') {
@@ -205,9 +208,11 @@ export const JiraIssuesConfigModal = props => {
       return jsx(NoResults, null);
     } else if (status === 'empty' || !columns.length) {
       // persist the empty state when making the initial /data request which contains the columns
-      return jsx(EmptyState, {
+      return jsx("div", {
+        css: contentContainerStyles
+      }, jsx(EmptyState, {
         testId: `jira-jql-datasource-modal--empty-state`
-      });
+      }));
     }
     const firstIssueUrl = retrieveUrlForSmartCardRender();
     if (responseItems.length === 1 && firstIssueUrl) {
@@ -250,9 +255,7 @@ export const JiraIssuesConfigModal = props => {
     isSearching: status === 'loading',
     parameters: parameters,
     onSearch: onSearch
-  }), jsx("div", {
-    css: contentContainerStyles
-  }, currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent())), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
+  }), currentViewMode === 'count' ? renderCountModeContent() : renderIssuesModeContent()), jsx(ModalFooter, null, shouldShowIssueCount && jsx("div", {
     "data-testid": "jira-jql-datasource-modal-total-issues-count",
     css: issueCountStyles
   }, jsx(FormattedNumber, {

package/dist/es2019/ui/table-footer/index.js

@@ -11,20 +11,18 @@ import { N0, N40, N800, N90 } from '@atlaskit/theme/colors';
 import { footerMessages } from './messages';
 import { SyncInfo } from './sync-info';
 const FooterWrapper = styled.div`
+  padding: 0 ${"var(--ds-space-200, 16px)"};
+  box-sizing: border-box;
+  background: ${`var(--ds-background-input, ${N0})`};
+`;
+const TopBorderWrapper = styled.div`
   display: flex;
+  box-sizing: border-box;
   justify-content: space-between;
-  width: 100%;
   padding: ${"var(--ds-space-250, 20px)"} 0;
-  position: sticky;
-  bottom: 0;
-  background: ${`var(--ds-background-input, ${N0})`};
-  border-top-style: solid;
-  border-top-color: ${`var(--ds-background-neutral, ${N40})`};
-  margin-top: -2px;
-  align-self: center;
+  border-top: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
 `;
 const IssueCounterWrapper = styled.div`
-  margin-left: 10px;
   display: flex;
   align-self: center;
   color: ${`var(--ds-text-accent-gray, ${N800})`};
@@ -55,7 +53,9 @@ export const TableFooter = ({
   // ensure correct positioning since 'justify-content: space-between' is used).
   return onRefresh || showIssueCount ? jsx(FooterWrapper, {
     "data-testid": "table-footer"
-  }, jsx(IssueCounterWrapper, null, showIssueCount && jsx(Heading, {
+  }, jsx(TopBorderWrapper, null, jsx(IssueCounterWrapper, {
+    "data-testid": 'issue-count-wrapper'
+  }, showIssueCount && jsx(Heading, {
     testId: "issue-count",
     level: "h400"
   }, jsx(FormattedNumber, {
@@ -76,5 +76,5 @@ export const TableFooter = ({
     }),
     isDisabled: isLoading,
     testId: "refresh-button"
-  })))) : null;
+  }))))) : null;
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.31.1",
+	"version": "0.31.3",
 	"sideEffects": false
 }

package/dist/esm/ui/assets-modal/modal/index.js

@@ -80,7 +80,7 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
     return data === null || data === void 0 ? void 0 : (_data$key = data.key) === null || _data$key === void 0 ? void 0 : (_data$key$data = _data$key.data) === null || _data$key$data === void 0 ? void 0 : _data$key$data.url;
   }, [responseItems]);
   var onInsertPressed = useCallback(function () {
-    if (!aql || !schemaId) {
+    if (!aql || !schemaId || !workspaceId) {
       return;
     }
     var firstAssetUrl = retrieveUrlForSmartCardRender();
@@ -98,7 +98,7 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
           datasource: {
             id: datasourceId,
             parameters: {
-              workspaceId: '',
+              workspaceId: workspaceId,
               aql: aql,
               schemaId: schemaId
             },
@@ -116,7 +116,7 @@ export var AssetsConfigModal = function AssetsConfigModal(props) {
         }
       });
     }
-  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, visibleColumnKeys]);
+  }, [aql, datasourceId, onInsert, responseItems.length, retrieveUrlForSmartCardRender, schemaId, workspaceId, visibleColumnKeys]);
   var handleOnSearch = useCallback(function (aql, schemaId) {
     reset();
     setAql(aql);

package/dist/esm/ui/datasource-table-view/datasourceTableView.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { useEffect } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { useDatasourceTableState } from '../../hooks/useDatasourceTableState';
 import { AccessRequired } from '../common/error-state/access-required';
 import { LoadingError } from '../common/error-state/loading-error';
@@ -8,13 +8,6 @@ import { NoResults } from '../common/error-state/no-results';
 import { IssueLikeDataTableView } from '../issue-like-table';
 import EmptyState from '../issue-like-table/empty-state';
 import { TableFooter } from '../table-footer';
-var TableViewWrapperStyles = css({
-  display: 'grid',
-  position: 'relative',
-  padding: "var(--ds-space-200, 16px)",
-  paddingBottom: 0,
-  boxSizing: 'border-box'
-});
 export var DatasourceTableView = function DatasourceTableView(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -57,9 +50,8 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
       onRefresh: reset
     });
   }
-  return columns.length > 0 ? jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(IssueLikeDataTableView, {
+  var isDataReady = columns.length > 0;
+  return jsx("div", null, isDataReady ? jsx(IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -68,18 +60,14 @@ export var DatasourceTableView = function DatasourceTableView(_ref) {
     status: status,
     columns: columns,
     visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
-    onVisibleColumnKeysChange: onVisibleColumnKeysChange
-  }), jsx(TableFooter, {
-    issueCount: totalCount,
-    onRefresh: reset,
-    isLoading: status === 'loading'
-  })) : jsx("div", {
-    css: TableViewWrapperStyles
-  }, jsx(EmptyState, {
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    scrollableContainerHeight: 590
+  }) : jsx(EmptyState, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
   }), jsx(TableFooter, {
+    issueCount: isDataReady ? totalCount : undefined,
     onRefresh: reset,
-    isLoading: true
+    isLoading: !isDataReady || status === 'loading'
   }));
 };

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

@@ -13,8 +13,7 @@ import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { CheckboxOption, PopupSelect } from '@atlaskit/select';
 import { columnPickerMessages } from './messages';
 export var ColumnPicker = function ColumnPicker(_ref) {
-  var isDatasourceLoading = _ref.isDatasourceLoading,
-    columns = _ref.columns,
+  var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
     onOpen = _ref.onOpen;
@@ -120,8 +119,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
         })),
         spacing: "compact",
         appearance: "subtle",
-        testId: "column-picker-trigger-button",
-        isDisabled: isDatasourceLoading
+        testId: "column-picker-trigger-button"
       }));
     }
   });

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

@@ -0,0 +1,29 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import styled from '@emotion/styled';
+import { TableHeading } from './styled';
+var maxWidth = '200px';
+var firstLastChildOverride = "\n  &:first-of-type, &:last-of-type {\n    padding-left: ".concat("var(--ds-space-100, 8px)", ";\n    padding-right: ", "var(--ds-space-100, 8px)", ";\n  }\n");
+var TablePreviewHeading = styled(TableHeading)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  background: ", ";\n  color: ", ";\n  max-width: ", ";\n  ", "\n"])), "var(--ds-background-disabled, #091E4224)", "var(--ds-text-disabled, #091E424F)", maxWidth, firstLastChildOverride);
+var TablePreviewCell = styled.td(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: ", ";\n  padding: ", " ", ";\n  ", "\n"])), maxWidth, "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstLastChildOverride);
+var tableStyles = css({
+  background: "var(--ds-surface, #FFF)",
+  borderCollapse: 'separate',
+  borderSpacing: 0,
+  fontSize: "var(--ds-font-size-200, 16px)",
+  maxWidth: maxWidth
+});
+export var DragColumnPreview = function DragColumnPreview(_ref) {
+  var title = _ref.title,
+    rows = _ref.rows;
+  return jsx("table", {
+    css: tableStyles
+  }, jsx("thead", null, jsx("tr", null, jsx(TablePreviewHeading, null, title))), jsx("tbody", null, rows.map(function (data, i) {
+    return jsx("tr", {
+      key: i
+    }, jsx(TablePreviewCell, null, data));
+  }), jsx("tr", null, jsx(TablePreviewCell, null, "..."))));
+};