@sonardigital/carbon-ui 1.2.18 → 1.2.19

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@sonardigital/carbon-ui",
-   "version": "1.2.18",
+   "version": "1.2.19",
    "description": "",
    "main": "src/index.ts",
    "files": [
@@ -52,6 +52,7 @@
       ]
    },
    "dependencies": {
+      "@base-ui/react": "^1.6.0",
       "@emotion/react": "^11.14.0",
       "@emotion/styled": "^11.14.1",
       "@mui/icons-material": "^7.3.2",

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

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

package/src/components/form/fields/index.ts

@@ -8,3 +8,4 @@ export * from './form-list/FormList';
 export * from './FormDatePicker';
 export * from './FormBox';
 export * from './FormBoxes';
+export * from './FormNumber';

package/src/components/inputs/Number.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field';
+import IconButton from '@mui/material/IconButton';
+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';
+
+/**
+ * This component is a placeholder for FormControl to correctly set the shrink label state on SSR.
+ */
+function SSRInitialFilled(_: BaseNumberField.Root.Props) {
+   return null;
+}
+SSRInitialFilled.muiName = 'Input';
+
+export interface NumberProps extends Omit<
+   BaseNumberField.Root.Props,
+   'render' | 'label' | 'size'
+> {
+   error?: boolean;
+}
+
+export function Number({
+   id: idProp,
+   error,
+   ...other
+}: BaseNumberField.Root.Props & {
+   label?: React.ReactNode;
+   error?: boolean;
+}) {
+   const size = 'medium';
+
+   let id = React.useId();
+   if (idProp) {
+      id = idProp;
+   }
+   return (
+      <BaseNumberField.Root {...other}>
+         <SSRInitialFilled {...other} />
+         <BaseNumberField.Input
+            id={id}
+            render={(props, state) => (
+               <TextField
+                  aria-describedby={`${id}-helper-text`}
+                  inputRef={props.ref}
+                  value={state.inputValue}
+                  onBlur={props.onBlur}
+                  onChange={props.onChange}
+                  onKeyUp={props.onKeyUp}
+                  onKeyDown={props.onKeyDown}
+                  onFocus={props.onFocus}
+                  InputProps={{
+                     inputProps: {
+                        sx: {
+                           height: 19,
+                           fontWeight: 400,
+                        },
+                     },
+                     endAdornment: (
+                        <InputAdornment
+                           position="end"
+                           sx={{
+                              flexDirection: 'column',
+                              maxHeight: 'unset',
+                              alignSelf: 'stretch',
+                              borderLeft: '1px solid',
+                              borderColor: 'divider',
+                              '& button': {
+                                 py: 0,
+                                 flex: 1,
+                                 borderRadius: 0.5,
+                              },
+                           }}
+                        >
+                           <BaseNumberField.Increment
+                              render={<IconButton aria-label="Increase" />}
+                           >
+                              <KeyboardArrowUpIcon
+                                 fontSize={size}
+                                 sx={{ transform: 'translateY(2px)' }}
+                              />
+                           </BaseNumberField.Increment>
+
+                           <BaseNumberField.Decrement
+                              render={<IconButton aria-label="Decrease" />}
+                           >
+                              <KeyboardArrowDownIcon
+                                 fontSize={size}
+                                 sx={{ transform: 'translateY(-2px)' }}
+                              />
+                           </BaseNumberField.Decrement>
+                        </InputAdornment>
+                     ),
+                  }}
+                  sx={{ width: '100%' }}
+               />
+            )}
+         />
+      </BaseNumberField.Root>
+   );
+}

package/src/components/inputs/index.ts

@@ -1,2 +1,3 @@
 export * from './SelectAutocomplete';
 export * from './MultiselectAutocomplete';
+export * from './Number';