@alfalab/core-components-base-modal 5.0.4 → 5.0.6
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.
- package/Component.d.ts +2 -2
- package/Component.js +11 -12
- package/cssm/Component.d.ts +2 -2
- package/cssm/Component.js +10 -11
- package/cssm/index.js +5 -5
- package/esm/Component.d.ts +2 -2
- package/esm/Component.js +9 -10
- package/esm/index.css +13 -13
- package/esm/index.js +5 -5
- package/index.css +13 -13
- package/index.js +5 -5
- package/modern/Component.d.ts +2 -2
- package/modern/Component.js +13 -14
- package/modern/index.css +13 -13
- package/modern/index.js +5 -5
- package/modern/utils.js +3 -5
- package/package.json +3 -3
- package/send-stats.js +1 -1
package/Component.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react-transition-group" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
|
|
5
5
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
6
|
-
import { PortalProps } from "@alfalab/core-components-portal";
|
|
7
6
|
import { BackdropProps } from "@alfalab/core-components-backdrop";
|
|
7
|
+
import { PortalProps } from "@alfalab/core-components-portal";
|
|
8
8
|
type BaseModalProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Контент
|
package/Component.js
CHANGED
|
@@ -3,26 +3,26 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var FocusLock = require('react-focus-lock');
|
|
7
7
|
var mergeRefs = require('react-merge-refs');
|
|
8
|
-
var resizeObserver = require('@juggle/resize-observer');
|
|
9
8
|
var reactTransitionGroup = require('react-transition-group');
|
|
10
|
-
var
|
|
11
|
-
require('
|
|
12
|
-
var coreComponentsPortal = require('@alfalab/core-components-portal');
|
|
9
|
+
var resizeObserver = require('@juggle/resize-observer');
|
|
10
|
+
var cn = require('classnames');
|
|
13
11
|
var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
|
|
12
|
+
var coreComponentsPortal = require('@alfalab/core-components-portal');
|
|
14
13
|
var coreComponentsStack = require('@alfalab/core-components-stack');
|
|
15
14
|
require('@alfalab/core-components-global-store');
|
|
16
15
|
var utils = require('./utils.js');
|
|
16
|
+
require('./matches-polyfill.js');
|
|
17
17
|
|
|
18
18
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
19
19
|
|
|
20
20
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
21
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
22
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
23
21
|
var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
|
|
22
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
23
|
+
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
/******************************************************************************
|
|
26
26
|
Copyright (c) Microsoft Corporation.
|
|
27
27
|
|
|
28
28
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -49,9 +49,10 @@ var __assign = function () {
|
|
|
49
49
|
return __assign.apply(this, arguments);
|
|
50
50
|
};
|
|
51
51
|
|
|
52
|
-
var styles = {"component":"base-
|
|
52
|
+
var styles = {"component":"base-modal__component_isi5p","wrapper":"base-modal__wrapper_isi5p","content":"base-modal__content_isi5p","hidden":"base-modal__hidden_isi5p","backdrop":"base-modal__backdrop_isi5p","appear":"base-modal__appear_isi5p","enter":"base-modal__enter_isi5p","appearActive":"base-modal__appearActive_isi5p","enterActive":"base-modal__enterActive_isi5p","exit":"base-modal__exit_isi5p","exitActive":"base-modal__exitActive_isi5p","exitDone":"base-modal__exitDone_isi5p"};
|
|
53
53
|
require('./index.css')
|
|
54
54
|
|
|
55
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
55
56
|
var BaseModalContext = React__default['default'].createContext({
|
|
56
57
|
hasFooter: false,
|
|
57
58
|
hasHeader: false,
|
|
@@ -90,9 +91,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
90
91
|
};
|
|
91
92
|
var isExited = exited || exited === null;
|
|
92
93
|
var shouldRender = keepMounted || open || !isExited;
|
|
93
|
-
var getContainer = React.useCallback(function () {
|
|
94
|
-
return (container ? container() : document.body);
|
|
95
|
-
}, [container]);
|
|
94
|
+
var getContainer = React.useCallback(function () { return (container ? container() : document.body); }, [container]);
|
|
96
95
|
var addResizeHandle = React.useCallback(function () {
|
|
97
96
|
if (!resizeObserverRef.current)
|
|
98
97
|
return;
|
package/cssm/Component.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react-transition-group" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
|
|
5
5
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
6
|
-
import { PortalProps } from "@alfalab/core-components-portal";
|
|
7
6
|
import { BackdropProps } from "@alfalab/core-components-backdrop";
|
|
7
|
+
import { PortalProps } from "@alfalab/core-components-portal";
|
|
8
8
|
type BaseModalProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Контент
|
package/cssm/Component.js
CHANGED
|
@@ -3,28 +3,28 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var React = require('react');
|
|
6
|
-
var
|
|
6
|
+
var FocusLock = require('react-focus-lock');
|
|
7
7
|
var mergeRefs = require('react-merge-refs');
|
|
8
|
-
var resizeObserver = require('@juggle/resize-observer');
|
|
9
8
|
var reactTransitionGroup = require('react-transition-group');
|
|
10
|
-
var
|
|
11
|
-
require('
|
|
12
|
-
var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
|
|
9
|
+
var resizeObserver = require('@juggle/resize-observer');
|
|
10
|
+
var cn = require('classnames');
|
|
13
11
|
var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
|
|
12
|
+
var coreComponentsPortal = require('@alfalab/core-components-portal/cssm');
|
|
14
13
|
var coreComponentsStack = require('@alfalab/core-components-stack/cssm');
|
|
15
14
|
require('@alfalab/core-components-global-store/cssm');
|
|
16
15
|
var utils = require('./utils.js');
|
|
17
16
|
var styles = require('./index.module.css');
|
|
17
|
+
require('./matches-polyfill.js');
|
|
18
18
|
|
|
19
19
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
20
|
|
|
21
21
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
23
|
-
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
24
22
|
var FocusLock__default = /*#__PURE__*/_interopDefaultLegacy(FocusLock);
|
|
23
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
|
|
24
|
+
var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
|
|
25
25
|
var styles__default = /*#__PURE__*/_interopDefaultLegacy(styles);
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
/******************************************************************************
|
|
28
28
|
Copyright (c) Microsoft Corporation.
|
|
29
29
|
|
|
30
30
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -51,6 +51,7 @@ var __assign = function () {
|
|
|
51
51
|
return __assign.apply(this, arguments);
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
54
55
|
var BaseModalContext = React__default['default'].createContext({
|
|
55
56
|
hasFooter: false,
|
|
56
57
|
hasHeader: false,
|
|
@@ -89,9 +90,7 @@ var BaseModal = React.forwardRef(function (_a, ref) {
|
|
|
89
90
|
};
|
|
90
91
|
var isExited = exited || exited === null;
|
|
91
92
|
var shouldRender = keepMounted || open || !isExited;
|
|
92
|
-
var getContainer = React.useCallback(function () {
|
|
93
|
-
return (container ? container() : document.body);
|
|
94
|
-
}, [container]);
|
|
93
|
+
var getContainer = React.useCallback(function () { return (container ? container() : document.body); }, [container]);
|
|
95
94
|
var addResizeHandle = React.useCallback(function () {
|
|
96
95
|
if (!resizeObserverRef.current)
|
|
97
96
|
return;
|
package/cssm/index.js
CHANGED
|
@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var Component = require('./Component.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('
|
|
7
|
+
require('react-focus-lock');
|
|
8
8
|
require('react-merge-refs');
|
|
9
|
-
require('@juggle/resize-observer');
|
|
10
9
|
require('react-transition-group');
|
|
11
|
-
require('
|
|
12
|
-
require('
|
|
13
|
-
require('@alfalab/core-components-portal/cssm');
|
|
10
|
+
require('@juggle/resize-observer');
|
|
11
|
+
require('classnames');
|
|
14
12
|
require('@alfalab/core-components-backdrop/cssm');
|
|
13
|
+
require('@alfalab/core-components-portal/cssm');
|
|
15
14
|
require('@alfalab/core-components-stack/cssm');
|
|
16
15
|
require('@alfalab/core-components-global-store/cssm');
|
|
17
16
|
var utils = require('./utils.js');
|
|
18
17
|
require('./index.module.css');
|
|
18
|
+
require('./matches-polyfill.js');
|
|
19
19
|
|
|
20
20
|
|
|
21
21
|
|
package/esm/Component.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react-transition-group" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
|
|
5
5
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
6
|
-
import { PortalProps } from "@alfalab/core-components-portal";
|
|
7
6
|
import { BackdropProps } from "@alfalab/core-components-backdrop";
|
|
7
|
+
import { PortalProps } from "@alfalab/core-components-portal";
|
|
8
8
|
type BaseModalProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Контент
|
package/esm/Component.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import FocusLock from 'react-focus-lock';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
|
-
import { ResizeObserver } from '@juggle/resize-observer';
|
|
5
4
|
import { CSSTransition } from 'react-transition-group';
|
|
6
|
-
import
|
|
7
|
-
import '
|
|
8
|
-
import { Portal } from '@alfalab/core-components-portal/esm';
|
|
5
|
+
import { ResizeObserver } from '@juggle/resize-observer';
|
|
6
|
+
import cn from 'classnames';
|
|
9
7
|
import { Backdrop } from '@alfalab/core-components-backdrop/esm';
|
|
8
|
+
import { Portal } from '@alfalab/core-components-portal/esm';
|
|
10
9
|
import { stackingOrder, Stack } from '@alfalab/core-components-stack/esm';
|
|
11
10
|
import '@alfalab/core-components-global-store/esm';
|
|
12
11
|
import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
|
|
12
|
+
import './matches-polyfill.js';
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
/******************************************************************************
|
|
15
15
|
Copyright (c) Microsoft Corporation.
|
|
16
16
|
|
|
17
17
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -38,9 +38,10 @@ var __assign = function () {
|
|
|
38
38
|
return __assign.apply(this, arguments);
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
var styles = {"component":"base-
|
|
41
|
+
var styles = {"component":"base-modal__component_isi5p","wrapper":"base-modal__wrapper_isi5p","content":"base-modal__content_isi5p","hidden":"base-modal__hidden_isi5p","backdrop":"base-modal__backdrop_isi5p","appear":"base-modal__appear_isi5p","enter":"base-modal__enter_isi5p","appearActive":"base-modal__appearActive_isi5p","enterActive":"base-modal__enterActive_isi5p","exit":"base-modal__exit_isi5p","exitActive":"base-modal__exitActive_isi5p","exitDone":"base-modal__exitDone_isi5p"};
|
|
42
42
|
require('./index.css')
|
|
43
43
|
|
|
44
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
44
45
|
var BaseModalContext = React.createContext({
|
|
45
46
|
hasFooter: false,
|
|
46
47
|
hasHeader: false,
|
|
@@ -79,9 +80,7 @@ var BaseModal = forwardRef(function (_a, ref) {
|
|
|
79
80
|
};
|
|
80
81
|
var isExited = exited || exited === null;
|
|
81
82
|
var shouldRender = keepMounted || open || !isExited;
|
|
82
|
-
var getContainer = useCallback(function () {
|
|
83
|
-
return (container ? container() : document.body);
|
|
84
|
-
}, [container]);
|
|
83
|
+
var getContainer = useCallback(function () { return (container ? container() : document.body); }, [container]);
|
|
85
84
|
var addResizeHandle = useCallback(function () {
|
|
86
85
|
if (!resizeObserverRef.current)
|
|
87
86
|
return;
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: vxwwx */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-primary: #fff;
|
|
4
4
|
}
|
|
@@ -10,14 +10,14 @@
|
|
|
10
10
|
|
|
11
11
|
/* Hard up */
|
|
12
12
|
}
|
|
13
|
-
.base-
|
|
13
|
+
.base-modal__component_isi5p {
|
|
14
14
|
position: relative;
|
|
15
15
|
box-sizing: border-box;
|
|
16
16
|
background: var(--color-light-bg-primary);
|
|
17
17
|
margin: auto;
|
|
18
18
|
flex-shrink: 0;
|
|
19
19
|
}
|
|
20
|
-
.base-
|
|
20
|
+
.base-modal__wrapper_isi5p {
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
23
|
left: 0;
|
|
@@ -30,33 +30,33 @@
|
|
|
30
30
|
align-items: center;
|
|
31
31
|
outline: 0;
|
|
32
32
|
}
|
|
33
|
-
.base-
|
|
33
|
+
.base-modal__content_isi5p {
|
|
34
34
|
width: 100%;
|
|
35
35
|
height: 100%;
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: column;
|
|
38
38
|
flex: 1;
|
|
39
39
|
}
|
|
40
|
-
.base-
|
|
40
|
+
.base-modal__hidden_isi5p {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
|
-
.base-
|
|
43
|
+
.base-modal__backdrop_isi5p {
|
|
44
44
|
z-index: 0;
|
|
45
45
|
}
|
|
46
|
-
.base-
|
|
47
|
-
.base-
|
|
46
|
+
.base-modal__appear_isi5p,
|
|
47
|
+
.base-modal__enter_isi5p {
|
|
48
48
|
opacity: 0;
|
|
49
49
|
}
|
|
50
|
-
.base-
|
|
51
|
-
.base-
|
|
50
|
+
.base-modal__appearActive_isi5p,
|
|
51
|
+
.base-modal__enterActive_isi5p {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transition: opacity 200ms ease-in;
|
|
54
54
|
}
|
|
55
|
-
.base-
|
|
55
|
+
.base-modal__exit_isi5p {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
|
-
.base-
|
|
59
|
-
.base-
|
|
58
|
+
.base-modal__exitActive_isi5p,
|
|
59
|
+
.base-modal__exitDone_isi5p {
|
|
60
60
|
opacity: 0;
|
|
61
61
|
transition: opacity 200ms ease-out;
|
|
62
62
|
}
|
package/esm/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export { BaseModal, BaseModalContext } from './Component.js';
|
|
2
2
|
import 'react';
|
|
3
|
-
import '
|
|
3
|
+
import 'react-focus-lock';
|
|
4
4
|
import 'react-merge-refs';
|
|
5
|
-
import '@juggle/resize-observer';
|
|
6
5
|
import 'react-transition-group';
|
|
7
|
-
import '
|
|
8
|
-
import '
|
|
9
|
-
import '@alfalab/core-components-portal/esm';
|
|
6
|
+
import '@juggle/resize-observer';
|
|
7
|
+
import 'classnames';
|
|
10
8
|
import '@alfalab/core-components-backdrop/esm';
|
|
9
|
+
import '@alfalab/core-components-portal/esm';
|
|
11
10
|
import '@alfalab/core-components-stack/esm';
|
|
12
11
|
import '@alfalab/core-components-global-store/esm';
|
|
13
12
|
export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
|
|
13
|
+
import './matches-polyfill.js';
|
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: vxwwx */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-primary: #fff;
|
|
4
4
|
}
|
|
@@ -10,14 +10,14 @@
|
|
|
10
10
|
|
|
11
11
|
/* Hard up */
|
|
12
12
|
}
|
|
13
|
-
.base-
|
|
13
|
+
.base-modal__component_isi5p {
|
|
14
14
|
position: relative;
|
|
15
15
|
box-sizing: border-box;
|
|
16
16
|
background: var(--color-light-bg-primary);
|
|
17
17
|
margin: auto;
|
|
18
18
|
flex-shrink: 0;
|
|
19
19
|
}
|
|
20
|
-
.base-
|
|
20
|
+
.base-modal__wrapper_isi5p {
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
23
|
left: 0;
|
|
@@ -30,33 +30,33 @@
|
|
|
30
30
|
align-items: center;
|
|
31
31
|
outline: 0;
|
|
32
32
|
}
|
|
33
|
-
.base-
|
|
33
|
+
.base-modal__content_isi5p {
|
|
34
34
|
width: 100%;
|
|
35
35
|
height: 100%;
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: column;
|
|
38
38
|
flex: 1;
|
|
39
39
|
}
|
|
40
|
-
.base-
|
|
40
|
+
.base-modal__hidden_isi5p {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
|
-
.base-
|
|
43
|
+
.base-modal__backdrop_isi5p {
|
|
44
44
|
z-index: 0;
|
|
45
45
|
}
|
|
46
|
-
.base-
|
|
47
|
-
.base-
|
|
46
|
+
.base-modal__appear_isi5p,
|
|
47
|
+
.base-modal__enter_isi5p {
|
|
48
48
|
opacity: 0;
|
|
49
49
|
}
|
|
50
|
-
.base-
|
|
51
|
-
.base-
|
|
50
|
+
.base-modal__appearActive_isi5p,
|
|
51
|
+
.base-modal__enterActive_isi5p {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transition: opacity 200ms ease-in;
|
|
54
54
|
}
|
|
55
|
-
.base-
|
|
55
|
+
.base-modal__exit_isi5p {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
|
-
.base-
|
|
59
|
-
.base-
|
|
58
|
+
.base-modal__exitActive_isi5p,
|
|
59
|
+
.base-modal__exitDone_isi5p {
|
|
60
60
|
opacity: 0;
|
|
61
61
|
transition: opacity 200ms ease-out;
|
|
62
62
|
}
|
package/index.js
CHANGED
|
@@ -4,17 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
var Component = require('./Component.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('
|
|
7
|
+
require('react-focus-lock');
|
|
8
8
|
require('react-merge-refs');
|
|
9
|
-
require('@juggle/resize-observer');
|
|
10
9
|
require('react-transition-group');
|
|
11
|
-
require('
|
|
12
|
-
require('
|
|
13
|
-
require('@alfalab/core-components-portal');
|
|
10
|
+
require('@juggle/resize-observer');
|
|
11
|
+
require('classnames');
|
|
14
12
|
require('@alfalab/core-components-backdrop');
|
|
13
|
+
require('@alfalab/core-components-portal');
|
|
15
14
|
require('@alfalab/core-components-stack');
|
|
16
15
|
require('@alfalab/core-components-global-store');
|
|
17
16
|
var utils = require('./utils.js');
|
|
17
|
+
require('./matches-polyfill.js');
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
package/modern/Component.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
/// <reference types="react-transition-group" />
|
|
2
2
|
/// <reference types="react" />
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { FC, KeyboardEvent, MouseEvent, MutableRefObject, ReactNode, Ref } from "react";
|
|
5
5
|
import { TransitionProps } from 'react-transition-group/Transition';
|
|
6
|
-
import { PortalProps } from "@alfalab/core-components-portal";
|
|
7
6
|
import { BackdropProps } from "@alfalab/core-components-backdrop";
|
|
7
|
+
import { PortalProps } from "@alfalab/core-components-portal";
|
|
8
8
|
type BaseModalProps = {
|
|
9
9
|
/**
|
|
10
10
|
* Контент
|
package/modern/Component.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import React, { forwardRef, useState, useRef, useCallback, useEffect, useMemo } from 'react';
|
|
2
|
-
import
|
|
2
|
+
import FocusLock from 'react-focus-lock';
|
|
3
3
|
import mergeRefs from 'react-merge-refs';
|
|
4
|
-
import { ResizeObserver } from '@juggle/resize-observer';
|
|
5
4
|
import { CSSTransition } from 'react-transition-group';
|
|
6
|
-
import
|
|
7
|
-
import '
|
|
8
|
-
import { Portal } from '@alfalab/core-components-portal/modern';
|
|
5
|
+
import { ResizeObserver } from '@juggle/resize-observer';
|
|
6
|
+
import cn from 'classnames';
|
|
9
7
|
import { Backdrop } from '@alfalab/core-components-backdrop/modern';
|
|
8
|
+
import { Portal } from '@alfalab/core-components-portal/modern';
|
|
10
9
|
import { stackingOrder, Stack } from '@alfalab/core-components-stack/modern';
|
|
11
10
|
import '@alfalab/core-components-global-store/modern';
|
|
12
11
|
import { isScrolledToTop, isScrolledToBottom, handleContainer, restoreContainerStyles, hasScrollbar, getScrollbarSize } from './utils.js';
|
|
12
|
+
import './matches-polyfill.js';
|
|
13
13
|
|
|
14
|
-
var styles = {"component":"base-
|
|
14
|
+
var styles = {"component":"base-modal__component_isi5p","wrapper":"base-modal__wrapper_isi5p","content":"base-modal__content_isi5p","hidden":"base-modal__hidden_isi5p","backdrop":"base-modal__backdrop_isi5p","appear":"base-modal__appear_isi5p","enter":"base-modal__enter_isi5p","appearActive":"base-modal__appearActive_isi5p","enterActive":"base-modal__enterActive_isi5p","exit":"base-modal__exit_isi5p","exitActive":"base-modal__exitActive_isi5p","exitDone":"base-modal__exitDone_isi5p"};
|
|
15
15
|
require('./index.css')
|
|
16
16
|
|
|
17
17
|
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
|
|
18
|
+
// eslint-disable-next-line @typescript-eslint/no-redeclare
|
|
18
19
|
const BaseModalContext = React.createContext({
|
|
19
20
|
hasFooter: false,
|
|
20
21
|
hasHeader: false,
|
|
@@ -52,9 +53,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
52
53
|
};
|
|
53
54
|
const isExited = exited || exited === null;
|
|
54
55
|
const shouldRender = keepMounted || open || !isExited;
|
|
55
|
-
const getContainer = useCallback(() =>
|
|
56
|
-
return (container ? container() : document.body);
|
|
57
|
-
}, [container]);
|
|
56
|
+
const getContainer = useCallback(() => (container ? container() : document.body), [container]);
|
|
58
57
|
const addResizeHandle = useCallback(() => {
|
|
59
58
|
if (!resizeObserverRef.current)
|
|
60
59
|
return;
|
|
@@ -154,7 +153,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
154
153
|
if (onMount)
|
|
155
154
|
onMount();
|
|
156
155
|
}, [addResizeHandle, getScrollHandler, handleScroll, onMount, transitionProps]);
|
|
157
|
-
const handleExited = useCallback(node => {
|
|
156
|
+
const handleExited = useCallback((node) => {
|
|
158
157
|
removeResizeHandle();
|
|
159
158
|
setExited(true);
|
|
160
159
|
if (scrollableNodeRef.current) {
|
|
@@ -219,12 +218,12 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
219
218
|
]);
|
|
220
219
|
if (!shouldRender)
|
|
221
220
|
return null;
|
|
222
|
-
return (React.createElement(Stack, { value: zIndex }, computedZIndex => (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
|
|
221
|
+
return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: container, immediateMount: true },
|
|
223
222
|
React.createElement(BaseModalContext.Provider, { value: contextValue },
|
|
224
223
|
React.createElement(FocusLock, { autoFocus: !disableAutoFocus, disabled: disableFocusLock || !open, returnFocus: !disableRestoreFocus },
|
|
225
|
-
Backdrop$1 && (React.createElement(Backdrop$1,
|
|
224
|
+
Backdrop$1 && (React.createElement(Backdrop$1, { ...backdropProps, className: cn(backdropProps.className, styles.backdrop), open: open, style: {
|
|
226
225
|
zIndex: computedZIndex,
|
|
227
|
-
} }))
|
|
226
|
+
} })),
|
|
228
227
|
React.createElement("div", { role: 'dialog', className: cn(styles.wrapper, wrapperClassName, {
|
|
229
228
|
[styles.hidden]: !open && isExited,
|
|
230
229
|
}), ref: mergeRefs([ref, wrapperRef]), onKeyDown: handleKeyDown, onMouseDown: handleBackdropMouseDown, onMouseUp: handleBackdropMouseUp,
|
|
@@ -232,7 +231,7 @@ const BaseModal = forwardRef(({ open, container, children, scrollHandler = 'wrap
|
|
|
232
231
|
tabIndex: 0, "data-test-id": dataTestId, style: {
|
|
233
232
|
zIndex: computedZIndex,
|
|
234
233
|
} },
|
|
235
|
-
React.createElement(CSSTransition,
|
|
234
|
+
React.createElement(CSSTransition, { appear: true, timeout: 200, classNames: styles, ...transitionProps, in: open, onEntered: handleEntered, onExited: handleExited },
|
|
236
235
|
React.createElement("div", { className: cn(styles.component, className), ref: mergeRefs([componentRef, componentNodeRef]) },
|
|
237
236
|
React.createElement("div", { className: cn(styles.content, contentClassName) }, children))))))))));
|
|
238
237
|
});
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: vxwwx */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-primary: #fff;
|
|
4
4
|
}
|
|
@@ -10,14 +10,14 @@
|
|
|
10
10
|
|
|
11
11
|
/* Hard up */
|
|
12
12
|
}
|
|
13
|
-
.base-
|
|
13
|
+
.base-modal__component_isi5p {
|
|
14
14
|
position: relative;
|
|
15
15
|
box-sizing: border-box;
|
|
16
16
|
background: var(--color-light-bg-primary);
|
|
17
17
|
margin: auto;
|
|
18
18
|
flex-shrink: 0;
|
|
19
19
|
}
|
|
20
|
-
.base-
|
|
20
|
+
.base-modal__wrapper_isi5p {
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
23
|
left: 0;
|
|
@@ -30,33 +30,33 @@
|
|
|
30
30
|
align-items: center;
|
|
31
31
|
outline: 0;
|
|
32
32
|
}
|
|
33
|
-
.base-
|
|
33
|
+
.base-modal__content_isi5p {
|
|
34
34
|
width: 100%;
|
|
35
35
|
height: 100%;
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: column;
|
|
38
38
|
flex: 1;
|
|
39
39
|
}
|
|
40
|
-
.base-
|
|
40
|
+
.base-modal__hidden_isi5p {
|
|
41
41
|
display: none;
|
|
42
42
|
}
|
|
43
|
-
.base-
|
|
43
|
+
.base-modal__backdrop_isi5p {
|
|
44
44
|
z-index: 0;
|
|
45
45
|
}
|
|
46
|
-
.base-
|
|
47
|
-
.base-
|
|
46
|
+
.base-modal__appear_isi5p,
|
|
47
|
+
.base-modal__enter_isi5p {
|
|
48
48
|
opacity: 0;
|
|
49
49
|
}
|
|
50
|
-
.base-
|
|
51
|
-
.base-
|
|
50
|
+
.base-modal__appearActive_isi5p,
|
|
51
|
+
.base-modal__enterActive_isi5p {
|
|
52
52
|
opacity: 1;
|
|
53
53
|
transition: opacity 200ms ease-in;
|
|
54
54
|
}
|
|
55
|
-
.base-
|
|
55
|
+
.base-modal__exit_isi5p {
|
|
56
56
|
opacity: 1;
|
|
57
57
|
}
|
|
58
|
-
.base-
|
|
59
|
-
.base-
|
|
58
|
+
.base-modal__exitActive_isi5p,
|
|
59
|
+
.base-modal__exitDone_isi5p {
|
|
60
60
|
opacity: 0;
|
|
61
61
|
transition: opacity 200ms ease-out;
|
|
62
62
|
}
|
package/modern/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import 'react';
|
|
2
|
-
import '
|
|
2
|
+
import 'react-focus-lock';
|
|
3
3
|
import 'react-merge-refs';
|
|
4
|
-
import '@juggle/resize-observer';
|
|
5
4
|
import 'react-transition-group';
|
|
6
|
-
import '
|
|
7
|
-
import '
|
|
8
|
-
import '@alfalab/core-components-portal/modern';
|
|
5
|
+
import '@juggle/resize-observer';
|
|
6
|
+
import 'classnames';
|
|
9
7
|
import '@alfalab/core-components-backdrop/modern';
|
|
8
|
+
import '@alfalab/core-components-portal/modern';
|
|
10
9
|
import '@alfalab/core-components-stack/modern';
|
|
11
10
|
import '@alfalab/core-components-global-store/modern';
|
|
12
11
|
export { getScrollbarSize, handleContainer, hasScrollbar, isScrolledToBottom, isScrolledToTop, restoreContainerStyles } from './utils.js';
|
|
13
12
|
export { BaseModal, BaseModalContext } from './Component.js';
|
|
13
|
+
import './matches-polyfill.js';
|
package/modern/utils.js
CHANGED
|
@@ -33,12 +33,10 @@ const isOverflowing = (container) => {
|
|
|
33
33
|
}
|
|
34
34
|
return container.scrollHeight > container.clientHeight;
|
|
35
35
|
};
|
|
36
|
-
const getPaddingRight = (node) =>
|
|
37
|
-
return parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
|
|
38
|
-
};
|
|
36
|
+
const getPaddingRight = (node) => parseInt(window.getComputedStyle(node).paddingRight, 10) || 0;
|
|
39
37
|
const restoreContainerStyles = (container) => {
|
|
40
38
|
const modalRestoreStyles = getModalStore().getRestoreStyles();
|
|
41
|
-
const index = modalRestoreStyles.findIndex(s => s.container === container);
|
|
39
|
+
const index = modalRestoreStyles.findIndex((s) => s.container === container);
|
|
42
40
|
const existingStyles = modalRestoreStyles[index];
|
|
43
41
|
if (!existingStyles)
|
|
44
42
|
return;
|
|
@@ -59,7 +57,7 @@ const handleContainer = (container) => {
|
|
|
59
57
|
if (!container)
|
|
60
58
|
return;
|
|
61
59
|
const modalRestoreStyles = getModalStore().getRestoreStyles();
|
|
62
|
-
const existingStyles = modalRestoreStyles.find(s => s.container === container);
|
|
60
|
+
const existingStyles = modalRestoreStyles.find((s) => s.container === container);
|
|
63
61
|
if (existingStyles) {
|
|
64
62
|
existingStyles.modals += 1;
|
|
65
63
|
return;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-base-modal",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.6",
|
|
4
4
|
"description": "BaseModal component",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@alfalab/core-components-backdrop": "^3.0.1",
|
|
17
|
-
"@alfalab/core-components-global-store": "^2.0.
|
|
18
|
-
"@alfalab/core-components-portal": "^3.1.
|
|
17
|
+
"@alfalab/core-components-global-store": "^2.0.2",
|
|
18
|
+
"@alfalab/core-components-portal": "^3.1.1",
|
|
19
19
|
"@alfalab/core-components-stack": "^4.0.1",
|
|
20
20
|
"@juggle/resize-observer": "^3.3.1",
|
|
21
21
|
"classnames": "^2.3.1",
|