@sberbusiness/triplex-next 1.36.0 → 1.37.0

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,7 +7,7 @@ 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-CQ11hlXQ.js";
+import { s as styles } from "../../chunks/ModalWindow.module-CTlJPVK1.js";
 const modalNodeName = "ufs-modal-window";
 const animationExitTime = 300;
 const bodyClassNameModalOpen = ["modal-open", "no-hash-overflow-hidden"];

package/components/ModalWindow/components/ModalWindowBody.js

@@ -3,7 +3,7 @@ import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
 import { Island } from "../../Island/Island.js";
 import { EComponentSize } from "../../../enums/EComponentSize.js";
 import { EIslandType } from "../../Island/enums.js";
-const modalWindowBody = "modalWindowBody__b75b3e73";
+const modalWindowBody = "modalWindowBody__e1aff4b3";
 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__4618d103";
+const modalWindowClose = "modalWindowClose__74ea01a3";
 const styles = {
   modalWindowClose
 };

package/components/ModalWindow/components/ModalWindowContent.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
 import React__default from "react";
 import { LoaderScreen } from "../../LoaderScreen/LoaderScreen.js";
-import { s as styles } from "../../../chunks/ModalWindow.module-CQ11hlXQ.js";
+import { s as styles } from "../../../chunks/ModalWindow.module-CTlJPVK1.js";
 import { Page } from "../../Page/Page.js";
 const ModalWindowContent = React__default.forwardRef(
   ({ isLoading, className, loaderScreenProps, children, ...rest }, ref) => /* @__PURE__ */ jsxs(

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-Bco_z_Yi.js";
-const modalWindowHeader = "modalWindowHeader__cc03a5a9";
+const modalWindowHeader = "modalWindowHeader__68cb3c18";
 const styles = {
   modalWindowHeader
 };

package/components/ModalWindow/components/ModalWindowViewManager.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { useState, useRef, useLayoutEffect } from "react";
 import { g as useResizeDetector, i as isEqual, p as pick } from "../../../chunks/vendor-Bco_z_Yi.js";
 import { Portal } from "../../Portal/Portal.js";
-import { s as styles } from "../../../chunks/ModalWindow.module-CQ11hlXQ.js";
+import { s as styles } from "../../../chunks/ModalWindow.module-CTlJPVK1.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__default, { useState, useEffect } from "react";
+import React__default, { 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__default.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__default.forwardRef((props, ref) => {
           readOnly: true,
           ...inputProps
         },
-        ...restTargetProps
+        ...restTargetProps,
+        ref: dropdownTargetRef
       }
     ) });
   };
@@ -56,6 +58,7 @@ const MonthYearField = React__default.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":["React"],"mappings":";;;;;;;;;AAYO,MAAM,iBAAiBA,eAAM,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":["React"],"mappings":";;;;;;;;;AAYO,MAAM,iBAAiBA,eAAM,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;"}

package/components/MonthYearField/MonthYearFieldTarget.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext } from "react";
+import React__default, { useContext } from "react";
 import { CalendarStrokeSrvIcon24, CalendarStrokeSrvIcon20, CalendarStrokeSrvIcon16 } from "@sberbusiness/icons-next";
 import { DatePickerExtendedContext } from "../DatePickerExtended/DatePickerExtendedContext.js";
 import { TextField } from "../TextField/TextField.js";
 import { FormFieldClear } from "../FormField/components/FormFieldClear.js";
 import { ButtonIcon } from "../Button/ButtonIcon.js";
+import { useMobileView } from "../MobileView/useMobileView.js";
 import { isKey } from "../../utils/keyboard.js";
 import { EComponentSize } from "../../enums/EComponentSize.js";
 import { EFormFieldStatus } from "../FormField/enums.js";
@@ -13,62 +14,65 @@ const sizeToCalendarIconMap = {
   [EComponentSize.MD]: /* @__PURE__ */ jsx(CalendarStrokeSrvIcon20, { paletteIndex: 5 }),
   [EComponentSize.LG]: /* @__PURE__ */ jsx(CalendarStrokeSrvIcon24, { paletteIndex: 5 })
 };
-const MonthYearFieldTarget = ({
-  size = EComponentSize.MD,
-  postfix,
-  onClear,
-  inputProps,
-  ...restProps
-}) => {
-  const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);
-  const { status } = restProps;
-  const { onKeyDown: onInputKeyDown, onClick: onInputClick, ...restInputProps } = inputProps;
-  const disabled = status === EFormFieldStatus.DISABLED;
-  const handleInputClick = (event) => {
-    setDropdownOpen(!dropdownOpen);
-    onInputClick == null ? void 0 : onInputClick(event);
-  };
-  const handleInputKeyDown = (event) => {
-    if (isKey(event.code, "ENTER")) {
-      setDropdownOpen(!dropdownOpen);
-    } else if (isKey(event.code, "SPACE")) {
-      event.preventDefault();
-      setDropdownOpen(!dropdownOpen);
-    }
-    onInputKeyDown == null ? void 0 : onInputKeyDown(event);
-  };
-  const handleButtonClick = () => setDropdownOpen(!dropdownOpen);
-  const renderPostfixContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
-    onClear && /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
-    /* @__PURE__ */ jsx(
-      ButtonIcon,
+const MonthYearFieldTarget = React__default.forwardRef(
+  ({ size = EComponentSize.MD, postfix, onClear, inputProps, ...restProps }, ref) => {
+    const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);
+    const { status } = restProps;
+    const { onKeyDown: onInputKeyDown, onMouseDown: onInputMouseDown, ...restInputProps } = inputProps;
+    const adaptive = useMobileView();
+    const disabled = status === EFormFieldStatus.DISABLED;
+    const handleMouseDown = (event) => {
+      if (!dropdownOpen) {
+        if (adaptive) {
+          event.preventDefault();
+        }
+        setTimeout(() => setDropdownOpen(true));
+      }
+      onInputMouseDown == null ? void 0 : onInputMouseDown(event);
+    };
+    const handleInputKeyDown = (event) => {
+      if (isKey(event.code, "ENTER")) {
+        setDropdownOpen(!dropdownOpen);
+      } else if (isKey(event.code, "SPACE")) {
+        event.preventDefault();
+        setDropdownOpen(!dropdownOpen);
+      }
+      onInputKeyDown == null ? void 0 : onInputKeyDown(event);
+    };
+    const handleButtonClick = () => setDropdownOpen(!dropdownOpen);
+    const renderPostfixContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      onClear && /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
+      /* @__PURE__ */ jsx(
+        ButtonIcon,
+        {
+          role: "presentation",
+          tabIndex: -1,
+          active: dropdownOpen,
+          disabled,
+          onClick: handleButtonClick,
+          children: sizeToCalendarIconMap[size]
+        }
+      ),
+      postfix
+    ] });
+    return /* @__PURE__ */ jsx(
+      TextField,
       {
-        role: "presentation",
-        tabIndex: -1,
-        active: dropdownOpen,
-        disabled,
-        onClick: handleButtonClick,
-        children: sizeToCalendarIconMap[size]
+        size,
+        inputProps: {
+          ...restInputProps,
+          readOnly: true,
+          disabled,
+          onMouseDown: handleMouseDown,
+          onKeyDown: handleInputKeyDown
+        },
+        postfix: renderPostfixContent(),
+        ...restProps,
+        ref
       }
-    ),
-    postfix
-  ] });
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      size,
-      inputProps: {
-        readOnly: true,
-        disabled,
-        onClick: handleInputClick,
-        onKeyDown: handleInputKeyDown,
-        ...restInputProps
-      },
-      postfix: renderPostfixContent(),
-      ...restProps
-    }
-  );
-};
+    );
+  }
+);
 export {
   MonthYearFieldTarget
 };

package/components/MonthYearField/MonthYearFieldTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"MonthYearFieldTarget.js","sources":["../../../src/components/MonthYearField/MonthYearFieldTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { CalendarStrokeSrvIcon16, CalendarStrokeSrvIcon20, CalendarStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { DatePickerExtendedContext } from \"../DatePickerExtended/DatePickerExtendedContext\";\nimport { TextField } from \"../TextField/TextField\";\nimport { FormFieldClear } from \"../FormField/components/FormFieldClear\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { EComponentSize } from \"../../enums\";\nimport { EFormFieldStatus } from \"../FormField/enums\";\nimport { IMonthYearFieldTargetProps } from \"./types\";\n\nconst sizeToCalendarIconMap = {\n    [EComponentSize.SM]: <CalendarStrokeSrvIcon16 paletteIndex={5} />,\n    [EComponentSize.MD]: <CalendarStrokeSrvIcon20 paletteIndex={5} />,\n    [EComponentSize.LG]: <CalendarStrokeSrvIcon24 paletteIndex={5} />,\n};\n\nexport const MonthYearFieldTarget: React.FC<IMonthYearFieldTargetProps> = ({\n    size = EComponentSize.MD,\n    postfix,\n    onClear,\n    inputProps,\n    ...restProps\n}) => {\n    const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);\n    const { status } = restProps;\n    const { onKeyDown: onInputKeyDown, onClick: onInputClick, ...restInputProps } = inputProps;\n    const disabled = status === EFormFieldStatus.DISABLED;\n\n    const handleInputClick = (event: React.MouseEvent<HTMLInputElement>) => {\n        setDropdownOpen(!dropdownOpen);\n        onInputClick?.(event);\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (isKey(event.code, \"ENTER\")) {\n            setDropdownOpen(!dropdownOpen);\n        } else if (isKey(event.code, \"SPACE\")) {\n            event.preventDefault();\n            setDropdownOpen(!dropdownOpen);\n        }\n        onInputKeyDown?.(event);\n    };\n\n    const handleButtonClick = () => setDropdownOpen(!dropdownOpen);\n\n    const renderPostfixContent = () => (\n        <>\n            {onClear && <FormFieldClear onClick={onClear} />}\n            <ButtonIcon\n                role=\"presentation\"\n                tabIndex={-1}\n                active={dropdownOpen}\n                disabled={disabled}\n                onClick={handleButtonClick}\n            >\n                {sizeToCalendarIconMap[size]}\n            </ButtonIcon>\n            {postfix}\n        </>\n    );\n\n    return (\n        <TextField\n            size={size}\n            inputProps={{\n                readOnly: true,\n                disabled: disabled,\n                onClick: handleInputClick,\n                onKeyDown: handleInputKeyDown,\n                ...restInputProps,\n            }}\n            postfix={renderPostfixContent()}\n            {...restProps}\n        />\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,wBAAwB;AAAA,EAC1B,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,GAAG;AAAA,EAC/D,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,GAAG;AAAA,EAC/D,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,EAAA,CAAG;AACnE;AAEO,MAAM,uBAA6D,CAAC;AAAA,EACvE,OAAO,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAM;AACF,QAAM,EAAE,cAAc,oBAAoB,WAAW,yBAAyB;AAC9E,QAAM,EAAE,WAAW;AACnB,QAAM,EAAE,WAAW,gBAAgB,SAAS,cAAc,GAAG,mBAAmB;AAChF,QAAM,WAAW,WAAW,iBAAiB;AAE7C,QAAM,mBAAmB,CAAC,UAA8C;AACpE,oBAAgB,CAAC,YAAY;AAC7B,iDAAe;AAAA,EACnB;AAEA,QAAM,qBAAqB,CAAC,UAAiD;AACzE,QAAI,MAAM,MAAM,MAAM,OAAO,GAAG;AAC5B,sBAAgB,CAAC,YAAY;AAAA,IACjC,WAAW,MAAM,MAAM,MAAM,OAAO,GAAG;AACnC,YAAM,eAAA;AACN,sBAAgB,CAAC,YAAY;AAAA,IACjC;AACA,qDAAiB;AAAA,EACrB;AAEA,QAAM,oBAAoB,MAAM,gBAAgB,CAAC,YAAY;AAE7D,QAAM,uBAAuB,MACzB,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,WAAW,oBAAC,gBAAA,EAAe,SAAS,QAAA,CAAS;AAAA,IAC9C;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR;AAAA,QACA,SAAS;AAAA,QAER,gCAAsB,IAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE9B;AAAA,EAAA,GACL;AAGJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,YAAY;AAAA,QACR,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,WAAW;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEP,SAAS,qBAAA;AAAA,MACR,GAAG;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"MonthYearFieldTarget.js","sources":["../../../src/components/MonthYearField/MonthYearFieldTarget.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { CalendarStrokeSrvIcon16, CalendarStrokeSrvIcon20, CalendarStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { DatePickerExtendedContext } from \"../DatePickerExtended/DatePickerExtendedContext\";\nimport { TextField } from \"../TextField/TextField\";\nimport { FormFieldClear } from \"../FormField/components/FormFieldClear\";\nimport { ButtonIcon } from \"../Button/ButtonIcon\";\nimport { useMobileView } from \"../MobileView\";\nimport { isKey } from \"../../utils/keyboard\";\nimport { EComponentSize } from \"../../enums\";\nimport { EFormFieldStatus } from \"../FormField/enums\";\nimport { IMonthYearFieldTargetProps } from \"./types\";\n\nconst sizeToCalendarIconMap = {\n    [EComponentSize.SM]: <CalendarStrokeSrvIcon16 paletteIndex={5} />,\n    [EComponentSize.MD]: <CalendarStrokeSrvIcon20 paletteIndex={5} />,\n    [EComponentSize.LG]: <CalendarStrokeSrvIcon24 paletteIndex={5} />,\n};\n\nexport const MonthYearFieldTarget = React.forwardRef<HTMLDivElement, IMonthYearFieldTargetProps>(\n    ({ size = EComponentSize.MD, postfix, onClear, inputProps, ...restProps }, ref) => {\n        const { dropdownOpen, setDropdownOpen } = useContext(DatePickerExtendedContext);\n        const { status } = restProps;\n        const { onKeyDown: onInputKeyDown, onMouseDown: onInputMouseDown, ...restInputProps } = inputProps;\n        const adaptive = useMobileView();\n        const disabled = status === EFormFieldStatus.DISABLED;\n\n        const handleMouseDown: React.MouseEventHandler<HTMLInputElement> = (event) => {\n            if (!dropdownOpen) {\n                if (adaptive) {\n                    event.preventDefault();\n                }\n                // setTimeout для корректной работы label\n                setTimeout(() => setDropdownOpen(true));\n            }\n\n            onInputMouseDown?.(event);\n        };\n\n        const handleInputKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n            if (isKey(event.code, \"ENTER\")) {\n                setDropdownOpen(!dropdownOpen);\n            } else if (isKey(event.code, \"SPACE\")) {\n                event.preventDefault();\n                setDropdownOpen(!dropdownOpen);\n            }\n            onInputKeyDown?.(event);\n        };\n\n        const handleButtonClick = () => setDropdownOpen(!dropdownOpen);\n\n        const renderPostfixContent = () => (\n            <>\n                {onClear && <FormFieldClear onClick={onClear} />}\n                <ButtonIcon\n                    role=\"presentation\"\n                    tabIndex={-1}\n                    active={dropdownOpen}\n                    disabled={disabled}\n                    onClick={handleButtonClick}\n                >\n                    {sizeToCalendarIconMap[size]}\n                </ButtonIcon>\n                {postfix}\n            </>\n        );\n\n        return (\n            <TextField\n                size={size}\n                inputProps={{\n                    ...restInputProps,\n                    readOnly: true,\n                    disabled: disabled,\n                    onMouseDown: handleMouseDown,\n                    onKeyDown: handleInputKeyDown,\n                }}\n                postfix={renderPostfixContent()}\n                {...restProps}\n                ref={ref}\n            />\n        );\n    },\n);\n"],"names":["React"],"mappings":";;;;;;;;;;;AAYA,MAAM,wBAAwB;AAAA,EAC1B,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,GAAG;AAAA,EAC/D,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,GAAG;AAAA,EAC/D,CAAC,eAAe,EAAE,GAAG,oBAAC,yBAAA,EAAwB,cAAc,EAAA,CAAG;AACnE;AAEO,MAAM,uBAAuBA,eAAM;AAAA,EACtC,CAAC,EAAE,OAAO,eAAe,IAAI,SAAS,SAAS,YAAY,GAAG,UAAA,GAAa,QAAQ;AAC/E,UAAM,EAAE,cAAc,oBAAoB,WAAW,yBAAyB;AAC9E,UAAM,EAAE,WAAW;AACnB,UAAM,EAAE,WAAW,gBAAgB,aAAa,kBAAkB,GAAG,mBAAmB;AACxF,UAAM,WAAW,cAAA;AACjB,UAAM,WAAW,WAAW,iBAAiB;AAE7C,UAAM,kBAA6D,CAAC,UAAU;AAC1E,UAAI,CAAC,cAAc;AACf,YAAI,UAAU;AACV,gBAAM,eAAA;AAAA,QACV;AAEA,mBAAW,MAAM,gBAAgB,IAAI,CAAC;AAAA,MAC1C;AAEA,2DAAmB;AAAA,IACvB;AAEA,UAAM,qBAAmE,CAAC,UAAU;AAChF,UAAI,MAAM,MAAM,MAAM,OAAO,GAAG;AAC5B,wBAAgB,CAAC,YAAY;AAAA,MACjC,WAAW,MAAM,MAAM,MAAM,OAAO,GAAG;AACnC,cAAM,eAAA;AACN,wBAAgB,CAAC,YAAY;AAAA,MACjC;AACA,uDAAiB;AAAA,IACrB;AAEA,UAAM,oBAAoB,MAAM,gBAAgB,CAAC,YAAY;AAE7D,UAAM,uBAAuB,MACzB,qBAAA,UAAA,EACK,UAAA;AAAA,MAAA,WAAW,oBAAC,gBAAA,EAAe,SAAS,QAAA,CAAS;AAAA,MAC9C;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,MAAK;AAAA,UACL,UAAU;AAAA,UACV,QAAQ;AAAA,UACR;AAAA,UACA,SAAS;AAAA,UAER,gCAAsB,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,MAE9B;AAAA,IAAA,GACL;AAGJ,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA,YAAY;AAAA,UACR,GAAG;AAAA,UACH,UAAU;AAAA,UACV;AAAA,UACA,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEf,SAAS,qBAAA;AAAA,QACR,GAAG;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;"}

package/components/MonthYearRange/MonthYearRange.js

@@ -5,9 +5,9 @@ import { CaretleftStrokeSrvIcon20, RangeStrokeSrvIcon16, CaretrightStrokeSrvIcon
 import { c as clsx } from "../../chunks/vendor-Bco_z_Yi.js";
 import { dateFormatYYYYMMDD } from "../../consts/DateConst.js";
 import { EMonthYearRangeShiftUnit } from "./enums.js";
-const monthYearRange = "monthYearRange__a9006349";
-const monthYearRangeButton = "monthYearRangeButton__30968ccf";
-const separator = "separator__934b0d97";
+const monthYearRange = "monthYearRange__7899dad6";
+const monthYearRangeButton = "monthYearRangeButton__fa5ffbf6";
+const separator = "separator__6407eb98";
 const styles = {
   monthYearRange,
   monthYearRangeButton,

package/components/MultiselectField/components/MultiselectFieldDropdown.js

@@ -4,7 +4,7 @@ import { j as focusTrapReactExports } from "../../../chunks/vendor-Bco_z_Yi.js";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-C9UYL13j.js";
+import "../../../chunks/DropdownListItem-DlQBVEg0.js";
 import { EDropdownWidth } from "../../Dropdown/desktop/enums.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";

package/components/MultiselectField/components/MultiselectFieldDropdownContent.js

@@ -4,11 +4,11 @@ import { MultiselectFieldContext } from "../MultiselectFieldContext.js";
 import { createSizeToClassNameMap } from "../../../utils/classNameMaps.js";
 import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
 import { LoaderScreen } from "../../LoaderScreen/LoaderScreen.js";
-const multiselectFieldContent = "multiselectFieldContent__6b9cafce";
-const loaderScreen = "loaderScreen__7dec5ca6";
-const sm = "sm__eb9356f5";
-const md = "md__ea00ee3d";
-const lg = "lg__bba6fa02";
+const multiselectFieldContent = "multiselectFieldContent__0f8bbcb4";
+const loaderScreen = "loaderScreen__0227d0b1";
+const sm = "sm__f4ee8454";
+const md = "md__d578083c";
+const lg = "lg__6887bee1";
 const styles = {
   multiselectFieldContent,
   loaderScreen,

package/components/MultiselectField/components/MultiselectFieldDropdownFooter.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
-const multiselectFieldFooter = "multiselectFieldFooter__87ee237b";
+const multiselectFieldFooter = "multiselectFieldFooter__ec84e8bd";
 const styles = {
   multiselectFieldFooter
 };

package/components/MultiselectField/components/MultiselectFieldDropdownHeader.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
-const multiselectFieldHeader = "multiselectFieldHeader__da5b2387";
+const multiselectFieldHeader = "multiselectFieldHeader__83e8e684";
 const styles = {
   multiselectFieldHeader
 };

package/components/Notification/Notification.js

@@ -5,7 +5,7 @@ import { NotificationClose } from "./components/NotificationClose.js";
 import { NotificationIcon } from "./components/NotificationIcon.js";
 import { NotificationTime } from "./components/NotificationTime.js";
 import React__default from "react";
-import { s as styles } from "../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../chunks/Notification.module-CjhOi6Tq.js";
 const Notification = Object.assign(
   React__default.forwardRef(function Notification2({ children, className, withExtraBottomPadding = false, isShowCloseOnHover = false, onClick, ...HTMLAttributes }, ref) {
     const cn = clsx(className, styles.notification, {
@@ -20,7 +20,7 @@ const Notification = Object.assign(
         className: cn,
         onClick,
         ref,
-        "data-tx": "1.36.0",
+        "data-tx": "1.37.0",
         children
       }
     );

package/components/Notification/NotificationGrouped.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { NotificationGroupedFooter } from "./components/NotificationGroupedFooter.js";
 import React__default from "react";
-import { s as styles } from "../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationGrouped = React__default.forwardRef(
   function NotificationGrouped2({ children }, ref) {
     return /* @__PURE__ */ jsxs("div", { className: styles.notificationGroupedWrapper, ref, children: [

package/components/Notification/components/NotificationBody.js

@@ -4,7 +4,7 @@ import { NotificationHeader } from "./NotificationHeader.js";
 import { NotificationBodyContent } from "./NotificationBodyContent.js";
 import { NotificationFooter } from "./NotificationFooter.js";
 import { NotificationBodyList } from "./NotificationBodyList.js";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationBody = Object.assign(
   React__default.forwardRef(function NotificationBody2({ children }, ref) {
     return /* @__PURE__ */ jsx("div", { className: styles.notificationBody, ref, children });

package/components/Notification/components/NotificationBodyList.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { UnorderedList } from "../../UnorderedList/UnorderedList.js";
 import "../../UnorderedList/UnorderedListItem.js";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
 const NotificationBodyList = ({ className, ...props }) => /* @__PURE__ */ jsx(UnorderedList, { className: clsx(styles.notificationBodyList, className), ...props, children: props.values.map((el, index) => /* @__PURE__ */ jsx(UnorderedList.Item, { children: el }, index)) });
 NotificationBodyList.displayName = "NotificationBodyList";

package/components/Notification/components/NotificationClose.js

@@ -5,7 +5,7 @@ import "../../Button/ButtonBase.js";
 import { ButtonIcon } from "../../Button/ButtonIcon.js";
 import "../../Button/ButtonDropdown.js";
 import "../../Button/ButtonDropdownExtended.js";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationClose = ({ onClick, ...buttonProps }) => /* @__PURE__ */ jsx("span", { className: styles.notificationClose, children: /* @__PURE__ */ jsx(ButtonIcon, { ...buttonProps, onClick, children: /* @__PURE__ */ jsx(CrossStrokeSrvIcon16, { paletteIndex: 5 }) }) });
 NotificationClose.displayName = "NotificationClose";
 export {

package/components/Notification/components/NotificationFooter.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationFooter = ({ children }) => /* @__PURE__ */ jsx("div", { className: styles.notificationFooter, children });
 NotificationFooter.displayName = "NotificationFooter";
 export {

package/components/Notification/components/NotificationGroupedFooter.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationGroupedFooter = () => /* @__PURE__ */ jsxs("div", { children: [
   /* @__PURE__ */ jsx("div", { className: clsx(styles.notificationGroupedFooterItem, styles.first) }),
   /* @__PURE__ */ jsx("div", { className: clsx(styles.notificationGroupedFooterItem, styles.second) })

package/components/Notification/components/NotificationHeader.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationHeader = ({ children }) => /* @__PURE__ */ jsx("h3", { className: styles.notificationHeader, children });
 NotificationHeader.displayName = "NotificationHeader";
 export {

package/components/Notification/components/NotificationIcon.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationIcon = ({ children }) => /* @__PURE__ */ jsx("div", { className: styles.notificationIcon, children });
 NotificationIcon.displayName = "NotificationIcon";
 export {

package/components/Notification/components/NotificationTime.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { s as styles } from "../../../chunks/Notification.module-BSFrcwoX.js";
+import { s as styles } from "../../../chunks/Notification.module-CjhOi6Tq.js";
 const NotificationTime = ({ time }) => /* @__PURE__ */ jsx("span", { className: styles.notificationTime, children: time });
 NotificationTime.displayName = "NotificationTime";
 export {

package/components/NumberField/NumberFieldInput.js

@@ -3,7 +3,7 @@ import React__default, { useCallback } from "react";
 import "../FormField/components/FormFieldClear.js";
 import "../FormField/components/FormFieldCounter.js";
 import "../FormField/components/FormFieldDescription.js";
-import { F as FormFieldInput } from "../../chunks/FormFieldInput-FA3ecx9K.js";
+import { FormFieldInput } from "../FormField/components/FormFieldInput.js";
 import "../FormField/components/FormFieldLabel.js";
 import "../FormField/components/FormFieldMaskedInput.js";
 import "../FormField/components/FormFieldPostfix.js";