@atlaskit/smart-card 18.0.19 → 18.0.20

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 18.0.20
+
+### Patch Changes
+
+- [`451f99db28a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/451f99db28a) - Flexible UI: Improve link title truncate to support url string
+
 ## 18.0.19
 
 ### Patch Changes

package/dist/cjs/version.json

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

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.getIconWidth = 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"));
 
@@ -111,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;
+exports.getTruncateStyles = getTruncateStyles;
+
+var hasWhiteSpace = function hasWhiteSpace(str) {
+  return str.search(/\s/) >= 0;
+};
+
+exports.hasWhiteSpace = hasWhiteSpace;

package/dist/es2019/version.json

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

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

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../utils';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
@@ -42,12 +42,12 @@ const getThemeStyles = theme => {
   }
 };
 
-const getAnchorStyles = (size, theme, maxLines) => {
+const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css`
     flex: 1 1 auto;
     ${sizeStyles}
-    ${getTruncateStyles(maxLines, getLinkLineHeight(size))}
+    ${getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all')}
     // Theme should be last to be spread because it contains override values
     ${getThemeStyles(theme)}
   `;
@@ -82,19 +82,22 @@ const Link = ({
   url,
   onClick,
   target
-}) => jsx("span", {
-  css: containerStyles
-}, jsx(Tooltip, {
-  content: text,
-  testId: `${testId}-tooltip`,
-  tag: "span"
-}, jsx("a", {
-  css: [getAnchorStyles(size, theme, getMaxLines(maxLines)), overrideCss],
-  "data-smart-element-link": true,
-  "data-testid": testId,
-  onClick: onClick,
-  href: url,
-  target: target || '_blank'
-}, text)));
+}) => {
+  const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
+  return jsx("span", {
+    css: containerStyles
+  }, jsx(Tooltip, {
+    content: text,
+    testId: `${testId}-tooltip`,
+    tag: "span"
+  }, jsx("a", {
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
+    "data-smart-element-link": true,
+    "data-testid": testId,
+    onClick: onClick,
+    href: url,
+    target: target || '_blank'
+  }, text)));
+};
 
 export default Link;

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

@@ -107,13 +107,16 @@ export const getMaxLines = (value, defaultValue, max, min) => {
 
   return value;
 };
-export const getTruncateStyles = (maxLines, lineHeight = '1rem') => css`
+export const getTruncateStyles = (maxLines, lineHeight = '1rem', wordBreak = 'break-word') => css`
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-word;
+    word-break: ${wordBreak};
     -webkit-line-clamp: ${maxLines};
     -webkit-box-orient: vertical;
     // Fallback options
     max-height: calc(${maxLines} * ${lineHeight});
-  `;
+  `;
+export const hasWhiteSpace = str => {
+  return str.search(/\s/) >= 0;
+};

package/dist/esm/version.json

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

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

@@ -3,11 +3,11 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../utils';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
@@ -26,9 +26,9 @@ var getThemeStyles = function getThemeStyles(theme) {
   }
 };
 
-var getAnchorStyles = function getAnchorStyles(size, theme, maxLines) {
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = getLinkSizeStyles(size);
-  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));
+  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), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {
@@ -64,6 +64,9 @@ var Link = function Link(_ref) {
       url = _ref.url,
       onClick = _ref.onClick,
       target = _ref.target;
+  var hasSpace = useMemo(function () {
+    return text ? hasWhiteSpace(text) : false;
+  }, [text]);
   return jsx("span", {
     css: containerStyles
   }, jsx(Tooltip, {
@@ -71,7 +74,7 @@ var Link = function Link(_ref) {
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, 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/esm/view/FlexibleCard/components/utils.js

@@ -80,5 +80,9 @@ export var getMaxLines = function getMaxLines(value, defaultValue, max, min) {
 };
 export var getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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 css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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);
+};
+export var hasWhiteSpace = function hasWhiteSpace(str) {
+  return str.search(/\s/) >= 0;
 };

package/dist/types/view/FlexibleCard/components/utils.d.ts

@@ -8,4 +8,5 @@ export declare const getIconWidth: (size?: SmartLinkSize | undefined) => string;
 export declare const getLinkLineHeight: (size: SmartLinkSize) => string;
 export declare const getLinkSizeStyles: (size: SmartLinkSize) => SerializedStyles;
 export declare const getMaxLines: (value: number, defaultValue: number, max: number, min: number) => number;
-export declare const getTruncateStyles: (maxLines: number, lineHeight?: string) => SerializedStyles;
+export declare const getTruncateStyles: (maxLines: number, lineHeight?: string, wordBreak?: 'break-word' | 'break-all') => SerializedStyles;
+export declare const hasWhiteSpace: (str: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "18.0.19",
+  "version": "18.0.20",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"