@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/cjs/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/cjs/components/MiniModal/MiniModal.styles.d.ts

@@ -0,0 +1,14 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    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/cjs/components/MiniModal/MiniModal.styles.js

@@ -0,0 +1,87 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+
+var _Button = require("../Button/Button.styles");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+
+var styles = (0, _Emotion.memoizeStyle)({
+  icon: function icon() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: center;\n    "])));
+
+
+  },
+
+  description: function description() {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: center;\n    "])));
+
+
+  },
+
+  title: function title() {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-align: center;\n    "])));
+
+
+  },
+
+  titleWithIcon: function titleWithIcon(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: ", ";\n    "])),
+    t.miniModalTitleMarginTop);
+
+  },
+
+  actions: function actions(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: flex;\n      justify-content: stretch;\n      text-align: center;\n      gap: ", ";\n\n      .", " {\n        width: 100%;\n      }\n    "])),
+
+
+
+    t.miniModalActionGap,
+
+    _Button.globalClasses.root);
+
+
+
+  },
+
+  actionsIndent: function actionsIndent(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    t.miniModalCancelIndent);
+
+  },
+
+  actionsIndentIE11Fallback: function actionsIndentIE11Fallback(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " 0;\n    "])),
+    t.miniModalCancelIndent);
+
+  },
+
+  actionsRow: function actionsRow() {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: row;\n    "])));
+
+
+  },
+
+  actionsColumn: function actionsColumn() {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      flex-direction: column;\n    "])));
+
+
+  },
+
+  actionsRowIE11Fallback: function actionsRowIE11Fallback(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      > *:nth-of-type(2) {\n        margin-top: ", ";\n      }\n      > *:nth-of-type(3) {\n        margin-top: ", ";\n      }\n    "])),
+
+    t.miniModalActionGap,
+
+
+    t.miniModalActionGap);
+
+
+  } });exports.styles = styles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.styles.ts"],"names":["styles","icon","css","description","title","titleWithIcon","t","miniModalTitleMarginTop","actions","miniModalActionGap","buttonGlobalClasses","root","actionsIndent","miniModalCancelIndent","actionsIndentIE11Fallback","actionsRow","actionsColumn","actionsRowIE11Fallback","actionsColumnIE11Fallback"],"mappings":"oRAAA;;AAEA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,WAPiC,yBAOnB;AACZ,eAAOD,YAAP;;;AAGD,GAXgC;;AAajCE,EAAAA,KAbiC,mBAazB;AACN,eAAOF,YAAP;;;AAGD,GAjBgC;;AAmBjCG,EAAAA,aAnBiC,yBAmBnBC,CAnBmB,EAmBT;AACtB,eAAOJ,YAAP;AACgBI,IAAAA,CAAC,CAACC,uBADlB;;AAGD,GAvBgC;;AAyBjCC,EAAAA,OAzBiC,mBAyBzBF,CAzByB,EAyBf;AAChB,eAAOJ,YAAP;;;;AAISI,IAAAA,CAAC,CAACG,kBAJX;;AAMKC,0BAAoBC,IANzB;;;;AAUD,GApCgC;;AAsCjCC,EAAAA,aAtCiC,yBAsCnBN,CAtCmB,EAsCT;AACtB,eAAOJ,YAAP;AACYI,IAAAA,CAAC,CAACO,qBADd;;AAGD,GA1CgC;;AA4CjCC,EAAAA,yBA5CiC,qCA4CPR,CA5CO,EA4CG;AAClC,eAAOJ,YAAP;AACaI,IAAAA,CAAC,CAACO,qBADf;;AAGD,GAhDgC;;AAkDjCE,EAAAA,UAlDiC,wBAkDpB;AACX,eAAOb,YAAP;;;AAGD,GAtDgC;;AAwDjCc,EAAAA,aAxDiC,2BAwDjB;AACd,eAAOd,YAAP;;;AAGD,GA5DgC;;AA8DjCe,EAAAA,sBA9DiC,kCA8DVX,CA9DU,EA8DA;AAC/B,eAAOJ,YAAP;;AAEyBI,IAAAA,CAAC,CAACG,kBAF3B;;;AAKwBH,IAAAA,CAAC,CAACG,kBAL1B;;;AAQD,GAvEgC;;AAyEjCS,EAAAA,yBAzEiC,qCAyEPZ,CAzEO,EAyEG;AAClC,eAAOJ,YAAP;;AAEkBI,IAAAA,CAAC,CAACG,kBAFpB;;;AAKkBH,IAAAA,CAAC,CAACG,kBALpB;;;AAQD,GAlFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { globalClasses as buttonGlobalClasses } from '../Button/Button.styles';\n\nexport const styles = memoizeStyle({\n  icon() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  description() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  title() {\n    return css`\n      text-align: center;\n    `;\n  },\n\n  titleWithIcon(t: Theme) {\n    return css`\n      margin-top: ${t.miniModalTitleMarginTop};\n    `;\n  },\n\n  actions(t: Theme) {\n    return 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 css`\n      height: ${t.miniModalCancelIndent};\n    `;\n  },\n\n  actionsIndentIE11Fallback(t: Theme) {\n    return css`\n      padding: ${t.miniModalCancelIndent} 0;\n    `;\n  },\n\n  actionsRow() {\n    return css`\n      flex-direction: row;\n    `;\n  },\n\n  actionsColumn() {\n    return css`\n      flex-direction: column;\n    `;\n  },\n\n  actionsRowIE11Fallback(t: Theme) {\n    return 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 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/cjs/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/cjs/components/MiniModal/MiniModalBody.js

@@ -0,0 +1,24 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MiniModalBody = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _Modal = require("../Modal");
+
+var _MiniModal = require("./MiniModal");
+var _MiniModal2 = require("./MiniModal.styles");var _excluded = ["children"];
+
+/**
+ * Обёртка над Modal.Body
+ *
+ * @visibleName MiniModal.Body
+ */
+var MiniModalBody = (0, _forwardRefAndName.forwardRefAndName)(
+'MiniModalBody',
+function (_ref, ref) {var children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  return /*#__PURE__*/(
+    _react.default.createElement(_Modal.Modal.Body, rest, /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": _MiniModal.MiniModalDataTids.description, ref: ref, className: _MiniModal2.styles.description() },
+    children)));
+
+
+
+});exports.MiniModalBody = MiniModalBody;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModalBody.tsx"],"names":["MiniModalBody","ref","children","rest","MiniModalDataTids","description","styles"],"mappings":"+RAAA;;AAEA;AACA;;AAEA;AACA,gD;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,aAAa,GAAG;AAC3B,eAD2B;AAE3B,gBAAwBC,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B;AACE,iCAAC,YAAD,CAAO,IAAP,EAAgBA,IAAhB;AACE,0CAAK,YAAUC,6BAAkBC,WAAjC,EAA8C,GAAG,EAAEJ,GAAnD,EAAwD,SAAS,EAAEK,mBAAOD,WAAP,EAAnE;AACGH,IAAAA,QADH,CADF,CADF;;;;AAOD,CAV0B,CAAtB,C","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { Modal, ModalBodyProps } from '../Modal';\n\nimport { MiniModalDataTids } from './MiniModal';\nimport { styles } 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      <Modal.Body {...rest}>\n        <div data-tid={MiniModalDataTids.description} ref={ref} className={styles.description()}>\n          {children}\n        </div>\n      </Modal.Body>\n    );\n  },\n);\n"]}

package/cjs/components/MiniModal/MiniModalFooter.d.ts

@@ -0,0 +1,18 @@
+import { ModalFooterProps } from '../Modal';
+interface MiniModalFooterProps extends ModalFooterProps {
+    /**
+     * Направление позиционирования кнопок.
+     * `row` работает только для 2 элементов,
+     * в других случаях автоматически включиться `column`.
+     *
+     * @default row
+     */
+    direction?: 'row' | 'column';
+}
+/**
+ * Обёртка над Modal.Footer
+ *
+ * @visibleName MiniModal.Footer
+ */
+export declare const MiniModalFooter: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, MiniModalFooterProps> & Record<never, never>;
+export {};

package/cjs/components/MiniModal/MiniModalFooter.js

@@ -0,0 +1,60 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MiniModalFooter = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("../Modal");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _client = require("../../lib/client");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _MiniModal = require("./MiniModal.styles");
+var _MiniModal2 = require("./MiniModal");var _excluded = ["direction", "children"];
+
+
+
+
+
+
+
+
+
+
+
+
+/**
+ * Обёртка над Modal.Footer
+ *
+ * @visibleName MiniModal.Footer
+ */
+var MiniModalFooter = (0, _forwardRefAndName.forwardRefAndName)(
+'MiniModalFooter',
+function (_ref, ref) {var _ref$direction = _ref.direction,direction = _ref$direction === void 0 ? 'row' : _ref$direction,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  var childrenCount = _react.default.Children.count(children);
+  var _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;
+
+  // IE11 does not support CSS property `gap`
+  var IE11FallbackClasses =
+  _client.isIE11 &&
+  (0, _Emotion.cx)(
+  _direction === 'row' && _MiniModal.styles.actionsRowIE11Fallback(theme),
+  _direction === 'column' && _MiniModal.styles.actionsColumnIE11Fallback(theme));
+
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_Modal.Modal.Footer, rest, /*#__PURE__*/
+    _react.default.createElement("div", {
+      ref: ref,
+      "data-tid": _MiniModal2.MiniModalDataTids.actions,
+      className: (0, _Emotion.cx)(
+      _MiniModal.styles.actions(theme),
+      _direction === 'row' && _MiniModal.styles.actionsRow(),
+      _direction === 'column' && _MiniModal.styles.actionsColumn(),
+      IE11FallbackClasses) },
+
+
+    children)));
+
+
+
+});exports.MiniModalFooter = MiniModalFooter;

package/cjs/components/MiniModal/MiniModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModalFooter.tsx"],"names":["MiniModalFooter","ref","direction","children","rest","theme","ThemeContext","childrenCount","React","Children","count","_direction","IE11FallbackClasses","isIE11","styles","actionsRowIE11Fallback","actionsColumnIE11Fallback","MiniModalDataTids","actions","actionsRow","actionsColumn"],"mappings":"gYAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,yC;;;;;;;;;;;;;AAaA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG;AAC7B,iBAD6B;AAE7B,gBAA2CC,GAA3C,EAAmD,2BAAhDC,SAAgD,CAAhDA,SAAgD,+BAApC,KAAoC,kBAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AACjD,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,MAAMC,aAAa,GAAGC,eAAMC,QAAN,CAAeC,KAAf,CAAqBP,QAArB,CAAtB;AACA,MAAMQ,UAAU,GAAGJ,aAAa,GAAG,CAAhB,IAAqBA,aAAa,KAAK,CAAvC,GAA2C,QAA3C,GAAsDL,SAAzE;;AAEA;AACA,MAAMU,mBAAmB;AACvBC;AACA;AACEF,EAAAA,UAAU,KAAK,KAAf,IAAwBG,kBAAOC,sBAAP,CAA8BV,KAA9B,CAD1B;AAEEM,EAAAA,UAAU,KAAK,QAAf,IAA2BG,kBAAOE,yBAAP,CAAiCX,KAAjC,CAF7B,CAFF;;;AAOA;AACE,iCAAC,YAAD,CAAO,MAAP,EAAkBD,IAAlB;AACE;AACE,MAAA,GAAG,EAAEH,GADP;AAEE,kBAAUgB,8BAAkBC,OAF9B;AAGE,MAAA,SAAS,EAAE;AACTJ,wBAAOI,OAAP,CAAeb,KAAf,CADS;AAETM,MAAAA,UAAU,KAAK,KAAf,IAAwBG,kBAAOK,UAAP,EAFf;AAGTR,MAAAA,UAAU,KAAK,QAAf,IAA2BG,kBAAOM,aAAP,EAHlB;AAITR,MAAAA,mBAJS,CAHb;;;AAUGT,IAAAA,QAVH,CADF,CADF;;;;AAgBD,CAhC4B,CAAxB,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { Modal, ModalFooterProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isIE11 } from '../../lib/client';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalFooterProps extends ModalFooterProps {\n  /**\n   * Направление позиционирования кнопок.\n   * `row` работает только для 2 элементов,\n   * в других случаях автоматически включиться `column`.\n   *\n   * @default row\n   */\n  direction?: 'row' | 'column';\n}\n\n/**\n * Обёртка над Modal.Footer\n *\n * @visibleName MiniModal.Footer\n */\nexport const MiniModalFooter = forwardRefAndName<HTMLDivElement, MiniModalFooterProps>(\n  'MiniModalFooter',\n  ({ direction = 'row', children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    const childrenCount = React.Children.count(children);\n    const _direction = childrenCount > 2 || childrenCount === 1 ? 'column' : direction;\n\n    // IE11 does not support CSS property `gap`\n    const IE11FallbackClasses =\n      isIE11 &&\n      cx(\n        _direction === 'row' && styles.actionsRowIE11Fallback(theme),\n        _direction === 'column' && styles.actionsColumnIE11Fallback(theme),\n      );\n\n    return (\n      <Modal.Footer {...rest}>\n        <div\n          ref={ref}\n          data-tid={MiniModalDataTids.actions}\n          className={cx(\n            styles.actions(theme),\n            _direction === 'row' && styles.actionsRow(),\n            _direction === 'column' && styles.actionsColumn(),\n            IE11FallbackClasses,\n          )}\n        >\n          {children}\n        </div>\n      </Modal.Footer>\n    );\n  },\n);\n"]}

package/cjs/components/MiniModal/MiniModalHeader.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { ModalHeaderProps } from '../Modal';
+interface MiniModalHeaderProps extends ModalHeaderProps {
+    /**
+     * Пиктограмма в шапке компонента.
+     *
+     * @default InfoCircleIcon64Regular
+     */
+    icon?: ReactNode;
+}
+/**
+ * Обёртка над Modal.Header
+ *
+ * @visibleName MiniModal.Header
+ */
+export declare const MiniModalHeader: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, MiniModalHeaderProps> & Record<never, never>;
+export {};

package/cjs/components/MiniModal/MiniModalHeader.js

@@ -0,0 +1,47 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MiniModalHeader = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("../Modal");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _InfoCircleIcon64Regular = require("../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+
+var _MiniModal = require("./MiniModal.styles");
+var _MiniModal2 = require("./MiniModal");var _excluded = ["icon", "children"];
+
+
+
+
+
+
+
+
+
+
+/**
+ * Обёртка над Modal.Header
+ *
+ * @visibleName MiniModal.Header
+ */
+var MiniModalHeader = (0, _forwardRefAndName.forwardRefAndName)(
+'MiniModalHeader',
+function (_ref, ref) {var _ref$icon = _ref.icon,icon = _ref$icon === void 0 ? /*#__PURE__*/_react.default.createElement(_InfoCircleIcon64Regular.InfoCircleIcon64Regular, null) : _ref$icon,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement(_Modal.Modal.Header, rest, /*#__PURE__*/
+    _react.default.createElement("div", { ref: ref },
+    icon && /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": _MiniModal2.MiniModalDataTids.icon, className: _MiniModal.styles.icon() },
+    icon),
+
+
+    children && /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": _MiniModal2.MiniModalDataTids.title, className: (0, _Emotion.cx)(_MiniModal.styles.title(), icon && _MiniModal.styles.titleWithIcon(theme)) },
+    children))));
+
+
+
+
+
+});exports.MiniModalHeader = MiniModalHeader;

package/cjs/components/MiniModal/MiniModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModalHeader.tsx"],"names":["MiniModalHeader","ref","icon","children","rest","theme","ThemeContext","MiniModalDataTids","styles","title","titleWithIcon"],"mappings":"gYAAA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,yC;;;;;;;;;;;AAWA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG;AAC7B,iBAD6B;AAE7B,gBAA4DC,GAA5D,EAAoE,sBAAjEC,IAAiE,CAAjEA,IAAiE,uCAA1D,6BAAC,gDAAD,OAA0D,aAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAClE,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,YAAD,CAAO,MAAP,EAAkBF,IAAlB;AACE,0CAAK,GAAG,EAAEH,GAAV;AACGC,IAAAA,IAAI;AACH,0CAAK,YAAUK,8BAAkBL,IAAjC,EAAuC,SAAS,EAAEM,kBAAON,IAAP,EAAlD;AACGA,IAAAA,IADH,CAFJ;;;AAMGC,IAAAA,QAAQ;AACP,0CAAK,YAAUI,8BAAkBE,KAAjC,EAAwC,SAAS,EAAE,iBAAGD,kBAAOC,KAAP,EAAH,EAAmBP,IAAI,IAAIM,kBAAOE,aAAP,CAAqBL,KAArB,CAA3B,CAAnD;AACGF,IAAAA,QADH,CAPJ,CADF,CADF;;;;;;AAgBD,CArB4B,CAAxB,C","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { Modal, ModalHeaderProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\ninterface MiniModalHeaderProps extends ModalHeaderProps {\n  /**\n   * Пиктограмма в шапке компонента.\n   *\n   * @default InfoCircleIcon64Regular\n   */\n  icon?: ReactNode;\n}\n\n/**\n * Обёртка над Modal.Header\n *\n * @visibleName MiniModal.Header\n */\nexport const MiniModalHeader = forwardRefAndName<HTMLDivElement, MiniModalHeaderProps>(\n  'MiniModalHeader',\n  ({ icon = <InfoCircleIcon64Regular />, children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <Modal.Header {...rest}>\n        <div ref={ref}>\n          {icon && (\n            <div data-tid={MiniModalDataTids.icon} className={styles.icon()}>\n              {icon}\n            </div>\n          )}\n          {children && (\n            <div data-tid={MiniModalDataTids.title} className={cx(styles.title(), icon && styles.titleWithIcon(theme))}>\n              {children}\n            </div>\n          )}\n        </div>\n      </Modal.Header>\n    );\n  },\n);\n"]}

package/cjs/components/MiniModal/MiniModalIndent.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Отступ между кнопками
+ *
+ * @visibleName MiniModal.Indent
+ */
+export declare const MiniModalIndent: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLDivElement, unknown> & Record<never, never>;

package/cjs/components/MiniModal/MiniModalIndent.js

@@ -0,0 +1,29 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MiniModalIndent = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
+
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _Emotion = require("../../lib/theming/Emotion");
+var _client = require("../../lib/client");
+
+var _MiniModal = require("./MiniModal.styles");
+var _MiniModal2 = require("./MiniModal");var _excluded = ["children"];
+
+/**
+ * Отступ между кнопками
+ *
+ * @visibleName MiniModal.Indent
+ */
+var MiniModalIndent = (0, _forwardRefAndName.forwardRefAndName)(
+'MiniModalIndent',
+function (_ref, ref) {var children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", (0, _extends2.default)({
+      "data-tid": _MiniModal2.MiniModalDataTids.indent,
+      ref: ref,
+      className: (0, _Emotion.cx)(!_client.isIE11 ? _MiniModal.styles.actionsIndent(theme) : _MiniModal.styles.actionsIndentIE11Fallback(theme)) },
+    rest)));
+
+
+});exports.MiniModalIndent = MiniModalIndent;

package/cjs/components/MiniModal/MiniModalIndent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModalIndent.tsx"],"names":["MiniModalIndent","ref","children","rest","theme","ThemeContext","MiniModalDataTids","indent","isIE11","styles","actionsIndent","actionsIndentIE11Fallback"],"mappings":"kdAAA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,yC;;AAEA;AACA;AACA;AACA;AACA;AACO,IAAMA,eAAe,GAAG;AAC7B,iBAD6B;AAE7B,gBAAwBC,GAAxB,EAAgC,KAA7BC,QAA6B,QAA7BA,QAA6B,CAAhBC,IAAgB;AAC9B,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,kBAAUC,8BAAkBC,MAD9B;AAEE,MAAA,GAAG,EAAEN,GAFP;AAGE,MAAA,SAAS,EAAE,iBAAG,CAACO,cAAD,GAAUC,kBAAOC,aAAP,CAAqBN,KAArB,CAAV,GAAwCK,kBAAOE,yBAAP,CAAiCP,KAAjC,CAA3C,CAHb;AAIMD,IAAAA,IAJN,EADF;;;AAQD,CAb4B,CAAxB,C","sourcesContent":["import React, { useContext } from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './MiniModal.styles';\nimport { MiniModalDataTids } from './MiniModal';\n\n/**\n * Отступ между кнопками\n *\n * @visibleName MiniModal.Indent\n */\nexport const MiniModalIndent = forwardRefAndName<HTMLDivElement, unknown>(\n  'MiniModalIndent',\n  ({ children, ...rest }, ref) => {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <div\n        data-tid={MiniModalDataTids.indent}\n        ref={ref}\n        className={cx(!isIE11 ? styles.actionsIndent(theme) : styles.actionsIndentIE11Fallback(theme))}\n        {...rest}\n      />\n    );\n  },\n);\n"]}

package/cjs/components/MiniModal/getMiniModalTheme.d.ts

@@ -0,0 +1,16 @@
+import { Theme, ThemeIn } from '../../lib/theming/Theme';
+export declare const getMiniModalTheme: (contextTheme: Theme, propsTheme?: ThemeIn) => Readonly<Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme> & {
+    modalBodyPaddingTop: string;
+    modalBodyPaddingBottom: string;
+    modalHeaderPaddingTop: string;
+    modalHeaderPaddingBottom: string;
+    modalFooterPaddingTop: string;
+    modalFooterPaddingBottom: string;
+    mobileModalFooterPadding: string;
+    mobileModalHeaderPadding: string;
+    mobileModalBodyPadding: string;
+    mobileModalContainerHeight: string;
+    mobileModalContainerMarginTop: string;
+    mobileModalContainerMarginRight: string;
+    mobileModalContainerMarginLeft: string;
+}>;

package/cjs/components/MiniModal/getMiniModalTheme.js

@@ -0,0 +1,24 @@
+"use strict";exports.__esModule = true;exports.getMiniModalTheme = void 0;var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+
+
+var getMiniModalTheme = function getMiniModalTheme(contextTheme, propsTheme) {if (propsTheme === void 0) {propsTheme = {};}
+  var theme = _ThemeFactory.ThemeFactory.create(propsTheme, contextTheme);
+  return _ThemeFactory.ThemeFactory.create(
+  {
+    modalBodyPaddingTop: theme.miniModalBodyPaddingTop,
+    modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,
+    modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,
+    modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,
+    modalFooterPaddingTop: theme.miniModalFooterPaddingTop,
+    modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,
+    mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,
+    mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,
+    mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,
+    mobileModalContainerHeight: theme.miniModalHeightMobile,
+    mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,
+    mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,
+    mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile },
+
+  theme);
+
+};exports.getMiniModalTheme = getMiniModalTheme;

package/cjs/components/MiniModal/getMiniModalTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["getMiniModalTheme.ts"],"names":["getMiniModalTheme","contextTheme","propsTheme","theme","ThemeFactory","create","modalBodyPaddingTop","miniModalBodyPaddingTop","modalBodyPaddingBottom","miniModalBodyPaddingBottom","modalHeaderPaddingTop","miniModalHeaderPaddingTop","modalHeaderPaddingBottom","miniModalHeaderPaddingBottom","modalFooterPaddingTop","miniModalFooterPaddingTop","modalFooterPaddingBottom","miniModalFooterPaddingBottom","mobileModalFooterPadding","miniModalFooterPaddingMobile","mobileModalHeaderPadding","miniModalHeaderPaddingMobile","mobileModalBodyPadding","miniModalBodyPaddingMobile","mobileModalContainerHeight","miniModalHeightMobile","mobileModalContainerMarginTop","miniModalMarginTopMobile","mobileModalContainerMarginRight","miniModalMarginRightMobile","mobileModalContainerMarginLeft","miniModalMarginLeftMobile"],"mappings":"0EAAA;;;AAGO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,YAAD,EAAsBC,UAAtB,EAAmD,KAA7BA,UAA6B,cAA7BA,UAA6B,GAAP,EAAO;AAClF,MAAMC,KAAK,GAAGC,2BAAaC,MAAb,CAAoBH,UAApB,EAAgCD,YAAhC,CAAd;AACA,SAAOG,2BAAaC,MAAb;AACL;AACEC,IAAAA,mBAAmB,EAAEH,KAAK,CAACI,uBAD7B;AAEEC,IAAAA,sBAAsB,EAAEL,KAAK,CAACM,0BAFhC;AAGEC,IAAAA,qBAAqB,EAAEP,KAAK,CAACQ,yBAH/B;AAIEC,IAAAA,wBAAwB,EAAET,KAAK,CAACU,4BAJlC;AAKEC,IAAAA,qBAAqB,EAAEX,KAAK,CAACY,yBAL/B;AAMEC,IAAAA,wBAAwB,EAAEb,KAAK,CAACc,4BANlC;AAOEC,IAAAA,wBAAwB,EAAEf,KAAK,CAACgB,4BAPlC;AAQEC,IAAAA,wBAAwB,EAAEjB,KAAK,CAACkB,4BARlC;AASEC,IAAAA,sBAAsB,EAAEnB,KAAK,CAACoB,0BAThC;AAUEC,IAAAA,0BAA0B,EAAErB,KAAK,CAACsB,qBAVpC;AAWEC,IAAAA,6BAA6B,EAAEvB,KAAK,CAACwB,wBAXvC;AAYEC,IAAAA,+BAA+B,EAAEzB,KAAK,CAAC0B,0BAZzC;AAaEC,IAAAA,8BAA8B,EAAE3B,KAAK,CAAC4B,yBAbxC,EADK;;AAgBL5B,EAAAA,KAhBK,CAAP;;AAkBD,CApBM,C","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\n\nexport const getMiniModalTheme = (contextTheme: Theme, propsTheme: ThemeIn = {}) => {\n  const theme = ThemeFactory.create(propsTheme, contextTheme);\n  return ThemeFactory.create(\n    {\n      modalBodyPaddingTop: theme.miniModalBodyPaddingTop,\n      modalBodyPaddingBottom: theme.miniModalBodyPaddingBottom,\n      modalHeaderPaddingTop: theme.miniModalHeaderPaddingTop,\n      modalHeaderPaddingBottom: theme.miniModalHeaderPaddingBottom,\n      modalFooterPaddingTop: theme.miniModalFooterPaddingTop,\n      modalFooterPaddingBottom: theme.miniModalFooterPaddingBottom,\n      mobileModalFooterPadding: theme.miniModalFooterPaddingMobile,\n      mobileModalHeaderPadding: theme.miniModalHeaderPaddingMobile,\n      mobileModalBodyPadding: theme.miniModalBodyPaddingMobile,\n      mobileModalContainerHeight: theme.miniModalHeightMobile,\n      mobileModalContainerMarginTop: theme.miniModalMarginTopMobile,\n      mobileModalContainerMarginRight: theme.miniModalMarginRightMobile,\n      mobileModalContainerMarginLeft: theme.miniModalMarginLeftMobile,\n    },\n    theme,\n  );\n};\n"]}

package/cjs/components/MiniModal/index.d.ts

@@ -0,0 +1,5 @@
+export * from './MiniModal';
+export * from './MiniModalHeader';
+export * from './MiniModalBody';
+export * from './MiniModalFooter';
+export * from './MiniModalIndent';