@semcore/side-panel 3.53.0-prerelease.1 → 3.53.0-prerelease.12

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [3.53.0] - 2025-02-27
+## [3.53.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.0], `@semcore/animation` [2.40.1 ~> 2.41.0], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/portal` [3.40.1 ~> 3.41.0], `@semcore/outside-click` [3.38.1 ~> 3.39.0], `@semcore/icon` [4.57.1 ~> 4.58.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [3.52.1] - 2025-02-05
 

package/lib/esm/SidePanel.mjs

@@ -0,0 +1,223 @@
+import m from "@babel/runtime/helpers/esm/objectSpread2";
+import w from "@babel/runtime/helpers/esm/classCallCheck";
+import B from "@babel/runtime/helpers/esm/createClass";
+import f from "@babel/runtime/helpers/esm/assertThisInitialized";
+import O from "@babel/runtime/helpers/esm/inherits";
+import T from "@babel/runtime/helpers/esm/createSuper";
+import d from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as I } from "@semcore/utils/lib/core/index";
+import z, { assignProps as s, Component as A, sstyled as p } from "@semcore/core";
+import l from "react";
+import { Flex as F, Box as C } from "@semcore/flex-box";
+import { FadeInOut as R, Slide as M } from "@semcore/animation";
+import N, { PortalProvider as L } from "@semcore/portal";
+import D from "@semcore/outside-click";
+import H from "@semcore/icon/Close/l";
+import S from "@semcore/utils/lib/fire";
+import { isAdvanceMode as y } from "@semcore/utils/lib/findComponent";
+import $ from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+import K from "@semcore/utils/lib/use/usePreventScroll";
+import { Text as U } from "@semcore/typography";
+import Z from "@semcore/icon/ArrowLeft/m";
+import q, { ButtonLink as P } from "@semcore/button";
+import { cssVariableEnhance as V } from "@semcore/utils/lib/useCssVariable";
+import { useFocusLock as G } from "@semcore/utils/lib/use/useFocusLock";
+import { useContextTheme as J } from "@semcore/utils/lib/ThemeProvider";
+import Q from "@semcore/utils/lib/logger";
+import W from "@semcore/utils/lib/enhances/i18nEnhance";
+import { localizedMessages as X } from "./translations/__intergalactic-dynamic-locales.mjs";
+import { useZIndexStacking as Y, ZIndexStackingContextProvider as ee } from "@semcore/utils/lib/zIndexStacking";
+var ae = (
+  /*__reshadow_css_start__*/
+  (I.insert(
+    /*__inner_css_start__*/
+    ".___SOverlay_17clj_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_17clj_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_17clj_gg_._placement_right_17clj_gg_,.___SPanel_17clj_gg_._placement_top_17clj_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));top:0}.___SPanel_17clj_gg_._placement_top_17clj_gg_{width:100%;margin-bottom:auto;left:0}.___SPanel_17clj_gg_._placement_right_17clj_gg_{height:100vh;margin-left:auto;right:0}.___SPanel_17clj_gg_._placement_bottom_17clj_gg_,.___SPanel_17clj_gg_._placement_left_17clj_gg_{box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));left:0}.___SPanel_17clj_gg_._placement_bottom_17clj_gg_{width:100%;margin-top:auto;bottom:0}.___SPanel_17clj_gg_._placement_left_17clj_gg_{height:100vh;margin-right:auto;top:0}.___SClose_17clj_gg_{position:absolute;z-index:1;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SClose_17clj_gg_ .___SAddon_17clj_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px);margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SBack_17clj_gg_{max-width:100%}.___SBack_17clj_gg_ .___SInner_17clj_gg_{display:flex}.___SBack_17clj_gg_ .___SBackText_17clj_gg_,.___STitle_17clj_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_17clj_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_17clj_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_17clj_gg_{min-height:44px;box-shadow:inset 0 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_17clj_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)}",
+    "17clj_gg_"
+  ), {
+    __SOverlay: "___SOverlay_17clj_gg_",
+    __SPanel: "___SPanel_17clj_gg_",
+    _placement_top: "_placement_top_17clj_gg_",
+    _placement_right: "_placement_right_17clj_gg_",
+    _placement_bottom: "_placement_bottom_17clj_gg_",
+    _placement_left: "_placement_left_17clj_gg_",
+    __STitle: "___STitle_17clj_gg_",
+    __SHeader: "___SHeader_17clj_gg_",
+    __SFooter: "___SFooter_17clj_gg_",
+    __SBody: "___SBody_17clj_gg_",
+    __SClose: "___SClose_17clj_gg_",
+    __SAddon: "___SAddon_17clj_gg_",
+    __SBack: "___SBack_17clj_gg_",
+    __SInner: "___SInner_17clj_gg_",
+    __SBackText: "___SBackText_17clj_gg_"
+  })
+), v = /* @__PURE__ */ function(a) {
+  O(e, a);
+  var o = T(e);
+  function e() {
+    var t;
+    w(this, e);
+    for (var r = arguments.length, n = new Array(r), i = 0; i < r; i++)
+      n[i] = arguments[i];
+    return t = o.call.apply(o, [this].concat(n)), d(f(t), "sidebarRef", /* @__PURE__ */ l.createRef()), d(f(t), "handleSidebarKeyDown", function(_) {
+      _.key === "Escape" && (_.stopPropagation(), S(f(t), "onClose", "onEscape", _));
+    }), d(f(t), "handleIconCloseClick", function(_) {
+      S(f(t), "onClose", "onCloseClick", _);
+    }), d(f(t), "handleOutsideClick", function(_) {
+      S(f(t), "onClose", "onOutsideClick", _);
+    }), t;
+  }
+  return B(e, [{
+    key: "isAdvanceMode",
+    value: function() {
+      return y(this.asProps.Children, [c.Overlay.displayName, c.Panel.displayName]);
+    }
+  }, {
+    key: "isUsedOverlay",
+    value: function() {
+      return !this.isAdvanceMode() || y(this.asProps.Children, [c.Overlay.displayName]);
+    }
+  }, {
+    key: "getOverlayProps",
+    value: function() {
+      var r = this.asProps, n = r.visible, i = r.duration, _ = r.animationsDisabled, g = r.disablePreventScroll;
+      return {
+        visible: n,
+        duration: i,
+        animationsDisabled: _,
+        disablePreventScroll: g
+      };
+    }
+  }, {
+    key: "getPanelProps",
+    value: function() {
+      var r = this.asProps, n = r.placement, i = r.visible, _ = r.closable, g = r.duration, h = r.animationsDisabled, x = r["aria-label"], b = r["aria-labelledby"];
+      return {
+        visible: i,
+        placement: n,
+        closable: _,
+        duration: g + g / 2,
+        disableEnforceFocus: !this.isUsedOverlay(),
+        onOutsideClick: this.handleOutsideClick,
+        onKeyDown: this.handleSidebarKeyDown,
+        animationsDisabled: h,
+        "aria-label": x,
+        "aria-labelledby": b
+      };
+    }
+  }, {
+    key: "getCloseProps",
+    value: function() {
+      return {
+        onClick: this.handleIconCloseClick,
+        getI18nText: this.asProps.getI18nText
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var r = this.asProps, n = this.asProps, i = n.Children, _ = n.disablePortal, g = n.ignorePortalsStacking;
+      return /* @__PURE__ */ l.createElement(N, {
+        disablePortal: _,
+        ignorePortalsStacking: g
+      }, this.isAdvanceMode() ? /* @__PURE__ */ l.createElement(i, null) : /* @__PURE__ */ l.createElement(c.Overlay, null, /* @__PURE__ */ l.createElement(c.Panel, s({}, r))));
+    }
+  }]), e;
+}(A);
+d(v, "displayName", "SidePanel");
+d(v, "style", ae);
+d(v, "enhance", [V({
+  variable: "--intergalactic-duration-modal",
+  fallback: "200",
+  map: Number.parseInt,
+  prop: "duration"
+}), W(X)]);
+d(v, "defaultProps", {
+  placement: "right",
+  closable: !0,
+  disablePreventScroll: !1
+});
+function te(a) {
+  var o = arguments[0], e, t = R, r = l.useRef(null);
+  K(a.visible, a.disablePreventScroll), J(r, a.visible);
+  var n = Y("z-index-modal");
+  return e = p(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("SOverlay", m({}, s({
+    ref: r,
+    zIndex: n
+  }, o))));
+}
+function j(a) {
+  var o = arguments[0], e, t = M, r = a.Children, n = a.styles, i = a.visible, _ = a.closable, g = a.placement, h = a.onOutsideClick, x = a.forcedAdvancedMode, b = x || y(r, [c.Header.displayName, c.Body.displayName, c.Footer.displayName]), u = l.useRef(null);
+  G(u, !0, "auto", !i, !0);
+  var E = !!(a["aria-label"] || a["aria-labelledby"]);
+  return Q.warn(!E, "'aria-label' or 'aria-labelledby' are required for SidePanel component", a["data-ui-name"] || j.displayName), e = p(n), /* @__PURE__ */ l.createElement(l.Fragment, null, i && /* @__PURE__ */ l.createElement(D, e.cn("OutsideClick", {
+    onOutsideClick: h,
+    excludeRefs: [u]
+  })), /* @__PURE__ */ l.createElement(t, e.cn("SPanel", m({}, s({
+    visible: i,
+    initialAnimation: !0,
+    slideOrigin: g,
+    ref: u,
+    role: "dialog",
+    "aria-modal": "true"
+  }, o))), /* @__PURE__ */ l.createElement(ee, e.cn("ZIndexStackingContextProvider", {
+    designToken: "z-index-modal"
+  }), /* @__PURE__ */ l.createElement(L, e.cn("PortalProvider", {
+    value: u
+  }), _ && /* @__PURE__ */ l.createElement(c.Close, null), b ? /* @__PURE__ */ l.createElement(r, e.cn("Children", {})) : /* @__PURE__ */ l.createElement(c.Body, null, /* @__PURE__ */ l.createElement(r, e.cn("Children", {})))))));
+}
+function re(a) {
+  var o = arguments[0], e, t = F;
+  return e = p(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("SFooter", m({}, s({
+    tag: "footer"
+  }, o))));
+}
+function k(a) {
+  var o = arguments[0], e, t = a.styles, r = a.children, n = a.Children, i = a.getI18nText, _ = q;
+  return e = p(t), /* @__PURE__ */ l.createElement(_, e.cn("SClose", m({}, s({
+    "aria-label": i("close"),
+    use: "tertiary",
+    theme: "muted",
+    size: "l",
+    addonLeft: r ? void 0 : H
+  }, o))), r ? /* @__PURE__ */ l.createElement(n, e.cn("Children", {})) : void 0);
+}
+k.enhance = [$()];
+function le(a) {
+  var o = arguments[0], e, t = U;
+  return e = p(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("STitle", m({}, s({
+    tag: "h6"
+  }, o))));
+}
+function ie(a) {
+  var o = arguments[0], e, t = P, r = P.Text, n = a.Children, i = a.styles;
+  return e = p(i), /* @__PURE__ */ l.createElement(t, e.cn("SBack", m({}, s({
+    color: "text-hint",
+    size: 100,
+    addonLeft: Z
+  }, o))), /* @__PURE__ */ l.createElement(r, e.cn("SBackText", {}), /* @__PURE__ */ l.createElement(n, e.cn("Children", {}))));
+}
+function ne(a) {
+  var o = arguments[0], e, t = C;
+  return e = p(a.styles), /* @__PURE__ */ l.createElement(t, e.cn("SBody", m({}, s({}, o))));
+}
+function oe(a) {
+  var o = arguments[0], e, t = C, r = a.Children, n = a.styles, i = a.title;
+  return e = p(n), /* @__PURE__ */ l.createElement(t, e.cn("SHeader", m({}, s({
+    tag: "header"
+  }, o))), i && /* @__PURE__ */ l.createElement(c.Title, {
+    children: i
+  }), /* @__PURE__ */ l.createElement(r, e.cn("Children", {})));
+}
+var c = z(v, {
+  Overlay: te,
+  Panel: j,
+  Close: k,
+  Header: oe,
+  Footer: re,
+  Body: ne,
+  Back: ie,
+  Title: le
+});
+export {
+  c as default
+};

package/lib/esm/index.mjs

@@ -0,0 +1,4 @@
+import { default as o } from "./SidePanel.mjs";
+export {
+  o as default
+};

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -0,0 +1,33 @@
+import r from "./de.json.mjs";
+import o from "./en.json.mjs";
+import m from "./es.json.mjs";
+import t from "./fr.json.mjs";
+import i from "./it.json.mjs";
+import p from "./ja.json.mjs";
+import f from "./ko.json.mjs";
+import e from "./nl.json.mjs";
+import s from "./pt.json.mjs";
+import a from "./tr.json.mjs";
+import l from "./vi.json.mjs";
+import v from "./zh.json.mjs";
+import d from "./pl.json.mjs";
+import n from "./sv.json.mjs";
+var B = {
+  de: r,
+  en: o,
+  es: m,
+  fr: t,
+  it: i,
+  ja: p,
+  ko: f,
+  nl: e,
+  pt: s,
+  tr: a,
+  vi: l,
+  zh: v,
+  pl: d,
+  sv: n
+};
+export {
+  B as localizedMessages
+};

package/lib/esm/translations/de.json.mjs

@@ -0,0 +1,7 @@
+const e = "Schließen", c = {
+  close: e
+};
+export {
+  e as close,
+  c as default
+};

package/lib/esm/translations/en.json.mjs

@@ -0,0 +1,7 @@
+const e = "Close", o = {
+  close: e
+};
+export {
+  e as close,
+  o as default
+};

package/lib/esm/translations/es.json.mjs

@@ -0,0 +1,7 @@
+const e = "Cerrar", s = {
+  close: e
+};
+export {
+  e as close,
+  s as default
+};

package/lib/esm/translations/fr.json.mjs

@@ -0,0 +1,7 @@
+const e = "Fermer", o = {
+  close: e
+};
+export {
+  e as close,
+  o as default
+};

package/lib/esm/translations/it.json.mjs

@@ -0,0 +1,7 @@
+const o = "Chiudi", s = {
+  close: o
+};
+export {
+  o as close,
+  s as default
+};

package/lib/esm/translations/ja.json.mjs

@@ -0,0 +1,7 @@
+const o = "閉じる", s = {
+  close: o
+};
+export {
+  o as close,
+  s as default
+};

package/lib/esm/translations/ko.json.mjs

@@ -0,0 +1,7 @@
+const o = "닫기", s = {
+  close: o
+};
+export {
+  o as close,
+  s as default
+};

package/lib/esm/translations/nl.json.mjs

@@ -0,0 +1,7 @@
+const e = "Sluiten", l = {
+  close: e
+};
+export {
+  e as close,
+  l as default
+};

package/lib/esm/translations/pl.json.mjs

@@ -0,0 +1,7 @@
+const o = "Zamknij", s = {
+  close: o
+};
+export {
+  o as close,
+  s as default
+};

package/lib/esm/translations/pt.json.mjs

@@ -0,0 +1,7 @@
+const c = "Fechar", e = {
+  close: c
+};
+export {
+  c as close,
+  e as default
+};

package/lib/esm/translations/sv.json.mjs

@@ -0,0 +1,7 @@
+const s = "Stäng", o = {
+  close: s
+};
+export {
+  s as close,
+  o as default
+};

package/lib/esm/translations/tr.json.mjs

@@ -0,0 +1,7 @@
+const t = "Kapat", o = {
+  close: t
+};
+export {
+  t as close,
+  o as default
+};

package/lib/esm/translations/vi.json.mjs

@@ -0,0 +1,7 @@
+const o = "Đóng", s = {
+  close: o
+};
+export {
+  o as close,
+  s as default
+};

package/lib/esm/translations/zh.json.mjs

@@ -0,0 +1,7 @@
+const o = "关闭", s = {
+  close: o
+};
+export {
+  o as close,
+  s as default
+};

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@semcore/side-panel",
   "description": "Semrush SidePanel Component",
-  "version": "3.53.0-prerelease.1",
+  "version": "3.53.0-prerelease.12",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
   "sideEffects": false,
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
+  "exports": {
+    "require": "./lib/cjs/index.js",
+    "import": "./lib/esm/index.mjs",
+    "types": "./lib/types/index.d.ts"
+  },
   "dependencies": {
-    "@semcore/utils": "4.47.0-prerelease.1",
-    "@semcore/animation": "2.41.0-prerelease.1",
-    "@semcore/flex-box": "5.41.0-prerelease.1",
-    "@semcore/portal": "3.41.0-prerelease.1",
-    "@semcore/typography": "5.52.0-prerelease.1",
-    "@semcore/outside-click": "3.39.0-prerelease.1",
-    "@semcore/icon": "4.58.0-prerelease.1"
+    "@semcore/button": "5.42.0-prerelease.12",
+    "@semcore/utils": "4.48.0-prerelease.12",
+    "@semcore/animation": "2.41.0-prerelease.12",
+    "@semcore/flex-box": "5.41.0-prerelease.12",
+    "@semcore/portal": "3.41.0-prerelease.12",
+    "@semcore/typography": "5.52.0-prerelease.12",
+    "@semcore/outside-click": "3.39.0-prerelease.12",
+    "@semcore/icon": "4.61.0-prerelease.12"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.1",
+    "@semcore/core": "^2.39.0-prerelease.12",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -32,6 +38,6 @@
     "@semcore/testing-utils": "1.0.0"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=js"
+    "build": "pnpm semcore-builder --source=js && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, mergeConfig } from 'vite';
+
+import viteConfig from '../../commonVite.config';
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    build: {
+      lib: {
+        entry: './src/index.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
+      },
+    },
+  }),
+);