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

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,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/cjs/components/MiniModal/MiniModal.styles.js

@@ -0,0 +1,90 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = 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 getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      icon: function icon() {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        text-align: center;\n      "])));
+
+
+      },
+
+      description: function description() {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        text-align: center;\n      "])));
+
+
+      },
+
+      title: function title() {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        text-align: center;\n      "])));
+
+
+      },
+
+      titleWithIcon: function titleWithIcon(t) {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        margin-top: ", ";\n      "])),
+        t.miniModalTitleMarginTop);
+
+      },
+
+      actions: function actions(t) {
+        return 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 emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        height: ", ";\n      "])),
+        t.miniModalCancelIndent);
+
+      },
+
+      actionsIndentIE11Fallback: function actionsIndentIE11Fallback(t) {
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        padding: ", " 0;\n      "])),
+        t.miniModalCancelIndent);
+
+      },
+
+      actionsRow: function actionsRow() {
+        return emotion.css(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n        flex-direction: row;\n      "])));
+
+
+      },
+
+      actionsColumn: function actionsColumn() {
+        return emotion.css(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n        flex-direction: column;\n      "])));
+
+
+      },
+
+      actionsRowIE11Fallback: function actionsRowIE11Fallback(t) {
+        return 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 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.getStyles = getStyles;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MiniModal.styles.ts"],"names":["getStyles","emotion","icon","css","description","title","titleWithIcon","t","miniModalTitleMarginTop","actions","miniModalActionGap","buttonGlobalClasses","root","actionsIndent","miniModalCancelIndent","actionsIndentIE11Fallback","actionsRow","actionsColumn","actionsRowIE11Fallback","actionsColumnIE11Fallback"],"mappings":";;AAEA;;AAEA,iD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,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;;AAMKC,8BAAoBC,IANzB;;;;AAUD,OApCU;;AAsCXC,MAAAA,aAtCW,yBAsCGN,CAtCH,EAsCa;AACtB,eAAON,OAAO,CAACE,GAAf;AACYI,QAAAA,CAAC,CAACO,qBADd;;AAGD,OA1CU;;AA4CXC,MAAAA,yBA5CW,qCA4CeR,CA5Cf,EA4CyB;AAClC,eAAON,OAAO,CAACE,GAAf;AACaI,QAAAA,CAAC,CAACO,qBADf;;AAGD,OAhDU;;AAkDXE,MAAAA,UAlDW,wBAkDE;AACX,eAAOf,OAAO,CAACE,GAAf;;;AAGD,OAtDU;;AAwDXc,MAAAA,aAxDW,2BAwDK;AACd,eAAOhB,OAAO,CAACE,GAAf;;;AAGD,OA5DU;;AA8DXe,MAAAA,sBA9DW,kCA8DYX,CA9DZ,EA8DsB;AAC/B,eAAON,OAAO,CAACE,GAAf;;AAEyBI,QAAAA,CAAC,CAACG,kBAF3B;;;AAKwBH,QAAAA,CAAC,CAACG,kBAL1B;;;AAQD,OAvEU;;AAyEXS,MAAAA,yBAzEW,qCAyEeZ,CAzEf,EAyEyB;AAClC,eAAON,OAAO,CAACE,GAAf;;AAEkBI,QAAAA,CAAC,CAACG,kBAFpB;;;AAKkBH,QAAAA,CAAC,CAACG,kBALpB;;;AAQD,OAlFU,EAAb,CADuB,GAAlB,C","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/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,32 @@
+"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 _Emotion = require("../../lib/theming/Emotion");
+
+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(_Emotion.EmotionConsumer, null,
+    function (emotion) {
+      var styles = (0, _MiniModal2.getStyles)(emotion);
+      return /*#__PURE__*/(
+        _react.default.createElement(_Modal.Modal.Body, rest, /*#__PURE__*/
+        _react.default.createElement("div", { "data-tid": _MiniModal.MiniModalDataTids.description, ref: ref, className: 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","emotion","styles","MiniModalDataTids","description"],"mappings":"+RAAA;;AAEA;AACA;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,wBAAD;AACG,cAACC,OAAD,EAAa;AACZ,UAAMC,MAAM,GAAG,2BAAUD,OAAV,CAAf;AACA;AACE,qCAAC,YAAD,CAAO,IAAP,EAAgBD,IAAhB;AACE,8CAAK,YAAUG,6BAAkBC,WAAjC,EAA8C,GAAG,EAAEN,GAAnD,EAAwD,SAAS,EAAEI,MAAM,CAACE,WAAP,EAAnE;AACGL,QAAAA,QADH,CADF,CADF;;;;AAOD,KAVH,CADF;;;AAcD,CAjB0B,CAAtB,C","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/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,62 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MiniModalFooter = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _Modal = require("../Modal");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _client = require("../../lib/client");
+var _Emotion = require("../../lib/theming/Emotion");
+var _useTheme = require("../../lib/theming/useTheme");
+
+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, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _MiniModal.getStyles)(emotion);
+
+  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 &&
+  emotion.cx(
+  _direction === 'row' && styles.actionsRowIE11Fallback(theme),
+  _direction === 'column' && 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: emotion.cx(
+      styles.actions(theme),
+      _direction === 'row' && styles.actionsRow(),
+      _direction === 'column' && 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","emotion","styles","childrenCount","React","Children","count","_direction","IE11FallbackClasses","isIE11","cx","actionsRowIE11Fallback","actionsColumnIE11Fallback","MiniModalDataTids","actions","actionsRow","actionsColumn"],"mappings":"iSAAA;;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,yBAAd;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,0BAAUD,OAAV,CAAf;;AAEA,MAAME,aAAa,GAAGC,eAAMC,QAAN,CAAeC,KAAf,CAAqBR,QAArB,CAAtB;AACA,MAAMS,UAAU,GAAGJ,aAAa,GAAG,CAAhB,IAAqBA,aAAa,KAAK,CAAvC,GAA2C,QAA3C,GAAsDN,SAAzE;;AAEA;AACA,MAAMW,mBAAmB;AACvBC;AACAR,EAAAA,OAAO,CAACS,EAAR;AACEH,EAAAA,UAAU,KAAK,KAAf,IAAwBL,MAAM,CAACS,sBAAP,CAA8BX,KAA9B,CAD1B;AAEEO,EAAAA,UAAU,KAAK,QAAf,IAA2BL,MAAM,CAACU,yBAAP,CAAiCZ,KAAjC,CAF7B,CAFF;;;AAOA;AACE,iCAAC,YAAD,CAAO,MAAP,EAAkBD,IAAlB;AACE;AACE,MAAA,GAAG,EAAEH,GADP;AAEE,kBAAUiB,8BAAkBC,OAF9B;AAGE,MAAA,SAAS,EAAEb,OAAO,CAACS,EAAR;AACTR,MAAAA,MAAM,CAACY,OAAP,CAAed,KAAf,CADS;AAETO,MAAAA,UAAU,KAAK,KAAf,IAAwBL,MAAM,CAACa,UAAP,EAFf;AAGTR,MAAAA,UAAU,KAAK,QAAf,IAA2BL,MAAM,CAACc,aAAP,EAHlB;AAITR,MAAAA,mBAJS,CAHb;;;AAUGV,IAAAA,QAVH,CADF,CADF;;;;AAgBD,CAlC4B,CAAxB,C","sourcesContent":["import React from 'react';\n\nimport { Modal, ModalFooterProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { isIE11 } from '../../lib/client';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } 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 = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\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      emotion.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={emotion.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,52 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MiniModalHeader = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireDefault(require("react"));
+
+var _Modal = require("../Modal");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _InfoCircleIcon64Regular = require("../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular");
+var _useTheme = require("../../lib/theming/useTheme");
+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, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _MiniModal.getStyles)(emotion);
+
+  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: styles.icon() },
+    icon),
+
+
+    children && /*#__PURE__*/
+    _react.default.createElement("div", {
+      "data-tid": _MiniModal2.MiniModalDataTids.title,
+      className: emotion.cx(styles.title(), icon && 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","emotion","styles","MiniModalDataTids","title","cx","titleWithIcon"],"mappings":"iSAAA;;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,yBAAd;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,0BAAUD,OAAV,CAAf;;AAEA;AACE,iCAAC,YAAD,CAAO,MAAP,EAAkBF,IAAlB;AACE,0CAAK,GAAG,EAAEH,GAAV;AACGC,IAAAA,IAAI;AACH,0CAAK,YAAUM,8BAAkBN,IAAjC,EAAuC,SAAS,EAAEK,MAAM,CAACL,IAAP,EAAlD;AACGA,IAAAA,IADH,CAFJ;;;AAMGC,IAAAA,QAAQ;AACP;AACE,kBAAUK,8BAAkBC,KAD9B;AAEE,MAAA,SAAS,EAAEH,OAAO,CAACI,EAAR,CAAWH,MAAM,CAACE,KAAP,EAAX,EAA2BP,IAAI,IAAIK,MAAM,CAACI,aAAP,CAAqBN,KAArB,CAAnC,CAFb;;AAIGF,IAAAA,QAJH,CAPJ,CADF,CADF;;;;;;AAmBD,CA1B4B,CAAxB,C","sourcesContent":["import React, { ReactNode } from 'react';\n\nimport { Modal, ModalHeaderProps } from '../Modal';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { InfoCircleIcon64Regular } from '../../internal/icons2022/InfoCircleIcon/InfoCircleIcon64Regular';\nimport { useTheme } from '../../lib/theming/useTheme';\nimport { useEmotion } from '../../lib/theming/Emotion';\n\nimport { getStyles } 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 = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\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\n              data-tid={MiniModalDataTids.title}\n              className={emotion.cx(styles.title(), icon && styles.titleWithIcon(theme))}\n            >\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,31 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").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 = _interopRequireDefault(require("react"));
+
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _Emotion = require("../../lib/theming/Emotion");
+var _client = require("../../lib/client");
+var _useTheme = require("../../lib/theming/useTheme");
+
+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, _useTheme.useTheme)();
+  var emotion = (0, _Emotion.useEmotion)();
+  var styles = (0, _MiniModal.getStyles)(emotion);
+
+  return /*#__PURE__*/(
+    _react.default.createElement("div", (0, _extends2.default)({
+      "data-tid": _MiniModal2.MiniModalDataTids.indent,
+      ref: ref,
+      className: emotion.cx(!_client.isIE11 ? styles.actionsIndent(theme) : 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","emotion","styles","MiniModalDataTids","indent","cx","isIE11","actionsIndent","actionsIndentIE11Fallback"],"mappings":"mXAAA;;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,yBAAd;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,0BAAUD,OAAV,CAAf;;AAEA;AACE;AACE,kBAAUE,8BAAkBC,MAD9B;AAEE,MAAA,GAAG,EAAEP,GAFP;AAGE,MAAA,SAAS,EAAEI,OAAO,CAACI,EAAR,CAAW,CAACC,cAAD,GAAUJ,MAAM,CAACK,aAAP,CAAqBP,KAArB,CAAV,GAAwCE,MAAM,CAACM,yBAAP,CAAiCR,KAAjC,CAAnD,CAHb;AAIMD,IAAAA,IAJN,EADF;;;AAQD,CAf4B,CAAxB,C","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } 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 = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\n\n    return (\n      <div\n        data-tid={MiniModalDataTids.indent}\n        ref={ref}\n        className={emotion.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;
+}>;