@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
82 lines (81 loc) • 3.84 kB
TypeScript
import { IconName } from '../../types';
import { DSLanguage } from '../../utils';
import { ChipGroupProps } from './ChipGroup';
type ValidationProps = Pick<ChipGroupProps, 'chips' | 'id' | 'label'>;
export declare const validateChipGroupProps: ({ chips, id, label, }: ValidationProps) => void;
export interface Chip {
/** Unique id for the Chip. */
id: string | number;
/** Label text displayed inside the Chip. */
label: string;
/** Disables the Chip, preventing user interaction.
* @default false
*/
disabled?: boolean;
/** Name of the icon to display */
iconName?: IconName;
/** Displays the Chip as selected */
isSelected?: boolean;
/** Callback function called when the Chip is clicked or selected / removed via keyboard. */
onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
}
export declare const CHIP_GROUP_SIZE: readonly ["medium", "small"];
export type ChipGroupSize = (typeof CHIP_GROUP_SIZE)[number];
export type ChipGroupSelectionMode = 'single' | 'multiple';
export type ChipGroupLanguage = DSLanguage;
export type ChipGroupAriaTranslations = {
/** Word "disabled" used in state announcements. */
disabled: string;
/** Word "selected" used in state announcements. */
selected: string;
/** Word "not selected" used in state announcements. */
notSelected: string;
/** Word "removed" used in state announcements. */
removed: string;
/**
* Guidance for selecting/unselecting a chip via keyboard.
*
* Placeholder: `{action}` = the action label (e.g. selectAction/unselectAction).
*/
selectChip: string;
/** Action label for unselecting a chip. */
unselectAction: string;
/** Action label for selecting a chip. */
selectAction: string;
/** Guidance for adding an option to the selection. */
addToSelection: string;
/** Guidance for removing an option from the selection. */
removeFromSelection: string;
/** Guidance for removing the currently focused value. */
removeChip: string;
/** Tooltip text for a disabled chip. */
tooltipDisabled: string;
/** Tooltip text for a removable chip. */
tooltipRemovable: string;
/** Tooltip text for deactivating a property. */
tooltipDeactivate: string;
/** Tooltip text for activating a property. */
tooltipActivate: string;
/**
* Announced when items are selected.
* ICU plural: resolves correct plural form based on CLDR rules for the locale.
* Results in messages like "3 items selected" or "1 item selected".
*
* Placeholder: `{count}` = number of selected items.
*/
countSelected: string;
/**
* Announced when items remain.
* ICU plural: resolves correct plural form based on CLDR rules for the locale.
* Results in messages like "3 items remaining" or "1 item remaining".
*
* Placeholder: `{count}` = number of remaining items.
*/
countRemaining: string;
};
export declare const DS_CHIP_GROUP_TRANSLATIONS_EN: ChipGroupAriaTranslations;
export declare const DS_CHIP_GROUP_TRANSLATIONS_DE: ChipGroupAriaTranslations;
export declare const DS_CHIP_GROUP_TRANSLATIONS: Record<string, ChipGroupAriaTranslations>;
export declare const getChipAriaLabel: (t: (key: keyof ChipGroupAriaTranslations, values?: Record<string, string | number>) => string, label: string, disabled: boolean | undefined, isSelected: boolean | undefined, selectionMode: ChipGroupSelectionMode, isRemovable: boolean | undefined) => string;
export declare const getChipTooltip: (t: (key: keyof ChipGroupAriaTranslations, values?: Record<string, string | number>) => string, disabled: boolean | undefined, isSelected: boolean | undefined, isRemovable: boolean | undefined) => string;
export {};