@semcore/modal 3.8.4 → 4.0.0-beta.1
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/CHANGELOG.md +3 -3
- package/lib/cjs/Modal.js +6 -6
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/Modal.js +6 -6
- package/lib/es6/index.d.js.map +1 -1
- package/lib/types/index.d.ts +45 -37
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
-
## [
|
|
5
|
+
## [4.0.0] - 2023-07-15
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Break
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Strict, backward incompatible typings.
|
|
10
10
|
|
|
11
11
|
## [3.8.3] - 2023-06-28
|
|
12
12
|
|
package/lib/cjs/Modal.js
CHANGED
|
@@ -32,12 +32,12 @@ var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
|
|
|
32
32
|
var _useFocusLock = require("@semcore/utils/lib/use/useFocusLock");
|
|
33
33
|
var _ThemeProvider = require("@semcore/utils/lib/ThemeProvider");
|
|
34
34
|
/*__reshadow-styles__:"./style/modal.shadow.css"*/
|
|
35
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
36
|
-
"__SWindow": "
|
|
37
|
-
"__SOverlay": "
|
|
38
|
-
"__SClose": "
|
|
39
|
-
"_keyboardFocused": "
|
|
40
|
-
"__STitle": "
|
|
35
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SWindow_v6wa3_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));color:var(--intergalactic-text-primary, #191b23)}.___SWindow_v6wa3_gg_:focus{outline:0}.___SOverlay_v6wa3_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x, 40px);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;z-index:var(--intergalactic-z-index-modal, 600);-webkit-overflow-scrolling:touch}.___SOverlay_v6wa3_gg_ .___SOverlay_v6wa3_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SClose_v6wa3_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);cursor:pointer;z-index:1;border:0;background:0 0;outline:0}@media (hover:hover){.___SClose_v6wa3_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b)}}.___SClose_v6wa3_gg_.__keyboardFocused_v6wa3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STitle_v6wa3_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px)}@media (max-width:767px){.___SWindow_v6wa3_gg_{min-width:60%}.___SOverlay_v6wa3_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}" /*__inner_css_end__*/, "v6wa3_gg_") /*__reshadow_css_end__*/, {
|
|
36
|
+
"__SWindow": "___SWindow_v6wa3_gg_",
|
|
37
|
+
"__SOverlay": "___SOverlay_v6wa3_gg_",
|
|
38
|
+
"__SClose": "___SClose_v6wa3_gg_",
|
|
39
|
+
"_keyboardFocused": "__keyboardFocused_v6wa3_gg_",
|
|
40
|
+
"__STitle": "___STitle_v6wa3_gg_"
|
|
41
41
|
});
|
|
42
42
|
var ModalRoot = /*#__PURE__*/function (_Component) {
|
|
43
43
|
(0, _inherits2["default"])(ModalRoot, _Component);
|
package/lib/cjs/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { FadeInOutProps, SlideProps } from '@semcore/animation';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { PortalProps } from '@semcore/portal';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { TextProps } from '@semcore/typography';\n\n/** @deprecated */\nexport interface IModalProps extends ModalProps, UnknownProperties {}\nexport type ModalProps = PortalProps &\n BoxProps &\n FadeInOutProps & {\n /** Duration of animation, ms\n * @default 200\n */\n duration?: number;\n /** This property is responsible for the visibility of the modal window */\n visible?: boolean;\n /** Function called when the component is hidden */\n onClose?: (\n trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n /** Displaying the close button(x) in the upper-right corner of the modal dialog\n * @default true\n * */\n closable?: boolean;\n /**\n * Setting `true` disables mechanism that hides document body scrollbar when Modal is visible\n * @default false\n */\n disablePreventScroll?: boolean;\n\n locale?: string;\n };\n\n/** @deprecated */\nexport interface IWindowProps extends WindowProps, UnknownProperties {}\nexport type WindowProps = BoxProps & SlideProps & {};\n\n/** @deprecated */\nexport interface IModalContext extends ModalContext, UnknownProperties {}\nexport type ModalContext = {\n getOverlayProps: PropGetterFn;\n getWindowProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n};\n\ndeclare const Modal: Intergalactic.Component<'div', ModalProps, ModalContext> & {\n Window: Intergalactic.Component<'div', WindowProps>;\n Overlay: typeof Box;\n Close: typeof Box;\n Title: Intergalactic.Component<'div', TextProps>;\n};\n\nexport default Modal;\n"],"mappings":""}
|
package/lib/es6/Modal.js
CHANGED
|
@@ -23,12 +23,12 @@ import usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';
|
|
|
23
23
|
import { isAdvanceMode } from '@semcore/utils/lib/findComponent';
|
|
24
24
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
25
25
|
/*__reshadow-styles__:"./style/modal.shadow.css"*/
|
|
26
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
27
|
-
"__SWindow": "
|
|
28
|
-
"__SOverlay": "
|
|
29
|
-
"__SClose": "
|
|
30
|
-
"_keyboardFocused": "
|
|
31
|
-
"__STitle": "
|
|
26
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SWindow_v6wa3_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));color:var(--intergalactic-text-primary, #191b23)}.___SWindow_v6wa3_gg_:focus{outline:0}.___SOverlay_v6wa3_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x, 40px);background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;z-index:var(--intergalactic-z-index-modal, 600);-webkit-overflow-scrolling:touch}.___SOverlay_v6wa3_gg_ .___SOverlay_v6wa3_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}.___SClose_v6wa3_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6);cursor:pointer;z-index:1;border:0;background:0 0;outline:0}@media (hover:hover){.___SClose_v6wa3_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b)}}.___SClose_v6wa3_gg_.__keyboardFocused_v6wa3_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STitle_v6wa3_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px)}@media (max-width:767px){.___SWindow_v6wa3_gg_{min-width:60%}.___SOverlay_v6wa3_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}" /*__inner_css_end__*/, "v6wa3_gg_") /*__reshadow_css_end__*/, {
|
|
27
|
+
"__SWindow": "___SWindow_v6wa3_gg_",
|
|
28
|
+
"__SOverlay": "___SOverlay_v6wa3_gg_",
|
|
29
|
+
"__SClose": "___SClose_v6wa3_gg_",
|
|
30
|
+
"_keyboardFocused": "__keyboardFocused_v6wa3_gg_",
|
|
31
|
+
"__STitle": "___STitle_v6wa3_gg_"
|
|
32
32
|
});
|
|
33
33
|
import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
|
|
34
34
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
package/lib/es6/index.d.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { FadeInOutProps, SlideProps } from '@semcore/animation';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { PortalProps } from '@semcore/portal';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { TextProps } from '@semcore/typography';\n\n/** @deprecated */\nexport interface IModalProps extends ModalProps, UnknownProperties {}\nexport type ModalProps = PortalProps &\n BoxProps &\n FadeInOutProps & {\n /** Duration of animation, ms\n * @default 200\n */\n duration?: number;\n /** This property is responsible for the visibility of the modal window */\n visible?: boolean;\n /** Function called when the component is hidden */\n onClose?: (\n trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n /** Displaying the close button(x) in the upper-right corner of the modal dialog\n * @default true\n * */\n closable?: boolean;\n /**\n * Setting `true` disables mechanism that hides document body scrollbar when Modal is visible\n * @default false\n */\n disablePreventScroll?: boolean;\n\n locale?: string;\n };\n\n/** @deprecated */\nexport interface IWindowProps extends WindowProps, UnknownProperties {}\nexport type WindowProps = BoxProps & SlideProps & {};\n\n/** @deprecated */\nexport interface IModalContext extends ModalContext, UnknownProperties {}\nexport type ModalContext = {\n getOverlayProps: PropGetterFn;\n getWindowProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n};\n\ndeclare const Modal: Intergalactic.Component<'div', ModalProps, ModalContext> & {\n Window: Intergalactic.Component<'div', WindowProps>;\n Overlay: typeof Box;\n Close: typeof Box;\n Title: Intergalactic.Component<'div', TextProps>;\n};\n\nexport default Modal;\n"],"mappings":""}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,48 +1,56 @@
|
|
|
1
|
-
import React
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { Box,
|
|
6
|
-
import {
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FadeInOutProps, SlideProps } from '@semcore/animation';
|
|
3
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
4
|
+
import { PortalProps } from '@semcore/portal';
|
|
5
|
+
import { Box, BoxProps } from '@semcore/flex-box';
|
|
6
|
+
import { TextProps } from '@semcore/typography';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
8
|
+
/** @deprecated */
|
|
9
|
+
export interface IModalProps extends ModalProps, UnknownProperties {}
|
|
10
|
+
export type ModalProps = PortalProps &
|
|
11
|
+
BoxProps &
|
|
12
|
+
FadeInOutProps & {
|
|
13
|
+
/** Duration of animation, ms
|
|
14
|
+
* @default 200
|
|
15
|
+
*/
|
|
16
|
+
duration?: number;
|
|
17
|
+
/** This property is responsible for the visibility of the modal window */
|
|
18
|
+
visible?: boolean;
|
|
19
|
+
/** Function called when the component is hidden */
|
|
20
|
+
onClose?: (
|
|
21
|
+
trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',
|
|
22
|
+
e?: React.MouseEvent | React.KeyboardEvent,
|
|
23
|
+
) => void;
|
|
24
|
+
/** Displaying the close button(x) in the upper-right corner of the modal dialog
|
|
25
|
+
* @default true
|
|
26
|
+
* */
|
|
27
|
+
closable?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Setting `true` disables mechanism that hides document body scrollbar when Modal is visible
|
|
30
|
+
* @default false
|
|
31
|
+
*/
|
|
32
|
+
disablePreventScroll?: boolean;
|
|
29
33
|
|
|
30
|
-
|
|
31
|
-
}
|
|
34
|
+
locale?: string;
|
|
35
|
+
};
|
|
32
36
|
|
|
33
|
-
|
|
37
|
+
/** @deprecated */
|
|
38
|
+
export interface IWindowProps extends WindowProps, UnknownProperties {}
|
|
39
|
+
export type WindowProps = BoxProps & SlideProps & {};
|
|
34
40
|
|
|
35
|
-
|
|
41
|
+
/** @deprecated */
|
|
42
|
+
export interface IModalContext extends ModalContext, UnknownProperties {}
|
|
43
|
+
export type ModalContext = {
|
|
36
44
|
getOverlayProps: PropGetterFn;
|
|
37
45
|
getWindowProps: PropGetterFn;
|
|
38
46
|
getCloseProps: PropGetterFn;
|
|
39
|
-
}
|
|
47
|
+
};
|
|
40
48
|
|
|
41
|
-
declare const Modal:
|
|
42
|
-
Window: <
|
|
43
|
-
Overlay:
|
|
44
|
-
Close:
|
|
45
|
-
Title: <
|
|
49
|
+
declare const Modal: Intergalactic.Component<'div', ModalProps, ModalContext> & {
|
|
50
|
+
Window: Intergalactic.Component<'div', WindowProps>;
|
|
51
|
+
Overlay: typeof Box;
|
|
52
|
+
Close: typeof Box;
|
|
53
|
+
Title: Intergalactic.Component<'div', TextProps>;
|
|
46
54
|
};
|
|
47
55
|
|
|
48
56
|
export default Modal;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/modal",
|
|
3
3
|
"description": "Semrush Modal Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "4.0.0-beta.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -9,16 +9,16 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/animation": "
|
|
13
|
-
"@semcore/flex-box": "
|
|
14
|
-
"@semcore/icon": "
|
|
15
|
-
"@semcore/outside-click": "
|
|
16
|
-
"@semcore/portal": "
|
|
17
|
-
"@semcore/typography": "
|
|
18
|
-
"@semcore/utils": "
|
|
12
|
+
"@semcore/animation": "2.0.0-beta.1",
|
|
13
|
+
"@semcore/flex-box": "5.0.0-beta.1",
|
|
14
|
+
"@semcore/icon": "4.0.0-beta.1",
|
|
15
|
+
"@semcore/outside-click": "3.0.0-beta.1",
|
|
16
|
+
"@semcore/portal": "3.0.0-beta.1",
|
|
17
|
+
"@semcore/typography": "5.0.0-beta.1",
|
|
18
|
+
"@semcore/utils": "4.0.0-beta.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@semcore/core": "
|
|
21
|
+
"@semcore/core": "2.0.0-beta.1",
|
|
22
22
|
"react": "16.8 - 18",
|
|
23
23
|
"react-dom": "16.8 - 18"
|
|
24
24
|
},
|