@capgeminiuk/dcx-react-library

import React from 'react'; import { MultiSelectOption } from '../multiSelect/Types'; import { VisuallyHidden } from '../common/components/commonTypes'; import { FormSelectProps } from '../formSelect/FormSelect'; type autocompleteProps = { /** * you need to provide a list of values to filter */ options: any[]; /** * it will add a dynamic id to every option provided. It will concatenate an index for each item * @example * optionsId: 'dcx-option-id will result as dcx-option-id-1, dcx-option-id-2, etc */ optionsId?: string; /** * list of selected options for multi select */ selected?: MultiSelectOption[]; /** * specify the number of character to press before the option are displayed */ minCharsBeforeSearch?: number; /** * the messsage to display if the specified number of minimum characters (minCharsBeforeSearch) * has not yet been entered by the user */ minCharsMessage?: string; /** * a predicate function for determining whether to display a promptMessage * when the search input receives focus */ promptCondition?: () => boolean; /** * the message to display if the promptCondition has been met */ promptMessage?: string; /** * the value for the id attribute of the prompt container */ promptId?: string; /** * a CSS class for styling the prompt */ promptClassName?: string; /** * will allow to delay the filter results (the value is in ms) */ debounceMs?: number; /** * will pass the default value */ defaultValue?: string; /** * you can specify a description label to provide additional information */ hintText?: string; /** * allow to specify extra properties on the input */ inputProps?: any; /** * you can style the look and feel of your hint text */ hintClass?: string; /** * if you want to pass an id to the hint */ hintId?: string; /** * if you want to pass an id to the result UL list */ resultId?: string; /** * if you want to pass a style class to the result UL list */ resultUlClass?: string; /** * if you want to pass a style class to the result UL container */ resultUlStyle?: React.CSSProperties; /** * if you want to pass a style class to the result LI list (it will automatically add --odd,--even to the className to help you style the alternating rows) */ resultlLiClass?: string; /** * if you want to pass a style class to the result UL container */ resultLiStyle?: React.CSSProperties; /** * if you want to pass a style class to no result list */ resultNoOptionClass?: string; /** * if you want to style the element selected in the result list */ resultActiveClass?: string; /** * if you want to style the on remove all element */ removeAllButtonClass?: string; /** * if you want to style the selected list item */ selectedListItemStyle?: React.CSSProperties; /** * if you want to style the search element */ searchContainerStyle?: React.CSSProperties; /** * optional multi select flag */ multiSelect?: boolean; /** * optional text for not found element */ notFoundText?: string; /** * event that return the selected value{} */ onSelected?: (value: string) => void; /** * this method is useful if you want to provide the options dynamically */ onChange?: (value: string) => void; /** * onFocus the selected listItem */ onFocus?: () => void; /** * onRemove of the selected listItem */ onRemove?: (select: MultiSelectOption) => void; /** * onRemoveAll of the selected listItems */ onRemoveAll?: () => void; /** * Specifies if that field needs to be filled or not */ required?: boolean; /** * allow to specify a class for the container */ containerClassName?: string; /** * if a label is provided, it will be displayed */ labelText?: string; /** * if a label is provided, it will provide the ability to style it */ labelClassName?: string; /** * allow to customise the label with all the properties needed **/ labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>; /** * it will pass an id to the input or select element(in case of progressive enhancement) */ id?: string; /** * will display an error message in three different positions (BEFORE_LABEL, BOTTOM, AFTER_LABEL and AFTER_HINT) */ errorPosition?: AutoCompleteErrorPosition; /** * error message text */ errorMessageText?: string; /** * error className */ errorMessageClassName?: string; /** * error id **/ errorId?: string; /** * visually hidden text of the error */ errorVisuallyHiddenText?: VisuallyHidden; /** * if you want to pass a name for the input or for the select (in case of progressive enhancement) */ name?: string; /** * it will pass extra select element(in case of progressive enhancement) */ selectProps?: FormSelectProps; /** * generic parameter to pass whatever element before the input **/ prefix?: { content?: JSX.Element | string; properties: React.HTMLAttributes<HTMLDivElement>; }; /** * generic parameter to pass whatever element after the input **/ suffix?: { content?: JSX.Element | string; properties: React.HTMLAttributes<HTMLDivElement>; }; /** * tab index value to focus on the input */ tabIndex?: number; /** * search function to decide how the autocomplete component finds results */ search?: (value: string, options: any) => string[]; /** * A value to display to the users the current state of the autocomplete, this is used for accessibility and is displayed in a hidden element above the input. * This should be used to display information such as how may results are being shown on screen, which element has been highlighted and what position it is in the reuslt list */ accessibilityStatus?: string; /** * Text visible only to screen readers to give a hint on how to use the component */ accessibilityHintText?: string; /** * Returns the current value of length, optionText and position when the user types or interact with the keyboard (keyUp, KeyDown). * length: The length of the results shown after the user has started typing * optionText: The currently highlighted text in the result list, this will return the value the user is shown * position: The position of the currently highlighted option in the results list * @example * One usage of this method could be to update the value of the accessibilityStatus */ statusUpdate?: (length: number, optionText: string, position: number) => void; /** * if this property is passed the Autocomplete component will NOT display the select by default but * will render whatever custom component is passed */ customNonJSComp?: JSX.Element; }; export declare enum AutoCompleteErrorPosition { BEFORE_LABEL = "before-label", BOTTOM = "bottom", AFTER_LABEL = "after-label", AFTER_HINT = "after-hint" } export declare const Autocomplete: ({ options, optionsId, minCharsBeforeSearch, minCharsMessage, promptCondition, promptMessage, promptId, promptClassName, debounceMs, inputProps, defaultValue, hintText, hintClass, hintId, multiSelect, notFoundText, resultId, resultActiveClass, resultUlClass, resultUlStyle, resultlLiClass, resultLiStyle, resultNoOptionClass, removeAllButtonClass, searchContainerStyle, selectedListItemStyle, selected, onSelected, onChange, onRemove, onRemoveAll, onFocus, required, containerClassName, labelText, labelClassName, labelProps, id, errorPosition, errorMessageText, errorMessageClassName, errorId, errorVisuallyHiddenText, name, selectProps, prefix, suffix, tabIndex, search, accessibilityStatus, accessibilityHintText, statusUpdate, customNonJSComp, }: autocompleteProps) => React.JSX.Element; export {};