@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/components/MenuItem/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './MenuItem';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './MenuItem';\n"]}

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,16 +1,33 @@
-import React, { useContext } from 'react';
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../MenuSeparator.styles";
-/**
-                                                    * Разделитель в меню.
-                                                    */
+import React from 'react';
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { getStyles } from "../MenuSeparator.styles";
+export var MenuSeparatorDataTids = {
+  root: 'MenuSeparator__root'
+};
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
+ */
 
-function MenuSeparator() {
-  var theme = useContext(ThemeContext);
-  return React.createElement("div", {
-    className: jsStyles.root(theme)
-  });
+function MenuSeparator(props) {
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _emotion$cx;
+
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.root(theme)] = true, _emotion$cx[styles.rootMobile(theme)] = isMobile, _emotion$cx))
+    });
+  }));
 }
 
 MenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';
+MenuSeparator.displayName = 'MenuSeparator';
 export { MenuSeparator };

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","jsStyles","MenuSeparator","theme","root","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,QAAT,QAAyB,wBAAzB;;AAEA;;;AAGA,SAASC,aAAT,GAAyB;AACvB,MAAMC,KAAK,GAAGJ,UAAU,CAACC,YAAD,CAAxB;;AAEA,SAAO,6BAAK,SAAS,EAAEC,QAAQ,CAACG,IAAT,CAAcD,KAAd,CAAhB,GAAP;AACD;;AAEDD,aAAa,CAACG,mBAAd,GAAoC,eAApC;;AAEA,SAASH,aAAT","sourcesContent":["import React, { useContext } from 'react';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { jsStyles } from './MenuSeparator.styles';\r\n\r\n/**\r\n * Разделитель в меню.\r\n */\r\nfunction MenuSeparator() {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return <div className={jsStyles.root(theme)} />;\r\n}\r\n\r\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\r\n\r\nexport { MenuSeparator };\r\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","CommonWrapper","ResponsiveLayout","useTheme","useEmotion","getStyles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","emotion","styles","isMobile","cx","rootMobile","__KONTUR_REACT_UI__","displayName"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,qBAAjC;AACA,SAASC,QAAT,QAAyB,4BAAzB;AACA,SAASC,UAAT,QAA2B,2BAA3B;;AAEA,SAASC,SAAT,QAA0B,wBAA1B;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGP,QAAQ,EAAtB;AACA,MAAMQ,OAAO,GAAGP,UAAU,EAA1B;AACA,MAAMQ,MAAM,GAAGP,SAAS,CAACM,OAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBF,KAAnB;AACE,wBAAC,gBAAD;AACG,oBAAkB,qBAAfI,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUP,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAEI,OAAO,CAACG,EAAR,gCAAcF,MAAM,CAACL,IAAP,CAAYG,KAAZ,CAAd,IAAmC,IAAnC,cAA0CE,MAAM,CAACG,UAAP,CAAkBL,KAAlB,CAA1C,IAAqEG,QAArE,eAFb,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDL,aAAa,CAACQ,mBAAd,GAAoC,eAApC;AACAR,aAAa,CAACS,WAAd,GAA4B,eAA5B;;AAEA,SAAST,aAAT","sourcesContent":["import React from 'react';\n\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useTheme();\n  const emotion = useEmotion();\n  const styles = getStyles(emotion);\n\n  return (\n    <CommonWrapper {...props}>\n      <ResponsiveLayout>\n        {({ isMobile }) => {\n          return (\n            <div\n              data-tid={MenuSeparatorDataTids.root}\n              className={emotion.cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n            />\n          );\n        }}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\nMenuSeparator.displayName = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,9 +1,16 @@
-/// <reference types="react" />
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type MenuSeparatorProps = CommonProps;
+export declare const MenuSeparatorDataTids: {
+    readonly root: "MenuSeparator__root";
+};
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
-declare function MenuSeparator(): JSX.Element;
+declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {
     var __KONTUR_REACT_UI__: string;
+    var displayName: string;
 }
 export { MenuSeparator };

package/components/MenuSeparator/MenuSeparator.md

@@ -0,0 +1,14 @@
+Пример меню с разделителями.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
+  <MenuItem>У меня есть разделитель</MenuItem>
+  <MenuSeparator />
+  <MenuItem>У меня тоже!</MenuItem>
+  <MenuSeparator />
+  <MenuItem>А у меня нет :(</MenuItem>
+  <MenuItem>Как и у меня :(</MenuItem>
+</DropdownMenu>;
+```

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js

@@ -1,19 +1,15 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin: 5px 0;\n      border-top: 1px solid ", ";\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  root: function root(t) {
-    return css(_templateObject(), t.menuSeparatorBorderColor);
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+var _templateObject, _templateObject2;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root(t) {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        margin: ", " ", ";\n        border-top: ", " solid ", ";\n      "])), t.menuSeparatorMarginY, t.menuSeparatorMarginX, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+    },
+    rootMobile: function rootMobile(t) {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        margin: ", " ", ";\n        border-radius: 1px;\n      "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
+    }
+  });
+};

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorBorderColor","jsStyles"],"mappings":"iTAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;;AAE0BI,IAAAA,CAAC,CAACC,wBAF5B;;AAID,GANY,EAAf;;;AASA,OAAO,IAAMC,QAAQ,GAAGL,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      margin: 5px 0;\r\n      border-top: 1px solid ${t.menuSeparatorBorderColor};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["memoizeStyle","getStyles","emotion","root","t","css","menuSeparatorMarginY","menuSeparatorMarginX","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;;AAGA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBF,IAAAA,YAAY,CAAC;AACXG,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACE,oBADd,EACsCF,CAAC,CAACG,oBADxC;AAEgBH,QAAAA,CAAC,CAACI,wBAFlB,EAEoDJ,CAAC,CAACK,wBAFtD;;AAID,OANU;;AAQXC,MAAAA,UARW,sBAQAN,CARA,EAQU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACO,0BADd,EAC4CP,CAAC,CAACQ,0BAD9C;;;AAID,OAbU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        margin: ${t.menuSeparatorMarginY} ${t.menuSeparatorMarginX};\n        border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n      `;\n    },\n\n    rootMobile(t: Theme) {\n      return emotion.css`\n        margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n        border-radius: 1px;\n      `;\n    },\n  });\n"]}

package/components/MenuSeparator/MenuSeparator.styles.d.ts

@@ -1,3 +1,6 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    root(t: Theme): string;
+    rootMobile(t: Theme): string;
 };

package/components/MenuSeparator/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './MenuSeparator';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAd","sourcesContent":["export * from './MenuSeparator';\n"]}

package/components/MiniModal/MiniModal/MiniModal.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children", "theme"];
+import React from 'react';
+import { Modal } from "../../Modal";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { getMiniModalTheme } from "../getMiniModalTheme";
+import { MiniModalFooter } from "../MiniModalFooter";
+import { MiniModalHeader } from "../MiniModalHeader";
+import { MiniModalBody } from "../MiniModalBody";
+import { MiniModalIndent } from "../MiniModalIndent";
+export var MiniModalDataTids = {
+  icon: 'MiniModal__icon',
+  title: 'MiniModal__title',
+  description: 'MiniModal__description',
+  actions: 'MiniModal__actions',
+  indent: 'MiniModal__indent'
+};
+export var MiniModal = forwardRefAndName('MiniModal', function (_ref, ref) {
+  var children = _ref.children,
+      propsTheme = _ref.theme,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var contextTheme = useTheme();
+  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+    value: getMiniModalTheme(contextTheme, propsTheme)
+  }, /*#__PURE__*/React.createElement(Modal, _extends({
+    width: 400,
+    noClose: true,
+    ref: ref
+  }, rest), children));
+});
+MiniModal.Header = MiniModalHeader;
+MiniModal.Footer = MiniModalFooter;
+MiniModal.Indent = MiniModalIndent;
+MiniModal.Body = MiniModalBody;

package/components/MiniModal/MiniModal/MiniModal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.tsx"],"names":["React","Modal","forwardRefAndName","useTheme","ThemeContext","getMiniModalTheme","MiniModalFooter","MiniModalHeader","MiniModalBody","MiniModalIndent","MiniModalDataTids","icon","title","description","actions","indent","MiniModal","ref","children","propsTheme","theme","rest","contextTheme","Header","Footer","Indent","Body"],"mappings":"oMAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,KAAT,QAAkC,UAAlC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,QAAT,QAAyB,4BAAzB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,eAAT,QAAgC,mBAAhC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,eAAT,QAAgC,mBAAhC;;AAEA,OAAO,IAAMC,iBAAiB,GAAG;AAC/BC,EAAAA,IAAI,EAAE,iBADyB;AAE/BC,EAAAA,KAAK,EAAE,kBAFwB;AAG/BC,EAAAA,WAAW,EAAE,wBAHkB;AAI/BC,EAAAA,OAAO,EAAE,oBAJsB;AAK/BC,EAAAA,MAAM,EAAE,mBALuB,EAA1B;;;AAQP,OAAO,IAAMC,SAAS,GAAGd,iBAAiB;;;;;;;;;AASxC,WATwC,EAS3B,gBAA2Ce,GAA3C,EAAmD,KAAhDC,QAAgD,QAAhDA,QAAgD,CAA/BC,UAA+B,QAAtCC,KAAsC,CAAhBC,IAAgB;AAChE,MAAMC,YAAY,GAAGnB,QAAQ,EAA7B;;AAEA;AACE,wBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAEE,iBAAiB,CAACiB,YAAD,EAAeH,UAAf,CAA/C;AACE,wBAAC,KAAD,aAAO,KAAK,EAAE,GAAd,EAAmB,OAAO,MAA1B,EAA2B,GAAG,EAAEF,GAAhC,IAAyCI,IAAzC;AACGH,IAAAA,QADH,CADF,CADF;;;;AAOD,CAnByC,CAAnC;;AAqBPF,SAAS,CAACO,MAAV,GAAmBhB,eAAnB;AACAS,SAAS,CAACQ,MAAV,GAAmBlB,eAAnB;AACAU,SAAS,CAACS,MAAV,GAAmBhB,eAAnB;AACAO,SAAS,CAACU,IAAV,GAAiBlB,aAAjB","sourcesContent":["import React from 'react';\n\nimport { Modal, ModalProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getMiniModalTheme } from './getMiniModalTheme';\nimport { MiniModalFooter } from './MiniModalFooter';\nimport { MiniModalHeader } from './MiniModalHeader';\nimport { MiniModalBody } from './MiniModalBody';\nimport { MiniModalIndent } from './MiniModalIndent';\n\nexport const MiniModalDataTids = {\n  icon: 'MiniModal__icon',\n  title: 'MiniModal__title',\n  description: 'MiniModal__description',\n  actions: 'MiniModal__actions',\n  indent: 'MiniModal__indent',\n} as const;\n\nexport const MiniModal = forwardRefAndName<\n  Modal,\n  ModalProps,\n  {\n    Header: typeof MiniModalHeader;\n    Indent: typeof MiniModalIndent;\n    Footer: typeof MiniModalFooter;\n    Body: typeof MiniModalBody;\n  }\n>('MiniModal', ({ children, theme: propsTheme, ...rest }, ref) => {\n  const contextTheme = useTheme();\n\n  return (\n    <ThemeContext.Provider value={getMiniModalTheme(contextTheme, propsTheme)}>\n      <Modal width={400} noClose ref={ref} {...rest}>\n        {children}\n      </Modal>\n    </ThemeContext.Provider>\n  );\n});\n\nMiniModal.Header = MiniModalHeader;\nMiniModal.Footer = MiniModalFooter;\nMiniModal.Indent = MiniModalIndent;\nMiniModal.Body = MiniModalBody;\n"]}

package/components/MiniModal/MiniModal/package.json

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

package/components/MiniModal/MiniModal.d.ts

@@ -0,0 +1,18 @@
+import { Modal, ModalProps } from '../Modal';
+import { MiniModalFooter } from './MiniModalFooter';
+import { MiniModalHeader } from './MiniModalHeader';
+import { MiniModalBody } from './MiniModalBody';
+import { MiniModalIndent } from './MiniModalIndent';
+export declare const MiniModalDataTids: {
+    readonly icon: "MiniModal__icon";
+    readonly title: "MiniModal__title";
+    readonly description: "MiniModal__description";
+    readonly actions: "MiniModal__actions";
+    readonly indent: "MiniModal__indent";
+};
+export declare const MiniModal: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<Modal, ModalProps> & {
+    Header: typeof MiniModalHeader;
+    Indent: typeof MiniModalIndent;
+    Footer: typeof MiniModalFooter;
+    Body: typeof MiniModalBody;
+};

package/components/MiniModal/MiniModal.md

@@ -0,0 +1,233 @@
+Этот компонент обёртка над [Modal](#/Components/Modal/Modal).
+
+`MiniModal` — модальное диалоговое окно, которое предполагает обязательный отклик пользователя по одному из доступных действий.
+Закрытие окна по клику на фон или "крестик" не рекомендуется, т.к. у этих действий нет однозначного описания в 
+отличие от кнопок с названиями, наподобие "Сохранить", "Подтвердить" и т.п.
+
+👉 По макету предполагается, что все кнопки должны быть среднего размера `size = medium`.
+
+Примеры использования:
+
+### Уведомление
+
+Самый простой вариант использования:
+
+```jsx harmony
+import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
+import { MoneyTypeCoinsIcon } from '@skbkontur/icons/MoneyTypeCoinsIcon';
+
+const PayNotifice = () => {
+
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header>
+            Простое уведомление
+          </MiniModal.Header>
+          <MiniModal.Body>
+            Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
+          </MiniModal.Body>
+          <MiniModal.Footer>
+            <Button size="medium" use="primary" onClick={close}>Понятно</Button>
+          </MiniModal.Footer>
+        </MiniModal>
+      )}
+      <Button use="pay" onClick={open} icon={<MoneyTypeCoinsIcon/>}>Оплата</Button>
+    </>
+  );
+}
+
+<PayNotifice />
+```
+
+### Подтверждение
+
+Иногда от пользователя требуется выбрать одно из доступных действий.
+
+Например, подтвердить важное действие или отклонить его:
+
+```jsx harmony
+import { MiniModal, Button, Gapped, ThemeContext } from '@skbkontur/react-ui';
+import { TrashCanIcon } from '@skbkontur/icons/TrashCanIcon';
+
+const ConfirmDelete = ({ name, handleDelete }) => {
+  const theme = React.useContext(ThemeContext);
+
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const mainAction = () => {
+    handleDelete();
+    close();
+  };
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header icon={<TrashCanIcon size={64} color={theme.btnDangerBg}/>}>
+            Удалить "{name}"?
+          </MiniModal.Header>
+          <MiniModal.Footer direction="column">
+            <Button use="danger" size="medium" onClick={mainAction}>Удалить</Button>
+            <Button size="medium" onClick={close}>Отменить</Button>
+          </MiniModal.Footer>
+        </MiniModal>
+      )}
+      <Button onClick={open} icon={<TrashCanIcon weight="light"/>}/>
+    </>
+  );
+}
+
+const list = ['Отчёт № 111', 'Отчёт № 222', 'Отчёт № 333'];
+
+<Gapped vertical>
+  {list.map((name) => (
+    <Gapped key={name}>
+      <div style={{ width: 200, borderBottom: 'dashed 1px' }}>
+        {name}
+      </div>
+      <span>
+        <ConfirmDelete name={name} handleDelete={() => alert(`${name} удалён`)}/>
+      </span>
+    </Gapped>
+  ))}
+</Gapped>
+```
+
+### Синглтон
+
+Одно и то же диалоговое окно может вызываться в разных частях приложения.
+
+В таком случае стоит реализовать паттерн синглтона:
+
+```jsx harmony
+import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
+import { NotificationBellAlarmIcon16Solid } from '@skbkontur/icons/NotificationBellAlarmIcon16Solid';
+import { NotificationBellAlarmIcon64Regular } from '@skbkontur/icons/NotificationBellAlarmIcon64Regular';
+
+const EnableNotification = React.forwardRef(({ setStatus }, ref) => {
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const handleAllowAll = () => {
+    setStatus('Разрешить все');
+    close();
+  };
+  const handleAllowBasic = () => {
+    setStatus('Разрешить только основные');
+    close();
+  };
+  const handleDenyAll = () => {
+    setStatus('Запретить');
+    close();
+  };
+
+  React.useImperativeHandle(ref, () => ({ open, close }), []);
+
+  return isOpened && (
+    <MiniModal>
+      <MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
+        Разрешить уведомления?
+      </MiniModal.Header>
+      <MiniModal.Footer direction="column">
+        <Button use="primary" size="medium" onClick={handleAllowAll}>Разрешить все</Button>
+        <Button size="medium" onClick={handleAllowBasic}>Разрешить только основные</Button>
+        <MiniModal.Indent/>
+        <Button size="medium" onClick={handleDenyAll}>Запретить</Button>
+      </MiniModal.Footer>
+    </MiniModal>
+  );
+});
+
+const [status, setStatus] = React.useState('-не выбрано-');
+
+const NotificationEnableRef = React.useRef(null);
+
+const NotificationEnableOpen = () => NotificationEnableRef.current && NotificationEnableRef.current.open();
+
+<>
+  <EnableNotification ref={NotificationEnableRef} setStatus={setStatus}/>
+  <Gapped vertical>
+    <span>
+      <NotificationBellAlarmIcon16Solid/> Статус уведомлений: {status}
+    </span>
+    <Button use="text" theme={{ btnTextBg: '#D6D6D6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+    <Button use="text" theme={{ btnTextBg: '#E6E6E6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+    <Button use="text" theme={{ btnTextBg: '#F0F0F0' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
+  </Gapped>
+</>
+```
+
+### Ожидание
+
+Некоторые действия для корректного исполнения требуют блокировки других действий пользователя.
+
+В таких случаях можно, например, использовать проп `loading` для `Button`, и не позволять закрыть окно до конца исполнения:
+
+```jsx harmony
+import { Button, Gapped } from '@skbkontur/react-ui';
+
+const WaitingUpdate = ({ handleUpdate, setLastUpdated }) => {
+
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpened, setIsOpened] = React.useState(false);
+
+  const open = () => setIsOpened(true);
+  const close = () => setIsOpened(false);
+
+  const handleMainClick = () => {
+    setIsLoading(true);
+    handleUpdate()
+      .then(() => {
+        setIsLoading(false);
+        setIsOpened(false);
+        setLastUpdated(new Date());
+      });
+  };
+
+  return (
+    <>
+      {isOpened && (
+        <MiniModal>
+          <MiniModal.Header>
+            Обновить?
+          </MiniModal.Header>
+          <MiniModal.Body>
+            После вашего подтверждения другие действия на странице будут заблокированы на несколько секунд.
+          </MiniModal.Body>
+          <MiniModal.Footer>
+            <Button use="success" size="medium" onClick={handleMainClick} loading={isLoading}>Обновить</Button>
+            <Button size="medium" onClick={close} disabled={isLoading}>Отменить</Button>
+          </MiniModal.Footer>
+
+        </MiniModal>
+      )}
+      <Button onClick={open} use="success">Обновить</Button>
+    </>
+  );
+}
+
+const dateTimeFormat = new Intl.DateTimeFormat('nu', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+
+const [lastUpdated, setLastUpdated] = React.useState(new Date());
+
+const handleUpdate = () => new Promise((resolve) => setTimeout(resolve, 1500));
+
+<Gapped>
+  <WaitingUpdate handleUpdate={handleUpdate} setLastUpdated={setLastUpdated} />
+  <span>
+    Последнее обновление: {dateTimeFormat.format(lastUpdated)}
+  </span>
+</Gapped>
+```

package/components/MiniModal/MiniModal.styles/MiniModal.styles.js

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+import { globalClasses as buttonGlobalClasses } from "../../Button/Button.styles";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    icon: function icon() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        text-align: center;\n      "])));
+    },
+    description: function description() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        text-align: center;\n      "])));
+    },
+    title: function title() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        text-align: center;\n      "])));
+    },
+    titleWithIcon: function titleWithIcon(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        margin-top: ", ";\n      "])), t.miniModalTitleMarginTop);
+    },
+    actions: function actions(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        display: flex;\n        justify-content: stretch;\n        text-align: center;\n        gap: ", ";\n\n        .", " {\n          width: 100%;\n        }\n      "])), t.miniModalActionGap, buttonGlobalClasses.root);
+    },
+    actionsIndent: function actionsIndent(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        height: ", ";\n      "])), t.miniModalCancelIndent);
+    },
+    actionsIndentIE11Fallback: function actionsIndentIE11Fallback(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        padding: ", " 0;\n      "])), t.miniModalCancelIndent);
+    },
+    actionsRow: function actionsRow() {
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        flex-direction: row;\n      "])));
+    },
+    actionsColumn: function actionsColumn() {
+      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        flex-direction: column;\n      "])));
+    },
+    actionsRowIE11Fallback: function actionsRowIE11Fallback(t) {
+      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        > *:nth-of-type(1) {\n          margin-right: calc(", " / 2);\n        }\n        > *:nth-of-type(2) {\n          margin-left: calc(", " / 2);\n        }\n      "])), t.miniModalActionGap, t.miniModalActionGap);
+    },
+    actionsColumnIE11Fallback: function actionsColumnIE11Fallback(t) {
+      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        > *:nth-of-type(2) {\n          margin-top: ", ";\n        }\n        > *:nth-of-type(3) {\n          margin-top: ", ";\n        }\n      "])), t.miniModalActionGap, t.miniModalActionGap);
+    }
+  });
+};

package/components/MiniModal/MiniModal.styles/MiniModal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.styles.ts"],"names":["memoizeStyle","globalClasses","buttonGlobalClasses","getStyles","emotion","icon","css","description","title","titleWithIcon","t","miniModalTitleMarginTop","actions","miniModalActionGap","root","actionsIndent","miniModalCancelIndent","actionsIndentIE11Fallback","actionsRow","actionsColumn","actionsRowIE11Fallback","actionsColumnIE11Fallback"],"mappings":";;AAEA,SAASA,YAAT,QAA6B,2BAA7B;;AAEA,SAASC,aAAa,IAAIC,mBAA1B,QAAqD,yBAArD;;AAEA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvBJ,IAAAA,YAAY,CAAC;AACXK,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;AAGD,OALU;;AAOXC,MAAAA,WAPW,yBAOG;AACZ,eAAOH,OAAO,CAACE,GAAf;;;AAGD,OAXU;;AAaXE,MAAAA,KAbW,mBAaH;AACN,eAAOJ,OAAO,CAACE,GAAf;;;AAGD,OAjBU;;AAmBXG,MAAAA,aAnBW,yBAmBGC,CAnBH,EAmBa;AACtB,eAAON,OAAO,CAACE,GAAf;AACgBI,QAAAA,CAAC,CAACC,uBADlB;;AAGD,OAvBU;;AAyBXC,MAAAA,OAzBW,mBAyBHF,CAzBG,EAyBO;AAChB,eAAON,OAAO,CAACE,GAAf;;;;AAISI,QAAAA,CAAC,CAACG,kBAJX;;AAMKX,QAAAA,mBAAmB,CAACY,IANzB;;;;AAUD,OApCU;;AAsCXC,MAAAA,aAtCW,yBAsCGL,CAtCH,EAsCa;AACtB,eAAON,OAAO,CAACE,GAAf;AACYI,QAAAA,CAAC,CAACM,qBADd;;AAGD,OA1CU;;AA4CXC,MAAAA,yBA5CW,qCA4CeP,CA5Cf,EA4CyB;AAClC,eAAON,OAAO,CAACE,GAAf;AACaI,QAAAA,CAAC,CAACM,qBADf;;AAGD,OAhDU;;AAkDXE,MAAAA,UAlDW,wBAkDE;AACX,eAAOd,OAAO,CAACE,GAAf;;;AAGD,OAtDU;;AAwDXa,MAAAA,aAxDW,2BAwDK;AACd,eAAOf,OAAO,CAACE,GAAf;;;AAGD,OA5DU;;AA8DXc,MAAAA,sBA9DW,kCA8DYV,CA9DZ,EA8DsB;AAC/B,eAAON,OAAO,CAACE,GAAf;;AAEyBI,QAAAA,CAAC,CAACG,kBAF3B;;;AAKwBH,QAAAA,CAAC,CAACG,kBAL1B;;;AAQD,OAvEU;;AAyEXQ,MAAAA,yBAzEW,qCAyEeX,CAzEf,EAyEyB;AAClC,eAAON,OAAO,CAACE,GAAf;;AAEkBI,QAAAA,CAAC,CAACG,kBAFpB;;;AAKkBH,QAAAA,CAAC,CAACG,kBALpB;;;AAQD,OAlFU,EAAD,CADW,GAAlB","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    icon() {\n      return emotion.css`\n        text-align: center;\n      `;\n    },\n\n    description() {\n      return emotion.css`\n        text-align: center;\n      `;\n    },\n\n    title() {\n      return emotion.css`\n        text-align: center;\n      `;\n    },\n\n    titleWithIcon(t: Theme) {\n      return emotion.css`\n        margin-top: ${t.miniModalTitleMarginTop};\n      `;\n    },\n\n    actions(t: Theme) {\n      return emotion.css`\n        display: flex;\n        justify-content: stretch;\n        text-align: center;\n        gap: ${t.miniModalActionGap};\n\n        .${buttonGlobalClasses.root} {\n          width: 100%;\n        }\n      `;\n    },\n\n    actionsIndent(t: Theme) {\n      return emotion.css`\n        height: ${t.miniModalCancelIndent};\n      `;\n    },\n\n    actionsIndentIE11Fallback(t: Theme) {\n      return emotion.css`\n        padding: ${t.miniModalCancelIndent} 0;\n      `;\n    },\n\n    actionsRow() {\n      return emotion.css`\n        flex-direction: row;\n      `;\n    },\n\n    actionsColumn() {\n      return emotion.css`\n        flex-direction: column;\n      `;\n    },\n\n    actionsRowIE11Fallback(t: Theme) {\n      return emotion.css`\n        > *:nth-of-type(1) {\n          margin-right: calc(${t.miniModalActionGap} / 2);\n        }\n        > *:nth-of-type(2) {\n          margin-left: calc(${t.miniModalActionGap} / 2);\n        }\n      `;\n    },\n\n    actionsColumnIE11Fallback(t: Theme) {\n      return emotion.css`\n        > *:nth-of-type(2) {\n          margin-top: ${t.miniModalActionGap};\n        }\n        > *:nth-of-type(3) {\n          margin-top: ${t.miniModalActionGap};\n        }\n      `;\n    },\n  });\n"]}

package/components/MiniModal/MiniModal.styles/package.json

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

package/components/MiniModal/MiniModal.styles.d.ts

@@ -0,0 +1,15 @@
+import type { Emotion } from '@emotion/css/create-instance';
+import { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: (emotion: Emotion) => {
+    icon(): string;
+    description(): string;
+    title(): string;
+    titleWithIcon(t: Theme): string;
+    actions(t: Theme): string;
+    actionsIndent(t: Theme): string;
+    actionsIndentIE11Fallback(t: Theme): string;
+    actionsRow(): string;
+    actionsColumn(): string;
+    actionsRowIE11Fallback(t: Theme): string;
+    actionsColumnIE11Fallback(t: Theme): string;
+};

package/components/MiniModal/MiniModalBody/MiniModalBody.js

@@ -0,0 +1,27 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["children"];
+import React from 'react';
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { Modal } from "../../Modal";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { MiniModalDataTids } from "../MiniModal";
+import { getStyles } from "../MiniModal.styles";
+/**
+ * Обёртка над Modal.Body
+ *
+ * @visibleName MiniModal.Body
+ */
+
+export var MiniModalBody = forwardRefAndName('MiniModalBody', function (_ref, ref) {
+  var children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+    var styles = getStyles(emotion);
+    return /*#__PURE__*/React.createElement(Modal.Body, rest, /*#__PURE__*/React.createElement("div", {
+      "data-tid": MiniModalDataTids.description,
+      ref: ref,
+      className: styles.description()
+    }, children));
+  });
+});

package/components/MiniModal/MiniModalBody/MiniModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModalBody.tsx"],"names":["React","forwardRefAndName","Modal","EmotionConsumer","MiniModalDataTids","getStyles","MiniModalBody","ref","children","rest","emotion","styles","description"],"mappings":"iIAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,KAAT,QAAsC,UAAtC;AACA,SAASC,eAAT,QAAgC,2BAAhC;;AAEA,SAASC,iBAAT,QAAkC,aAAlC;AACA,SAASC,SAAT,QAA0B,oBAA1B;;AAEA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAGL,iBAAiB;AAC5C,eAD4C;AAE5C,gBAAwBM,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B;AACE,wBAAC,eAAD;AACG,cAACC,OAAD,EAAa;AACZ,UAAMC,MAAM,GAAGN,SAAS,CAACK,OAAD,CAAxB;AACA;AACE,4BAAC,KAAD,CAAO,IAAP,EAAgBD,IAAhB;AACE,qCAAK,YAAUL,iBAAiB,CAACQ,WAAjC,EAA8C,GAAG,EAAEL,GAAnD,EAAwD,SAAS,EAAEI,MAAM,CAACC,WAAP,EAAnE;AACGJ,QAAAA,QADH,CADF,CADF;;;;AAOD,KAVH,CADF;;;AAcD,CAjB2C,CAAvC","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { Modal, ModalBodyProps } from '../Modal';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { getStyles } from './MiniModal.styles';\n\n/**\n * Обёртка над Modal.Body\n *\n * @visibleName MiniModal.Body\n */\nexport const MiniModalBody = forwardRefAndName<HTMLDivElement, ModalBodyProps>(\n  'MiniModalBody',\n  ({ children, ...rest }, ref) => {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const styles = getStyles(emotion);\n          return (\n            <Modal.Body {...rest}>\n              <div data-tid={MiniModalDataTids.description} ref={ref} className={styles.description()}>\n                {children}\n              </div>\n            </Modal.Body>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  },\n);\n"]}

package/components/MiniModal/MiniModalBody/package.json

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

package/components/MiniModal/MiniModalBody.d.ts

@@ -0,0 +1,7 @@
+import { ModalBodyProps } from '../Modal';
+/**
+ * Обёртка над Modal.Body
+ *
+ * @visibleName MiniModal.Body
+ */
+export declare const MiniModalBody: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, ModalBodyProps> & Record<never, never>;

package/components/MiniModal/MiniModalFooter/MiniModalFooter.js

@@ -0,0 +1,37 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _excluded = ["direction", "children"];
+import React from 'react';
+import { Modal } from "../../Modal";
+import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { isIE11 } from "../../../lib/client";
+import { useEmotion } from "../../../lib/theming/Emotion";
+import { useTheme } from "../../../lib/theming/useTheme";
+import { getStyles } from "../MiniModal.styles";
+import { MiniModalDataTids } from "../MiniModal";
+/**
+ * Обёртка над Modal.Footer
+ *
+ * @visibleName MiniModal.Footer
+ */
+
+export var MiniModalFooter = forwardRefAndName('MiniModalFooter', function (_ref, ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+      children = _ref.children,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var theme = useTheme();
+  var emotion = useEmotion();
+  var styles = getStyles(emotion);
+  var childrenCount = React.Children.count(children);
+
+  var _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction; // IE11 does not support CSS property `gap`
+
+
+  var IE11FallbackClasses = isIE11 && emotion.cx(_direction === 'row' && styles.actionsRowIE11Fallback(theme), _direction === 'column' && styles.actionsColumnIE11Fallback(theme));
+  return /*#__PURE__*/React.createElement(Modal.Footer, rest, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-tid": MiniModalDataTids.actions,
+    className: emotion.cx(styles.actions(theme), _direction === 'row' && styles.actionsRow(), _direction === 'column' && styles.actionsColumn(), IE11FallbackClasses)
+  }, children));
+});