@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/Modal/Modal.js

@@ -0,0 +1,292 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import FocusLock from 'react-focus-lock';
+import throttle from 'lodash.throttle';
+import { globalObject } from '@skbkontur/global-object';
+import { isNonNullable } from '../../lib/utils.js';
+import { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';
+import * as LayoutEvents from '../../lib/LayoutEvents.js';
+import { RenderContainer } from '../../internal/RenderContainer/index.js';
+import { ZIndex } from '../../internal/ZIndex/index.js';
+import { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';
+import { ModalStack } from '../../lib/ModalStack.js';
+import { ResizeDetector } from '../../internal/ResizeDetector/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { ResponsiveLayout } from '../ResponsiveLayout/index.js';
+import { catchUnreachableWarning } from '../../lib/typeGuards.js';
+import { ModalContext } from './ModalContext.js';
+import { ModalFooter } from './ModalFooter.js';
+import { ModalHeader } from './ModalHeader.js';
+import { ModalBody } from './ModalBody.js';
+import { ModalClose } from './ModalClose.js';
+import { styles } from './Modal.styles.js';
+import { getModalTheme } from './getModalTheme.js';
+var mountedModalsCount = 0;
+export var ModalDataTids = {
+    container: 'modal-container',
+    content: 'modal-content',
+    close: 'modal-close',
+};
+export var ModalZIndexPriority = {
+    Cross: 2,
+    Content: 1,
+};
+/**
+ * Модальное окно `Modal` — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.
+ *
+ * Состоит из 3-х компонентов: `Modal.Header`, `Modal.Body`, `Modal.Footer`.
+ *
+ * Для отображения серой плашки в футере в компонент `Footer` необходимо передать проп `panel`.
+ *
+ * Для отключения прилипания шапки и футера в соответствующий компонент нужно передать проп `sticky` со значением `false` (по-умолчанию прилипание включено).
+ */
+var Modal = /** @class */ (function (_super) {
+    __extends(Modal, _super);
+    function Modal() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(Modal.defaultProps);
+        _this.state = {
+            stackPosition: 0,
+            hasBackground: true,
+            horizontalScroll: false,
+            hasHeader: false,
+            hasFooter: false,
+            hasPanel: false,
+        };
+        _this.stackSubscription = null;
+        _this.containerNode = null;
+        _this.mouseDownTarget = null;
+        _this.mouseUpTarget = null;
+        _this.getMobileContainerClassName = function () {
+            var mobileAppearance = _this.getProps().mobileAppearance;
+            switch (mobileAppearance) {
+                case 'fullscreen-spacing':
+                    return;
+                case 'auto':
+                    if (_this.state.hasFooter) {
+                        return;
+                    }
+                    return [styles.mobileContainerSmall5_2()];
+                case 'fullscreen':
+                    return [styles.mobileContainerFullscreen5_2()];
+                case 'center':
+                    return [styles.mobileContainerSmall5_2()];
+                case 'bottom':
+                    return [styles.mobileContainerSmall5_2(), styles.mobileContainerSmallBottom5_2()];
+                case 'top':
+                    return [styles.mobileContainerSmall5_2(), styles.mobileContainerSmallTop5_2()];
+                default:
+                    return catchUnreachableWarning(mobileAppearance, false);
+            }
+        };
+        _this.requestClose = function () {
+            if (_this.props.disableClose) {
+                return;
+            }
+            if (_this.props.onClose) {
+                _this.props.onClose();
+            }
+        };
+        _this.refContainer = function (center) {
+            _this.containerNode = center;
+        };
+        _this.handleStackChange = function (stack) {
+            _this.setState({ stackPosition: stack.indexOf(_this), hasBackground: ModalStack.isBlocking(_this) });
+        };
+        _this.handleContainerMouseDown = function (event) {
+            _this.mouseDownTarget = event.target;
+        };
+        _this.handleContainerMouseUp = function (event) {
+            _this.mouseUpTarget = event.target;
+        };
+        _this.handleContainerClick = function (event) {
+            if (!_this.props.ignoreBackgroundClick) {
+                var target = event.target, currentTarget = event.currentTarget;
+                if (target === currentTarget && _this.mouseDownTarget === currentTarget && _this.mouseUpTarget === currentTarget) {
+                    _this.requestClose();
+                }
+            }
+        };
+        _this.handleKeyDown = function (e) {
+            if (_this.state.stackPosition !== 0) {
+                return;
+            }
+            if (isKeyEscape(e)) {
+                e.stopPropagation();
+                _this.requestClose();
+            }
+        };
+        _this.checkHorizontalScrollAppearance = function () {
+            var hasScroll = false;
+            if (_this.containerNode) {
+                var containerClientWidth = _this.containerNode.clientWidth;
+                var containerScrollWidth = _this.containerNode.scrollWidth;
+                hasScroll = containerClientWidth < containerScrollWidth;
+            }
+            if (hasScroll && !_this.state.horizontalScroll) {
+                _this.setState({ horizontalScroll: true });
+            }
+            else if (_this.state.horizontalScroll) {
+                _this.setState({ horizontalScroll: false });
+            }
+        };
+        _this.throttledCheckHorizontalScroll = throttle(_this.checkHorizontalScrollAppearance, 100);
+        _this.handleResize = function () {
+            LayoutEvents.emit();
+        };
+        _this.setHasHeader = function (hasHeader) {
+            _this.setState({ hasHeader: hasHeader });
+        };
+        _this.setHasFooter = function (hasFooter) {
+            _this.setState({ hasFooter: hasFooter });
+        };
+        _this.setHasPanel = function (hasPanel) {
+            _this.setState({ hasPanel: hasPanel });
+        };
+        return _this;
+    }
+    Modal.prototype.componentDidMount = function () {
+        var _a, _b;
+        this.stackSubscription = ModalStack.add(this, this.handleStackChange);
+        if (mountedModalsCount === 0) {
+            (_a = globalObject.addEventListener) === null || _a === void 0 ? void 0 : _a.call(globalObject, 'resize', this.throttledCheckHorizontalScroll);
+        }
+        mountedModalsCount++;
+        (_b = globalObject.addEventListener) === null || _b === void 0 ? void 0 : _b.call(globalObject, 'keydown', this.handleKeyDown);
+        this.checkHorizontalScrollAppearance();
+        if (this.containerNode) {
+            this.containerNode.addEventListener('scroll', LayoutEvents.emit);
+        }
+    };
+    Modal.prototype.componentWillUnmount = function () {
+        var _a, _b;
+        if (--mountedModalsCount === 0) {
+            (_a = globalObject.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(globalObject, 'resize', this.throttledCheckHorizontalScroll);
+            LayoutEvents.emit();
+        }
+        (_b = globalObject.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(globalObject, 'keydown', this.handleKeyDown);
+        if (isNonNullable(this.stackSubscription)) {
+            this.stackSubscription.remove();
+        }
+        ModalStack.remove(this);
+        if (this.containerNode) {
+            this.containerNode.removeEventListener('scroll', LayoutEvents.emit);
+        }
+    };
+    Modal.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = getModalTheme(theme, _this.props.theme);
+            return React.createElement(ThemeContext.Provider, { value: _this.theme }, _this.renderMain());
+        }));
+    };
+    Modal.prototype.renderMain = function () {
+        var _this = this;
+        var _a = this.props, noClose = _a.noClose, disableClose = _a.disableClose, width = _a.width, mobileAppearance = _a.mobileAppearance, alignTop = _a.alignTop, children = _a.children, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"];
+        var _b = this.state, hasHeader = _b.hasHeader, hasFooter = _b.hasFooter, hasPanel = _b.hasPanel;
+        var _c = this.getProps(), role = _c.role, disableFocusLock = _c.disableFocusLock;
+        var modalContextProps = {
+            hasHeader: hasHeader,
+            horizontalScroll: this.state.horizontalScroll,
+            setHasHeader: this.setHasHeader,
+            setHasFooter: this.setHasFooter,
+            setHasPanel: this.setHasPanel,
+            mobileOnFullScreen: this.props.mobileAppearance === 'fullscreen',
+        };
+        if (!noClose) {
+            modalContextProps.close = {
+                disableClose: disableClose,
+                requestClose: this.requestClose,
+            };
+        }
+        if (!hasFooter || hasPanel) {
+            modalContextProps.additionalPadding = true;
+        }
+        var style = {};
+        var containerStyle = {};
+        if (width) {
+            style.width = width;
+        }
+        else {
+            containerStyle.width = 'auto';
+        }
+        var getMobileCenterContainerClassNames = function () {
+            var _a;
+            return cx(styles.mobileCenterContainer(_this.theme), (_a = {},
+                _a[styles.mobileCenterContainerBig(_this.theme)] = mobileAppearance === 'fullscreen-spacing' || (mobileAppearance === 'auto' && hasFooter),
+                _a[styles.mobileCenterContainerFullscreen()] = mobileAppearance === 'fullscreen',
+                _a));
+        };
+        return (React.createElement(RenderContainer, null,
+            React.createElement(CommonWrapper, __assign({}, this.props),
+                React.createElement(ZIndex, { priority: 'Modal', className: styles.root() },
+                    React.createElement(HideBodyVerticalScroll, null),
+                    this.state.hasBackground && (React.createElement("div", { onMouseDown: this.handleContainerMouseDown, onMouseUp: this.handleContainerMouseUp, onClick: this.handleContainerClick, className: styles.bg(this.theme) })),
+                    React.createElement(ResponsiveLayout, null, function (_a) {
+                        var _b, _c, _d, _e, _f;
+                        var isMobile = _a.isMobile;
+                        return (React.createElement("div", { "aria-labelledby": ariaLabelledby, ref: _this.refContainer, className: cx(styles.container(), !isMobile && styles.containerDesktop(), isMobile && _this.getMobileContainerClassName()), onMouseDown: _this.handleContainerMouseDown, onMouseUp: _this.handleContainerMouseUp, onClick: _this.handleContainerClick, "data-tid": ModalDataTids.container },
+                            React.createElement("div", { "aria-modal": true, "aria-label": ariaLabel, role: role, className: cx((_b = {},
+                                    _b[styles.centerContainer()] = true,
+                                    _b[getMobileCenterContainerClassNames()] = isMobile,
+                                    _b[styles.alignTop()] = Boolean(alignTop),
+                                    _b)), style: isMobile ? undefined : containerStyle, "data-tid": ModalDataTids.content },
+                                React.createElement("div", { className: cx((_c = {},
+                                        _c[styles.window(_this.theme)] = true,
+                                        _c[styles.mobileWindow()] = isMobile,
+                                        _c[styles.mobileWindowFullscreen()] = isMobile && mobileAppearance === 'fullscreen',
+                                        _c)), style: isMobile ? undefined : style },
+                                    React.createElement(ResizeDetector, { onResize: _this.handleResize, fullHeight: isMobile },
+                                        React.createElement(FocusLock, { disabled: disableFocusLock, autoFocus: false, className: cx((_d = {}, _d[styles.columnFlexContainer()] = isMobile, _d), 'focus-lock-container') },
+                                            !hasHeader && !noClose && (React.createElement(ZIndex, { priority: ModalZIndexPriority.Cross, className: cx((_e = {},
+                                                    _e[styles.closeWrapper(_this.theme)] = true,
+                                                    _e[styles.mobileCloseWrapper(_this.theme)] = isMobile,
+                                                    _e)) },
+                                                React.createElement(ModalClose, { className: cx((_f = {},
+                                                        _f[styles.mobileCloseWithoutHeader(_this.theme)] = isMobile && !_this.state.hasHeader,
+                                                        _f)), requestClose: _this.requestClose, disableClose: disableClose }))),
+                                            React.createElement(ModalContext.Provider, { value: modalContextProps }, children)))))));
+                    })))));
+    };
+    Modal.__KONTUR_REACT_UI__ = 'Modal';
+    Modal.displayName = 'Modal';
+    Modal.Header = ModalHeader;
+    Modal.Body = ModalBody;
+    Modal.Footer = ModalFooter;
+    Modal.defaultProps = {
+        disableFocusLock: false,
+        role: 'dialog',
+        mobileAppearance: 'auto',
+    };
+    return Modal;
+}(React.Component));
+export { Modal };
+//# sourceMappingURL=Modal.js.map

package/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../components/Modal/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\nimport FocusLock from 'react-focus-lock';\nimport throttle from 'lodash.throttle';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isNonNullable } from '../../lib/utils.js';\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll/index.js';\nimport type { ModalStackSubscription } from '../../lib/ModalStack.js';\nimport { ModalStack } from '../../lib/ModalStack.js';\nimport { ResizeDetector } from '../../internal/ResizeDetector/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { catchUnreachableWarning } from '../../lib/typeGuards.js';\n\nimport type { ModalContextProps } from './ModalContext.js';\nimport { ModalContext } from './ModalContext.js';\nimport { ModalFooter } from './ModalFooter.js';\nimport { ModalHeader } from './ModalHeader.js';\nimport { ModalBody } from './ModalBody.js';\nimport { ModalClose } from './ModalClose.js';\nimport { styles } from './Modal.styles.js';\nimport { getModalTheme } from './getModalTheme.js';\n\nlet mountedModalsCount = 0;\n\nexport type MobileModalAppearance = 'auto' | 'top' | 'center' | 'bottom' | 'fullscreen-spacing' | 'fullscreen';\n\nexport interface ModalProps\n  extends CommonProps,\n    Pick<HTMLAttributes<unknown>, 'role'>,\n    Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'> {\n  /** Отключает событие `onClose` и дизейблит кнопку закрытия модалки. */\n  disableClose?: boolean;\n\n  /** Выравнивает окно по верху страницы. */\n  alignTop?: boolean;\n\n  /** Оставляет окно открытым при клике на фон. */\n  ignoreBackgroundClick?: boolean;\n\n  /** Убирает крестик для закрытия окна */\n  noClose?: boolean;\n\n  /** Задает ширину модалки. */\n  width?: number | string;\n\n  /** Задает функцию, которая вызывается, когда пользователь запросил закрытие окна (нажал на фон, на Escape или на крестик). */\n  onClose?: () => void;\n\n  /** Отключает фокус-лок внутри модалки. */\n  disableFocusLock?: boolean;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n\n  /** Задает внешний вид модалки. Работает с версией темы >= 5_2.\n   *  - `auto` — если футера нет, модалка распологается в центре экрана, если футер есть -- модалка растягивается на весь экран с отступами и закругленными краями\n   *  - `top` — модалка располагается сверху независимо от наличия футера\n   *  - `center` — модалка располагается в центре независимо от наличия футера\n   *  - `bottom` — модалка располагается снизу независимо от наличия футера\n   *  - `fullscreen-spacing` — модалка растягивается на весь экран с отступами и закругленными краями\n   *  - `fullscreen` — модалка растягивается на весь экран\n   *  @default auto\n   */\n  mobileAppearance?: MobileModalAppearance;\n}\n\nexport interface ModalState {\n  stackPosition: number;\n  hasBackground: boolean;\n  horizontalScroll: boolean;\n  hasHeader: boolean;\n  hasFooter: boolean;\n  hasPanel: boolean;\n}\n\nexport const ModalDataTids = {\n  container: 'modal-container',\n  content: 'modal-content',\n  close: 'modal-close',\n} as const;\n\nexport const ModalZIndexPriority = {\n  Cross: 2,\n  Content: 1,\n} as const;\n\ntype DefaultProps = Required<Pick<ModalProps, 'disableFocusLock' | 'role' | 'mobileAppearance'>>;\n\n/**\n * Модальное окно `Modal` — это эмуляция диалогового окна браузера, появляющегося поверх страницы в ответ на действия пользователя и блокирующего доступ к основному содержимому страницы.\n *\n * Состоит из 3-х компонентов: `Modal.Header`, `Modal.Body`, `Modal.Footer`.\n *\n * Для отображения серой плашки в футере в компонент `Footer` необходимо передать проп `panel`.\n *\n * Для отключения прилипания шапки и футера в соответствующий компонент нужно передать проп `sticky` со значением `false` (по-умолчанию прилипание включено).\n */\nexport class Modal extends React.Component<ModalProps, ModalState> {\n  public static __KONTUR_REACT_UI__ = 'Modal';\n  public static displayName = 'Modal';\n\n  public static Header = ModalHeader;\n  public static Body = ModalBody;\n  public static Footer = ModalFooter;\n\n  public static defaultProps: DefaultProps = {\n    disableFocusLock: false,\n    role: 'dialog',\n    mobileAppearance: 'auto',\n  };\n\n  private getProps = createPropsGetter(Modal.defaultProps);\n\n  public state: ModalState = {\n    stackPosition: 0,\n    hasBackground: true,\n    horizontalScroll: false,\n    hasHeader: false,\n    hasFooter: false,\n    hasPanel: false,\n  };\n\n  private theme!: Theme;\n  private stackSubscription: ModalStackSubscription | null = null;\n  private containerNode: HTMLDivElement | null = null;\n  private mouseDownTarget: EventTarget | null = null;\n  private mouseUpTarget: EventTarget | null = null;\n\n  public componentDidMount() {\n    this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n\n    if (mountedModalsCount === 0) {\n      globalObject.addEventListener?.('resize', this.throttledCheckHorizontalScroll);\n    }\n\n    mountedModalsCount++;\n    globalObject.addEventListener?.('keydown', this.handleKeyDown);\n    this.checkHorizontalScrollAppearance();\n\n    if (this.containerNode) {\n      this.containerNode.addEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (--mountedModalsCount === 0) {\n      globalObject.removeEventListener?.('resize', this.throttledCheckHorizontalScroll);\n      LayoutEvents.emit();\n    }\n\n    globalObject.removeEventListener?.('keydown', this.handleKeyDown);\n    if (isNonNullable(this.stackSubscription)) {\n      this.stackSubscription.remove();\n    }\n    ModalStack.remove(this);\n\n    if (this.containerNode) {\n      this.containerNode.removeEventListener('scroll', LayoutEvents.emit);\n    }\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = getModalTheme(theme, this.props.theme);\n          return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private getMobileContainerClassName = () => {\n    const mobileAppearance = this.getProps().mobileAppearance;\n    switch (mobileAppearance) {\n      case 'fullscreen-spacing':\n        return;\n      case 'auto':\n        if (this.state.hasFooter) {\n          return;\n        }\n        return [styles.mobileContainerSmall5_2()];\n      case 'fullscreen':\n        return [styles.mobileContainerFullscreen5_2()];\n      case 'center':\n        return [styles.mobileContainerSmall5_2()];\n      case 'bottom':\n        return [styles.mobileContainerSmall5_2(), styles.mobileContainerSmallBottom5_2()];\n      case 'top':\n        return [styles.mobileContainerSmall5_2(), styles.mobileContainerSmallTop5_2()];\n      default:\n        return catchUnreachableWarning(mobileAppearance, false);\n    }\n  };\n\n  private renderMain() {\n    const {\n      noClose,\n      disableClose,\n      width,\n      mobileAppearance,\n      alignTop,\n      children,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n    } = this.props;\n    const { hasHeader, hasFooter, hasPanel } = this.state;\n    const { role, disableFocusLock } = this.getProps();\n\n    const modalContextProps: ModalContextProps = {\n      hasHeader,\n      horizontalScroll: this.state.horizontalScroll,\n      setHasHeader: this.setHasHeader,\n      setHasFooter: this.setHasFooter,\n      setHasPanel: this.setHasPanel,\n      mobileOnFullScreen: this.props.mobileAppearance === 'fullscreen',\n    };\n    if (!noClose) {\n      modalContextProps.close = {\n        disableClose,\n        requestClose: this.requestClose,\n      };\n    }\n    if (!hasFooter || hasPanel) {\n      modalContextProps.additionalPadding = true;\n    }\n\n    const style: { width?: number | string } = {};\n    const containerStyle: { width?: number | string } = {};\n\n    if (width) {\n      style.width = width;\n    } else {\n      containerStyle.width = 'auto';\n    }\n\n    const getMobileCenterContainerClassNames = () => {\n      return cx(styles.mobileCenterContainer(this.theme), {\n        [styles.mobileCenterContainerBig(this.theme)]:\n          mobileAppearance === 'fullscreen-spacing' || (mobileAppearance === 'auto' && hasFooter),\n        [styles.mobileCenterContainerFullscreen()]: mobileAppearance === 'fullscreen',\n      });\n    };\n\n    return (\n      <RenderContainer>\n        <CommonWrapper {...this.props}>\n          <ZIndex priority={'Modal'} className={styles.root()}>\n            <HideBodyVerticalScroll />\n            {this.state.hasBackground && (\n              <div\n                onMouseDown={this.handleContainerMouseDown}\n                onMouseUp={this.handleContainerMouseUp}\n                onClick={this.handleContainerClick}\n                className={styles.bg(this.theme)}\n              />\n            )}\n            <ResponsiveLayout>\n              {({ isMobile }) => (\n                <div\n                  aria-labelledby={ariaLabelledby}\n                  ref={this.refContainer}\n                  className={cx(\n                    styles.container(),\n                    !isMobile && styles.containerDesktop(),\n                    isMobile && this.getMobileContainerClassName(),\n                  )}\n                  onMouseDown={this.handleContainerMouseDown}\n                  onMouseUp={this.handleContainerMouseUp}\n                  onClick={this.handleContainerClick}\n                  data-tid={ModalDataTids.container}\n                >\n                  <div\n                    aria-modal\n                    aria-label={ariaLabel}\n                    role={role}\n                    className={cx({\n                      [styles.centerContainer()]: true,\n                      [getMobileCenterContainerClassNames()]: isMobile,\n                      [styles.alignTop()]: Boolean(alignTop),\n                    })}\n                    style={isMobile ? undefined : containerStyle}\n                    data-tid={ModalDataTids.content}\n                  >\n                    <div\n                      className={cx({\n                        [styles.window(this.theme)]: true,\n                        [styles.mobileWindow()]: isMobile,\n                        [styles.mobileWindowFullscreen()]: isMobile && mobileAppearance === 'fullscreen',\n                      })}\n                      style={isMobile ? undefined : style}\n                    >\n                      <ResizeDetector onResize={this.handleResize} fullHeight={isMobile}>\n                        {/* @ts-expect-error */}\n                        <FocusLock\n                          disabled={disableFocusLock}\n                          autoFocus={false}\n                          className={cx({ [styles.columnFlexContainer()]: isMobile }, 'focus-lock-container')}\n                        >\n                          {!hasHeader && !noClose && (\n                            <ZIndex\n                              priority={ModalZIndexPriority.Cross}\n                              className={cx({\n                                [styles.closeWrapper(this.theme)]: true,\n                                [styles.mobileCloseWrapper(this.theme)]: isMobile,\n                              })}\n                            >\n                              <ModalClose\n                                className={cx({\n                                  [styles.mobileCloseWithoutHeader(this.theme)]: isMobile && !this.state.hasHeader,\n                                })}\n                                requestClose={this.requestClose}\n                                disableClose={disableClose}\n                              />\n                            </ZIndex>\n                          )}\n                          <ModalContext.Provider value={modalContextProps}>{children}</ModalContext.Provider>\n                        </FocusLock>\n                      </ResizeDetector>\n                    </div>\n                  </div>\n                </div>\n              )}\n            </ResponsiveLayout>\n          </ZIndex>\n        </CommonWrapper>\n      </RenderContainer>\n    );\n  }\n\n  private requestClose = () => {\n    if (this.props.disableClose) {\n      return;\n    }\n    if (this.props.onClose) {\n      this.props.onClose();\n    }\n  };\n\n  private refContainer = (center: HTMLDivElement | null) => {\n    this.containerNode = center;\n  };\n\n  private handleStackChange = (stack: readonly React.Component[]) => {\n    this.setState({ stackPosition: stack.indexOf(this), hasBackground: ModalStack.isBlocking(this) });\n  };\n\n  private handleContainerMouseDown = (event: React.MouseEvent) => {\n    this.mouseDownTarget = event.target;\n  };\n\n  private handleContainerMouseUp = (event: React.MouseEvent) => {\n    this.mouseUpTarget = event.target;\n  };\n\n  private handleContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!this.props.ignoreBackgroundClick) {\n      const { target, currentTarget } = event;\n      if (target === currentTarget && this.mouseDownTarget === currentTarget && this.mouseUpTarget === currentTarget) {\n        this.requestClose();\n      }\n    }\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.state.stackPosition !== 0) {\n      return;\n    }\n    if (isKeyEscape(e)) {\n      e.stopPropagation();\n      this.requestClose();\n    }\n  };\n\n  private checkHorizontalScrollAppearance = () => {\n    let hasScroll = false;\n\n    if (this.containerNode) {\n      const containerClientWidth = this.containerNode.clientWidth;\n      const containerScrollWidth = this.containerNode.scrollWidth;\n      hasScroll = containerClientWidth < containerScrollWidth;\n    }\n    if (hasScroll && !this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: true });\n    } else if (this.state.horizontalScroll) {\n      this.setState({ horizontalScroll: false });\n    }\n  };\n\n  private throttledCheckHorizontalScroll = throttle(this.checkHorizontalScrollAppearance, 100);\n\n  private handleResize = () => {\n    LayoutEvents.emit();\n  };\n\n  private setHasHeader = (hasHeader: boolean) => {\n    this.setState({ hasHeader });\n  };\n\n  private setHasFooter = (hasFooter: boolean) => {\n    this.setState({ hasFooter });\n  };\n\n  private setHasPanel = (hasPanel: boolean) => {\n    this.setState({ hasPanel });\n  };\n}\n"]}

package/components/Modal/Modal.styles.d.ts

@@ -1,49 +1,55 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const modalGlobalClasses: {
-    root: string;
-    container: string;
-};
-export declare const styles: {
-    root(): string;
-    bg(t: Theme): string;
-    container(): string;
-    containerMobile(t: Theme): string;
-    window(t: Theme): string;
-    mobileWindow(): string;
-    centerContainer(): string;
-    mobileCenterContainer(): string;
-    alignTop(): string;
-    close(t: Theme): string;
-    close5_1(t: Theme): string;
-    closeMobile(t: Theme): string;
-    closeMobile5_1(t: Theme): string;
-    mobileCloseWithoutHeader(): string;
-    closeWrapper(t: Theme): string;
-    mobileCloseWrapper(t: Theme): string;
-    disabled(t: Theme): string;
-    focus(t: Theme): string;
-    focus5_1(t: Theme): string;
-    header(t: Theme): string;
-    mobileHeader(t: Theme): string;
-    body(t: Theme): string;
-    mobileBody(t: Theme): string;
-    headerWithClose(t: Theme): string;
-    mobileHeaderWithClose(t: Theme): string;
-    footer(t: Theme): string;
-    mobileFooter(t: Theme): string;
-    panel(t: Theme): string;
-    fixedHeader(t: Theme): string;
-    mobileFixedHeader(t: Theme): string;
-    fixedFooter(t: Theme): string;
-    fixedPanel(t: Theme): string;
-    headerAddPadding(t: Theme): string;
-    bodyWithoutHeader(t: Theme): string;
-    mobileBodyWithoutHeader(): string;
-    bodyWithoutPadding(): string;
-    bodyAddPaddingForPanel(t: Theme): string;
-    mobileBodyAddPaddingForPanel(t: Theme): string;
-    columnFlexContainer(): string;
-    modalSeparatorWrapper(): string;
-    modalSeparator(t: Theme): string;
-    modalSeparatorFixed(): string;
-};
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const modalGlobalClasses: {
+    root: string;
+    container: string;
+};
+export declare const styles: {
+    root(): string;
+    bg(t: Theme): string;
+    container(): string;
+    containerDesktop(): string;
+    mobileContainerFullscreen5_2(): string;
+    mobileContainerSmall5_2(): string;
+    mobileContainerSmallTop5_2(): string;
+    mobileContainerSmallBottom5_2(): string;
+    window(t: Theme): string;
+    mobileWindow(): string;
+    mobileWindowFullscreen(): string;
+    centerContainer(): string;
+    mobileCenterContainer(t: Theme): string;
+    mobileCenterContainerBig(t: Theme): string;
+    mobileCenterContainerFullscreen(): string;
+    alignTop(): string;
+    close(t: Theme): string;
+    closeMobile(t: Theme): string;
+    mobileCloseWithoutHeader(t: Theme): string;
+    closeWrapper(t: Theme): string;
+    mobileCloseWrapper(t: Theme): string;
+    disabled(t: Theme): string;
+    focus(t: Theme): string;
+    header(t: Theme): string;
+    mobileHeader(t: Theme): string;
+    titleCut(): string;
+    body(t: Theme): string;
+    mobileBody(t: Theme): string;
+    headerWithClose(t: Theme): string;
+    mobileHeaderWithClose(t: Theme): string;
+    footer(t: Theme): string;
+    mobileFooter(t: Theme): string;
+    panel(t: Theme): string;
+    fixedHeader(t: Theme): string;
+    mobileFixedHeader(t: Theme): string;
+    fixedFooter(t: Theme): string;
+    mobileFixedFooter(t: Theme): string;
+    fixedPanel(t: Theme): string;
+    headerAddPadding(t: Theme): string;
+    bodyWithoutHeader(t: Theme): string;
+    mobileBodyWithoutHeader(t: Theme): string;
+    bodyWithoutPadding(): string;
+    bodyAddPaddingForPanel(t: Theme): string;
+    mobileBodyAddPaddingForPanel(t: Theme): string;
+    columnFlexContainer(): string;
+    modalSeparatorWrapper(): string;
+    modalSeparator(t: Theme): string;
+    modalSeparatorFixed(t: Theme): string;
+};