@homefile/components-v2 2.23.0 → 2.23.1

package/dist/components/dragDrop/DragDropArea.d.ts

@@ -1,2 +1,2 @@
 import { DragDropAreaI } from '../../interfaces';
-export declare const DragDropArea: ({ align, direction, errorMessage, getInputProps, getRootProps, height, message, message2, variant, }: DragDropAreaI) => import("react/jsx-runtime").JSX.Element;
+export declare const DragDropArea: ({ align, direction, errorMessage, getInputProps, getRootProps, height, message, message2, variant, multiple, }: DragDropAreaI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dragDrop/DragDropArea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Container, Flex, Stack, Text } from '@chakra-ui/react';
 import { Upload } from '..';
-export const DragDropArea = ({ align = 'center', direction = 'row', errorMessage, getInputProps, getRootProps, height = '4rem', message = t('dragDrop.message'), message2 = t('dragDrop.message2'), variant = 'dragDropDashed', }) => {
+export const DragDropArea = ({ align = 'center', direction = 'row', errorMessage, getInputProps, getRootProps, height = '4rem', message = t('dragDrop.message'), message2 = t('dragDrop.message2'), variant = 'dragDropDashed', multiple = false, }) => {
     const hasError = !!errorMessage;
-    return (_jsxs(Stack, { spacing: "1", children: [_jsxs(Container, Object.assign({ variant: variant, minW: "full", h: height }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), _jsx(Flex, { h: height, align: align, justify: "center", p: "base", children: _jsxs(Flex, { align: "center", direction: direction, gap: "2", children: [_jsx(Upload, {}), _jsxs(Flex, { align: "center", gap: "1", children: [message && _jsx(Text, { variant: "dragDrop", children: message }), message2 && _jsx(Text, { variant: "dragDropLink", children: message2 })] })] }) })] })), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
+    return (_jsxs(Stack, { spacing: "1", children: [_jsxs(Container, Object.assign({ variant: variant, minW: "full", h: height }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps({ multiple }))), _jsx(Flex, { h: height, align: align, justify: "center", p: "base", children: _jsxs(Flex, { align: "center", direction: direction, gap: "2", children: [_jsx(Upload, {}), _jsxs(Flex, { align: "center", gap: "1", children: [message && _jsx(Text, { variant: "dragDrop", children: message }), message2 && _jsx(Text, { variant: "dragDropLink", children: message2 })] })] }) })] })), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };

package/dist/components/forms/dynamicForm/DynamicForm.d.ts

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '../../../interfaces';
-export declare const DynamicForm: ({ callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching, showTitle, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicForm: ({ callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching, showTitle, singleFileUpload, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/DynamicForm.js

@@ -18,7 +18,7 @@ import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField,
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
-    var { callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching = false, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onAISend", "onRemoveImage", "onUpload", "searching", "showTitle", "title", "uploadingFieldId"]);
+    var { callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching = false, showTitle = true, singleFileUpload, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onAISend", "onRemoveImage", "onUpload", "searching", "showTitle", "singleFileUpload", "title", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
     if (searching) {
         return _jsx(SearchItemLoader, {});
@@ -76,7 +76,7 @@ export const DynamicForm = (_a) => {
                                     _jsx(SwitchField, Object.assign({}, baseProps, { description: description }))));
                             case 'file':
                                 return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
-                                    _jsx(FileField, { icon: baseProps.icon, description: description, onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id, displayImages: displayImages })));
+                                    _jsx(FileField, Object.assign({}, baseProps, { description: description, onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id, displayImages: displayImages, singleFileUpload: singleFileUpload, value: value }))));
                             case 'group':
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
                             case 'checkbox-group':

package/dist/components/forms/dynamicForm/fields/FileField.d.ts

@@ -1,2 +1,2 @@
 import { FileFieldI } from '../../../../interfaces';
-export declare const FileField: ({ description, icon, onRemove, onUpload, uploading, displayImages, }: FileFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const FileField: ({ description, icon, onRemove, onUpload, uploading, displayImages, singleFileUpload, }: FileFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/FileField.js

@@ -3,13 +3,13 @@ import { AspectRatio, Box, Flex, Grid, IconButton, Image, Stack, Text, } from '@
 import { Close, DragDropArea } from '../../..';
 import { useFilesUploader } from '../../../../hooks';
 import { colors } from '../../../../theme/colors';
-export const FileField = ({ description, icon, onRemove, onUpload, uploading = false, displayImages = [], }) => {
+export const FileField = ({ description, icon, onRemove, onUpload, uploading = false, displayImages = [], singleFileUpload = false, }) => {
     const { errorMessage, getInputProps, getRootProps, thumbnails } = useFilesUploader({
         onUpload,
         uploading,
         displayImages,
     });
     const isStringArray = Array.isArray(thumbnails) && typeof thumbnails[0] === 'string';
-    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px" }), _jsx(Grid, { gridTemplateColumns: `repeat(auto-fill, minmax(22px, 1fr))`, gap: "base", children: isStringArray &&
+    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px", multiple: !singleFileUpload }), _jsx(Grid, { gridTemplateColumns: `repeat(auto-fill, minmax(22px, 1fr))`, gap: "base", children: isStringArray &&
                             thumbnails.map((file, index) => (_jsxs(Box, { position: "relative", children: [_jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(file), icon: _jsx(Close, { size: 11, stroke: colors.error['2'] }), disabled: uploading, position: "absolute", bg: "neutral.white", p: "0.5", borderRadius: "full", top: "-2", right: "-2", zIndex: "1" }), _jsx(AspectRatio, { maxW: "100%", ratio: 1, children: _jsx(Image, { src: file, objectFit: "cover", alt: `file-${index}` }) })] }, file))) })] })] }));
 };

package/dist/interfaces/dragDrop/DragDropArea.interface.d.ts

@@ -9,5 +9,6 @@ export interface DragDropAreaI {
     height?: number | string;
     message?: string;
     message2?: string;
+    multiple?: boolean;
     variant?: 'dragDrop' | 'dragDropDashed';
 }

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -31,6 +31,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     onUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void;
     searching?: boolean;
     showTitle?: boolean;
+    singleFileUpload?: boolean;
     title?: string;
     uploadingFieldId?: string;
 }

package/dist/interfaces/forms/dynamicForm/fields/FileField.interface.d.ts

@@ -4,6 +4,7 @@ export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
     onUpload?: (files: FolderFileI[]) => void;
     uploading?: boolean;
     displayImages?: string[];
+    singleFileUpload?: boolean;
     value?: string;
 }
 export interface SingleImageI extends Omit<FileFieldI, 'onUpload'> {

package/dist/stories/receipts/receipt/AddReceiptPanel.stories.js

@@ -28,7 +28,7 @@ export const AddReceiptPanel = () => {
 };
 function StepOne({ onSave }) {
     const [value, setValue] = useState('');
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { p: "base", bg: "lightBlue.2", children: _jsx(EditItemName, { isRequired: false, placeholder: "Add receipt name", onChange: (e) => setValue(e.target.value), onSave: onSave, showSaveButton: !!value, value: value }) }), _jsx(DynamicForm, { form: receiptFieldsMock, showTitle: false }), _jsx(Box, { h: "120px" }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: true, variant: "footerSquare", children: _jsx(FooterButtons, { button1: {
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { p: "base", bg: "lightBlue.2", children: _jsx(EditItemName, { isRequired: false, placeholder: "Add receipt name", onChange: (e) => setValue(e.target.value), onSave: onSave, showSaveButton: !!value, value: value }) }), _jsx(DynamicForm, { form: receiptFieldsMock, showTitle: false, singleFileUpload: true }), _jsx(Box, { h: "120px" }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: true, variant: "footerSquare", children: _jsx(FooterButtons, { button1: {
                             buttonStyle: 'primaryFooter',
                             label: t('buttons.save'),
                             onClick: onSave,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.23.0",
+  "version": "2.23.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/dragDrop/DragDropArea.tsx

@@ -13,12 +13,13 @@ export const DragDropArea = ({
   message = t('dragDrop.message'),
   message2 = t('dragDrop.message2'),
   variant = 'dragDropDashed',
+  multiple = false,
 }: DragDropAreaI) => {
   const hasError = !!errorMessage
   return (
     <Stack spacing="1">
       <Container variant={variant} minW="full" h={height} {...getRootProps()}>
-        <input {...getInputProps()} />
+        <input {...getInputProps({ multiple })} />
         <Flex h={height} align={align} justify="center" p="base">
           <Flex align="center" direction={direction} gap="2">
             <Upload />

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -35,6 +35,7 @@ export const DynamicForm = ({
   onUpload,
   searching = false,
   showTitle = true,
+  singleFileUpload,
   title,
   uploadingFieldId,
   ...props
@@ -183,12 +184,14 @@ export const DynamicForm = ({
                 return (
                   <FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
                     <FileField
-                      icon={baseProps.icon}
+                      {...baseProps}
                       description={description}
                       onRemove={onRemoveImage}
                       onUpload={(files) => handleFilesUpload({ id, files })}
                       uploading={uploadingFieldId === id}
                       displayImages={displayImages}
+                      singleFileUpload={singleFileUpload}
+                      value={value as string | undefined}
                     />
                   </FieldWithDelete>
                 )

package/src/components/forms/dynamicForm/fields/FileField.tsx

@@ -21,6 +21,7 @@ export const FileField = ({
   onUpload,
   uploading = false,
   displayImages = [],
+  singleFileUpload = false,
 }: FileFieldI) => {
   const { errorMessage, getInputProps, getRootProps, thumbnails } =
     useFilesUploader({
@@ -41,6 +42,7 @@ export const FileField = ({
           getInputProps={getInputProps}
           getRootProps={getRootProps}
           height="85px"
+          multiple={!singleFileUpload}
         />
         <Grid
           gridTemplateColumns={`repeat(auto-fill, minmax(22px, 1fr))`}

package/src/interfaces/dragDrop/DragDropArea.interface.ts

@@ -10,5 +10,6 @@ export interface DragDropAreaI {
   height?: number | string
   message?: string
   message2?: string
+  multiple?: boolean
   variant?: 'dragDrop' | 'dragDropDashed'
 }

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -155,6 +155,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   onUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void
   searching?: boolean
   showTitle?: boolean
+  singleFileUpload?: boolean
   title?: string
   uploadingFieldId?: string
 }

package/src/interfaces/forms/dynamicForm/fields/FileField.interface.ts

@@ -5,6 +5,7 @@ export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
   onUpload?: (files: FolderFileI[]) => void
   uploading?: boolean
   displayImages?: string[]
+  singleFileUpload?: boolean
   value?: string
 }
 

package/src/stories/receipts/receipt/AddReceiptPanel.stories.tsx

@@ -76,7 +76,11 @@ function StepOne({ onSave }: { onSave: () => void }) {
         />
       </Box>
 
-      <DynamicForm form={receiptFieldsMock} showTitle={false} />
+      <DynamicForm
+        form={receiptFieldsMock}
+        showTitle={false}
+        singleFileUpload
+      />
       <Box h="120px" />
       <DrawerFooter>
         <FooterDrawer isOpen variant="footerSquare">