@pingux/astro 2.124.0-alpha.1 → 2.124.0-alpha.3

package/lib/cjs/components/SliderField/SliderActiveTrack.js

@@ -15,14 +15,13 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "isHorizontal", "isMultiThumb", "state", "sx"];
+var _excluded = ["className", "isHorizontal", "isMultiThumb", "length", "sx", "trackStart"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -31,11 +30,10 @@ var SliderActiveTrack = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
   var className = props.className,
     isHorizontal = props.isHorizontal,
     isMultiThumb = props.isMultiThumb,
-    state = props.state,
+    length = props.length,
     sx = props.sx,
+    trackStart = props.trackStart,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var length = isMultiThumb ? "".concat((0, _values["default"])(state)[1] - (0, _values["default"])(state)[0], "%") : "".concat((0, _values["default"])(state)[0], "%");
-  var trackStart = "".concat((0, _values["default"])(state)[0], "%");
   var cssLenProp = isHorizontal ? 'width' : 'height';
   var cssStartProp = isHorizontal ? 'left' : 'top';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({

package/lib/cjs/components/SliderField/SliderField.stories.d.ts

@@ -4,7 +4,9 @@ export default _default;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
 }) => React.JSX.Element;
-export declare const Controlled: () => React.JSX.Element;
+export declare const Controlled: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;
 export declare const Vertical: () => React.JSX.Element;
 export declare const MultiThumb: () => React.JSX.Element;
 export declare const ControlledMultiThumb: () => React.JSX.Element;

package/lib/cjs/components/SliderField/SliderField.stories.js

@@ -81,22 +81,22 @@ var loremText = 'Lorem ipsum';
 var Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return (0, _react2.jsx)(_index.SliderField, (0, _extends2["default"])({
-    label: loremText,
-    defaultValue: 40
+    label: loremText
   }, args));
 };
 exports.Default = Default;
-var Controlled = function Controlled() {
-  var _useState = (0, _react.useState)(0),
+var Controlled = function Controlled(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+  var _useState = (0, _react.useState)(75),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  return (0, _react2.jsx)(_index.SliderField, {
+  return (0, _react2.jsx)(_index.SliderField, (0, _extends2["default"])({}, args, {
     value: value,
     onChange: setValue,
     displayValue: "(".concat(value, "px)"),
     label: loremText
-  });
+  }));
 };
 exports.Controlled = Controlled;
 var Vertical = function Vertical() {
@@ -110,7 +110,10 @@ exports.Vertical = Vertical;
 var MultiThumb = function MultiThumb() {
   return (0, _react2.jsx)(_index.SliderField, {
     label: loremText,
-    isMultiThumb: true
+    isMultiThumb: true,
+    defaultValue: [100, 180],
+    maxValue: 540,
+    minValue: 40
   });
 };
 exports.MultiThumb = MultiThumb;

package/lib/cjs/components/SliderField/SliderField.test.js

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _useSliderField = require("../../hooks/useSliderField/useSliderField");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _universalFormSubmitTest = require("../../utils/testUtils/universalFormSubmitTest");
@@ -354,4 +355,54 @@ describe('SliderField Component', function () {
       padding: '20px'
     });
   });
+});
+describe('getLengthValues', function () {
+  it('should calculate correct values for a single thumb slider', function () {
+    var minValue = 0;
+    var maxValue = 100;
+    var state = {
+      values: [50]
+    };
+    var result = (0, _useSliderField.getLengthValues)(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '50%',
+      trackStart: '50%'
+    });
+  });
+  it('should calculate correct values for a multi-thumb slider', function () {
+    var minValue = 0;
+    var maxValue = 100;
+    var state = {
+      values: [30, 70]
+    };
+    var result = (0, _useSliderField.getLengthValuesMultiThumb)(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '40%',
+      trackStart: '30%'
+    });
+  });
+  it('should handle edge cases where values are at the boundaries', function () {
+    var minValue = 0;
+    var maxValue = 100;
+    var state = {
+      values: [0, 100]
+    };
+    var result = (0, _useSliderField.getLengthValuesMultiThumb)(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '100%',
+      trackStart: '0%'
+    });
+  });
+  it('should handle cases where minValue and maxValue are not 0 and 100', function () {
+    var minValue = 50;
+    var maxValue = 150;
+    var state = {
+      values: [75, 125]
+    };
+    var result = (0, _useSliderField.getLengthValuesMultiThumb)(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '50%',
+      trackStart: '25%'
+    });
+  });
 });

package/lib/cjs/hooks/useSliderField/useSliderField.d.ts

@@ -11,6 +11,14 @@ export declare const getDisplayValue: ({ displayValueProp, isMultiThumb, state,
     isMultiThumb: any;
     state: any;
 }) => any;
+export declare const getLengthValues: (minValue: any, maxValue: any, state: any) => {
+    length: string;
+    trackStart: string;
+};
+export declare const getLengthValuesMultiThumb: (minValue: any, maxValue: any, state: any) => {
+    length: string;
+    trackStart: string;
+};
 declare const useSliderField: (props: UseSliderFieldProps) => {
     containerProps: {
         sx: {
@@ -260,6 +268,8 @@ declare const useSliderField: (props: UseSliderFieldProps) => {
         className: string;
     };
     sliderActiveTrackProps: {
+        length: string;
+        trackStart: string;
         isMultiThumb: boolean;
         className: string;
         isHorizontal: boolean;

package/lib/cjs/hooks/useSliderField/useSliderField.js

@@ -12,10 +12,12 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDisplayValue = exports.getDefaultValue = exports["default"] = void 0;
+exports.getLengthValuesMultiThumb = exports.getLengthValues = exports.getDisplayValue = exports.getDefaultValue = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+var _react = require("react");
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -47,6 +49,29 @@ var getDisplayValue = function getDisplayValue(_ref2) {
   return state.getThumbValueLabel(0);
 };
 exports.getDisplayValue = getDisplayValue;
+var getLengthValues = function getLengthValues(minValue, maxValue, state) {
+  var total = maxValue - minValue;
+  var firstValue = ((0, _values["default"])(state)[0] - minValue) / total * 100;
+  var length = "".concat(firstValue, "%");
+  var trackStart = "".concat(firstValue, "%");
+  return {
+    length: length,
+    trackStart: trackStart
+  };
+};
+exports.getLengthValues = getLengthValues;
+var getLengthValuesMultiThumb = function getLengthValuesMultiThumb(minValue, maxValue, state) {
+  var total = maxValue - minValue;
+  var firstValue = ((0, _values["default"])(state)[0] - minValue) / total * 100;
+  var secondValue = ((0, _values["default"])(state)[1] - (0, _values["default"])(state)[0]) / total * 100;
+  var length = "".concat(secondValue, "%");
+  var trackStart = "".concat(firstValue, "%");
+  return {
+    length: length,
+    trackStart: trackStart
+  };
+};
+exports.getLengthValuesMultiThumb = getLengthValuesMultiThumb;
 var useSliderField = function useSliderField(props) {
   var activeTrackProps = props.activeTrackProps,
     autoFocus = props.autoFocus,
@@ -114,6 +139,23 @@ var useSliderField = function useSliderField(props) {
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+  (0, _react.useEffect)(function () {
+    if ((0, _values["default"])(state)[0] < minValue) {
+      state.setThumbValue(0, minValue);
+    }
+  }, [minValue, state]);
+  (0, _react.useEffect)(function () {
+    if ((0, _values["default"])(state).length === 1) {
+      if ((0, _values["default"])(state)[0] > maxValue) {
+        state.setThumbValue(0, maxValue);
+      }
+    }
+    if ((0, _values["default"])(state).length === 2) {
+      if ((0, _values["default"])(state)[1] > maxValue) {
+        state.setThumbValue(1, maxValue);
+      }
+    }
+  }, [maxValue, state]);
   var thumbOptions = _objectSpread(_objectSpread({}, thumbProps), {}, {
     autoFocus: autoFocus,
     isDisabled: isDisabled,
@@ -179,6 +221,7 @@ var useSliderField = function useSliderField(props) {
   var mergedLabelProps = (0, _reactAria.mergeProps)(labelProps, raLabelProps, {
     hintText: hintText
   });
+  var trackDisplayValues = isMultiThumb ? getLengthValuesMultiThumb(minValue, maxValue, state) : getLengthValues(minValue, maxValue, state);
   var labelContainerProps = {
     label: label,
     labelProps: mergedLabelProps,
@@ -196,7 +239,7 @@ var useSliderField = function useSliderField(props) {
     isHorizontal: isHorizontal,
     isVertical: isVertical,
     state: state
-  });
+  }, trackDisplayValues);
   var wrapperPropsSpread = _objectSpread(_objectSpread({}, wrapperProps), {}, {
     className: wrapperClassName,
     variant: 'slider.wrapper'

package/lib/cjs/hooks/useSliderField/useSliderField.test.js

@@ -106,4 +106,75 @@ describe('useSliderField hook', function () {
       defaultValue: 30
     }));
   });
+});
+describe('useSliderField - minValue and maxValue constraints', function () {
+  test('should set thumb value to minValue if it is less than minValue', function () {
+    var _renderHook3 = (0, _react.renderHook)(function (props) {
+        return (0, _useSliderField["default"])(props);
+      }, {
+        initialProps: _objectSpread(_objectSpread({}, defaultProps), {}, {
+          minValue: 20,
+          defaultValue: 10
+        })
+      }),
+      result = _renderHook3.result,
+      rerender = _renderHook3.rerender;
+
+    // Verify that the thumb value is adjusted to minValue
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)[0]).toEqual(20);
+
+    // Update minValue and verify adjustment
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      defaultValue: 10,
+      minValue: 30
+    }));
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)[0]).toEqual(30);
+  });
+  test('should set thumb value to maxValue if it exceeds maxValue', function () {
+    var _renderHook4 = (0, _react.renderHook)(function (props) {
+        return (0, _useSliderField["default"])(props);
+      }, {
+        initialProps: _objectSpread(_objectSpread({}, defaultProps), {}, {
+          maxValue: 80,
+          defaultValue: 90
+        })
+      }),
+      result = _renderHook4.result,
+      rerender = _renderHook4.rerender;
+
+    // Verify that the thumb value is adjusted to maxValue
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)[0]).toEqual(80);
+
+    // Update maxValue and verify adjustment
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      defaultValue: 10,
+      maxValue: 70
+    }));
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)[0]).toEqual(70);
+  });
+  test('should handle multi-thumb sliders with minValue and maxValue constraints', function () {
+    var _renderHook5 = (0, _react.renderHook)(function (props) {
+        return (0, _useSliderField["default"])(props);
+      }, {
+        initialProps: _objectSpread(_objectSpread({}, defaultProps), {}, {
+          isMultiThumb: true,
+          minValue: 20,
+          maxValue: 80,
+          defaultValue: [10, 90]
+        })
+      }),
+      result = _renderHook5.result,
+      rerender = _renderHook5.rerender;
+
+    // Verify that both thumb values are adjusted to minValue and maxValue
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)).toEqual([20, 80]);
+
+    // Update minValue and maxValue and verify adjustment
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      isMultiThumb: true,
+      minValue: 30,
+      maxValue: 70
+    }));
+    expect((0, _values["default"])(result.current.sliderActiveTrackProps.state)).toEqual([30, 70]);
+  });
 });

package/lib/cjs/types/sliderField.d.ts

@@ -38,8 +38,10 @@ export interface SliderActiveTrackProps {
     isHorizontal?: boolean;
     isMultiThumb?: boolean;
     isVertical?: boolean;
+    length: string;
     state: SliderState;
     sx?: ThemeUICSSObject | object;
+    trackStart: string;
 }
 export interface SliderFieldProps {
     activeTrackProps?: BoxProps;

package/lib/components/SliderField/SliderActiveTrack.js

@@ -1,10 +1,3 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "isHorizontal", "isMultiThumb", "state", "sx"];
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -13,6 +6,12 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "isHorizontal", "isMultiThumb", "length", "sx", "trackStart"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -20,11 +19,10 @@ var SliderActiveTrack = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
     isHorizontal = props.isHorizontal,
     isMultiThumb = props.isMultiThumb,
-    state = props.state,
+    length = props.length,
     sx = props.sx,
+    trackStart = props.trackStart,
     others = _objectWithoutProperties(props, _excluded);
-  var length = isMultiThumb ? "".concat(_valuesInstanceProperty(state)[1] - _valuesInstanceProperty(state)[0], "%") : "".concat(_valuesInstanceProperty(state)[0], "%");
-  var trackStart = "".concat(_valuesInstanceProperty(state)[0], "%");
   var cssLenProp = isHorizontal ? 'width' : 'height';
   var cssStartProp = isHorizontal ? 'left' : 'top';
   return ___EmotionJSX(Box, _extends({

package/lib/components/SliderField/SliderField.stories.js

@@ -67,21 +67,21 @@ var loremText = 'Lorem ipsum';
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(SliderField, _extends({
-    label: loremText,
-    defaultValue: 40
+    label: loremText
   }, args));
 };
-export var Controlled = function Controlled() {
-  var _useState = useState(0),
+export var Controlled = function Controlled(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  var _useState = useState(75),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
-  return ___EmotionJSX(SliderField, {
+  return ___EmotionJSX(SliderField, _extends({}, args, {
     value: value,
     onChange: setValue,
     displayValue: "(".concat(value, "px)"),
     label: loremText
-  });
+  }));
 };
 export var Vertical = function Vertical() {
   return ___EmotionJSX(SliderField, {
@@ -93,7 +93,10 @@ export var Vertical = function Vertical() {
 export var MultiThumb = function MultiThumb() {
   return ___EmotionJSX(SliderField, {
     label: loremText,
-    isMultiThumb: true
+    isMultiThumb: true,
+    defaultValue: [100, 180],
+    maxValue: 540,
+    minValue: 40
   });
 };
 export var ControlledMultiThumb = function ControlledMultiThumb() {

package/lib/components/SliderField/SliderField.test.js

@@ -13,6 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import { getLengthValues, getLengthValuesMultiThumb } from '../../hooks/useSliderField/useSliderField';
 import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
@@ -351,4 +352,54 @@ describe('SliderField Component', function () {
       padding: '20px'
     });
   });
+});
+describe('getLengthValues', function () {
+  it('should calculate correct values for a single thumb slider', function () {
+    var minValue = 0;
+    var maxValue = 100;
+    var state = {
+      values: [50]
+    };
+    var result = getLengthValues(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '50%',
+      trackStart: '50%'
+    });
+  });
+  it('should calculate correct values for a multi-thumb slider', function () {
+    var minValue = 0;
+    var maxValue = 100;
+    var state = {
+      values: [30, 70]
+    };
+    var result = getLengthValuesMultiThumb(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '40%',
+      trackStart: '30%'
+    });
+  });
+  it('should handle edge cases where values are at the boundaries', function () {
+    var minValue = 0;
+    var maxValue = 100;
+    var state = {
+      values: [0, 100]
+    };
+    var result = getLengthValuesMultiThumb(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '100%',
+      trackStart: '0%'
+    });
+  });
+  it('should handle cases where minValue and maxValue are not 0 and 100', function () {
+    var minValue = 50;
+    var maxValue = 150;
+    var state = {
+      values: [75, 125]
+    };
+    var result = getLengthValuesMultiThumb(minValue, maxValue, state);
+    expect(result).toEqual({
+      length: '50%',
+      trackStart: '25%'
+    });
+  });
 });

package/lib/hooks/useSliderField/useSliderField.js

@@ -4,6 +4,7 @@ var _excluded = ["activeTrackProps", "autoFocus", "className", "defaultValue", "
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -12,6 +13,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import { useEffect } from 'react';
 import { mergeProps, useNumberFormatter, useSlider } from 'react-aria';
 import { useSliderState } from 'react-stately';
 import { getAriaAttributeProps } from '../../utils/docUtils/ariaAttributes';
@@ -38,6 +40,27 @@ export var getDisplayValue = function getDisplayValue(_ref2) {
   }
   return state.getThumbValueLabel(0);
 };
+export var getLengthValues = function getLengthValues(minValue, maxValue, state) {
+  var total = maxValue - minValue;
+  var firstValue = (_valuesInstanceProperty(state)[0] - minValue) / total * 100;
+  var length = "".concat(firstValue, "%");
+  var trackStart = "".concat(firstValue, "%");
+  return {
+    length: length,
+    trackStart: trackStart
+  };
+};
+export var getLengthValuesMultiThumb = function getLengthValuesMultiThumb(minValue, maxValue, state) {
+  var total = maxValue - minValue;
+  var firstValue = (_valuesInstanceProperty(state)[0] - minValue) / total * 100;
+  var secondValue = (_valuesInstanceProperty(state)[1] - _valuesInstanceProperty(state)[0]) / total * 100;
+  var length = "".concat(secondValue, "%");
+  var trackStart = "".concat(firstValue, "%");
+  return {
+    length: length,
+    trackStart: trackStart
+  };
+};
 var useSliderField = function useSliderField(props) {
   var activeTrackProps = props.activeTrackProps,
     autoFocus = props.autoFocus,
@@ -105,6 +128,23 @@ var useSliderField = function useSliderField(props) {
   var _getAriaAttributeProp = getAriaAttributeProps(others),
     ariaProps = _getAriaAttributeProp.ariaProps,
     nonAriaProps = _getAriaAttributeProp.nonAriaProps;
+  useEffect(function () {
+    if (_valuesInstanceProperty(state)[0] < minValue) {
+      state.setThumbValue(0, minValue);
+    }
+  }, [minValue, state]);
+  useEffect(function () {
+    if (_valuesInstanceProperty(state).length === 1) {
+      if (_valuesInstanceProperty(state)[0] > maxValue) {
+        state.setThumbValue(0, maxValue);
+      }
+    }
+    if (_valuesInstanceProperty(state).length === 2) {
+      if (_valuesInstanceProperty(state)[1] > maxValue) {
+        state.setThumbValue(1, maxValue);
+      }
+    }
+  }, [maxValue, state]);
   var thumbOptions = _objectSpread(_objectSpread({}, thumbProps), {}, {
     autoFocus: autoFocus,
     isDisabled: isDisabled,
@@ -170,6 +210,7 @@ var useSliderField = function useSliderField(props) {
   var mergedLabelProps = mergeProps(labelProps, raLabelProps, {
     hintText: hintText
   });
+  var trackDisplayValues = isMultiThumb ? getLengthValuesMultiThumb(minValue, maxValue, state) : getLengthValues(minValue, maxValue, state);
   var labelContainerProps = {
     label: label,
     labelProps: mergedLabelProps,
@@ -187,7 +228,7 @@ var useSliderField = function useSliderField(props) {
     isHorizontal: isHorizontal,
     isVertical: isVertical,
     state: state
-  });
+  }, trackDisplayValues);
   var wrapperPropsSpread = _objectSpread(_objectSpread({}, wrapperProps), {}, {
     className: wrapperClassName,
     variant: 'slider.wrapper'

package/lib/hooks/useSliderField/useSliderField.test.js

@@ -99,4 +99,75 @@ describe('useSliderField hook', function () {
       defaultValue: 30
     }));
   });
+});
+describe('useSliderField - minValue and maxValue constraints', function () {
+  test('should set thumb value to minValue if it is less than minValue', function () {
+    var _renderHook3 = renderHook(function (props) {
+        return useSliderField(props);
+      }, {
+        initialProps: _objectSpread(_objectSpread({}, defaultProps), {}, {
+          minValue: 20,
+          defaultValue: 10
+        })
+      }),
+      result = _renderHook3.result,
+      rerender = _renderHook3.rerender;
+
+    // Verify that the thumb value is adjusted to minValue
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)[0]).toEqual(20);
+
+    // Update minValue and verify adjustment
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      defaultValue: 10,
+      minValue: 30
+    }));
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)[0]).toEqual(30);
+  });
+  test('should set thumb value to maxValue if it exceeds maxValue', function () {
+    var _renderHook4 = renderHook(function (props) {
+        return useSliderField(props);
+      }, {
+        initialProps: _objectSpread(_objectSpread({}, defaultProps), {}, {
+          maxValue: 80,
+          defaultValue: 90
+        })
+      }),
+      result = _renderHook4.result,
+      rerender = _renderHook4.rerender;
+
+    // Verify that the thumb value is adjusted to maxValue
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)[0]).toEqual(80);
+
+    // Update maxValue and verify adjustment
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      defaultValue: 10,
+      maxValue: 70
+    }));
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)[0]).toEqual(70);
+  });
+  test('should handle multi-thumb sliders with minValue and maxValue constraints', function () {
+    var _renderHook5 = renderHook(function (props) {
+        return useSliderField(props);
+      }, {
+        initialProps: _objectSpread(_objectSpread({}, defaultProps), {}, {
+          isMultiThumb: true,
+          minValue: 20,
+          maxValue: 80,
+          defaultValue: [10, 90]
+        })
+      }),
+      result = _renderHook5.result,
+      rerender = _renderHook5.rerender;
+
+    // Verify that both thumb values are adjusted to minValue and maxValue
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)).toEqual([20, 80]);
+
+    // Update minValue and maxValue and verify adjustment
+    rerender(_objectSpread(_objectSpread({}, defaultProps), {}, {
+      isMultiThumb: true,
+      minValue: 30,
+      maxValue: 70
+    }));
+    expect(_valuesInstanceProperty(result.current.sliderActiveTrackProps.state)).toEqual([30, 70]);
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.124.0-alpha.1",
+  "version": "2.124.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",