@hh.ru/magritte-ui-suggest 5.0.4 → 5.1.0

package/Suggest.js

@@ -6,7 +6,7 @@ import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
 import { SuggestPicker } from './SuggestPicker.js';
 import { DataProviderError } from './dataProvider.js';
 import { useSuggestKeyboardNav } from './useSuggestKeyboardNav.js';
-import { s as styles } from './sectionRenderers-_6pPdSbU.js';
+import { s as styles } from './sectionRenderers-3amOmSjY.js';
 import 'classnames';
 import '@hh.ru/magritte-ui-bottom-sheet';
 import '@hh.ru/magritte-ui-button';
@@ -22,7 +22,7 @@ import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-typography';
 
-const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectValidator = () => true, navigationBarProps, maxHeight = 460, itemsGap = 4, onBlur, topContent, bottomContent, maxWidth, errorPlaceholder, trls, onDropOpen, onDropClose, onBottomSheetOpen, onBottomSheetClose, }, ref) {
+const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectValidator = () => true, navigationBarProps, maxHeight = 460, itemsGap = 4, onBlur, topContent, bottomContent, maxWidth, errorPlaceholder, trls, onChange, onDropOpen, onDropClose, onBottomSheetOpen, onBottomSheetClose, }, ref) {
     const { component: InputComponent, props: inputProps } = input;
     const [inputValueState, setInputValueState] = useState(inputProps.value || '');
     const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;
@@ -44,12 +44,13 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
         rest.onBottomSheetClose();
         onBottomSheetClose?.();
     };
-    const onChangeHandler = useCallback((value) => {
+    const onChangeHandler = useCallback((value, skipSuggestChangeHandler = false) => {
         if (inputValue === undefined) {
             setInputValueState(value);
         }
+        !skipSuggestChangeHandler && onChange?.(value, false);
         onInputChange?.(value);
-    }, [inputValue, setInputValueState, onInputChange]);
+    }, [inputValue, setInputValueState, onInputChange, onChange]);
     const requestData = useCallback((query) => {
         setIsError(false);
         currentRequestRef.current?.cancel();
@@ -93,9 +94,10 @@ const SuggestComponent = function ({ dataProvider, input, inputValue, onSelectVa
         if (!isMobile) {
             inputRef.current?.focus();
         }
-        onChangeHandler(value);
+        onChangeHandler(value, true);
+        onChange?.(value, true, data);
         setValueSelectedFromSuggest(value);
-    }, [onSelectValidator, isMobile, onChangeHandler]);
+    }, [onSelectValidator, isMobile, onChangeHandler, onChange]);
     const onKeyDownHandler = useCallback((event) => {
         onKeyDown(event);
         onInputKeyDown?.(event);

package/Suggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"Suggest.js","sources":["../src/Suggest.tsx"],"sourcesContent":["import {\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    KeyboardEventHandler,\n    forwardRef,\n    ForwardedRef,\n} from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SuggestPicker } from '@hh.ru/magritte-ui-suggest/SuggestPicker';\nimport { DataProviderError } from '@hh.ru/magritte-ui-suggest/dataProvider';\nimport {\n    DataProviderRequest,\n    DataProviderResult,\n    SuggestProps,\n    SuggestInputComponent,\n    InputProp,\n    ControlledInputProps,\n    NativeFocusEventHandler,\n} from '@hh.ru/magritte-ui-suggest/types';\nimport { useSuggestKeyboardNav } from '@hh.ru/magritte-ui-suggest/useSuggestKeyboardNav';\n\nimport styles from './suggest.less';\n\nconst SuggestComponent = function <K, T extends SuggestInputComponent>(\n    {\n        dataProvider,\n        input,\n        inputValue,\n        onSelectValidator = () => true,\n        navigationBarProps,\n        maxHeight = 460,\n        itemsGap = 4,\n        onBlur,\n        topContent,\n        bottomContent,\n        maxWidth,\n        errorPlaceholder,\n        trls,\n        onDropOpen,\n        onDropClose,\n        onBottomSheetOpen,\n        onBottomSheetClose,\n    }: SuggestProps<K, T>,\n    ref: ForwardedRef<HTMLElement>\n): ReactElement | null {\n    const { component: InputComponent, props: inputProps } = input;\n    const [inputValueState, setInputValueState] = useState(inputProps.value || '');\n    const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;\n    const [requestResult, setRequestResult] = useState<{ query: string; result: DataProviderResult<K> } | null>(null);\n    const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState<string | false>(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const wrapperInputRef = useRef<HTMLInputElement>(null);\n    const suggestContainerRef = useRef<HTMLElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n    const inputRefMulti = useMultipleRefs(inputRef, ref);\n    const onBlurRef = useRef<NativeFocusEventHandler | undefined>(onBlur);\n    onBlurRef.current = onBlur; // update actual callback\n    const { isMobile } = useBreakpoint();\n    const [isError, setIsError] = useState(false);\n\n    const currentRequestRef = useRef<DataProviderRequest>();\n    const actualInputValue = inputValue === undefined ? inputValueState : inputValue;\n\n    const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(\n        suggestContainerRef,\n        inputContainerRef,\n        setValueSelectedFromSuggest,\n        actualInputValue,\n        inputRef,\n        onBlurRef\n    );\n\n    const handleBottomSheetClose = () => {\n        rest.onBottomSheetClose();\n        onBottomSheetClose?.();\n    };\n\n    const onChangeHandler = useCallback(\n        (value: string) => {\n            if (inputValue === undefined) {\n                setInputValueState(value);\n            }\n\n            onInputChange?.(value);\n        },\n        [inputValue, setInputValueState, onInputChange]\n    );\n\n    const requestData = useCallback(\n        (query: string) => {\n            setIsError(false);\n            currentRequestRef.current?.cancel();\n            const request = dataProvider(query);\n            request.then(\n                (result) => {\n                    setRequestResult({ query, result });\n                },\n                (event) => {\n                    // включаем error state если это НЕ ошибка, вызванная `minCharsCount` или отменненым запросом\n                    if (!(event instanceof DataProviderError)) {\n                        setIsError(true);\n                    }\n                    setRequestResult(null);\n                }\n            );\n            currentRequestRef.current = request;\n        },\n        [dataProvider]\n    );\n\n    useEffect(() => {\n        if (valueSelectedFromSuggest !== false && requestResult?.query !== actualInputValue) {\n            setRequestResult(null);\n        }\n        if (valueSelectedFromSuggest !== actualInputValue.trim()) {\n            setValueSelectedFromSuggest(false);\n            if (focused) {\n                requestData(actualInputValue);\n            }\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [actualInputValue, requestData, focused]);\n\n    const onFocusHandler = useCallback<FocusEventHandler<HTMLElement>>(\n        (event) => {\n            setValueSelectedFromSuggest(false);\n            if (actualInputValue !== requestResult?.query) {\n                setRequestResult(null);\n                requestData(actualInputValue);\n            }\n\n            onInputFocus?.(event);\n            onFocus(event);\n        },\n        [actualInputValue, requestResult?.query, onInputFocus, onFocus, requestData]\n    );\n\n    const onValueSelectHandler = useCallback(\n        (value: string, data: K | undefined) => {\n            if (!onSelectValidator(value, data)) {\n                return;\n            }\n            if (!isMobile) {\n                inputRef.current?.focus();\n            }\n            onChangeHandler(value);\n            setValueSelectedFromSuggest(value);\n        },\n        [onSelectValidator, isMobile, onChangeHandler]\n    );\n\n    const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            onKeyDown(event);\n            onInputKeyDown?.(event);\n        },\n        [onInputKeyDown, onKeyDown]\n    );\n\n    const actualInputProps = {\n        ...inputProps,\n        value: actualInputValue,\n        onFocus: onFocusHandler,\n        onChange: onChangeHandler,\n        onKeyDown: onKeyDownHandler,\n        ref: inputRefMulti,\n        wrapperRef: wrapperInputRef,\n        autoComplete: 'off',\n    } as unknown as JSX.IntrinsicAttributes & JSX.LibraryManagedAttributes<T, ControlledInputProps>;\n\n    return (\n        <>\n            <div ref={inputContainerRef} className={styles.suggestInputContainer}>\n                <InputComponent {...actualInputProps} />\n            </div>\n            <SuggestPicker\n                data={requestResult?.result}\n                activatorRef={wrapperInputRef}\n                inputRef={inputRef}\n                inputFocused={focused}\n                currentInputValueSelectedFromSuggest={valueSelectedFromSuggest !== false}\n                onValueSelect={onValueSelectHandler}\n                maxHeight={maxHeight}\n                navigationBarProps={navigationBarProps}\n                suggestContainerRef={suggestContainerRef}\n                itemsGap={itemsGap}\n                onBottomSheetClose={handleBottomSheetClose}\n                onBottomSheetOpen={onBottomSheetOpen}\n                onDropOpen={onDropOpen}\n                onDropClose={onDropClose}\n                inputValue={actualInputValue}\n                topContent={topContent}\n                bottomContent={bottomContent}\n                maxWidth={maxWidth}\n                isError={isError}\n                trls={trls}\n                errorPlaceholder={errorPlaceholder}\n                onClickReload={() => {\n                    requestData(actualInputValue);\n                }}\n                input={\n                    {\n                        component: InputComponent,\n                        props: {\n                            ...input.props,\n                            onFocus: onFocusHandler,\n                            onChange: onChangeHandler,\n                            value: actualInputValue,\n                            onKeyDown: onKeyDownHandler,\n                        },\n                    } as InputProp<T>\n                }\n            />\n        </>\n    );\n};\n\nconst Suggest = forwardRef(SuggestComponent) as (<K, T extends SuggestInputComponent>(\n    props: SuggestProps<K, T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSuggest.displayName = 'Suggest';\n\nexport { Suggest };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAM,gBAAgB,GAAG,UACrB,EACI,YAAY,EACZ,KAAK,EACL,UAAU,EACV,iBAAiB,GAAG,MAAM,IAAI,EAC9B,kBAAkB,EAClB,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,CAAC,EACZ,MAAM,EACN,UAAU,EACV,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,IAAI,EACJ,UAAU,EACV,WAAW,EACX,iBAAiB,EACjB,kBAAkB,GACD,EACrB,GAA8B,EAAA;IAE9B,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,KAAK,CAAC;AAC/D,IAAA,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;AAC/E,IAAA,MAAM,EAAE,QAAQ,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,UAAU,CAAC;IACjG,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAA0D,IAAI,CAAC,CAAC;IAClH,MAAM,CAAC,wBAAwB,EAAE,2BAA2B,CAAC,GAAG,QAAQ,CAAiB,KAAK,CAAC,CAAC;AAChG,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;AAChD,IAAA,MAAM,eAAe,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;AACvD,IAAA,MAAM,mBAAmB,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;AACtD,IAAA,MAAM,iBAAiB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,eAAe,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;AACrD,IAAA,MAAM,SAAS,GAAG,MAAM,CAAsC,MAAM,CAAC,CAAC;AACtE,IAAA,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;AAC3B,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IACrC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAE9C,IAAA,MAAM,iBAAiB,GAAG,MAAM,EAAuB,CAAC;AACxD,IAAA,MAAM,gBAAgB,GAAG,UAAU,KAAK,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IAEjF,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,qBAAqB,CAClE,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC3B,gBAAgB,EAChB,QAAQ,EACR,SAAS,CACZ,CAAC;IAEF,MAAM,sBAAsB,GAAG,MAAK;QAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,kBAAkB,IAAI,CAAC;AAC3B,KAAC,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,KAAa,KAAI;QACd,IAAI,UAAU,KAAK,SAAS,EAAE;YAC1B,kBAAkB,CAAC,KAAK,CAAC,CAAC;AAC7B,SAAA;AAED,QAAA,aAAa,GAAG,KAAK,CAAC,CAAC;KAC1B,EACD,CAAC,UAAU,EAAE,kBAAkB,EAAE,aAAa,CAAC,CAClD,CAAC;AAEF,IAAA,MAAM,WAAW,GAAG,WAAW,CAC3B,CAAC,KAAa,KAAI;QACd,UAAU,CAAC,KAAK,CAAC,CAAC;AAClB,QAAA,iBAAiB,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;AACpC,QAAA,MAAM,OAAO,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AACpC,QAAA,OAAO,CAAC,IAAI,CACR,CAAC,MAAM,KAAI;AACP,YAAA,gBAAgB,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;AACxC,SAAC,EACD,CAAC,KAAK,KAAI;;AAEN,YAAA,IAAI,EAAE,KAAK,YAAY,iBAAiB,CAAC,EAAE;gBACvC,UAAU,CAAC,IAAI,CAAC,CAAC;AACpB,aAAA;YACD,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,SAAC,CACJ,CAAC;AACF,QAAA,iBAAiB,CAAC,OAAO,GAAG,OAAO,CAAC;AACxC,KAAC,EACD,CAAC,YAAY,CAAC,CACjB,CAAC;IAEF,SAAS,CAAC,MAAK;QACX,IAAI,wBAAwB,KAAK,KAAK,IAAI,aAAa,EAAE,KAAK,KAAK,gBAAgB,EAAE;YACjF,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC1B,SAAA;AACD,QAAA,IAAI,wBAAwB,KAAK,gBAAgB,CAAC,IAAI,EAAE,EAAE;YACtD,2BAA2B,CAAC,KAAK,CAAC,CAAC;AACnC,YAAA,IAAI,OAAO,EAAE;gBACT,WAAW,CAAC,gBAAgB,CAAC,CAAC;AACjC,aAAA;AACJ,SAAA;;KAGJ,EAAE,CAAC,gBAAgB,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAE7C,IAAA,MAAM,cAAc,GAAG,WAAW,CAC9B,CAAC,KAAK,KAAI;QACN,2BAA2B,CAAC,KAAK,CAAC,CAAC;AACnC,QAAA,IAAI,gBAAgB,KAAK,aAAa,EAAE,KAAK,EAAE;YAC3C,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,WAAW,CAAC,gBAAgB,CAAC,CAAC;AACjC,SAAA;AAED,QAAA,YAAY,GAAG,KAAK,CAAC,CAAC;QACtB,OAAO,CAAC,KAAK,CAAC,CAAC;AACnB,KAAC,EACD,CAAC,gBAAgB,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,WAAW,CAAC,CAC/E,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACpC,CAAC,KAAa,EAAE,IAAmB,KAAI;AACnC,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;YACjC,OAAO;AACV,SAAA;QACD,IAAI,CAAC,QAAQ,EAAE;AACX,YAAA,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;AAC7B,SAAA;QACD,eAAe,CAAC,KAAK,CAAC,CAAC;QACvB,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACtC,EACD,CAAC,iBAAiB,EAAE,QAAQ,EAAE,eAAe,CAAC,CACjD,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAChC,CAAC,KAAK,KAAI;QACN,SAAS,CAAC,KAAK,CAAC,CAAC;AACjB,QAAA,cAAc,GAAG,KAAK,CAAC,CAAC;AAC5B,KAAC,EACD,CAAC,cAAc,EAAE,SAAS,CAAC,CAC9B,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG;AACrB,QAAA,GAAG,UAAU;AACb,QAAA,KAAK,EAAE,gBAAgB;AACvB,QAAA,OAAO,EAAE,cAAc;AACvB,QAAA,QAAQ,EAAE,eAAe;AACzB,QAAA,SAAS,EAAE,gBAAgB;AAC3B,QAAA,GAAG,EAAE,aAAa;AAClB,QAAA,UAAU,EAAE,eAAe;AAC3B,QAAA,YAAY,EAAE,KAAK;KACwE,CAAC;IAEhG,QACIA,IACI,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,CAAC,qBAAqB,YAChEA,GAAC,CAAA,cAAc,EAAK,EAAA,GAAA,gBAAgB,EAAI,CAAA,EAAA,CACtC,EACNA,GAAA,CAAC,aAAa,EAAA,EACV,IAAI,EAAE,aAAa,EAAE,MAAM,EAC3B,YAAY,EAAE,eAAe,EAC7B,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,OAAO,EACrB,oCAAoC,EAAE,wBAAwB,KAAK,KAAK,EACxE,aAAa,EAAE,oBAAoB,EACnC,SAAS,EAAE,SAAS,EACpB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,sBAAsB,EAC1C,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,gBAAgB,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,MAAK;oBAChB,WAAW,CAAC,gBAAgB,CAAC,CAAC;iBACjC,EACD,KAAK,EACD;AACI,oBAAA,SAAS,EAAE,cAAc;AACzB,oBAAA,KAAK,EAAE;wBACH,GAAG,KAAK,CAAC,KAAK;AACd,wBAAA,OAAO,EAAE,cAAc;AACvB,wBAAA,QAAQ,EAAE,eAAe;AACzB,wBAAA,KAAK,EAAE,gBAAgB;AACvB,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA;iBACY,EAEvB,CAAA,CAAA,EAAA,CACH,EACL;AACN,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAES;AAEpD,OAAO,CAAC,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Suggest.js","sources":["../src/Suggest.tsx"],"sourcesContent":["import {\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    KeyboardEventHandler,\n    forwardRef,\n    ForwardedRef,\n} from 'react';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { SuggestPicker } from '@hh.ru/magritte-ui-suggest/SuggestPicker';\nimport { DataProviderError } from '@hh.ru/magritte-ui-suggest/dataProvider';\nimport {\n    DataProviderRequest,\n    DataProviderResult,\n    SuggestProps,\n    SuggestInputComponent,\n    InputProp,\n    ControlledInputProps,\n    NativeFocusEventHandler,\n} from '@hh.ru/magritte-ui-suggest/types';\nimport { useSuggestKeyboardNav } from '@hh.ru/magritte-ui-suggest/useSuggestKeyboardNav';\n\nimport styles from './suggest.less';\n\nconst SuggestComponent = function <K, T extends SuggestInputComponent>(\n    {\n        dataProvider,\n        input,\n        inputValue,\n        onSelectValidator = () => true,\n        navigationBarProps,\n        maxHeight = 460,\n        itemsGap = 4,\n        onBlur,\n        topContent,\n        bottomContent,\n        maxWidth,\n        errorPlaceholder,\n        trls,\n        onChange,\n        onDropOpen,\n        onDropClose,\n        onBottomSheetOpen,\n        onBottomSheetClose,\n    }: SuggestProps<K, T>,\n    ref: ForwardedRef<HTMLElement>\n): ReactElement | null {\n    const { component: InputComponent, props: inputProps } = input;\n    const [inputValueState, setInputValueState] = useState(inputProps.value || '');\n    const { onChange: onInputChange, onFocus: onInputFocus, onKeyDown: onInputKeyDown } = inputProps;\n    const [requestResult, setRequestResult] = useState<{ query: string; result: DataProviderResult<K> } | null>(null);\n    const [valueSelectedFromSuggest, setValueSelectedFromSuggest] = useState<string | false>(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const wrapperInputRef = useRef<HTMLInputElement>(null);\n    const suggestContainerRef = useRef<HTMLElement>(null);\n    const inputContainerRef = useRef<HTMLDivElement>(null);\n    const inputRefMulti = useMultipleRefs(inputRef, ref);\n    const onBlurRef = useRef<NativeFocusEventHandler | undefined>(onBlur);\n    onBlurRef.current = onBlur; // update actual callback\n    const { isMobile } = useBreakpoint();\n    const [isError, setIsError] = useState(false);\n\n    const currentRequestRef = useRef<DataProviderRequest>();\n    const actualInputValue = inputValue === undefined ? inputValueState : inputValue;\n\n    const { focused, onKeyDown, onFocus, ...rest } = useSuggestKeyboardNav(\n        suggestContainerRef,\n        inputContainerRef,\n        setValueSelectedFromSuggest,\n        actualInputValue,\n        inputRef,\n        onBlurRef\n    );\n\n    const handleBottomSheetClose = () => {\n        rest.onBottomSheetClose();\n        onBottomSheetClose?.();\n    };\n\n    const onChangeHandler = useCallback(\n        (value: string, skipSuggestChangeHandler = false) => {\n            if (inputValue === undefined) {\n                setInputValueState(value);\n            }\n            !skipSuggestChangeHandler && onChange?.(value, false);\n            onInputChange?.(value);\n        },\n        [inputValue, setInputValueState, onInputChange, onChange]\n    );\n\n    const requestData = useCallback(\n        (query: string) => {\n            setIsError(false);\n            currentRequestRef.current?.cancel();\n            const request = dataProvider(query);\n            request.then(\n                (result) => {\n                    setRequestResult({ query, result });\n                },\n                (event) => {\n                    // включаем error state если это НЕ ошибка, вызванная `minCharsCount` или отменненым запросом\n                    if (!(event instanceof DataProviderError)) {\n                        setIsError(true);\n                    }\n                    setRequestResult(null);\n                }\n            );\n            currentRequestRef.current = request;\n        },\n        [dataProvider]\n    );\n\n    useEffect(() => {\n        if (valueSelectedFromSuggest !== false && requestResult?.query !== actualInputValue) {\n            setRequestResult(null);\n        }\n        if (valueSelectedFromSuggest !== actualInputValue.trim()) {\n            setValueSelectedFromSuggest(false);\n            if (focused) {\n                requestData(actualInputValue);\n            }\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [actualInputValue, requestData, focused]);\n\n    const onFocusHandler = useCallback<FocusEventHandler<HTMLElement>>(\n        (event) => {\n            setValueSelectedFromSuggest(false);\n            if (actualInputValue !== requestResult?.query) {\n                setRequestResult(null);\n                requestData(actualInputValue);\n            }\n\n            onInputFocus?.(event);\n            onFocus(event);\n        },\n        [actualInputValue, requestResult?.query, onInputFocus, onFocus, requestData]\n    );\n\n    const onValueSelectHandler = useCallback(\n        (value: string, data: K | undefined) => {\n            if (!onSelectValidator(value, data)) {\n                return;\n            }\n            if (!isMobile) {\n                inputRef.current?.focus();\n            }\n            onChangeHandler(value, true);\n            onChange?.(value, true, data);\n            setValueSelectedFromSuggest(value);\n        },\n        [onSelectValidator, isMobile, onChangeHandler, onChange]\n    );\n\n    const onKeyDownHandler = useCallback<KeyboardEventHandler<HTMLInputElement>>(\n        (event) => {\n            onKeyDown(event);\n            onInputKeyDown?.(event);\n        },\n        [onInputKeyDown, onKeyDown]\n    );\n\n    const actualInputProps = {\n        ...inputProps,\n        value: actualInputValue,\n        onFocus: onFocusHandler,\n        onChange: onChangeHandler,\n        onKeyDown: onKeyDownHandler,\n        ref: inputRefMulti,\n        wrapperRef: wrapperInputRef,\n        autoComplete: 'off',\n    } as unknown as JSX.IntrinsicAttributes & JSX.LibraryManagedAttributes<T, ControlledInputProps>;\n\n    return (\n        <>\n            <div ref={inputContainerRef} className={styles.suggestInputContainer}>\n                <InputComponent {...actualInputProps} />\n            </div>\n            <SuggestPicker\n                data={requestResult?.result}\n                activatorRef={wrapperInputRef}\n                inputRef={inputRef}\n                inputFocused={focused}\n                currentInputValueSelectedFromSuggest={valueSelectedFromSuggest !== false}\n                onValueSelect={onValueSelectHandler}\n                maxHeight={maxHeight}\n                navigationBarProps={navigationBarProps}\n                suggestContainerRef={suggestContainerRef}\n                itemsGap={itemsGap}\n                onBottomSheetClose={handleBottomSheetClose}\n                onBottomSheetOpen={onBottomSheetOpen}\n                onDropOpen={onDropOpen}\n                onDropClose={onDropClose}\n                inputValue={actualInputValue}\n                topContent={topContent}\n                bottomContent={bottomContent}\n                maxWidth={maxWidth}\n                isError={isError}\n                trls={trls}\n                errorPlaceholder={errorPlaceholder}\n                onClickReload={() => {\n                    requestData(actualInputValue);\n                }}\n                input={\n                    {\n                        component: InputComponent,\n                        props: {\n                            ...input.props,\n                            onFocus: onFocusHandler,\n                            onChange: onChangeHandler,\n                            value: actualInputValue,\n                            onKeyDown: onKeyDownHandler,\n                        },\n                    } as InputProp<T>\n                }\n            />\n        </>\n    );\n};\n\nconst Suggest = forwardRef(SuggestComponent) as (<K, T extends SuggestInputComponent>(\n    props: SuggestProps<K, T> & { ref?: ForwardedRef<HTMLElement> }\n) => ReactElement | null) & { displayName: string };\n\nSuggest.displayName = 'Suggest';\n\nexport { Suggest };\n"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/SuggestPicker.js

@@ -8,7 +8,7 @@ import { Button } from '@hh.ru/magritte-ui-button';
 import { Drop } from '@hh.ru/magritte-ui-drop';
 import { ArrowPathOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
 import { NavigationBar } from '@hh.ru/magritte-ui-navigation-bar';
-import { r as renderSection, s as styles } from './sectionRenderers-_6pPdSbU.js';
+import { r as renderSection, s as styles } from './sectionRenderers-3amOmSjY.js';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';

package/index.css

@@ -8,57 +8,57 @@
 .magritte-night-theme{
   --magritte-color-text-primary-v18-3-0:#ffffff;
 }
-.magritte-chips-section-container___Z7N-E_5-0-4{
+.magritte-chips-section-container___Z7N-E_5-1-0{
   display:flex;
   gap:12px;
   flex:1 1;
   flex-wrap:wrap;
 }
-.magritte-chips-section-container_with-other-items___eJZAr_5-0-4{
+.magritte-chips-section-container_with-other-items___eJZAr_5-1-0{
   padding-bottom:16px;
 }
-.magritte-suggest-items-container___SKj-g_5-0-4{
+.magritte-suggest-items-container___SKj-g_5-1-0{
   display:flex;
   flex-direction:column;
 }
-.magritte-suggest-items-container___SKj-g_5-0-4 .focus-visible{
+.magritte-suggest-items-container___SKj-g_5-1-0 .focus-visible{
   z-index:1;
   position:relative;
 }
-.magritte-suggest-items-container-wrapper___T2L5U_5-0-4{
+.magritte-suggest-items-container-wrapper___T2L5U_5-1-0{
   padding:var(--magritte-static-space-400-v18-3-0);
   margin:calc(-1 * var(--magritte-static-space-400-v18-3-0));
   display:flex;
   flex-direction:column;
 }
 @media (min-width: 1020px){
-  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_5-0-4{
+  body.magritte-old-layout .magritte-suggest-items-container-wrapper___T2L5U_5-1-0{
     padding:var(--magritte-static-space-300-v18-3-0);
   }
 }
 @media (min-width: 1024px){
-  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_5-0-4{
+  body:not(.magritte-old-layout) .magritte-suggest-items-container-wrapper___T2L5U_5-1-0{
     padding:var(--magritte-static-space-300-v18-3-0);
   }
 }
-.magritte-suggest-input-container___l3OkM_5-0-4{
+.magritte-suggest-input-container___l3OkM_5-1-0{
   --magritte-ui-input-caret-color-override:transparent;
   display:inline-block;
   width:100%;
 }
 @media (min-width: 700px){
-  body.magritte-old-layout .magritte-suggest-input-container___l3OkM_5-0-4{
+  body.magritte-old-layout .magritte-suggest-input-container___l3OkM_5-1-0{
     --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v18-3-0);
   }
 }
 @media (min-width: 600px){
-  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_5-0-4{
+  body:not(.magritte-old-layout) .magritte-suggest-input-container___l3OkM_5-1-0{
     --magritte-ui-input-caret-color-override:var(--magritte-color-text-primary-v18-3-0);
   }
 }
-.magritte-bottom-sheet-input-hide-caret___ikoig_5-0-4{
+.magritte-bottom-sheet-input-hide-caret___ikoig_5-1-0{
   --magritte-ui-input-caret-color-override:transparent;
 }
-.magritte-error-wrapper___Ui4xt_5-0-4{
+.magritte-error-wrapper___Ui4xt_5-1-0{
   height:100%;
 }

package/index.js

@@ -13,7 +13,7 @@ import '@hh.ru/magritte-ui-button';
 import '@hh.ru/magritte-ui-drop';
 import '@hh.ru/magritte-ui-icon/icon';
 import '@hh.ru/magritte-ui-navigation-bar';
-import './sectionRenderers-_6pPdSbU.js';
+import './sectionRenderers-3amOmSjY.js';
 import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hh.ru/magritte-ui-suggest",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ec0b2010c50d4ebc4b8e852a0fa1d42aae536c4c"
+  "gitHead": "28f52854039b9e77fb90f3eef464aa0739e2de64"
 }

package/{sectionRenderers-_6pPdSbU.js → sectionRenderers-3amOmSjY.js}

@@ -8,7 +8,7 @@ import { Cell } from '@hh.ru/magritte-ui-cell';
 import { CustomChip } from '@hh.ru/magritte-ui-chips';
 import { Text } from '@hh.ru/magritte-ui-typography';
 
-var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_5-0-4","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_5-0-4","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_5-0-4","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_5-0-4","suggest-items-container":"magritte-suggest-items-container___SKj-g_5-0-4","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_5-0-4","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_5-0-4","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_5-0-4","suggest-input-container":"magritte-suggest-input-container___l3OkM_5-0-4","suggestInputContainer":"magritte-suggest-input-container___l3OkM_5-0-4","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_5-0-4","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_5-0-4","error-wrapper":"magritte-error-wrapper___Ui4xt_5-0-4","errorWrapper":"magritte-error-wrapper___Ui4xt_5-0-4"};
+var styles = {"chips-section-container":"magritte-chips-section-container___Z7N-E_5-1-0","chipsSectionContainer":"magritte-chips-section-container___Z7N-E_5-1-0","chips-section-container_with-other-items":"magritte-chips-section-container_with-other-items___eJZAr_5-1-0","chipsSectionContainerWithOtherItems":"magritte-chips-section-container_with-other-items___eJZAr_5-1-0","suggest-items-container":"magritte-suggest-items-container___SKj-g_5-1-0","suggestItemsContainer":"magritte-suggest-items-container___SKj-g_5-1-0","suggest-items-container-wrapper":"magritte-suggest-items-container-wrapper___T2L5U_5-1-0","suggestItemsContainerWrapper":"magritte-suggest-items-container-wrapper___T2L5U_5-1-0","suggest-input-container":"magritte-suggest-input-container___l3OkM_5-1-0","suggestInputContainer":"magritte-suggest-input-container___l3OkM_5-1-0","bottom-sheet-input-hide-caret":"magritte-bottom-sheet-input-hide-caret___ikoig_5-1-0","bottomSheetInputHideCaret":"magritte-bottom-sheet-input-hide-caret___ikoig_5-1-0","error-wrapper":"magritte-error-wrapper___Ui4xt_5-1-0","errorWrapper":"magritte-error-wrapper___Ui4xt_5-1-0"};
 
 const cellSectionRenderer = (section, sectionId, onValueSelect, breakpoint) => {
     return section.items.map((item) => {
@@ -45,4 +45,4 @@ const renderSection = (section, sectionId, onValueSelect, breakpoint, length, ha
 };
 
 export { renderSection as r, styles as s };
-//# sourceMappingURL=sectionRenderers-_6pPdSbU.js.map
+//# sourceMappingURL=sectionRenderers-3amOmSjY.js.map

package/{sectionRenderers-_6pPdSbU.js.map → sectionRenderers-3amOmSjY.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sectionRenderers-_6pPdSbU.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\ninterface ValueSelectHandler<K> {\n    (value: string, data: K | undefined): void;\n}\n\ninterface SectionRenderer<T extends DataSection['type'], K = unknown> {\n    (\n        section: DataSectionOfType<T>,\n        sectionId: number,\n        onValueSelect: ValueSelectHandler<K>,\n        breakpoint: Breakpoint,\n        length: number,\n        haveBottomContent: boolean\n    ): JSX.Element[] | JSX.Element;\n}\n\nconst cellSectionRenderer: SectionRenderer<'cells'> = (section, sectionId, onValueSelect, breakpoint) => {\n    return section.items.map((item) => {\n        return (\n            <Card\n                style=\"blank\"\n                stretched\n                hoverStyle=\"neutral\"\n                onMouseDown={(event) => {\n                    event.preventDefault();\n                }}\n                onClick={(event) => {\n                    event.preventDefault();\n                    onValueSelect(item.value, item.data);\n                }}\n                actionCard\n                padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n                paddingTop={12}\n                paddingBottom={12}\n                borderRadius={12}\n                key={`cell_${sectionId}_${item.value}`}\n                data-qa=\"suggest-item-cell\"\n            >\n                <Cell {...item.componentProps} onClick={undefined} />\n            </Card>\n        );\n    });\n};\n\nconst chipsSectionRenderer: SectionRenderer<'chips'> = (\n    section,\n    sectionId,\n    onValueSelect,\n    _,\n    length,\n    haveBottomContent\n) => {\n    return (\n        <div\n            className={classnames(styles.chipsSectionContainer, {\n                // чипсы - не последний элемент или есть нижний контент\n                [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,\n            })}\n            key={`chips_section_${sectionId}`}\n        >\n            {section.items.map((item) => {\n                return (\n                    <CustomChip\n                        {...(item.componentProps || {})}\n                        key={`chips_${sectionId}_${item.value}`}\n                        onMouseDown={(event) => event.preventDefault()}\n                        onClick={() => onValueSelect(item.value, item.data)}\n                        data-qa=\"suggest-item-chips\"\n                    >\n                        {item.value}\n                    </CustomChip>\n                );\n            })}\n        </div>\n    );\n};\n\nconst delimiterSectionRenderer: SectionRenderer<'delimiter'> = (section, _, __, breakpoint) => {\n    return [\n        <Card\n            style=\"blank\"\n            stretched\n            padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n            paddingTop={8}\n            paddingBottom={8}\n            key={`delimiter_${section.text}`}\n            data-qa=\"suggest-item-delimiter\"\n        >\n            <Text style=\"secondary\" typography=\"label-3-regular\">\n                {section.text}\n            </Text>\n        </Card>,\n    ];\n};\n\nconst SECTION_TYPE_TO_RENDERER_MAP: { [K in DataSection['type']]: SectionRenderer<K> } = {\n    cells: cellSectionRenderer,\n    chips: chipsSectionRenderer,\n    delimiter: delimiterSectionRenderer,\n};\n\nexport const renderSection = <T, K extends DataSection['type']>(\n    section: DataSectionOfType<K>,\n    sectionId: number,\n    onValueSelect: ValueSelectHandler<T>,\n    breakpoint: Breakpoint,\n    length: number,\n    haveBottomContent: boolean\n): JSX.Element[] => {\n    const renderer = SECTION_TYPE_TO_RENDERER_MAP[section.type];\n    const result = renderer(\n        section,\n        sectionId,\n        onValueSelect as ValueSelectHandler<unknown>,\n        breakpoint,\n        length,\n        haveBottomContent\n    );\n    return Array.isArray(result) ? result : [result];\n};\n"],"names":["_jsx","_createElement"],"mappings":"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"}
+{"version":3,"file":"sectionRenderers-3amOmSjY.js","sources":["../src/sectionRenderers.tsx"],"sourcesContent":["import classnames from 'classnames';\n\nimport { Breakpoint } from '@hh.ru/magritte-ui-breakpoint';\nimport { Card } from '@hh.ru/magritte-ui-card';\nimport { Cell } from '@hh.ru/magritte-ui-cell';\nimport { CustomChip } from '@hh.ru/magritte-ui-chips';\nimport { DataSection, DataSectionOfType } from '@hh.ru/magritte-ui-suggest/types';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './suggest.less';\n\ninterface ValueSelectHandler<K> {\n    (value: string, data: K | undefined): void;\n}\n\ninterface SectionRenderer<T extends DataSection['type'], K = unknown> {\n    (\n        section: DataSectionOfType<T>,\n        sectionId: number,\n        onValueSelect: ValueSelectHandler<K>,\n        breakpoint: Breakpoint,\n        length: number,\n        haveBottomContent: boolean\n    ): JSX.Element[] | JSX.Element;\n}\n\nconst cellSectionRenderer: SectionRenderer<'cells'> = (section, sectionId, onValueSelect, breakpoint) => {\n    return section.items.map((item) => {\n        return (\n            <Card\n                style=\"blank\"\n                stretched\n                hoverStyle=\"neutral\"\n                onMouseDown={(event) => {\n                    event.preventDefault();\n                }}\n                onClick={(event) => {\n                    event.preventDefault();\n                    onValueSelect(item.value, item.data);\n                }}\n                actionCard\n                padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n                paddingTop={12}\n                paddingBottom={12}\n                borderRadius={12}\n                key={`cell_${sectionId}_${item.value}`}\n                data-qa=\"suggest-item-cell\"\n            >\n                <Cell {...item.componentProps} onClick={undefined} />\n            </Card>\n        );\n    });\n};\n\nconst chipsSectionRenderer: SectionRenderer<'chips'> = (\n    section,\n    sectionId,\n    onValueSelect,\n    _,\n    length,\n    haveBottomContent\n) => {\n    return (\n        <div\n            className={classnames(styles.chipsSectionContainer, {\n                // чипсы - не последний элемент или есть нижний контент\n                [styles.chipsSectionContainerWithOtherItems]: sectionId !== length - 1 || haveBottomContent,\n            })}\n            key={`chips_section_${sectionId}`}\n        >\n            {section.items.map((item) => {\n                return (\n                    <CustomChip\n                        {...(item.componentProps || {})}\n                        key={`chips_${sectionId}_${item.value}`}\n                        onMouseDown={(event) => event.preventDefault()}\n                        onClick={() => onValueSelect(item.value, item.data)}\n                        data-qa=\"suggest-item-chips\"\n                    >\n                        {item.value}\n                    </CustomChip>\n                );\n            })}\n        </div>\n    );\n};\n\nconst delimiterSectionRenderer: SectionRenderer<'delimiter'> = (section, _, __, breakpoint) => {\n    return [\n        <Card\n            style=\"blank\"\n            stretched\n            padding={[Breakpoint.XS, Breakpoint.S].includes(breakpoint) ? 0 : 12}\n            paddingTop={8}\n            paddingBottom={8}\n            key={`delimiter_${section.text}`}\n            data-qa=\"suggest-item-delimiter\"\n        >\n            <Text style=\"secondary\" typography=\"label-3-regular\">\n                {section.text}\n            </Text>\n        </Card>,\n    ];\n};\n\nconst SECTION_TYPE_TO_RENDERER_MAP: { [K in DataSection['type']]: SectionRenderer<K> } = {\n    cells: cellSectionRenderer,\n    chips: chipsSectionRenderer,\n    delimiter: delimiterSectionRenderer,\n};\n\nexport const renderSection = <T, K extends DataSection['type']>(\n    section: DataSectionOfType<K>,\n    sectionId: number,\n    onValueSelect: ValueSelectHandler<T>,\n    breakpoint: Breakpoint,\n    length: number,\n    haveBottomContent: boolean\n): JSX.Element[] => {\n    const renderer = SECTION_TYPE_TO_RENDERER_MAP[section.type];\n    const result = renderer(\n        section,\n        sectionId,\n        onValueSelect as ValueSelectHandler<unknown>,\n        breakpoint,\n        length,\n        haveBottomContent\n    );\n    return Array.isArray(result) ? result : [result];\n};\n"],"names":["_jsx","_createElement"],"mappings":"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"}

package/sectionRenderers.js

@@ -7,5 +7,5 @@ import '@hh.ru/magritte-ui-card';
 import '@hh.ru/magritte-ui-cell';
 import '@hh.ru/magritte-ui-chips';
 import '@hh.ru/magritte-ui-typography';
-export { r as renderSection } from './sectionRenderers-_6pPdSbU.js';
+export { r as renderSection } from './sectionRenderers-3amOmSjY.js';
 //# sourceMappingURL=sectionRenderers.js.map

package/types.d.ts

@@ -70,6 +70,16 @@ export interface SuggestProps<K, P extends SuggestInputComponent = SuggestInputC
     /** Обработчик выбора значения в саджесте, с помощью возвращаемого значения
      * происходит управление применением выбора */
     onSelectValidator?: (value: string, data: K | undefined) => boolean;
+    /**
+     * Обработчик изменения значения саджеста.
+     * Срабатывает как при вводе в инпут, так и при выборе значения из саджеста.
+     * При выборе пользователем элемента из списка данный обработчик будет вызван только в случае, если
+     * `onSelectValidator` вернет `true`.
+     * Второй аргумент принимает значение `true` если событие было вызвано выбором значения из списка.
+     * Третий аргумент так же передается только в случае выбора значения из списка и равен значению из поля `data`
+     * выбранного элемента.
+     */
+    onChange?: (value: string, isValueFromList: boolean, data?: K) => void;
     /** Отступ в пикселях между элементами саджеста */
     itemsGap?: TokenBaseCoreSpace;
     /** Компонент используемый в качестве инпута в саджесте и его пропсы, в качестве компонента могуст использоваться