@toptal/picasso 26.4.0 → 26.5.0

package/StepLabel/StepLabel.d.ts

@@ -5,6 +5,7 @@ export interface Props extends BaseProps, TextLabelProps, HTMLAttributes<HTMLDiv
     children: string;
     active?: boolean;
     completed?: boolean;
+    overflowEllipsis?: boolean;
 }
 export declare const StepLabel: {
     (props: Props): JSX.Element;

package/StepLabel/StepLabel.js

@@ -17,18 +17,24 @@ import { useTitleCase } from '@toptal/picasso-shared';
 import StepIcon from '../StepIcon';
 import styles from './styles';
 import toTitleCase from '../utils/to-title-case';
+import TypographyOverflow from '../TypographyOverflow';
 const useStyles = makeStyles(styles, { name: 'PicassoStepLabel' });
 export const StepLabel = (props) => {
-    const { active, className, children, completed, hideLabel, style, titleCase: propsTitleCase } = props, rest = __rest(props, ["active", "className", "children", "completed", "hideLabel", "style", "titleCase"]);
+    const { active, className, children, completed, hideLabel, overflowEllipsis, style, titleCase: propsTitleCase } = props, rest = __rest(props, ["active", "className", "children", "completed", "hideLabel", "overflowEllipsis", "style", "titleCase"]);
     const titleCase = useTitleCase(propsTitleCase);
     const classes = useStyles();
+    const withOverflowEllipsis = !hideLabel && overflowEllipsis;
+    const labelElement = (React.createElement("span", { className: classes.label }, titleCase ? toTitleCase(children) : children));
     return (React.createElement(MUIStepLabel, Object.assign({}, rest, { classes: {
             labelContainer: cx({
                 [classes.root]: !hideLabel || active,
+                [classes.labelContainerOverflowEllipsis]: withOverflowEllipsis,
             }),
-            label: cx({ [classes.hidden]: hideLabel && !active }),
-        }, className: className, icon: React.createElement(StepIcon, { active: active, completed: completed }), style: style }),
-        React.createElement("span", { className: classes.label }, titleCase ? toTitleCase(children) : children)));
+            label: cx({
+                [classes.hidden]: hideLabel && !active,
+                [classes.labelOverflowEllipsis]: withOverflowEllipsis,
+            }),
+        }, className: className, icon: React.createElement(StepIcon, { active: active, completed: completed }), style: style }), withOverflowEllipsis ? (React.createElement(TypographyOverflow, null, labelElement)) : (labelElement)));
 };
 StepLabel.defaultProps = {
     hideLabel: false,

package/StepLabel/StepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLabel.js","sourceRoot":"","sources":["../../src/StepLabel/StepLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAYhD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,KAAK,EACL,SAAS,EAAE,cAAc,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EATH,mFASL,CAAQ,CAAA;IACT,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,YAAY,oBACP,IAAI,IACR,OAAO,EAAE;YACP,cAAc,EAAE,EAAE,CAAC;gBACjB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,MAAM;aACrC,CAAC;YACF,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC;SACtD,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,oBAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,EACxD,KAAK,EAAE,KAAK;QAEZ,8BAAM,SAAS,EAAE,OAAO,CAAC,KAAK,IAC3B,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CACxC,CACM,CAChB,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,KAAK;CACjB,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}
+{"version":3,"file":"StepLabel.js","sourceRoot":"","sources":["../../src/StepLabel/StepLabel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAyB,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,YAAY,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAA6B,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,WAAW,MAAM,wBAAwB,CAAA;AAChD,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AAatD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,kBAAkB,EAAE,CAAC,CAAA;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAY,EAAE,EAAE;IACxC,MAAM,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,SAAS,EAAE,cAAc,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,uGAUL,CAAQ,CAAA;IACT,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,CAAC,CAAA;IAC9C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,oBAAoB,GAAG,CAAC,SAAS,IAAI,gBAAgB,CAAA;IAC3D,MAAM,YAAY,GAAG,CACnB,8BAAM,SAAS,EAAE,OAAO,CAAC,KAAK,IAC3B,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CACxC,CACR,CAAA;IAED,OAAO,CACL,oBAAC,YAAY,oBACP,IAAI,IACR,OAAO,EAAE;YACP,cAAc,EAAE,EAAE,CAAC;gBACjB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,MAAM;gBACpC,CAAC,OAAO,CAAC,8BAA8B,CAAC,EAAE,oBAAoB;aAC/D,CAAC;YACF,KAAK,EAAE,EAAE,CAAC;gBACR,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,SAAS,IAAI,CAAC,MAAM;gBACtC,CAAC,OAAO,CAAC,qBAAqB,CAAC,EAAE,oBAAoB;aACtD,CAAC;SACH,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,oBAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,GAAI,EACxD,KAAK,EAAE,KAAK,KAEX,oBAAoB,CAAC,CAAC,CAAC,CACtB,oBAAC,kBAAkB,QAAE,YAAY,CAAsB,CACxD,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACY,CAChB,CAAA;AACH,CAAC,CAAA;AAED,SAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,KAAK;CACjB,CAAA;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,eAAe,SAAS,CAAA"}

package/StepLabel/styles.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, breakpoints: { down } }: Theme) => import("@material-ui/styles").StyleRules<{}, "hidden" | "label" | "root">;
+declare const _default: ({ palette, breakpoints: { down } }: Theme) => import("@material-ui/styles").StyleRules<{}, "hidden" | "label" | "root" | "labelContainerOverflowEllipsis" | "labelOverflowEllipsis">;
 export default _default;

package/StepLabel/styles.js

@@ -18,6 +18,12 @@ export default ({ palette, breakpoints: { down } }) => createStyles({
     hidden: {
         display: 'none',
     },
+    labelContainerOverflowEllipsis: {
+        display: 'grid',
+    },
+    labelOverflowEllipsis: {
+        overflow: 'hidden',
+    },
     root: {
         marginLeft: '0.5em',
     },

package/StepLabel/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/StepLabel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EACL,eAAe,EACf,eAAe,IAAI,WAAW,GAC/B,MAAM,0BAA0B,CAAA;AAEjC,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,YAAY,EAAE;QACZ,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YAEf,UAAU,EAAE;gBACV,OAAO,EAAE,MAAM;aAChB;SACF;QACD,aAAa,EAAE;YACb,YAAY,EAAE,CAAC;SAChB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,EAAS,EAAE,EAAE,CAC3D,YAAY,CAAC;IACX,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;KAChB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;KACpB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE;YACzB,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/StepLabel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EACL,eAAe,EACf,eAAe,IAAI,WAAW,GAC/B,MAAM,0BAA0B,CAAA;AAEjC,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,YAAY,EAAE;QACZ,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YAEf,UAAU,EAAE;gBACV,OAAO,EAAE,MAAM;aAChB;SACF;QACD,aAAa,EAAE;YACb,YAAY,EAAE,CAAC;SAChB;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,IAAI,EAAE,EAAS,EAAE,EAAE,CAC3D,YAAY,CAAC;IACX,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;KAChB;IACD,8BAA8B,EAAE;QAC9B,OAAO,EAAE,MAAM;KAChB;IACD,qBAAqB,EAAE;QACrB,QAAQ,EAAE,QAAQ;KACnB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,OAAO;KACpB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,UAAU,EAAE,GAAG;QACf,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE;YACzB,OAAO,EAAE,MAAM;SAChB;KACF;CACF,CAAC,CAAA"}

package/Stepper/Stepper.d.ts

@@ -6,6 +6,8 @@ export interface StepperBaseProps extends BaseProps, TextLabelProps, HTMLAttribu
     active?: number;
     /** Array of the step labels */
     steps: string[];
+    /** Enable overflow ellipsis for labels */
+    overflowEllipsis?: boolean;
 }
 export interface Props extends StepperBaseProps {
     /** Hide labels of non active steps */

package/Stepper/Stepper.js

@@ -20,15 +20,16 @@ import StepConnector from '../StepConnector';
 import styles from './styles';
 const useStyles = makeStyles(styles, { name: 'PicassoStepper' });
 const Stepper = forwardRef((props, ref) => {
-    const { active = 0, steps = [], hideLabels = false, className, style, titleCase, direction = 'horizontal' } = props, rest = __rest(props, ["active", "steps", "hideLabels", "className", "style", "titleCase", "direction"]);
+    const { active = 0, steps = [], hideLabels = false, className, style, titleCase, direction = 'horizontal', overflowEllipsis = false } = props, rest = __rest(props, ["active", "steps", "hideLabels", "className", "style", "titleCase", "direction", "overflowEllipsis"]);
     const classes = useStyles();
     return (React.createElement(MUIStepper, Object.assign({}, rest, { ref: ref, activeStep: active, connector: React.createElement(StepConnector, { direction: direction }), className: cx(classes.root, className), style: style, orientation: direction }), steps.map((label, stepIndex) => (React.createElement(Step, { key: label },
-        React.createElement(StepLabel, { active: stepIndex === active, hideLabel: hideLabels, titleCase: titleCase }, label))))));
+        React.createElement(StepLabel, { active: stepIndex === active, hideLabel: hideLabels, titleCase: titleCase, overflowEllipsis: overflowEllipsis }, label))))));
 });
 Stepper.defaultProps = {
     active: 0,
     hideLabels: false,
     direction: 'horizontal',
+    overflowEllipsis: false,
     steps: [],
 };
 Stepper.displayName = 'Stepper';

package/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAGlD,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,aAAa,CAAA;AACpB,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,MAAM,MAAM,UAAU,CAAA;AAkB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAA;AAEvE,MAAM,OAAO,GAAG,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,EACJ,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,EAAE,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,GAAG,YAAY,KAEtB,KAAK,EADJ,IAAI,UACL,KAAK,EATH,iFASL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,oBAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAI,EAClD,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,SAAS,KAErB,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,IAAI,IAAC,GAAG,EAAE,KAAK;QACd,oBAAC,SAAS,IACR,MAAM,EAAE,SAAS,KAAK,MAAM,EAC5B,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,SAAS,IAEnB,KAAK,CACI,CACP,CACR,CAAC,CACS,CACd,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,EAAE;CACV,CAAA;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAA;AAE/B,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/Stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,UAAU,MAAM,2BAA2B,CAAA;AAGlD,OAAO,IAAI,MAAM,SAAS,CAAA;AAC1B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,aAAa,CAAA;AACpB,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAC5C,OAAO,MAAM,MAAM,UAAU,CAAA;AAoB7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,CAAA;AAEvE,MAAM,OAAO,GAAG,UAAU,CAAwB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,EACJ,MAAM,GAAG,CAAC,EACV,KAAK,GAAG,EAAE,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,SAAS,EACT,SAAS,GAAG,YAAY,EACxB,gBAAgB,GAAG,KAAK,KAEtB,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,qGAUL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,oBAAC,aAAa,IAAC,SAAS,EAAE,SAAS,GAAI,EAClD,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,SAAS,KAErB,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,CAAC,CAC/B,oBAAC,IAAI,IAAC,GAAG,EAAE,KAAK;QACd,oBAAC,SAAS,IACR,MAAM,EAAE,SAAS,KAAK,MAAM,EAC5B,SAAS,EAAE,UAAU,EACrB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,IAEjC,KAAK,CACI,CACP,CACR,CAAC,CACS,CACd,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,CAAC,YAAY,GAAG;IACrB,MAAM,EAAE,CAAC;IACT,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,YAAY;IACvB,gBAAgB,EAAE,KAAK;IACvB,KAAK,EAAE,EAAE;CACV,CAAA;AAED,OAAO,CAAC,WAAW,GAAG,SAAS,CAAA;AAE/B,eAAe,OAAO,CAAA"}

package/package.json

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