@tiller-ds/upload/FileList.d.ts

Upload module of Tiller Design System

import * as React from "react";
import { TokenProps } from "@tiller-ds/theme";
import { UseFileUpload, File } from "./useFileUpload";
export declare type FileListProps<T extends File> = {
    /**
     * Object return from {@link useFileUpload} hook, used internally for correct behaviour of the file
     * upload
     */
    hook: UseFileUpload<T>;
    /**
     * Children as render prop
     * @param file single file in the table
     * @param helpers helper functions for file manipulation
     */
    children?: (file: T, helpers: Helpers<T>) => React.ReactNode;
    /**
     * Custom classes for the container.
     * Overrides conflicting default styles, if any.
     *
     * The provided `className` is processed using `tailwind-merge` to eliminate redundant or conflicting Tailwind classes.
     */
    className?: string;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
};
export declare type FileListNameProps = {
    children?: React.ReactNode;
    fileIcon?: React.ReactElement;
    className?: string;
    "data-testid"?: string;
} & TokenProps<"FileList">;
export declare type FileListActionsProps = {
    /**
     * Used in case of redirect, for example, file content url
     */
    to?: string;
    children?: React.ReactNode;
    /**
     * Handler for click action
     */
    onClick?: React.MouseEventHandler<HTMLElement>;
    /**
     * A unique identifier for testing purposes.
     * This identifier can be used in testing frameworks like Jest or Cypress to locate specific elements for testing.
     * It helps ensure that UI components are behaving as expected across different scenarios.
     * @type {string}
     * @example
     * // Usage:
     * <MyComponent data-testid="my-component" />
     * // In tests:
     * getByTestId('my-component');
     */
    "data-testid"?: string;
} & React.AnchorHTMLAttributes<HTMLAnchorElement> & TokenProps<"FileList">;
export declare type Helpers<T extends File> = {
    /**
     * Method for deleting a file
     * @param selectedFile
     */
    deleteFile: (selectedFile: T) => void;
};
export declare type FileHeaderProps = {
    /**
     * Should a file list be expandable (with possibility to hide list) or not
     */
    expandable?: boolean;
    children: React.ReactNode;
    openExpanderIcon?: React.ReactElement;
    closeExpanderIcon?: React.ReactElement;
    /**
     * Custom additional styling applied to the component.
     */
    className?: string;
    "data-testid"?: string;
} & TokenProps<"FileList">;
export declare type FileBodyProps = {
    children: React.ReactNode;
    "data-testid"?: string;
};
declare function FileHeader({ expandable, children, className, ...props }: FileHeaderProps): JSX.Element;
declare namespace FileHeader {
    var Name: typeof FileListName;
    var Action: typeof FileListAction;
}
declare function FileBody({ children, ...props }: FileBodyProps): JSX.Element | null;
declare function FileListName({ children, className, fileIcon, ...props }: FileListNameProps): JSX.Element;
declare function FileListAction({ to, children, className, ...props }: FileListActionsProps): JSX.Element;
export declare function FileList<T extends File>({ hook, children, className, ...props }: FileListProps<T>): JSX.Element;
export declare namespace FileList {
    var Header: typeof FileHeader;
    var Body: typeof FileBody;
}
export default FileList;