pixel-react-excel-sheet 1.2.0

package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts

@@ -0,0 +1,178 @@
+import * as React from 'react';
+import FormulaParser from 'fast-formula-parser';
+import { Point } from './point';
+import { Selection } from './selection';
+import { Model } from './engine';
+import { PointRange } from './point-range';
+import { Matrix } from './matrix';
+/** The base type of cell data in Spreadsheet */
+export type CellBase<Value = any> = {
+    /** Whether the cell should not be editable */
+    readOnly?: boolean;
+    /** Class to be given for the cell element */
+    className?: string;
+    /** The value of the cell */
+    value: Value;
+    style?: React.CSSProperties | undefined;
+    type?: boolean;
+    /** Custom component to render when the cell is edited, if not defined would default to the component defined for the Spreadsheet */
+    DataEditor?: DataEditorComponent<CellBase<Value>>;
+    /** Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet */
+    DataViewer?: DataViewerComponent<CellBase<Value>>;
+};
+/**
+ * A cell with it's coordinates
+ * @deprecated the component does not use cell descriptors anymore. Instead it passes cell point and cell value explicitly.
+ */
+export type CellDescriptor<Cell extends CellBase> = {
+    /** The cell's data */
+    data: Cell | undefined;
+} & Point;
+/** The spreadsheet's write mode */
+export type Mode = 'view' | 'edit';
+/** Dimensions of an element */
+export type Dimensions = {
+    /** The element's width in pixels */
+    width: number;
+    /** The element's height in pixels */
+    height: number;
+    /** The distance of the element from it's container top border in pixels */
+    top: number;
+    /** The distance of the element from it's container left border in pixels */
+    left: number;
+};
+export type StoreState<Cell extends CellBase = CellBase> = {
+    model: Model<Cell>;
+    selected: Selection;
+    copied: PointRange | null;
+    hasPasted: boolean;
+    cut: boolean;
+    active: Point | null;
+    mode: Mode;
+    rowDimensions: Record<number, Pick<Dimensions, 'height' | 'top'> | undefined>;
+    columnDimensions: Record<number, Pick<Dimensions, 'width' | 'left'> | undefined>;
+    dragging: boolean;
+    lastChanged: Point | null;
+    lastCommit: null | CellChange<Cell>[];
+};
+export type CellChange<Cell extends CellBase = CellBase> = {
+    prevCell: Cell | null;
+    nextCell: Cell | null;
+};
+/** Type of Spreadsheet Cell component props */
+export type CellComponentProps<Cell extends CellBase = CellBase> = {
+    /** The row of the cell */
+    row: number;
+    /** The column of the cell */
+    column: number;
+    /** The DataViewer component to be used by the cell */
+    DataViewer: DataViewerComponent<Cell>;
+    /** Whether the cell is selected */
+    selected: boolean;
+    /** Whether the cell is active */
+    active: boolean;
+    /** Whether the cell is copied */
+    copied: boolean;
+    /** Whether the user is dragging */
+    dragging: boolean;
+    /** The mode of the cell */
+    mode: Mode;
+    /** The data of the cell */
+    data: Cell | undefined;
+    /** The evaluated data of the cell */
+    evaluatedData: Cell | undefined;
+    /** Select the cell at the given point */
+    select: (point: Point) => void;
+    /** Activate the cell at the given point */
+    activate: (point: Point) => void;
+    /** Set the dimensions of the cell at the given point with the given dimensions */
+    setCellDimensions: (point: Point, dimensions: Dimensions) => void;
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+};
+/** Type of the Spreadsheet Cell component */
+export type CellComponent<Cell extends CellBase = CellBase> = React.ComponentType<CellComponentProps<Cell>>;
+type DataComponentProps<Cell extends CellBase> = {
+    /** The rendered cell by the component */
+    cell: Cell | undefined;
+} & Point;
+/** Type of the Spreadsheet DataViewer component props */
+export type DataViewerProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+    evaluatedCell: Cell | undefined;
+};
+/** Type of the Spreadsheet DataViewer component */
+export type DataViewerComponent<Cell extends CellBase = CellBase> = React.ComponentType<DataViewerProps<Cell>>;
+/** Type of the Spreadsheet DataEditor component props */
+export type DataEditorProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
+    /** Callback to be called when the cell's value is changed */
+    onChange: (cell: Cell) => void;
+    /** Callback to be called when edit mode should be exited */
+    exitEditMode: () => void;
+};
+/** Type of the Spreadsheet DataEditor component */
+export type DataEditorComponent<Cell extends CellBase = CellBase> = React.ComponentType<DataEditorProps<Cell>>;
+/** Type of the Spreadsheet Table component props */
+export type TableProps = React.PropsWithChildren<{
+    /** Number of columns the table should render */
+    columns: number;
+    /** Whether column indicators are hidden */
+    hideColumnIndicators?: boolean | null;
+}>;
+/** Type of the Spreadsheet Table component */
+export type TableComponent = React.ComponentType<TableProps>;
+/** Type of the Spreadsheet Row component props */
+export type RowProps = React.PropsWithChildren<{
+    /** The row index of the table */
+    row: number;
+}>;
+/** Type of the Row component */
+export type RowComponent = React.ComponentType<RowProps>;
+/** Type of the Spreadsheet HeaderRow component props */
+export type HeaderRowProps = React.PropsWithChildren<{}>;
+/** Type of the HeaderRow component */
+export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
+/** Type of the Spreadsheet RowIndicator component props */
+export type RowIndicatorProps = {
+    /** The row the indicator indicates */
+    row: number;
+    /** A custom label for the indicator as provided in rowLabels */
+    label?: React.ReactNode | null;
+    /** Whether the entire row is selected */
+    selected: boolean;
+    /** Callback to be called when the row is selected */
+    onSelect: (row: number, extend: boolean) => void;
+};
+/** Type of the RowIndicator component */
+export type RowIndicatorComponent = React.ComponentType<RowIndicatorProps>;
+/** Type of the Spreadsheet ColumnIndicator component props */
+export type ColumnIndicatorProps = {
+    /** The column the indicator indicates */
+    column: number;
+    /** A custom label for the indicator as provided in columnLabels */
+    label?: React.ReactNode | null;
+    /** Whether the entire column in selected */
+    selected: boolean;
+    /** Whether the entire column in Fixed */
+    fixed?: boolean;
+    /** Callback to be called when the column is selected */
+    onSelect: (column: number, extend: boolean) => void;
+};
+/** Type of the ColumnIndicator component */
+export type ColumnIndicatorComponent = React.ComponentType<ColumnIndicatorProps>;
+/** Type of the Spreadsheet CornerIndicator component props */
+export type CornerIndicatorProps = {
+    /** Whether the entire table is selected */
+    selected: boolean;
+    /** Callback to select the entire table */
+    onSelect: () => void;
+};
+/** Type of the CornerIndicator component */
+export type CornerIndicatorComponent = React.ComponentType<CornerIndicatorProps>;
+export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
+    prevCell: Cell | null;
+    nextCell: Cell | null;
+}>;
+export type CreateFormulaParser = (data: Matrix<CellBase>) => FormulaParser;
+export {};

package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch } from "./context";
+declare function useDispatch(): Dispatch;
+export default useDispatch;

package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts

@@ -0,0 +1,3 @@
+import * as Types from "./types";
+declare function useSelector<T>(selector: (state: Types.StoreState) => T): T;
+export default useSelector;

package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts

@@ -0,0 +1,45 @@
+import * as Types from "./types";
+import * as Matrix from "./matrix";
+import * as Point from "./point";
+import { PointRange } from "./point-range";
+import { Selection } from "./selection";
+export { createEmpty as createEmptyMatrix } from "./matrix";
+export declare const PLAIN_TEXT_MIME = "text/plain";
+export declare const FOCUS_WITHIN_SELECTOR = ":focus-within";
+/** Move the cursor of given input element to the input's end */
+export declare function moveCursorToEnd(el: HTMLInputElement): void;
+/**
+ * Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end. A step of -1 is used if a negative start is specified without an end or step. If end is not specified, it's set to start with start then set to 0.
+ * @param end - an integer number specifying at which position to stop (not included).
+ * @param start - An integer number specifying at which position to start.
+ * @param step - An integer number specifying the incrementation
+ */
+export declare function range(end: number, start?: number, step?: number): number[];
+/** Return whether given point is active */
+export declare function isActive(active: Types.StoreState["active"], point: Point.Point): boolean;
+/** Get the offset values of given element */
+export declare function getOffsetRect(element: HTMLElement): Types.Dimensions;
+/** Write given data to clipboard with given event */
+export declare function writeTextToClipboard(event: ClipboardEvent, data: string): void;
+/** Read text from given clipboard event */
+export declare function readTextFromClipboard(event: ClipboardEvent): string;
+/** Get the dimensions of cell at point from state */
+export declare function getCellDimensions(point: Point.Point, rowDimensions: Types.StoreState["rowDimensions"] | undefined, columnDimensions: Types.StoreState["columnDimensions"] | undefined): Types.Dimensions | undefined;
+/** Get the dimensions of a range of cells */
+export declare function getRangeDimensions(rowDimensions: Types.StoreState["rowDimensions"], columnDimensions: Types.StoreState["columnDimensions"], range: PointRange): Types.Dimensions | undefined;
+/** Get the dimensions of selected */
+export declare function getSelectedDimensions(rowDimensions: Types.StoreState["rowDimensions"], columnDimensions: Types.StoreState["columnDimensions"], data: Matrix.Matrix<unknown>, selected: Selection): Types.Dimensions | undefined;
+/** Get given data as CSV */
+export declare function getCSV(data: Matrix.Matrix<Types.CellBase>): string;
+/**
+ * Calculate the rows and columns counts of a spreadsheet
+ * @param data - the spreadsheet's data
+ * @param rowLabels - the spreadsheet's row labels (if defined)
+ * @param columnLabels - the spreadsheet's column labels (if defined)
+ * @returns the rows and columns counts of a spreadsheet
+ */
+export declare function calculateSpreadsheetSize(data: Matrix.Matrix<unknown>, rowLabels?: string[], columnLabels?: string[]): Matrix.Size;
+/** Should spreadsheet handle clipboard event */
+export declare function shouldHandleClipboardEvent(root: Element | null, mode: Types.Mode): boolean;
+export declare function isFocusedWithin(element: Element): boolean;
+export declare function hasLineBreaker(value: unknown): boolean;

package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExcelFile: React.FC<ExcelFileProps>;
+export default ExcelFile;

package/lib/components/ExcelFile/ExcelFile.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+declare const meta: Meta<typeof ExcelFile>;
+type Story = StoryObj<typeof ExcelFile>;
+export declare const Default: Story;
+export default meta;

package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ExcelSheetBarProps {
+    fileDetails: {
+        sheetNames: string[];
+    };
+    handleSheetChange: (name: string, index: number) => void;
+    contextMenu: (e: React.MouseEvent, name: string, index: number) => void;
+    addSheet: () => void;
+    selectedSheet: {
+        name: string;
+    };
+    contextSelect: (e: React.MouseEvent) => void;
+}
+declare const ExcelSheetBar: React.FC<ExcelSheetBarProps>;
+export default ExcelSheetBar;

package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts

@@ -0,0 +1,3 @@
+import './ExcelToolBar.scss';
+declare const ExcelToolBar: React.FC<ExcelToolBarProps>;
+export default ExcelToolBar;

package/lib/components/ExcelFile/ImportExcelStyles.d.ts

@@ -0,0 +1,24 @@
+interface CellStyle {
+    color?: string;
+    backgroundColor?: string;
+    bold?: boolean;
+    italic?: boolean;
+    name?: string;
+    border: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+    alignment: {
+        horizontal?: string;
+        vertical?: string;
+        wrapText?: boolean;
+    };
+}
+interface CellData {
+    style?: CellStyle;
+}
+type ImportExcelStylesData = Array<Array<CellData>>;
+export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
+export {};

package/lib/components/ExcelFile/Types.d.ts

@@ -0,0 +1,137 @@
+interface ExcelFileProps {
+    /** The Excel data containing sheets and their content */
+    excelData: {
+        sheets: WorkSheet[];
+    };
+    /** Optional: Provide context menu options for actions like right-click */
+    contextOption?: {
+        name: string;
+        title: React.ReactNode;
+        action: () => void;
+    }[];
+    /** Controls whether the toolbar is shown, disabled, or hidden */
+    toolbar?: 'show' | 'disable' | 'hide';
+    /** Callback function to save the Excel data */
+    onSave?: (excelData?: any) => void;
+}
+interface WorkSheet {
+    /** The name of the worksheet */
+    sheetName: string;
+    /** 2D array of worksheet data (cells) */
+    data: WorkData[][];
+}
+interface WorkData {
+    /** Value of the cell */
+    value: string;
+    /** Styling options for the cell */
+    style: React.CSSProperties;
+    type?: boolean;
+}
+/** A generic type to represent a 2D matrix of any type (or undefined values) */
+type Matrix<T> = (T | undefined)[][];
+interface ContextAction {
+    /** Name of the right-click option */
+    name: string;
+    /** Display title of the right-click menu option */
+    title: React.ReactNode;
+    /** The action that occurs when the right-click menu option is selected */
+    action: () => void;
+}
+interface ContextOption {
+    /** Type of the context option ('cell', 'row', 'column') */
+    name: string;
+    /** Array of context menu actions for right-click options */
+    value: ContextAction[];
+}
+interface ContextMenuState {
+    /** Whether the context menu is visible */
+    visible: boolean;
+    /** X-coordinate position for the context menu */
+    x: number;
+    /** Y-coordinate position for the context menu */
+    y: number;
+    /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
+    type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
+}
+interface SelectedCell {
+    /** The row index of the selected cell */
+    row: number;
+    /** The column index of the selected cell */
+    column: number;
+}
+interface ColorContainer {
+    /** The color used for the text (hex code) */
+    color: string;
+    /** The background color used for the cell (hex code) */
+    backgroundColor: string;
+    /** The border color used for the cell (hex code) */
+    borderColor: string;
+}
+interface SelectedValue {
+    /** The value inside the selected cell */
+    value: string;
+    /** The row index of the selected cell */
+    row: number;
+    /** The column index of the selected cell */
+    column: number;
+    /** The column represented as an alphabetical string ('A', 'B') */
+    alphaCol: string;
+    /** The style applied to the selected cell */
+    style: React.CSSProperties;
+    /** The sheet name where the cell is located */
+    sheet: string;
+}
+interface ExcelToolBarProps {
+    /** use this to hide/show/disable the toolbar */
+    toolbar?: 'show' | 'disable' | 'hide';
+    /** function to apply styles */
+    applyStyle: (styleType: string, value: any) => void;
+    /** function to trigger format painter */
+    formatePaint: () => void;
+}
+interface ExcelSheetBarProps {
+    /** Object containing details about the file, including sheet names */
+    fileDetails: {
+        sheetNames: string[];
+    };
+    /** Function to handle sheet change events */
+    handleSheetChange: (name: string, index: number) => void;
+    /** Function to open the context menu on a sheet */
+    contextMenu: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, name: string, index: number) => void;
+    /** Function to add a new sheet */
+    addSheet: () => void;
+    /** Object representing the currently selected sheet */
+    selectedSheet: {
+        name: string;
+        index: number;
+    };
+    /** Function to update the context Type */
+    contextSelect: (event: React.MouseEvent) => void;
+}
+interface ContextMenuProps {
+    /** Custom context menu options */
+    customContext: {
+        name: string;
+        title: React.ReactNode;
+        action: () => void;
+    }[];
+    /** Object that holds different context actions based on the type (cell, row, column, sheet_options) */
+    contextAction: {
+        /** Function to add a row */
+        addRow: () => void;
+        /** Function to delete a row */
+        deleteRow: () => void;
+        /** Function to add a column */
+        addColumn: () => void;
+        /** Function to delete a column */
+        deleteColumn: () => void;
+        /** Function to add a new sheet */
+        addSheet: () => void;
+        /** Function to delete a sheet */
+        deleteSheet: () => void;
+    };
+    /** The state of the context menu, controlling its visibility and position */
+    contextData: ContextMenuState;
+    /** Function to update the context menu state */
+    setContextData: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+}

package/lib/components/ExcelFile/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ExcelFile/ExcelFile';

package/lib/components/ExpandableMenu/ExpandableMenu.d.ts

@@ -0,0 +1,5 @@
+import './ExpandableMenu.scss';
+import { ExpandableMenuProps } from './types';
+import './ExpandableMenu.scss';
+declare const ExpandableMenu: React.FC<ExpandableMenuProps>;
+export default ExpandableMenu;

package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExpandableMenu from './ExpandableMenu';
+declare const meta: Meta<typeof ExpandableMenu>;
+type Story = StoryObj<typeof ExpandableMenu>;
+export declare const Primary: Story;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/ExpandableMenu/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ExpandableMenu';

package/lib/components/ExpandableMenu/types.d.ts

@@ -0,0 +1,34 @@
+export interface ExpandableMenuProps {
+    /**
+     * mandatory | label for the expandable menu
+     */
+    label: string;
+    /**
+     * optional | Icon to describe direction of expansion
+     */
+    icon?: React.ReactNode;
+    /**
+     * optional | variant of the menu
+     */
+    variant?: 'primary';
+    /**
+     * optional | size of the expandable menu
+     */
+    size?: 'medium';
+    /**
+     * optional | disable to disable the menu and prevent click events but not hover event
+     */
+    disable?: boolean;
+    /**
+     * Mandatory |  sub menus to be shown inside  expandable menu
+     */
+    subMenus: string[];
+    /**
+     * optional | selected sub menu of the expandable menu
+     */
+    selectedMenu?: string;
+    /**
+     * optional | onSubMenuClick event to perform action on click of sub menu
+     */
+    onSubMenuClick?: (subChip: any) => void;
+}

package/lib/components/FF_Captcha/Recaptcha.d.ts

@@ -0,0 +1,5 @@
+import ReCAPTCHA from 'react-google-recaptcha';
+import { RecaptchaProps } from './types';
+import './Recaptcha.scss';
+declare const Recaptcha: import("react").ForwardRefExoticComponent<RecaptchaProps & import("react").RefAttributes<ReCAPTCHA>>;
+export default Recaptcha;

package/lib/components/FF_Captcha/captcha.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Recaptcha from './Recaptcha';
+declare const meta: Meta<typeof Recaptcha>;
+type Story = StoryObj<typeof Recaptcha>;
+export declare const Default: Story;
+export declare const WithError: Story;
+export declare const WithCustomTheme: Story;
+export default meta;

package/lib/components/FF_Captcha/types.d.ts

@@ -0,0 +1,20 @@
+import { ComponentProps } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+    /**
+     * Callback function that receives the verification token
+     */
+    onVerify: (token: string | null) => void;
+    /**
+     * Optional CSS class name
+     */
+    className?: string;
+    /**
+     * Optional error message to display
+     */
+    error?: string | null;
+    /**
+     * reCAPTCHA site key
+     */
+    sitekey: string;
+}

package/lib/components/FileDropzone/Dropzone.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './FileDropzone.scss';
+import { DroppableProps } from './types';
+declare const Dropzone: FC<DroppableProps>;
+export default Dropzone;

package/lib/components/FileDropzone/FileDropzone.d.ts

@@ -0,0 +1,4 @@
+import { FileDropzoneProps } from './types';
+import './FileDropzone.scss';
+declare const FileDropzone: React.FC<FileDropzoneProps>;
+export default FileDropzone;

package/lib/components/FileDropzone/FileDropzone.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj, Meta } from '@storybook/react';
+import FileDropzone from './FileDropzone';
+declare const meta: Meta<typeof FileDropzone>;
+type Story = StoryObj<typeof FileDropzone>;
+export declare const Primary: Story;
+export declare const withMIMEValidation: Story;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/FileDropzone/FilePreview.d.ts

@@ -0,0 +1,4 @@
+import './FileDropzone.scss';
+import { FilePreviewProps } from './types';
+declare const FilePreview: React.FC<FilePreviewProps>;
+export default FilePreview;

package/lib/components/FileDropzone/index.d.ts

@@ -0,0 +1 @@
+export { default } from './FileDropzone';

package/lib/components/FileDropzone/types.d.ts

@@ -0,0 +1,103 @@
+import { ReactNode } from 'react';
+export interface FileDropzoneProps {
+    /**
+     *  Icon to be displayed in the dropzone.
+     **/
+    icon?: ReactNode;
+    /**
+     *  Primary label to be shown in dropzone area
+     **/
+    primaryLabel?: string;
+    /**
+     *  Secondary label to be shown
+     **/
+    secondaryLabel?: string;
+    /**
+     *  Label to be shown in choose file/input button.
+     **/
+    buttonLabel?: string;
+    /**
+     *  . extension needs to be passed to allow the type of file to add or MIME type to be validate MIME type
+     **/
+    accept: string[];
+    /**
+     *  To allow multiple selection or drop of files.
+     **/
+    multiple?: boolean;
+    /**
+     *  Maximum files to be dropped or selected at once.
+     **/
+    maxFiles?: number;
+    /**
+     *  Maximum size of the file in numbers.
+     **/
+    maxSize?: number;
+    /**
+     *  Function with state to get the boolean value when the maxFiles is less than dropped files.
+     **/
+    onMaxFilesError?: () => void;
+    /**
+     *  To show error message if file size exceeds the max size
+     **/
+    maxSizeErrorMessage?: string;
+    /**
+     *  To show error message if file is not of accepted file type
+     **/
+    invalidFileMessage?: string;
+    /**
+     *  To show error message if file already exist with same name and type
+     **/
+    fileExistMessage?: string;
+    /**
+     *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
+     **/
+    validateMIMEType?: boolean;
+}
+export interface FileState {
+    accepted: File[];
+    rejected: FileRejection[];
+}
+export interface FileError {
+    message: string;
+    code: string;
+}
+export interface FileRejection {
+    file: File;
+    errors: FileError[];
+}
+export interface DropzoneOptions {
+    accept: string[];
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number | undefined;
+    onDrop?: (acceptedFiles: File[], rejectedFiles: FileRejection[], event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>) => void;
+    onMaxFilesError?: () => void;
+    maxSizeErrorMessage?: string;
+    invalidFileMessage?: string;
+    fileExistMessage?: string;
+    validateMIMEType?: boolean;
+}
+export interface DropzoneState {
+    getRootProps: () => React.HTMLAttributes<HTMLElement>;
+    getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+    acceptedFiles: File[];
+    rejectedFiles: FileRejection[];
+    isDragActive: boolean;
+    handleRemoveClick: (file: File) => void;
+    handleReplaceClick: (file: File) => void;
+}
+export interface DroppableProps {
+    icon: React.ReactNode;
+    primaryLabel: string;
+    secondaryLabel: string;
+    buttonLabel: string;
+    getRootProps: () => any;
+    getInputProps: () => any;
+    isDragActive: boolean;
+}
+export interface FilePreviewProps {
+    file: File;
+    error?: string;
+    onRemoveClick: (file: File) => void;
+    onReplaceClick: (file: File) => void;
+}