import { ActionType } from 'react-table'; import { AvatarProps } from '@mui/material/Avatar'; import { Breakpoint } from '@mui/material/styles'; import { CardContentProps } from '@mui/material/CardContent'; import { CardHeaderProps } from '@mui/material/CardHeader'; import { CardMediaProps } from '@mui/material/CardMedia'; import { Cell } from 'react-table'; import { CheckboxProps } from '@mui/material/Checkbox'; import { ClickAwayListenerProps } from '@mui/material/ClickAwayListener'; import { ColumnInstance } from 'react-table'; import { ColumnInterface } from 'react-table'; import { ComponentProps } from 'react'; import { ContainerProps } from '@mui/material/Container'; import { Context } from 'react'; import { createClasses } from '@hitachivantara/uikit-react-utils'; import { default as default_2 } from 'embla-carousel-react'; import { defaultCacheKey } from '@hitachivantara/uikit-react-shared'; import { defaultEmotionCache } from '@hitachivantara/uikit-react-shared'; import { DialogActionsProps } from '@mui/material/DialogActions'; import { DialogContentProps } from '@mui/material/DialogContent'; import { DialogProps } from '@mui/material/Dialog'; import { DialogTitleProps } from '@mui/material/DialogTitle'; import { DividerProps } from '@mui/material/Divider'; import { DrawerProps } from '@mui/material/Drawer'; import { EmotionCache } from '@emotion/cache'; import { EmotionContext } from '@hitachivantara/uikit-react-shared'; import { ExtractNames } from '@hitachivantara/uikit-react-utils'; import { ForwardRefExoticComponent } from 'react'; import { GridLegacyProps } from '@mui/material/GridLegacy'; import { Hooks } from 'react-table'; import { HvBaseTheme } from '@hitachivantara/uikit-styles'; import { HvBreakpoints } from '@hitachivantara/uikit-styles'; import { HvColor } from '@hitachivantara/uikit-styles'; import { HvColorAny } from '@hitachivantara/uikit-styles'; import { HvRadius } from '@hitachivantara/uikit-styles'; import { HvSize } from '@hitachivantara/uikit-styles'; import { PluginHook as HvTablePluginHook } from 'react-table'; import { HvTheme } from '@hitachivantara/uikit-react-shared'; import { HvThemeBreakpoint } from '@hitachivantara/uikit-styles'; import { HvThemeColorMode } from '@hitachivantara/uikit-styles'; import { HvThemeContext } from '@hitachivantara/uikit-react-shared'; import { HvThemeContextValue } from '@hitachivantara/uikit-react-shared'; import { HvThemeStructure } from '@hitachivantara/uikit-styles'; import { IdType as IdType_2 } from 'react-table'; import { InputBaseProps } from '@mui/material/InputBase'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { MutableRefObject } from 'react'; import { OptionGroupProps } from '@mui/base'; import { OptionOwnProps } from '@mui/base'; import { OptionsGeneric } from '@popperjs/core'; import { OptionsObject } from 'notistack'; import { PopperProps } from '@mui/material/Popper'; import { PropGetter } from 'react-table'; import { PropsWithoutRef } from 'react'; import { RadioProps } from '@mui/material/Radio'; import * as React_2 from 'react'; import { ReactNode } from 'react'; import { ReducerTableState } from 'react-table'; import { RefAttributes } from 'react'; import { Renderer } from 'react-table'; import { Row } from 'react-table'; import { SelectOption } from '@mui/base'; import { SelectValue } from '@mui/base'; import { SlideProps } from '@mui/material/Slide'; import { SliderProps } from 'rc-slider'; import { SliderRef } from 'rc-slider'; import { SnackbarCloseReason } from '@mui/material/Snackbar'; import { SnackbarContentProps } from '@mui/material/SnackbarContent'; import { SnackbarKey } from 'notistack'; import { SnackbarOrigin } from '@mui/material/Snackbar'; import { SnackbarProps } from '@mui/material/Snackbar'; import { SnackbarProviderProps } from 'notistack'; import { State } from '@popperjs/core'; import { SwitchProps } from '@mui/material/Switch'; import { TableCellProps } from 'react-table'; import { TableCommonProps } from 'react-table'; import { TableExpandedToggleProps } from 'react-table'; import { TableFooterProps } from 'react-table'; import { TableHeaderProps } from 'react-table'; import { TableInstance } from 'react-table'; import { TableOptions } from 'react-table'; import { TableProps } from 'react-table'; import { TableRowProps } from 'react-table'; import { TableState } from 'react-table'; import { TabProps } from '@mui/material/Tab'; import { TabsProps } from '@mui/material/Tabs'; import { theme } from '@hitachivantara/uikit-styles'; import { TooltipProps } from '@mui/material/Tooltip'; import { TransitionProps } from '@mui/material/transitions'; import { UseColumnOrderInstanceProps } from 'react-table'; import { UseColumnOrderState } from 'react-table'; import { useCss } from '@hitachivantara/uikit-react-utils'; import { useDefaultProps } from '@hitachivantara/uikit-react-utils'; import { useEffect } from 'react'; import { UseExpandedHooks } from 'react-table'; import { UseExpandedInstanceProps } from 'react-table'; import { UseExpandedOptions } from 'react-table'; import { UseExpandedRowProps } from 'react-table'; import { UseExpandedState } from 'react-table'; import { UseFiltersColumnOptions } from 'react-table'; import { UseFiltersColumnProps } from 'react-table'; import { UseFiltersInstanceProps } from 'react-table'; import { UseFiltersOptions } from 'react-table'; import { UseFiltersState } from 'react-table'; import { UseGlobalFiltersColumnOptions } from 'react-table'; import { UseGlobalFiltersInstanceProps } from 'react-table'; import { UseGlobalFiltersOptions } from 'react-table'; import { UseGlobalFiltersState } from 'react-table'; import { UseGroupByCellProps } from 'react-table'; import { UseGroupByColumnOptions } from 'react-table'; import { UseGroupByColumnProps } from 'react-table'; import { UseGroupByHooks } from 'react-table'; import { UseGroupByInstanceProps } from 'react-table'; import { UseGroupByOptions } from 'react-table'; import { UseGroupByRowProps } from 'react-table'; import { UseGroupByState } from 'react-table'; import { UsePaginationInstanceProps } from 'react-table'; import { UsePaginationOptions } from 'react-table'; import { UsePaginationState } from 'react-table'; import { UseResizeColumnsColumnOptions } from 'react-table'; import { UseResizeColumnsColumnProps } from 'react-table'; import { UseResizeColumnsOptions } from 'react-table'; import { UseResizeColumnsState } from 'react-table'; import { useRowState } from 'react-table'; import { UseRowStateInstanceProps } from 'react-table'; import { UseRowStateOptions } from 'react-table'; import { UseRowStateRowProps } from 'react-table'; import { UseRowStateState } from 'react-table'; import { UseSelectParameters } from '@mui/base'; import { UseSortByColumnOptions } from 'react-table'; import { UseSortByColumnProps } from 'react-table'; import { UseSortByHooks } from 'react-table'; import { UseSortByInstanceProps } from 'react-table'; import { UseSortByOptions } from 'react-table'; import { UseSortByState } from 'react-table'; import { UseTableHeaderGroupProps } from 'react-table'; import { useTheme } from '@hitachivantara/uikit-react-utils'; declare type Accessor = (originalRow: D, index: number, sub: { subRows: D[]; depth: number; data: D[]; }) => CellValue; export declare const accordionClasses: { root: string; hidden: string; container: string; label: string; disabled: string; }; export declare const actionBarClasses: { root: string; }; export declare const actionClasses: { action: string; noIcon: string; minimized: string; }; /** @private label structure action icon buttons */ declare interface ActionIconLabels extends DialogLabels { tooltip?: string; } export declare const actionsClasses: { root: string; hide: string; }; export declare const actionsGenericClasses: { root: string; button: string; actionContainer: string; dropDownMenu: string; dropDownMenuButtonSelected: string; }; export declare const adornmentClasses: { root: string; hideIcon: string; disabled: string; }; export declare const appSwitcherActionClasses: { root: string; icon: string; iconUrl: string; iconInfo: string; disabled: string; selected: string; typography: string; title: string; titleAnchor: string; }; export declare const appSwitcherClasses: { root: string; item: string; itemSelected: string; itemDisabled: string; itemTrigger: string; itemIcon: string; itemTitle: string; itemInfoIcon: string; actionsContainer: string; footerContainer: string; open: string; closed: string; title: string; titleAnchor: string; single: string; dual: string; fluid: string; }; export declare type Arrayable = T | T[]; declare interface AskAction { actions: QueryAction[]; dialog: DialogLabels; } declare type AsProp = { /** Custom element type to override the root component */ component?: C; }; export declare const avatarClasses: { root: string; img: string; fallback: string; container: string; xs: string; sm: string; md: string; lg: string; xl: string; avatar: string; badge: string; circular: string; square: string; }; export declare const avatarGroupClasses: { root: string; row: string; column: string; highlight: string; toBack: string; }; export declare const badgeClasses: { root: string; badge: string; badgeHidden: string; badgeIcon: string; badgeOneDigit: string; }; export declare const bannerClasses: { rootClosed: string; root: string; anchorOriginTopCenter: string; anchorOriginBottomCenter: string; }; export declare const bannerContentClasses: { root: string; success: string; warning: string; error: string; default: string; info: string; accent: string; message: string; action: string; messageContainer: string; iconContainer: string; messageActions: string; actionContainer: string; closeAction: string; }; declare interface BarProps extends HvBaseProps { data: HvHeaderNavigationItemProp[]; type?: "menubar" | "menu"; classes?: HvHeaderMenuBarClasses; } export declare const baseCheckBoxClasses: { root: string; disabled: string; focusVisible: string; icon: string; checked: string; indeterminate: string; semantic: string; }; export declare const baseDropdownClasses: { root: string; rootDisabled: string; anchor: string; container: string; header: string; headerOpen: string; headerDisabled: string; headerReadOnly: string; arrowContainer: string; arrow: string; selection: string; selectionDisabled: string; placeholder: string; panel: string; }; export declare const baseInputClasses: { root: string; disabled: string; invalid: string; multiline: string; resizable: string; readOnly: string; focused: string; input: string; inputDisabled: string; inputReadOnly: string; inputResizable: string; }; export declare const baseRadioClasses: { root: string; disabled: string; focusVisible: string; icon: string; checked: string; semantic: string; }; export declare const baseSwitchClasses: { root: string; switch: string; switchBase: string; track: string; thumb: string; checked: string; disabled: string; readOnly: string; focusVisible: string; }; export declare const breadCrumbClasses: { root: string; link: string; orderedList: string; currentPage: string; centerContainer: string; separatorContainer: string; a: string; }; export declare const bulkActionsClasses: { root: string; semantic: string; disabled: string; actions: string; selectAllContainer: string; selectAll: string; selectAllPages: string; divider: string; }; export declare const buttonBaseClasses: { root: string; disabled: string; }; export declare const buttonClasses: { root: string; startIcon: string; endIcon: string; focusVisible: string; disabled: string; icon: string; contained: string; subtle: string; ghost: string; semantic: string; }; export declare const calendarClasses: { root: string; rangeCalendarContainer: string; singleCalendar: string; focusSelection: string; calendarMonthlyCell: string; calendarMonthlyCellSelected: string; }; export declare const calendarHeaderClasses: { root: string; invalid: string; headerDayOfWeek: string; }; export declare const cardClasses: { root: string; selected: string; selectable: string; semanticContainer: string; icon: string; semanticBar: string; }; export declare const cardContentClasses: { content: string; }; export declare const cardHeaderClasses: { root: string; title: string; subheader: string; content: string; action: string; }; export declare const cardMediaClasses: { root: string; media: string; }; export declare const carouselClasses: { root: string; xs: string; fullscreen: string; title: string; actions: string; closeButton: string; mainContainer: string; controls: string; pageCounter: string; main: string; mainXs: string; mainFullscreen: string; counterContainer: string; counter: string; slideControls: string; slidesViewport: string; slidesContainer: string; dots: string; dotsXs: string; dot: string; dotSelected: string; panel: string; thumbnail: string; thumbnailSelected: string; }; declare type CellValue = V; export declare const charCounterClasses: { root: string; counterDisabled: string; gutter: string; overloaded: string; }; export declare const checkBoxClasses: { root: string; container: string; invalidContainer: string; disabled: string; focusVisible: string; checkbox: string; invalidCheckbox: string; label: string; checked: string; indeterminate: string; semantic: string; left: string; right: string; }; export declare const checkBoxGroupClasses: { root: string; label: string; group: string; vertical: string; horizontal: string; invalid: string; selectAll: string; error: string; }; export declare const colorPickerClasses: { root: string; labelContainer: string; label: string; description: string; headerColorValue: string; headerColorIcon: string; panel: string; colorPicker: string; colorPickerIcon: string; dropdownRootIconOnly: string; headerColorIconOnly: string; }; declare type ColorVariant = "primary" | "secondary" | "positive" | "negative" | "warning"; export declare const containerClasses: { root: string; disableGutters: string; fixed: string; maxWidthXs: string; maxWidthSm: string; maxWidthMd: string; maxWidthLg: string; maxWidthXl: string; }; export declare const controlsClasses: { root: string; section: string; rightSection: string; leftSection: string; }; export { createClasses } export declare const datePickerClasses: { root: string; actionContainer: string; leftContainer: string; rightContainer: string; labelContainer: string; label: string; description: string; error: string; dropdown: string; panel: string; dropdownHeaderInvalid: string; dropdownHeaderOpen: string; icon: string; action: string; inputText: string; dateText: string; container: string; }; export declare interface DateRangeProp { startDate: Date; endDate?: Date; } /** This type allows to do a deep partial by applying the Partial type to each key recursively */ export declare type DeepPartial = T extends {} ? Partial<{ [P in keyof T]: DeepPartial; }> : T; declare const DEFAULT_ERROR_MESSAGES: { /** The value when a validation fails. */ error: string; /** The message that appears when there are too many characters. */ maxCharError: string; /** The message that appears when there are too few characters. */ minCharError: string; /** The message that appears when the input is empty and required. */ requiredError: string; /** The message that appears when the input is value is incompatible with the expected type. */ typeMismatchError: string; }; declare const DEFAULT_LABELS: { dropdownMenu: string; }; declare const DEFAULT_LABELS_10: { /** Apply button label. */ applyLabel: string; /** Cancel button label. */ cancelLabel: string; /** Clear button label. */ clearLabel: string; /** Placeholder label. */ placeholder: string; /** SearchBox placeholder label. */ searchBoxPlaceholder: string; /** Select All placeholder label. */ selectAll: string; /** Multi selection conjunction placeholder label. */ multiSelectionConjunction: string; }; declare const DEFAULT_LABELS_11: { /** The label used in the middle of the multi-selection count. */ selectionConjunction: string; }; declare const DEFAULT_LABELS_2: { close: string; fullscreen: string; backwards: string; forwards: string; }; declare const DEFAULT_LABELS_3: { /** The show label. */ pageSizePrev: string; /** Indicate the units of the page size selection. */ pageSizeEntryName: string; /** Used for the aria-label of the selection of number of unit.s */ pageSizeSelectorDescription: string; /** Separator of current page and total pages. */ pagesSeparator: string; /** Aria-label passed to the page input. */ paginationInputLabel: string; /** Label of the first page button */ firstPage: string; /** Label of the previous page button */ previousPage: string; /** Label of the next page button */ nextPage: string; /** Label of the last page button */ lastPage: string; }; declare const DEFAULT_LABELS_4: { backwards: string; forwards: string; }; declare const DEFAULT_LABELS_5: { recommendedColorsLabel: string; customColorsLabel: string; }; declare const DEFAULT_LABELS_6: { /** The label of the clear button. */ clearButtonLabel: string; /** The tooltip of the reveal password button when the password is hidden. */ revealPasswordButtonClickToShowTooltip: string; /** The tooltip of the reveal password button when the password is revealed. */ revealPasswordButtonClickToHideTooltip: string; /** The label of the search button. */ searchButtonLabel: string; }; declare const DEFAULT_LABELS_7: { /** Label for overwrite the default header behavior. */ select: string | undefined; /** Cancel button label. */ cancelLabel: string; /** Apply button label. */ applyLabel: string; /** The label used in the middle of the multiSelection count. */ searchPlaceholder: string; /** The label used in search. */ multiSelectionConjunction: string; }; declare const DEFAULT_LABELS_8: { /** Apply button label. */ applyLabel: string; /** Cancel button label. */ cancelLabel: string; /** Clear button label. */ clearLabel: string; /** Invalid Date label. */ invalidDateLabel: string; }; declare const DEFAULT_LABELS_9: { /** Extensions of the accepted file types */ acceptedFiles: string; /** Size file warning label. */ sizeWarning: string; /** Size file warning label. */ drag: string; /** Size file warning label. */ selectFiles: string; /** Theming sheet used to style components */ dropFiles: string; /** Message to display when file size is greater than allowed */ fileSizeError: string; /** Message to display when file type is greater than allowed */ fileTypeError: string; removeFileButtonLabel: string; }; declare type DefaultAttributes = "boolean" | "numeric" | "dateandtime" | "text" | "textarea"; export { defaultCacheKey } export { defaultEmotionCache } declare interface DefaultTreeViewPluginParameters extends UseTreeViewNodesParameters, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters, UseTreeViewContextValueBuilderParameters { } export declare const dialogActionClasses: { root: string; fullscreen: string; spacing: string; }; export declare const dialogClasses: { root: string; background: string; paper: string; fullScreen: string; fullHeight: string; closeButton: string; statusBar: string; success: string; error: string; warning: string; }; export declare const dialogContentClasses: { root: string; textContent: string; }; declare interface DialogLabels { dialogTitle: string; dialogMessage: string; dialogConfirm: string; dialogCancel: string; dialogCloseTooltip: string; } export declare const dialogTitleClasses: { root: string; fullScreen: string; }; export declare const dotPaginationClasses: { root: string; horizontal: string; radio: string; icon: string; }; export declare const drawerClasses: { root: string; paper: string; background: string; closeButton: string; }; export declare const dropdownClasses: { root: string; labelContainer: string; label: string; description: string; error: string; placeholder: string; placeholderClosed: string; selectionDisabled: string; dropdown: string; arrow: string; dropdownHeader: string; dropdownHeaderInvalid: string; dropdownHeaderOpen: string; dropdownListContainer: string; rootList: string; disabled: string; readOnly: string; }; export declare const dropDownMenuClasses: { root: string; open: string; menuListRoot: string; menuList: string; }; export { EmotionContext } export declare const emptyStateClasses: { root: string; container: string; containerMessageOnly: string; iconContainer: string; titleContainer: string; textContainer: string; messageContainer: string; actionContainer: string; }; export { ExtractNames } export declare const fileClasses: { root: string; progressbar: string; progressbarContainer: string; progressbarBack: string; nameText: string; progressTextContainer: string; removeButton: string; previewContainer: string; icon: string; fail: string; }; export declare const fileUploaderClasses: { root: string; }; export declare const fileUploaderPreviewClasses: { previewButton: string; overlay: string; }; export declare const filterGroupClasses: { root: string; label: string; labelContainer: string; description: string; error: string; }; declare type FixComponentProps = T extends any ? T : never; /** React.forwardRef with fixed type declarations */ export declare function fixedForwardRef(render: (props: P, ref: React.Ref) => React.ReactNode): (props: P & React.RefAttributes) => React.ReactNode; export declare const footerClasses: { root: string; name: string; rightContainer: string; copyright: string; separator: string; small: string; }; export declare const formElementClasses: { root: string; }; export declare const globalActionsClasses: { root: string; positionSticky: string; positionFixed: string; global: string; section: string; wrapper: string; backButton: string; name: string; actions: string; }; export declare const gridClasses: { root: string; container: string; item: string; zeroMinWidth: string; "direction-xs-column": string; "direction-xs-reverse": string; "direction-xs-row-reverse": string; "wrap-xs-nowrap": string; "wrap-xs-wrap-reverse": string; "spacing-xs-1": string; "spacing-xs-2": string; "spacing-xs-3": string; "spacing-xs-4": string; "spacing-xs-5": string; "spacing-xs-6": string; "spacing-xs-7": string; "spacing-xs-8": string; "spacing-xs-9": string; "spacing-xs-10": string; "grid-xs-auto": string; "grid-xs-true": string; "grid-xs-1": string; "grid-xs-2": string; "grid-xs-3": string; "grid-xs-4": string; "grid-xs-5": string; "grid-xs-6": string; "grid-xs-7": string; "grid-xs-8": string; "grid-xs-9": string; "grid-xs-10": string; "grid-xs-11": string; "grid-xs-12": string; }; export declare const headerActionsClasses: { root: string; }; export declare const headerBrandClasses: { root: string; separator: string; brandName: string; }; export declare const headerClasses: { root: string; header: string; fixed: string; }; export declare const headerNavigationClasses: { root: string; }; export declare const horizontalScrollListItemClasses: { root: string; button: string; text: string; selected: string; bullet: string; bulletSelected: string; }; /** * An accordion is a design element that expands in place to expose hidden information. */ export declare const HvAccordion: ForwardRefExoticComponent>; export declare type HvAccordionClasses = ExtractNames; export declare interface HvAccordionProps extends HvBaseProps { /** Content to be rendered. */ children: React.ReactNode; /** The accordion label button. */ label?: React.ReactNode; /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */ onChange?: (event: React.SyntheticEvent, value: boolean) => void; /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */ expanded?: boolean; /** When uncontrolled, defines the initial expanded state. */ defaultExpanded?: boolean; /** An object containing props to be passed onto container holding the accordion children. */ containerProps?: React.HTMLAttributes; /** Heading level to apply to accordion button. If `undefined` the button won't have a header wrapper. */ headingLevel?: 1 | 2 | 3 | 4 | 5 | 6; /** Whether the accordion is disabled. */ disabled?: boolean; /** Typography variant for the label. */ labelVariant?: HvTypographyVariants; /** A Jss Object used to override or extend the styles applied. */ classes?: HvAccordionClasses; } /** * The Action Bar accommodates all the actions related to a specific task on a screen or pattern. */ export declare const HvActionBar: ForwardRefExoticComponent>; export declare type HvActionBarClasses = ExtractNames; export declare interface HvActionBarProps extends HvBaseProps { /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvActionBarClasses; } export declare interface HvActionGeneric { /** Action id. */ id: string; /** Action label. */ label: string; /** Action icon. */ icon?: React.ReactNode | ((params: { isDisabled?: boolean; }) => React.ReactNode); /** Whether the action is disabled or not. */ disabled?: boolean; /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */ iconOnly?: boolean; } export declare const HvActionsGeneric: ForwardRefExoticComponent>; export declare type HvActionsGenericClasses = ExtractNames; export declare interface HvActionsGenericProps extends HvBaseProps { /** The button variant for all actions. */ variant?: HvButtonVariant; /** Whether the actions should be all disabled. */ disabled?: boolean; /** Whether the actions should be all icon buttons when visible. */ iconOnly?: boolean; /** The renderable content inside the actions slot of the footer, or an array of actions. */ actions: React.ReactNode | HvActionGeneric[]; /** The callback function called when an action is triggered, receiving the `action` as parameter. */ onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void; /** The maximum number of visible actions before they're collapsed into a dropdown menu. */ maxVisibleActions?: number; /** Props to be applied to the dropdown menu. */ dropdownMenuProps?: Partial; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvActionsGenericClasses; } /** * Allows to add a decorative icon or an action to a form element, usually on the right side of an input. * E.g., the reveal password button. * * This component disables keyboard navigation by default, ensuring that it doesn't steal focus from the input. * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean. * This behavior can be overridden by providing an a `tabIndex={0}`. */ export declare const HvAdornment: ForwardRefExoticComponent>; export declare type HvAdornmentClasses = ExtractNames; export declare interface HvAdornmentProps extends HvBaseProps { /** The icon to be added into the input. */ icon: React.ReactNode; /** Controls the visibility of the adornment based on the form element's status. `isVisible` overrides this behavior. */ showWhen?: HvFormStatus; /** Function to be executed when this element is clicked. */ onClick?: React.MouseEventHandler; /** If this property is defined the adornment visibility will be exclusively controlled by this value. */ isVisible?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvAdornmentClasses; } /** * An app switcher lets users quickly navigate between different applications or modules within a platform. */ export declare const HvAppSwitcher: ForwardRefExoticComponent>; export declare const HvAppSwitcherAction: ({ id, className, classes: classesProp, application, onClickCallback, isSelectedCallback, }: HvAppSwitcherActionProps) => JSX_2.Element; export declare interface HvAppSwitcherActionApplication { /** Id of the application. */ id?: string; /** Name of the application, this is the value that will be displayed on the component. */ name: string; /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */ iconUrl?: string; /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */ iconElement?: React.ReactElement; /** Small description of the application. */ description?: string; /** URL where the application is accessible. */ url?: string; /** Defines if the application should be opened in the same tab or in a new one. */ target?: "_top" | "_blank"; /** If true, the item will be disabled. */ disabled?: boolean; /** True when the application is selected, false otherwise. */ isSelected?: boolean; /** The color of the application. */ color?: HvColorAny; } export declare type HvAppSwitcherActionClasses = ExtractNames; export declare interface HvAppSwitcherActionProps extends HvBaseProps { /** The application data to be used to render the Action object. */ application: HvAppSwitcherActionApplication; /** Callback triggered when the action is clicked. */ onClickCallback?: (event: React.MouseEvent, application: HvAppSwitcherActionApplication) => void; /** Must return a boolean stating if the action element is selected or not. */ isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvAppSwitcherActionClasses; } export declare type HvAppSwitcherClasses = ExtractNames; export declare interface HvAppSwitcherProps extends HvBaseProps { /** Number of columns to render. One, two, or whatever fits the component's width. */ layout?: "single" | "dual" | "fluid"; /** Title to be displayed on the header of the component. */ title?: string; /** The list of applications to be used to render the actions on the component. */ applications?: HvAppSwitcherActionApplication[]; /** Triggered when an action is clicked. */ onActionClickedCallback?: (event: React.MouseEvent, application: HvAppSwitcherActionApplication) => void; /** Must return a boolean stating if the action element is selected or not. */ isActionSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean; /** Element to be added to the header container, if none is provided a label with the title will be added. */ header?: React.ReactNode; /** Element to be added to the footer container. */ footer?: React.ReactNode; /** * Flag stating if the panel is opened or closed. * * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component. */ isOpen?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvAppSwitcherClasses; } /** * Avatars represent a user or brand and can display an image, icon, or initials. */ export declare const HvAvatar: ForwardRefExoticComponent>; export declare type HvAvatarClasses = ExtractNames; /** *The Avatar Group displays a collection of avatars, often used to represent groups or teams. */ export declare const HvAvatarGroup: ForwardRefExoticComponent>; export declare type HvAvatarGroupClasses = ExtractNames; export declare interface HvAvatarGroupProps extends HvBaseProps { /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvAvatarGroupClasses; /** The avatar size. */ size?: HvSize; /** The spacing between avatars. */ spacing?: "compact" | "loose"; /** The direction of the group. */ direction?: "row" | "column"; /** Whether the avatars display behind the previous avatar or on top. */ toBack?: boolean; /** * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will * be added to the end of the list, indicating the number of hidden avatars. */ maxVisible?: number; /** * What to show as an overflow representation. * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items. * */ overflowComponent?: (overflowCount: number) => React.ReactNode; /** * If `true` the avatars will be brought to the front when hovered. */ highlight?: boolean; } export declare interface HvAvatarProps extends HvBaseProps { /** The component used for the root node. Either a string to use a DOM element or a component. */ component?: React.ElementType; /** Sets one of the standard sizes of the icons */ size?: HvSize; /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */ color?: HvColorAny; /** A String representing the background color of the avatar. */ backgroundColor?: HvColorAny; /** The `src` attribute for the `img` element. */ src?: string; /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */ srcSet?: string; /** The `sizes` attribute for the `img` element. */ sizes?: string; /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */ alt?: string; /** * Attributes applied to the `img` element if the component is used to display an image. * It can be used to listen for the loading error event. */ imgProps?: React.HTMLAttributes; /** A string representing the type of avatar to display, circular or square. */ variant?: HvAvatarVariant; /** A string representing the color of the avatar border that represents its status. */ status?: HvColorAny; /** A string representing the color of the avatar badge. */ badge?: HvColorAny; /** Attributes applied to the avatar element. */ avatarProps?: AvatarProps; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvAvatarClasses; } export declare type HvAvatarVariant = "circular" | "square"; /** * The badge is a component used to notify the user that something has occurred, in the app context. */ export declare const HvBadge: ForwardRefExoticComponent>; export declare type HvBadgeClasses = ExtractNames; export declare interface HvBadgeProps extends HvBaseProps { /** The badge color. */ color?: HvColorAny; /** True if a **numeric** `label` should be displayed. */ showCount?: boolean; /** The maximum number of unread notifications to be displayed */ maxCount?: number; /** * Badge content to show in. * * If value is numeric, then `showCount` and `maxCount` will show or limit the value respectively. */ label?: React.ReactNode; /** Icon which the notification will be attached. */ icon?: React.ReactNode; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvBadgeClasses; } /** * A **Banner** shows an important message with optional actions. It appears below the top app bar and requires user dismissal. */ export declare const HvBanner: ForwardRefExoticComponent & RefAttributes>; export declare type HvBannerActionPosition = "auto" | "inline" | "bottom-right"; export declare type HvBannerClasses = ExtractNames; export declare const HvBannerContent: ForwardRefExoticComponent & RefAttributes>; export declare type HvBannerContentClasses = ExtractNames; export declare interface HvBannerContentProps extends Omit { /** The message to display. @deprecated use `children` instead */ content?: string; /** The message to display. */ children?: React.ReactNode; /** Variant of the snackbar. */ variant?: HvBannerVariant; /** Controls if the associated icon to the variant should be shown. */ showIcon?: boolean; /** Custom icon to replace the variant default. */ customIcon?: React.ReactNode; /** Function called when clicking on the close button. */ onClose?: (event: React.MouseEvent) => void; /** Actions to display on the right side. */ actions?: HvActionsGenericProps["actions"]; /** The callback function called when an action is triggered, receiving `action` as parameter. */ onAction?: HvActionsGenericProps["onAction"]; /** The position property of the header. */ actionsPosition?: HvBannerActionPosition; /** The props to pass down to the Action Container. */ actionProps?: Partial; /** The size of the banner. */ size?: Extract; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvBannerContentClasses; } export declare interface HvBannerProps extends Omit { /** If true, the snackbar is open. */ open: boolean; /** * Callback fired when the component requests to be closed. * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away. * */ onClose?: (event: React.MouseEvent) => void; /** The message to display. */ label?: React.ReactNode; /** The anchor of the Snackbar. */ anchorOrigin?: "top" | "bottom"; /** Variant of the snackbar. */ variant?: HvBannerVariant; /** Custom icon to replace the variant default. */ customIcon?: React.ReactNode; /** Controls if the associated icon to the variant should be shown. */ showIcon?: boolean; /** Actions to display on the right side. */ actions?: HvActionsGenericProps["actions"]; /** The callback function called when an action is triggered, receiving `action` as parameter. */ onAction?: HvActionsGenericProps["onAction"]; /** The position property of the header. */ actionsPosition?: HvBannerActionPosition; /** How much the transition animation last in milliseconds, if 0 no animation is played. */ transitionDuration?: number; /** Direction of slide transition. */ transitionDirection?: "up" | "down" | "left" | "right"; /** The container the banner should slide from. */ container?: SlideProps["container"]; /** Offset from top/bottom of the page, in px. Defaults to 60px. */ offset?: number; /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */ bannerContentProps?: HvBannerContentProps; /** The size of the banner. */ size?: HvBannerContentProps["size"]; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvBannerClasses; /** @ignore */ ref?: SnackbarProps["ref"]; } export declare type HvBannerVariant = HvCalloutVariant; /** * A Checkbox is a mechanism that allows user to select one or more options. * * The Base Checkbox is a building block of the Checkbox form element. Don't use unless * implementing a custom use case not covered by the Checkbox form element. */ export declare const HvBaseCheckBox: ForwardRefExoticComponent & RefAttributes>; export declare type HvBaseCheckBoxClasses = ExtractNames; export declare interface HvBaseCheckBoxProps extends Omit { /** * The input name. */ name?: string; /** * The value of the input. * * Is up to the application's logic when to consider the submission of this value. * Generally it should be used only when the checkbox is neither unchecked nor indeterminate. * * The default value is "on". */ value?: any; /** * Indicates that the input is disabled. */ disabled?: boolean; /** * Indicates that the input is not editable. */ readOnly?: boolean; /** * Indicates that user input is required. */ required?: boolean; /** * If `true` the checkbox is selected, if set to `false` the checkbox is not selected. * * When defined the checkbox state becomes controlled. */ checked?: boolean; /** * When uncontrolled, defines the initial checked state. */ defaultChecked?: boolean; /** * If `true` the checkbox visually shows the indeterminate state. */ indeterminate?: boolean; /** * The callback fired when the checkbox is pressed. */ onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void; /** * Whether the selector should use semantic colors. */ semantic?: boolean; /** * Properties passed on to the input element. */ inputProps?: React.InputHTMLAttributes; /** * Callback fired when the component is focused with a keyboard. * We trigger a `onFocus` callback too. */ onFocusVisible?: (event: React.FocusEvent) => void; /** * Callback fired when the component is blurred. */ onBlur?: (event: React.FocusEvent) => void; /** * Color applied to the check box. */ color?: HvColorAny; /** * A Jss Object used to override or extend the styles applied to the checkbox. */ classes?: HvBaseCheckBoxClasses; } export declare const HvBaseDropdown: ForwardRefExoticComponent & RefAttributes>; export declare type HvBaseDropdownClasses = ExtractNames; export declare interface HvBaseDropdownProps extends HvBaseProps { /** * The role of the element that triggers the popup. * * Defaults to "combobox" if `component` and the default * "textbox" header is used, undefined otherwise. */ role?: string; /** * Header placeholder. */ placeholder?: React.ReactNode; /** * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */ disabled?: boolean; /** * If `true` the dropdown will be in read only mode, unable to be interacted. */ readOnly?: boolean; /** * Indicates that user input is required on the form element. */ required?: boolean; /** * Disable the portal behavior. * The children stay within it's parent DOM hierarchy. */ disablePortal?: boolean; /** * If `true` the dropdown width depends size of content if `false` the width depends on the header size. * Defaults to `false`. */ variableWidth?: boolean; /** * If `true` the dropdown starts opened if `false` it starts closed. */ expanded?: boolean; /** * When uncontrolled, defines the initial expanded state. */ defaultExpanded?: boolean; /** * An object containing props to be wired to the popper component. */ popperProps?: PopperProps["popperOptions"]; /** * Placement of the dropdown. */ placement?: "left" | "right"; /** * Replacement for the header component. * @deprecated use `headerComponent` instead */ component?: React.ReactNode; /** Replacement for the header component */ headerComponent?: React.ElementType; /** * Adornment to replace the default arrows. */ adornment?: React.ReactNode; /** * When dropdown changes the expanded state. */ onToggle?: (event: Event, open: boolean) => void; /** * When user click outside the open container. */ onClickOutside?: (event: Event) => void; /** * Callback called when the dropdown is opened and ready, * commonly used to set focus to the content. */ onContainerCreation?: (container: HTMLElement | null, state: Partial) => void; /** * Attributes applied to the dropdown header element. */ dropdownHeaderProps?: React.DetailedHTMLProps, HTMLDivElement>; /** * Pass a ref to the dropdown header element. */ dropdownHeaderRef?: React.Ref; /** * A Jss Object used to override or extend the component styles applied. */ classes?: HvBaseDropdownClasses; /** @ignore */ ref?: React.Ref; } /** * An Input component that only posses the most basic functionalities. * It should be used alongside the other form elements to construct a proper accessible form. */ export declare const HvBaseInput: ForwardRefExoticComponent>; export declare type HvBaseInputClasses = ExtractNames; export declare interface HvBaseInputProps extends Omit { /** The input name. */ name?: string; /** The value of the input, when controlled. */ value?: React.InputHTMLAttributes["value"]; /** The initial value of the input, when uncontrolled. */ defaultValue?: React.InputHTMLAttributes["value"]; /** If `true` the input is disabled. */ disabled?: boolean; /** Indicates that the input is not editable. */ readOnly?: boolean; /** If true, the input element will be required. */ required?: boolean; /** * Callback fired when the value is changed. * * You can pull out the new value by accessing `event.target.value` (string), * or using the second callback argument. */ onChange?: (event: React.ChangeEvent, value: string) => void; /** If true, a textarea element will be rendered. */ multiline?: boolean; /** If true and multiline is also true the textarea element will be resizable. */ resizable?: boolean; /** Denotes if the input is in an invalid state. */ invalid?: boolean; /** * Allows passing a ref to the underlying input * @deprecated Use `ref` directly instead * */ inputRef?: InputBaseProps["inputRef"]; /** * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */ inputProps?: React.InputHTMLAttributes; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvBaseInputClasses; } /** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */ export declare type HvBaseProps = never> = Omit, K>; /** * A Radio Button is a mechanism that allows user to select one or more options. * * The Base Radio Button is a building block of the Radio Button form element. Don't * use unless implementing a custom use case not covered by the Radio Button form element. */ export declare const HvBaseRadio: ForwardRefExoticComponent & RefAttributes>; export declare type HvBaseRadioClasses = ExtractNames; export declare interface HvBaseRadioProps extends Omit { /** * Class names to be applied. */ className?: string; /** * A Jss Object used to override or extend the styles applied to the radio button. */ classes?: HvBaseRadioClasses; /** * Id to be applied to the root node. */ id?: string; /** * The input name. */ name?: string; /** * The value of the input. * * The default value is "on". */ value?: any; /** * Indicates that user input is required. */ required?: boolean; /** * Indicates that the input is not editable. */ readOnly?: boolean; /** * Indicates that the input is disabled. */ disabled?: boolean; /** * If `true` the radio button is selected, if set to `false` the radio button is not selected. * * When defined the radio button state becomes controlled. */ checked?: boolean; /** * When uncontrolled, defines the initial checked state. */ defaultChecked?: boolean; /** * Color applied to the radio button. */ color?: HvColorAny; /** * The callback fired when the radio button is pressed. */ onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void; /** * Whether the selector should use semantic colors. */ semantic?: boolean; /** * Properties passed on to the input element. */ inputProps?: React.InputHTMLAttributes; /** * Callback fired when the component is focused with a keyboard. * We trigger a `onFocus` callback too. */ onFocusVisible?: (event: React.FocusEvent) => void; /** * @ignore */ onBlur?: (event: React.FocusEvent) => void; } /** * A Switch is binary and work as a digital on/off button. * * The Base Switch is a building block of the Switch form element. Don't use unless * implementing a custom use case not covered by the Switch form element. */ export declare const HvBaseSwitch: ForwardRefExoticComponent & RefAttributes>; export declare type HvBaseSwitchClasses = ExtractNames; export declare interface HvBaseSwitchProps extends Omit { /** * Class names to be applied. */ className?: string; /** * A Jss Object used to override or extend the styles applied to the switch. */ classes?: HvBaseSwitchClasses; /** * Id to be applied to the root node. */ id?: string; /** * The input name. */ name?: string; /** * The value of the input. * * Is up to the application's logic when to consider the submission of this value. * Generally it should be used only when the switch is neither unchecked nor indeterminate. * * The default value is "on". */ value?: any; /** * Indicates that user input is required. */ required?: boolean; /** * Indicates that the input is not editable. */ readOnly?: boolean; /** * Indicates that the input is disabled. */ disabled?: boolean; /** * If `true` the switch is selected, if set to `false` the switch is not selected. * * When defined the switch state becomes controlled. */ checked?: boolean; /** * When uncontrolled, defines the initial checked state. */ defaultChecked?: boolean; /** * The callback fired when the switch is pressed. */ onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void; /** * Properties passed on to the input element. */ inputProps?: React.InputHTMLAttributes; /** * Callback fired when the component is focused with a keyboard. * We trigger a `onFocus` callback too. */ onFocusVisible?: (event: React.FocusEvent) => void; /** * @ignore */ onBlur?: (event: React.FocusEvent) => void; /** * The size of the switch. */ size?: SwitchProps["size"]; /** Color applied to the switch. */ color?: HvColorAny; } export { HvBaseTheme } /** * A breadcrumb is a graphical control element frequently used as a navigational aid. */ export declare const HvBreadCrumb: ForwardRefExoticComponent>; export declare type HvBreadCrumbClasses = ExtractNames; export declare interface HvBreadCrumbPathElement extends Record { label: string; path: string; } export declare interface HvBreadCrumbProps extends HvBaseProps { /** List of breadcrumb. */ listRoute?: HvBreadCrumbPathElement[]; /** Home breadcrumb element. If passed, it will be displayed as the first breadcrumb item as a Home icon */ home?: HvBreadCrumbPathElement; /** URL to build the breadcrumb. */ url?: string; /** Number of pages visible. */ maxVisible?: number; /** The component used for the link node. Either a string to use a DOM element or a component. */ component?: React.ElementType; /** Function passed to the component. If defined the component prop is used as the link node. */ onClick?: (event: React.MouseEvent, data: any) => void; /** Props passed down to the DropDownMenu sub-menu component. */ dropDownMenuProps?: Partial; /** Separator element between breadcrumb items. */ separator?: React.ReactNode; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvBreadCrumbClasses; } export { HvBreakpoints } /** * Bulk Actions let users apply an action to one or multiple items at once, streamlining repetitive tasks. */ export declare const HvBulkActions: ForwardRefExoticComponent>; export declare type HvBulkActionsClasses = ExtractNames; export declare type HvBulkActionsPropGetter = PropGetter; export declare interface HvBulkActionsProps extends HvBaseProps { /** Custom label for select all checkbox conjunction */ selectAllConjunctionLabel?: string; /** Custom label for select all pages button */ selectAllPagesLabel?: React.ReactNode; /** Whether select all pages element should be visible */ showSelectAllPages?: boolean; /** The total number of elements */ numTotal?: number; /** The number of elements currently selected */ numSelected?: number; /** Function called when the "select all" Checkbox is toggled. */ onSelectAll?: HvCheckBoxProps["onChange"]; /** Function called when the "select all pages" button is clicked toggled. */ onSelectAllPages?: HvButtonProps["onClick"]; /** Whether the bulk actions should use the semantic styles when there are selected elements. */ semantic?: boolean; /** The renderable content inside the right actions slot, or an array of actions `{ id, label, icon, disabled, ... }` */ actions?: HvActionsGenericProps["actions"]; /** Whether the bulk actions component is disabled */ disabled?: boolean; /** Whether actions should be all disabled */ actionsDisabled?: boolean; /** The callback function called when an action is triggered, receiving `action` as parameter. */ onAction?: HvActionsGenericProps["onAction"]; /** The number of maximum visible actions before they're collapsed into a `DropDownMenu`. */ maxVisibleActions?: number; /** Properties to be passed onto the checkbox component, the values of the object are equivalent to the HvCheckbox API. */ checkboxProps?: HvCheckBoxProps; /** A Jss Object used to override or extend the styles applied. */ classes?: HvBulkActionsClasses; } /** * Button component is used to trigger an action or event. */ export declare const HvButton: (props: { /** Use the variant prop to change the visual style of the button. */ variant?: HvButtonVariant; /** Whether the button is an icon-only button. */ icon?: boolean; /** Whether the button is disabled or not. */ disabled?: boolean; /** Class names to be applied. */ className?: string; /** Element placed before the children. */ startIcon?: React.ReactNode; /** Element placed after the children. */ endIcon?: React.ReactNode; /** Color of the button. */ color?: HvColorAny; /** Button size. */ size?: HvSize; /** Button border radius. */ radius?: HvRadius; /** A Jss Object used to override or extend the styles applied. */ classes?: Partial<{ root: string; startIcon: string; endIcon: string; focusVisible: string; disabled: string; icon: string; contained: string; subtle: string; ghost: string; semantic: string; }>; /** Whether the button is selected or not. */ selected?: boolean; /** * Whether the button is focusable when disabled. * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers. * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes. */ focusableWhenDisabled?: boolean; } & { component?: C | undefined; } & { children?: ReactNode | undefined; } & (Omit< PropsWithoutRef>, "color" | "classes" | "size" | "icon" | "disabled" | "className" | "radius" | "component" | "selected" | "variant" | "startIcon" | "endIcon" | "focusableWhenDisabled"> extends infer T ? T extends Omit< PropsWithoutRef>, "color" | "classes" | "size" | "icon" | "disabled" | "className" | "radius" | "component" | "selected" | "variant" | "startIcon" | "endIcon" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & { ref?: PolymorphicRef | undefined; } & RefAttributes) => React.ReactNode; /** * Button component is used to trigger an action or event. */ export declare const HvButtonBase: (props: { /** A Jss Object used to override or extend the styles applied. */ classes?: Partial<{ root: string; disabled: string; }>; /** Whether the button is selected or not. */ selected?: boolean; /** Whether the button is disabled or not. */ disabled?: boolean; /** * Whether the button is focusable when disabled. * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers. * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes. */ focusableWhenDisabled?: boolean; } & { component?: C | undefined; } & { children?: ReactNode | undefined; } & (Omit< PropsWithoutRef>, "classes" | "disabled" | "component" | "selected" | "focusableWhenDisabled"> extends infer T ? T extends Omit< PropsWithoutRef>, "classes" | "disabled" | "component" | "selected" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & { ref?: PolymorphicRef | undefined; } & RefAttributes) => React.ReactNode; export declare type HvButtonBaseClasses = ExtractNames; export declare type HvButtonBaseProps = PolymorphicComponentRef; export declare type HvButtonClasses = ExtractNames; export declare type HvButtonProps = PolymorphicComponentRef; export declare type HvButtonVariant = Variant | `${ColorVariant}${TypeSuffix}` | "semantic"; export declare const HvCalendar: (props: HvCalendarProps) => JSX_2.Element; export declare type HvCalendarClasses = ExtractNames; export declare const HvCalendarHeader: { (props: HvCalendarHeaderProps): JSX_2.Element; formElementType: string; }; export declare type HvCalendarHeaderClasses = ExtractNames; export declare interface HvCalendarHeaderProps extends Pick { /** * A Jss Object used to override or extend the component styles. */ classes?: HvCalendarHeaderClasses; /** * Callback to handle input onFocus. */ onFocus?: (event: React.FocusEvent, formattedDate: string | null) => void; } export declare interface HvCalendarProps extends Omit, "onChange"> { /** * Styles applied from the theme. */ classes?: HvCalendarClasses; /** * The calendar locale. */ locale?: string; /** * Date that the calendar would show. * if using the object format the calendar enter in range mode showing two calendars */ value?: DateRangeProp | Date; /** * Controls the visible month of the Calendar */ visibleMonth?: number; /** * Controls the visible year of the Calendar */ visibleYear?: number; /** * Controls the visible month of the Calendar on the right side of the datepicker */ rightVisibleMonth?: number; /** * Controls the visible year of the Calendar on the right side of the datepicker */ rightVisibleYear?: number; /** * Callback function to be triggered when the selected date has changed. */ onChange?: (event: React.ChangeEvent | undefined, value: Date | DateRangeProp) => void; /** * Callback function to be triggered when the selected date input has changed. */ onInputChange?: (event: React.ChangeEvent | undefined, value: Date | DateRangeProp, position: "left" | "right") => void; /** * Callback function to be triggered when the user clicks on the month or year selector. * it receives the action that was pressed: * previous_month, next_month, previous_year, next_year,month */ onVisibleDateChange?: (event: React.ChangeEvent | undefined, action: VisibilitySelectorActions, value?: Date | DateRangeProp | number, position?: "left" | "right") => void; /** * The maximum selectable date after this all values are disabled. */ maximumDate?: Date; /** * The minimum selectable date before this all values are disabled. */ minimumDate?: Date; /** * An element placed before the Calendar */ startAdornment?: React.ReactNode; /** * Indicates if header should display the day of week. */ showDayOfWeek?: boolean; /** * Label shown when date is invalid. */ invalidDateLabel?: string; } declare type HvCalloutActionPosition = "auto" | "inline" | "bottom-right"; declare type HvCalloutClasses = ExtractNames; declare interface HvCalloutProps extends Omit { /** The title to display. */ title?: React.ReactNode; /** The message to display. */ children?: React.ReactNode; /** Variant of the snackbar. */ variant?: HvCalloutVariant; /** Controls if the associated icon to the variant should be shown. */ showIcon?: boolean; /** Controls whether to show the close icon */ showClose?: boolean; /** Custom icon to replace the variant default. */ customIcon?: React.ReactNode; /** @inheritdoc */ onClose?: SnackbarProps["onClose"]; /** Actions to display on the right side. */ actions?: HvActionsGenericProps["actions"]; /** The callback function called when an action is triggered, receiving `action` as parameter. */ onAction?: HvActionsGenericProps["onAction"]; /** The position property of the header. */ actionsPosition?: HvCalloutActionPosition; /** The props to pass down to the Action Container. */ actionProps?: Partial; /** The size of the banner. */ size?: "large" | "regular" | "toast" | "micro"; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvCalloutClasses; } declare type HvCalloutVariant = "success" | "warning" | "error" | "default" | "info" | "accent"; /** * A Card is a container for short, related content—similar in shape to a playing card—and serves as an entry point to more detailed information. */ export declare const HvCard: ForwardRefExoticComponent>; export declare type HvCardClasses = ExtractNames; export declare const HvCardContent: (props: HvCardContentProps) => JSX_2.Element; export declare type HvCardContentClasses = ExtractNames; export declare interface HvCardContentProps extends Omit { /** The function that will be executed when this section is clicked. */ onClick?: (event: React.SyntheticEvent) => void; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvCardContentClasses; } export declare const HvCardHeader: (props: HvCardHeaderProps) => JSX_2.Element; export declare type HvCardHeaderClasses = ExtractNames; export declare interface HvCardHeaderProps extends Omit { /** The renderable content inside the title slot of the header. */ title: React.ReactNode; /** The renderable content inside the subheader slot of the header. */ subheader?: React.ReactNode; /** The renderable content inside the icon slot of the header. */ icon?: React.ReactNode; /** The function that will be executed when this section is clicked. */ onClick?: React.MouseEventHandler | undefined; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvCardHeaderClasses; } export declare const HvCardMedia: ({ classes: classesProp, className, children, ...others }: HvCardMediaProps) => JSX_2.Element; export declare type HvCardMediaClasses = ExtractNames; export declare interface HvCardMediaProps extends Omit, React.ImgHTMLAttributes { /** The title of the media. */ title?: string; /** The function that will be executed when this section is clicked. */ onClick?: React.MouseEventHandler | undefined; /** The component used for the root node. Either a string to use a HTML element or a component. */ component?: React.ElementType; /** The image to display. */ image?: string; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvCardMediaClasses; } export declare interface HvCardProps extends HvBaseProps { /** The renderable content inside the icon slot of the header. */ icon?: React.ReactNode; /** Whether the card is selectable. */ selectable?: boolean; /** Whether the card is currently selected. */ selected?: boolean; /** The background color of the card. */ bgcolor?: "sema0" | HvColorAny; /** The border color at the top of the card. */ statusColor?: "sema0" | HvColorAny; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvCardClasses; } /** A Carousel is used to browse content—commonly images, but also text, video, or charts. It highlights one item at a time while giving users a sense of the total content available. */ export declare const HvCarousel: ForwardRefExoticComponent>; export declare type HvCarouselClasses = ExtractNames; export declare const HvCarouselControls: (props: HvCarouselControlsProps) => JSX_2.Element; declare interface HvCarouselControlsProps extends HvBaseProps, Pick { showDots?: boolean; classes?: ExtractNames; actions?: React.ReactNode; onPreviousClick?: React.MouseEventHandler; onNextClick?: React.MouseEventHandler; /** Labels used on the component. */ labels?: Partial; } export declare interface HvCarouselProps extends HvBaseProps { /** A Jss Object used to override or extend the styles applied. */ classes?: HvCarouselClasses; /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */ height?: React.CSSProperties["height"]; /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */ thumbnailWidth?: React.CSSProperties["width"]; /** Title of the carousel */ title?: React.ReactNode; /** Content slides to be displayed. @see `` */ children?: React.ReactNode; /** Custom content to render in the actions area */ actions?: React.ReactNode; /** Whether Carousel is in "xs mode" - to use in embedded contexts */ xs?: boolean; /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */ showDots?: boolean; /** Whether to show the counter on the top-right corner of the active slide */ showCounter?: boolean; /** Whether to show the back/forwards buttons over the active slide */ showSlideControls?: boolean; /** Whether to enable the fullscreen toggle button */ showFullscreen?: boolean; /** Whether to hide the thumbnails. Hidden by default in "xs" mode */ hideThumbnails?: boolean; /** Controls position. */ controlsPosition?: "top" | "bottom"; /** Thumbnails position. */ thumbnailsPosition?: "top" | "bottom"; /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */ carouselOptions?: Parameters[0]; /** Function that renders the thumbnail. */ renderThumbnail?: (index: number) => React.ReactNode; /** The callback fired when the active slide changes. */ onChange?: (index: number) => void; /** The callback fired fullscreen is toggled. */ onFullscreen?: (event: React.MouseEvent, isFullscreen: boolean) => void; /** Labels used on the component. */ labels?: Partial; } /** * A container to use as `children` of `HvCarousel`. * Pass `img` props directly to it, or `children` for any custom content */ export declare const HvCarouselSlide: ({ classes: classesProp, className, children, size: flexBasis, src, alt, ...props }: HvCarouselSlideProps) => JSX_2.Element; export declare type HvCarouselSlideClasses = ExtractNames; export declare interface HvCarouselSlideProps extends React.ImgHTMLAttributes { /** A Jss Object used to override or extend the styles applied. */ classes?: HvCarouselSlideClasses; /** The width of the Slide. Defaults to `100%` */ size?: string; /** Content of a slide to be displayed */ children?: React.ReactNode; } export declare const HvCarouselThumbnails: ForwardRefExoticComponent>; declare interface HvCarouselThumbnailsProps extends HvBaseProps, Pick { width?: React.CSSProperties["width"]; classes?: ExtractNames; onThumbnailClick?: (event: React.MouseEvent, index: number) => void; thumbnailProps?: Partial; showDots?: boolean; renderThumbnail?: (index: number) => React.ReactNode; } export declare interface HvCellInstance, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, V = any> extends Omit, "column" | "row" | "getCellProps">, Partial> { column: HvColumnInstance; row: HvRowInstance; getCellProps: (propGetter?: HvCellPropGetter) => HvUseTableCellProps; } declare type HvCellPropGetter, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvPropGetter; }>; export declare interface HvCellProps, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, V = any> extends HvTableInstance { column: HvColumnInstance; row: HvRowInstance; cell: HvCellInstance; value: CellValue; } /** * Displays the capacity and current usage of a text input box (character count by default). * * Use the character counter when there is a character or word limit. * By itself it doesn't block the user from going above the limit. */ export declare const HvCharCounter: (props: HvCharCounterProps) => JSX_2.Element; export declare type HvCharCounterClasses = ExtractNames; export declare interface HvCharCounterProps extends HvBaseProps { /** The string that separates the current char quantity from the max quantity. */ separator?: string; /** The maximum allowed length of the characters. */ maxCharQuantity: number; /** The current char quantity to be rendered. */ currentCharQuantity?: number; /** If `true` the counter is disabled. */ disabled?: boolean; /** If `true` the info message won't have margins. */ disableGutter?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvCharCounterClasses; } /** * A Checkbox lets users select one or more options. * It’s commonly used in a Checkbox Group to present multiple choices, but can also be used individually to toggle a single option. */ export declare const HvCheckBox: ForwardRefExoticComponent & RefAttributes>; export declare type HvCheckBoxClasses = ExtractNames; /** * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes. */ export declare const HvCheckBoxGroup: ForwardRefExoticComponent>; export declare type HvCheckBoxGroupClasses = ExtractNames; export declare interface HvCheckBoxGroupProps extends HvBaseProps { /** * The form element name. * * It is propagated to the children checkboxes, unless they already have one. */ name?: string; /** * The value of the form element. An array of values represented in the child checkboxes. * * When defined the checkbox group state becomes controlled. */ value?: any[]; /** * When uncontrolled, defines the initial value. */ defaultValue?: any[]; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be provided instead. */ label?: React.ReactNode; /** * Provide additional descriptive text for the form element. */ description?: React.ReactNode; /** * Indicates that the form element is disabled. * If `true` the state is propagated to the children checkboxes. */ disabled?: boolean; /** * Indicates that the form element is not editable. * If `true` the state is propagated to the children checkboxes. */ readOnly?: boolean; /** * Indicates that user input is required on the form element. */ required?: boolean; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to the state. */ status?: HvFormStatus; /** * The error message to show when the validation status is "invalid". * * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided. */ statusMessage?: React.ReactNode; /** * The callback fired when the value changes. */ onChange?: (event: React.ChangeEvent, value: any[]) => void; /** * Indicates whether the checkbox group's orientation is horizontal or vertical. * * Defaults to vertical. */ orientation?: "vertical" | "horizontal"; /** * Indicates if an additional select all checkbox should be shown. */ showSelectAll?: boolean; /** * Custom label for select all checkbox conjunction */ selectAllConjunctionLabel?: string; /** * A Jss Object used to override or extend the component styles applied. */ classes?: HvCheckBoxGroupClasses; } export declare interface HvCheckBoxProps extends Omit { /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be inputted via inputProps. */ label?: React.ReactNode; /** * Properties passed on to the label element. */ labelProps?: HvLabelProps; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to the state. */ status?: HvFormStatus; /** * The error message to show when the validation status is "invalid". * * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided. */ statusMessage?: React.ReactNode; /** * The position of the label relative to the control. */ labelPosition?: "left" | "right"; /** * A Jss Object used to override or extend the styles applied to the checkbox. */ classes?: HvCheckBoxClasses; } export declare type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent; export { HvColor } export { HvColorAny } /** * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation. * It receives a color string in HEX format and outputs an HEX formatted color. */ export declare const HvColorPicker: ForwardRefExoticComponent>; export declare type HvColorPickerClasses = ExtractNames; export declare interface HvColorPickerProps { "aria-label"?: string; "aria-labelledby"?: string; "aria-describedby"?: string; /** Class names to be applied. */ className?: string; /** Id to be applied to the form element root node. */ id?: string; /** The form element name. */ name?: string; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be provided instead. */ label?: React.ReactNode; /** Provide additional descriptive text for the form element. */ description?: React.ReactNode; /** Indicates that user input is required on the form element. */ required?: boolean; /** The value color, in HEX format. */ value?: string; /** The default value color, in HEX format. */ defaultValue?: string; /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */ disabled?: boolean; /** If `true` the dropdown starts opened if `false` it starts closed. */ expanded?: boolean; /** When uncontrolled, defines the initial expanded state. */ defaultExpanded?: boolean; /** A function to be executed whenever the color changes. */ onChange?: (color: string) => void; /** A function to be executed whenever the color change is complete. */ onChangeComplete?: (color: string) => void; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvColorPickerClasses; /** The placeholder value when nothing is selected. */ placeholder?: string; /** Recommended colors. The colors are HEX values. */ recommendedColors?: HvColorAny[]; /** Recommended colors position. */ recommendedColorsPosition?: "top" | "bottom"; /** If `true`, the labels are shown. If `false`, they are not shown. */ showLabels?: boolean; /** An object containing all the labels. */ labels?: Partial; /** Icon type for the input's end adornment. */ dropdownIcon?: "arrow" | "colorPicker"; /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */ iconOnly?: boolean; /** If `true`, the saved colors area is shown. If `false`, it is not shown. */ showSavedColors?: boolean; /** If `true`, the custom colors area is shown. If `false`, it is not shown. */ showCustomColors?: boolean; /** The saved colors. The colors are HEX values. */ savedColorsValue?: string[]; /** The default saved colors. The colors are HEX values. */ defaultSavedColorsValue?: string[]; /** Callback fired when a new saved color is added. */ onSavedColorAdded?: (color?: string) => void; /** Callback fired when a new saved color is removed. */ onSavedColorRemoved?: (color?: string) => void; /** Aria label to apply to delete saved color button. */ deleteSavedColorButtonAriaLabel?: string; /** Aria label to apply to add saved color button. */ addSavedColorButtonAriaLabel?: string; } declare type HvColumnGroup, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvTableColumnOptions & HvColumnGroupInterface & ({ Header: H; } | ({ id: IdType; } & { Header: H; })) & { accessor?: Accessor; }; declare interface HvColumnGroupInterface, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> { columns: Array>; } export declare interface HvColumnInstance, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> extends Omit, "Cell" | "columns" | "parent" | "placeholderOf" | "id" | "Header" | "getHeaderProps" | "getFooterProps" | "Footer">, HvTableColumnOptions, Partial>, Partial>, Partial>, Partial> { Cell?: Renderer>; columns: Array>; parent: HvColumnInstance; placeholderOf?: HvColumnInstance; getHeaderProps: (propGetter?: HvHeaderPropGetter) => HvUseTableHeaderProps; getFooterProps: (propGetter?: HvFooterPropGetter) => HvUseTableFooterProps; } declare interface HvColumnInterfaceBasedOnValue, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, V = any> { Cell?: Renderer>; } declare type HvColumnWithLooseAccessor, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvTableColumnOptions & HvColumnInterfaceBasedOnValue & ({ Header: H; } | { id: IdType; } | { accessor: keyof D extends never ? IdType : never; }) & { accessor?: keyof D extends never ? IdType | Accessor : Accessor; }; declare type HvColumnWithStrictAccessor, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvTableColumnOptions & ValueOf<{ [K in keyof D]: { accessor: K; } & HvColumnInterfaceBasedOnValue; }>; /** The container enables you to center your content horizontally and bound it to a specific breakpoint. */ export declare const HvContainer: ForwardRefExoticComponent & RefAttributes>; export declare type HvContainerClasses = ExtractNames; export declare interface HvContainerProps extends Omit { /** * The component used for the root node. * Either a string to use a DOM element or a component. */ component?: React.ElementType; /** * Determine the max-width of the container. * The container width grows with the size of the screen. * Set to `false` to disable `maxWidth`. */ maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | false; /** If `true`, the left and right padding is removed. */ disableGutters?: boolean; /** * Set the max-width to match the min-width of the current breakpoint. * This is useful if you'd prefer to design for a fixed set of sizes * instead of trying to accommodate a fully fluid viewport. * It's fluid by default. */ fixed?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvContainerClasses; } export declare const HvControls: (props: HvControlsProps) => JSX_2.Element; export declare type HvControlsClasses = ExtractNames; export declare interface HvControlsProps extends HvBaseProps { /** * An instance of useHvTable or useTable used to manage the data * if this is not provided data sorting and search must be handled externally */ callbacks?: { setSortBy?: HvTableInstance["setSortBy"]; setGlobalFilter?: HvTableInstance["setGlobalFilter"]; }; /** * Views configuration required for the view buttons */ views?: HvControlsViewConfiguration[]; /** * What view is selected by default */ defaultView?: string; /** * Sets the selected view to be the one specified * if specified the component is in a controlled state and it won't change it state * unless specified externally */ selectedView?: string; /** * Callback called when the view switcher button is pressed */ onViewChange?: (event: React.MouseEvent, id: string) => void; /** * if `true` the button to switch views is not rendered */ hideViewSwitcher?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvControlsClasses; } export declare interface HvControlsViewConfiguration extends Record { id?: string; label?: string; icon?: React.ReactNode; } export declare function hvDateColumn, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig): HvTableColumnConfig; export declare const HvDateColumnCell: ({ date }: HvDateColumnCellProp) => JSX_2.Element; export declare interface HvDateColumnCellProp { /** Date to render. */ date?: string; } /** * A date picker, popup calendar or date range picker is a graphical user * interface widget which allows the user to select a date from a calendar. */ export declare const HvDatePicker: ForwardRefExoticComponent>; export declare type HvDatePickerClasses = ExtractNames; export declare interface HvDatePickerProps extends Omit, Pick { /** * Identifies the element that provides an error message for the date picker. * * Will only be used when the validation status is invalid. */ "aria-errormessage"?: string; /** * The callback fired when the value changes. */ onChange?: (date?: Date, endDate?: Date) => void; /** * The callback fired when user clicks on cancel. */ onCancel?: () => void; /** * The callback fired when user clicks on clear. */ onClear?: () => void; /** * An object containing all the labels for the datepicker. */ labels?: Partial; /** * The initial value of the input when in single calendar mode. */ value?: Date; /** * The initial value for the start date when in range mode. */ startValue?: Date; /** * The initial value for the end date when in range mode. */ endValue?: Date; /** * Flag informing if the the component should be in range mode or in single mode. */ rangeMode?: boolean; /** * The placement where the calendar should be placed according to the input. Options are `left` or `right`. * Note this prop only affects the calendar when in `rangeMode`. */ horizontalPlacement?: "left" | "right"; /** * The calendar locale. If undefined, it uses calendar default */ locale?: string; /** * Controls if actions buttons are visible at the calendar. */ showActions?: boolean; /** * Controls if clear button is visible at the calendar, * only works if showing actions or in range mode. */ showClear?: boolean; /** * Sets if the calendar container should follow the date picker input out of the screen or stay visible. */ escapeWithReference?: boolean; /** * An element placed before the Calendar */ startAdornment?: React.ReactNode; /** * An object containing props to be passed onto the baseDropdown. */ dropdownProps?: Partial; /** * Additional props passed to the HvCalendar component. */ calendarProps?: Partial; /** * A Jss Object used to override or extend the component styles applied. */ classes?: HvDatePickerClasses; } /** * A Dialog is a graphical control element in the form of a small panel that communicates information and prompts for a response. */ export declare const HvDialog: ForwardRefExoticComponent & RefAttributes>; export declare type HvDialogActionClasses = ExtractNames; export declare const HvDialogActions: (props: HvDialogActionsProps) => JSX_2.Element; export declare interface HvDialogActionsProps extends Omit { /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvDialogActionClasses; } export declare type HvDialogClasses = ExtractNames; export declare const HvDialogContent: (props: HvDialogContentProps) => JSX_2.Element; export declare type HvDialogContentClasses = ExtractNames; export declare interface HvDialogContentProps extends Omit { /** Content should be indented in relationship to the Dialog title. */ indentContent?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvDialogContentClasses; } export declare interface HvDialogProps extends Omit { /** Current state of the Dialog. */ open?: boolean; /** Callback fired when the component requests to be closed. */ onClose?: (event: React.MouseEvent | {}, reason?: "escapeKeyDown" | "backdropClick") => void; /** @inheritdoc */ maxWidth?: DialogProps["maxWidth"]; /** @inheritdoc */ fullWidth?: DialogProps["fullWidth"]; /** If true, the dialog stretches vertically, limited by the margins. @default false */ fullHeight?: boolean; /** Title for the button close. */ buttonTitle?: string; /** Prevent closing the dialog when clicking on the backdrop. */ disableBackdropClick?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvDialogClasses; /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */ variant?: "success" | "error" | "warning"; /** @ignore */ ref?: DialogProps["ref"]; /** @ignore */ component?: DialogProps["component"]; } export declare const HvDialogTitle: (props: HvDialogTitleProps) => JSX_2.Element; export declare type HvDialogTitleClasses = ExtractNames; export declare interface HvDialogTitleProps extends Omit { /** Variant of the dialog title. */ variant?: HvDialogTitleVariant; /** Controls if the associated icon to the variant should be shown. */ showIcon?: boolean; /** Custom icon to replace the variant default. */ customIcon?: React.ReactNode; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvDialogTitleClasses; } export declare type HvDialogTitleVariant = "success" | "warning" | "error" | "info" | "default"; /** * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application. * This component uses Radio Buttons to represent each page. */ export declare const HvDotPagination: (props: HvDotPaginationProps) => JSX_2.Element; export declare type HvDotPaginationClasses = ExtractNames; export declare interface HvDotPaginationProps extends Omit { /** * Icon to override the default one used for the unselected state. * * The default icon is `OtherStep`. */ unselectedIcon?: React.ReactElement; /** * Icon to override the default one used for the selected state. * * The default icon is `CurrentStep`. */ selectedIcon?: React.ReactElement; /** * The number of pages the component has. */ pages?: number; /** * The currently selected page. */ page?: number; /** * The callback fired when the page value changes. */ onPageChange?: (event: React.ChangeEvent, page: number) => void; /** * The callback fired to get the page aria label. */ getItemAriaLabel?: (page: number) => string; /** * A Jss Object used to override or extend the styles applied. */ classes?: HvDotPaginationClasses; } /** * The Drawer component provides a foundation to create a sliding pane. * It only provides the pane with a close button, the rest of the * content can be customized. */ export declare const HvDrawer: ForwardRefExoticComponent & RefAttributes>; export declare type HvDrawerClasses = ExtractNames; export declare interface HvDrawerProps extends Omit { /** * Class names to be applied. */ className?: string; /** * Id to be applied to the root node. */ id?: string; /** * A Jss Object used to override or extend the styles applied. */ classes?: HvDrawerClasses; /** * Components of the Drawer. */ children?: React.ReactNode; /** * Current state of the Drawer. */ open?: boolean; /** * Function executed on close. * Extended from Modal from material-ui * */ onClose?: (event: React.SyntheticEvent, reason?: "escapeKeyDown" | "backdropClick") => void; /** * The side the drawer opens from. */ anchor?: "left" | "top" | "right" | "bottom"; /** * Title for the button close. */ buttonTitle?: string; /** * Prevent closing the dialog when clicking on the backdrop. */ disableBackdropClick?: boolean; /** @ignore */ ref?: DrawerProps["ref"]; /** @ignore */ component?: DrawerProps["component"]; } /** * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list. */ export declare const HvDropdown: (props: HvDropdownProps & RefAttributes) => React.ReactNode; export declare type HvDropdownClasses = ExtractNames; export declare function hvDropdownColumn, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig, id: string | undefined, placeholder: string, disabledPlaceholder: string, onChange?: (identifier: string, value: HvListValue) => void, dropdownProps?: HvDropdownProps): HvTableColumnConfig; export declare const HvDropdownColumnCell: (props: HvDropdownProps & RefAttributes) => React.ReactNode; export declare interface HvDropdownColumnCellProp extends HvDropdownProps { } export declare type HvDropdownLabels = Partial; declare type HvDropdownListClasses = ExtractNames; declare interface HvDropdownListProps { /** * Id to be applied to the root node. */ id?: string; /** * A Jss Object used to override or extend the component styles. */ classes?: HvDropdownListClasses; /** * The list to be rendered. */ values?: HvListValue[]; /** * If true renders a multi select list. */ multiSelect?: boolean; /** * If true renders the search component. */ showSearch?: boolean; /** * A function to be executed whenever a item is selected in the list * or the Apply button is activated (when `multiSelect` is `true`). */ onChange: ( /** An array containing the selected values */ listValues: HvListValue[], /** If `true` the selection if finally committed the dropdown header text should reflect the new selection */ commitChanges: boolean, /** If `true` the dropdown should toggle it's current state */ toggle: boolean, /** If `true` the dropdown will call onChange */ notifyChanges: boolean) => void; /** * A function to be executed whenever the Cancel button is activated. */ onCancel: (event: React.MouseEvent) => void; /** * An object containing all the labels for the dropdown. */ labels?: HvDropdownLabels; /** * If 'true' the dropdown will notify on the first render. */ notifyChangesOnFirstRender?: boolean; /** * If `true`, selection can be toggled when single selection. */ singleSelectionToggle?: boolean; /** * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */ height?: number; /** * Experimental. Max height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. */ maxHeight?: number; /** * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */ virtualized?: boolean; popperStyles?: CSSStyleDeclaration; } /** * A dropdown menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list. */ export declare const HvDropDownMenu: ForwardRefExoticComponent>; export declare type HvDropDownMenuClasses = ExtractNames; export declare interface HvDropDownMenuProps extends HvBaseProps { /** Icon. */ icon?: React.ReactElement; /** * A list containing the elements to be rendered. * * - label: The label of the element to be rendered. * - selected: The selection state of the element. * - disabled: The disabled state of the element. * - icon: The icon node to be rendered on the left. * - showNavIcon: If true renders the navigation icon on the right. */ dataList: HvListValue[]; /** Placement of the dropdown. */ placement?: "left" | "right"; /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */ disablePortal?: boolean; /** Function executed on toggle of the dropdown. Should receive the open status. */ onToggle?: (event: Event | React.KeyboardEvent | React.ChangeEvent | React.MouseEvent, open: boolean) => void; /** Function executed in each onClick. Should received the clicked element. */ onClick?: (event: React.ChangeEvent | React.MouseEvent, value: HvListValue) => void; /** Keep the Dropdown Menu opened after clicking one option */ keepOpened?: boolean; /** Defines if the component is disabled. */ disabled?: boolean; /** If true it should be displayed open. */ expanded?: boolean; /** When uncontrolled, defines the initial expanded state. */ defaultExpanded?: boolean; /** The variant to be used in the header. */ variant?: HvButtonVariant; /** Button size. */ size?: HvSize; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvDropDownMenuClasses; /** An object containing all the labels. */ labels?: Partial; } export declare const HvDropdownPanel: (props: HvDropdownPanelProps) => JSX_2.Element; export declare interface HvDropdownPanelProps extends Omit, Pick { variableWidth?: boolean; classes?: ExtractNames; containerId?: string; onToggle?: (event: any) => void; onFirstUpdate?: OptionsGeneric["onFirstUpdate"]; onClickAway: ClickAwayListenerProps["onClickAway"]; } export declare interface HvDropdownProps extends Omit, Pick { /** * A Jss Object used to override or extend the component styles applied. */ classes?: HvDropdownClasses; /** * The placeholder value when nothing is selected. */ placeholder?: string; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to the state. */ status?: HvDropdownStatus; /** * The error message to show when the validation status is "invalid". * * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided. */ statusMessage?: any; /** * Identifies the element that provides an error message for the dropdown. * * Will only be used when the validation status is invalid. */ "aria-errormessage"?: string; /** * The callback fired when the value changes. */ onChange?: (selected: Multiple extends true ? OptionValue[] : OptionValue | undefined) => void; /** * The list to be rendered by the dropdown. */ values?: OptionValue[]; /** * If `true` the dropdown is multiSelect, if `false` the dropdown is single select. */ multiSelect?: Multiple; /** * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar. */ showSearch?: boolean; /** * If 'true' the dropdown will notify on the first render. */ notifyChangesOnFirstRender?: boolean; /** * An object containing all the labels for the dropdown. */ labels?: HvDropdownLabels; /** * If `true`, selection can be toggled when single selection. */ singleSelectionToggle?: boolean; /** * Callback called when the user cancels the changes. * * Called when the cancel button is used and when the user clicks outside the open container. * * @param {object} event The event source of the callback. */ onCancel?: (event: Event) => void; /** * Callback called when dropdown changes the expanded state. * * @param {object} event The event source of the callback. * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`). */ onToggle?: (event: Event, open: boolean) => void; /** * Callback called when the user clicks outside the open container. * * @param {object} event The event source of the callback. */ onClickOutside?: (event: Event) => void; /** * @ignore */ onFocus?: React.FocusEventHandler; /** * @ignore */ onBlur?: React.FocusEventHandler; /** * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */ height?: number; /** * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */ maxHeight?: number; /** * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */ virtualized?: boolean; /** * Extra props passed to the dropdown. */ baseDropdownProps?: Partial; /** * Extra props passed to the list. */ listProps?: Partial; } export declare type HvDropdownStatus = "standBy" | "valid" | "invalid"; declare type HvDropZoneClasses = ExtractNames; declare type HvDropZoneLabels = Partial; declare interface HvDropZoneProps extends Pick { /** * Labels to present in FileUploader. */ labels?: HvDropZoneLabels; /** * Whether the Dropzone should accept multiple files at once. */ multiple?: boolean; /** * Files extensions accepted for upload. */ accept?: React.InputHTMLAttributes["accept"]; /** * Max upload size * */ maxFileSize: number; /** * Function responsible for processing files added to the drop zone. */ onFilesAdded?: HvFilesAddedEvent; /** * Whether the DropZone should hide labels or not. */ hideLabels?: boolean; /** * Attributes applied to the input element. */ inputProps?: React.InputHTMLAttributes; /** * A Jss Object used to override or extend the styles applied to the component. */ classes?: HvDropZoneClasses; } /** * Empty states communicate that there’s no information, data or values to display in a given context. */ export declare const HvEmptyState: ForwardRefExoticComponent>; export declare type HvEmptyStateClasses = ExtractNames; export declare interface HvEmptyStateProps extends HvBaseProps { /** Icon to be presented. */ icon: React.ReactNode; /** The title to be shown. */ title?: React.ReactNode; /** The message to be shown. */ message?: React.ReactNode; /** The action message to be shown. */ action?: React.ReactNode; /** A Jss Object used to override or extend the styles applied to the empty state component. */ classes?: HvEmptyStateClasses; } export declare function hvExpandColumn, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig, expandRowButtonAriaLabel: string, collapseRowButtonAriaLabel: string, getCanRowExpand?: (row: HvRowInstance) => boolean, ExpandedIcon?: React.ReactNode, CollapsedIcon?: React.ReactNode): HvTableColumnConfig; export declare const HvFile: (props: HvFileProps) => JSX_2.Element; export declare type HvFileClasses = ExtractNames; export declare interface HvFileData extends Omit { /** * The file id. */ id?: string; /** * The file name. */ name?: string; /** * The upload status. */ status?: "progress" | "success" | "fail"; /** * The file size in bytes. */ size?: number; /** * Upload progress in bytes. */ progress?: number; /** * Optional node representing a preview of the uploaded file. */ preview?: React.ReactNode; /** * Error message when the upload failed. */ errorMessage?: string; } export declare type HvFileProps = { /** * Id to be applied to the root node. */ id?: string; /** * File information to be displayed. */ data: HvFileData; /** * Callback fired when file is removed from list. */ onFileRemoved?: HvFileRemovedEvent; /** * Value of aria-label to apply to remove file button in file list. * */ removeFileButtonLabel?: string; /** * A Jss Object used to override or extend the styles applied to the component. */ classes?: HvFileClasses; }; export declare type HvFileRemovedEvent = (file: HvFileData) => void; export declare type HvFilesAddedEvent = (files: HvFileData[]) => void; /** * Lets the user choose one or more files from their device storage. Once chosen, * the files can be uploaded to a server or manipulated on the client side. */ export declare const HvFileUploader: (props: HvFileUploaderProps) => JSX_2.Element; export declare type HvFileUploaderClasses = ExtractNames; export declare interface HvFileUploaderLabels extends HvDropZoneLabels { /** Value of aria-label to apply to remove file button in FileList */ removeFileButtonLabel?: string; } /** * The `HvFileUploaderPreview` component is available to facilitate the styling * of the button (when clickable) and the detection of image unloading. */ export declare const HvFileUploaderPreview: (props: HvFileUploaderPreviewProps) => string | number | boolean | Iterable< ReactNode> | JSX_2.Element | null | undefined; export declare type HvFileUploaderPreviewClasses = ExtractNames; export declare interface HvFileUploaderPreviewProps extends Omit { /** * Content that represents the preview of an uploaded file. */ children: React.ReactNode; /** * Callback executed when the preview is unmounted. * * Should be used for cleaning up client-side image URLs created by `URL.createObjectURL()`. */ onUnload?: () => void; /** * If `true`, doesn't show an overlay on top of the preview when hovering. * * Only applies when `onClick` is set. */ disableOverlay?: boolean; /** * A Jss Object used to override or extend the styles applied to the component. */ classes?: HvFileUploaderPreviewClasses; } export declare interface HvFileUploaderProps extends HvFormElementProps { /** * An object containing all the labels. */ labels?: HvFileUploaderLabels; /** * An object used to override or extend the styles applied to the component. */ classes?: HvFileUploaderClasses; /** * The files to upload. */ fileList?: HvFileData[]; /** * Whether the Dropzone should accept multiple files at once. */ multiple?: boolean; /** * If the input is disabled or not */ disabled?: boolean; /** * Max upload size * */ maxFileSize?: number; /** File types accepted for uploading. @see [HTML input file accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */ accept?: HvDropZoneProps["accept"]; /** * Callback fired when files are added. */ onFilesAdded?: HvFilesAddedEvent; /** * Callback fired when file is removed from list. */ onFileRemoved?: HvFileRemovedEvent; /** * Whether the DropZone should hide labels or not. */ hideLabels?: boolean; /** * Attributes applied to the input element. */ inputProps?: React.InputHTMLAttributes; } /** A Filter Group is a UI pattern used to organize and apply multiple filters to a dataset, helping users refine and narrow down results. */ export declare const HvFilterGroup: ForwardRefExoticComponent>; export declare type HvFilterGroupClasses = ExtractNames; declare type HvFilterGroupContentClasses = ExtractNames; declare interface HvFilterGroupContentProps extends Omit { description?: React.ReactNode; status?: HvFormStatus; onChange?: (event: React.MouseEvent, value?: HvFilterGroupValue) => void; onCancel?: (event: React.MouseEvent | Event) => void; onClear?: (event: React.MouseEvent) => void; labels?: HvFilterGroupLabels; horizontalPlacement?: HvFilterGroupHorizontalPlacement; disablePortal?: boolean; escapeWithReference?: boolean; height?: string | number; leftEmptyElement?: React.ReactNode; rightEmptyElement?: React.ReactNode; disabled?: boolean; iconOnly?: boolean; classes?: HvFilterGroupContentClasses; } export declare type HvFilterGroupFilters = { id: string; name: string; data: { id: string | number; name: string; disabled?: boolean; }[]; }[]; export declare type HvFilterGroupHorizontalPlacement = "left" | "right"; export declare type HvFilterGroupLabels = Partial; export declare interface HvFilterGroupProps extends Omit { /** The initial value of the input when in single calendar mode. */ filters: HvFilterGroupFilters; /** The form element name. */ name?: string; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be provided instead. */ label?: React.ReactNode; /** Provide additional descriptive text for the form element. */ description?: React.ReactNode; /** Indicates that the form element is disabled. */ disabled?: boolean; /** Indicates that user input is required on the form element. */ required?: boolean; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to the state. */ status?: HvFormStatus; /** The error message to show when `status` is "invalid". Defaults to "Required". */ statusMessage?: React.ReactNode; /** The callback fired when the cancel button is clicked. */ onCancel?: (event: React.MouseEvent | Event) => void; /** The callback fired when the clear filters button is clicked. */ onClear?: (event: React.MouseEvent) => void; /** The callback fired when the value changes. */ onChange?: (event: React.MouseEvent, value?: HvFilterGroupValue) => void; /** An Object containing the various text associated with the input. */ labels?: HvFilterGroupLabels; /** The placeholder value when nothing is selected. */ placeholder?: string; /** The default value of the filter group. If defined the clear action will reset to it. */ defaultValue?: HvFilterGroupValue; /** The value of the filter group. */ value?: HvFilterGroupValue; /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */ horizontalPlacement?: HvFilterGroupHorizontalPlacement; /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */ disablePortal?: boolean; /** Sets if the filter container should be out of the screen or stay visible. */ escapeWithReference?: boolean; /** The height of the filter panel, between 295 and 425. Defaults to 350 */ height?: number | string; /** The filter content props */ filterContentProps?: Partial; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvFilterGroupClasses; } export declare type HvFilterGroupValue = (string | number)[][]; /** * A Footer is a way of providing extra information at the end of a page. */ export declare const HvFooter: ForwardRefExoticComponent>; export declare type HvFooterClasses = ExtractNames; declare type HvFooterPropGetter, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvPropGetter; }>; export declare interface HvFooterProps extends HvBaseProps { /** Footer name. */ name?: React.ReactNode; /** Footer copyright. */ copyright?: React.ReactNode; /** Footer links. */ links?: React.ReactNode; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvFooterClasses; } declare type HvFooterProps_2> = HvTableInstance & { column: HvColumnInstance; }; /** * Provides form-related context (ie. required/disabled/readOnly) for building form components, * analogous to MUI's [`FormControl`](https://mui.com/material-ui/api/form-control/) component. * * It is used internally to build UI Kit's form components (eg. `HvInput`, `HvDatePicker`), and can be used to build custom form components. * * It exposes the common properties to be shared between all form components: `required`, `disabled`, `readOnly`, and `status`. * * Along with the properties above, form components also share the `value`/`defaultValue` and `onChange` props, * used to control the value of the form component, analogous to the native `input` component. */ export declare const HvFormElement: { (props: HvFormElementProps): JSX_2.Element; formElementType: string; }; export declare type HvFormElementClasses = ExtractNames; declare interface HvFormElementContextValue { /** id to be applied to the form element root node. */ id?: string; /** * Name of the form element. * * Part of a name/value pair, should be the name property of the underling native input. */ name?: string; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to the state. */ status?: HvFormStatus; /** Whether the form element is disabled. */ disabled?: boolean; /** Indicates that user input is required on the form element. */ required?: boolean; /** Indicates that the form element is not editable. */ readOnly?: boolean; } export declare interface HvFormElementProps extends HvFormElementContextValue, HvBaseProps { /** * Current value of the form element. * * Part of a name/value pair, should be the value property of the underling native input. */ value?: any; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be provided instead. */ label?: React.ReactNode; /** Provide additional descriptive text for the form element. */ description?: React.ReactNode; /** The error message to show when `status` is "invalid". */ statusMessage?: string; /** The callback fired when the value changes. */ onChange?: (event: React.FormEvent) => void; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvFormElementClasses; } export declare type HvFormStatus = "standBy" | "valid" | "invalid" | "empty"; /** * Global Actions are actions that affect the entire page they live in. * They should persist while scrolling down the screen. * * It uses `variant="global"` by default, rendering an `h1` element and applying sticky positioning. * Use `variant="section"` to group related content blocks. * Use it sparingly, as it introduces strong visual separation, which may not always be necessary. */ export declare const HvGlobalActions: ForwardRefExoticComponent>; export declare type HvGlobalActionsClasses = ExtractNames; export declare type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6; export declare type HvGlobalActionsPosition = "sticky" | "fixed" | "relative"; export declare interface HvGlobalActionsProps extends HvBaseProps { /** Text to display in the component. */ title?: React.ReactNode; /** Denotes if this is a global or section component. */ variant?: HvGlobalActionsVariant; /** User can pass in a fully customized button or false for when the back button should not be rendered. */ backButton?: React.ReactNode; /** Heading Level to apply to Title Area. */ headingLevel?: HvGlobalActionsHeadingLevel; /** * Position of the Global Actions. * @default variant === "global" ? "sticky" : "relative" */ position?: HvGlobalActionsPosition; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvGlobalActionsClasses; } export declare type HvGlobalActionsVariant = "global" | "section"; /** * The grid creates visual consistency between layouts while allowing flexibility * across a wide variety of designs. This component is based on a 12-column grid layout. * * It's based on the [Material UI Grid](https://mui.com/material-ui/react-grid/). * * However, the number of columns is set to 12 for all breakpoints, as it serves most * of the use cases and simplifies the implementation. * To opt-in to the Design System directives, you can set the `columns` prop to `auto`. * * Also, the Design System specifications are omissive about the horizontal gutters. * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint. * It can be overridden by setting the `rowSpacing` prop. */ export declare const HvGrid: ForwardRefExoticComponent & RefAttributes>; export declare interface HvGridBreakpoint { cols?: number; maxWidth?: number; minWidth?: number; spacing?: HvBreakpoints; } export declare type HvGridClasses = ExtractNames; export declare type HvGridDirection = "row" | "row-reverse" | "column" | "column-reverse"; export declare interface HvGridProps extends Omit { /** * If `true`, the component will have the flex *container* behavior. * You should be wrapping *items* with a *container*. */ container?: boolean; /** * If `true`, the component will have the flex *item* behavior. * You should be wrapping *items* with a *container*. */ item?: boolean; /** * Defines the space between the type item component. It can only be used on a type container component. * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor * (number between 0 and 10), breakpoint or auto. */ spacing?: HvGridSpacing | number; /** * Defines the vertical space between the type item component. It can only be used on a type container component. * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor * (number between 0 and 10), breakpoint or auto. * It overrides the value of the spacing prop. */ rowSpacing?: HvGridSpacing | number; /** * Defines the horizontal space between the type item component. It can only be used on a type container component. * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor * (number between 0 and 10), breakpoint or auto. * It overrides the value of the spacing prop. */ columnSpacing?: HvGridSpacing | number; /** * The number of columns. * Defaults to a 12-column grid. * The value "auto" implements the Design System directives in terms of variable number of columns. * @default 12 */ columns?: "auto" | GridLegacyProps["columns"]; /** * Defines the `flex-direction` style property. * It is applied for all screen sizes. */ direction?: HvGridDirection; /** * Defines the `justify-content` style property. * It is applied for all screen sizes. */ justify?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly"; /** * Defines the number of grids the component is going to use. * It's applied for all the screen sizes with the lowest priority. */ xs?: number | boolean; /** * Defines the number of grids the component is going to use. * It's applied for the `sm` breakpoint and wider screens if not overridden. */ sm?: number | boolean; /** * Defines the number of grids the component is going to use. * It's applied for the `md` breakpoint and wider screens if not overridden. */ md?: number | boolean; /** * Defines the number of grids the component is going to use. * It's applied for the `lg` breakpoint and wider screens if not overridden. */ lg?: number | boolean; /** * Defines the number of grids the component is going to use. * It's applied for the `xl` breakpoint and wider screens. */ xl?: number | boolean; /** * Defines the `flex-wrap` style property. * It's applied for all screen sizes. */ wrap?: "nowrap" | "wrap" | "wrap-reverse"; /** * If `true`, it sets `min-width: 0` on the item. * Refer to the limitations section of the documentation to better understand the use case. */ zeroMinWidth?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvGridClasses; } export declare type HvGridSpacing = "xs" | "sm" | "md" | "lg" | "xl" | "auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; /** * Header component is used to render a header bar with logo and brand name, navigation and actions. */ export declare const HvHeader: ForwardRefExoticComponent>; export declare const HvHeaderActions: ForwardRefExoticComponent>; export declare type HvHeaderActionsClasses = ExtractNames; export declare interface HvHeaderActionsProps extends HvBaseProps { classes?: HvHeaderActionsClasses; } /** * Header component is used to render a header bar with logo and brand name, navigation and actions. */ export declare const HvHeaderBrand: ForwardRefExoticComponent>; export declare type HvHeaderBrandClasses = ExtractNames; export declare interface HvHeaderBrandProps extends HvBaseProps { logo?: React.ReactNode; name?: string; classes?: HvHeaderBrandClasses; } export declare type HvHeaderClasses = ExtractNames; declare interface HvHeaderGroup, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> extends HvColumnInstance, Omit, "headers"> { headers: Array>; } export declare const HvHeaderMenuBar: (props: HvHeaderMenuBarProps) => JSX_2.Element; declare type HvHeaderMenuBarClasses = ExtractNames; declare interface HvHeaderMenuBarProps extends HvBaseProps { data: HvHeaderNavigationItemProp[]; type?: BarProps["type"]; onClick?: (event: React.MouseEvent, selection: HvHeaderNavigationItemProp) => void; levels: number; currentLevel: number; classes?: HvHeaderMenuBarClasses; } export declare const HvHeaderMenuItem: (props: HvHeaderMenuItemProps) => JSX_2.Element; declare type HvHeaderMenuItemClasses = ExtractNames; declare interface HvHeaderMenuItemProps extends HvBaseProps { item: HvHeaderNavigationItemProp; type?: string; onClick?: (event: React.MouseEvent, selection: HvHeaderNavigationItemProp) => void; levels: number; currentLevel: number; classes?: HvHeaderMenuItemClasses; } export declare const HvHeaderNavigation: ForwardRefExoticComponent>; export declare type HvHeaderNavigationClasses = ExtractNames; export declare interface HvHeaderNavigationItemProp { id: string; label: string; path?: string; href?: string; target?: string; data?: HvHeaderNavigationItemProp[]; } export declare interface HvHeaderNavigationProps extends HvBaseProps { data: HvHeaderNavigationItemProp[]; selected?: string; onClick?: (event: React.MouseEvent, selection: HvHeaderNavigationItemProp) => void; classes?: HvHeaderNavigationClasses; /** * The number of levels to show: the first level (1) or the first and second level (2). * * Defaults to `2`. * */ levels?: 1 | 2; } export declare type HvHeaderPosition = "fixed" | "absolute" | "sticky" | "static" | "relative"; declare type HvHeaderPropGetter, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvPropGetter; }>; export declare interface HvHeaderProps extends HvBaseProps { /** The position of the header bar */ position?: HvHeaderPosition; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvHeaderClasses; } declare type HvHeaderProps_2> = HvTableInstance & { column: HvColumnInstance; }; export declare interface HvHooks, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> extends Omit, "useOptions">, Partial>, Partial>, Partial>, Partial>, Partial>, Partial>, Partial> { useOptions: Array<(options: HvTableOptions, args: HvTableOptions) => HvTableOptions>; stateReducers: Array<(newState: HvTableState, action: ActionType, previousState?: HvTableState, instance?: HvTableState) => ReducerTableState | undefined>; columns: Array<(columns: Array>, meta: HvMeta) => Array>>; allColumns: Array<(allColumns: Array>, meta: HvMeta) => Array>>; visibleColumns: Array<(allColumns: Array>, meta: HvMeta) => Array>>; headerGroups: Array<(allColumns: Array>, meta: HvMeta) => Array>>; useInstanceBeforeDimensions: Array<(instance: HvTableInstance) => void>; useInstance: Array<(instance: HvTableInstance) => void>; useControlledState: Array<(state: HvTableState, meta: HvMeta) => HvTableState>; getTableProps: Array>; getHeaderProps: Array>; getFooterProps: Array>; getRowProps: Array>; getCellProps: Array>; useFinalInstance: Array<(instance: HvTableInstance) => void>; } export declare type HvHorizontalScrollListItemClasses = ExtractNames; /** * The `HvIconButton` component wraps a `HvTooltip` with a label around a `HvButton` with only an icon as its content. * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button. * This component provides this behavior out of the box. */ export declare const HvIconButton: (props: Omit, "children" | "ref" | "icon" | "title" | "component" | "startIcon" | "endIcon" | "focusableWhenDisabled"> & { /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */ title: React.ReactNode; /** Number of milliseconds to wait before showing the tooltip. @default 500 */ enterDelay?: HvTooltipProps["enterDelay"]; /** Tooltip placement. @default top */ placement?: HvTooltipProps["placement"]; /** Extra tooltip properties. */ tooltipProps?: Omit, "children">; } & { component?: C | undefined; } & { children?: ReactNode | undefined; } & (Omit< PropsWithoutRef>, "color" | "classes" | "size" | "disabled" | "className" | "radius" | "title" | "component" | "selected" | "variant" | "placement" | "enterDelay" | "tooltipProps" | Exclude>, "color" | "classes" | "size" | "icon" | "disabled" | "className" | "radius" | "component" | "selected" | "variant" | "startIcon" | "endIcon" | "focusableWhenDisabled"> extends infer T ? T extends Omit< PropsWithoutRef>, "color" | "classes" | "size" | "icon" | "disabled" | "className" | "radius" | "component" | "selected" | "variant" | "startIcon" | "endIcon" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "children" | "ref" | "icon" | "title" | "component" | "startIcon" | "endIcon" | "focusableWhenDisabled">> extends infer T_1 ? T_1 extends Omit< PropsWithoutRef>, "color" | "classes" | "size" | "disabled" | "className" | "radius" | "title" | "component" | "selected" | "variant" | "placement" | "enterDelay" | "tooltipProps" | Exclude>, "color" | "classes" | "size" | "icon" | "disabled" | "className" | "radius" | "component" | "selected" | "variant" | "startIcon" | "endIcon" | "focusableWhenDisabled"> extends infer T_2 ? T_2 extends Omit< PropsWithoutRef>, "color" | "classes" | "size" | "icon" | "disabled" | "className" | "radius" | "component" | "selected" | "variant" | "startIcon" | "endIcon" | "focusableWhenDisabled"> ? T_2 extends any ? T_2 : never : never : never), "children" | "ref" | "icon" | "title" | "component" | "startIcon" | "endIcon" | "focusableWhenDisabled">> ? T_1 extends any ? T_1 : never : never : never) & { ref?: PolymorphicRef | undefined; } & RefAttributes) => React.ReactNode; export declare type HvIconButtonProps = PolymorphicComponentRef, "icon" | "focusableWhenDisabled" | "title" | "startIcon" | "endIcon" | "children" | "ref" | "component"> & { /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */ title: React.ReactNode; /** Number of milliseconds to wait before showing the tooltip. @default 500 */ enterDelay?: HvTooltipProps["enterDelay"]; /** Tooltip placement. @default top */ placement?: HvTooltipProps["placement"]; /** Extra tooltip properties. */ tooltipProps?: Omit, "children">; }>; /** * This component allows using the theme utilities, such as `color` and `size` in icons from * external icon libraries, such as FontAwesome or Phosphor. * * @example * * * */ export declare const HvIconContainer: ForwardRefExoticComponent>; export declare type HvIconContainerClasses = ExtractNames; export declare interface HvIconContainerProps extends React.HTMLAttributes { classes?: HvIconContainerClasses; /** * A color to override the default icon colors. * Accepts any valid CSS color or color from the UI Kit palette. * @example "warning" */ color?: HvColorAny; /** * The size of the icon container. Takes in a `number` in pixels or any `HvSize` or `IconSize`. * * This will also affect the size of the icon by changing the `font-size`. * * @example * size={16} * size="S" * size="lg" * * @default "S" */ size?: HvSize | HvIconSize | number; /** Whether to rotate the icon 180deg. @private */ rotate?: boolean; } declare type HvIconSize = "XS" | "S" | "M" | "L"; /** * Provides the user with additional descriptive text for the form element. */ export declare const HvInfoMessage: (props: HvInfoMessageProps) => JSX_2.Element; export declare type HvInfoMessageClasses = ExtractNames; export declare interface HvInfoMessageProps extends HvTypographyProps<"label"> { /** If `true` the label is disabled. */ disabled?: boolean; /** If `true` the info message won't have margins. */ disableGutter?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvInfoMessageClasses; } /** * An Inline Editor allows the user to edit a record without making a major switch * between viewing and editing, making it an efficient method of updating a record. */ export declare const HvInlineEditor: (props: HvInputProps & RefAttributes) => React.ReactNode>(props: { /** The value of the form element. */ value?: string; /** The default value of the form element. */ defaultValue?: string; /** Whether the Edit icon should always be visible */ showIcon?: boolean; /** Variant of the HvTypography to display */ variant?: HvTypographyVariants; /** Called when the input is blurred. */ onBlur?: (event: React.FocusEvent, value: string) => void; /** Called when the input value changes. */ onChange?: (event: React.SyntheticEvent, value: string) => void; /** Called when there's a keydown event on the input. */ onKeyDown?: (event: React.KeyboardEvent | React.MouseEvent, value: string) => void; /** Props passed to the HvButton component */ buttonProps?: HvButtonProps; /** Props passed to the HvTypography text component */ typographyProps?: HvTypographyProps; /** Whether the editor is disabled or not. */ disabled?: boolean; /** A Jss Object used to override or extend the styles applied to the empty state component. */ classes?: Partial<{ root: string; input: string; inputRoot: string; text: string; largeText: string; textEmpty: string; button: string; icon: string; iconVisible: string; }>; /** The placeholder value of the input. */ placeholder?: string; } & { component?: C | undefined; } & { children?: ReactNode | undefined; } & (Omit< PropsWithoutRef>, "value" | "classes" | "disabled" | "onBlur" | "onChange" | "onKeyDown" | "component" | "defaultValue" | "placeholder" | "variant" | "showIcon" | "buttonProps" | "typographyProps"> extends infer T ? T extends Omit< PropsWithoutRef>, "value" | "classes" | "disabled" | "onBlur" | "onChange" | "onKeyDown" | "component" | "defaultValue" | "placeholder" | "variant" | "showIcon" | "buttonProps" | "typographyProps"> ? T extends any ? T : never : never : never) & { ref?: PolymorphicRef | undefined; } & RefAttributes) => React.ReactNode; export declare type HvInlineEditorClasses = ExtractNames; export declare type HvInlineEditorProps = PolymorphicComponentRef, value: string) => void; /** Called when the input value changes. */ onChange?: (event: React.SyntheticEvent, value: string) => void; /** Called when there's a keydown event on the input. */ onKeyDown?: (event: React.KeyboardEvent | React.MouseEvent, value: string) => void; /** Props passed to the HvButton component */ buttonProps?: HvButtonProps; /** Props passed to the HvTypography text component */ typographyProps?: HvTypographyProps; /** Whether the editor is disabled or not. */ disabled?: boolean; /** A Jss Object used to override or extend the styles applied to the empty state component. */ classes?: HvInlineEditorClasses; /** The placeholder value of the input. */ placeholder?: string; }>; /** The Input is a UI control that allows users to enter and edit text, typically used for collecting user-provided information. */ export declare const HvInput: (props: HvInputProps & RefAttributes) => React.ReactNode; export declare type HvInputClasses = ExtractNames; export declare type HvInputLabels = Partial; export declare interface HvInputProps extends Omit { /** @inheritdoc */ name?: string; /** @inheritdoc */ value?: React.InputHTMLAttributes["value"]; /** @inheritdoc */ defaultValue?: React.InputHTMLAttributes["value"]; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be inputted via inputProps. */ label?: React.ReactNode; /** Provide additional descriptive text for the form element. */ description?: React.ReactNode; /** @inheritdoc */ disabled?: boolean; /** @inheritdoc */ readOnly?: boolean; /** @inheritdoc */ required?: boolean; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to `checked`, depending of the values of both `required` and `checked`. */ status?: HvFormStatus; /** The error message to show when `status` is "invalid". */ statusMessage?: string; /** An informational message, used for error-prevention. Replaces `statusMessage` when it isn't visible. */ infoMessage?: React.ReactNode; /** @inheritdoc */ onChange?: (event: React.ChangeEvent, value: string) => void; /** * Callback called when the user submits the value by pressing Enter/Return. * * Also called when the search button is clicked (when `type="search"`). */ onEnter?: (event: React.KeyboardEvent, value: string) => void; /** * The function that will be executed onBlur, allows checking the validation state, * it receives the value and the validation state. */ onBlur?: (event: React.FocusEvent, value: string, validationState: HvInputValidity) => void; /** * The function that will be executed onBlur, allows checking the value state, * it receives the value. */ onFocus?: (event: React.FocusEvent, value: string) => void; /** * The function that will be executed onKeyDown, allows checking the value state, * it receives the event and value. */ onKeyDown?: (event: React.KeyboardEvent, value: string) => void; /** The input type. */ type?: React.HTMLInputTypeAttribute; /** The placeholder value of the input. */ placeholder?: string; /** Internal labels?. */ labels?: HvInputLabels & Record; /** An Object containing the various texts associated with the input. */ validationMessages?: HvValidationMessages; /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */ suggestionListCallback?: (value: string) => HvInputSuggestion[] | null; /** * If enabled, the suggestions list will be rendered using a portal. * If disabled, it will be under the DOM hierarchy of the parent component. * @default false * */ enablePortal?: boolean; /** * Whether the suggestions should be triggered once the input is focused and not only when typing. * @default false * */ suggestOnFocus?: boolean; /** * The custom validation function, it receives the value and must return * either `true` for valid or `false` for invalid, default validations would only * occur if this function is null or undefined */ validation?: (value: string) => boolean; /** If `true` it should autofocus. */ autoFocus?: boolean; /** If `true` the clear button is disabled. */ disableClear?: boolean; /** If `true` the reveal password button is disabled. Valid only when type is "password". */ disableRevealPassword?: boolean; /** If `true` the search button is disabled. Valid only when type is "search". */ disableSearchButton?: boolean; /** * If `true` the validation icon adornment is visible. Defaults to `false`. * * Currently, DS specifications define only a positive feedback icon; * errors are signaled through the border style and by displaying the error message. */ showValidationIcon?: boolean; /** A custom icon to be added into the input. */ endAdornment?: React.ReactNode; /** The maximum allowed length of the characters, if this value is null no check will be performed. */ maxCharQuantity?: number; /** The minimum allowed length of the characters, if this value is null no check will be perform. */ minCharQuantity?: number; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvInputClasses; } export declare interface HvInputSuggestion { id: string; label: string; value?: string; } declare interface HvInputValidity extends Partial> { } export declare interface HvKnobProperty { color?: string; defaultValue?: number; hidden?: boolean; fixed?: boolean; hoverColor?: string; trackColor?: string; dragColor?: string; } /** * Provides the user with a recognizable name for a given form element. */ export declare const HvLabel: (props: HvLabelProps) => JSX_2.Element; export declare type HvLabelClasses = ExtractNames; export declare interface HvLabelProps extends HvTypographyProps<"label"> { /** Id to be applied to the root node */ id?: string; /** The text to be shown by the label. */ label?: React.ReactNode; /** Whether to give label gutter spacing */ showGutter?: boolean; /** The id of the form element the label is bound to. */ htmlFor?: string; /** If `true` the label is displayed with a disabled style. */ disabled?: boolean; /** If `true`, the label will indicate that the form element is required (an `*` after the label text). */ required?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvLabelClasses; } export declare const HvLeftControl: ({ id, classes: classesProp, className, children, placeholder, onSearch, hideSearch, searchProps, ...others }: HvLeftControlProps) => JSX_2.Element; export declare type HvLeftControlClasses = ExtractNames; export declare interface HvLeftControlProps extends HvBaseProps { /** if `true` the hide sort by dropdown is not rendered */ hideSearch?: boolean; /** placeholder of the input */ placeholder?: string; /** Callback called when a search action occurs */ onSearch?: (event: React.ChangeEvent, value: string) => void; /** Extra props passed to input */ searchProps?: HvInputProps; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvLeftControlClasses; } /** * Component used to show a set of related data to the user. * @deprecated use `HvListContainer` + `HvListItem` instead */ export declare const HvList: (props: HvListProps) => JSX_2.Element | null; export declare type HvListClasses = ExtractNames; /** * A **list** is any enumeration of a set of items. * The simple list is for continuous **vertical indexes of text or icons+text**. The content of these lists must be simple: ideally simples fields. * This pattern is ideal for **selections**. It should be used inside an `HvPanel`. */ export declare const HvListContainer: ForwardRefExoticComponent>; export declare type HvListContainerClasses = ExtractNames; export declare interface HvListContainerProps extends HvBaseProps { /** * If the list items should be focusable and react to mouse over events. * Defaults to true if the list is selectable, false otherwise. */ interactive?: boolean; /** If `true` compact the vertical spacing between list items. */ condensed?: boolean; /** If `true`, the list items are _visually_ selectable. To enable selection, use `HvSelectionList` */ selectable?: boolean; /** If `true`, the list items' left and right padding is removed. */ disableGutters?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvListContainerClasses; } /** * Implements the listitem pattern, akin to the `
  • ` element. * Should be composed within a `` component. */ export declare const HvListItem: ForwardRefExoticComponent>; export declare type HvListItemClasses = ExtractNames; export declare interface HvListItemProps extends HvBaseProps { /** Indicates if the list item is selected. */ selected?: boolean; /** Indicated if the list item is _visually_ selectable */ selectable?: boolean; /** If true, the list item will be disabled. */ disabled?: boolean; /** * If the list item is focusable and reacts to mouse over events. * Defaults to true if the container list is interactive, false otherwise. */ interactive?: boolean; /** * If `true` compacts the vertical spacing intended to separate the list items. * Defaults to the value set in container list. */ condensed?: boolean; /** * If `true`, the left and right padding is removed. * Defaults to the value set in container list. */ disableGutters?: boolean; /** * Element placed before the children. * Also removes the left padding (gutter). * * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled) * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event). * If unwanted, the element should be placed directly as a child. */ startAdornment?: React.ReactNode; /** * Element placed after the children and aligned next to the margin. * Also removes the right padding (gutter). * * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled). * If unwanted, the element should be placed directly as a child. */ endAdornment?: React.ReactNode; /** Whether to show a separator after this list item */ separator?: boolean; /** The value to be set on the 'li' element */ value?: any; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvListItemClasses; } export declare type HvListLabels = Partial; export declare interface HvListProps extends HvBaseProps { /** * A list containing the elements to be rendered. * * - id: The id of the item. * - label: The label of the element to be rendered. * - selected: The selection state of the element. * - disabled: The disabled state of the element. * - isHidden: Is item visible. * - icon: The icon. * - showNavIcon: If true renders the navigation icon on the right. * - path: The path to navigate to. * - separator: Whether to show a separator after this list item. */ values: HvListValue[]; /** If true renders a multi select list. */ multiSelect?: boolean; /** * If true renders select all option for multi selection lists with selectors. * note: It will only be rendered if multiSelect and useSelector props are set to true. */ showSelectAll?: boolean; /** An object containing all the labels for the dropdown. */ labels?: HvListLabels; /** If true renders list items with radio or checkbox selectors. */ useSelector?: boolean; /** Call back fired when list item is selected. Returns selection state. */ onChange?: (value: HvListValue[]) => void; /** Call back fired when list item is selected. Returns selected item. */ onClick?: (event: React.ChangeEvent | React.MouseEvent, value: HvListValue) => void; /** If `true` the list items will show the selection state. */ selectable?: boolean; /** If `true`, selection can be toggled when single selection. */ singleSelectionToggle?: boolean; /** If `true` the list will be rendered without vertical spacing. */ condensed?: boolean; /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */ height?: number; /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */ virtualized?: boolean; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvListClasses; } export declare interface HvListValue extends Record { id?: string | number; label: React.ReactNode; searchValue?: string; selected?: boolean; disabled?: boolean; isHidden?: boolean; icon?: React.ReactNode | ((params: { isDisabled?: boolean; isSelected?: boolean; }) => React.ReactNode); showNavIcon?: boolean; path?: string; params?: object; tabIndex?: number; /** Whether to show a separator after this list item */ separator?: boolean; } /** * Loading provides feedback about a process that is taking place in the application. */ export declare const HvLoading: ForwardRefExoticComponent>; export declare type HvLoadingClasses = ExtractNames; /** * A component that wraps `children` with an `HvLoading` component and * and an overlay background with opacity. * * @example * * */ export declare const HvLoadingContainer: ForwardRefExoticComponent>; export declare type HvLoadingContainerClasses = ExtractNames; export declare interface HvLoadingContainerProps extends HvBaseProps, Pick { opacity?: number; classes?: HvLoadingContainerClasses; } export declare interface HvLoadingProps extends HvBaseProps { /** Indicates if the component should be render in a small size. */ small?: boolean; /** The label to be displayed. */ label?: React.ReactNode; /** Whether the loading animation is hidden. */ hidden?: boolean; /** Color applied to the bars. */ color?: HvColorAny; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvLoadingClasses; } /** * Container layout for the login form. */ export declare const HvLogin: ForwardRefExoticComponent>; export declare type HvLoginClasses = ExtractNames; export declare interface HvLoginProps extends HvBaseProps { /** * The path for the background image. */ background?: string; /** * Class names to be applied. */ classes?: HvLoginClasses; } export declare interface HvMarkProperty { position?: number; label?: string; } export declare type HvMeta, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, Extension = never, M = HvMetaBase> = [Extension] extends [never] ? M : M & Extension; declare interface HvMetaBase, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> { instance: HvTableInstance; userProps: any; } /** * Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container. */ export declare const HvMultiButton: (props: HvMultiButtonProps) => JSX_2.Element; export declare type HvMultiButtonClasses = ExtractNames; export declare interface HvMultiButtonProps extends HvBaseProps { /** If all the buttons are disabled. */ disabled?: boolean; /** If the MultiButton is to be displayed vertically. */ vertical?: boolean; /** Button variant to use when in `split` mode */ variant?: HvButtonVariant; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvMultiButtonClasses; /** Button size when in `split` mode. */ size?: HvSize; /** Add a split between buttons */ split?: boolean; } export declare const hvNodeFallback: (value: any) => any; export declare interface HvNotistackSnackMessageProps extends Omit { /** Id to be applied to the root node. */ id?: string; /** class name to apply on the root node */ className?: string; /** Your component tree. */ message?: React.ReactNode; /** Variant of the snackbar. */ variant?: HvSnackbarVariant; /** Extra values to pass to the snackbar. */ snackbarContentProps?: HvSnackbarContentProps; } export declare function hvNumberColumn, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig): HvTableColumnConfig; export declare const hvNumberFallback: (value: any) => number | "—"; /** * A Number Input lets users enter numeric values and provides buttons to increment or decrement the value. * It extends the HvInput component—refer to its documentation for additional available props. * * @extends HvInput */ export declare const HvNumberInput: ForwardRefExoticComponent>; export declare interface HvNumberInputProps extends HvInputProps { } export declare const HvOption: (props: HvOptionProps & RefAttributes) => React.ReactNode; /** * Optional * @description From `T` make a set of properties by key `K` become optional * @example * type Props = { * name: string; * age: number; * visible: boolean; * }; * * // Expect: { name?: string; age?: number; visible?: boolean; } * type Props = Optional; * * // Expect: { name: string; age?: number; visible?: boolean; } * type Props = Optional; */ export declare type HvOptional = Omit & Partial>; export declare type HvOptionClasses = ExtractNames; export declare const HvOptionGroup: ForwardRefExoticComponent & RefAttributes>; export declare type HvOptionGroupClasses = ExtractNames; export declare interface HvOptionGroupProps extends OptionGroupProps { classes?: HvOptionGroupClasses; } export declare interface HvOptionProps extends Omit, Pick, "disabled" | "label" | "value"> { classes?: HvOptionClasses; } /** * Displays a tooltip automatically when the text content overflows its container. */ export declare const HvOverflowTooltip: (props: HvOverflowTooltipProps) => JSX_2.Element; export declare type HvOverflowTooltipClasses = ExtractNames; export declare interface HvOverflowTooltipProps extends Omit, "classes" | "children"> { /** The node that will be rendered inside the tooltip. */ data: React.ReactNode; /** If `true`, the overflow tooltip will always use the paragraph overflow style. */ paragraphOverflow?: boolean; /** Extra properties to add to the tooltip. @deprecated pass properties directly to the component */ tooltipsProps?: Partial; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvOverflowTooltipClasses; } /** * Pagination is the process of dividing a document into discrete pages. It relates to how users interact * with structured content on a website or application. */ export declare const HvPagination: ForwardRefExoticComponent>; export declare type HvPaginationClasses = ExtractNames; export declare type HvPaginationLabels = Partial; export declare type HvPaginationPropGetter = PropGetter; export declare interface HvPaginationProps extends HvBaseProps { /** The number of pages the component has. */ pages?: number; /** The currently selected page (0-indexed). */ page?: number; /** Controls whether the left page size mechanism should be visible. */ showPageSizeOptions?: boolean; /** The array of possible page sizes for the dropdown. */ pageSizeOptions?: number[]; /** The currently selected page size. */ pageSize?: number; /** Controls whether the central page changing mechanism should be visible. */ showPageJump?: boolean; /** Controls whether the previous/first page buttons are enabled. */ canPrevious?: boolean; /** Controls whether the next/last page buttons are enabled. */ canNext?: boolean; /** Function called when the page changes. */ onPageChange?: (page: number) => void; /** Function called when the page size changes. */ onPageSizeChange?: (pageSize: number) => void; /** An object containing all the labels for the component. */ labels?: HvPaginationLabels; /** Other props to show page component. */ showPageProps?: React.HTMLAttributes; /** Other props to pagination component. */ navigationProps?: React.HTMLAttributes; /** Extra properties passed to the input component representing the current pages. */ currentPageInputProps?: HvBaseInputProps; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvPaginationClasses; } /** * A Panel is a flexible container used in patterns like dropdowns, filter groups, or detail sections. It can be horizontal or vertical, with size defined by its content and context. Its appearance should remain consistent regardless of usage. */ export declare const HvPanel: ForwardRefExoticComponent>; export declare type HvPanelClasses = ExtractNames; export declare interface HvPanelProps extends HvBaseProps { /** A Jss Object used to override or extend the styles applied. */ classes?: HvPanelClasses; } /** * Progress Bar provides feedback about a process that is taking place in the application. */ export declare const HvProgressBar: (props: HvProgressBarProps) => JSX_2.Element; export declare type HvProgressBarClasses = ExtractNames; export declare interface HvProgressBarProps extends HvBaseProps { /** The value of the progress bar. */ value: number; /** * The status of the progress bar. * * inProgress is black, error is red and completed is green. * * When uncontrolled and unspecified it will default to "inProgress". */ status?: HvProgressBarStatus; /** Aria Properties passed on to the progress bar. */ labelProps?: HvTypographyProps; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvProgressBarClasses; /** * True if the text label should not be displayed. */ hideLabel?: boolean; } export declare type HvProgressBarStatus = "inProgress" | "completed" | "error"; export declare function hvProgressColumn, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig, getPartial?: (row: HvRowInstance) => number, getTotal?: (row: HvRowInstance) => number, color?: "primary" | "secondary"): HvTableColumnConfig; export declare const HvProgressColumnCell: ({ partial, total, color, "aria-labelledby": ariaLabelledBy, }: HvProgressColumnCellProp) => JSX_2.Element; export declare interface HvProgressColumnCellProp { /** Current value of the bar. */ partial: number; /** Maximum value of the bar. */ total: number; /** The color of the bar. */ color?: "primary" | "secondary"; "aria-labelledby"?: string; } export declare type HvPropGetter, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, Props extends object = Record, T extends object = never, P = Partial> = ((props: P, meta: HvMeta) => P | P[]) | P | P[]; /** * Enables theming capabilities and makes cross-component theme properties available down the tree. */ export declare const HvProvider: ({ children, rootElementId, cssBaseline, cssTheme, theme, colorMode, emotionCache: emotionCacheProp, classNameKey, }: HvProviderProps) => JSX_2.Element; export declare interface HvProviderProps { /** * Your component tree. */ children?: React.ReactNode; /** * Id of your root element. */ rootElementId?: string; /** * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly. * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`. * To scope the baseline to your root, you need to add the `rootElementId` property. * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content. * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles. */ cssBaseline?: "global" | "scoped" | "none"; /** * By default the theme styles are applied globally, `global`, to the application. * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`. * To scope the theme to your root, you need to add the `rootElementId` property. * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content. */ cssTheme?: "global" | "scoped"; /** * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters. * This is useful to avoid class name collisions. * * If `emotionCache` is passed, this is value is ignored. * * @default "hv" */ classNameKey?: string; /** * The emotion cache instance to use. If no value is provided, the default cache is used. */ emotionCache?: EmotionCache; /** * The active theme. It must be one of the themes passed to `themes`. * * If no value is provided, the first theme from the `themes` list is used. If no `themes` list is provided, the `next` theme will be used. */ theme?: HvTheme | HvThemeStructure; /** * The active color mode. It must be one of the color modes of the active theme. * * @default theme.defaultColorMode || "light" */ colorMode?: HvThemeColorMode; } /** * This component allows you to create conditions and group them using logical operators. * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries. * * Take a look at the [usage page](https://pentaho.github.io/uikit-docs/master/components/query-builder) to learn more about this component. */ export declare const HvQueryBuilder: (props: HvQueryBuilderProps) => JSX_2.Element; export declare interface HvQueryBuilderAttribute extends Record { id?: string; label: string; type: DefaultAttributes | (string & {}); } export declare type HvQueryBuilderClasses = ExtractNames; declare interface HvQueryBuilderContextValue { dispatchAction: React.Dispatch; askAction: React.Dispatch>; attributes?: Record; operators: Record; combinators: HvQueryBuilderQueryCombinator[]; maxDepth: number; labels: HvQueryBuilderLabels; initialTouched: boolean; readOnly: boolean; disableConfirmation: boolean; allowRepeatedAttributes?: boolean; renderers?: HvQueryBuilderRenderers; emptyRenderer?: string[]; } export declare interface HvQueryBuilderDateTimeRange { start?: HvQueryBuilderDateTimeStrings; end?: HvQueryBuilderDateTimeStrings; } export declare interface HvQueryBuilderDateTimeStrings { date?: string; time?: string; } export declare const hvQueryBuilderDefaultCombinators: { operand: string; label: string; }[]; export declare const hvQueryBuilderDefaultLabels: HvQueryBuilderLabels; export declare const hvQueryBuilderDefaultOperators: { numeric: { operator: string; label: string; combinators: string[]; }[]; text: { operator: string; label: string; combinators: string[]; }[]; textarea: { operator: string; label: string; combinators: string[]; }[]; boolean: { operator: string; label: string; combinators: string[]; }[]; dateandtime: { operator: string; label: string; combinators: string[]; }[]; }; export declare interface HvQueryBuilderLabels { query?: { delete?: ActionIconLabels; addRule?: { label: string; }; addGroup?: { label: string; }; }; rule: { attribute: { exists: string; label: string; placeholder: string; }; operator: { label: string; placeholder: string; }; value: { distance: { label: string; placeholder?: string; connectorText: string; button: string; validation: { required: string; invalid: string; }; }; text: { label: string; placeholder: string; validation: { required: string; }; }; boolean: { label: string; placeholder: string; options: Record; }; numeric: { label: string; placeholder: string; validation: { required: string; invalid: string; equal: string; greaterThan: string; }; range: { leftLabel: string; rightLabel: string; }; }; datetime: { dateLabel: string; datePlaceholder: string; timeLabel: string; timePlaceholder: string; startDateLabel: string; startDatePlaceholder: string; startTimeLabel: string; startTimePlaceholder: string; endDateLabel: string; endDatePlaceholder: string; endTimeLabel: string; endTimePlaceholder: string; validation: { required: string; invalidInterval: string; }; }; }; delete: ActionIconLabels; }; group: { delete: ActionIconLabels; reset: ActionIconLabels; addRule: { label: string; }; addGroup: { label: string; }; }; empty: { title: string; createCondition: string; createGroup: string; spacer: string; }; } export declare interface HvQueryBuilderNumericRange { from: number | string; to: number | string; } export declare interface HvQueryBuilderProps { /** The query attribute types. */ attributes?: Record; /** The query rules operators by attribute type and combinator. */ operators?: Record; /** The query combinators operands. */ combinators?: HvQueryBuilderQueryCombinator[]; /** The query when the component is controlled. */ value?: HvQueryBuilderQuery; /** The initial query when the component is uncontrolled. */ defaultValue?: HvQueryBuilderQuery; /** Callback fired when the query changes. */ onChange?: (value: HvQueryBuilderQuery) => void; /** Max depth of nested query groups. */ maxDepth?: number; /** Object containing all the labels. */ labels?: DeepPartial; /** Whether the query builder is in read-only mode. */ readOnly?: boolean; /** * Operators that should use the empty value renderer when selected. * * When one of the listed operators is selected, the rule value is reset and an empty component is rendered. * This property takes priority over `renderers`. * * @default ["Empty", "IsNotEmpty"] * */ emptyRenderer?: string[]; /** Custom renderers for the rules' value. */ renderers?: HvQueryBuilderRenderers; /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */ disableConfirmation?: boolean; /** * Whether to allow attributes to be repeated in AND conditions. * By default an error is shown when the selected attribute already exists in an AND conditions. * @default false */ allowRepeatedAttributes?: boolean; /** A Jss Object used to override or extend the styles applied. */ classes?: HvQueryBuilderClasses; } export declare type HvQueryBuilderQuery = HvQueryBuilderQueryGroup; export declare interface HvQueryBuilderQueryCombinator { operand: string; label: string; } export declare interface HvQueryBuilderQueryGroup extends Omit, "rules"> { rules: Array; } export declare interface HvQueryBuilderQueryOperator { operator: string; label: string; combinators: string[]; } export declare type HvQueryBuilderQueryRule = HvOptional; export declare type HvQueryBuilderQueryRuleValue = string | number | boolean | HvQueryBuilderNumericRange | HvQueryBuilderDateTimeStrings | HvQueryBuilderDateTimeRange; export declare interface HvQueryBuilderRendererProps { id: React.Key; attribute: string; operator?: string; value?: V; } export declare type HvQueryBuilderRenderers = Record; /** A Radio Button lets users select a single option from a group. Use it within a Radio Button Group—individual usage is discouraged, as React may not track the `checked` state reliably outside a group. */ export declare const HvRadio: ForwardRefExoticComponent & RefAttributes>; export declare type HvRadioClasses = ExtractNames; /** * A radio group is a type of selection list that can only have a single entry checked at any one time. */ export declare const HvRadioGroup: ForwardRefExoticComponent>; export declare type HvRadioGroupClasses = ExtractNames; export declare interface HvRadioGroupProps extends HvBaseProps { /** * The form element name. * * It is propagated to the children radio buttons, unless they already have one (which they shouldn't). */ name?: string; /** * The value of the form element, represented in one of the child radio buttons values. * * When defined the radio button group state becomes controlled. */ value?: any; /** * When uncontrolled, defines the initial value. */ defaultValue?: any; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be provided instead. */ label?: React.ReactNode; /** * Provide additional descriptive text for the form element. */ description?: React.ReactNode; /** * Indicates that the form element is disabled. * If `true` the state is propagated to the children radio buttons. */ disabled?: boolean; /** * Indicates that the form element is not editable. * If `true` the state is propagated to the children radio buttons. */ readOnly?: boolean; /** * Indicates that user input is required on the form element. * If `true` the state is propagated to the children radio buttons' input element. */ required?: boolean; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. * * When uncontrolled and unspecified it will default to "standBy" and change to either "valid" * or "invalid" after any change to the state. */ status?: HvFormStatus; /** * The error message to show when `status` is "invalid". */ statusMessage?: React.ReactNode; /** * The callback fired when the value changes. */ onChange?: (event: React.ChangeEvent, value: any) => void; /** * Indicates whether the radio buttons group's orientation is horizontal or vertical. * * Defaults to vertical. */ orientation?: "vertical" | "horizontal"; /** * A Jss Object used to override or extend the component styles applied. */ classes?: HvRadioGroupClasses; } export declare interface HvRadioProps extends Omit { /** * A Jss Object used to override or extend the styles applied to the radio button. */ classes?: HvRadioClasses; /** * The form element name. */ name?: string; /** * The value of the form element. * * The default value is "on". */ value?: any; /** * The label of the form element. * * The form element must be labeled for accessibility reasons. * If not provided, an aria-label or aria-labelledby must be provided. */ label?: React.ReactNode; /** * Properties passed on to the label element. */ labelProps?: HvLabelProps; /** * Indicates that user input is required on the form element. * * If a single radio button in a group has the required attribute, a radio button in * that group must be check, though it doesn't have to be the one with the attribute is applied. * * For that reason, the component doesn't make any uncontrolled changes to its validation status. * That should ideally be managed in the context of a radio button group. */ required?: boolean; /** * Indicates that the form element is not editable. */ readOnly?: boolean; /** * Indicates that the form element is disabled. */ disabled?: boolean; /** * If `true` the radio button is selected, if set to `false` the radio button is not selected. * * When defined the radio button state becomes controlled. */ checked?: boolean; /** * When uncontrolled, defines the initial checked state. */ defaultChecked?: boolean; /** * The status of the form element. * * Valid is correct, invalid is incorrect and standBy means no validations have run. */ status?: HvRadioStatus; /** * The error message to show when `status` is "invalid". */ statusMessage?: string; /** * Identifies the element that provides an error message for the radio button. * * Will only be used when the validation status is invalid. */ "aria-errormessage"?: string; /** * The callback fired when the radio button is pressed. */ onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void; /** * Whether the selector should use semantic colors. */ semantic?: boolean; /** * Properties passed on to the input element. */ inputProps?: React.InputHTMLAttributes; /** * Callback fired when the component is focused with a keyboard. * We trigger a `onFocus` callback too. */ onFocusVisible?: (event: React.FocusEvent) => void; /** @ignore */ ref?: RadioProps["ref"]; /** * The position of the label relative to the control. */ labelPosition?: "left" | "right"; /** @ignore */ component?: RadioProps["component"]; } export declare type HvRadioStatus = "standBy" | "valid" | "invalid"; export { HvRadius } export declare const HvRightControl: ({ id, classes: classesProp, className, children, values, onSort, hideSortBy, sortProps, ...others }: HvRightControlProps) => JSX_2.Element; export declare type HvRightControlClasses = ExtractNames; export declare interface HvRightControlProps extends HvBaseProps { /** if `true` the hide sort by dropdown is not rendered */ hideSortBy?: boolean; /** options for the dropdown to sort */ values?: HvRightListControls[]; /** Callback called when a sort action occurs */ onSort?: (selected: HvRightListControls | undefined) => void; /** Extra props passed to dropdown */ sortProps?: HvDropdownProps; /** A Jss Object used to override or extend the styles applied to the component. */ classes?: HvRightControlClasses; } export declare interface HvRightListControls extends HvListValue { accessor: string; desc: boolean; } export declare interface HvRowInstance, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> extends Omit, "cells" | "allCells" | "subRows" | "getRowProps">, Partial, "subRows" | "values">>, Partial>, Partial, "subRows">>, Partial { cells: Array>; allCells: Array>; getRowProps: (propGetter?: HvRowPropGetter) => HvUseTableRowProps; index: number; original: D; id: string; subRows: Array>; } declare type HvRowPropGetter, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvPropGetter; }>; /** * The horizontal scroll to element can be used to quickly navigate in a page. */ export declare const HvScrollToHorizontal: (props: HvScrollToHorizontalProps) => JSX_2.Element; export declare type HvScrollToHorizontalClasses = ExtractNames; export declare interface HvScrollToHorizontalProps extends HvBaseProps { /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */ options: HvScrollToOption[]; /** * The navigation mode to be used when the user clicks on a tab element. * - `push` will add a new entry to the history stack. * - `replace` will replace the current entry on the history stack. * - `none` will not add any entry to the history stack. * * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`. * * When set to `none`, then each element will render a button instead of a link. * * @default "push" */ navigationMode?: "push" | "replace" | "none"; /** * When set to `true`, the generated links will be relative (e.g. `#section`). * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `` tag). * This can lead to unexpected behavior. * * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`). * * @default false */ relativeLinks?: boolean; /** Default selected index passed from the parent. */ defaultSelectedIndex?: number; /** * The Id of the scrollable container containing displayed elements. * * Defaults to `window` if unspecified. */ scrollElementId?: string; /** * Defines the offset from the top of each element for getting an optimal viewing region in the container. * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles) * or to put more breathing room between the targeted element and the edges of the container. * * Each element can also have a specific offset via the options property. */ offset?: number; /** Position of the Horizontal scroll to. */ position?: "sticky" | "fixed" | "relative"; /** Position of tooltip identifying the current item. */ tooltipPosition?: "left" | "right" | "top" | "bottom"; /** A function called each time the selected index changes. */ onChange?: (event: Event | React.MouseEvent | React.KeyboardEvent, index: number) => void; /** A function called each time an user clicks on a tab element. */ onClick?: (event: React.MouseEvent, index: number) => void; /** A function called each time an user press enter on a tab element. */ onEnter?: (event: React.KeyboardEvent, index: number) => void; /** A Jss Object used to override or extend the styles applied. */ classes?: HvScrollToHorizontalClasses; } declare interface HvScrollToOption { key?: React.Key; label: string; value: string; offset?: number; } /** * The vertical scroll to element can be used to quickly navigate in a page. */ export declare const HvScrollToVertical: (props: HvScrollToVerticalProps) => JSX_2.Element; export declare type HvScrollToVerticalClasses = ExtractNames; export declare interface HvScrollToVerticalProps extends HvBaseProps { /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */ options: HvScrollToOption[]; /** * The navigation mode to be used when the user clicks on a tab element. * - `push` will add a new entry to the history stack. * - `replace` will replace the current entry on the history stack. * - `none` will not add any entry to the history stack. * * Defaults to `push`, unless the deprecated `href` prop is set to `false`, in which case it defaults to `none`. * * When set to `none`, then each element will render a button instead of a link. * * @default "push" */ navigationMode?: "push" | "replace" | "none"; /** * When set to `true`, the generated links will be relative (e.g. `#section`). * Relative URLs take into account not only the current location, but also the base URL if it is set (i.e. a `` tag). * This can lead to unexpected behavior. * * When set to `false`, the links will be generated from the current location's full URL (e.g. `http://example.com/hello/world?value=123#section`). * * @default false */ relativeLinks?: boolean; /** Default selected index passed from the parent. */ defaultSelectedIndex?: number; /** * The Id of the scrollable container containing displayed elements. * * Defaults to `window` if unspecified. */ scrollElementId?: string; /** * Defines the offset from the top of each element for getting an optimal viewing region in the container. * This allows to exclude regions of the container that are obscured by other content (such as fixed-positioned toolbars or titles) * or to put more breathing room between the targeted element and the edges of the container. * * Each element can also have a specific offset via the options property. */ offset?: number; /** Position of the Vertical scroll to. */ position?: "absolute" | "fixed" | "relative"; /** Position of tooltip identifying the current item. */ tooltipPosition?: "left" | "right" | "top" | "bottom"; /** A function called each time the selected index changes. */ onChange?: (event: Event | React.MouseEvent | React.KeyboardEvent, index: number) => void; /** A function called each time an user clicks on a tab element. */ onClick?: (event: React.MouseEvent, index: number) => void; /** A function called each time an user press enter on a tab element. */ onEnter?: (event: React.KeyboardEvent, index: number) => void; /** A Jss Object used to override or extend the styles applied. */ classes?: HvScrollToVerticalClasses; } /** * A Search Input allows users to enter and submit a search term. * * @extends HvInput */ export declare const HvSearchInput: ForwardRefExoticComponent>; export declare interface HvSearchInputProps extends HvInputProps { } /** * Sections allow grouping information on a page under the same topic. */ export declare const HvSection: ForwardRefExoticComponent>; export declare type HvSectionClasses = ExtractNames; export declare interface HvSectionProps extends Omit, "title" | "onToggle"> { /** The title of the section */ title?: React.ReactNode; /** Whether or not the section is expandable. */ expandable?: boolean; /** Whether or not the section header is expandable. If true, the header will be clickable and will toggle the section content. */ expandableHeader?: boolean; /** Whether the section is open or not, if this property is defined the accordion must be fully controlled. */ expanded?: boolean; /** When uncontrolled, defines the initial expanded state. */ defaultExpanded?: boolean; /** Section actions */ actions?: React.ReactNode; /** Section onExpand callback */ onToggle?: (event: React.MouseEvent, open: boolean) => void; /** Props to be passed to the expand button */ expandButtonProps?: HvButtonProps; /** Determines whether or not the header has a shadow on the bottom border. */ raisedHeader?: boolean; /** A Jss Object used to override or extend the styles applied to the empty state component. */ classes?: HvSectionClasses; /** Content container ref. */ contentRef?: React.Ref; } /** * The `HvSelect` component is a form control for choosing an option from a list. * * It aligns with the native `