@campxdev/shared 1.4.7 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Input/MultiCheckbox.tsx

@@ -1,62 +1,64 @@
-import { Box, FormGroup, FormHelperText } from '@mui/material'
+import { Box, BoxProps, FormGroup, FormHelperText } from '@mui/material'
+import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import FormLabel from './FormLabel'
 import SingleCheckbox from './SingleCheckbox'
 
 interface Props {
-  label?: string
+  label?: ReactNode
   name: string
   size?: 'small' | 'medium'
-  control: any
-  options: Array<{ label: string; value: string }>
+  options: Array<{ label: ReactNode; value: any }>
   required?: boolean
   row?: boolean
+  error?: boolean
+  helperText?: ReactNode
+  value: { label: string; value: any }[]
+  onChange: (value: { label: ReactNode; value: any }[]) => void
+  containerProps?: BoxProps
 }
 
-export default function MultiCheckbox(props: Props) {
-  const {
-    name,
-    control,
-    label = '',
-    options = [],
-    required = false,
-    row = true,
-  } = props
-
+export default function MultiCheckbox({
+  name,
+  label,
+  options = [],
+  required = false,
+  value = [],
+  onChange,
+  error,
+  helperText,
+  row = true,
+  containerProps,
+  ...rest
+}: Props) {
   return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Box width="100%">
-          <FormLabel label={label} required={required} name={name} />
-          <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
-            {options?.map((item, index) => (
-              <SingleCheckbox
-                name={name}
-                key={index}
-                label={item.label}
-                checked={field?.value
-                  ?.map((item: any) => item?.value)
-                  ?.includes(item?.value)}
-                onChange={(e) => {
-                  let value = field.value || []
-                  if (e.target.checked) {
-                    let newValue = [...value, item]
-                    field.onChange(newValue)
-                  } else {
-                    let filteredValue = value.filter(
-                      (opt: any) => opt?.value !== item.value,
-                    )
-                    field.onChange(filteredValue)
-                  }
-                }}
-              />
-            ))}
-          </FormGroup>
-          {error && <FormHelperText>{error.message}</FormHelperText>}
-        </Box>
-      )}
-    />
+    <Box width="100%" {...containerProps}>
+      <FormLabel label={label} required={required} name={name} />
+      <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
+        {options?.map((item, index) => (
+          <SingleCheckbox
+            name={name}
+            key={index}
+            label={item.label}
+            checked={value
+              ?.map((item: any) => item?.value)
+              ?.includes(item?.value)}
+            onChange={(e) => {
+              if (e.target.checked) {
+                let newValue = [...value, item]
+                onChange(newValue)
+              } else {
+                let filteredValue = value.filter(
+                  (opt: any) => opt?.value !== item.value,
+                )
+                onChange(filteredValue)
+              }
+            }}
+            {...rest}
+          />
+        ))}
+      </FormGroup>
+      {error && <FormHelperText>{helperText}</FormHelperText>}
+    </Box>
   )
 }

package/src/components/Input/RadioGroup.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  BoxProps,
   FormControlLabel,
   Radio,
   RadioGroup as MuiRadioGroup,
@@ -56,6 +57,7 @@ interface Props extends RadioGroupProps {
   row?: boolean
   required?: boolean
   options: { value: any; label: string | ReactNode }[]
+  containerProps?: BoxProps
 }
 
 export default function RadioGroup(props: Props) {
@@ -67,10 +69,11 @@ export default function RadioGroup(props: Props) {
     required = false,
     value,
     onChange,
+    containerProps,
     ...rest
   } = props
   return (
-    <Box width="100%">
+    <Box width="100%" {...containerProps}>
       <FormLabel label={label} name={name} required={required} />
       <MuiRadioGroup
         value={value}

package/src/components/Input/SingleSelect.tsx

@@ -7,18 +7,11 @@ import {
   Select,
   FormHelperText,
   Box,
+  BoxProps,
 } from '@mui/material'
 import { ReactNode } from 'react'
 import FormLabel from './FormLabel'
 
-type Props = {
-  options: Array<{ label: ReactNode; value: any }>
-  onChange?: (value: any) => void
-  required?: boolean
-  firstItemEmpty?: boolean
-  helperText?: string
-} & SelectProps
-
 const StyledFormControl = styled(FormControl)(({ theme }) => ({
   '& .MuiInputBase-root': {
     '& legend': { display: 'none' },
@@ -39,7 +32,6 @@ const PaperProps = {
     maxHeight: 360,
     marginTop: '1px',
     '& .MuiList-root': {
-      minWidth: '240px',
       padding: 0,
       '& li': {
         height: '60px',
@@ -55,6 +47,15 @@ const PaperProps = {
   },
 }
 
+type Props = {
+  options: Array<{ label: ReactNode; value: any }>
+  onChange?: (value: any) => void
+  required?: boolean
+  firstItemEmpty?: boolean
+  helperText?: string
+  containerProps?: BoxProps
+} & SelectProps
+
 export default function SingleSelect({
   name = 'select',
   options = [],
@@ -63,6 +64,7 @@ export default function SingleSelect({
   required,
   value,
   helperText,
+  containerProps,
   firstItemEmpty = false,
   ...props
 }: Props) {
@@ -71,7 +73,7 @@ export default function SingleSelect({
     : options
 
   return (
-    <Box width="100%">
+    <Box width="100%" {...containerProps}>
       <FormLabel required={required} label={label} name={name} />
       <StyledFormControl fullWidth>
         <Select

package/src/components/Input/TextField.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  BoxProps,
   styled,
   TextField as MuiTextField,
   TextFieldProps as MuiTextFieldProps,
@@ -17,7 +18,9 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => ({
   },
 }))
 
-type TextFieldProps = {} & MuiTextFieldProps
+type TextFieldProps = {
+  containerProps?: BoxProps
+} & MuiTextFieldProps
 
 export default function TextField({
   name,
@@ -25,10 +28,11 @@ export default function TextField({
   value,
   onChange,
   required = false,
+  containerProps,
   ...rest
 }: TextFieldProps) {
   return (
-    <Box width="100%">
+    <Box width="100%" {...containerProps}>
       <FieldLabel label={label} required={required} name={name} />
       <StyledTextField
         id={name}