@atlaskit/smart-card 17.1.0 → 17.3.1

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -67,15 +67,6 @@ const getContextKey = name => {
   return name.length > 0 ? name.charAt(0).toLowerCase() + name.slice(1) : undefined;
 };
 
-const getFormattedMessage = (descriptor, value) => value ? {
-  message: {
-    descriptor,
-    values: {
-      context: value
-    }
-  }
-} : undefined;
-
 const getData = (elementName, contextKey, context) => {
   if (!context) {
     return undefined;
@@ -84,52 +75,72 @@ const getData = (elementName, contextKey, context) => {
   const data = context[contextKey];
 
   switch (elementName) {
+    case ElementName.AuthorGroup:
+    case ElementName.CollaboratorGroup:
+      return toAvatarGroupProps(data);
+
     case ElementName.CommentCount:
     case ElementName.ProgrammingLanguage:
     case ElementName.SubscriberCount:
-      return {
-        label: data
-      };
-
-    case ElementName.AuthorGroup:
-      return {
-        items: context.authorGroup
-      };
-
-    case ElementName.CollaboratorGroup:
-      return {
-        items: context.collaboratorGroup
-      };
+      return toBadgeProps(data);
 
     case ElementName.CreatedBy:
-      return getFormattedMessage(messages.created_by, context.createdBy);
+      return toFormattedTextProps(messages.created_by, context.createdBy);
+
+    case ElementName.CreatedOn:
+      return toDateTimeProps('created', context.createdOn);
 
     case ElementName.ModifiedBy:
-      return getFormattedMessage(messages.modified_by, context.modifiedBy);
+      return toFormattedTextProps(messages.modified_by, context.modifiedBy);
 
     case ElementName.ModifiedOn:
-      return context.modifiedOn ? {
-        date: new Date(context.modifiedOn),
-        type: 'modified'
-      } : undefined;
-
-    case ElementName.CreatedOn:
-      return context.createdOn ? {
-        date: new Date(context.createdOn),
-        type: 'created'
-      } : undefined;
+      return toDateTimeProps('modified', context.modifiedOn);
 
     case ElementName.Title:
-      return {
-        text: context.title,
-        url: context.url
-      };
+      return toLinkProps(context.title, context.url);
 
     default:
       return data;
   }
 };
 
+const toAvatarGroupProps = items => {
+  return items ? {
+    items
+  } : undefined;
+};
+
+const toBadgeProps = label => {
+  return label ? {
+    label
+  } : undefined;
+};
+
+const toDateTimeProps = (type, dateString) => {
+  return dateString ? {
+    date: new Date(dateString),
+    type
+  } : undefined;
+};
+
+const toFormattedTextProps = (descriptor, context) => {
+  return context ? {
+    message: {
+      descriptor,
+      values: {
+        context
+      }
+    }
+  } : undefined;
+};
+
+const toLinkProps = (text, url) => {
+  return text ? {
+    text,
+    url
+  } : undefined;
+};
+
 export const createElement = name => {
   const {
     component: BaseElement,

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

@@ -82,7 +82,6 @@ export const getLinkSizeStyles = size => {
 };
 export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
     display: -webkit-box;
-    flex: 1 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;

package/dist/esm/index.js

@@ -13,4 +13,4 @@ export { contentFooterClassName, metadataListClassName, blockCardResolvingViewCl
 export { loadingPlaceholderClassName } from './view/CardWithUrl/component-lazy/LazyFallback'; // Flexible UI
 
 export { ActionName, ElementName, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkTheme } from './constants';
-export { TitleBlock } from './view/FlexibleCard/components/blocks';
+export { MetadataBlock, TitleBlock } from './view/FlexibleCard/components/blocks';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "17.1.0",
+	"version": "17.3.1",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -0,0 +1,82 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { SmartLinkSize } from '../../../../../constants';
+import Tooltip from '@atlaskit/tooltip';
+import { getIconSizeStyles } from '../../utils';
+import { tokens } from '../../../../../utils/token';
+import { handleOnClick } from '../../../../../utils';
+
+var getWidth = function getWidth(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return '1.5rem';
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return '1rem';
+  }
+};
+
+var getIconStyles = function getIconStyles(size) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  ", ";\n"])), tokens.actionIcon, getIconSizeStyles(getWidth(size)));
+};
+
+var ActionIcon = function ActionIcon(_ref) {
+  var size = _ref.size,
+      testId = _ref.testId,
+      icon = _ref.icon;
+  return jsx("span", {
+    css: getIconStyles(size),
+    "data-testid": "".concat(testId, "-icon")
+  }, icon);
+};
+
+var Action = function Action(_ref2) {
+  var _ref2$appearance = _ref2.appearance,
+      appearance = _ref2$appearance === void 0 ? 'subtle' : _ref2$appearance,
+      content = _ref2.content,
+      onClick = _ref2.onClick,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? SmartLinkSize.Medium : _ref2$size,
+      _ref2$testId = _ref2.testId,
+      testId = _ref2$testId === void 0 ? 'smart-action' : _ref2$testId,
+      icon = _ref2.icon,
+      _ref2$iconPosition = _ref2.iconPosition,
+      iconPosition = _ref2$iconPosition === void 0 ? 'before' : _ref2$iconPosition,
+      tooltipMessage = _ref2.tooltipMessage;
+
+  if (!onClick) {
+    return null;
+  }
+
+  var iconBefore = iconPosition === 'before' ? jsx(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  var iconAfter = iconPosition === 'after' ? jsx(ActionIcon, {
+    size: size,
+    testId: testId,
+    icon: icon
+  }) : undefined;
+  return jsx(Tooltip, {
+    content: tooltipMessage
+  }, jsx(Button, {
+    spacing: "none",
+    appearance: appearance,
+    testId: testId,
+    onClick: handleOnClick(onClick),
+    iconBefore: iconBefore,
+    iconAfter: iconAfter
+  }, content));
+};
+
+export default Action;

package/dist/esm/view/FlexibleCard/components/actions/action/types.js

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

package/dist/esm/view/FlexibleCard/components/actions/index.js

@@ -1,6 +1,8 @@
 import { ActionName } from '../../../../constants';
-import { createAction } from './utils';
-// Attention: Keep the export name and action name the same.
+import { createUIAction } from './utils'; // Attention: Keep the export name and action name the same.
 // This will help reducing the code for mapping action inside
 // createAction and renderActionItems
-export var DeleteAction = createAction(ActionName.DeleteAction);
+// UIActions infer that you do not need to get any data from the context.
+// DataActions infer that the action depends on the data from the context.
+
+export var DeleteAction = createUIAction(ActionName.DeleteAction);

package/dist/esm/view/FlexibleCard/components/actions/utils.js

@@ -3,10 +3,20 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { ActionName } from '../../../../constants';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import React, { useContext } from 'react';
-import DeleteAction from './delete-action';
+import Action from './action';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '../../../../messages';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
 
 var actionMappings = _defineProperty({}, ActionName.DeleteAction, {
-  component: DeleteAction
+  component: Action,
+  props: {
+    testId: 'smart-action-delete-action',
+    icon: /*#__PURE__*/React.createElement(CrossIcon, {
+      label: "Delete"
+    }),
+    toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
+  }
 });
 
 var getContextKey = function getContextKey(name) {
@@ -23,13 +33,12 @@ var getActionData = function getActionData(actionName, contextKey, context) {
   var data = context[contextKey];
 
   switch (actionName) {
-    case ActionName.DeleteAction:
     default:
       return data;
   }
 };
 
-export var createAction = function createAction(name) {
+export var createDataAction = function createDataAction(name) {
   var _ref = actionMappings[name] || {},
       BaseAction = _ref.component,
       props = _ref.props;
@@ -45,4 +54,17 @@ export var createAction = function createAction(name) {
     var data = getActionData(name, contextKey, context);
     return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, data, overrides));
   };
+};
+export var createUIAction = function createUIAction(name) {
+  var _ref2 = actionMappings[name] || {},
+      BaseAction = _ref2.component,
+      props = _ref2.props;
+
+  if (!BaseAction) {
+    throw Error("Action ".concat(name, " does not exist."));
+  }
+
+  return function (overrides) {
+    return /*#__PURE__*/React.createElement(BaseAction, _extends({}, props, overrides));
+  };
 };

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -7,7 +7,7 @@ import { css, jsx } from '@emotion/core';
 import ButtonGroup from '@atlaskit/button/button-group';
 import { renderActionItems } from '../utils';
 import { SmartLinkSize } from '../../../../../constants';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 0;\n"])));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: 1rem;\n"])));
 
 var ActionGroup = function ActionGroup(_ref) {
   var _ref$items = _ref.items,

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import React from 'react';
@@ -8,25 +8,26 @@ import { css, jsx } from '@emotion/core';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, renderChildren } from '../utils';
 
-var getFlexJustifyContent = function getFlexJustifyContent(align) {
+var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return 'flex-end';
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        justify-content: flex-end;\n        text-align: right;\n      "])));
 
     case SmartLinkAlignment.Left:
     default:
-      return 'flex-start';
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        justify-content: flex-start;\n        text-align: left;\n      "])));
   }
 };
 
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: ", ";\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getFlexJustifyContent(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '');
 };
 
 var ElementGroup = function ElementGroup(_ref) {
   var _ref$align = _ref.align,
       align = _ref$align === void 0 ? SmartLinkAlignment.Left : _ref$align,
       children = _ref.children,
+      css = _ref.css,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
       _ref$size = _ref.size,
@@ -36,7 +37,7 @@ var ElementGroup = function ElementGroup(_ref) {
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? SmartLinkWidth.FitToContent : _ref$width;
   return jsx("div", {
-    css: getElementGroupStyles(direction, size, align, width),
+    css: [getElementGroupStyles(direction, size, align, width), css],
     "data-smart-element-group": true,
     "data-testid": testId
   }, renderChildren(children, size));

package/dist/esm/view/FlexibleCard/components/blocks/index.js

@@ -1 +1,2 @@
-export { default as TitleBlock } from './title-block';
+export { default as TitleBlock } from './title-block';
+export { default as MetadataBlock } from './metadata-block';

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
+
+var _templateObject;
+
+import React from 'react';
+import { css } from '@emotion/core';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
+import { getGapSize, renderElementItems } from '../utils';
+import Block from '../block';
+import ElementGroup from '../element-group';
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+
+var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
+  // MetadataBlock allows metadata elements to be displayed in
+  // multiple lines, with maximum of 2 lines.
+  // a) We need the height of the line to be equal on both left and right
+  //    sides so they line up nicely.
+  // b) There is no way to truncate non-text elements nicely. Here
+  //    it's fix max height of the element group so that anything that is
+  //    overflown will not be visible.
+  var lineHeight = getLineHeight(size);
+  var gap = getGapSize(size);
+  var gapHeight = gap * (maxLines - 1);
+  var height = lineHeight * maxLines + gapHeight;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-wrap: wrap;\n    line-height: ", "rem;\n    max-height: ", "rem;\n    > span,\n    > div {\n      min-height: ", "rem;\n      max-height: ", "rem;\n      line-height: ", "rem;\n    }\n  "])), lineHeight, height, lineHeight, lineHeight, lineHeight);
+};
+
+var getLineHeight = function getLineHeight(size) {
+  // The maximum height of all elements in specific size.
+  // These heights belongs to AvatarGroup.
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      return 1.75;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return 1.5;
+  }
+};
+
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+
+  return maxLines;
+};
+
+var MetadataBlock = function MetadataBlock(_ref) {
+  var _ref$maxLines = _ref.maxLines,
+      maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? SmartLinkStatus.Fallback : _ref$status,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-block-metadata' : _ref$testId,
+      _ref$primary = _ref.primary,
+      primary = _ref$primary === void 0 ? [] : _ref$primary,
+      _ref$secondary = _ref.secondary,
+      secondary = _ref$secondary === void 0 ? [] : _ref$secondary,
+      blockProps = _objectWithoutProperties(_ref, _excluded);
+
+  if (primary.length === 0 && secondary.length === 0 || status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+
+  var primaryElements = renderElementItems(primary);
+  var secondaryElements = renderElementItems(secondary);
+  var _blockProps$size = blockProps.size,
+      size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var elementGroupStyles = getElementGroupStyles(size, getMaxLines(maxLines));
+  return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
+    testId: "".concat(testId, "-resolved-view")
+  }), primaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Left,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, primaryElements), secondaryElements && /*#__PURE__*/React.createElement(ElementGroup, {
+    align: SmartLinkAlignment.Right,
+    css: elementGroupStyles,
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible
+  }, secondaryElements));
+};
+
+export default MetadataBlock;

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/types.js

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

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -19,7 +19,7 @@ var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLite
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage);
 };
 
 var TitleBlockErroredView = function TitleBlockErroredView(_ref) {

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

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["name"],
@@ -27,31 +27,34 @@ var getDirectionStyles = function getDirectionStyles(direction) {
   }
 };
 
-var getGapSize = function getGapSize(size) {
+export var getGapSize = function getGapSize(size) {
   switch (size) {
     case SmartLinkSize.XLarge:
-      return '1.25rem';
+      return 1.25;
 
     case SmartLinkSize.Large:
-      return '1rem';
+      return 1;
 
     case SmartLinkSize.Medium:
-      return '.5rem';
+      return 0.5;
 
     case SmartLinkSize.Small:
     default:
-      return '.25rem';
+      return 0.25;
   }
 };
-
 export var getBaseStyles = function getBaseStyles(direction, size) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: ", ";\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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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));
 };
 
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 };
 
+var isElementNull = function isElementNull(children) {
+  return Boolean(children.type() === null);
+};
+
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
 };
@@ -78,9 +81,13 @@ export var renderElementItems = function renderElementItems() {
     var Element = Elements[name];
 
     if (Element) {
-      return [].concat(_toConsumableArray(acc), [/*#__PURE__*/React.createElement(Element, _extends({
+      var element = /*#__PURE__*/React.createElement(Element, _extends({
         key: idx
-      }, props))]);
+      }, props));
+
+      if (!isElementNull(element)) {
+        return [].concat(_toConsumableArray(acc), [element]);
+      }
     }
 
     return acc;

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

@@ -1,8 +1,28 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/core';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;
 
+var getStyles = function getStyles(size) {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+    case SmartLinkSize.Large:
+      // Default AK small size
+      return;
+
+    case SmartLinkSize.Medium:
+    case SmartLinkSize.Small:
+    default:
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])));
+  }
+};
+
 var AvatarGroup = function AvatarGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -17,13 +37,15 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(AtlaskitAvatarGroup, {
+  return jsx("span", {
+    css: getStyles(size)
+  }, jsx(AtlaskitAvatarGroup, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",
     data: items,
     testId: testId
-  });
+  }));
 };
 
 export default AvatarGroup;

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

@@ -27,7 +27,7 @@ var getThemeStyles = function getThemeStyles(theme) {
 
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size)), getThemeStyles(theme));
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size)), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {