@skbkontur/react-ui 0.0.0-7b63c63db3 → 0.0.0-7feb61cdde

package/internal/Menu/Menu.d.ts

@@ -18,20 +18,17 @@ export interface MenuState {
 export declare const MenuDataTids: {
     readonly root: "Menu__root";
 };
+declare type DefaultProps = Required<Pick<MenuProps, 'align' | 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll'>>;
 export declare class Menu extends React.Component<MenuProps, MenuState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        align: string;
-        width: string;
-        maxHeight: number;
-        hasShadow: boolean;
-        preventWindowScroll: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         highlightedIndex: number;
     };
     private theme;
     private scrollContainer;
+    private isMobileLayout;
     private highlighted;
     private unmounted;
     private setRootNode;
@@ -71,3 +68,4 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private move;
     private isEmpty;
 }
+export {};

package/internal/Menu/Menu.styles/Menu.styles.js

@@ -1,25 +1,31 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: content-box;\n      overflow: auto;\n      padding: 0 ", ";\n      border-radius: ", ";\n    "])), t.menuBgDefault, t.menuBorderRadius, t.menuPaddingX, t.menuBorderRadius);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: ", ";\n      overflow: auto;\n      padding: 0 ", ";\n      margin: ", " 0;\n      border-radius: ", ";\n    "])), t.menuBgDefault, t.menuBorderRadius, t.menuBoxSizing, t.menuPaddingX, t.menuOffsetY, t.menuBorderRadius);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "])), t.mobileMenuPaddingX);
   },
   alignRight: function alignRight() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      flex: 1 1 100%;\n    "])));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex: 1 1 100%;\n    "])));
   },
   alignRightIE11: function alignRightIE11() {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      float: right;\n      width: 100%;\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      float: right;\n      width: 100%;\n    "])));
   },
   alignRightIE11FixAutoWidth: function alignRightIE11FixAutoWidth() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    "])));
   },
   scrollContainer: function scrollContainer(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.menuPaddingY);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.menuPaddingY);
+  },
+  scrollContainerMobile: function scrollContainerMobile(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.mobileMenuPaddingY);
   },
   shadow: function shadow(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
   }
 });

package/internal/Menu/Menu.styles/Menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Menu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","menuBorderRadius","menuPaddingX","alignRight","alignRightIE11","alignRightIE11FixAutoWidth","scrollContainer","menuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEmBD,IAAAA,CAAC,CAACE,gBAFrB;;;AAKeF,IAAAA,CAAC,CAACG,YALjB;AAMmBH,IAAAA,CAAC,CAACE,gBANrB;;AAQD,GAVgC;;AAYjCE,EAAAA,UAZiC,wBAYpB;AACX,WAAOR,GAAP;;;AAGD,GAhBgC;;AAkBjCS,EAAAA,cAlBiC,4BAkBhB;AACf,WAAOT,GAAP;;;;AAID,GAvBgC;;AAyBjCU,EAAAA,0BAzBiC,wCAyBJ;AAC3B,WAAOV,GAAP;;;;AAID,GA9BgC;;AAgCjCW,EAAAA,eAhCiC,2BAgCjBP,CAhCiB,EAgCP;AACxB,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACQ,YADf;;AAGD,GApCgC;;AAsCjCC,EAAAA,MAtCiC,kBAsC1BT,CAtC0B,EAsChB;AACf,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACU,UADd;AAEgBV,IAAAA,CAAC,CAACW,UAFlB;;AAID,GA3CgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: content-box;\n      overflow: auto;\n      padding: 0 ${t.menuPaddingX};\n      border-radius: ${t.menuBorderRadius};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  alignRightIE11() {\n    return css`\n      float: right;\n      width: 100%;\n    `;\n  },\n\n  alignRightIE11FixAutoWidth() {\n    return css`\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Menu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","menuBorderRadius","menuBoxSizing","menuPaddingX","menuOffsetY","rootMobile","mobileMenuPaddingX","alignRight","alignRightIE11","alignRightIE11FixAutoWidth","scrollContainer","menuPaddingY","scrollContainerMobile","mobileMenuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"kPAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEmBD,IAAAA,CAAC,CAACE,gBAFrB;AAGgBF,IAAAA,CAAC,CAACG,aAHlB;;AAKeH,IAAAA,CAAC,CAACI,YALjB;AAMYJ,IAAAA,CAAC,CAACK,WANd;AAOmBL,IAAAA,CAAC,CAACE,gBAPrB;;AASD,GAXgC;;AAajCI,EAAAA,UAbiC,sBAatBN,CAbsB,EAaZ;AACnB,WAAOJ,GAAP;;;AAGeI,IAAAA,CAAC,CAACO,kBAHjB;;AAKD,GAnBgC;;AAqBjCC,EAAAA,UArBiC,wBAqBpB;AACX,WAAOZ,GAAP;;;AAGD,GAzBgC;;AA2BjCa,EAAAA,cA3BiC,4BA2BhB;AACf,WAAOb,GAAP;;;;AAID,GAhCgC;;AAkCjCc,EAAAA,0BAlCiC,wCAkCJ;AAC3B,WAAOd,GAAP;;;;AAID,GAvCgC;;AAyCjCe,EAAAA,eAzCiC,2BAyCjBX,CAzCiB,EAyCP;AACxB,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACY,YADf;;AAGD,GA7CgC;;AA+CjCC,EAAAA,qBA/CiC,iCA+CXb,CA/CW,EA+CD;AAC9B,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACc,kBADf;;AAGD,GAnDgC;;AAqDjCC,EAAAA,MArDiC,kBAqD1Bf,CArD0B,EAqDhB;AACf,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACgB,UADd;AAEgBhB,IAAAA,CAAC,CAACiB,UAFlB;;AAID,GA1DgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      overflow: auto;\n      padding: 0 ${t.menuPaddingX};\n      margin: ${t.menuOffsetY} 0;\n      border-radius: ${t.menuBorderRadius};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  alignRightIE11() {\n    return css`\n      float: right;\n      width: 100%;\n    `;\n  },\n\n  alignRightIE11FixAutoWidth() {\n    return css`\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n});\n"]}

package/internal/Menu/Menu.styles.d.ts

@@ -1,9 +1,11 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
     alignRight(): string;
     alignRightIE11(): string;
     alignRightIE11FixAutoWidth(): string;
     scrollContainer(t: Theme): string;
+    scrollContainerMobile(t: Theme): string;
     shadow(t: Theme): string;
 };

package/internal/MenuMessage/MenuMessage/MenuMessage.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className", "as"];
+import React, { useContext } from 'react';
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { useResponsiveLayout } from "../../../components/ResponsiveLayout";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { styles } from "../MenuMessage.styles";
+export var MenuMessageDataTids = {
+  root: 'MenuMessage__root'
+};
+export var MenuMessage = forwardRefAndName('MenuMessage', function (_ref, ref) {
+  var _cx;
+
+  var children = _ref.children,
+      className = _ref.className,
+      _ref$as = _ref.as,
+      Tag = _ref$as === void 0 ? 'p' : _ref$as,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useResponsiveLayout = useResponsiveLayout(),
+      isMobile = _useResponsiveLayout.isMobile;
+
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement(Tag, _extends({
+    ref: ref,
+    "data-tid": MenuMessageDataTids.root,
+    className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx), className)
+  }, rest), children);
+});

package/internal/MenuMessage/MenuMessage/MenuMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuMessage.tsx"],"names":["React","useContext","forwardRefAndName","useResponsiveLayout","cx","ThemeContext","styles","MenuMessageDataTids","root","MenuMessage","ref","children","className","as","Tag","rest","isMobile","theme","rootMobile"],"mappings":"8MAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,mBAAT,QAAoC,mCAApC;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,MAAT,QAAuB,sBAAvB;;;;;;;AAOA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B,EAA5B;;;AAIP,OAAO,IAAMC,WAAW,GAAGP,iBAAiB;AAC1C,aAD0C;AAE1C,gBAAkDQ,GAAlD,EAA0D,aAAvDC,QAAuD,QAAvDA,QAAuD,CAA7CC,SAA6C,QAA7CA,SAA6C,gBAAlCC,EAAkC,CAA9BC,GAA8B,wBAAxB,GAAwB,WAAhBC,IAAgB;AACxD,6BAAqBZ,mBAAmB,EAAxC,CAAQa,QAAR,wBAAQA,QAAR;;AAEA,MAAMC,KAAK,GAAGhB,UAAU,CAACI,YAAD,CAAxB;;AAEA;AACE,wBAAC,GAAD;AACE,MAAA,GAAG,EAAEK,GADP;AAEE,kBAAUH,mBAAmB,CAACC,IAFhC;AAGE,MAAA,SAAS,EAAEJ,EAAE;;AAERE,MAAAA,MAAM,CAACE,IAAP,CAAYS,KAAZ,CAFQ,IAEa,IAFb;AAGRX,MAAAA,MAAM,CAACY,UAAP,CAAkBD,KAAlB,CAHQ,IAGmBD,QAHnB;;AAKXJ,MAAAA,SALW,CAHf;;AAUMG,IAAAA,IAVN;;AAYGJ,IAAAA,QAZH,CADF;;;AAgBD,CAvByC,CAArC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { useResponsiveLayout } from '../../components/ResponsiveLayout';\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps } from '../CommonWrapper';\n\nimport { styles } from './MenuMessage.styles';\n\nexport interface MenuMessageProps extends CommonProps {\n  children: React.ReactNode;\n  as?: React.ElementType;\n}\n\nexport const MenuMessageDataTids = {\n  root: 'MenuMessage__root',\n} as const;\n\nexport const MenuMessage = forwardRefAndName<HTMLOrSVGElement, MenuMessageProps>(\n  'MenuMessage',\n  ({ children, className, as: Tag = 'p', ...rest }, ref) => {\n    const { isMobile } = useResponsiveLayout();\n\n    const theme = useContext(ThemeContext);\n\n    return (\n      <Tag\n        ref={ref}\n        data-tid={MenuMessageDataTids.root}\n        className={cx(\n          {\n            [styles.root(theme)]: true,\n            [styles.rootMobile(theme)]: isMobile,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Tag>\n    );\n  },\n);\n"]}

package/internal/MenuMessage/MenuMessage/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/MenuMessage/MenuMessage.js",
+  "module": "MenuMessage",
+  "types": "../MenuMessage.d.ts",
+  "sideEffects": false
+}

package/internal/MenuMessage/MenuMessage.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CommonProps } from '../CommonWrapper';
+export interface MenuMessageProps extends CommonProps {
+    children: React.ReactNode;
+    as?: React.ElementType;
+}
+export declare const MenuMessageDataTids: {
+    readonly root: "MenuMessage__root";
+};
+export declare const MenuMessage: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLOrSVGElement, MenuMessageProps>;

package/internal/MenuMessage/MenuMessage.styles/MenuMessage.styles.js

@@ -0,0 +1,23 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+import { getMenuItemPaddings } from "../../../components/MenuItem/MenuItem.styles";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    var _getMenuItemPaddings = getMenuItemPaddings({
+      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,
+      menuItemPaddingX: t.menuMessagePaddingX,
+      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,
+      menuItemPaddingY: t.menuMessagePaddingY
+    }),
+        paddingX = _getMenuItemPaddings.paddingX,
+        paddingY = _getMenuItemPaddings.paddingY;
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: 0;\n      padding: 0;\n\n      display: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      color: ", ";\n      background: ", ";\n    "])), t.menuMessageDisplay, t.menuMessageLineHeight, t.menuMessageFontSize, t.menuMessagePaddingY, paddingX, paddingY, t.menuMessagePaddingX, t.menuMessageTextColor, t.menuMessageBg);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuMessageFontSizeMobile, t.menuMessageLineHeightMobile, t.menuMessagePaddingMobile);
+  }
+});

package/internal/MenuMessage/MenuMessage.styles/MenuMessage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuMessage.styles.ts"],"names":["css","memoizeStyle","getMenuItemPaddings","styles","root","t","menuItemLegacyPaddingX","menuItemPaddingX","menuMessagePaddingX","menuItemLegacyPaddingY","menuItemPaddingY","menuMessagePaddingY","paddingX","paddingY","menuMessageDisplay","menuMessageLineHeight","menuMessageFontSize","menuMessageTextColor","menuMessageBg","rootMobile","menuMessageFontSizeMobile","menuMessageLineHeightMobile","menuMessagePaddingMobile"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;AACA,SAASC,mBAAT,QAAoC,2CAApC;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,+BAA+BH,mBAAmB,CAAC;AACjDI,MAAAA,sBAAsB,EAAED,CAAC,CAACC,sBADuB;AAEjDC,MAAAA,gBAAgB,EAAEF,CAAC,CAACG,mBAF6B;AAGjDC,MAAAA,sBAAsB,EAAEJ,CAAC,CAACI,sBAHuB;AAIjDC,MAAAA,gBAAgB,EAAEL,CAAC,CAACM,mBAJ6B,EAAD,CAAlD,CAAQC,QAAR,wBAAQA,QAAR,CAAkBC,QAAlB,wBAAkBA,QAAlB;;;AAOA,WAAOb,GAAP;;;;AAIaK,IAAAA,CAAC,CAACS,kBAJf;AAKiBT,IAAAA,CAAC,CAACU,qBALnB;AAMeV,IAAAA,CAAC,CAACW,mBANjB;AAOaX,IAAAA,CAAC,CAACM,mBAPf,EAOsCC,QAPtC,EAOkDC,QAPlD,EAO8DR,CAAC,CAACG,mBAPhE;AAQWH,IAAAA,CAAC,CAACY,oBARb;AASgBZ,IAAAA,CAAC,CAACa,aATlB;;AAWD,GApBgC;;AAsBjCC,EAAAA,UAtBiC,sBAsBtBd,CAtBsB,EAsBZ;AACnB,WAAOL,GAAP;AACeK,IAAAA,CAAC,CAACe,yBADjB;AAEiBf,IAAAA,CAAC,CAACgB,2BAFnB;AAGahB,IAAAA,CAAC,CAACiB,wBAHf;;AAKD,GA5BgC,EAAD,CAA3B","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { getMenuItemPaddings } from '../../components/MenuItem/MenuItem.styles';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,\n      menuItemPaddingX: t.menuMessagePaddingX,\n      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,\n      menuItemPaddingY: t.menuMessagePaddingY,\n    });\n\n    return css`\n      margin: 0;\n      padding: 0;\n\n      display: ${t.menuMessageDisplay};\n      line-height: ${t.menuMessageLineHeight};\n      font-size: ${t.menuMessageFontSize};\n      padding: ${t.menuMessagePaddingY} ${paddingX} ${paddingY} ${t.menuMessagePaddingX};\n      color: ${t.menuMessageTextColor};\n      background: ${t.menuMessageBg};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuMessageFontSizeMobile};\n      line-height: ${t.menuMessageLineHeightMobile};\n      padding: ${t.menuMessagePaddingMobile};\n    `;\n  },\n});\n"]}

package/internal/MenuMessage/MenuMessage.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/MenuMessage/MenuMessage.styles.js",
+  "module": "MenuMessage.styles",
+  "types": "../MenuMessage.styles.d.ts",
+  "sideEffects": false
+}

package/{components/DatePicker/Picker.styles.d.ts → internal/MenuMessage/MenuMessage.styles.d.ts}

@@ -1,5 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
-    todayWrapper(t: Theme): string;
+    rootMobile(t: Theme): string;
 };

package/internal/MenuMessage/index/index.js

@@ -0,0 +1 @@
+export * from "../MenuMessage";

package/internal/MenuMessage/index/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd","sourcesContent":["export * from './MenuMessage';\n"]}

package/internal/MenuMessage/index/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/MenuMessage/index.js",
+  "module": "index",
+  "types": "../index.d.ts",
+  "sideEffects": false
+}

package/internal/MenuMessage/index.d.ts

@@ -0,0 +1 @@
+export * from './MenuMessage';

package/internal/MenuMessage/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../cjs/internal/MenuMessage/index.js",
+  "module": "index",
+  "types": "index.d.ts",
+  "sideEffects": false
+}

package/internal/MobilePopup/MobilePopup/MobilePopup.js

@@ -5,7 +5,7 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { RenderContainer } from "../../RenderContainer";
 import { HideBodyVerticalScroll } from "../../HideBodyVerticalScroll";
 import { ZIndex } from "../../ZIndex";
-import { cx } from "../../../lib/theming/Emotion";
+import { RenderLayer } from "../../RenderLayer";
 import { jsStyles } from "../MobilePopup.styles";
 import { MobilePopupHeader } from "../MobilePopupHeader";
 export var MobilePopupDataTids = {
@@ -23,9 +23,6 @@ export var MobilePopup = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
-      isScrolled: false
-    };
 
     _this.close = function () {
       if (_this.props.onCloseRequest) {
@@ -33,22 +30,6 @@ export var MobilePopup = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    _this.refContent = function (contentDiv) {
-      _this.contentDiv = contentDiv;
-    };
-
-    _this.handleScrollMenu = function (e) {
-      if (_this.contentDiv) {
-        var isScrolled = _this.contentDiv.scrollTop > 0;
-
-        if (isScrolled !== _this.state.isScrolled) {
-          _this.setState({
-            isScrolled: isScrolled
-          });
-        }
-      }
-    };
-
     return _this;
   }
 
@@ -64,46 +45,35 @@ export var MobilePopup = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _this3 = this;
-
     var content = /*#__PURE__*/React.createElement(ZIndex, {
+      className: jsStyles.zIndex(),
       priority: 'MobilePopup'
     }, /*#__PURE__*/React.createElement(Transition, {
       "in": this.props.opened,
       onExited: this.props.onClose,
       mountOnEnter: true,
       unmountOnExit: true,
-      appear: true,
-      timeout: {
-        appear: 0,
-        exit: 250
-      }
-    }, function (state) {
-      var _cx, _cx2, _cx3;
-
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        "data-tid": MobilePopupDataTids.container,
-        className: cx((_cx = {}, _cx[jsStyles.container(_this3.theme)] = true, _cx[jsStyles.containerOpened()] = state === 'entered', _cx))
-      }, /*#__PURE__*/React.createElement("div", {
-        "data-tid": MobilePopupDataTids.root,
-        className: cx((_cx2 = {}, _cx2[jsStyles.root(_this3.theme)] = true, _cx2[jsStyles.rootFullHeight(_this3.theme)] = _this3.props.useFullHeight, _cx2)),
-        onClick: _this3.props.useFullHeight ? undefined : _this3.close
-      }, /*#__PURE__*/React.createElement(MobilePopupHeader, {
-        caption: _this3.props.caption,
-        onClose: _this3.close,
-        withShadow: _this3.state.isScrolled
-      }, _this3.props.headerChildComponent), /*#__PURE__*/React.createElement("div", {
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
-        className: jsStyles.content(_this3.theme),
-        onScroll: _this3.handleScrollMenu,
-        ref: _this3.refContent
-      }, _this3.props.children))), /*#__PURE__*/React.createElement("div", {
-        onClick: _this3.close,
-        className: cx((_cx3 = {}, _cx3[jsStyles.bg()] = true, _cx3[jsStyles.bgShowed()] = state === 'entered', _cx3))
-      }), /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null));
-    }));
+      timeout: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: jsStyles.wrapper()
+    }, /*#__PURE__*/React.createElement(RenderLayer, {
+      onClickOutside: this.close
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-tid": MobilePopupDataTids.container,
+      className: jsStyles.container(this.theme)
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-tid": MobilePopupDataTids.root,
+      className: jsStyles.root(this.theme)
+    }, /*#__PURE__*/React.createElement(MobilePopupHeader, {
+      caption: this.props.caption
+    }, this.props.headerChildComponent), /*#__PURE__*/React.createElement("div", {
+      className: jsStyles.content(this.theme)
+    }, this.props.children)), /*#__PURE__*/React.createElement("div", {
+      onClick: this.close,
+      className: jsStyles.bottomIndent()
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: jsStyles.bg()
+    }), /*#__PURE__*/React.createElement(HideBodyVerticalScroll, null))));
 
     if (this.props.withoutRenderContainer) {
       return content;

package/internal/MobilePopup/MobilePopup/MobilePopup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopup.tsx"],"names":["React","Transition","ThemeContext","RenderContainer","HideBodyVerticalScroll","ZIndex","cx","jsStyles","MobilePopupHeader","MobilePopupDataTids","root","container","MobilePopup","state","isScrolled","close","props","onCloseRequest","refContent","contentDiv","handleScrollMenu","e","scrollTop","setState","render","theme","renderMain","content","opened","onClose","appear","exit","containerOpened","rootFullHeight","useFullHeight","undefined","caption","headerChildComponent","stopPropagation","children","bg","bgShowed","withoutRenderContainer","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,wBAA3B;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAASC,sBAAT,QAAuC,2BAAvC;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,QAAT,QAAyB,sBAAzB;AACA,SAASC,iBAAT,QAAkC,qBAAlC;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B;AAEjCC,EAAAA,SAAS,EAAE,wBAFsB,EAA5B;;;AAKP,WAAaC,WAAb;;;;;;AAMSC,IAAAA,KANT,GAMmC;AAC/BC,MAAAA,UAAU,EAAE,KADmB,EANnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFSC,IAAAA,KAvFT,GAuFiB,YAAM;AACnB,UAAI,MAAKC,KAAL,CAAWC,cAAf,EAA+B;AAC7B,cAAKD,KAAL,CAAWC,cAAX;AACD;AACF,KA3FH;;AA6FUC,IAAAA,UA7FV,GA6FuB,UAACC,UAAD,EAAgC;AACnD,YAAKA,UAAL,GAAkBA,UAAlB;AACD,KA/FH;;AAiGUC,IAAAA,gBAjGV,GAiG6B,UAACC,CAAD,EAAsC;AAC/D,UAAI,MAAKF,UAAT,EAAqB;AACnB,YAAML,UAAU,GAAG,MAAKK,UAAL,CAAgBG,SAAhB,GAA4B,CAA/C;;AAEA,YAAIR,UAAU,KAAK,MAAKD,KAAL,CAAWC,UAA9B,EAA0C;AACxC,gBAAKS,QAAL,CAAc,EAAET,UAAU,EAAVA,UAAF,EAAd;AACD;AACF;AACF,KAzGH,yDAUSU,MAVT,GAUE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAnBH,QAqBSA,UArBT,GAqBE,sBAAoB,mBAClB,IAAMC,OAAO,gBACX,oBAAC,MAAD,IAAQ,QAAQ,EAAE,aAAlB,iBACE,oBAAC,UAAD,IACE,MAAI,KAAKX,KAAL,CAAWY,MADjB,EAEE,QAAQ,EAAE,KAAKZ,KAAL,CAAWa,OAFvB,EAGE,YAAY,MAHd,EAIE,aAAa,MAJf,EAKE,MAAM,MALR,EAME,OAAO,EAAE,EAAEC,MAAM,EAAE,CAAV,EAAaC,IAAI,EAAE,GAAnB,EANX,IAQG,UAAClB,KAAD,2CACC,uDACE,6BACE,YAAUJ,mBAAmB,CAACE,SADhC,EAEE,SAAS,EAAEL,EAAE,gBACVC,QAAQ,CAACI,SAAT,CAAmB,MAAI,CAACc,KAAxB,CADU,IACuB,IADvB,MAEVlB,QAAQ,CAACyB,eAAT,EAFU,IAEmBnB,KAAK,KAAK,SAF7B,OAFf,iBAOE,6BACE,YAAUJ,mBAAmB,CAACC,IADhC,EAEE,SAAS,EAAEJ,EAAE,kBACVC,QAAQ,CAACG,IAAT,CAAc,MAAI,CAACe,KAAnB,CADU,IACkB,IADlB,OAEVlB,QAAQ,CAAC0B,cAAT,CAAwB,MAAI,CAACR,KAA7B,CAFU,IAE4B,MAAI,CAACT,KAAL,CAAWkB,aAFvC,QAFf,EAME,OAAO,EAAE,MAAI,CAAClB,KAAL,CAAWkB,aAAX,GAA2BC,SAA3B,GAAuC,MAAI,CAACpB,KANvD,iBAQE,oBAAC,iBAAD,IACE,OAAO,EAAE,MAAI,CAACC,KAAL,CAAWoB,OADtB,EAEE,OAAO,EAAE,MAAI,CAACrB,KAFhB,EAGE,UAAU,EAAE,MAAI,CAACF,KAAL,CAAWC,UAHzB,IAKG,MAAI,CAACE,KAAL,CAAWqB,oBALd,CARF,eAeE,6BACE,OAAO,EAAE,iBAAChB,CAAD,UAAOA,CAAC,CAACiB,eAAF,EAAP,EADX,EAEE,SAAS,EAAE/B,QAAQ,CAACoB,OAAT,CAAiB,MAAI,CAACF,KAAtB,CAFb,EAGE,QAAQ,EAAE,MAAI,CAACL,gBAHjB,EAIE,GAAG,EAAE,MAAI,CAACF,UAJZ,IAMG,MAAI,CAACF,KAAL,CAAWuB,QANd,CAfF,CAPF,CADF,eAiCE,6BACE,OAAO,EAAE,MAAI,CAACxB,KADhB,EAEE,SAAS,EAAET,EAAE,kBACVC,QAAQ,CAACiC,EAAT,EADU,IACM,IADN,OAEVjC,QAAQ,CAACkC,QAAT,EAFU,IAEY5B,KAAK,KAAK,SAFtB,QAFf,GAjCF,eAwCE,oBAAC,sBAAD,OAxCF,CADD,EARH,CADF,CADF,CA0DA,IAAI,KAAKG,KAAL,CAAW0B,sBAAf,EAAuC,CACrC,OAAOf,OAAP,CACD,CAED,oBAAO,oBAAC,eAAD,QAAkBA,OAAlB,CAAP,CACD,CArFH,sBAAiC3B,KAAK,CAAC2C,SAAvC,EAAa/B,W,CACGgC,mB,GAAsB,kB","sourcesContent":["import React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Nullable } from '../../typings/utility-types';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\n\ninterface MobilePopupProps {\n  /**\n   * Хэндлер, вызываемый при закрытии меню\n   */\n  onClose?: () => void;\n  caption?: string;\n  /**\n   * Компонент, закрепленный сверху меню (под холдером)\n   */\n  headerChildComponent?: React.ReactNode;\n  useFullHeight?: boolean;\n  withoutRenderContainer?: boolean;\n  /**\n   * Хэндлер, вызываемый при клике по вуали или заголовку\n   */\n  onCloseRequest?: () => void;\n  opened: boolean;\n}\n\ninterface MobilePopupState {\n  isScrolled: boolean;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n} as const;\n\nexport class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private contentDiv: Nullable<HTMLDivElement>;\n  private theme!: Theme;\n\n  public state: MobilePopupState = {\n    isScrolled: false,\n  };\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const content = (\n      <ZIndex priority={'MobilePopup'}>\n        <Transition\n          in={this.props.opened}\n          onExited={this.props.onClose}\n          mountOnEnter\n          unmountOnExit\n          appear\n          timeout={{ appear: 0, exit: 250 }}\n        >\n          {(state) => (\n            <>\n              <div\n                data-tid={MobilePopupDataTids.container}\n                className={cx({\n                  [jsStyles.container(this.theme)]: true,\n                  [jsStyles.containerOpened()]: state === 'entered',\n                })}\n              >\n                <div\n                  data-tid={MobilePopupDataTids.root}\n                  className={cx({\n                    [jsStyles.root(this.theme)]: true,\n                    [jsStyles.rootFullHeight(this.theme)]: this.props.useFullHeight,\n                  })}\n                  onClick={this.props.useFullHeight ? undefined : this.close}\n                >\n                  <MobilePopupHeader\n                    caption={this.props.caption}\n                    onClose={this.close}\n                    withShadow={this.state.isScrolled}\n                  >\n                    {this.props.headerChildComponent}\n                  </MobilePopupHeader>\n                  <div\n                    onClick={(e) => e.stopPropagation()}\n                    className={jsStyles.content(this.theme)}\n                    onScroll={this.handleScrollMenu}\n                    ref={this.refContent}\n                  >\n                    {this.props.children}\n                  </div>\n                </div>\n              </div>\n              <div\n                onClick={this.close}\n                className={cx({\n                  [jsStyles.bg()]: true,\n                  [jsStyles.bgShowed()]: state === 'entered',\n                })}\n              />\n              <HideBodyVerticalScroll />\n            </>\n          )}\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n\n  private refContent = (contentDiv: HTMLDivElement) => {\n    this.contentDiv = contentDiv;\n  };\n\n  private handleScrollMenu = (e: React.UIEvent<HTMLDivElement>) => {\n    if (this.contentDiv) {\n      const isScrolled = this.contentDiv.scrollTop > 0;\n\n      if (isScrolled !== this.state.isScrolled) {\n        this.setState({ isScrolled });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["MobilePopup.tsx"],"names":["React","Transition","ThemeContext","RenderContainer","HideBodyVerticalScroll","ZIndex","RenderLayer","jsStyles","MobilePopupHeader","MobilePopupDataTids","root","container","MobilePopup","close","props","onCloseRequest","render","theme","renderMain","content","zIndex","opened","onClose","wrapper","caption","headerChildComponent","children","bottomIndent","bg","withoutRenderContainer","Component","__KONTUR_REACT_UI__"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,UAAT,QAA2B,wBAA3B;;;AAGA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAASC,sBAAT,QAAuC,2BAAvC;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,WAAT,QAA4B,gBAA5B;;AAEA,SAASC,QAAT,QAAyB,sBAAzB;AACA,SAASC,iBAAT,QAAkC,qBAAlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,OAAO,IAAMC,mBAAmB,GAAG;AACjCC,EAAAA,IAAI,EAAE,mBAD2B;AAEjCC,EAAAA,SAAS,EAAE,wBAFsB,EAA5B;;;AAKP,WAAaC,WAAb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CSC,IAAAA,KA5CT,GA4CiB,YAAM;AACnB,UAAI,MAAKC,KAAL,CAAWC,cAAf,EAA+B;AAC7B,cAAKD,KAAL,CAAWC,cAAX;AACD;AACF,KAhDH,yDAKSC,MALT,GAKE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAdH,QAgBSA,UAhBT,GAgBE,sBAAoB,CAClB,IAAMC,OAAO,gBACX,oBAAC,MAAD,IAAQ,SAAS,EAAEZ,QAAQ,CAACa,MAAT,EAAnB,EAAsC,QAAQ,EAAE,aAAhD,iBACE,oBAAC,UAAD,IAAY,MAAI,KAAKN,KAAL,CAAWO,MAA3B,EAAmC,QAAQ,EAAE,KAAKP,KAAL,CAAWQ,OAAxD,EAAiE,YAAY,MAA7E,EAA8E,aAAa,MAA3F,EAA4F,OAAO,EAAE,CAArG,iBACE,6BAAK,SAAS,EAAEf,QAAQ,CAACgB,OAAT,EAAhB,iBACE,oBAAC,WAAD,IAAa,cAAc,EAAE,KAAKV,KAAlC,iBACE,6BAAK,YAAUJ,mBAAmB,CAACE,SAAnC,EAA8C,SAAS,EAAEJ,QAAQ,CAACI,SAAT,CAAmB,KAAKM,KAAxB,CAAzD,iBACE,6BAAK,YAAUR,mBAAmB,CAACC,IAAnC,EAAyC,SAAS,EAAEH,QAAQ,CAACG,IAAT,CAAc,KAAKO,KAAnB,CAApD,iBACE,oBAAC,iBAAD,IAAmB,OAAO,EAAE,KAAKH,KAAL,CAAWU,OAAvC,IAAiD,KAAKV,KAAL,CAAWW,oBAA5D,CADF,eAEE,6BAAK,SAAS,EAAElB,QAAQ,CAACY,OAAT,CAAiB,KAAKF,KAAtB,CAAhB,IAA+C,KAAKH,KAAL,CAAWY,QAA1D,CAFF,CADF,eAKE,6BAAK,OAAO,EAAE,KAAKb,KAAnB,EAA0B,SAAS,EAAEN,QAAQ,CAACoB,YAAT,EAArC,GALF,CADF,CADF,eAUE,6BAAK,SAAS,EAAEpB,QAAQ,CAACqB,EAAT,EAAhB,GAVF,eAWE,oBAAC,sBAAD,OAXF,CADF,CADF,CADF,CAoBA,IAAI,KAAKd,KAAL,CAAWe,sBAAf,EAAuC,CACrC,OAAOV,OAAP,CACD,CAED,oBAAO,oBAAC,eAAD,QAAkBA,OAAlB,CAAP,CACD,CA1CH,sBAAiCnB,KAAK,CAAC8B,SAAvC,EAAalB,W,CACGmB,mB,GAAsB,kB","sourcesContent":["import React from 'react';\nimport { Transition } from 'react-transition-group';\n\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { RenderContainer } from '../RenderContainer';\nimport { HideBodyVerticalScroll } from '../HideBodyVerticalScroll';\nimport { ZIndex } from '../ZIndex';\nimport { RenderLayer } from '../RenderLayer';\n\nimport { jsStyles } from './MobilePopup.styles';\nimport { MobilePopupHeader } from './MobilePopupHeader';\n\ninterface MobilePopupProps {\n  /**\n   * Функция, вызываемая при закрытии всплывающего окна\n   */\n  onClose?: () => void;\n  /**\n   * Заголовок всплывающего окна, располагается в шапке\n   */\n  caption?: string;\n  /**\n   * Шапка всплывающего окна\n   */\n  headerChildComponent?: React.ReactNode;\n  /**\n   * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`\n   */\n  withoutRenderContainer?: boolean;\n  /**\n   * Функция, вызываемая при клике по вуали\n   */\n  onCloseRequest?: () => void;\n  /**\n   * Позволяет контролировать текущее состояние всплывающего окна\n   */\n  opened: boolean;\n}\n\nexport const MobilePopupDataTids = {\n  root: 'MobilePopup__root',\n  container: 'MobilePopup__container',\n} as const;\n\nexport class MobilePopup extends React.Component<MobilePopupProps> {\n  public static __KONTUR_REACT_UI__ = 'MobileMenuHeader';\n\n  private theme!: Theme;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public renderMain() {\n    const content = (\n      <ZIndex className={jsStyles.zIndex()} priority={'MobilePopup'}>\n        <Transition in={this.props.opened} onExited={this.props.onClose} mountOnEnter unmountOnExit timeout={0}>\n          <div className={jsStyles.wrapper()}>\n            <RenderLayer onClickOutside={this.close}>\n              <div data-tid={MobilePopupDataTids.container} className={jsStyles.container(this.theme)}>\n                <div data-tid={MobilePopupDataTids.root} className={jsStyles.root(this.theme)}>\n                  <MobilePopupHeader caption={this.props.caption}>{this.props.headerChildComponent}</MobilePopupHeader>\n                  <div className={jsStyles.content(this.theme)}>{this.props.children}</div>\n                </div>\n                <div onClick={this.close} className={jsStyles.bottomIndent()} />\n              </div>\n            </RenderLayer>\n            <div className={jsStyles.bg()} />\n            <HideBodyVerticalScroll />\n          </div>\n        </Transition>\n      </ZIndex>\n    );\n\n    if (this.props.withoutRenderContainer) {\n      return content;\n    }\n\n    return <RenderContainer>{content}</RenderContainer>;\n  }\n\n  public close = () => {\n    if (this.props.onCloseRequest) {\n      this.props.onCloseRequest();\n    }\n  };\n}\n"]}

package/internal/MobilePopup/MobilePopup.d.ts

@@ -1,38 +1,39 @@
 import React from 'react';
 interface MobilePopupProps {
     /**
-     * Хэндлер, вызываемый при закрытии меню
+     * Функция, вызываемая при закрытии всплывающего окна
      */
     onClose?: () => void;
+    /**
+     * Заголовок всплывающего окна, располагается в шапке
+     */
     caption?: string;
     /**
-     * Компонент, закрепленный сверху меню (под холдером)
+     * Шапка всплывающего окна
      */
     headerChildComponent?: React.ReactNode;
-    useFullHeight?: boolean;
+    /**
+     * Позволяет получить контент всплывающего окна без обёртки в виде `RenderContainer`
+     */
     withoutRenderContainer?: boolean;
     /**
-     * Хэндлер, вызываемый при клике по вуали или заголовку
+     * Функция, вызываемая при клике по вуали
      */
     onCloseRequest?: () => void;
+    /**
+     * Позволяет контролировать текущее состояние всплывающего окна
+     */
     opened: boolean;
 }
-interface MobilePopupState {
-    isScrolled: boolean;
-}
 export declare const MobilePopupDataTids: {
     readonly root: "MobilePopup__root";
     readonly container: "MobilePopup__container";
 };
-export declare class MobilePopup extends React.Component<MobilePopupProps, MobilePopupState> {
+export declare class MobilePopup extends React.Component<MobilePopupProps> {
     static __KONTUR_REACT_UI__: string;
-    private contentDiv;
     private theme;
-    state: MobilePopupState;
     render(): JSX.Element;
     renderMain(): JSX.Element;
     close: () => void;
-    private refContent;
-    private handleScrollMenu;
 }
 export {};

package/internal/MobilePopup/MobilePopup.styles/MobilePopup.styles.js

@@ -5,25 +5,25 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 var styles = {
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ", ";\n    "])), t.mobilePopupHeaderBorderRadius);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ", ";\n      overflow: hidden;\n      padding-bottom: ", ";\n      background: ", ";\n    "])), t.mobilePopupContainerBorderRadius, t.mobilePopupContainerBottomPadding, t.menuBgDefault);
   },
-  rootFullHeight: function rootFullHeight(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      justify-content: flex-start;\n      flex-grow: 1;\n    "])), t.bgDefault);
+  wrapper: function wrapper() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    "])));
   },
   content: function content(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      overflow: auto;\n      background-color: ", ";\n    "])), t.bgDefault);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), t.bgDefault);
   },
   container: function container(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: ", ";\n      right: 0;\n      left: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: 100000;\n      border-radius: ", ";\n      transform: translateY(100%);\n      transition: transform 0.25s;\n    "])), t.mobilePopupTopPadding, t.mobilePopupHeaderBorderRadius);
-  },
-  containerOpened: function containerOpened() {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      transform: translateY(0%);\n      transition: transform 0.25s;\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: ", ";\n      left: ", ";\n      right: ", ";\n      z-index: 100000;\n    "])), t.mobilePopupTopPadding, t.mobilePopupOuterIndentY, t.mobilePopupOuterIndentY);
   },
   bg: function bg() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      opacity: 0%;\n      transition: opacity 0.25s;\n    "])));
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      pointer-events: none;\n      opacity: 50%;\n    "])));
+  },
+  bottomIndent: function bottomIndent() {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      height: 80px;\n    "])));
   },
-  bgShowed: function bgShowed() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      transition: opacity 0.25s;\n    "])));
+  zIndex: function zIndex() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      position: relative;\n    "])));
   }
 };
 export var jsStyles = memoizeStyle(styles);

package/internal/MobilePopup/MobilePopup.styles/MobilePopup.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MobilePopup.styles.ts"],"names":["css","memoizeStyle","styles","root","t","mobilePopupHeaderBorderRadius","rootFullHeight","bgDefault","content","container","mobilePopupTopPadding","containerOpened","bg","bgShowed","jsStyles"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;;;;;AAMmBI,IAAAA,CAAC,CAACC,6BANrB;;AAQD,GAVY;;AAYbC,EAAAA,cAZa,0BAYEF,CAZF,EAYY;AACvB,WAAOJ,GAAP;AACsBI,IAAAA,CAAC,CAACG,SADxB;;;;AAKD,GAlBY;;AAoBbC,EAAAA,OApBa,mBAoBLJ,CApBK,EAoBK;AAChB,WAAOJ,GAAP;;AAEsBI,IAAAA,CAAC,CAACG,SAFxB;;AAID,GAzBY;;AA2BbE,EAAAA,SA3Ba,qBA2BHL,CA3BG,EA2BO;AAClB,WAAOJ,GAAP;;AAESI,IAAAA,CAAC,CAACM,qBAFX;;;;;;AAQmBN,IAAAA,CAAC,CAACC,6BARrB;;;;AAYD,GAxCY;;AA0CbM,EAAAA,eA1Ca,6BA0CK;AAChB,WAAOX,GAAP;;;;AAID,GA/CY;;AAiDbY,EAAAA,EAjDa,gBAiDR;AACH,WAAOZ,GAAP;;;;;;;;;;;AAWD,GA7DY;;AA+Dba,EAAAA,QA/Da,sBA+DF;AACT,WAAOb,GAAP;;;;AAID,GApEY,EAAf;;;AAuEA,OAAO,IAAMc,QAAQ,GAAGb,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupHeaderBorderRadius};\n    `;\n  },\n\n  rootFullHeight(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n      justify-content: flex-start;\n      flex-grow: 1;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      overflow: auto;\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: fixed;\n      top: ${t.mobilePopupTopPadding};\n      right: 0;\n      left: 0;\n      bottom: 0;\n      width: 100%;\n      z-index: 100000;\n      border-radius: ${t.mobilePopupHeaderBorderRadius};\n      transform: translateY(100%);\n      transition: transform 0.25s;\n    `;\n  },\n\n  containerOpened() {\n    return css`\n      transform: translateY(0%);\n      transition: transform 0.25s;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      opacity: 0%;\n      transition: opacity 0.25s;\n    `;\n  },\n\n  bgShowed() {\n    return css`\n      opacity: 50%;\n      transition: opacity 0.25s;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}
+{"version":3,"sources":["MobilePopup.styles.ts"],"names":["css","memoizeStyle","styles","root","t","mobilePopupContainerBorderRadius","mobilePopupContainerBottomPadding","menuBgDefault","wrapper","content","bgDefault","container","mobilePopupTopPadding","mobilePopupOuterIndentY","bg","bottomIndent","zIndex","jsStyles"],"mappings":"gOAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;;;;;AAMmBI,IAAAA,CAAC,CAACC,gCANrB;;AAQoBD,IAAAA,CAAC,CAACE,iCARtB;AASgBF,IAAAA,CAAC,CAACG,aATlB;;AAWD,GAbY;;AAebC,EAAAA,OAfa,qBAeH;AACR,WAAOR,GAAP;;;;;;;;AAQD,GAxBY;;AA0BbS,EAAAA,OA1Ba,mBA0BLL,CA1BK,EA0BK;AAChB,WAAOJ,GAAP;AACsBI,IAAAA,CAAC,CAACM,SADxB;;AAGD,GA9BY;;AAgCbC,EAAAA,SAhCa,qBAgCHP,CAhCG,EAgCO;AAClB,WAAOJ,GAAP;;AAESI,IAAAA,CAAC,CAACQ,qBAFX;AAGUR,IAAAA,CAAC,CAACS,uBAHZ;AAIWT,IAAAA,CAAC,CAACS,uBAJb;;;AAOD,GAxCY;;AA0CbC,EAAAA,EA1Ca,gBA0CR;AACH,WAAOd,GAAP;;;;;;;;;;;AAWD,GAtDY;;AAwDbe,EAAAA,YAxDa,0BAwDE;AACb,WAAOf,GAAP;;;AAGD,GA5DY;;AA8DbgB,EAAAA,MA9Da,oBA8DJ;AACP,WAAOhB,GAAP;;;AAGD,GAlEY,EAAf;;;AAqEA,OAAO,IAAMiB,QAAQ,GAAGhB,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst styles = {\n  root(t: Theme) {\n    return css`\n      width: 100%;\n      height: 100%;\n      flex-direction: column;\n      display: flex;\n      justify-content: flex-end;\n      border-radius: ${t.mobilePopupContainerBorderRadius};\n      overflow: hidden;\n      padding-bottom: ${t.mobilePopupContainerBottomPadding};\n      background: ${t.menuBgDefault};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      overflow: auto;\n    `;\n  },\n\n  content(t: Theme) {\n    return css`\n      background-color: ${t.bgDefault};\n    `;\n  },\n\n  container(t: Theme) {\n    return css`\n      position: absolute;\n      top: ${t.mobilePopupTopPadding};\n      left: ${t.mobilePopupOuterIndentY};\n      right: ${t.mobilePopupOuterIndentY};\n      z-index: 100000;\n    `;\n  },\n\n  bg() {\n    return css`\n      position: fixed;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      z-index: 9999;\n      background: #333333;\n      pointer-events: none;\n      opacity: 50%;\n    `;\n  },\n\n  bottomIndent() {\n    return css`\n      height: 80px;\n    `;\n  },\n\n  zIndex() {\n    return css`\n      position: relative;\n    `;\n  },\n};\n\nexport const jsStyles = memoizeStyle(styles);\n"]}

package/internal/MobilePopup/MobilePopup.styles.d.ts

@@ -1,10 +1,10 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const jsStyles: {
     root(t: Theme): string;
-    rootFullHeight(t: Theme): string;
+    wrapper(): string;
     content(t: Theme): string;
     container(t: Theme): string;
-    containerOpened(): string;
     bg(): string;
-    bgShowed(): string;
+    bottomIndent(): string;
+    zIndex(): string;
 };

package/internal/MobilePopup/MobilePopupHeader/MobilePopupHeader/MobilePopupHeader.js

@@ -1,5 +1,6 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
+import { isNonNullable } from "../../../../lib/utils";
 import { cx } from "../../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../../lib/theming/ThemeContext";
 import { jsStyles } from "../MobilePopupHeader.styles";
@@ -7,58 +8,33 @@ export var MobilePopupHeader = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(MobilePopupHeader, _React$Component);
 
   function MobilePopupHeader() {
-    var _this;
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-
-    _this.rootClickHandler = function (e) {
-      e.stopPropagation();
-    };
-
-    _this.wrapperClickHandler = function (e) {
-      _this.props.onClose();
-    };
-
-    return _this;
+    return _React$Component.apply(this, arguments) || this;
   }
 
   var _proto = MobilePopupHeader.prototype;
 
   _proto.render = function render() {
-    var _this2 = this;
+    var _this = this;
 
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+      _this.theme = theme;
+      return _this.renderMain();
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx, _cx2, _cx3;
+    var _cx, _cx2;
 
     var _this$props = this.props,
         caption = _this$props.caption,
-        children = _this$props.children,
-        withShadow = _this$props.withShadow;
+        children = _this$props.children;
     return /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx = {}, _cx[jsStyles.root(this.theme)] = true, _cx[jsStyles.withShadow(this.theme)] = withShadow, _cx)),
-      onClick: this.rootClickHandler
+      className: cx((_cx = {}, _cx[jsStyles.root(this.theme)] = true, _cx[jsStyles.rootWithoutContent()] = !caption && !children, _cx))
     }, /*#__PURE__*/React.createElement("div", {
       className: jsStyles.container()
-    }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.closeWrapper(),
-      onClick: this.wrapperClickHandler
-    }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.closeHolder()
-    })), /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx2 = {}, _cx2[jsStyles.childrenWithoutCaption()] = !caption, _cx2))
-    }, children), caption && /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx3 = {}, _cx3[jsStyles.caption(this.theme)] = true, _cx3))
-    }, caption)));
+    }, caption && /*#__PURE__*/React.createElement("div", {
+      className: cx((_cx2 = {}, _cx2[jsStyles.caption(this.theme)] = true, _cx2[jsStyles.captionWithChildren()] = isNonNullable(children), _cx2))
+    }, caption), /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.createElement("div", null, children)));
   };
 
   return MobilePopupHeader;