@tamagui/slider 1.0.1-beta.94 → 1.0.1-beta.97

package/dist/jsx/SliderImpl.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SliderImpl.tsx"],
-  "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplElement, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n  variants: {\n    orientation: {\n      horizontal: {},\n      vertical: {},\n    },\n  },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n  position: 'relative',\n\n  variants: {\n    size: (val, extras) => {\n      const orientation = extras.props.orientation\n      const size = Math.round(getVariableValue(getSize(val)) / 6)\n      if (orientation === 'horizontal') {\n        return {\n          height: size,\n          borderRadius: size,\n          justifyContent: 'center',\n        }\n      }\n      return {\n        width: size,\n        borderRadius: size,\n        alignItems: 'center',\n      }\n    },\n  },\n})\n\nexport const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(\n  (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n    const {\n      __scopeSlider,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onHomeKeyDown,\n      onEndKeyDown,\n      onStepKeyDown,\n      ...sliderProps\n    } = props\n    const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n    return (\n      <SliderFrame\n        size=\"$4\"\n        {...sliderProps}\n        data-orientation={sliderProps.orientation}\n        ref={forwardedRef}\n        {...(isWeb && {\n          onKeyDown: (event) => {\n            if (event.key === 'Home') {\n              onHomeKeyDown(event)\n              // Prevent scrolling to page start\n              event.preventDefault()\n            } else if (event.key === 'End') {\n              onEndKeyDown(event)\n              // Prevent scrolling to page end\n              event.preventDefault()\n            } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n              onStepKeyDown(event)\n              // Prevent scrolling for directional key presses\n              event.preventDefault()\n            }\n          },\n        })}\n        onMoveShouldSetResponderCapture={() => true}\n        onScrollShouldSetResponder={() => true}\n        onScrollShouldSetResponderCapture={() => true}\n        onMoveShouldSetResponder={() => true}\n        onStartShouldSetResponder={() => true}\n        onStartShouldSetResponderCapture={() => true}\n        onResponderTerminationRequest={() => {\n          console.log('got??/')\n          return false\n        }}\n        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n          const target = event.target as HTMLElement | number\n          const isStartingOnThumb = context.thumbs.has(event.target)\n          // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          // Touch devices have a delay before focusing so won't focus if touch immediately moves\n          // away from target (sliding). We want thumb to focus regardless.\n          if (isWeb && target instanceof HTMLElement) {\n            if (context.thumbs.has(target)) {\n              target.focus()\n            }\n          }\n          onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n        })}\n        onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n          console.log('gogo')\n          event.preventDefault()\n          event.stopPropagation()\n\n          // const target = event.target as HTMLElement\n          onSlideMove(event)\n        })}\n        onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n          // const target = event.target as HTMLElement\n          onSlideEnd(event)\n        })}\n      />\n    )\n  }\n)\n"],
-  "mappings": "AAIA;AACA;AACA;AAEA;AAGO,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM,WAC9B,CAAC,OAAqC,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,iBAAiB,aAAa,aAAa;AAC3D,SACE,CAAC,YACC,KAAK,SACD,aACJ,kBAAkB,YAAY,aAC9B,KAAK,kBACA,SAAS;AAAA,IACZ,WAAW,CAAC,UAAU;AACpB,UAAI,MAAM,QAAQ,QAAQ;AACxB,sBAAc,KAAK;AAEnB,cAAM,eAAe;AAAA,MACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,qBAAa,KAAK;AAElB,cAAM,eAAe;AAAA,MACvB,WAAW,UAAU,OAAO,UAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,sBAAc,KAAK;AAEnB,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GACA,iCAAiC,MAAM,MACvC,4BAA4B,MAAM,MAClC,mCAAmC,MAAM,MACzC,0BAA0B,MAAM,MAChC,2BAA2B,MAAM,MACjC,kCAAkC,MAAM,MACxC,+BAA+B,MAAM;AACnC,YAAQ,IAAI,QAAQ;AACpB,WAAO;AAAA,EACT,GACA,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,UAAM,SAAS,MAAM;AACrB,UAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM,MAAM;AAIzD,QAAI,SAAS,kBAAkB,aAAa;AAC1C,UAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AACA,iBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,EAC3D,CAAC,GACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,YAAQ,IAAI,MAAM;AAClB,UAAM,eAAe;AACrB,UAAM,gBAAgB;AAGtB,gBAAY,KAAK;AAAA,EACnB,CAAC,GACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,eAAW,KAAK;AAAA,EAClB,CAAC,GACH;AAEJ,CACF;",
+  "sourcesContent": ["/* -------------------------------------------------------------------------------------------------\n * SliderImpl\n * -----------------------------------------------------------------------------------------------*/\n\nimport { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'\nimport { YStack } from '@tamagui/stacks'\nimport * as React from 'react'\nimport { View } from 'react-native'\n\nimport { ARROW_KEYS, PAGE_KEYS, SLIDER_NAME, useSliderContext } from './constants'\nimport { ScopedProps, SliderImplProps } from './types'\n\nexport const DirectionalYStack = styled(YStack, {\n  variants: {\n    orientation: {\n      horizontal: {},\n      vertical: {},\n    },\n  },\n})\n\nexport const SliderFrame = styled(DirectionalYStack, {\n  position: 'relative',\n\n  variants: {\n    size: (val, extras) => {\n      const orientation = extras.props.orientation\n      const size = Math.round(getVariableValue(getSize(val)) / 6)\n      if (orientation === 'horizontal') {\n        return {\n          height: size,\n          borderRadius: size,\n          justifyContent: 'center',\n        }\n      }\n      return {\n        width: size,\n        borderRadius: size,\n        alignItems: 'center',\n      }\n    },\n  },\n})\n\nexport const SliderImpl = React.forwardRef<View, SliderImplProps>(\n  (props: ScopedProps<SliderImplProps>, forwardedRef) => {\n    const {\n      __scopeSlider,\n      onSlideStart,\n      onSlideMove,\n      onSlideEnd,\n      onHomeKeyDown,\n      onEndKeyDown,\n      onStepKeyDown,\n      ...sliderProps\n    } = props\n    const context = useSliderContext(SLIDER_NAME, __scopeSlider)\n    return (\n      <SliderFrame\n        size=\"$4\"\n        {...sliderProps}\n        data-orientation={sliderProps.orientation}\n        ref={forwardedRef}\n        {...(isWeb && {\n          onKeyDown: (event) => {\n            if (event.key === 'Home') {\n              onHomeKeyDown(event)\n              // Prevent scrolling to page start\n              event.preventDefault()\n            } else if (event.key === 'End') {\n              onEndKeyDown(event)\n              // Prevent scrolling to page end\n              event.preventDefault()\n            } else if (PAGE_KEYS.concat(ARROW_KEYS).includes(event.key)) {\n              onStepKeyDown(event)\n              // Prevent scrolling for directional key presses\n              event.preventDefault()\n            }\n          },\n        })}\n        onMoveShouldSetResponderCapture={() => true}\n        onScrollShouldSetResponder={() => true}\n        onScrollShouldSetResponderCapture={() => true}\n        onMoveShouldSetResponder={() => true}\n        onStartShouldSetResponder={() => true}\n        // onStartShouldSetResponderCapture={() => true}\n        onResponderTerminationRequest={() => {\n          return false\n        }}\n        onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {\n          const target = event.target as HTMLElement | number\n          console.log('target', target, context.thumbs.has(target), context.thumbs)\n          const isStartingOnThumb = context.thumbs.has(target)\n          // // Prevent browser focus behaviour because we focus a thumb manually when values change.\n          // Touch devices have a delay before focusing so won't focus if touch immediately moves\n          // away from target (sliding). We want thumb to focus regardless.\n          if (isWeb && target instanceof HTMLElement) {\n            if (context.thumbs.has(target)) {\n              target.focus()\n            }\n          }\n          onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')\n        })}\n        onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {\n          event.preventDefault()\n          event.stopPropagation()\n\n          // const target = event.target as HTMLElement\n          onSlideMove(event)\n        })}\n        onResponderRelease={composeEventHandlers(props.onResponderRelease, (event) => {\n          // const target = event.target as HTMLElement\n          onSlideEnd(event)\n        })}\n      />\n    )\n  }\n)\n"],
+  "mappings": "AAIA;AACA;AACA;AAGA;AAGO,MAAM,oBAAoB,OAAO,QAAQ;AAAA,EAC9C,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY,CAAC;AAAA,MACb,UAAU,CAAC;AAAA,IACb;AAAA,EACF;AACF,CAAC;AAEM,MAAM,cAAc,OAAO,mBAAmB;AAAA,EACnD,UAAU;AAAA,EAEV,UAAU;AAAA,IACR,MAAM,CAAC,KAAK,WAAW;AACrB,YAAM,cAAc,OAAO,MAAM;AACjC,YAAM,OAAO,KAAK,MAAM,iBAAiB,QAAQ,GAAG,CAAC,IAAI,CAAC;AAC1D,UAAI,gBAAgB,cAAc;AAChC,eAAO;AAAA,UACL,QAAQ;AAAA,UACR,cAAc;AAAA,UACd,gBAAgB;AAAA,QAClB;AAAA,MACF;AACA,aAAO;AAAA,QACL,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,MAAM,aAAa,MAAM,WAC9B,CAAC,OAAqC,iBAAiB;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,MACD;AACJ,QAAM,UAAU,iBAAiB,aAAa,aAAa;AAC3D,SACE,CAAC,YACC,KAAK,SACD,aACJ,kBAAkB,YAAY,aAC9B,KAAK,kBACA,SAAS;AAAA,IACZ,WAAW,CAAC,UAAU;AACpB,UAAI,MAAM,QAAQ,QAAQ;AACxB,sBAAc,KAAK;AAEnB,cAAM,eAAe;AAAA,MACvB,WAAW,MAAM,QAAQ,OAAO;AAC9B,qBAAa,KAAK;AAElB,cAAM,eAAe;AAAA,MACvB,WAAW,UAAU,OAAO,UAAU,EAAE,SAAS,MAAM,GAAG,GAAG;AAC3D,sBAAc,KAAK;AAEnB,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAAA,EACF,GACA,iCAAiC,MAAM,MACvC,4BAA4B,MAAM,MAClC,mCAAmC,MAAM,MACzC,0BAA0B,MAAM,MAChC,2BAA2B,MAAM,MAEjC,+BAA+B,MAAM;AACnC,WAAO;AAAA,EACT,GACA,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;AACxE,UAAM,SAAS,MAAM;AACrB,YAAQ,IAAI,UAAU,QAAQ,QAAQ,OAAO,IAAI,MAAM,GAAG,QAAQ,MAAM;AACxE,UAAM,oBAAoB,QAAQ,OAAO,IAAI,MAAM;AAInD,QAAI,SAAS,kBAAkB,aAAa;AAC1C,UAAI,QAAQ,OAAO,IAAI,MAAM,GAAG;AAC9B,eAAO,MAAM;AAAA,MACf;AAAA,IACF;AACA,iBAAa,OAAO,oBAAoB,UAAU,OAAO;AAAA,EAC3D,CAAC,GACD,iBAAiB,qBAAqB,MAAM,iBAAiB,CAAC,UAAU;AACtE,UAAM,eAAe;AACrB,UAAM,gBAAgB;AAGtB,gBAAY,KAAK;AAAA,EACnB,CAAC,GACD,oBAAoB,qBAAqB,MAAM,oBAAoB,CAAC,UAAU;AAE5E,eAAW,KAAK;AAAA,EAClB,CAAC,GACH;AAEJ,CACF;",
   "names": []
 }

package/dist/jsx/helpers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/helpers.tsx"],
-  "sourcesContent": ["import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'\n\nexport function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2) {\n    return `Value ${index + 1} of ${totalValues}`\n  } else if (totalValues === 2) {\n    return ['Minimum', 'Maximum'][index]\n  } else {\n    return undefined\n  }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1) return 0\n  const distances = values.map((value) => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = Math.pow(10, decimalCount)\n  return Math.round(value * rounder) / rounder\n}\n"],
-  "mappings": "AAEO,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,8BAA8B,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
+  "sourcesContent": ["export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {\n  const nextValues = [...prevValues]\n  nextValues[atIndex] = nextValue\n  return nextValues.sort((a, b) => a - b)\n}\n\nexport function convertValueToPercentage(value: number, min: number, max: number) {\n  const maxSteps = max - min\n  const percentPerStep = 100 / maxSteps\n  return percentPerStep * (value - min)\n}\n\n/**\n * Returns a label for each thumb when there are two or more thumbs\n */\nexport function getLabel(index: number, totalValues: number) {\n  if (totalValues > 2) {\n    return `Value ${index + 1} of ${totalValues}`\n  } else if (totalValues === 2) {\n    return ['Minimum', 'Maximum'][index]\n  } else {\n    return undefined\n  }\n}\n\n/**\n * Given a `values` array and a `nextValue`, determine which value in\n * the array is closest to `nextValue` and return its index.\n *\n * @example\n * // returns 1\n * getClosestValueIndex([10, 30], 25);\n */\nexport function getClosestValueIndex(values: number[], nextValue: number) {\n  if (values.length === 1) return 0\n  const distances = values.map((value) => Math.abs(value - nextValue))\n  const closestDistance = Math.min(...distances)\n  return distances.indexOf(closestDistance)\n}\n\n/**\n * Offsets the thumb centre point while sliding to ensure it remains\n * within the bounds of the slider when reaching the edges\n */\nexport function getThumbInBoundsOffset(width: number, left: number, direction: number) {\n  const halfWidth = width / 2\n  const halfPercent = 50\n  const offset = linearScale([0, halfPercent], [0, halfWidth])\n  return (halfWidth - offset(left) * direction) * direction\n}\n\n/**\n * Gets an array of steps between each value.\n *\n * @example\n * // returns [1, 9]\n * getStepsBetweenValues([10, 11, 20]);\n */\nfunction getStepsBetweenValues(values: number[]) {\n  return values.slice(0, -1).map((value, index) => values[index + 1] - value)\n}\n\n/**\n * Verifies the minimum steps between all values is greater than or equal\n * to the expected minimum steps.\n *\n * @example\n * // returns false\n * hasMinStepsBetweenValues([1,2,3], 2);\n *\n * @example\n * // returns true\n * hasMinStepsBetweenValues([1,2,3], 1);\n */\nexport function hasMinStepsBetweenValues(values: number[], minStepsBetweenValues: number) {\n  if (minStepsBetweenValues > 0) {\n    const stepsBetweenValues = getStepsBetweenValues(values)\n    const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues)\n    return actualMinStepsBetweenValues >= minStepsBetweenValues\n  }\n  return true\n}\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nexport function linearScale(input: readonly [number, number], output: readonly [number, number]) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1]) return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getDecimalCount(value: number) {\n  return (String(value).split('.')[1] || '').length\n}\n\nexport function roundValue(value: number, decimalCount: number) {\n  const rounder = Math.pow(10, decimalCount)\n  return Math.round(value * rounder) / rounder\n}\n"],
+  "mappings": "AAAO,6BAA6B,aAAuB,CAAC,GAAG,WAAmB,SAAiB;AACjG,QAAM,aAAa,CAAC,GAAG,UAAU;AACjC,aAAW,WAAW;AACtB,SAAO,WAAW,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACxC;AAEO,kCAAkC,OAAe,KAAa,KAAa;AAChF,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,SAAO,iBAAkB,SAAQ;AACnC;AAKO,kBAAkB,OAAe,aAAqB;AAC3D,MAAI,cAAc,GAAG;AACnB,WAAO,SAAS,QAAQ,QAAQ;AAAA,EAClC,WAAW,gBAAgB,GAAG;AAC5B,WAAO,CAAC,WAAW,SAAS,EAAE;AAAA,EAChC,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAUO,8BAA8B,QAAkB,WAAmB;AACxE,MAAI,OAAO,WAAW;AAAG,WAAO;AAChC,QAAM,YAAY,OAAO,IAAI,CAAC,UAAU,KAAK,IAAI,QAAQ,SAAS,CAAC;AACnE,QAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAC7C,SAAO,UAAU,QAAQ,eAAe;AAC1C;AAMO,gCAAgC,OAAe,MAAc,WAAmB;AACrF,QAAM,YAAY,QAAQ;AAC1B,QAAM,cAAc;AACpB,QAAM,SAAS,YAAY,CAAC,GAAG,WAAW,GAAG,CAAC,GAAG,SAAS,CAAC;AAC3D,SAAQ,aAAY,OAAO,IAAI,IAAI,aAAa;AAClD;AASA,+BAA+B,QAAkB;AAC/C,SAAO,OAAO,MAAM,GAAG,EAAE,EAAE,IAAI,CAAC,OAAO,UAAU,OAAO,QAAQ,KAAK,KAAK;AAC5E;AAcO,kCAAkC,QAAkB,uBAA+B;AACxF,MAAI,wBAAwB,GAAG;AAC7B,UAAM,qBAAqB,sBAAsB,MAAM;AACvD,UAAM,8BAA8B,KAAK,IAAI,GAAG,kBAAkB;AAClE,WAAO,+BAA+B;AAAA,EACxC;AACA,SAAO;AACT;AAGO,qBAAqB,OAAkC,QAAmC;AAC/F,SAAO,CAAC,UAAkB;AACxB,QAAI,MAAM,OAAO,MAAM,MAAM,OAAO,OAAO,OAAO;AAAI,aAAO,OAAO;AACpE,UAAM,QAAS,QAAO,KAAK,OAAO,MAAO,OAAM,KAAK,MAAM;AAC1D,WAAO,OAAO,KAAK,QAAS,SAAQ,MAAM;AAAA,EAC5C;AACF;AAEO,yBAAyB,OAAe;AAC7C,SAAQ,QAAO,KAAK,EAAE,MAAM,GAAG,EAAE,MAAM,IAAI;AAC7C;AAEO,oBAAoB,OAAe,cAAsB;AAC9D,QAAM,UAAU,KAAK,IAAI,IAAI,YAAY;AACzC,SAAO,KAAK,MAAM,QAAQ,OAAO,IAAI;AACvC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/slider",
-  "version": "1.0.1-beta.94",
+  "version": "1.0.1-beta.97",
   "sideEffects": [
     "*.css"
   ],
@@ -21,12 +21,12 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-beta.94",
-    "@tamagui/core": "^1.0.1-beta.94",
-    "@tamagui/create-context": "^1.0.1-beta.94",
-    "@tamagui/stacks": "^1.0.1-beta.94",
-    "@tamagui/use-controllable-state": "^1.0.1-beta.94",
-    "@tamagui/use-direction": "^1.0.1-beta.94"
+    "@tamagui/compose-refs": "^1.0.1-beta.97",
+    "@tamagui/core": "^1.0.1-beta.97",
+    "@tamagui/create-context": "^1.0.1-beta.97",
+    "@tamagui/stacks": "^1.0.1-beta.97",
+    "@tamagui/use-controllable-state": "^1.0.1-beta.97",
+    "@tamagui/use-direction": "^1.0.1-beta.97"
   },
   "peerDependencies": {
     "react": "*",
@@ -34,7 +34,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.94",
+    "@tamagui/build": "^1.0.1-beta.97",
     "@types/react-native": "^0.67.3",
     "react": "*",
     "react-dom": "*",

package/src/Slider.tsx

@@ -1,13 +1,21 @@
 // forked from radix-ui
 
-import { useComposedRefs } from '@tamagui/compose-refs'
-import { getSize, isWeb, styled, withStaticProperties } from '@tamagui/core'
+import { composeRefs, useComposedRefs } from '@tamagui/compose-refs'
+import {
+  GetProps,
+  SizeTokens,
+  getSize,
+  getVariableValue,
+  isWeb,
+  styled,
+  withStaticProperties,
+} from '@tamagui/core'
 import { clamp, composeEventHandlers } from '@tamagui/helpers'
-import { SizableStackProps, ThemeableStack, YStackProps } from '@tamagui/stacks'
+import { SizableStackProps, ThemeableStack } from '@tamagui/stacks'
 import { useControllableState } from '@tamagui/use-controllable-state'
 import { useDirection } from '@tamagui/use-direction'
 import * as React from 'react'
-import { LayoutRectangle, View } from 'react-native'
+import { View } from 'react-native'
 
 import {
   ARROW_KEYS,
@@ -35,7 +43,6 @@ import {
   ScopedProps,
   SliderContextValue,
   SliderHorizontalProps,
-  SliderImplElement,
   SliderProps,
   SliderTrackProps,
   SliderVerticalProps,
@@ -45,20 +52,16 @@ import {
  * SliderHorizontal
  * -----------------------------------------------------------------------------------------------*/
 
-type SliderHorizontalElement = SliderImplElement
-
-const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizontalProps>(
+const SliderHorizontal = React.forwardRef<View, SliderHorizontalProps>(
   (props: ScopedProps<SliderHorizontalProps>, forwardedRef) => {
     const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props
     const direction = useDirection(dir)
     const isDirectionLTR = direction === 'ltr'
-    const layoutRef = React.useRef<LayoutRectangle | null>(null)
-    const [size, setSize] = React.useState(0)
+    const sliderRef = React.useRef<View>(null)
+    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))
 
     function getValueFromPointer(pointerPosition: number) {
-      const layout = layoutRef.current
-      if (!layout) return
-      const input: [number, number] = [0, layout.width]
+      const input: [number, number] = [0, state.size]
       const output: [number, number] = isDirectionLTR ? [min, max] : [max, min]
       const value = linearScale(input, output)
       return value(pointerPosition)
@@ -71,17 +74,20 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
         endEdge={isDirectionLTR ? 'right' : 'left'}
         direction={isDirectionLTR ? 1 : -1}
         sizeProp="width"
-        size={size}
+        size={state.size}
       >
         <SliderImpl
-          ref={forwardedRef}
+          ref={composeRefs(forwardedRef, sliderRef)}
           dir={direction}
           {...sliderProps}
           orientation="horizontal"
-          onLayout={(e) => {
-            const layout = e.nativeEvent.layout
-            layoutRef.current = layout
-            setSize(layout.height)
+          onLayout={() => {
+            sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
+              setState({
+                size: width,
+                offset: pageX,
+              })
+            })
           }}
           onSlideStart={(event, target) => {
             const value = getValueFromPointer(event.nativeEvent.locationX)
@@ -90,7 +96,7 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.locationX)
+            const value = getValueFromPointer(event.nativeEvent.pageX - state.offset)
             if (value) {
               onSlideMove?.(value)
             }
@@ -110,18 +116,14 @@ const SliderHorizontal = React.forwardRef<SliderHorizontalElement, SliderHorizon
  * SliderVertical
  * -----------------------------------------------------------------------------------------------*/
 
-type SliderVerticalElement = SliderImplElement
-
-const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalProps>(
+const SliderVertical = React.forwardRef<View, SliderVerticalProps>(
   (props: ScopedProps<SliderVerticalProps>, forwardedRef) => {
     const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props
-    const layoutRef = React.useRef<LayoutRectangle | null>(null)
-    const [size, setSize] = React.useState(0)
+    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }))
+    const sliderRef = React.useRef<View>(null)
 
     function getValueFromPointer(pointerPosition: number) {
-      const layout = layoutRef.current
-      if (!layout) return
-      const input: [number, number] = [0, layout.height]
+      const input: [number, number] = [0, state.size]
       const output: [number, number] = [max, min]
       const value = linearScale(input, output)
       return value(pointerPosition)
@@ -133,17 +135,20 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
         startEdge="bottom"
         endEdge="top"
         sizeProp="height"
-        size={size}
+        size={state.size}
         direction={1}
       >
         <SliderImpl
-          ref={forwardedRef}
+          ref={composeRefs(forwardedRef, sliderRef)}
           {...sliderProps}
           orientation="vertical"
-          onLayout={(e) => {
-            const layout = e.nativeEvent.layout
-            layoutRef.current = layout
-            setSize(layout.height)
+          onLayout={() => {
+            sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+              setState({
+                size: height,
+                offset: pageY,
+              })
+            })
           }}
           onSlideStart={(event, target) => {
             const value = getValueFromPointer(event.nativeEvent.locationY)
@@ -152,7 +157,7 @@ const SliderVertical = React.forwardRef<SliderVerticalElement, SliderVerticalPro
             }
           }}
           onSlideMove={(event) => {
-            const value = getValueFromPointer(event.nativeEvent.locationY)
+            const value = getValueFromPointer(event.nativeEvent.pageY - state.offset)
             if (value) {
               onSlideMove?.(value)
             }
@@ -211,21 +216,20 @@ SliderTrack.displayName = TRACK_NAME
 
 const RANGE_NAME = 'SliderTrackActive'
 
-type SliderTrackActiveElement = HTMLElement | View
-interface SliderTrackActiveProps extends YStackProps {}
-
 export const SliderTrackActiveFrame = styled(SliderFrame, {
   name: 'SliderTrackActive',
   backgroundColor: '$background',
   position: 'absolute',
 })
 
-const SliderTrackActive = React.forwardRef<SliderTrackActiveElement, SliderTrackActiveProps>(
+type SliderTrackActiveProps = GetProps<typeof SliderTrackActiveFrame>
+
+const SliderTrackActive = React.forwardRef<View, SliderTrackActiveProps>(
   (props: ScopedProps<SliderTrackActiveProps>, forwardedRef) => {
     const { __scopeSlider, ...rangeProps } = props
     const context = useSliderContext(RANGE_NAME, __scopeSlider)
     const orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider)
-    const ref = React.useRef<HTMLSpanElement>(null)
+    const ref = React.useRef<View>(null)
     const composedRefs = useComposedRefs(forwardedRef, ref)
     const valuesCount = context.values.length
     const percentages = context.values.map((value) =>
@@ -267,6 +271,18 @@ SliderTrackActive.displayName = RANGE_NAME
 
 const THUMB_NAME = 'SliderThumb'
 
+// TODO make this customizable through tamagui
+// so we can accurately use it for estimatedSize below
+const getThumbSize = (val?: SizeTokens | number) => {
+  const size = typeof val === 'number' ? val : getSize(val, -1)
+  return {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size,
+  }
+}
+
 export const SliderThumbFrame = styled(ThemeableStack, {
   name: 'SliderThumb',
   position: 'absolute',
@@ -281,25 +297,16 @@ export const SliderThumbFrame = styled(ThemeableStack, {
 
   variants: {
     size: {
-      '...size': (val) => {
-        const size = typeof val === 'number' ? val : getSize(val, -1)
-        return {
-          width: size,
-          height: size,
-          minWidth: size,
-          minHeight: size,
-        }
-      },
+      '...size': getThumbSize,
     },
   },
 })
 
-type SliderThumbElement = HTMLElement | View
 interface SliderThumbProps extends SizableStackProps {
   index: number
 }
 
-const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
+const SliderThumb = React.forwardRef<View, SliderThumbProps>(
   (props: ScopedProps<SliderThumbProps>, forwardedRef) => {
     const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props
     const context = useSliderContext(THUMB_NAME, __scopeSlider)
@@ -312,7 +319,11 @@ const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
     const percent =
       value === undefined ? 0 : convertValueToPercentage(value, context.min, context.max)
     const label = getLabel(index, context.values.length)
-    const [size, setSize] = React.useState(0)
+    const [size, setSize] = React.useState(() => {
+      // for SSR
+      const estimatedSize = getVariableValue(getThumbSize(sizeProp).width)
+      return estimatedSize
+    })
 
     const thumbInBoundsOffset = size
       ? getThumbInBoundsOffset(size, percent, orientation.direction)
@@ -340,8 +351,6 @@ const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
         aria-orientation={context.orientation}
         data-orientation={context.orientation}
         data-disabled={context.disabled ? '' : undefined}
-        // TODO
-        // @ts-ignore
         tabIndex={context.disabled ? undefined : 0}
         {...thumbProps}
         {...(context.orientation === 'horizontal'
@@ -380,11 +389,6 @@ const SliderThumb = React.forwardRef<SliderThumbElement, SliderThumbProps>(
         onFocus={composeEventHandlers(props.onFocus, () => {
           context.valueIndexToChangeRef.current = index
         })}
-        // temp fix to make slider work nicely on native
-        // we just let the events propagate to the track
-        {...(!isWeb && {
-          pointerEvents: 'none',
-        })}
       />
     )
   }
@@ -396,10 +400,8 @@ SliderThumb.displayName = THUMB_NAME
  * Slider
  * -----------------------------------------------------------------------------------------------*/
 
-type SliderElement = SliderHorizontalElement | SliderVerticalElement
-
 const Slider = withStaticProperties(
-  React.forwardRef<SliderElement, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {
+  React.forwardRef<View, SliderProps>((props: ScopedProps<SliderProps>, forwardedRef) => {
     const {
       name,
       min = 0,
@@ -414,14 +416,14 @@ const Slider = withStaticProperties(
       size: sizeProp,
       ...sliderProps
     } = props
-    const sliderRef = React.useRef<SliderImplElement>(null)
+    const sliderRef = React.useRef<View>(null)
     const composedRefs = useComposedRefs(sliderRef, forwardedRef)
     const thumbRefs = React.useRef<SliderContextValue['thumbs']>(new Set())
     const valueIndexToChangeRef = React.useRef<number>(0)
     const isHorizontal = orientation === 'horizontal'
     // We set this to true by default so that events bubble to forms without JS (SSR)
-    // TODO
-    // const isFormControl = slider ? Boolean(slider.closest('form')) : true
+    // const isFormControl =
+    //   sliderRef.current instanceof HTMLElement ? Boolean(sliderRef.current.closest('form')) : true
 
     const [values = [], setValues] = useControllableState({
       prop: value,
@@ -437,6 +439,7 @@ const Slider = withStaticProperties(
 
     if (isWeb) {
       React.useEffect(() => {
+        // @ts-ignore
         const node = sliderRef.current as HTMLElement
         if (!node) return
         const preventDefault = (e) => {
@@ -538,7 +541,7 @@ Slider.displayName = SLIDER_NAME
 
 /* -----------------------------------------------------------------------------------------------*/
 
-// TODO
+// // TODO
 // const BubbleInput = (props: any) => {
 //   const { value, ...inputProps } = props
 //   const ref = React.useRef<HTMLInputElement>(null)

package/src/SliderImpl.tsx

@@ -5,9 +5,10 @@
 import { composeEventHandlers, getSize, getVariableValue, isWeb, styled } from '@tamagui/core'
 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 { ScopedProps, SliderImplElement, SliderImplProps } from './types'
+import { ScopedProps, SliderImplProps } from './types'
 
 export const DirectionalYStack = styled(YStack, {
   variants: {
@@ -41,7 +42,7 @@ export const SliderFrame = styled(DirectionalYStack, {
   },
 })
 
-export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
+export const SliderImpl = React.forwardRef<View, SliderImplProps>(
   (props: ScopedProps<SliderImplProps>, forwardedRef) => {
     const {
       __scopeSlider,
@@ -82,14 +83,14 @@ export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
         onScrollShouldSetResponderCapture={() => true}
         onMoveShouldSetResponder={() => true}
         onStartShouldSetResponder={() => true}
-        onStartShouldSetResponderCapture={() => true}
+        // onStartShouldSetResponderCapture={() => true}
         onResponderTerminationRequest={() => {
-          console.log('got??/')
           return false
         }}
         onResponderGrant={composeEventHandlers(props.onResponderGrant, (event) => {
           const target = event.target as HTMLElement | number
-          const isStartingOnThumb = context.thumbs.has(event.target)
+          console.log('target', target, context.thumbs.has(target), context.thumbs)
+          const isStartingOnThumb = context.thumbs.has(target)
           // // Prevent browser focus behaviour because we focus a thumb manually when values change.
           // Touch devices have a delay before focusing so won't focus if touch immediately moves
           // away from target (sliding). We want thumb to focus regardless.
@@ -101,7 +102,6 @@ export const SliderImpl = React.forwardRef<SliderImplElement, SliderImplProps>(
           onSlideStart(event, isStartingOnThumb ? 'thumb' : 'track')
         })}
         onResponderMove={composeEventHandlers(props.onResponderMove, (event) => {
-          console.log('gogo')
           event.preventDefault()
           event.stopPropagation()
 

package/src/helpers.tsx

@@ -1,5 +1,3 @@
-import { SizeTokens, getTokens, getVariableValue } from '@tamagui/core'
-
 export function getNextSortedValues(prevValues: number[] = [], nextValue: number, atIndex: number) {
   const nextValues = [...prevValues]
   nextValues[atIndex] = nextValue

package/src/types.ts

@@ -1,14 +1,11 @@
 import type { GestureReponderEvent, SizeTokens } from '@tamagui/core'
 import type { Scope } from '@tamagui/create-context'
 import type { SizableStackProps } from '@tamagui/stacks'
-import type { View } from 'react-native'
 
 export type ScopedProps<P> = P & { __scopeSlider?: Scope }
 
 export type Direction = 'ltr' | 'rtl'
 
-export type SliderImplElement = HTMLElement | View
-
 type SliderImplPrivateProps = {
   onSlideStart(event: GestureReponderEvent, target: 'thumb' | 'track'): void
   onSlideMove(event: GestureReponderEvent): void