@atlaskit/link-datasource 0.14.4

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

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+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';
+var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+export default (function (_ref) {
+  var type = _ref.type;
+  var TypeIcon = function 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/esm/ui/issue-like-table/empty-state/types.js

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

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

@@ -0,0 +1,292 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/** @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';
+var tableHeadStyles = css({
+  background: "var(--ds-surface, #FFF)",
+  borderTop: '2px solid transparent'
+});
+var columnPickerHeaderStyles = css({
+  width: '40px',
+  // TODO use some variable for that?
+  paddingBlock: "var(--ds-space-100, 8px)"
+});
+var tableDragPreviewStyles = css({
+  backgroundColor: "var(--ds-surface, #FFF)"
+});
+var containerDragPreviewStyles = css({
+  overflow: 'hidden'
+});
+function extractIndex(data) {
+  var index = data.index;
+  invariant(typeof index === 'number');
+  return index;
+}
+var orderColumns = function 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(function (_ref, index) {
+    var key = _ref.key;
+    if (!visibleColumnKeys.includes(key)) {
+      visibleColumnKeys.splice(index, 0, key);
+    }
+  });
+  columns.sort(function (a, b) {
+    var indexB = visibleColumnKeys.indexOf(b.key);
+    var indexA = visibleColumnKeys.indexOf(a.key);
+    return indexA - indexB;
+  });
+  return _toConsumableArray(columns);
+};
+export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
+  var _orderedColumns$find;
+  var testId = _ref2.testId,
+    onNextPage = _ref2.onNextPage,
+    items = _ref2.items,
+    columns = _ref2.columns,
+    _ref2$renderItem = _ref2.renderItem,
+    renderItem = _ref2$renderItem === void 0 ? fallbackRenderType : _ref2$renderItem,
+    visibleColumnKeys = _ref2.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref2.onVisibleColumnKeysChange,
+    status = _ref2.status,
+    hasNextPage = _ref2.hasNextPage;
+  var tableId = useMemo(function () {
+    return Symbol('unique-id');
+  }, []);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastRowElement = _useState2[0],
+    setLastRowElement = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDragPreview = _useState4[0],
+    setIsDragPreview = _useState4[1];
+  var isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
+  var containerRef = useRef(null);
+  var _useState5 = useState(function () {
+      return orderColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys));
+    }),
+    _useState6 = _slicedToArray(_useState5, 2),
+    orderedColumns = _useState6[0],
+    setOrderedColumns = _useState6[1];
+  var visibleSortedColumns = useMemo(function () {
+    return visibleColumnKeys.map(function (visibleKey) {
+      return orderedColumns.find(function (_ref3) {
+        var key = _ref3.key;
+        return 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.
+
+  var identityColumnKey = (_orderedColumns$find = orderedColumns.find(function (column) {
+    return column.isIdentity;
+  })) === null || _orderedColumns$find === void 0 ? void 0 : _orderedColumns$find.key;
+  var loadingRow = useMemo(function () {
+    return {
+      key: 'loading',
+      cells: visibleSortedColumns.map(function (_ref4) {
+        var key = _ref4.key;
+        var content = jsx(Skeleton, {
+          borderRadius: "var(--ds-radius-100, 3px)",
+          width: '100%',
+          height: '20px'
+        });
+        return {
+          key: key,
+          content: content
+        };
+      })
+    };
+  }, [visibleSortedColumns]);
+  var headColumns = visibleSortedColumns.map(function (column) {
+    return {
+      key: column.key,
+      content: column.title,
+      // width: TODO Find out how we going to retrieve column width
+      shouldTruncate: true
+    };
+  });
+  useEffect(function () {
+    if (status === 'empty' || isBottomOfTableVisibleRaw && hasNextPage && status !== 'loading') {
+      void onNextPage();
+    }
+  }, [isBottomOfTableVisibleRaw, status, hasNextPage, onNextPage]);
+  var dndPreviewHeight = 0;
+  if (items.length > 0 && containerRef.current) {
+    var containerEl = containerRef.current;
+    invariant(containerEl);
+    dndPreviewHeight = containerEl.offsetHeight;
+  }
+
+  // This variable contains initial Y mouse coordinate, so we can restrict
+  // autoScroller in X axis only
+  var initialAutoScrollerClientY = useRef();
+  useEffect(function () {
+    if (!onVisibleColumnKeysChange) {
+      return;
+    }
+    return combine(monitorForElements({
+      onDragStart: function onDragStart(_ref5) {
+        var location = _ref5.location;
+        initialAutoScrollerClientY.current = location.current.input.clientY;
+        autoScroller.start({
+          input: location.current.input,
+          behavior: 'container-only'
+        });
+      },
+      onDrag: function onDrag(_ref6) {
+        var location = _ref6.location;
+        autoScroller.updateInput({
+          input: _objectSpread(_objectSpread({}, location.current.input), {}, {
+            clientY: initialAutoScrollerClientY.current || 0
+          })
+        });
+      },
+      onDrop: function onDrop(_ref7) {
+        var source = _ref7.source,
+          location = _ref7.location;
+        initialAutoScrollerClientY.current = null;
+        autoScroller.stop();
+        if (location.current.dropTargets.length === 0) {
+          return;
+        }
+        var target = location.current.dropTargets[0];
+        if (source.data.id === target.data.id) {
+          return;
+        }
+        if (source.data.type === 'table-header' && source.data.tableId === tableId) {
+          var closestEdgeOfTarget = extractClosestEdge(target.data);
+          invariant(closestEdgeOfTarget === 'left' || closestEdgeOfTarget === 'right');
+          var startIndex = extractIndex(source.data);
+          var indexOfTarget = extractIndex(target.data);
+          var newColumnKeyOrder = reorderWithEdge({
+            list: visibleColumnKeys,
+            closestEdgeOfTarget: closestEdgeOfTarget,
+            startIndex: startIndex,
+            indexOfTarget: indexOfTarget,
+            axis: 'horizontal'
+          });
+          onVisibleColumnKeysChange === null || onVisibleColumnKeysChange === void 0 ? void 0 : onVisibleColumnKeysChange(_toConsumableArray(newColumnKeyOrder));
+
+          // We sort columns (whole objects) according to their key order presented in newColumnKeyOrder
+          setOrderedColumns(function (columns) {
+            return orderColumns(_toConsumableArray(columns), _toConsumableArray(newColumnKeyOrder));
+          });
+        }
+      }
+    }));
+  }, [visibleColumnKeys, onVisibleColumnKeysChange, tableId]);
+  var tableRows = useMemo(function () {
+    return items.map(function (newRowData, rowIndex) {
+      return {
+        key: "".concat(identityColumnKey && newRowData[identityColumnKey] || rowIndex),
+        cells: visibleSortedColumns.map(function (_ref8) {
+          var key = _ref8.key,
+            type = _ref8.type;
+          var value = newRowData[key];
+          var values = Array.isArray(value) ? value : [value];
+          var content = values.map(function (value) {
+            return renderItem({
+              type: type,
+              value: value
+            });
+          });
+          return {
+            key: key,
+            content: content
+          };
+        }),
+        ref: rowIndex === items.length - 1 ? function (el) {
+          return setLastRowElement(el);
+        } : undefined
+      };
+    });
+  }, [identityColumnKey, renderItem, items, visibleSortedColumns]);
+  var rows = [].concat(_toConsumableArray(tableRows), _toConsumableArray(status === 'loading' ? [loadingRow] : []));
+  var setIsDragPreviewOn = useCallback(function () {
+    return setIsDragPreview(true);
+  }, [setIsDragPreview]);
+  var setIsDragPreviewOff = useCallback(function () {
+    return setIsDragPreview(false);
+  }, [setIsDragPreview]);
+  var onSelectedColumnKeysChange = useCallback(function (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 && "".concat(testId, "--head"),
+    css: tableHeadStyles
+  }, jsx("tr", null, headColumns.map(function (_ref9, cellIndex) {
+    var key = _ref9.key,
+      content = _ref9.content;
+    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": "".concat(key, "-column-heading")
+      }, content);
+    }
+  }), onVisibleColumnKeysChange && jsx("th", {
+    css: columnPickerHeaderStyles
+  }, jsx(ColumnPicker, {
+    columns: orderedColumns,
+    selectedColumnKeys: visibleColumnKeys,
+    onSelectedColumnKeysChange: onSelectedColumnKeysChange
+  })))), jsx("tbody", {
+    "data-testid": testId && "".concat(testId, "--body")
+  }, rows.map(function (_ref10) {
+    var key = _ref10.key,
+      cells = _ref10.cells,
+      ref = _ref10.ref;
+    return jsx("tr", {
+      key: key,
+      "data-testid": testId && "".concat(testId, "--row-").concat(key),
+      ref: ref
+    }, cells.map(function (_ref11, cellIndex) {
+      var key = _ref11.key,
+        content = _ref11.content;
+      return jsx("td", {
+        key: key,
+        "data-testid": testId && "".concat(testId, "--cell-").concat(cellIndex),
+        colSpan: cellIndex + 1 === cells.length ? 2 : undefined
+      }, content);
+    }));
+  }))));
+};
+export var EmptyState = TableEmptyState;

package/dist/esm/ui/issue-like-table/render-type/boolean/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import TextRenderType from '../text';
+import { booleanTypeMessages } from './messages';
+export var BOOLEAN_TYPE_TEST_ID = 'link-datasource-render-type--boolean';
+var BooleanRenderType = function BooleanRenderType(_ref) {
+  var value = _ref.value,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? BOOLEAN_TYPE_TEST_ID : _ref$testId;
+  var intl = useIntl();
+  if (typeof value !== 'boolean') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var TRUTHY_TEXT = intl.formatMessage(booleanTypeMessages.booleanTruthyValue);
+  var FALSY_TEXT = intl.formatMessage(booleanTypeMessages.booleanFalsyValue);
+  return /*#__PURE__*/React.createElement(TextRenderType, {
+    text: value ? TRUTHY_TEXT : FALSY_TEXT,
+    testId: testId
+  });
+};
+export default BooleanRenderType;

package/dist/esm/ui/issue-like-table/render-type/boolean/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var booleanTypeMessages = defineMessages({
+  booleanTruthyValue: {
+    id: 'linkDataSource.render-type.boolean.true',
+    description: 'Text to display for the boolean type when the value is true',
+    defaultMessage: 'Yes'
+  },
+  booleanFalsyValue: {
+    id: 'linkDataSource.render-type.boolean.false',
+    description: 'Text to display for the boolean type when the value is false',
+    defaultMessage: 'No'
+  }
+});

package/dist/esm/ui/issue-like-table/render-type/date-time/index.js

@@ -0,0 +1,38 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+export var DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
+var dateOptions = {
+  month: 'short',
+  day: 'numeric',
+  year: 'numeric'
+};
+var timeOptions = {
+  hour12: false,
+  hour: '2-digit',
+  minute: '2-digit'
+};
+var DateTimeRenderType = function DateTimeRenderType(_ref) {
+  var value = _ref.value,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? DATETIME_TYPE_TEST_ID : _ref$testId,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'datetime' : _ref$display;
+  var date = new Date(value);
+  var intl = useIntl();
+  if (!value || isNaN(date.getTime())) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var options = {
+    date: dateOptions,
+    time: timeOptions,
+    datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
+  };
+  var formattedString = intl.formatDate(date, options[display] || options['date']);
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId
+  }, formattedString);
+};
+export default DateTimeRenderType;

package/dist/esm/ui/issue-like-table/render-type/icon/index.js

@@ -0,0 +1,25 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import React from 'react';
+import styled from '@emotion/styled';
+import Image from '@atlaskit/image';
+var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+export var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
+var IconRenderType = function IconRenderType(_ref) {
+  var label = _ref.label,
+    source = _ref.source,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? ICON_TYPE_TEST_ID : _ref$testId;
+  var style = /svg/i.test(source) ? {
+    minWidth: '20px',
+    maxWidth: '20px'
+  } // having just width: '20px' shriks it when table width is reduced
+  : {};
+  return /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(Image, {
+    src: source,
+    alt: label,
+    "data-testid": testId,
+    style: style
+  }));
+};
+export default IconRenderType;

package/dist/esm/ui/issue-like-table/render-type/index.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import BooleanRenderType from './boolean';
+import DateTimeRenderType from './date-time';
+import IconRenderType from './icon';
+import LinkRenderType from './link';
+import NumberRenderType from './number';
+import StatusRenderType from './status';
+import TagRenderType from './tag';
+import StringRenderType from './text';
+import UserRenderType from './user';
+export var fallbackRenderType = function fallbackRenderType(item) {
+  switch (item.type) {
+    case 'boolean':
+      return /*#__PURE__*/React.createElement(BooleanRenderType, {
+        value: item.value
+      });
+    case 'date':
+      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
+        value: item.value,
+        display: "date"
+      });
+    case 'datetime':
+      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
+        value: item.value,
+        display: "datetime"
+      });
+    case 'icon':
+      return /*#__PURE__*/React.createElement(IconRenderType, item.value);
+    case 'link':
+      return /*#__PURE__*/React.createElement(LinkRenderType, item.value);
+    case 'number':
+      return /*#__PURE__*/React.createElement(NumberRenderType, {
+        number: item.value
+      });
+    case 'status':
+      return /*#__PURE__*/React.createElement(StatusRenderType, item.value);
+    case 'string':
+      return /*#__PURE__*/React.createElement(StringRenderType, {
+        text: item.value
+      });
+    case 'tag':
+      return /*#__PURE__*/React.createElement(TagRenderType, {
+        text: item.value
+      });
+    case 'time':
+      return /*#__PURE__*/React.createElement(DateTimeRenderType, {
+        value: item.value,
+        display: "time"
+      });
+    case 'user':
+      return /*#__PURE__*/React.createElement(UserRenderType, item.value);
+    default:
+      return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+};

package/dist/esm/ui/issue-like-table/render-type/link/index.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Card } from '@atlaskit/smart-card';
+import LinkUrl from '@atlaskit/smart-card/link-url';
+import { N300 } from '@atlaskit/theme/colors';
+import { h300 } from '@atlaskit/theme/typography';
+var linkStyles = {
+  key: _objectSpread(_objectSpread({}, h300()), {}, {
+    color: "var(--ds-text-subtlest, ".concat(N300, ")"),
+    fontWeight: 600
+  })
+};
+export var LINK_TYPE_TEST_ID = 'link-datasource-render-type--link';
+var LinkRenderType = function LinkRenderType(_ref) {
+  var linkType = _ref.linkType,
+    url = _ref.url,
+    text = _ref.text,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? LINK_TYPE_TEST_ID : _ref$testId;
+  var style = useMemo(function () {
+    return linkType && linkStyles[linkType] || {};
+  }, [linkType]);
+  var anchor = useMemo(function () {
+    return /*#__PURE__*/React.createElement(LinkUrl, {
+      href: url,
+      style: style,
+      "data-testid": testId
+    }, text || url);
+  }, [style, url, text, testId]);
+  var SmartCard = function SmartCard() {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      fallback: anchor
+    }, /*#__PURE__*/React.createElement(Card, {
+      appearance: "inline",
+      url: url,
+      testId: testId
+    }));
+  };
+  return text ? anchor : /*#__PURE__*/React.createElement(SmartCard, null);
+};
+export default /*#__PURE__*/React.memo(LinkRenderType);

package/dist/esm/ui/issue-like-table/render-type/number/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export var NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
+var NumberRenderType = function NumberRenderType(_ref) {
+  var number = _ref.number,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? NUMBER_TYPE_TEST_ID : _ref$testId;
+  if (typeof number !== 'number') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  var formattedNumber = Number.isInteger(number) ? number : "".concat(number.toFixed(2));
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId
+  }, formattedNumber);
+};
+export default NumberRenderType;

package/dist/esm/ui/issue-like-table/render-type/status/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Lozenge from '@atlaskit/lozenge';
+export var STATUS_TYPE_TEST_ID = 'link-datasource-render-type--status';
+var StatusRenderType = function StatusRenderType(_ref) {
+  var text = _ref.text,
+    status = _ref.status,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? STATUS_TYPE_TEST_ID : _ref$testId,
+    style = _ref.style;
+  if (!text) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: status,
+    testId: testId,
+    style: style
+  }, text);
+};
+export default StatusRenderType;

package/dist/esm/ui/issue-like-table/render-type/tag/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SimpleTag as Tag } from '@atlaskit/tag';
+export var TAG_TYPE_TEST_ID = 'link-datasource-render-type--tag';
+var TagRenderType = function TagRenderType(_ref) {
+  var text = _ref.text,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TAG_TYPE_TEST_ID : _ref$testId;
+  if (!text) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement(Tag, {
+    text: text,
+    testId: testId,
+    appearance: 'default',
+    color: 'standard'
+  });
+};
+export default TagRenderType;

package/dist/esm/ui/issue-like-table/render-type/text/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+export var TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
+var TextRenderType = function TextRenderType(_ref) {
+  var text = _ref.text,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? TEXT_TYPE_TEST_ID : _ref$testId;
+  if (!text) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId
+  }, text);
+};
+export default TextRenderType;

package/dist/esm/ui/issue-like-table/render-type/user/index.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import React from 'react';
+import styled from '@emotion/styled';
+import { FormattedMessage } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
+import { userTypeMessages } from './messages';
+var UserWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var AvatarWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+export var USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
+var UserType = function UserType(_ref) {
+  var avatarSource = _ref.avatarSource,
+    _ref$avatarSize = _ref.avatarSize,
+    avatarSize = _ref$avatarSize === void 0 ? 'small' : _ref$avatarSize,
+    displayName = _ref.displayName,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? USER_TYPE_TEST_ID : _ref$testId,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement(UserWrapper, {
+    "data-testid": testId
+  }, /*#__PURE__*/React.createElement(AvatarWrapper, null, /*#__PURE__*/React.createElement(Avatar, {
+    appearance: "circle",
+    size: avatarSize,
+    src: avatarSource
+  })), children || displayName || /*#__PURE__*/React.createElement(FormattedMessage, userTypeMessages.userDefaultdisplayNameValue));
+};
+export default UserType;

package/dist/esm/ui/issue-like-table/render-type/user/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export var userTypeMessages = defineMessages({
+  userDefaultdisplayNameValue: {
+    id: 'linkDataSource.render-type.user.default.display.name',
+    description: 'Text to display for the user type when no display value is provided',
+    defaultMessage: 'Unassigned'
+  }
+});

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

@@ -0,0 +1,4 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+import styled from '@emotion/styled';
+export var TableHeading = styled.th(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)");

package/dist/esm/ui/issue-like-table/types.js

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