@toptal/picasso-tabs 2.0.9 → 3.0.1

package/dist-package/src/TabScrollButton/index.d.ts

@@ -1,5 +0,0 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared';
-import type { Props } from './TabScrollButton';
-export { default as TabScrollButton } from './TabScrollButton';
-export declare type TabScrollButtonProps = OmitInternalProps<Props>;
-//# sourceMappingURL=index.d.ts.map

package/dist-package/src/TabScrollButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE9C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC9D,oBAAY,oBAAoB,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA"}

package/dist-package/src/TabScrollButton/index.js

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

package/dist-package/src/TabScrollButton/index.js.map

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

package/dist-package/src/TabScrollButton/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "left" | "right" | "button" | "gradient">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/TabScrollButton/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/TabScrollButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAgCC"}

package/dist-package/src/TabScrollButton/styles.js

@@ -1,35 +0,0 @@
-import { createStyles } from '@material-ui/core';
-import { alpha } from '@toptal/picasso-shared';
-export default ({ palette }) => {
-    const color = palette.common.white;
-    const colorStops = `${color} 0%, ${color} 50%, ${alpha(color, 0)} 100%`;
-    return createStyles({
-        root: {
-            position: 'relative',
-        },
-        gradient: {
-            position: 'absolute',
-            width: '2.5rem',
-            height: '100%',
-            zIndex: 2,
-            '&$left': {
-                background: `linear-gradient(90deg, ${colorStops})`,
-            },
-            '&$right': {
-                background: `linear-gradient(270deg, ${colorStops})`,
-            },
-        },
-        button: {
-            position: 'absolute',
-            width: '1rem',
-            height: '100%',
-        },
-        left: {
-            left: 0,
-        },
-        right: {
-            right: 0,
-        },
-    });
-};
-//# sourceMappingURL=styles.js.map

package/dist-package/src/TabScrollButton/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/TabScrollButton/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,CAAA;IAClC,MAAM,UAAU,GAAG,GAAG,KAAK,QAAQ,KAAK,SAAS,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,CAAA;IAEvE,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;SACrB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,CAAC;YACT,QAAQ,EAAE;gBACR,UAAU,EAAE,0BAA0B,UAAU,GAAG;aACpD;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,2BAA2B,UAAU,GAAG;aACrD;SACF;QACD,MAAM,EAAE;YACN,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;SACR;QACD,KAAK,EAAE;YACL,KAAK,EAAE,CAAC;SACT;KACF,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist-package/src/Tabs/styles.d.ts

@@ -1,4 +0,0 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "horizontal" | "vertical">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Tabs/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCA6BxB,KAAK;AAAlC,wBAeI"}

package/dist-package/src/Tabs/styles.js

@@ -1,41 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(({ palette }) => ({
-    MuiTabs: {
-        root: {
-            position: 'relative',
-            minHeight: 0,
-        },
-        vertical: {
-            width: 200,
-            margin: 0,
-            '& $scroller': {
-                // We need a bit of padding to allow active tab's shadow to be visible
-                paddingLeft: '0.5em',
-            },
-            '& $indicator': {
-                display: 'none',
-            },
-        },
-        indicator: {
-            backgroundColor: palette.blue.main,
-            zIndex: 1,
-        },
-    },
-}));
-export default ({ palette }) => createStyles({
-    horizontal: {
-        '&::after': {
-            position: 'absolute',
-            content: '""',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: 1,
-            backgroundColor: palette.grey.main,
-            zIndex: 0,
-        },
-    },
-    vertical: {},
-});
-//# sourceMappingURL=styles.js.map

package/dist-package/src/Tabs/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Tabs/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE;QACP,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,SAAS,EAAE,CAAC;SACb;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,CAAC;YACT,aAAa,EAAE;gBACb,sEAAsE;gBACtE,WAAW,EAAE,OAAO;aACrB;YAED,cAAc,EAAE;gBACd,OAAO,EAAE,MAAM;aAChB;SACF;QACD,SAAS,EAAE;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,UAAU,EAAE;QACV,UAAU,EAAE;YACV,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,MAAM,EAAE,CAAC;YACT,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YAClC,MAAM,EAAE,CAAC;SACV;KACF;IACD,QAAQ,EAAE,EAAE;CACb,CAAC,CAAA"}

package/dist-package/src/Tabs/use-tab-action.d.ts

@@ -1,5 +0,0 @@
-import type { Ref } from 'react';
-import type { TabsActions } from '@material-ui/core';
-declare const useTabAction: () => Ref<TabsActions>;
-export default useTabAction;
-//# sourceMappingURL=use-tab-action.d.ts.map

package/dist-package/src/Tabs/use-tab-action.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tab-action.d.ts","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAOpD,QAAA,MAAM,YAAY,QAAO,IAAI,WAAW,CAevC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist-package/src/Tabs/use-tab-action.js

@@ -1,21 +0,0 @@
-import { useEffect, useRef } from 'react';
-/*
- * MuiTabs break when the size of a tab changes without rendering with React.
- * This issue happens when the font is loaded after the initial render of the component.
- * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
- */
-const useTabAction = () => {
-    const ref = useRef(null);
-    useEffect(() => {
-        const listener = () => {
-            var _a, _b;
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.updateIndicator();
-            (_b = ref.current) === null || _b === void 0 ? void 0 : _b.updateScrollButtons();
-        };
-        window.addEventListener('load', listener);
-        return () => window.removeEventListener('load', listener);
-    }, []);
-    return ref;
-};
-export default useTabAction;
-//# sourceMappingURL=use-tab-action.js.map

package/dist-package/src/Tabs/use-tab-action.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-tab-action.js","sourceRoot":"","sources":["../../../src/Tabs/use-tab-action.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAGzC;;;;GAIG;AACH,MAAM,YAAY,GAAG,GAAqB,EAAE;IAC1C,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAA;IAErC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,GAAG,EAAE;;YACpB,MAAA,GAAG,CAAC,OAAO,0CAAE,eAAe,EAAE,CAAA;YAC9B,MAAA,GAAG,CAAC,OAAO,0CAAE,mBAAmB,EAAE,CAAA;QACpC,CAAC,CAAA;QAED,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;QAEzC,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;IAC3D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/src/Tab/styles.ts

@@ -1,106 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { rem } from '@toptal/picasso-shared'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(({ breakpoints, palette }: Theme) => ({
-  MuiTab: {
-    root: {
-      minHeight: 0,
-      minWidth: 0,
-      lineHeight: 1,
-      textTransform: 'none',
-      padding: `${rem('9px')} 0 ${rem('7px')}`,
-      overflow: 'initial',
-
-      [breakpoints.up('md')]: {
-        padding: undefined,
-      },
-
-      color: palette.grey.dark,
-
-      [breakpoints.up('md')]: {
-        minWidth: 'auto',
-        fontSize: '1rem',
-      },
-    },
-    labelIcon: {
-      minHeight: 0,
-      paddingRight: '1.5rem',
-      paddingTop: rem('9px'),
-      '& $wrapper > *:first-child': {
-        position: 'absolute',
-        right: 0,
-        marginBottom: 0,
-      },
-    },
-    selected: {
-      color: palette.common.black,
-    },
-    textColorInherit: {
-      '&$disabled': {
-        color: palette.grey.main,
-      },
-    },
-    disabled: {},
-  },
-}))
-
-export default ({ sizes, palette, shadows, transitions }: Theme) =>
-  createStyles({
-    horizontal: {
-      '&:not(:last-child)': {
-        marginRight: '2em',
-      },
-    },
-    vertical: {
-      width: '100%',
-      borderRadius: `${sizes.borderRadius.small} 0 0 ${sizes.borderRadius.small}`,
-      margin: '0.25rem 0',
-      overflow: 'hidden',
-      padding: '0.5rem 1rem',
-      transition: `all ${transitions.duration.short}ms ${transitions.easing.easeInOut}`,
-      textAlign: 'left',
-      backgroundColor: palette.grey.lighter,
-      opacity: 1,
-      color: palette.grey.dark,
-
-      '&:first-child': {
-        marginTop: '1rem',
-      },
-
-      '&:last-child': {
-        marginBottom: '1rem',
-      },
-
-      '&:hover': {
-        color: palette.common.black,
-      },
-
-      '&:hover:not($selected)': {
-        backgroundColor: palette.grey.lighter2,
-      },
-
-      '& $wrapper': {
-        display: 'block',
-      },
-    },
-    selected: {
-      '&$vertical': {
-        color: palette.common.black,
-        boxShadow: shadows[1],
-        backgroundColor: palette.grey.lightest,
-
-        '&::before': {
-          content: '""',
-          background: palette.blue.main,
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: '3px',
-        },
-      },
-    },
-    wrapper: {},
-  })

package/src/TabScrollButton/TabScrollButton.tsx

@@ -1,64 +0,0 @@
-import cx from 'classnames'
-import React, { forwardRef } from 'react'
-import { ButtonBase } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
-import type { BaseProps } from '@toptal/picasso-shared'
-import { BackMinor16, ChevronMinor16 } from '@toptal/picasso-icons'
-import { Container } from '@toptal/picasso-container'
-
-import styles from './styles'
-
-type DirectionType = 'left' | 'right'
-
-export interface Props extends BaseProps {
-  /** The direction the button should indicate. */
-  direction: DirectionType
-  /** If `true`, the component is disabled. */
-  disabled?: boolean
-}
-
-const useStyles = makeStyles(styles, {
-  name: 'PicassoTabScrollButton',
-})
-
-export const TabScrollButton = forwardRef<HTMLDivElement, Props>(
-  function TabScrollButton(props, ref) {
-    const { className, style, direction, disabled, ...rest } = props
-    const classes = useStyles()
-
-    if (disabled) {
-      return null
-    }
-
-    return (
-      <Container
-        {...rest}
-        ref={ref}
-        className={cx(classes.root, className)}
-        style={style}
-      >
-        <Container
-          className={cx(classes.gradient, {
-            [classes.left]: direction === 'left',
-            [classes.right]: direction === 'right',
-          })}
-        >
-          <ButtonBase
-            className={cx(classes.button, {
-              [classes.left]: direction === 'left',
-              [classes.right]: direction === 'right',
-            })}
-            aria-label={`${direction} button`}
-            data-testid={`tab-scroll-button-${direction}`}
-          >
-            {direction === 'left' ? <BackMinor16 /> : <ChevronMinor16 />}
-          </ButtonBase>
-        </Container>
-      </Container>
-    )
-  }
-)
-
-TabScrollButton.displayName = 'TabScrollButton'
-
-export default TabScrollButton

package/src/TabScrollButton/index.ts

@@ -1,6 +0,0 @@
-import type { OmitInternalProps } from '@toptal/picasso-shared'
-
-import type { Props } from './TabScrollButton'
-
-export { default as TabScrollButton } from './TabScrollButton'
-export type TabScrollButtonProps = OmitInternalProps<Props>

package/src/TabScrollButton/styles.ts

@@ -1,37 +0,0 @@
-import { createStyles } from '@material-ui/core'
-import type { Theme } from '@material-ui/core/styles'
-import { alpha } from '@toptal/picasso-shared'
-
-export default ({ palette }: Theme) => {
-  const color = palette.common.white
-  const colorStops = `${color} 0%, ${color} 50%, ${alpha(color, 0)} 100%`
-
-  return createStyles({
-    root: {
-      position: 'relative',
-    },
-    gradient: {
-      position: 'absolute',
-      width: '2.5rem',
-      height: '100%',
-      zIndex: 2,
-      '&$left': {
-        background: `linear-gradient(90deg, ${colorStops})`,
-      },
-      '&$right': {
-        background: `linear-gradient(270deg, ${colorStops})`,
-      },
-    },
-    button: {
-      position: 'absolute',
-      width: '1rem',
-      height: '100%',
-    },
-    left: {
-      left: 0,
-    },
-    right: {
-      right: 0,
-    },
-  })
-}

package/src/Tabs/styles.ts

@@ -1,45 +0,0 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { PicassoProvider } from '@toptal/picasso-provider'
-
-PicassoProvider.override(({ palette }: Theme) => ({
-  MuiTabs: {
-    root: {
-      position: 'relative',
-      minHeight: 0,
-    },
-    vertical: {
-      width: 200,
-      margin: 0,
-      '& $scroller': {
-        // We need a bit of padding to allow active tab's shadow to be visible
-        paddingLeft: '0.5em',
-      },
-
-      '& $indicator': {
-        display: 'none',
-      },
-    },
-    indicator: {
-      backgroundColor: palette.blue.main,
-      zIndex: 1,
-    },
-  },
-}))
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    horizontal: {
-      '&::after': {
-        position: 'absolute',
-        content: '""',
-        bottom: 0,
-        left: 0,
-        right: 0,
-        height: 1,
-        backgroundColor: palette.grey.main,
-        zIndex: 0,
-      },
-    },
-    vertical: {},
-  })

package/src/Tabs/use-tab-action.ts

@@ -1,27 +0,0 @@
-import type { Ref } from 'react'
-import { useEffect, useRef } from 'react'
-import type { TabsActions } from '@material-ui/core'
-
-/*
- * MuiTabs break when the size of a tab changes without rendering with React.
- * This issue happens when the font is loaded after the initial render of the component.
- * To solve this issue, we imperatively update the indicator and scroll buttons when it happens.
- */
-const useTabAction = (): Ref<TabsActions> => {
-  const ref = useRef<TabsActions>(null)
-
-  useEffect(() => {
-    const listener = () => {
-      ref.current?.updateIndicator()
-      ref.current?.updateScrollButtons()
-    }
-
-    window.addEventListener('load', listener)
-
-    return () => window.removeEventListener('load', listener)
-  }, [])
-
-  return ref
-}
-
-export default useTabAction