@toptal/picasso-slider 1.0.6 → 2.0.0

package/dist-package/src/Slider/SliderContext.js

@@ -1,38 +0,0 @@
-import React, { createContext, useCallback, useContext, useMemo, useState, } from 'react';
-import { noop } from '@toptal/picasso-utils';
-const SliderContext = createContext({
-    registerValueLabel: noop,
-    hasTooltipOverlow: false,
-});
-const SliderContextProvider = ({ children }) => {
-    const [valueLabels, setValueLabels] = useState([
-        null,
-        null,
-    ]);
-    const [hasTooltipOverlow, setHasTooltipOverflow] = useState(false);
-    const checkTooltipsOverlap = useCallback(() => {
-        if (valueLabels[0] && valueLabels[1]) {
-            const minDistance = (valueLabels[0].tooltipWidth + valueLabels[1].tooltipWidth) / 2;
-            const distance = valueLabels[1].thumb.offsetLeft - valueLabels[0].thumb.offsetLeft;
-            setHasTooltipOverflow(distance < minDistance && distance !== 0);
-        }
-    }, [valueLabels]);
-    const registerValueLabel = useCallback((index, tooltip, thumb) => {
-        if (!valueLabels[index]) {
-            const newTooltips = [...valueLabels];
-            newTooltips[index] = { thumb, tooltipWidth: tooltip.offsetWidth };
-            setValueLabels(newTooltips);
-        }
-        else {
-            checkTooltipsOverlap();
-        }
-    }, [valueLabels, checkTooltipsOverlap]);
-    const contextValue = useMemo(() => ({
-        registerValueLabel,
-        hasTooltipOverlow,
-    }), [registerValueLabel, hasTooltipOverlow]);
-    return (React.createElement(SliderContext.Provider, { value: contextValue }, children));
-};
-const useSliderContext = () => useContext(SliderContext);
-export { SliderContextProvider, useSliderContext };
-//# sourceMappingURL=SliderContext.js.map

package/dist-package/src/Slider/SliderContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SliderContext.js","sourceRoot":"","sources":["../../../src/Slider/SliderContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,MAAM,aAAa,GAAG,aAAa,CAOhC;IACD,kBAAkB,EAAE,IAAI;IACxB,iBAAiB,EAAE,KAAK;CACzB,CAAC,CAAA;AAQF,MAAM,qBAAqB,GAAG,CAAC,EAAE,QAAQ,EAAiB,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAwB;QACpE,IAAI;QACJ,IAAI;KACL,CAAC,CAAA;IACF,MAAM,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAElE,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,IAAI,WAAW,CAAC,CAAC,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE;YACpC,MAAM,WAAW,GACf,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;YAEjE,MAAM,QAAQ,GACZ,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAA;YAEnE,qBAAqB,CAAC,QAAQ,GAAG,WAAW,IAAI,QAAQ,KAAK,CAAC,CAAC,CAAA;SAChE;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,KAAa,EAAE,OAAuB,EAAE,KAAkB,EAAE,EAAE;QAC7D,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE;YACvB,MAAM,WAAW,GAAG,CAAC,GAAG,WAAW,CAAC,CAAA;YAEpC,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,CAAC,WAAW,EAAE,CAAA;YAEjE,cAAc,CAAC,WAAW,CAAC,CAAA;SAC5B;aAAM;YACL,oBAAoB,EAAE,CAAA;SACvB;IACH,CAAC,EACD,CAAC,WAAW,EAAE,oBAAoB,CAAC,CACpC,CAAA;IAED,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,kBAAkB;QAClB,iBAAiB;KAClB,CAAC,EACF,CAAC,kBAAkB,EAAE,iBAAiB,CAAC,CACxC,CAAA;IAED,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,IACxC,QAAQ,CACc,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAA;AAExD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist-package/src/Slider/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<{}, "mark" | "track" | "root" | "rail" | "thumb" | "markActive" | "wrapper" | "markInactive" | "markTrack" | "unmarkTrack" | "hideThumb">;
-export default _default;
-//# sourceMappingURL=styles.d.ts.map

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

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

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

@@ -1,68 +0,0 @@
-import { createStyles } from '@material-ui/core/styles';
-import { rem } from '@toptal/picasso-shared';
-import { PicassoProvider } from '@toptal/picasso-provider';
-PicassoProvider.override(() => ({
-    MuiSlider: {
-        thumb: {
-            '&:hover, &$active, &$focusVisible': {
-                boxShadow: 'none',
-            },
-        },
-    },
-}));
-export default ({ palette }) => createStyles({
-    wrapper: {
-        margin: `${rem('6px')} 0`,
-    },
-    root: {
-        display: 'block',
-        color: palette.grey.main,
-        padding: `${rem('6px')} 0`,
-        margin: `-${rem('6px')} 0`,
-        height: rem('1px'),
-    },
-    rail: {
-        height: rem('1px'),
-        borderRadius: 'unset',
-        opacity: 0.24,
-    },
-    track: {
-        backgroundColor: palette.primary.main,
-        borderRadius: 'unset',
-        height: rem('1px'),
-    },
-    thumb: {
-        backgroundColor: palette.primary.main,
-        border: `${rem('2px')} solid ${palette.common.white}`,
-        height: rem('15px'),
-        width: rem('15px'),
-        marginTop: rem('-7px'),
-    },
-    mark: {
-        backgroundColor: palette.grey.main,
-        height: rem('6px'),
-        width: rem('6px'),
-        borderRadius: '50%',
-        border: `${rem('2px')} solid ${palette.common.white}`,
-        opacity: 1,
-        top: rem('1.5px'),
-        transform: 'translateX(-50%)',
-        boxSizing: 'content-box',
-    },
-    markActive: {
-        backgroundColor: palette.primary.main,
-    },
-    markInactive: {
-        backgroundColor: palette.grey.main,
-    },
-    markTrack: {
-        backgroundColor: palette.primary.main,
-    },
-    unmarkTrack: {
-        backgroundColor: palette.grey.lighter2,
-    },
-    hideThumb: {
-        display: 'none',
-    },
-});
-//# sourceMappingURL=styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Slider/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,eAAe,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;IAC9B,SAAS,EAAE;QACT,KAAK,EAAE;YACL,mCAAmC,EAAE;gBACnC,SAAS,EAAE,MAAM;aAClB;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,OAAO,EAAE;QACP,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI;KAC1B;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,OAAO,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI;QAC1B,MAAM,EAAE,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI;QAC1B,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC;KACnB;IACD,IAAI,EAAE;QACJ,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC;QAClB,YAAY,EAAE,OAAO;QACrB,OAAO,EAAE,IAAI;KACd;IACD,KAAK,EAAE;QACL,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;QACrC,YAAY,EAAE,OAAO;QACrB,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC;KACnB;IACD,KAAK,EAAE;QACL,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;QACrC,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,UAAU,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE;QACrD,MAAM,EAAE,GAAG,CAAC,MAAM,CAAC;QACnB,KAAK,EAAE,GAAG,CAAC,MAAM,CAAC;QAClB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC;KACvB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QAClC,MAAM,EAAE,GAAG,CAAC,KAAK,CAAC;QAClB,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC;QACjB,YAAY,EAAE,KAAK;QACnB,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,UAAU,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE;QACrD,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC;QACjB,SAAS,EAAE,kBAAkB;QAC7B,SAAS,EAAE,aAAa;KACzB;IACD,UAAU,EAAE;QACV,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;KACtC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACnC;IACD,SAAS,EAAE;QACT,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;KACtC;IACD,WAAW,EAAE;QACX,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ;KACvC;IACD,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAA"}

package/src/Slider/SliderContext.tsx

@@ -1,80 +0,0 @@
-import type { ReactNode } from 'react'
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react'
-import { noop } from '@toptal/picasso-utils'
-
-const SliderContext = createContext<{
-  registerValueLabel: (
-    index: number,
-    tooltip: HTMLDivElement,
-    thumb: HTMLElement
-  ) => void
-  hasTooltipOverlow: boolean
-}>({
-  registerValueLabel: noop,
-  hasTooltipOverlow: false,
-})
-
-interface ProviderProps {
-  children: ReactNode
-}
-
-type ValueLabel = { tooltipWidth: number; thumb: HTMLElement }
-
-const SliderContextProvider = ({ children }: ProviderProps) => {
-  const [valueLabels, setValueLabels] = useState<(ValueLabel | null)[]>([
-    null,
-    null,
-  ])
-  const [hasTooltipOverlow, setHasTooltipOverflow] = useState(false)
-
-  const checkTooltipsOverlap = useCallback(() => {
-    if (valueLabels[0] && valueLabels[1]) {
-      const minDistance =
-        (valueLabels[0].tooltipWidth + valueLabels[1].tooltipWidth) / 2
-
-      const distance =
-        valueLabels[1].thumb.offsetLeft - valueLabels[0].thumb.offsetLeft
-
-      setHasTooltipOverflow(distance < minDistance && distance !== 0)
-    }
-  }, [valueLabels])
-
-  const registerValueLabel = useCallback(
-    (index: number, tooltip: HTMLDivElement, thumb: HTMLElement) => {
-      if (!valueLabels[index]) {
-        const newTooltips = [...valueLabels]
-
-        newTooltips[index] = { thumb, tooltipWidth: tooltip.offsetWidth }
-
-        setValueLabels(newTooltips)
-      } else {
-        checkTooltipsOverlap()
-      }
-    },
-    [valueLabels, checkTooltipsOverlap]
-  )
-
-  const contextValue = useMemo(
-    () => ({
-      registerValueLabel,
-      hasTooltipOverlow,
-    }),
-    [registerValueLabel, hasTooltipOverlow]
-  )
-
-  return (
-    <SliderContext.Provider value={contextValue}>
-      {children}
-    </SliderContext.Provider>
-  )
-}
-
-const useSliderContext = () => useContext(SliderContext)
-
-export { SliderContextProvider, useSliderContext }

package/src/Slider/story/CustomTooltip.example.tsx

@@ -1,36 +0,0 @@
-import type { ReactNode, ChangeEvent } from 'react'
-import React from 'react'
-import { Container, Slider, Tooltip } from '@toptal/picasso'
-
-const BottomTooltip = ({
-  children,
-  open,
-  value,
-}: {
-  children: ReactNode
-  open: boolean
-  value: ReactNode
-}) => (
-  <Tooltip placement='bottom' open={open} content={value} compact>
-    {children}
-  </Tooltip>
-)
-
-const CustomSliderTooltip = () => {
-  const handleChange = (event: ChangeEvent<{}>, value: number | number[]) => {
-    window.console.log('onChange: ', value)
-  }
-
-  return (
-    <Container>
-      <Slider
-        onChange={handleChange}
-        tooltip='auto'
-        TooltipComponent={BottomTooltip}
-        compact
-      />
-    </Container>
-  )
-}
-
-export default CustomSliderTooltip

package/src/Slider/styles.ts

@@ -1,71 +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(() => ({
-  MuiSlider: {
-    thumb: {
-      '&:hover, &$active, &$focusVisible': {
-        boxShadow: 'none',
-      },
-    },
-  },
-}))
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    wrapper: {
-      margin: `${rem('6px')} 0`,
-    },
-    root: {
-      display: 'block',
-      color: palette.grey.main,
-      padding: `${rem('6px')} 0`,
-      margin: `-${rem('6px')} 0`,
-      height: rem('1px'),
-    },
-    rail: {
-      height: rem('1px'),
-      borderRadius: 'unset',
-      opacity: 0.24,
-    },
-    track: {
-      backgroundColor: palette.primary.main,
-      borderRadius: 'unset',
-      height: rem('1px'),
-    },
-    thumb: {
-      backgroundColor: palette.primary.main,
-      border: `${rem('2px')} solid ${palette.common.white}`,
-      height: rem('15px'),
-      width: rem('15px'),
-      marginTop: rem('-7px'),
-    },
-    mark: {
-      backgroundColor: palette.grey.main,
-      height: rem('6px'),
-      width: rem('6px'),
-      borderRadius: '50%',
-      border: `${rem('2px')} solid ${palette.common.white}`,
-      opacity: 1,
-      top: rem('1.5px'),
-      transform: 'translateX(-50%)',
-      boxSizing: 'content-box',
-    },
-    markActive: {
-      backgroundColor: palette.primary.main,
-    },
-    markInactive: {
-      backgroundColor: palette.grey.main,
-    },
-    markTrack: {
-      backgroundColor: palette.primary.main,
-    },
-    unmarkTrack: {
-      backgroundColor: palette.grey.lighter2,
-    },
-    hideThumb: {
-      display: 'none',
-    },
-  })