@atlaskit/link-datasource 3.22.7 → 4.0.0

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

@@ -1,658 +0,0 @@
-/**
- * @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 debounce from 'lodash/debounce';
-import invariant from 'tiny-invariant';
-import { FlagsProvider } from '@atlaskit/flag';
-import { Skeleton } from '@atlaskit/linking-common';
-import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/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 { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { Box } from '@atlaskit/primitives';
-import { N40 } from '@atlaskit/theme/colors';
-import { fontFallback } from '@atlaskit/theme/typography';
-import Tooltip from '@atlaskit/tooltip';
-import { WidthObserver } from '@atlaskit/width-detector';
-import { startUfoExperience, succeedUfoExperience } from '../../analytics/ufoExperiences';
-import { stickyTableHeadersIndex } from '../../common/zindex';
-import { useDatasourceExperienceId } from '../../contexts/datasource-experience-id';
-import { ColumnPicker } from './column-picker';
-import { DragColumnPreview } from './drag-column-preview';
-import { DraggableTableHeading } from './draggable-table-heading';
-import TableEmptyState from './empty-state';
-import { renderType } from './render-type';
-import { InlineEditableTableCell, Table, TableHeading, withTablePluginHeaderPrefix } from './styled';
-import { TableCellContent } from './table-cell-content';
-import { useIsOnScreen } from './useIsOnScreen';
-import { COLUMN_BASE_WIDTH, getFieldLabelById, getWidthCss } from './utils';
-const tableSidePadding = "var(--ds-space-200, 16px)";
-const tableHeadStyles = css({
-  background: "var(--ds-elevation-surface-current, #FFF)",
-  position: 'sticky',
-  top: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  zIndex: stickyTableHeadersIndex
-});
-const columnPickerWidth = 80;
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-const ColumnPickerHeader = styled.th({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  [`${withTablePluginHeaderPrefix('&:last-of-type')}`]: {
-    boxSizing: 'border-box',
-    border: 0,
-    width: `${columnPickerWidth}px`,
-    zIndex: 10,
-    position: 'sticky',
-    right: `calc(-1 * ${tableSidePadding})`,
-    backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
-    /* It is required to have solid (not half-transparent) color because of this gradient business below */
-    borderBottom: `2px solid ${`var(--ds-border, ${N40})`}`,
-    paddingRight: tableSidePadding,
-    background: `linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, ${"var(--ds-elevation-surface-current, #FFF)"} 10% )`,
-    /* Keeps dropdown button in the middle */
-    verticalAlign: 'middle',
-    /* In case when TH itself is bigger we want to keep picker at the right side */
-    textAlign: 'right'
-  }
-});
-const truncateStyles = css({
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
-const tableContainerStyles = css({
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-  position: 'relative'
-});
-
-/**
- * Following section deals with slight gradient shadows that we add
- * on all four sides when there is more content in that direction.
- *
- * We do that by applying two gradients to the background -
- * one is "static" ('local') and other is "sticky" ('scroll'). \
- * "Static" one makes a white color gradient, that when window is at the end of scrollable area goes on top
- * of "sticky" (gray) one, dominating and hence disabling sticky one.
- */
-
-const shadowColor = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))";
-const shadowColorLight = "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))";
-const leftWhiteOverrideGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
-    rgba(255, 255, 255, 0)
-  )`,
-  backgroundPosition: 'left center',
-  size: `40px 100%`,
-  attachment: `local`
-};
-const topWhiteOverrideGradient = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    rgba(255, 255, 255, 0),
-    ${"var(--ds-elevation-surface-current, #FFF)"} 30%
-  )`,
-  backgroundPosition: 'top center',
-  size: `100% 100px`,
-  attachment: `local`
-};
-const rightWhiteOverrideGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0),
-    ${"var(--ds-elevation-surface-current, #FFF)"} 70%
-  )`,
-  backgroundPosition: 'right center',
-  size: `40px 100%`,
-  attachment: `local`
-};
-const bottomWhiteOverride = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    ${"var(--ds-elevation-surface-current, #FFF)"} 30%,
-    rgba(255, 255, 255, 0)
-  )`,
-  backgroundPosition: 'bottom center',
-  size: `100% 40px`,
-  attachment: `local`
-};
-const leftShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    ${shadowColor},
-    rgba(0, 0, 0, 0)
-  )`,
-  backgroundPosition: 'left center',
-  size: `14px 100%`,
-  attachment: `scroll`
-};
-const topShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    rgba(0, 0, 0, 0),
-    ${shadowColorLight}
-  )`,
-  backgroundPosition: '0 52px',
-  size: `100% 14px`,
-  attachment: `scroll`
-};
-const rightShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0),
-    ${shadowColor}
-  )`,
-  backgroundPosition: 'right center',
-  size: `14px 100%`,
-  attachment: `scroll`
-};
-const bottomShadowGradient = {
-  backgroundImage: `
-  linear-gradient(
-    0deg,
-    ${shadowColorLight},
-    rgba(0, 0, 0, 0)
-  )`,
-  backgroundPosition: 'bottom center',
-  size: `100% 10px`,
-  attachment: `scroll`
-};
-const shadows = [leftWhiteOverrideGradient, leftShadowGradient, rightWhiteOverrideGradient, rightShadowGradient, topWhiteOverrideGradient, topShadowGradient, bottomWhiteOverride, bottomShadowGradient];
-export const scrollableContainerShadowsCssComponents = {
-  backgroundImage: shadows.map(({
-    backgroundImage
-  }) => backgroundImage).join(','),
-  backgroundPosition: shadows.map(({
-    backgroundPosition
-  }) => backgroundPosition).join(','),
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: shadows.map(({
-    size
-  }) => size).join(','),
-  backgroundAttachment: shadows.map(({
-    attachment
-  }) => attachment).join(',')
-};
-const scrollableContainerStyles = css({
-  overflow: 'auto',
-  boxSizing: 'border-box',
-  backgroundColor: "var(--ds-elevation-surface-current, #FFF)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundImage: scrollableContainerShadowsCssComponents.backgroundImage,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundPosition: scrollableContainerShadowsCssComponents.backgroundPosition,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundRepeat: scrollableContainerShadowsCssComponents.backgroundRepeat,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundSize: scrollableContainerShadowsCssComponents.backgroundSize,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  backgroundAttachment: scrollableContainerShadowsCssComponents.backgroundAttachment
-});
-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,
-  // There is a strange table:first-of-type rule that sets margin-top to 0 coming from container,
-  // but because our table is now not the first child (there is an empty div to measure width) we need to set it manually.
-  margin: 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
-});
-const headerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: `var(--ds-font-body-UNSAFE_small, ${fontFallback.body.UNSAFE_small})`,
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-const headingHoverEffectStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap',
-  '&:hover': {
-    background: "var(--ds-background-input-hovered, #F7F8F9)",
-    borderRadius: "var(--ds-border-radius-200, 3px)"
-  }
-});
-function extractIndex(data) {
-  const {
-    index
-  } = data;
-  invariant(typeof index === 'number');
-  return index;
-}
-const sortColumns = (firstOption, secondOption) => {
-  return firstOption.title.localeCompare(secondOption.title);
-};
-export const getOrderedColumns = (columns, visibleColumnKeys) => {
-  const visibleColumns = columns.filter(column => visibleColumnKeys.includes(column.key)).sort((a, b) => {
-    const indexB = visibleColumnKeys.indexOf(b.key);
-    const indexA = visibleColumnKeys.indexOf(a.key);
-    return indexA - indexB;
-  });
-  const alphabeticallySortedInvisibleColumns = columns.filter(column => !visibleColumnKeys.includes(column.key)).sort(sortColumns);
-  return [...visibleColumns, ...alphabeticallySortedInvisibleColumns];
-};
-const DEFAULT_WIDTH = COLUMN_BASE_WIDTH * 22;
-const keyBasedWidthMap = {
-  priority: COLUMN_BASE_WIDTH * 12.5,
-  // 100px
-  status: COLUMN_BASE_WIDTH * 12.5,
-  summary: COLUMN_BASE_WIDTH * 45,
-  description: COLUMN_BASE_WIDTH * 31,
-  type: COLUMN_BASE_WIDTH * 6,
-  key: COLUMN_BASE_WIDTH * 15
-};
-function getDefaultColumnWidth(key, type) {
-  const keyBasedWidth = keyBasedWidthMap[key];
-  if (keyBasedWidth) {
-    return keyBasedWidth;
-  }
-  switch (type) {
-    case 'date':
-      return COLUMN_BASE_WIDTH * 16;
-    case 'icon':
-      return COLUMN_BASE_WIDTH * 7;
-    default:
-      return DEFAULT_WIDTH;
-  }
-}
-export const IssueLikeDataTableViewOld = ({
-  testId,
-  onNextPage,
-  onLoadDatasourceDetails,
-  items,
-  itemIds,
-  columns,
-  renderItem = renderType,
-  visibleColumnKeys,
-  onVisibleColumnKeysChange,
-  columnCustomSizes,
-  onColumnResize,
-  wrappedColumnKeys,
-  onWrappedColumnChange,
-  status,
-  hasNextPage,
-  scrollableContainerHeight,
-  extensionKey
-}) => {
-  const tableId = useMemo(() => Symbol('unique-id'), []);
-  const experienceId = useDatasourceExperienceId();
-  const tableHeaderRowRef = useRef(null);
-  const [lastRowElement, setLastRowElement] = useState(null);
-  const [hasFullSchema, setHasFullSchema] = useState(false);
-  const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
-  const containerRef = useRef(null);
-  const [orderedColumns, setOrderedColumns] = useState(() => getOrderedColumns([...columns], [...visibleColumnKeys]));
-
-  // Table container width is used to know if sum of all column widths is bigger of container or not.
-  // When sum of all columns is less than container size we make last column stretchable (width: undefined)
-  const [tableContainerWidth, setTableContainerWidth] = useState();
-  useEffect(() => {
-    const {
-      current
-    } = containerRef;
-    if (containerRef && current) {
-      setTableContainerWidth(current.getBoundingClientRect().width);
-    }
-  }, [containerRef]);
-  useEffect(() => {
-    if (orderedColumns.length !== columns.length) {
-      setOrderedColumns(getOrderedColumns([...columns], [...visibleColumnKeys]));
-    }
-  }, [columns, visibleColumnKeys, orderedColumns]);
-  useEffect(() => {
-    if (experienceId && status === 'resolved') {
-      succeedUfoExperience({
-        name: 'datasource-rendered'
-      }, experienceId);
-    }
-  }, [experienceId, status]);
-  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 retrieval.
-  // If data comes first, then columns and then visibleColumnKeys it blows up,
-  // or some other combination.
-  const columnsWidthsSum = useMemo(() => visibleSortedColumns.map(({
-    key,
-    type
-  }) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type)).reduce((sum, width) => width + sum, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0), [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
-  const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
-  const getColumnWidth = useCallback((key, type, isLastCell) => {
-    if (isLastCell && shouldUseWidth && (!tableContainerWidth || tableContainerWidth > columnsWidthsSum)) {
-      return undefined;
-    } else {
-      return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
-    }
-  }, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidth]);
-  const headerColumns = useMemo(() => visibleSortedColumns.map(({
-    key,
-    title,
-    type
-  }, index) => ({
-    key,
-    content: title,
-    shouldTruncate: true,
-    width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
-  })), [getColumnWidth, visibleSortedColumns]);
-  const loadingRow = useMemo(() => ({
-    key: 'loading',
-    cells: headerColumns.map(column => ({
-      content: jsx(Box, {
-        paddingInline: "space.100"
-      }, jsx(Skeleton, {
-        borderRadius: 8,
-        width: "100%",
-        height: 14,
-        testId: "issues-table-row-loading"
-      })),
-      key: column.key
-    }))
-  }), [headerColumns]);
-  useEffect(() => {
-    if (isBottomOfTableVisibleRaw && hasNextPage && status === 'resolved') {
-      void onNextPage({
-        isSchemaFromData: false,
-        shouldForceRequest: true
-      });
-    }
-  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
-  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 || !hasData) {
-      return;
-    }
-    return combine(monitorForElements({
-      onDragStart: ({
-        location,
-        source
-      }) => {
-        initialAutoScrollerClientY.current = location.current.input.clientY;
-        if (source.data.type === 'table-header') {
-          var _containerRef$current;
-          autoScroller.start({
-            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,
-        source
-      }) => {
-        if (source.data.type === 'table-header') {
-          var _containerRef$current2;
-          autoScroller.updateInput({
-            input: {
-              ...location.current.input,
-              clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
-            }
-          });
-        }
-      },
-      onDrop({
-        source,
-        location
-      }) {
-        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 => getOrderedColumns([...columns], [...newColumnKeyOrder]));
-        }
-      }
-    }));
-  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId, hasData]);
-  const tableRows = useMemo(() => itemIds.map((id, rowIndex) => {
-    return {
-      key: id,
-      cells: visibleSortedColumns.map(({
-        key,
-        type,
-        title
-      }, cellIndex) => {
-        return {
-          key,
-          columnKey: key,
-          // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-          content: jsx(TableCellContent, {
-            id: id,
-            columnKey: key,
-            columnType: type,
-            columnTitle: title,
-            wrappedColumnKeys: wrappedColumnKeys,
-            renderItem: renderItem
-          }),
-          width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
-        };
-      }),
-      ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
-    };
-  }), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
-  const rows = useMemo(() => {
-    if (status !== 'loading') {
-      return tableRows;
-    }
-    // if there are table rows, only add 1 loading row
-    if (tableRows.length > 0) {
-      return [...tableRows, {
-        ...loadingRow,
-        key: `loading-${tableRows.length}`
-      }];
-    }
-    // if there are no table rows add 14 rows if it is compact (has scrollableContainerHeight or non-modal)
-    // add 10 rows if it is modal (no scrollableContainerHeight)
-    const loadingRowsCount = scrollableContainerHeight ? 14 : 10;
-    return [...Array(loadingRowsCount)].map((_, index) => ({
-      ...loadingRow,
-      key: `loading-${index}`
-    }));
-  }, [loadingRow, status, tableRows, scrollableContainerHeight]);
-  const onSelectedColumnKeysChange = useCallback(newSelectedColumnKeys => {
-    onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(newSelectedColumnKeys);
-  }, [onVisibleColumnKeysChange]);
-  const handlePickerOpen = useCallback(async () => {
-    if (hasFullSchema) {
-      return;
-    }
-    if (experienceId) {
-      startUfoExperience({
-        name: 'column-picker-rendered',
-        metadata: {
-          extensionKey: extensionKey !== null && extensionKey !== void 0 ? extensionKey : undefined
-        }
-      }, experienceId);
-    }
-    try {
-      await onLoadDatasourceDetails();
-      setHasFullSchema(true);
-    } catch (e) {
-      setHasFullSchema(false);
-    }
-  }, [experienceId, extensionKey, hasFullSchema, onLoadDatasourceDetails]);
-  const isEditable = onVisibleColumnKeysChange && hasData;
-  const orderedColumnsAreUpToDate = orderedColumns.length === columns.length;
-  const shouldDisplayColumnsInPicker = hasFullSchema && orderedColumnsAreUpToDate;
-  const view = jsx("div", {
-    /* There is required contentEditable={true} in editor-card-plugin
-     * But this brakes how DND works. We set contentEditable={false} to allow DND to work
-     * when dragging is initiated on top of a column label.
-     */
-    contentEditable: false,
-    ref: containerRef,
-    css: [tableContainerStyles, scrollableContainerHeight && scrollableContainerStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: scrollableContainerHeight ? {
-      maxHeight: `${scrollableContainerHeight}px`
-    } : undefined,
-    "data-testid": 'issue-like-table-container'
-  }, jsx(WidthObserver, {
-    setWidth: debounce(setTableContainerWidth, 100)
-  }), jsx(Table, {
-    css: tableStyles,
-    "data-testid": testId
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: shouldUseWidth ? {
-      tableLayout: 'fixed'
-    } : {}
-  }, jsx("thead", {
-    "data-testid": testId && `${testId}--head`,
-    css: [noDefaultBorderStyles, tableHeadStyles]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: !!onVisibleColumnKeysChange ? 'has-column-picker' : ''
-  }, jsx("tr", {
-    ref: tableHeaderRowRef
-  }, headerColumns.map(({
-    key,
-    content,
-    width
-  }, cellIndex) => {
-    let heading = jsx(Tooltip, {
-      content: content,
-      tag: "span",
-      position: "bottom-start",
-      testId: 'datasource-header-content'
-    }, jsx("span", {
-      css: headerStyles,
-      id: getFieldLabelById(key)
-    }, content));
-    const isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
-    if (isHeadingOutsideButton) {
-      heading = jsx("div", {
-        css: headingHoverEffectStyles
-      }, heading);
-    }
-    if (isEditable) {
-      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: heading,
-        rows: previewRows
-      });
-      return jsx(DraggableTableHeading, {
-        tableId: tableId,
-        key: key,
-        id: key,
-        index: cellIndex,
-        width: width,
-        onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
-        dndPreviewHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0,
-        dragPreview: dragPreview,
-        isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
-        onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
-      }, heading);
-    } else {
-      return jsx(TableHeading, {
-        key: key,
-        "data-testid": `${key}-column-heading`
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        ,
-        style: getWidthCss({
-          shouldUseWidth,
-          width
-        })
-      }, heading);
-    }
-  }), onVisibleColumnKeysChange && jsx(ColumnPickerHeader, null, jsx(ColumnPicker, {
-    columns: shouldDisplayColumnsInPicker ? orderedColumns : [],
-    selectedColumnKeys: shouldDisplayColumnsInPicker ? visibleColumnKeys : [],
-    onSelectedColumnKeysChange: onSelectedColumnKeysChange,
-    onOpen: handlePickerOpen
-  })))), jsx("tbody", {
-    css: noDefaultBorderStyles,
-    "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: cellKey,
-    content,
-    width
-  }, cellIndex) => {
-    const isLastCell = cellIndex === cells.length - 1;
-    let loadingRowStyle = getWidthCss({
-      shouldUseWidth,
-      width
-    });
-    return jsx(InlineEditableTableCell, {
-      key: cellKey,
-      "data-testid": testId && `${testId}--cell-${cellIndex}`,
-      colSpan: isEditable && isLastCell ? 2 : undefined
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: loadingRowStyle,
-      css: [wrappedColumnKeys !== null && wrappedColumnKeys !== void 0 && wrappedColumnKeys.includes(cellKey) ? null : truncateStyles]
-    }, content);
-  }))))));
-  return jsx(FlagsProvider, null, view);
-};
-export const EmptyStateOld = TableEmptyState;