@semcore/side-panel 16.1.12 → 17.0.0-prerelease.18

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 (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/README.md +4 -4
  3. package/lib/cjs/SidePanel.js +202 -206
  4. package/lib/cjs/SidePanel.js.map +1 -1
  5. package/lib/cjs/index.d.js.map +1 -1
  6. package/lib/cjs/index.js +3 -3
  7. package/lib/cjs/translations/__intergalactic-dynamic-locales.js +16 -16
  8. package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -1
  9. package/lib/es6/SidePanel.js +188 -192
  10. package/lib/es6/SidePanel.js.map +1 -1
  11. package/lib/es6/index.d.js.map +1 -1
  12. package/lib/es6/translations/__intergalactic-dynamic-locales.js +15 -15
  13. package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -1
  14. package/lib/esm/SidePanel.mjs +182 -160
  15. package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +1 -1
  16. package/lib/types/index.d.ts +2 -14
  17. package/package.json +9 -11
package/lib/es6/translations/__intergalactic-dynamic-locales.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pl","pt","sv","tr","vi","zh","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pl from './pl.json';\nimport pt from './pt.json';\nimport sv from './sv.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n de,\n en,\n es,\n fr,\n it,\n ja,\n ko,\n nl,\n pt,\n tr,\n vi,\n zh,\n pl,\n sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFL,EAAE,EAAFA,EAAE;EACFE,EAAE,EAAFA;AACF,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pl","pt","sv","tr","vi","zh","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pl from './pl.json';\nimport pt from './pt.json';\nimport sv from './sv.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n de,\n en,\n es,\n fr,\n it,\n ja,\n ko,\n nl,\n pt,\n tr,\n vi,\n zh,\n pl,\n sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,MAAMC,iBAAiB,GAAG;EAC/Bd,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFC,EAAE;EACFE,EAAE;EACFE,EAAE;EACFC,EAAE;EACFC,EAAE;EACFL,EAAE;EACFE;AACF,CAAC","ignoreList":[]}
package/lib/esm/SidePanel.mjs CHANGED
@@ -1,14 +1,8 @@
1
- import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
2
- import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
3
- import _createClass from "@babel/runtime/helpers/esm/createClass";
4
- import _callSuper from "@babel/runtime/helpers/esm/callSuper";
5
- import _inherits from "@babel/runtime/helpers/esm/inherits";
6
1
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
7
- import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
8
- import { Slide, FadeInOut } from "@semcore/animation";
2
+ import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
3
+ import { Portal, Box, Flex, OutsideClick, Slide, PortalProvider, FadeInOut } from "@semcore/base-components";
9
4
  import Button, { ButtonLink } from "@semcore/button";
10
5
  import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
11
- import keyboardFocusEnhance from "@semcore/core/lib/utils/enhances/keyboardFocusEnhance";
12
6
  import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
13
7
  import fire from "@semcore/core/lib/utils/fire";
14
8
  import logger from "@semcore/core/lib/utils/logger";
@@ -17,123 +11,117 @@ import { useFocusLock } from "@semcore/core/lib/utils/use/useFocusLock";
17
11
  import usePreventScroll from "@semcore/core/lib/utils/use/usePreventScroll";
18
12
  import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
19
13
  import { ZIndexStackingContextProvider, useZIndexStacking } from "@semcore/core/lib/utils/zIndexStacking";
20
- import { Box, Flex } from "@semcore/flex-box";
21
14
  import ArrowLeft from "@semcore/icon/ArrowLeft/m";
22
15
  import CloseIcon from "@semcore/icon/Close/l";
23
- import OutsideClick from "@semcore/outside-click";
24
- import Portal, { PortalProvider } from "@semcore/portal";
25
16
  import { Text } from "@semcore/typography";
26
17
  import React from "react";
27
18
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
28
19
  /*!__reshadow-styles__:"./style/side-panel.shadow.css"*/
29
- var style = (
20
+ const style = (
30
21
  /*__reshadow_css_start__*/
31
22
  (sstyled.insert(
32
23
  /*__inner_css_start__*/
33
- ".___SOverlay_1jesk_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_1jesk_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_1jesk_gg_._placement_right_1jesk_gg_,.___SPanel_1jesk_gg_._placement_top_1jesk_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_1jesk_gg_._placement_top_1jesk_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_1jesk_gg_._placement_right_1jesk_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_1jesk_gg_._placement_bottom_1jesk_gg_,.___SPanel_1jesk_gg_._placement_left_1jesk_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_1jesk_gg_._placement_bottom_1jesk_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_1jesk_gg_._placement_left_1jesk_gg_{height:100vh;margin-right:auto;top:0}.___SClose_1jesk_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SClose_1jesk_gg_ .___SAddon_1jesk_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_1jesk_gg_{max-width:100%}.___SBack_1jesk_gg_ .___SInner_1jesk_gg_{display:flex}.___SBack_1jesk_gg_ .___SBackText_1jesk_gg_,.___STitle_1jesk_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1jesk_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_1jesk_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_1jesk_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_1jesk_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)}",
24
+ ".___SOverlay_1tmb0_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_1tmb0_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_1tmb0_gg_._placement_right_1tmb0_gg_,.___SPanel_1tmb0_gg_._placement_top_1tmb0_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_1tmb0_gg_._placement_top_1tmb0_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_1tmb0_gg_._placement_right_1tmb0_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_1tmb0_gg_._placement_bottom_1tmb0_gg_,.___SPanel_1tmb0_gg_._placement_left_1tmb0_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_1tmb0_gg_._placement_bottom_1tmb0_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_1tmb0_gg_._placement_left_1tmb0_gg_{height:100vh;margin-right:auto;top:0}.___SClose_1tmb0_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SClose_1tmb0_gg_ .___SAddon_1tmb0_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_1tmb0_gg_{max-width:100%}.___SBack_1tmb0_gg_ .___SInner_1tmb0_gg_{display:flex}.___SBack_1tmb0_gg_ .___SBackText_1tmb0_gg_,.___STitle_1tmb0_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1tmb0_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_1tmb0_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_1tmb0_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_1tmb0_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)}",
34
25
  /*__inner_css_end__*/
35
- "1jesk_gg_"
26
+ "1tmb0_gg_"
36
27
  ), /*__reshadow_css_end__*/
37
28
  {
38
- "__SOverlay": "___SOverlay_1jesk_gg_",
39
- "__SPanel": "___SPanel_1jesk_gg_",
40
- "_placement_top": "_placement_top_1jesk_gg_",
41
- "_placement_right": "_placement_right_1jesk_gg_",
42
- "_placement_bottom": "_placement_bottom_1jesk_gg_",
43
- "_placement_left": "_placement_left_1jesk_gg_",
44
- "__STitle": "___STitle_1jesk_gg_",
45
- "__SHeader": "___SHeader_1jesk_gg_",
46
- "__SFooter": "___SFooter_1jesk_gg_",
47
- "__SBody": "___SBody_1jesk_gg_",
48
- "__SClose": "___SClose_1jesk_gg_",
49
- "__SAddon": "___SAddon_1jesk_gg_",
50
- "__SBack": "___SBack_1jesk_gg_",
51
- "__SInner": "___SInner_1jesk_gg_",
52
- "__SBackText": "___SBackText_1jesk_gg_"
29
+ "__SOverlay": "___SOverlay_1tmb0_gg_",
30
+ "__SPanel": "___SPanel_1tmb0_gg_",
31
+ "_placement_top": "_placement_top_1tmb0_gg_",
32
+ "_placement_right": "_placement_right_1tmb0_gg_",
33
+ "_placement_bottom": "_placement_bottom_1tmb0_gg_",
34
+ "_placement_left": "_placement_left_1tmb0_gg_",
35
+ "__STitle": "___STitle_1tmb0_gg_",
36
+ "__SHeader": "___SHeader_1tmb0_gg_",
37
+ "__SFooter": "___SFooter_1tmb0_gg_",
38
+ "__SBody": "___SBody_1tmb0_gg_",
39
+ "__SClose": "___SClose_1tmb0_gg_",
40
+ "__SAddon": "___SAddon_1tmb0_gg_",
41
+ "__SBack": "___SBack_1tmb0_gg_",
42
+ "__SInner": "___SInner_1tmb0_gg_",
43
+ "__SBackText": "___SBackText_1tmb0_gg_"
53
44
  })
54
45
  );
55
- var RootSidePanel = /* @__PURE__ */ (function(_Component) {
56
- function RootSidePanel2() {
57
- var _this;
58
- _classCallCheck(this, RootSidePanel2);
59
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
60
- args[_key] = arguments[_key];
61
- }
62
- _this = _callSuper(this, RootSidePanel2, [].concat(args));
63
- _defineProperty(_this, "sidebarRef", /* @__PURE__ */ React.createRef());
64
- _defineProperty(_this, "handleSidebarKeyDown", function(e) {
46
+ class RootSidePanel extends Component {
47
+ constructor(...args) {
48
+ super(...args);
49
+ _defineProperty(this, "sidebarRef", /* @__PURE__ */ React.createRef());
50
+ _defineProperty(this, "handleSidebarKeyDown", (e) => {
65
51
  if (e.key === "Escape") {
66
52
  e.stopPropagation();
67
- fire(_this, "onClose", "onEscape", e);
53
+ fire(this, "onClose", "onEscape", e);
68
54
  }
69
55
  });
70
- _defineProperty(_this, "handleIconCloseClick", function(e) {
71
- fire(_this, "onClose", "onCloseClick", e);
56
+ _defineProperty(this, "handleIconCloseClick", (e) => {
57
+ fire(this, "onClose", "onCloseClick", e);
72
58
  });
73
- _defineProperty(_this, "handleOutsideClick", function(e) {
74
- fire(_this, "onClose", "onOutsideClick", e);
59
+ _defineProperty(this, "handleOutsideClick", (e) => {
60
+ fire(this, "onClose", "onOutsideClick", e);
75
61
  });
76
- return _this;
77
62
  }
78
- _inherits(RootSidePanel2, _Component);
79
- return _createClass(RootSidePanel2, [{
80
- key: "isAdvanceMode",
81
- value: function isAdvanceMode$1() {
82
- return isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName, SidePanel.Panel.displayName]);
83
- }
84
- }, {
85
- key: "isUsedOverlay",
86
- value: function isUsedOverlay() {
87
- return !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName]);
88
- }
89
- }, {
90
- key: "getOverlayProps",
91
- value: function getOverlayProps() {
92
- var _this$asProps = this.asProps, visible = _this$asProps.visible, duration = _this$asProps.duration, animationsDisabled = _this$asProps.animationsDisabled, disablePreventScroll = _this$asProps.disablePreventScroll;
93
- return {
94
- visible,
95
- duration,
96
- animationsDisabled,
97
- disablePreventScroll
98
- };
99
- }
100
- }, {
101
- key: "getPanelProps",
102
- value: function getPanelProps() {
103
- var _this$asProps2 = this.asProps, placement = _this$asProps2.placement, visible = _this$asProps2.visible, closable = _this$asProps2.closable, duration = _this$asProps2.duration, animationsDisabled = _this$asProps2.animationsDisabled, ariaLabel = _this$asProps2["aria-label"], ariaLabelledBy = _this$asProps2["aria-labelledby"];
104
- return {
105
- visible,
106
- placement,
107
- closable,
108
- "duration": duration + duration / 2,
109
- "disableEnforceFocus": !this.isUsedOverlay(),
110
- "onOutsideClick": this.handleOutsideClick,
111
- "onKeyDown": this.handleSidebarKeyDown,
112
- animationsDisabled,
113
- "aria-label": ariaLabel,
114
- "aria-labelledby": ariaLabelledBy
115
- };
116
- }
117
- }, {
118
- key: "getCloseProps",
119
- value: function getCloseProps() {
120
- return {
121
- onClick: this.handleIconCloseClick,
122
- getI18nText: this.asProps.getI18nText
123
- };
124
- }
125
- }, {
126
- key: "render",
127
- value: function render() {
128
- var _ref = this.asProps;
129
- var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, disablePortal = _this$asProps3.disablePortal, ignorePortalsStacking = _this$asProps3.ignorePortalsStacking;
130
- return /* @__PURE__ */ React.createElement(Portal, {
131
- disablePortal,
132
- ignorePortalsStacking
133
- }, this.isAdvanceMode() ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(SidePanel.Overlay, null, /* @__PURE__ */ React.createElement(SidePanel.Panel, assignProps({}, _ref))));
134
- }
135
- }]);
136
- })(Component);
63
+ isAdvanceMode() {
64
+ return isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName, SidePanel.Panel.displayName]);
65
+ }
66
+ isUsedOverlay() {
67
+ return !this.isAdvanceMode() || isAdvanceMode(this.asProps.Children, [SidePanel.Overlay.displayName]);
68
+ }
69
+ getOverlayProps() {
70
+ const {
71
+ visible,
72
+ duration,
73
+ animationsDisabled,
74
+ disablePreventScroll
75
+ } = this.asProps;
76
+ return {
77
+ visible,
78
+ duration,
79
+ animationsDisabled,
80
+ disablePreventScroll
81
+ };
82
+ }
83
+ getPanelProps() {
84
+ const {
85
+ placement,
86
+ visible,
87
+ closable,
88
+ duration,
89
+ animationsDisabled,
90
+ "aria-label": ariaLabel,
91
+ "aria-labelledby": ariaLabelledBy
92
+ } = this.asProps;
93
+ return {
94
+ visible,
95
+ placement,
96
+ closable,
97
+ "duration": duration + duration / 2,
98
+ "disableEnforceFocus": !this.isUsedOverlay(),
99
+ "onOutsideClick": this.handleOutsideClick,
100
+ "onKeyDown": this.handleSidebarKeyDown,
101
+ animationsDisabled,
102
+ "aria-label": ariaLabel,
103
+ "aria-labelledby": ariaLabelledBy
104
+ };
105
+ }
106
+ getCloseProps() {
107
+ return {
108
+ onClick: this.handleIconCloseClick,
109
+ getI18nText: this.asProps.getI18nText
110
+ };
111
+ }
112
+ render() {
113
+ var _ref = this.asProps;
114
+ const {
115
+ Children,
116
+ disablePortal,
117
+ ignorePortalsStacking
118
+ } = this.asProps;
119
+ return /* @__PURE__ */ React.createElement(Portal, {
120
+ disablePortal,
121
+ ignorePortalsStacking
122
+ }, this.isAdvanceMode() ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(SidePanel.Overlay, null, /* @__PURE__ */ React.createElement(SidePanel.Panel, assignProps({}, _ref))));
123
+ }
124
+ }
137
125
  _defineProperty(RootSidePanel, "displayName", "SidePanel");
138
126
  _defineProperty(RootSidePanel, "style", style);
139
127
  _defineProperty(RootSidePanel, "enhance", [cssVariableEnhance({
@@ -149,36 +137,48 @@ _defineProperty(RootSidePanel, "defaultProps", {
149
137
  });
150
138
  function Overlay(props) {
151
139
  var _ref2 = arguments[0], _ref0;
152
- var SOverlay = FadeInOut;
153
- var overlayRef = React.useRef(null);
140
+ const SOverlay = FadeInOut;
141
+ const overlayRef = React.useRef(null);
154
142
  usePreventScroll(props.visible, props.disablePreventScroll);
155
143
  useContextTheme(overlayRef, props.visible);
156
- var zIndex = useZIndexStacking("z-index-modal");
157
- return _ref0 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SOverlay, _ref0.cn("SOverlay", _objectSpread({}, assignProps({
158
- "ref": overlayRef,
159
- "zIndex": zIndex
160
- }, _ref2))));
144
+ const zIndex = useZIndexStacking("z-index-modal");
145
+ return _ref0 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SOverlay, _ref0.cn("SOverlay", {
146
+ ...assignProps({
147
+ "ref": overlayRef,
148
+ "zIndex": zIndex
149
+ }, _ref2)
150
+ }));
161
151
  }
162
152
  function Panel(props) {
163
153
  var _ref3 = arguments[0], _ref1;
164
- var SPanel = Slide;
165
- var Children = props.Children, styles = props.styles, visible = props.visible, closable = props.closable, placement = props.placement, onOutsideClick = props.onOutsideClick, forcedAdvancedMode = props.forcedAdvancedMode;
166
- var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [SidePanel.Header.displayName, SidePanel.Body.displayName, SidePanel.Footer.displayName]);
167
- var sidebarRef = React.useRef(null);
154
+ const SPanel = Slide;
155
+ const {
156
+ Children,
157
+ styles,
158
+ visible,
159
+ closable,
160
+ placement,
161
+ onOutsideClick,
162
+ forcedAdvancedMode
163
+ } = props;
164
+ const advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [SidePanel.Header.displayName, SidePanel.Body.displayName, SidePanel.Footer.displayName]);
165
+ const sidebarRef = React.useRef(null);
168
166
  useFocusLock(sidebarRef, true, "auto", !visible, true);
169
- var hasLabel = Boolean(props["aria-label"] || props["aria-labelledby"]);
167
+ const hasLabel = Boolean(props["aria-label"] || props["aria-labelledby"]);
170
168
  logger.warn(!hasLabel, "'aria-label' or 'aria-labelledby' are required for SidePanel component", props["data-ui-name"] || Panel.displayName);
171
169
  return _ref1 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, visible && /* @__PURE__ */ React.createElement(OutsideClick, _ref1.cn("OutsideClick", {
172
170
  "onOutsideClick": onOutsideClick,
173
171
  "excludeRefs": [sidebarRef]
174
- })), /* @__PURE__ */ React.createElement(SPanel, _ref1.cn("SPanel", _objectSpread({}, assignProps({
175
- "visible": visible,
176
- "initialAnimation": true,
177
- "slideOrigin": placement,
178
- "ref": sidebarRef,
179
- "role": "dialog",
180
- "aria-modal": "true"
181
- }, _ref3))), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref1.cn("ZIndexStackingContextProvider", {
172
+ })), /* @__PURE__ */ React.createElement(SPanel, _ref1.cn("SPanel", {
173
+ ...assignProps({
174
+ "visible": visible,
175
+ "initialAnimation": true,
176
+ "slideOrigin": placement,
177
+ "ref": sidebarRef,
178
+ "role": "dialog",
179
+ "aria-modal": "true"
180
+ }, _ref3)
181
+ }), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref1.cn("ZIndexStackingContextProvider", {
182
182
  "designToken": "z-index-modal"
183
183
  }), /* @__PURE__ */ React.createElement(PortalProvider, _ref1.cn("PortalProvider", {
184
184
  "value": sidebarRef
@@ -186,59 +186,81 @@ function Panel(props) {
186
186
  }
187
187
  function Footer(props) {
188
188
  var _ref4 = arguments[0], _ref10;
189
- var SFooter = Flex;
190
- return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SFooter, _ref10.cn("SFooter", _objectSpread({}, assignProps({
191
- "tag": "footer"
192
- }, _ref4))));
189
+ const SFooter = Flex;
190
+ return _ref10 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SFooter, _ref10.cn("SFooter", {
191
+ ...assignProps({
192
+ "tag": "footer"
193
+ }, _ref4)
194
+ }));
193
195
  }
194
- function Close(_ref16) {
196
+ function Close({
197
+ styles,
198
+ children: hasChildren,
199
+ Children,
200
+ getI18nText
201
+ }) {
195
202
  var _ref5 = arguments[0], _ref11;
196
- var styles = _ref16.styles, hasChildren = _ref16.children, Children = _ref16.Children, getI18nText = _ref16.getI18nText;
197
- var SClose = Button;
198
- return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SClose, _ref11.cn("SClose", _objectSpread({}, assignProps({
199
- "aria-label": getI18nText("close"),
200
- "use": "tertiary",
201
- "theme": "muted",
202
- "size": "l",
203
- "addonLeft": hasChildren ? void 0 : CloseIcon,
204
- "data-hide-focus-hover-popper": "true"
205
- }, _ref5))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})) : void 0);
203
+ const SClose = Button;
204
+ return _ref11 = sstyled(styles), /* @__PURE__ */ React.createElement(SClose, _ref11.cn("SClose", {
205
+ ...assignProps({
206
+ "aria-label": getI18nText("close"),
207
+ "use": "tertiary",
208
+ "theme": "muted",
209
+ "size": "l",
210
+ "addonLeft": hasChildren ? void 0 : CloseIcon,
211
+ "data-hide-focus-hover-popper": "true"
212
+ }, _ref5)
213
+ }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref11.cn("Children", {})) : void 0);
206
214
  }
207
- Close.enhance = [keyboardFocusEnhance()];
208
215
  function Title(props) {
209
216
  var _ref6 = arguments[0], _ref12;
210
- var STitle = Text;
211
- return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(STitle, _ref12.cn("STitle", _objectSpread({}, assignProps({
212
- "tag": "h6"
213
- }, _ref6))));
217
+ const STitle = Text;
218
+ return _ref12 = sstyled(props.styles), /* @__PURE__ */ React.createElement(STitle, _ref12.cn("STitle", {
219
+ ...assignProps({
220
+ "tag": "h6"
221
+ }, _ref6)
222
+ }));
214
223
  }
215
224
  function Back(props) {
216
225
  var _ref7 = arguments[0], _ref13;
217
- var SBack = ButtonLink;
218
- var SBackText = ButtonLink.Text;
219
- var Children = props.Children, styles = props.styles;
220
- return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SBack, _ref13.cn("SBack", _objectSpread({}, assignProps({
221
- "color": "text-hint",
222
- "size": 100,
223
- "addonLeft": ArrowLeft
224
- }, _ref7))), /* @__PURE__ */ React.createElement(SBackText, _ref13.cn("SBackText", {}), /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {}))));
226
+ const SBack = ButtonLink;
227
+ const SBackText = ButtonLink.Text;
228
+ const {
229
+ Children,
230
+ styles
231
+ } = props;
232
+ return _ref13 = sstyled(styles), /* @__PURE__ */ React.createElement(SBack, _ref13.cn("SBack", {
233
+ ...assignProps({
234
+ "color": "text-hint",
235
+ "size": 100,
236
+ "addonLeft": ArrowLeft
237
+ }, _ref7)
238
+ }), /* @__PURE__ */ React.createElement(SBackText, _ref13.cn("SBackText", {}), /* @__PURE__ */ React.createElement(Children, _ref13.cn("Children", {}))));
225
239
  }
226
240
  function Body(props) {
227
241
  var _ref8 = arguments[0], _ref14;
228
- var SBody = Box;
229
- return _ref14 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBody, _ref14.cn("SBody", _objectSpread({}, assignProps({}, _ref8))));
242
+ const SBody = Box;
243
+ return _ref14 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SBody, _ref14.cn("SBody", {
244
+ ...assignProps({}, _ref8)
245
+ }));
230
246
  }
231
247
  function Header(props) {
232
248
  var _ref9 = arguments[0], _ref15;
233
- var SHeader = Box;
234
- var Children = props.Children, styles = props.styles, title = props.title;
235
- return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref15.cn("SHeader", _objectSpread({}, assignProps({
236
- "tag": "header"
237
- }, _ref9))), title && /* @__PURE__ */ React.createElement(SidePanel.Title, {
249
+ const SHeader = Box;
250
+ const {
251
+ Children,
252
+ styles,
253
+ title
254
+ } = props;
255
+ return _ref15 = sstyled(styles), /* @__PURE__ */ React.createElement(SHeader, _ref15.cn("SHeader", {
256
+ ...assignProps({
257
+ "tag": "header"
258
+ }, _ref9)
259
+ }), title && /* @__PURE__ */ React.createElement(SidePanel.Title, {
238
260
  children: title
239
261
  }), /* @__PURE__ */ React.createElement(Children, _ref15.cn("Children", {})));
240
262
  }
241
- var SidePanel = createComponent(RootSidePanel, {
263
+ const SidePanel = createComponent(RootSidePanel, {
242
264
  Overlay,
243
265
  Panel,
244
266
  Close,
package/lib/esm/translations/__intergalactic-dynamic-locales.mjs CHANGED
@@ -12,7 +12,7 @@ import sv from "./sv.json.mjs";
12
12
  import tr from "./tr.json.mjs";
13
13
  import vi from "./vi.json.mjs";
14
14
  import zh from "./zh.json.mjs";
15
- var localizedMessages = {
15
+ const localizedMessages = {
16
16
  de,
17
17
  en,
18
18
  es,
package/lib/types/index.d.ts CHANGED
@@ -1,8 +1,6 @@
1
- import type { FadeInOutProps, SlideProps } from '@semcore/animation';
1
+ import type { FadeInOutProps, SlideProps, Box, BoxProps, Flex, PortalProps } from '@semcore/base-components';
2
2
  import type Button from '@semcore/button';
3
- import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
4
- import type { Box, BoxProps, Flex } from '@semcore/flex-box';
5
- import type { PortalProps } from '@semcore/portal';
3
+ import type { PropGetterFn, Intergalactic } from '@semcore/core';
6
4
  import type { Text } from '@semcore/typography';
7
5
  import type React from 'react';
8
6
 
@@ -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,28 +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 & {
58
50
  /** Callback that is triggered when click outside is occured */
59
51
  onOutsideClick?: (e?: React.SyntheticEvent) => void;
60
52
  };
61
53
 
62
- /** @deprecated */
63
- export interface ISidePanelContext extends SidePanelContext, UnknownProperties {}
64
54
  export type SidePanelContext = {
65
55
  getOverlayProps?: PropGetterFn;
66
56
  getPanelProps?: PropGetterFn;
67
57
  getCloseProps?: PropGetterFn;
68
58
  };
69
59
 
70
- /** @deprecated */
71
- export interface ISidePanelHeaderProps extends SidePanelHeaderProps, UnknownProperties {}
72
60
  export type SidePanelHeaderProps = BoxProps & {
73
61
  title?: React.ReactNode;
74
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": "16.1.12",
4
+ "version": "17.0.0-prerelease.18",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,16 +14,12 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/animation": "16.0.7",
18
- "@semcore/button": "16.0.12",
19
- "@semcore/flex-box": "16.0.11",
20
- "@semcore/portal": "16.0.11",
21
- "@semcore/outside-click": "16.0.11",
22
- "@semcore/typography": "16.3.2",
23
- "@semcore/icon": "16.7.3"
17
+ "@semcore/button": "^16.0.13-prerelease.18",
18
+ "@semcore/typography": "^16.3.3-prerelease.18"
24
19
  },
25
20
  "peerDependencies": {
26
- "@semcore/base-components": "^16.0.0"
21
+ "@semcore/base-components": "^17.0.0-prerelease.18",
22
+ "@semcore/icon": "^16.7.2-prerelease.18"
27
23
  },
28
24
  "repository": {
29
25
  "type": "git",
@@ -31,8 +27,10 @@
31
27
  "directory": "semcore/side-panel"
32
28
  },
33
29
  "devDependencies": {
34
- "@semcore/core": "16.5.1",
35
- "@semcore/testing-utils": "1.0.0"
30
+ "@semcore/core": "17.0.0-prerelease.18",
31
+ "@semcore/base-components": "17.0.0-prerelease.18",
32
+ "@semcore/testing-utils": "1.0.0",
33
+ "@semcore/icon": "16.7.2-prerelease.18"
36
34
  },
37
35
  "scripts": {
38
36
  "build": "pnpm semcore-builder --source=js && pnpm vite build"