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

A UI component library from Xandr.

import React from 'react';
import PropTypes from 'prop-types';
import { FC, StandardProps } from '../../util/component-types';
export interface ISelectionIconProps extends StandardProps {
}
/** SELECTION LABEL */
export interface ISelectionLabelProps extends StandardProps {
}
/** SELECTION */
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: {
        /**
                Appended to the component-specific class names set on the root element.
            */
        className: PropTypes.Requireable<string>;
        /**
                Applies an icon and styles for the kind of selection.
            */
        kind: PropTypes.Requireable<string>;
        /**
                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: PropTypes.Requireable<boolean>;
        /**
                Only applies to \`container\` Selection components.
                Fills with a darker gray background.
                Defaults to false.
            */
        isFilled: PropTypes.Requireable<boolean>;
        /**
                Shows or hides the little "x" for a given item.
            */
        isRemovable: PropTypes.Requireable<boolean>;
        /**
                Gives the selection a background. This is desirable when you only have
                one level of nested selections.
            */
        hasBackground: PropTypes.Requireable<boolean>;
        /**
                Make the content text bold. This is desirable when you only have one
                level of nested selections.
            */
        isBold: PropTypes.Requireable<boolean>;
        /**
                Called when the close button is clicked.
            */
        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
        /**
                Label of the component.
            */
        Label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
                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: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
                Arbitrary children.
            */
        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
        /**
                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: PropTypes.Requireable<string>;
    };
};
export default Selection;
//# sourceMappingURL=Selection.d.ts.map