@alfalab/core-components-base-modal 5.8.9 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/Component.d.ts +9 -1
  2. package/Component.js +15 -12
  3. package/cssm/Component.d.ts +9 -1
  4. package/cssm/Component.js +14 -11
  5. package/cssm/index.module.css +8 -2
  6. package/esm/Component.d.ts +9 -1
  7. package/esm/Component.js +15 -12
  8. package/esm/index.css +20 -14
  9. package/index.css +20 -14
  10. package/modern/Component.d.ts +9 -1
  11. package/modern/Component.js +7 -4
  12. package/modern/index.css +20 -14
  13. package/moderncssm/Component.d.ts +9 -1
  14. package/moderncssm/Component.js +6 -3
  15. package/moderncssm/index.module.css +15 -1
  16. package/package.json +4 -4
  17. package/src/Component.tsx +19 -0
  18. package/src/index.module.css +12 -0
package/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
- import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
4
+ import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, WheelEvent } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
6
6
  import { BackdropProps } from "@alfalab/core-components-backdrop";
7
7
  import { PortalProps } from "@alfalab/core-components-portal";
@@ -134,10 +134,18 @@ type BaseModalProps = {
134
134
  * Реф, который должен быть установлен компонентной области
135
135
  */
136
136
  componentRef?: MutableRefObject<HTMLDivElement | null>;
137
+ /**
138
+ * Реф контентной области
139
+ */
140
+ contentElementRef?: MutableRefObject<HTMLDivElement | null>;
137
141
  /**
138
142
  * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
139
143
  */
140
144
  iOSLock?: boolean;
145
+ /**
146
+ * Хэндлер события прокрутки колесиком
147
+ */
148
+ onWheel?: (e: WheelEvent<HTMLElement>) => void;
141
149
  };
142
150
  type BaseModalContext = {
143
151
  parentRef: React.RefObject<HTMLDivElement>;
package/Component.js CHANGED
@@ -25,7 +25,7 @@ var FocusLock__default = /*#__PURE__*/_interopDefaultCompat(FocusLock);
25
25
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
26
26
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
27
27
 
28
- var styles = {"component":"base-modal__component_i7vvi","wrapper":"base-modal__wrapper_i7vvi","content":"base-modal__content_i7vvi","hidden":"base-modal__hidden_i7vvi","backdrop":"base-modal__backdrop_i7vvi","appear":"base-modal__appear_i7vvi","enter":"base-modal__enter_i7vvi","appearActive":"base-modal__appearActive_i7vvi","enterActive":"base-modal__enterActive_i7vvi","exit":"base-modal__exit_i7vvi","exitActive":"base-modal__exitActive_i7vvi","exitDone":"base-modal__exitDone_i7vvi"};
28
+ var styles = {"component":"base-modal__component_14ddh","wrapper":"base-modal__wrapper_14ddh","content":"base-modal__content_14ddh","hasFooter":"base-modal__hasFooter_14ddh","hasHeader":"base-modal__hasHeader_14ddh","hidden":"base-modal__hidden_14ddh","backdrop":"base-modal__backdrop_14ddh","appear":"base-modal__appear_14ddh","enter":"base-modal__enter_14ddh","appearActive":"base-modal__appearActive_14ddh","enterActive":"base-modal__enterActive_14ddh","exit":"base-modal__exit_14ddh","exitActive":"base-modal__exitActive_14ddh","exitDone":"base-modal__exitDone_14ddh"};
29
29
  require('./index.css')
30
30
 
31
31
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -45,14 +45,14 @@ var BaseModalContext = React__default.default.createContext({
45
45
  onClose: function () { return null; },
46
46
  });
47
47
  var BaseModal = React.forwardRef(function (_a, ref) {
48
- var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackContext.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
49
- var _r = React.useState(null), exited = _r[0], setExited = _r[1];
50
- var _s = React.useState(false), hasScroll = _s[0], setHasScroll = _s[1];
51
- var _t = React.useState(false), hasHeader = _t[0], setHasHeader = _t[1];
52
- var _u = React.useState(false), hasFooter = _u[0], setHasFooter = _u[1];
53
- var _v = React.useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
54
- var _w = React.useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
55
- var _x = React.useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
48
+ var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackContext.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.contentElementRef, contentElementRef = _p === void 0 ? null : _p, _q = _a.usePortal, usePortal = _q === void 0 ? true : _q, _r = _a.iOSLock, iOSLock = _r === void 0 ? false : _r, onWheel = _a.onWheel;
49
+ var _s = React.useState(null), exited = _s[0], setExited = _s[1];
50
+ var _t = React.useState(false), hasScroll = _t[0], setHasScroll = _t[1];
51
+ var _u = React.useState(false), hasHeader = _u[0], setHasHeader = _u[1];
52
+ var _v = React.useState(false), hasFooter = _v[0], setHasFooter = _v[1];
53
+ var _w = React.useState(false), headerHighlighted = _w[0], setHeaderHighlighted = _w[1];
54
+ var _x = React.useState(false), footerHighlighted = _x[0], setFooterHighlighted = _x[1];
55
+ var _y = React.useState(0), headerOffset = _y[0], setHeaderOffset = _y[1];
56
56
  var componentNodeRef = React.useRef(null);
57
57
  var wrapperRef = React.useRef(null);
58
58
  var scrollableNodeRef = React.useRef(null);
@@ -253,7 +253,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
253
253
  handleClose,
254
254
  ]);
255
255
  var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
256
- var _a;
256
+ var _a, _b;
257
257
  return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
258
258
  React__default.default.createElement(FocusLock__default.default, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
259
259
  Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles.backdrop), open: open, style: {
@@ -265,7 +265,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
265
265
  ref,
266
266
  wrapperRef,
267
267
  wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
268
- ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
268
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, onWheel: onWheel, tabIndex: -1, "data-test-id": dataTestId, style: {
269
269
  zIndex: computedZIndex,
270
270
  } }),
271
271
  React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
@@ -274,7 +274,10 @@ var BaseModal = React.forwardRef(function (_a, ref) {
274
274
  componentNodeRef,
275
275
  (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
276
276
  ]) }),
277
- React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
277
+ React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_b = {},
278
+ _b[styles.hasFooter] = hasFooter,
279
+ _b[styles.hasHeader] = hasHeader,
280
+ _b)), ref: contentElementRef }), children)))))));
278
281
  })); };
279
282
  if (!shouldRender)
280
283
  return null;
package/cssm/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
- import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
4
+ import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, WheelEvent } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
6
6
  import { BackdropProps } from "@alfalab/core-components-backdrop";
7
7
  import { PortalProps } from "@alfalab/core-components-portal";
@@ -134,10 +134,18 @@ type BaseModalProps = {
134
134
  * Реф, который должен быть установлен компонентной области
135
135
  */
136
136
  componentRef?: MutableRefObject<HTMLDivElement | null>;
137
+ /**
138
+ * Реф контентной области
139
+ */
140
+ contentElementRef?: MutableRefObject<HTMLDivElement | null>;
137
141
  /**
138
142
  * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
139
143
  */
140
144
  iOSLock?: boolean;
145
+ /**
146
+ * Хэндлер события прокрутки колесиком
147
+ */
148
+ onWheel?: (e: WheelEvent<HTMLElement>) => void;
141
149
  };
142
150
  type BaseModalContext = {
143
151
  parentRef: React.RefObject<HTMLDivElement>;
package/cssm/Component.js CHANGED
@@ -44,14 +44,14 @@ var BaseModalContext = React__default.default.createContext({
44
44
  onClose: function () { return null; },
45
45
  });
46
46
  var BaseModal = React.forwardRef(function (_a, ref) {
47
- var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackContext.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
48
- var _r = React.useState(null), exited = _r[0], setExited = _r[1];
49
- var _s = React.useState(false), hasScroll = _s[0], setHasScroll = _s[1];
50
- var _t = React.useState(false), hasHeader = _t[0], setHasHeader = _t[1];
51
- var _u = React.useState(false), hasFooter = _u[0], setHasFooter = _u[1];
52
- var _v = React.useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
53
- var _w = React.useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
54
- var _x = React.useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
47
+ var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop = _c === void 0 ? coreComponentsBackdrop.Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackContext.stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.contentElementRef, contentElementRef = _p === void 0 ? null : _p, _q = _a.usePortal, usePortal = _q === void 0 ? true : _q, _r = _a.iOSLock, iOSLock = _r === void 0 ? false : _r, onWheel = _a.onWheel;
48
+ var _s = React.useState(null), exited = _s[0], setExited = _s[1];
49
+ var _t = React.useState(false), hasScroll = _t[0], setHasScroll = _t[1];
50
+ var _u = React.useState(false), hasHeader = _u[0], setHasHeader = _u[1];
51
+ var _v = React.useState(false), hasFooter = _v[0], setHasFooter = _v[1];
52
+ var _w = React.useState(false), headerHighlighted = _w[0], setHeaderHighlighted = _w[1];
53
+ var _x = React.useState(false), footerHighlighted = _x[0], setFooterHighlighted = _x[1];
54
+ var _y = React.useState(0), headerOffset = _y[0], setHeaderOffset = _y[1];
55
55
  var componentNodeRef = React.useRef(null);
56
56
  var wrapperRef = React.useRef(null);
57
57
  var scrollableNodeRef = React.useRef(null);
@@ -252,7 +252,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
252
252
  handleClose,
253
253
  ]);
254
254
  var renderContent = function () { return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) {
255
- var _a;
255
+ var _a, _b;
256
256
  return (React__default.default.createElement(BaseModalContext.Provider, { value: contextValue },
257
257
  React__default.default.createElement(FocusLock__default.default, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
258
258
  Backdrop && (React__default.default.createElement(Backdrop, tslib.__assign({}, backdropProps, { className: cn__default.default(backdropProps.className, styles__default.default.backdrop), open: open, style: {
@@ -264,7 +264,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
264
264
  ref,
265
265
  wrapperRef,
266
266
  wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
267
- ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
267
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, onWheel: onWheel, tabIndex: -1, "data-test-id": dataTestId, style: {
268
268
  zIndex: computedZIndex,
269
269
  } }),
270
270
  React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ appear: true, timeout: 200, classNames: styles__default.default, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
@@ -273,7 +273,10 @@ var BaseModal = React.forwardRef(function (_a, ref) {
273
273
  componentNodeRef,
274
274
  (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
275
275
  ]) }),
276
- React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles__default.default.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
276
+ React__default.default.createElement("div", tslib.__assign({}, contentProps, { className: cn__default.default(styles__default.default.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_b = {},
277
+ _b[styles__default.default.hasFooter] = hasFooter,
278
+ _b[styles__default.default.hasHeader] = hasHeader,
279
+ _b)), ref: contentElementRef }), children)))))));
277
280
  })); };
278
281
  if (!shouldRender)
279
282
  return null;
package/cssm/index.module.css CHANGED
@@ -52,8 +52,14 @@
52
52
  height: 100%;
53
53
  display: flex;
54
54
  flex-direction: column;
55
- flex: 1;
56
- } .hidden {
55
+ flex: 1
56
+ } @media (display-mode: standalone) { .content.hasFooter {
57
+ padding-bottom: unset
58
+ }
59
+ } @media (display-mode: standalone) { .content.hasHeader {
60
+ padding-top: unset
61
+ }
62
+ } .hidden {
57
63
  display: none;
58
64
  } .backdrop {
59
65
  z-index: 0;
package/esm/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
- import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
4
+ import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, WheelEvent } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
6
6
  import { BackdropProps } from "@alfalab/core-components-backdrop";
7
7
  import { PortalProps } from "@alfalab/core-components-portal";
@@ -134,10 +134,18 @@ type BaseModalProps = {
134
134
  * Реф, который должен быть установлен компонентной области
135
135
  */
136
136
  componentRef?: MutableRefObject<HTMLDivElement | null>;
137
+ /**
138
+ * Реф контентной области
139
+ */
140
+ contentElementRef?: MutableRefObject<HTMLDivElement | null>;
137
141
  /**
138
142
  * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
139
143
  */
140
144
  iOSLock?: boolean;
145
+ /**
146
+ * Хэндлер события прокрутки колесиком
147
+ */
148
+ onWheel?: (e: WheelEvent<HTMLElement>) => void;
141
149
  };
142
150
  type BaseModalContext = {
143
151
  parentRef: React.RefObject<HTMLDivElement>;
package/esm/Component.js CHANGED
@@ -14,7 +14,7 @@ import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
14
14
  import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
15
15
  import './matches-polyfill.js';
16
16
 
17
- var styles = {"component":"base-modal__component_i7vvi","wrapper":"base-modal__wrapper_i7vvi","content":"base-modal__content_i7vvi","hidden":"base-modal__hidden_i7vvi","backdrop":"base-modal__backdrop_i7vvi","appear":"base-modal__appear_i7vvi","enter":"base-modal__enter_i7vvi","appearActive":"base-modal__appearActive_i7vvi","enterActive":"base-modal__enterActive_i7vvi","exit":"base-modal__exit_i7vvi","exitActive":"base-modal__exitActive_i7vvi","exitDone":"base-modal__exitDone_i7vvi"};
17
+ var styles = {"component":"base-modal__component_14ddh","wrapper":"base-modal__wrapper_14ddh","content":"base-modal__content_14ddh","hasFooter":"base-modal__hasFooter_14ddh","hasHeader":"base-modal__hasHeader_14ddh","hidden":"base-modal__hidden_14ddh","backdrop":"base-modal__backdrop_14ddh","appear":"base-modal__appear_14ddh","enter":"base-modal__enter_14ddh","appearActive":"base-modal__appearActive_14ddh","enterActive":"base-modal__enterActive_14ddh","exit":"base-modal__exit_14ddh","exitActive":"base-modal__exitActive_14ddh","exitDone":"base-modal__exitDone_14ddh"};
18
18
  require('./index.css')
19
19
 
20
20
  // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -34,14 +34,14 @@ var BaseModalContext = React.createContext({
34
34
  onClose: function () { return null; },
35
35
  });
36
36
  var BaseModal = forwardRef(function (_a, ref) {
37
- var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.usePortal, usePortal = _p === void 0 ? true : _p, _q = _a.iOSLock, iOSLock = _q === void 0 ? false : _q;
38
- var _r = useState(null), exited = _r[0], setExited = _r[1];
39
- var _s = useState(false), hasScroll = _s[0], setHasScroll = _s[1];
40
- var _t = useState(false), hasHeader = _t[0], setHasHeader = _t[1];
41
- var _u = useState(false), hasFooter = _u[0], setHasFooter = _u[1];
42
- var _v = useState(false), headerHighlighted = _v[0], setHeaderHighlighted = _v[1];
43
- var _w = useState(false), footerHighlighted = _w[0], setFooterHighlighted = _w[1];
44
- var _x = useState(0), headerOffset = _x[0], setHeaderOffset = _x[1];
37
+ var open = _a.open, container = _a.container, children = _a.children, _b = _a.scrollHandler, scrollHandler = _b === void 0 ? 'wrapper' : _b, _c = _a.Backdrop, Backdrop$1 = _c === void 0 ? Backdrop : _c, _d = _a.backdropProps, backdropProps = _d === void 0 ? {} : _d, _e = _a.transitionProps, transitionProps = _e === void 0 ? {} : _e, disableBackdropClick = _a.disableBackdropClick, _f = _a.disableAutoFocus, disableAutoFocus = _f === void 0 ? false : _f, _g = _a.disableFocusLock, disableFocusLock = _g === void 0 ? false : _g, _h = _a.disableEscapeKeyDown, disableEscapeKeyDown = _h === void 0 ? false : _h, _j = _a.disableRestoreFocus, disableRestoreFocus = _j === void 0 ? false : _j, _k = _a.disableBlockingScroll, disableBlockingScroll = _k === void 0 ? false : _k, _l = _a.keepMounted, keepMounted = _l === void 0 ? false : _l, className = _a.className, contentClassName = _a.contentClassName, wrapperProps = _a.wrapperProps, contentProps = _a.contentProps, componentDivProps = _a.componentDivProps, wrapperClassName = _a.wrapperClassName, onBackdropClick = _a.onBackdropClick, onClose = _a.onClose, onEscapeKeyDown = _a.onEscapeKeyDown, onMount = _a.onMount, onUnmount = _a.onUnmount, dataTestId = _a.dataTestId, _m = _a.zIndex, zIndex = _m === void 0 ? stackingOrder.MODAL : _m, _o = _a.componentRef, componentRef = _o === void 0 ? null : _o, _p = _a.contentElementRef, contentElementRef = _p === void 0 ? null : _p, _q = _a.usePortal, usePortal = _q === void 0 ? true : _q, _r = _a.iOSLock, iOSLock = _r === void 0 ? false : _r, onWheel = _a.onWheel;
38
+ var _s = useState(null), exited = _s[0], setExited = _s[1];
39
+ var _t = useState(false), hasScroll = _t[0], setHasScroll = _t[1];
40
+ var _u = useState(false), hasHeader = _u[0], setHasHeader = _u[1];
41
+ var _v = useState(false), hasFooter = _v[0], setHasFooter = _v[1];
42
+ var _w = useState(false), headerHighlighted = _w[0], setHeaderHighlighted = _w[1];
43
+ var _x = useState(false), footerHighlighted = _x[0], setFooterHighlighted = _x[1];
44
+ var _y = useState(0), headerOffset = _y[0], setHeaderOffset = _y[1];
45
45
  var componentNodeRef = useRef(null);
46
46
  var wrapperRef = useRef(null);
47
47
  var scrollableNodeRef = useRef(null);
@@ -242,7 +242,7 @@ var BaseModal = forwardRef(function (_a, ref) {
242
242
  handleClose,
243
243
  ]);
244
244
  var renderContent = function () { return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) {
245
- var _a;
245
+ var _a, _b;
246
246
  return (React.createElement(BaseModalContext.Provider, { value: contextValue },
247
247
  React.createElement(FocusLock, { disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
248
248
  Backdrop$1 && (React.createElement(Backdrop$1, __assign({}, backdropProps, { className: cn(backdropProps.className, styles.backdrop), open: open, style: {
@@ -254,7 +254,7 @@ var BaseModal = forwardRef(function (_a, ref) {
254
254
  ref,
255
255
  wrapperRef,
256
256
  wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.ref,
257
- ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
257
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, onWheel: onWheel, tabIndex: -1, "data-test-id": dataTestId, style: {
258
258
  zIndex: computedZIndex,
259
259
  } }),
260
260
  React.createElement(CSSTransition, __assign({ appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef }, transitionProps, { in: open, onEntered: handleEntered, onExited: handleExited }),
@@ -263,7 +263,10 @@ var BaseModal = forwardRef(function (_a, ref) {
263
263
  componentNodeRef,
264
264
  (componentDivProps === null || componentDivProps === void 0 ? void 0 : componentDivProps.ref) || null,
265
265
  ]) }),
266
- React.createElement("div", __assign({}, contentProps, { className: cn(styles.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className) }), children)))))));
266
+ React.createElement("div", __assign({}, contentProps, { className: cn(styles.content, contentClassName, contentProps === null || contentProps === void 0 ? void 0 : contentProps.className, (_b = {},
267
+ _b[styles.hasFooter] = hasFooter,
268
+ _b[styles.hasHeader] = hasHeader,
269
+ _b)), ref: contentElementRef }), children)))))));
267
270
  })); };
268
271
  if (!shouldRender)
269
272
  return null;
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: j49z6 */
1
+ /* hash: kce08 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -29,13 +29,13 @@
29
29
  margin-top: calc(var(--window-inner-scrollY) * -1);
30
30
  position: fixed;
31
31
  overflow: hidden;
32
- } .base-modal__component_i7vvi {
32
+ } .base-modal__component_14ddh {
33
33
  position: relative;
34
34
  box-sizing: border-box;
35
35
  background: var(--color-light-modal-bg-primary);
36
36
  margin: auto;
37
37
  flex-shrink: 0;
38
- } .base-modal__wrapper_i7vvi {
38
+ } .base-modal__wrapper_14ddh {
39
39
  position: fixed;
40
40
  top: var(--gap-0);
41
41
  left: var(--gap-0);
@@ -48,27 +48,33 @@
48
48
  align-items: center;
49
49
  outline: 0;
50
50
  overscroll-behavior: none;
51
- } .base-modal__content_i7vvi {
51
+ } .base-modal__content_14ddh {
52
52
  width: 100%;
53
53
  height: 100%;
54
54
  display: flex;
55
55
  flex-direction: column;
56
- flex: 1;
57
- } .base-modal__hidden_i7vvi {
56
+ flex: 1
57
+ } @media (display-mode: standalone) { .base-modal__content_14ddh.base-modal__hasFooter_14ddh {
58
+ padding-bottom: unset
59
+ }
60
+ } @media (display-mode: standalone) { .base-modal__content_14ddh.base-modal__hasHeader_14ddh {
61
+ padding-top: unset
62
+ }
63
+ } .base-modal__hidden_14ddh {
58
64
  display: none;
59
- } .base-modal__backdrop_i7vvi {
65
+ } .base-modal__backdrop_14ddh {
60
66
  z-index: 0;
61
- } .base-modal__appear_i7vvi,
62
- .base-modal__enter_i7vvi {
67
+ } .base-modal__appear_14ddh,
68
+ .base-modal__enter_14ddh {
63
69
  opacity: 0;
64
- } .base-modal__appearActive_i7vvi,
65
- .base-modal__enterActive_i7vvi {
70
+ } .base-modal__appearActive_14ddh,
71
+ .base-modal__enterActive_14ddh {
66
72
  opacity: 1;
67
73
  transition: opacity 200ms ease-in;
68
- } .base-modal__exit_i7vvi {
74
+ } .base-modal__exit_14ddh {
69
75
  opacity: 1;
70
- } .base-modal__exitActive_i7vvi,
71
- .base-modal__exitDone_i7vvi {
76
+ } .base-modal__exitActive_14ddh,
77
+ .base-modal__exitDone_14ddh {
72
78
  opacity: 0;
73
79
  transition: opacity 200ms ease-out;
74
80
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: j49z6 */
1
+ /* hash: kce08 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -29,13 +29,13 @@
29
29
  margin-top: calc(var(--window-inner-scrollY) * -1);
30
30
  position: fixed;
31
31
  overflow: hidden;
32
- } .base-modal__component_i7vvi {
32
+ } .base-modal__component_14ddh {
33
33
  position: relative;
34
34
  box-sizing: border-box;
35
35
  background: var(--color-light-modal-bg-primary);
36
36
  margin: auto;
37
37
  flex-shrink: 0;
38
- } .base-modal__wrapper_i7vvi {
38
+ } .base-modal__wrapper_14ddh {
39
39
  position: fixed;
40
40
  top: var(--gap-0);
41
41
  left: var(--gap-0);
@@ -48,27 +48,33 @@
48
48
  align-items: center;
49
49
  outline: 0;
50
50
  overscroll-behavior: none;
51
- } .base-modal__content_i7vvi {
51
+ } .base-modal__content_14ddh {
52
52
  width: 100%;
53
53
  height: 100%;
54
54
  display: flex;
55
55
  flex-direction: column;
56
- flex: 1;
57
- } .base-modal__hidden_i7vvi {
56
+ flex: 1
57
+ } @media (display-mode: standalone) { .base-modal__content_14ddh.base-modal__hasFooter_14ddh {
58
+ padding-bottom: unset
59
+ }
60
+ } @media (display-mode: standalone) { .base-modal__content_14ddh.base-modal__hasHeader_14ddh {
61
+ padding-top: unset
62
+ }
63
+ } .base-modal__hidden_14ddh {
58
64
  display: none;
59
- } .base-modal__backdrop_i7vvi {
65
+ } .base-modal__backdrop_14ddh {
60
66
  z-index: 0;
61
- } .base-modal__appear_i7vvi,
62
- .base-modal__enter_i7vvi {
67
+ } .base-modal__appear_14ddh,
68
+ .base-modal__enter_14ddh {
63
69
  opacity: 0;
64
- } .base-modal__appearActive_i7vvi,
65
- .base-modal__enterActive_i7vvi {
70
+ } .base-modal__appearActive_14ddh,
71
+ .base-modal__enterActive_14ddh {
66
72
  opacity: 1;
67
73
  transition: opacity 200ms ease-in;
68
- } .base-modal__exit_i7vvi {
74
+ } .base-modal__exit_14ddh {
69
75
  opacity: 1;
70
- } .base-modal__exitActive_i7vvi,
71
- .base-modal__exitDone_i7vvi {
76
+ } .base-modal__exitActive_14ddh,
77
+ .base-modal__exitDone_14ddh {
72
78
  opacity: 0;
73
79
  transition: opacity 200ms ease-out;
74
80
  }
package/modern/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
- import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
4
+ import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, WheelEvent } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
6
6
  import { BackdropProps } from "@alfalab/core-components-backdrop";
7
7
  import { PortalProps } from "@alfalab/core-components-portal";
@@ -134,10 +134,18 @@ type BaseModalProps = {
134
134
  * Реф, который должен быть установлен компонентной области
135
135
  */
136
136
  componentRef?: MutableRefObject<HTMLDivElement | null>;
137
+ /**
138
+ * Реф контентной области
139
+ */
140
+ contentElementRef?: MutableRefObject<HTMLDivElement | null>;
137
141
  /**
138
142
  * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
139
143
  */
140
144
  iOSLock?: boolean;
145
+ /**
146
+ * Хэндлер события прокрутки колесиком
147
+ */
148
+ onWheel?: (e: WheelEvent<HTMLElement>) => void;
141
149
  };
142
150
  type BaseModalContext = {
143
151
  parentRef: React.RefObject<HTMLDivElement>;
package/modern/Component.js CHANGED
@@ -13,7 +13,7 @@ import { unlockScroll, syncHeight, lockScroll } from './helpers/lockScroll.js';
13
13
  import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar } from './utils.js';
14
14
  import './matches-polyfill.js';
15
15
 
16
- const styles = {"component":"base-modal__component_i7vvi","wrapper":"base-modal__wrapper_i7vvi","content":"base-modal__content_i7vvi","hidden":"base-modal__hidden_i7vvi","backdrop":"base-modal__backdrop_i7vvi","appear":"base-modal__appear_i7vvi","enter":"base-modal__enter_i7vvi","appearActive":"base-modal__appearActive_i7vvi","enterActive":"base-modal__enterActive_i7vvi","exit":"base-modal__exit_i7vvi","exitActive":"base-modal__exitActive_i7vvi","exitDone":"base-modal__exitDone_i7vvi"};
16
+ const styles = {"component":"base-modal__component_14ddh","wrapper":"base-modal__wrapper_14ddh","content":"base-modal__content_14ddh","hasFooter":"base-modal__hasFooter_14ddh","hasHeader":"base-modal__hasHeader_14ddh","hidden":"base-modal__hidden_14ddh","backdrop":"base-modal__backdrop_14ddh","appear":"base-modal__appear_14ddh","enter":"base-modal__enter_14ddh","appearActive":"base-modal__appearActive_14ddh","enterActive":"base-modal__enterActive_14ddh","exit":"base-modal__exit_14ddh","exitActive":"base-modal__exitActive_14ddh","exitDone":"base-modal__exitDone_14ddh"};
17
17
  require('./index.css')
18
18
 
19
19
  /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
@@ -33,7 +33,7 @@ const BaseModalContext = React.createContext({
33
33
  setHasFooter: () => null,
34
34
  onClose: () => null,
35
35
  });
36
- const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, iOSLock = false, }, ref) => {
36
+ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, contentElementRef = null, usePortal = true, iOSLock = false, onWheel, }, ref) => {
37
37
  const [exited, setExited] = useState(null);
38
38
  const [hasScroll, setHasScroll] = useState(false);
39
39
  const [hasHeader, setHasHeader] = useState(false);
@@ -249,7 +249,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
249
249
  ref,
250
250
  wrapperRef,
251
251
  wrapperProps?.ref,
252
- ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
252
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, onWheel: onWheel, tabIndex: -1, "data-test-id": dataTestId, style: {
253
253
  zIndex: computedZIndex,
254
254
  } },
255
255
  React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
@@ -258,7 +258,10 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
258
258
  componentNodeRef,
259
259
  componentDivProps?.ref || null,
260
260
  ]) },
261
- React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className) }, children)))))))));
261
+ React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className, {
262
+ [styles.hasFooter]: hasFooter,
263
+ [styles.hasHeader]: hasHeader,
264
+ }), ref: contentElementRef }, children)))))))));
262
265
  if (!shouldRender)
263
266
  return null;
264
267
  return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: j49z6 */
1
+ /* hash: kce08 */
2
2
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
3
3
  } /* deprecated */ :root {
4
4
  --color-light-modal-bg-primary: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -29,13 +29,13 @@
29
29
  margin-top: calc(var(--window-inner-scrollY) * -1);
30
30
  position: fixed;
31
31
  overflow: hidden;
32
- } .base-modal__component_i7vvi {
32
+ } .base-modal__component_14ddh {
33
33
  position: relative;
34
34
  box-sizing: border-box;
35
35
  background: var(--color-light-modal-bg-primary);
36
36
  margin: auto;
37
37
  flex-shrink: 0;
38
- } .base-modal__wrapper_i7vvi {
38
+ } .base-modal__wrapper_14ddh {
39
39
  position: fixed;
40
40
  top: var(--gap-0);
41
41
  left: var(--gap-0);
@@ -48,27 +48,33 @@
48
48
  align-items: center;
49
49
  outline: 0;
50
50
  overscroll-behavior: none;
51
- } .base-modal__content_i7vvi {
51
+ } .base-modal__content_14ddh {
52
52
  width: 100%;
53
53
  height: 100%;
54
54
  display: flex;
55
55
  flex-direction: column;
56
- flex: 1;
57
- } .base-modal__hidden_i7vvi {
56
+ flex: 1
57
+ } @media (display-mode: standalone) { .base-modal__content_14ddh.base-modal__hasFooter_14ddh {
58
+ padding-bottom: unset
59
+ }
60
+ } @media (display-mode: standalone) { .base-modal__content_14ddh.base-modal__hasHeader_14ddh {
61
+ padding-top: unset
62
+ }
63
+ } .base-modal__hidden_14ddh {
58
64
  display: none;
59
- } .base-modal__backdrop_i7vvi {
65
+ } .base-modal__backdrop_14ddh {
60
66
  z-index: 0;
61
- } .base-modal__appear_i7vvi,
62
- .base-modal__enter_i7vvi {
67
+ } .base-modal__appear_14ddh,
68
+ .base-modal__enter_14ddh {
63
69
  opacity: 0;
64
- } .base-modal__appearActive_i7vvi,
65
- .base-modal__enterActive_i7vvi {
70
+ } .base-modal__appearActive_14ddh,
71
+ .base-modal__enterActive_14ddh {
66
72
  opacity: 1;
67
73
  transition: opacity 200ms ease-in;
68
- } .base-modal__exit_i7vvi {
74
+ } .base-modal__exit_14ddh {
69
75
  opacity: 1;
70
- } .base-modal__exitActive_i7vvi,
71
- .base-modal__exitDone_i7vvi {
76
+ } .base-modal__exitActive_14ddh,
77
+ .base-modal__exitDone_14ddh {
72
78
  opacity: 0;
73
79
  transition: opacity 200ms ease-out;
74
80
  }
package/moderncssm/Component.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react-transition-group" />
3
3
  import React from 'react';
4
- import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
4
+ import { ComponentType, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref, WheelEvent } from "react";
5
5
  import { TransitionProps } from 'react-transition-group/Transition';
6
6
  import { BackdropProps } from "@alfalab/core-components-backdrop";
7
7
  import { PortalProps } from "@alfalab/core-components-portal";
@@ -134,10 +134,18 @@ type BaseModalProps = {
134
134
  * Реф, который должен быть установлен компонентной области
135
135
  */
136
136
  componentRef?: MutableRefObject<HTMLDivElement | null>;
137
+ /**
138
+ * Реф контентной области
139
+ */
140
+ contentElementRef?: MutableRefObject<HTMLDivElement | null>;
137
141
  /**
138
142
  * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
139
143
  */
140
144
  iOSLock?: boolean;
145
+ /**
146
+ * Хэндлер события прокрутки колесиком
147
+ */
148
+ onWheel?: (e: WheelEvent<HTMLElement>) => void;
141
149
  };
142
150
  type BaseModalContext = {
143
151
  parentRef: React.RefObject<HTMLDivElement>;
package/moderncssm/Component.js CHANGED
@@ -31,7 +31,7 @@ const BaseModalContext = React.createContext({
31
31
  setHasFooter: () => null,
32
32
  onClose: () => null,
33
33
  });
34
- const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, usePortal = true, iOSLock = false, }, ref) => {
34
+ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrapper', Backdrop: Backdrop$1 = Backdrop, backdropProps = {}, transitionProps = {}, disableBackdropClick, disableAutoFocus = false, disableFocusLock = false, disableEscapeKeyDown = false, disableRestoreFocus = false, disableBlockingScroll = false, keepMounted = false, className, contentClassName, wrapperProps, contentProps, componentDivProps, wrapperClassName, onBackdropClick, onClose, onEscapeKeyDown, onMount, onUnmount, dataTestId, zIndex = stackingOrder.MODAL, componentRef = null, contentElementRef = null, usePortal = true, iOSLock = false, onWheel, }, ref) => {
35
35
  const [exited, setExited] = useState(null);
36
36
  const [hasScroll, setHasScroll] = useState(false);
37
37
  const [hasHeader, setHasHeader] = useState(false);
@@ -247,7 +247,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
247
247
  ref,
248
248
  wrapperRef,
249
249
  wrapperProps?.ref,
250
- ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, tabIndex: -1, "data-test-id": dataTestId, style: {
250
+ ]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp, onWheel: onWheel, tabIndex: -1, "data-test-id": dataTestId, style: {
251
251
  zIndex: computedZIndex,
252
252
  } },
253
253
  React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, nodeRef: componentNodeRef, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
@@ -256,7 +256,10 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
256
256
  componentNodeRef,
257
257
  componentDivProps?.ref || null,
258
258
  ]) },
259
- React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className) }, children)))))))));
259
+ React.createElement("div", { ...contentProps, className: cn(styles.content, contentClassName, contentProps?.className, {
260
+ [styles.hasFooter]: hasFooter,
261
+ [styles.hasHeader]: hasHeader,
262
+ }), ref: contentElementRef }, children)))))))));
260
263
  if (!shouldRender)
261
264
  return null;
262
265
  return usePortal ? (React.createElement(Portal, { getPortalContainer: container, immediateMount: true }, renderContent())) : (renderContent());
package/moderncssm/index.module.css CHANGED
@@ -38,9 +38,23 @@ body:global(.is-locked) {
38
38
  height: 100%;
39
39
  display: flex;
40
40
  flex-direction: column;
41
- flex: 1;
41
+ flex: 1
42
42
  }
43
43
 
44
+ @media (display-mode: standalone) {
45
+
46
+ .content.hasFooter {
47
+ padding-bottom: unset
48
+ }
49
+ }
50
+
51
+ @media (display-mode: standalone) {
52
+
53
+ .content.hasHeader {
54
+ padding-top: unset
55
+ }
56
+ }
57
+
44
58
  .hidden {
45
59
  display: none;
46
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-base-modal",
3
- "version": "5.8.9",
3
+ "version": "5.9.0",
4
4
  "description": "BaseModal component",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,9 +14,9 @@
14
14
  "dependencies": {
15
15
  "@alfalab/core-components-backdrop": "^3.4.5",
16
16
  "@alfalab/core-components-global-store": "^2.1.0",
17
- "@alfalab/core-components-portal": "^3.3.6",
17
+ "@alfalab/core-components-portal": "^3.3.7",
18
18
  "@alfalab/core-components-stack": "^5.0.1",
19
- "@alfalab/core-components-shared": "^0.15.0",
19
+ "@alfalab/core-components-shared": "^0.16.0",
20
20
  "@juggle/resize-observer": "^3.3.1",
21
21
  "classnames": "^2.5.1",
22
22
  "react-focus-lock": "^2.12.1",
@@ -30,6 +30,6 @@
30
30
  "peerDependencies": {
31
31
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
32
32
  },
33
- "themesVersion": "13.7.0",
33
+ "themesVersion": "13.7.1",
34
34
  "varsVersion": "9.18.0"
35
35
  }
package/src/Component.tsx CHANGED
@@ -12,6 +12,7 @@ import React, {
12
12
  useMemo,
13
13
  useRef,
14
14
  useState,
15
+ WheelEvent,
15
16
  } from 'react';
16
17
  import FocusLock from 'react-focus-lock';
17
18
  import mergeRefs from 'react-merge-refs';
@@ -204,10 +205,20 @@ export type BaseModalProps = {
204
205
  */
205
206
  componentRef?: MutableRefObject<HTMLDivElement | null>;
206
207
 
208
+ /**
209
+ * Реф контентной области
210
+ */
211
+ contentElementRef?: MutableRefObject<HTMLDivElement | null>;
212
+
207
213
  /**
208
214
  * Блокирует скролл когда модальное окно открыто. Работает только на iOS.
209
215
  */
210
216
  iOSLock?: boolean;
217
+
218
+ /**
219
+ * Хэндлер события прокрутки колесиком
220
+ */
221
+ onWheel?: (e: WheelEvent<HTMLElement>) => void;
211
222
  };
212
223
 
213
224
  export type BaseModalContext = {
@@ -274,8 +285,10 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
274
285
  dataTestId,
275
286
  zIndex = stackingOrder.MODAL,
276
287
  componentRef = null,
288
+ contentElementRef = null,
277
289
  usePortal = true,
278
290
  iOSLock = false,
291
+ onWheel,
279
292
  },
280
293
  ref,
281
294
  ) => {
@@ -590,6 +603,7 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
590
603
  onKeyDown={handleKeyDown}
591
604
  onMouseDown={handleBackdropMouseDown}
592
605
  onMouseUp={handleBackdropMouseUp}
606
+ onWheel={onWheel}
593
607
  tabIndex={-1}
594
608
  data-test-id={dataTestId}
595
609
  style={{
@@ -625,7 +639,12 @@ export const BaseModal = forwardRef<HTMLDivElement, BaseModalProps>(
625
639
  styles.content,
626
640
  contentClassName,
627
641
  contentProps?.className,
642
+ {
643
+ [styles.hasFooter]: hasFooter,
644
+ [styles.hasHeader]: hasHeader,
645
+ },
628
646
  )}
647
+ ref={contentElementRef}
629
648
  >
630
649
  {children}
631
650
  </div>
package/src/index.module.css CHANGED
@@ -39,6 +39,18 @@ body:global(.is-locked) {
39
39
  display: flex;
40
40
  flex-direction: column;
41
41
  flex: 1;
42
+
43
+ &.hasFooter {
44
+ @media (display-mode: standalone) {
45
+ padding-bottom: unset;
46
+ }
47
+ }
48
+
49
+ &.hasHeader {
50
+ @media (display-mode: standalone) {
51
+ padding-top: unset;
52
+ }
53
+ }
42
54
  }
43
55
 
44
56
  .hidden {