@indico-data/design-system 3.18.0 → 3.19.0

package/lib/index.d.ts

@@ -197,12 +197,36 @@ type IconProps = PermafrostComponent & {
     faPrefix?: IconPrefix;
 };
 
+/** Customizable text for form Label. */
+interface FormLabelText {
+    /** Text appended to aria-label for required fields. Default: "(required)" */
+    required?: string;
+}
+
+interface LabelProps {
+    label?: string;
+    name: string;
+    isRequired?: boolean;
+    hasHiddenLabel?: boolean;
+    /** Customizable display text. */
+    text?: FormLabelText;
+}
+
 type SelectOption = {
     label: string;
     value: string;
     detail?: ReactNode;
     [key: string]: any;
 };
+/** Customizable text for Select. Extends FormLabelText for label-related text. */
+interface SelectText extends FormLabelText {
+    /** Placeholder text when no option is selected. Default: "Select..." */
+    placeholder?: string;
+    /** Text when there are no options. Default: "No options" */
+    noOptions?: string;
+    /** Text while loading options. Default: "Loading..." */
+    loading?: string;
+}
 
 type Direction = `${Direction$1}`;
 interface PinnableColumn<T> extends TableColumn$1<T> {
@@ -212,6 +236,15 @@ interface PinnableColumn<T> extends TableColumn$1<T> {
     position?: number;
 }
 type TableColumn<T> = PinnableColumn<T>;
+/** Customizable text for Table. */
+interface TableText {
+    /** Text to display while loading. Default: "Loading..." */
+    loading?: string;
+    /** Aria label for unpinning a column. Default: "Unpin column" */
+    unpinColumn?: string;
+    /** Aria label for pinning a column. Default: "Pin column" */
+    pinColumn?: string;
+}
 interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
     /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
     columns: TableColumn<T>[];
@@ -231,6 +264,8 @@ interface TableProps<T> extends Omit<IDataTableProps<T>, 'paginationComponent' |
     canPinColumns?: boolean;
     /** Callback that receives the IDs of the pinned columns when they change. */
     onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
+    /** Customizable display text. */
+    text?: TableText;
 }
 
 type PillSize = 'sm' | 'md' | 'lg';
@@ -315,13 +350,6 @@ declare const Icon: ({ name, size, className, ariaLabel, faPrefix, ...props }: I
 
 declare const Table: <T>(props: TableProps<T>) => react_jsx_runtime.JSX.Element;
 
-interface LabelProps {
-    label?: string;
-    name: string;
-    isRequired?: boolean;
-    hasHiddenLabel?: boolean;
-}
-
 interface BaseInputProps {
     id?: string;
     value?: string | undefined;
@@ -462,11 +490,18 @@ interface SelectProps<OptionType extends SelectOption> extends Props$4<OptionTyp
     classNamePrefix?: string;
     /** Event handler for when the selected value changes */
     onChange?: (newValue: any, actionMeta: any) => void;
+    /** Customizable display text. */
+    text?: SelectText;
 }
 declare const LabeledSelect: React$1.ForwardRefExoticComponent<Omit<SelectProps<SelectOption> & {
     ref?: React$1.Ref<any>;
 } & LabelProps, "ref"> & React$1.RefAttributes<any>>;
 
+/** Customizable text for DatePicker. */
+interface DatePickerText {
+    /** Label for "Select Time" text. Default: "Select Time" */
+    selectTime?: string;
+}
 interface DatePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     /** The selected day(s). */
@@ -509,6 +544,8 @@ interface DatePickerProps {
     isReadOnly?: boolean;
     timeTabIndex?: number;
     dateTabIndex?: number;
+    /** Customizable display text. */
+    text?: DatePickerText;
 }
 interface PortalOptions {
     rootId?: string;
@@ -516,6 +553,12 @@ interface PortalOptions {
 
 declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
+/** Customizable text for TimePicker. */
+interface TimePickerText {
+    /** Aria label for the validation error tooltip. Default: "Time validation error" */
+    validationError?: string;
+}
+
 interface TimePickerProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     /** The time value to be displayed in the input field */
@@ -532,9 +575,17 @@ interface TimePickerProps {
     isReadOnly?: boolean;
     isDisabled?: boolean;
     tabIndex?: number;
+    /** Customizable display text. */
+    text?: TimePickerText;
     [key: string]: unknown;
 }
-declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, ...rest }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+declare const TimePicker: ({ ref, timeValue, label, name, hasHiddenLabel, onTimeChange, className, isDisabled, isReadOnly, tabIndex, text: textProp, ...rest }: TimePickerProps) => react_jsx_runtime.JSX.Element;
+
+/** Customizable text for IconTriggerDatePicker. */
+interface IconTriggerDatePickerText {
+    /** Aria label for the trigger icon. Default: "Open date picker" */
+    triggerIcon?: string;
+}
 
 interface Props$3 {
     /** Allows you to select a single day, a range of days, or multiple days. */
@@ -572,6 +623,8 @@ interface Props$3 {
     isPortal?: boolean;
     /** The floating options for the date picker. Follows floating-ui options. */
     floatingOptions?: UseFloatingOptions;
+    /** Customizable display text. */
+    text?: IconTriggerDatePickerText;
 }
 declare const IconTriggerDatePicker: (props: Props$3) => react_jsx_runtime.JSX.Element;
 
@@ -584,7 +637,8 @@ interface SingleInputDatePickerProps {
     /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
-    label?: string;
+    /** The label for the input field. */
+    label: string;
     onSelect: (selected: Date | undefined) => void;
     initialMonth?: Date;
     selected?: Date;
@@ -612,6 +666,14 @@ interface SingleInputDatePickerProps {
 }
 declare function SingleInputDatePicker(props: SingleInputDatePickerProps): react_jsx_runtime.JSX.Element;
 
+/** Customizable text for InputDateRangePicker. */
+interface InputDateRangePickerText {
+    /** Label for the "from" date input. Default: "From Date" */
+    fromDate?: string;
+    /** Label for the "to" date input. Default: "To Date" */
+    toDate?: string;
+}
+
 interface InputDateRangePickerProps {
     /** A label for assistive technologies. */
     ariaLabel: string;
@@ -653,6 +715,8 @@ interface InputDateRangePickerProps {
     floatingOptions?: UseFloatingOptions;
     /** Whether the date picker is a portal. */
     isPortal?: boolean;
+    /** Customizable display text. */
+    text?: InputDateRangePickerText;
 }
 declare function InputDateRangePicker(props: InputDateRangePickerProps): react_jsx_runtime.JSX.Element;
 
@@ -664,7 +728,8 @@ interface SingleInputDateTimePickerProps {
     isDisabled?: boolean;
     captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
     id?: string;
-    label?: string;
+    /** The label for the date input field. */
+    label: string;
     onSelect: (selected: Date | undefined) => void;
     initialMonth?: Date;
     selected?: Date;
@@ -791,6 +856,11 @@ interface BadgeProps {
 
 declare const Badge: ({ className, children, size, string, ...rest }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
+/** Customizable text for Modal. */
+interface ModalText {
+    /** Aria label for the close button. Default: "Close" */
+    closeButton?: string;
+}
 interface ModalProps {
     /** Additional classes for the badge component */
     className?: string;
@@ -826,8 +896,19 @@ interface ModalProps {
     footer?: React.ReactNode;
     /** The maximum width of the modal in pixels */
     maxWidthInPixels?: number;
+    /** Customizable display text. */
+    text?: ModalText;
 }
-interface ConfirmationModalProps extends ModalProps {
+/** Customizable text for ConfirmationModal. Extends ModalText. */
+interface ConfirmationModalText extends ModalText {
+    /** Label for the "Don't show again" checkbox. Default: "Don't display this again." */
+    dontShowAgain?: string;
+    /** Text for the confirm button. Default: "Confirm" */
+    confirm?: string;
+    /** Text for the cancel button. Default: "Cancel" */
+    cancel?: string;
+}
+interface ConfirmationModalProps extends Omit<ModalProps, 'text'> {
     onConfirmRequest?: ({ dontShowAgain, }: {
         dontShowAgain?: boolean;
     }) => void | Promise<void> | Promise<boolean>;
@@ -836,20 +917,35 @@ interface ConfirmationModalProps extends ModalProps {
     hasDontShowAgainCheckbox?: boolean;
     /** The variant of the confirmation button. */
     confirmationButtonVariant?: ButtonVariants;
-    /** The text of the confirmation button */
-    confirmationButtonText?: string;
-    /** The text of the cancel button */
-    cancelButtonText?: string;
     /** The icon of the modal */
     icon?: IconName;
     /** The status of the modal. This will determine the color of the icon. */
     status?: 'info' | 'success' | 'error';
+    /** Customizable display text. */
+    text?: ConfirmationModalText;
 }
 
-declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
+declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, text: textProp, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
 
-declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
+declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, text: textProp, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
 
+/** Customizable text for TanstackTable. */
+interface TanstackTableText {
+    /** Message while table is loading. Default: "Table is loading..." */
+    loading?: string;
+    /** Message when no results found. Default: "No results found." */
+    noResults?: string;
+    /** Message when there's an error loading data. Default: "There was an error loading the data." */
+    error?: string;
+    /** Text for reset filters button. Default: "Reset filters" */
+    resetFilters?: string;
+    /** Singular entry text. Default: "entry" */
+    entry?: string;
+    /** Plural entries text. Default: "entries" */
+    entries?: string;
+    /** "of" text in pagination (e.g., "5 of 10 entries"). Default: "of" */
+    of?: string;
+}
 type WithPaginationProps = {
     /** Number of rows to display per pagination page. */
     rowsPerPage: number;
@@ -903,8 +999,6 @@ type Props<T extends object> = {
     hasFilters?: boolean;
     /** When this is true, the table is considered to be in a loading state. */
     isLoading?: boolean;
-    /** Message to display when the table is loading. */
-    isLoadingMessage?: string;
     /** Columns that are pinned by default. */
     defaultPinnedColumns?: string[];
     /** Callback when a row is clicked. */
@@ -921,9 +1015,11 @@ type Props<T extends object> = {
     onSelectAllChange?: (isSelected: boolean) => void;
     /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
     defaultSorting?: SortingState;
+    /** Customizable display text. */
+    text?: TanstackTableText;
 } & PaginationProps$1;
 
-declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, isLoadingMessage, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, ...rest }: Props<T & {
+declare function TanstackTable<T extends object>({ columns: defaultColumns, data, className, currentPage, rowCount, rowsPerPage, onChangePage, totalEntriesText, TableActions, error, enableRowSelection, clearFilters, hasFilters, showPagination, isLoading, defaultPinnedColumns, onRowClick, activeRows, isStriped, actionBarClassName, defaultSorting, text: textProp, ...rest }: Props<T & {
     id: string;
 }>): react_jsx_runtime.JSX.Element;
 
@@ -949,6 +1045,17 @@ interface TooltipProps {
 }
 declare const Tooltip: ({ id, clickToShow, delayShow, delayHide, children, place, width, maxWidth, opacity, positionStrategy, ...rest }: TooltipProps) => react_jsx_runtime.JSX.Element;
 
+/** Customizable text for Pagination. */
+interface PaginationText {
+    /** Aria label for previous page button. Default: "Previous Page" */
+    previousPage?: string;
+    /** Aria label for next page button. Default: "Next Page" */
+    nextPage?: string;
+    /** Label for current page input. Default: "Current Page" */
+    currentPage?: string;
+    /** Text between current page and total (e.g., "of"). Default: "of" */
+    of?: string;
+}
 interface PaginationProps {
     /** The total number of pages to be displayed */
     totalPages: number;
@@ -958,9 +1065,11 @@ interface PaginationProps {
     className?: string;
     /** The callback function that is called when the page changes. */
     onChange?: (value: number) => void;
+    /** Customizable display text. */
+    text?: PaginationText;
 }
 
-declare const Pagination: ({ totalPages, currentPage, onChange, className, ...rest }: PaginationProps) => react_jsx_runtime.JSX.Element;
+declare const Pagination: ({ totalPages, currentPage, onChange, className, text: textProp, ...rest }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface CirclePulseProps {
     /** The size of the circle */
@@ -984,6 +1093,15 @@ declare function BarSpinner({ width, id, height, className, ...rest }: {
     [key: string]: any;
 }): react_jsx_runtime.JSX.Element;
 
+/** Customizable text for Stepper. */
+interface StepperText {
+    /** Label for the "Previous Step" button. Default: "Previous Step" */
+    previousStep?: string;
+    /** Label for the "Next Step" button. Default: "Next Step" */
+    nextStep?: string;
+    /** Label for the "Finish" button. Default: "Finish" */
+    finish?: string;
+}
 interface StepperProps {
     /** An array of step objects that define the stepper navigation. */
     steps: Step[];
@@ -1002,6 +1120,8 @@ interface StepperProps {
     children: React.ReactNode;
     /** The function to call when a step is clicked ont he legend. */
     onStepClick: (step: number) => void;
+    /** Customizable display text. */
+    text?: StepperText;
 }
 interface Step {
     /** Display text for the step in the sidebar/legend */
@@ -1012,7 +1132,7 @@ interface Step {
     isSidebarEnabled?: boolean;
 }
 
-declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, }: StepperProps) => react_jsx_runtime.JSX.Element;
+declare const Stepper: ({ currentStep: externalCurrentStep, legendHeader, legendFooter, steps, onBackClick, onNextClick, onFinishClick, children, onStepClick, text: textProp, }: StepperProps) => react_jsx_runtime.JSX.Element;
 
 interface TruncateProps {
     /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
@@ -1027,4 +1147,4 @@ interface TruncateProps {
 
 declare const Truncate: ({ numLines, tooltipOptions, children, ...rest }: TruncateProps) => react_jsx_runtime.JSX.Element;
 
-export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, SingleInputDatePicker, SingleInputDateTimePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };
+export { Badge, BarSpinner, Button, Card, Checkbox, CirclePulse, Col, ConfirmationModal, Container, DatePicker, FloatUI, Form, Icon, IconTriggerDatePicker, LabeledInput as Input, InputDateRangePicker, Menu, Modal, Pagination, LabeledPasswordInput as PasswordInput, Pill, Radio as RadioInput, Row, LabeledSelect as SelectInput, type SelectOption, type SelectText, SingleInputDatePicker, SingleInputDateTimePicker, Skeleton, Stepper, Table, TanstackTable, LabeledTextarea as Textarea, TimePicker, Toggle as ToggleInput, Tooltip, Truncate, registerFontAwesomeIcons };