@semcore/fullscreen-modal 2.4.4 → 3.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/FullscreenModal.js +13 -13
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/es6/FullscreenModal.js +13 -13
- package/lib/es6/index.d.js.map +1 -1
- package/lib/types/index.d.ts +31 -22
- package/package.json +7 -7
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
|
+
## [3.0.0] - 2023-07-15
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### Break
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Strict, backward incompatible typings.
|
|
10
10
|
|
|
11
11
|
## [2.4.3] - 2023-06-28
|
|
12
12
|
|
|
@@ -26,19 +26,19 @@ var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i
|
|
|
26
26
|
var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
|
|
27
27
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
28
28
|
/*__reshadow-styles__:"./style/fullscreen-modal.shadow.css"*/
|
|
29
|
-
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".
|
|
30
|
-
"__SFullscreenOverlay": "
|
|
31
|
-
"__SFullscreenModal": "
|
|
32
|
-
"__SClose": "
|
|
33
|
-
"__SBack": "
|
|
34
|
-
"_keyboardFocused": "
|
|
35
|
-
"__SBackText": "
|
|
36
|
-
"__STitle": "
|
|
37
|
-
"__SDescription": "
|
|
38
|
-
"__SHeader": "
|
|
39
|
-
"__SFooter": "
|
|
40
|
-
"__SBody": "
|
|
41
|
-
"__SSection": "
|
|
29
|
+
var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SFullscreenOverlay_1ux5t_gg_{padding:0}.___SFullscreenModal_1ux5t_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:0;padding:0}.___SBack_1ux5t_gg_,.___SClose_1ux5t_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1ux5t_gg_{top:17px;right:23px;padding:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6)}@media (hover:hover){.___SClose_1ux5t_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b)}}.___SBack_1ux5t_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-primary-neutral, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);background:0 0;padding:0;border:0;outline:0}@media (hover:hover){.___SBack_1ux5t_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #484a54)}}.___SBack_1ux5t_gg_.__keyboardFocused_1ux5t_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBackText_1ux5t_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBackText_1ux5t_gg_,.___SDescription_1ux5t_gg_,.___STitle_1ux5t_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1ux5t_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-bold, 700);color:var(--intergalactic-text-primary, #191b23)}.___SDescription_1ux5t_gg_{display:flex;align-items:baseline;font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);color:var(--intergalactic-text-secondary, #6c6e79)}.___SDescription_1ux5t_gg_::before{content:\"\";position:relative;top:var(--intergalactic-spacing-1x, 4px);display:block;margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px);height:24px;width:1px;background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SHeader_1ux5t_gg_{display:flex;align-items:baseline;padding-left:var(--intergalactic-spacing-8x, 32px);padding-bottom:var(--intergalactic-spacing-2x, 8px);padding-right:calc(var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px));padding-top:var(--intergalactic-spacing-10x, 40px);min-height:76px;box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SFooter_1ux5t_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_1ux5t_gg_{display:flex;height:100%;overflow:auto}.___SSection_1ux5t_gg_{padding-top:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-6x, 24px);padding-left:var(--intergalactic-spacing-8x, 32px);padding-right:var(--intergalactic-spacing-8x, 32px);flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1ux5t_gg_{transition:none}}" /*__inner_css_end__*/, "1ux5t_gg_") /*__reshadow_css_end__*/, {
|
|
30
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_1ux5t_gg_",
|
|
31
|
+
"__SFullscreenModal": "___SFullscreenModal_1ux5t_gg_",
|
|
32
|
+
"__SClose": "___SClose_1ux5t_gg_",
|
|
33
|
+
"__SBack": "___SBack_1ux5t_gg_",
|
|
34
|
+
"_keyboardFocused": "__keyboardFocused_1ux5t_gg_",
|
|
35
|
+
"__SBackText": "___SBackText_1ux5t_gg_",
|
|
36
|
+
"__STitle": "___STitle_1ux5t_gg_",
|
|
37
|
+
"__SDescription": "___SDescription_1ux5t_gg_",
|
|
38
|
+
"__SHeader": "___SHeader_1ux5t_gg_",
|
|
39
|
+
"__SFooter": "___SFooter_1ux5t_gg_",
|
|
40
|
+
"__SBody": "___SBody_1ux5t_gg_",
|
|
41
|
+
"__SSection": "___SSection_1ux5t_gg_"
|
|
42
42
|
});
|
|
43
43
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
|
44
44
|
(0, _inherits2["default"])(FullscreenModalRoot, _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 {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { ModalProps } from '@semcore/modal';\nimport { Flex, Box, BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\nimport { Text } from '@semcore/typography';\n\n/** @deprecated */\nexport interface IFullscreenModalProps extends FullscreenModalProps, UnknownProperties {}\nexport type FullscreenModalProps = ModalProps & {\n /** Function that is invoked when hiding a component */\n onClose?: (\n trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n};\n\n/** @deprecated */\nexport interface IFullscreenModalHeaderProps\n extends FullscreenModalHeaderProps,\n UnknownProperties {}\nexport type FullscreenModalHeaderProps = BoxProps & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IFullscreenModalContext extends FullscreenModalContext, UnknownProperties {}\nexport type FullscreenModalContext = {\n getBackProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n};\n\ndeclare const FullscreenModal: Intergalactic.Component<\n 'div',\n FullscreenModalProps,\n FullscreenModalContext\n> & {\n Header: Intergalactic.Component<'div', FullscreenModalHeaderProps>;\n Footer: typeof Flex;\n Close: Intergalactic.Component<'div', IconProps>;\n Back: typeof Box;\n Body: typeof Box;\n Section: typeof Box;\n Title: typeof Text;\n Description: typeof Text;\n};\n\nexport default FullscreenModal;\n"],"mappings":""}
|
|
@@ -27,19 +27,19 @@ import { localizedMessages } from './translations/__intergalactic-dynamic-locale
|
|
|
27
27
|
import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
|
|
28
28
|
import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
|
|
29
29
|
/*__reshadow-styles__:"./style/fullscreen-modal.shadow.css"*/
|
|
30
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
31
|
-
"__SFullscreenOverlay": "
|
|
32
|
-
"__SFullscreenModal": "
|
|
33
|
-
"__SClose": "
|
|
34
|
-
"__SBack": "
|
|
35
|
-
"_keyboardFocused": "
|
|
36
|
-
"__SBackText": "
|
|
37
|
-
"__STitle": "
|
|
38
|
-
"__SDescription": "
|
|
39
|
-
"__SHeader": "
|
|
40
|
-
"__SFooter": "
|
|
41
|
-
"__SBody": "
|
|
42
|
-
"__SSection": "
|
|
30
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SFullscreenOverlay_1ux5t_gg_{padding:0}.___SFullscreenModal_1ux5t_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:0;padding:0}.___SBack_1ux5t_gg_,.___SClose_1ux5t_gg_{cursor:pointer;position:absolute;z-index:1}.___SClose_1ux5t_gg_{top:17px;right:23px;padding:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-secondary-neutral, #a9abb6)}@media (hover:hover){.___SClose_1ux5t_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active, #8a8e9b)}}.___SBack_1ux5t_gg_{top:8px;left:32px;display:flex;align-items:center;margin-bottom:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-primary-neutral, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);background:0 0;padding:0;border:0;outline:0}@media (hover:hover){.___SBack_1ux5t_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #484a54)}}.___SBack_1ux5t_gg_.__keyboardFocused_1ux5t_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBackText_1ux5t_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBackText_1ux5t_gg_,.___SDescription_1ux5t_gg_,.___STitle_1ux5t_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1ux5t_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-bold, 700);color:var(--intergalactic-text-primary, #191b23)}.___SDescription_1ux5t_gg_{display:flex;align-items:baseline;font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);color:var(--intergalactic-text-secondary, #6c6e79)}.___SDescription_1ux5t_gg_::before{content:\"\";position:relative;top:var(--intergalactic-spacing-1x, 4px);display:block;margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px);height:24px;width:1px;background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SHeader_1ux5t_gg_{display:flex;align-items:baseline;padding-left:var(--intergalactic-spacing-8x, 32px);padding-bottom:var(--intergalactic-spacing-2x, 8px);padding-right:calc(var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px));padding-top:var(--intergalactic-spacing-10x, 40px);min-height:76px;box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SFooter_1ux5t_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_1ux5t_gg_{display:flex;height:100%;overflow:auto}.___SSection_1ux5t_gg_{padding-top:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-6x, 24px);padding-left:var(--intergalactic-spacing-8x, 32px);padding-right:var(--intergalactic-spacing-8x, 32px);flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1ux5t_gg_{transition:none}}" /*__inner_css_end__*/, "1ux5t_gg_") /*__reshadow_css_end__*/, {
|
|
31
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_1ux5t_gg_",
|
|
32
|
+
"__SFullscreenModal": "___SFullscreenModal_1ux5t_gg_",
|
|
33
|
+
"__SClose": "___SClose_1ux5t_gg_",
|
|
34
|
+
"__SBack": "___SBack_1ux5t_gg_",
|
|
35
|
+
"_keyboardFocused": "__keyboardFocused_1ux5t_gg_",
|
|
36
|
+
"__SBackText": "___SBackText_1ux5t_gg_",
|
|
37
|
+
"__STitle": "___STitle_1ux5t_gg_",
|
|
38
|
+
"__SDescription": "___SDescription_1ux5t_gg_",
|
|
39
|
+
"__SHeader": "___SHeader_1ux5t_gg_",
|
|
40
|
+
"__SFooter": "___SFooter_1ux5t_gg_",
|
|
41
|
+
"__SBody": "___SBody_1ux5t_gg_",
|
|
42
|
+
"__SSection": "___SSection_1ux5t_gg_"
|
|
43
43
|
});
|
|
44
44
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
45
45
|
var FullscreenModalRoot = /*#__PURE__*/function (_Component) {
|
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 {
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { ModalProps } from '@semcore/modal';\nimport { Flex, Box, BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\nimport { Text } from '@semcore/typography';\n\n/** @deprecated */\nexport interface IFullscreenModalProps extends FullscreenModalProps, UnknownProperties {}\nexport type FullscreenModalProps = ModalProps & {\n /** Function that is invoked when hiding a component */\n onClose?: (\n trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',\n e?: React.MouseEvent | React.KeyboardEvent,\n ) => void;\n};\n\n/** @deprecated */\nexport interface IFullscreenModalHeaderProps\n extends FullscreenModalHeaderProps,\n UnknownProperties {}\nexport type FullscreenModalHeaderProps = BoxProps & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n};\n\n/** @deprecated */\nexport interface IFullscreenModalContext extends FullscreenModalContext, UnknownProperties {}\nexport type FullscreenModalContext = {\n getBackProps: PropGetterFn;\n getCloseProps: PropGetterFn;\n};\n\ndeclare const FullscreenModal: Intergalactic.Component<\n 'div',\n FullscreenModalProps,\n FullscreenModalContext\n> & {\n Header: Intergalactic.Component<'div', FullscreenModalHeaderProps>;\n Footer: typeof Flex;\n Close: Intergalactic.Component<'div', IconProps>;\n Back: typeof Box;\n Body: typeof Box;\n Section: typeof Box;\n Title: typeof Text;\n Description: typeof Text;\n};\n\nexport default FullscreenModal;\n"],"mappings":""}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,39 +1,48 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { IIconProps } from '@semcore/icon';
|
|
1
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
2
|
+
import { ModalProps } from '@semcore/modal';
|
|
3
|
+
import { Flex, Box, BoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { IconProps } from '@semcore/icon';
|
|
6
5
|
import { Text } from '@semcore/typography';
|
|
7
6
|
|
|
8
|
-
|
|
7
|
+
/** @deprecated */
|
|
8
|
+
export interface IFullscreenModalProps extends FullscreenModalProps, UnknownProperties {}
|
|
9
|
+
export type FullscreenModalProps = ModalProps & {
|
|
9
10
|
/** Function that is invoked when hiding a component */
|
|
10
11
|
onClose?: (
|
|
11
12
|
trigger: 'onBackClick' | 'onCloseClick' | 'onEscape' | 'onOutsideClick',
|
|
12
13
|
e?: React.MouseEvent | React.KeyboardEvent,
|
|
13
14
|
) => void;
|
|
14
|
-
}
|
|
15
|
+
};
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
/** @deprecated */
|
|
18
|
+
export interface IFullscreenModalHeaderProps
|
|
19
|
+
extends FullscreenModalHeaderProps,
|
|
20
|
+
UnknownProperties {}
|
|
21
|
+
export type FullscreenModalHeaderProps = BoxProps & {
|
|
17
22
|
title?: React.ReactNode;
|
|
18
23
|
description?: React.ReactNode;
|
|
19
|
-
}
|
|
24
|
+
};
|
|
20
25
|
|
|
21
|
-
|
|
26
|
+
/** @deprecated */
|
|
27
|
+
export interface IFullscreenModalContext extends FullscreenModalContext, UnknownProperties {}
|
|
28
|
+
export type FullscreenModalContext = {
|
|
22
29
|
getBackProps: PropGetterFn;
|
|
23
30
|
getCloseProps: PropGetterFn;
|
|
24
|
-
}
|
|
31
|
+
};
|
|
25
32
|
|
|
26
|
-
declare const FullscreenModal:
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
declare const FullscreenModal: Intergalactic.Component<
|
|
34
|
+
'div',
|
|
35
|
+
FullscreenModalProps,
|
|
36
|
+
FullscreenModalContext
|
|
37
|
+
> & {
|
|
38
|
+
Header: Intergalactic.Component<'div', FullscreenModalHeaderProps>;
|
|
39
|
+
Footer: typeof Flex;
|
|
40
|
+
Close: Intergalactic.Component<'div', IconProps>;
|
|
41
|
+
Back: typeof Box;
|
|
42
|
+
Body: typeof Box;
|
|
43
|
+
Section: typeof Box;
|
|
44
|
+
Title: typeof Text;
|
|
45
|
+
Description: typeof Text;
|
|
37
46
|
};
|
|
38
47
|
|
|
39
48
|
export default FullscreenModal;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/fullscreen-modal",
|
|
3
3
|
"description": "Semrush FullscreenModal Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "3.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,14 +9,14 @@
|
|
|
9
9
|
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@semcore/utils": "
|
|
13
|
-
"@semcore/icon": "
|
|
14
|
-
"@semcore/modal": "
|
|
15
|
-
"@semcore/typography": "
|
|
16
|
-
"@semcore/flex-box": "
|
|
12
|
+
"@semcore/utils": "4.0.0-beta.1",
|
|
13
|
+
"@semcore/icon": "4.0.0-beta.1",
|
|
14
|
+
"@semcore/modal": "4.0.0-beta.1",
|
|
15
|
+
"@semcore/typography": "5.0.0-beta.1",
|
|
16
|
+
"@semcore/flex-box": "5.0.0-beta.1"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
|
-
"@semcore/core": "
|
|
19
|
+
"@semcore/core": "2.0.0-beta.1",
|
|
20
20
|
"react": "16.8 - 18",
|
|
21
21
|
"react-dom": "16.8 - 18"
|
|
22
22
|
},
|