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

React component library

/// <reference types="react" />
import { SelectMultiPropTypes } from "./types";
/**
 * Select component
 *
 * @param {SelectPropTypes} props
 * @property {ListItemPropTypes[]} props.options - List of options to be selected
 * @property {function} props.addOption - Function triggered when an option item is clicked and it is not found in the selected array
 * @param {ListItemPropTypes} props.addOption.option - option item clicked
 * @property {function} props.removeOption - Function triggered when an option item is clicked and it is found in the selected array
 * @param {ListItemPropTypes} props.removeOption.option - option item clicked
 * @property {string} [props.label] - Determines the value of label and if it should be rendered
 * @property {ListItemPropTypes[]} [props.selected] - Determines the value shown in the input
 * @property {boolean} [props.disabled] - Defines the input background color and disables the input wrapper function
 * @property {string} [props.placeholder] - Determines the value of select-multi-placeholder p HTML tag and if it should be rendered
 * @property {GSizeEnum} props.size - Defines label, input and selected item font size, input, selected item, selected list, and option list gap and padding
 * @property {SelectAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for select-multi-wrapper div HTML tag
 * @property {string[]} [additionalClasses.label] - CSS classes for select-multi-label label HTML tag
 * @property {string[]} [additionalClasses.input] - CSS classes for select-multi-select-list-wrapper div HTML tag
 * @property {string[]} [additionalClasses.placeholder] - CSS classes for select-multi-placeholder p HTML tag
 * @property {string[]} [additionalClasses.selectedList] - CSS classes for select-multi-selected-list div HTML tag
 * @property {string[]} [additionalClasses.selectedItem] - CSS classes for select-multi-selected-item div HTML tag
 * @property {string[]} [additionalClasses.optionList] - CSS classes for select-multi-options-list ul HTML tag
 * @property {string[]} [additionalClasses.optionItem] - CSS classes for select-multi-options-item li HTML tag
 * @example
 * <Select
 *  label='Countries'
 *  selected={[
 *    {
 *      id: 0,
 *      label: 'Canada',
 *      value: 'CA'
 *    },
 *    {
 *      id: 2,
 *      label: 'Italy',
 *      value: 'IT'
 *    }
 *  ]}
 *  placeholder='Select a few countries'
 *  options={[
 *    {
 *      id: 0,
 *      label: 'Canada',
 *      value: 'CA'
 *    },
 *    {
 *      id: 1,
 *      label: 'Brazil',
 *      value: 'BR'
 *    },
 *    {
 *      id: 2,
 *      label: 'Italy',
 *      value: 'IT'
 *    }
 *  ]}
 *  addOption={(option) => window.alert(`${option} was added`)}
 *  removeOption={(option) => window.alert(`${option} was removed`)}
 *  disabled={true}
 *  size='large'
 *  additionalClasses={{
 *    wrapper: ['outline-3px'],
 *    label: ['large-font-size'],
 *    input: [],
 *    placeholder: ['half-width'],
 *    selectedList: ['beige-background'],
 *    selectedItem: ['blue-border'],
 *    optionList: ['beige-background'],
 *    optionItem: ['blue-border']
 *  }}
 * />
 *
 * @returns {JSX.Element} SelectMulti
 */
export declare const SelectMulti: ({ options, addOption, removeOption, label, selected, disabled, size, placeholder, additionalClasses }: SelectMultiPropTypes) => JSX.Element;