@tamagui/slider 2.7.7 → 3.0.0-beta.1093.1

package/src/Slider.tsx

@@ -5,24 +5,25 @@ import { isIos, isWeb } from '@tamagui/constants'
 import type {
   GestureReponderEvent,
   GetProps,
+  SizeResolverEnv,
   SizeTokens,
   TamaguiElement,
 } from '@tamagui/core'
 import {
-  getTokens,
+  createStyledHOC,
+  createRefComponent,
   getVariableValue,
+  resolveSize,
   styled,
   useConfiguration,
   useCreateShallowSetState,
 } from '@tamagui/core'
-import { getSize } from '@tamagui/get-token'
 import { clamp, composeEventHandlers, withStaticProperties } from '@tamagui/helpers'
-import type { SizableStackProps } from '@tamagui/stacks'
-import { ThemeableStack } from '@tamagui/stacks'
+import { YStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import * as React from 'react'
-import type { View } from 'react-native'
+import type { View } from '@tamagui/react-native-types'
 
 import {
   ARROW_KEYS,
@@ -56,27 +57,63 @@ import type {
 } from './types'
 
 const activeSliderMeasureListeners = new Set<Function>()
+let activeSliderMeasureInterval: ReturnType<typeof setInterval> | undefined
 
 // run an interval on web as using translate can move things at any moment
 // without triggering layout or intersection observers
+function startSliderMeasureInterval() {
+  if (
+    process.env.TAMAGUI_TARGET !== 'web' ||
+    activeSliderMeasureInterval !== undefined ||
+    process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL
+  ) {
+    return
+  }
 
-if (process.env.TAMAGUI_TARGET === 'web') {
-  if (!process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) {
-    setInterval?.(
-      () => {
-        activeSliderMeasureListeners.forEach((cb) => cb())
-      },
-      // really doesn't need to be super often
-      1000
-    )
+  activeSliderMeasureInterval = setInterval(() => {
+    activeSliderMeasureListeners.forEach((cb) => cb())
+  }, 1000)
+}
+
+function addActiveSliderMeasureListener(listener: Function) {
+  activeSliderMeasureListeners.add(listener)
+  startSliderMeasureInterval()
+}
+
+function removeActiveSliderMeasureListener(listener: Function) {
+  activeSliderMeasureListeners.delete(listener)
+  if (!activeSliderMeasureListeners.size && activeSliderMeasureInterval !== undefined) {
+    clearInterval(activeSliderMeasureInterval)
+    activeSliderMeasureInterval = undefined
   }
 }
 
+// on web a responder event's pageX/pageY come straight off the DOM event and are
+// document-relative, while `measure` reports the track through getBoundingClientRect
+// and is viewport-relative. subtracting the cached offset therefore mixes origins and
+// the thumb lags the cursor by exactly the page scroll (#4146). locationX/locationY
+// are `client - track.getBoundingClientRect()`, read fresh on every event, so they
+// need no offset at all - which is why onSlideStart was already correct. that also
+// closes the window where the cached offset is stale: nothing re-measures on scroll,
+// only on resize, an IntersectionObserver threshold crossing, and a 1s interval.
+// native measures the track and the touch against the screen, so it keeps the offset.
+const getTrackPosition = (
+  event: GestureReponderEvent,
+  offset: number,
+  orientation: 'horizontal' | 'vertical'
+) => {
+  const { locationX, locationY, pageX, pageY } = event.nativeEvent
+  if (isWeb) {
+    return orientation === 'horizontal' ? locationX : locationY
+  }
+  return (orientation === 'horizontal' ? pageX : pageY) - offset
+}
+
 /* -------------------------------------------------------------------------------------------------
  * SliderHorizontal
  * -----------------------------------------------------------------------------------------------*/
 
-const SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(
+const SliderHorizontal = createRefComponent<View, SliderHorizontalProps>(
   (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {
     const {
       min,
@@ -136,13 +173,17 @@ const SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'horizontal')
+            )
             if (value) {
               onSlideMove?.(value, event)
             }
           }}
           onSlideEnd={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'horizontal')
+            )
             if (value) {
               onSlideEnd?.(event, value)
             }
@@ -191,9 +232,9 @@ function useSliderMeasure(sliderRef: React.RefObject<View | null>, measure: () =
       (entries) => {
         debouncedMeasure()
         if (entries?.[0].isIntersecting) {
-          activeSliderMeasureListeners.add(debouncedMeasure)
+          addActiveSliderMeasureListener(debouncedMeasure)
         } else {
-          activeSliderMeasureListeners.delete(debouncedMeasure)
+          removeActiveSliderMeasureListener(debouncedMeasure)
         }
       },
       {
@@ -206,7 +247,7 @@ function useSliderMeasure(sliderRef: React.RefObject<View | null>, measure: () =
     io.observe(node)
 
     return () => {
-      activeSliderMeasureListeners.delete(debouncedMeasure)
+      removeActiveSliderMeasureListener(debouncedMeasure)
       io.disconnect()
     }
   }, [])
@@ -216,7 +257,7 @@ function useSliderMeasure(sliderRef: React.RefObject<View | null>, measure: () =
  * SliderVertical
  * -----------------------------------------------------------------------------------------------*/
 
-const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
+const SliderVertical = createRefComponent<View, SliderVerticalProps>(
   (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {
     const {
       min,
@@ -276,13 +317,17 @@ const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'vertical')
+            )
             if (value) {
               onSlideMove?.(value, event)
             }
           }}
           onSlideEnd={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)
+            const value = getValueFromPointer(
+              getTrackPosition(event, state.offset, 'vertical')
+            )
             onSlideEnd?.(event, value)
           }}
           onStepKeyDown={(event) => {
@@ -301,28 +346,20 @@ const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
 
 type SliderTrackElement = TamaguiElement
 
+// Unstyled track frame: fill + clip only. Track color and radius live in the
+// tamagui skin (code/ui/tamagui/src/components/Slider.tsx).
 export const SliderTrackFrame = styled(SliderFrame, {
-  name: 'Slider',
-
-  variants: {
-    unstyled: {
-      false: {
-        height: '100%',
-        width: '100%',
-        backgroundColor: '$background',
-        position: 'relative',
-        borderRadius: 100_000,
-        overflow: 'hidden',
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
+  displayName: 'Slider',
+  height: '100%',
+  width: '100%',
+  position: 'relative',
+  overflow: 'hidden',
 })
 
-const SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(
+// createStyledHOC (not createRefComponent) so the tamagui skin can layer track
+// color/radius via styled(Slider.Track, { ... }); the render body is unchanged.
+const SliderTrack = createStyledHOC(
+  SliderTrackFrame,
   function SliderTrack(props: ScopedProps<SliderTrackProps>, forwardedRef) {
     const { __scopeSlider, ...trackProps } = props
     const context = useSliderContext(__scopeSlider)
@@ -331,7 +368,7 @@ const SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(
         data-disabled={context.disabled ? '' : undefined}
         data-orientation={context.orientation}
         orientation={context.orientation}
-        size={context.size}
+        size={context.size ?? undefined}
         {...trackProps}
         ref={forwardedRef}
       />
@@ -343,134 +380,118 @@ const SliderTrack = React.forwardRef<SliderTrackElement, SliderTrackProps>(
  * SliderActive
  * -----------------------------------------------------------------------------------------------*/
 
+// Unstyled active-range frame: positioning only. Fill color and radius live in
+// the tamagui skin.
 export const SliderActiveFrame = styled(SliderFrame, {
-  name: 'SliderActive',
+  displayName: 'SliderActive',
   position: 'absolute',
   pointerEvents: 'box-none',
-
-  variants: {
-    unstyled: {
-      false: {
-        backgroundColor: '$background',
-        borderRadius: 100_000,
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
 type SliderActiveProps = GetProps<typeof SliderActiveFrame>
 
-const SliderActive = React.forwardRef<View, SliderActiveProps>(function SliderActive(
-  props: ScopedProps<SliderActiveProps>,
-  forwardedRef
-) {
-  const { __scopeSlider, ...rangeProps } = props
-  const context = useSliderContext(__scopeSlider)
-  const orientation = useSliderOrientationContext(__scopeSlider)
-  const ref = React.useRef<View>(null)
-  const composedRefs = useComposedRefs(forwardedRef, ref)
-  const valuesCount = context.values.length
-  const percentages = context.values.map((value) =>
-    convertValueToPercentage(value, context.min, context.max)
-  )
-  const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0
-  const offsetEnd = 100 - Math.max(...percentages)
-
-  return (
-    <SliderActiveFrame
-      orientation={context.orientation}
-      data-orientation={context.orientation}
-      data-disabled={context.disabled ? '' : undefined}
-      size={context.size}
-      animateOnly={['left', 'top', 'right', 'bottom']}
-      {...rangeProps}
-      ref={composedRefs}
-      {...{
-        [orientation.startEdge]: `${offsetStart}%`,
-        [orientation.endEdge]: `${offsetEnd}%`,
-      }}
-      {...(orientation.sizeProp === 'width'
-        ? {
-            height: '100%',
-          }
-        : {
-            left: 0,
-            right: 0,
-          })}
-    />
-  )
-})
+// createStyledHOC so the tamagui skin can layer active-range color/radius via
+// styled(Slider.TrackActive, { ... }); the render body is unchanged.
+const SliderActive = createStyledHOC(
+  SliderActiveFrame,
+  function SliderActive(props: ScopedProps<SliderActiveProps>, forwardedRef) {
+    const { __scopeSlider, ...rangeProps } = props
+    const context = useSliderContext(__scopeSlider)
+    const orientation = useSliderOrientationContext(__scopeSlider)
+    const ref = React.useRef<View>(null)
+    const composedRefs = useComposedRefs(forwardedRef, ref)
+    const valuesCount = context.values.length
+    const percentages = context.values.map((value) =>
+      convertValueToPercentage(value, context.min, context.max)
+    )
+    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0
+    const offsetEnd = 100 - Math.max(...percentages)
+
+    return (
+      <SliderActiveFrame
+        orientation={context.orientation}
+        data-orientation={context.orientation}
+        data-disabled={context.disabled ? '' : undefined}
+        size={context.size ?? undefined}
+        {...rangeProps}
+        ref={composedRefs}
+        {...{
+          [orientation.startEdge]: `${offsetStart}%`,
+          [orientation.endEdge]: `${offsetEnd}%`,
+        }}
+        {...(orientation.sizeProp === 'width'
+          ? {
+              height: '100%',
+            }
+          : {
+              left: 0,
+              right: 0,
+            })}
+      />
+    )
+  }
+)
 
 /* -------------------------------------------------------------------------------------------------
  * SliderThumb
  * -----------------------------------------------------------------------------------------------*/
 
-// TODO make this customizable through tamagui
-// so we can accurately use it for estimatedSize below
-const getThumbSize = (val?: SizeTokens | number) => {
-  const tokens = getTokens()
-  const size =
-    typeof val === 'number'
-      ? val
-      : getSize(tokens.size[val as any] as any, {
-          shift: -1,
-        })
+// the thumb is a line-height tall circle: 20px at md. without a styled env
+// (the SSR estimate below) it measures against the config's default font
+const thumbSize = (val: SizeTokens | number | true, env?: SizeResolverEnv) => {
+  if (typeof val === 'number') return val
+  const { text } = resolveSize(val, env)
+  return getVariableValue(text.lineHeight ?? text.fontSize) as number
+}
+
+const getThumbSize = styled.dynamic<SizeTokens | number | true>((val, env) => {
+  const size = thumbSize(val, env)
   return {
     width: size,
     height: size,
     minWidth: size,
     minHeight: size,
   }
-}
+})
 
-export const SliderThumbFrame = styled(ThemeableStack, {
-  name: 'SliderThumb',
+// Unstyled thumb frame: positioning + the size mechanism (hit-target
+// dimensions) + the circular shape modifier (opt-in, off by default). Border,
+// background, and hover/press/focus color styling live in the tamagui skin.
+export const SliderThumbFrame = styled(YStack, {
+  displayName: 'SliderThumb',
+  position: 'absolute',
 
   variants: {
-    size: {
-      '...size': getThumbSize,
-      ':number': getThumbSize,
+    size: getThumbSize,
+
+    circular: {
+      true: {
+        borderRadius: 100_000,
+        padding: 0,
+      },
     },
 
-    unstyled: {
-      false: {
-        position: 'absolute',
-        borderWidth: 2,
-        borderColor: '$borderColor',
-        backgroundColor: '$background',
-        pressStyle: {
-          backgroundColor: '$backgroundPress',
-          borderColor: '$borderColorPress',
-        },
-        hoverStyle: {
-          backgroundColor: '$backgroundHover',
-          borderColor: '$borderColorHover',
-        },
-        focusVisibleStyle: {
-          outlineStyle: 'solid',
-          outlineWidth: 2,
-          outlineColor: '$outlineColor',
-        },
+    // opt-in v2-compat elevate (formerly from ThemeableStack), off by default.
+    // On the frame (the animated node), not a skin wrapper — a variant block on a
+    // wrapper breaks the native animation driver's interpolation.
+    elevate: {
+      true: {
+        shadowColor: 'shadow-color',
+        shadowRadius: 4,
+        shadowOffset: { width: 0, height: 2 },
       },
     },
   } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
 })
 
 export interface SliderThumbExtraProps {
   index?: number
 }
 
-export interface SliderThumbProps extends SizableStackProps, SliderThumbExtraProps {}
+export type SliderThumbProps = GetProps<typeof SliderThumbFrame> & SliderThumbExtraProps
 
-const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
+const SliderThumb = createStyledHOC(
+  SliderThumbFrame,
   function SliderThumb(props: ScopedProps<SliderThumbProps>, forwardedRef) {
     const { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props
     const context = useSliderContext(__scopeSlider)
@@ -483,12 +504,9 @@ const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
     const percent =
       value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)
     const label = getLabel(index, context.values.length)
-    const sizeIn = sizeProp ?? context.size ?? '$true'
-    const [size, setSize] = React.useState(() => {
-      // for SSR
-      const estimatedSize = getVariableValue(getThumbSize(sizeIn).width) as number
-      return estimatedSize
-    })
+    const sizeIn = (sizeProp ?? context.size ?? true) as SizeTokens | number | true
+    // for SSR
+    const [size, setSize] = React.useState(() => thumbSize(sizeIn))
 
     const thumbInBoundsOffset = size
       ? getThumbInBoundsOffset(size, percent, orientation.direction)
@@ -536,7 +554,6 @@ const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
         data-orientation={context.orientation}
         data-disabled={context.disabled ? '' : undefined}
         tabIndex={context.disabled ? undefined : 0}
-        animateOnly={['transform', 'left', 'top', 'right', 'bottom']}
         {...positionalStyles}
         {...{
           [orientation.startEdge]: `${percent}%`,
@@ -571,7 +588,7 @@ const SliderThumb = SliderThumbFrame.styleable<SliderThumbExtraProps>(
  * Slider
  * -----------------------------------------------------------------------------------------------*/
 
-const SliderComponent = React.forwardRef(
+const SliderComponent = createRefComponent(
   (props: ScopedProps<SliderProps>, forwardedRef) => {
     const {
       name,
@@ -709,14 +726,11 @@ const SliderComponent = React.forwardRef(
             }
           }}
         />
-        {/* {isFormControl &&
-        values.map((value, index) => (
-          <BubbleInput
-            key={index}
-            name={name ? name + (values.length > 1 ? '[]' : '') : undefined}
-            value={value}
-          />
-        ))} */}
+        {isWeb &&
+          name &&
+          values.map((value, index) => (
+            <input key={index} type="hidden" name={name} value={value} />
+          ))}
       </SliderProvider>
     )
   }
@@ -730,41 +744,6 @@ const Slider = withStaticProperties(SliderComponent, {
 
 Slider.displayName = SLIDER_NAME
 
-/* -----------------------------------------------------------------------------------------------*/
-
-// // TODO
-// const BubbleInput = (props: any) => {
-//   const { value, ...inputProps } = props
-//   const ref = React.useRef<HTMLInputElement>(null)
-//   const prevValue = usePrevious(value)
-
-//   // Bubble value change to parents (e.g form change event)
-//   React.useEffect(() => {
-//     const input = ref.current!
-//     const inputProto = window.HTMLInputElement.prototype
-//     const descriptor = Object.getOwnPropertyDescriptor(inputProto, 'value') as PropertyDescriptor
-//     const setValue = descriptor.set
-//     if (prevValue !== value && setValue) {
-//       const event = new Event('input', { bubbles: true })
-//       setValue.call(input, value)
-//       input.dispatchEvent(event)
-//     }
-//   }, [prevValue, value])
-
-//   /**
-//    * We purposefully do not use `type="hidden"` here otherwise forms that
-//    * wrap it will not be able to access its value via the FormData API.
-//    *
-//    * We purposefully do not add the `value` attribute here to allow the value
-//    * to be set programatically and bubble to any parent form `onChange` event.
-//    * Adding the `value` will cause React to consider the programatic
-//    * dispatch a duplicate and it will get swallowed.
-//    */
-//   return <input style={{ display: 'none' }} {...inputProps} ref={ref} defaultValue={value} />
-// }
-
-/* -----------------------------------------------------------------------------------------------*/
-
 const Track = SliderTrack
 const Range = SliderActive
 const Thumb = SliderThumb

package/src/SliderImpl.tsx

@@ -1,3 +1,4 @@
+import { createRefComponent } from '@tamagui/core'
 /* -------------------------------------------------------------------------------------------------
  * SliderImpl
  * -----------------------------------------------------------------------------------------------*/
@@ -8,12 +9,12 @@ import { getVariableValue, styled } from '@tamagui/core'
 import { getSize } from '@tamagui/get-token'
 import { YStack } from '@tamagui/stacks'
 import * as React from 'react'
-import { View } from 'react-native'
 
 import { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'
+import { SliderResponder } from './SliderResponder'
 import type { ScopedProps, SliderImplProps } from './types'
 
-export const SliderFrame = styled(YStack, {
+const SliderFrameBase = styled(YStack, {
   position: 'relative',
 
   variants: {
@@ -22,29 +23,28 @@ export const SliderFrame = styled(YStack, {
       vertical: {},
     },
 
-    size: (val, extras) => {
-      if (!val) {
-        return
-      }
-      const orientation = extras.props['orientation']
-      const size = Math.round(getVariableValue(getSize(val)) / 6)
-      if (orientation === 'horizontal') {
-        return {
-          height: size,
-          borderRadius: size,
-          justifyContent: 'center',
-        }
-      }
-      return {
-        width: size,
-        borderRadius: size,
-        alignItems: 'center',
-      }
-    },
+    size: styled.dynamic<SliderImplProps['size']>(),
   } as const,
 })
 
-export const SliderImpl = React.forwardRef<View, SliderImplProps>(
+export const SliderFrame = SliderFrameBase.resolve((props) => {
+  if (!props.size) return
+  const size = Math.round(getVariableValue(getSize(props.size as any)) / 6)
+  if (props.orientation === 'horizontal') {
+    return {
+      height: size,
+      borderRadius: size,
+      justifyContent: 'center',
+    }
+  }
+  return {
+    width: size,
+    borderRadius: size,
+    alignItems: 'center',
+  }
+})
+
+export const SliderImpl = createRefComponent<TamaguiElement, SliderImplProps>(
   (props: ScopedProps<SliderImplProps>, forwardedRef) => {
     const {
       __scopeSlider,
@@ -104,10 +104,8 @@ export const SliderImpl = React.forwardRef<View, SliderImplProps>(
     )
 
     return (
-      // wrap with plain RN View for responder events - tamagui views no longer handle responder events on web
-
       <SliderFrame
-        size="$4"
+        size="4"
         ref={forwardedRef as any}
         {...sliderProps}
         data-orientation={sliderProps.orientation}
@@ -129,18 +127,13 @@ export const SliderImpl = React.forwardRef<View, SliderImplProps>(
           },
         })}
       >
-        <View
-          onMoveShouldSetResponderCapture={() => true}
-          onMoveShouldSetResponder={() => true}
-          onStartShouldSetResponder={() => true}
-          onResponderTerminationRequest={() => false}
+        <SliderResponder
           onResponderGrant={handleResponderGrant}
           onResponderMove={handleResponderMove}
           onResponderRelease={handleResponderRelease}
-          style={{ inset: 0, position: 'absolute' }}
         >
           {children}
-        </View>
+        </SliderResponder>
       </SliderFrame>
     )
   }

package/src/SliderResponder.native.tsx

@@ -0,0 +1,25 @@
+import { View } from 'react-native'
+
+import type { SliderResponderProps } from './types'
+
+export const SliderResponder = ({
+  onResponderGrant,
+  onResponderMove,
+  onResponderRelease,
+  children,
+}: SliderResponderProps) => {
+  return (
+    <View
+      onMoveShouldSetResponderCapture={() => true}
+      onMoveShouldSetResponder={() => true}
+      onStartShouldSetResponder={() => true}
+      onResponderTerminationRequest={() => false}
+      onResponderGrant={onResponderGrant}
+      onResponderMove={onResponderMove}
+      onResponderRelease={onResponderRelease}
+      style={{ inset: 0, position: 'absolute' }}
+    >
+      {children}
+    </View>
+  )
+}