@semcore/fullscreen-modal 3.49.0-prerelease.9 → 3.49.0

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [3.49.0] - 2025-02-28
+## [3.49.0] - 2025-03-14
 
-### Changed
+### Added
 
-- Version minor update due to children dependencies update (`@semcore/utils` [4.45.1 ~> 4.47.1], `@semcore/icon` [4.57.1 ~> 4.58.0], `@semcore/flex-box` [5.40.1 ~> 5.41.0], `@semcore/button` [5.41.2 ~> 5.42.0], `@semcore/core` [2.38.1 ~> 2.39.0]).
+- Build for ESM.
 
 ## [3.48.2] - 2025-02-05
 

package/lib/esm/FullscreenModal.mjs

@@ -0,0 +1,180 @@
+import _ from "@babel/runtime/helpers/esm/objectSpread2";
+import z from "@babel/runtime/helpers/esm/classCallCheck";
+import D from "@babel/runtime/helpers/esm/createClass";
+import v from "@babel/runtime/helpers/esm/assertThisInitialized";
+import I from "@babel/runtime/helpers/esm/inherits";
+import O from "@babel/runtime/helpers/esm/createSuper";
+import f from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled as A } from "@semcore/utils/lib/core/index";
+import R, { sstyled as s, assignProps as g, Component as L } from "@semcore/core";
+import i from "react";
+import p from "@semcore/modal";
+import { Box as m, Flex as $ } from "@semcore/flex-box";
+import j from "@semcore/icon/Close/l";
+import q from "@semcore/icon/ArrowLeft/m";
+import { Text as h } from "@semcore/typography";
+import k from "@semcore/button";
+import N from "@semcore/utils/lib/fire";
+import { localizedMessages as y } from "./translations/__intergalactic-dynamic-locales.mjs";
+import W from "@semcore/utils/lib/enhances/i18nEnhance";
+import G from "@semcore/utils/lib/uniqueID";
+import J from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
+var K = (
+  /*__reshadow_css_start__*/
+  (A.insert(
+    /*__inner_css_start__*/
+    '.___SFullscreenOverlay_1k7if_gg_{padding:0}.___SFullscreenModal_1k7if_gg_{height:100%;display:flex;flex-direction:column;width:100%;background:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:0;padding:0}.___SClose_1k7if_gg_{position:absolute;top:17px;right:24px}.___SBack_1k7if_gg_{cursor:pointer;position:absolute;z-index:1;top:8px;left:32px;display:flex;align-items:center;margin-bottom:var(--intergalactic-spacing-3x, 12px);color:var(--intergalactic-icon-primary-neutral, #6c6e79);font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);background:0 0;padding:0;border:0;outline:0}@media (hover:hover){.___SBack_1k7if_gg_:hover{color:var(--intergalactic-icon-primary-neutral-hover-active, #565861)}}.___SBack_1k7if_gg_.__keyboardFocused_1k7if_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SBackText_1k7if_gg_{margin-left:var(--intergalactic-spacing-1x, 4px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SBackText_1k7if_gg_,.___SDescription_1k7if_gg_,.___STitle_1k7if_gg_{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___STitle_1k7if_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-bold, 700);color:var(--intergalactic-text-primary, #191b23)}.___SDescription_1k7if_gg_{display:flex;align-items:baseline;font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%);color:var(--intergalactic-text-secondary, #6c6e79)}.___SDescription_1k7if_gg_::before{content:"";position:relative;top:var(--intergalactic-spacing-1x, 4px);display:block;margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px);height:24px;width:1px;background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SHeader_1k7if_gg_{display:flex;align-items:baseline;padding-left:var(--intergalactic-spacing-8x, 32px);padding-bottom:var(--intergalactic-spacing-2x, 8px);padding-right:calc(var(--intergalactic-spacing-20x, 80px) - var(--intergalactic-spacing-2x, 8px));padding-top:var(--intergalactic-spacing-10x, 40px);min-height:76px;box-shadow:inset 0-1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SFooter_1k7if_gg_{min-height:52px;box-shadow:inset 0 1px 1px 0 var(--intergalactic-border-primary, #c4c7cf);box-sizing:border-box}.___SBody_1k7if_gg_{display:flex;height:100%;overflow:auto}.___SSection_1k7if_gg_{padding-top:var(--intergalactic-spacing-6x, 24px);padding-bottom:var(--intergalactic-spacing-6x, 24px);padding-left:var(--intergalactic-spacing-8x, 32px);padding-right:var(--intergalactic-spacing-8x, 32px);flex:1 1 auto}@media (prefers-reduced-motion){.___SBackText_1k7if_gg_{transition:none}}',
+    "1k7if_gg_"
+  ), {
+    __SFullscreenOverlay: "___SFullscreenOverlay_1k7if_gg_",
+    __SFullscreenModal: "___SFullscreenModal_1k7if_gg_",
+    __SClose: "___SClose_1k7if_gg_",
+    __SBack: "___SBack_1k7if_gg_",
+    _keyboardFocused: "__keyboardFocused_1k7if_gg_",
+    __SBackText: "___SBackText_1k7if_gg_",
+    __STitle: "___STitle_1k7if_gg_",
+    __SDescription: "___SDescription_1k7if_gg_",
+    __SHeader: "___SHeader_1k7if_gg_",
+    __SFooter: "___SFooter_1k7if_gg_",
+    __SBody: "___SBody_1k7if_gg_",
+    __SSection: "___SSection_1k7if_gg_"
+  })
+), d = /* @__PURE__ */ function(r) {
+  I(e, r);
+  var a = O(e);
+  function e() {
+    var t;
+    z(this, e);
+    for (var n = arguments.length, o = new Array(n), c = 0; c < n; c++)
+      o[c] = arguments[c];
+    return t = a.call.apply(a, [this].concat(o)), f(v(t), "state", {
+      hasTitle: !1
+    }), f(v(t), "bindHandlerClose", function(l) {
+      return function(u) {
+        N(v(t), "onClose", l, u);
+      };
+    }), t;
+  }
+  return D(e, [{
+    key: "getCloseProps",
+    value: function() {
+      var n = this.asProps.getI18nText;
+      return {
+        onClick: this.bindHandlerClose("onCloseClick"),
+        getI18nText: n
+      };
+    }
+  }, {
+    key: "getBackProps",
+    value: function() {
+      return {
+        onClick: this.bindHandlerClose("onBackClick")
+      };
+    }
+  }, {
+    key: "getTitleProps",
+    value: function() {
+      var n = this, o = this.asProps.uid, c = function() {
+        return n.setState({
+          hasTitle: !0
+        });
+      };
+      return {
+        id: "igc-".concat(o, "-title"),
+        setHasTitle: c
+      };
+    }
+  }, {
+    key: "render",
+    value: function() {
+      var n = this.asProps, o, c = p.Window, l = this.asProps, u = l.styles, C = l.Children, T = l.onClose, B = l.visible, E = l.closable, F = l.duration, P = l.disablePortal, w = l.getI18nText, H = l.uid, S = this.state.hasTitle, M = p.Overlay;
+      return o = s(u), /* @__PURE__ */ i.createElement(p, o.cn("Modal", {
+        closable: !1,
+        visible: B,
+        onClose: T,
+        duration: F,
+        disablePortal: P
+      }), /* @__PURE__ */ i.createElement(M, o.cn("SFullscreenOverlay", {}), /* @__PURE__ */ i.createElement(c, o.cn("SFullscreenModal", _({}, g({
+        "aria-label": S ? void 0 : w("title"),
+        "aria-labelledby": S ? "igc-".concat(H, "-title") : void 0
+      }, n))), E && /* @__PURE__ */ i.createElement(x.Close, null), /* @__PURE__ */ i.createElement(C, o.cn("Children", {})))));
+    }
+  }]), e;
+}(L);
+f(d, "displayName", "FullscreenModal");
+f(d, "style", K);
+f(d, "enhance", [W(y), G()]);
+f(d, "defaultProps", {
+  i18n: y,
+  locale: "en"
+});
+function Q(r) {
+  var a = arguments[0], e, t = m, n = r.Children, o = r.styles, c = r.title, l = r.description;
+  return e = s(o), /* @__PURE__ */ i.createElement(t, e.cn("SHeader", _({}, g({}, a))), c && /* @__PURE__ */ i.createElement(x.Title, {
+    children: c
+  }), l && /* @__PURE__ */ i.createElement(x.Description, {
+    children: l
+  }), /* @__PURE__ */ i.createElement(n, e.cn("Children", {})));
+}
+function U(r) {
+  var a = arguments[0], e, t = m;
+  return e = s(r.styles), /* @__PURE__ */ i.createElement(t, e.cn("SBody", _({}, g({}, a))));
+}
+function V(r) {
+  var a = arguments[0], e, t = m;
+  return e = s(r.styles), /* @__PURE__ */ i.createElement(t, e.cn("SSection", _({}, g({
+    tag: "section"
+  }, a))));
+}
+function X(r) {
+  var a = arguments[0], e, t = $;
+  return e = s(r.styles), /* @__PURE__ */ i.createElement(t, e.cn("SFooter", _({}, g({}, a))));
+}
+function Y(r) {
+  var a = arguments[0], e, t = k, n = r.getI18nText;
+  return e = s(r.styles), /* @__PURE__ */ i.createElement(t, e.cn("SClose", _({}, g({
+    use: "tertiary",
+    size: "l",
+    theme: "muted",
+    "aria-label": n("close")
+  }, a))), /* @__PURE__ */ i.createElement(k.Addon, {
+    ml: "7px",
+    mr: "7px"
+  }, /* @__PURE__ */ i.createElement(j, e.cn("CloseIcon", {
+    title: n("close")
+  }))));
+}
+function Z(r) {
+  var a = arguments[0], e, t = h, n = r.setHasTitle;
+  return i.useEffect(function() {
+    return n();
+  }), e = s(r.styles), /* @__PURE__ */ i.createElement(t, e.cn("STitle", _({}, g({
+    tag: "h2"
+  }, a))));
+}
+function ee(r) {
+  var a = arguments[0], e, t = h;
+  return e = s(r.styles), /* @__PURE__ */ i.createElement(t, e.cn("SDescription", _({}, g({}, a))));
+}
+function b(r) {
+  var a = arguments[0], e, t = m, n = h, o = r.Children, c = r.styles;
+  return e = s(c), /* @__PURE__ */ i.createElement(t, e.cn("SBack", _({}, g({
+    tag: "button"
+  }, a))), /* @__PURE__ */ i.createElement(q, e.cn("ArrowLeft", {})), /* @__PURE__ */ i.createElement(n, e.cn("SBackText", {}), /* @__PURE__ */ i.createElement(o, e.cn("Children", {}))));
+}
+b.enhance = [J()];
+var x = R(d, {
+  Header: Q,
+  Footer: X,
+  Close: Y,
+  Back: b,
+  Body: U,
+  Section: V,
+  Title: Z,
+  Description: ee
+}, {
+  parent: p
+});
+export {
+  x as default
+};

package/lib/esm/index.mjs

@@ -0,0 +1,4 @@
+import { default as o } from "./FullscreenModal.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,9 @@
+const e = "Dialogfenster", t = "Schließen", l = {
+  title: e,
+  close: t
+};
+export {
+  t as close,
+  l as default,
+  e as title
+};

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

@@ -0,0 +1,9 @@
+const o = "Modal window", t = "Close", e = {
+  title: o,
+  close: t
+};
+export {
+  t as close,
+  e as default,
+  o as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Ventana modal", e = "Cerrar", o = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  o as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const e = "Fenêtre modale", t = "Fermer", o = {
+  title: e,
+  close: t
+};
+export {
+  t as close,
+  o as default,
+  e as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Finestra modale", e = "Chiudi", o = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  o as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "モーダルウィンドウ", e = "閉じる", o = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  o as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "대화상자 창", o = "닫기", e = {
+  title: t,
+  close: o
+};
+export {
+  o as close,
+  e as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Modaal venster", e = "Sluiten", l = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  l as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Okno modalne", o = "Zamknij", e = {
+  title: t,
+  close: o
+};
+export {
+  o as close,
+  e as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Janela modal", e = "Fechar", l = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  l as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Modalt fönster", s = "Stäng", e = {
+  title: t,
+  close: s
+};
+export {
+  s as close,
+  e as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Modal pencere", e = "Kapat", o = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  o as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "Cửa sổ phương thức", s = "Đóng", c = {
+  title: t,
+  close: s
+};
+export {
+  s as close,
+  c as default,
+  t as title
+};

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

@@ -0,0 +1,9 @@
+const t = "模态窗口", e = "关闭", o = {
+  title: t,
+  close: e
+};
+export {
+  e as close,
+  o as default,
+  t as title
+};

package/package.json

@@ -1,23 +1,28 @@
 {
   "name": "@semcore/fullscreen-modal",
   "description": "Semrush FullscreenModal Component",
-  "version": "3.49.0-prerelease.9",
+  "version": "3.49.0",
   "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.1-prerelease.9",
-    "@semcore/icon": "4.58.0-prerelease.9",
-    "@semcore/modal": "4.54.0-prerelease.9",
-    "@semcore/typography": "5.52.0-prerelease.9",
-    "@semcore/flex-box": "5.41.0-prerelease.9",
-    "@semcore/button": "5.42.0-prerelease.9"
+    "@semcore/utils": "4.48.0",
+    "@semcore/icon": "4.60.0",
+    "@semcore/modal": "4.54.0",
+    "@semcore/typography": "5.52.0",
+    "@semcore/flex-box": "5.41.0",
+    "@semcore/button": "5.42.0"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.39.0-prerelease.9",
+    "@semcore/core": "^2.17.5",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },
@@ -31,6 +36,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\/*/],
+      },
+    },
+  }),
+);