@homefile/components-v2 2.23.5 → 2.23.7

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/ItemFormPanel/ItemFormPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { ItemFormPanelI } from '../../../../interfaces';
-export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, onClearForm, onDuplicate }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, onClearForm, onDuplicate, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { DrawerBody, DrawerHeader, DrawerFooter, Box, } from '@chakra-ui/react';
-import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading } from '../../..';
-export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, onClearForm, onDuplicate }) => {
+import { DrawerBody, DrawerHeader, DrawerFooter, Box } from '@chakra-ui/react';
+import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading, } from '../../..';
+export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, onClearForm, onDuplicate, }) => {
     const { firstChild, otherChildren } = useMemo(() => {
         let firstChild = null;
         let otherChildren = children;
@@ -15,5 +15,5 @@ export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, pane
         }
         return { firstChild, otherChildren };
     }, [children]);
-    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onClearForm: onClearForm, onDuplicate: onDuplicate, onSave: onSubmitForm, onCancel: onClose }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), onSubmitForm && (_jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onClearForm: onClearForm, onDuplicate: onDuplicate, onSave: onSubmitForm, onCancel: onClose }) }) }))] }));
 };

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/components/householdItems/ItemNameHeader.d.ts

@@ -1,2 +1,2 @@
 import { ItemNameHeaderI } from '../../interfaces';
-export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemNameHeader: ({ id, value, onSave, onValueChange, padding, required, showSaveButton, }: ItemNameHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/householdItems/ItemNameHeader.js

@@ -4,7 +4,7 @@ import { Box, Flex, Button } from '@chakra-ui/react';
 import { TextInput } from '..';
 import { isEmptyField } from '../../utils';
 import { useState, useEffect } from 'react';
-export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, }) => {
+export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, padding = 'base', required = true, showSaveButton = true, }) => {
     const [name, setName] = useState(value);
     useEffect(() => {
         setName(value);
@@ -13,5 +13,5 @@ export const ItemNameHeader = ({ id = '', value = '', onSave, onValueChange, pad
         setName(e.target.value);
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(e.target.value);
     };
-    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: required && isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
+    return (_jsx(Box, { bg: "lightBlue.2", p: padding, w: "100%", children: _jsxs(Flex, { gap: "base", align: "center", children: [_jsx(TextInput, { errorMessage: `${t('householdItems.headers.itemName')} ${t('forms.required')}`, hasError: required && isEmptyField(name), id: id, handleChange: handleChange, placeholder: t('householdItems.headers.placeholder'), value: name }), name && showSaveButton && (_jsx(Button, { variant: "secondary", maxW: "fit-content", maxH: "input.md", onClick: () => onSave(name), children: t('createDocument.buttons.save') }))] }) }));
 };

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/dist/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.d.ts

@@ -1,6 +1,6 @@
 export interface ItemFormPanelI {
     onClose: () => void;
-    onSubmitForm: () => void;
+    onSubmitForm?: () => void;
     panelIcon: string;
     panelTitle: string;
     showOverlay?: boolean;

package/dist/interfaces/headers/ItemNameHeader.interface.d.ts

@@ -5,4 +5,5 @@ export interface ItemNameHeaderI {
     onSave: (name: string) => void;
     padding?: string;
     required?: boolean;
+    showSaveButton?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.23.5",
+  "version": "2.23.7",
   "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/ItemFormPanel/ItemFormPanel.tsx

@@ -1,16 +1,11 @@
 import { PropsWithChildren, ReactNode, useMemo } from 'react'
-import {
-  DrawerBody,
-  DrawerHeader,
-  DrawerFooter,
-  Box,
-} from '@chakra-ui/react'
+import { DrawerBody, DrawerHeader, DrawerFooter, Box } from '@chakra-ui/react'
 import {
   PanelHeader,
   FooterDrawer,
   ItemFormFooter,
   Overlay,
-  Loading
+  Loading,
 } from '@/components'
 import { ItemFormPanelI } from '@/interfaces'
 
@@ -22,9 +17,8 @@ export const ItemFormPanel = ({
   panelTitle,
   showOverlay = false,
   onClearForm,
-  onDuplicate
+  onDuplicate,
 }: PropsWithChildren<ItemFormPanelI>) => {
-
   const { firstChild, otherChildren } = useMemo(() => {
     let firstChild: ReactNode | null = null
     let otherChildren: ReactNode = children
@@ -36,7 +30,7 @@ export const ItemFormPanel = ({
         otherChildren = children.slice(1)
       }
     }
-  
+
     return { firstChild, otherChildren }
   }, [children])
 
@@ -51,31 +45,36 @@ export const ItemFormPanel = ({
       </DrawerHeader>
 
       <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
-        {
-          firstChild ? (
-            <>
-              {firstChild}
-              <Box position="relative" mb="200px">
-                <Overlay
-                  showOverlay={showOverlay}
-                  position="absolute"
-                  w="inherit"
-                  h="inherit"
-                  zIndex="9"
-                />
-                {otherChildren}
-              </Box>
-            </>
-          ) : (
-            <Loading />
-          )
-        }
+        {firstChild ? (
+          <>
+            {firstChild}
+            <Box position="relative" mb="200px">
+              <Overlay
+                showOverlay={showOverlay}
+                position="absolute"
+                w="inherit"
+                h="inherit"
+                zIndex="9"
+              />
+              {otherChildren}
+            </Box>
+          </>
+        ) : (
+          <Loading />
+        )}
       </DrawerBody>
-      <FooterDrawer isOpen={!showOverlay}>
-        <DrawerFooter w="100%" py="0">
-          <ItemFormFooter onClearForm={onClearForm} onDuplicate={onDuplicate} onSave={onSubmitForm} onCancel={onClose} />
-        </DrawerFooter>
-      </FooterDrawer>
+      {onSubmitForm && (
+        <FooterDrawer isOpen={!showOverlay}>
+          <DrawerFooter w="100%" py="0">
+            <ItemFormFooter
+              onClearForm={onClearForm}
+              onDuplicate={onDuplicate}
+              onSave={onSubmitForm}
+              onCancel={onClose}
+            />
+          </DrawerFooter>
+        </FooterDrawer>
+      )}
     </>
   )
 }

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/components/householdItems/ItemNameHeader.tsx

@@ -12,6 +12,7 @@ export const ItemNameHeader = ({
   onValueChange,
   padding = 'base',
   required = true,
+  showSaveButton = true,
 }: ItemNameHeaderI) => {
   const [name, setName] = useState(value)
 
@@ -36,7 +37,7 @@ export const ItemNameHeader = ({
           placeholder={t('householdItems.headers.placeholder')}
           value={name}
         />
-        {name && (
+        {name && showSaveButton && (
           <Button
             variant="secondary"
             maxW="fit-content"

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

package/src/interfaces/forms/ItemFormPanel/ItemFormPanel.interface.ts

@@ -1,6 +1,6 @@
 export interface ItemFormPanelI {
   onClose: () => void
-  onSubmitForm: () => void
+  onSubmitForm?: () => void
   panelIcon: string
   panelTitle: string
   showOverlay?: boolean

package/src/interfaces/headers/ItemNameHeader.interface.ts

@@ -5,4 +5,5 @@ export interface ItemNameHeaderI {
   onSave: (name: string) => void
   padding?: string
   required?: boolean
+  showSaveButton?: boolean
 }