@cimpress/react-components/dist/esm/docs/components/select/index.js

React components to support the MCP styleguide

import React from 'react';
import { CodeExample } from '@cimpress/react-components';
import SelectCode from '!raw-loader!./select.jsx';
import SelectDemo from './select.jsx';
import ComponentDoc from '../../shared/TabbedComponentDoc';
const SelectDocs = () => {
    const propInfos = [
        {
            name: 'containerClassName',
            type: 'string',
            default: '',
            description: 'A class name to append to the div that wraps the select component.',
        },
        {
            name: 'label',
            type: 'string',
            default: '',
            description: 'Label for the select field.  If you provide a `placeholder` (per react-select props), it will be used as the label.',
        },
        {
            name: 'helpText',
            type: 'node',
            default: '',
            description: 'Additional help text to display under the select field.',
        },
        {
            name: 'status',
            type: 'string',
            default: '',
            description: (React.createElement("div", null,
                "One of ",
                React.createElement("code", null, "success"),
                ", ",
                React.createElement("code", null, "warning"),
                ", or ",
                React.createElement("code", null, "error"),
                ", provides a validation state.")),
        },
    ];
    const remarks = (React.createElement("div", null,
        React.createElement("p", null,
            "This select is a thin layer of interactivity layered over",
            ' ',
            React.createElement("a", { href: "https://github.com/JedWatson/react-select", target: "_blank", rel: "noopener noreferrer" }, "react-select"),
            ' ',
            "to provide a consistent look and feel with the rest of the component library. Refer to the",
            ' ',
            React.createElement("a", { href: "https://github.com/JedWatson/react-select#select-props", target: "_blank", rel: "noopener noreferrer" }, "react-select props documentation"),
            ' ',
            "for the rest of the list of props available."),
        React.createElement("p", null,
            React.createElement("strong", null, "Note:"),
            " As of version 14.x, the ",
            React.createElement("code", null, "tether"),
            " prop, used for improved layering behavior of the Select's options, has been removed in preference for the ",
            React.createElement("code", null, "menuPortalTarget"),
            " prop supported by react-select. Please see react-select documentation for more details. If you find that the option list is hidden or covered by other elements, ",
            React.createElement("code", null, "menuPortalTarget"),
            " is probably the fix you're looking for."),
        React.createElement("p", null,
            "To keep the bundle size small, only one select has been included in this package. If you wish to use a different Select (such as",
            ' ',
            React.createElement("a", { href: "https://github.com/bvaughn/react-virtualized-select", target: "_blank", rel: "noopener noreferrer" }, "react-virtualized-select"),
            ' ',
            "or",
            ' ',
            React.createElement("a", { href: "https://github.com/HubSpot/react-select-plus", target: "_blank", rel: "noopener noreferrer" }, "react-select-plus"),
            ") you can use the ",
            React.createElement("a", { href: "#SelectWrapper" }, "SelectWrapper"),
            " with another supported Select to obtain the interactivity.")));
    return (React.createElement(ComponentDoc, { name: "Select", propInfos: propInfos, remarks: remarks },
        React.createElement(SelectDemo, null),
        React.createElement(CodeExample, { code: SelectCode })));
};
export default SelectDocs;
//# sourceMappingURL=index.js.map