///
import React, { ReactNode } from 'react';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
/** Types */
declare type variantType$8 = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'link' | 'info' | undefined;
declare type sizingType$3 = 'lg' | 'sm' | 'xs' | undefined;
declare type typeType$4 = 'submit' | 'button' | 'reset' | undefined;
interface ButtonProps extends React.ButtonHTMLAttributes {
/** Content of button */
children?: React.ReactNode;
/** The styling variant that you would like to use */
variant?: variantType$8;
/** The custom 'non-default' button size that you would like */
size?: sizingType$3;
/** Is button in Active state */
active?: boolean;
/** Option to fit button width to its parent width */
block?: boolean;
/** Is button in Disabled state */
disabled?: boolean;
/** Link for button. It will render as `` but with button styling */
href?: string;
/** Type of button */
type?: typeType$4;
/** Value associated to the button */
value?: string;
/** Additional custom classNames */
className?: string;
/** Onclick action */
onClick?: React.MouseEventHandler;
}
declare const Button: ({ children, variant, active, disabled, block, size, value, href, className, ...rest }: ButtonProps) => JSX.Element;
/** Types */
declare type levelType$1 = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
interface TitleProps extends React.HTMLAttributes {
/** Content of heading */
children?: React.ReactNode;
/** Heading level */
level: levelType$1;
/** Additional custom classNames */
className?: string;
}
declare const Title: ({ children, level, ...rest }: TitleProps) => JSX.Element;
/** Types */
declare type colorType = 'muted' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
declare type backgroundType = 'primary' | 'success' | 'info' | 'warning' | 'danger' | undefined;
declare type sizeType$6 = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
interface TextProps extends React.HTMLAttributes {
/** Content of heading */
children?: React.ReactNode;
/** Text color */
color?: colorType;
/** Background color */
backgroundColor?: backgroundType;
/** Is text highlighted */
mark?: boolean;
/** Is text code styled */
code?: boolean;
/** Is text keyboard styled */
keyboard?: boolean;
/** Is text crossed out. Use to indicate text was deleted. */
deleted?: boolean;
/** Is text crossed out. Use to indicate text that is no longer relevant. */
strikethrough?: boolean;
/** Is text emphasized out */
strong?: boolean;
/** Is text italic out */
italic?: boolean;
/** Size styling of text */
size?: sizeType$6;
/** Set text as */
small?: boolean;
/** use lead styling */
lead?: boolean;
/** Additional custom classNames */
className?: string;
}
declare const Text: ({ children, strong, italic, deleted, strikethrough, mark, code, keyboard, color, backgroundColor, size, small, lead, className, ...rest }: TextProps) => JSX.Element;
declare type targetType = '_blank' | '_self' | '_parent' | '_top' | undefined;
/** Types */
interface LinkProps extends React.HTMLAttributes {
/** Content of heading */
children?: React.ReactNode;
/** The target of hyperlink */
href: string;
/** Specifies where to display the linked URL */
target?: targetType;
/** Specifies the relationship between the current document and the linked document. */
rel?: string;
/** Additional custom classNames */
className?: string;
}
declare const Link: ({ children, href, target, rel, className, ...rest }: LinkProps) => JSX.Element;
/** Types */
declare type variantType$7 = 'success' | 'warning' | 'danger' | 'info' | undefined;
interface AlertProps$1 extends React.HTMLAttributes {
/** The styling variant that you would like to use */
variant?: variantType$7;
/** Show alert */
isVisible?: boolean;
/** Content of Alert */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const Alert$1: {
({ variant, isVisible, className, children, ...rest }: AlertProps$1): JSX.Element | null;
displayName: string;
};
declare type levelType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
interface AlertHeaderProps extends React.HTMLAttributes {
/** Content of alert heading */
children?: React.ReactNode;
/** Header Level */
level?: levelType;
/** Additional custom classNames */
className?: string;
}
declare const AlertHeader: ({ level, className, children, }: AlertHeaderProps) => JSX.Element;
interface AlertBodyProps extends React.HTMLAttributes {
/** Content of alert body */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const AlertBody: ({ children, className, ...rest }: AlertBodyProps) => JSX.Element;
interface AlertLinkProps extends React.HTMLAttributes {
/** Content of alert Link */
children?: React.ReactNode;
/** The target of hyperlink */
href: string;
/** Additional custom classNames */
className?: string;
}
declare const AlertLink: ({ children, className, ...rest }: AlertLinkProps) => JSX.Element;
declare type AlertProps = typeof Alert$1 & {
Header: typeof AlertHeader;
Body: typeof AlertBody;
Link: typeof AlertLink;
};
declare const Alert: AlertProps;
/** Types */
declare type sizingType$2 = 'lg' | 'sm' | undefined;
interface ButtonGroupProps extends React.HTMLAttributes {
/** The custom 'non-default' size of button group */
size?: sizingType$2;
/** Orientation of button group */
isVertical?: boolean;
/** Buttons to group */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const ButtonGroup: ({ size, isVertical, children, ...rest }: ButtonGroupProps) => JSX.Element;
interface BadgeProps extends React.HTMLAttributes {
/** Hidden label describing the badge */
badgeLabel?: string;
/** Hidden label describing the badge */
visible?: boolean;
/** Contents of badge */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const Badge: ({ badgeLabel, visible, children, className, }: BadgeProps) => JSX.Element | null;
/** Types */
declare type variantType$6 = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | undefined;
interface LabelProps extends React.HTMLAttributes {
/** Hidden label describing the badge */
variant?: variantType$6;
/** Hidden label describing the badge */
visible?: boolean;
/** Contents of label */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const Label: ({ variant, visible, children, className, }: LabelProps) => JSX.Element | null;
/** Types */
declare type variantType$5 = 'success' | 'warning' | 'danger' | 'info' | undefined;
declare type headingLevelType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
interface PanelProps extends React.HTMLAttributes {
/** The styling variant that you would like to use */
variant?: variantType$5;
/** The content of panel header */
headerContent?: React.ReactNode;
/** The heading level of panel header */
headerLevel?: headingLevelType;
/** The content of panel footer */
footerContent?: React.ReactNode;
/** Show panel */
isVisible?: boolean;
/** Content of panel */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const Panel: {
({ variant, isVisible, className, headerContent, headerLevel, footerContent, children, ...rest }: PanelProps): JSX.Element | null;
displayName: string;
};
interface CodeBlockProps extends React.HTMLAttributes {
/** the language to highlight code in. (pass text to just render plain monospaced text) */
language?: string;
/** prop that will be combined with the top level style on the `pre` tag, styles here will overwrite earlier styles. */
customStyle?: string;
/** if this is enabled line numbers will be shown next to the code block. */
showLineNumbers?: boolean;
/** if `showLineNumbers` is enabled the line numbering will start from here. */
startingLineNumber?: number;
/** a boolean value that determines whether or not each line of code should be wrapped in a parent element. */
wrapLines?: boolean;
/** Contents of CodeBlock */
children?: string;
}
declare const CodeBlock: ({ language, customStyle, showLineNumbers, startingLineNumber, wrapLines, children, ...rest }: CodeBlockProps) => JSX.Element;
interface ProgressBarProps extends React.HTMLAttributes {
/** Show label that represents visual percentage. EG. 60% */
label?: React.ReactNode;
/** Hide's the label visually. */
isLabelHidden?: boolean;
/** Maximum value progress can reach */
max?: number;
/** Minimum value progress can begin from */
min?: number;
/** Current value of progress */
now?: number;
/** Additional custom classNames */
className?: string;
/** Indicates whether the element is a child member or not */
isChild?: boolean;
}
declare const ProgressBar: ({ label, isLabelHidden, max, min, now, className, isChild, ...rest }: ProgressBarProps) => JSX.Element;
interface ListGroupProps$1 {
/** Content of the list */
children?: React.ReactNode;
/** Generate numbered list items. */
numbered?: boolean;
/** Additional calss names */
className?: string;
}
declare const ListGroup$1: {
({ children, numbered, className, ...rest }: ListGroupProps$1): JSX.Element;
displayName: string;
};
/** Types */
declare type variantType$4 = 'warning' | 'danger' | 'info' | 'success' | undefined;
interface ListGroupItemProps {
/** Sets contextual classes for list item */
variant?: variantType$4;
/** Sets a link for the item */
href?: string;
/** Sets list item as active */
active?: boolean;
/** The content for the item in the list */
children: React.ReactNode;
/** Sets list item state as disabled */
disabled?: boolean;
/** Marks a ListGroupItem as actionable, applying
* additional hover, active and disabled styles for links and buttons. */
action?: boolean;
}
declare const ListGroupItem: ({ active, href, disabled, action, variant, children, ...rest }: ListGroupItemProps) => JSX.Element;
declare type ListGroupProps = typeof ListGroup$1 & {
Item: typeof ListGroupItem;
};
declare const ListGroup: ListGroupProps;
interface ImageProps extends React.HTMLAttributes {
/** Sets image shape as rounded. */
rounded?: boolean;
/** Sets image shape as circle. */
roundedCircle?: boolean;
/** Sets image shape as thumbnail. */
thumbnail?: boolean;
/** Use to make larger images scale properly, and never exceed the width of the parent container */
responsive?: boolean;
/** Use to stretch a smaller image to the width of the container. */
fullWidth?: boolean;
/** Use to add any kind of content like headings, paragraphs, or buttons into a thumbnail, to create a thumbnail tile effect */
thumbnailContent?: boolean;
/** Use to layer text and images for media content like blog comments, tweets, and so forth. */
mediaObject?: boolean;
/** Sets the source of the image */
src: string;
/** Sets the alternate text for the image */
alt: string;
}
declare const Image: ({ rounded, roundedCircle, thumbnail, responsive, fullWidth, thumbnailContent, mediaObject, src, alt, ...rest }: ImageProps) => JSX.Element;
declare type detailData = {
key: string;
title: ReactNode;
isOpen?: boolean;
children: ReactNode;
className?: string;
};
interface DetailsProps extends React.HTMLAttributes {
/** An array of data used to create the details */
data: detailData[];
/** Additional custom classNames */
className?: string;
}
declare const Details: {
({ className, data, ...rest }: DetailsProps): JSX.Element;
displayName: string;
};
interface FormProps$1 extends React.FormHTMLAttributes {
/** Content of Form */
children?: React.ReactNode | React.ReactNode[];
/** Additional custom classNames */
className?: string;
}
declare const Form$1: ({ children, className, ...rest }: FormProps$1) => JSX.Element;
interface FormGroupProps extends React.HTMLAttributes {
/** Content of group */
children?: React.ReactNode;
/** Unique Id of form group elements */
controlId?: string;
/** Additional custom classNames */
className?: string;
/** Applies 'require' styling to form group */
isRequired?: boolean;
/** Sets whether form input is valid */
isInvalid?: boolean;
}
declare const FormGroup: ({ children, controlId, isRequired, isInvalid, className, ...rest }: FormGroupProps) => JSX.Element;
interface FormLabelProps extends React.HTMLAttributes {
/** Content of form label */
children?: React.ReactNode;
/** Set a custom element for this component */
as?: React.ElementType;
/** Uses controlId from if not explicitly specified. */
htmlFor?: string;
/** Hides the label visually while still allowing it to be read by assistive technologies */
isVisuallyHidden?: boolean;
/** Applies 'require' styling to form label */
isRequired?: boolean;
/** Show the "required styling" for the field */
showRequiredStyling?: boolean;
/** Allows for the customization of "required" label. It is helpful for translations. Default: "required" */
requiredText?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const FormLabel: ({ children, as, htmlFor, isVisuallyHidden, isRequired, requiredText, showRequiredStyling, className, ...rest }: FormLabelProps) => JSX.Element;
interface FormTextProps extends React.HTMLAttributes {
/** Content of button */
children?: React.ReactNode;
/** A convenience prop for add the text-muted class, since it's so commonly used here. */
isMuted?: boolean;
/** Hides the label visually while still allowing it to be read by assistive technologies */
visuallyHidden?: boolean;
/** Additional custom classNames */
className?: string;
}
declare const FormText: ({ children, isMuted, className, ...rest }: FormTextProps) => JSX.Element;
/** Types */
declare type sizeType$5 = 'lg' | 'sm' | 'default' | undefined;
declare type asType = 'input' | 'textarea' | undefined;
declare type typeType$3 = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | undefined;
declare type FormControlElement = HTMLInputElement | HTMLTextAreaElement;
interface FormControlProps extends React.HTMLAttributes {
/** Placeholder content */
placeholder?: string;
/** Placeholder content */
defaultValue?: string | string[] | number;
/** The value attribute of underlying input */
value?: string | string[] | number;
/** The underlying HTML element to use when rendering the FormControl. */
as?: asType;
/** The HTML input type, which is only relevant if as is 'input' (the default). */
type?: typeType$3;
/** Make the control disabled. */
isDisabled?: boolean;
/** Make the control readonly. */
isReadOnly?: boolean;
/** Add "aria-invalid="true" to input */
isInvalid?: boolean;
/** Add "aria-required="true" to input */
isRequired?: boolean;
/** The size attribute of the underlying HTML element. Specifies the visible width in characters if as is 'input'. */
htmlSize?: number;
/** Input size variants: 'default', 'sm', 'lg' */
size?: sizeType$5;
/** A callback fired when the value prop changes */
onChange?: React.ChangeEventHandler;
/** Uses controlId from if not explicitly specified. */
id?: string;
/** Additional custom classNames */
className?: string;
/** Minimum value in a number or date type field */
min?: number | string;
/** Maximum value in a number or date type field */
max?: number | string;
/** Maximum length from a textarea type field */
maxLength?: number;
}
declare const FormControl: React.ForwardRefExoticComponent>;
/** Types */
declare type sizeType$4 = 'lg' | 'sm' | 'default' | undefined;
interface FormSelectProps extends Omit, 'size'> {
/** Content of button */
children?: React.ReactNode;
/** Placeholder content */
placeholder?: string;
/** Make the control disabled. */
isDisabled?: boolean;
/** Add "aria-invalid="true" to input */
isInvalid?: boolean;
/** Add "aria-required="true" to input */
isRequired?: boolean;
/** The size attribute of the underlying HTML element. Specifies the number of visible options. */
htmlSize?: number;
/** Input size variants: 'default', 'sm', 'lg' */
size?: sizeType$4;
/** A callback fired when the value prop changes */
onChange?: React.ChangeEventHandler;
/** Uses controlId from if not explicitly specified. */
id?: string;
/** Additional custom classNames */
className?: string;
}
declare const FormSelect: React.ForwardRefExoticComponent>;
/** Types */
declare type typeType$2 = 'checkbox' | 'radio' | undefined;
interface FormCheckProps extends React.InputHTMLAttributes {
/** label attribute */
label?: React.ReactNode;
/** The HTML input type, which is only relevant if as is 'input' (the default). */
type?: typeType$2;
/** Make the control disabled. */
isDisabled?: boolean;
/** Groups controls horizontally with other . */
isInline?: boolean;
/** Add "aria-invalid="true" to input */
isInvalid?: boolean;
/** Is field required */
isRequired?: boolean;
/** Show the "required styling" for the field */
showRequiredStyling?: boolean;
/** Allows for the customization of "required" label. It is helpful for translations. Default: "required" */
requiredText?: string;
/** Uses controlId from if not explicitly specified. */
id?: string;
/** Name of form field. */
name?: string;
/** Additional custom classNames */
className?: string;
}
declare const FormCheck: React.ForwardRefExoticComponent>;
interface FormCheckGroupProps extends React.HTMLAttributes {
/** Content of form label */
children?: React.ReactNode;
/** label attribute */
label?: React.ReactNode;
/** Allows for the customization of "required" label. It is helpful for translations. Default: "required" */
requiredText?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const FormCheckGroup: ({ children, label, requiredText, className, ...rest }: FormCheckGroupProps) => JSX.Element;
declare type FormProps = typeof Form$1 & {
Group: typeof FormGroup;
Label: typeof FormLabel;
Control: typeof FormControl;
Select: typeof FormSelect;
Text: typeof FormText;
Check: typeof FormCheck;
CheckGroup: typeof FormCheckGroup;
};
declare const Form: FormProps;
interface MeterProps extends React.HTMLAttributes {
/** The value of the meter */
value: number;
/** The upper limit of the meter */
max: number;
/** The lower limit of the meter */
min: number;
/** The point at which a value can be considered low */
low?: number;
/** The point at which a value can be considered high */
high?: number;
}
declare const Meter: ({ max, min, value, low, high, ...rest }: MeterProps) => JSX.Element;
interface JumbotronProps extends React.HTMLAttributes {
/** The content of the jumbotron */
children?: React.ReactNode;
/** Determines if the jumbotron takes up the full width on the container with no rounded corners */
fluid?: boolean;
}
declare const Jumbotron: ({ children, fluid, ...rest }: JumbotronProps) => JSX.Element;
interface TableProps$1 extends React.HTMLAttributes {
/** Adds borders on all sides of the table and cells. */
bordered?: boolean;
/** The content of the table */
children?: React.ReactNode;
/** Enable a hover state on table rows within a . */
hover?: boolean;
/** Responsive tables allow tables to be scrolled horizontally with ease.
* Across every breakpoint, use responsive for horizontally scrolling tables.
* Responsive tables are wrapped automatically in a div. Use responsive="sm",
* responsive="md", responsive="lg", or responsive="xl" as needed to create
* responsive tables up to a particular breakpoint. From that breakpoint and
* up, the table will behave normally and not scroll horizontally. */
responsive?: string | boolean;
/** Adds zebra-striping to any table row within the . Makes it easier to read large tables */
striped?: boolean;
/** Narrows the height of rows */
condensed?: boolean;
/** Set additional classnames for the table */
className?: string;
}
declare const Table$1: {
({ bordered, condensed, children, responsive, striped, hover, className, ...rest }: TableProps$1): JSX.Element;
displayName: string;
};
/** Types */
declare type variantType$3 = 'default' | 'success' | 'warning' | 'danger' | 'active' | undefined;
interface TableCellProps extends React.HTMLAttributes {
/** The content of the table */
children?: React.ReactNode;
/** Invert the colors of the table — with light text on dark backgrounds by setting variant as dark. */
variant?: variantType$3;
/** Set additional classnames for the table */
className?: string;
}
declare const TableCell: ({ children, variant, className, ...rest }: TableCellProps) => JSX.Element;
/** Types */
declare type variantType$2 = 'default' | 'success' | 'warning' | 'danger' | 'active' | undefined;
interface TableHeaderProps extends React.HTMLAttributes {
/** The content of the table. Each child should be a column title in a tag */
children?: React.ReactNode;
/** Invert the colors of the table — with light text on dark backgrounds by setting variant as dark. */
variant?: variantType$2;
/** Set additional classnames for the table */
className?: string;
}
declare const TableHeader: ({ children, variant, className, ...rest }: TableHeaderProps) => JSX.Element;
/** Types */
declare type variantType$1 = 'default' | 'success' | 'warning' | 'danger' | 'active' | undefined;
interface TableRowProps extends React.HTMLAttributes {
/** The content of the table */
children?: React.ReactNode;
/** Invert the colors of the table — with light text on dark backgrounds by setting variant as dark. */
variant?: variantType$1;
/** Set additional classnames for the table */
className?: string;
}
declare const TableRow: ({ children, variant, className, ...rest }: TableRowProps) => JSX.Element;
interface TableBodyProps extends React.HTMLAttributes {
/** The content of the table. Each child should be a column title in a tag */
children?: React.ReactNode;
/** Set additional classnames for the table */
className?: string;
}
declare const TableBody: ({ children, className, ...rest }: TableBodyProps) => JSX.Element;
declare type TableProps = typeof Table$1 & {
Header: typeof TableHeader;
Row: typeof TableRow;
Cell: typeof TableCell;
Body: typeof TableBody;
};
declare const Table: TableProps;
declare type sizeType$3 = 'sm' | 'lg' | 'xl';
declare type fullscreenType = true | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down' | 'xxl-down';
interface ModalProps$1 {
/** Open and close the modal with a slide and fade animation */
animation?: boolean;
/** When true The modal will automatically shift focus to itself when it opens, and replace it to the last focused element when it closes. Generally this should never be set to false as it makes the Modal less accessible to assistive technologies, like screen-readers. */
autoFocus?: boolean;
/** vertically center the Dialog in the window */
centered?: boolean;
/** When true The modal will show itself. */
show?: boolean;
/** Render a large, extra large or small modal. When not provided, the modal is rendered with medium (default) size. */
size?: sizeType$3;
/** Renders a fullscreen modal. Specifying a breakpoint will render the modal as fullscreen below the breakpoint size. */
fullscreen?: fullscreenType;
/** When true The modal will restore focus to previously focused element once modal is hidden */
restoreFocus?: boolean;
/** Allows scrolling the body instead of the entire Modal when overflowing. */
scrollable?: boolean;
/** Close the modal when escape key is pressed */
keyboard?: boolean;
/** The content of the modal */
children?: React.ReactNode;
/** A callback fired when the header closeButton or non-static backdrop is clicked. Required if either are specified. */
onHide?: () => void;
}
declare const Modal$1: {
({ children, show, animation, autoFocus, size, fullscreen, restoreFocus, keyboard, scrollable, centered, onHide, ...rest }: ModalProps$1): JSX.Element;
displayName: string;
};
interface ModalBodyProps extends React.HTMLAttributes {
/** Content of the Body */
children?: React.ReactNode;
}
declare const ModalBody: ({ children, ...rest }: ModalBodyProps) => JSX.Element;
interface ModalHeaderProps extends React.HTMLAttributes {
/** Specify whether the Component should contain a close button */
closeButton?: boolean;
/** Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css. */
bsPrefix?: string;
/** The content of the header */
children?: React.ReactNode;
}
declare const ModalHeader: ({ children, closeButton, ...rest }: ModalHeaderProps) => JSX.Element;
interface ModalTitleProps extends React.HTMLAttributes {
/** Content of the title */
children?: React.ReactNode;
}
declare const ModalTitle: ({ children, ...rest }: ModalTitleProps) => JSX.Element;
declare type sizeType$2 = 'sm' | 'lg' | 'xl';
declare type fullScreenType = true | 'sm-down' | 'md-down' | 'lg-down' | 'xl-down' | 'xxl-down';
interface ModalDialogProps extends React.HTMLAttributes {
/** vertically center the Dialog in the window */
centered?: boolean;
/** Render a large, extra large or small modal. When not provided, the modal is rendered with medium (default) size. */
size?: sizeType$2;
/** Renders a fullscreen modal. Specifying a breakpoint will render the modal as fullscreen below the breakpoint size. */
fullScreen?: fullScreenType;
/** Allows scrolling the Modal.body instead of the entire Modal when overflowing. */
scrollable?: boolean;
/** The content of the modal */
children?: React.ReactNode;
}
declare const ModalDialog: ({ children, size, fullScreen, scrollable, centered, ...rest }: ModalDialogProps) => JSX.Element;
interface ModalFooterProps extends React.HTMLAttributes {
/** Content of the Footer */
children?: React.ReactNode;
}
declare const ModalFooter: ({ children, ...rest }: ModalFooterProps) => JSX.Element;
declare type ModalProps = typeof Modal$1 & {
Title: typeof ModalTitle;
Header: typeof ModalHeader;
Body: typeof ModalBody;
Footer: typeof ModalFooter;
Dialog: typeof ModalDialog;
};
declare const Modal: ModalProps;
/** Types */
declare type sizeType$1 = 'sm' | 'lg' | undefined;
interface InputGroupProps$1 extends React.HTMLAttributes {
/** Content of input group */
children?: React.ReactNode;
/** Control the size of buttons and form elements from the top-level. */
size?: sizeType$1;
/** Additional custom classNames */
className?: string;
}
declare const InputGroup$1: {
({ children, size, className, ...rest }: InputGroupProps$1): JSX.Element;
displayName: string;
};
interface InputGroupTextProps extends React.HTMLAttributes {
/** Content of text label */
children?: React.ReactNode;
/** Sets the id of the label */
id?: string;
/** Additional custom classNames */
className?: string;
}
declare const InputGroupText: ({ children, id, className, ...rest }: InputGroupTextProps) => JSX.Element;
declare type InputGroupProps = typeof InputGroup$1 & {
Text: typeof InputGroupText;
};
declare const InputGroup: InputGroupProps;
declare type videoType = 'mp4' | 'webm' | 'youtube';
declare type audioType = 'mp3' | 'ogg';
declare type captionType = 'text/html' | 'application/ttml+xml';
declare type sourceType = {
type: videoType | audioType | null;
source: string;
};
declare type cuePointType = {
name: string;
time: string;
};
interface MultimediaPlayerProps extends React.HTMLAttributes {
/** optional button to share multimedia, either a url to share the video or a full custom shareWidget element */
share?: string | React.ReactNode;
/** language selector, mostly for shareWidget */
french?: boolean;
/** title of video/audio. Can contain link or summary of transcript, if available */
figCaption?: React.ReactNode;
/** URL for video poster */
poster?: string;
/** title of video */
title?: string;
/** array of source links, each containing source (url) and type (MIME) ('mp4', 'webm', 'youtube', 'mp3', 'ogg') */
sources?: sourceType[];
/** captions language shortform (en, fr, sp...) */
trackSrcLang?: string;
/** captions language longform for displaying to user */
trackLabel?: string;
/** track source URL */
trackSrc?: string;
/** track data type, MIME ('text/html' or 'application/ttml+xml') */
trackDataType?: captionType;
/** array of cue points, each containing name (text) and time ('78s', '1:18') */
cuePoints?: cuePointType[];
/** Content of heading */
children?: React.ReactNode;
}
declare const MultimediaPlayer: {
({ share, french, figCaption, poster, title, sources, trackSrcLang, trackLabel, trackSrc, trackDataType, cuePoints, children, }: MultimediaPlayerProps): JSX.Element;
displayName: string;
};
interface TabsProps extends React.HTMLAttributes {
/** id of tab to be initially open. Default is first tab */
mainPanel?: string;
/** unique identification value */
id?: string;
/** array of panels to be displayed, of the form { [ {title:"...", id:"...", content:<>...>}, ... ] } */
panels?: {
title: string;
id: string;
content: React.ReactNode;
}[];
}
declare const Tabs: ({ mainPanel, id, panels }: TabsProps) => JSX.Element;
/** Types */
declare type sizingType$1 = 'lg' | 'sm' | undefined;
interface PaginationProps$1 {
/** Page options */
children?: React.ReactNode;
/** The custom 'non-default' size of pagination button group */
size?: sizingType$1;
}
declare const Pagination$1: {
({ children, size }: PaginationProps$1): JSX.Element;
displayName: string;
};
interface PaginationButtonProps extends React.HTMLAttributes {
/** Is button in active state */
active?: boolean;
/** Is button in disabled state */
disabled?: boolean;
/** Value associated to the button */
value?: string;
/** Onclick action */
onClick?: React.MouseEventHandler;
}
declare const PaginationButton: ({ children, active, disabled, value, }: PaginationButtonProps) => JSX.Element;
declare type PaginationProps = typeof Pagination$1 & {
Button: typeof PaginationButton;
};
declare const Pagination: PaginationProps;
interface ShareButtonProps {
name: string;
icon: IconDefinition;
url: string;
}
interface ShareWidgetProps extends React.HTMLAttributes {
/** The label for the link that opens the ShareWidget modal. */
shareLinkText: string;
/** Title displayed in the ShareWidget modal. */
modalTitle: string;
/** List of the default share buttons you wish display. List can include: Email, Facebook, Blogger, LinkedIn, Pinterest, reddit, tumblr, WhatsApp, Yahoo Mail, Twitter. Filter names are case sensitive. */
filter?: string[];
/** List of objects containing the following props: 'name' of type string, 'icon' of type IconDefinition, and 'url' of type string. The 'url' prop should be a functional sharable link rahter than a link to content you wish to share. */
customShareButtonsProps?: ShareButtonProps[];
/** Link to the content you wish to share. Required if the 'filter' prop is defined. */
url?: string;
/** Translate the component's text to French. */
french?: boolean;
}
declare const ShareWidget: ({ filter, customShareButtonsProps, french, url, shareLinkText, modalTitle, ...rest }: ShareWidgetProps) => JSX.Element;
interface CarouselProps$1 {
/** Content of Carousel component. */
children?: React.ReactNode;
/** Translate the component's text to French. */
french?: boolean;
/** The amount of time to delay between automatically cycling an item. If not specified, the carousel will not automatically cycle. */
interval?: number | null;
}
declare const Carousel$1: ({ children, interval, french, ...rest }: CarouselProps$1) => JSX.Element;
interface CarouselItemProps extends React.FormHTMLAttributes {
/** Content of Carousel Item component. */
children?: React.ReactNode;
/** The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's interval prop value if none is specified. */
interval?: number;
}
declare const CarouselItem: React.ForwardRefExoticComponent>;
interface CarouselCaptionProps extends React.FormHTMLAttributes {
/** Content of Carousel Caption component. */
children?: React.ReactNode;
/** Additional custom classNames */
className?: string;
}
declare const CarouselCaption: ({ children, className, ...rest }: CarouselCaptionProps) => JSX.Element;
declare type CarouselProps = typeof Carousel$1 & {
Item: typeof CarouselItem;
Caption: typeof CarouselCaption;
};
declare const Carousel: CarouselProps;
/** Types */
declare type typeType$1 = 'checkbox' | 'radio';
declare type variantType = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
interface ToggleProps extends React.HTMLAttributes {
/** The type of toggle */
type?: typeType$1;
/** Content of the toggle */
children?: React.ReactNode;
/** Is the toggle checked */
checked?: boolean;
/** Is the toggle disabled */
disabled?: boolean;
/** Required for clicks to toggle the input */
id?: string;
/** Name of HTML input used to group like checkbox or radio toggles together */
name?: string;
/** The styling variant of the toggle */
variant?: variantType;
/** Value associated with the toggle. It should be unique amongst siblings nested in a ToggleGroup */
value: string | number | readonly string[];
/** Callback fired when the value prop changes */
onChange?: React.ChangeEventHandler;
}
declare const Toggle: ({ children, variant, checked, disabled, id, name, onChange, type, value, ...rest }: ToggleProps) => JSX.Element;
/** Types */
declare type typeType = 'checkbox' | 'radio';
declare type sizingType = 'lg' | 'sm';
declare type onChangeRadio = (value: string | number, event: unknown) => void;
declare type onChangeCheckbox = (value: string[] | number[]) => void;
declare type BaseToggleGroupProps = Omit, 'toggle' | 'defaultValue' | 'onChange'>;
interface ToggleGroupProps extends BaseToggleGroupProps {
/** The input type of the rendered toggles. Determines the toggle behavior */
type?: typeType;
/** Content of the toggle group */
children?: React.ReactNode;
/** The HTML input name for each child toggle. Required if type is set to radio */
name?: string;
/** The custom 'non-default' toggle size that you would like */
size?: sizingType;
/** Orientation of the toggle group */
vertical?: boolean;
/** The value, or array of values, of the active (pressed) toggles. Controlled by onChange, and the initial prop is defaultValue */
value?: string | number | string[] | number[];
/** Initial prop of value */
defaultValue?: string | number | string[] | number[];
/** Callback fired when a toggle is pressed. Called with the active value if type is 'radio', or an array of active values if type is 'checkbox' */
onChange?: onChangeCheckbox | onChangeRadio;
}
declare const ToggleGroup: ({ children, name, size, value, defaultValue, onChange, type, vertical, ...rest }: ToggleGroupProps) => JSX.Element;
interface SliderProps extends React.HTMLAttributes {
/** The value of the Slider */
value?: string;
/** The upper limit of the Slider */
max?: number;
/** The lower limit of the Slider */
min?: number;
/** The precision of the Slider */
step?: number;
/** The tile of the Slider, for displaying to user */
title?: string;
/** The name of the Slider */
name?: string;
/** The id of the Slider */
id?: string;
}
declare const Slider: ({ max, min, value, step, title, name, id, }: SliderProps) => JSX.Element;
interface KeyboardKeyProps extends React.HTMLAttributes {
/** the key being displayed */
keyValue?: string;
/** optional hidden description of key, for screen readers */
description?: string;
}
declare const KeyboardKey: ({ keyValue, description }: KeyboardKeyProps) => JSX.Element | null;
declare type tagTypeType = 'code' | 'pre' | undefined;
interface PrettyPrintProps extends React.ButtonHTMLAttributes {
/** Content of PrettyPrint */
children?: React.ReactNode;
/** loads the PrettyPrint component, ignores other arguments. Do once per page */
initialize?: boolean;
/** applies to all pre and code elements */
wholePage?: boolean;
/** applies syntax highlighting */
highlight?: boolean;
/** if not wholePage, choose tag type of `pre` or `code` */
tagType?: tagTypeType;
/** adds line numbers for all lines or all lines after given number */
lineNums?: boolean | number;
/** adds language support for given language */
language?: string;
}
declare const PrettyPrint: ({ children, initialize, wholePage, highlight, tagType, lineNums, language, }: PrettyPrintProps) => JSX.Element;
declare type headingType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined;
interface HeadingProps extends React.HTMLAttributes {
/** size of heading, default is h1 */
level?: headingType;
/** Contents of Heading */
children?: React.ReactNode;
/** heading text */
text?: string;
/** Use to create lighter, secondary text in any heading */
secondaryText?: string;
/** Use to add an underline to a heading */
underline?: boolean;
}
declare const Heading: ({ level, secondaryText, underline, text, }: HeadingProps) => JSX.Element;
interface ArchivedProps extends React.HTMLAttributes {
/** optional additional content, such as an alternative link */
children?: React.ReactNode;
/** language selection */
french?: boolean;
}
declare const Archived: ({ children, french }: ArchivedProps) => JSX.Element;
interface FootnoteLinkProps extends React.HTMLAttributes {
/** What footnoteSection it links to */
value?: string;
/** If multiple links go to the same footer, use this to differentiate */
subValue?: number;
/** Optional: Name of footnoteLink, for display to user */
indicator?: string;
}
declare const FootnoteLink: ({ value, subValue, indicator, }: FootnoteLinkProps) => JSX.Element;
interface FootnoteSectionProps$1 extends React.HTMLAttributes {
/** Footnotes in this section */
children?: React.ReactNode;
}
declare const FootnoteSection$1: ({ children }: FootnoteSectionProps$1) => JSX.Element;
interface FootnoteProps extends React.HTMLAttributes {
/** What footnote it links to */
value?: string;
/** The content of the Footer */
children?: React.ReactNode;
}
declare const Footnote: ({ value, children }: FootnoteProps) => JSX.Element;
declare type FootnoteSectionProps = typeof FootnoteSection$1 & {
Footnote: typeof Footnote;
};
declare const FootnoteSection: FootnoteSectionProps;
interface QuotationProps extends React.HTMLAttributes {
/** Contents of Quotation */
children?: React.ReactNode;
/** reversequote makes the quote right-aligned */
reverseQuote?: boolean;
/** reversesource makes the footer and cite right-aligned */
reverseSource?: boolean;
/** footer is the author's name */
footer?: string;
/** cite is the source title */
cite?: string;
}
declare const Quotation: {
({ reverseQuote, reverseSource, footer, cite, children, }: QuotationProps): JSX.Element;
displayName: string;
};
declare type ListType = 'ul' | 'ol' | 'dl' | 'alpha' | 'roman' | undefined;
declare type ColumnSizeType = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
interface ListProps {
/** the contents of the list */
children?: React.ReactNode;
/** the type of list desired */
type?: ListType;
/** removes bullets or numbers from the list */
unstyled?: boolean;
/** removes bullets or numbers from a nested list (maintains indenting) */
none?: boolean;
/** increases the white space between items */
spaced?: boolean;
/** selects the case for roman or alpha lists (XI. A. vs xi. a.) */
upper?: boolean;
/** horizontally aligns list items */
inline?: boolean;
/** for dl lists, puts definitions inline with their definition term */
horizontal?: boolean;
/** for dl horizontal lists, controls borders */
border?: boolean;
/** width of columns for list spread over multiple columns */
columnSize?: ColumnSizeType;
/** number of columns for list spread over multiple columns */
colCount?: number;
/** **recommended** when screen is too small for selected colCount, make list default to maximum colcount instead of 1 */
colCountDefaultMax?: boolean;
}
declare const List: {
({ children, type, unstyled, none, spaced, upper, inline, horizontal, border, columnSize, colCount, colCountDefaultMax, }: ListProps): JSX.Element;
displayName: string;
};
/** Types */
interface DatePickerProps extends React.HTMLAttributes {
/** Name of value. */
name?: string;
/** Id to link with a label. */
id?: string;
/** Minimum date available for selection. String format: yyyy-mm-dd */
min?: string;
/** Maximum date available for selection. String format: yyyy-mm-dd */
max?: string;
}
declare const DatePicker: ({ id, name, min, max, ...rest }: DatePickerProps) => JSX.Element;
interface LightboxProps$1 extends React.HTMLAttributes {
/** title of lightbox */
title?: string;
/** link(s) to the lightbox(es) image(s) */
src?: string;
/** use to hide lightbox, recommended for galleries where you want to only show the first image */
hidden?: boolean;
/** use to convert all lightbox text to french */
french?: boolean;
/** content of Lightbox */
children?: React.ReactNode;
}
declare const Lightbox$1: ({ title, src, hidden, french, children, }: LightboxProps$1) => JSX.Element;
interface LightboxGalleryProps extends React.HTMLAttributes {
/** contents of LightboxGallery */
children?: React.ReactNode;
/** HTML tag the gallery will be based on */
tag?: string;
/** unique custom id for gallery */
id: string;
/** use to convert all gallery text to french */
french?: boolean;
}
declare const LightboxGallery: ({ children, tag, id, french, ...rest }: LightboxGalleryProps) => JSX.Element;
declare type LightboxProps = typeof Lightbox$1 & {
Gallery: typeof LightboxGallery;
};
declare const Lightbox: LightboxProps;
interface DetailSummaryProps {
/** the title of the expandable menu */
title?: string;
/** the contents of the DetailSummary */
children?: React.ReactNode;
}
declare const DetailSummary: ({ title, children }: DetailSummaryProps) => JSX.Element;
interface SecondaryMenuProps$1 {
/** the title of the SecondaryMenu */
title?: string;
/** the contents of the SecondaryMenu */
children?: React.ReactNode;
}
declare const SecondaryMenu$1: ({ title, children }: SecondaryMenuProps$1) => JSX.Element;
interface SecondaryMenuItemProps {
/** the title of the SecondaryMenuItem */
title?: string;
/** the HREF link of the SecondaryMenuItem */
link?: string;
}
declare const SecondaryMenuItem: ({ title, link, }: SecondaryMenuItemProps) => JSX.Element;
declare type SecondaryMenuProps = typeof SecondaryMenu$1 & {
Item: typeof SecondaryMenuItem;
};
declare const SecondaryMenu: SecondaryMenuProps;
interface GridProps$1 extends React.HTMLAttributes {
/** makes container full width of screen, instead of fixed value */
fluid?: boolean;
/** The contents of the Grid */
children?: React.ReactNode;
}
declare const Grid$1: ({ fluid, children }: GridProps$1) => JSX.Element;
declare type sizeType = 'xs' | 'sm' | 'md' | 'lg' | undefined;
interface GridCellProps extends React.HTMLAttributes {
/** The content of the Grid cell */
children?: React.ReactNode;
/** replace cell with clearfix command to fix spacing of certain size cells */
clearfix?: sizeType;
/** cell width for xs viewers */
xsWidth?: number;
/** cell width for sm viewers */
smWidth?: number;
/** cell width for md viewers */
mdWidth?: number;
/** cell width for lg viewers */
lgWidth?: number;
/** cell offset for xs viewers */
xsOffset?: number;
/** cell offset for sm viewers */
smOffset?: number;
/** cell offset for md viewers */
mdOffset?: number;
/** cell offset for lg viewers */
lgOffset?: number;
/** cell push for xs viewers */
xsPush?: number;
/** cell push for sm viewers */
smPush?: number;
/** cell push for md viewers */
mdPush?: number;
/** cell push for lg viewers */
lgPush?: number;
/** cell pull for xs viewers */
xsPull?: number;
/** cell pull for sm viewers */
smPull?: number;
/** cell pull for md viewers */
mdPull?: number;
/** cell pull for lg viewers */
lgPull?: number;
}
declare const GridCell: ({ children, clearfix, xsWidth, smWidth, mdWidth, lgWidth, xsOffset, smOffset, mdOffset, lgOffset, xsPush, smPush, mdPush, lgPush, xsPull, smPull, mdPull, lgPull, }: GridCellProps) => JSX.Element;
interface GridRowProps extends React.HTMLAttributes {
/** The content of the row */
children?: React.ReactNode;
}
declare const GridRow: ({ children }: GridRowProps) => JSX.Element;
declare type GridProps = typeof Grid$1 & {
Row: typeof GridRow;
Cell: typeof GridCell;
};
declare const Grid: GridProps;
interface SessionTimeoutProps extends React.HTMLAttributes {
/** Sets the inactivity timeout. Once this expires, the plugin's modal dialog will appear and prompt the user to continue or end their session */
inactivityTime?: number;
/** Sets the period of time before the plugin's modal dialog will appear and prompt the user to continue or end their session, regardless of activity */
sessionTime?: number;
/** Sets the period of time the user has to perform an action once the modal dialog is displayed */
reactionTime?: number;
/** URL that users are sent to when their session has expired */
logoutURL?: string;
/** Makes the session timeout modal popup french */
french?: boolean;
/** Disables timers, allowing for custom logic to control popup */
disableLogic?: boolean;
}
declare const SessionTimeout: ({ inactivityTime, sessionTime, reactionTime, logoutURL, french, disableLogic, }: SessionTimeoutProps) => JSX.Element;
export { Alert, Archived, Badge, Button, ButtonGroup, Carousel, CodeBlock, DatePicker, DetailSummary, Details, FootnoteLink, FootnoteSection, Form, Grid, Heading, Image, InputGroup, Jumbotron, KeyboardKey, Label, Lightbox, Link, List, ListGroup, Meter, Modal, MultimediaPlayer, Pagination, Panel, PrettyPrint, ProgressBar, Quotation, SecondaryMenu, SessionTimeout, ShareWidget, Slider, Table, Tabs, Text, Title, Toggle, ToggleGroup };
| |