@atlaskit/link-datasource 0.14.4

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import { useCallback, useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button/standard-button';
+import BoardIcon from '@atlaskit/icon/glyph/board';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import { CheckboxOption, PopupSelect } from '@atlaskit/select';
+export const ColumnPicker = ({
+  columns,
+  selectedColumnKeys,
+  onSelectedColumnKeysChange
+}) => {
+  const mapColumnToOption = useCallback(({
+    key,
+    title
+  }) => ({
+    label: title,
+    value: key
+  }), []);
+  const selectedOptions = columns.filter(({
+    key
+  }) => selectedColumnKeys.includes(key)).map(mapColumnToOption);
+  const allOptions = useMemo(() => {
+    return columns.filter(({
+      title,
+      key
+    }) => 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]);
+  return jsx(PopupSelect, {
+    classNamePrefix: 'column-picker-popup',
+    testId: 'column-picker-popup',
+    components: {
+      Option: CheckboxOption
+    },
+    options: allOptions,
+    value: selectedOptions,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    isMulti: true,
+    placeholder: "Search for fields" // TODO Translate
+    ,
+    "aria-label": "Search for fields",
+    onChange: handleChange,
+    target: ({
+      isOpen,
+      ...triggerProps
+    }) => jsx(Button, _extends({}, triggerProps, {
+      isSelected: isOpen,
+      iconBefore: jsx("div", null, jsx(BoardIcon, {
+        label: "board",
+        size: "small"
+      }), jsx(ChevronDownIcon, {
+        label: "down",
+        size: "small"
+      })),
+      spacing: "compact",
+      appearance: "subtle",
+      testId: "column-picker-trigger-button"
+    }))
+  });
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,166 @@
+/** @jsx jsx */
+import { useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import invariant from 'tiny-invariant';
+import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
+import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-indicator/box';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { TableHeading } from './styled';
+const tableHeadingStyles = css({
+  cursor: 'grab'
+});
+const tableHeadingStatusStyles = {
+  idle: css({
+    ':hover': {
+      background: "var(--ds-surface-hovered, #091E4224)"
+    }
+  }),
+  dragging: css({
+    background: "var(--ds-background-disabled, #091E4224)",
+    color: "var(--ds-text-disabled, #091E424F)"
+  })
+};
+const verticallyAlignedStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  whiteSpace: 'nowrap'
+});
+const dragHandleStyles = css({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center'
+});
+const dropTargetStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%'
+});
+const noPointerEventsStyles = css({
+  pointerEvents: 'none'
+});
+export const DraggableTableHeading = ({
+  children,
+  id,
+  index,
+  tableId,
+  dndPreviewHeight,
+  onDragPreviewStart,
+  onDragPreviewEnd
+}) => {
+  const ref = useRef(null);
+  const [status, setStatus] = useState('idle');
+  const [isDraggingAnyColumn, setIsDraggingAnyColumn] = useState(false);
+  const [closestEdge, setClosestEdge] = useState(null);
+  const dropTargetRef = useRef(null);
+  useEffect(() => {
+    const cell = ref.current;
+    invariant(cell);
+    return combine(draggable({
+      element: cell,
+      getInitialData() {
+        return {
+          type: 'table-header',
+          id,
+          index,
+          tableId
+        };
+      },
+      onGenerateDragPreview() {
+        setStatus('preview');
+        onDragPreviewStart();
+      },
+      onDragStart() {
+        setStatus('dragging');
+        onDragPreviewEnd();
+      },
+      onDrop() {
+        setStatus('idle');
+      }
+    }));
+  }, [id, index, onDragPreviewEnd, onDragPreviewStart, 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]);
+  return jsx(TableHeading, {
+    ref: ref,
+    css: [tableHeadingStyles, tableHeadingStatusStyles[status]],
+    "data-testid": `${id}-column-heading`
+  }, jsx("div", {
+    ref: dropTargetRef,
+    css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
+    style: {
+      height: `${dndPreviewHeight}px`
+    },
+    "data-testid": 'column-drop-target'
+  }, closestEdge && jsx(DropIndicator, {
+    edge: closestEdge
+  })), jsx("div", {
+    css: verticallyAlignedStyles
+  }, jsx("div", {
+    css: dragHandleStyles
+  }, jsx(DragHandlerIcon, {
+    label: `${id}-drag-icon`,
+    size: "medium"
+  })), children));
+};

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

@@ -0,0 +1,113 @@
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import { Skeleton } from '@atlaskit/linking-common';
+import UserType from '../render-type/user';
+import { TableHeading } from '../styled';
+import Priority from './priority';
+import Type from './type';
+const columns = [{
+  key: 'type',
+  title: 'Type'
+}, {
+  key: 'issue',
+  title: 'Key',
+  width: 50
+}, {
+  key: 'summary',
+  title: 'Summary'
+}, {
+  key: 'assignee',
+  title: 'Assignee',
+  width: 100
+}, {
+  key: 'priority',
+  title: 'P'
+}, {
+  key: 'status',
+  title: 'Status'
+}, {
+  key: 'resolution',
+  title: 'Resolution'
+}, {
+  key: 'created',
+  title: 'Created'
+}, {
+  key: 'due',
+  title: 'Updated'
+}];
+const priorities = ['low', 'medium', 'high', 'medium', 'low', 'blocker', 'medium', 'blocker', 'high', 'low'];
+const types = ['task', 'story', 'commit', 'epic', 'bug', 'task', 'story', 'commit', 'issue', 'epic'];
+const summaryColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 147];
+const statusColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 66, 59];
+const rows = new Array(10).fill(null).map((_, index) => ({
+  id: index,
+  priority: priorities[index],
+  type: types[index],
+  summaryWidth: summaryColumnWidths[index],
+  statusWidth: statusColumnWidths[index]
+}));
+export default (props => {
+  const renderItem = useCallback(({
+    key,
+    width
+  }, {
+    priority,
+    type,
+    summaryWidth,
+    statusWidth
+  }) => {
+    switch (key) {
+      case 'assignee':
+        return jsx(UserType, null, jsx(Skeleton, {
+          width: width,
+          height: 13,
+          borderRadius: 8
+        }));
+      case 'priority':
+        return jsx(Priority, {
+          priority: priority
+        });
+      case 'type':
+        return jsx(Type, {
+          type: type
+        });
+      case 'summary':
+        return jsx(Skeleton, {
+          appearance: "blue",
+          width: summaryWidth,
+          borderRadius: 10,
+          height: 13
+        });
+      case 'status':
+        return jsx(Skeleton, {
+          appearance: "blue",
+          width: statusWidth,
+          height: 16,
+          borderRadius: 3
+        });
+      default:
+        return jsx(Skeleton, {
+          width: width,
+          height: 13,
+          borderRadius: 8
+        });
+    }
+  }, []);
+  return jsx("table", {
+    "data-testid": props.testId
+  }, jsx("thead", null, jsx("tr", null, columns.map(({
+    title,
+    key,
+    width
+  }) => jsx(TableHeading, {
+    key: key,
+    style: {
+      width
+    }
+  }, title)))), jsx("tbody", null, rows.map(row => jsx("tr", {
+    key: row.id
+  }, columns.map(column => jsx("td", {
+    key: column.key
+  }, renderItem(column, row)))))));
+});

package/dist/es2019/ui/issue-like-table/empty-state/priority.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { B300, R300, Y300 } from '@atlaskit/theme/colors';
+import IconType from '../render-type/icon';
+// https://stackoverflow.com/questions/61099149/svg-fill-color-not-working-with-hex-colors
+const replaceHashInHex = hex => hex.replace('#', '%23');
+const priorityToSVGPathMap = {
+  low: ` <path
+  d="M12.5 6.1c.5-.3 1.1-.1 1.4.4.3.5.1 1.1-.3 1.3l-5 3c-.3.2-.7.2-1 0l-5-3c-.6-.2-.7-.9-.4-1.3.2-.5.9-.7 1.3-.4L8 8.8l4.5-2.7z"
+  fill="${replaceHashInHex(B300)}"
+/>`,
+  medium: `<path
+  fill="${replaceHashInHex(Y300)}"
+  d="M3,4h10c0.6,0,1,0.4,1,1s-0.4,1-1,1H3C2.4,6,2,5.6,2,5S2.4,4,3,4z M3,10h10c0.6,0,1,0.4,1,1s-0.4,1-1,1H3
+ c-0.6,0-1-0.4-1-1S2.4,10,3,10z"
+/>`,
+  high: `<path
+  d="M3.5 9.9c-.5.3-1.1.1-1.4-.3s-.1-1.1.4-1.4l5-3c.3-.2.7-.2 1 0l5 3c.5.3.6.9.3 1.4-.3.5-.9.6-1.4.3L8 7.2 3.5 9.9z"
+  fill="${replaceHashInHex(R300)}"
+/>`,
+  blocker: `<path
+  d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM4 7c-.6 0-1 .4-1 1s.4 1 1 1h8c.6 0 1-.4 1-1s-.4-1-1-1H4z"
+  fill="${replaceHashInHex(R300)}"
+/>`
+};
+export default (({
+  priority
+}) => {
+  const image = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">${priorityToSVGPathMap[priority]}</svg>`;
+  return /*#__PURE__*/React.createElement(IconType, {
+    source: `data:image/svg+xml;utf8,${image}`
+  });
+});

package/dist/es2019/ui/issue-like-table/empty-state/type.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Bug16Icon from '@atlaskit/icon-object/glyph/bug/16';
+import Commit16Icon from '@atlaskit/icon-object/glyph/commit/16';
+import Epic16Icon from '@atlaskit/icon-object/glyph/epic/16';
+import Issue16Icon from '@atlaskit/icon-object/glyph/issue/16';
+import Story16Icon from '@atlaskit/icon-object/glyph/story/16';
+import Task16Icon from '@atlaskit/icon-object/glyph/task/16';
+const IconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export default (({
+  type
+}) => {
+  const TypeIcon = () => {
+    switch (type) {
+      case 'issue':
+        return /*#__PURE__*/React.createElement(Issue16Icon, {
+          label: 'issue'
+        });
+      case 'commit':
+        return /*#__PURE__*/React.createElement(Commit16Icon, {
+          label: 'commit'
+        });
+      case 'story':
+        return /*#__PURE__*/React.createElement(Story16Icon, {
+          label: 'story'
+        });
+      case 'epic':
+        return /*#__PURE__*/React.createElement(Epic16Icon, {
+          label: 'epic'
+        });
+      case 'bug':
+        return /*#__PURE__*/React.createElement(Bug16Icon, {
+          label: 'bug'
+        });
+      case 'task':
+        return /*#__PURE__*/React.createElement(Task16Icon, {
+          label: 'task'
+        });
+    }
+  };
+  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(TypeIcon, null));
+});

package/dist/es2019/ui/issue-like-table/empty-state/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,259 @@
+/** @jsx jsx */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import invariant from 'tiny-invariant';
+import { Skeleton } from '@atlaskit/linking-common';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-autoscroll';
+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 { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/util/combine';
+import { ColumnPicker } from './column-picker';
+import { DraggableTableHeading } from './draggable-table-heading';
+import TableEmptyState from './empty-state';
+import { fallbackRenderType } from './render-type';
+import { TableHeading } from './styled';
+import { useIsOnScreen } from './useIsOnScreen';
+const tableHeadStyles = css({
+  background: "var(--ds-surface, #FFF)",
+  borderTop: '2px solid transparent'
+});
+const columnPickerHeaderStyles = css({
+  width: '40px',
+  // TODO use some variable for that?
+  paddingBlock: "var(--ds-space-100, 8px)"
+});
+const tableDragPreviewStyles = css({
+  backgroundColor: "var(--ds-surface, #FFF)"
+});
+const containerDragPreviewStyles = css({
+  overflow: 'hidden'
+});
+function extractIndex(data) {
+  const {
+    index
+  } = data;
+  invariant(typeof index === 'number');
+  return index;
+}
+const orderColumns = (columns, visibleColumnKeys) => {
+  // newColumnKeyOrder contains keys of selected (visible columns only).
+  // In order to sort all the columns we need to insert unselected ones into this list
+  // We put them into their absolution position as it was in unchanged (before column move) order.
+  columns.forEach(({
+    key
+  }, index) => {
+    if (!visibleColumnKeys.includes(key)) {
+      visibleColumnKeys.splice(index, 0, key);
+    }
+  });
+  columns.sort((a, b) => {
+    const indexB = visibleColumnKeys.indexOf(b.key);
+    const indexA = visibleColumnKeys.indexOf(a.key);
+    return indexA - indexB;
+  });
+  return [...columns];
+};
+export const IssueLikeDataTableView = ({
+  testId,
+  onNextPage,
+  items,
+  columns,
+  renderItem = fallbackRenderType,
+  visibleColumnKeys,
+  onVisibleColumnKeysChange,
+  status,
+  hasNextPage
+}) => {
+  var _orderedColumns$find;
+  const tableId = useMemo(() => Symbol('unique-id'), []);
+  const [lastRowElement, setLastRowElement] = useState(null);
+  const [isDragPreview, setIsDragPreview] = useState(false);
+  const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
+  const containerRef = useRef(null);
+  const [orderedColumns, setOrderedColumns] = useState(() => orderColumns([...columns], [...visibleColumnKeys]));
+  const visibleSortedColumns = useMemo(() => visibleColumnKeys.map(visibleKey => orderedColumns.find(({
+    key
+  }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);
+
+  // TODO seems like this component can't handle some combination of incremental data retreaval.
+  // If data comes first, then columns and then visibleColumnKeys it blows up,
+  // or some other combination.
+
+  const identityColumnKey = (_orderedColumns$find = orderedColumns.find(column => column.isIdentity)) === null || _orderedColumns$find === void 0 ? void 0 : _orderedColumns$find.key;
+  const loadingRow = useMemo(() => ({
+    key: 'loading',
+    cells: visibleSortedColumns.map(({
+      key
+    }) => {
+      const content = jsx(Skeleton, {
+        borderRadius: "var(--ds-radius-100, 3px)",
+        width: '100%',
+        height: '20px'
+      });
+      return {
+        key,
+        content
+      };
+    })
+  }), [visibleSortedColumns]);
+  const headColumns = visibleSortedColumns.map(column => ({
+    key: column.key,
+    content: column.title,
+    // width: TODO Find out how we going to retrieve column width
+    shouldTruncate: true
+  }));
+  useEffect(() => {
+    if (status === 'empty' || isBottomOfTableVisibleRaw && hasNextPage && status !== 'loading') {
+      void onNextPage();
+    }
+  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
+  let dndPreviewHeight = 0;
+  if (items.length > 0 && containerRef.current) {
+    const containerEl = containerRef.current;
+    invariant(containerEl);
+    dndPreviewHeight = containerEl.offsetHeight;
+  }
+
+  // This variable contains initial Y mouse coordinate, so we can restrict
+  // autoScroller in X axis only
+  const initialAutoScrollerClientY = useRef();
+  useEffect(() => {
+    if (!onVisibleColumnKeysChange) {
+      return;
+    }
+    return combine(monitorForElements({
+      onDragStart: ({
+        location
+      }) => {
+        initialAutoScrollerClientY.current = location.current.input.clientY;
+        autoScroller.start({
+          input: location.current.input,
+          behavior: 'container-only'
+        });
+      },
+      onDrag: ({
+        location
+      }) => {
+        autoScroller.updateInput({
+          input: {
+            ...location.current.input,
+            clientY: initialAutoScrollerClientY.current || 0
+          }
+        });
+      },
+      onDrop({
+        source,
+        location
+      }) {
+        initialAutoScrollerClientY.current = null;
+        autoScroller.stop();
+        if (location.current.dropTargets.length === 0) {
+          return;
+        }
+        const target = location.current.dropTargets[0];
+        if (source.data.id === target.data.id) {
+          return;
+        }
+        if (source.data.type === 'table-header' && source.data.tableId === tableId) {
+          const closestEdgeOfTarget = extractClosestEdge(target.data);
+          invariant(closestEdgeOfTarget === 'left' || closestEdgeOfTarget === 'right');
+          const startIndex = extractIndex(source.data);
+          const indexOfTarget = extractIndex(target.data);
+          const newColumnKeyOrder = reorderWithEdge({
+            list: visibleColumnKeys,
+            closestEdgeOfTarget,
+            startIndex,
+            indexOfTarget,
+            axis: 'horizontal'
+          });
+          onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange([...newColumnKeyOrder]);
+
+          // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
+          setOrderedColumns(columns => {
+            return orderColumns([...columns], [...newColumnKeyOrder]);
+          });
+        }
+      }
+    }));
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  const tableRows = useMemo(() => items.map((newRowData, rowIndex) => ({
+    key: `${identityColumnKey && newRowData[identityColumnKey] || rowIndex}`,
+    cells: visibleSortedColumns.map(({
+      key,
+      type
+    }) => {
+      const value = newRowData[key];
+      const values = Array.isArray(value) ? value : [value];
+      const content = values.map(value => renderItem({
+        type,
+        value
+      }));
+      return {
+        key,
+        content
+      };
+    }),
+    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 onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
+    onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
+  }, [onVisibleColumnKeysChange]);
+  return jsx("div", {
+    ref: containerRef,
+    css: isDragPreview ? containerDragPreviewStyles : null
+  }, jsx("table", {
+    css: isDragPreview ? tableDragPreviewStyles : null,
+    "data-testid": testId
+  }, jsx("thead", {
+    "data-testid": testId && `${testId}--head`,
+    css: tableHeadStyles
+  }, jsx("tr", null, headColumns.map(({
+    key,
+    content
+  }, cellIndex) => {
+    if (onVisibleColumnKeysChange) {
+      return jsx(DraggableTableHeading, {
+        tableId: tableId,
+        key: key,
+        id: key,
+        index: cellIndex,
+        dndPreviewHeight: dndPreviewHeight,
+        onDragPreviewStart: setIsDragPreviewOn,
+        onDragPreviewEnd: setIsDragPreviewOff
+      }, content);
+    } else {
+      return jsx(TableHeading, {
+        key: key,
+        "data-testid": `${key}-column-heading`
+      }, content);
+    }
+  }), onVisibleColumnKeysChange && jsx("th", {
+    css: columnPickerHeaderStyles
+  }, jsx(ColumnPicker, {
+    columns: orderedColumns,
+    selectedColumnKeys: visibleColumnKeys,
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange
+  })))), jsx("tbody", {
+    "data-testid": testId && `${testId}--body`
+  }, rows.map(({
+    key,
+    cells,
+    ref
+  }) => jsx("tr", {
+    key: key,
+    "data-testid": testId && `${testId}--row-${key}`,
+    ref: ref
+  }, cells.map(({
+    key,
+    content
+  }, cellIndex) => jsx("td", {
+    key: key,
+    "data-testid": testId && `${testId}--cell-${cellIndex}`,
+    colSpan: cellIndex + 1 === cells.length ? 2 : undefined
+  }, content)))))));
+};
+export const EmptyState = TableEmptyState;