@campxdev/react-blueprint 1.7.15 → 1.7.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.7.15",
+  "version": "1.7.17",
   "main": "./export.ts",
   "dependencies": {
     "@emotion/react": "^11.13.3",

package/src/components/Input/FileUpload/FileUpload.tsx

@@ -4,11 +4,10 @@ import {
   Stack,
   styled,
   SxProps,
-  useTheme,
   useMediaQuery,
+  useTheme,
 } from '@mui/material';
 import { IconButtons, Icons, PreviewFiles, Typography } from '../../export';
-import { alpha } from '@mui/system';
 
 export type FileUploadProps = {
   label: string;
@@ -22,6 +21,7 @@ export type FileUploadProps = {
   inputText?: string;
   multiple?: boolean;
   hideDeleteButton?: boolean;
+  hideInput?: boolean;
   errorText?: string;
   sx?: SxProps;
   showImage?: boolean;
@@ -40,6 +40,7 @@ export const FileUpload = ({
   inputText,
   onInvalidFile,
   hideDeleteButton = false,
+  hideInput = false,
   multiple = true,
   errorText,
   showImage,
@@ -81,6 +82,7 @@ export const FileUpload = ({
           onChange([validFiles[0]]);
         }
       }
+      event.target.value = ''; //Resets value after selection
     }
   };
 
@@ -93,40 +95,47 @@ export const FileUpload = ({
             {' *'}
           </span>
         )}
-      </Typography>{' '}
-      <input
-        accept={accept}
-        style={{ display: 'none' }}
-        id={name}
-        name={name}
-        type="file"
-        multiple={multiple}
-        disabled={disabled}
-        onChange={handleFileChange}
-      />
-      <FormLabel htmlFor={name}>
-        <StyledFileSelectorContainer>
-          <Stack display={'flex'} alignItems={'center'}>
-            <Icons.ExportIcon size={20} />
-            <Typography color={theme.palette.text.tertiary} variant="label2">
-              {inputText ?? 'Upload Files'}
-            </Typography>
-          </Stack>
-        </StyledFileSelectorContainer>
-        {errorText && (
-          <Typography
-            sx={{
-              display: 'flex',
-              alignItems: 'flex-end',
-              justifyContent: 'flex-end',
-              color: theme.palette.highlight.highlightRed,
-            }}
-            variant="caption"
-          >
-            {errorText}
-          </Typography>
-        )}
-      </FormLabel>
+      </Typography>
+      {!hideInput && (
+        <>
+          <input
+            accept={accept}
+            style={{ display: 'none' }}
+            id={name}
+            name={name}
+            type="file"
+            multiple={multiple}
+            disabled={disabled}
+            onChange={handleFileChange}
+          />
+          <FormLabel htmlFor={name}>
+            <StyledFileSelectorContainer>
+              <Stack display={'flex'} alignItems={'center'}>
+                <Icons.ExportIcon size={20} />
+                <Typography
+                  color={theme.palette.text.tertiary}
+                  variant="label2"
+                >
+                  {inputText ?? 'Upload Files'}
+                </Typography>
+              </Stack>
+            </StyledFileSelectorContainer>
+            {errorText && (
+              <Typography
+                sx={{
+                  display: 'flex',
+                  alignItems: 'flex-end',
+                  justifyContent: 'flex-end',
+                  color: theme.palette.highlight.highlightRed,
+                }}
+                variant="caption"
+              >
+                {errorText}
+              </Typography>
+            )}
+          </FormLabel>
+        </>
+      )}
       <Box display="flex" gap="12px" flexWrap="wrap">
         {showImage ? (
           files.map((file, index) => (
@@ -181,6 +190,7 @@ export const FileUpload = ({
               sx={previewSx}
               files={files}
               onChange={(newFiles) => onChange?.(newFiles)}
+              hideDelete={hideDeleteButton}
             />
           </Box>
         )}

package/src/components/Input/FormControlWrapper/FormControlWrapper.tsx

@@ -10,6 +10,7 @@ interface FormControlWrapperProps<T extends FieldValues = FieldValues> {
   children: ReactNode;
   containerSx?: SxProps;
   formActionProps?: FormActionsProps;
+  disabled?: boolean;
 }
 
 type FormElementProps = {
@@ -32,6 +33,7 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
   children,
   containerSx,
   formActionProps,
+  disabled = false,
 }: FormControlWrapperProps<T>) {
   const wrapWithController = (
     element: ReactElement<any>,
@@ -56,13 +58,14 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
                 files: field.value || [],
                 ...field,
                 errorText: error ? error.message : undefined,
+                disabled,
               } as FileUploadProps);
             }
             const additionalProps =
               element.type === 'input' && restProps.type === 'checkbox'
                 ? { checked: field.value }
                 : { value: field.value };
-            console.log(error);
+
             return React.cloneElement(element, {
               ...restProps,
               ...field,
@@ -70,6 +73,7 @@ export function FormControlWrapper<T extends FieldValues = FieldValues>({
               error: !!error,
               helperText: error ? error.message : null,
               children: childElements,
+              disabled,
             } as FormElementProps);
           }}
         />

package/src/components/Navigation/PreviewFiles/PreviewFiles.tsx

@@ -16,6 +16,7 @@ export type PreviewFilesProps = {
   label?: string;
   onChange?: (newFiles: File[], deletedFile: File) => void;
   showDownload?: boolean;
+  hideDelete?: boolean;
   sx?: SxProps;
 } & Omit<BoxProps, 'onChange'>;
 
@@ -24,6 +25,7 @@ export const PreviewFiles = ({
   label,
   onChange,
   showDownload,
+  hideDelete = false,
   sx,
   ...props
 }: PreviewFilesProps) => {
@@ -135,7 +137,7 @@ export const PreviewFiles = ({
                 <Icons.DownloadIcon />
               </IconButton>
             )}
-            {onChange && (
+            {onChange && !hideDelete && (
               <IconButton
                 onClick={() => {
                   onChange(

package/src/themes/commonTheme.ts

@@ -261,7 +261,7 @@ export const getCommonTheme = (mode: Theme) => {
             fullWidth: true,
           },
           paper: {
-            // color: ColorTokens.surface.defaultBackground,
+            backgroundColor: ColorTokens.surface.defaultBackground,
             borderRadius: '5px',
             width: '100%',
             maxHeight: 'calc(100vh - 64px)',

package/src/stories/Navigation/ManageFilters.stories.tsx

@@ -1,116 +0,0 @@
-import { Meta, StoryFn } from '@storybook/react';
-import { ReactNode, useState } from 'react';
-import {
-  ManageFilters,
-  ManageFiltersProps,
-  SingleSelect,
-  TextField,
-} from '../../components/export';
-import { RadioGroup } from '../../components/Input/RadioGroup/RadioGroup';
-
-const meta: Meta<typeof ManageFilters> = {
-  title: 'Navigation/ManageFilters',
-  component: ManageFilters,
-  argTypes: {
-    options: {
-      control: { type: 'object' },
-      description: 'Array of filter options with labels and values.',
-    },
-    onChange: {
-      action: 'changed',
-      description: 'Callback when the selected values change.',
-    },
-    menuProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI Menu component.',
-    },
-    menuListProps: {
-      control: { type: 'object' },
-      description: 'Props to customize the MUI MenuList component.',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-export default meta;
-
-const Template: StoryFn<ManageFiltersProps> = (args) => {
-  const [selectedValues, setSelectedValues] = useState<ReactNode[]>([]);
-
-  const handleOnChange = (values: ReactNode[]) => {
-    setSelectedValues(values);
-    args.onChange(values);
-  };
-
-  return (
-    <>
-      <ManageFilters {...args} onChange={handleOnChange} />
-      <div>
-        {selectedValues.length > 0 ? (
-          <ul>{selectedValues.map((value, index) => value)}</ul>
-        ) : (
-          <p>No values selected.</p>
-        )}
-      </div>
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  options: [
-    {
-      label: 'Option 1',
-      value: (
-        <SingleSelect
-          onChange={() => {}}
-          options={[
-            {
-              label: 'done',
-              value: 'done',
-            },
-            {
-              label: 'processing',
-              value: 'processing',
-            },
-            {
-              label: 'onHold',
-              value: 'onHold',
-            },
-          ]}
-        />
-      ),
-    },
-    {
-      label: 'text Filed',
-      value: <TextField sx={{ width: '250px' }} />,
-    },
-    {
-      label: 'Radio Group',
-      value: (
-        <RadioGroup
-          options={[
-            {
-              label: 'done',
-              value: 'done',
-            },
-            {
-              label: 'processing',
-              value: 'processing',
-            },
-            {
-              label: 'onHold',
-              value: 'onHold',
-            },
-          ]}
-          label={''}
-          required={false}
-          name={''}
-          disabled={false}
-        />
-      ),
-    },
-  ],
-};