@semcore/side-panel 3.56.0-prerelease.5 → 3.56.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/SidePanel.js +96 -88
- package/lib/cjs/SidePanel.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/side-panel.shadow.css +14 -1
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js +5 -4
- package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/es6/SidePanel.js +86 -80
- package/lib/es6/SidePanel.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/side-panel.shadow.css +14 -1
- package/lib/es6/translations/__intergalactic-dynamic-locales.js +2 -2
- package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
- package/lib/esm/SidePanel.mjs +84 -77
- package/lib/esm/style/side-panel.shadow.css +14 -1
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +2 -2
- package/lib/types/index.d.ts +17 -6
- package/package.json +10 -10
package/lib/esm/SidePanel.mjs
CHANGED
|
@@ -1,76 +1,85 @@
|
|
|
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
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import { useContextTheme } from "@semcore/core/lib/utils/ThemeProvider";
|
|
15
|
-
import { useFocusLock } from "@semcore/core/lib/utils/use/useFocusLock";
|
|
16
|
-
import usePreventScroll from "@semcore/core/lib/utils/use/usePreventScroll";
|
|
17
|
-
import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
|
|
18
|
-
import { useZIndexStacking, ZIndexStackingContextProvider } from "@semcore/core/lib/utils/zIndexStacking";
|
|
19
|
-
import ArrowLeft from "@semcore/icon/ArrowLeft/m";
|
|
8
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import createComponent, { assignProps, Component, sstyled as sstyled$1 } from "@semcore/core";
|
|
10
|
+
import React from "react";
|
|
11
|
+
import { Flex, Box } from "@semcore/flex-box";
|
|
12
|
+
import { FadeInOut, Slide } from "@semcore/animation";
|
|
13
|
+
import Portal, { PortalProvider } from "@semcore/portal";
|
|
14
|
+
import OutsideClick from "@semcore/outside-click";
|
|
20
15
|
import CloseIcon from "@semcore/icon/Close/l";
|
|
16
|
+
import fire from "@semcore/utils/lib/fire";
|
|
17
|
+
import { isAdvanceMode } from "@semcore/utils/lib/findComponent";
|
|
18
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
19
|
+
import usePreventScroll from "@semcore/utils/lib/use/usePreventScroll";
|
|
21
20
|
import { Text } from "@semcore/typography";
|
|
22
|
-
import
|
|
21
|
+
import ArrowLeft from "@semcore/icon/ArrowLeft/m";
|
|
22
|
+
import Button, { ButtonLink } from "@semcore/button";
|
|
23
|
+
import { cssVariableEnhance } from "@semcore/utils/lib/useCssVariable";
|
|
24
|
+
import { useFocusLock } from "@semcore/utils/lib/use/useFocusLock";
|
|
25
|
+
import { useContextTheme } from "@semcore/utils/lib/ThemeProvider";
|
|
26
|
+
import logger from "@semcore/utils/lib/logger";
|
|
27
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
23
28
|
import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
|
|
29
|
+
import { useZIndexStacking, ZIndexStackingContextProvider } from "@semcore/utils/lib/zIndexStacking";
|
|
24
30
|
/*!__reshadow-styles__:"./style/side-panel.shadow.css"*/
|
|
25
31
|
var style = (
|
|
26
32
|
/*__reshadow_css_start__*/
|
|
27
33
|
(sstyled.insert(
|
|
28
34
|
/*__inner_css_start__*/
|
|
29
|
-
".
|
|
35
|
+
".___SOverlay_zbje7_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;overflow:hidden;background:var(--intergalactic-overlay-primary, rgba(0, 6, 3, 0.337));-webkit-overflow-scrolling:touch;color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}@supports (color:color(display-p3 0 0 0)){.___SOverlay_zbje7_gg_{background:var(--intergalactic-overlay-primary, rgba(0, 6, 3, 0.337))}@media (color-gamut:p3){.___SOverlay_zbje7_gg_{background:var(--intergalactic-overlay-primary, color(display-p3 0.00414 0.0233 0.01269 / 0.337))}}}.___SPanel_zbje7_gg_{display:flex;flex-direction:column;width:260px;outline:0;font-family:inherit;position:fixed;box-sizing:border-box;will-change:transform;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));z-index:1}.___SPanel_zbje7_gg_._placement_top_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07));width:100%;margin-bottom:auto;top:0;left:0}@supports (color:color(display-p3 0 0 0)){.___SPanel_zbje7_gg_._placement_top_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SPanel_zbje7_gg_._placement_top_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SPanel_zbje7_gg_._placement_right_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07));height:100vh;margin-left:auto;top:0;right:0}@supports (color:color(display-p3 0 0 0)){.___SPanel_zbje7_gg_._placement_right_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SPanel_zbje7_gg_._placement_right_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SPanel_zbje7_gg_._placement_bottom_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07));width:100%;margin-top:auto;bottom:0;left:0}@supports (color:color(display-p3 0 0 0)){.___SPanel_zbje7_gg_._placement_bottom_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SPanel_zbje7_gg_._placement_bottom_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SPanel_zbje7_gg_._placement_left_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07));height:100vh;margin-right:auto;top:0;left:0}@supports (color:color(display-p3 0 0 0)){.___SPanel_zbje7_gg_._placement_left_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px rgba(0, 21, 16, 0.07))}@media (color-gamut:p3){.___SPanel_zbje7_gg_._placement_left_zbje7_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 1px 1px 10px 0px color(display-p3 0.01753 0.08157 0.06372 / 0.07))}}}.___SClose_zbje7_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SClose_zbje7_gg_ .___SAddon_zbje7_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_zbje7_gg_{max-width:100%}.___SBack_zbje7_gg_ .___SInner_zbje7_gg_{display:flex}.___SBack_zbje7_gg_ .___SBackText_zbje7_gg_,.___STitle_zbje7_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_zbje7_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);font-weight:var(--intergalactic-bold, 700);color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899))}.___SHeader_zbje7_gg_{padding-left:var(--intergalactic-spacing-6x, 24px);margin-bottom:var(--intergalactic-spacing-1x, 4px);padding-right:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-4x, 16px));margin-top:var(--intergalactic-spacing-1x, 4px);min-height:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));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_zbje7_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SHeader_zbje7_gg_{box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SFooter_zbje7_gg_{min-height:44px;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)){.___SFooter_zbje7_gg_{box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SFooter_zbje7_gg_{box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SBody_zbje7_gg_{height:100%;overflow:auto;padding-left:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-4x, 16px);padding-right:var(--intergalactic-spacing-6x, 24px);padding-top:var(--intergalactic-spacing-4x, 16px)}",
|
|
30
36
|
/*__inner_css_end__*/
|
|
31
|
-
"
|
|
37
|
+
"zbje7_gg_"
|
|
32
38
|
), /*__reshadow_css_end__*/
|
|
33
39
|
{
|
|
34
|
-
"__SOverlay": "
|
|
35
|
-
"__SPanel": "
|
|
36
|
-
"_placement_top": "
|
|
37
|
-
"_placement_right": "
|
|
38
|
-
"_placement_bottom": "
|
|
39
|
-
"_placement_left": "
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
40
|
+
"__SOverlay": "___SOverlay_zbje7_gg_",
|
|
41
|
+
"__SPanel": "___SPanel_zbje7_gg_",
|
|
42
|
+
"_placement_top": "_placement_top_zbje7_gg_",
|
|
43
|
+
"_placement_right": "_placement_right_zbje7_gg_",
|
|
44
|
+
"_placement_bottom": "_placement_bottom_zbje7_gg_",
|
|
45
|
+
"_placement_left": "_placement_left_zbje7_gg_",
|
|
46
|
+
"__STitle": "___STitle_zbje7_gg_",
|
|
47
|
+
"__SHeader": "___SHeader_zbje7_gg_",
|
|
48
|
+
"__SFooter": "___SFooter_zbje7_gg_",
|
|
49
|
+
"__SBody": "___SBody_zbje7_gg_",
|
|
50
|
+
"__SClose": "___SClose_zbje7_gg_",
|
|
51
|
+
"__SAddon": "___SAddon_zbje7_gg_",
|
|
52
|
+
"__SBack": "___SBack_zbje7_gg_",
|
|
53
|
+
"__SInner": "___SInner_zbje7_gg_",
|
|
54
|
+
"__SBackText": "___SBackText_zbje7_gg_"
|
|
47
55
|
})
|
|
48
56
|
);
|
|
49
|
-
var RootSidePanel = /* @__PURE__ */
|
|
57
|
+
var RootSidePanel = /* @__PURE__ */ function(_Component) {
|
|
58
|
+
_inherits(RootSidePanel2, _Component);
|
|
59
|
+
var _super = _createSuper(RootSidePanel2);
|
|
50
60
|
function RootSidePanel2() {
|
|
51
61
|
var _this;
|
|
52
62
|
_classCallCheck(this, RootSidePanel2);
|
|
53
63
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
54
64
|
args[_key] = arguments[_key];
|
|
55
65
|
}
|
|
56
|
-
_this =
|
|
57
|
-
_defineProperty(_this, "sidebarRef", /* @__PURE__ */ React.createRef());
|
|
58
|
-
_defineProperty(_this, "handleSidebarKeyDown", function(e) {
|
|
66
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
67
|
+
_defineProperty(_assertThisInitialized(_this), "sidebarRef", /* @__PURE__ */ React.createRef());
|
|
68
|
+
_defineProperty(_assertThisInitialized(_this), "handleSidebarKeyDown", function(e) {
|
|
59
69
|
if (e.key === "Escape") {
|
|
60
70
|
e.stopPropagation();
|
|
61
|
-
fire(_this, "onClose", "onEscape", e);
|
|
71
|
+
fire(_assertThisInitialized(_this), "onClose", "onEscape", e);
|
|
62
72
|
}
|
|
63
73
|
});
|
|
64
|
-
_defineProperty(_this, "handleIconCloseClick", function(e) {
|
|
65
|
-
fire(_this, "onClose", "onCloseClick", e);
|
|
74
|
+
_defineProperty(_assertThisInitialized(_this), "handleIconCloseClick", function(e) {
|
|
75
|
+
fire(_assertThisInitialized(_this), "onClose", "onCloseClick", e);
|
|
66
76
|
});
|
|
67
|
-
_defineProperty(_this, "handleOutsideClick", function(e) {
|
|
68
|
-
fire(_this, "onClose", "onOutsideClick", e);
|
|
77
|
+
_defineProperty(_assertThisInitialized(_this), "handleOutsideClick", function(e) {
|
|
78
|
+
fire(_assertThisInitialized(_this), "onClose", "onOutsideClick", e);
|
|
69
79
|
});
|
|
70
80
|
return _this;
|
|
71
81
|
}
|
|
72
|
-
|
|
73
|
-
return _createClass(RootSidePanel2, [{
|
|
82
|
+
_createClass(RootSidePanel2, [{
|
|
74
83
|
key: "isAdvanceMode",
|
|
75
84
|
value: function isAdvanceMode$1() {
|
|
76
85
|
return isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName, SidePanel.Panel.displayName]);
|
|
@@ -99,10 +108,10 @@ var RootSidePanel = /* @__PURE__ */ (function(_Component) {
|
|
|
99
108
|
visible,
|
|
100
109
|
placement,
|
|
101
110
|
closable,
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
111
|
+
duration: duration + duration / 2,
|
|
112
|
+
disableEnforceFocus: !this.isUsedOverlay(),
|
|
113
|
+
onOutsideClick: this.handleOutsideClick,
|
|
114
|
+
onKeyDown: this.handleSidebarKeyDown,
|
|
106
115
|
animationsDisabled,
|
|
107
116
|
"aria-label": ariaLabel,
|
|
108
117
|
"aria-labelledby": ariaLabelledBy
|
|
@@ -127,7 +136,8 @@ var RootSidePanel = /* @__PURE__ */ (function(_Component) {
|
|
|
127
136
|
}, this.isAdvanceMode() ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(SidePanel.Overlay, null, /* @__PURE__ */ React.createElement(SidePanel.Panel, assignProps({}, _ref))));
|
|
128
137
|
}
|
|
129
138
|
}]);
|
|
130
|
-
|
|
139
|
+
return RootSidePanel2;
|
|
140
|
+
}(Component);
|
|
131
141
|
_defineProperty(RootSidePanel, "displayName", "SidePanel");
|
|
132
142
|
_defineProperty(RootSidePanel, "style", style);
|
|
133
143
|
_defineProperty(RootSidePanel, "enhance", [cssVariableEnhance({
|
|
@@ -142,19 +152,19 @@ _defineProperty(RootSidePanel, "defaultProps", {
|
|
|
142
152
|
disablePreventScroll: false
|
|
143
153
|
});
|
|
144
154
|
function Overlay(props) {
|
|
145
|
-
var _ref2 = arguments[0],
|
|
155
|
+
var _ref2 = arguments[0], _ref10;
|
|
146
156
|
var SOverlay = FadeInOut;
|
|
147
157
|
var overlayRef = React.useRef(null);
|
|
148
158
|
usePreventScroll(props.visible, props.disablePreventScroll);
|
|
149
159
|
useContextTheme(overlayRef, props.visible);
|
|
150
160
|
var zIndex = useZIndexStacking("z-index-modal");
|
|
151
|
-
return
|
|
161
|
+
return _ref10 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SOverlay, _ref10.cn("SOverlay", _objectSpread({}, assignProps({
|
|
152
162
|
"ref": overlayRef,
|
|
153
163
|
"zIndex": zIndex
|
|
154
164
|
}, _ref2))));
|
|
155
165
|
}
|
|
156
166
|
function Panel(props) {
|
|
157
|
-
var _ref3 = arguments[0],
|
|
167
|
+
var _ref3 = arguments[0], _ref11;
|
|
158
168
|
var SPanel = Slide;
|
|
159
169
|
var Children = props.Children, styles = props.styles, visible = props.visible, closable = props.closable, placement = props.placement, onOutsideClick = props.onOutsideClick, forcedAdvancedMode = props.forcedAdvancedMode;
|
|
160
170
|
var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [SidePanel.Header.displayName, SidePanel.Body.displayName, SidePanel.Footer.displayName]);
|
|
@@ -162,77 +172,74 @@ function Panel(props) {
|
|
|
162
172
|
useFocusLock(sidebarRef, true, "auto", !visible, true);
|
|
163
173
|
var hasLabel = Boolean(props["aria-label"] || props["aria-labelledby"]);
|
|
164
174
|
logger.warn(!hasLabel, "'aria-label' or 'aria-labelledby' are required for SidePanel component", props["data-ui-name"] || Panel.displayName);
|
|
165
|
-
return
|
|
175
|
+
return _ref11 = sstyled$1(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, visible && /* @__PURE__ */ React.createElement(OutsideClick, _ref11.cn("OutsideClick", {
|
|
166
176
|
"onOutsideClick": onOutsideClick,
|
|
167
177
|
"excludeRefs": [sidebarRef]
|
|
168
|
-
})), /* @__PURE__ */ React.createElement(SPanel,
|
|
178
|
+
})), /* @__PURE__ */ React.createElement(SPanel, _ref11.cn("SPanel", _objectSpread({}, assignProps({
|
|
169
179
|
"visible": visible,
|
|
170
180
|
"initialAnimation": true,
|
|
171
181
|
"slideOrigin": placement,
|
|
172
182
|
"ref": sidebarRef,
|
|
173
183
|
"role": "dialog",
|
|
174
184
|
"aria-modal": "true"
|
|
175
|
-
}, _ref3))), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider,
|
|
185
|
+
}, _ref3))), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref11.cn("ZIndexStackingContextProvider", {
|
|
176
186
|
"designToken": "z-index-modal"
|
|
177
|
-
}), /* @__PURE__ */ React.createElement(PortalProvider,
|
|
187
|
+
}), /* @__PURE__ */ React.createElement(PortalProvider, _ref11.cn("PortalProvider", {
|
|
178
188
|
"value": sidebarRef
|
|
179
|
-
}), closable && /* @__PURE__ */ React.createElement(SidePanel.Close, null), advancedMode ? /* @__PURE__ */ React.createElement(Children,
|
|
189
|
+
}), closable && /* @__PURE__ */ React.createElement(SidePanel.Close, null), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})) : /* @__PURE__ */ React.createElement(SidePanel.Body, null, /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})))))));
|
|
180
190
|
}
|
|
181
191
|
function Footer(props) {
|
|
182
|
-
var _ref4 = arguments[0],
|
|
192
|
+
var _ref4 = arguments[0], _ref12;
|
|
183
193
|
var SFooter = Flex;
|
|
184
|
-
return
|
|
194
|
+
return _ref12 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SFooter, _ref12.cn("SFooter", _objectSpread({}, assignProps({
|
|
185
195
|
"tag": "footer"
|
|
186
196
|
}, _ref4))));
|
|
187
197
|
}
|
|
188
|
-
function Close(
|
|
189
|
-
var _ref5 = arguments[0],
|
|
190
|
-
var styles =
|
|
198
|
+
function Close(_ref18) {
|
|
199
|
+
var _ref5 = arguments[0], _ref13;
|
|
200
|
+
var styles = _ref18.styles, hasChildren = _ref18.children, Children = _ref18.Children, getI18nText = _ref18.getI18nText;
|
|
191
201
|
var SClose = Button;
|
|
192
|
-
return
|
|
202
|
+
return _ref13 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SClose, _ref13.cn("SClose", _objectSpread({}, assignProps({
|
|
193
203
|
"aria-label": getI18nText("close"),
|
|
194
204
|
"use": "tertiary",
|
|
195
205
|
"theme": "muted",
|
|
196
206
|
"size": "l",
|
|
197
|
-
"addonLeft": hasChildren ? void 0 : CloseIcon
|
|
198
|
-
|
|
199
|
-
}, _ref5))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})) : void 0);
|
|
207
|
+
"addonLeft": hasChildren ? void 0 : CloseIcon
|
|
208
|
+
}, _ref5))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {})) : void 0);
|
|
200
209
|
}
|
|
210
|
+
Close.enhance = [keyboardFocusEnhance()];
|
|
201
211
|
function Title(props) {
|
|
202
|
-
var _ref6 = arguments[0],
|
|
212
|
+
var _ref6 = arguments[0], _ref14;
|
|
203
213
|
var STitle = Text;
|
|
204
|
-
return
|
|
205
|
-
"tag": "h6"
|
|
206
|
-
"size": 300,
|
|
207
|
-
"bold": true,
|
|
208
|
-
"ellipsis": true
|
|
214
|
+
return _ref14 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(STitle, _ref14.cn("STitle", _objectSpread({}, assignProps({
|
|
215
|
+
"tag": "h6"
|
|
209
216
|
}, _ref6))));
|
|
210
217
|
}
|
|
211
218
|
function Back(props) {
|
|
212
|
-
var _ref7 = arguments[0],
|
|
219
|
+
var _ref7 = arguments[0], _ref15;
|
|
213
220
|
var SBack = ButtonLink;
|
|
214
221
|
var SBackText = ButtonLink.Text;
|
|
215
222
|
var Children = props.Children, styles = props.styles;
|
|
216
|
-
return
|
|
223
|
+
return _ref15 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SBack, _ref15.cn("SBack", _objectSpread({}, assignProps({
|
|
217
224
|
"color": "text-hint",
|
|
218
225
|
"size": 100,
|
|
219
226
|
"addonLeft": ArrowLeft
|
|
220
|
-
}, _ref7))), /* @__PURE__ */ React.createElement(SBackText,
|
|
227
|
+
}, _ref7))), /* @__PURE__ */ React.createElement(SBackText, _ref15.cn("SBackText", {}), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {}))));
|
|
221
228
|
}
|
|
222
229
|
function Body(props) {
|
|
223
|
-
var _ref8 = arguments[0],
|
|
230
|
+
var _ref8 = arguments[0], _ref16;
|
|
224
231
|
var SBody = Box;
|
|
225
|
-
return
|
|
232
|
+
return _ref16 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SBody, _ref16.cn("SBody", _objectSpread({}, assignProps({}, _ref8))));
|
|
226
233
|
}
|
|
227
234
|
function Header(props) {
|
|
228
|
-
var _ref9 = arguments[0],
|
|
235
|
+
var _ref9 = arguments[0], _ref17;
|
|
229
236
|
var SHeader = Box;
|
|
230
237
|
var Children = props.Children, styles = props.styles, title = props.title;
|
|
231
|
-
return
|
|
238
|
+
return _ref17 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SHeader, _ref17.cn("SHeader", _objectSpread({}, assignProps({
|
|
232
239
|
"tag": "header"
|
|
233
240
|
}, _ref9))), title && /* @__PURE__ */ React.createElement(SidePanel.Title, {
|
|
234
241
|
children: title
|
|
235
|
-
}), /* @__PURE__ */ React.createElement(Children,
|
|
242
|
+
}), /* @__PURE__ */ React.createElement(Children, _ref17.cn("Children", {})));
|
|
236
243
|
}
|
|
237
244
|
var SidePanel = createComponent(RootSidePanel, {
|
|
238
245
|
Overlay,
|
|
@@ -72,6 +72,10 @@ SClose {
|
|
|
72
72
|
SBack {
|
|
73
73
|
max-width: 100%;
|
|
74
74
|
|
|
75
|
+
SInner {
|
|
76
|
+
display: flex;
|
|
77
|
+
}
|
|
78
|
+
|
|
75
79
|
SBackText {
|
|
76
80
|
white-space: nowrap;
|
|
77
81
|
overflow: hidden;
|
|
@@ -79,6 +83,16 @@ SBack {
|
|
|
79
83
|
}
|
|
80
84
|
}
|
|
81
85
|
|
|
86
|
+
STitle {
|
|
87
|
+
font-size: var(--intergalactic-fs-300, 16px);
|
|
88
|
+
line-height: var(--intergalactic-lh-300, 150%);
|
|
89
|
+
font-weight: var(--intergalactic-bold, 700);
|
|
90
|
+
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
91
|
+
white-space: nowrap;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
text-overflow: ellipsis;
|
|
94
|
+
}
|
|
95
|
+
|
|
82
96
|
SHeader {
|
|
83
97
|
padding-left: var(--intergalactic-spacing-6x, 24px);
|
|
84
98
|
margin-bottom: var(--intergalactic-spacing-1x, 4px);
|
|
@@ -87,7 +101,6 @@ SHeader {
|
|
|
87
101
|
min-height: calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-3x, 12px));
|
|
88
102
|
box-shadow: inset 0 -1px 0 var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
89
103
|
box-sizing: border-box;
|
|
90
|
-
flex-shrink: 0;
|
|
91
104
|
}
|
|
92
105
|
|
|
93
106
|
SFooter {
|
|
@@ -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,8 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { PortalProps } from '@semcore/portal';
|
|
3
|
+
import { FadeInOutProps, SlideProps } from '@semcore/animation';
|
|
4
|
+
import { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
|
|
5
|
+
import { Box, BoxProps, Flex } from '@semcore/flex-box';
|
|
6
|
+
import { Text } from '@semcore/typography';
|
|
7
|
+
import Button from '@semcore/button';
|
|
6
8
|
|
|
7
9
|
export type OnCloseTriggerType = 'onOutsideClick' | 'onEscape' | 'onCloseClick';
|
|
8
10
|
export type OnCloseType = (
|
|
@@ -12,6 +14,8 @@ export type OnCloseType = (
|
|
|
12
14
|
|
|
13
15
|
export type SidePanelPlacement = 'top' | 'left' | 'right' | 'bottom';
|
|
14
16
|
|
|
17
|
+
/** @deprecated */
|
|
18
|
+
export interface ISidePanelProps extends SidePanelProps, UnknownProperties {}
|
|
15
19
|
export type SidePanelProps = PortalProps &
|
|
16
20
|
BoxProps & {
|
|
17
21
|
/** Animation display duration in ms
|
|
@@ -43,20 +47,27 @@ export type SidePanelProps = PortalProps &
|
|
|
43
47
|
disablePreventScroll?: boolean;
|
|
44
48
|
};
|
|
45
49
|
|
|
50
|
+
/** @deprecated */
|
|
51
|
+
export interface ISidePanelOverlayProps extends SidePanelOverlayProps, UnknownProperties {}
|
|
46
52
|
export type SidePanelOverlayProps = FadeInOutProps & BoxProps & {};
|
|
47
53
|
|
|
54
|
+
/** @deprecated */
|
|
55
|
+
export interface ISidePanelPanelProps extends SidePanelPanelProps, UnknownProperties {}
|
|
48
56
|
export type SidePanelPanelProps = SlideProps &
|
|
49
57
|
BoxProps & {
|
|
50
|
-
/** Callback that is triggered when click outside is occured */
|
|
51
58
|
onOutsideClick?: (e?: React.SyntheticEvent) => void;
|
|
52
59
|
};
|
|
53
60
|
|
|
61
|
+
/** @deprecated */
|
|
62
|
+
export interface ISidePanelContext extends SidePanelContext, UnknownProperties {}
|
|
54
63
|
export type SidePanelContext = {
|
|
55
64
|
getOverlayProps?: PropGetterFn;
|
|
56
65
|
getPanelProps?: PropGetterFn;
|
|
57
66
|
getCloseProps?: PropGetterFn;
|
|
58
67
|
};
|
|
59
68
|
|
|
69
|
+
/** @deprecated */
|
|
70
|
+
export interface ISidePanelHeaderProps extends SidePanelHeaderProps, UnknownProperties {}
|
|
60
71
|
export type SidePanelHeaderProps = BoxProps & {
|
|
61
72
|
title?: React.ReactNode;
|
|
62
73
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/side-panel",
|
|
3
3
|
"description": "Semrush SidePanel Component",
|
|
4
|
-
"version": "3.56.0-prerelease.
|
|
4
|
+
"version": "3.56.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,17 +14,17 @@
|
|
|
14
14
|
"types": "./lib/types/index.d.ts"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/button": "5.44.0-prerelease.
|
|
18
|
-
"@semcore/utils": "4.49.0-prerelease.
|
|
19
|
-
"@semcore/animation": "2.42.0-prerelease.
|
|
20
|
-
"@semcore/flex-box": "5.42.0-prerelease.
|
|
21
|
-
"@semcore/portal": "3.42.0-prerelease.
|
|
22
|
-
"@semcore/typography": "5.54.0-prerelease.
|
|
23
|
-
"@semcore/outside-click": "3.41.0-prerelease.
|
|
24
|
-
"@semcore/icon": "4.63.0-prerelease.
|
|
17
|
+
"@semcore/button": "5.44.0-prerelease.7",
|
|
18
|
+
"@semcore/utils": "4.49.0-prerelease.7",
|
|
19
|
+
"@semcore/animation": "2.42.0-prerelease.7",
|
|
20
|
+
"@semcore/flex-box": "5.42.0-prerelease.7",
|
|
21
|
+
"@semcore/portal": "3.42.0-prerelease.7",
|
|
22
|
+
"@semcore/typography": "5.54.0-prerelease.7",
|
|
23
|
+
"@semcore/outside-click": "3.41.0-prerelease.7",
|
|
24
|
+
"@semcore/icon": "4.63.0-prerelease.7"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
|
-
"@semcore/core": "^2.40.0-prerelease.
|
|
27
|
+
"@semcore/core": "^2.40.0-prerelease.7",
|
|
28
28
|
"react": "16.8 - 18",
|
|
29
29
|
"react-dom": "16.8 - 18"
|
|
30
30
|
},
|