@toptal/picasso-slider 1.0.6 → 2.0.0

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

@@ -1,14 +1,29 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Container, Slider, Typography } from '@toptal/picasso'
 import { SPACING_4, SPACING_8, SPACING_10 } from '@toptal/picasso-utils'
 
-const formatLabel = (val: any) => {
-  const formattedVal = val.length === 2 ? val : '0' + val
+type Value = number
+
+const formatLabel = (value: Value) => {
+  const formattedVal = String(value).padStart(2, '0')
 
   return <Typography color='inherit'>GMT+{formattedVal}:00</Typography>
 }
 
 const Example = () => {
+  const [value1, setValue1] = useState(0)
+  const [value2, setValue2] = useState(0)
+  const [value3, setValue3] = useState(0)
+  const handleChange1 = (_: React.ChangeEvent<{}>, newValue: Value) => {
+    setValue1(newValue)
+  }
+  const handleChange2 = (_: React.ChangeEvent<{}>, newValue: Value) => {
+    setValue2(newValue)
+  }
+  const handleChange3 = (_: React.ChangeEvent<{}>, newValue: Value) => {
+    setValue3(newValue)
+  }
+
   return (
     <Container padded={SPACING_4}>
       <Container>
@@ -16,7 +31,7 @@ const Example = () => {
           Display persistently
         </Typography>
         <Container top={SPACING_8}>
-          <Slider tooltip='on' compact />
+          <Slider value={value1} onChange={handleChange1} tooltip='on' />
         </Container>
       </Container>
       <Container top={SPACING_8}>
@@ -24,7 +39,7 @@ const Example = () => {
           Display when the thumb is hovered or focused
         </Typography>
         <Container top={SPACING_8}>
-          <Slider tooltip='auto' compact />
+          <Slider value={value2} onChange={handleChange2} tooltip='auto' />
         </Container>
       </Container>
       <Container top={SPACING_8}>
@@ -36,8 +51,9 @@ const Example = () => {
             min={0}
             max={23}
             tooltip='on'
+            value={value3}
+            onChange={handleChange3}
             tooltipFormat={formatLabel}
-            compact
           />
         </Container>
       </Container>

package/src/Slider/story/index.jsx

@@ -53,14 +53,6 @@ page
     'base/Slider'
   )
   .addExample('Slider/story/Marks.example.tsx', 'Marks', 'base/Slider')
-  .addExample(
-    'Slider/story/CustomTooltip.example.tsx',
-    {
-      title: 'Custom Tooltip',
-      takeScreenshot: false,
-    },
-    'base/Slider'
-  )
   .addExample(
     'Slider/story/HideThumb.example.tsx',
     'Hide thumb when value is null or undefined',

package/src/Slider/test.tsx

@@ -1,9 +1,15 @@
 import type { ReactNode } from 'react'
+import { describe, expect, it } from '@jest/globals'
 import React from 'react'
 import type { RenderResult } from '@testing-library/react'
 import { render } from '@testing-library/react'
 import type { OmitInternalProps } from '@toptal/picasso-shared'
 
+jest.mock('@toptal/picasso-utils', () => ({
+  ...jest.requireActual('@toptal/picasso-utils'),
+  useOnScreen: jest.fn().mockRejectedValueOnce(true),
+}))
+
 import type { Props } from './Slider'
 import { Slider } from './Slider'
 

package/src/SliderMark/SliderMark.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { twJoin } from 'tailwind-merge'
+
+import { getBgColor } from '../utils'
+
+export type SliderMarkProps = {
+  markActive: boolean
+  ownerState: { value: number }
+  style: React.CSSProperties
+  'data-index': number
+  forceInactive: boolean
+}
+
+// We need custom Mark component because we have
+// different bg color based on value of the Slider
+const SliderMark = ({
+  markActive,
+  ownerState,
+  'data-index': dataIndex,
+  style,
+  forceInactive,
+}: SliderMarkProps) => {
+  return (
+    <span
+      data-index={dataIndex}
+      style={style}
+      className={twJoin(
+        'absolute w-[6px] h-[6px] rounded-[50%] border-[2px] top-[1.5px] border-solid border-white opacity-100 -translate-x-2/4 box-content',
+        getBgColor({ markActive, forceInactive, value: ownerState.value })
+      )}
+    />
+  )
+}
+
+export default SliderMark

package/src/SliderMark/index.ts

@@ -0,0 +1 @@
+export { default } from './SliderMark'

package/src/SliderValueLabel/SliderValueLabel.tsx

@@ -1,73 +1,93 @@
-import React, { useRef } from 'react'
-import type { ValueLabelProps as MUIValueLabelProps } from '@material-ui/core/Slider'
-import { Tooltip } from '@toptal/picasso-tooltip'
+import type { SliderValueLabelSlotProps } from '@mui/base/Slider'
+import type { RefObject } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+import { twJoin } from 'tailwind-merge'
 
-import { useSliderContext } from '../Slider'
+import { getXPlacement } from '../utils'
 
 type ValueLabelDisplay = 'on' | 'auto' | 'off'
 
-// This type is needed because ValueLabelProps does not describe all exposed props
-export type ValueLabelProps = MUIValueLabelProps & {
-  valueLabelDisplay: ValueLabelDisplay
-  index: number
+const classesByTooltip: Record<ValueLabelDisplay, string> = {
+  off: 'hidden',
+  // We need to use visibility: hidden instead of display: none to keep the
+  // label visible for javascript calculations.
+  auto: 'invisible group-hover/thumb:visible flex justify-center items-center',
+  on: 'flex justify-center items-center',
 }
 
-export interface Props extends ValueLabelProps {
-  tooltip?: ValueLabelDisplay
-  disablePortal?: boolean
-  compact?: boolean
-  valueLabelDisplay: ValueLabelDisplay
-  index: number
-}
+const xPlacementClasses = {
+  left: 'right-[calc(100%-13px)]',
+  right: 'left-[calc(100%-13px)]',
+  center: '',
+} as const
+
+const yPlacementClasses = {
+  bottom: 'top-[calc(100%+2px)]',
+  top: 'bottom-[calc(100%+2px)]',
+} as const
 
 const SliderValueLabel = ({
-  tooltip,
-  disablePortal,
-  compact,
   children,
-  open,
-  value,
-  valueLabelDisplay,
-  index,
-}: Props) => {
-  const thumbRef = useRef<HTMLDivElement>(null)
-  const { registerValueLabel, hasTooltipOverlow } = useSliderContext()
-  const isTooltipAlwaysVisible = tooltip === 'on'
+  index = -1,
+  tooltip = 'off',
+  onRender,
+  yPlacement,
+  isOverlaped,
+  ownerState: { value },
+}: SliderValueLabelSlotProps & {
+  tooltip: ValueLabelDisplay
+  yPlacement: 'top' | 'bottom'
+  /** indicates if there are two SliderValueLabels that overlap each other */
+  isOverlaped: boolean
+  onRender: (index: number, ref: RefObject<HTMLSpanElement>) => void
+}) => {
+  const ref = useRef<HTMLSpanElement>(null)
 
-  if (valueLabelDisplay === 'off') {
-    return children
-  }
-
-  const getPlacement = () => {
-    if (hasTooltipOverlow) {
-      return index === 0 ? 'top-end' : 'top-start'
-    }
-
-    return 'top'
-  }
+  // we need to change the placement of the label if it is overlaped
+  // or if it is out of the viewport
+  const [xPlacement, setXPlacement] = useState<'left' | 'right' | 'center'>(
+    'center'
+  )
 
-  const handleTooltipRef = (tooltipElement: HTMLDivElement) => {
-    // At this moment, both thumb and tooltip refs are set so we can register them in the context
-    const thumbElement = thumbRef.current
+  useEffect(() => {
+    onRender(index, ref)
+  }, [index, onRender])
 
-    if (tooltipElement && thumbElement) {
-      registerValueLabel(index, tooltipElement, thumbElement)
+  useEffect(() => {
+    if (!ref.current) {
+      return
     }
-  }
+
+    setXPlacement(
+      getXPlacement({
+        rect: ref.current.getBoundingClientRect(),
+        isOverlaped: isOverlaped,
+        isFirstLabel: index === 0,
+        currentPlacement: xPlacement,
+      })
+    )
+    // we need to recalculate on value change to get new rect
+  }, [isOverlaped, index, xPlacement, value])
 
   return (
-    <Tooltip
-      ref={thumbRef}
-      tooltipRef={handleTooltipRef}
-      content={value}
-      open={open || valueLabelDisplay === 'on'}
-      placement={getPlacement()}
-      preventOverflow={isTooltipAlwaysVisible}
-      disablePortal={disablePortal}
-      compact={compact}
+    <span
+      ref={ref}
+      className={twJoin(
+        'absolute will-change-transform transition-transform',
+        classesByTooltip[tooltip],
+        yPlacementClasses[yPlacement],
+        xPlacementClasses[xPlacement]
+      )}
     >
-      {children}
-    </Tooltip>
+      <span
+        className={twJoin(
+          'shadow-4 text-sm text-white bg-graphite-800',
+          'm-1 rounded-sm py-[2px] px-2 max-w-[300px] break-words'
+        )}
+      >
+        {children}
+      </span>
+    </span>
   )
 }
 

package/src/SliderValueLabel/index.ts

@@ -1,5 +1 @@
-export { default as SliderValueLabel } from './SliderValueLabel'
-export type {
-  Props as SliderValueLabelProps,
-  ValueLabelProps,
-} from './SliderValueLabel'
+export { default } from './SliderValueLabel'

package/src/index.ts

@@ -1,2 +1 @@
 export * from './Slider'
-export * from './SliderValueLabel'

package/src/utils/check-bg-color.test.ts

@@ -0,0 +1,92 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { getBgColor } from './index'
+import type { GetBgColorProps } from './index'
+
+describe('getBgColor function', () => {
+  describe('when markActive is true, forceInactive is false, and value is not undefined', () => {
+    it('returns "bg-blue-500"', () => {
+      const options: GetBgColorProps = {
+        markActive: true,
+        forceInactive: false,
+        value: 0,
+      }
+      const bgColor = getBgColor(options)
+
+      expect(bgColor).toBe('bg-blue-500')
+    })
+  })
+
+  describe('when markActive is true, forceInactive is false, and value is undefined', () => {
+    it('returns "bg-gray-500"', () => {
+      const options: GetBgColorProps = {
+        markActive: true,
+        forceInactive: false,
+        value: undefined,
+      }
+      const bgColor = getBgColor(options)
+
+      expect(bgColor).toBe('bg-gray-500')
+    })
+  })
+
+  describe('when markActive is true, forceInactive is true', () => {
+    const options: GetBgColorProps = { markActive: true, forceInactive: true }
+
+    describe('and value is not undefined', () => {
+      it('returns "bg-gray-500"', () => {
+        const bgColor = getBgColor({ ...options, value: 10 })
+
+        expect(bgColor).toBe('bg-gray-500')
+      })
+    })
+
+    describe('and value is undefined', () => {
+      it('returns "bg-gray-500"', () => {
+        const bgColor = getBgColor({ ...options, value: undefined })
+
+        expect(bgColor).toBe('bg-gray-500')
+      })
+    })
+  })
+
+  describe('when markActive is false', () => {
+    const options: GetBgColorProps = { markActive: false }
+
+    describe('and forceInactive is false', () => {
+      it('returns "bg-gray-500" regardless of value', () => {
+        let bgColor = getBgColor({
+          ...options,
+          forceInactive: false,
+          value: 10,
+        })
+
+        expect(bgColor).toBe('bg-gray-500')
+
+        bgColor = getBgColor({
+          ...options,
+          forceInactive: false,
+          value: undefined,
+        })
+
+        expect(bgColor).toBe('bg-gray-500')
+      })
+    })
+
+    describe('and forceInactive is true', () => {
+      it('returns "bg-gray-500" regardless of value', () => {
+        let bgColor = getBgColor({ ...options, forceInactive: true, value: 10 })
+
+        expect(bgColor).toBe('bg-gray-500')
+
+        bgColor = getBgColor({
+          ...options,
+          forceInactive: true,
+          value: undefined,
+        })
+
+        expect(bgColor).toBe('bg-gray-500')
+      })
+    })
+  })
+})

package/src/utils/check-bg-color.ts

@@ -0,0 +1,28 @@
+export type GetBgColorProps = {
+  markActive?: boolean
+  forceInactive?: boolean
+  value?: number | readonly number[]
+}
+
+export const getBgColor = ({
+  markActive,
+  forceInactive,
+  value,
+}: GetBgColorProps) => {
+  const inactive = 'bg-gray-500'
+  const active = 'bg-blue-500'
+
+  if (forceInactive) {
+    return inactive
+  }
+
+  if (markActive) {
+    if (value === undefined) {
+      return inactive
+    }
+
+    return active
+  }
+
+  return inactive
+}

package/src/utils/check-overlap.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { checkOverlap } from './check-overlap' // Update your checkOverlap import
+
+describe('checkOverlap', () => {
+  describe('when labels do not overlap', () => {
+    it('returns false', () => {
+      const firstLabelRect = { right: 0, width: 20 } as DOMRect
+      const secondLabelRect = { left: 30, width: 20 } as DOMRect
+      const previousResult = false
+
+      expect(
+        checkOverlap({ firstLabelRect, secondLabelRect, previousResult })
+      ).toBe(false)
+    })
+  })
+
+  describe('when labels do overlap', () => {
+    it('returns true', () => {
+      const firstLabelRect = { right: 30, width: 20 } as DOMRect
+      const secondLabelRect = { left: 40, width: 20 } as DOMRect
+      const previousResult = false
+
+      expect(
+        checkOverlap({ firstLabelRect, secondLabelRect, previousResult })
+      ).toBe(true)
+    })
+  })
+
+  describe('when labels partially overlaped in previous render', () => {
+    describe('when the previousResult is true', () => {
+      it('they would still overlap in a non-overlapped state', () => {
+        const firstLabelRect = { right: 10, width: 20 } as DOMRect
+        const secondLabelRect = { left: 25, width: 20 } as DOMRect
+        const previousResult = true
+
+        expect(
+          checkOverlap({ firstLabelRect, secondLabelRect, previousResult })
+        ).toBe(true)
+      })
+    })
+
+    describe('when previousResult is false', () => {
+      it('would not overlap in a non-overlapped state', () => {
+        const firstLabelRect = { right: 10, width: 20 } as DOMRect
+        const secondLabelRect = { left: 30, width: 20 } as DOMRect
+        const previousResult = false
+
+        expect(
+          checkOverlap({ firstLabelRect, secondLabelRect, previousResult })
+        ).toBe(false)
+      })
+    })
+  })
+})

package/src/utils/check-overlap.ts

@@ -0,0 +1,43 @@
+export type CheckOverlapProps = {
+  firstLabelRect: DOMRect
+  secondLabelRect: DOMRect
+  previousResult: boolean
+}
+
+/**
+ * if we have range slider, there is a chance
+ * when we select values next to each other
+ * that the lables might overlap each other. Like this example:
+ * [   [ ]   ]
+ *    A   B
+ *
+ * In that case we need to reposition the labels to the edges of the thumb.
+ * [  ]   [  ]
+ *    A  B
+ *
+ * In next rerender when we recalculate the position of the labels the
+ * above example would end with result as not overlapping as the position was already changed.
+ * So we need to work with the previous result of this function `previousResult`. When
+ * true we need to add half of the width of the label to simulate the center position.
+ *
+ * This function checks and returns if the labels overlap.
+ * It is called on each render of the component and everytime the Slider changes value.
+ **/
+export const checkOverlap = ({
+  firstLabelRect,
+  secondLabelRect,
+  previousResult,
+}: CheckOverlapProps): boolean => {
+  const gap = 16
+  const halfWidth1 = firstLabelRect.width / 2
+  const halfWidth2 = secondLabelRect.width / 2
+
+  const rightBoundaryOfFirstLabel = previousResult
+    ? firstLabelRect.right + halfWidth1
+    : firstLabelRect.right
+  const leftBoundaryOfSecondLabel = previousResult
+    ? secondLabelRect.left - halfWidth2
+    : secondLabelRect.left
+
+  return rightBoundaryOfFirstLabel + gap > leftBoundaryOfSecondLabel
+}

package/src/utils/get-x-placement.test.ts

@@ -0,0 +1,93 @@
+import { describe, expect, it } from '@jest/globals'
+
+import { getXPlacement } from './get-x-placement' // Update your getXPlacement import
+
+describe('getXPlacement', () => {
+  describe('when leftBoundary < gap', () => {
+    it('returns right', () => {
+      const rect = { width: 20, left: -5, right: 0 } as DOMRect
+      const isOverlaped = false
+      const isFirstLabel = true
+      const currentPlacement = 'center'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('right')
+    })
+  })
+
+  describe('when rightBoundary > window.innerWidth - gap', () => {
+    it('returns left', () => {
+      const rect = { width: 100, left: 920, right: 1020 } as DOMRect
+      const isOverlaped = false
+      const isFirstLabel = true
+      const currentPlacement = 'center'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('left')
+    })
+  })
+
+  describe('when rightBoundary < window.innerWidth - gap', () => {
+    it('returns left', () => {
+      const rect = { width: 100, left: 870, right: 970 } as DOMRect
+      const isOverlaped = false
+      const isFirstLabel = true
+      const currentPlacement = 'center'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('center')
+    })
+  })
+
+  describe('when currentPlacement is left and rightBoundary > window.innerWidth - gap', () => {
+    it('returns left', () => {
+      const rect = { width: 100, left: 870, right: 970 } as DOMRect
+      const isOverlaped = true
+      const isFirstLabel = false
+      const currentPlacement = 'left'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('left')
+    })
+  })
+
+  describe('when labels are overlapped', () => {
+    const rect = { width: 20, left: 50, right: 70 } as DOMRect
+    const isOverlaped = true
+
+    it('returns left for the first label', () => {
+      const isFirstLabel = true
+      const currentPlacement = 'center'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('left')
+    })
+
+    it('returns right for the not first label', () => {
+      const isFirstLabel = false
+      const currentPlacement = 'center'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('right')
+    })
+  })
+
+  describe('when none of conditions are met', () => {
+    it('returns center', () => {
+      const rect = { width: 20, left: 100, right: 120 } as DOMRect
+      const isOverlaped = false
+      const isFirstLabel = false
+      const currentPlacement = 'center'
+
+      expect(
+        getXPlacement({ rect, isOverlaped, isFirstLabel, currentPlacement })
+      ).toBe('center')
+    })
+  })
+})

package/src/utils/get-x-placement.ts

@@ -0,0 +1,28 @@
+export type GetPositionProps = {
+  rect: DOMRect
+  isOverlaped: boolean
+  isFirstLabel: boolean
+  currentPlacement: 'left' | 'right' | 'center'
+}
+
+export const getXPlacement = ({
+  rect: { width, left, right },
+  isOverlaped,
+  isFirstLabel,
+  currentPlacement,
+}: GetPositionProps): 'left' | 'right' | 'center' => {
+  const gap = 16
+  const halfWidth = width / 2
+  const leftBoundary = currentPlacement === 'right' ? left - halfWidth : left
+  const rightBoundary = currentPlacement === 'left' ? right + halfWidth : right
+
+  if (leftBoundary < gap) {
+    return 'right'
+  } else if (rightBoundary > window.innerWidth - gap) {
+    return 'left'
+  } else if (isOverlaped) {
+    return isFirstLabel ? 'left' : 'right'
+  }
+
+  return 'center'
+}

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './check-bg-color'
+export * from './check-overlap'
+export * from './get-x-placement'

package/dist-package/src/Slider/SliderContext.d.ts

@@ -1,11 +0,0 @@
-import type { ReactNode } from 'react';
-interface ProviderProps {
-    children: ReactNode;
-}
-declare const SliderContextProvider: ({ children }: ProviderProps) => JSX.Element;
-declare const useSliderContext: () => {
-    registerValueLabel: (index: number, tooltip: HTMLDivElement, thumb: HTMLElement) => void;
-    hasTooltipOverlow: boolean;
-};
-export { SliderContextProvider, useSliderContext };
-//# sourceMappingURL=SliderContext.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SliderContext.d.ts","sourceRoot":"","sources":["../../../src/Slider/SliderContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAsBtC,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAID,QAAA,MAAM,qBAAqB,iBAAkB,aAAa,gBA+CzD,CAAA;AAED,QAAA,MAAM,gBAAgB;gCAjEX,MAAM,WACJ,cAAc,SAChB,WAAW,KACf,IAAI;uBACU,OAAO;CA6D4B,CAAA;AAExD,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,CAAA"}