@semcore/fullscreen-modal 3.52.0-prerelease.5 → 3.52.0-prerelease.7
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/lib/cjs/FullscreenModal.js +71 -66
- package/lib/cjs/FullscreenModal.js.map +1 -1
- package/lib/cjs/index.d.js.map +1 -1
- package/lib/cjs/index.js +1 -1
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/fullscreen-modal.shadow.css +25 -10
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +5 -4
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/FullscreenModal.js +62 -60
- package/lib/es6/FullscreenModal.js.map +1 -1
- package/lib/es6/index.d.js.map +1 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/fullscreen-modal.shadow.css +25 -10
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/FullscreenModal.mjs +62 -59
- package/lib/esm/style/fullscreen-modal.shadow.css +25 -10
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/index.d.ts +13 -7
- package/package.json +8 -8
|
@@ -1,64 +1,69 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
-
import
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
5
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
6
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
7
|
-
import { sstyled
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
|
|
11
|
-
import fire from "@semcore/core/lib/utils/fire";
|
|
12
|
-
import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
|
|
13
|
-
import ArrowLeft from "@semcore/icon/ArrowLeft/m";
|
|
14
|
-
import CloseIcon from "@semcore/icon/Close/l";
|
|
8
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import createComponent, { sstyled as sstyled$1, assignProps, Component } from "@semcore/core";
|
|
10
|
+
import React from "react";
|
|
15
11
|
import Modal from "@semcore/modal";
|
|
12
|
+
import { Box, Flex } from "@semcore/flex-box";
|
|
13
|
+
import CloseIcon from "@semcore/icon/Close/l";
|
|
14
|
+
import ArrowLeft from "@semcore/icon/ArrowLeft/m";
|
|
16
15
|
import { Text } from "@semcore/typography";
|
|
17
|
-
import
|
|
16
|
+
import Button from "@semcore/button";
|
|
17
|
+
import fire from "@semcore/utils/lib/fire";
|
|
18
18
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
19
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
20
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
21
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
19
22
|
/*!__reshadow-styles__:"./style/fullscreen-modal.shadow.css"*/
|
|
20
23
|
var style = (
|
|
21
24
|
/*__reshadow_css_start__*/
|
|
22
25
|
(sstyled.insert(
|
|
23
26
|
/*__inner_css_start__*/
|
|
24
|
-
|
|
27
|
+
'.___SFullscreenOverlay_jj82o_gg_{padding:0}.___SFullscreenModal_jj82o_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border-radius:0;padding:0}.___SClose_jj82o_gg_{position:absolute;top:17px;right:24px}.___SBack_jj82o_gg_{cursor:pointer;position:absolute;z-index:1;top:8px;left:32px;display:flex;align-items:center;margin-bottom:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-primary-neutral, rgba(0, 4, 1, 0.526));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_jj82o_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SBack_jj82o_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SBack_jj82o_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}}.___SBack_jj82o_gg_.__keyboardFocused_jj82o_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@supports (color:color(display-p3 0 0 0)){.___SBack_jj82o_gg_.__keyboardFocused_jj82o_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SBack_jj82o_gg_.__keyboardFocused_jj82o_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SBackText_jj82o_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBackText_jj82o_gg_,.___SDescription_jj82o_gg_,.___STitle_jj82o_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_jj82o_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, rgba(1, 5, 0, 0.899))}.___SDescription_jj82o_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, rgba(0, 3, 0, 0.583))}@supports (color:color(display-p3 0 0 0)){.___SDescription_jj82o_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SDescription_jj82o_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SDescription_jj82o_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, rgba(0, 12, 8, 0.161))}@supports (color:color(display-p3 0 0 0)){.___SDescription_jj82o_gg_::before{background-color:var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SDescription_jj82o_gg_::before{background-color:var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SHeader_jj82o_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, rgba(0, 12, 8, 0.161));box-sizing:border-box}@supports (color:color(display-p3 0 0 0)){.___SHeader_jj82o_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SHeader_jj82o_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SFooter_jj82o_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));box-sizing:border-box}@supports (color:color(display-p3 0 0 0)){.___SFooter_jj82o_gg_{box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SFooter_jj82o_gg_{box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SBody_jj82o_gg_{display:flex;height:100%;overflow:auto}.___SSection_jj82o_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_jj82o_gg_{transition:none}}',
|
|
25
28
|
/*__inner_css_end__*/
|
|
26
|
-
"
|
|
29
|
+
"jj82o_gg_"
|
|
27
30
|
), /*__reshadow_css_end__*/
|
|
28
31
|
{
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
32
|
+
"__SFullscreenOverlay": "___SFullscreenOverlay_jj82o_gg_",
|
|
33
|
+
"__SFullscreenModal": "___SFullscreenModal_jj82o_gg_",
|
|
34
|
+
"__SClose": "___SClose_jj82o_gg_",
|
|
35
|
+
"__SBack": "___SBack_jj82o_gg_",
|
|
36
|
+
"_keyboardFocused": "__keyboardFocused_jj82o_gg_",
|
|
37
|
+
"__SBackText": "___SBackText_jj82o_gg_",
|
|
38
|
+
"__STitle": "___STitle_jj82o_gg_",
|
|
39
|
+
"__SDescription": "___SDescription_jj82o_gg_",
|
|
40
|
+
"__SHeader": "___SHeader_jj82o_gg_",
|
|
41
|
+
"__SFooter": "___SFooter_jj82o_gg_",
|
|
42
|
+
"__SBody": "___SBody_jj82o_gg_",
|
|
43
|
+
"__SSection": "___SSection_jj82o_gg_"
|
|
40
44
|
})
|
|
41
45
|
);
|
|
42
|
-
var FullscreenModalRoot = /* @__PURE__ */
|
|
46
|
+
var FullscreenModalRoot = /* @__PURE__ */ function(_Component) {
|
|
47
|
+
_inherits(FullscreenModalRoot2, _Component);
|
|
48
|
+
var _super = _createSuper(FullscreenModalRoot2);
|
|
43
49
|
function FullscreenModalRoot2() {
|
|
44
50
|
var _this;
|
|
45
51
|
_classCallCheck(this, FullscreenModalRoot2);
|
|
46
52
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
47
53
|
args[_key] = arguments[_key];
|
|
48
54
|
}
|
|
49
|
-
_this =
|
|
50
|
-
_defineProperty(_this, "state", {
|
|
55
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
56
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
51
57
|
hasTitle: false
|
|
52
58
|
});
|
|
53
|
-
_defineProperty(_this, "bindHandlerClose", function(trigger) {
|
|
59
|
+
_defineProperty(_assertThisInitialized(_this), "bindHandlerClose", function(trigger) {
|
|
54
60
|
return function(e) {
|
|
55
|
-
fire(_this, "onClose", trigger, e);
|
|
61
|
+
fire(_assertThisInitialized(_this), "onClose", trigger, e);
|
|
56
62
|
};
|
|
57
63
|
});
|
|
58
64
|
return _this;
|
|
59
65
|
}
|
|
60
|
-
|
|
61
|
-
return _createClass(FullscreenModalRoot2, [{
|
|
66
|
+
_createClass(FullscreenModalRoot2, [{
|
|
62
67
|
key: "getCloseProps",
|
|
63
68
|
value: function getCloseProps() {
|
|
64
69
|
var getI18nText = this.asProps.getI18nText;
|
|
@@ -92,25 +97,25 @@ var FullscreenModalRoot = /* @__PURE__ */ (function(_Component) {
|
|
|
92
97
|
}, {
|
|
93
98
|
key: "render",
|
|
94
99
|
value: function render() {
|
|
95
|
-
var _ref = this.asProps,
|
|
100
|
+
var _ref = this.asProps, _ref10;
|
|
96
101
|
var SFullscreenModal = Modal.Window;
|
|
97
102
|
var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, onClose = _this$asProps.onClose, visible = _this$asProps.visible, closable = _this$asProps.closable, duration = _this$asProps.duration, disablePortal = _this$asProps.disablePortal, getI18nText = _this$asProps.getI18nText, uid = _this$asProps.uid;
|
|
98
103
|
var hasTitle = this.state.hasTitle;
|
|
99
104
|
var SFullscreenOverlay = Modal.Overlay;
|
|
100
|
-
return
|
|
105
|
+
return _ref10 = sstyled$1(styles), /* @__PURE__ */ React.createElement(Modal, _ref10.cn("Modal", {
|
|
101
106
|
"closable": false,
|
|
102
107
|
"visible": visible,
|
|
103
108
|
"onClose": onClose,
|
|
104
109
|
"duration": duration,
|
|
105
110
|
"disablePortal": disablePortal
|
|
106
|
-
}), /* @__PURE__ */ React.createElement(SFullscreenOverlay,
|
|
107
|
-
"use:closable": false,
|
|
111
|
+
}), /* @__PURE__ */ React.createElement(SFullscreenOverlay, _ref10.cn("SFullscreenOverlay", {}), /* @__PURE__ */ React.createElement(SFullscreenModal, _ref10.cn("SFullscreenModal", _objectSpread({}, assignProps({
|
|
108
112
|
"aria-label": hasTitle ? void 0 : getI18nText("title"),
|
|
109
113
|
"aria-labelledby": hasTitle ? "igc-".concat(uid, "-title") : void 0
|
|
110
|
-
}, _ref))), closable && /* @__PURE__ */ React.createElement(FullscreenModal.Close, null), /* @__PURE__ */ React.createElement(Children,
|
|
114
|
+
}, _ref))), closable && /* @__PURE__ */ React.createElement(FullscreenModal.Close, null), /* @__PURE__ */ React.createElement(Children, _ref10.cn("Children", {})))));
|
|
111
115
|
}
|
|
112
116
|
}]);
|
|
113
|
-
|
|
117
|
+
return FullscreenModalRoot2;
|
|
118
|
+
}(Component);
|
|
114
119
|
_defineProperty(FullscreenModalRoot, "displayName", "FullscreenModal");
|
|
115
120
|
_defineProperty(FullscreenModalRoot, "style", style);
|
|
116
121
|
_defineProperty(FullscreenModalRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
|
|
@@ -119,37 +124,37 @@ _defineProperty(FullscreenModalRoot, "defaultProps", {
|
|
|
119
124
|
locale: "en"
|
|
120
125
|
});
|
|
121
126
|
function Header(props) {
|
|
122
|
-
var _ref2 = arguments[0],
|
|
127
|
+
var _ref2 = arguments[0], _ref11;
|
|
123
128
|
var SHeader = Box;
|
|
124
129
|
var Children = props.Children, styles = props.styles, title = props.title, description = props.description;
|
|
125
|
-
return
|
|
130
|
+
return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHeader, _ref11.cn("SHeader", _objectSpread({}, assignProps({}, _ref2))), title && /* @__PURE__ */ React.createElement(FullscreenModal.Title, {
|
|
126
131
|
children: title
|
|
127
132
|
}), description && /* @__PURE__ */ React.createElement(FullscreenModal.Description, {
|
|
128
133
|
children: description
|
|
129
|
-
}), /* @__PURE__ */ React.createElement(Children,
|
|
134
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})));
|
|
130
135
|
}
|
|
131
136
|
function Body(props) {
|
|
132
|
-
var _ref3 = arguments[0],
|
|
137
|
+
var _ref3 = arguments[0], _ref12;
|
|
133
138
|
var SBody = Box;
|
|
134
|
-
return
|
|
139
|
+
return _ref12 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SBody, _ref12.cn("SBody", _objectSpread({}, assignProps({}, _ref3))));
|
|
135
140
|
}
|
|
136
141
|
function Section(props) {
|
|
137
|
-
var _ref4 = arguments[0],
|
|
142
|
+
var _ref4 = arguments[0], _ref13;
|
|
138
143
|
var SSection = Box;
|
|
139
|
-
return
|
|
144
|
+
return _ref13 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SSection, _ref13.cn("SSection", _objectSpread({}, assignProps({
|
|
140
145
|
"tag": "section"
|
|
141
146
|
}, _ref4))));
|
|
142
147
|
}
|
|
143
148
|
function Footer(props) {
|
|
144
|
-
var _ref5 = arguments[0],
|
|
149
|
+
var _ref5 = arguments[0], _ref14;
|
|
145
150
|
var SFooter = Flex;
|
|
146
|
-
return
|
|
151
|
+
return _ref14 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SFooter, _ref14.cn("SFooter", _objectSpread({}, assignProps({}, _ref5))));
|
|
147
152
|
}
|
|
148
153
|
function Close(props) {
|
|
149
|
-
var _ref6 = arguments[0],
|
|
154
|
+
var _ref6 = arguments[0], _ref15;
|
|
150
155
|
var SClose = Button;
|
|
151
156
|
var getI18nText = props.getI18nText;
|
|
152
|
-
return
|
|
157
|
+
return _ref15 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SClose, _ref15.cn("SClose", _objectSpread({}, assignProps({
|
|
153
158
|
"use": "tertiary",
|
|
154
159
|
"size": "l",
|
|
155
160
|
"theme": "muted",
|
|
@@ -157,38 +162,36 @@ function Close(props) {
|
|
|
157
162
|
}, _ref6))), /* @__PURE__ */ React.createElement(Button.Addon, {
|
|
158
163
|
ml: "7px",
|
|
159
164
|
mr: "7px"
|
|
160
|
-
}, /* @__PURE__ */ React.createElement(CloseIcon,
|
|
165
|
+
}, /* @__PURE__ */ React.createElement(CloseIcon, _ref15.cn("CloseIcon", {
|
|
161
166
|
"title": getI18nText("close")
|
|
162
167
|
}))));
|
|
163
168
|
}
|
|
164
169
|
function Title(props) {
|
|
165
|
-
var _ref7 = arguments[0],
|
|
170
|
+
var _ref7 = arguments[0], _ref16;
|
|
166
171
|
var STitle = Text;
|
|
167
172
|
var setHasTitle = props.setHasTitle;
|
|
168
173
|
React.useEffect(function() {
|
|
169
174
|
return setHasTitle();
|
|
170
175
|
});
|
|
171
|
-
return
|
|
176
|
+
return _ref16 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(STitle, _ref16.cn("STitle", _objectSpread({}, assignProps({
|
|
172
177
|
"tag": "h2"
|
|
173
178
|
}, _ref7))));
|
|
174
179
|
}
|
|
175
180
|
function Description(props) {
|
|
176
|
-
var _ref8 = arguments[0],
|
|
181
|
+
var _ref8 = arguments[0], _ref17;
|
|
177
182
|
var SDescription = Text;
|
|
178
|
-
return
|
|
179
|
-
"tag": "p"
|
|
180
|
-
}, _ref8))));
|
|
183
|
+
return _ref17 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SDescription, _ref17.cn("SDescription", _objectSpread({}, assignProps({}, _ref8))));
|
|
181
184
|
}
|
|
182
185
|
function Back(props) {
|
|
183
|
-
var _ref9 = arguments[0],
|
|
186
|
+
var _ref9 = arguments[0], _ref18;
|
|
184
187
|
var SBack = Box;
|
|
185
188
|
var SBackText = Text;
|
|
186
189
|
var Children = props.Children, styles = props.styles;
|
|
187
|
-
return
|
|
188
|
-
"tag": "button"
|
|
189
|
-
|
|
190
|
-
}, _ref9))), /* @__PURE__ */ React.createElement(ArrowLeft, _ref16.cn("ArrowLeft", {})), /* @__PURE__ */ React.createElement(SBackText, _ref16.cn("SBackText", {}), /* @__PURE__ */ React.createElement(Children, _ref16.cn("Children", {}))));
|
|
190
|
+
return _ref18 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBack, _ref18.cn("SBack", _objectSpread({}, assignProps({
|
|
191
|
+
"tag": "button"
|
|
192
|
+
}, _ref9))), /* @__PURE__ */ React.createElement(ArrowLeft, _ref18.cn("ArrowLeft", {})), /* @__PURE__ */ React.createElement(SBackText, _ref18.cn("SBackText", {}), /* @__PURE__ */ React.createElement(Children, _ref18.cn("Children", {}))));
|
|
191
193
|
}
|
|
194
|
+
Back.enhance = [keyboardFocusEnhance()];
|
|
192
195
|
var FullscreenModal = createComponent(FullscreenModalRoot, {
|
|
193
196
|
Header,
|
|
194
197
|
Footer,
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
SFullscreenOverlay {
|
|
2
|
-
|
|
3
|
-
padding: 0;
|
|
4
|
-
width: 100%;
|
|
5
|
-
height: 100%;
|
|
6
|
-
}
|
|
2
|
+
padding: 0;
|
|
7
3
|
}
|
|
8
4
|
|
|
9
5
|
SFullscreenModal {
|
|
@@ -44,6 +40,10 @@ SBack {
|
|
|
44
40
|
}
|
|
45
41
|
}
|
|
46
42
|
|
|
43
|
+
SBack[keyboardFocused] {
|
|
44
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
47
|
SBackText {
|
|
48
48
|
margin-left: var(--intergalactic-spacing-1x, 4px);
|
|
49
49
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
@@ -55,7 +55,9 @@ SBackText {
|
|
|
55
55
|
|
|
56
56
|
STitle,
|
|
57
57
|
SDescription {
|
|
58
|
-
|
|
58
|
+
white-space: nowrap;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
text-overflow: ellipsis;
|
|
59
61
|
}
|
|
60
62
|
|
|
61
63
|
STitle {
|
|
@@ -66,22 +68,35 @@ STitle {
|
|
|
66
68
|
}
|
|
67
69
|
|
|
68
70
|
SDescription {
|
|
71
|
+
display: flex;
|
|
72
|
+
align-items: baseline;
|
|
69
73
|
font-size: var(--intergalactic-fs-100, 12px);
|
|
70
74
|
line-height: var(--intergalactic-lh-100, 133%);
|
|
71
75
|
color: var(--intergalactic-text-secondary, oklch(0.088 0.026 147.7 / 0.583));
|
|
76
|
+
|
|
77
|
+
&::before {
|
|
78
|
+
content: '';
|
|
79
|
+
position: relative;
|
|
80
|
+
top: var(--intergalactic-spacing-1x, 4px);
|
|
81
|
+
display: block;
|
|
82
|
+
margin-left: var(--intergalactic-spacing-3x, 12px);
|
|
83
|
+
margin-right: var(--intergalactic-spacing-3x, 12px);
|
|
84
|
+
height: 24px;
|
|
85
|
+
width: 1px;
|
|
86
|
+
background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
87
|
+
}
|
|
72
88
|
}
|
|
73
89
|
|
|
74
90
|
SHeader {
|
|
75
91
|
display: flex;
|
|
76
|
-
|
|
77
|
-
gap: var(--intergalactic-spacing-2x, 8px);
|
|
78
|
-
align-items: flex-start;
|
|
92
|
+
align-items: baseline;
|
|
79
93
|
padding-left: var(--intergalactic-spacing-8x, 32px);
|
|
80
|
-
padding-bottom: var(--intergalactic-spacing-
|
|
94
|
+
padding-bottom: var(--intergalactic-spacing-2x, 8px);
|
|
81
95
|
padding-right: calc(
|
|
82
96
|
var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px)
|
|
83
97
|
);
|
|
84
98
|
padding-top: var(--intergalactic-spacing-10x, 40px);
|
|
99
|
+
min-height: 76px;
|
|
85
100
|
box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
86
101
|
box-sizing: border-box;
|
|
87
102
|
}
|
|
@@ -6,12 +6,12 @@ import it from "./it.json.mjs";
|
|
|
6
6
|
import ja from "./ja.json.mjs";
|
|
7
7
|
import ko from "./ko.json.mjs";
|
|
8
8
|
import nl from "./nl.json.mjs";
|
|
9
|
-
import pl from "./pl.json.mjs";
|
|
10
9
|
import pt from "./pt.json.mjs";
|
|
11
|
-
import sv from "./sv.json.mjs";
|
|
12
10
|
import tr from "./tr.json.mjs";
|
|
13
11
|
import vi from "./vi.json.mjs";
|
|
14
12
|
import zh from "./zh.json.mjs";
|
|
13
|
+
import pl from "./pl.json.mjs";
|
|
14
|
+
import sv from "./sv.json.mjs";
|
|
15
15
|
var localizedMessages = {
|
|
16
16
|
de,
|
|
17
17
|
en,
|
package/lib/types/index.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
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 Button from '@semcore/button';
|
|
5
|
+
import { Text } from '@semcore/typography';
|
|
6
6
|
|
|
7
|
+
/** @deprecated */
|
|
8
|
+
export interface IFullscreenModalProps extends FullscreenModalProps, UnknownProperties {}
|
|
7
9
|
export type FullscreenModalProps = ModalProps & {
|
|
8
10
|
/** Function that is invoked when hiding a component */
|
|
9
11
|
onClose?: (
|
|
@@ -12,13 +14,17 @@ export type FullscreenModalProps = ModalProps & {
|
|
|
12
14
|
) => void;
|
|
13
15
|
};
|
|
14
16
|
|
|
17
|
+
/** @deprecated */
|
|
18
|
+
export interface IFullscreenModalHeaderProps
|
|
19
|
+
extends FullscreenModalHeaderProps,
|
|
20
|
+
UnknownProperties {}
|
|
15
21
|
export type FullscreenModalHeaderProps = BoxProps & {
|
|
16
|
-
/** Title content displayed in the modal header */
|
|
17
22
|
title?: React.ReactNode;
|
|
18
|
-
/** Description text that appears alongside the title */
|
|
19
23
|
description?: React.ReactNode;
|
|
20
24
|
};
|
|
21
25
|
|
|
26
|
+
/** @deprecated */
|
|
27
|
+
export interface IFullscreenModalContext extends FullscreenModalContext, UnknownProperties {}
|
|
22
28
|
export type FullscreenModalContext = {
|
|
23
29
|
getBackProps: PropGetterFn;
|
|
24
30
|
getCloseProps: PropGetterFn;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/fullscreen-modal",
|
|
3
3
|
"description": "Semrush FullscreenModal Component",
|
|
4
|
-
"version": "3.52.0-prerelease.
|
|
4
|
+
"version": "3.52.0-prerelease.7",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,15 +14,15 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
18
|
-
"@semcore/icon": "4.63.0-prerelease.
|
|
19
|
-
"@semcore/modal": "4.57.0-prerelease.
|
|
20
|
-
"@semcore/typography": "5.54.0-prerelease.
|
|
21
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
22
|
-
"@semcore/button": "5.44.0-prerelease.
|
|
17
|
+
"@semcore/utils": "4.49.0-prerelease.7",
|
|
18
|
+
"@semcore/icon": "4.63.0-prerelease.7",
|
|
19
|
+
"@semcore/modal": "4.57.0-prerelease.7",
|
|
20
|
+
"@semcore/typography": "5.54.0-prerelease.7",
|
|
21
|
+
"@semcore/flex-box": "5.42.0-prerelease.7",
|
|
22
|
+
"@semcore/button": "5.44.0-prerelease.7"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
25
|
+
"@semcore/core": "^2.40.0-prerelease.7",
|
|
26
26
|
"react": "16.8 - 18",
|
|
27
27
|
"react-dom": "16.8 - 18"
|
|
28
28
|
},
|