@atlaskit/link-datasource 3.19.2 → 3.20.1

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

@@ -1,3 +1,4 @@
+/* draggable-table-heading.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,13 +7,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DraggableTableHeading = void 0;
+require("./draggable-table-heading.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
@@ -20,6 +22,7 @@ var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-up"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var _boxWithoutTerminal = require("@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box-without-terminal");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -28,99 +31,71 @@ var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/eleme
 var _pointerOutsideOfPreview = require("@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
+var _colors = require("@atlaskit/theme/colors");
 var _analytics = require("../../analytics");
 var _customIcons = require("./custom-icons");
+var _draggableTableHeadingOld = require("./draggable-table-heading-old");
 var _messages = require("./messages");
-var _styled2 = require("./styled");
 var _utils = require("./utils");
-var _excluded = ["triggerRef"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["triggerRef"];
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var DropdownParent = _styled.default.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 = (0, _react2.css)({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%'
-});
-var noPointerEventsStyles = (0, _react2.css)({
-  pointerEvents: 'none'
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var TableHeading = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "th" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 resizerStyles = (0, _react2.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
-  }
-});
-var resizingStyles = (0, _react2.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 = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "div" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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'
 };
-var DraggableTableHeading = exports.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 = (0, _analytics.useDatasourceAnalyticsEvents)(),
     fireEvent = _useDatasourceAnalyti.fireEvent;
   var mainHeaderCellRef = (0, _react.useRef)(null);
@@ -156,15 +131,15 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
           tableId: tableId
         };
       },
-      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
-        var nativeSetDragImage = _ref2.nativeSetDragImage;
+      onGenerateDragPreview: function onGenerateDragPreview(_ref4) {
+        var nativeSetDragImage = _ref4.nativeSetDragImage;
         (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
           getOffset: (0, _pointerOutsideOfPreview.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',
@@ -199,9 +174,9 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
       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
@@ -232,8 +207,8 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
   // During dragging anywhere we want to remove `pointerEvents: 'none'` from all the drop targets
   (0, _react.useEffect)(function () {
     return (0, _adapter.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() {
@@ -269,8 +244,8 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
         };
       },
       // 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
         (0, _disableNativeDragPreview.disableNativeDragPreview)({
           nativeSetDragImage: nativeSetDragImage
@@ -282,8 +257,8 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
           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;
         (0, _tinyInvariant.default)(state.type === 'resizing');
         var initialWidth = state.initialWidth;
@@ -322,10 +297,10 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
   var triggerIcon = (0, _react.useMemo)(function () {
     return shouldShowTriggerIcon ? isDropdownOpen ? _chevronUp.default : _chevronDown.default : isWideEnoughToHaveChevron ? _customIcons.GlyphPlaceholder : undefined;
   }, [shouldShowTriggerIcon, isDropdownOpen, isWideEnoughToHaveChevron]);
-  var getTriggerButton = (0, _react.useCallback)(function (_ref8) {
-    var triggerRef = _ref8.triggerRef,
-      props = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
-    return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, props, {
+  var getTriggerButton = (0, _react.useCallback)(function (_ref10) {
+    var triggerRef = _ref10.triggerRef,
+      props = (0, _objectWithoutProperties2.default)(_ref10, _excluded3);
+    return /*#__PURE__*/React.createElement(_new.default, (0, _extends2.default)({}, props, {
       testId: "".concat(id, "-column-dropdown"),
       shouldFitContainer: true,
       iconAfter: triggerIcon,
@@ -340,8 +315,8 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
       }
     }), children);
   }, [children, id, triggerIcon]);
-  var onDropdownOpenChange = (0, _react.useCallback)(function (_ref9) {
-    var isOpen = _ref9.isOpen;
+  var onDropdownOpenChange = (0, _react.useCallback)(function (_ref11) {
+    var isOpen = _ref11.isOpen;
     return setIsDropdownOpen(isOpen);
   }, []);
   var toggleWrap = (0, _react.useCallback)(function () {
@@ -356,7 +331,7 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
     }
     onIsWrappedChange(nextIsWrap);
   }, [fireEvent, isWrapped, onIsWrappedChange]);
-  return (0, _react2.jsx)(_styled2.TableHeading, {
+  return /*#__PURE__*/React.createElement(TableHeading, {
     ref: mainHeaderCellRef,
     "data-testid": "".concat(id, "-column-heading"),
     style: _objectSpread({
@@ -366,29 +341,36 @@ var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTa
       shouldUseWidth: resizeIsEnabled,
       width: width
     }))
-  }, resizeIsEnabled ? (0, _react2.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 ? (0, _react2.jsx)(DropdownParent, null, (0, _react2.jsx)(_dropdownMenu.default, {
+    "data-testid": "column-resize-handle",
+    className: (0, _runtime.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.default, {
     trigger: getTriggerButton,
     onOpenChange: onDropdownOpenChange,
     placement: 'bottom'
-  }, (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
-    elemBefore: isWrapped ? (0, _react2.jsx)(_customIcons.UnwrapTextIcon, null) : (0, _react2.jsx)(_customIcons.WrapTextIcon, null),
+  }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
+    elemBefore: isWrapped ? /*#__PURE__*/React.createElement(_customIcons.UnwrapTextIcon, null) : /*#__PURE__*/React.createElement(_customIcons.WrapTextIcon, null),
     testId: "".concat(id, "-column-dropdown-item-toggle-wrapping"),
     onClick: toggleWrap
-  }, isWrapped ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.unwrapText) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.wrapText)))) : children, (0, _react2.jsx)("div", {
+  }, isWrapped ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.issueLikeTableMessages.unwrapText) : /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _messages.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 && (0, _react2.jsx)(_boxWithoutTerminal.DropIndicator, {
+    "data-testid": 'column-drop-target',
+    className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _1bsb1osq", !isDraggingAnyColumn && "_lcxvglyw"])
+  }, closestEdge && /*#__PURE__*/React.createElement(_boxWithoutTerminal.DropIndicator, {
     edge: closestEdge
   })), state.type === 'preview' ? /*#__PURE__*/_reactDom.default.createPortal(dragPreview, state.container) : null);
+};
+var DraggableTableHeading = exports.DraggableTableHeading = function DraggableTableHeading(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(DraggableTableHeadingNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_draggableTableHeadingOld.DraggableTableHeadingOld, props);
+  }
 };

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

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _linkingCommon = require("@atlaskit/linking-common");
+var _colors = require("@atlaskit/theme/colors");
+var _styled = require("../styled");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var SkeletonComponent = function SkeletonComponent(_ref) {
+  var width = _ref.width,
+    itemName = _ref.itemName;
+  return (0, _react.jsx)(_linkingCommon.Skeleton, {
+    borderRadius: "var(--ds-border-radius-100, 8px)",
+    testId: "".concat(itemName, "-empty-state-skeleton"),
+    height: 14,
+    width: width
+  });
+};
+var tableBodyStyles = (0, _react.css)({
+  borderBottom: 0
+});
+var tableStyles = (0, _react.css)({
+  background: "var(--ds-elevation-surface-current, #FFF)"
+});
+var padding = "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)");
+var cellStyles = (0, _react.css)({
+  padding: padding,
+  borderRight: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderBottom: "0.5px solid ".concat("var(--ds-border, ".concat(_colors.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 (0, _react.jsx)(SkeletonComponent, {
+        width: shortWidth,
+        itemName: key
+      });
+    case 'summary':
+      return (0, _react.jsx)(SkeletonComponent, {
+        width: longWidth,
+        itemName: key
+      });
+    default:
+      return (0, _react.jsx)(SkeletonComponent, {
+        width: width,
+        itemName: key
+      });
+  }
+};
+var _default = exports.default = function _default(_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 (0, _react.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: _styled.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'
+    }
+  }, (0, _react.jsx)("table", {
+    css: tableStyles,
+    "data-testid": testId
+  }, (0, _react.jsx)("thead", {
+    style: {
+      borderBottom: 0
+    }
+  }, (0, _react.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
+      (0, _react.jsx)(_styled.TableHeading, {
+        key: key,
+        style: {
+          width: width,
+          padding: padding
+        }
+      }, (0, _react.jsx)(_linkingCommon.Skeleton, {
+        appearance: "darkGray",
+        borderRadius: 8,
+        testId: "empty-state-skeleton",
+        height: 12,
+        width: width
+      }))
+    );
+  }))), (0, _react.jsx)("tbody", {
+    css: tableBodyStyles
+  }, rows.map(function (row) {
+    return (0, _react.jsx)("tr", {
+      key: row.id
+    }, columnsToRender.map(function (column) {
+      return (0, _react.jsx)("td", {
+        css: cellStyles,
+        key: column.key
+      }, renderItem(column, row));
+    }));
+  }))));
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/bug/16"));
+var _2 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/commit/16"));
+var _3 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/epic/16"));
+var _4 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/issue/16"));
+var _5 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/story/16"));
+var _6 = _interopRequireDefault(require("@atlaskit/icon-object/glyph/task/16"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
+var IconWrapper = _styled.default.div({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'left'
+});
+var _default = exports.default = function _default(_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.default.createElement(_4.default, {
+          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.default.createElement(_2.default, {
+          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.default.createElement(_5.default, {
+          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.default.createElement(_3.default, {
+          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.default.createElement(_.default, {
+          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.default.createElement(_6.default, {
+          label: 'task'
+        });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(TypeIcon, null));
+};

package/dist/cjs/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)}