diff --git a/.changeset/thick-peaches-build.md b/.changeset/thick-peaches-build.md new file mode 100644 index 0000000000..c3e94332cd --- /dev/null +++ b/.changeset/thick-peaches-build.md @@ -0,0 +1,8 @@ +--- +'@toptal/picasso-slider': patch +'@toptal/picasso': patch +--- + +### Slider + +- fix initial position of Tooltip diff --git a/.changeset/tiny-news-compete.md b/.changeset/tiny-news-compete.md new file mode 100644 index 0000000000..c603734a3f --- /dev/null +++ b/.changeset/tiny-news-compete.md @@ -0,0 +1,5 @@ +--- +'@toptal/picasso-carousel': patch +--- + +- refactor useOnScreen usage after the breaking change diff --git a/.changeset/twelve-years-play.md b/.changeset/twelve-years-play.md new file mode 100644 index 0000000000..1d18f408d7 --- /dev/null +++ b/.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({...}) +``` diff --git a/packages/base/Carousel/src/Carousel/hooks/useAutoplay/use-autoplay.ts b/packages/base/Carousel/src/Carousel/hooks/useAutoplay/use-autoplay.ts index 6b77a920d7..94ca5cd094 100644 --- a/packages/base/Carousel/src/Carousel/hooks/useAutoplay/use-autoplay.ts +++ b/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({ diff --git a/packages/base/Slider/src/Slider/Slider.tsx b/packages/base/Slider/src/Slider/Slider.tsx index e880d5c0d5..4cb2d0eeef 100644 --- a/packages/base/Slider/src/Slider/Slider.tsx +++ b/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(function Slider( marks, value, defaultValue = 0, - tooltip = 'off', + tooltip: externalTooltip = 'off', tooltipFormat, step, disabled, @@ -82,6 +82,7 @@ export const Slider = forwardRef(function Slider( 'data-private': dataPrivate, 'data-testid': dataTestid, } = props + const [tooltip, setTooltip] = React.useState('off') const containerRef = useRef(null) const sliderRef = useCombinedRefs(ref, useRef(null)) const { isPartiallyOverlapped, handleValueLabelOnRender } = useLabelOverlap({ @@ -93,12 +94,18 @@ export const Slider = forwardRef(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 (
(function Slider( ), }, valueLabel: { - tooltip, + tooltip: isObserved ? tooltip : 'off', onRender: handleValueLabelOnRender, - yPlacement: isContainerOnScreen ? 'top' : 'bottom', + yPlacement: isOnScreen ? 'top' : 'bottom', isOverlaped: isPartiallyOverlapped, }, }} diff --git a/packages/base/Slider/src/Slider/story/Default.example.tsx b/packages/base/Slider/src/Slider/story/Default.example.tsx index d64fc76dcf..3fcd43ad3d 100644 --- a/packages/base/Slider/src/Slider/story/Default.example.tsx +++ b/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(0) + + const handleChange = (_: Event, newValue: Value) => { + setValue(newValue) } return ( - + ) } diff --git a/packages/base/Slider/src/SliderValueLabel/SliderValueLabel.tsx b/packages/base/Slider/src/SliderValueLabel/SliderValueLabel.tsx index 78999d04d3..9de8b83af2 100644 --- a/packages/base/Slider/src/SliderValueLabel/SliderValueLabel.tsx +++ b/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 ( { - 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 diff --git a/tailwind.config.js b/tailwind.config.js index 58e795b015..3f0d254707 100644 --- a/tailwind.config.js +++ b/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'),