@am92/react-design-system 2.9.10 → 2.10.0

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
+    }
+};

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

@@ -1,19 +1,312 @@
-import { DsButtonProps } from '../DsButton';
-import { DsInputProps } from '../DsInput';
+import type { ElementType } from 'react';
+import { DsInputLabelProps } from '../DsInputLabel';
 import { DsRemixIconProps } from '../DsRemixIcon';
-import { DsTypographyProps } from '../DsTypography';
-export interface DsFileUploaderProps {
+import { DsStackProps } from '../DsStack';
+import { DsInputProps } from '../DsInput';
+import { DsIconButtonProps } from '../DsIconButton';
+export declare enum CONTENT_TYPE {
+    FILE = "FILE",
+    BASE64 = "BASE64"
+}
+export declare enum VARIANT {
+    FULL = "FULL",
+    COMPRESSED = "COMPRESSED"
+}
+export type TMultiple = boolean | undefined;
+export type TContentType = keyof typeof CONTENT_TYPE;
+export type TVariant = keyof typeof VARIANT;
+export type TFileType<TContentType> = TContentType extends 'FILE' ? File : string;
+export type TFile<TContentType> = {
+    /**
+     * Name of the file selected or dropped.
+     */
     name: string;
-    onChange: (name: string, files: File[]) => void;
+    /**
+     * mime-type of the file selected or dropped.
+     */
+    type: string;
+    /**
+     * size in bytes of the file selected or dropped.
+     */
+    size: number;
+    /**
+     * content of the file selected or dropped.
+     */
+    content: TFileType<TContentType>;
+    /**
+     * Unique Identifier for the file.
+     */
+    id?: string;
+    /**
+     * Extra content required to be displayed with the file name and size
+     */
+    subText?: string;
+};
+export type TFileValue<Multiple, TContentType> = Multiple extends false ? TFile<TContentType> | null | undefined : TFile<TContentType>[] | undefined;
+export type TProcessFile<TMultiple, TContentType> = {
+    valid: TFileValue<TMultiple, TContentType>;
+    invalid: TErrorValue<TMultiple, TContentType>;
+};
+export declare enum ERROR_CODES {
+    INVALID_FILE_TYPE = "INVALID_FILE_TYPE",
+    MAX_FILE_SIZE_EXCEEDED = "MAX_FILE_SIZE_EXCEEDED",
+    FILE_SIZE_BELOW_MIN = "FILE_SIZE_BELOW_MIN"
+}
+export type TErrorCodes = keyof typeof ERROR_CODES;
+export type TErrorFile<CONTENT_TYPE> = {
+    file: TFile<CONTENT_TYPE>;
+    errorCode: TErrorCodes;
+};
+export type TErrorValue<Multiple, CONTENT_TYPE> = Multiple extends false ? TErrorFile<CONTENT_TYPE> | null : TErrorFile<CONTENT_TYPE>[];
+export interface IDsFileUploaderProps<Multiple extends TMultiple = true, ContentType extends TContentType = 'FILE'> {
+    InputLabelProps?: Omit<DsInputLabelProps, 'ref' | 'error' | 'success' | 'htmlFor' | 'disabled'>;
+    /**
+     * Name attribute of the input element.
+     */
+    name: string;
+    /**
+     * @param {TVariant} variant The variant of file uploader component.
+     * @default 'FULL'
+     */
+    variant?: TVariant;
+    /**
+     * The `input` value. Value should be array of `TFile<TContentType>` type objects. If you have multiple false then value would be null
+     * @default []
+     */
+    value?: TFileValue<Multiple, ContentType> | null;
+    /**
+     * The `input` uploadedValue. uploadedValue should be array of `TFile<TContentType>` type objects of your previously uploaded files. If you have multiple false then uploadedValue would be null
+     * @default []
+     */
+    uploadedValue?: TFileValue<Multiple, ContentType>;
+    /**
+     * validate the minimum file size (in bytes).
+     *
+     * If file size is below the provided value then file will be passed back in `onError` callback.
+     */
+    minSize?: number;
+    /**
+     * The `content` type in the file object returned in callbacks for newly selected files.
+     * @default 'FILE'
+     */
+    contentType?: TContentType;
+    /**
+     * validate the maximum file size (in bytes).
+     *
+     * If file size exceeds the provided value then file will be passed back in `onError` callback.
+     */
+    maxSize?: number;
+    /**
+     * The `accept` attribute of the input element.
+     *
+     * This will allow to restrict user to only upload specific type of files.
+     *
+     * If you want to allow only images then use `accept='image/*'` and so on.
+     *
+     * By default it will allow any file.
+     * @default '*'
+     */
+    accept?: string;
+    /**
+     * The `multiple` attribute of the input element.
+     *
+     * If `false` then user can upload only single file.
+     * @default false
+     */
+    multiple?: Multiple;
+    /**
+     * To override icon associated to each file type. Called in loop for all selected files
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    FileIconMapper?: (file: TFile<ContentType>) => DsRemixIconProps['className'];
+    /**
+     * Callback fired when a invalid file is selected or dropped.
+     *
+     * @param {string} name The name provided to the component.
+     * @param { TErrorValue<Multiple, ContentType>} [files] This would be the valid `T_ERROR_FILE` type objects selected with its content as `FILE` type or as provided in value with the error code.
+     */
+    onError?: (name: string, files: TErrorValue<Multiple, ContentType>) => void;
+    /**
+     * Callback fired when a file is selected or dropped.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFileValue<Multiple, ContentType>} [files] This would be the valid `T_FILE_UPLOADER` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onChange: (name: string, files: TFileValue<Multiple, ContentType>) => void;
+    /**
+     * Callback fired when an existing file is removed.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDelete?: (name: string, file: TFile<ContentType>) => void;
+    /**
+     * This is a handler that user can use to pass boolean if delete operation is async/API driven.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    canDeleteFile?: (name: string, file: TFile<ContentType>) => Promise<boolean>;
+    /**
+     * Callback fired when an preview button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onPreview?: (name: string, file: TFile<ContentType>) => void;
+    /**
+     * Callback fired when an download button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<ContentType>} [file] This would be the valid `TFile<ContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDownload?: (name: string, file: TFile<ContentType>) => void;
+    /**
+     slots prop is used to provide custom slots components to the file uploader
+     */
+    slots?: TDsFileUploaderSlots;
+    /**
+     slotProps prop is used to provide custom props to the individual slots of the file uploader
+     */
+    slotProps?: TDsFileUploaderSlotProps;
+}
+export interface IDsFileUploaderDropZoneProps extends DsStackProps {
+    /**
+     * @param {TFileUploaderVariant} variant The variant of file uploader component.
+     * @default 'FULL'
+     */
+    variant?: IDsFileUploaderProps['variant'];
+    /**
+     * The `iconProps` component to be used for the file uploader.
+     */
     IconProps?: Omit<DsRemixIconProps, 'ref'>;
-    titleButtonText?: React.ReactNode;
-    TitleButtonProps?: Omit<DsButtonProps, 'ref'>;
-    descriptionTypograpghyText?: React.ReactNode;
-    DescriptionTypograpghyProps?: DsTypographyProps;
+    /**
+     * To override title text in dropbox.
+     */
+    title?: string;
+    /**
+     * To override description text in dropbox.
+     */
+    description?: string | string[];
+    /**
+     * To override props passed to input element
+     */
     InputProps?: DsInputProps['inputProps'];
+    /**
+     * This prop can be used to toggle the disabled state of the file uploaded.
+     */
+    disabled?: boolean;
 }
-export interface DsFileUploaderState {
-    files: File[];
+export interface IDsFileUploaderItemSegmentProps extends DsStackProps {
+    /**
+     * This prop is used to provide custom label to the segments
+     */
+    label?: string;
+    /**
+     * This prop is used to switch the visibility of delete button in a particular segment
+     */
+    showDeleteIcon?: boolean;
+    /**
+     * This prop is used to switch the visibility of preview button in a particular segment
+     */
+    showPreviewIcon?: boolean;
+    /**
+     * This prop is used to switch the visibility of download button in a particular segment
+     */
+    showDownloadIcon?: boolean;
+    /**
+     * This prop is used to supply files to the segment
+     */
+    files?: TFile<TContentType> | TFile<TContentType>[];
+    /**
+     * Callback fired when an preview button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onPreview?: IDsFileUploaderProps['onPreview'];
+    /**
+     * Callback fired when an existing file is removed.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDelete?: IDsFileUploaderProps['onDelete'];
+    /**
+     * Callback fired when an download button is clicked for an existing file.
+     *
+     * @param {string} name The name provided to the component.
+     * @param {TFile<TContentType>} [file] This would be the valid `TFile<TContentType>` type objects selected with its content value depending on `contentType` props or as provided in value.
+     */
+    onDownload?: IDsFileUploaderProps['onDownload'];
+    /**
+     slots prop is used to provide custom slots components to the file uploader
+     */
+    slots?: IDsFileUploaderProps['slots'];
+    /**
+     slotPros used to provide custom props to the individual slots of the file uploader
+     */
+    slotProps?: IDsFileUploaderProps['slotProps'];
+}
+export interface IDsFileUploaderActionButtonProps extends DsIconButtonProps {
+    /**
+     * To override delete icon in files
+     */
+    IconProps?: Omit<DsRemixIconProps, 'ref'>;
 }
-export declare const DsFileUploaderDefaultProps: DsFileUploaderProps;
-export declare const DsFileUploaderDefaultState: DsFileUploaderState;
+export type TDsFileUploaderSlots = {
+    /**
+     This prop is used to provide custom slot component to the drop zone of the component
+     */
+    DropZone?: ElementType<IDsFileUploaderDropZoneProps>;
+    /**
+     This prop is used to provide custom slot component to the selected segment of the component
+     */
+    SelectedItemSegment?: ElementType<IDsFileUploaderItemSegmentProps>;
+    /**
+     This prop is used to provide custom slot component to the uploaded segment of the component
+     */
+    UploadedItemSegment?: ElementType<IDsFileUploaderItemSegmentProps>;
+    /**
+     This prop is used to provide custom slot component to the delete button of the component
+     */
+    DeleteButton?: ElementType<IDsFileUploaderActionButtonProps>;
+    /**
+     This prop is used to provide custom slot component to the preview button of the component
+     */
+    PreviewButton?: ElementType<IDsFileUploaderActionButtonProps>;
+    /**
+     This prop is used to provide custom slot component to the download button of the component
+     */
+    DownloadButton?: ElementType<IDsFileUploaderActionButtonProps>;
+};
+export type TDsFileUploaderSlotProps = {
+    /**
+     This prop is used to provide custom props drop zone of the component
+     */
+    DropZone?: IDsFileUploaderDropZoneProps;
+    /**
+     This prop is used to provide custom props selected segment of the component
+     */
+    SelectedItemSegment?: IDsFileUploaderItemSegmentProps;
+    /**
+     This prop is used to provide custom props uploaded segment of the component
+     */
+    UploadedItemSegment?: IDsFileUploaderItemSegmentProps;
+    /**
+     This prop is used to provide custom props delete button of the component
+     */
+    DeleteButton?: IDsFileUploaderActionButtonProps;
+    /**
+     This prop is used to provide custom props preview button of the component
+     */
+    PreviewButton?: IDsFileUploaderActionButtonProps;
+    /**
+     This prop is used to provide custom props download button of the component
+     */
+    DownloadButton?: IDsFileUploaderActionButtonProps;
+};
+export declare const DsFileUploaderDefaultProps: IDsFileUploaderProps<TMultiple, 'FILE'>;
+export declare const DsFileUploaderDropzoneDefaultProps: IDsFileUploaderDropZoneProps;