@homefile/components-v2 2.23.5 → 2.23.6

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, multiple, }: DragDropAreaI) => import("react/jsx-runtime").JSX.Element;
+export declare const DragDropArea: ({ align, direction, errorMessage, getInputProps, getRootProps, height, message, message2, variant, multiple, disabled, }: 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', multiple = false, }) => {
+export const DragDropArea = ({ align = 'center', direction = 'row', errorMessage, getInputProps, getRootProps, height = '4rem', message = t('dragDrop.message'), message2 = t('dragDrop.message2'), variant = 'dragDropDashed', multiple = false, disabled = 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({ 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 })] }));
+    return (_jsxs(Stack, { spacing: "1", children: [_jsxs(Container, Object.assign({ variant: variant, minW: "full", h: height, _disabled: { opacity: 0.5 }, "aria-disabled": disabled }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps({ multiple, disabled }))), _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/fields/FileField.js

@@ -10,6 +10,6 @@ export const FileField = ({ description, icon, onRemove, onUpload, uploading = f
         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", multiple: !singleFileUpload }), _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, disabled: uploading }), _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/hooks/folderPanel/useFilesUploader.js

@@ -35,6 +35,8 @@ export const useFilesUploader = ({ onUpload, uploading, displayImages = [], }) =
         }
     }, [hasError]);
     useEffect(() => {
+        if (!acceptedFiles.length)
+            return;
         onUpload === null || onUpload === void 0 ? void 0 : onUpload(acceptedFiles);
     }, [acceptedFiles]);
     useEffect(() => {

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

@@ -3,6 +3,7 @@ export interface DragDropAreaI {
     align?: string;
     btnText?: string;
     direction?: 'row' | 'column';
+    disabled?: boolean;
     errorMessage?: string;
     getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T;
     getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T;

package/package.json

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

package/src/components/dragDrop/DragDropArea.tsx

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

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

@@ -43,6 +43,7 @@ export const FileField = ({
           getRootProps={getRootProps}
           height="85px"
           multiple={!singleFileUpload}
+          disabled={uploading}
         />
         <Grid
           gridTemplateColumns={`repeat(auto-fill, minmax(22px, 1fr))`}

package/src/hooks/folderPanel/useFilesUploader.ts

@@ -55,6 +55,7 @@ export const useFilesUploader = ({
   }, [hasError])
 
   useEffect(() => {
+    if (!acceptedFiles.length) return
     onUpload?.(acceptedFiles)
   }, [acceptedFiles])
 

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

@@ -4,6 +4,7 @@ export interface DragDropAreaI {
   align?: string
   btnText?: string
   direction?: 'row' | 'column'
+  disabled?: boolean
   errorMessage?: string
   getInputProps: <T extends DropzoneInputProps>(props?: T | undefined) => T
   getRootProps: <T extends DropzoneRootProps>(props?: T | undefined) => T