Fix initial position of Slider

.changeset/thick-peaches-build.md

@@ -0,0 +1,8 @@
+---
+'@toptal/picasso-slider': patch
+'@toptal/picasso': patch
+---
+
+### Slider
+
+- fix initial position of Tooltip

.changeset/tiny-news-compete.md

@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-carousel': patch
+---
+
+- refactor useOnScreen usage after the breaking change

.changeset/twelve-years-play.md

@@ -0,0 +1,13 @@
+---
+'@toptal/picasso-utils': major
+'@toptal/picasso': major
+---
+
+### useOnScreen
+
+- change return value of the hook to let component know when the oberver starts observing
+
+```diff
+-const isOnScreen = useOnScreen({...})
++const { isOnScreen, isObserved } = useOnScreen({...})
+```

packages/base/Carousel/src/Carousel/hooks/useAutoplay/use-autoplay.ts

@@ -17,7 +17,7 @@ const useAutoplay = ({
   rewind,
   isLastPage,
 }: Props) => {
-  const isOnScreen = useOnScreen({ ref: wrapperRef })
+  const { isOnScreen } = useOnScreen({ ref: wrapperRef })
   const isMouseOver = useMouseEnter(wrapperRef)
 
   useInterval({

packages/base/Slider/src/Slider/Slider.tsx

@@ -1,5 +1,5 @@
 // import type { ComponentProps } from 'react'
-import React, { forwardRef, useRef } from 'react'
+import React, { forwardRef, useEffect, useRef } from 'react'
 import { Slider as MUIBaseSlider } from '@mui/base/Slider'
 import { useCombinedRefs, useOnScreen } from '@toptal/picasso-utils'
 import { twJoin, twMerge } from '@toptal/picasso-tailwind-merge'
@@ -66,7 +66,7 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
     marks,
     value,
     defaultValue = 0,
-    tooltip = 'off',
+    tooltip: externalTooltip = 'off',
     tooltipFormat,
     step,
     disabled,
@@ -82,6 +82,7 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
     'data-private': dataPrivate,
     'data-testid': dataTestid,
   } = props
+  const [tooltip, setTooltip] = React.useState('off')
   const containerRef = useRef<HTMLDivElement>(null)
   const sliderRef = useCombinedRefs<HTMLElement>(ref, useRef<HTMLElement>(null))
   const { isPartiallyOverlapped, handleValueLabelOnRender } = useLabelOverlap({
@@ -93,12 +94,18 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
 
   // The rootMargin is not working correctly in the storybooks iframe
   // To test properly we can open the iframe in new window
-  const isContainerOnScreen = useOnScreen({
+  const { isOnScreen, isObserved } = useOnScreen({
     ref: containerRef,
     rootMargin: '-24px 0px 0px 0px',
     threshold: 1,
   })
 
+  useEffect(() => {
+    if (containerRef.current) {
+      setTooltip(externalTooltip)
+    }
+  }, [externalTooltip])
+
   return (
     <div
       ref={containerRef}
@@ -153,9 +160,9 @@ export const Slider = forwardRef<HTMLElement, Props>(function Slider(
             ),
           },
           valueLabel: {
-            tooltip,
+            tooltip: isObserved ? tooltip : 'off',
             onRender: handleValueLabelOnRender,
-            yPlacement: isContainerOnScreen ? 'top' : 'bottom',
+            yPlacement: isOnScreen ? 'top' : 'bottom',
             isOverlaped: isPartiallyOverlapped,
           },
         }}

packages/base/Slider/src/Slider/story/Default.example.tsx

@@ -1,16 +1,18 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Container, Slider } from '@toptal/picasso'
 
 type Value = number | number[]
 
 const Example = () => {
-  const handleChange = (_: React.ChangeEvent<{}>, value: Value) => {
-    window.console.log('onChange: ', value)
+  const [value, setValue] = useState<Value>(0)
+
+  const handleChange = (_: Event, newValue: Value) => {
+    setValue(newValue)
   }
 
   return (
     <Container>
-      <Slider onChange={handleChange} />
+      <Slider value={value} onChange={handleChange} />
     </Container>
   )
 }

packages/base/Slider/src/SliderValueLabel/SliderValueLabel.tsx

@@ -67,7 +67,7 @@ const SliderValueLabel = ({
       })
     )
     // we need to recalculate on value change to get new rect
-  }, [isOverlaped, index, xPlacement, value])
+  }, [isOverlaped, index, xPlacement, value, tooltip])
 
   return (
     <span

packages/base/Utils/src/utils/useOnScreen/use-on-screen.ts

@@ -13,13 +13,15 @@ const useOnScreen = ({
   rootMargin,
   threshold,
 }: UseOnScreenProps) => {
-  const [isIntersecting, setIntersecting] = useState(false)
+  const [isOnScreen, setIntersecting] = useState(false)
+  const [isObserved, setObserved] = useState(false)
 
   const observer = useMemo(
     () =>
       new IntersectionObserver(
         ([entry]) => {
           setIntersecting(entry.isIntersecting)
+          setObserved(true)
         },
         {
           root: root?.current,
@@ -44,7 +46,7 @@ const useOnScreen = ({
     }
   }, [observer, ref])
 
-  return isIntersecting
+  return { isOnScreen, isObserved }
 }
 
 export default useOnScreen

tailwind.config.js

@@ -3,7 +3,10 @@
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ['packages/**/*.{ts,tsx}'],
+  content: [
+    'packages/base/*/src/**/*.{ts,tsx}',
+    'packages/*/src/**/*.{ts,tsx}',
+  ],
   presets: [
     require('@toptal/base-tailwind'),
     require('@toptal/picasso-tailwind'),