@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
149 lines (148 loc) • 6.25 kB
TypeScript
import { InputHTMLAttributes } from 'react';
import { BreakpointCustomizable, Theme } from '../../types';
import { ButtonVariant } from '../Button/Button.utils';
import { ProgressIndicatorVariant } from './FileList/ProgressIndicator/ProgressIndicator';
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;
/** **Controlled** files prop. When provided, component becomes controlled and internal selection state is ignored.
* Each file can optionally include upload meta and action button props.
*
* `{ feedback?: string;`
* `uploadStatus?: 'uploading' | 'error' | 'success';`
* `uploadPercent?: 'indeterminate' | number;`
* `removeButtonProps?: { [key: 'data-${string}']: string | undefined; onClick: () => void; }; }`
* `retryButtonProps?: { [key: 'data-${string}']: string | undefined; onClick: () => void; }; }`
*/
files?: FileWithUploadMeta[];
/** 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 for messages and ICU plural rule resolution.
* Use `'de'` or `'en'` for preconfigured translations, or any
* [BCP 47 language tag](https://www.rfc-editor.org/info/bcp47) (e.g. `'fr'`, `'pl'`, `'en-GB'`)
* when providing a custom `translations` object.
* @default 'en'
*/
lang?: InputFileLanguage;
/** Maximum size allowed in MegaBytes.
* @default 7
*/
maxSizeInMb?: number;
/** Allow multiple file selection.
* @default false
*/
multiple?: boolean;
/** 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;
};
/** 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 how upload progress is shown (bar = progress bar, text = simple text indicator, undefined = no progress UI). */
showProgress?: ProgressIndicatorVariant;
/** 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: FileWithUploadMeta[]) => void;
}
/** @internal Props including theme — not exported to consumers. */
export interface InputFilePropsWithTheme extends InputFileProps {
/** Defines the theme.
* @default 'light'
*/
theme?: Theme;
}
export type FileUploadStatus = 'uploading' | 'error' | 'success';
export interface FileWithUploadMeta extends File {
/** System feedback shown to the user. */
feedback?: string;
/** Current upload status of the file. */
uploadStatus?: FileUploadStatus;
/** Upload progress percentage (0 - 100) or 'indeterminate' if not available.
* @default 'indeterminate'
*/
uploadPercent?: 'indeterminate' | number;
/** Remove button props:
*
* `data-*`: Custom data attributes.
*
* `onClick`: Callback function called when the remove button is clicked.
*/
removeButtonProps?: {
[key: `data-${string}`]: string | undefined;
onClick: () => void;
};
/** Retry button props used when `uploadStatus === 'error'`:
*
* `data-*`: Custom data attributes.
*
* `onClick`: Callback function called when the retry button is clicked.
*/
retryButtonProps?: {
[key: `data-${string}`]: string | undefined;
onClick: () => void;
};
}
/**
* 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>>;