@react-spectrum/slider - npm Package Compare versions

Comparing version 3.0.0-nightly.2497 to 3.0.0-nightly.2507

dist/main.js

@@ -31,5 +31,5 @@ var _babelRuntimeHelpersInteropRequireDefault = $parcel$interopDefault(require("@babel/runtime/helpers/interopRequireDefault"));
 var {
-  useSliderState,
   DEFAULT_MAX_VALUE,
-  DEFAULT_MIN_VALUE
+  DEFAULT_MIN_VALUE,
+  useSliderState
 } = require("@react-stately/slider");
@@ -77,2 +77,3 @@
   "spectrum-Dial-labelContainer": "_spectrum-Dial-labelContainer_acd08",
+  "spectrum-Slider-valueLabelContainer": "_spectrum-Slider-valueLabelContainer_acd08",
   "spectrum-Slider-value": "_spectrum-Slider-value_acd08",
@@ -118,15 +119,15 @@ "spectrum-Slider-track": "_spectrum-Slider-track_acd08",
     labelPosition = 'top',
-    valueLabel,
+    getValueLabel,
     showValueLabel = !!props.label,
-    formatOptions
+    formatOptions,
+    minValue = DEFAULT_MIN_VALUE,
+    maxValue = DEFAULT_MAX_VALUE
   } = props,
-      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["isDisabled", "children", "classes", "style", "labelPosition", "valueLabel", "showValueLabel", "formatOptions"]);
+      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["isDisabled", "children", "classes", "style", "labelPosition", "getValueLabel", "showValueLabel", "formatOptions", "minValue", "maxValue"]);
 
   let {
     styleProps
-  } = useStyleProps(otherProps); // Assumes that DEFAULT_MIN_VALUE and DEFAULT_MAX_VALUE are both positive, this value needs to be passed to useSliderState, so
-  // getThumbMinValue/getThumbMaxValue cannot be used here.
-  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign and neither is null.
+  } = useStyleProps(otherProps); // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.
 
-  let alwaysDisplaySign = props.minValue != null && props.maxValue != null && Math.abs(Math.sign(props.minValue) - Math.sign(props.maxValue)) === 2;
+  let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;
 
@@ -162,10 +163,26 @@ if (alwaysDisplaySign) {
   let domRef = useFocusableRef(ref, inputRef);
-  let displayValue = valueLabel;
+  let displayValue = '';
   let maxLabelLength = undefined;
 
-  if (!displayValue) {
-    maxLabelLength = Math.max([...formatter.format(state.getThumbMinValue(0))].length, [...formatter.format(state.getThumbMaxValue(0))].length);
+  if (typeof getValueLabel === 'function') {
+    displayValue = getValueLabel(state.values);
 
     switch (state.values.length) {
       case 1:
+        maxLabelLength = Math.max(getValueLabel([minValue]).length, getValueLabel([maxValue]).length);
+        break;
+
+      case 2:
+        // Try all possible combinations of min and max values.
+        maxLabelLength = Math.max(getValueLabel([minValue, minValue]).length, getValueLabel([minValue, maxValue]).length, getValueLabel([maxValue, minValue]).length, getValueLabel([maxValue, maxValue]).length);
+        break;
+
+      default:
+        throw new Error('Only sliders with 1 or 2 handles are supported!');
+    }
+  } else {
+    maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
+
+    switch (state.values.length) {
+      case 1:
         displayValue = state.getThumbValueLabel(0);
@@ -179,3 +196,3 @@ break;
         displayValue = state.getThumbValueLabel(0) + " \u2013 " + state.getThumbValueLabel(1);
-        maxLabelLength = 3 + 2 * Math.max(maxLabelLength, [...formatter.format(state.getThumbMinValue(1))].length, [...formatter.format(state.getThumbMaxValue(1))].length);
+        maxLabelLength = 3 + 2 * Math.max(maxLabelLength, [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
         break;
@@ -221,3 +238,3 @@
   })), labelPosition === 'side' && /*#__PURE__*/_react.createElement("div", {
-    className: classNames($c8f0b01c76499f8ceef39abc1b587900$$interop$default, 'spectrum-Slider-labelContainer'),
+    className: classNames($c8f0b01c76499f8ceef39abc1b587900$$interop$default, 'spectrum-Slider-valueLabelContainer'),
     role: "presentation"
@@ -278,5 +295,6 @@ }, showValueLabel && valueNode));
     fillOffset,
-    trackGradient
+    trackGradient,
+    getValueLabel
   } = props,
-      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue", "isFilled", "fillOffset", "trackGradient"]);
+      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue", "isFilled", "fillOffset", "trackGradient", "getValueLabel"]);
 
@@ -290,4 +308,8 @@ let baseProps = _babelRuntimeHelpersExtends({}, otherProps, {
       onChange == null ? void 0 : onChange(v[0]);
-    }
+    },
 
+    getValueLabel: getValueLabel ? (_ref) => {
+      let [v] = _ref;
+      return getValueLabel(v);
+    } : undefined
   });
@@ -307,3 +329,3 @@
     }
-  }), (_ref) => {
+  }), (_ref2) => {
     let {
@@ -313,3 +335,3 @@ trackRef,
       state
-    } = _ref;
+    } = _ref2;
     fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;
@@ -511,5 +533,6 @@ let cssDirection = direction === 'rtl' ? 'right' : 'left';
     value,
-    defaultValue
+    defaultValue,
+    getValueLabel
   } = props,
-      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue"]);
+      otherProps = _babelRuntimeHelpersObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue", "getValueLabel"]);
 
@@ -526,4 +549,11 @@ let baseProps = _babelRuntimeHelpersExtends({}, otherProps, {
       });
-    }
+    },
 
+    getValueLabel: getValueLabel ? (_ref) => {
+      let [start, end] = _ref;
+      return getValueLabel({
+        start,
+        end
+      });
+    } : undefined
   });
@@ -538,3 +568,3 @@
     ref: ref
-  }), (_ref) => {
+  }), (_ref2) => {
     let {
@@ -544,3 +574,3 @@ trackRef,
       state
-    } = _ref;
+    } = _ref2;
     let cssDirection = direction === 'rtl' ? 'right' : 'left';
@@ -547,0 +577,0 @@ return /*#__PURE__*/_react.createElement(_react.Fragment, null, /*#__PURE__*/_react.createElement("div", {

dist/module.js

@@ -8,3 +8,3 @@ import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
 import { useNumberFormatter, useLocale, useMessageFormatter } from "@react-aria/i18n";
-import { useSliderState, DEFAULT_MAX_VALUE, DEFAULT_MIN_VALUE } from "@react-stately/slider";
+import { DEFAULT_MAX_VALUE, DEFAULT_MIN_VALUE, useSliderState } from "@react-stately/slider";
 import _react, { useRef } from "react";
@@ -32,2 +32,3 @@ import { classNames, useFocusableRef, useStyleProps } from "@react-spectrum/utils";
   "spectrum-Dial-labelContainer": "_spectrum-Dial-labelContainer_acd08",
+  "spectrum-Slider-valueLabelContainer": "_spectrum-Slider-valueLabelContainer_acd08",
   "spectrum-Slider-value": "_spectrum-Slider-value_acd08",
@@ -73,15 +74,15 @@ "spectrum-Slider-track": "_spectrum-Slider-track_acd08",
     labelPosition = 'top',
-    valueLabel,
+    getValueLabel,
     showValueLabel = !!props.label,
-    formatOptions
+    formatOptions,
+    minValue = DEFAULT_MIN_VALUE,
+    maxValue = DEFAULT_MAX_VALUE
   } = props,
-      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["isDisabled", "children", "classes", "style", "labelPosition", "valueLabel", "showValueLabel", "formatOptions"]);
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["isDisabled", "children", "classes", "style", "labelPosition", "getValueLabel", "showValueLabel", "formatOptions", "minValue", "maxValue"]);
 
   let {
     styleProps
-  } = useStyleProps(otherProps); // Assumes that DEFAULT_MIN_VALUE and DEFAULT_MAX_VALUE are both positive, this value needs to be passed to useSliderState, so
-  // getThumbMinValue/getThumbMaxValue cannot be used here.
-  // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign and neither is null.
+  } = useStyleProps(otherProps); // `Math.abs(Math.sign(a) - Math.sign(b)) === 2` is true if the values have a different sign.
 
-  let alwaysDisplaySign = props.minValue != null && props.maxValue != null && Math.abs(Math.sign(props.minValue) - Math.sign(props.maxValue)) === 2;
+  let alwaysDisplaySign = Math.abs(Math.sign(minValue) - Math.sign(maxValue)) === 2;
 
@@ -117,10 +118,26 @@ if (alwaysDisplaySign) {
   let domRef = useFocusableRef(ref, inputRef);
-  let displayValue = valueLabel;
+  let displayValue = '';
   let maxLabelLength = undefined;
 
-  if (!displayValue) {
-    maxLabelLength = Math.max([...formatter.format(state.getThumbMinValue(0))].length, [...formatter.format(state.getThumbMaxValue(0))].length);
+  if (typeof getValueLabel === 'function') {
+    displayValue = getValueLabel(state.values);
 
     switch (state.values.length) {
       case 1:
+        maxLabelLength = Math.max(getValueLabel([minValue]).length, getValueLabel([maxValue]).length);
+        break;
+
+      case 2:
+        // Try all possible combinations of min and max values.
+        maxLabelLength = Math.max(getValueLabel([minValue, minValue]).length, getValueLabel([minValue, maxValue]).length, getValueLabel([maxValue, minValue]).length, getValueLabel([maxValue, maxValue]).length);
+        break;
+
+      default:
+        throw new Error('Only sliders with 1 or 2 handles are supported!');
+    }
+  } else {
+    maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
+
+    switch (state.values.length) {
+      case 1:
         displayValue = state.getThumbValueLabel(0);
@@ -134,3 +151,3 @@ break;
         displayValue = state.getThumbValueLabel(0) + " \u2013 " + state.getThumbValueLabel(1);
-        maxLabelLength = 3 + 2 * Math.max(maxLabelLength, [...formatter.format(state.getThumbMinValue(1))].length, [...formatter.format(state.getThumbMaxValue(1))].length);
+        maxLabelLength = 3 + 2 * Math.max(maxLabelLength, [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);
         break;
@@ -176,3 +193,3 @@
   })), labelPosition === 'side' && /*#__PURE__*/_react.createElement("div", {
-    className: classNames($eba6840c1d0392d10739f5de841f2b2$$interop$default, 'spectrum-Slider-labelContainer'),
+    className: classNames($eba6840c1d0392d10739f5de841f2b2$$interop$default, 'spectrum-Slider-valueLabelContainer'),
     role: "presentation"
@@ -233,5 +250,6 @@ }, showValueLabel && valueNode));
     fillOffset,
-    trackGradient
+    trackGradient,
+    getValueLabel
   } = props,
-      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue", "isFilled", "fillOffset", "trackGradient"]);
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue", "isFilled", "fillOffset", "trackGradient", "getValueLabel"]);
 
@@ -245,4 +263,8 @@ let baseProps = _babelRuntimeHelpersEsmExtends({}, otherProps, {
       onChange == null ? void 0 : onChange(v[0]);
-    }
+    },
 
+    getValueLabel: getValueLabel ? (_ref) => {
+      let [v] = _ref;
+      return getValueLabel(v);
+    } : undefined
   });
@@ -262,3 +284,3 @@
     }
-  }), (_ref) => {
+  }), (_ref2) => {
     let {
@@ -268,3 +290,3 @@ trackRef,
       state
-    } = _ref;
+    } = _ref2;
     fillOffset = fillOffset != null ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : fillOffset;
@@ -464,5 +486,6 @@ let cssDirection = direction === 'rtl' ? 'right' : 'left';
     value,
-    defaultValue
+    defaultValue,
+    getValueLabel
   } = props,
-      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue"]);
+      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["onChange", "value", "defaultValue", "getValueLabel"]);
 
@@ -479,4 +502,11 @@ let baseProps = _babelRuntimeHelpersEsmExtends({}, otherProps, {
       });
-    }
+    },
 
+    getValueLabel: getValueLabel ? (_ref) => {
+      let [start, end] = _ref;
+      return getValueLabel({
+        start,
+        end
+      });
+    } : undefined
   });
@@ -491,3 +521,3 @@
     ref: ref
-  }), (_ref) => {
+  }), (_ref2) => {
     let {
@@ -497,3 +527,3 @@ trackRef,
       state
-    } = _ref;
+    } = _ref2;
     let cssDirection = direction === 'rtl' ? 'right' : 'left';
@@ -500,0 +530,0 @@ return /*#__PURE__*/_react.createElement(_react.Fragment, null, /*#__PURE__*/_react.createElement("div", {

package.json

 {
   "name": "@react-spectrum/slider",
-  "version": "3.0.0-nightly.2497+e91d2ed3",
+  "version": "3.0.0-nightly.2507+7e6b4464",
   "description": "Spectrum UI components in React",
@@ -35,15 +35,15 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "3.0.0-nightly.819+e91d2ed3",
-    "@react-aria/i18n": "3.0.0-nightly.819+e91d2ed3",
-    "@react-aria/interactions": "3.0.0-nightly.819+e91d2ed3",
-    "@react-aria/slider": "3.0.0-nightly.2497+e91d2ed3",
-    "@react-aria/utils": "3.0.0-nightly.819+e91d2ed3",
-    "@react-aria/visually-hidden": "3.0.0-nightly.819+e91d2ed3",
-    "@react-spectrum/utils": "3.0.0-nightly.819+e91d2ed3",
-    "@react-stately/slider": "3.0.0-nightly.2497+e91d2ed3",
-    "@react-types/shared": "3.0.0-nightly.819+e91d2ed3",
-    "@react-types/slider": "3.0.0-nightly.2497+e91d2ed3"
+    "@react-aria/focus": "3.0.0-nightly.829+7e6b4464",
+    "@react-aria/i18n": "3.0.0-nightly.829+7e6b4464",
+    "@react-aria/interactions": "3.0.0-nightly.829+7e6b4464",
+    "@react-aria/slider": "3.0.0-nightly.2507+7e6b4464",
+    "@react-aria/utils": "3.0.0-nightly.829+7e6b4464",
+    "@react-aria/visually-hidden": "3.0.0-nightly.829+7e6b4464",
+    "@react-spectrum/utils": "3.0.0-nightly.829+7e6b4464",
+    "@react-stately/slider": "3.0.0-nightly.2507+7e6b4464",
+    "@react-types/shared": "3.0.0-nightly.829+7e6b4464",
+    "@react-types/slider": "3.0.0-nightly.2507+7e6b4464"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.819+e91d2ed3"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.829+7e6b4464"
   },
@@ -57,3 +57,3 @@ "peerDependencies": {
   },
-  "gitHead": "e91d2ed382218e2edafb82ded03f9f69f5ece77c"
+  "gitHead": "7e6b4464325888e177a56fff21b0a12dae673197"
 }

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

235207

increased by3.24%

Lines of code

1645

increased by5.18%

Dependency changes

• Updated@react-aria/focus@3.0.0-nightly.829+7e6b4464

• Updated@react-aria/i18n@3.0.0-nightly.829+7e6b4464

• Updated@react-aria/interactions@3.0.0-nightly.829+7e6b4464

• Updated@react-aria/slider@3.0.0-nightly.2507+7e6b4464

• Updated@react-aria/utils@3.0.0-nightly.829+7e6b4464

• Updated@react-aria/visually-hidden@3.0.0-nightly.829+7e6b4464

• Updated@react-spectrum/utils@3.0.0-nightly.829+7e6b4464

• Updated@react-stately/slider@3.0.0-nightly.2507+7e6b4464

• Updated@react-types/shared@3.0.0-nightly.829+7e6b4464

• Updated@react-types/slider@3.0.0-nightly.2507+7e6b4464