@carbon/react/es/components/CodeSnippet/CodeSnippet.d.ts

React components for the Carbon Design System

/**
 * 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 { PropsWithChildren } from 'react';
import type { DeprecatedPopoverAlignment, NewPopoverAlignment, PopoverAlignment } from '../Popover';
export type DeprecatedCodeSnippetAlignment = DeprecatedPopoverAlignment;
export type NewCodeSnippetAlignment = NewPopoverAlignment;
export type CodeSnippetAlignment = PopoverAlignment;
export interface CodeSnippetProps {
    /**
     * Specify how the trigger should align with the tooltip
     */
    align?: CodeSnippetAlignment;
    /**
     * **Experimental**: Will attempt to automatically align the tooltip. Requires React v17+
     * @see https://github.com/carbon-design-system/carbon/issues/18714
     */
    autoAlign?: boolean;
    /**
     * Specify a label to be read by screen readers on the containing textbox
     * node
     */
    ['aria-label']?: string;
    /**
     * Deprecated, please use `aria-label` instead.
     * Specify a label to be read by screen readers on the containing textbox
     * node
     */
    ariaLabel?: string;
    /**
     * Specify an optional className to be applied to the container node
     */
    className?: string;
    /**
     * Specify the description for the Copy Button
     */
    copyButtonDescription?: string;
    /**
     * Optional text to copy. If not specified, the `children` node's `innerText`
     * will be used as the copy value.
     */
    copyText?: string;
    /**
     * Specify whether or not the CodeSnippet should be disabled
     */
    disabled?: boolean;
    /**
     * Specify the string displayed when the snippet is copied
     */
    feedback?: string;
    /**
     * Specify the time it takes for the feedback message to timeout
     */
    feedbackTimeout?: number;
    /**
     * Specify whether or not a copy button should be used/rendered.
     */
    hideCopyButton?: boolean;
    /**
     * Specify whether you are using the light variant of the Code Snippet,
     * typically used for inline snippet to display an alternate color
     */
    light?: boolean;
    /**
     * Specify the maximum number of rows to be shown when in collapsed view
     */
    maxCollapsedNumberOfRows?: number;
    /**
     * Specify the maximum number of rows to be shown when in expanded view
     */
    maxExpandedNumberOfRows?: number;
    /**
     * Specify the minimum number of rows to be shown when in collapsed view
     */
    minCollapsedNumberOfRows?: number;
    /**
     * Specify the minimum number of rows to be shown when in expanded view
     */
    minExpandedNumberOfRows?: number;
    /**
     * An optional handler to listen to the `onClick` even fired by the Copy
     * Button
     */
    onClick?: (e: MouseEvent) => void;
    /**
     * Specify a string that is displayed when the Code Snippet has been
     * interacted with to show more lines
     */
    showLessText?: string;
    /**
     * Specify a string that is displayed when the Code Snippet text is more
     * than 15 lines
     */
    showMoreText?: string;
    /**
     * Provide the type of Code Snippet
     */
    type?: 'single' | 'inline' | 'multi';
    /**
     * Specify whether or not to wrap the text.
     */
    wrapText?: boolean;
}
declare function CodeSnippet({ align, autoAlign, className, type, children, disabled, feedback, feedbackTimeout, onClick, ['aria-label']: ariaLabel, ariaLabel: deprecatedAriaLabel, copyText, copyButtonDescription, light, showMoreText, showLessText, hideCopyButton, wrapText, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, minCollapsedNumberOfRows, minExpandedNumberOfRows, ...rest }: PropsWithChildren<CodeSnippetProps>): import("react/jsx-runtime").JSX.Element;
declare namespace CodeSnippet {
    var propTypes: {
        /**
         * Specify how the trigger should align with the tooltip
         */
        align: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
        /**
         * Specify a label to be read by screen readers on the containing textbox
         * node
         */
        "aria-label": PropTypes.Requireable<string>;
        /**
         * Deprecated, please use `aria-label` instead.
         * Specify a label to be read by screen readers on the containing textbox
         * node
         */
        ariaLabel: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
        /**
         * **Experimental**: Will attempt to automatically align the tooltip. Requires
         * React v17+
         * @see https://github.com/carbon-design-system/carbon/issues/18714
         */
        autoAlign: PropTypes.Requireable<boolean>;
        /**
         * Provide the content of your CodeSnippet as a node or string
         */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
         * Specify an optional className to be applied to the container node
         */
        className: PropTypes.Requireable<string>;
        /**
         * Specify the description for the Copy Button
         */
        copyButtonDescription: PropTypes.Requireable<string>;
        /**
         * Optional text to copy. If not specified, the `children` node's `innerText`
         * will be used as the copy value.
         */
        copyText: PropTypes.Requireable<string>;
        /**
         * Specify whether or not the CodeSnippet should be disabled
         */
        disabled: PropTypes.Requireable<boolean>;
        /**
         * Specify the string displayed when the snippet is copied
         */
        feedback: PropTypes.Requireable<string>;
        /**
         * Specify the time it takes for the feedback message to timeout
         */
        feedbackTimeout: PropTypes.Requireable<number>;
        /**
         * Specify whether or not a copy button should be used/rendered.
         */
        hideCopyButton: PropTypes.Requireable<boolean>;
        /**
         * Specify whether you are using the light variant of the Code Snippet,
         * typically used for inline snippet to display an alternate color
         */
        light: (props: Record<string, any>, propName: string, componentName: string, ...rest: any[]) => any;
        /**
         * Specify the maximum number of rows to be shown when in collapsed view
         */
        maxCollapsedNumberOfRows: PropTypes.Requireable<number>;
        /**
         * Specify the maximum number of rows to be shown when in expanded view
         */
        maxExpandedNumberOfRows: PropTypes.Requireable<number>;
        /**
         * Specify the minimum number of rows to be shown when in collapsed view
         */
        minCollapsedNumberOfRows: PropTypes.Requireable<number>;
        /**
         * Specify the minimum number of rows to be shown when in expanded view
         */
        minExpandedNumberOfRows: PropTypes.Requireable<number>;
        /**
         * An optional handler to listen to the `onClick` even fired by the Copy
         * Button
         */
        onClick: PropTypes.Requireable<(...args: any[]) => any>;
        /**
         * Specify a string that is displayed when the Code Snippet has been
         * interacted with to show more lines
         */
        showLessText: PropTypes.Requireable<string>;
        /**
         * Specify a string that is displayed when the Code Snippet text is more
         * than 15 lines
         */
        showMoreText: PropTypes.Requireable<string>;
        /**
         * Provide the type of Code Snippet
         */
        type: PropTypes.Requireable<string>;
        /**
         * Specify whether or not to wrap the text.
         */
        wrapText: PropTypes.Requireable<boolean>;
    };
}
export default CodeSnippet;