awesome-gcl/dist/types/src/components/Select/index.d.ts

React component library

/// <reference types="react" />
import { SelectPropTypes } from './types';
/**
 * Select component
 *
 * @param {SelectPropTypes} props
 * @property {string} [props.label] - Determines the value of label and if it should be rendered
 * @property {ItemPropTypes} [props.selected] - Determines the value shown in the input
 * @property {string} [props.placeholder] - Defines the input placeholder
 * @property {ItemPropTypes[]} props.options - List of options to be selected
 * @property {function} props.onChange - Function triggered when an option is clicked
 * @param {ItemPropTypes} props.onChange.option - option item clicked
 * @property {IconDefinition} [props.icon] - Font Awesome icon class
 * @property {boolean} [props.disabled] - Defines the input background color and disables the input wrapper function
 * @property {GSizeEnum} props.size - Defines label and input font size, input wrapper padding and option list gap an top position
 * @property {SelectAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for select-wrapper div HTML tag
 * @property {string[]} [additionalClasses.label] - CSS classes for select-label label HTML tag
 * @property {string[]} [additionalClasses.inputWrapper] - CSS classes for select-input-wrapper div HTML tag
 * @property {string[]} [additionalClasses.input] - CSS classes for select-input input HTML tag
 * @property {string[]} [additionalClasses.optionList] - CSS classes for select-option-list ul HTML tag
 * @property {string[]} [additionalClasses.optionItem] - CSS classes for select-option-item li HTML tag
 * @example
 * <Select
 *  label='Country'
 *  selected={{
 *    id: 0,
 *    label: 'Canada',
 *    value: 'CA'
 *  }}
 *  placeholder='Select your address country'
 *  options={[
 *    {
 *      id: 0,
 *      label: 'Canada',
 *      value: 'CA'
 *    },
 *    {
 *      id: 1,
 *      label: 'Brazil',
 *      value: 'BR'
 *    },
 *    {
 *      id: 2,
 *      label: 'Italy',
 *      value: 'IT'
 *    }
 *  ]}
 *  onChange={(option) => window.alert(`${option} was selected`)}
 *  icon={faGlobe}
 *  disabled={true}
 *  size='large'
 *  additionalClasses={{
 *    wrapper: ['outline-3px'],
 *    label: ['large-font-size'],
 *    inputWrapper: ['half-width'],
 *    input: [],
 *    optionList: ['beige-background'],
 *    optionItem: ['blue-border']
 *  }}
 * />
 *
 * @returns {JSX.Element} Select
 */
export declare const Select: ({ label, selected, placeholder, options, onChange, icon, disabled, size, additionalClasses }: Readonly<SelectPropTypes>) => JSX.Element;