@atlaskit/primitives 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/primitives
 
+## 1.19.0
+
+### Minor Changes
+
+- [#66702](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66702) [`5b6bbaf2d5fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5b6bbaf2d5fc) - Added `maxLines` prop to `Text` component, allowing truncation at a certain number of lines. This prop replaces `shouldTruncate` prop.
+
+### Patch Changes
+
+- [#67698](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67698) [`175c07b58c52`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/175c07b58c52) - Export tokensMap object
+
 ## 1.18.0
 
 ### Minor Changes

package/dist/cjs/components/text.js

@@ -40,11 +40,16 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
-var truncateStyles = (0, _react2.css)({
+var truncationStyles = (0, _react2.css)({
+  display: '-webkit-box',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  WebkitBoxOrient: 'vertical'
 });
+var wordBreakMap = {
+  breakAll: (0, _react2.css)({
+    wordBreak: 'break-all'
+  })
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
@@ -93,14 +98,13 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
+  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
-  // Remove the ability to bypass typescript errors for shouldTruncate
-  var shouldTruncate = false;
-  if ('shouldTruncate' in props && variant.includes('body')) {
-    var _props$shouldTruncate;
-    shouldTruncate = (_props$shouldTruncate = props.shouldTruncate) !== null && _props$shouldTruncate !== void 0 ? _props$shouldTruncate : false;
+  // Remove the ability to bypass typescript errors for maxLines
+  var maxLines;
+  if ('maxLines' in props && variant.includes('body')) {
+    maxLines = props.maxLines;
   }
-  (0, _tinyInvariant.default)(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
 
@@ -112,7 +116,10 @@ var Text = function Text(_ref) {
     return (0, _react2.jsx)(_react.Fragment, null, children);
   }
   var component = (0, _react2.jsx)(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    style: {
+      WebkitLineClamp: maxLines
+    },
     "data-testid": testId,
     id: id
   }, children);

package/dist/cjs/index.js

@@ -64,6 +64,12 @@ Object.defineProperty(exports, "media", {
     return _responsive.media;
   }
 });
+Object.defineProperty(exports, "tokensMap", {
+  enumerable: true,
+  get: function get() {
+    return _xcss.tokensMap;
+  }
+});
 Object.defineProperty(exports, "xcss", {
   enumerable: true,
   get: function get() {

package/dist/cjs/xcss/xcss.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseXcss = void 0;
+exports.tokensMap = exports.parseXcss = void 0;
 exports.xcss = xcss;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -15,7 +15,7 @@ var _styleMaps = require("./style-maps.partial");
 
 // eslint-disable-next-line import/no-extraneous-dependencies
 
-var tokensMap = {
+var tokensMap = exports.tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   blockSize: _styleMaps.dimensionMap,
   borderBlockColor: _styleMaps.borderColorMap,

package/dist/es2019/components/text.js

@@ -32,11 +32,16 @@ const textAlignMap = {
     textAlign: 'start'
   })
 };
-const truncateStyles = css({
+const truncationStyles = css({
+  display: '-webkit-box',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  WebkitBoxOrient: 'vertical'
 });
+const wordBreakMap = {
+  breakAll: css({
+    wordBreak: 'break-all'
+  })
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
@@ -85,14 +90,13 @@ const Text = ({
       Component = 'span';
     }
   }
+  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
 
-  // Remove the ability to bypass typescript errors for shouldTruncate
-  let shouldTruncate = false;
-  if ('shouldTruncate' in props && variant.includes('body')) {
-    var _props$shouldTruncate;
-    shouldTruncate = (_props$shouldTruncate = props.shouldTruncate) !== null && _props$shouldTruncate !== void 0 ? _props$shouldTruncate : false;
+  // Remove the ability to bypass typescript errors for maxLines
+  let maxLines;
+  if ('maxLines' in props && variant.includes('body')) {
+    maxLines = props.maxLines;
   }
-  invariant(asAllowlist.includes(Component), `@atlaskit/primitives: Text received an invalid "as" value of "${Component}"`);
   const color = useColor(colorProp);
   const isWrapped = useHasTextAncestor();
 
@@ -104,7 +108,10 @@ const Text = ({
     return jsx(Fragment, null, children);
   }
   const component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    style: {
+      WebkitLineClamp: maxLines
+    },
     "data-testid": testId,
     id: id
   }, children);

package/dist/es2019/index.js

@@ -1,6 +1,6 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
-export { xcss } from './xcss/xcss';
+export { xcss, tokensMap } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';

package/dist/es2019/xcss/xcss.js

@@ -4,7 +4,7 @@ import { css as cssEmotion } from '@emotion/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
-const tokensMap = {
+export const tokensMap = {
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
   borderBlockColor: borderColorMap,

package/dist/esm/components/text.js

@@ -34,11 +34,16 @@ var textAlignMap = {
     textAlign: 'start'
   })
 };
-var truncateStyles = css({
+var truncationStyles = css({
+  display: '-webkit-box',
   overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
+  WebkitBoxOrient: 'vertical'
 });
+var wordBreakMap = {
+  breakAll: css({
+    wordBreak: 'break-all'
+  })
+};
 
 /**
  * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
@@ -87,14 +92,13 @@ var Text = function Text(_ref) {
       Component = 'span';
     }
   }
+  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
 
-  // Remove the ability to bypass typescript errors for shouldTruncate
-  var shouldTruncate = false;
-  if ('shouldTruncate' in props && variant.includes('body')) {
-    var _props$shouldTruncate;
-    shouldTruncate = (_props$shouldTruncate = props.shouldTruncate) !== null && _props$shouldTruncate !== void 0 ? _props$shouldTruncate : false;
+  // Remove the ability to bypass typescript errors for maxLines
+  var maxLines;
+  if ('maxLines' in props && variant.includes('body')) {
+    maxLines = props.maxLines;
   }
-  invariant(asAllowlist.includes(Component), "@atlaskit/primitives: Text received an invalid \"as\" value of \"".concat(Component, "\""));
   var color = useColor(colorProp);
   var isWrapped = useHasTextAncestor();
 
@@ -106,7 +110,10 @@ var Text = function Text(_ref) {
     return jsx(Fragment, null, children);
   }
   var component = jsx(Component, {
-    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], shouldTruncate && truncateStyles, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    css: [resetStyles, variant && variantStyles[variant], color && textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
+    style: {
+      WebkitLineClamp: maxLines
+    },
     "data-testid": testId,
     id: id
   }, children);

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 export { default as Box } from './components/box';
 export { default as Inline } from './components/inline';
-export { xcss } from './xcss/xcss';
+export { xcss, tokensMap } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
 export { default as Grid } from './components/grid';

package/dist/esm/xcss/xcss.js

@@ -7,7 +7,7 @@ import { css as cssEmotion } from '@emotion/react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
-var tokensMap = {
+export var tokensMap = {
   backgroundColor: backgroundColorMap,
   blockSize: dimensionMap,
   borderBlockColor: borderColorMap,

package/dist/types/components/text.d.ts

@@ -10,18 +10,20 @@ type TextPropsBody = {
      */
     variant?: BodyText;
     /**
-     * Truncates text with an ellipsis when text overflows its parent container
-     * (i.e. `width` has been set on parent that is shorter than text length).
+     * The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
+     *
+     * When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
      *
      * Only available for `body` text variants.
      */
-    shouldTruncate?: boolean;
+    maxLines?: number;
 };
 type TextPropsUi = {
     /**
      * Text variant
      */
     variant: UiText;
+    maxLines?: never;
 };
 type TextPropsBase = {
     /**

package/dist/types/index.d.ts

@@ -3,7 +3,7 @@ export { default as Box } from './components/box';
 export type { BoxProps } from './components/box';
 export { default as Inline } from './components/inline';
 export type { InlineProps } from './components/inline';
-export { xcss } from './xcss/xcss';
+export { xcss, tokensMap } from './xcss/xcss';
 export type { XCSS } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export type { StackProps } from './components/stack';
@@ -16,4 +16,4 @@ export type { BleedProps } from './components/bleed';
 export { default as Text } from './components/text';
 export type { TextProps } from './components/text';
 export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
-export type { Breakpoint } from './responsive';
+export type { Breakpoint, MediaQuery } from './responsive';

package/dist/types/responsive/index.d.ts

@@ -1,7 +1,7 @@
 export { media, UNSAFE_media } from './media-helper';
 export { UNSAFE_buildAboveMediaQueryCSS } from './build-media-query-css';
 export { UNSAFE_BREAKPOINTS_ORDERED_LIST, UNSAFE_BREAKPOINTS_CONFIG, } from './constants';
-export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, } from './types';
+export type { Breakpoint, ResponsiveObject, ResponsiveCSSObject, MediaQuery, } from './types';
 export { UNSAFE_useMediaQuery } from './use-media-query';
 export { Show } from './show';
 export { Hide } from './hide';