@sberbusiness/triplex-next 0.45.0 → 0.47.0

package/components/FormField/components/FormFieldTarget.js

@@ -1,17 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo, useLayoutEffect, useCallback } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const formFieldTarget = "formFieldTarget__7a7445a6";
-const sm = "sm__296ec0c9";
-const md = "md__fd688e82";
-const lg = "lg__4b0c6612";
-const placeholder = "placeholder__22b13561";
-const disabled = "disabled__8daf00a3";
-const placeholderWrapper = "placeholderWrapper__54e05413";
-const active = "active__80e12624";
+const formFieldTarget = "formFieldTarget__71472e03";
+const sm = "sm__d264577b";
+const md = "md__4c3b178e";
+const lg = "lg__de0f2dfc";
+const placeholder = "placeholder__3fd69630";
+const disabled = "disabled__ee9ace03";
+const placeholderWrapper = "placeholderWrapper__79c96557";
+const active = "active__69d10263";
 const styles = {
   formFieldTarget,
   sm,
@@ -25,7 +25,7 @@ const styles = {
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const FormFieldTarget = React.forwardRef(
   ({ children, id: idProp, className, placeholder: placeholder2, onFocus, onBlur, ...restProps }, ref) => {
-    const { size, status, active: active2, labelId, setFilled, setFocused, setTargetId } = useContext(FormFieldContext);
+    const { size, status, active: active2, labelId, setFilled, setFocused } = useContext(FormFieldContext);
     const id = useMemo(() => idProp === void 0 ? uniqueId("target_") : idProp, [idProp]);
     const childrenExist = useMemo(() => React.Children.toArray(children).length !== 0, [children]);
     const classNames = clsx(styles.formFieldTarget, sizeToClassNameMap[size], className, {
@@ -33,9 +33,6 @@ const FormFieldTarget = React.forwardRef(
       [styles.placeholder]: !!placeholder2 && !childrenExist && status !== EFormFieldStatus.DISABLED,
       [styles.active]: active2
     });
-    useLayoutEffect(() => {
-      setTargetId(id);
-    }, [id, setTargetId]);
     useLayoutEffect(() => {
       setFilled(childrenExist);
     }, [childrenExist, setFilled]);

package/components/FormField/components/FormFieldTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTarget.js","sources":["../../../../src/components/FormField/components/FormFieldTarget.tsx"],"sourcesContent":["import React, { useContext, useMemo, useLayoutEffect, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField/enums\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport styles from \"../styles/FormFieldTarget.module.less\";\n\n/** Свойства компонента FormFieldTarget. */\nexport interface IFormFieldTargetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"placeholder\"> {\n    /** Текст, или компонент отображающий выбранное placeholder. Отличие от children в том, что placeholder отображается только когда нет children и более бледным цветом. */\n    placeholder?: React.ReactNode;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент, отображающий нередактируемое значение. */\nexport const FormFieldTarget = React.forwardRef<HTMLDivElement, IFormFieldTargetProps>(\n    ({ children, id: idProp, className, placeholder, onFocus, onBlur, ...restProps }, ref) => {\n        const { size, status, active, labelId, setFilled, setFocused, setTargetId } = useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"target_\") : idProp), [idProp]);\n        const childrenExist = useMemo(() => React.Children.toArray(children).length !== 0, [children]);\n        const classNames = clsx(styles.formFieldTarget, sizeToClassNameMap[size], className, {\n            [styles.disabled]: status === EFormFieldStatus.DISABLED,\n            [styles.placeholder]: !!placeholder && !childrenExist && status !== EFormFieldStatus.DISABLED,\n            [styles.active]: active,\n        });\n\n        useLayoutEffect(() => {\n            setTargetId(id);\n        }, [id, setTargetId]);\n\n        useLayoutEffect(() => {\n            setFilled(childrenExist);\n        }, [childrenExist, setFilled]);\n\n        const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(\n            (event) => {\n                setFocused(true);\n                onFocus?.(event);\n            },\n            [onFocus, setFocused],\n        );\n\n        const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(\n            (event) => {\n                setFocused(false);\n                onBlur?.(event);\n            },\n            [onBlur, setFocused],\n        );\n\n        return (\n            <div\n                {...restProps}\n                id={id}\n                className={classNames}\n                tabIndex={status === EFormFieldStatus.DISABLED ? -1 : 0}\n                aria-labelledby={labelId}\n                aria-disabled={status === EFormFieldStatus.DISABLED}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                ref={ref}\n            >\n                {childrenExist ? children : <span className={styles.placeholderWrapper}>{placeholder}</span>}\n            </div>\n        );\n    },\n);\n\nFormFieldTarget.displayName = \"FormFieldTarget\";\n"],"names":["placeholder","active"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,kBAAkB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,IAAI,QAAQ,WAAW,aAAAA,cAAa,SAAS,QAAQ,GAAG,UAAA,GAAa,QAAQ;AACtF,UAAM,EAAE,MAAM,QAAQ,QAAAC,SAAQ,SAAS,WAAW,YAAY,YAAA,IAAgB,WAAW,gBAAgB;AACzG,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,SAAS,IAAI,QAAS,CAAC,MAAM,CAAC;AACxF,UAAM,gBAAgB,QAAQ,MAAM,MAAM,SAAS,QAAQ,QAAQ,EAAE,WAAW,GAAG,CAAC,QAAQ,CAAC;AAC7F,UAAM,aAAa,KAAK,OAAO,iBAAiB,mBAAmB,IAAI,GAAG,WAAW;AAAA,MACjF,CAAC,OAAO,QAAQ,GAAG,WAAW,iBAAiB;AAAA,MAC/C,CAAC,OAAO,WAAW,GAAG,CAAC,CAACD,gBAAe,CAAC,iBAAiB,WAAW,iBAAiB;AAAA,MACrF,CAAC,OAAO,MAAM,GAAGC;AAAA,IAAA,CACpB;AAED,oBAAgB,MAAM;AAClB,kBAAY,EAAE;AAAA,IAClB,GAAG,CAAC,IAAI,WAAW,CAAC;AAEpB,oBAAgB,MAAM;AAClB,gBAAU,aAAa;AAAA,IAC3B,GAAG,CAAC,eAAe,SAAS,CAAC;AAE7B,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,mBAAW,IAAI;AACf,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,SAAS,UAAU;AAAA,IAAA;AAGxB,UAAM,aAAa;AAAA,MACf,CAAC,UAAU;AACP,mBAAW,KAAK;AAChB,yCAAS;AAAA,MACb;AAAA,MACA,CAAC,QAAQ,UAAU;AAAA,IAAA;AAGvB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,QACX,UAAU,WAAW,iBAAiB,WAAW,KAAK;AAAA,QACtD,mBAAiB;AAAA,QACjB,iBAAe,WAAW,iBAAiB;AAAA,QAC3C,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QAEC,0BAAgB,WAAW,oBAAC,UAAK,WAAW,OAAO,oBAAqB,UAAAD,aAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjG;AACJ;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"FormFieldTarget.js","sources":["../../../../src/components/FormField/components/FormFieldTarget.tsx"],"sourcesContent":["import React, { useContext, useMemo, useLayoutEffect, useCallback } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { EFormFieldStatus } from \"@sberbusiness/triplex-next/components/FormField/enums\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport styles from \"../styles/FormFieldTarget.module.less\";\n\n/** Свойства компонента FormFieldTarget. */\nexport interface IFormFieldTargetProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"placeholder\"> {\n    /** Текст, или компонент отображающий выбранное placeholder. Отличие от children в том, что placeholder отображается только когда нет children и более бледным цветом. */\n    placeholder?: React.ReactNode;\n}\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент, отображающий нередактируемое значение. */\nexport const FormFieldTarget = React.forwardRef<HTMLDivElement, IFormFieldTargetProps>(\n    ({ children, id: idProp, className, placeholder, onFocus, onBlur, ...restProps }, ref) => {\n        const { size, status, active, labelId, setFilled, setFocused } = useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"target_\") : idProp), [idProp]);\n        const childrenExist = useMemo(() => React.Children.toArray(children).length !== 0, [children]);\n        const classNames = clsx(styles.formFieldTarget, sizeToClassNameMap[size], className, {\n            [styles.disabled]: status === EFormFieldStatus.DISABLED,\n            [styles.placeholder]: !!placeholder && !childrenExist && status !== EFormFieldStatus.DISABLED,\n            [styles.active]: active,\n        });\n\n        useLayoutEffect(() => {\n            setFilled(childrenExist);\n        }, [childrenExist, setFilled]);\n\n        const handleFocus = useCallback<React.FocusEventHandler<HTMLDivElement>>(\n            (event) => {\n                setFocused(true);\n                onFocus?.(event);\n            },\n            [onFocus, setFocused],\n        );\n\n        const handleBlur = useCallback<React.FocusEventHandler<HTMLDivElement>>(\n            (event) => {\n                setFocused(false);\n                onBlur?.(event);\n            },\n            [onBlur, setFocused],\n        );\n\n        return (\n            <div\n                {...restProps}\n                id={id}\n                className={classNames}\n                tabIndex={status === EFormFieldStatus.DISABLED ? -1 : 0}\n                aria-labelledby={labelId}\n                aria-disabled={status === EFormFieldStatus.DISABLED}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                ref={ref}\n            >\n                {childrenExist ? children : <span className={styles.placeholderWrapper}>{placeholder}</span>}\n            </div>\n        );\n    },\n);\n\nFormFieldTarget.displayName = \"FormFieldTarget\";\n"],"names":["placeholder","active"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,kBAAkB,MAAM;AAAA,EACjC,CAAC,EAAE,UAAU,IAAI,QAAQ,WAAW,aAAAA,cAAa,SAAS,QAAQ,GAAG,UAAA,GAAa,QAAQ;AACtF,UAAM,EAAE,MAAM,QAAQ,QAAAC,SAAQ,SAAS,WAAW,WAAA,IAAe,WAAW,gBAAgB;AAC5F,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,SAAS,IAAI,QAAS,CAAC,MAAM,CAAC;AACxF,UAAM,gBAAgB,QAAQ,MAAM,MAAM,SAAS,QAAQ,QAAQ,EAAE,WAAW,GAAG,CAAC,QAAQ,CAAC;AAC7F,UAAM,aAAa,KAAK,OAAO,iBAAiB,mBAAmB,IAAI,GAAG,WAAW;AAAA,MACjF,CAAC,OAAO,QAAQ,GAAG,WAAW,iBAAiB;AAAA,MAC/C,CAAC,OAAO,WAAW,GAAG,CAAC,CAACD,gBAAe,CAAC,iBAAiB,WAAW,iBAAiB;AAAA,MACrF,CAAC,OAAO,MAAM,GAAGC;AAAA,IAAA,CACpB;AAED,oBAAgB,MAAM;AAClB,gBAAU,aAAa;AAAA,IAC3B,GAAG,CAAC,eAAe,SAAS,CAAC;AAE7B,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,mBAAW,IAAI;AACf,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,SAAS,UAAU;AAAA,IAAA;AAGxB,UAAM,aAAa;AAAA,MACf,CAAC,UAAU;AACP,mBAAW,KAAK;AAChB,yCAAS;AAAA,MACb;AAAA,MACA,CAAC,QAAQ,UAAU;AAAA,IAAA;AAGvB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,QACX,UAAU,WAAW,iBAAiB,WAAW,KAAK;AAAA,QACtD,mBAAiB;AAAA,QACjB,iBAAe,WAAW,iBAAiB;AAAA,QAC3C,QAAQ;AAAA,QACR,SAAS;AAAA,QACT;AAAA,QAEC,0BAAgB,WAAW,oBAAC,UAAK,WAAW,OAAO,oBAAqB,UAAAD,aAAA,CAAY;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjG;AACJ;AAEA,gBAAgB,cAAc;"}

package/components/FormField/components/FormFieldTextarea.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo, useCallback, useLayoutEffect } from "react";
-import { u as uniqueId, c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { FormFieldContext } from "../FormFieldContext.js";
 import { EFormFieldStatus } from "../enums.js";
 import { isFilled } from "./utils.js";
-const formFieldTextarea = "formFieldTextarea__2b1e5429";
-const sm = "sm__296ec0c9";
-const md = "md__fd688e82";
-const lg = "lg__4b0c6612";
+const formFieldTextarea = "formFieldTextarea__47ea1393";
+const sm = "sm__d264577b";
+const md = "md__4c3b178e";
+const lg = "lg__de0f2dfc";
 const styles = {
   formFieldTextarea,
   sm,
@@ -29,6 +29,7 @@ const FormFieldTextarea = React.forwardRef(
     );
     useLayoutEffect(() => {
       setTargetId(id);
+      return () => setTargetId((currentTargetId) => currentTargetId === id ? void 0 : currentTargetId);
     }, [id, setTargetId]);
     useLayoutEffect(() => {
       syncFilled(value ?? defaultValue);

package/components/FormField/components/FormFieldTextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldTextarea.js","sources":["../../../../src/components/FormField/components/FormFieldTextarea.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback, useLayoutEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { isFilled } from \"./utils\";\nimport styles from \"../styles/FormFieldTextarea.module.less\";\n\n/** Свойства компонента FormFieldTextarea. */\nexport interface IFormFieldTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент, отображающий textarea. */\nexport const FormFieldTextarea = React.forwardRef<HTMLTextAreaElement, IFormFieldTextareaProps>(\n    (\n        { id: idProp, className, value, defaultValue, onFocus, onBlur, onAnimationStart, onChange, ...restProps },\n        ref,\n    ) => {\n        const { size, status, setFocused, setTargetId, setFilled } = useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"textarea_\") : idProp), [idProp]);\n        const classNames = clsx(styles.formFieldTextarea, sizeToClassNameMap[size], className);\n\n        const syncFilled = useCallback(\n            (nextValue: IFormFieldTextareaProps[\"value\"]) => {\n                setFilled(isFilled(nextValue));\n            },\n            [setFilled],\n        );\n\n        useLayoutEffect(() => {\n            setTargetId(id);\n        }, [id, setTargetId]);\n\n        useLayoutEffect(() => {\n            syncFilled(value ?? defaultValue);\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        useLayoutEffect(() => {\n            if (value !== undefined) {\n                syncFilled(value);\n            }\n        }, [value, syncFilled]);\n\n        const handleFocus = useCallback<React.FocusEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(true);\n                onFocus?.(event);\n            },\n            [syncFilled, setFocused, onFocus],\n        );\n\n        const handleBlur = useCallback<React.FocusEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(false);\n                onBlur?.(event);\n            },\n            [syncFilled, setFocused, onBlur],\n        );\n\n        /**\n         * Обработчик начала анимации.\n         *\n         * Текущая реализация необходима для кейсов с автозаполнением:\n         * - Браузер устанавливает значение в поле при загрузке страницы;\n         * - Браузер устанавливает значение в поле при навигации пользователем по сохранённым опциям заполнения.\n         */\n        const handleAnimationStart = useCallback<React.AnimationEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                if (event.animationName.startsWith(\"autofill-applied-hook\")) {\n                    setFilled(true);\n                } else if (event.animationName.startsWith(\"autofill-cancelled-hook\")) {\n                    // Необходимо проверить, что при отмене автозаполнения, в поле не находится значение.\n                    syncFilled(event.currentTarget.value);\n                }\n                onAnimationStart?.(event);\n            },\n            [setFilled, syncFilled, onAnimationStart],\n        );\n\n        const handleChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                onChange?.(event);\n            },\n            [onChange, syncFilled],\n        );\n\n        return (\n            <textarea\n                {...restProps}\n                id={id}\n                className={classNames}\n                value={value}\n                defaultValue={defaultValue}\n                disabled={status === EFormFieldStatus.DISABLED}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onAnimationStart={handleAnimationStart}\n                onChange={handleChange}\n                ref={ref}\n            />\n        );\n    },\n);\n\nFormFieldTextarea.displayName = \"FormFieldTextarea\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,oBAAoB,MAAM;AAAA,EACnC,CACI,EAAE,IAAI,QAAQ,WAAW,OAAO,cAAc,SAAS,QAAQ,kBAAkB,UAAU,GAAG,UAAA,GAC9F,QACC;AACD,UAAM,EAAE,MAAM,QAAQ,YAAY,aAAa,UAAA,IAAc,WAAW,gBAAgB;AACxF,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,WAAW,IAAI,QAAS,CAAC,MAAM,CAAC;AAC1F,UAAM,aAAa,KAAK,OAAO,mBAAmB,mBAAmB,IAAI,GAAG,SAAS;AAErF,UAAM,aAAa;AAAA,MACf,CAAC,cAAgD;AAC7C,kBAAU,SAAS,SAAS,CAAC;AAAA,MACjC;AAAA,MACA,CAAC,SAAS;AAAA,IAAA;AAGd,oBAAgB,MAAM;AAClB,kBAAY,EAAE;AAAA,IAClB,GAAG,CAAC,IAAI,WAAW,CAAC;AAEpB,oBAAgB,MAAM;AAClB,iBAAW,SAAS,YAAY;AAAA,IAEpC,GAAG,CAAA,CAAE;AAEL,oBAAgB,MAAM;AAClB,UAAI,UAAU,QAAW;AACrB,mBAAW,KAAK;AAAA,MACpB;AAAA,IACJ,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,IAAI;AACf,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,YAAY,YAAY,OAAO;AAAA,IAAA;AAGpC,UAAM,aAAa;AAAA,MACf,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,KAAK;AAChB,yCAAS;AAAA,MACb;AAAA,MACA,CAAC,YAAY,YAAY,MAAM;AAAA,IAAA;AAUnC,UAAM,uBAAuB;AAAA,MACzB,CAAC,UAAU;AACP,YAAI,MAAM,cAAc,WAAW,uBAAuB,GAAG;AACzD,oBAAU,IAAI;AAAA,QAClB,WAAW,MAAM,cAAc,WAAW,yBAAyB,GAAG;AAElE,qBAAW,MAAM,cAAc,KAAK;AAAA,QACxC;AACA,6DAAmB;AAAA,MACvB;AAAA,MACA,CAAC,WAAW,YAAY,gBAAgB;AAAA,IAAA;AAG5C,UAAM,eAAe;AAAA,MACjB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,6CAAW;AAAA,MACf;AAAA,MACA,CAAC,UAAU,UAAU;AAAA,IAAA;AAGzB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU,WAAW,iBAAiB;AAAA,QACtC,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,UAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,kBAAkB,cAAc;"}
+{"version":3,"file":"FormFieldTextarea.js","sources":["../../../../src/components/FormField/components/FormFieldTextarea.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback, useLayoutEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport { createSizeToClassNameMap } from \"../../../utils/classNameMaps\";\nimport { FormFieldContext } from \"../FormFieldContext\";\nimport { EFormFieldStatus } from \"../enums\";\nimport { isFilled } from \"./utils\";\nimport styles from \"../styles/FormFieldTextarea.module.less\";\n\n/**\n * Свойства компонента FormFieldTextarea.\n *\n * Атрибут disabled исключён намеренно: блокировка задаётся статусом поля (EFormFieldStatus.DISABLED), и переданное\n * значение всё равно было бы перетёрто. Так же устроен FormFieldInput.\n */\nexport interface IFormFieldTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, \"disabled\"> {}\n\n// Соответствие размера имени класса.\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Компонент, отображающий textarea. */\nexport const FormFieldTextarea = React.forwardRef<HTMLTextAreaElement, IFormFieldTextareaProps>(\n    (\n        { id: idProp, className, value, defaultValue, onFocus, onBlur, onAnimationStart, onChange, ...restProps },\n        ref,\n    ) => {\n        const { size, status, setFocused, setTargetId, setFilled } = useContext(FormFieldContext);\n        const id = useMemo(() => (idProp === undefined ? uniqueId(\"textarea_\") : idProp), [idProp]);\n        const classNames = clsx(styles.formFieldTextarea, sizeToClassNameMap[size], className);\n\n        const syncFilled = useCallback(\n            (nextValue: IFormFieldTextareaProps[\"value\"]) => {\n                setFilled(isFilled(nextValue));\n            },\n            [setFilled],\n        );\n\n        useLayoutEffect(() => {\n            setTargetId(id);\n            return () => setTargetId((currentTargetId) => (currentTargetId === id ? undefined : currentTargetId));\n        }, [id, setTargetId]);\n\n        useLayoutEffect(() => {\n            syncFilled(value ?? defaultValue);\n            // eslint-disable-next-line react-hooks/exhaustive-deps\n        }, []);\n\n        useLayoutEffect(() => {\n            if (value !== undefined) {\n                syncFilled(value);\n            }\n        }, [value, syncFilled]);\n\n        const handleFocus = useCallback<React.FocusEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(true);\n                onFocus?.(event);\n            },\n            [syncFilled, setFocused, onFocus],\n        );\n\n        const handleBlur = useCallback<React.FocusEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                setFocused(false);\n                onBlur?.(event);\n            },\n            [syncFilled, setFocused, onBlur],\n        );\n\n        /**\n         * Обработчик начала анимации.\n         *\n         * Текущая реализация необходима для кейсов с автозаполнением:\n         * - Браузер устанавливает значение в поле при загрузке страницы;\n         * - Браузер устанавливает значение в поле при навигации пользователем по сохранённым опциям заполнения.\n         */\n        const handleAnimationStart = useCallback<React.AnimationEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                if (event.animationName.startsWith(\"autofill-applied-hook\")) {\n                    setFilled(true);\n                } else if (event.animationName.startsWith(\"autofill-cancelled-hook\")) {\n                    // Необходимо проверить, что при отмене автозаполнения, в поле не находится значение.\n                    syncFilled(event.currentTarget.value);\n                }\n                onAnimationStart?.(event);\n            },\n            [setFilled, syncFilled, onAnimationStart],\n        );\n\n        const handleChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(\n            (event) => {\n                syncFilled(event.currentTarget.value);\n                onChange?.(event);\n            },\n            [onChange, syncFilled],\n        );\n\n        return (\n            <textarea\n                {...restProps}\n                id={id}\n                className={classNames}\n                value={value}\n                defaultValue={defaultValue}\n                disabled={status === EFormFieldStatus.DISABLED}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onAnimationStart={handleAnimationStart}\n                onChange={handleChange}\n                ref={ref}\n            />\n        );\n    },\n);\n\nFormFieldTextarea.displayName = \"FormFieldTextarea\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBA,MAAM,qBAAqB,yBAAyB,MAAM;AAGnD,MAAM,oBAAoB,MAAM;AAAA,EACnC,CACI,EAAE,IAAI,QAAQ,WAAW,OAAO,cAAc,SAAS,QAAQ,kBAAkB,UAAU,GAAG,UAAA,GAC9F,QACC;AACD,UAAM,EAAE,MAAM,QAAQ,YAAY,aAAa,UAAA,IAAc,WAAW,gBAAgB;AACxF,UAAM,KAAK,QAAQ,MAAO,WAAW,SAAY,SAAS,WAAW,IAAI,QAAS,CAAC,MAAM,CAAC;AAC1F,UAAM,aAAa,KAAK,OAAO,mBAAmB,mBAAmB,IAAI,GAAG,SAAS;AAErF,UAAM,aAAa;AAAA,MACf,CAAC,cAAgD;AAC7C,kBAAU,SAAS,SAAS,CAAC;AAAA,MACjC;AAAA,MACA,CAAC,SAAS;AAAA,IAAA;AAGd,oBAAgB,MAAM;AAClB,kBAAY,EAAE;AACd,aAAO,MAAM,YAAY,CAAC,oBAAqB,oBAAoB,KAAK,SAAY,eAAgB;AAAA,IACxG,GAAG,CAAC,IAAI,WAAW,CAAC;AAEpB,oBAAgB,MAAM;AAClB,iBAAW,SAAS,YAAY;AAAA,IAEpC,GAAG,CAAA,CAAE;AAEL,oBAAgB,MAAM;AAClB,UAAI,UAAU,QAAW;AACrB,mBAAW,KAAK;AAAA,MACpB;AAAA,IACJ,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,UAAM,cAAc;AAAA,MAChB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,IAAI;AACf,2CAAU;AAAA,MACd;AAAA,MACA,CAAC,YAAY,YAAY,OAAO;AAAA,IAAA;AAGpC,UAAM,aAAa;AAAA,MACf,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,mBAAW,KAAK;AAChB,yCAAS;AAAA,MACb;AAAA,MACA,CAAC,YAAY,YAAY,MAAM;AAAA,IAAA;AAUnC,UAAM,uBAAuB;AAAA,MACzB,CAAC,UAAU;AACP,YAAI,MAAM,cAAc,WAAW,uBAAuB,GAAG;AACzD,oBAAU,IAAI;AAAA,QAClB,WAAW,MAAM,cAAc,WAAW,yBAAyB,GAAG;AAElE,qBAAW,MAAM,cAAc,KAAK;AAAA,QACxC;AACA,6DAAmB;AAAA,MACvB;AAAA,MACA,CAAC,WAAW,YAAY,gBAAgB;AAAA,IAAA;AAG5C,UAAM,eAAe;AAAA,MACjB,CAAC,UAAU;AACP,mBAAW,MAAM,cAAc,KAAK;AACpC,6CAAW;AAAA,MACf;AAAA,MACA,CAAC,UAAU,UAAU;AAAA,IAAA;AAGzB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA,UAAU,WAAW,iBAAiB;AAAA,QACtC,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,UAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,kBAAkB,cAAc;"}

package/components/FormField/components/useFormFieldAffixWidth.js

@@ -1,6 +1,6 @@
 import { useRef, useCallback, useEffect } from "react";
 import { TARGET_PADDING_X_DEFAULT } from "../consts.js";
-import { setForwardedRef } from "./utils.js";
+import { setForwardedRef } from "../../../helpers/setForwardedRef.js";
 const useFormFieldAffixWidth = (setWidth, forwardedRef) => {
   const elementRef = useRef(null);
   const setRef = useCallback(

package/components/FormField/components/useFormFieldAffixWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldAffixWidth.js","sources":["../../../../src/components/FormField/components/useFormFieldAffixWidth.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { TARGET_PADDING_X_DEFAULT } from \"../consts\";\nimport { setForwardedRef } from \"./utils\";\n\n/**\n * Синхронизирует измеренную ширину контейнера-аффикса (FormFieldPrefix / FormFieldPostfix)\n * с контекстом FormField: поле использует её как горизонтальный внутренний отступ.\n *\n * Ширина отслеживается через ResizeObserver, при размонтировании сбрасывается\n * до TARGET_PADDING_X_DEFAULT.\n *\n * @param setWidth Сеттер ширины из FormFieldContext (setPrefixWidth или setPostfixWidth).\n * @param forwardedRef Внешний ref компонента, в который нужно продублировать элемент.\n * @returns Ref-колбэк для корневого элемента аффикса.\n */\nexport const useFormFieldAffixWidth = (\n    setWidth: React.Dispatch<React.SetStateAction<number>>,\n    forwardedRef: React.ForwardedRef<HTMLSpanElement>,\n): React.RefCallback<HTMLSpanElement> => {\n    const elementRef = useRef<HTMLSpanElement | null>(null);\n\n    const setRef = useCallback(\n        (instance: HTMLSpanElement | null) => {\n            elementRef.current = instance;\n            setForwardedRef(forwardedRef, instance);\n        },\n        [forwardedRef],\n    );\n\n    useEffect(() => {\n        const element = elementRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver(([entry]) => {\n            const width = entry.target.getBoundingClientRect().width;\n\n            setWidth((prevWidth) => (prevWidth !== width ? width : prevWidth));\n        });\n\n        resizeObserver.observe(element);\n\n        return () => {\n            resizeObserver.disconnect();\n            setWidth(TARGET_PADDING_X_DEFAULT);\n        };\n    }, [setWidth]);\n\n    return setRef;\n};\n"],"names":[],"mappings":";;;AAeO,MAAM,yBAAyB,CAClC,UACA,iBACqC;AACrC,QAAM,aAAa,OAA+B,IAAI;AAEtD,QAAM,SAAS;AAAA,IACX,CAAC,aAAqC;AAClC,iBAAW,UAAU;AACrB,sBAAgB,cAAc,QAAQ;AAAA,IAC1C;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGjB,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAE3B,QAAI,CAAC,SAAS;AACV;AAAA,IACJ;AAEA,UAAM,iBAAiB,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AACnD,YAAM,QAAQ,MAAM,OAAO,sBAAA,EAAwB;AAEnD,eAAS,CAAC,cAAe,cAAc,QAAQ,QAAQ,SAAU;AAAA,IACrE,CAAC;AAED,mBAAe,QAAQ,OAAO;AAE9B,WAAO,MAAM;AACT,qBAAe,WAAA;AACf,eAAS,wBAAwB;AAAA,IACrC;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACX;"}
+{"version":3,"file":"useFormFieldAffixWidth.js","sources":["../../../../src/components/FormField/components/useFormFieldAffixWidth.ts"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from \"react\";\nimport { TARGET_PADDING_X_DEFAULT } from \"../consts\";\nimport { setForwardedRef } from \"../../../helpers/setForwardedRef\";\n\n/**\n * Синхронизирует измеренную ширину контейнера-аффикса (FormFieldPrefix / FormFieldPostfix)\n * с контекстом FormField: поле использует её как горизонтальный внутренний отступ.\n *\n * Ширина отслеживается через ResizeObserver, при размонтировании сбрасывается\n * до TARGET_PADDING_X_DEFAULT.\n *\n * @param setWidth Сеттер ширины из FormFieldContext (setPrefixWidth или setPostfixWidth).\n * @param forwardedRef Внешний ref компонента, в который нужно продублировать элемент.\n * @returns Ref-колбэк для корневого элемента аффикса.\n */\nexport const useFormFieldAffixWidth = (\n    setWidth: React.Dispatch<React.SetStateAction<number>>,\n    forwardedRef: React.ForwardedRef<HTMLSpanElement>,\n): React.RefCallback<HTMLSpanElement> => {\n    const elementRef = useRef<HTMLSpanElement | null>(null);\n\n    const setRef = useCallback(\n        (instance: HTMLSpanElement | null) => {\n            elementRef.current = instance;\n            setForwardedRef(forwardedRef, instance);\n        },\n        [forwardedRef],\n    );\n\n    useEffect(() => {\n        const element = elementRef.current;\n\n        if (!element) {\n            return;\n        }\n\n        const resizeObserver = new ResizeObserver(([entry]) => {\n            const width = entry.target.getBoundingClientRect().width;\n\n            setWidth((prevWidth) => (prevWidth !== width ? width : prevWidth));\n        });\n\n        resizeObserver.observe(element);\n\n        return () => {\n            resizeObserver.disconnect();\n            setWidth(TARGET_PADDING_X_DEFAULT);\n        };\n    }, [setWidth]);\n\n    return setRef;\n};\n"],"names":[],"mappings":";;;AAeO,MAAM,yBAAyB,CAClC,UACA,iBACqC;AACrC,QAAM,aAAa,OAA+B,IAAI;AAEtD,QAAM,SAAS;AAAA,IACX,CAAC,aAAqC;AAClC,iBAAW,UAAU;AACrB,sBAAgB,cAAc,QAAQ;AAAA,IAC1C;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGjB,YAAU,MAAM;AACZ,UAAM,UAAU,WAAW;AAE3B,QAAI,CAAC,SAAS;AACV;AAAA,IACJ;AAEA,UAAM,iBAAiB,IAAI,eAAe,CAAC,CAAC,KAAK,MAAM;AACnD,YAAM,QAAQ,MAAM,OAAO,sBAAA,EAAwB;AAEnD,eAAS,CAAC,cAAe,cAAc,QAAQ,QAAQ,SAAU;AAAA,IACrE,CAAC;AAED,mBAAe,QAAQ,OAAO;AAE9B,WAAO,MAAM;AACT,qBAAe,WAAA;AACf,eAAS,wBAAwB;AAAA,IACrC;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACX;"}

package/components/FormField/components/utils.js

@@ -1,10 +1,3 @@
-const setForwardedRef = (ref, instance) => {
-  if (typeof ref === "function") {
-    ref(instance);
-  } else if (ref) {
-    ref.current = instance;
-  }
-};
 const isFilled = (value) => {
   if (value === void 0) {
     return false;
@@ -15,7 +8,6 @@ const isFilled = (value) => {
   }
 };
 export {
-  isFilled,
-  setForwardedRef
+  isFilled
 };
 //# sourceMappingURL=utils.js.map

package/components/FormField/components/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/FormField/components/utils.ts"],"sourcesContent":["import React from \"react\";\n\n/**\n * Записывает элемент во внешний ref компонента: callback-ref или объектный ref.\n *\n * @param ref Внешний ref, полученный компонентом через forwardRef, либо переданный пропом.\n * @param instance DOM-элемент или null при размонтировании.\n */\nexport const setForwardedRef = <T>(ref: React.ForwardedRef<T> | undefined, instance: T | null): void => {\n    if (typeof ref === \"function\") {\n        ref(instance);\n    } else if (ref) {\n        ref.current = instance;\n    }\n};\n\n/**\n * Проверяет наличие значения в элементе ввода.\n *\n * Число считается заполненным всегда (включая 0), строка и массив строк — по длине.\n *\n * @param value Значение элемента ввода.\n * @returns true, если значение непустое.\n */\nexport const isFilled = (value: string | readonly string[] | number | undefined): boolean => {\n    if (value === undefined) {\n        return false;\n    } else if (typeof value === \"number\") {\n        return true;\n    } else {\n        return value.length !== 0;\n    }\n};\n"],"names":[],"mappings":"AAQO,MAAM,kBAAkB,CAAI,KAAwC,aAA6B;AACpG,MAAI,OAAO,QAAQ,YAAY;AAC3B,QAAI,QAAQ;AAAA,EAChB,WAAW,KAAK;AACZ,QAAI,UAAU;AAAA,EAClB;AACJ;AAUO,MAAM,WAAW,CAAC,UAAoE;AACzF,MAAI,UAAU,QAAW;AACrB,WAAO;AAAA,EACX,WAAW,OAAO,UAAU,UAAU;AAClC,WAAO;AAAA,EACX,OAAO;AACH,WAAO,MAAM,WAAW;AAAA,EAC5B;AACJ;"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/FormField/components/utils.ts"],"sourcesContent":["/**\n * Проверяет наличие значения в элементе ввода.\n *\n * Число считается заполненным всегда (включая 0), строка и массив строк — по длине.\n *\n * @param value Значение элемента ввода.\n * @returns true, если значение непустое.\n */\nexport const isFilled = (value: string | readonly string[] | number | undefined): boolean => {\n    if (value === undefined) {\n        return false;\n    } else if (typeof value === \"number\") {\n        return true;\n    } else {\n        return value.length !== 0;\n    }\n};\n"],"names":[],"mappings":"AAQO,MAAM,WAAW,CAAC,UAAoE;AACzF,MAAI,UAAU,QAAW;AACrB,WAAO;AAAA,EACX,WAAW,OAAO,UAAU,UAAU;AAClC,WAAO;AAAA,EACX,OAAO;AACH,WAAO,MAAM,WAAW;AAAA,EAC5B;AACJ;"}

package/components/Gap/Gap.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import React from "react";
-const size4 = "size4__a3295753";
-const size8 = "size8__b9af9114";
-const size12 = "size12__72e40310";
-const size16 = "size16__8c286a9b";
-const size24 = "size24__77fcee53";
-const size32 = "size32__a5f0851d";
-const size64 = "size64__69fdf1d4";
-const size128 = "size128__d616b09f";
+const size4 = "size4__46ed30e9";
+const size8 = "size8__d60e5b62";
+const size12 = "size12__7b27a02e";
+const size16 = "size16__83e78524";
+const size24 = "size24__b5030d9f";
+const size32 = "size32__06779af1";
+const size64 = "size64__7a41052f";
+const size128 = "size128__c9197abe";
 const styles = {
   size4,
   size8,

package/components/Header/Header.js

@@ -12,7 +12,7 @@ import "./components/HeaderTitle/HeaderTitleContent.js";
 import "./components/HeaderTitle/HeaderTitleControls.js";
 const Header = Object.assign(
   React.forwardRef(function Header2({ children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { ...rest, "data-tx": "0.45.0", ref, children });
+    return /* @__PURE__ */ jsx("div", { ...rest, "data-tx": "0.47.0", ref, children });
   }),
   {
     LayoutSidebar: HeaderLayoutSidebar,

package/components/Header/components/HeaderLayoutSidebar/HeaderLayoutSidebar.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
 import { HeaderLayoutSidebarContent } from "./HeaderLayoutSidebarContent.js";
 import { HeaderLayoutSidebarSidebar } from "./HeaderLayoutSidebarSidebar.js";
-import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-C-U26eI6.js";
+import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-C9m6F5xu.js";
 const HeaderLayoutSidebar = Object.assign(
   React.forwardRef(function HeaderLayoutSidebar2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerLayoutSidebar, className), ...rest, ref, children });

package/components/Header/components/HeaderLayoutSidebar/HeaderLayoutSidebarContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-C-U26eI6.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-C9m6F5xu.js";
 const HeaderLayoutSidebarContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerLayoutSidebarContent, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderLayoutSidebar/HeaderLayoutSidebarSidebar.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-C-U26eI6.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderLayoutSidebar.module-C9m6F5xu.js";
 const HeaderLayoutSidebarSidebar = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerLayoutSidebarSidebar, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderSubheader/HeaderSubheader.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-const headerSubheader = "headerSubheader__b78c4e64";
-const withoutPaddings = "withoutPaddings__32e2406d";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+const headerSubheader = "headerSubheader__408fca75";
+const withoutPaddings = "withoutPaddings__d5c9316b";
 const styles = {
   headerSubheader,
   withoutPaddings

package/components/Header/components/HeaderTabs/HeaderTabs.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { HeaderTabsContent } from "./HeaderTabsContent.js";
 import { HeaderTabsControls } from "./HeaderTabsControls.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderTabs.module-HkSXKkYC.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderTabs.module-TYr24Epn.js";
 const HeaderTabs = Object.assign(
   React.forwardRef(function HeaderTabs2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTabs, className), ...rest, ref, children });

package/components/Header/components/HeaderTabs/HeaderTabsContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderTabs.module-HkSXKkYC.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderTabs.module-TYr24Epn.js";
 const HeaderTabsContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTabsContent, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderTabs/HeaderTabsControls.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderTabs.module-HkSXKkYC.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderTabs.module-TYr24Epn.js";
 const HeaderTabsControls = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTabsControls, className), ...rest, ref, children })
 );

package/components/Header/components/HeaderTitle/HeaderTitle.js

@@ -2,8 +2,8 @@ import { jsx } from "react/jsx-runtime";
 import React from "react";
 import { HeaderTitleContent } from "./HeaderTitleContent.js";
 import { HeaderTitleControls } from "./HeaderTitleControls.js";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderTitle.module-CcIUoJSo.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderTitle.module-RNdnxSVu.js";
 const HeaderTitle = Object.assign(
   React.forwardRef(function HeaderTitle2({ children, className, ...rest }, ref) {
     return /* @__PURE__ */ jsx("div", { className: clsx(styles.headerTitle, className), ...rest, ref, children });

package/components/Header/components/HeaderTitle/HeaderTitleContent.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderTitle.module-CcIUoJSo.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderTitle.module-RNdnxSVu.js";
 const HeaderTitleContent = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
     "div",

package/components/Header/components/HeaderTitle/HeaderTitleControls.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../../chunks/vendor-DqGxntec.js";
-import { s as styles } from "../../../../chunks/HeaderTitle.module-CcIUoJSo.js";
+import { c as clsx } from "../../../../chunks/vendor-Bf_-FiU6.js";
+import { s as styles } from "../../../../chunks/HeaderTitle.module-RNdnxSVu.js";
 const HeaderTitleControls = React.forwardRef(
   ({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
     "div",

package/components/HelpBox/HelpBox.js

@@ -1,18 +1,22 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import React, { useRef, useState } from "react";
-import { u as uniqueId, c as clsx, F as FocusTrap } from "../../chunks/vendor-DqGxntec.js";
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import { u as uniqueId, c as clsx, F as FocusTrap } from "../../chunks/vendor-Bf_-FiU6.js";
 import { QuestioncircleFilledSrvIcon16 } from "@sberbusiness/icons-next";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
 import { EButtonIconShape } from "../Button/enums.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
-import { TooltipMobileHeader } from "../Tooltip/components/mobile/components/TooltipMobileHeader.js";
 import { MobileView } from "../MobileView/MobileView.js";
 import { getDataHTMLAttributes } from "../../utils/html/DataAttributes.js";
 import { getAriaHTMLAttributes } from "../../utils/html/AriaAttributes.js";
-const helpBoxButton = "helpBoxButton__0013e207";
+const helpBoxButton = "helpBoxButton__7b38e741";
 const styles = {
   helpBoxButton
 };
+const DEFAULT_ICON_PALETTE_INDEX = 5;
+const TOOLTIP_ID_PREFIX = "HelpBox-";
+const needFocusTrap = (button) => {
+  return button === null || button === document.activeElement || !button.matches(":hover");
+};
 const HelpBox = React.forwardRef(
   ({
     children,
@@ -33,49 +37,34 @@ const HelpBox = React.forwardRef(
     const buttonRef = useRef(null);
     const [openState, setOpenState] = useState(Boolean(openProp));
     const [focusTrapNode, setFocusTrapNode] = useState(null);
-    const [tooltipId] = useState(uniqueId());
+    const [tooltipId] = useState(() => uniqueId(TOOLTIP_ID_PREFIX));
     const open = openProp ?? openState;
-    const setRef = (instance) => {
-      buttonRef.current = instance;
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref) {
-        ref.current = instance;
+    const setButtonRef = useCallback(
+      (instance) => {
+        buttonRef.current = instance;
+        if (typeof ref === "function") {
+          ref(instance);
+        } else if (ref) {
+          ref.current = instance;
+        }
+      },
+      [ref]
+    );
+    useEffect(() => {
+      if (!open) {
+        setFocusTrapNode(null);
       }
-    };
-    const handleTooltipToggle = (open2) => {
+    }, [open]);
+    const handleTooltipToggle = (nextOpen) => {
       if (openProp === void 0) {
-        setOpenState(open2);
+        setOpenState(nextOpen);
       }
-      if (!open2) {
-        setFocusTrapNode(null);
-      }
-      toggle == null ? void 0 : toggle(open2);
+      toggle == null ? void 0 : toggle(nextOpen);
     };
     const handleTooltipShow = (node) => {
-      setFocusTrapNode(node);
+      setFocusTrapNode(needFocusTrap(buttonRef.current) ? node : null);
       onShow == null ? void 0 : onShow(node);
     };
-    const renderFocusTrap = (node) => /* @__PURE__ */ jsx(
-      MobileView,
-      {
-        fallback: /* @__PURE__ */ jsx(
-          FocusTrap,
-          {
-            active: open,
-            ...focusTrapProps,
-            focusTrapOptions: {
-              clickOutsideDeactivates: true,
-              initialFocus: `[id='${tooltipId}']`,
-              preventScroll: true,
-              ...focusTrapProps == null ? void 0 : focusTrapProps.focusTrapOptions
-            },
-            containerElements: [node]
-          }
-        ),
-        children: null
-      }
-    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(
         Tooltip,
@@ -90,26 +79,45 @@ const HelpBox = React.forwardRef(
           toggle: handleTooltipToggle,
           onShow: handleTooltipShow,
           targetRef: buttonRef,
-          ...Boolean(tooltipAriaAttributes) && getAriaHTMLAttributes(tooltipAriaAttributes),
-          ...Boolean(tooltipDataAttributes) && getDataHTMLAttributes(tooltipDataAttributes),
+          ...tooltipAriaAttributes && getAriaHTMLAttributes(tooltipAriaAttributes),
+          ...tooltipDataAttributes && getDataHTMLAttributes(tooltipDataAttributes),
           children: [
             /* @__PURE__ */ jsx(Tooltip.Target, { children: /* @__PURE__ */ jsx(
               ButtonIcon,
               {
                 className: clsx(styles.helpBoxButton, className),
                 shape: EButtonIconShape.CIRCLE,
-                ref: setRef,
+                ref: setButtonRef,
                 ...targetHtmlAttrs,
-                children: /* @__PURE__ */ jsx(QuestioncircleFilledSrvIcon16, { paletteIndex: 5, ...iconProps })
+                children: /* @__PURE__ */ jsx(QuestioncircleFilledSrvIcon16, { paletteIndex: DEFAULT_ICON_PALETTE_INDEX, ...iconProps })
               }
             ) }),
-            mobileHeaderContent && /* @__PURE__ */ jsx(TooltipMobileHeader, { children: mobileHeaderContent }),
+            mobileHeaderContent && /* @__PURE__ */ jsx(Tooltip.MobileHeader, { children: mobileHeaderContent }),
             /* @__PURE__ */ jsx(Tooltip.Body, { children }),
             /* @__PURE__ */ jsx(Tooltip.XButton, { ...tooltipXButtonProps })
           ]
         }
       ),
-      open && focusTrapNode && renderFocusTrap(focusTrapNode)
+      open && focusTrapNode && /* @__PURE__ */ jsx(
+        MobileView,
+        {
+          fallback: /* @__PURE__ */ jsx(
+            FocusTrap,
+            {
+              active: open,
+              ...focusTrapProps,
+              focusTrapOptions: {
+                clickOutsideDeactivates: true,
+                initialFocus: `[id='${tooltipId}']`,
+                preventScroll: true,
+                ...focusTrapProps == null ? void 0 : focusTrapProps.focusTrapOptions
+              },
+              containerElements: [focusTrapNode]
+            }
+          ),
+          children: null
+        }
+      )
     ] });
   }
 );

package/components/HelpBox/HelpBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"HelpBox.js","sources":["../../../src/components/HelpBox/HelpBox.tsx"],"sourcesContent":["import React, { useState, useRef } from \"react\";\nimport { uniqueId } from \"lodash-es\";\nimport FocusTrap from \"focus-trap-react\";\nimport { ISingleColorIconProps, QuestioncircleFilledSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { EButtonIconShape } from \"../Button/enums\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { ITooltipProps, ITooltipXButtonProps } from \"../Tooltip/types\";\nimport { ETooltipSize } from \"../Tooltip/enums\";\nimport { TooltipMobileHeader } from \"../Tooltip/components/mobile/components/TooltipMobileHeader\";\nimport { MobileView } from \"../MobileView/MobileView\";\nimport { getDataHTMLAttributes, TDataHTMLAttributes } from \"../../utils/html/DataAttributes\";\nimport { getAriaHTMLAttributes, TAriaHTMLAttributes } from \"../../utils/html/AriaAttributes\";\nimport styles from \"./styles/HelpBox.module.less\";\nimport clsx from \"clsx\";\n\n/** Свойства компонента HelpBox. */\nexport interface IHelpBoxProps\n    extends\n        React.HTMLAttributes<HTMLButtonElement>,\n        Pick<ITooltipProps, \"isOpen\" | \"preferPlace\" | \"onShow\" | \"toggle\"> {\n    /** Свойства FocusTrap. Используется npm-пакет focus-trap-react. */\n    focusTrapProps?: FocusTrap.Props;\n    /** Aria-атрибуты Tooltip. */\n    tooltipAriaAttributes?: TAriaHTMLAttributes;\n    /** Data-атрибуты Tooltip. */\n    tooltipDataAttributes?: TDataHTMLAttributes;\n    /** Размер Tooltip. */\n    tooltipSize: ETooltipSize;\n    /** Контент заголовка TooltipMobile. */\n    mobileHeaderContent?: React.ReactNode;\n    /** Свойства иконки. */\n    iconProps?: ISingleColorIconProps;\n    /** Свойства кнопки закрытия Tooltip. */\n    tooltipXButtonProps?: ITooltipXButtonProps;\n}\n\n/** Иконка \"?\" со всплывающей подсказкой выбранного размера. */\nexport const HelpBox = React.forwardRef<HTMLButtonElement, IHelpBoxProps>(\n    (\n        {\n            children,\n            className,\n            focusTrapProps,\n            mobileHeaderContent,\n            isOpen: openProp,\n            onShow,\n            tooltipSize,\n            preferPlace,\n            toggle,\n            tooltipAriaAttributes,\n            tooltipDataAttributes,\n            iconProps,\n            tooltipXButtonProps,\n            ...targetHtmlAttrs\n        },\n        ref,\n    ) => {\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n        const [openState, setOpenState] = useState(Boolean(openProp));\n        const [focusTrapNode, setFocusTrapNode] = useState<HTMLDivElement | null>(null);\n        const [tooltipId] = useState<string>(uniqueId());\n        const open = openProp ?? openState;\n\n        /** Функция для хранения ссылки. */\n        const setRef = (instance: HTMLButtonElement | null) => {\n            buttonRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                (ref as React.MutableRefObject<HTMLButtonElement | null>).current = instance;\n            }\n        };\n\n        /** Обработчик закрытия/открытия Tooltip. */\n        const handleTooltipToggle = (open: boolean) => {\n            if (openProp === undefined) {\n                setOpenState(open);\n            }\n\n            if (!open) {\n                setFocusTrapNode(null);\n            }\n\n            toggle?.(open);\n        };\n\n        /** Обработчик появления Tooltip. */\n        const handleTooltipShow = (node: HTMLDivElement) => {\n            setFocusTrapNode(node);\n            onShow?.(node);\n        };\n\n        /** Рендер ловушки фокуса. */\n        const renderFocusTrap = (node: HTMLDivElement) => (\n            <MobileView\n                fallback={\n                    <FocusTrap\n                        active={open}\n                        {...focusTrapProps}\n                        focusTrapOptions={{\n                            clickOutsideDeactivates: true,\n                            initialFocus: `[id='${tooltipId}']`,\n                            preventScroll: true,\n                            ...focusTrapProps?.focusTrapOptions,\n                        }}\n                        containerElements={[node]}\n                    />\n                }\n            >\n                {null}\n            </MobileView>\n        );\n\n        return (\n            <>\n                <Tooltip\n                    id={tooltipId}\n                    tabIndex={-1}\n                    role=\"dialog\"\n                    toggleType=\"hover\"\n                    size={tooltipSize}\n                    preferPlace={preferPlace}\n                    isOpen={open}\n                    toggle={handleTooltipToggle}\n                    onShow={handleTooltipShow}\n                    targetRef={buttonRef}\n                    {...(Boolean(tooltipAriaAttributes) && getAriaHTMLAttributes(tooltipAriaAttributes!))}\n                    {...(Boolean(tooltipDataAttributes) && getDataHTMLAttributes(tooltipDataAttributes!))}\n                >\n                    <Tooltip.Target>\n                        <ButtonIcon\n                            className={clsx(styles.helpBoxButton, className)}\n                            shape={EButtonIconShape.CIRCLE}\n                            ref={setRef}\n                            {...targetHtmlAttrs}\n                        >\n                            <QuestioncircleFilledSrvIcon16 paletteIndex={5} {...iconProps} />\n                        </ButtonIcon>\n                    </Tooltip.Target>\n                    {mobileHeaderContent && <TooltipMobileHeader>{mobileHeaderContent}</TooltipMobileHeader>}\n                    <Tooltip.Body>{children}</Tooltip.Body>\n                    <Tooltip.XButton {...tooltipXButtonProps} />\n                </Tooltip>\n                {open && focusTrapNode && renderFocusTrap(focusTrapNode)}\n            </>\n        );\n    },\n);\n\nHelpBox.displayName = \"HelpBox\";\n"],"names":["open"],"mappings":";;;;;;;;;;;;;;;AAsCO,MAAM,UAAU,MAAM;AAAA,EACzB,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,YAAY,OAAiC,IAAI;AACvD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,QAAQ,QAAQ,CAAC;AAC5D,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAgC,IAAI;AAC9E,UAAM,CAAC,SAAS,IAAI,SAAiB,UAAU;AAC/C,UAAM,OAAO,YAAY;AAGzB,UAAM,SAAS,CAAC,aAAuC;AACnD,gBAAU,UAAU;AACpB,UAAI,OAAO,QAAQ,YAAY;AAC3B,YAAI,QAAQ;AAAA,MAChB,WAAW,KAAK;AACX,YAAyD,UAAU;AAAA,MACxE;AAAA,IACJ;AAGA,UAAM,sBAAsB,CAACA,UAAkB;AAC3C,UAAI,aAAa,QAAW;AACxB,qBAAaA,KAAI;AAAA,MACrB;AAEA,UAAI,CAACA,OAAM;AACP,yBAAiB,IAAI;AAAA,MACzB;AAEA,uCAASA;AAAAA,IACb;AAGA,UAAM,oBAAoB,CAAC,SAAyB;AAChD,uBAAiB,IAAI;AACrB,uCAAS;AAAA,IACb;AAGA,UAAM,kBAAkB,CAAC,SACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,UACI;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,QAAQ;AAAA,YACP,GAAG;AAAA,YACJ,kBAAkB;AAAA,cACd,yBAAyB;AAAA,cACzB,cAAc,QAAQ,SAAS;AAAA,cAC/B,eAAe;AAAA,cACf,GAAG,iDAAgB;AAAA,YAAA;AAAA,YAEvB,mBAAmB,CAAC,IAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAI/B,UAAA;AAAA,MAAA;AAAA,IAAA;AAIT,WACI,qBAAA,UAAA,EACI,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,MAAK;AAAA,UACL,YAAW;AAAA,UACX,MAAM;AAAA,UACN;AAAA,UACA,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,WAAW;AAAA,UACV,GAAI,QAAQ,qBAAqB,KAAK,sBAAsB,qBAAsB;AAAA,UAClF,GAAI,QAAQ,qBAAqB,KAAK,sBAAsB,qBAAsB;AAAA,UAEnF,UAAA;AAAA,YAAA,oBAAC,QAAQ,QAAR,EACG,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,gBAC/C,OAAO,iBAAiB;AAAA,gBACxB,KAAK;AAAA,gBACJ,GAAG;AAAA,gBAEJ,UAAA,oBAAC,+BAAA,EAA8B,cAAc,GAAI,GAAG,UAAA,CAAW;AAAA,cAAA;AAAA,YAAA,GAEvE;AAAA,YACC,uBAAuB,oBAAC,qBAAA,EAAqB,UAAA,oBAAA,CAAoB;AAAA,YAClE,oBAAC,QAAQ,MAAR,EAAc,SAAA,CAAS;AAAA,YACxB,oBAAC,QAAQ,SAAR,EAAiB,GAAG,oBAAA,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAE7C,QAAQ,iBAAiB,gBAAgB,aAAa;AAAA,IAAA,GAC3D;AAAA,EAER;AACJ;AAEA,QAAQ,cAAc;"}
+{"version":3,"file":"HelpBox.js","sources":["../../../src/components/HelpBox/HelpBox.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { uniqueId } from \"lodash-es\";\nimport FocusTrap from \"focus-trap-react\";\nimport { ISingleColorIconProps, QuestioncircleFilledSrvIcon16 } from \"@sberbusiness/icons-next\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { EButtonIconShape } from \"../Button/enums\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\nimport { ITooltipProps, ITooltipXButtonProps } from \"../Tooltip/types\";\nimport { ETooltipSize } from \"../Tooltip/enums\";\nimport { MobileView } from \"../MobileView/MobileView\";\nimport { getDataHTMLAttributes, TDataHTMLAttributes } from \"../../utils/html/DataAttributes\";\nimport { getAriaHTMLAttributes, TAriaHTMLAttributes } from \"../../utils/html/AriaAttributes\";\nimport styles from \"./styles/HelpBox.module.less\";\n\n/** Индекс палитры иконки \"?\" по умолчанию. Переопределяется через iconProps. */\nconst DEFAULT_ICON_PALETTE_INDEX = 5;\n/** Префикс идентификатора Tooltip. */\nconst TOOLTIP_ID_PREFIX = \"HelpBox-\";\n\n/**\n * Открытая мышью подсказка фокус не забирает, поэтому ловушка нужна, только если кнопка-триггер\n * держит фокус (клавиатура) либо курсора над ней нет (программное открытие через isOpen).\n */\nconst needFocusTrap = (button: HTMLButtonElement | null): boolean => {\n    return button === null || button === document.activeElement || !button.matches(\":hover\");\n};\n\n/** Свойства компонента HelpBox. */\nexport interface IHelpBoxProps\n    extends\n        React.HTMLAttributes<HTMLButtonElement>,\n        Pick<ITooltipProps, \"isOpen\" | \"preferPlace\" | \"onShow\" | \"toggle\"> {\n    /** Свойства FocusTrap. Используется npm-пакет focus-trap-react. */\n    focusTrapProps?: FocusTrap.Props;\n    /** Aria-атрибуты Tooltip. */\n    tooltipAriaAttributes?: TAriaHTMLAttributes;\n    /** Data-атрибуты Tooltip. */\n    tooltipDataAttributes?: TDataHTMLAttributes;\n    /** Размер Tooltip. */\n    tooltipSize: ETooltipSize;\n    /** Контент заголовка TooltipMobile. Отображается только в мобильной версии. */\n    mobileHeaderContent?: React.ReactNode;\n    /** Свойства иконки. По умолчанию paletteIndex равен 5. */\n    iconProps?: ISingleColorIconProps;\n    /** Свойства кнопки закрытия Tooltip. */\n    tooltipXButtonProps?: ITooltipXButtonProps;\n}\n\n/** Иконка \"?\" со всплывающей подсказкой выбранного размера. */\nexport const HelpBox = React.forwardRef<HTMLButtonElement, IHelpBoxProps>(\n    (\n        {\n            children,\n            className,\n            focusTrapProps,\n            mobileHeaderContent,\n            isOpen: openProp,\n            onShow,\n            tooltipSize,\n            preferPlace,\n            toggle,\n            tooltipAriaAttributes,\n            tooltipDataAttributes,\n            iconProps,\n            tooltipXButtonProps,\n            ...targetHtmlAttrs\n        },\n        ref,\n    ) => {\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n        // Внутреннее состояние открытия используется, только когда isOpen не передан (uncontrolled-режим).\n        const [openState, setOpenState] = useState(Boolean(openProp));\n        // Нода открытого Tooltip, в которую монтируется ловушка фокуса. Приходит из onShow.\n        const [focusTrapNode, setFocusTrapNode] = useState<HTMLDivElement | null>(null);\n        const [tooltipId] = useState(() => uniqueId(TOOLTIP_ID_PREFIX));\n        const open = openProp ?? openState;\n\n        /** Установка ссылки на кнопку-триггер: во внутренний ref (для позиционирования) и во внешний forwarded ref. */\n        const setButtonRef = useCallback(\n            (instance: HTMLButtonElement | null) => {\n                buttonRef.current = instance;\n\n                if (typeof ref === \"function\") {\n                    ref(instance);\n                } else if (ref) {\n                    ref.current = instance;\n                }\n            },\n            [ref],\n        );\n\n        useEffect(() => {\n            if (!open) {\n                setFocusTrapNode(null);\n            }\n        }, [open]);\n\n        /** Обработчик закрытия/открытия Tooltip. */\n        const handleTooltipToggle = (nextOpen: boolean) => {\n            if (openProp === undefined) {\n                setOpenState(nextOpen);\n            }\n\n            toggle?.(nextOpen);\n        };\n\n        /** Обработчик появления Tooltip. Сохраняет его ноду, если подсказке нужна ловушка фокуса. */\n        const handleTooltipShow = (node: HTMLDivElement) => {\n            setFocusTrapNode(needFocusTrap(buttonRef.current) ? node : null);\n            onShow?.(node);\n        };\n\n        return (\n            <>\n                <Tooltip\n                    id={tooltipId}\n                    tabIndex={-1}\n                    role=\"dialog\"\n                    toggleType=\"hover\"\n                    size={tooltipSize}\n                    preferPlace={preferPlace}\n                    isOpen={open}\n                    toggle={handleTooltipToggle}\n                    onShow={handleTooltipShow}\n                    targetRef={buttonRef}\n                    {...(tooltipAriaAttributes && getAriaHTMLAttributes(tooltipAriaAttributes))}\n                    {...(tooltipDataAttributes && getDataHTMLAttributes(tooltipDataAttributes))}\n                >\n                    <Tooltip.Target>\n                        <ButtonIcon\n                            className={clsx(styles.helpBoxButton, className)}\n                            shape={EButtonIconShape.CIRCLE}\n                            ref={setButtonRef}\n                            {...targetHtmlAttrs}\n                        >\n                            <QuestioncircleFilledSrvIcon16 paletteIndex={DEFAULT_ICON_PALETTE_INDEX} {...iconProps} />\n                        </ButtonIcon>\n                    </Tooltip.Target>\n                    {mobileHeaderContent && <Tooltip.MobileHeader>{mobileHeaderContent}</Tooltip.MobileHeader>}\n                    <Tooltip.Body>{children}</Tooltip.Body>\n                    <Tooltip.XButton {...tooltipXButtonProps} />\n                </Tooltip>\n                {/* Ловушка фокуса нужна только на desktop, только когда Tooltip уже появился в DOM и только если подсказку открыли не наведением мыши. */}\n                {open && focusTrapNode && (\n                    <MobileView\n                        fallback={\n                            <FocusTrap\n                                active={open}\n                                {...focusTrapProps}\n                                focusTrapOptions={{\n                                    clickOutsideDeactivates: true,\n                                    initialFocus: `[id='${tooltipId}']`,\n                                    preventScroll: true,\n                                    ...focusTrapProps?.focusTrapOptions,\n                                }}\n                                containerElements={[focusTrapNode]}\n                            />\n                        }\n                    >\n                        {null}\n                    </MobileView>\n                )}\n            </>\n        );\n    },\n);\n\nHelpBox.displayName = \"HelpBox\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,6BAA6B;AAEnC,MAAM,oBAAoB;AAM1B,MAAM,gBAAgB,CAAC,WAA8C;AACjE,SAAO,WAAW,QAAQ,WAAW,SAAS,iBAAiB,CAAC,OAAO,QAAQ,QAAQ;AAC3F;AAwBO,MAAM,UAAU,MAAM;AAAA,EACzB,CACI;AAAA,IACI;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEP,QACC;AACD,UAAM,YAAY,OAAiC,IAAI;AAEvD,UAAM,CAAC,WAAW,YAAY,IAAI,SAAS,QAAQ,QAAQ,CAAC;AAE5D,UAAM,CAAC,eAAe,gBAAgB,IAAI,SAAgC,IAAI;AAC9E,UAAM,CAAC,SAAS,IAAI,SAAS,MAAM,SAAS,iBAAiB,CAAC;AAC9D,UAAM,OAAO,YAAY;AAGzB,UAAM,eAAe;AAAA,MACjB,CAAC,aAAuC;AACpC,kBAAU,UAAU;AAEpB,YAAI,OAAO,QAAQ,YAAY;AAC3B,cAAI,QAAQ;AAAA,QAChB,WAAW,KAAK;AACZ,cAAI,UAAU;AAAA,QAClB;AAAA,MACJ;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGR,cAAU,MAAM;AACZ,UAAI,CAAC,MAAM;AACP,yBAAiB,IAAI;AAAA,MACzB;AAAA,IACJ,GAAG,CAAC,IAAI,CAAC;AAGT,UAAM,sBAAsB,CAAC,aAAsB;AAC/C,UAAI,aAAa,QAAW;AACxB,qBAAa,QAAQ;AAAA,MACzB;AAEA,uCAAS;AAAA,IACb;AAGA,UAAM,oBAAoB,CAAC,SAAyB;AAChD,uBAAiB,cAAc,UAAU,OAAO,IAAI,OAAO,IAAI;AAC/D,uCAAS;AAAA,IACb;AAEA,WACI,qBAAA,UAAA,EACI,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAI;AAAA,UACJ,UAAU;AAAA,UACV,MAAK;AAAA,UACL,YAAW;AAAA,UACX,MAAM;AAAA,UACN;AAAA,UACA,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,WAAW;AAAA,UACV,GAAI,yBAAyB,sBAAsB,qBAAqB;AAAA,UACxE,GAAI,yBAAyB,sBAAsB,qBAAqB;AAAA,UAEzE,UAAA;AAAA,YAAA,oBAAC,QAAQ,QAAR,EACG,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAW,KAAK,OAAO,eAAe,SAAS;AAAA,gBAC/C,OAAO,iBAAiB;AAAA,gBACxB,KAAK;AAAA,gBACJ,GAAG;AAAA,gBAEJ,UAAA,oBAAC,+BAAA,EAA8B,cAAc,4BAA6B,GAAG,UAAA,CAAW;AAAA,cAAA;AAAA,YAAA,GAEhG;AAAA,YACC,uBAAuB,oBAAC,QAAQ,cAAR,EAAsB,UAAA,qBAAoB;AAAA,YACnE,oBAAC,QAAQ,MAAR,EAAc,SAAA,CAAS;AAAA,YACxB,oBAAC,QAAQ,SAAR,EAAiB,GAAG,oBAAA,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAG7C,QAAQ,iBACL;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,UACI;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,QAAQ;AAAA,cACP,GAAG;AAAA,cACJ,kBAAkB;AAAA,gBACd,yBAAyB;AAAA,gBACzB,cAAc,QAAQ,SAAS;AAAA,gBAC/B,eAAe;AAAA,gBACf,GAAG,iDAAgB;AAAA,cAAA;AAAA,cAEvB,mBAAmB,CAAC,aAAa;AAAA,YAAA;AAAA,UAAA;AAAA,UAIxC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACL,GAER;AAAA,EAER;AACJ;AAEA,QAAQ,cAAc;"}

package/components/IconWrapper/IconWrapper.js

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
-const disableInteraction = "disableInteraction__e901ad13";
-const displayContents = "displayContents__18bd608a";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
+const disableInteraction = "disableInteraction__e545c4e7";
+const displayContents = "displayContents__2fa0ec63";
 const styles = {
   disableInteraction,
   displayContents

package/components/ImageGallery/ImageGallery.js

@@ -8,7 +8,7 @@ import "../ImageGalleryExtended/components/ImageGalleryExtendedMain.js";
 import "../ImageGalleryExtended/components/ImageGalleryExtendedNav.js";
 import "../ImageGalleryExtended/components/ImageGalleryExtendedArrow.js";
 import "../ImageGalleryExtended/components/ImageGalleryExtendedThumbnails.js";
-import "../../chunks/ImageGalleryExtendedThumb-A_z_RGt_.js";
+import "../../chunks/ImageGalleryExtendedThumb-DlnuYNuE.js";
 import "../ImageGalleryExtended/components/ImageGalleryExtendedDots.js";
 import { EImageGalleryArrowDirection } from "../ImageGalleryExtended/enums.js";
 const ImageGallery = React.forwardRef(

package/components/ImageGalleryExtended/ImageGalleryExtended.js

@@ -1,16 +1,16 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useCallback } from "react";
-import { c as clsx } from "../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../chunks/vendor-Bf_-FiU6.js";
 import { isKey } from "../../utils/keyboard.js";
 import { ImageGalleryExtendedContext } from "./ImageGalleryExtendedContext.js";
 import { ImageGalleryExtendedMain } from "./components/ImageGalleryExtendedMain.js";
 import { ImageGalleryExtendedNav } from "./components/ImageGalleryExtendedNav.js";
 import { ImageGalleryExtendedArrow } from "./components/ImageGalleryExtendedArrow.js";
 import { ImageGalleryExtendedThumbnails } from "./components/ImageGalleryExtendedThumbnails.js";
-import { I as ImageGalleryExtendedThumb } from "../../chunks/ImageGalleryExtendedThumb-A_z_RGt_.js";
+import { I as ImageGalleryExtendedThumb } from "../../chunks/ImageGalleryExtendedThumb-DlnuYNuE.js";
 import { ImageGalleryExtendedDots } from "./components/ImageGalleryExtendedDots.js";
 import "./enums.js";
-const root = "root__8f063f4a";
+const root = "root__2b4f384e";
 const styles = {
   root
 };

package/components/ImageGalleryExtended/components/ImageGalleryExtendedArrow.js

@@ -1,9 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
-import { c as clsx } from "../../../chunks/vendor-DqGxntec.js";
+import { c as clsx } from "../../../chunks/vendor-Bf_-FiU6.js";
 import { CaretleftStrokeSrvIcon24, CaretrightStrokeSrvIcon24 } from "@sberbusiness/icons-next";
 import { EImageGalleryArrowDirection } from "../enums.js";
-import { s as styles } from "../../../chunks/ImageGalleryExtendedMain.module-DkmZIZiC.js";
+import { s as styles } from "../../../chunks/ImageGalleryExtendedMain.module-B2et0s1q.js";
 const DIRECTION_CLASS = {
   [EImageGalleryArrowDirection.PREV]: styles.prev,
   [EImageGalleryArrowDirection.NEXT]: styles.next