@helpdice/ui 2.6.1-beta.0 → 2.6.1-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3203,7 +3203,7 @@ var repositionCursor = function repositionCursor(_ref) {
3203
3203
  };
3204
3204
  };
3205
3205
 
3206
- var _excluded$5 = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
3206
+ var _excluded$5 = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
3207
3207
  var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3208
3208
  var _ref$allowDecimals = _ref.allowDecimals,
3209
3209
  allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3219,7 +3219,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3219
3219
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
3220
3220
  userMaxLength = _ref.maxLength,
3221
3221
  userValue = _ref.value,
3222
- onValueChange = _ref.onValueChange,
3223
3222
  fixedDecimalLength = _ref.fixedDecimalLength,
3224
3223
  placeholder = _ref.placeholder,
3225
3224
  decimalScale = _ref.decimalScale,
@@ -3332,11 +3331,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3332
3331
  var stringValue = cleanValue(_objectSpread2({
3333
3332
  value: modifiedValue
3334
3333
  }, cleanValueOptions));
3334
+
3335
+ // console.log("Before clean:", modifiedValue);
3336
+ // console.log("After clean:", stringValue);
3337
+
3335
3338
  if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
3336
3339
  return;
3337
3340
  }
3338
3341
  if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
3339
- onValueChange && onValueChange(undefined, name, {
3342
+ onChange && onChange(undefined, name, {
3340
3343
  "float": null,
3341
3344
  formatted: '',
3342
3345
  value: ''
@@ -3348,9 +3351,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3348
3351
  }
3349
3352
  var stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, '.') : stringValue;
3350
3353
  var numberValue = parseFloat(stringValueWithoutSeparator);
3354
+
3355
+ // console.log('Number Value', numberValue);
3356
+
3351
3357
  var formattedValue = formatValue(_objectSpread2({
3352
3358
  value: stringValue
3353
3359
  }, formatValueOptions));
3360
+
3361
+ // console.log('Formatted Value', numberValue);
3362
+
3354
3363
  if (cursorPosition != null) {
3355
3364
  // Prevent cursor jumping
3356
3365
  var newCursor = cursorPosition + (formattedValue.length - value.length);
@@ -3358,15 +3367,25 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3358
3367
  setCursor(newCursor);
3359
3368
  setChangeCount(changeCount + 1);
3360
3369
  }
3370
+
3371
+ // console.log({
3372
+ // inputValue: value,
3373
+ // modifiedValue,
3374
+ // stateValue,
3375
+ // selectionStart,
3376
+ // lastKeyStroke
3377
+ // });
3378
+
3361
3379
  setStateValue(formattedValue);
3362
- if (onValueChange) {
3380
+ if (onChange) {
3363
3381
  var values = {
3364
3382
  "float": numberValue,
3365
3383
  formatted: formattedValue,
3366
3384
  value: stringValue
3367
3385
  };
3368
- onValueChange(stringValue, name, values);
3386
+ onChange(stringValue, name, values);
3369
3387
  }
3388
+ // onChange && onChange(stringValue);
3370
3389
  };
3371
3390
 
3372
3391
  /**
@@ -3377,7 +3396,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3377
3396
  value = _event$target.value,
3378
3397
  selectionStart = _event$target.selectionStart;
3379
3398
  processChange(value, selectionStart);
3380
- onChange && onChange(event);
3381
3399
  };
3382
3400
 
3383
3401
  /**
@@ -3409,8 +3427,8 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3409
3427
  var formattedValue = formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
3410
3428
  value: newValue
3411
3429
  }));
3412
- if (onValueChange && formatValueOnBlur) {
3413
- onValueChange(newValue, name, {
3430
+ if (onChange && formatValueOnBlur) {
3431
+ onChange(newValue, name, {
3414
3432
  "float": numberValue,
3415
3433
  formatted: formattedValue,
3416
3434
  value: newValue
@@ -3447,6 +3465,34 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3447
3465
  onKeyDown && onKeyDown(event);
3448
3466
  };
3449
3467
 
3468
+ // const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
3469
+ // lastKeyStrokeRef.current = event.key;
3470
+
3471
+ // // Handle arrow up/down with step
3472
+ // if (step && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
3473
+ // event.preventDefault();
3474
+
3475
+ // const currentValue =
3476
+ // parseFloat(
3477
+ // userValue != null
3478
+ // ? String(userValue).replace(decimalSeparator, '.')
3479
+ // : cleanValue({ value: stateValue, ...cleanValueOptions })
3480
+ // ) || 0;
3481
+
3482
+ // const newValue = event.key === 'ArrowUp' ? currentValue + step : currentValue - step;
3483
+
3484
+ // if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) return;
3485
+
3486
+ // const fixedLength = String(step).includes('.') ? String(step).split('.')[1].length : undefined;
3487
+
3488
+ // processChange(
3489
+ // (fixedLength ? newValue.toFixed(fixedLength) : newValue).replace('.', decimalSeparator)
3490
+ // );
3491
+ // }
3492
+
3493
+ // onKeyDown && onKeyDown(event);
3494
+ // };
3495
+
3450
3496
  /**
3451
3497
  * Handle key up event
3452
3498
  *
@@ -3488,13 +3534,19 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3488
3534
  * If user has only entered "-" or decimal separator,
3489
3535
  * keep the char to allow them to enter next value
3490
3536
  */
3537
+ // const getRenderValue = () => {
3538
+ // if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
3539
+ // // console.log('User Value', userValue);
3540
+ // return formatValue({
3541
+ // ...formatValueOptions,
3542
+ // decimalScale: dirty ? undefined : decimalScale,
3543
+ // value: String(userValue)
3544
+ // });
3545
+ // }
3546
+
3547
+ // return stateValue;
3548
+ // };
3491
3549
  var getRenderValue = function getRenderValue() {
3492
- if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
3493
- return formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
3494
- decimalScale: dirty ? undefined : decimalScale,
3495
- value: String(userValue)
3496
- }));
3497
- }
3498
3550
  return stateValue;
3499
3551
  };
3500
3552
  var inputProps = _objectSpread2({
@@ -3693,52 +3745,58 @@ var GridContainer = withScale(GridContainerComponent);
3693
3745
 
3694
3746
  Grid.Container = GridContainer;
3695
3747
 
3696
- function parseCurrency(value) {
3697
- var _trimmed$match;
3698
- var trimmed = value.trim();
3699
-
3700
- // Extract currency symbol
3701
- var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
3702
-
3703
- // Remove everything except digits, comma, dot
3704
- var numericPart = trimmed.replace(/[^\d.,]/g, "");
3705
-
3706
- // Convert comma to dot if needed
3707
- var normalized = numericPart.replace(",", ".");
3708
- return {
3709
- amount: Number(normalized),
3710
- currency: currencySymbol
3711
- };
3712
- }
3713
3748
  function CurrencyRangeInput(_ref) {
3714
3749
  var prefix = _ref.prefix,
3715
3750
  allowDecimals = _ref.allowDecimals,
3716
- onChange = _ref.onChange,
3717
3751
  intlConfig = _ref.intlConfig,
3718
- children = _ref.children;
3719
- var _React$useState = React.useState({
3720
- min: '0',
3721
- max: '0',
3722
- currency: ''
3723
- }),
3724
- _React$useState2 = _slicedToArray(_React$useState, 2),
3725
- value = _React$useState2[0],
3726
- setValue = _React$useState2[1];
3727
- React.useEffect(function () {
3728
- var min = parseCurrency(value.min);
3729
- var max = parseCurrency(value.max);
3730
- if (max.amount > min.amount) {
3731
- if (onChange) onChange({
3732
- target: {
3733
- value: {
3734
- min: min.amount,
3735
- max: max.amount,
3736
- currency: min.currency
3737
- }
3738
- }
3739
- });
3752
+ children = _ref.children,
3753
+ value = _ref.value,
3754
+ _ref$defaultValue = _ref.defaultValue,
3755
+ defaultValue = _ref$defaultValue === void 0 ? {
3756
+ min: 0,
3757
+ max: 0
3758
+ } : _ref$defaultValue,
3759
+ onChange = _ref.onChange,
3760
+ _ref$debounce = _ref.debounce,
3761
+ debounce = _ref$debounce === void 0 ? 300 : _ref$debounce,
3762
+ externalError = _ref.error,
3763
+ externalHelperText = _ref.helperText;
3764
+ var isControlled = value !== undefined;
3765
+ var _useState = React.useState(defaultValue),
3766
+ _useState2 = _slicedToArray(_useState, 2),
3767
+ internalValue = _useState2[0],
3768
+ setInternalValue = _useState2[1];
3769
+ var currentValue = isControlled ? value : internalValue;
3770
+ var setValue = React.useCallback(function (val) {
3771
+ if (!isControlled) {
3772
+ setInternalValue(val);
3740
3773
  }
3741
- }, [value]);
3774
+ }, [isControlled]);
3775
+
3776
+ // Validation
3777
+ var isInvalid = React.useMemo(function () {
3778
+ if (!currentValue.min || !currentValue.max) return false;
3779
+ return currentValue.max <= currentValue.min;
3780
+ }, [currentValue]);
3781
+
3782
+ // Debounced onChange
3783
+ React.useEffect(function () {
3784
+ if (!onChange || isInvalid) return;
3785
+ var handler = setTimeout(function () {
3786
+ if (currentValue.min && currentValue.max) {
3787
+ onChange({
3788
+ min: currentValue.min,
3789
+ max: currentValue.max,
3790
+ currency: ''
3791
+ });
3792
+ }
3793
+ }, debounce);
3794
+ return function () {
3795
+ return clearTimeout(handler);
3796
+ };
3797
+ }, [isInvalid, onChange, debounce, currentValue]);
3798
+ var finalError = externalError !== null && externalError !== void 0 ? externalError : isInvalid;
3799
+ var finalHelperText = externalHelperText !== null && externalHelperText !== void 0 ? externalHelperText : isInvalid ? "Max must be greater than min" : undefined;
3742
3800
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
3743
3801
  className: "with-label",
3744
3802
  children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
@@ -3747,12 +3805,11 @@ function CurrencyRangeInput(_ref) {
3747
3805
  gap: 2,
3748
3806
  children: [/*#__PURE__*/jsxRuntime.jsx(Grid, {
3749
3807
  children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
3750
- onChange: function onChange(e) {
3751
- return setValue(function (prev) {
3752
- return _objectSpread2(_objectSpread2({}, prev), {}, {
3753
- min: e.target.value
3754
- });
3755
- });
3808
+ value: currentValue.min,
3809
+ onChange: function onChange(val) {
3810
+ return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
3811
+ min: Number(val)
3812
+ }));
3756
3813
  },
3757
3814
  intlConfig: intlConfig,
3758
3815
  prefix: prefix,
@@ -3761,12 +3818,11 @@ function CurrencyRangeInput(_ref) {
3761
3818
  })
3762
3819
  }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
3763
3820
  children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
3764
- onChange: function onChange(e) {
3765
- return setValue(function (prev) {
3766
- return _objectSpread2(_objectSpread2({}, prev), {}, {
3767
- max: e.target.value
3768
- });
3769
- });
3821
+ value: currentValue.max,
3822
+ onChange: function onChange(val) {
3823
+ return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
3824
+ max: Number(val)
3825
+ }));
3770
3826
  },
3771
3827
  intlConfig: intlConfig,
3772
3828
  prefix: prefix,
@@ -3774,16 +3830,20 @@ function CurrencyRangeInput(_ref) {
3774
3830
  allowDecimals: allowDecimals
3775
3831
  })
3776
3832
  })]
3833
+ }), finalHelperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
3834
+ error: finalError,
3835
+ text: finalHelperText
3777
3836
  })]
3778
3837
  });
3779
3838
  }
3839
+ var CurrencyRangeInput$1 = /*#__PURE__*/React.memo(CurrencyRangeInput);
3780
3840
 
3781
3841
  /* "use client" */
3782
3842
  Input.Textarea = Textarea;
3783
3843
  Input.Password = InputPassword;
3784
3844
  Input.Phone = PhoneInput$1;
3785
3845
  Input.Currency = CurrencyInput;
3786
- Input.CurrencyRange = CurrencyRangeInput;
3846
+ Input.CurrencyRange = CurrencyRangeInput$1;
3787
3847
 
3788
3848
  /* "use client" */
3789
3849
 
package/dist/index.js CHANGED
@@ -3540,7 +3540,7 @@ var repositionCursor = function repositionCursor(_ref) {
3540
3540
  };
3541
3541
  };
3542
3542
 
3543
- var _excluded$1i = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "onValueChange", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
3543
+ var _excluded$1i = ["allowDecimals", "allowNegativeValue", "id", "name", "className", "customInput", "decimalsLimit", "defaultValue", "disabled", "maxLength", "value", "fixedDecimalLength", "placeholder", "decimalScale", "prefix", "suffix", "intlConfig", "fullWidth", "step", "min", "max", "disableGroupSeparators", "disableAbbreviations", "decimalSeparator", "groupSeparator", "onChange", "onFocus", "onBlur", "onKeyDown", "onKeyUp", "transformRawValue", "formatValueOnBlur", "children"];
3544
3544
  var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3545
3545
  var _ref$allowDecimals = _ref.allowDecimals,
3546
3546
  allowDecimals = _ref$allowDecimals === void 0 ? true : _ref$allowDecimals,
@@ -3556,7 +3556,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3556
3556
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
3557
3557
  userMaxLength = _ref.maxLength,
3558
3558
  userValue = _ref.value,
3559
- onValueChange = _ref.onValueChange,
3560
3559
  fixedDecimalLength = _ref.fixedDecimalLength,
3561
3560
  placeholder = _ref.placeholder,
3562
3561
  decimalScale = _ref.decimalScale,
@@ -3669,11 +3668,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3669
3668
  var stringValue = cleanValue(_objectSpread2({
3670
3669
  value: modifiedValue
3671
3670
  }, cleanValueOptions));
3671
+
3672
+ // console.log("Before clean:", modifiedValue);
3673
+ // console.log("After clean:", stringValue);
3674
+
3672
3675
  if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
3673
3676
  return;
3674
3677
  }
3675
3678
  if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
3676
- onValueChange && onValueChange(undefined, name, {
3679
+ onChange && onChange(undefined, name, {
3677
3680
  "float": null,
3678
3681
  formatted: '',
3679
3682
  value: ''
@@ -3685,9 +3688,15 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3685
3688
  }
3686
3689
  var stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, '.') : stringValue;
3687
3690
  var numberValue = parseFloat(stringValueWithoutSeparator);
3691
+
3692
+ // console.log('Number Value', numberValue);
3693
+
3688
3694
  var formattedValue = formatValue(_objectSpread2({
3689
3695
  value: stringValue
3690
3696
  }, formatValueOptions));
3697
+
3698
+ // console.log('Formatted Value', numberValue);
3699
+
3691
3700
  if (cursorPosition != null) {
3692
3701
  // Prevent cursor jumping
3693
3702
  var newCursor = cursorPosition + (formattedValue.length - value.length);
@@ -3695,15 +3704,25 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3695
3704
  setCursor(newCursor);
3696
3705
  setChangeCount(changeCount + 1);
3697
3706
  }
3707
+
3708
+ // console.log({
3709
+ // inputValue: value,
3710
+ // modifiedValue,
3711
+ // stateValue,
3712
+ // selectionStart,
3713
+ // lastKeyStroke
3714
+ // });
3715
+
3698
3716
  setStateValue(formattedValue);
3699
- if (onValueChange) {
3717
+ if (onChange) {
3700
3718
  var values = {
3701
3719
  "float": numberValue,
3702
3720
  formatted: formattedValue,
3703
3721
  value: stringValue
3704
3722
  };
3705
- onValueChange(stringValue, name, values);
3723
+ onChange(stringValue, name, values);
3706
3724
  }
3725
+ // onChange && onChange(stringValue);
3707
3726
  };
3708
3727
 
3709
3728
  /**
@@ -3714,7 +3733,6 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3714
3733
  value = _event$target.value,
3715
3734
  selectionStart = _event$target.selectionStart;
3716
3735
  processChange(value, selectionStart);
3717
- onChange && onChange(event);
3718
3736
  };
3719
3737
 
3720
3738
  /**
@@ -3746,8 +3764,8 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3746
3764
  var formattedValue = formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
3747
3765
  value: newValue
3748
3766
  }));
3749
- if (onValueChange && formatValueOnBlur) {
3750
- onValueChange(newValue, name, {
3767
+ if (onChange && formatValueOnBlur) {
3768
+ onChange(newValue, name, {
3751
3769
  "float": numberValue,
3752
3770
  formatted: formattedValue,
3753
3771
  value: newValue
@@ -3784,6 +3802,34 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3784
3802
  onKeyDown && onKeyDown(event);
3785
3803
  };
3786
3804
 
3805
+ // const handleOnKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
3806
+ // lastKeyStrokeRef.current = event.key;
3807
+
3808
+ // // Handle arrow up/down with step
3809
+ // if (step && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
3810
+ // event.preventDefault();
3811
+
3812
+ // const currentValue =
3813
+ // parseFloat(
3814
+ // userValue != null
3815
+ // ? String(userValue).replace(decimalSeparator, '.')
3816
+ // : cleanValue({ value: stateValue, ...cleanValueOptions })
3817
+ // ) || 0;
3818
+
3819
+ // const newValue = event.key === 'ArrowUp' ? currentValue + step : currentValue - step;
3820
+
3821
+ // if ((min !== undefined && newValue < Number(min)) || (max !== undefined && newValue > Number(max))) return;
3822
+
3823
+ // const fixedLength = String(step).includes('.') ? String(step).split('.')[1].length : undefined;
3824
+
3825
+ // processChange(
3826
+ // (fixedLength ? newValue.toFixed(fixedLength) : newValue).replace('.', decimalSeparator)
3827
+ // );
3828
+ // }
3829
+
3830
+ // onKeyDown && onKeyDown(event);
3831
+ // };
3832
+
3787
3833
  /**
3788
3834
  * Handle key up event
3789
3835
  *
@@ -3825,13 +3871,19 @@ var InputCurrency = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
3825
3871
  * If user has only entered "-" or decimal separator,
3826
3872
  * keep the char to allow them to enter next value
3827
3873
  */
3874
+ // const getRenderValue = () => {
3875
+ // if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
3876
+ // // console.log('User Value', userValue);
3877
+ // return formatValue({
3878
+ // ...formatValueOptions,
3879
+ // decimalScale: dirty ? undefined : decimalScale,
3880
+ // value: String(userValue)
3881
+ // });
3882
+ // }
3883
+
3884
+ // return stateValue;
3885
+ // };
3828
3886
  var getRenderValue = function getRenderValue() {
3829
- if (userValue != null && stateValue !== '-' && (!decimalSeparator || stateValue !== decimalSeparator)) {
3830
- return formatValue(_objectSpread2(_objectSpread2({}, formatValueOptions), {}, {
3831
- decimalScale: dirty ? undefined : decimalScale,
3832
- value: String(userValue)
3833
- }));
3834
- }
3835
3887
  return stateValue;
3836
3888
  };
3837
3889
  var inputProps = _objectSpread2({
@@ -4030,52 +4082,58 @@ var GridContainer = withScale(GridContainerComponent);
4030
4082
 
4031
4083
  Grid.Container = GridContainer;
4032
4084
 
4033
- function parseCurrency(value) {
4034
- var _trimmed$match;
4035
- var trimmed = value.trim();
4036
-
4037
- // Extract currency symbol
4038
- var currencySymbol = ((_trimmed$match = trimmed.match(/[^\d.,\s]/)) === null || _trimmed$match === void 0 ? void 0 : _trimmed$match[0]) || "";
4039
-
4040
- // Remove everything except digits, comma, dot
4041
- var numericPart = trimmed.replace(/[^\d.,]/g, "");
4042
-
4043
- // Convert comma to dot if needed
4044
- var normalized = numericPart.replace(",", ".");
4045
- return {
4046
- amount: Number(normalized),
4047
- currency: currencySymbol
4048
- };
4049
- }
4050
4085
  function CurrencyRangeInput(_ref) {
4051
4086
  var prefix = _ref.prefix,
4052
4087
  allowDecimals = _ref.allowDecimals,
4053
- onChange = _ref.onChange,
4054
4088
  intlConfig = _ref.intlConfig,
4055
- children = _ref.children;
4056
- var _React$useState = React.useState({
4057
- min: '0',
4058
- max: '0',
4059
- currency: ''
4060
- }),
4061
- _React$useState2 = _slicedToArray(_React$useState, 2),
4062
- value = _React$useState2[0],
4063
- setValue = _React$useState2[1];
4089
+ children = _ref.children,
4090
+ value = _ref.value,
4091
+ _ref$defaultValue = _ref.defaultValue,
4092
+ defaultValue = _ref$defaultValue === void 0 ? {
4093
+ min: 0,
4094
+ max: 0
4095
+ } : _ref$defaultValue,
4096
+ onChange = _ref.onChange,
4097
+ _ref$debounce = _ref.debounce,
4098
+ debounce = _ref$debounce === void 0 ? 300 : _ref$debounce,
4099
+ externalError = _ref.error,
4100
+ externalHelperText = _ref.helperText;
4101
+ var isControlled = value !== undefined;
4102
+ var _useState = React.useState(defaultValue),
4103
+ _useState2 = _slicedToArray(_useState, 2),
4104
+ internalValue = _useState2[0],
4105
+ setInternalValue = _useState2[1];
4106
+ var currentValue = isControlled ? value : internalValue;
4107
+ var setValue = React.useCallback(function (val) {
4108
+ if (!isControlled) {
4109
+ setInternalValue(val);
4110
+ }
4111
+ }, [isControlled]);
4112
+
4113
+ // Validation
4114
+ var isInvalid = React.useMemo(function () {
4115
+ if (!currentValue.min || !currentValue.max) return false;
4116
+ return currentValue.max <= currentValue.min;
4117
+ }, [currentValue]);
4118
+
4119
+ // Debounced onChange
4064
4120
  React.useEffect(function () {
4065
- var min = parseCurrency(value.min);
4066
- var max = parseCurrency(value.max);
4067
- if (max.amount > min.amount) {
4068
- if (onChange) onChange({
4069
- target: {
4070
- value: {
4071
- min: min.amount,
4072
- max: max.amount,
4073
- currency: min.currency
4074
- }
4075
- }
4076
- });
4077
- }
4078
- }, [value]);
4121
+ if (!onChange || isInvalid) return;
4122
+ var handler = setTimeout(function () {
4123
+ if (currentValue.min && currentValue.max) {
4124
+ onChange({
4125
+ min: currentValue.min,
4126
+ max: currentValue.max,
4127
+ currency: ''
4128
+ });
4129
+ }
4130
+ }, debounce);
4131
+ return function () {
4132
+ return clearTimeout(handler);
4133
+ };
4134
+ }, [isInvalid, onChange, debounce, currentValue]);
4135
+ var finalError = externalError !== null && externalError !== void 0 ? externalError : isInvalid;
4136
+ var finalHelperText = externalHelperText !== null && externalHelperText !== void 0 ? externalHelperText : isInvalid ? "Max must be greater than min" : undefined;
4079
4137
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
4080
4138
  className: "with-label",
4081
4139
  children: [children && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
@@ -4084,12 +4142,11 @@ function CurrencyRangeInput(_ref) {
4084
4142
  gap: 2,
4085
4143
  children: [/*#__PURE__*/jsxRuntime.jsx(Grid, {
4086
4144
  children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
4087
- onChange: function onChange(e) {
4088
- return setValue(function (prev) {
4089
- return _objectSpread2(_objectSpread2({}, prev), {}, {
4090
- min: e.target.value
4091
- });
4092
- });
4145
+ value: currentValue.min,
4146
+ onChange: function onChange(val) {
4147
+ return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
4148
+ min: Number(val)
4149
+ }));
4093
4150
  },
4094
4151
  intlConfig: intlConfig,
4095
4152
  prefix: prefix,
@@ -4098,12 +4155,11 @@ function CurrencyRangeInput(_ref) {
4098
4155
  })
4099
4156
  }), /*#__PURE__*/jsxRuntime.jsx(Grid, {
4100
4157
  children: /*#__PURE__*/jsxRuntime.jsx(Input.Currency, {
4101
- onChange: function onChange(e) {
4102
- return setValue(function (prev) {
4103
- return _objectSpread2(_objectSpread2({}, prev), {}, {
4104
- max: e.target.value
4105
- });
4106
- });
4158
+ value: currentValue.max,
4159
+ onChange: function onChange(val) {
4160
+ return setValue(_objectSpread2(_objectSpread2({}, currentValue), {}, {
4161
+ max: Number(val)
4162
+ }));
4107
4163
  },
4108
4164
  intlConfig: intlConfig,
4109
4165
  prefix: prefix,
@@ -4111,16 +4167,20 @@ function CurrencyRangeInput(_ref) {
4111
4167
  allowDecimals: allowDecimals
4112
4168
  })
4113
4169
  })]
4170
+ }), finalHelperText && /*#__PURE__*/jsxRuntime.jsx(InputError, {
4171
+ error: finalError,
4172
+ text: finalHelperText
4114
4173
  })]
4115
4174
  });
4116
4175
  }
4176
+ var CurrencyRangeInput$1 = /*#__PURE__*/React.memo(CurrencyRangeInput);
4117
4177
 
4118
4178
  /* "use client" */
4119
4179
  Input.Textarea = Textarea;
4120
4180
  Input.Password = InputPassword;
4121
4181
  Input.Phone = PhoneInput$1;
4122
4182
  Input.Currency = CurrencyInput;
4123
- Input.CurrencyRange = CurrencyRangeInput;
4183
+ Input.CurrencyRange = CurrencyRangeInput$1;
4124
4184
 
4125
4185
  /* "use client" */
4126
4186