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