@hh.ru/magritte-ui-chat-input 1.0.1

package/internal/TextInput.js

@@ -0,0 +1,149 @@
+import './../index.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, useRef, useLayoutEffect } from 'react';
+import classNames from 'classnames';
+import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
+import { useSendOnEnter } from './useSendOnEnter.js';
+import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
+import { s as styles } from '../styles-CQQdqOFh.js';
+import '@hh.ru/magritte-common-keyboard';
+
+const MIN_HEIGHT = 20;
+// допуск на субпиксельные значения скролла
+const HIDDEN_CONTENT_THRESHOLD = 4;
+// вертикальные паддинги ввода - источник правды здесь, ставятся инлайном (в LESS только
+// горизонтальные): фейд и раскладка считают по одним и тем же значениям без чтения стилей из DOM.
+// spacious - ввод на своём ряду (не в нижнем, где контролы), base - все остальные раскладки
+const VERTICAL_PADDING = {
+    base: { top: 8, bottom: 8 },
+    spacious: { top: 12, bottom: 16 },
+};
+const clamp = (value, min, max) => Math.max(Math.min(max, value), min);
+const useTextInputHeight = ({ inputRef, layout, maxHeight, containerWidth, value, onScrollHeightChange, }) => {
+    const [currentState, setCurrentState] = useState(() => ({
+        layout,
+        height: MIN_HEIGHT,
+    }));
+    const prevScrollHeightRef = useRef(null);
+    useLayoutEffect(() => {
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        // изменение реального scrollHeight (например, рост контента при упоре в maxHeight) —
+        // повод пересчитать зависимое (скроллбар); читаем до измерительных тоглов
+        if (prevScrollHeightRef.current !== null && prevScrollHeightRef.current !== input.scrollHeight) {
+            onScrollHeightChange?.();
+        }
+        prevScrollHeightRef.current = input.scrollHeight;
+        // высота контента на ширине конкретного слота: .measure схлопывает высоту и паддинги
+        // (scrollHeight = чистая высота контента), layout-vertical выбирает вертикальный/горизонтальный слот
+        const measureContentHeight = (targetVertical) => {
+            input.classList.add(styles.measure);
+            input.classList.toggle(styles.layoutVertical, targetVertical);
+            const height = input.scrollHeight;
+            input.classList.toggle(styles.layoutVertical, currentState.layout === 'vertical');
+            input.classList.remove(styles.measure);
+            return height;
+        };
+        // лейаут определяется по горизонтальному слоту (влезает ли контент в одну строку). Замер
+        // горизонтального слота — форс-рефлоу, поэтому сначала снимаем заведомо известные случаи:
+        // внешний layout='vertical' и перенос строки в значении гарантируют вертикаль, пустое
+        // значение — горизонталь; замеряем только неоднозначный однострочный случай (перенос по ширине).
+        // Высоту всегда берём на ширине целевого слота — иначе размер меряется на старом месте.
+        let isVertical;
+        if (layout === 'vertical' || value.includes('\n')) {
+            isVertical = true;
+        }
+        else if (value === '') {
+            isVertical = false;
+        }
+        else {
+            isVertical = measureContentHeight(false) > MIN_HEIGHT;
+        }
+        const contentHeight = isVertical ? measureContentHeight(true) : MIN_HEIGHT;
+        const newState = {
+            layout: isVertical ? 'vertical' : 'horizontal',
+            height: clamp(contentHeight, MIN_HEIGHT, maxHeight ?? contentHeight),
+        };
+        if (Object.keys(currentState).some((key) => currentState[key] !== newState[key])) {
+            setCurrentState(newState);
+        }
+        // currentState не должно быть в зависимостях, иначе зациклится обновление
+        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
+    }, [layout, maxHeight, value, inputRef, containerWidth]);
+    return currentState;
+};
+const useFocus = () => {
+    const [isFocused, setFocused] = useState(false);
+    const focusHandler = useCallback((event) => {
+        setFocused(event.target.classList.contains('focus-visible'));
+    }, []);
+    const blurHandler = useCallback(() => {
+        setFocused(false);
+    }, []);
+    return { focusHandler, blurHandler, isFocused };
+};
+const TextInputComponent = ({ value, maxHeight, layout, onSend, containerWidth, hasCentral, hasBothSideControls, onKeyDown, onScroll, className, style, ...textareaProps }, forwardedRef) => {
+    const inputRef = useRef(null);
+    const { hasVerticalScroll, verticalScrollbarProps, scrollContainerRef, resizeCallbackRef, hoverContainerCssClass } = useScrollbar({ axis: 'vertical' });
+    const refCallback = useMultipleRefs(inputRef, scrollContainerRef, forwardedRef);
+    // ResizeObserver внутри useScrollbar видит только изменения размера textarea:
+    // после упора в maxHeight растет лишь scrollHeight - пересчитываем трек по нему
+    const handleScrollHeightChange = useCallback(() => {
+        resizeCallbackRef.current?.();
+    }, [resizeCallbackRef]);
+    const inputParams = useTextInputHeight({
+        inputRef,
+        layout,
+        maxHeight,
+        value,
+        containerWidth,
+        onScrollHeightChange: handleScrollHeightChange,
+    });
+    const verticalPadding = hasCentral || (hasBothSideControls && inputParams.layout === 'vertical')
+        ? VERTICAL_PADDING.spacious
+        : VERTICAL_PADDING.base;
+    // фейд у краёв показываем, только когда за соответствующим краем есть непроскролленный контент
+    const [hasHiddenTop, setHasHiddenTop] = useState(false);
+    const [hasHiddenBottom, setHasHiddenBottom] = useState(false);
+    const updateFades = useCallback(() => {
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        // верхний и нижний паддинги - часть скроллируемой области, но контента в них нет:
+        // остаток скролла в их пределах не значит, что текст скрыт
+        const hiddenTop = input.scrollTop - verticalPadding.top;
+        const hiddenBottom = input.scrollHeight - input.scrollTop - input.clientHeight - verticalPadding.bottom;
+        setHasHiddenTop(hiddenTop > HIDDEN_CONTENT_THRESHOLD);
+        setHasHiddenBottom(hiddenBottom > HIDDEN_CONTENT_THRESHOLD);
+    }, [verticalPadding.top, verticalPadding.bottom]);
+    // позиция скролла отслеживается через onScroll, здесь - изменения контента, высоты и ширины
+    // контейнера: при упоре в maxHeight высота не меняется, но текст перетекает и за краями
+    // может появиться/исчезнуть скрытый контент
+    useLayoutEffect(() => {
+        updateFades();
+    }, [value, inputParams.height, containerWidth, updateFades]);
+    const handleKeyDown = useSendOnEnter({ onSend, onKeyDown });
+    const handleScroll = useCallback((event) => {
+        updateFades();
+        onScroll?.(event);
+    }, [updateFades, onScroll]);
+    const { isFocused, focusHandler, blurHandler } = useFocus();
+    return (jsxs("div", { className: classNames(styles.textInputWrapper, hoverContainerCssClass), children: [jsx("textarea", { enterKeyHint: "enter", ...textareaProps, onFocus: focusHandler, onBlur: blurHandler, className: classNames(styles.textInput, {
+                    [styles.layoutVertical]: inputParams.layout === 'vertical',
+                    [styles.withTopFade]: hasHiddenTop,
+                    [styles.withBottomFade]: hasHiddenBottom,
+                    [styles.textInputFocused]: isFocused,
+                }, className), style: {
+                    ...style,
+                    height: inputParams.height,
+                    paddingTop: verticalPadding.top,
+                    paddingBottom: verticalPadding.bottom,
+                }, ref: refCallback, value: value, onKeyDown: handleKeyDown, onScroll: handleScroll, "data-qa": "text-input" }), hasVerticalScroll && (jsx("div", { className: styles.scrollbarCell, children: jsx(Scrollbar, { ...verticalScrollbarProps }) }))] }));
+};
+const TextInput = forwardRef(TextInputComponent);
+
+export { TextInput, useFocus };
+//# sourceMappingURL=TextInput.js.map

package/internal/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["src/internal/TextInput.tsx"],"sourcesContent":["import {\n    type ForwardedRef,\n    forwardRef,\n    type RefObject,\n    type TextareaHTMLAttributes,\n    type UIEvent,\n    type FocusEventHandler,\n    useCallback,\n    useLayoutEffect,\n    useRef,\n    useState,\n} from 'react';\nimport classNames from 'classnames';\n\nimport { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';\nimport { useSendOnEnter } from '@hh.ru/magritte-ui-chat-input/internal/useSendOnEnter';\nimport { Scrollbar, useScrollbar } from '@hh.ru/magritte-ui-scrollbar';\n\nimport styles from '../styles.less';\n\ntype TextInputProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> & {\n    value: string;\n    maxHeight?: number;\n    layout: 'vertical' | 'horizontal';\n    onSend?: VoidFunction;\n    /** Ширина контейнера; её изменение пере-измеряет layout (перенос текста зависит от ширины) */\n    containerWidth?: number;\n    /** Есть центральный слот - ввод всегда на своём ряду, паддинги spacious */\n    hasCentral: boolean;\n    /** Контролы с обеих сторон - в вертикальном лейауте ввод уезжает на свой ряд, паддинги spacious */\n    hasBothSideControls: boolean;\n};\n\ninterface TextInputState {\n    layout: 'vertical' | 'horizontal';\n    height: number;\n}\n\nconst MIN_HEIGHT = 20;\n\n// допуск на субпиксельные значения скролла\nconst HIDDEN_CONTENT_THRESHOLD = 4;\n\n// вертикальные паддинги ввода - источник правды здесь, ставятся инлайном (в LESS только\n// горизонтальные): фейд и раскладка считают по одним и тем же значениям без чтения стилей из DOM.\n// spacious - ввод на своём ряду (не в нижнем, где контролы), base - все остальные раскладки\nconst VERTICAL_PADDING = {\n    base: { top: 8, bottom: 8 },\n    spacious: { top: 12, bottom: 16 },\n} as const;\n\nconst clamp = (value: number, min: number, max: number) => Math.max(Math.min(max, value), min);\n\nconst useTextInputHeight = ({\n    inputRef,\n    layout,\n    maxHeight,\n    containerWidth,\n    value,\n    onScrollHeightChange,\n}: Pick<TextInputProps, 'layout' | 'maxHeight' | 'value' | 'containerWidth'> & {\n    inputRef: RefObject<HTMLTextAreaElement>;\n    onScrollHeightChange?: VoidFunction;\n}) => {\n    const [currentState, setCurrentState] = useState<TextInputState>(() => ({\n        layout,\n        height: MIN_HEIGHT,\n    }));\n    const prevScrollHeightRef = useRef<number | null>(null);\n\n    useLayoutEffect(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n\n        // изменение реального scrollHeight (например, рост контента при упоре в maxHeight) —\n        // повод пересчитать зависимое (скроллбар); читаем до измерительных тоглов\n        if (prevScrollHeightRef.current !== null && prevScrollHeightRef.current !== input.scrollHeight) {\n            onScrollHeightChange?.();\n        }\n        prevScrollHeightRef.current = input.scrollHeight;\n\n        // высота контента на ширине конкретного слота: .measure схлопывает высоту и паддинги\n        // (scrollHeight = чистая высота контента), layout-vertical выбирает вертикальный/горизонтальный слот\n        const measureContentHeight = (targetVertical: boolean) => {\n            input.classList.add(styles.measure);\n            input.classList.toggle(styles.layoutVertical, targetVertical);\n            const height = input.scrollHeight;\n            input.classList.toggle(styles.layoutVertical, currentState.layout === 'vertical');\n            input.classList.remove(styles.measure);\n            return height;\n        };\n\n        // лейаут определяется по горизонтальному слоту (влезает ли контент в одну строку). Замер\n        // горизонтального слота — форс-рефлоу, поэтому сначала снимаем заведомо известные случаи:\n        // внешний layout='vertical' и перенос строки в значении гарантируют вертикаль, пустое\n        // значение — горизонталь; замеряем только неоднозначный однострочный случай (перенос по ширине).\n        // Высоту всегда берём на ширине целевого слота — иначе размер меряется на старом месте.\n        let isVertical: boolean;\n        if (layout === 'vertical' || value.includes('\\n')) {\n            isVertical = true;\n        } else if (value === '') {\n            isVertical = false;\n        } else {\n            isVertical = measureContentHeight(false) > MIN_HEIGHT;\n        }\n        const contentHeight = isVertical ? measureContentHeight(true) : MIN_HEIGHT;\n\n        const newState: TextInputState = {\n            layout: isVertical ? 'vertical' : 'horizontal',\n            height: clamp(contentHeight, MIN_HEIGHT, maxHeight ?? contentHeight),\n        };\n\n        if (\n            (Object.keys(currentState) as Array<keyof TextInputState>).some(\n                (key) => currentState[key] !== newState[key]\n            )\n        ) {\n            setCurrentState(newState);\n        }\n        // currentState не должно быть в зависимостях, иначе зациклится обновление\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [layout, maxHeight, value, inputRef, containerWidth]);\n\n    return currentState;\n};\n\nexport const useFocus = <T extends HTMLTextAreaElement = HTMLTextAreaElement>(): {\n    focusHandler: FocusEventHandler<T>;\n    blurHandler: FocusEventHandler<T>;\n    isFocused: boolean;\n} => {\n    const [isFocused, setFocused] = useState(false);\n    const focusHandler = useCallback<FocusEventHandler<T>>((event) => {\n        setFocused(event.target.classList.contains('focus-visible'));\n    }, []);\n\n    const blurHandler = useCallback<FocusEventHandler<T>>(() => {\n        setFocused(false);\n    }, []);\n\n    return { focusHandler, blurHandler, isFocused };\n};\n\nconst TextInputComponent = (\n    {\n        value,\n        maxHeight,\n        layout,\n        onSend,\n        containerWidth,\n        hasCentral,\n        hasBothSideControls,\n        onKeyDown,\n        onScroll,\n        className,\n        style,\n        ...textareaProps\n    }: TextInputProps,\n    forwardedRef: ForwardedRef<HTMLTextAreaElement>\n) => {\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n    const { hasVerticalScroll, verticalScrollbarProps, scrollContainerRef, resizeCallbackRef, hoverContainerCssClass } =\n        useScrollbar({ axis: 'vertical' });\n    const refCallback = useMultipleRefs(inputRef, scrollContainerRef, forwardedRef);\n\n    // ResizeObserver внутри useScrollbar видит только изменения размера textarea:\n    // после упора в maxHeight растет лишь scrollHeight - пересчитываем трек по нему\n    const handleScrollHeightChange = useCallback(() => {\n        resizeCallbackRef.current?.();\n    }, [resizeCallbackRef]);\n\n    const inputParams = useTextInputHeight({\n        inputRef,\n        layout,\n        maxHeight,\n        value,\n        containerWidth,\n        onScrollHeightChange: handleScrollHeightChange,\n    });\n\n    const verticalPadding =\n        hasCentral || (hasBothSideControls && inputParams.layout === 'vertical')\n            ? VERTICAL_PADDING.spacious\n            : VERTICAL_PADDING.base;\n\n    // фейд у краёв показываем, только когда за соответствующим краем есть непроскролленный контент\n    const [hasHiddenTop, setHasHiddenTop] = useState(false);\n    const [hasHiddenBottom, setHasHiddenBottom] = useState(false);\n    const updateFades = useCallback(() => {\n        const input = inputRef.current;\n        if (!input) {\n            return;\n        }\n        // верхний и нижний паддинги - часть скроллируемой области, но контента в них нет:\n        // остаток скролла в их пределах не значит, что текст скрыт\n        const hiddenTop = input.scrollTop - verticalPadding.top;\n        const hiddenBottom = input.scrollHeight - input.scrollTop - input.clientHeight - verticalPadding.bottom;\n        setHasHiddenTop(hiddenTop > HIDDEN_CONTENT_THRESHOLD);\n        setHasHiddenBottom(hiddenBottom > HIDDEN_CONTENT_THRESHOLD);\n    }, [verticalPadding.top, verticalPadding.bottom]);\n\n    // позиция скролла отслеживается через onScroll, здесь - изменения контента, высоты и ширины\n    // контейнера: при упоре в maxHeight высота не меняется, но текст перетекает и за краями\n    // может появиться/исчезнуть скрытый контент\n    useLayoutEffect(() => {\n        updateFades();\n    }, [value, inputParams.height, containerWidth, updateFades]);\n\n    const handleKeyDown = useSendOnEnter({ onSend, onKeyDown });\n    const handleScroll = useCallback(\n        (event: UIEvent<HTMLTextAreaElement>) => {\n            updateFades();\n            onScroll?.(event);\n        },\n        [updateFades, onScroll]\n    );\n\n    const { isFocused, focusHandler, blurHandler } = useFocus();\n\n    return (\n        <div className={classNames(styles.textInputWrapper, hoverContainerCssClass)}>\n            <textarea\n                enterKeyHint=\"enter\"\n                {...textareaProps}\n                onFocus={focusHandler}\n                onBlur={blurHandler}\n                className={classNames(\n                    styles.textInput,\n                    {\n                        [styles.layoutVertical]: inputParams.layout === 'vertical',\n                        [styles.withTopFade]: hasHiddenTop,\n                        [styles.withBottomFade]: hasHiddenBottom,\n                        [styles.textInputFocused]: isFocused,\n                    },\n                    className\n                )}\n                style={{\n                    ...style,\n                    height: inputParams.height,\n                    paddingTop: verticalPadding.top,\n                    paddingBottom: verticalPadding.bottom,\n                }}\n                ref={refCallback}\n                value={value}\n                onKeyDown={handleKeyDown}\n                onScroll={handleScroll}\n                data-qa=\"text-input\"\n            />\n            {hasVerticalScroll && (\n                <div className={styles.scrollbarCell}>\n                    <Scrollbar {...verticalScrollbarProps} />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport const TextInput = forwardRef(TextInputComponent);\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/internal/VoiceRecord.d.ts

@@ -0,0 +1,24 @@
+import { type FC } from 'react';
+import { type ChatInputButtonAria } from '@hh.ru/magritte-ui-chat-input/types';
+export type VoiceRecordMode = 'recording' | 'processing';
+export interface VoiceRecordProps {
+    mode: VoiceRecordMode;
+    /** Живой стрим микрофона во время записи (null в обработке) — индикатор по нему определяет,
+     * есть ли сейчас звук */
+    stream: MediaStream | null;
+    /** Метка старта записи (`Date.now()`); `null` вне записи. Таймер `mm:ss` тикаем локально,
+     * чтобы посекундное обновление не ререндерило корень ChatInput */
+    startedAt: number | null;
+    /** Текст в состоянии обработки (вместо таймера), например «Обрабатываю запись» */
+    processingLabel?: string;
+    /** Нажата кнопка подтверждения (check) */
+    onComplete: VoidFunction;
+    /** Нажата кнопка отмены (cross) */
+    onCancel: VoidFunction;
+    /** aria/data-qa пропсы кнопки подтверждения (галочка) */
+    completeButtonProps?: ChatInputButtonAria;
+    /** aria/data-qa пропсы кнопки отмены (крестик) */
+    cancelButtonProps?: ChatInputButtonAria;
+    'data-qa'?: string;
+}
+export declare const VoiceRecord: FC<VoiceRecordProps>;

package/internal/VoiceRecord.js

@@ -0,0 +1,45 @@
+import './../index.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from '@hh.ru/magritte-common-use-translation';
+import { FocusTarget } from './FocusTarget.js';
+import { VoiceRecordIndicator } from './VoiceRecordIndicator.js';
+import { FOCUS_PRIORITY } from './focusGroup.js';
+import { CrossOutlinedSize24, CheckOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';
+import { Loader } from '@hh.ru/magritte-ui-loader';
+import { Text } from '@hh.ru/magritte-ui-typography';
+import { s as styles } from '../styles-CQQdqOFh.js';
+import './useHasSound.js';
+
+const formatDuration = (totalSeconds) => {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+};
+const useElapsedSeconds = (startedAt, active) => {
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+    useEffect(() => {
+        if (!active || startedAt === null) {
+            setElapsedSeconds(0);
+            return undefined;
+        }
+        const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));
+        update();
+        const intervalId = setInterval(update, 1000);
+        return () => clearInterval(intervalId);
+    }, [startedAt, active]);
+    return elapsedSeconds;
+};
+const VoiceRecord = ({ mode, stream, startedAt, processingLabel, onComplete, onCancel, completeButtonProps, cancelButtonProps, 'data-qa': dataQa, }) => {
+    const isProcessing = mode === 'processing';
+    const elapsedSeconds = useElapsedSeconds(startedAt, !isProcessing);
+    const completeLabel = useTranslation('ChatInput', 'completeRecord');
+    const cancelLabel = useTranslation('ChatInput', 'cancelRecord');
+    const processingTrl = useTranslation('ChatInput', 'processingLabel');
+    return (jsxs("div", { className: styles.voiceRecord, "data-qa": dataQa, children: [jsxs("div", { className: styles.voiceRecordLeft, children: [jsx(VoiceRecordIndicator, { stream: stream }), jsx(Text, { typography: "label-3-regular", style: "tertiary", ellipsis: true, children: isProcessing ? (processingLabel ?? processingTrl) : formatDuration(elapsedSeconds) })] }), jsx("div", { className: classNames(styles.voiceRecordRight, { [styles.voiceProcessing]: isProcessing }), children: isProcessing ? (jsx(Loader, { size: 24, color: "secondary" })) : (jsxs(Fragment, { children: [jsx(FocusTarget, { priority: FOCUS_PRIORITY.voiceCancel, children: jsx(CrossOutlinedSize24, { "aria-label": cancelLabel, "data-qa": "record-cancel", ...cancelButtonProps, borderRadius: 12, padding: 8, initialColor: "secondary", onClick: onCancel }) }), jsx(FocusTarget, { priority: FOCUS_PRIORITY.voiceComplete, children: jsx(CheckOutlinedSize24, { "aria-label": completeLabel, "data-qa": "record-complete", ...completeButtonProps, borderRadius: 12, padding: 8, initialColor: "inverse", backgroundStyle: "constant", onClick: onComplete }) })] })) })] }));
+};
+VoiceRecord.displayName = 'ChatInput.VoiceRecord';
+
+export { VoiceRecord };
+//# sourceMappingURL=VoiceRecord.js.map

package/internal/VoiceRecord.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecord.js","sources":["src/internal/VoiceRecord.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { FocusTarget } from '@hh.ru/magritte-ui-chat-input/internal/FocusTarget';\nimport { VoiceRecordIndicator } from '@hh.ru/magritte-ui-chat-input/internal/VoiceRecordIndicator';\nimport { FOCUS_PRIORITY } from '@hh.ru/magritte-ui-chat-input/internal/focusGroup';\nimport { type ChatInputButtonAria } from '@hh.ru/magritte-ui-chat-input/types';\nimport { CheckOutlinedSize24, CrossOutlinedSize24 } from '@hh.ru/magritte-ui-icon/icon';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../styles.less';\n\nexport type VoiceRecordMode = 'recording' | 'processing';\n\n// чисто презентационный блок: всё состояние (режим, таймер) приходит пропсами\n// из сессии записи (useVoiceRecordSession), кнопки только дёргают колбэки\nexport interface VoiceRecordProps {\n    mode: VoiceRecordMode;\n    /** Живой стрим микрофона во время записи (null в обработке) — индикатор по нему определяет,\n     * есть ли сейчас звук */\n    stream: MediaStream | null;\n    /** Метка старта записи (`Date.now()`); `null` вне записи. Таймер `mm:ss` тикаем локально,\n     * чтобы посекундное обновление не ререндерило корень ChatInput */\n    startedAt: number | null;\n    /** Текст в состоянии обработки (вместо таймера), например «Обрабатываю запись» */\n    processingLabel?: string;\n    /** Нажата кнопка подтверждения (check) */\n    onComplete: VoidFunction;\n    /** Нажата кнопка отмены (cross) */\n    onCancel: VoidFunction;\n    /** aria/data-qa пропсы кнопки подтверждения (галочка) */\n    completeButtonProps?: ChatInputButtonAria;\n    /** aria/data-qa пропсы кнопки отмены (крестик) */\n    cancelButtonProps?: ChatInputButtonAria;\n    'data-qa'?: string;\n}\n\nconst formatDuration = (totalSeconds: number): string => {\n    const minutes = Math.floor(totalSeconds / 60);\n    const seconds = totalSeconds % 60;\n    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;\n};\n\nconst useElapsedSeconds = (startedAt: number | null, active: boolean): number => {\n    const [elapsedSeconds, setElapsedSeconds] = useState(0);\n\n    useEffect(() => {\n        if (!active || startedAt === null) {\n            setElapsedSeconds(0);\n            return undefined;\n        }\n        const update = () => setElapsedSeconds(Math.max(0, Math.floor((Date.now() - startedAt) / 1000)));\n        update();\n        const intervalId = setInterval(update, 1000);\n        return () => clearInterval(intervalId);\n    }, [startedAt, active]);\n\n    return elapsedSeconds;\n};\n\nexport const VoiceRecord: FC<VoiceRecordProps> = ({\n    mode,\n    stream,\n    startedAt,\n    processingLabel,\n    onComplete,\n    onCancel,\n    completeButtonProps,\n    cancelButtonProps,\n    'data-qa': dataQa,\n}) => {\n    const isProcessing = mode === 'processing';\n    const elapsedSeconds = useElapsedSeconds(startedAt, !isProcessing);\n    const completeLabel = useTranslation('ChatInput', 'completeRecord');\n    const cancelLabel = useTranslation('ChatInput', 'cancelRecord');\n    const processingTrl = useTranslation('ChatInput', 'processingLabel');\n\n    return (\n        <div className={styles.voiceRecord} data-qa={dataQa}>\n            <div className={styles.voiceRecordLeft}>\n                <VoiceRecordIndicator stream={stream} />\n                <Text typography=\"label-3-regular\" style=\"tertiary\" ellipsis>\n                    {isProcessing ? (processingLabel ?? processingTrl) : formatDuration(elapsedSeconds)}\n                </Text>\n            </div>\n            <div className={classNames(styles.voiceRecordRight, { [styles.voiceProcessing]: isProcessing })}>\n                {isProcessing ? (\n                    <Loader size={24} color=\"secondary\" />\n                ) : (\n                    <>\n                        <FocusTarget priority={FOCUS_PRIORITY.voiceCancel}>\n                            <CrossOutlinedSize24\n                                aria-label={cancelLabel}\n                                data-qa=\"record-cancel\"\n                                {...cancelButtonProps}\n                                borderRadius={12}\n                                padding={8}\n                                initialColor=\"secondary\"\n                                onClick={onCancel}\n                            />\n                        </FocusTarget>\n                        <FocusTarget priority={FOCUS_PRIORITY.voiceComplete}>\n                            <CheckOutlinedSize24\n                                aria-label={completeLabel}\n                                data-qa=\"record-complete\"\n                                {...completeButtonProps}\n                                borderRadius={12}\n                                padding={8}\n                                initialColor=\"inverse\"\n                                backgroundStyle=\"constant\"\n                                onClick={onComplete}\n                            />\n                        </FocusTarget>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nVoiceRecord.displayName = 'ChatInput.VoiceRecord';\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/internal/VoiceRecordIndicator.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+export declare const VoiceRecordIndicator: FC<{
+    stream: MediaStream | null;
+}>;

package/internal/VoiceRecordIndicator.js

@@ -0,0 +1,22 @@
+import './../index.css';
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useHasSound } from './useHasSound.js';
+import { s as styles } from '../styles-CQQdqOFh.js';
+import 'react';
+
+const TARGET_HEIGHT = [2, 11, 22, 22, 22, 11, 22, 11, 6, 2];
+const PHASE_SHIFT = [240, 120, 40, 210, 70, 180, 20, 150, 90, 260];
+const VoiceRecordIndicator = ({ stream }) => {
+    const hasSound = useHasSound(stream);
+    return (jsx("div", { className: classNames(styles.voiceRecordIndicator, {
+            [styles.voiceRecordIndicatorHasSound]: hasSound,
+        }), children: TARGET_HEIGHT.map((targetHeight, index) => (jsx("div", { className: styles.voiceRecordIndicatorBar, style: {
+                '--target-height': targetHeight,
+                animationDelay: `${-PHASE_SHIFT[index]}ms`,
+            } }, index))) }));
+};
+VoiceRecordIndicator.displayName = 'VoiceRecordIndicator';
+
+export { VoiceRecordIndicator };
+//# sourceMappingURL=VoiceRecordIndicator.js.map

package/internal/VoiceRecordIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceRecordIndicator.js","sources":["src/internal/VoiceRecordIndicator.tsx"],"sourcesContent":["import { type CSSProperties, type FC } from 'react';\nimport classNames from 'classnames';\n\nimport { useHasSound } from '@hh.ru/magritte-ui-chat-input/internal/useHasSound';\n\nimport styles from '../styles.less';\n\nconst TARGET_HEIGHT = [2, 11, 22, 22, 22, 11, 22, 11, 6, 2];\nconst PHASE_SHIFT = [240, 120, 40, 210, 70, 180, 20, 150, 90, 260];\n\nexport const VoiceRecordIndicator: FC<{ stream: MediaStream | null }> = ({ stream }) => {\n    const hasSound = useHasSound(stream);\n\n    return (\n        <div\n            className={classNames(styles.voiceRecordIndicator, {\n                [styles.voiceRecordIndicatorHasSound]: hasSound,\n            })}\n        >\n            {TARGET_HEIGHT.map((targetHeight, index) => (\n                <div\n                    key={index}\n                    className={styles.voiceRecordIndicatorBar}\n                    style={\n                        {\n                            '--target-height': targetHeight,\n                            animationDelay: `${-PHASE_SHIFT[index]}ms`,\n                        } as CSSProperties\n                    }\n                />\n            ))}\n        </div>\n    );\n};\n\nVoiceRecordIndicator.displayName = 'VoiceRecordIndicator';\n"],"names":["_jsx"],"mappings":";;;;;;AAOA,MAAM,aAAa,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5D,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;MAEtD,oBAAoB,GAAuC,CAAC,EAAE,MAAM,EAAE,KAAI;AACnF,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;IAErC,QACIA,aACI,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,EAAE;AAC/C,YAAA,CAAC,MAAM,CAAC,4BAA4B,GAAG,QAAQ;SAClD,CAAC,EAAA,QAAA,EAED,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,KAAK,MACnCA,aAEI,SAAS,EAAE,MAAM,CAAC,uBAAuB,EACzC,KAAK,EACD;AACI,gBAAA,iBAAiB,EAAE,YAAY;AAC/B,gBAAA,cAAc,EAAE,CAAG,EAAA,CAAC,WAAW,CAAC,KAAK,CAAC,CAAI,EAAA,CAAA;AAC5B,aAAA,EAAA,EANjB,KAAK,CAQZ,CACL,CAAC,EAAA,CACA,EACR;AACN,EAAE;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB;;;;"}

package/internal/focusGroup.d.ts

@@ -0,0 +1,22 @@
+export declare const FOCUS_PRIORITY_ATTR = "data-magritte-chat-input-focus-priority";
+/** Атрибут приоритета для спреда на существующий хост-элемент (слотовый div и т.п.);
+ * там, где хоста нет (иконки-кнопки), — обёртка FocusTarget */
+export declare const focusPriorityProps: (priority: number) => Record<string, number>;
+export declare const FOCUS_PRIORITY: {
+    /** Кнопка отправки — первая среди кнопок текстового режима */
+    readonly send: 1;
+    /** Кнопка записи голоса — сразу после отправки */
+    readonly voice: 2;
+    /** «Прочие» кнопки правого слота */
+    readonly rightSlot: 3;
+    /** «Прочие» кнопки левого слота */
+    readonly leftSlot: 4;
+    /** Кнопки центрального слота */
+    readonly centralSlot: 5;
+    /** Интерактив внутри превью */
+    readonly previewSlot: 6;
+    /** Подтверждение записи (галочка) — первая в слое записи */
+    readonly voiceComplete: 1;
+    /** Отмена записи (крестик) */
+    readonly voiceCancel: 2;
+};

package/internal/focusGroup.js

@@ -0,0 +1,36 @@
+import './../index.css';
+// Roving tabindex для кнопок ChatInput (см. useRovingFocusGroup). Приоритет обхода задаётся
+// data-атрибутом на контейнере: либо на обёртке-маркере вокруг наших кнопок (FocusTarget), либо
+// прямо на div-е слота — тогда он распространяется на все фокусабельные элементы приложения внутри.
+// Для элемента действует ближайший контейнер-предок, поэтому send/voice внутри слота обгоняют
+// «прочие» кнопки этого же слота.
+const FOCUS_PRIORITY_ATTR = 'data-magritte-chat-input-focus-priority';
+/** Атрибут приоритета для спреда на существующий хост-элемент (слотовый div и т.п.);
+ * там, где хоста нет (иконки-кнопки), — обёртка FocusTarget */
+const focusPriorityProps = (priority) => ({
+    [FOCUS_PRIORITY_ATTR]: priority,
+});
+// Значения статические, без деления на режимы: неактивный слой режима всегда под aria-hidden
+// (ModeTransition ставит его синхронно со сменой режима), а такие элементы из обхода исключаются —
+// поэтому наборы текстового и голосового режимов никогда не встречаются в одном списке
+const FOCUS_PRIORITY = {
+    /** Кнопка отправки — первая среди кнопок текстового режима */
+    send: 1,
+    /** Кнопка записи голоса — сразу после отправки */
+    voice: 2,
+    /** «Прочие» кнопки правого слота */
+    rightSlot: 3,
+    /** «Прочие» кнопки левого слота */
+    leftSlot: 4,
+    /** Кнопки центрального слота */
+    centralSlot: 5,
+    /** Интерактив внутри превью */
+    previewSlot: 6,
+    /** Подтверждение записи (галочка) — первая в слое записи */
+    voiceComplete: 1,
+    /** Отмена записи (крестик) */
+    voiceCancel: 2,
+};
+
+export { FOCUS_PRIORITY, FOCUS_PRIORITY_ATTR, focusPriorityProps };
+//# sourceMappingURL=focusGroup.js.map

package/internal/focusGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusGroup.js","sources":["src/internal/focusGroup.ts"],"sourcesContent":["// Roving tabindex для кнопок ChatInput (см. useRovingFocusGroup). Приоритет обхода задаётся\n// data-атрибутом на контейнере: либо на обёртке-маркере вокруг наших кнопок (FocusTarget), либо\n// прямо на div-е слота — тогда он распространяется на все фокусабельные элементы приложения внутри.\n// Для элемента действует ближайший контейнер-предок, поэтому send/voice внутри слота обгоняют\n// «прочие» кнопки этого же слота.\n\nexport const FOCUS_PRIORITY_ATTR = 'data-magritte-chat-input-focus-priority';\n\n/** Атрибут приоритета для спреда на существующий хост-элемент (слотовый div и т.п.);\n * там, где хоста нет (иконки-кнопки), — обёртка FocusTarget */\nexport const focusPriorityProps = (priority: number): Record<string, number> => ({\n    [FOCUS_PRIORITY_ATTR]: priority,\n});\n\n// Значения статические, без деления на режимы: неактивный слой режима всегда под aria-hidden\n// (ModeTransition ставит его синхронно со сменой режима), а такие элементы из обхода исключаются —\n// поэтому наборы текстового и голосового режимов никогда не встречаются в одном списке\nexport const FOCUS_PRIORITY = {\n    /** Кнопка отправки — первая среди кнопок текстового режима */\n    send: 1,\n    /** Кнопка записи голоса — сразу после отправки */\n    voice: 2,\n    /** «Прочие» кнопки правого слота */\n    rightSlot: 3,\n    /** «Прочие» кнопки левого слота */\n    leftSlot: 4,\n    /** Кнопки центрального слота */\n    centralSlot: 5,\n    /** Интерактив внутри превью */\n    previewSlot: 6,\n    /** Подтверждение записи (галочка) — первая в слое записи */\n    voiceComplete: 1,\n    /** Отмена записи (крестик) */\n    voiceCancel: 2,\n} as const;\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AAEO,MAAM,mBAAmB,GAAG,0CAA0C;AAE7E;AAC+D;MAClD,kBAAkB,GAAG,CAAC,QAAgB,MAA8B;IAC7E,CAAC,mBAAmB,GAAG,QAAQ;AAClC,CAAA,EAAE;AAEH;AACA;AACA;AACa,MAAA,cAAc,GAAG;;AAE1B,IAAA,IAAI,EAAE,CAAC;;AAEP,IAAA,KAAK,EAAE,CAAC;;AAER,IAAA,SAAS,EAAE,CAAC;;AAEZ,IAAA,QAAQ,EAAE,CAAC;;AAEX,IAAA,WAAW,EAAE,CAAC;;AAEd,IAAA,WAAW,EAAE,CAAC;;AAEd,IAAA,aAAa,EAAE,CAAC;;AAEhB,IAAA,WAAW,EAAE,CAAC;;;;;"}

package/internal/useHasSound.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Флаг «в стриме микрофона сейчас есть звук». Пока стрим есть — держит rAF-цикл и читает
+ * RMS через AnalyserNode, сравнивая с порогом (флаг ещё RELEASE_MS удерживается после последнего
+ * громкого кадра, чтобы не мигать на паузах между словами). Ререндер только на смене флага.
+ * Треки стрима не трогаем — ими владеет сессия записи (`useVoiceRecordSession`), только читаем.
+ */
+export declare const useHasSound: (stream: MediaStream | null) => boolean;

package/internal/useHasSound.js

@@ -0,0 +1,77 @@
+import './../index.css';
+import { useState, useEffect } from 'react';
+
+// Порог RMS, выше которого считаем, что звук есть (речь по RMS обычно ~0.1+, шумовой пол — ниже)
+const SOUND_RMS_THRESHOLD = 0.04;
+// Сколько держим флаг «звук есть» после последнего громкого кадра — чтобы паузы между словами
+// не роняли индикатор в тишину и он не мигал
+const RELEASE_MS = 350;
+// Период опроса громкости: флаг булев с гистерезисом RELEASE_MS, детализация кадра дисплея тут
+// не нужна — 100 мс дают запас в ~3.5 замера на окно удержания при кратно меньшей нагрузке, чем rAF
+const SAMPLE_INTERVAL_MS = 100;
+const getAudioContextConstructor = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+    const scoped = window;
+    return scoped.AudioContext ?? scoped.webkitAudioContext ?? null;
+};
+/**
+ * Флаг «в стриме микрофона сейчас есть звук». Пока стрим есть — держит rAF-цикл и читает
+ * RMS через AnalyserNode, сравнивая с порогом (флаг ещё RELEASE_MS удерживается после последнего
+ * громкого кадра, чтобы не мигать на паузах между словами). Ререндер только на смене флага.
+ * Треки стрима не трогаем — ими владеет сессия записи (`useVoiceRecordSession`), только читаем.
+ */
+const useHasSound = (stream) => {
+    const [hasSound, setHasSound] = useState(false);
+    useEffect(() => {
+        const AudioCtx = getAudioContextConstructor();
+        if (!stream || !AudioCtx || stream.getAudioTracks().length === 0) {
+            return undefined;
+        }
+        const audioContext = new AudioCtx();
+        // ctx может стартовать в suspended (autoplay policy); старт всегда из клика по микрофону,
+        // так что resume безопасен и обычно сразу переводит в running
+        void audioContext.resume();
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+        analyser.fftSize = 256;
+        source.connect(analyser);
+        // Web Audio API принимает данные только в типизированный массив
+        // eslint-disable-next-line no-restricted-syntax
+        const buffer = new Uint8Array(analyser.fftSize);
+        let lastLoudAt = 0;
+        let current = false;
+        const tick = () => {
+            analyser.getByteTimeDomainData(buffer);
+            let sumSquares = 0;
+            for (let i = 0; i < buffer.length; i += 1) {
+                const sample = (buffer[i] - 128) / 128;
+                sumSquares += sample * sample;
+            }
+            const rms = Math.sqrt(sumSquares / buffer.length);
+            const now = performance.now();
+            if (rms > SOUND_RMS_THRESHOLD) {
+                lastLoudAt = now;
+            }
+            const next = now - lastLoudAt < RELEASE_MS;
+            if (next !== current) {
+                current = next;
+                setHasSound(next);
+            }
+        };
+        tick();
+        const intervalId = setInterval(tick, SAMPLE_INTERVAL_MS);
+        return () => {
+            clearInterval(intervalId);
+            source.disconnect();
+            analyser.disconnect();
+            void audioContext.close();
+            setHasSound(false);
+        };
+    }, [stream]);
+    return hasSound;
+};
+
+export { useHasSound };
+//# sourceMappingURL=useHasSound.js.map

package/internal/useHasSound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHasSound.js","sources":["src/internal/useHasSound.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n// Порог RMS, выше которого считаем, что звук есть (речь по RMS обычно ~0.1+, шумовой пол — ниже)\nconst SOUND_RMS_THRESHOLD = 0.04;\n// Сколько держим флаг «звук есть» после последнего громкого кадра — чтобы паузы между словами\n// не роняли индикатор в тишину и он не мигал\nconst RELEASE_MS = 350;\n// Период опроса громкости: флаг булев с гистерезисом RELEASE_MS, детализация кадра дисплея тут\n// не нужна — 100 мс дают запас в ~3.5 замера на окно удержания при кратно меньшей нагрузке, чем rAF\nconst SAMPLE_INTERVAL_MS = 100;\n\ntype AudioContextConstructor = typeof AudioContext;\n\nconst getAudioContextConstructor = (): AudioContextConstructor | null => {\n    if (typeof window === 'undefined') {\n        return null;\n    }\n    const scoped = window as unknown as {\n        AudioContext?: AudioContextConstructor;\n        webkitAudioContext?: AudioContextConstructor;\n    };\n    return scoped.AudioContext ?? scoped.webkitAudioContext ?? null;\n};\n\n/**\n * Флаг «в стриме микрофона сейчас есть звук». Пока стрим есть — держит rAF-цикл и читает\n * RMS через AnalyserNode, сравнивая с порогом (флаг ещё RELEASE_MS удерживается после последнего\n * громкого кадра, чтобы не мигать на паузах между словами). Ререндер только на смене флага.\n * Треки стрима не трогаем — ими владеет сессия записи (`useVoiceRecordSession`), только читаем.\n */\nexport const useHasSound = (stream: MediaStream | null): boolean => {\n    const [hasSound, setHasSound] = useState(false);\n\n    useEffect(() => {\n        const AudioCtx = getAudioContextConstructor();\n        if (!stream || !AudioCtx || stream.getAudioTracks().length === 0) {\n            return undefined;\n        }\n\n        const audioContext = new AudioCtx();\n        // ctx может стартовать в suspended (autoplay policy); старт всегда из клика по микрофону,\n        // так что resume безопасен и обычно сразу переводит в running\n        void audioContext.resume();\n\n        const source = audioContext.createMediaStreamSource(stream);\n        const analyser = audioContext.createAnalyser();\n        analyser.fftSize = 256;\n        source.connect(analyser);\n\n        // Web Audio API принимает данные только в типизированный массив\n        // eslint-disable-next-line no-restricted-syntax\n        const buffer = new Uint8Array(analyser.fftSize);\n        let lastLoudAt = 0;\n        let current = false;\n\n        const tick = () => {\n            analyser.getByteTimeDomainData(buffer);\n            let sumSquares = 0;\n            for (let i = 0; i < buffer.length; i += 1) {\n                const sample = (buffer[i] - 128) / 128;\n                sumSquares += sample * sample;\n            }\n            const rms = Math.sqrt(sumSquares / buffer.length);\n            const now = performance.now();\n            if (rms > SOUND_RMS_THRESHOLD) {\n                lastLoudAt = now;\n            }\n            const next = now - lastLoudAt < RELEASE_MS;\n            if (next !== current) {\n                current = next;\n                setHasSound(next);\n            }\n        };\n        tick();\n        const intervalId = setInterval(tick, SAMPLE_INTERVAL_MS);\n\n        return () => {\n            clearInterval(intervalId);\n            source.disconnect();\n            analyser.disconnect();\n            void audioContext.close();\n            setHasSound(false);\n        };\n    }, [stream]);\n\n    return hasSound;\n};\n"],"names":[],"mappings":"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"}

package/internal/useRovingFocusGroup.d.ts

@@ -0,0 +1,19 @@
+import { type RefObject } from 'react';
+interface RovingFocusGroup {
+    /** Перевести фокус на текущий tab stop группы (после смены режима — первый по приоритету
+     * элемент активного слоя, т.е. галочка при входе в запись) */
+    focusStop: () => void;
+}
+/**
+ * Roving tabindex для кнопок ChatInput: вся группа кнопок — один tab stop. У всех участников
+ * tabindex="-1", у одного (текущего стопа) — "0"; внутри группы фокус ходит стрелками ←/→
+ * и Home/End (с зацикливанием) в порядке приоритетов (FOCUS_PRIORITY_ATTR на контейнерах).
+ * Tab не перехватывается: страница → textarea → кнопка-стоп → страница, границы нативные.
+ *
+ * Порядок и состав группы вычисляются из DOM лениво, а вот tabindex приходится поддерживать
+ * эагерно — он должен стоять в DOM до нажатия Tab. Расстановка актуализируется по трём каналам:
+ * начальный эффект, focusin (стоп следует за фокусом — клик или стрелка) и MutationObserver
+ * (маунт/анмаунт кнопок приложения, disabled, смена aria-hidden слоя при переключении режима).
+ */
+export declare const useRovingFocusGroup: (root: RefObject<HTMLElement>) => RovingFocusGroup;
+export {};