@atlaskit/link-datasource 3.19.2 → 3.20.0

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

@@ -1,20 +1,20 @@
+/* draggable-table-heading.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["triggerRef"];
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["triggerRef"];
+import "./draggable-table-heading.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl-next';
 import invariant from 'tiny-invariant';
@@ -22,6 +22,7 @@ import Button from '@atlaskit/button/new';
 import DropdownMenu, { DropdownItem } from '@atlaskit/dropdown-menu';
 import ChevronDown from '@atlaskit/icon/utility/migration/chevron-down';
 import ChevronUp from '@atlaskit/icon/utility/migration/chevron-up';
+import { fg } from "@atlaskit/platform-feature-flags";
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box-without-terminal';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -30,88 +31,64 @@ import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/elem
 import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
+import { N40 } from "@atlaskit/theme/colors";
 import { useDatasourceAnalyticsEvents } from '../../analytics';
 import { GlyphPlaceholder, UnwrapTextIcon, WrapTextIcon } from './custom-icons';
+import { DraggableTableHeadingOld } from './draggable-table-heading-old';
 import { issueLikeTableMessages } from './messages';
-import { TableHeading } from './styled';
 import { getColumnMinWidth, getWidthCss } from './utils';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var DropdownParent = styled.div({
-  display: 'flex',
-  alignItems: 'center',
-  whiteSpace: 'nowrap',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& button': {
-    textAlign: 'left' /* By default button center in the middle without props to control it */,
-    height: 'auto' /* By default button is not happy with tall (up to lines in our case) content */,
-    paddingBlock: "var(--ds-space-0, 0px)",
-    paddingLeft: "var(--ds-space-0, 0px)" /* By default button's padding left and right is 8 + 4. We control that 8, so left with 4 that we need.  */,
-    paddingRight: "var(--ds-space-0, 0px)"
-  }
-});
-var dropTargetStyles = css({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%'
-});
-var noPointerEventsStyles = css({
-  pointerEvents: 'none'
-});
-var resizerStyles = css({
-  '--local-hitbox-width': "var(--ds-space-300, 24px)",
-  width: 'var(--local-hitbox-width)',
-  cursor: 'col-resize',
-  flexGrow: '0',
-  position: 'absolute',
-  zIndex: 1,
-  // we want this to sit on top of adjacent column headers
-  right: 'calc(-1 * calc(var(--local-hitbox-width) / 2))',
-  top: 0,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    opacity: 0,
-    '--local-line-width': "var(--ds-border-width, 2px)",
-    content: '""',
-    position: 'absolute',
-    background: "var(--ds-border-brand, #0052CC)",
-    width: 'var(--local-line-width)',
-    inset: 0,
-    left: "calc(50% - calc(var(--local-line-width) / 2))",
-    transition: 'opacity 0.2s ease'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover::before': {
-    opacity: 1
-  }
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var TableHeading = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "th" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  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])
+  }));
 });
-var resizingStyles = css({
-  // turning off the resizing cursor as sometimes it can cause the cursor to flicker
-  // while resizing. The browser controls the cursor while dragging, but the browser
-  // can sometimes bug out.
-  cursor: 'unset',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    opacity: 1
-  }
+if (process.env.NODE_ENV !== 'production') {
+  TableHeading.displayName = 'TableHeading';
+}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var DropdownParent = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1txw _4cvr1h6o _o5721q9c _1wtnze3t _ficf1e5h _jq8g1wug _11lvze3t _yhjmze3t", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  DropdownParent.displayName = 'DropdownParent';
+}
+var dropTargetStyles = null;
+var noPointerEventsStyles = null;
+var resizerStyles = null;
+var resizingStyles = null;
 var idleState = {
   type: 'idle'
 };
 var draggingState = {
   type: 'dragging'
 };
-export var DraggableTableHeading = function DraggableTableHeading(_ref) {
-  var children = _ref.children,
-    id = _ref.id,
-    index = _ref.index,
-    tableId = _ref.tableId,
-    dndPreviewHeight = _ref.dndPreviewHeight,
-    dragPreview = _ref.dragPreview,
-    width = _ref.width,
-    onWidthChange = _ref.onWidthChange,
-    isWrapped = _ref.isWrapped,
-    onIsWrappedChange = _ref.onIsWrappedChange;
+var DraggableTableHeadingNew = function DraggableTableHeadingNew(_ref3) {
+  var children = _ref3.children,
+    id = _ref3.id,
+    index = _ref3.index,
+    tableId = _ref3.tableId,
+    dndPreviewHeight = _ref3.dndPreviewHeight,
+    dragPreview = _ref3.dragPreview,
+    width = _ref3.width,
+    onWidthChange = _ref3.onWidthChange,
+    isWrapped = _ref3.isWrapped,
+    onIsWrappedChange = _ref3.onIsWrappedChange;
   var _useDatasourceAnalyti = useDatasourceAnalyticsEvents(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var mainHeaderCellRef = useRef(null);
@@ -147,15 +124,15 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
           tableId: tableId
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var nativeSetDragImage = _ref4.nativeSetDragImage;
         setCustomNativeDragPreview({
           getOffset: pointerOutsideOfPreview({
             x: '18px',
             y: '18px'
           }),
-          render: function render(_ref3) {
-            var container = _ref3.container;
+          render: function render(_ref5) {
+            var container = _ref5.container;
             // Cause a `react` re-render to create your portal synchronously
             setState({
               type: 'preview',
@@ -190,9 +167,9 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       getIsSticky: function getIsSticky() {
         return true;
       },
-      getData: function getData(_ref4) {
-        var input = _ref4.input,
-          element = _ref4.element;
+      getData: function getData(_ref6) {
+        var input = _ref6.input,
+          element = _ref6.element;
         var data = {
           id: id,
           index: index
@@ -223,8 +200,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
   useEffect(function () {
     return monitorForElements({
-      canMonitor: function canMonitor(_ref5) {
-        var source = _ref5.source;
+      canMonitor: function canMonitor(_ref7) {
+        var source = _ref7.source;
         return source.data.type === 'table-header' && source.data.tableId === tableId;
       },
       onDragStart: function onDragStart() {
@@ -260,8 +237,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
         };
       },
       // Is called when dragging started
-      onGenerateDragPreview: function onGenerateDragPreview(_ref6) {
-        var nativeSetDragImage = _ref6.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref8) {
+        var nativeSetDragImage = _ref8.nativeSetDragImage;
         // We don't show any preview, since column separator (handle) is moving with the cursor
         disableNativeDragPreview({
           nativeSetDragImage: nativeSetDragImage
@@ -273,8 +250,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
           initialWidth: width
         });
       },
-      onDrag: function onDrag(_ref7) {
-        var location = _ref7.location;
+      onDrag: function onDrag(_ref9) {
+        var location = _ref9.location;
         var relativeDistanceX = location.current.input.clientX - location.initial.input.clientX;
         invariant(state.type === 'resizing');
         var initialWidth = state.initialWidth;
@@ -313,10 +290,10 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
   var triggerIcon = useMemo(function () {
     return shouldShowTriggerIcon ? isDropdownOpen ? ChevronUp : ChevronDown : isWideEnoughToHaveChevron ? GlyphPlaceholder : undefined;
   }, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
-  var getTriggerButton = useCallback(function (_ref8) {
-    var triggerRef = _ref8.triggerRef,
-      props = _objectWithoutProperties(_ref8, _excluded);
-    return jsx(Button, _extends({}, props, {
+  var getTriggerButton = useCallback(function (_ref10) {
+    var triggerRef = _ref10.triggerRef,
+      props = _objectWithoutProperties(_ref10, _excluded3);
+    return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
       testId: "".concat(id, "-column-dropdown"),
       shouldFitContainer: true,
       iconAfter: triggerIcon,
@@ -331,8 +308,8 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       }
     }), children);
   }, [children, id, triggerIcon]);
-  var onDropdownOpenChange = useCallback(function (_ref9) {
-    var isOpen = _ref9.isOpen;
+  var onDropdownOpenChange = useCallback(function (_ref11) {
+    var isOpen = _ref11.isOpen;
     return setIsDropdownOpen(isOpen);
   }, []);
   var toggleWrap = useCallback(function () {
@@ -347,7 +324,7 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
     }
     onIsWrappedChange(nextIsWrap);
   }, [fireEvent, isWrapped, onIsWrappedChange]);
-  return jsx(TableHeading, {
+  return /*#__PURE__*/React.createElement(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
@@ -357,29 +334,36 @@ export var DraggableTableHeading = function DraggableTableHeading(_ref) {
       shouldUseWidth: resizeIsEnabled,
       width: width
     }))
-  }, resizeIsEnabled ? jsx("div", {
+  }, resizeIsEnabled ? /*#__PURE__*/React.createElement("div", {
     ref: columnResizeHandleRef,
-    css: [resizerStyles, state.type === 'resizing' && resizingStyles],
     style: {
       height: "".concat(dndPreviewHeight, "px")
     },
-    "data-testid": "column-resize-handle"
-  }) : null, onIsWrappedChange ? jsx(DropdownParent, null, jsx(DropdownMenu, {
+    "data-testid": "column-resize-handle",
+    className: ax(["_1y7c1ejb _1bsbaakz _80om11mm _16jlidpf _kqswstnw _1pbykb7n _1xi2aesa _154iidpf _1tesidpf _pdyk1hrg _154pidpf _dydkssc3 _1kt9b3bt _1cs8stnw _1rusopvu _1mp4atg7 _qneczvxw _1ct3kb7n", state.type === 'resizing' && "_80omn7od _154pkb7n"])
+  }) : null, onIsWrappedChange ? /*#__PURE__*/React.createElement(DropdownParent, null, /*#__PURE__*/React.createElement(DropdownMenu, {
     trigger: getTriggerButton,
     onOpenChange: onDropdownOpenChange,
     placement: 'bottom'
-  }, jsx(DropdownItem, {
-    elemBefore: isWrapped ? jsx(UnwrapTextIcon, null) : jsx(WrapTextIcon, null),
+  }, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: isWrapped ? /*#__PURE__*/React.createElement(UnwrapTextIcon, null) : /*#__PURE__*/React.createElement(WrapTextIcon, null),
     testId: "".concat(id, "-column-dropdown-item-toggle-wrapping"),
     onClick: toggleWrap
-  }, isWrapped ? jsx(FormattedMessage, issueLikeTableMessages.unwrapText) : jsx(FormattedMessage, issueLikeTableMessages.wrapText)))) : children, jsx("div", {
+  }, isWrapped ? /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.unwrapText) : /*#__PURE__*/React.createElement(FormattedMessage, issueLikeTableMessages.wrapText)))) : children, /*#__PURE__*/React.createElement("div", {
     ref: dropTargetRef,
-    css: [dropTargetStyles, isDraggingAnyColumn ? null : noPointerEventsStyles],
     style: {
       height: "".concat(dndPreviewHeight, "px")
     },
-    "data-testid": 'column-drop-target'
-  }, closestEdge && jsx(DropIndicator, {
+    "data-testid": 'column-drop-target',
+    className: ax(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq", !isDraggingAnyColumn && "_lcxvglyw"])
+  }, closestEdge && /*#__PURE__*/React.createElement(DropIndicator, {
     edge: closestEdge
   })), state.type === 'preview' ? /*#__PURE__*/ReactDOM.createPortal(dragPreview, state.container) : null);
+};
+export var DraggableTableHeading = function DraggableTableHeading(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(DraggableTableHeadingNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(DraggableTableHeadingOld, props);
+  }
 };

package/dist/esm/ui/issue-like-table/empty-state/empty-state-old.js

@@ -0,0 +1,157 @@
+/**
+ * @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 { Skeleton } from '@atlaskit/linking-common';
+import { N40 } from '@atlaskit/theme/colors';
+import { ScrollableContainerHeight, TableHeading } from '../styled';
+var SkeletonComponent = function SkeletonComponent(_ref) {
+  var width = _ref.width,
+    itemName = _ref.itemName;
+  return jsx(Skeleton, {
+    borderRadius: "var(--ds-border-radius-100, 8px)",
+    testId: "".concat(itemName, "-empty-state-skeleton"),
+    height: 14,
+    width: width
+  });
+};
+var tableBodyStyles = css({
+  borderBottom: 0
+});
+var tableStyles = css({
+  background: "var(--ds-elevation-surface-current, #FFF)"
+});
+var padding = "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)");
+var cellStyles = css({
+  padding: padding,
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&:first-child': {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&:last-child': {
+    borderRight: 0,
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
+var baseColumns = [{
+  key: 'type',
+  width: 35
+}, {
+  key: 'issue',
+  width: 50
+}, {
+  key: 'summary',
+  width: 100
+}, {
+  key: 'assignee',
+  width: 70
+}, {
+  key: 'priority',
+  width: 60
+}, {
+  key: 'status',
+  width: 60
+}, {
+  key: 'resolution',
+  width: 55
+}, {
+  key: 'created',
+  width: 50
+}, {
+  key: 'due',
+  width: 50
+}];
+var longColumnWidths = [141, 208, 186, 212, 212, 151, 212, 182, 180, 163, 172, 211, 145, 190];
+var shortColumnWidths = [75, 54, 66, 73, 52, 73, 55, 80, 67, 76, 58, 65, 56, 76];
+var renderItem = function renderItem(_ref2, _ref3) {
+  var key = _ref2.key,
+    width = _ref2.width;
+  var longWidth = _ref3.longWidth,
+    shortWidth = _ref3.shortWidth;
+  switch (key) {
+    case 'status':
+      return jsx(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
+      });
+    case 'summary':
+      return jsx(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
+      });
+    default:
+      return jsx(SkeletonComponent, {
+        width: width,
+        itemName: key
+      });
+  }
+};
+export default (function (_ref4) {
+  var isCompact = _ref4.isCompact,
+    testId = _ref4.testId;
+  var columnsToRender = isCompact ? baseColumns.slice(0, 6) : baseColumns;
+  // if it is compact (non-modal), there is room for 14 rows
+  // if it is modal (not compact), there is only room for 10 rows
+  var rowsNumber = isCompact ? 14 : 10;
+  var rows = new Array(rowsNumber).fill(null).map(function (_, index) {
+    return {
+      id: index,
+      longWidth: longColumnWidths[index],
+      shortWidth: shortColumnWidths[index]
+    };
+  });
+  return jsx("div", {
+    style: {
+      // the IssueLikeDataTableView wraps the table in a container with the styling below while modal doesn't
+      // this maxHeight comes from scrollableContainerHeight
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      maxHeight: ScrollableContainerHeight,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      padding: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      boxSizing: 'border-box'
+    }
+  }, jsx("table", {
+    css: tableStyles,
+    "data-testid": testId
+  }, jsx("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, jsx("tr", null, columnsToRender.map(function (_ref5) {
+    var key = _ref5.key,
+      width = _ref5.width;
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      jsx(TableHeading, {
+        key: key,
+        style: {
+          width: width,
+          padding: padding
+        }
+      }, jsx(Skeleton, {
+        appearance: "darkGray",
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
+        height: 12,
+        width: width
+      }))
+    );
+  }))), jsx("tbody", {
+    css: tableBodyStyles
+  }, rows.map(function (row) {
+    return jsx("tr", {
+      key: row.id
+    }, columnsToRender.map(function (column) {
+      return jsx("td", {
+        css: cellStyles,
+        key: column.key
+      }, renderItem(column, row));
+    }));
+  }))));
+});

package/dist/esm/ui/issue-like-table/empty-state/icon-type-old.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var IconWrapper = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'left'
+});
+export default (function (_ref) {
+  var type = _ref.type;
+  var TypeIcon = function TypeIcon() {
+    switch (type) {
+      case 'issue':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
+        return /*#__PURE__*/React.createElement(Issue16Icon, {
+          label: 'issue'
+        });
+      case 'commit':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
+        return /*#__PURE__*/React.createElement(Commit16Icon, {
+          label: 'commit'
+        });
+      case 'story':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
+        return /*#__PURE__*/React.createElement(Story16Icon, {
+          label: 'story'
+        });
+      case 'epic':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
+        return /*#__PURE__*/React.createElement(Epic16Icon, {
+          label: 'epic'
+        });
+      case 'bug':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
+        return /*#__PURE__*/React.createElement(Bug16Icon, {
+          label: 'bug'
+        });
+      case 'task':
+        // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19548
+        return /*#__PURE__*/React.createElement(Task16Icon, {
+          label: 'task'
+        });
+    }
+  };
+  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(TypeIcon, null));
+});

package/dist/esm/ui/issue-like-table/empty-state/index.compiled.css

@@ -0,0 +1,8 @@
+
+._1yt41uce{padding:var(--ds-space-100,8px) var(--ds-space-100,8px)}
+._1ls2idpf:last-of-type{border-right:0}
+._1s7z1oij{border-right:var(--_1n7euq6)}
+._n7zl1oij{border-bottom:var(--_1n7euq6)}
+._n7zlidpf{border-bottom:0}._1lhcu2gc:first-of-type{padding-left:var(--ds-space-100,8px)}
+._1o59u2gc:last-of-type{padding-right:var(--ds-space-100,8px)}
+._bfhkchd4{background-color:var(--ds-elevation-surface-current,#fff)}