@toptal/picasso 17.4.0 → 18.2.0

package/TimelineRow/TimelineRow.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement, ReactNode } from 'react';
+import { BaseProps } from '@toptal/picasso-shared';
+export interface Props extends BaseProps {
+    /** Timeline row content */
+    children: ReactNode;
+    /** Icon for the row between lines */
+    icon?: ReactElement;
+    /** Timeline row date */
+    date?: string;
+    /** Whether to render a connector line after the row */
+    hasConnector?: boolean;
+    testIds?: {
+        dot?: string;
+        connector?: string;
+    };
+}
+declare const TimelineRow: {
+    ({ className, children, icon, date, hasConnector, "data-testid": dataTestId, testIds }: Props): JSX.Element;
+    defaultProps: {
+        hasConnector: boolean;
+    };
+    displayName: string;
+};
+export default TimelineRow;

package/TimelineRow/TimelineRow.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import styles from './styles';
+import Container from '../Container';
+import Typography from '../Typography';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoTimelineRow'
+});
+const TimelineRow = ({ className, children, icon, date, hasConnector, 'data-testid': dataTestId, testIds = {} }) => {
+    const classes = useStyles();
+    return (React.createElement(Container, { "data-testid": dataTestId, className: cx(classes.root, className), flex: true },
+        React.createElement(Container, { flex: true, direction: 'column', alignItems: 'center', right: 'medium' },
+            typeof icon !== 'undefined' ? (React.cloneElement(icon, {
+                className: cx(icon.props.className, classes.icon)
+            })) : (React.createElement("div", { className: classes.dot, "data-testid": testIds.dot })),
+            hasConnector && (React.createElement("div", { className: classes.connector, "data-testid": testIds.connector }))),
+        date && (React.createElement(Container, { className: classes.date, right: 'large' },
+            React.createElement(Typography, { className: classes.dateText, weight: 'semibold', size: 'medium' }, date))),
+        React.createElement(Container, { className: classes.content, bottom: 'large' }, children)));
+};
+TimelineRow.defaultProps = {
+    hasConnector: true
+};
+TimelineRow.displayName = 'TimelineRow';
+export default TimelineRow;
+//# sourceMappingURL=TimelineRow.js.map

package/TimelineRow/TimelineRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimelineRow.js","sourceRoot":"","sources":["../../src/TimelineRow/TimelineRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,EAAS,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,UAAU,MAAM,eAAe,CAAA;AAiBtC,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,oBAAoB;CAC3B,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,CAAC,EACnB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,aAAa,EAAE,UAAU,EACzB,OAAO,GAAG,EAAE,EACN,EAAE,EAAE;IACV,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,oBAAC,SAAS,mBACK,UAAU,EACvB,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,EACtC,IAAI;QAEJ,oBAAC,SAAS,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ;YAClE,OAAO,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,CAC7B,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;gBACvB,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC;aAClD,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,OAAO,CAAC,GAAG,iBAAe,OAAO,CAAC,GAAG,GAAI,CAC1D;YACA,YAAY,IAAI,CACf,6BAAK,SAAS,EAAE,OAAO,CAAC,SAAS,iBAAe,OAAO,CAAC,SAAS,GAAI,CACtE,CACS;QAEX,IAAI,IAAI,CACP,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,EAAC,OAAO;YAC/C,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,QAAQ,EAC3B,MAAM,EAAC,UAAU,EACjB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CACM,CACH,CACb;QAED,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,EAAC,OAAO,IAClD,QAAQ,CACC,CACF,CACb,CAAA;AACH,CAAC,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,YAAY,EAAE,IAAI;CACnB,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

package/TimelineRow/index.d.ts

@@ -0,0 +1,4 @@
+import { OmitInternalProps } from '@toptal/picasso-shared';
+import { Props } from './TimelineRow';
+export { default } from './TimelineRow';
+export declare type TimelineRowProps = OmitInternalProps<Props>;

package/TimelineRow/index.js

@@ -0,0 +1,2 @@
+export { default } from './TimelineRow';
+//# sourceMappingURL=index.js.map

package/TimelineRow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TimelineRow/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/TimelineRow/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "content" | "dot" | "icon" | "root" | "date" | "dateText" | "connector">;
+export default _default;

package/TimelineRow/styles.js

@@ -0,0 +1,45 @@
+import { createStyles } from '@material-ui/core/styles';
+import { rem } from '@toptal/picasso-shared';
+export default ({ palette }) => createStyles({
+    root: {
+        // No bottom spacing for the last Container
+        '&:last-child $content': {
+            marginBottom: 0
+        }
+    },
+    content: {},
+    icon: {
+        margin: '4px 0',
+        color: palette.grey.main2
+    },
+    dot: {
+        // Outer dot icon dimensions should match picasso 16px icons
+        width: '16px',
+        height: '16px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'white',
+        margin: '4px 0',
+        '&:after': {
+            content: '""',
+            width: '9px',
+            height: '9px',
+            background: palette.grey.main2,
+            borderRadius: '50%',
+            lineHeight: '20px'
+        }
+    },
+    date: {
+        flex: '0 0 auto'
+    },
+    dateText: {
+        lineHeight: rem('24px')
+    },
+    connector: {
+        flex: 1,
+        width: 0,
+        borderLeft: `1px dashed ${palette.grey.main2}`
+    }
+});
+//# sourceMappingURL=styles.js.map

package/TimelineRow/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TimelineRow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAS,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,2CAA2C;QAC3C,uBAAuB,EAAE;YACvB,YAAY,EAAE,CAAC;SAChB;KACF;IACD,OAAO,EAAE,EAAE;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;KAC1B;IACD,GAAG,EAAE;QACH,4DAA4D;QAC5D,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,OAAO;QACnB,MAAM,EAAE,OAAO;QAEf,SAAS,EAAE;YACT,OAAO,EAAE,IAAI;YACb,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,KAAK;YACb,UAAU,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;YAC9B,YAAY,EAAE,KAAK;YACnB,UAAU,EAAE,MAAM;SACnB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;KACxB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;QACR,UAAU,EAAE,cAAc,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE;KAC/C;CACF,CAAC,CAAA"}

package/TypographyOverflow/TypographyOverflow.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '@toptal/picasso-shared';
+import { TypographyProps } from '../Typography';
+import { DelayType, VariantType } from '../Tooltip/Tooltip';
+export interface Props extends BaseProps, TypographyProps {
+    /** A typography which can possibly overflow */
+    children?: ReactNode;
+    /** Number of lines displayed */
+    lines?: number;
+    /** A content to show in tooltip when typography overflows. By default, TypographyOverflow's children are used. */
+    tooltipContent?: ReactNode;
+    /** A delay in showing the tooltip when typography overflows. */
+    tooltipDelay?: DelayType;
+    /** Tooltip color variant to use. */
+    tooltipVariant?: VariantType;
+    /** Do not show tooltips for shorten content. */
+    disableTooltip?: boolean;
+}
+export declare const TypographyOverflow: {
+    (props: Props): JSX.Element;
+    displayName: string;
+    defaultProps: {
+        noWrap: boolean;
+    };
+};
+export default TypographyOverflow;

package/TypographyOverflow/TypographyOverflow.js

@@ -0,0 +1,79 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cx from 'classnames';
+import React, { useCallback, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import styles from './styles';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+import { isOverflown } from '../utils';
+const useStyles = makeStyles(styles, {
+    name: 'TypographyOverflow'
+});
+export const TypographyOverflow = (props) => {
+    const { children, lines = 1, tooltipContent, tooltipDelay, tooltipVariant, disableTooltip, className, onClick, onMouseEnter, style } = props, rest = __rest(props, ["children", "lines", "tooltipContent", "tooltipDelay", "tooltipVariant", "disableTooltip", "className", "onClick", "onMouseEnter", "style"]);
+    const classes = useStyles(props);
+    const [isTooltipActive, setIsTooltipActive] = useState(false);
+    const [isTooltipOpened, setIsTooltipOpened] = useState(false);
+    const [isTooltipAnimating, setIsTooltipAnimating] = useState(false);
+    const isTooltipRendered = isTooltipActive || isTooltipAnimating;
+    const isMultiline = lines > 1;
+    // We are paying a very high price when using dynamic JSS rules
+    // for a component that is used on a very large scale.
+    // It was causing a major UI freezes and unnecessary style recalculations,
+    // that's why we decided to go with inline styles:
+    // https://github.com/toptal/picasso/pull/2110
+    const extendedStyle = isMultiline
+        ? Object.assign(Object.assign({}, style), { WebkitLineClamp: lines }) : style;
+    const handleClick = useCallback((event) => {
+        if (!isTooltipOpened &&
+            !disableTooltip &&
+            isOverflown(event.currentTarget)) {
+            setIsTooltipOpened(true);
+            setIsTooltipActive(true);
+        }
+        if (onClick) {
+            onClick(event);
+        }
+    }, [isTooltipOpened, disableTooltip, onClick]);
+    const handleMouseEnter = useCallback((event) => {
+        if (isOverflown(event.currentTarget)) {
+            setIsTooltipActive(true);
+            setIsTooltipAnimating(true);
+        }
+        if (onMouseEnter) {
+            onMouseEnter(event);
+        }
+    }, [onMouseEnter]);
+    const handleTooltipOpen = useCallback(() => {
+        setIsTooltipOpened(true);
+    }, []);
+    const handleTooltipClose = useCallback(() => {
+        setIsTooltipActive(false);
+        setIsTooltipOpened(false);
+    }, []);
+    const handleTransitionExiting = useCallback(() => {
+        setIsTooltipAnimating(true);
+    }, []);
+    const handleTransitionExited = useCallback(() => {
+        setIsTooltipAnimating(false);
+    }, []);
+    const typography = (React.createElement(Typography, Object.assign({}, rest, { style: extendedStyle, className: cx(classes.wrapper, isMultiline ? classes.multiLine : classes.singleLine, className), onClick: handleClick, onMouseEnter: handleMouseEnter }), children));
+    const tooltip = (React.createElement(Tooltip, { open: isTooltipOpened, content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : children, variant: tooltipVariant, placement: 'top', delay: tooltipDelay, interactive: true, disableListeners: disableTooltip, onOpen: handleTooltipOpen, onClose: handleTooltipClose, onTransitionExiting: handleTransitionExiting, onTransitionExited: handleTransitionExited }, typography));
+    return isTooltipRendered ? tooltip : typography;
+};
+TypographyOverflow.displayName = 'TypographyOverflow';
+TypographyOverflow.defaultProps = {
+    noWrap: true
+};
+export default TypographyOverflow;
+//# sourceMappingURL=TypographyOverflow.js.map

package/TypographyOverflow/TypographyOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypographyOverflow.js","sourceRoot":"","sources":["../../src/TypographyOverflow/TypographyOverflow.tsx"],"names":[],"mappings":"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"}

package/TypographyOverflow/index.d.ts

@@ -0,0 +1,4 @@
+import { OmitInternalProps } from '@toptal/picasso-shared';
+import { Props } from './TypographyOverflow';
+export { default } from './TypographyOverflow';
+export declare type TypographyOverflowProps = OmitInternalProps<Props>;

package/TypographyOverflow/index.js

@@ -0,0 +1,2 @@
+export { default } from './TypographyOverflow';
+//# sourceMappingURL=index.js.map

package/TypographyOverflow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TypographyOverflow/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}

package/TypographyOverflow/styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "wrapper" | "singleLine" | "multiLine">;
+export default _default;

package/TypographyOverflow/styles.js

@@ -0,0 +1,28 @@
+import { createStyles } from '@material-ui/core/styles';
+export default () => createStyles({
+    singleLine: {
+        display: 'block',
+        whiteSpace: 'nowrap'
+    },
+    multiLine: {
+        display: '-webkit-box',
+        whiteSpace: 'initial',
+        wordBreak: 'break-word'
+    },
+    wrapper: {
+        '-webkit-box-orient': 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        /**
+         * Workaround for `textOverflow: ellipsis`.
+         * Browser can show ellipsis at the end, even if it's not required -
+         * it's possible if the text has the very same width as the container
+         * (ellipsis width will be the same as the width of the text hidden by these ellipsis).
+         * It could be also affected by the font itself, when it has wider render bouncing borders.
+         * So to be sure, that text container in slightly wider than parent,
+         * we have to to add some super-minor space at the end.
+         */
+        paddingRight: '0.9px'
+    }
+});
+//# sourceMappingURL=styles.js.map

package/TypographyOverflow/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TypographyOverflow/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,UAAU,EAAE;QACV,OAAO,EAAE,OAAO;QAChB,UAAU,EAAE,QAAQ;KACrB;IACD,SAAS,EAAE;QACT,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,SAAS;QACrB,SAAS,EAAE,YAAY;KACxB;IACD,OAAO,EAAE;QACP,oBAAoB,EAAE,UAAU;QAChC,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB;;;;;;;;WAQG;QACH,YAAY,EAAE,OAAO;KACtB;CACF,CAAC,CAAA"}

package/index.d.ts

@@ -139,6 +139,25 @@ export { default as Badge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export type { BreadcrumbsProps } from './Breadcrumbs';
+export { default as Calendar } from './Calendar';
+export type { DateOrDateRangeType } from './Calendar';
+export { default as DatePicker, datePickerParseDateString, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT } from './DatePicker';
+export type { DatePickerValue, DatePickerInputCustomValueParser, DatePickerInputCustomValueParserParameters, DatePickerProps } from './DatePicker';
+export { default as Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { default as Dropzone, ErrorCode as DropzoneErrorCode } from './Dropzone';
+export type { DropzoneProps, FileUpload as DropzoneFileUpload, FileError as DropzoneFileError, FileRejection as DropzoneFileRejection, DropEvent as DropzoneDropEvent } from './Dropzone';
+export { default as OverviewBlock } from './OverviewBlock';
+export type { OverviewBlockProps } from './OverviewBlock';
+export { default as TypographyOverflow } from './TypographyOverflow';
+export type { TypographyOverflowProps } from './TypographyOverflow';
+export { default as EmptyState } from './EmptyState';
+export { default as Section } from './Section';
+export type { SectionProps } from './Section';
+export { default as Note } from './Note';
+export type { NoteProps } from './Note';
+export { default as Timeline } from './Timeline';
+export type { TimelineProps } from './Timeline';
 export * from './Icon';
 declare const PicassoFallback: () => never;
 export default PicassoFallback;

package/index.js

@@ -65,6 +65,16 @@ export { default as List } from './List';
 export { default as OverlayBadge } from './OverlayBadge';
 export { default as Badge } from './Badge';
 export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as Calendar } from './Calendar';
+export { default as DatePicker, datePickerParseDateString, DEFAULT_DATE_PICKER_DISPLAY_DATE_FORMAT, DEFAULT_DATE_PICKER_EDIT_DATE_FORMAT } from './DatePicker';
+export { default as Drawer } from './Drawer';
+export { default as Dropzone, ErrorCode as DropzoneErrorCode } from './Dropzone';
+export { default as OverviewBlock } from './OverviewBlock';
+export { default as TypographyOverflow } from './TypographyOverflow';
+export { default as EmptyState } from './EmptyState';
+export { default as Section } from './Section';
+export { default as Note } from './Note';
+export { default as Timeline } from './Timeline';
 // hygen code generator inserts export statements above this comment.
 export * from './Icon';
 // TODO: Remove in @toptal/picasso@11.x.x version

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso",
-  "version": "17.4.0",
+  "version": "18.2.0",
   "description": "Toptal UI components library",
   "publishConfig": {
     "access": "public",
@@ -37,12 +37,17 @@
     "d3": "^6.6.2",
     "d3-hierarchy": "^2",
     "d3-zoom": "^2",
+    "date-fns": "^2.9.0",
+    "date-fns-tz": "^1.1.3",
     "debounce": "^1.2.1",
     "detect-browser": "^5.2.0",
     "react-content-loader": "^5.1.0",
+    "react-dropzone": "^11.4.0",
     "react-input-mask": "^3.0.0-alpha.2",
     "react-router-dom": "^5.2.0",
-    "react-truncate": "^2.4.0"
+    "react-truncate": "^2.4.0",
+    "simple-react-calendar": "^2.2.8",
+    "storybook-readme": "^5.0.9"
   },
   "devDependencies": {
     "@babel/types": "^7.15.0",