@radix-ui/react-slider - npm Package Compare versions

Comparing version 1.0.1-rc.2 to 1.0.1-rc.3

dist/index.d.ts

@@ -18,2 +18,3 @@ import * as React from "react";
     onValueChange?(value: number[]): void;
+    inverted?: boolean;
 }
@@ -24,2 +25,3 @@ export const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
     max: number;
+    inverted: boolean;
     onSlideStart?(value: number): void;
@@ -26,0 +28,0 @@ onSlideMove?(value: number): void;

dist/index.js

@@ -53,13 +53,25 @@ var $inrcs$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 const $1791bb30e2e418d5$var$BACK_KEYS = {
-    ltr: [
+    'from-left': [
+        'Home',
+        'PageDown',
         'ArrowDown',
+        'ArrowLeft'
+    ],
+    'from-right': [
         'Home',
-        'ArrowLeft',
-        'PageDown'
+        'PageDown',
+        'ArrowDown',
+        'ArrowRight'
     ],
-    rtl: [
+    'from-bottom': [
+        'Home',
+        'PageDown',
         'ArrowDown',
+        'ArrowLeft'
+    ],
+    'from-top': [
         'Home',
-        'ArrowRight',
-        'PageDown'
+        'PageDown',
+        'ArrowUp',
+        'ArrowLeft'
     ]
@@ -78,3 +90,3 @@ };
         min
-    ] , value: value1 , onValueChange: onValueChange = ()=>{} , ...sliderProps } = props;
+    ] , value: value1 , onValueChange: onValueChange = ()=>{} , inverted: inverted = false , ...sliderProps } = props;
     const [slider, setSlider] = $inrcs$react.useState(null);
@@ -142,2 +154,3 @@ const composedRefs = $inrcs$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setSlider(node)
         max: max,
+        inverted: inverted,
         onSlideStart: disabled ? undefined : handleSlideStart,
@@ -179,3 +192,3 @@ onSlideMove: disabled ? undefined : handleSlideMove,
 const $1791bb30e2e418d5$var$SliderHorizontal = /*#__PURE__*/ $inrcs$react.forwardRef((props, forwardedRef)=>{
-    const { min: min , max: max , dir: dir , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
+    const { min: min , max: max , dir: dir , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
     const [slider, setSlider] = $inrcs$react.useState(null);
@@ -187,2 +200,3 @@ const composedRefs = $inrcs$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setSlider(node)
     const isDirectionLTR = direction === 'ltr';
+    const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
     function getValueFromPointer(pointerPosition) {
@@ -194,3 +208,3 @@ const rect = rectRef.current || slider.getBoundingClientRect();
         ];
-        const output = isDirectionLTR ? [
+        const output = isSlidingFromLeft ? [
             min,
@@ -208,5 +222,5 @@ max
         scope: props.__scopeSlider,
-        startEdge: isDirectionLTR ? 'left' : 'right',
-        endEdge: isDirectionLTR ? 'right' : 'left',
-        direction: isDirectionLTR ? 1 : -1,
+        startEdge: isSlidingFromLeft ? 'left' : 'right',
+        endEdge: isSlidingFromLeft ? 'right' : 'left',
+        direction: isSlidingFromLeft ? 1 : -1,
         size: "width"
@@ -233,3 +247,4 @@ }, /*#__PURE__*/ $inrcs$react.createElement($1791bb30e2e418d5$var$SliderImpl, ($parcel$interopDefault($inrcs$babelruntimehelpersextends))({
         onStepKeyDown: (event)=>{
-            const isBackKey = $1791bb30e2e418d5$var$BACK_KEYS[direction].includes(event.key);
+            const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';
+            const isBackKey = $1791bb30e2e418d5$var$BACK_KEYS[slideDirection].includes(event.key);
             onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
@@ -245,6 +260,7 @@ event: event,
  * -----------------------------------------------------------------------------------------------*/ const $1791bb30e2e418d5$var$SliderVertical = /*#__PURE__*/ $inrcs$react.forwardRef((props, forwardedRef)=>{
-    const { min: min , max: max , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
+    const { min: min , max: max , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
     const sliderRef = $inrcs$react.useRef(null);
     const ref = $inrcs$radixuireactcomposerefs.useComposedRefs(forwardedRef, sliderRef);
     const rectRef = $inrcs$react.useRef();
+    const isSlidingFromBottom = !inverted;
     function getValueFromPointer(pointerPosition) {
@@ -256,5 +272,8 @@ const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
         ];
-        const output = [
+        const output = isSlidingFromBottom ? [
             max,
             min
+        ] : [
+            min,
+            max
         ];
@@ -267,6 +286,6 @@ const value = $1791bb30e2e418d5$var$linearScale(input, output);
         scope: props.__scopeSlider,
-        startEdge: "bottom",
-        endEdge: "top",
+        startEdge: isSlidingFromBottom ? 'bottom' : 'top',
+        endEdge: isSlidingFromBottom ? 'top' : 'bottom',
         size: "height",
-        direction: 1
+        direction: isSlidingFromBottom ? 1 : -1
     }, /*#__PURE__*/ $inrcs$react.createElement($1791bb30e2e418d5$var$SliderImpl, ($parcel$interopDefault($inrcs$babelruntimehelpersextends))({
@@ -291,3 +310,4 @@ "data-orientation": "vertical"
         onStepKeyDown: (event)=>{
-            const isBackKey = $1791bb30e2e418d5$var$BACK_KEYS.ltr.includes(event.key);
+            const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';
+            const isBackKey = $1791bb30e2e418d5$var$BACK_KEYS[slideDirection].includes(event.key);
             onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
@@ -294,0 +314,0 @@ event: event,

dist/index.module.js

@@ -37,13 +37,25 @@ import $g1Vy2$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
 const $faa2e61a3361514f$var$BACK_KEYS = {
-    ltr: [
+    'from-left': [
+        'Home',
+        'PageDown',
         'ArrowDown',
+        'ArrowLeft'
+    ],
+    'from-right': [
         'Home',
-        'ArrowLeft',
-        'PageDown'
+        'PageDown',
+        'ArrowDown',
+        'ArrowRight'
     ],
-    rtl: [
+    'from-bottom': [
+        'Home',
+        'PageDown',
         'ArrowDown',
+        'ArrowLeft'
+    ],
+    'from-top': [
         'Home',
-        'ArrowRight',
-        'PageDown'
+        'PageDown',
+        'ArrowUp',
+        'ArrowLeft'
     ]
@@ -62,3 +74,3 @@ };
         min
-    ] , value: value1 , onValueChange: onValueChange = ()=>{} , ...sliderProps } = props;
+    ] , value: value1 , onValueChange: onValueChange = ()=>{} , inverted: inverted = false , ...sliderProps } = props;
     const [slider, setSlider] = $g1Vy2$useState(null);
@@ -126,2 +138,3 @@ const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setSlider(node)
         max: max,
+        inverted: inverted,
         onSlideStart: disabled ? undefined : handleSlideStart,
@@ -163,3 +176,3 @@ onSlideMove: disabled ? undefined : handleSlideMove,
 const $faa2e61a3361514f$var$SliderHorizontal = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
-    const { min: min , max: max , dir: dir , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
+    const { min: min , max: max , dir: dir , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
     const [slider, setSlider] = $g1Vy2$useState(null);
@@ -171,2 +184,3 @@ const composedRefs = $g1Vy2$useComposedRefs(forwardedRef, (node)=>setSlider(node)
     const isDirectionLTR = direction === 'ltr';
+    const isSlidingFromLeft = isDirectionLTR && !inverted || !isDirectionLTR && inverted;
     function getValueFromPointer(pointerPosition) {
@@ -178,3 +192,3 @@ const rect = rectRef.current || slider.getBoundingClientRect();
         ];
-        const output = isDirectionLTR ? [
+        const output = isSlidingFromLeft ? [
             min,
@@ -192,5 +206,5 @@ max
         scope: props.__scopeSlider,
-        startEdge: isDirectionLTR ? 'left' : 'right',
-        endEdge: isDirectionLTR ? 'right' : 'left',
-        direction: isDirectionLTR ? 1 : -1,
+        startEdge: isSlidingFromLeft ? 'left' : 'right',
+        endEdge: isSlidingFromLeft ? 'right' : 'left',
+        direction: isSlidingFromLeft ? 1 : -1,
         size: "width"
@@ -217,3 +231,4 @@ }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderImpl, $g1Vy2$babelruntimehelpersesmextends({
         onStepKeyDown: (event)=>{
-            const isBackKey = $faa2e61a3361514f$var$BACK_KEYS[direction].includes(event.key);
+            const slideDirection = isSlidingFromLeft ? 'from-left' : 'from-right';
+            const isBackKey = $faa2e61a3361514f$var$BACK_KEYS[slideDirection].includes(event.key);
             onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
@@ -229,6 +244,7 @@ event: event,
  * -----------------------------------------------------------------------------------------------*/ const $faa2e61a3361514f$var$SliderVertical = /*#__PURE__*/ $g1Vy2$forwardRef((props, forwardedRef)=>{
-    const { min: min , max: max , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
+    const { min: min , max: max , inverted: inverted , onSlideStart: onSlideStart , onSlideMove: onSlideMove , onStepKeyDown: onStepKeyDown , ...sliderProps } = props;
     const sliderRef = $g1Vy2$useRef(null);
     const ref = $g1Vy2$useComposedRefs(forwardedRef, sliderRef);
     const rectRef = $g1Vy2$useRef();
+    const isSlidingFromBottom = !inverted;
     function getValueFromPointer(pointerPosition) {
@@ -240,5 +256,8 @@ const rect = rectRef.current || sliderRef.current.getBoundingClientRect();
         ];
-        const output = [
+        const output = isSlidingFromBottom ? [
             max,
             min
+        ] : [
+            min,
+            max
         ];
@@ -251,6 +270,6 @@ const value = $faa2e61a3361514f$var$linearScale(input, output);
         scope: props.__scopeSlider,
-        startEdge: "bottom",
-        endEdge: "top",
+        startEdge: isSlidingFromBottom ? 'bottom' : 'top',
+        endEdge: isSlidingFromBottom ? 'top' : 'bottom',
         size: "height",
-        direction: 1
+        direction: isSlidingFromBottom ? 1 : -1
     }, /*#__PURE__*/ $g1Vy2$createElement($faa2e61a3361514f$var$SliderImpl, $g1Vy2$babelruntimehelpersesmextends({
@@ -275,3 +294,4 @@ "data-orientation": "vertical"
         onStepKeyDown: (event)=>{
-            const isBackKey = $faa2e61a3361514f$var$BACK_KEYS.ltr.includes(event.key);
+            const slideDirection = isSlidingFromBottom ? 'from-bottom' : 'from-top';
+            const isBackKey = $faa2e61a3361514f$var$BACK_KEYS[slideDirection].includes(event.key);
             onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
@@ -278,0 +298,0 @@ event: event,

package.json

 {
   "name": "@radix-ui/react-slider",
-  "version": "1.0.1-rc.2",
+  "version": "1.0.1-rc.3",
   "license": "MIT",
@@ -22,7 +22,7 @@ "source": "src/index.ts",
     "@radix-ui/primitive": "1.0.0",
-    "@radix-ui/react-collection": "1.0.1-rc.2",
+    "@radix-ui/react-collection": "1.0.1-rc.3",
     "@radix-ui/react-compose-refs": "1.0.0",
     "@radix-ui/react-context": "1.0.0",
     "@radix-ui/react-direction": "1.0.0",
-    "@radix-ui/react-primitive": "1.0.1-rc.2",
+    "@radix-ui/react-primitive": "1.0.1-rc.3",
     "@radix-ui/react-use-controllable-state": "1.0.0",
@@ -29,0 +29,0 @@ "@radix-ui/react-use-layout-effect": "1.0.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168567

increased by2.86%

Lines of code

1236

increased by3.52%

Dependency changes

• + Added@radix-ui/react-collection@1.0.1-rc.3(transitive)

• + Added@radix-ui/react-primitive@1.0.1-rc.3(transitive)

• - Removed@radix-ui/react-collection@1.0.1-rc.2(transitive)

• - Removed@radix-ui/react-primitive@1.0.1-rc.2(transitive)

• Updated@radix-ui/react-collection@1.0.1-rc.3

• Updated@radix-ui/react-primitive@1.0.1-rc.3