@sonardigital/carbon-ui 1.2.14 → 1.2.17

package/package.json

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

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

@@ -1,15 +1,7 @@
-import {
-   ClickAwayListener,
-   IconButton,
-   Stack,
-   TextField,
-   TextFieldProps,
-} from '@mui/material';
+import { Stack, TextField, TextFieldProps } from '@mui/material';
 import { Controller } from 'react-hook-form';
 import { FormLabel } from '../layout';
 import { FormError } from '../layout/FormError';
-import { useState } from 'react';
-import { RiCloseFill } from 'react-icons/ri';
 
 interface FormInputProps extends TextFieldProps<'standard'> {
    name: string;
@@ -21,34 +13,13 @@ export function FormInput({
    label,
    ...props
 }: FormInputProps): React.ReactElement {
-   const [isFocused, setIsFocused] = useState(false);
    return (
       <Controller
          name={name}
          render={({ field, fieldState }) => (
             <FormLabel label={label}>
                <Stack gap={0.8}>
-                  <ClickAwayListener onClickAway={() => setIsFocused(false)}>
-                     <TextField
-                        {...field}
-                        {...props}
-                        onFocus={() => setIsFocused(true)}
-                        InputProps={{
-                           endAdornment: isFocused && field.value && (
-                              <IconButton
-                                 size="medium"
-                                 onClick={() => {
-                                    field.onChange(undefined);
-                                    setIsFocused(false);
-                                 }}
-                              >
-                                 <RiCloseFill size={18} />
-                              </IconButton>
-                           ),
-                           ...props.InputProps,
-                        }}
-                     />
-                  </ClickAwayListener>
+                  <TextField {...field} {...props} />
                   {fieldState.error && (
                      <FormError label={fieldState.error?.message ?? ''} />
                   )}

package/src/theme/constants/components.ts

@@ -1,5 +1,10 @@
 import { Theme } from '@emotion/react';
-import { Components, CssVarsTheme, linearProgressClasses } from '@mui/material';
+import {
+   ButtonProps,
+   Components,
+   CssVarsTheme,
+   linearProgressClasses,
+} from '@mui/material';
 import { palette } from './palette';
 
 const defaultButtonStyle = {
@@ -13,6 +18,27 @@ const defaultButtonStyle = {
 
 const borderRadius = 1;
 
+const generateButtonVariants = (
+   color: Exclude<NonNullable<ButtonProps['color']>, 'inherit'>,
+) => {
+   return {
+      props: {
+         variant: 'contained' as const,
+         color,
+      },
+      style: ({ theme }: any) => ({
+         ...defaultButtonStyle,
+         backgroundColor: theme.palette[color].light,
+         color: theme.palette[color].main,
+         '&:hover': {
+            boxShadow: 0,
+            backgroundColor: theme.palette[color].main,
+            color: 'white',
+         },
+      }),
+   };
+};
+
 export const components: Components<
    Omit<Theme, 'components' | 'palette'> & CssVarsTheme
 > = {
@@ -202,7 +228,15 @@ export const components: Components<
          },
       },
    },
-
+   MuiSkeleton: {
+      defaultProps: {
+         variant: 'rounded',
+         animation: 'wave',
+         sx: {
+            bgcolor: 'grey.100',
+         },
+      },
+   },
    MuiAccordionDetails: {
       defaultProps: {
          sx: {
@@ -290,54 +324,12 @@ export const components: Components<
    },
    MuiButton: {
       variants: [
-         {
-            props: {
-               variant: 'contained',
-               color: 'primary',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               backgroundColor: theme.palette.primary.light,
-               color: theme.palette.primary.main,
-               '&:hover': {
-                  boxShadow: 0,
-                  backgroundColor: theme.palette.primary.main,
-                  color: 'white',
-               },
-            }),
-         },
-         {
-            props: {
-               variant: 'contained',
-               color: 'secondary',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               backgroundColor: theme.palette.secondary.light,
-               color: theme.palette.secondary.main,
-               '&:hover': {
-                  boxShadow: 0,
-                  backgroundColor: theme.palette.secondary.main,
-                  color: 'white',
-               },
-            }),
-         },
-         {
-            props: {
-               variant: 'contained',
-               color: 'info',
-            },
-            style: ({ theme }) => ({
-               ...defaultButtonStyle,
-               paddingTop: 10,
-               backgroundColor: theme.palette.info.light,
-               color: theme.palette.info.main,
-               '&:hover': {
-                  backgroundColor: theme.palette.info.main,
-                  color: 'white',
-               },
-            }),
-         },
+         generateButtonVariants('primary'),
+         generateButtonVariants('secondary'),
+         generateButtonVariants('info'),
+         generateButtonVariants('error'),
+         generateButtonVariants('success'),
+         generateButtonVariants('warning'),
          {
             props: {
                variant: 'text',