@am92/react-design-system 2.9.12 → 2.10.1

package/dist/Components/DsBottomSheet/DsBottomSheet.Component.js

@@ -9,7 +9,7 @@ import { DsDialogContent } from '../DsDialogContent';
 import { DsButton } from '../DsButton';
 import { DsDialogActions } from '../DsDialogActions';
 import { DsPaper } from '../DsPaper';
-export const DsBottomSheet = inProps => {
+export const DsBottomSheet = (inProps) => {
     const props = { ...DsBottomSheetDefaultProps, ...inProps };
     const handleDrawerClose = (event, reason) => {
         const { onClose } = props;
@@ -36,7 +36,7 @@ export const DsBottomSheet = inProps => {
     if (kicker) {
         accessibilityProps['aria-describedby'] = kicker;
     }
-    return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: "bottom", PaperProps: {
+    return (_jsxs(DsDrawer, { ...accessibilityProps, ...DrawerProps, anchor: 'bottom', PaperProps: {
             ...PaperProps,
             sx: {
                 background: 'transparent',
@@ -53,7 +53,7 @@ export const DsBottomSheet = inProps => {
                     p: 'var(--ds-spacing-glacial)',
                     mb: 'var(--ds-spacing-bitterCold)',
                     ...CloseIconButtonProps?.sx
-                }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), _jsxs(DsPaper, { ...ContainerProps, sx: {
+                }, children: _jsx(DsRemixIcon, { className: 'ri-close-line', ...CloseIconProps }) })), _jsxs(DsPaper, { ...ContainerProps, sx: {
                     minHeight: 0,
                     display: 'flex',
                     flexDirection: 'column',
@@ -63,7 +63,7 @@ export const DsBottomSheet = inProps => {
                     borderTopLeftRadius: 'var(--ds-radius-bitterCold)',
                     borderTopRightRadius: 'var(--ds-radius-bitterCold)',
                     ...ContainerProps?.sx
-                }, children: [kicker && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "text.tertiary", ...KickerProps, sx: {
+                }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'text.tertiary', ...KickerProps, sx: {
                             px: 'var(--ds-spacing-bitterCold)',
                             mb: 'var(--ds-spacing-quickFreeze)',
                             textTransform: 'uppercase',
@@ -72,7 +72,7 @@ export const DsBottomSheet = inProps => {
                             mb: 'var(--ds-spacing-zero)',
                             px: 'var(--ds-spacing-bitterCold)',
                             ...TitleProps?.sx
-                        }, children: title })), description && (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "text.secondary", ...DescriptionProps, sx: {
+                        }, children: title })), description && (_jsx(DsTypography, { variant: 'bodyRegularMedium', color: 'text.secondary', ...DescriptionProps, sx: {
                             px: 'var(--ds-spacing-bitterCold)',
                             mt: 'var(--ds-spacing-quickFreeze)',
                             ...DescriptionProps?.sx
@@ -85,5 +85,5 @@ export const DsBottomSheet = inProps => {
                             mt: 'var(--ds-spacing-bitterCold)',
                             pt: isFlushed ? undefined : 'var(--ds-spacing-bitterCold)',
                             ...ActionsProps?.sx
-                        }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] })] }));
+                        }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: 'secondary', size: 'large', fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: 'large', fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] })] }));
 };

package/dist/Components/DsDialog/DsDialog.Component.js

@@ -44,7 +44,7 @@ export const DsDialog = inProps => {
                 },
                 ...PaperProps?.sx
             }
-        }, children: [kicker && (_jsx(DsTypography, { variant: "subheadingSemiboldDefault", color: "var(--ds-colour-typoTertiary)", ...KickerProps, sx: {
+        }, children: [kicker && (_jsx(DsTypography, { variant: 'subheadingSemiboldDefault', color: 'var(--ds-colour-typoTertiary)', ...KickerProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',
                         md: 'var(--ds-spacing-warm)'
@@ -59,7 +59,7 @@ export const DsDialog = inProps => {
                         md: 'var(--ds-spacing-warm)'
                     },
                     ...TitleProps?.sx
-                }, children: title })), description && (_jsx(DsTypography, { variant: "bodyRegularMedium", color: "var(--ds-colour-typoSecondary)", ...DescriptionProps, sx: {
+                }, children: title })), description && (_jsx(DsTypography, { variant: 'bodyRegularMedium', color: 'var(--ds-colour-typoSecondary)', ...DescriptionProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',
                         md: 'var(--ds-spacing-warm)'
@@ -78,7 +78,7 @@ export const DsDialog = inProps => {
                         md: 'var(--ds-spacing-warm)'
                     },
                     ...CloseIconButtonProps?.sx
-                }, children: _jsx(DsRemixIcon, { className: "ri-close-line", ...CloseIconProps }) })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
+                }, children: _jsx(DsRemixIcon, { className: 'ri-close-line', ...CloseIconProps }) })), children && (_jsx(DsDialogContent, { ...ContentProps, sx: {
                     px: {
                         xs: 'var(--ds-spacing-bitterCold)',
                         md: 'var(--ds-spacing-warm)'
@@ -100,5 +100,5 @@ export const DsDialog = inProps => {
                         },
                     mt: 'var(--ds-spacing-glacial)',
                     ...ActionsProps?.sx
-                }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "medium", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "medium", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
+                }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: 'secondary', size: 'medium', fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: 'medium', fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
 };

package/dist/Components/DsFileUploader/DsFileUploader.Component.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
-import { DsFileUploaderProps } from './DsFileUploader.Types';
-export declare const DsFileUploader: FC<DsFileUploaderProps>;
+import type { IDsFileUploaderProps, TContentType, TMultiple } from './DsFileUploader.Types';
+export declare const DsFileUploader: <Multiple extends TMultiple, ContentType extends TContentType>(inProps: IDsFileUploaderProps<Multiple, ContentType>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsFileUploader/DsFileUploader.Component.js

@@ -1,182 +1,133 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { DsBox } from '../DsBox';
-import { DsButton } from '../DsButton';
-import { DsIconButton } from '../DsIconButton';
-import { DsInput } from '../DsInput';
-import { DsRemixIcon } from '../DsRemixIcon';
-import { DsStack } from '../DsStack';
-import { DsTypography } from '../DsTypography';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { DsFileUploaderDefaultProps } from './DsFileUploader.Types';
+import FileUploaderFiles from './FileUploaderFiles';
+import { getDefaultValue, getValidProcessedFile, mergeProps } from './helpers';
+import { DsFileUploaderDropZone } from './Slots/DsFileUploaderDropZone';
+import { DsStack } from '../DsStack';
+import { DsInputLabel } from '../DsInputLabel';
 export const DsFileUploader = (inProps) => {
-    const props = { ...DsFileUploaderDefaultProps, ...inProps };
-    const inputRef = useRef();
-    const [files, setFiles] = useState([]);
-    const humaniseSize = (bytes, decimals = 2) => {
-        if (!+bytes)
-            return '0 Bytes';
-        const k = 1024;
-        const dm = decimals < 0 ? 0 : decimals;
-        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
-    };
-    const getFileIconClass = (mimeType) => {
-        if (mimeType.includes('image/')) {
-            return 'ri-image-2-line';
+    // Merge user props with default props, handling nested slots and slotProps gracefully
+    const props = mergeProps(inProps, DsFileUploaderDefaultProps);
+    const defaultValue = getDefaultValue(props);
+    const [files, setFiles] = useState(defaultValue);
+    const { InputLabelProps, name, value, uploadedValue, accept = '*', minSize, maxSize, onChange, onError, onDelete, onPreview, onDownload, multiple, slotProps = {}, variant, contentType, canDeleteFile, slots = {} } = props;
+    // Effective file type accept string — pulled from DropZone slotProps or `accept`
+    const allowedFiles = (slotProps?.DropZone && slotProps?.DropZone.InputProps?.accept) || accept;
+    useEffect(() => {
+        if (value !== undefined) {
+            setFiles(value);
         }
-        if (mimeType.includes('video/')) {
-            return 'ri-video-line';
+    }, [value]);
+    // Handles selected or dropped files after validation
+    const handleFiles = (processedFiles) => {
+        const { valid, invalid } = processedFiles;
+        // If not controlled, update internal state
+        if (value === undefined) {
+            setFiles(valid);
         }
-        return 'ri-file-list-2-line';
-    };
-    const handleOnClick = (event) => {
-        inputRef?.current?.click();
-    };
-    const handleRemoveFile = (index) => () => {
-        const { onChange, name } = props;
-        const tempFiles = [...files];
-        tempFiles.splice(index, 1);
-        setFiles(tempFiles);
         if (onChange && typeof onChange === 'function') {
-            onChange(name, [...tempFiles]);
+            onChange(name, valid);
+        }
+        if (invalid !== null) {
+            if (invalid && onError && typeof onError === 'function') {
+                onError(name, invalid);
+            }
         }
     };
-    const handleChange = (event) => {
-        const { onChange, name } = props;
-        const stateFiles = files;
+    // Triggered when a user selects files via the input element
+    const handleFileSelect = async (event) => {
         const { target } = event;
         const { files: selectedFiles } = target;
-        if (selectedFiles) {
-            const newFiles = [...stateFiles, ...selectedFiles];
-            setFiles(newFiles);
-            if (onChange && typeof onChange === 'function') {
-                onChange(name, newFiles);
+        if (!multiple && uploadedValue) {
+            if (onDelete && typeof onDelete === 'function') {
+                onDelete(name, uploadedValue);
             }
         }
+        if (selectedFiles) {
+            const processedFiles = await getValidProcessedFile(selectedFiles, files ?? null, accept, minSize, maxSize, contentType);
+            handleFiles(processedFiles);
+        }
     };
-    const handleDrop = (event) => {
-        // Prevent default behavior (Prevent file from being opened)
+    // Triggered when a user drops files into the drop zone
+    const handleDropFile = async (event) => {
         event.preventDefault();
-        const { InputProps = {}, onChange, name } = props;
-        const { accept, multiple } = InputProps;
-        if (!event.dataTransfer) {
-            return;
-        }
-        let files = [];
-        const items = event.dataTransfer.items
-            ? [...event.dataTransfer.items]
-            : [...event.dataTransfer.files];
-        items.forEach(item => {
-            let file;
-            if (!multiple && files.length) {
-                return;
-            }
-            if (item instanceof DataTransferItem) {
-                if (item.kind === 'file') {
-                    file = item.getAsFile();
+        const { dataTransfer } = event;
+        if (dataTransfer) {
+            const { files: selectedFiles } = dataTransfer;
+            if (!multiple && uploadedValue) {
+                if (onDelete && typeof onDelete === 'function') {
+                    onDelete(name, uploadedValue);
                 }
             }
-            else {
-                file = item;
-            }
-            if (!file) {
-                return;
-            }
-            const { type } = file;
-            const astrerikType = `${type.split('/')[0]}/*`;
-            if (accept.includes(type) || accept.includes(astrerikType)) {
-                files.push(file);
+            if (files) {
+                const processedFiles = await getValidProcessedFile(selectedFiles, files ?? null, accept, minSize, maxSize);
+                handleFiles(processedFiles);
             }
-        });
-        const stateFiles = files;
-        const newFiles = multiple
-            ? [...stateFiles, ...files]
-            : (files[0] && [files[0]]) || (stateFiles[0] && [stateFiles[0]]) || [];
-        setFiles(newFiles);
-        if (onChange && typeof onChange === 'function') {
-            onChange(name, newFiles);
         }
     };
-    const handleDragOverHandler = (event) => {
-        // Prevent default behavior (Prevent file from being opened)
+    // Prevent default behavior to allow dropping
+    const handleDragOverHandler = event => {
         event.preventDefault();
     };
-    const renderFiles = () => {
-        if (!files.length) {
-            return false;
+    // Triggered when a user removes a file
+    const handleRemoveFile = async (name, file) => {
+        // Async handler for delete operations
+        if (canDeleteFile && typeof canDeleteFile === 'function') {
+            const canDelete = await canDeleteFile(name, file);
+            if (!canDelete)
+                return;
+        }
+        if (onDelete && typeof onDelete === 'function') {
+            onDelete(name, file);
+        }
+        // Update internal state after deletion
+        if (Array.isArray(files)) {
+            const newFiles = files.filter(f => f !== file);
+            const valid = newFiles;
+            const invalid = [];
+            handleFiles({
+                valid: valid,
+                invalid: invalid
+            });
+        }
+        else {
+            handleFiles({
+                valid: null,
+                invalid: null
+            });
+        }
+    };
+    // Preview handler
+    const handlePreviewFileAction = (name, file) => {
+        if (onPreview && typeof onPreview === 'function') {
+            onPreview(name, file);
         }
-        const Files = [];
-        for (let index = 0; index < files.length; index++) {
-            const file = files[index];
-            Files.push(_jsxs(DsStack, { direction: "row", spacing: "var(--ds-spacing-bitterCold)", alignItems: "center", sx: {
-                    p: 'var(--ds-spacing-bitterCold)',
-                    borderRadius: 'var(--ds-radius-glacial)',
-                    borderWidth: '1px',
-                    borderStyle: 'solid',
-                    borderColor: 'var(--ds-colour-strokeDefault)',
-                    backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                    cursor: 'pointer',
-                    '&:hover': {
-                        borderColor: 'var(--ds-colour-strokeSecondarySelected)',
-                        backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)'
-                    }
-                }, children: [_jsx(DsRemixIcon, { sx: {
-                            p: 'var(--ds-spacing-quickFreeze)',
-                            borderRadius: 'var(--ds-radius-quickFreeze)',
-                            backgroundColor: 'var(--ds-colour-neutral2)',
-                            color: 'var(--ds-colour-actionTertiary)'
-                        }, className: getFileIconClass(file.type) }), _jsxs(DsBox, { sx: {
-                            display: 'flex',
-                            flexGrow: 1,
-                            minWidth: 0,
-                            flexDirection: 'column'
-                        }, children: [_jsx(DsTypography, { component: "div", variant: "subheadingSemiboldDefault", noWrap: true, children: file.name }), _jsx(DsTypography, { component: "div", variant: "bodyRegularSmall", noWrap: true, sx: {
-                                    color: 'var(--ds-colour-typoTertiary)'
-                                }, children: humaniseSize(file.size) })] }), _jsx(DsIconButton, { onClick: handleRemoveFile(index), children: _jsx(DsRemixIcon, { className: "ri-close-line" }) })] }, `${file.name}-${index}`));
+    };
+    // Download handler
+    const handleDownloadFileAction = (name, file) => {
+        if (onDownload && typeof onDownload === 'function') {
+            onDownload(name, file);
         }
-        return (_jsx(DsStack, { sx: {
-                mt: 'var(--ds-spacing-warm)',
-                width: '100%'
-            }, spacing: "var(--ds-spacing-glacial)", direction: "column", children: Files }));
     };
-    const { IconProps, titleButtonText, TitleButtonProps, descriptionTypograpghyText, DescriptionTypograpghyProps, InputProps } = props;
-    return (_jsxs(_Fragment, { children: [_jsxs(DsStack, { sx: {
-                    width: '100%',
-                    position: 'relative',
-                    p: 'var(--ds-spacing-bitterCold)',
-                    borderRadius: 'var(--ds-radius-glacial)',
-                    borderWidth: '1px',
-                    borderStyle: 'dashed',
-                    borderColor: 'var(--ds-colour-strokeDefault)',
-                    backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                    cursor: 'pointer',
-                    '&:hover': {
-                        borderColor: 'var(--ds-colour-strokeSecondarySelected)',
-                        backgroundColor: 'var(--ds-colour-stateSelectedSecondaryHover)'
-                    }
-                }, direction: "column", spacing: "var(--ds-spacing-glacial)", children: [_jsx(DsRemixIcon, { className: "ri-upload-cloud-2-line", color: "secondary", ...IconProps }), _jsx(DsButton, { variant: "text", color: "secondary", ...TitleButtonProps, children: titleButtonText }), _jsx(DsTypography, { variant: "bodyRegularSmall", align: "center", ...DescriptionTypograpghyProps, sx: {
-                            color: 'var(--ds-colour-typoTertiary)',
-                            ...DescriptionTypograpghyProps?.sx
-                        }, children: descriptionTypograpghyText }), _jsx(DsInput, { type: "file", sx: {
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            height: '100%',
-                            width: '100%',
-                            opacity: 0,
-                            cursor: 'pointer',
-                            margin: 'var(--ds-spacing-zero) !important'
-                        }, onChange: handleChange, onDrop: handleDrop, onDragOver: handleDragOverHandler, disableUnderline: true, inputProps: {
-                            title: titleButtonText,
-                            ref: inputRef,
-                            value: '',
-                            ...InputProps,
-                            style: {
-                                height: '100%',
-                                width: '100%',
-                                cursor: 'pointer',
-                                ...InputProps?.style
-                            }
-                        } })] }), renderFiles()] }));
+    // Visibility conditions for selected and uploaded sections
+    const isSelectedSegmentVisible = multiple
+        ? Array.isArray(files) && files.length > 0
+        : files;
+    const isUploadedSegmentVisible = multiple
+        ? Array.isArray(uploadedValue) && uploadedValue.length > 0
+        : uploadedValue;
+    const { SelectedItemSegment, UploadedItemSegment } = slots;
+    return (_jsxs(DsStack, { direction: "column", sx: {
+            gap: 'var(--ds-spacing-bitterCold)',
+            width: '100%',
+            p: 'var(--ds-spacing-bitterCold)'
+        }, children: [_jsx(DsInputLabel, { sx: { mb: 'var(--ds-spacing-zero)', ...InputLabelProps?.sx }, ...InputLabelProps }), _jsx(DsFileUploaderDropZone, { variant: variant, ...slotProps?.DropZone, InputProps: {
+                    accept: allowedFiles || accept,
+                    multiple: multiple,
+                    onChange: handleFileSelect,
+                    onDrop: handleDropFile,
+                    onDragOver: handleDragOverHandler,
+                    ...slotProps?.DropZone?.InputProps
+                } }), isSelectedSegmentVisible && SelectedItemSegment && (_jsx(SelectedItemSegment, { onPreview: handlePreviewFileAction, onDownload: handleDownloadFileAction, onDelete: handleRemoveFile, ...slotProps?.SelectedItemSegment, children: _jsx(FileUploaderFiles, { slots: slots, slotProps: slotProps, files: files || undefined }) })), isUploadedSegmentVisible && UploadedItemSegment && (_jsx(UploadedItemSegment, { onPreview: handlePreviewFileAction, onDownload: handleDownloadFileAction, onDelete: handleRemoveFile, ...slotProps?.UploadedItemSegment, children: _jsx(FileUploaderFiles, { slots: slots, slotProps: slotProps, files: uploadedValue || undefined }) }))] }));
 };

package/dist/Components/DsFileUploader/DsFileUploader.Overrides.d.ts

@@ -1 +1,5 @@
-export declare const DsFileUploaderOverrides: {};
+export declare const DsFileUploaderOverrides: {
+    DsFileUploader: {
+        defaultProps: import("./DsFileUploader.Types").IDsFileUploaderProps<import("./DsFileUploader.Types").TMultiple, "FILE">;
+    };
+};

package/dist/Components/DsFileUploader/DsFileUploader.Overrides.js

@@ -1 +1,6 @@
-export const DsFileUploaderOverrides = {};
+import { DsFileUploaderDefaultProps } from './DsFileUploader.Types';
+export const DsFileUploaderOverrides = {
+    DsFileUploader: {
+        defaultProps: DsFileUploaderDefaultProps
+    }
+};