@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
105 lines (104 loc) • 4.3 kB
TypeScript
import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable } from '../../types';
import { ButtonVariant } from '../Button/Button.utils';
import { InputFileLanguage, InputFileTranslations } from './InputFile.utils';
export interface InputFileProps extends InputHTMLAttributes<HTMLInputElement> {
/** Unique id for the input. */
id: string;
/** Label text displayed above the input. */
label: string;
/** Defines the file types the input file should accept. */
accept?: string;
/** Disables the input, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** The remove button visible in the file list, when file(s) were selected by the user:
*
* `data-*`: Custom data attributes, which will have the index of the selected file appended at the end of the value.
*/
fileListItemRemoveButtonProps?: {
[key: `data-${string}`]: string | undefined;
};
/** Hides the input label, can be responsive.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default false
*/
hideLabel?: BreakpointCustomizable<boolean>;
/** Short descriptive text displayed beneath the label OR in the dropzone. */
hint?: string;
/** Input File button props:
*
* `label`: Accessibility label for the action button or icon.
* * (default) Depends on lang and multi props, 'Choose File', 'Choose Files', 'Datei auswählen' or 'Dateien auswählen'.
*
* `variant`: Visual style variant of the button.
* (default) 'outline'
*
* `data-*`: Custom data attributes.
*/
inputFileButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
variant?: Extract<ButtonVariant, 'outline' | 'filled'>;
};
/** Marks the input as invalid, typically used for form validation.
* @default false
*/
invalid?: boolean;
/** Moves the hint outside of the dropzone.
* `boolean | { base: boolean; s?: boolean; m?: boolean; l?: boolean; xl?: boolean; }`
* @default {base: true, m: false}
*/
isHintOutsideDropzone?: BreakpointCustomizable<boolean>;
/** Sets language to use for messages, if no translations object is provided.
* @default 'en'
*/
lang?: InputFileLanguage;
/** Shows an info button next to the label that triggers a popover with the passed content. */
popoverContent?: React.ReactNode;
/** Popover info button props:
*
* `data-*`: Custom data attributes.
*
* `label`: Accessibility label for the default anchor button.
* (default) 'Toggle popover'
*/
popoverInfoButtonProps?: {
[key: `data-${string}`]: string | undefined;
label?: string;
};
/** Maximum size allowed in MegaBytes.
* @default 7
*/
maxSizeInMb?: number;
/** Allow multiple file selection.
* @default false
*/
multiple?: boolean;
/** Indicates that the input is required.
* @default false
*/
required?: boolean;
/** Show a bigger dropzone to drag & drop files into instead of only a button.
* @default false
*/
showDropzone?: boolean;
/** Show a file list after file selection. */
showFileList?: boolean;
/** Defines a system feedback message, shown when `invalid={true}`. */
systemFeedback?: string;
/** Translations for the DSInputFile. Use our [customization page](/?path=/story/components-inputs-input-file-translations--documentation) for creating custom translations. */
translations?: InputFileTranslations;
/** Callback function invoked when files are selected. */
onFilesSelect?: (files: File[]) => void;
}
export interface FileWithFeedback extends File {
feedback?: string;
}
/**
* The `<DSInputFile />` allows users to select and upload files, such as images, documents, or videos. It ensures a clear, accessible, and user-friendly way to manage file uploads.
*
* Design in Figma: [Input File](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=32314-6485&t=QXC7W0qCpEbPrh2M-11)
*/
export declare const DSInputFile: import('react').ForwardRefExoticComponent<InputFileProps & import('react').RefAttributes<HTMLInputElement>>;