@toptal/picasso 17.3.3 → 17.4.0

package/ShowMore/ShowMore.d.ts

@@ -13,7 +13,7 @@ export interface Props extends BaseProps {
     initialExpanded?: boolean;
     /** Define whether action link should be displayed or not */
     disableToggle?: boolean;
-    /** Callback tiggered when show more/less is clicked */
+    /** Callback triggered when show more/less is clicked */
     onToggle?: () => void;
 }
 export declare const ShowMore: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>>;

package/ShowMore/ShowMore.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { makeStyles } from '@material-ui/core/styles';
 import Truncate from 'react-truncate';
@@ -17,14 +17,16 @@ import ChevronRightIcon16 from '../Icon/ChevronRight16';
 import Typography from '../Typography';
 import styles from './styles';
 import Button from '../Button';
+import { replaceLineBreaksWithTags } from './utils';
 const useStyles = makeStyles(styles, { name: 'PicassoShowMore' });
 export const ShowMore = forwardRef(function ShowMore(props, ref) {
     const { children, rows = 4, initialExpanded = false, disableToggle = false, moreText = 'Show more', lessText = 'Show less', onToggle = () => { }, className, style } = props, rest = __rest(props, ["children", "rows", "initialExpanded", "disableToggle", "moreText", "lessText", "onToggle", "className", "style"]);
     const classes = useStyles();
     const [shownMore, setShownMore] = useState(initialExpanded);
+    const text = useMemo(() => replaceLineBreaksWithTags(children), [children]);
     return (React.createElement(React.Fragment, null,
         React.createElement(Typography, Object.assign({}, rest, { ref: ref, size: 'medium', color: 'dark-grey', className: className, style: style }),
-            React.createElement(Truncate, { lines: !shownMore && rows }, children)),
+            React.createElement(Truncate, { lines: !shownMore && rows }, text)),
         !disableToggle && (React.createElement(Button.Action, { onClick: () => {
                 setShownMore(!shownMore);
                 onToggle();

package/ShowMore/ShowMore.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShowMore.js","sourceRoot":"","sources":["../../src/ShowMore/ShowMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAGrC,OAAO,kBAAkB,MAAM,wBAAwB,CAAA;AACvD,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,MAAM,MAAM,WAAW,CAAA;AAmB9B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAyB,SAAS,QAAQ,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,IAAI,GAAG,CAAC,EACR,eAAe,GAAG,KAAK,EACvB,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,WAAW,EACtB,QAAQ,GAAG,WAAW,EACtB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,SAAS,EACT,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,kHAWL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAE3D,OAAO,CACL;QACE,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK;YAEZ,oBAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,SAAS,IAAI,IAAI,IAAG,QAAQ,CAAY,CAC/C;QACZ,CAAC,aAAa,IAAI,CACjB,oBAAC,MAAM,CAAC,MAAM,IACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;gBACxB,QAAQ,EAAE,CAAA;YACZ,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,IAAI,EACF,6BAAK,SAAS,EAAE,OAAO,CAAC,WAAW;gBACjC,oBAAC,kBAAkB,IACjB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;wBAC1B,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,SAAS;qBAClC,CAAC,GACF,CACE,EAER,YAAY,EAAC,OAAO,IAEnB,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAClB,CACjB,CACA,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"ShowMore.js","sourceRoot":"","sources":["../../src/ShowMore/ShowMore.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,QAAQ,MAAM,gBAAgB,CAAA;AAGrC,OAAO,kBAAkB,MAAM,wBAAwB,CAAA;AACvD,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,MAAM,MAAM,WAAW,CAAA;AAC9B,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAmBnD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAyB,SAAS,QAAQ,CAC1E,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,QAAQ,EACR,IAAI,GAAG,CAAC,EACR,eAAe,GAAG,KAAK,EACvB,aAAa,GAAG,KAAK,EACrB,QAAQ,GAAG,WAAW,EACtB,QAAQ,GAAG,WAAW,EACtB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,SAAS,EACT,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,kHAWL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAA;IAC3D,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,yBAAyB,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAE3E,OAAO,CACL;QACE,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK;YAEZ,oBAAC,QAAQ,IAAC,KAAK,EAAE,CAAC,SAAS,IAAI,IAAI,IAAG,IAAI,CAAY,CAC3C;QACZ,CAAC,aAAa,IAAI,CACjB,oBAAC,MAAM,CAAC,MAAM,IACZ,OAAO,EAAE,GAAG,EAAE;gBACZ,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;gBACxB,QAAQ,EAAE,CAAA;YACZ,CAAC,EACD,SAAS,EAAE,OAAO,CAAC,UAAU,EAC7B,IAAI,EACF,6BAAK,SAAS,EAAE,OAAO,CAAC,WAAW;gBACjC,oBAAC,kBAAkB,IACjB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;wBAC1B,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,SAAS;qBAClC,CAAC,GACF,CACE,EAER,YAAY,EAAC,OAAO,IAEnB,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAClB,CACjB,CACA,CACJ,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}

package/ShowMore/utils.d.ts

@@ -0,0 +1 @@
+export declare const replaceLineBreaksWithTags: (children: string) => string | (JSX.Element | JSX.Element[])[];

package/ShowMore/utils.js

@@ -0,0 +1,17 @@
+import React from 'react';
+export const replaceLineBreaksWithTags = (children) => {
+    const textChunks = children.split('\n');
+    if (textChunks.length <= 1) {
+        return children;
+    }
+    return textChunks.map((line, index, { length }) => {
+        // eslint-disable-next-line react/no-array-index-key
+        const newLine = React.createElement("span", { key: index + 'span' }, line);
+        if (index === length - 1) {
+            return newLine;
+        }
+        // eslint-disable-next-line react/no-array-index-key
+        return [newLine, React.createElement("br", { key: index + 'br' })];
+    });
+};
+//# sourceMappingURL=utils.js.map

package/ShowMore/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/ShowMore/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,QAAgB,EAC0B,EAAE;IAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;IAEvC,IAAI,UAAU,CAAC,MAAM,IAAI,CAAC,EAAE;QAC1B,OAAO,QAAQ,CAAA;KAChB;IAED,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;QAChD,oDAAoD;QACpD,MAAM,OAAO,GAAG,8BAAM,GAAG,EAAE,KAAK,GAAG,MAAM,IAAG,IAAI,CAAQ,CAAA;QAExD,IAAI,KAAK,KAAK,MAAM,GAAG,CAAC,EAAE;YACxB,OAAO,OAAO,CAAA;SACf;QAED,oDAAoD;QACpD,OAAO,CAAC,OAAO,EAAE,4BAAI,GAAG,EAAE,KAAK,GAAG,IAAI,GAAI,CAAC,CAAA;IAC7C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "17.3.3",
+  "version": "17.4.0",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",