@sonardigital/carbon-ui 1.2.19 → 1.2.20

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.19",
+   "version": "1.2.20",
    "description": "",
    "main": "src/index.ts",
    "files": [

package/src/components/form/fields/FormNumber.tsx

@@ -3,7 +3,7 @@ import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
 import { NumberProps } from '../../inputs';
-import { Number } from '../../inputs/Number';
+import { NumberInput } from '../../inputs/Number';
 
 interface FormNumberProps extends NumberProps {
    name: string;
@@ -21,7 +21,7 @@ export function FormNumber({
          render={({ field, fieldState }) => (
             <FormLabel label={label}>
                <Stack gap={0.8}>
-                  <Number {...field} {...props} />
+                  <NumberInput {...field} {...props} />
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}

package/src/components/inputs/Number.tsx

@@ -5,6 +5,7 @@ import InputAdornment from '@mui/material/InputAdornment';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { TextField } from '@mui/material';
+import { BaseUIEvent } from '@base-ui/react/types';
 
 /**
  * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
@@ -21,12 +22,14 @@ export interface NumberProps extends Omit<
    error?: boolean;
 }
 
-export function Number({
+export function NumberInput({
    id: idProp,
+   label,
    error,
    ...other
 }: BaseNumberField.Root.Props & {
    label?: React.ReactNode;
+   onChange: (event: BaseUIEvent<React.ChangeEvent<HTMLInputElement>>) => void;
    error?: boolean;
 }) {
    const size = 'medium';
@@ -36,18 +39,32 @@ export function Number({
       id = idProp;
    }
    return (
-      <BaseNumberField.Root {...other}>
+      <BaseNumberField.Root>
          <SSRInitialFilled {...other} />
          <BaseNumberField.Input
             id={id}
+            onChange={event =>
+               other.onChange(
+                  event as BaseUIEvent<React.ChangeEvent<HTMLInputElement>>,
+               )
+            }
             render={(props, state) => (
                <TextField
                   aria-describedby={`${id}-helper-text`}
                   inputRef={props.ref}
                   value={state.inputValue}
                   onBlur={props.onBlur}
-                  onChange={props.onChange}
-                  onKeyUp={props.onKeyUp}
+                  onChange={e => {
+                     const value = isNaN(Number(e.target.value))
+                        ? 0
+                        : Number(e.target.value);
+                     props?.onChange?.({
+                        ...e,
+                        target: { value },
+                     } as unknown as BaseUIEvent<
+                        React.ChangeEvent<HTMLInputElement>
+                     >);
+                  }}
                   onKeyDown={props.onKeyDown}
                   onFocus={props.onFocus}
                   InputProps={{
@@ -74,7 +91,15 @@ export function Number({
                            }}
                         >
                            <BaseNumberField.Increment
-                              render={<IconButton aria-label="Increase" />}
+                              render={
+                                 <IconButton
+                                    aria-label="Increase"
+                                    onClick={() =>
+                                       // @ts-ignore
+                                       props?.onChange?.(state.value ?? 0)
+                                    }
+                                 />
+                              }
                            >
                               <KeyboardArrowUpIcon
                                  fontSize={size}
@@ -83,7 +108,15 @@ export function Number({
                            </BaseNumberField.Increment>
 
                            <BaseNumberField.Decrement
-                              render={<IconButton aria-label="Decrease" />}
+                              render={
+                                 <IconButton
+                                    aria-label="Decrease"
+                                    onClick={() =>
+                                       // @ts-ignore
+                                       props?.onChange?.(state.value ?? 0)
+                                    }
+                                 />
+                              }
                            >
                               <KeyboardArrowDownIcon
                                  fontSize={size}