@stigg/react-sdk 5.6.0 → 5.7.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.6.0",
+  "version": "5.7.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/checkout/steps/addons/CheckoutAddonsStep.tsx

@@ -12,6 +12,7 @@ import { usePlanStepModel } from '../../hooks/usePlanStepModel';
 import { AddonListItemContainer, CheckoutAddonsContainer, TrashButton } from './CheckoutAddonsStep.style';
 import { CheckoutLocalization } from '../../configurations/textOverrides';
 import { useCheckoutModel, useProgressBarModel } from '../../hooks';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
 
 type UseAddonsStepModel = ReturnType<typeof useAddonsStepModel>;
 
@@ -96,6 +97,7 @@ function AddonListItem({
             <InputField
               id={`${addon.id}-input`}
               type="number"
+              onWheel={ON_WHEEL_BLUR}
               sx={{ width: 120, marginX: 2 }}
               value={addonState?.quantity ?? ''}
               error={!isValid}

package/src/components/checkout/steps/plan/CheckoutChargeList.tsx

@@ -14,6 +14,7 @@ import { useCheckoutModel, usePlanStepModel, useProgressBarModel } from '../../h
 import { TiersSelectContainer } from '../../../common/TiersSelectContainer';
 import { getValidPriceQuantity } from '../../../utils/priceUtils';
 import { getFeatureDisplayNameText } from '../../../utils/getFeatureName';
+import { ON_WHEEL_BLUR } from '../../../utils/onWheelBlur';
 
 export type UsePlanStepModel = ReturnType<typeof usePlanStepModel>;
 
@@ -122,12 +123,12 @@ export function PlanCharge({
         sx={{ width: 120 }}
         id={`${featureId}-input`}
         type="number"
+        onWheel={ON_WHEEL_BLUR}
         error={!isValid}
         helperText={!isValid ? getValidationText(charge, billableFeature?.quantity) : undefined}
         FormHelperTextProps={{ sx: { margin: '4px' } }}
         value={billableFeature?.quantity ?? ''}
         onChange={handleQuantityChange}
-        onWheel={(e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur()}
       />
     );
   }

package/src/components/common/VolumePerUnitInput.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Typography } from './Typography';
 import { InputField } from '../checkout/components';
 import { TiersSelectContainerProps } from './TiersSelectContainer';
+import { ON_WHEEL_BLUR } from '../utils/onWheelBlur';
 
 export function VolumePerUnitInput({
   width,
@@ -15,6 +16,7 @@ export function VolumePerUnitInput({
   return (
     <InputField
       type="number"
+      onWheel={ON_WHEEL_BLUR}
       fullWidth
       sx={{ minHeight: '46px', width }}
       InputProps={{

package/src/components/utils/onWheelBlur.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const ON_WHEEL_BLUR = (e: React.WheelEvent<HTMLInputElement>) => (e.target as HTMLElement).blur();