lucid-ui/dist/components/Selection/Selection.d.ts

A UI component library from AppNexus.

import React from 'react';
import { FC, StandardProps } from '../../util/component-types';
interface ISelectionIconProps extends StandardProps {
}
export interface ISelectionLabelProps extends StandardProps {
}
declare type SelectionKind = 'default' | 'container' | 'success' | 'danger' | 'info' | 'warning';
declare type SelectionResponsiveMode = 'small' | 'medium' | 'large';
export interface ISelectionProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
    /** Applies an icon and styles for the kind of selection. */
    kind: SelectionKind;
    /** Apply to the top of a nested sequence of Selection components.
     * Adds some spacing for a list of top level Selections with nested Selctions inside each.
     * */
    isTop?: boolean;
    /** Only applies to \`container\` Selection components.
     * Fills with a darker gray background.
     * Defaults to false.
     * */
    isFilled?: boolean;
    /** Shows or hides the little "x" for a given item. */
    isRemovable: boolean;
    /** Called when the close button is clicked. */
    onRemove: ({ props, event, }: {
        props: ISelectionProps;
        event: React.MouseEvent;
    }) => void;
    /** Gives the selection a background. This is desirable when you only have
     * one level of nested selections.
     * */
    hasBackground: boolean;
    /** Make the content text bold. This is desirable when you only have one
     * level of nested selections.
     * */
    isBold: boolean;
    /** Label of the component. */
    Label?: React.ReactNode;
    /** Display a custom icon for the selection. Generally you shouldn't need
     * this prop since the \`kind\` prop will pick the correct icon for you.
     * */
    Icon?: React.ReactNode;
    /** Adjusts the display of this component. This should typically be driven by
     * screen size. Currently \`small\` and \`large\` are explicitly handled by
     * this component.
     * */
    responsiveMode: SelectionResponsiveMode;
}
declare const Selection: {
    (props: ISelectionProps): JSX.Element;
    displayName: string;
    Icon: FC<ISelectionIconProps>;
    Label: FC<ISelectionLabelProps>;
    peek: {
        description: string;
        categories: string[];
    };
    defaultProps: {
        isRemovable: boolean;
        onRemove: (...args: any[]) => void;
        hasBackground: boolean;
        isBold: boolean;
        kind: "default";
        responsiveMode: "large";
    };
    propTypes: {
        className: any;
        kind: any;
        isTop: any;
        isFilled: any;
        isRemovable: any;
        hasBackground: any;
        isBold: any;
        onRemove: any;
        Label: any;
        Icon: any;
        children: any;
        responsiveMode: any;
    };
};
export default Selection;