@sberbusiness/triplex-next 0.35.0 → 0.37.0

package/components/Loader/LoaderSmall/LoaderSmall.js

@@ -2,16 +2,16 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { ELoaderSmallTheme } from "./enum.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
-const loaderSmall = "loaderSmall__60fde6ae";
-const sm = "sm__ce446359";
-const dot = "dot__9005c07a";
-const md = "md__21aff6a6";
-const lg = "lg__6a9ea279";
-const neutral = "neutral__20d74c8b";
-const brand = "brand__6ba1155d";
-const dot1 = "dot1__eed0d7e2";
-const dot2 = "dot2__adaa080f";
-const dot3 = "dot3__fb80690f";
+const loaderSmall = "loaderSmall__d09b2581";
+const sm = "sm__25cbcdbb";
+const dot = "dot__f9f681ab";
+const md = "md__a08ccc90";
+const lg = "lg__53c0f70d";
+const neutral = "neutral__dcd3fd6e";
+const brand = "brand__8e3e1954";
+const dot1 = "dot1__ef4c14d0";
+const dot2 = "dot2__59c6a54f";
+const dot3 = "dot3__bfc8cdcc";
 const styles = {
   loaderSmall,
   sm,

package/components/LoaderScreen/LoaderScreen.js

@@ -1,30 +1,47 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React from "react";
 import { LoaderSmall } from "../Loader/LoaderSmall/LoaderSmall.js";
 import { ELoaderSmallTheme } from "../Loader/LoaderSmall/enum.js";
 import { LoaderMiddle } from "../Loader/LoaderMiddle/LoaderMiddle.js";
+import { Gap } from "../Gap/Gap.js";
+import { ETextSize } from "../Typography/enums.js";
+import "../Typography/Caption.js";
+import "../Typography/CodeText.js";
+import { Text } from "../Typography/Text.js";
+import "../Typography/Title.js";
 import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
-const loaderScreen = "loaderScreen__a9792731";
-const loaderSmallBackdrop = "loaderSmallBackdrop__563aa65c";
-const loaderMiddleBackdrop = "loaderMiddleBackdrop__57b3a332";
+const loaderScreen = "loaderScreen__f5ca06fc";
+const loaderSmallBackdrop = "loaderSmallBackdrop__a210e634";
+const loaderMiddleBackdrop = "loaderMiddleBackdrop__7391328a";
+const loaderContent = "loaderContent__6bf46c7e";
+const description = "description__4068c0ab";
 const styles = {
   loaderScreen,
   loaderSmallBackdrop,
-  loaderMiddleBackdrop
-};
-const LoaderScreen = ({
-  className,
-  size = EComponentSize.MD,
-  type,
-  theme = ELoaderSmallTheme.BRAND,
-  ...htmlDivAttributes
-}) => {
-  const classNames = clsx(className, styles.loaderScreen, {
-    [styles.loaderSmallBackdrop]: type === "small",
-    [styles.loaderMiddleBackdrop]: type === "middle"
-  });
-  return /* @__PURE__ */ jsx("div", { className: classNames, ...htmlDivAttributes, children: type === "small" ? /* @__PURE__ */ jsx(LoaderSmall, { size, theme }) : /* @__PURE__ */ jsx("div", { className: styles.loaderMiddleBackground, children: /* @__PURE__ */ jsx(LoaderMiddle, {}) }) });
+  loaderMiddleBackdrop,
+  loaderContent,
+  description
 };
+const LoaderScreen = React.forwardRef(
+  ({ className, size = EComponentSize.MD, type, description: description2, controls, ...htmlDivAttributes }, ref) => {
+    const classNames = clsx(className, styles.loaderScreen, {
+      [styles.loaderSmallBackdrop]: type === "small",
+      [styles.loaderMiddleBackdrop]: type === "middle"
+    });
+    return /* @__PURE__ */ jsx("div", { ref, className: classNames, ...htmlDivAttributes, children: /* @__PURE__ */ jsxs("div", { className: styles.loaderContent, children: [
+      type === "small" ? /* @__PURE__ */ jsx(LoaderSmall, { size, theme: ELoaderSmallTheme.BRAND }) : /* @__PURE__ */ jsx(LoaderMiddle, {}),
+      description2 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Gap, { size: 24 }),
+        /* @__PURE__ */ jsx(Text, { className: styles.description, tag: "div", size: ETextSize.B2, children: description2 })
+      ] }),
+      controls && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Gap, { size: 24 }),
+        /* @__PURE__ */ jsx("div", { children: controls })
+      ] })
+    ] }) });
+  }
+);
 LoaderScreen.displayName = "LoaderScreen";
 export {
   LoaderScreen

package/components/LoaderScreen/LoaderScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoaderScreen.js","sources":["../../../src/components/LoaderScreen/LoaderScreen.tsx"],"sourcesContent":["import React from \"react\";\nimport { LoaderSmall, ELoaderSmallTheme, LoaderMiddle } from \"../Loader\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport styles from \"./styles/LoaderScreen.module.less\";\n\n/** Свойства компонента LoaderScreen. */\nexport interface ILoaderScreenProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Тип лоадера. */\n    type: \"small\" | \"middle\";\n    /** Тема лоадера для типа small. */\n    theme?: ELoaderSmallTheme;\n    /** Размер лоадера для типа small. */\n    size?: EComponentSize;\n}\n\nexport const LoaderScreen: React.FC<ILoaderScreenProps> = ({\n    className,\n    size = EComponentSize.MD,\n    type,\n    theme = ELoaderSmallTheme.BRAND,\n    ...htmlDivAttributes\n}) => {\n    const classNames = clsx(className, styles.loaderScreen, {\n        [styles.loaderSmallBackdrop]: type === \"small\",\n        [styles.loaderMiddleBackdrop]: type === \"middle\",\n    });\n\n    return (\n        <div className={classNames} {...htmlDivAttributes}>\n            {type === \"small\" ? (\n                <LoaderSmall size={size} theme={theme} />\n            ) : (\n                <div className={styles.loaderMiddleBackground}>\n                    <LoaderMiddle />\n                </div>\n            )}\n        </div>\n    );\n};\n\nLoaderScreen.displayName = \"LoaderScreen\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAgBO,MAAM,eAA6C,CAAC;AAAA,EACvD;AAAA,EACA,OAAO,eAAe;AAAA,EACtB;AAAA,EACA,QAAQ,kBAAkB;AAAA,EAC1B,GAAG;AACP,MAAM;AACF,QAAM,aAAa,KAAK,WAAW,OAAO,cAAc;AAAA,IACpD,CAAC,OAAO,mBAAmB,GAAG,SAAS;AAAA,IACvC,CAAC,OAAO,oBAAoB,GAAG,SAAS;AAAA,EAAA,CAC3C;AAED,SACI,oBAAC,SAAI,WAAW,YAAa,GAAG,mBAC3B,UAAA,SAAS,UACN,oBAAC,aAAA,EAAY,MAAY,MAAA,CAAc,wBAEtC,OAAA,EAAI,WAAW,OAAO,wBACnB,UAAA,oBAAC,cAAA,EAAa,EAAA,CAClB,EAAA,CAER;AAER;AAEA,aAAa,cAAc;"}
+{"version":3,"file":"LoaderScreen.js","sources":["../../../src/components/LoaderScreen/LoaderScreen.tsx"],"sourcesContent":["import React from \"react\";\nimport { LoaderSmall, ELoaderSmallTheme, LoaderMiddle } from \"../Loader\";\nimport { Gap } from \"../Gap\";\nimport { ETextSize, Text } from \"../Typography\";\nimport clsx from \"clsx\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums\";\nimport styles from \"./styles/LoaderScreen.module.less\";\n\n/** Свойства компонента LoaderScreen. */\nexport interface ILoaderScreenProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Тип лоадера. */\n    type: \"small\" | \"middle\";\n    /** Размер лоадера для типа small. */\n    size?: EComponentSize;\n    /** Текст, который будет отображаться под спиннером. */\n    description?: React.ReactNode;\n    /** Кнопки, которые будут отображаться под спиннером. */\n    controls?: React.ReactNode;\n}\n\nexport interface ILoaderScreenMiddleProps extends Omit<ILoaderScreenProps, \"type\" | \"size\"> {}\n\nexport const LoaderScreen = React.forwardRef<HTMLDivElement, ILoaderScreenProps>(\n    ({ className, size = EComponentSize.MD, type, description, controls, ...htmlDivAttributes }, ref) => {\n        const classNames = clsx(className, styles.loaderScreen, {\n            [styles.loaderSmallBackdrop]: type === \"small\",\n            [styles.loaderMiddleBackdrop]: type === \"middle\",\n        });\n\n        return (\n            <div ref={ref} className={classNames} {...htmlDivAttributes}>\n                <div className={styles.loaderContent}>\n                    {type === \"small\" ? <LoaderSmall size={size} theme={ELoaderSmallTheme.BRAND} /> : <LoaderMiddle />}\n\n                    {description && (\n                        <>\n                            <Gap size={24} />\n                            <Text className={styles.description} tag=\"div\" size={ETextSize.B2}>\n                                {description}\n                            </Text>\n                        </>\n                    )}\n\n                    {controls && (\n                        <>\n                            <Gap size={24} />\n                            <div>{controls}</div>\n                        </>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nLoaderScreen.displayName = \"LoaderScreen\";\n"],"names":["description"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsBO,MAAM,eAAe,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,OAAO,eAAe,IAAI,MAAM,aAAAA,cAAa,UAAU,GAAG,kBAAA,GAAqB,QAAQ;AACjG,UAAM,aAAa,KAAK,WAAW,OAAO,cAAc;AAAA,MACpD,CAAC,OAAO,mBAAmB,GAAG,SAAS;AAAA,MACvC,CAAC,OAAO,oBAAoB,GAAG,SAAS;AAAA,IAAA,CAC3C;AAED,WACI,oBAAC,OAAA,EAAI,KAAU,WAAW,YAAa,GAAG,mBACtC,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,MAAA,SAAS,8BAAW,aAAA,EAAY,MAAY,OAAO,kBAAkB,MAAA,CAAO,IAAK,oBAAC,cAAA,CAAA,CAAa;AAAA,MAE/FA,gBACG,qBAAA,UAAA,EACI,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAI,MAAM,GAAA,CAAI;AAAA,QACf,oBAAC,MAAA,EAAK,WAAW,OAAO,aAAa,KAAI,OAAM,MAAM,UAAU,IAC1D,UAAAA,aAAA,CACL;AAAA,MAAA,GACJ;AAAA,MAGH,YACG,qBAAA,UAAA,EACI,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAI,MAAM,GAAA,CAAI;AAAA,QACf,oBAAC,SAAK,UAAA,SAAA,CAAS;AAAA,MAAA,EAAA,CACnB;AAAA,IAAA,EAAA,CAER,EAAA,CACJ;AAAA,EAER;AACJ;AAEA,aAAa,cAAc;"}

package/components/Marker/Marker.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
-import { a as styles, s as statusToClassNameMap } from "../../chunks/utils-BG65o2Mo.js";
+import { a as styles, s as statusToClassNameMap } from "../../chunks/utils-DY7_iBZq.js";
 import { Badge } from "../Badge/Badge.js";
 import "./enums.js";
 const Marker = ({ className, status, ...rest }) => /* @__PURE__ */ jsx(Badge.Dot, { className: clsx(styles.marker, statusToClassNameMap[status], className), ...rest });

package/components/Marker/utils.js

@@ -1,5 +1,5 @@
 import "./enums.js";
-import { s } from "../../chunks/utils-BG65o2Mo.js";
+import { s } from "../../chunks/utils-DY7_iBZq.js";
 export {
   s as statusToClassNameMap
 };

package/components/MarkerStatus/MarkerStatus.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React from "react";
 import { Marker } from "../Marker/Marker.js";
 import { c as clsx } from "../../chunks/vendor-BtZO8a0z.js";
-import { s as statusToClassNameMap } from "../../chunks/utils-BG65o2Mo.js";
+import { s as statusToClassNameMap } from "../../chunks/utils-DY7_iBZq.js";
 import { ETextSize, EFontType, ECaptionSize } from "../Typography/enums.js";
 import { Caption } from "../Typography/Caption.js";
 import "../Typography/CodeText.js";
@@ -10,11 +10,11 @@ import { Text } from "../Typography/Text.js";
 import "../Typography/Title.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-const markerStatus = "markerStatus__2dffeb0a";
-const contentContainer = "contentContainer__bda7db43";
-const md = "md__2264fd1a";
-const markerContainer = "markerContainer__1dcf33ed";
-const lg = "lg__44af7d53";
+const markerStatus = "markerStatus__70496caf";
+const contentContainer = "contentContainer__e1e5e842";
+const md = "md__07c31d45";
+const markerContainer = "markerContainer__b53a2195";
+const lg = "lg__48d38854";
 const styles = {
   markerStatus,
   contentContainer,
@@ -30,7 +30,7 @@ const sizeToClassNameMap = createSizeToClassNameMap(styles);
 const MarkerStatus = React.forwardRef(
   ({ children, className, description, status, size = EComponentSize.MD, ...restProps }, ref) => {
     const classNames = clsx(styles.markerStatus, sizeToClassNameMap[size], statusToClassNameMap[status], className);
-    return /* @__PURE__ */ jsxs("div", { className: classNames, "data-tx": "0.35.0", ...restProps, ref, children: [
+    return /* @__PURE__ */ jsxs("div", { className: classNames, "data-tx": "0.37.0", ...restProps, ref, children: [
       /* @__PURE__ */ jsx("div", { className: styles.markerContainer, children: /* @__PURE__ */ jsx(Marker, { status, size }) }),
       /* @__PURE__ */ jsxs("div", { className: styles.contentContainer, children: [
         /* @__PURE__ */ jsx(Text, { size: markerStatusSizeToTextSizeMap[size], children }),

package/components/MediaWidth/MediaBetweenWidth.js

@@ -1,9 +1,6 @@
 import { useMatchMedia } from "./useMatchMedia.js";
 const MediaBetweenWidth = ({ children, fallback, minWidth, maxWidth }) => {
-  const matches = useMatchMedia(
-    `(max-width: ${maxWidth}) and (min-width: ${minWidth})`,
-    window.innerWidth >= parseInt(minWidth) && window.innerWidth <= parseInt(maxWidth)
-  );
+  const matches = useMatchMedia(`(max-width: ${maxWidth}) and (min-width: ${minWidth})`);
   return matches ? children : fallback;
 };
 export {

package/components/MediaWidth/MediaBetweenWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBetweenWidth.js","sources":["../../../src/components/MediaWidth/MediaBetweenWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"@sberbusiness/triplex-next/helpers/breakpoints\";\nimport { useMatchMedia } from \"@sberbusiness/triplex-next/components/MediaWidth/useMatchMedia\";\n\n/**\n * Свойства MediaBetweenWidth.\n */\ninterface IMediaBetweenWidthProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера попадает в диапазон minWidth и/или maxWidth. */\n    children: React.ReactElement | null;\n    /** Минимальная ширина экран, при которой будут отрендерены children. */\n    minWidth: EScreenWidth;\n    /** Максимальная ширина экран, при которой будут отрендерены children. */\n    maxWidth: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит children в случае, если ширина окна браузера попадает в диапазон между minWidth и maxWidth.\n * В противном случае рендерится fallback.\n */\nexport const MediaBetweenWidth: React.FC<IMediaBetweenWidthProps> = ({ children, fallback, minWidth, maxWidth }) => {\n    const matches = useMatchMedia(\n        `(max-width: ${maxWidth}) and (min-width: ${minWidth})`,\n        window.innerWidth >= parseInt(minWidth) && window.innerWidth <= parseInt(maxWidth),\n    );\n\n    return matches ? children : fallback;\n};\n"],"names":[],"mappings":";AAsBO,MAAM,oBAAuD,CAAC,EAAE,UAAU,UAAU,UAAU,eAAe;AAChH,QAAM,UAAU;AAAA,IACZ,eAAe,QAAQ,qBAAqB,QAAQ;AAAA,IACpD,OAAO,cAAc,SAAS,QAAQ,KAAK,OAAO,cAAc,SAAS,QAAQ;AAAA,EAAA;AAGrF,SAAO,UAAU,WAAW;AAChC;"}
+{"version":3,"file":"MediaBetweenWidth.js","sources":["../../../src/components/MediaWidth/MediaBetweenWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport { useMatchMedia } from \"./useMatchMedia\";\n\n/** Свойства компонента MediaBetweenWidth. */\nexport interface IMediaBetweenWidthProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера попадает в диапазон minWidth и/или maxWidth. */\n    children: React.ReactElement | null;\n    /** Минимальная ширина экран, при которой будут отрендерены children. */\n    minWidth: EScreenWidth;\n    /** Максимальная ширина экран, при которой будут отрендерены children. */\n    maxWidth: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит children в случае, если ширина окна браузера попадает в диапазон между minWidth и maxWidth.\n * В противном случае рендерится fallback.\n */\nexport const MediaBetweenWidth: React.FC<IMediaBetweenWidthProps> = ({ children, fallback, minWidth, maxWidth }) => {\n    const matches = useMatchMedia(`(max-width: ${maxWidth}) and (min-width: ${minWidth})`);\n\n    return matches ? children : fallback;\n};\n"],"names":[],"mappings":";AAoBO,MAAM,oBAAuD,CAAC,EAAE,UAAU,UAAU,UAAU,eAAe;AAChH,QAAM,UAAU,cAAc,eAAe,QAAQ,qBAAqB,QAAQ,GAAG;AAErF,SAAO,UAAU,WAAW;AAChC;"}

package/components/MediaWidth/MediaMaxWidth.js

@@ -1,6 +1,6 @@
 import { useMatchMedia } from "./useMatchMedia.js";
 const MediaMaxWidth = ({ children, fallback, maxWidth }) => {
-  const matches = useMatchMedia(`(max-width: ${maxWidth})`, window.innerWidth <= parseInt(maxWidth));
+  const matches = useMatchMedia(`(max-width: ${maxWidth})`);
   return matches ? children : fallback;
 };
 export {

package/components/MediaWidth/MediaMaxWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaMaxWidth.js","sources":["../../../src/components/MediaWidth/MediaMaxWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"@sberbusiness/triplex-next/helpers/breakpoints\";\nimport { useMatchMedia } from \"@sberbusiness/triplex-next/components/MediaWidth/useMatchMedia\";\n\n/**\n * Свойства MediaMaxWidth.\n */\ninterface IMediaMaxWidthProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера соответствует значению maxWidth. */\n    children: React.ReactElement | null;\n    /** Максимальная ширина экран, при которой будут отрендерены children. */\n    maxWidth: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит children в случае, если ширина окна браузера соответствует значению maxWidth.\n * В противном случае рендерится fallback.\n */\nexport const MediaMaxWidth: React.FC<IMediaMaxWidthProps> = ({ children, fallback, maxWidth }) => {\n    const matches = useMatchMedia(`(max-width: ${maxWidth})`, window.innerWidth <= parseInt(maxWidth));\n\n    return matches ? children : fallback;\n};\n"],"names":[],"mappings":";AAoBO,MAAM,gBAA+C,CAAC,EAAE,UAAU,UAAU,eAAe;AAC9F,QAAM,UAAU,cAAc,eAAe,QAAQ,KAAK,OAAO,cAAc,SAAS,QAAQ,CAAC;AAEjG,SAAO,UAAU,WAAW;AAChC;"}
+{"version":3,"file":"MediaMaxWidth.js","sources":["../../../src/components/MediaWidth/MediaMaxWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport { useMatchMedia } from \"./useMatchMedia\";\n\n/** Свойства компонента MediaMaxWidth. */\nexport interface IMediaMaxWidthProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера соответствует значению maxWidth. */\n    children: React.ReactElement | null;\n    /** Максимальная ширина экран, при которой будут отрендерены children. */\n    maxWidth: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит children в случае, если ширина окна браузера соответствует значению maxWidth.\n * В противном случае рендерится fallback.\n */\nexport const MediaMaxWidth: React.FC<IMediaMaxWidthProps> = ({ children, fallback, maxWidth }) => {\n    const matches = useMatchMedia(`(max-width: ${maxWidth})`);\n\n    return matches ? children : fallback;\n};\n"],"names":[],"mappings":";AAkBO,MAAM,gBAA+C,CAAC,EAAE,UAAU,UAAU,eAAe;AAC9F,QAAM,UAAU,cAAc,eAAe,QAAQ,GAAG;AAExD,SAAO,UAAU,WAAW;AAChC;"}

package/components/MediaWidth/MediaMinWidth.js

@@ -1,6 +1,6 @@
 import { useMatchMedia } from "./useMatchMedia.js";
 const MediaMinWidth = ({ children, fallback, minWidth }) => {
-  const matches = useMatchMedia(`(min-width: ${minWidth})`, window.innerWidth >= parseInt(minWidth));
+  const matches = useMatchMedia(`(min-width: ${minWidth})`);
   return matches ? children : fallback;
 };
 export {

package/components/MediaWidth/MediaMinWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaMinWidth.js","sources":["../../../src/components/MediaWidth/MediaMinWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"@sberbusiness/triplex-next/helpers/breakpoints\";\nimport { useMatchMedia } from \"@sberbusiness/triplex-next/components/MediaWidth/useMatchMedia\";\n\n/**\n * Свойства MediaMinWidth.\n */\ninterface IMediaMinWidthProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера соответствует значению minWidth. */\n    children: React.ReactElement | null;\n    /** Минимальная ширина экран, при которой будут отрендерены children. */\n    minWidth: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит children в случае, если ширина окна браузера соответствует значению minWidth.\n * В противном случае рендерится fallback.\n */\nexport const MediaMinWidth: React.FC<IMediaMinWidthProps> = ({ children, fallback, minWidth }) => {\n    const matches = useMatchMedia(`(min-width: ${minWidth})`, window.innerWidth >= parseInt(minWidth));\n\n    return matches ? children : fallback;\n};\n"],"names":[],"mappings":";AAoBO,MAAM,gBAA+C,CAAC,EAAE,UAAU,UAAU,eAAe;AAC9F,QAAM,UAAU,cAAc,eAAe,QAAQ,KAAK,OAAO,cAAc,SAAS,QAAQ,CAAC;AAEjG,SAAO,UAAU,WAAW;AAChC;"}
+{"version":3,"file":"MediaMinWidth.js","sources":["../../../src/components/MediaWidth/MediaMinWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport { useMatchMedia } from \"./useMatchMedia\";\n\n/** Свойства компонента MediaMinWidth. */\nexport interface IMediaMinWidthProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера соответствует значению minWidth. */\n    children: React.ReactElement | null;\n    /** Минимальная ширина экран, при которой будут отрендерены children. */\n    minWidth: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит children в случае, если ширина окна браузера соответствует значению minWidth.\n * В противном случае рендерится fallback.\n */\nexport const MediaMinWidth: React.FC<IMediaMinWidthProps> = ({ children, fallback, minWidth }) => {\n    const matches = useMatchMedia(`(min-width: ${minWidth})`);\n\n    return matches ? children : fallback;\n};\n"],"names":[],"mappings":";AAkBO,MAAM,gBAA+C,CAAC,EAAE,UAAU,UAAU,eAAe;AAC9F,QAAM,UAAU,cAAc,eAAe,QAAQ,GAAG;AAExD,SAAO,UAAU,WAAW;AAChC;"}

package/components/MediaWidth/MediaWidth.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaWidth.js","sources":["../../../src/components/MediaWidth/MediaWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport { MediaMaxWidth } from \"./MediaMaxWidth\";\nimport { MediaMinWidth } from \"./MediaMinWidth\";\nimport { MediaBetweenWidth } from \"./MediaBetweenWidth\";\n\n/**\n * Свойства MediaWidth.\n */\ninterface IMediaProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера попадает в диапазон minWidth и/или maxWidth. */\n    children: React.ReactElement | null;\n    /** Минимальная ширина экран, при которой будут отрендерены children. */\n    minWidth?: EScreenWidth;\n    /** Максимальная ширина экран, при которой будут отрендерены children. */\n    maxWidth?: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/**\n * Компонент, который рендерит элементы в зависимости от ширины окна браузера.\n */\nexport const MediaWidth: React.FC<IMediaProps> = ({ children, fallback, maxWidth, minWidth }) => {\n    if (minWidth && maxWidth) {\n        return (\n            <MediaBetweenWidth minWidth={minWidth} maxWidth={maxWidth} fallback={fallback}>\n                {children}\n            </MediaBetweenWidth>\n        );\n    } else if (minWidth) {\n        return (\n            <MediaMinWidth minWidth={minWidth} fallback={fallback}>\n                {children}\n            </MediaMinWidth>\n        );\n    } else if (maxWidth) {\n        return (\n            <MediaMaxWidth maxWidth={maxWidth} fallback={fallback}>\n                {children}\n            </MediaMaxWidth>\n        );\n    }\n\n    return fallback;\n};\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,aAAoC,CAAC,EAAE,UAAU,UAAU,UAAU,eAAe;AAC7F,MAAI,YAAY,UAAU;AACtB,WACI,oBAAC,mBAAA,EAAkB,UAAoB,UAAoB,UACtD,UACL;AAAA,EAER,WAAW,UAAU;AACjB,WACI,oBAAC,eAAA,EAAc,UAAoB,UAC9B,SAAA,CACL;AAAA,EAER,WAAW,UAAU;AACjB,WACI,oBAAC,eAAA,EAAc,UAAoB,UAC9B,SAAA,CACL;AAAA,EAER;AAEA,SAAO;AACX;"}
+{"version":3,"file":"MediaWidth.js","sources":["../../../src/components/MediaWidth/MediaWidth.tsx"],"sourcesContent":["import React from \"react\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\nimport { MediaMaxWidth } from \"./MediaMaxWidth\";\nimport { MediaMinWidth } from \"./MediaMinWidth\";\nimport { MediaBetweenWidth } from \"./MediaBetweenWidth\";\n\n/** Свойства компонента MediaWidth. */\nexport interface IMediaProps {\n    /** Элементы, которые рендерятся, когда ширина окна браузера попадает в диапазон minWidth и/или maxWidth. */\n    children: React.ReactElement | null;\n    /** Минимальная ширина экран, при которой будут отрендерены children. */\n    minWidth?: EScreenWidth;\n    /** Максимальная ширина экран, при которой будут отрендерены children. */\n    maxWidth?: EScreenWidth;\n    /** Элементы, которые рендерятся, когда ширина окна браузера не попадает в диапазон minWidth и/или maxWidth. */\n    fallback: React.ReactElement | null;\n}\n\n/** Компонент, который рендерит элементы в зависимости от ширины окна браузера. */\nexport const MediaWidth: React.FC<IMediaProps> = ({ children, fallback, maxWidth, minWidth }) => {\n    if (minWidth && maxWidth) {\n        return (\n            <MediaBetweenWidth minWidth={minWidth} maxWidth={maxWidth} fallback={fallback}>\n                {children}\n            </MediaBetweenWidth>\n        );\n    } else if (minWidth) {\n        return (\n            <MediaMinWidth minWidth={minWidth} fallback={fallback}>\n                {children}\n            </MediaMinWidth>\n        );\n    } else if (maxWidth) {\n        return (\n            <MediaMaxWidth maxWidth={maxWidth} fallback={fallback}>\n                {children}\n            </MediaMaxWidth>\n        );\n    }\n\n    return fallback;\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,aAAoC,CAAC,EAAE,UAAU,UAAU,UAAU,eAAe;AAC7F,MAAI,YAAY,UAAU;AACtB,WACI,oBAAC,mBAAA,EAAkB,UAAoB,UAAoB,UACtD,UACL;AAAA,EAER,WAAW,UAAU;AACjB,WACI,oBAAC,eAAA,EAAc,UAAoB,UAC9B,SAAA,CACL;AAAA,EAER,WAAW,UAAU;AACjB,WACI,oBAAC,eAAA,EAAc,UAAoB,UAC9B,SAAA,CACL;AAAA,EAER;AAEA,SAAO;AACX;"}

package/components/MediaWidth/useMatchMedia.js

@@ -1,15 +1,26 @@
 import { useState, useEffect } from "react";
-function useMatchMedia(query, initialMatch) {
-  const [matches, setMatches] = useState(initialMatch);
+function useMatchMedia(query) {
+  const [state, setState] = useState(() => ({ query, matches: window.matchMedia(query).matches }));
+  if (state.query !== query) {
+    setState({ query, matches: window.matchMedia(query).matches });
+  }
   useEffect(() => {
     const mediaQueryList = window.matchMedia(query);
-    const handleChangeMatches = (event) => setMatches(event.matches);
-    mediaQueryList.addEventListener("change", handleChangeMatches);
+    const handleChangeMatches = (event) => setState({ query, matches: event.matches });
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", handleChangeMatches);
+    } else {
+      mediaQueryList.addListener(handleChangeMatches);
+    }
     return () => {
-      mediaQueryList.removeEventListener("change", handleChangeMatches);
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener("change", handleChangeMatches);
+      } else {
+        mediaQueryList.removeListener(handleChangeMatches);
+      }
     };
   }, [query]);
-  return matches;
+  return state.matches;
 }
 export {
   useMatchMedia

package/components/MediaWidth/useMatchMedia.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMatchMedia.js","sources":["../../../src/components/MediaWidth/useMatchMedia.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Хук для императивного выполнения и отслеживания media queries\n * @param query Media query\n * @param initial Начальное значение\n * @returns Результат window.matchMedia(query)\n */\nexport function useMatchMedia(query: string, initialMatch: boolean): boolean {\n    const [matches, setMatches] = useState(initialMatch);\n\n    useEffect(() => {\n        const mediaQueryList = window.matchMedia(query);\n        const handleChangeMatches = (event: MediaQueryListEvent) => setMatches(event.matches);\n\n        mediaQueryList.addEventListener(\"change\", handleChangeMatches);\n\n        return () => {\n            mediaQueryList.removeEventListener(\"change\", handleChangeMatches);\n        };\n    }, [query]);\n\n    return matches;\n}\n"],"names":[],"mappings":";AAQO,SAAS,cAAc,OAAe,cAAgC;AACzE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AAEnD,YAAU,MAAM;AACZ,UAAM,iBAAiB,OAAO,WAAW,KAAK;AAC9C,UAAM,sBAAsB,CAAC,UAA+B,WAAW,MAAM,OAAO;AAEpF,mBAAe,iBAAiB,UAAU,mBAAmB;AAE7D,WAAO,MAAM;AACT,qBAAe,oBAAoB,UAAU,mBAAmB;AAAA,IACpE;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AACX;"}
+{"version":3,"file":"useMatchMedia.js","sources":["../../../src/components/MediaWidth/useMatchMedia.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Хук для императивного выполнения и отслеживания media queries\n * @param query Media query\n * @param initial Начальное значение\n * @returns Результат window.matchMedia(query)\n */\nexport function useMatchMedia(query: string): boolean {\n    const [state, setState] = useState(() => ({ query, matches: window.matchMedia(query).matches }));\n\n    if (state.query !== query) {\n        setState({ query, matches: window.matchMedia(query).matches });\n    }\n\n    useEffect(() => {\n        const mediaQueryList = window.matchMedia(query);\n\n        const handleChangeMatches = (event: MediaQueryListEvent) => setState({ query, matches: event.matches });\n\n        if (mediaQueryList.addEventListener) {\n            mediaQueryList.addEventListener(\"change\", handleChangeMatches);\n        } else {\n            mediaQueryList.addListener(handleChangeMatches);\n        }\n\n        return () => {\n            if (mediaQueryList.removeEventListener) {\n                mediaQueryList.removeEventListener(\"change\", handleChangeMatches);\n            } else {\n                mediaQueryList.removeListener(handleChangeMatches);\n            }\n        };\n    }, [query]);\n\n    return state.matches;\n}\n"],"names":[],"mappings":";AAQO,SAAS,cAAc,OAAwB;AAClD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,OAAO,EAAE,OAAO,SAAS,OAAO,WAAW,KAAK,EAAE,UAAU;AAE/F,MAAI,MAAM,UAAU,OAAO;AACvB,aAAS,EAAE,OAAO,SAAS,OAAO,WAAW,KAAK,EAAE,SAAS;AAAA,EACjE;AAEA,YAAU,MAAM;AACZ,UAAM,iBAAiB,OAAO,WAAW,KAAK;AAE9C,UAAM,sBAAsB,CAAC,UAA+B,SAAS,EAAE,OAAO,SAAS,MAAM,SAAS;AAEtG,QAAI,eAAe,kBAAkB;AACjC,qBAAe,iBAAiB,UAAU,mBAAmB;AAAA,IACjE,OAAO;AACH,qBAAe,YAAY,mBAAmB;AAAA,IAClD;AAEA,WAAO,MAAM;AACT,UAAI,eAAe,qBAAqB;AACpC,uBAAe,oBAAoB,UAAU,mBAAmB;AAAA,MACpE,OAAO;AACH,uBAAe,eAAe,mBAAmB;AAAA,MACrD;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,MAAM;AACjB;"}

package/components/MobileView/useMobileView.js

@@ -1,10 +1,7 @@
 import { useMatchMedia } from "../MediaWidth/useMatchMedia.js";
 import { EScreenWidth } from "../../helpers/breakpoints.js";
 const MOBILE_QUERY = `(max-width: ${EScreenWidth.SM_MAX})`;
-const useMobileView = () => {
-  const initialMatch = window.matchMedia(MOBILE_QUERY).matches;
-  return useMatchMedia(MOBILE_QUERY, initialMatch);
-};
+const useMobileView = () => useMatchMedia(MOBILE_QUERY);
 export {
   useMobileView
 };

package/components/MobileView/useMobileView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMobileView.js","sources":["../../../src/components/MobileView/useMobileView.tsx"],"sourcesContent":["import { useMatchMedia } from \"../MediaWidth/useMatchMedia\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\n\n/** Медиа-запрос для проверки мобильного экрана. */\nconst MOBILE_QUERY = `(max-width: ${EScreenWidth.SM_MAX})`;\n\n/**\n * Хук для проверки, является ли устройство мобильным (экран <= SM_MAX).\n * @returns true, если ширина экрана соответствует мобильному устройству\n */\nexport const useMobileView = () => {\n    const initialMatch = window.matchMedia(MOBILE_QUERY).matches;\n    return useMatchMedia(MOBILE_QUERY, initialMatch);\n};\n"],"names":[],"mappings":";;AAIA,MAAM,eAAe,eAAe,aAAa,MAAM;AAMhD,MAAM,gBAAgB,MAAM;AAC/B,QAAM,eAAe,OAAO,WAAW,YAAY,EAAE;AACrD,SAAO,cAAc,cAAc,YAAY;AACnD;"}
+{"version":3,"file":"useMobileView.js","sources":["../../../src/components/MobileView/useMobileView.tsx"],"sourcesContent":["import { useMatchMedia } from \"../MediaWidth/useMatchMedia\";\nimport { EScreenWidth } from \"../../helpers/breakpoints\";\n\n/** Медиа-запрос для проверки мобильного экрана. */\nconst MOBILE_QUERY = `(max-width: ${EScreenWidth.SM_MAX})`;\n\n/**\n * Хук для проверки, является ли устройство мобильным (экран <= SM_MAX).\n * @returns true, если ширина экрана соответствует мобильному устройству\n */\nexport const useMobileView = () => useMatchMedia(MOBILE_QUERY);\n"],"names":[],"mappings":";;AAIA,MAAM,eAAe,eAAe,aAAa,MAAM;AAMhD,MAAM,gBAAgB,MAAM,cAAc,YAAY;"}

package/components/ModalWindow/ModalWindow.js

@@ -7,21 +7,24 @@ import { ModalWindowViewManager } from "./components/ModalWindowViewManager.js";
 import { useToken } from "../ThemeProvider/useToken.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { createSizeToClassNameMap } from "../../utils/classNameMaps.js";
-import { s as styles } from "../../chunks/ModalWindow.module-udSmVaEe.js";
+import { s as styles } from "../../chunks/ModalWindow.module-BWKlnmsr.js";
 const modalNodeName = "ufs-modal-window";
 const animationExitTime = 300;
 const bodyClassNameModalOpen = ["modal-open", "no-hash-overflow-hidden"];
 const sizeToClassNameMap = createSizeToClassNameMap(styles);
-const getOrCreateMountNode = () => {
+const getOrCreateWrapperNode = () => {
   let wrapperNode = document.querySelector(`#${modalNodeName}-wrapper`);
   if (!wrapperNode) {
     wrapperNode = document.createElement("div");
     wrapperNode.setAttribute("id", `${modalNodeName}-wrapper`);
     document.body.appendChild(wrapperNode);
   }
+  return wrapperNode;
+};
+const getOrCreateMountNode = () => {
   const node = document.createElement("div");
   node.className = `${modalNodeName}-portal-node`;
-  wrapperNode.appendChild(node);
+  getOrCreateWrapperNode().appendChild(node);
   return node;
 };
 const ModalWindow = React.forwardRef((props, ref) => {
@@ -66,6 +69,9 @@ const ModalWindow = React.forwardRef((props, ref) => {
     }
   };
   useEffect(() => {
+    if (!mountNode.parentNode) {
+      getOrCreateWrapperNode().appendChild(mountNode);
+    }
     return () => {
       var _a;
       (_a = mountNode.parentNode) == null ? void 0 : _a.removeChild(mountNode);

package/components/ModalWindow/ModalWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalWindow.js","sources":["../../../src/components/ModalWindow/ModalWindow.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { Portal } from \"../Portal\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { ModalWindowViewManager } from \"./components/ModalWindowViewManager\";\nimport { useToken } from \"../ThemeProvider/useToken\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/ModalWindow.module.less\";\n\n/** Свойства компонента модального окна. */\nexport interface IModalWindowProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Открыто ли модальное окно. */\n    isOpen: boolean;\n    /** Содержимое модального окна. Обычно — `ModalWindowContent` с вложенными `ModalWindowHeader`, `ModalWindowBody`, `ModalWindowFooter`. */\n    children: React.ReactElement;\n    /** ClassName контейнера модального окна. */\n    containerClassName?: string;\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n    /** Callback после анимации закрытия модального окна. */\n    onExited?: () => void;\n    /** Кнопка закрыть. Обычно — `ModalWindowClose`. Рендерится внутри корневого dialog-элемента поверх контента. */\n    closeButton: React.ReactNode;\n    /** Размер модального окна. По умолчанию `EComponentSize.MD`. */\n    size?: EComponentSize;\n    /** Отступ сверху модального окна, px. По умолчанию `100`. */\n    topPosition?: number;\n}\n\n/** Имя класса для некоторых элементов связанных с компонентом. */\nconst modalNodeName = \"ufs-modal-window\";\n\n/** Время css-анимации скрытия модального окна. */\nconst animationExitTime = 300;\n\n/** Класс от Layout(сббола), который блюрит(blur) фоновый контент. */\nconst bodyClassNameModalOpen = [\"modal-open\", \"no-hash-overflow-hidden\"];\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Создаёт портальную ноду модалки и прикрепляет её к общему wrapper в body. */\nconst getOrCreateMountNode = (): HTMLDivElement => {\n    let wrapperNode = document.querySelector<HTMLDivElement>(`#${modalNodeName}-wrapper`);\n\n    if (!wrapperNode) {\n        wrapperNode = document.createElement(\"div\");\n        wrapperNode.setAttribute(\"id\", `${modalNodeName}-wrapper`);\n        document.body.appendChild(wrapperNode);\n    }\n\n    const node = document.createElement(\"div\");\n    node.className = `${modalNodeName}-portal-node`;\n    wrapperNode.appendChild(node);\n    return node;\n};\n\n/**\n * Модальное окно. Рендерится через Portal поверх контента страницы, добавляет\n * затемнённый backdrop, удерживает фокус внутри (FocusTrap) и блокирует скролл\n * `body` через классы `modal-open` + `no-hash-overflow-hidden`.\n */\nexport const ModalWindow = React.forwardRef<HTMLDivElement, IModalWindowProps>((props, ref) => {\n    const {\n        isOpen,\n        children,\n        containerClassName,\n        focusTrapProps,\n        onExited,\n        closeButton,\n        size = EComponentSize.MD,\n        className,\n        topPosition = 100,\n        ...rest\n    } = props;\n\n    // topPosition нужен, чтобы команда могла переопределить значение.\n    const topPositionStyle = { \"--modal-window-top\": `${topPosition}px` } as React.CSSProperties;\n\n    // Контейнер портала. Создаётся и сразу же прикрепляется к wrapper в DOM при первом рендере —\n    // это нужно, чтобы FocusTrap при mount нашёл tabbable-узлы внутри модалки (если делать attach\n    // позже, в onEnter CSSTransition, FocusTrap активируется раньше и падает с\n    // \"must have at least one container with at least one tabbable node\").\n    // Сама модалка скрывается/показывается через CSSTransition (mountOnEnter / unmountOnExit).\n    const [mountNode] = useState<HTMLDivElement>(getOrCreateMountNode);\n\n    // Узел role=\"dialog\". Используется как fallbackFocus для FocusTrap: ловушка активируется\n    // синхронно при открытии, и если внутри ещё нет tabbable-узлов (контент грузится асинхронно,\n    // показан лоадер и т.п.), focus-trap без fallback падает с\n    // \"must have at least one container with at least one tabbable node\".\n    // fallbackFocus вызывается только пока ловушка активна, то есть пока dialog смонтирован,\n    // а его ref проставляется до componentDidMount FocusTrap (потомок монтируется раньше родителя),\n    // поэтому dialogRef.current на момент вызова всегда заполнен — non-null assertion безопасен.\n    const dialogRef = useRef<HTMLDivElement | null>(null);\n\n    const { scopeClassName } = useToken();\n\n    /** Удаление стилей body. */\n    const removeBodyClasses = () => {\n        const bodyClassList = document.body.classList;\n\n        if (bodyClassList.contains(bodyClassNameModalOpen[0])) {\n            bodyClassList.remove(...bodyClassNameModalOpen);\n        }\n    };\n\n    /** Вспомогательный обработчик при открытии модального окна (CSSTransition onEnter). */\n    const handleOpenModal = () => {\n        const bodyClassList = document.body.classList;\n        if (!bodyClassList.contains(bodyClassNameModalOpen[0])) {\n            bodyClassList.add(...bodyClassNameModalOpen);\n        }\n    };\n\n    /** Вспомогательный обработчик после анимации закрытия модального окна (CSSTransition onExited). */\n    const handleCloseModal = () => {\n        removeBodyClasses();\n        onExited?.();\n    };\n\n    /** Установка ref. */\n    const setRef = (instance: HTMLDivElement | null) => {\n        dialogRef.current = instance;\n\n        if (typeof ref === \"function\") {\n            ref(instance);\n        } else if (ref) {\n            ref.current = instance;\n        }\n    };\n\n    useEffect(() => {\n        return () => {\n            mountNode.parentNode?.removeChild(mountNode);\n            removeBodyClasses();\n        };\n    }, [mountNode]);\n\n    const classNameContainer = clsx(scopeClassName, styles.modalWindowContainer, containerClassName);\n\n    const classNameModalWindow = clsx(styles.modalWindow, sizeToClassNameMap[size], className);\n\n    return (\n        <>\n            <Portal container={mountNode}>\n                <CSSTransition\n                    in={isOpen}\n                    timeout={animationExitTime}\n                    classNames=\"global-modalWindowTransition\"\n                    appear // Нужен для срабатывания onEnter.\n                    enter\n                    exit\n                    onEnter={handleOpenModal}\n                    onExited={handleCloseModal}\n                    mountOnEnter\n                    unmountOnExit\n                >\n                    <FocusTrapExtended\n                        active={isOpen}\n                        {...focusTrapProps}\n                        focusTrapOptions={{\n                            preventScroll: true,\n                            fallbackFocus: () => dialogRef.current!,\n                            ...focusTrapProps?.focusTrapOptions,\n                        }}\n                    >\n                        <div className={classNameContainer} style={topPositionStyle}>\n                            <div className={styles.modalWindowBackdrop} />\n                            <div\n                                role=\"dialog\"\n                                aria-modal=\"true\"\n                                // tabIndex нужен, чтобы dialog мог принять фокус как fallbackFocus\n                                // FocusTrap, когда внутри ещё нет tabbable-узлов.\n                                tabIndex={-1}\n                                {...rest}\n                                ref={setRef}\n                                className={classNameModalWindow}\n                            >\n                                <div className={styles.modalWindowContentWrapper}>\n                                    {children}\n                                    {closeButton}\n                                </div>\n                            </div>\n                        </div>\n                    </FocusTrapExtended>\n                </CSSTransition>\n            </Portal>\n            <ModalWindowViewManager />\n        </>\n    );\n});\n\nModalWindow.displayName = \"ModalWindow\";\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModalWindow.js","sources":["../../../src/components/ModalWindow/ModalWindow.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { Portal } from \"../Portal\";\nimport { FocusTrapExtended, IFocusTrapExtendedProps } from \"../FocusTrapExtended\";\nimport { ModalWindowViewManager } from \"./components/ModalWindowViewManager\";\nimport { useToken } from \"../ThemeProvider/useToken\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { createSizeToClassNameMap } from \"@sberbusiness/triplex-next/utils/classNameMaps\";\nimport styles from \"./styles/ModalWindow.module.less\";\n\n/** Свойства компонента модального окна. */\nexport interface IModalWindowProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Открыто ли модальное окно. */\n    isOpen: boolean;\n    /** Содержимое модального окна. Обычно — `ModalWindowContent` с вложенными `ModalWindowHeader`, `ModalWindowBody`, `ModalWindowFooter`. */\n    children: React.ReactElement;\n    /** ClassName контейнера модального окна. */\n    containerClassName?: string;\n    /** Свойства компонента FocusTrapExtended. */\n    focusTrapProps?: IFocusTrapExtendedProps;\n    /** Callback после анимации закрытия модального окна. */\n    onExited?: () => void;\n    /** Кнопка закрыть. Обычно — `ModalWindowClose`. Рендерится внутри корневого dialog-элемента поверх контента. */\n    closeButton: React.ReactNode;\n    /** Размер модального окна. По умолчанию `EComponentSize.MD`. */\n    size?: EComponentSize;\n    /** Отступ сверху модального окна, px. По умолчанию `100`. */\n    topPosition?: number;\n}\n\n/** Имя класса для некоторых элементов связанных с компонентом. */\nconst modalNodeName = \"ufs-modal-window\";\n\n/** Время css-анимации скрытия модального окна. */\nconst animationExitTime = 300;\n\n/** Класс от Layout(сббола), который блюрит(blur) фоновый контент. */\nconst bodyClassNameModalOpen = [\"modal-open\", \"no-hash-overflow-hidden\"];\n\nconst sizeToClassNameMap = createSizeToClassNameMap(styles);\n\n/** Возвращает общий wrapper модалок в body, создавая его при первом обращении. */\nconst getOrCreateWrapperNode = (): HTMLDivElement => {\n    let wrapperNode = document.querySelector<HTMLDivElement>(`#${modalNodeName}-wrapper`);\n\n    if (!wrapperNode) {\n        wrapperNode = document.createElement(\"div\");\n        wrapperNode.setAttribute(\"id\", `${modalNodeName}-wrapper`);\n        document.body.appendChild(wrapperNode);\n    }\n\n    return wrapperNode;\n};\n\n/** Создаёт портальную ноду модалки и прикрепляет её к общему wrapper в body. */\nconst getOrCreateMountNode = (): HTMLDivElement => {\n    const node = document.createElement(\"div\");\n    node.className = `${modalNodeName}-portal-node`;\n    getOrCreateWrapperNode().appendChild(node);\n    return node;\n};\n\n/**\n * Модальное окно. Рендерится через Portal поверх контента страницы, добавляет\n * затемнённый backdrop, удерживает фокус внутри (FocusTrap) и блокирует скролл\n * `body` через классы `modal-open` + `no-hash-overflow-hidden`.\n */\nexport const ModalWindow = React.forwardRef<HTMLDivElement, IModalWindowProps>((props, ref) => {\n    const {\n        isOpen,\n        children,\n        containerClassName,\n        focusTrapProps,\n        onExited,\n        closeButton,\n        size = EComponentSize.MD,\n        className,\n        topPosition = 100,\n        ...rest\n    } = props;\n\n    // topPosition нужен, чтобы команда могла переопределить значение.\n    const topPositionStyle = { \"--modal-window-top\": `${topPosition}px` } as React.CSSProperties;\n\n    // Контейнер портала. Создаётся и сразу же прикрепляется к wrapper в DOM при первом рендере —\n    // это нужно, чтобы FocusTrap при mount нашёл tabbable-узлы внутри модалки (если делать attach\n    // позже, в onEnter CSSTransition, FocusTrap активируется раньше и падает с\n    // \"must have at least one container with at least one tabbable node\").\n    // Сама модалка скрывается/показывается через CSSTransition (mountOnEnter / unmountOnExit).\n    const [mountNode] = useState<HTMLDivElement>(getOrCreateMountNode);\n\n    // Узел role=\"dialog\". Используется как fallbackFocus для FocusTrap: ловушка активируется\n    // синхронно при открытии, и если внутри ещё нет tabbable-узлов (контент грузится асинхронно,\n    // показан лоадер и т.п.), focus-trap без fallback падает с\n    // \"must have at least one container with at least one tabbable node\".\n    // fallbackFocus вызывается только пока ловушка активна, то есть пока dialog смонтирован,\n    // а его ref проставляется до componentDidMount FocusTrap (потомок монтируется раньше родителя),\n    // поэтому dialogRef.current на момент вызова всегда заполнен — non-null assertion безопасен.\n    const dialogRef = useRef<HTMLDivElement | null>(null);\n\n    const { scopeClassName } = useToken();\n\n    /** Удаление стилей body. */\n    const removeBodyClasses = () => {\n        const bodyClassList = document.body.classList;\n\n        if (bodyClassList.contains(bodyClassNameModalOpen[0])) {\n            bodyClassList.remove(...bodyClassNameModalOpen);\n        }\n    };\n\n    /** Вспомогательный обработчик при открытии модального окна (CSSTransition onEnter). */\n    const handleOpenModal = () => {\n        const bodyClassList = document.body.classList;\n        if (!bodyClassList.contains(bodyClassNameModalOpen[0])) {\n            bodyClassList.add(...bodyClassNameModalOpen);\n        }\n    };\n\n    /** Вспомогательный обработчик после анимации закрытия модального окна (CSSTransition onExited). */\n    const handleCloseModal = () => {\n        removeBodyClasses();\n        onExited?.();\n    };\n\n    /** Установка ref. */\n    const setRef = (instance: HTMLDivElement | null) => {\n        dialogRef.current = instance;\n\n        if (typeof ref === \"function\") {\n            ref(instance);\n        } else if (ref) {\n            ref.current = instance;\n        }\n    };\n\n    useEffect(() => {\n        // В React 18 StrictMode (dev) компонент проходит цикл mount → unmount → mount.\n        // На искусственном unmount срабатывает cleanup ниже и открепляет mountNode, а\n        // инициализатор useState на повторном mount заново не вызывается (стейт сохраняется) —\n        // узел остаётся висеть вне DOM, и Portal рендерит модалку в невидимый контейнер.\n        // Поэтому при (повторном) mount возвращаем узел в wrapper, если он оказался откреплён.\n        if (!mountNode.parentNode) {\n            getOrCreateWrapperNode().appendChild(mountNode);\n        }\n\n        return () => {\n            mountNode.parentNode?.removeChild(mountNode);\n            removeBodyClasses();\n        };\n    }, [mountNode]);\n\n    const classNameContainer = clsx(scopeClassName, styles.modalWindowContainer, containerClassName);\n\n    const classNameModalWindow = clsx(styles.modalWindow, sizeToClassNameMap[size], className);\n\n    return (\n        <>\n            <Portal container={mountNode}>\n                <CSSTransition\n                    in={isOpen}\n                    timeout={animationExitTime}\n                    classNames=\"global-modalWindowTransition\"\n                    appear // Нужен для срабатывания onEnter.\n                    enter\n                    exit\n                    onEnter={handleOpenModal}\n                    onExited={handleCloseModal}\n                    mountOnEnter\n                    unmountOnExit\n                >\n                    <FocusTrapExtended\n                        active={isOpen}\n                        {...focusTrapProps}\n                        focusTrapOptions={{\n                            preventScroll: true,\n                            fallbackFocus: () => dialogRef.current!,\n                            ...focusTrapProps?.focusTrapOptions,\n                        }}\n                    >\n                        <div className={classNameContainer} style={topPositionStyle}>\n                            <div className={styles.modalWindowBackdrop} />\n                            <div\n                                role=\"dialog\"\n                                aria-modal=\"true\"\n                                // tabIndex нужен, чтобы dialog мог принять фокус как fallbackFocus\n                                // FocusTrap, когда внутри ещё нет tabbable-узлов.\n                                tabIndex={-1}\n                                {...rest}\n                                ref={setRef}\n                                className={classNameModalWindow}\n                            >\n                                <div className={styles.modalWindowContentWrapper}>\n                                    {children}\n                                    {closeButton}\n                                </div>\n                            </div>\n                        </div>\n                    </FocusTrapExtended>\n                </CSSTransition>\n            </Portal>\n            <ModalWindowViewManager />\n        </>\n    );\n});\n\nModalWindow.displayName = \"ModalWindow\";\n"],"names":[],"mappings":";;;;;;;;;;AAgCA,MAAM,gBAAgB;AAGtB,MAAM,oBAAoB;AAG1B,MAAM,yBAAyB,CAAC,cAAc,yBAAyB;AAEvE,MAAM,qBAAqB,yBAAyB,MAAM;AAG1D,MAAM,yBAAyB,MAAsB;AACjD,MAAI,cAAc,SAAS,cAA8B,IAAI,aAAa,UAAU;AAEpF,MAAI,CAAC,aAAa;AACd,kBAAc,SAAS,cAAc,KAAK;AAC1C,gBAAY,aAAa,MAAM,GAAG,aAAa,UAAU;AACzD,aAAS,KAAK,YAAY,WAAW;AAAA,EACzC;AAEA,SAAO;AACX;AAGA,MAAM,uBAAuB,MAAsB;AAC/C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,OAAK,YAAY,GAAG,aAAa;AACjC,yBAAA,EAAyB,YAAY,IAAI;AACzC,SAAO;AACX;AAOO,MAAM,cAAc,MAAM,WAA8C,CAAC,OAAO,QAAQ;AAC3F,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,eAAe;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,GAAG;AAAA,EAAA,IACH;AAGJ,QAAM,mBAAmB,EAAE,sBAAsB,GAAG,WAAW,KAAA;AAO/D,QAAM,CAAC,SAAS,IAAI,SAAyB,oBAAoB;AASjE,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,EAAE,eAAA,IAAmB,SAAA;AAG3B,QAAM,oBAAoB,MAAM;AAC5B,UAAM,gBAAgB,SAAS,KAAK;AAEpC,QAAI,cAAc,SAAS,uBAAuB,CAAC,CAAC,GAAG;AACnD,oBAAc,OAAO,GAAG,sBAAsB;AAAA,IAClD;AAAA,EACJ;AAGA,QAAM,kBAAkB,MAAM;AAC1B,UAAM,gBAAgB,SAAS,KAAK;AACpC,QAAI,CAAC,cAAc,SAAS,uBAAuB,CAAC,CAAC,GAAG;AACpD,oBAAc,IAAI,GAAG,sBAAsB;AAAA,IAC/C;AAAA,EACJ;AAGA,QAAM,mBAAmB,MAAM;AAC3B,sBAAA;AACA;AAAA,EACJ;AAGA,QAAM,SAAS,CAAC,aAAoC;AAChD,cAAU,UAAU;AAEpB,QAAI,OAAO,QAAQ,YAAY;AAC3B,UAAI,QAAQ;AAAA,IAChB,WAAW,KAAK;AACZ,UAAI,UAAU;AAAA,IAClB;AAAA,EACJ;AAEA,YAAU,MAAM;AAMZ,QAAI,CAAC,UAAU,YAAY;AACvB,6BAAA,EAAyB,YAAY,SAAS;AAAA,IAClD;AAEA,WAAO,MAAM;;AACT,sBAAU,eAAV,mBAAsB,YAAY;AAClC,wBAAA;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,qBAAqB,KAAK,gBAAgB,OAAO,sBAAsB,kBAAkB;AAE/F,QAAM,uBAAuB,KAAK,OAAO,aAAa,mBAAmB,IAAI,GAAG,SAAS;AAEzF,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAO,WAAW,WACf,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,YAAW;AAAA,QACX,QAAM;AAAA,QACN,OAAK;AAAA,QACL,MAAI;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,cAAY;AAAA,QACZ,eAAa;AAAA,QAEb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,QAAQ;AAAA,YACP,GAAG;AAAA,YACJ,kBAAkB;AAAA,cACd,eAAe;AAAA,cACf,eAAe,MAAM,UAAU;AAAA,cAC/B,GAAG,iDAAgB;AAAA,YAAA;AAAA,YAGvB,UAAA,qBAAC,OAAA,EAAI,WAAW,oBAAoB,OAAO,kBACvC,UAAA;AAAA,cAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,oBAAA,CAAqB;AAAA,cAC5C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAK;AAAA,kBACL,cAAW;AAAA,kBAGX,UAAU;AAAA,kBACT,GAAG;AAAA,kBACJ,KAAK;AAAA,kBACL,WAAW;AAAA,kBAEX,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,2BAClB,UAAA;AAAA,oBAAA;AAAA,oBACA;AAAA,kBAAA,EAAA,CACL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ,EAAA,CACJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA,GAER;AAAA,wBACC,wBAAA,CAAA,CAAuB;AAAA,EAAA,GAC5B;AAER,CAAC;AAED,YAAY,cAAc;"}

package/components/ModalWindow/components/ModalWindowBody.js

@@ -3,7 +3,7 @@ import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import { Island } from "../../Island/Island.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { EIslandType } from "../../Island/enums.js";
-const modalWindowBody = "modalWindowBody__93e47d0c";
+const modalWindowBody = "modalWindowBody__c3b668c0";
 const styles = {
   modalWindowBody
 };

package/components/ModalWindow/components/ModalWindowClose.js

@@ -6,7 +6,7 @@ import { EButtonTheme } from "../../Button/enums.js";
 import { TriggerClickOnKeyDownEvent } from "../../Triggers/TriggerClickOnKeyDownEvent.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
-const modalWindowClose = "modalWindowClose__1f754402";
+const modalWindowClose = "modalWindowClose__d18787bf";
 const styles = {
   modalWindowClose
 };

package/components/ModalWindow/components/ModalWindowContent.js

@@ -2,10 +2,10 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
 import React from "react";
 import { LoaderScreen } from "../../LoaderScreen/LoaderScreen.js";
-import { s as styles } from "../../../chunks/ModalWindow.module-udSmVaEe.js";
+import { s as styles } from "../../../chunks/ModalWindow.module-BWKlnmsr.js";
 import { Page } from "../../Page/Page.js";
 const ModalWindowContent = React.forwardRef(
-  ({ isLoading, className, loadingTitle, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
+  ({ isLoading, className, loaderScreenProps, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
@@ -13,7 +13,14 @@ const ModalWindowContent = React.forwardRef(
       ...rest,
       children: [
         /* @__PURE__ */ jsx(Page, { className: styles.modalWindowContentPage, children }),
-        isLoading && /* @__PURE__ */ jsx(LoaderScreen, { className: styles.modalWindowLoaderScreen, type: "middle", children: loadingTitle })
+        isLoading && /* @__PURE__ */ jsx(
+          LoaderScreen,
+          {
+            ...loaderScreenProps,
+            className: clsx(styles.modalWindowLoaderScreen, loaderScreenProps == null ? void 0 : loaderScreenProps.className),
+            type: "middle"
+          }
+        )
       ]
     }
   )

package/components/ModalWindow/components/ModalWindowContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalWindowContent.js","sources":["../../../../src/components/ModalWindow/components/ModalWindowContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { LoaderScreen } from \"../../LoaderScreen/LoaderScreen\";\nimport styles from \"../styles/ModalWindow.module.less\";\nimport { Page } from \"../../Page/Page\";\n\n/** Свойства компонента ModalWindowContent. */\nexport interface IModalWindowContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Содержимое — `ModalWindowHeader`, `ModalWindowBody`, `ModalWindowFooter`. */\n    children?: React.ReactNode;\n    /** Если `true`, поверх контента показывается `LoaderScreen`. */\n    isLoading?: boolean;\n    /** Текст под спиннером в режиме загрузки. */\n    loadingTitle?: React.ReactNode;\n}\n\n/**\n * Контент модального окна. Оборачивает дочерние секции в `Page` и при\n * `isLoading` показывает `LoaderScreen` поверх контента.\n */\nexport const ModalWindowContent = React.forwardRef<HTMLDivElement, IModalWindowContentProps>(\n    ({ isLoading, className, loadingTitle, children, ...rest }, ref) => (\n        <div\n            ref={ref}\n            className={clsx(styles.modalWindowContent, className, { [styles.isLoading]: isLoading })}\n            {...rest}\n        >\n            <Page className={styles.modalWindowContentPage}>{children}</Page>\n\n            {isLoading && (\n                <LoaderScreen className={styles.modalWindowLoaderScreen} type=\"middle\">\n                    {loadingTitle}\n                </LoaderScreen>\n            )}\n        </div>\n    ),\n);\n\nModalWindowContent.displayName = \"ModalWindowContent\";\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,qBAAqB,MAAM;AAAA,EACpC,CAAC,EAAE,WAAW,WAAW,cAAc,UAAU,GAAG,KAAA,GAAQ,QACxD;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW,KAAK,OAAO,oBAAoB,WAAW,EAAE,CAAC,OAAO,SAAS,GAAG,WAAW;AAAA,MACtF,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,wBAAyB,UAAS;AAAA,QAEzD,iCACI,cAAA,EAAa,WAAW,OAAO,yBAAyB,MAAK,UACzD,UAAA,aAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEA,mBAAmB,cAAc;"}
+{"version":3,"file":"ModalWindowContent.js","sources":["../../../../src/components/ModalWindow/components/ModalWindowContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { LoaderScreen, ILoaderScreenMiddleProps } from \"../../LoaderScreen/LoaderScreen\";\nimport styles from \"../styles/ModalWindow.module.less\";\nimport { Page } from \"../../Page/Page\";\n\n/** Свойства компонента ModalWindowContent. */\nexport interface IModalWindowContentProps extends React.HTMLAttributes<HTMLDivElement> {\n    /** Содержимое — `ModalWindowHeader`, `ModalWindowBody`, `ModalWindowFooter`. */\n    children?: React.ReactNode;\n    /** Если `true`, поверх контента показывается `LoaderScreen`. */\n    isLoading?: boolean;\n    /** Свойства компонента LoaderScreen. */\n    loaderScreenProps?: ILoaderScreenMiddleProps;\n}\n\n/**\n * Контент модального окна. Оборачивает дочерние секции в `Page` и при\n * `isLoading` показывает `LoaderScreen` поверх контента.\n */\nexport const ModalWindowContent = React.forwardRef<HTMLDivElement, IModalWindowContentProps>(\n    ({ isLoading, className, loaderScreenProps, children, ...rest }, ref) => (\n        <div\n            ref={ref}\n            className={clsx(styles.modalWindowContent, className, { [styles.isLoading]: isLoading })}\n            {...rest}\n        >\n            <Page className={styles.modalWindowContentPage}>{children}</Page>\n\n            {isLoading && (\n                <LoaderScreen\n                    {...loaderScreenProps}\n                    className={clsx(styles.modalWindowLoaderScreen, loaderScreenProps?.className)}\n                    type=\"middle\"\n                />\n            )}\n        </div>\n    ),\n);\n\nModalWindowContent.displayName = \"ModalWindowContent\";\n"],"names":[],"mappings":";;;;;;AAoBO,MAAM,qBAAqB,MAAM;AAAA,EACpC,CAAC,EAAE,WAAW,WAAW,mBAAmB,UAAU,GAAG,KAAA,GAAQ,QAC7D;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW,KAAK,OAAO,oBAAoB,WAAW,EAAE,CAAC,OAAO,SAAS,GAAG,WAAW;AAAA,MACtF,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,WAAW,OAAO,wBAAyB,UAAS;AAAA,QAEzD,aACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACI,GAAG;AAAA,YACJ,WAAW,KAAK,OAAO,yBAAyB,uDAAmB,SAAS;AAAA,YAC5E,MAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACT;AAAA,IAAA;AAAA,EAAA;AAIhB;AAEA,mBAAmB,cAAc;"}

package/components/ModalWindow/components/ModalWindowHeader.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { HeaderPage } from "../../Page/components/HeaderPage.js";
 import { EHeaderPageType } from "../../Page/components/enums.js";
 import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
-const modalWindowHeader = "modalWindowHeader__ad01162d";
+const modalWindowHeader = "modalWindowHeader__b7c9f0a6";
 const styles = {
   modalWindowHeader
 };

package/components/ModalWindow/components/ModalWindowViewManager.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useState, useRef, useLayoutEffect } from "react";
 import { g as useResizeDetector, i as isEqual, p as pick } from "../../../chunks/vendor-BtZO8a0z.js";
 import { Portal } from "../../Portal/Portal.js";
-import { s as styles } from "../../../chunks/ModalWindow.module-udSmVaEe.js";
+import { s as styles } from "../../../chunks/ModalWindow.module-BWKlnmsr.js";
 const modalWindowViewManagerNodeId = "modalWindowViewManagerNodeId";
 const getOrCreateModalWindowViewManagerNode = () => {
   let node = document.querySelector(`#${modalWindowViewManagerNodeId}`);

package/components/MonthYearField/MonthYearField.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React, { useState, useEffect } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { DatePickerExtended } from "../DatePickerExtended/DatePickerExtended.js";
 import { dateFormatYYYYMMDD, globalLimitRange } from "../../consts/DateConst.js";
 import { MonthYearPickerUtils } from "./utils.js";
@@ -22,6 +22,7 @@ const MonthYearField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
   const [pickerValues, setPickerValues] = useState(MonthYearPickerUtils.getPickerValues(value, format, limitRange));
+  const dropdownTargetRef = useRef(null);
   useEffect(() => {
     const newPickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);
     if (newPickerValues.inputString !== pickerValues.inputString) {
@@ -43,7 +44,8 @@ const MonthYearField = React.forwardRef((props, ref) => {
           readOnly: true,
           ...inputProps
         },
-        ...restTargetProps
+        ...restTargetProps,
+        ref: dropdownTargetRef
       }
     ) });
   };
@@ -56,6 +58,7 @@ const MonthYearField = React.forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     DatePickerExtended,
     {
+      dropdownTargetRef,
       renderTarget,
       renderDropdownHeaderTarget,
       pickedDate: pickerValues.calendarDate,

package/components/MonthYearField/MonthYearField.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthYearField.js","sources":["../../../src/components/MonthYearField/MonthYearField.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport moment from \"moment\";\nimport { IMonthYearFieldProps } from \"./types\";\nimport { DatePickerExtended } from \"../DatePickerExtended/DatePickerExtended\";\nimport { dateFormatYYYYMMDD, globalLimitRange } from \"../../consts/DateConst\";\nimport { MonthYearPickerUtils } from \"./utils\";\nimport { DropdownMobileInput } from \"../Dropdown/mobile/DropdownMobileInput\";\nimport { ECalendarPickType } from \"../Calendar/enums\";\nimport { MonthYearFieldContext } from \"./MonthYearFieldContext\";\nimport { MonthYearFieldTarget } from \"./MonthYearFieldTarget\";\n\n/** Поле для выбора месяца. */\nexport const MonthYearField = React.forwardRef<HTMLDivElement, IMonthYearFieldProps>((props, ref) => {\n    const {\n        size,\n        status,\n        value,\n        label,\n        placeholder,\n        format = dateFormatYYYYMMDD,\n        limitRange = globalLimitRange,\n        onChange,\n        onClear,\n        targetProps,\n        ...restProps\n    } = props;\n    const [pickerValues, setPickerValues] = useState(MonthYearPickerUtils.getPickerValues(value, format, limitRange));\n\n    useEffect(() => {\n        const newPickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);\n\n        if (newPickerValues.inputString !== pickerValues.inputString) {\n            setPickerValues(newPickerValues);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value, format, limitRange]);\n\n    const renderTarget = () => {\n        const { inputProps, ...restTargetProps } = targetProps || {};\n\n        return (\n            <MonthYearFieldContext.Provider value={{ onChange }}>\n                <MonthYearFieldTarget\n                    size={size}\n                    status={status}\n                    label={label}\n                    onClear={onClear}\n                    inputProps={{\n                        value: pickerValues.inputString,\n                        placeholder: placeholder,\n                        readOnly: true,\n                        ...inputProps,\n                    }}\n                    {...restTargetProps}\n                />\n            </MonthYearFieldContext.Provider>\n        );\n    };\n\n    const renderDropdownHeaderTarget = () => {\n        return <DropdownMobileInput value={pickerValues.inputString} placeholder={placeholder} readOnly />;\n    };\n\n    const handleDateChange = (date: moment.Moment) => {\n        onChange(date.format(format));\n    };\n\n    return (\n        <DatePickerExtended\n            renderTarget={renderTarget}\n            renderDropdownHeaderTarget={renderDropdownHeaderTarget}\n            pickedDate={pickerValues.calendarDate}\n            pickType={ECalendarPickType.MONTH_YEAR}\n            format={format}\n            limitRange={limitRange}\n            onDateChange={handleDateChange}\n            {...restProps}\n            ref={ref}\n        />\n    );\n});\n\nMonthYearField.displayName = \"MonthYearField\";\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,iBAAiB,MAAM,WAAiD,CAAC,OAAO,QAAQ;AACjG,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,qBAAqB,gBAAgB,OAAO,QAAQ,UAAU,CAAC;AAEhH,YAAU,MAAM;AACZ,UAAM,kBAAkB,qBAAqB,gBAAgB,OAAO,QAAQ,UAAU;AAEtF,QAAI,gBAAgB,gBAAgB,aAAa,aAAa;AAC1D,sBAAgB,eAAe;AAAA,IACnC;AAAA,EAEJ,GAAG,CAAC,OAAO,QAAQ,UAAU,CAAC;AAE9B,QAAM,eAAe,MAAM;AACvB,UAAM,EAAE,YAAY,GAAG,gBAAA,IAAoB,eAAe,CAAA;AAE1D,+BACK,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,YACrC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,UACR,OAAO,aAAa;AAAA,UACpB;AAAA,UACA,UAAU;AAAA,UACV,GAAG;AAAA,QAAA;AAAA,QAEN,GAAG;AAAA,MAAA;AAAA,IAAA,GAEZ;AAAA,EAER;AAEA,QAAM,6BAA6B,MAAM;AACrC,+BAAQ,qBAAA,EAAoB,OAAO,aAAa,aAAa,aAA0B,UAAQ,MAAC;AAAA,EACpG;AAEA,QAAM,mBAAmB,CAAC,SAAwB;AAC9C,aAAS,KAAK,OAAO,MAAM,CAAC;AAAA,EAChC;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,YAAY,aAAa;AAAA,MACzB,UAAU,kBAAkB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACb,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAED,eAAe,cAAc;"}
+{"version":3,"file":"MonthYearField.js","sources":["../../../src/components/MonthYearField/MonthYearField.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport moment from \"moment\";\nimport { IMonthYearFieldProps } from \"./types\";\nimport { DatePickerExtended } from \"../DatePickerExtended/DatePickerExtended\";\nimport { dateFormatYYYYMMDD, globalLimitRange } from \"../../consts/DateConst\";\nimport { MonthYearPickerUtils } from \"./utils\";\nimport { DropdownMobileInput } from \"../Dropdown/mobile/DropdownMobileInput\";\nimport { ECalendarPickType } from \"../Calendar/enums\";\nimport { MonthYearFieldContext } from \"./MonthYearFieldContext\";\nimport { MonthYearFieldTarget } from \"./MonthYearFieldTarget\";\n\n/** Поле для выбора месяца. */\nexport const MonthYearField = React.forwardRef<HTMLDivElement, IMonthYearFieldProps>((props, ref) => {\n    const {\n        size,\n        status,\n        value,\n        label,\n        placeholder,\n        format = dateFormatYYYYMMDD,\n        limitRange = globalLimitRange,\n        onChange,\n        onClear,\n        targetProps,\n        ...restProps\n    } = props;\n    const [pickerValues, setPickerValues] = useState(MonthYearPickerUtils.getPickerValues(value, format, limitRange));\n    const dropdownTargetRef = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        const newPickerValues = MonthYearPickerUtils.getPickerValues(value, format, limitRange);\n\n        if (newPickerValues.inputString !== pickerValues.inputString) {\n            setPickerValues(newPickerValues);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value, format, limitRange]);\n\n    const renderTarget = () => {\n        const { inputProps, ...restTargetProps } = targetProps || {};\n\n        return (\n            <MonthYearFieldContext.Provider value={{ onChange }}>\n                <MonthYearFieldTarget\n                    size={size}\n                    status={status}\n                    label={label}\n                    onClear={onClear}\n                    inputProps={{\n                        value: pickerValues.inputString,\n                        placeholder: placeholder,\n                        readOnly: true,\n                        ...inputProps,\n                    }}\n                    {...restTargetProps}\n                    ref={dropdownTargetRef}\n                />\n            </MonthYearFieldContext.Provider>\n        );\n    };\n\n    const renderDropdownHeaderTarget = () => {\n        return <DropdownMobileInput value={pickerValues.inputString} placeholder={placeholder} readOnly />;\n    };\n\n    const handleDateChange = (date: moment.Moment) => {\n        onChange(date.format(format));\n    };\n\n    return (\n        <DatePickerExtended\n            dropdownTargetRef={dropdownTargetRef}\n            renderTarget={renderTarget}\n            renderDropdownHeaderTarget={renderDropdownHeaderTarget}\n            pickedDate={pickerValues.calendarDate}\n            pickType={ECalendarPickType.MONTH_YEAR}\n            format={format}\n            limitRange={limitRange}\n            onDateChange={handleDateChange}\n            {...restProps}\n            ref={ref}\n        />\n    );\n});\n\nMonthYearField.displayName = \"MonthYearField\";\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,iBAAiB,MAAM,WAAiD,CAAC,OAAO,QAAQ;AACjG,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACH;AACJ,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,qBAAqB,gBAAgB,OAAO,QAAQ,UAAU,CAAC;AAChH,QAAM,oBAAoB,OAA8B,IAAI;AAE5D,YAAU,MAAM;AACZ,UAAM,kBAAkB,qBAAqB,gBAAgB,OAAO,QAAQ,UAAU;AAEtF,QAAI,gBAAgB,gBAAgB,aAAa,aAAa;AAC1D,sBAAgB,eAAe;AAAA,IACnC;AAAA,EAEJ,GAAG,CAAC,OAAO,QAAQ,UAAU,CAAC;AAE9B,QAAM,eAAe,MAAM;AACvB,UAAM,EAAE,YAAY,GAAG,gBAAA,IAAoB,eAAe,CAAA;AAE1D,+BACK,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,YACrC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,UACR,OAAO,aAAa;AAAA,UACpB;AAAA,UACA,UAAU;AAAA,UACV,GAAG;AAAA,QAAA;AAAA,QAEN,GAAG;AAAA,QACJ,KAAK;AAAA,MAAA;AAAA,IAAA,GAEb;AAAA,EAER;AAEA,QAAM,6BAA6B,MAAM;AACrC,+BAAQ,qBAAA,EAAoB,OAAO,aAAa,aAAa,aAA0B,UAAQ,MAAC;AAAA,EACpG;AAEA,QAAM,mBAAmB,CAAC,SAAwB;AAC9C,aAAS,KAAK,OAAO,MAAM,CAAC;AAAA,EAChC;AAEA,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,aAAa;AAAA,MACzB,UAAU,kBAAkB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACb,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAED,eAAe,cAAc;"}