@atlaskit/smart-card 18.0.17 → 18.0.20

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -15,40 +15,22 @@ var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-
 var _block = _interopRequireDefault(require("../../block"));
 
 var _constants = require("../../../../../../constants");
 
-var _excluded = ["actionGroup", "testId", "title"];
-
-var getSpinnerSize = function getSpinnerSize(size) {
-  // Spinner sizes should be equivalent or smaller than Icon size
-  // to avoid the jumping.
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-      return 28;
+var _loadingSkeleton = _interopRequireDefault(require("../../../common/loading-skeleton"));
 
-    case _constants.SmartLinkSize.Large:
-      return 24;
+var _utils = require("../../../utils");
 
-    case _constants.SmartLinkSize.Medium:
-      return 16;
+var _excluded = ["actionGroup", "testId", "title"];
 
-    case _constants.SmartLinkSize.Small:
-    default:
-      return 12;
-  }
-};
 /**
  * This represents a TitleBlock for a Smart Link that is currently waiting
  * for a request to finish.
  * This should render when a Smart Link has sent a request.
  * @see TitleBlock
  */
-
-
 var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
   var actionGroup = _ref.actionGroup,
       testId = _ref.testId,
@@ -56,12 +38,16 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var iconWidth = (0, _utils.getIconWidth)(size);
+  var iconStyles = (0, _utils.getIconSizeStyles)(iconWidth);
   return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), (0, _core.jsx)(_spinner.default, {
-    size: getSpinnerSize(size),
-    testId: "".concat(testId, "-resolving-spinner")
-  }), title, actionGroup);
+  }), (0, _core.jsx)("span", {
+    css: iconStyles,
+    "data-testid": "".concat(testId, "-icon")
+  }, (0, _core.jsx)(_loadingSkeleton.default, {
+    testId: "".concat(testId, "-icon-loading")
+  })), title, actionGroup);
 };
 
 var _default = TitleBlockResolvingView;

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -82,7 +82,7 @@ var getGapSize = function getGapSize(size) {
 exports.getGapSize = getGapSize;
 
 var getBaseStyles = function getBaseStyles(direction, size) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  overflow-y: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 exports.getBaseStyles = getBaseStyles;

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -7,30 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _core = require("@emotion/core");
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 
-var _tokens = require("@atlaskit/tokens");
-
-var _templateObject, _templateObject2;
-
-var placeholderShimmer = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
-var shimmer = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), placeholderShimmer);
+var _loadingSkeleton = _interopRequireDefault(require("../loading-skeleton"));
 
+/** @jsx jsx */
 var ImageIcon = function ImageIcon(_ref) {
   var defaultIcon = _ref.defaultIcon,
       testId = _ref.testId,
       url = _ref.url;
   return (0, _core.jsx)(_reactRenderImage.default, {
     src: url,
-    loading: (0, _core.jsx)("span", {
-      css: shimmer,
-      "data-testid": "".concat(testId, "-loading")
+    loading: (0, _core.jsx)(_loadingSkeleton.default, {
+      testId: "".concat(testId, "-loading")
     }),
     loaded: (0, _core.jsx)("img", {
       src: url,

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject, _templateObject2;
+
+var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% { background-position: -20px 0; }\n  100% { background-position: 20px 0; }\n"])));
+var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  user-select: none;\n  background: ", ";\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n  background-image: linear-gradient(\n    to right,\n    ", " 0%,\n    ", " 20%,\n    ", " 40%,\n    ", "100%\n  );\n  background-repeat: no-repeat;\n  background-size: 280% 100%;\n  display: inline-block;\n\n  animation-duration: 1s;\n  animation-fill-mode: forwards;\n  animation-iteration-count: infinite;\n  animation-name: ", ";\n  animation-timing-function: linear;\n"])), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
+
+var LoadingSkeleton = function LoadingSkeleton(_ref) {
+  var testId = _ref.testId;
+  return (0, _core.jsx)("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
+
+var _default = LoadingSkeleton;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/common/loading-skeleton/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.getContainerStyles = exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
@@ -19,7 +21,15 @@ var _flexible = require("../../../../utils/flexible");
 
 var _token = require("../../../../utils/token");
 
-var _templateObject, _templateObject2;
+var _flexibleUiContext = require("../../../../state/flexible-ui-context");
+
+var _layeredLink = _interopRequireDefault(require("./layered-link"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+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; }
 
 var elevationStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
 
@@ -57,8 +67,10 @@ var getPadding = function getPadding(size) {
   }
 };
 
-var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding) {
-  return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow: hidden;\n  ", "\n  ", "\n  ", "\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles);
+var clickableContainerStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+
+var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
+  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: ", " 0;\n  flex-direction: column;\n  min-width: 0;\n  overflow-x: hidden;\n  position: relative;\n  ", "\n  ", "\n  ", "\n  ", "\n  &:hover ~ .actions-button-group {\n    opacity: 1;\n  }\n  a:focus,\n  .has-action:focus {\n    outline-offset: -2px;\n  }\n"])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 exports.getContainerStyles = getContainerStyles;
@@ -77,34 +89,65 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+
+var getTitleBlockProps = function getTitleBlockProps(children) {
+  var block = _react.default.Children.toArray(children).find(function (child) {
+    return (0, _flexible.isFlexibleUiTitleBlock)(child);
+  });
+
+  if ( /*#__PURE__*/_react.default.isValidElement(block)) {
+    return block.props;
+  }
+};
+
+var getLayeredLink = function getLayeredLink(testId, context, children) {
+  var _ref = context || {},
+      title = _ref.title,
+      _ref$url = _ref.url,
+      url = _ref$url === void 0 ? '' : _ref$url;
+
+  var _ref2 = getTitleBlockProps(children) || {},
+      target = _ref2.anchorTarget,
+      text = _ref2.text;
+
+  return (0, _core.jsx)(_layeredLink.default, {
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
 /**
  * This represents the container in which all Flexible UI Smart Links are rendered.
  * @see Block
  */
 
 
-var Container = function Container(_ref) {
-  var children = _ref.children,
-      _ref$hideBackground = _ref.hideBackground,
-      hideBackground = _ref$hideBackground === void 0 ? false : _ref$hideBackground,
-      _ref$hideElevation = _ref.hideElevation,
-      hideElevation = _ref$hideElevation === void 0 ? false : _ref$hideElevation,
-      _ref$hidePadding = _ref.hidePadding,
-      hidePadding = _ref$hidePadding === void 0 ? false : _ref$hidePadding,
-      retry = _ref.retry,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
-      status = _ref.status,
-      _ref$testId = _ref.testId,
-      testId = _ref$testId === void 0 ? 'smart-links-container' : _ref$testId,
-      _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref$theme,
-      onClick = _ref.onClick;
+var Container = function Container(_ref3) {
+  var children = _ref3.children,
+      _ref3$clickableContai = _ref3.clickableContainer,
+      clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
+      _ref3$hideBackground = _ref3.hideBackground,
+      hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
+      _ref3$hideElevation = _ref3.hideElevation,
+      hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+      _ref3$hidePadding = _ref3.hidePadding,
+      hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+      onClick = _ref3.onClick,
+      retry = _ref3.retry,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
+      status = _ref3.status,
+      _ref3$testId = _ref3.testId,
+      testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+  var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
   return (0, _core.jsx)("div", {
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding),
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 var _default = Container;

package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _templateObject;
+
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow-x: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+
+var LayeredLink = function LayeredLink(_ref) {
+  var target = _ref.target,
+      testId = _ref.testId,
+      text = _ref.text,
+      url = _ref.url;
+  return (0, _core.jsx)("a", {
+    className: "layered-link",
+    css: styles,
+    "data-testid": "".concat(testId, "-layered-link"),
+    href: url,
+    target: target,
+    tabIndex: -1 // Hide tab index and let the title link be the link.
+
+  }, text);
+};
+
+var _default = LayeredLink;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/container/layered-link/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -60,6 +60,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
 
   return (0, _core.jsx)("span", {
     css: [getStyles(size), overrideCss],
+    "data-fit-to-content": true,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
   }, (0, _core.jsx)(_avatarGroup.default, {

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js

@@ -42,23 +42,6 @@ var getPositionStyles = function getPositionStyles(size, position) {
   }
 };
 
-var getWidth = function getWidth(size) {
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-      return '2rem';
-
-    case _constants.SmartLinkSize.Large:
-      return '1.5rem';
-
-    case _constants.SmartLinkSize.Medium:
-      return '1rem';
-
-    case _constants.SmartLinkSize.Small:
-    default:
-      return '.75rem';
-  }
-};
-
 var getIconStyles = function getIconStyles(size, position, width) {
   return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), getPositionStyles(size, position), (0, _utils.getIconSizeStyles)(width));
 };
@@ -118,7 +101,7 @@ var Icon = function Icon(_ref) {
     var defaultIcon = renderDefaultIcon(label, testId);
     return (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, icon, url, testId) || renderAtlaskitIcon(icon, label, testId) || defaultIcon;
   }, [icon, label, render, testId, url]);
-  var width = getWidth(size);
+  var width = (0, _utils.getIconWidth)(size);
   var styles = getIconStyles(size, position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _core.jsx)("div", {

package/dist/cjs/view/FlexibleCard/components/elements/link/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
@@ -23,6 +25,10 @@ var _token = require("../../../../../utils/token");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+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; }
+
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
@@ -40,9 +46,9 @@ var getThemeStyles = function getThemeStyles(theme) {
   }
 };
 
-var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size)), getThemeStyles(theme));
+  return (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {
@@ -78,6 +84,9 @@ var Link = function Link(_ref) {
       url = _ref.url,
       onClick = _ref.onClick,
       target = _ref.target;
+  var hasSpace = (0, _react.useMemo)(function () {
+    return text ? (0, _utils.hasWhiteSpace)(text) : false;
+  }, [text]);
   return (0, _core.jsx)("span", {
     css: containerStyles
   }, (0, _core.jsx)(_tooltip.default, {
@@ -85,7 +94,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, (0, _core.jsx)("a", {
-    css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
+exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -44,6 +44,25 @@ var getIconSizeStyles = function getIconSizeStyles(width) {
 
 exports.getIconSizeStyles = getIconSizeStyles;
 
+var getIconWidth = function getIconWidth(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '2rem';
+
+    case _constants.SmartLinkSize.Large:
+      return '1.5rem';
+
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.75rem';
+  }
+};
+
+exports.getIconWidth = getIconWidth;
+
 var getLinkLineHeight = function getLinkLineHeight(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
@@ -92,7 +111,14 @@ exports.getMaxLines = getMaxLines;
 
 var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), maxLines, maxLines, lineHeight);
+  var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
+  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    max-height: calc(", " * ", ");\n  "])), wordBreak, maxLines, maxLines, lineHeight);
+};
+
+exports.getTruncateStyles = getTruncateStyles;
+
+var hasWhiteSpace = function hasWhiteSpace(str) {
+  return str.search(/\s/) >= 0;
 };
 
-exports.getTruncateStyles = getTruncateStyles;
+exports.hasWhiteSpace = hasWhiteSpace;

package/dist/cjs/view/FlexibleCard/index.js

@@ -42,9 +42,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
   }, ui, {
+    onClick: onClick,
     retry: retry,
-    status: status,
-    onClick: onClick
+    status: status
   }), children));
 };
 

package/dist/es2019/i18n/cs.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Czech
+export default {
+  'fabric.linking.cannot_connect': 'Nelze se připojit, zkuste to znovu.',
+  'fabric.linking.cannot_find_link': 'Nepodařilo se najít odkaz.',
+  'fabric.linking.click_to_join': 'Chcete-li si zobrazit tento požadavek, připojte se ke službě {context}.',
+  'fabric.linking.connect_link_account': 'Pokud chcete zobrazit náhled, připojte svůj účet',
+  'fabric.linking.create_on': 'Vytvořeno {context}',
+  'fabric.linking.created_by': 'Vytvořil(a) {context}',
+  'fabric.linking.delete': 'Odstranit',
+  'fabric.linking.edit': 'Upravit',
+  'fabric.linking.forbidden_access': 'Přístup byl odepřen',
+  'fabric.linking.invalid_permissions': 'Omezený odkaz, zkuste jiný účet.',
+  'fabric.linking.modified_on': 'Aktualizováno {context}',
+  'fabric.linking.pending_request': 'Vaše žádost o přístup čeká na vyřízení.',
+  'fabric.linking.priority_blocker': 'Blokující',
+  'fabric.linking.priority_critical': 'Kritická',
+  'fabric.linking.priority_high': 'Vysoká',
+  'fabric.linking.priority_highest': 'Nejvyšší',
+  'fabric.linking.priority_low': 'Nízká',
+  'fabric.linking.priority_lowest': 'Nejnižší',
+  'fabric.linking.priority_major': 'Vysoká',
+  'fabric.linking.priority_medium': 'Střední',
+  'fabric.linking.priority_minor': 'Nízká',
+  'fabric.linking.priority_trivial': 'Triviální',
+  'fabric.linking.priority_undefined': 'Nedefinováno',
+  'fabric.linking.request_access': 'Chcete-li si zobrazit tento požadavek, požádejte o přístup ke službě {context}.',
+  'fabric.linking.request_denied': 'Vaše žádost o přístup byla odmítnuta.',
+  'fabric.linking.updated_by': 'Upravil(a) {context}'
+};

package/dist/es2019/i18n/da.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//Danish (Denmark)
+export default {
+  'fabric.linking.cannot_connect': 'Kan ikke oprette forbindelse. Prøv igen.',
+  'fabric.linking.cannot_find_link': 'Kan ikke finde linket',
+  'fabric.linking.click_to_join': 'Deltag i {context} for at se denne sag',
+  'fabric.linking.connect_link_account': 'Forbind til forhåndsvisning',
+  'fabric.linking.create_on': 'Oprettet {context}',
+  'fabric.linking.created_by': 'Oprettet af {context}',
+  'fabric.linking.delete': 'Slet',
+  'fabric.linking.edit': 'Rediger',
+  'fabric.linking.forbidden_access': 'Du har ikke adgang',
+  'fabric.linking.invalid_permissions': 'Begrænset link. Prøv en anden konto',
+  'fabric.linking.modified_on': 'Opdateret {context}',
+  'fabric.linking.pending_request': 'Din anmodning om adgang afventer behandling',
+  'fabric.linking.priority_blocker': 'Blokering',
+  'fabric.linking.priority_critical': 'Kritisk',
+  'fabric.linking.priority_high': 'Høj',
+  'fabric.linking.priority_highest': 'Højeste',
+  'fabric.linking.priority_low': 'Lav',
+  'fabric.linking.priority_lowest': 'Laveste',
+  'fabric.linking.priority_major': 'Væsentlig',
+  'fabric.linking.priority_medium': 'Middel',
+  'fabric.linking.priority_minor': 'Mindre',
+  'fabric.linking.priority_trivial': 'Triviel',
+  'fabric.linking.priority_undefined': 'Ikke defineret',
+  'fabric.linking.request_access': 'Anmod om adgang til {context} for at se denne sag',
+  'fabric.linking.request_denied': 'Din anmodning om adgang blev afvist',
+  'fabric.linking.updated_by': 'Ændret af {context}'
+};

package/dist/es2019/i18n/de.js

@@ -0,0 +1,35 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by Traduki 2.0.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+//German (Germany)
+export default {
+  'fabric.linking.cannot_connect': 'Verbindung nicht möglich, versuchen Sie es erneut',
+  'fabric.linking.cannot_find_link': 'Link konnte nicht gefunden werden',
+  'fabric.linking.click_to_join': '{context} beitreten, um diesen Vorgang anzuzeigen',
+  'fabric.linking.connect_link_account': 'Verknüpfen und Vorschau ansehen',
+  'fabric.linking.create_on': 'Erstellt am {context}',
+  'fabric.linking.created_by': 'Erstellt von {context}',
+  'fabric.linking.delete': 'Löschen',
+  'fabric.linking.edit': 'Bearbeiten',
+  'fabric.linking.forbidden_access': 'Sie sind nicht zugriffsberechtigt',
+  'fabric.linking.invalid_permissions': 'Eingeschränkter Link, bitte versuchen Sie es mit einem anderen Konto.',
+  'fabric.linking.modified_on': 'Aktualisiert am {context}',
+  'fabric.linking.pending_request': 'Ihre Zugriffsanfrage ist ausstehend.',
+  'fabric.linking.priority_blocker': 'Blocker',
+  'fabric.linking.priority_critical': 'Kritisch',
+  'fabric.linking.priority_high': 'Hoch',
+  'fabric.linking.priority_highest': 'Höchste',
+  'fabric.linking.priority_low': 'Niedrig',
+  'fabric.linking.priority_lowest': 'Niedrigste',
+  'fabric.linking.priority_major': 'Sehr hoch',
+  'fabric.linking.priority_medium': 'Mittel',
+  'fabric.linking.priority_minor': 'Gering',
+  'fabric.linking.priority_trivial': 'Unwesentlich',
+  'fabric.linking.priority_undefined': 'Nicht definiert',
+  'fabric.linking.request_access': 'Zugriff auf {context} anfordern, um diesen Vorgang anzuzeigen',
+  'fabric.linking.request_denied': 'Ihre Zugriffsanfrage wurde abgelehnt.',
+  'fabric.linking.updated_by': 'Geändert von {context}'
+};