@carbon/react
Version:
React components for the Carbon Design System
112 lines (111 loc) • 4.55 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import PropTypes from 'prop-types';
import React, { type ElementType, type ReactNode } from 'react';
import { type PopoverAlignment, PopoverBaseProps } from '../Popover';
import { PolymorphicProps } from '../../types/common';
import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
type ToggletipLabelProps<E extends ElementType> = {
as?: E;
children?: ReactNode;
className?: string;
} & Omit<React.ComponentPropsWithoutRef<E>, 'as' | 'children' | 'className'>;
/**
* Used to render the label for a Toggletip
*/
export declare function ToggletipLabel<E extends ElementType>({ as: BaseComponent, children, className: customClassName, ...rest }: ToggletipLabelProps<E>): import("react/jsx-runtime").JSX.Element;
export declare namespace ToggletipLabel {
var propTypes: {
/**
* Provide a custom element or component to render the top-level node for the
* component.
*/
as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
/**
* Custom children to be rendered as the content of the label
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Provide a custom class name to be added to the outermost node in the
* component
*/
className: PropTypes.Requireable<string>;
};
}
export interface ToggletipBaseProps extends Omit<PopoverBaseProps, 'open'> {
defaultOpen?: boolean;
}
export type ToggletipProps<T extends ElementType> = PolymorphicComponentPropWithRef<T, ToggletipBaseProps>;
/**
* Used as a container for the button and content of a toggletip. This component
* is responsible for coordinating between interactions with the button and the
* visibility of the content
*/
export declare function Toggletip<E extends ElementType = 'span'>({ align, as, autoAlign, className: customClassName, children, defaultOpen, ...rest }: ToggletipProps<E>): import("react/jsx-runtime").JSX.Element;
export declare namespace Toggletip {
var propTypes: {
/**
* Specify if the toggletip should be open by default
*/
defaultOpen: PropTypes.Requireable<boolean>;
align?: PopoverAlignment;
alignmentAxisOffset?: number;
autoAlign?: boolean;
autoAlignBoundary?: import("@floating-ui/dom").Boundary;
caret?: boolean;
children?: React.ReactNode;
className?: string;
dropShadow?: boolean;
highContrast?: boolean;
isTabTip?: boolean;
onRequestClose?: () => void;
};
}
export interface ToggletipButtonBaseProps {
children?: ReactNode;
className?: string;
label?: string;
}
export type ToggleTipButtonProps<T extends React.ElementType> = PolymorphicProps<T, ToggletipButtonBaseProps>;
/**
* `ToggletipButton` controls the visibility of the Toggletip through mouse
* clicks and keyboard interactions.
*/
export declare const ToggletipButton: React.ForwardRefExoticComponent<Omit<ToggleTipButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
export interface ToggletipContentProps {
children?: ReactNode;
className?: string;
}
/**
* `ToggletipContent` is a wrapper around `PopoverContent`. It places the
* `children` passed in as a prop inside of `PopoverContent` so that they will
* be rendered inside of the popover for this component.
*/
declare const ToggletipContent: React.ForwardRefExoticComponent<ToggletipContentProps & React.RefAttributes<HTMLDivElement>>;
export { ToggletipContent };
export interface ToggleTipActionsProps {
children?: ReactNode;
className?: string;
}
/**
* `ToggletipActions` is a container for one or two actions present at the base
* of a toggletip. It is used for layout of these items.
*/
export declare function ToggletipActions({ children, className: customClassName, }: ToggleTipActionsProps): import("react/jsx-runtime").JSX.Element;
export declare namespace ToggletipActions {
var propTypes: {
/**
* Custom children to be rendered as the content of the label
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
* Provide a custom class name to be added to the outermost node in the
* component
*/
className: PropTypes.Requireable<string>;
};
}