@atlaskit/link-datasource 1.0.2 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-datasource
 
+## 1.0.4
+
+### Patch Changes
+
+- [`ea1fef58561`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea1fef58561) - [ux] Fixes to column styling and other minor formatting issues
+
+## 1.0.3
+
+### Patch Changes
+
+- [`513a4e98543`](https://bitbucket.org/atlassian/atlassian-frontend/commits/513a4e98543) - [ux] links will now fallback to rendering as an anchor if smart-card fails to resolve
+
 ## 1.0.2
 
 ### Patch Changes

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

@@ -346,7 +346,7 @@ var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       tag: "span",
       testId: 'datasource-header-content'
     }, (0, _react2.jsx)(_heading.default, {
-      level: "h400",
+      level: "h200",
       as: 'span'
     }, content));
     if (onVisibleColumnKeysChange && hasData) {

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

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DATETIME_TYPE_TEST_ID = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
+var _styled2 = require("../../styled");
+var _templateObject;
 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) { (0, _defineProperty2.default)(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; }
 var DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
@@ -22,6 +26,7 @@ var timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
+var DateTimeWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
 var DateTimeRenderType = function DateTimeRenderType(_ref) {
   var value = _ref.value,
     _ref$testId = _ref.testId,
@@ -39,7 +44,7 @@ var DateTimeRenderType = function DateTimeRenderType(_ref) {
     datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
   };
   var formattedString = intl.formatDate(date, options[display] || options['date']);
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(DateTimeWrapper, {
     "data-testid": testId
   }, formattedString);
 };

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

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _templateObject;
-var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var IconWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: left;\n"])));
 var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
 exports.ICON_TYPE_TEST_ID = ICON_TYPE_TEST_ID;
 var IconRenderType = function IconRenderType(_ref) {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fallbackRenderType = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _boolean = _interopRequireDefault(require("./boolean"));
 var _dateTime = _interopRequireDefault(require("./date-time"));
@@ -17,7 +18,7 @@ var _tag = _interopRequireDefault(require("./tag"));
 var _text = _interopRequireDefault(require("./text"));
 var _user = _interopRequireDefault(require("./user"));
 var fallbackRenderType = function fallbackRenderType(item) {
-  var _item$value, _item$value2;
+  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
       return /*#__PURE__*/_react.default.createElement(_boolean.default, {
@@ -36,7 +37,9 @@ var fallbackRenderType = function fallbackRenderType(item) {
     case 'icon':
       return /*#__PURE__*/_react.default.createElement(_icon.default, item.value);
     case 'link':
-      return /*#__PURE__*/_react.default.createElement(_link.default, item.value);
+      return /*#__PURE__*/_react.default.createElement(_link.default, (0, _extends2.default)({
+        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
+      }, item.value));
     case 'number':
       return /*#__PURE__*/_react.default.createElement(_number.default, {
         number: item.value
@@ -49,7 +52,7 @@ var fallbackRenderType = function fallbackRenderType(item) {
       });
     case 'tag':
       return /*#__PURE__*/_react.default.createElement(_tag.default, {
-        key: ((_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.id) || ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.text),
+        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
         tag: item.value
       });
     case 'time':

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

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.LINK_TYPE_TEST_ID = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactErrorBoundary = require("react-error-boundary");
 var _smartCard = require("@atlaskit/smart-card");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _colors = require("@atlaskit/theme/colors");
 var _typography = require("@atlaskit/theme/typography");
+var _styled = require("../../styled");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -38,20 +38,28 @@ var LinkRenderType = function LinkRenderType(_ref) {
   var anchor = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_linkUrl.default, {
       href: url,
-      style: linkStyle,
+      style: _objectSpread(_objectSpread({}, linkStyle), {}, {
+        fontSize: _styled.FieldTextFontSize
+      }),
       "data-testid": testId,
       target: "_blank"
     }, text || url);
   }, [linkStyle, url, text, testId]);
   var SmartCard = function SmartCard() {
-    return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
-      fallback: anchor
-    }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+    return /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
       appearance: "inline",
       url: url,
-      testId: testId
-    }));
+      testId: testId,
+      fallbackComponent: function fallbackComponent() {
+        return anchor;
+      }
+    });
   };
+
+  // url can be undefined before data is fetched whilst adding new link column to display
+  if (!url) {
+    return null;
+  }
   return text ? anchor : /*#__PURE__*/_react.default.createElement(SmartCard, null);
 };
 var _default = /*#__PURE__*/_react.default.memo(LinkRenderType);

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.NUMBER_TYPE_TEST_ID = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _text = _interopRequireDefault(require("../text"));
 var NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
 exports.NUMBER_TYPE_TEST_ID = NUMBER_TYPE_TEST_ID;
 var NumberRenderType = function NumberRenderType(_ref) {
@@ -15,10 +16,13 @@ var NumberRenderType = function NumberRenderType(_ref) {
   if (typeof number !== 'number') {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  var formattedNumber = Number.isInteger(number) ? number : "".concat(number.toFixed(2));
-  return /*#__PURE__*/_react.default.createElement("span", {
-    "data-testid": testId
-  }, formattedNumber);
+  var formattedNumber = number.toLocaleString(undefined, {
+    maximumFractionDigits: 15
+  });
+  return /*#__PURE__*/_react.default.createElement(_text.default, {
+    testId: testId,
+    text: formattedNumber
+  });
 };
 var _default = NumberRenderType;
 exports.default = _default;

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

@@ -5,9 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TEXT_TYPE_TEST_ID = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _styled2 = require("../../styled");
+var _templateObject;
 var TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
 exports.TEXT_TYPE_TEST_ID = TEXT_TYPE_TEST_ID;
+var TextWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
 var TextRenderType = function TextRenderType(_ref) {
   var text = _ref.text,
     _ref$testId = _ref.testId,
@@ -15,7 +20,7 @@ var TextRenderType = function TextRenderType(_ref) {
   if (!(text && typeof text === 'string')) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(TextWrapper, {
     "data-testid": testId
   }, text), /*#__PURE__*/_react.default.createElement("br", null));
 };

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

@@ -10,9 +10,10 @@ var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _reactIntlNext = require("react-intl-next");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _styled2 = require("../../styled");
 var _messages = require("./messages");
 var _templateObject, _templateObject2;
-var UserWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+var UserWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n"])), _styled2.FieldTextFontSize);
 var AvatarWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
 var USER_TYPE_TEST_ID = 'link-datasource-render-type--user';
 exports.USER_TYPE_TEST_ID = USER_TYPE_TEST_ID;

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

@@ -4,14 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableHeading = exports.Table = exports.EmptyStateTableHeading = void 0;
+exports.TableHeading = exports.Table = exports.FieldTextFontSize = exports.EmptyStateTableHeading = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2, _templateObject3;
+var FieldTextFontSize = '14px';
+exports.FieldTextFontSize = FieldTextFontSize;
 var Table = _styled.default.table(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n"])));
 exports.Table = Table;
-var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
+var TableHeading = _styled.default.th(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
 exports.TableHeading = TableHeading;
 var EmptyStateTableHeading = (0, _styled.default)(TableHeading)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");
 exports.EmptyStateTableHeading = EmptyStateTableHeading;

package/dist/cjs/ui/jira-issues-modal/modal/index.js

@@ -344,7 +344,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.2",
+  packageVersion: "1.0.4",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/cjs/ui/table-footer/index.js

@@ -24,7 +24,7 @@ var FooterWrapper = _styled.default.div(_templateObject || (_templateObject = (0
 var TopBorderWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: ", " 0;\n  border-top: 2px solid ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-accent-gray-subtler, ".concat(_colors.N40, ")"));
 var IssueCounterWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N800, ")"));
 var SyncWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(_colors.N90, ")"));
-var SyncTextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n"])));
+var SyncTextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 5px;\n  font-size: 12px;\n"])));
 var TableFooter = function TableFooter(_ref) {
   var issueCount = _ref.issueCount,
     onRefresh = _ref.onRefresh,
@@ -49,7 +49,7 @@ var TableFooter = function TableFooter(_ref) {
     "data-testid": 'issue-count-wrapper'
   }, showIssueCount && (0, _react2.jsx)(_heading.default, {
     testId: "issue-count",
-    level: "h400"
+    level: "h200"
   }, (0, _react2.jsx)(_reactIntlNext.FormattedNumber, {
     value: issueCount
   }), ' ', (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.footerMessages.issueText, {

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

@@ -307,7 +307,7 @@ export const IssueLikeDataTableView = ({
       tag: "span",
       testId: 'datasource-header-content'
     }, jsx(Heading, {
-      level: "h400",
+      level: "h200",
       as: 'span'
     }, content));
     if (onVisibleColumnKeysChange && hasData) {

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

@@ -1,5 +1,7 @@
 import React from 'react';
+import styled from '@emotion/styled';
 import { useIntl } from 'react-intl-next';
+import { FieldTextFontSize } from '../../styled';
 export const DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
 const dateOptions = {
   month: 'short',
@@ -11,6 +13,9 @@ const timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
+const DateTimeWrapper = styled.span`
+  font-size: ${FieldTextFontSize};
+`;
 const DateTimeRenderType = ({
   value,
   testId = DATETIME_TYPE_TEST_ID,
@@ -30,7 +35,7 @@ const DateTimeRenderType = ({
     }
   };
   const formattedString = intl.formatDate(date, options[display] || options['date']);
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(DateTimeWrapper, {
     "data-testid": testId
   }, formattedString);
 };

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

@@ -4,7 +4,7 @@ import Image from '@atlaskit/image';
 const IconWrapper = styled.div`
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: left;
 `;
 export const ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
 const IconRenderType = ({

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import BooleanRenderType from './boolean';
 import DateTimeRenderType from './date-time';
@@ -10,7 +11,7 @@ import TagRenderType from './tag';
 import StringRenderType from './text';
 import UserRenderType from './user';
 export const fallbackRenderType = item => {
-  var _item$value, _item$value2;
+  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
       return /*#__PURE__*/React.createElement(BooleanRenderType, {
@@ -29,7 +30,9 @@ export const fallbackRenderType = item => {
     case 'icon':
       return /*#__PURE__*/React.createElement(IconRenderType, item.value);
     case 'link':
-      return /*#__PURE__*/React.createElement(LinkRenderType, item.value);
+      return /*#__PURE__*/React.createElement(LinkRenderType, _extends({
+        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
+      }, item.value));
     case 'number':
       return /*#__PURE__*/React.createElement(NumberRenderType, {
         number: item.value
@@ -42,7 +45,7 @@ export const fallbackRenderType = item => {
       });
     case 'tag':
       return /*#__PURE__*/React.createElement(TagRenderType, {
-        key: ((_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.id) || ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.text),
+        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
         tag: item.value
       });
     case 'time':

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

@@ -1,9 +1,9 @@
 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';
+import { FieldTextFontSize } from '../../styled';
 const linkStyles = {
   key: {
     ...h300(),
@@ -24,17 +24,24 @@ const LinkRenderType = ({
   }, [style]);
   const anchor = useMemo(() => /*#__PURE__*/React.createElement(LinkUrl, {
     href: url,
-    style: linkStyle,
+    style: {
+      ...linkStyle,
+      fontSize: FieldTextFontSize
+    },
     "data-testid": testId,
     target: "_blank"
   }, text || url), [linkStyle, url, text, testId]);
-  const SmartCard = () => /*#__PURE__*/React.createElement(ErrorBoundary, {
-    fallback: anchor
-  }, /*#__PURE__*/React.createElement(Card, {
+  const SmartCard = () => /*#__PURE__*/React.createElement(Card, {
     appearance: "inline",
     url: url,
-    testId: testId
-  }));
+    testId: testId,
+    fallbackComponent: () => anchor
+  });
+
+  // url can be undefined before data is fetched whilst adding new link column to display
+  if (!url) {
+    return null;
+  }
   return text ? anchor : /*#__PURE__*/React.createElement(SmartCard, null);
 };
 export default /*#__PURE__*/React.memo(LinkRenderType);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import TextRenderType from '../text';
 export const NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
 const NumberRenderType = ({
   number,
@@ -7,9 +8,12 @@ const NumberRenderType = ({
   if (typeof number !== 'number') {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
-  const formattedNumber = Number.isInteger(number) ? number : `${number.toFixed(2)}`;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-testid": testId
-  }, formattedNumber);
+  const formattedNumber = number.toLocaleString(undefined, {
+    maximumFractionDigits: 15
+  });
+  return /*#__PURE__*/React.createElement(TextRenderType, {
+    testId: testId,
+    text: formattedNumber
+  });
 };
 export default NumberRenderType;

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

@@ -1,5 +1,10 @@
 import React from 'react';
+import styled from '@emotion/styled';
+import { FieldTextFontSize } from '../../styled';
 export const TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
+const TextWrapper = styled.span`
+  font-size: ${FieldTextFontSize};
+`;
 const TextRenderType = ({
   text,
   testId = TEXT_TYPE_TEST_ID
@@ -7,7 +12,7 @@ const TextRenderType = ({
   if (!(text && typeof text === 'string')) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextWrapper, {
     "data-testid": testId
   }, text), /*#__PURE__*/React.createElement("br", null));
 };

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

@@ -2,10 +2,12 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
+import { FieldTextFontSize } from '../../styled';
 import { userTypeMessages } from './messages';
 const UserWrapper = styled.div`
   display: flex;
   align-items: center;
+  font-size: ${FieldTextFontSize};
 `;
 const AvatarWrapper = styled.div`
   margin-right: 5px;

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+export const FieldTextFontSize = '14px';
 export const Table = styled.table`
   width: 100%;
 `;
@@ -7,14 +8,13 @@ export const TableHeading = styled.th`
   cursor: grab;
   position: relative;
   padding-block: ${"var(--ds-space-100, 8px)"};
-  line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
+  line-height: ${"var(--ds-font-lineHeight-300, 16px)"};
   border-bottom: 2px solid ${`var(--ds-background-accent-gray-subtler, ${N40})`};
   & [data-testid='datasource-header-content--container'] {
     margin-top: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    line-height: ${"var(--ds-font-lineHeight-300, 24px)"};
   }
 `;
 export const EmptyStateTableHeading = styled(TableHeading)`

package/dist/es2019/ui/jira-issues-modal/modal/index.js

@@ -290,7 +290,7 @@ const analyticsContextAttributes = {
 };
 const analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.2",
+  packageVersion: "1.0.4",
   source: 'datasourceConfigModal'
 };
 const contextData = {

package/dist/es2019/ui/table-footer/index.js

@@ -34,6 +34,7 @@ const SyncWrapper = styled.div`
 `;
 const SyncTextWrapper = styled.div`
   margin-right: 5px;
+  font-size: 12px;
 `;
 export const TableFooter = ({
   issueCount,
@@ -57,7 +58,7 @@ export const TableFooter = ({
     "data-testid": 'issue-count-wrapper'
   }, showIssueCount && jsx(Heading, {
     testId: "issue-count",
-    level: "h400"
+    level: "h200"
   }, jsx(FormattedNumber, {
     value: issueCount
   }), ' ', jsx(FormattedMessage, _extends({}, footerMessages.issueText, {

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

@@ -339,7 +339,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref2) {
       tag: "span",
       testId: 'datasource-header-content'
     }, jsx(Heading, {
-      level: "h400",
+      level: "h200",
       as: 'span'
     }, content));
     if (onVisibleColumnKeysChange && hasData) {

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

@@ -1,8 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 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 styled from '@emotion/styled';
 import { useIntl } from 'react-intl-next';
+import { FieldTextFontSize } from '../../styled';
 export var DATETIME_TYPE_TEST_ID = 'link-datasource-render-type--datetime';
 var dateOptions = {
   month: 'short',
@@ -14,6 +18,7 @@ var timeOptions = {
   hour: '2-digit',
   minute: '2-digit'
 };
+var DateTimeWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n"])), FieldTextFontSize);
 var DateTimeRenderType = function DateTimeRenderType(_ref) {
   var value = _ref.value,
     _ref$testId = _ref.testId,
@@ -31,7 +36,7 @@ var DateTimeRenderType = function DateTimeRenderType(_ref) {
     datetime: _objectSpread(_objectSpread({}, dateOptions), timeOptions)
   };
   var formattedString = intl.formatDate(date, options[display] || options['date']);
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(DateTimeWrapper, {
     "data-testid": testId
   }, formattedString);
 };

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

@@ -3,7 +3,7 @@ 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"])));
+var IconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: left;\n"])));
 export var ICON_TYPE_TEST_ID = 'link-datasource-render-type--icon';
 var IconRenderType = function IconRenderType(_ref) {
   var label = _ref.label,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import BooleanRenderType from './boolean';
 import DateTimeRenderType from './date-time';
@@ -10,7 +11,7 @@ import TagRenderType from './tag';
 import StringRenderType from './text';
 import UserRenderType from './user';
 export var fallbackRenderType = function fallbackRenderType(item) {
-  var _item$value, _item$value2;
+  var _item$value, _item$value2, _item$value3;
   switch (item.type) {
     case 'boolean':
       return /*#__PURE__*/React.createElement(BooleanRenderType, {
@@ -29,7 +30,9 @@ export var fallbackRenderType = function fallbackRenderType(item) {
     case 'icon':
       return /*#__PURE__*/React.createElement(IconRenderType, item.value);
     case 'link':
-      return /*#__PURE__*/React.createElement(LinkRenderType, item.value);
+      return /*#__PURE__*/React.createElement(LinkRenderType, _extends({
+        key: (_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.url
+      }, item.value));
     case 'number':
       return /*#__PURE__*/React.createElement(NumberRenderType, {
         number: item.value
@@ -42,7 +45,7 @@ export var fallbackRenderType = function fallbackRenderType(item) {
       });
     case 'tag':
       return /*#__PURE__*/React.createElement(TagRenderType, {
-        key: ((_item$value = item.value) === null || _item$value === void 0 ? void 0 : _item$value.id) || ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.text),
+        key: ((_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : _item$value2.id) || ((_item$value3 = item.value) === null || _item$value3 === void 0 ? void 0 : _item$value3.text),
         tag: item.value
       });
     case 'time':

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

@@ -2,11 +2,11 @@ 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';
+import { FieldTextFontSize } from '../../styled';
 var linkStyles = {
   key: _objectSpread(_objectSpread({}, h300()), {}, {
     color: "var(--ds-text-subtlest, ".concat(N300, ")"),
@@ -27,20 +27,28 @@ var LinkRenderType = function LinkRenderType(_ref) {
   var anchor = useMemo(function () {
     return /*#__PURE__*/React.createElement(LinkUrl, {
       href: url,
-      style: linkStyle,
+      style: _objectSpread(_objectSpread({}, linkStyle), {}, {
+        fontSize: FieldTextFontSize
+      }),
       "data-testid": testId,
       target: "_blank"
     }, text || url);
   }, [linkStyle, url, text, testId]);
   var SmartCard = function SmartCard() {
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
-      fallback: anchor
-    }, /*#__PURE__*/React.createElement(Card, {
+    return /*#__PURE__*/React.createElement(Card, {
       appearance: "inline",
       url: url,
-      testId: testId
-    }));
+      testId: testId,
+      fallbackComponent: function fallbackComponent() {
+        return anchor;
+      }
+    });
   };
+
+  // url can be undefined before data is fetched whilst adding new link column to display
+  if (!url) {
+    return null;
+  }
   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

@@ -1,4 +1,5 @@
 import React from 'react';
+import TextRenderType from '../text';
 export var NUMBER_TYPE_TEST_ID = 'link-datasource-render-type--number';
 var NumberRenderType = function NumberRenderType(_ref) {
   var number = _ref.number,
@@ -7,9 +8,12 @@ var NumberRenderType = function NumberRenderType(_ref) {
   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);
+  var formattedNumber = number.toLocaleString(undefined, {
+    maximumFractionDigits: 15
+  });
+  return /*#__PURE__*/React.createElement(TextRenderType, {
+    testId: testId,
+    text: formattedNumber
+  });
 };
 export default NumberRenderType;

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

@@ -1,5 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
 import React from 'react';
+import styled from '@emotion/styled';
+import { FieldTextFontSize } from '../../styled';
 export var TEXT_TYPE_TEST_ID = 'link-datasource-render-type--text';
+var TextWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n"])), FieldTextFontSize);
 var TextRenderType = function TextRenderType(_ref) {
   var text = _ref.text,
     _ref$testId = _ref.testId,
@@ -7,7 +12,7 @@ var TextRenderType = function TextRenderType(_ref) {
   if (!(text && typeof text === 'string')) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextWrapper, {
     "data-testid": testId
   }, text), /*#__PURE__*/React.createElement("br", null));
 };

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

@@ -4,8 +4,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { FormattedMessage } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
+import { FieldTextFontSize } from '../../styled';
 import { userTypeMessages } from './messages';
-var UserWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var UserWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n"])), FieldTextFontSize);
 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) {

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

@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 import styled from '@emotion/styled';
 import { N40 } from '@atlaskit/theme/colors';
+export var FieldTextFontSize = '14px';
 export var Table = styled.table(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
-export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: ", ";\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 24px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"), "var(--ds-font-lineHeight-300, 24px)");
+export var TableHeading = styled.th(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  cursor: grab;\n  position: relative;\n  padding-block: ", ";\n  line-height: ", ";\n  border-bottom: 2px solid ", ";\n  & [data-testid='datasource-header-content--container'] {\n    margin-top: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n"])), "var(--ds-space-100, 8px)", "var(--ds-font-lineHeight-300, 16px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
 export var EmptyStateTableHeading = styled(TableHeading)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &:first-child {\n    padding-left: ", ";\n  }\n"])), "var(--ds-space-100, 8px)");

package/dist/esm/ui/jira-issues-modal/modal/index.js

@@ -334,7 +334,7 @@ var analyticsContextAttributes = {
 };
 var analyticsContextData = {
   packageName: "@atlaskit/link-datasource",
-  packageVersion: "1.0.2",
+  packageVersion: "1.0.4",
   source: 'datasourceConfigModal'
 };
 var contextData = _objectSpread(_objectSpread({}, analyticsContextData), {}, {

package/dist/esm/ui/table-footer/index.js

@@ -17,7 +17,7 @@ var FooterWrapper = styled.div(_templateObject || (_templateObject = _taggedTemp
 var TopBorderWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: ", " 0;\n  border-top: 2px solid ", ";\n"])), "var(--ds-space-250, 20px)", "var(--ds-background-accent-gray-subtler, ".concat(N40, ")"));
 var IssueCounterWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N800, ")"));
 var SyncWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  color: ", ";\n"])), "var(--ds-text-accent-gray, ".concat(N90, ")"));
-var SyncTextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n"])));
+var SyncTextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-right: 5px;\n  font-size: 12px;\n"])));
 export var TableFooter = function TableFooter(_ref) {
   var issueCount = _ref.issueCount,
     onRefresh = _ref.onRefresh,
@@ -42,7 +42,7 @@ export var TableFooter = function TableFooter(_ref) {
     "data-testid": 'issue-count-wrapper'
   }, showIssueCount && jsx(Heading, {
     testId: "issue-count",
-    level: "h400"
+    level: "h200"
   }, jsx(FormattedNumber, {
     value: issueCount
   }), ' ', jsx(FormattedMessage, _extends({}, footerMessages.issueText, {

package/dist/types/ui/issue-like-table/render-type/link/index.d.ts

@@ -4,5 +4,5 @@ interface LinkProps extends Link {
     testId?: string;
 }
 export declare const LINK_TYPE_TEST_ID = "link-datasource-render-type--link";
-declare const _default: React.MemoExoticComponent<({ style, url, text, testId, }: LinkProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, url, text, testId, }: LinkProps) => JSX.Element | null>;
 export default _default;

package/dist/types/ui/issue-like-table/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const FieldTextFontSize = "14px";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/dist/types-ts4.5/ui/issue-like-table/render-type/link/index.d.ts

@@ -4,5 +4,5 @@ interface LinkProps extends Link {
     testId?: string;
 }
 export declare const LINK_TYPE_TEST_ID = "link-datasource-render-type--link";
-declare const _default: React.MemoExoticComponent<({ style, url, text, testId, }: LinkProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, url, text, testId, }: LinkProps) => JSX.Element | null>;
 export default _default;

package/dist/types-ts4.5/ui/issue-like-table/styled.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export declare const FieldTextFontSize = "14px";
 export declare const Table: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/examples-helpers/smartLinkCustomClient.ts

@@ -1,6 +1,7 @@
 import { JsonLd } from 'json-ld-types';
 
 import { CardClient } from '@atlaskit/link-provider';
+import { APIError } from '@atlaskit/linking-common';
 
 import { mockJqlSmartLinkData } from './mockJqlSmartLinkData';
 import { mocks } from './mockSmartLinkData';
@@ -15,6 +16,13 @@ class SmartLinkClient extends CardClient {
         return Promise.resolve(mocks.resolved);
       case 'https://link-that-does-not-resolve.com':
         return Promise.reject(`Can't resolve from ${url}`);
+      case 'https://link-that-is-unsupported.com':
+        throw new APIError(
+          'fatal',
+          new URL(url).hostname,
+          'received unsupported error',
+          'ResolveUnsupportedError',
+        );
       case jqlUrlRegExp.test(url) ? url : undefined:
         return Promise.resolve(mockJqlSmartLinkData.resolved);
       default:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -66,7 +66,6 @@
     "@emotion/styled": "^11.0.0",
     "debounce-promise": "^3.1.2",
     "react-dom": "^16.8.0",
-    "react-error-boundary": "^3.1.3",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {