@semcore/side-panel 3.55.2-prerelease.0 → 3.56.0-prerelease.0

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