@ladg/rhfmui/dist/components/RHFMuiAutoCompleteMultiple/RHFMuiAutoCompleteMultiple.d.ts

The integration of MUI components with React hook form.

import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteProps } from '@mui/material/Autocomplete';
import { TextFieldProps } from '@mui/material/TextField';
import { JSX } from 'react';
import { RegisterOptions, UseFormReturn } from 'react-hook-form';
export interface OptionType {
    id: string;
    optionLabel: string;
    customLabel?: () => JSX.Element;
    value: string;
    isDisabled?: boolean;
    isFixed?: boolean;
    groupByProp?: string;
    dataObject?: {
        [x: string]: any;
    };
}
type RHFMuiAutoCompleteMultipleProps = {
    rhfinstance: UseFormReturn<any, any, undefined>;
    rhf_rules?: Omit<RegisterOptions<any, any>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
    label: string;
    name: string;
    options: OptionType[];
    disabled?: boolean;
    fullWidth?: boolean;
    placeholder?: string;
    dropdownHeight?: string;
    /**dropdownMaxWidth takes effect only in case of optionTableView */
    dropdownMaxWidth?: string;
    permanentMessage?: string | (() => JSX.Element);
    enableCheckboxForOptions?: boolean;
    highlightSearchMatch?: boolean;
    optionTableView?: {
        /**give list of names for column headers */
        columnHeader: string[];
        /**provide Object property name available in dataObject. 1st column value is set to labelData by default internally. provided properties will me mapped 2nd column onword. If you have nested data then pass ananymous function and return desired value.*/
        rowValues: (string | ((dataObject: any) => string))[];
    };
    onChangeExtraHandler?: ((event: React.SyntheticEvent, values: OptionType[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<OptionType> | undefined) => void) | undefined;
    autocompleteProps?: Omit<AutocompleteProps<any, any, any, any>, 'value' | 'getOptionLabel' | 'onChange' | 'isOptionEqualToValue' | 'name' | 'options' | 'multiple' | 'disableCloseOnSelect' | 'renderOption' | 'renderInput' | 'getOptionDisabled' | 'renderTags'
    /**omitting defaultValue as to avoid access to user. Default value must be set using react hook form defaultValue */
     | 'defaultValue'
    /**to avoid user to use style to change css. It has to be done via sx prop */
     | 'style'>;
    textFieldProps?: Omit<TextFieldProps, 'label' | 'inputRef' | 'placeholder'
    /**to avoid user to use style to change css. It has to be done via sx prop */
     | 'style'>;
};
export declare const RHFMuiAutoCompleteMultiple: React.FC<RHFMuiAutoCompleteMultipleProps>;
export {};
/**IMP NOTE:
 * If you are using it inside Dialog/Modal use following css on that parent dialog/Modal
//  * sx={{
//           '.MuiDialog-paper': {
//             //allows autocomplete dropdown flow out of dialog
//             overflow: ' visible !important',
//             marginTop: '50px', // Position the Dialog at the top
//             top: 0, // Place the dialog at the top of the viewport
//             position: 'absolute' // Make it positionable
//           }
//         }}
*/
/**
 *
 * FEATURE LIST:
 * ................
 * free solo allows you to add any random value what u add in search. even it is not present in your option list
 */
/**
 * feature implementation left:
 *create seperate virtualized Autocomplete components
 * infinite loading of list
 * pagination of list
 * display table view for options.
 * integration of Google map
 * enabling highligh for custom option rendering
 *
 * customizing options display and option modification (done)[but highlight will not work yet, if we use customLabel]
 * option grouping with group label styling (done)
 * highlight on search, (done) [will not work with customLabel]
 * fixed tag,(using isFixed prop in options) (done)
 * default value, -->done
 * fullWidth/standard length, -->done
 *
 *
 *
 * disabled options (using isDisabled prop in options) -->done
 *
 * add rule in rhf controller. (done)
 * async loader. (done)
 * sortable option list. (done using fast-sort library)
 *
 * start and end Adornment (done)
 *
 *
 *
 */
//# sourceMappingURL=RHFMuiAutoCompleteMultiple.d.ts.map