@sonardigital/carbon-ui 1.1.61 → 1.1.67

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

@@ -4,34 +4,52 @@ import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
 import { SelectAutocomplete } from '../../inputs';
 
-interface SelectAutocompleteProps
-  extends Omit<
-    AutocompleteProps<{ label: string; value: string | number }, false, false, false>,
-    'renderInput' | 'options' | 'value' | 'onChange'
-  > {
-  name: string;
-  label: string;
-  placeholder?: string;
-  options?: { label: string; value: string | number }[];
-  helperText?: string;
-  fetchOptions?: () => Promise<{ label: string; value: string | number }[]>;
+// eslint-disable-next-line
+interface SelectAutocompleteProps extends Omit<
+   AutocompleteProps<
+      { label: string; value: string | number },
+      false,
+      false,
+      false
+   >,
+   'renderInput' | 'options' | 'value' | 'onChange'
+> {
+   name: string;
+   label: string;
+   placeholder?: string;
+   options?: { label: string; value: string | number }[];
+   helperText?: string;
+   fetchOptions?: () => Promise<{ label: string; value: string | number }[]>;
 }
 
-export function FormSelect({ name, label, options, ...rest }: SelectAutocompleteProps): React.ReactElement {
-  return (
-    <Controller
-      name={name}
-      render={({ field, fieldState }) => {
-        const { value, onChange } = field;
-        return (
-          <FormLabel label={label}>
-            <Stack gap={0.8}>
-              <SelectAutocomplete {...field} {...rest} options={options} value={value} onChange={onChange} />
-              {fieldState.error && <FormError label={fieldState.error?.message ?? ''} />}
-            </Stack>
-          </FormLabel>
-        );
-      }}
-    />
-  );
+export function FormSelect({
+   name,
+   label,
+   options,
+   ...rest
+}: SelectAutocompleteProps): React.ReactElement {
+   return (
+      <Controller
+         name={name}
+         render={({ field, fieldState }) => {
+            const { value, onChange } = field;
+            return (
+               <FormLabel label={label}>
+                  <Stack gap={0.8}>
+                     <SelectAutocomplete
+                        {...field}
+                        {...rest}
+                        options={options}
+                        value={value}
+                        onChange={onChange}
+                     />
+                     {fieldState.error && (
+                        <FormError label={fieldState.error?.message ?? ''} />
+                     )}
+                  </Stack>
+               </FormLabel>
+            );
+         }}
+      />
+   );
 }

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

@@ -4,27 +4,42 @@ import { FormError } from '../layout/FormError';
 import { Switch } from '../../inputs/Switch';
 
 interface FormSwitchProps extends SwitchProps {
-  name: string;
-  label: string;
+   name: string;
+   label: string;
 }
 
-export function FormSwitch({ name, label, ...props }: FormSwitchProps): React.ReactElement {
-  return (
-    <Controller
-      name={name}
-      render={({ field, fieldState }) => (
-        <Stack width="100%" flexDirection="row" alignItems="center" justifyContent="space-between" gap={0.8}>
-          <Typography variant="body2" fontWeight={400}>
-            {label}
-          </Typography>
-          <Switch
-            value={field.value}
-            onChange={(_: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => field.onChange(newValue)}
-            {...props}
-          />
-          {fieldState.error && <FormError label={fieldState.error?.message ?? ''} />}
-        </Stack>
-      )}
-    />
-  );
+export function FormSwitch({
+   name,
+   label,
+   ...props
+}: FormSwitchProps): React.ReactElement {
+   return (
+      <Controller
+         name={name}
+         render={({ field, fieldState }) => (
+            <Stack
+               width="100%"
+               flexDirection="row"
+               alignItems="center"
+               justifyContent="space-between"
+               gap={0.8}
+            >
+               <Typography variant="body2" fontWeight={400}>
+                  {label}
+               </Typography>
+               <Switch
+                  value={field.value}
+                  onChange={(
+                     _: React.ChangeEvent<HTMLInputElement>,
+                     newValue: boolean,
+                  ) => field.onChange(newValue)}
+                  {...props}
+               />
+               {fieldState.error && (
+                  <FormError label={fieldState.error?.message ?? ''} />
+               )}
+            </Stack>
+         )}
+      />
+   );
 }

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

@@ -1,34 +1,45 @@
-import { Stack, TextareaAutosize, TextareaAutosizeProps, useTheme } from '@mui/material';
+import {
+   Stack,
+   TextareaAutosize,
+   TextareaAutosizeProps,
+   useTheme,
+} from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
 
 interface FormTextareaProps extends TextareaAutosizeProps {
-  name: string;
-  label: string;
+   name: string;
+   label: string;
 }
 
-export function FormTextarea({ name, label, ...props }: FormTextareaProps): React.ReactElement {
-  const theme = useTheme();
+export function FormTextarea({
+   name,
+   label,
+   ...props
+}: FormTextareaProps): React.ReactElement {
+   const theme = useTheme();
 
-  return (
-    <Controller
-      name={name}
-      render={({ field, fieldState }) => (
-        <FormLabel label={label}>
-          <Stack gap={0.8}>
-            <TextareaAutosize
-              minRows={5}
-              {...field}
-              {...props}
-              style={{
-                borderRadius: theme.shape.borderRadius,
-              }}
-            />
-            {fieldState.error && <FormError label={fieldState.error?.message ?? ''} />}
-          </Stack>
-        </FormLabel>
-      )}
-    />
-  );
+   return (
+      <Controller
+         name={name}
+         render={({ field, fieldState }) => (
+            <FormLabel label={label}>
+               <Stack gap={0.8}>
+                  <TextareaAutosize
+                     minRows={5}
+                     {...field}
+                     {...props}
+                     style={{
+                        borderRadius: theme.shape.borderRadius,
+                     }}
+                  />
+                  {fieldState.error && (
+                     <FormError label={fieldState.error?.message ?? ''} />
+                  )}
+               </Stack>
+            </FormLabel>
+         )}
+      />
+   );
 }

package/src/components/form/fields/form-list/FormList.tsx

@@ -1,97 +1,109 @@
 import { Button, IconButton, Stack } from '@mui/material';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { Row } from './Row';
-import { RemoveCircleOutline, AddCircleOutline, CheckOutlined } from '@mui/icons-material';
+import {
+   RemoveCircleOutline,
+   AddCircleOutline,
+   CheckOutlined,
+} from '@mui/icons-material';
 import { FormError } from '../../layout';
 
 export interface FormListField {
-  component: React.ReactElement;
-  size?: number;
+   component: React.ReactElement;
+   size?: number;
 }
 
 export interface FormListProps {
-  name: string;
-  label: string;
-  fields: FormListField[];
-  maxItems?: number;
-  defaultValues?: Record<string, unknown>;
+   name: string;
+   label: string;
+   fields: FormListField[];
+   maxItems?: number;
+   defaultValues?: Record<string, unknown>;
 }
 
 // eslint-disable-next-line
 const getErrorMessage = (error: any): string | undefined => {
-  if (!error) return;
-  if (typeof error === 'string') return error;
-  return error.message;
+   if (!error) return;
+   if (typeof error === 'string') return error;
+   return error.message;
 };
 
 export function FormList({
-  name,
-  label,
-  fields,
-  maxItems,
-  defaultValues,
+   name,
+   label,
+   fields,
+   maxItems,
+   defaultValues,
 }: FormListProps): React.ReactElement {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
+   const {
+      control,
+      formState: { errors },
+   } = useFormContext();
 
-  const {
-    fields: arrayFields,
-    append,
-    remove,
-  } = useFieldArray({
-    control,
-    name,
-  });
+   const {
+      fields: arrayFields,
+      append,
+      remove,
+   } = useFieldArray({
+      control,
+      name,
+   });
 
-  const errorMessage = getErrorMessage(errors[name]);
+   const errorMessage = getErrorMessage(errors[name]);
 
-  return (
-    <Stack direction="column" gap={1.5}>
-      {arrayFields.map((f, index) => (
-        <Stack
-          key={f.id}
-          width="100%"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="space-between"
-          gap={1.5}
-        >
-          <IconButton size="large" onClick={() => remove(index)} style={{ marginTop: 30 }}>
-            <RemoveCircleOutline sx={{ width: 20, height: 20 }} />
-          </IconButton>
+   return (
+      <Stack direction="column" gap={1.5}>
+         {arrayFields.map((f, index) => (
+            <Stack
+               key={f.id}
+               width="100%"
+               flexDirection="row"
+               alignItems="center"
+               justifyContent="space-between"
+               gap={1.5}
+            >
+               <IconButton
+                  size="large"
+                  onClick={() => remove(index)}
+                  style={{ marginTop: 30 }}
+               >
+                  <RemoveCircleOutline sx={{ width: 20, height: 20 }} />
+               </IconButton>
 
-          <Row name={name} fields={fields} index={index} />
+               <Row name={name} fields={fields} index={index} />
 
-          {index === arrayFields.length - 1 ? (
-            <IconButton
-              size="large"
-              disabled={arrayFields.length === maxItems}
-              onClick={() => append(defaultValues ?? {})}
-              style={{ marginTop: 30 }}
-            >
-              <AddCircleOutline sx={{ width: 20, height: 20 }} />
-            </IconButton>
-          ) : (
-            <IconButton
-              size="large"
-              disabled={arrayFields.length === maxItems}
-              sx={{ marginTop: 3, cursor: 'default' }}
-            >
-              <CheckOutlined sx={{ width: 20, height: 20 }} />
-            </IconButton>
-          )}
-        </Stack>
-      ))}
+               {index === arrayFields.length - 1 ? (
+                  <IconButton
+                     size="large"
+                     disabled={arrayFields.length === maxItems}
+                     onClick={() => append(defaultValues ?? {})}
+                     style={{ marginTop: 30 }}
+                  >
+                     <AddCircleOutline sx={{ width: 20, height: 20 }} />
+                  </IconButton>
+               ) : (
+                  <IconButton
+                     size="large"
+                     disabled={arrayFields.length === maxItems}
+                     sx={{ marginTop: 3, cursor: 'default' }}
+                  >
+                     <CheckOutlined sx={{ width: 20, height: 20 }} />
+                  </IconButton>
+               )}
+            </Stack>
+         ))}
 
-      {arrayFields.length === 0 && (
-        <Button variant="contained" color="info" onClick={() => append(defaultValues ?? {})}>
-          {label}
-        </Button>
-      )}
+         {arrayFields.length === 0 && (
+            <Button
+               variant="contained"
+               color="info"
+               onClick={() => append(defaultValues ?? {})}
+            >
+               {label}
+            </Button>
+         )}
 
-      {errorMessage && <FormError label={errorMessage} />}
-    </Stack>
-  );
+         {errorMessage && <FormError label={errorMessage} />}
+      </Stack>
+   );
 }

package/src/components/form/fields/form-list/Row.tsx

@@ -4,31 +4,31 @@ import { UseFieldArrayRemove } from 'react-hook-form';
 import { FormListField } from './FormList';
 
 export function Row(props: {
-  name: string;
-  fields: FormListField[];
-  index: number;
-  remove?: UseFieldArrayRemove;
+   name: string;
+   fields: FormListField[];
+   index: number;
+   remove?: UseFieldArrayRemove;
 }): React.ReactElement {
-  const { name, fields, index } = props;
+   const { name, fields, index } = props;
 
-  return (
-    <Stack width="100%" direction="row" alignItems="start" gap={0.5}>
-      <Grid width="100%" container spacing={2}>
-        {fields?.map((field: FormListField, i: number) => {
-          const Component = field.component;
-          return (
-            <Grid size={field?.size || 3} key={i}>
-              {{
-                ...Component,
-                props: {
-                  ...((Component?.props as object) || {}),
-                  name: `${name}[${index}].${(Component?.props as unknown as { name?: string })?.name}`,
-                },
-              }}
-            </Grid>
-          );
-        })}
-      </Grid>
-    </Stack>
-  );
+   return (
+      <Stack width="100%" direction="row" alignItems="start" gap={0.5}>
+         <Grid width="100%" container spacing={2}>
+            {fields?.map((field: FormListField, i: number) => {
+               const Component = field.component;
+               return (
+                  <Grid size={field?.size || 3} key={i}>
+                     {{
+                        ...Component,
+                        props: {
+                           ...((Component?.props as object) || {}),
+                           name: `${name}[${index}].${(Component?.props as unknown as { name?: string })?.name}`,
+                        },
+                     }}
+                  </Grid>
+               );
+            })}
+         </Grid>
+      </Stack>
+   );
 }

package/src/components/form/layout/FormError.tsx

@@ -1,11 +1,15 @@
 import { Alert, Typography } from '@mui/material';
 
 export function FormError({ label }: { label: string }): React.ReactElement {
-  return (
-    <Alert severity="error" icon={false} sx={{ bgcolor: 'error.light' }}>
-      <Typography variant="body2" color="error" sx={{ opacity: 1, color: 'error.main' }}>
-        {label}
-      </Typography>
-    </Alert>
-  );
+   return (
+      <Alert severity="error" icon={false} sx={{ bgcolor: 'error.light' }}>
+         <Typography
+            variant="body2"
+            color="error"
+            sx={{ opacity: 1, color: 'error.main' }}
+         >
+            {label}
+         </Typography>
+      </Alert>
+   );
 }

package/src/components/form/layout/FormLabel.tsx

@@ -2,18 +2,18 @@ import { Stack, Typography } from '@mui/material';
 import React from 'react';
 
 export function FormLabel({
-  label,
-  children,
+   label,
+   children,
 }: {
-  label: string;
-  children: React.ReactNode;
+   label: string;
+   children: React.ReactNode;
 }): React.ReactElement {
-  return (
-    <Stack width="100%" gap={0.5}>
-      <Typography variant="body2" fontWeight={400}>
-        {label}
-      </Typography>
-      {children}
-    </Stack>
-  );
+   return (
+      <Stack width="100%" gap={0.5}>
+         <Typography variant="body2" fontWeight={400}>
+            {label}
+         </Typography>
+         {children}
+      </Stack>
+   );
 }