@semcore/modal 16.1.13 → 17.0.0-prerelease.17

package/lib/esm/Modal.mjs

@@ -1,12 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
-import { FadeInOut, Slide } from "@semcore/animation";
-import { Flex } from "@semcore/base-components";
+import { createComponent, sstyled, Component, assignProps } from "@semcore/core";
+import { Portal, FadeInOut, Flex, OutsideClick, Slide, PortalProvider } from "@semcore/base-components";
 import Button from "@semcore/button";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
 import { isAdvanceMode } from "@semcore/core/lib/utils/findComponent";
@@ -19,122 +13,123 @@ import usePreventScroll from "@semcore/core/lib/utils/use/usePreventScroll";
 import { cssVariableEnhance } from "@semcore/core/lib/utils/useCssVariable";
 import { useZIndexStacking, ZIndexStackingContextProvider } from "@semcore/core/lib/utils/zIndexStacking";
 import CloseIcon from "@semcore/icon/Close/l";
-import OutsideClick from "@semcore/outside-click";
-import Portal, { PortalProvider } from "@semcore/portal";
 import { Text } from "@semcore/typography";
 import React from "react";
 import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
 /*!__reshadow-styles__:"./style/modal.shadow.css"*/
-var style = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SWindow_5oobv_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));color:var(--intergalactic-text-primary, #191b23)}.___SWindow_5oobv_gg_:focus{outline:0}.___SWindow_5oobv_gg_ .___STitle_5oobv_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-4x, 16px)}.___SWindow_5oobv_gg_ .___STitle_5oobv_gg_.__color_5oobv_gg_{color:var(--color_5oobv)}.___SWindow_5oobv_gg_ .___SClose_5oobv_gg_{display:inline-flex;position:absolute;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SWindow_5oobv_gg_ .___SClose_5oobv_gg_.__ghost_5oobv_gg_{right:0;top:0}.___SWindow_5oobv_gg_.__ghost_5oobv_gg_{background:0 0;padding:0;box-shadow:none}.___SOverlayContentWrapper_5oobv_gg_{flex:1;max-width:100%;box-sizing:border-box;padding:var(--intergalactic-spacing-10x, 40px)}.___SOverlay_5oobv_gg_{display:flex;justify-content:center;flex-wrap:wrap;position:fixed;top:0;bottom:0;left:0;right:0;margin:0;background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;-webkit-overflow-scrolling:touch}.___SOverlay_5oobv_gg_ .___SOverlay_5oobv_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}@media (max-width:767px){.___SWindow_5oobv_gg_{min-width:60%}.___SOverlayContentWrapper_5oobv_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}",
+    ".___SWindow_1ij8i_gg_{position:relative;border-radius:var(--intergalactic-modal-rounded, 12px);background:var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x, 40px);box-shadow:var(--intergalactic-box-shadow-modal, 0px 3px 8px 0px rgba(25, 27, 35, 0.2));color:var(--intergalactic-text-primary, #191b23)}.___SWindow_1ij8i_gg_:focus{outline:0}.___SWindow_1ij8i_gg_ .___STitle_1ij8i_gg_{color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%);font-weight:var(--intergalactic-semi-bold, 600);margin-bottom:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-4x, 16px)}.___SWindow_1ij8i_gg_ .___STitle_1ij8i_gg_.__color_1ij8i_gg_{color:var(--color_1ij8i)}.___SWindow_1ij8i_gg_ .___SClose_1ij8i_gg_{display:inline-flex;position:absolute;right:var(--intergalactic-spacing-2x, 8px);top:var(--intergalactic-spacing-2x, 8px)}.___SWindow_1ij8i_gg_ .___SClose_1ij8i_gg_.__ghost_1ij8i_gg_{right:0;top:0}.___SWindow_1ij8i_gg_.__ghost_1ij8i_gg_{background:0 0;padding:0;box-shadow:none}.___SOverlayContentWrapper_1ij8i_gg_{flex:1;max-width:100%;box-sizing:border-box;padding:var(--intergalactic-spacing-10x, 40px)}.___SOverlay_1ij8i_gg_{display:flex;justify-content:center;flex-wrap:wrap;position:fixed;top:0;bottom:0;left:0;right:0;margin:0;background:var(--intergalactic-overlay-primary, rgba(25, 27, 35, 0.7));overflow:auto;-webkit-overflow-scrolling:touch}.___SOverlay_1ij8i_gg_ .___SOverlay_1ij8i_gg_{background:var(--intergalactic-overlay-secondary, rgba(25, 27, 35, 0.4))}@media (max-width:767px){.___SWindow_1ij8i_gg_{min-width:60%}.___SOverlayContentWrapper_1ij8i_gg_{padding:var(--intergalactic-spacing-3x, 12px)}}",
     /*__inner_css_end__*/
-    "5oobv_gg_"
+    "1ij8i_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SWindow": "___SWindow_5oobv_gg_",
-    "_ghost": "__ghost_5oobv_gg_",
-    "__SOverlayContentWrapper": "___SOverlayContentWrapper_5oobv_gg_",
-    "__STitle": "___STitle_5oobv_gg_",
-    "_color": "__color_5oobv_gg_",
-    "--color": "--color_5oobv",
-    "__SClose": "___SClose_5oobv_gg_",
-    "__SOverlay": "___SOverlay_5oobv_gg_"
+    "__SWindow": "___SWindow_1ij8i_gg_",
+    "_ghost": "__ghost_1ij8i_gg_",
+    "__SOverlayContentWrapper": "___SOverlayContentWrapper_1ij8i_gg_",
+    "__STitle": "___STitle_1ij8i_gg_",
+    "_color": "__color_1ij8i_gg_",
+    "--color": "--color_1ij8i",
+    "__SClose": "___SClose_1ij8i_gg_",
+    "__SOverlay": "___SOverlay_1ij8i_gg_"
   })
 );
-var ModalRoot = /* @__PURE__ */ (function(_Component) {
-  function ModalRoot2() {
-    var _this;
-    _classCallCheck(this, ModalRoot2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, ModalRoot2, [].concat(args));
-    _defineProperty(_this, "state", {
+class ModalRoot extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
       hasTitle: false
     });
-    _defineProperty(_this, "handleKeyDown", function(e) {
+    _defineProperty(this, "handleKeyDown", (e) => {
       if (e.key === "Escape") {
         e.stopPropagation();
-        fire(_this, "onClose", "onEscape", e);
+        fire(this, "onClose", "onEscape", e);
       }
     });
-    _defineProperty(_this, "handleIconCloseClick", function(e) {
-      fire(_this, "onClose", "onCloseClick", e);
+    _defineProperty(this, "handleIconCloseClick", (e) => {
+      fire(this, "onClose", "onCloseClick", e);
     });
-    _defineProperty(_this, "handleOutsideClick", function(e) {
-      fire(_this, "onClose", "onOutsideClick", e);
+    _defineProperty(this, "handleOutsideClick", (e) => {
+      fire(this, "onClose", "onOutsideClick", e);
     });
-    return _this;
   }
-  _inherits(ModalRoot2, _Component);
-  return _createClass(ModalRoot2, [{
-    key: "getOverlayProps",
-    value: function getOverlayProps() {
-      var _this$asProps = this.asProps, duration = _this$asProps.duration, visible = _this$asProps.visible, animationsDisabled = _this$asProps.animationsDisabled, disablePreventScroll = _this$asProps.disablePreventScroll;
-      return {
-        duration,
-        visible,
-        onOutsideClick: this.handleOutsideClick,
-        animationsDisabled,
-        disablePreventScroll
-      };
-    }
-  }, {
-    key: "getWindowProps",
-    value: function getWindowProps() {
-      var _this$asProps2 = this.asProps, visible = _this$asProps2.visible, closable = _this$asProps2.closable, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid, duration = _this$asProps2.duration, animationsDisabled = _this$asProps2.animationsDisabled;
-      var hasTitle = this.state.hasTitle;
-      return {
-        visible,
-        closable,
-        "onKeyDown": this.handleKeyDown,
-        "aria-label": hasTitle ? void 0 : getI18nText("title"),
-        "aria-labelledby": hasTitle ? "igc-".concat(uid, "-title") : void 0,
-        duration,
-        animationsDisabled
-      };
-    }
-  }, {
-    key: "getCloseProps",
-    value: function getCloseProps() {
-      var _this$asProps3 = this.asProps, getI18nText = _this$asProps3.getI18nText, ghost = _this$asProps3.ghost;
-      return {
-        onClick: this.handleIconCloseClick,
-        getI18nText,
-        ghost
-      };
-    }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps() {
-      var _this2 = this;
-      var uid = this.asProps.uid;
-      var setHasTitle = function setHasTitle2() {
-        return _this2.setState({
-          hasTitle: true
-        });
-      };
-      return {
-        id: "igc-".concat(uid, "-title"),
-        setHasTitle
-      };
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps;
-      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, disablePortal = _this$asProps4.disablePortal, forcedAdvancedMode = _this$asProps4.forcedAdvancedMode, ignorePortalsStacking = _this$asProps4.ignorePortalsStacking;
-      var advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Modal.Overlay.displayName, Modal.Window.displayName]);
-      return /* @__PURE__ */ React.createElement(Portal, {
-        disablePortal,
-        ignorePortalsStacking
-      }, advancedMode ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(Modal.Overlay, null, /* @__PURE__ */ React.createElement(Modal.Window, assignProps({}, _ref))));
-    }
-  }]);
-})(Component);
+  getOverlayProps() {
+    const {
+      duration,
+      visible,
+      animationsDisabled,
+      disablePreventScroll
+    } = this.asProps;
+    return {
+      duration,
+      visible,
+      onOutsideClick: this.handleOutsideClick,
+      animationsDisabled,
+      disablePreventScroll
+    };
+  }
+  getWindowProps() {
+    const {
+      visible,
+      closable,
+      getI18nText,
+      uid,
+      duration,
+      animationsDisabled
+    } = this.asProps;
+    const {
+      hasTitle
+    } = this.state;
+    return {
+      visible,
+      closable,
+      "onKeyDown": this.handleKeyDown,
+      "aria-label": hasTitle ? void 0 : getI18nText("title"),
+      "aria-labelledby": hasTitle ? `igc-${uid}-title` : void 0,
+      duration,
+      animationsDisabled
+    };
+  }
+  getCloseProps() {
+    const {
+      getI18nText,
+      ghost
+    } = this.asProps;
+    return {
+      onClick: this.handleIconCloseClick,
+      getI18nText,
+      ghost
+    };
+  }
+  getTitleProps() {
+    const {
+      uid
+    } = this.asProps;
+    const setHasTitle = () => this.setState({
+      hasTitle: true
+    });
+    return {
+      id: `igc-${uid}-title`,
+      setHasTitle
+    };
+  }
+  render() {
+    var _ref = this.asProps;
+    const {
+      Children,
+      disablePortal,
+      forcedAdvancedMode,
+      ignorePortalsStacking
+    } = this.asProps;
+    const advancedMode = forcedAdvancedMode || isAdvanceMode(Children, [Modal.Overlay.displayName, Modal.Window.displayName]);
+    return /* @__PURE__ */ React.createElement(Portal, {
+      disablePortal,
+      ignorePortalsStacking
+    }, advancedMode ? /* @__PURE__ */ React.createElement(Children, null) : /* @__PURE__ */ React.createElement(Modal.Overlay, null, /* @__PURE__ */ React.createElement(Modal.Window, assignProps({}, _ref))));
+  }
+}
 _defineProperty(ModalRoot, "displayName", "Modal");
 _defineProperty(ModalRoot, "style", style);
 _defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement(), cssVariableEnhance({
@@ -151,20 +146,28 @@ _defineProperty(ModalRoot, "defaultProps", {
 });
 function Window(props) {
   var _ref2 = arguments[0], _ref6;
-  var SWindow = Slide;
-  var Children = props.Children, styles = props.styles, visible = props.visible, closable = props.closable, duration = props.duration;
-  var windowRef = React.useRef(null);
+  const SWindow = Slide;
+  const {
+    Children,
+    styles,
+    visible,
+    closable,
+    duration
+  } = props;
+  const windowRef = React.useRef(null);
   useFocusLock(windowRef, "enforced", "auto", !visible, true);
-  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SWindow, _ref6.cn("SWindow", _objectSpread({}, assignProps({
-    "initialAnimation": true,
-    "slideOrigin": "top",
-    "visible": visible,
-    "role": "dialog",
-    "aria-modal": true,
-    "duration": duration,
-    "ref": windowRef,
-    "tabIndex": -1
-  }, _ref2))), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref6.cn("ZIndexStackingContextProvider", {
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SWindow, _ref6.cn("SWindow", {
+    ...assignProps({
+      "initialAnimation": true,
+      "slideOrigin": "top",
+      "visible": visible,
+      "role": "dialog",
+      "aria-modal": true,
+      "duration": duration,
+      "ref": windowRef,
+      "tabIndex": -1
+    }, _ref2)
+  }), /* @__PURE__ */ React.createElement(ZIndexStackingContextProvider, _ref6.cn("ZIndexStackingContextProvider", {
     "designToken": "z-index-modal"
   }), /* @__PURE__ */ React.createElement(PortalProvider, _ref6.cn("PortalProvider", {
     "value": windowRef
@@ -172,16 +175,23 @@ function Window(props) {
 }
 function Overlay(props) {
   var _ref3 = arguments[0], _ref7;
-  var SOverlay = FadeInOut;
-  var SOverlayContentWrapper = Flex;
-  var Children = props.Children, styles = props.styles, onOutsideClick = props.onOutsideClick, visible = props.visible;
-  var overlayContentWrapperRef = React.useRef(null);
+  const SOverlay = FadeInOut;
+  const SOverlayContentWrapper = Flex;
+  const {
+    Children,
+    styles,
+    onOutsideClick,
+    visible
+  } = props;
+  const overlayContentWrapperRef = React.useRef(null);
   usePreventScroll(visible, props.disablePreventScroll);
   useContextTheme(overlayContentWrapperRef, visible);
-  var zIndex = useZIndexStacking("z-index-modal");
-  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SOverlay, _ref7.cn("SOverlay", _objectSpread({}, assignProps({
-    "zIndex": zIndex
-  }, _ref3))), /* @__PURE__ */ React.createElement(SOverlayContentWrapper, _ref7.cn("SOverlayContentWrapper", {
+  const zIndex = useZIndexStacking("z-index-modal");
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SOverlay, _ref7.cn("SOverlay", {
+    ...assignProps({
+      "zIndex": zIndex
+    }, _ref3)
+  }), /* @__PURE__ */ React.createElement(SOverlayContentWrapper, _ref7.cn("SOverlayContentWrapper", {
     "data-ui-name": "Modal.Overlay.ContentWrapper",
     "ref": overlayContentWrapperRef
   }), /* @__PURE__ */ React.createElement(OutsideClick, _ref7.cn("OutsideClick", {
@@ -191,14 +201,21 @@ function Overlay(props) {
 }
 function Close(props) {
   var _ref4 = arguments[0], _ref8;
-  var SClose = Button;
-  var Children = props.Children, hasChildren = props.children, getI18nText = props.getI18nText, ghost = props.ghost;
-  return _ref8 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, assignProps({
-    "use": "tertiary",
-    "size": "l",
-    "theme": ghost ? "invert" : "muted",
-    "aria-label": getI18nText("close")
-  }, _ref4))), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})) : /* @__PURE__ */ React.createElement(Button.Addon, {
+  const SClose = Button;
+  const {
+    Children,
+    children: hasChildren,
+    getI18nText,
+    ghost
+  } = props;
+  return _ref8 = sstyled(props.styles), /* @__PURE__ */ React.createElement(SClose, _ref8.cn("SClose", {
+    ...assignProps({
+      "use": "tertiary",
+      "size": "l",
+      "theme": ghost ? "invert" : "muted",
+      "aria-label": getI18nText("close")
+    }, _ref4)
+  }), hasChildren ? /* @__PURE__ */ React.createElement(Children, _ref8.cn("Children", {})) : /* @__PURE__ */ React.createElement(Button.Addon, {
     ml: "7px",
     mr: "7px"
   }, /* @__PURE__ */ React.createElement(CloseIcon, _ref8.cn("CloseIcon", {
@@ -207,18 +224,22 @@ function Close(props) {
 }
 function Title(props) {
   var _ref5 = arguments[0], _ref9;
-  var setHasTitle = props.setHasTitle, styles = props.styles, color = props.color;
-  var STitle = Text;
-  var resolveColor = useColorResolver();
-  React.useEffect(function() {
-    return setHasTitle();
-  });
-  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref9.cn("STitle", _objectSpread({}, assignProps({
-    "tag": "h2",
-    "use:color": resolveColor(color)
-  }, _ref5))));
+  const {
+    setHasTitle,
+    styles,
+    color
+  } = props;
+  const STitle = Text;
+  const resolveColor = useColorResolver();
+  React.useEffect(() => setHasTitle());
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref9.cn("STitle", {
+    ...assignProps({
+      "tag": "h2",
+      "use:color": resolveColor(color)
+    }, _ref5)
+  }));
 }
-var Modal = createComponent(ModalRoot, {
+const Modal = createComponent(ModalRoot, {
   Window,
   Overlay,
   Close,

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

@@ -12,7 +12,7 @@ import sv from "./sv.json.mjs";
 import tr from "./tr.json.mjs";
 import vi from "./vi.json.mjs";
 import zh from "./zh.json.mjs";
-var localizedMessages = {
+const localizedMessages = {
   de,
   en,
   es,

package/lib/types/index.d.ts

@@ -1,13 +1,9 @@
-import type { FadeInOutProps, SlideProps } from '@semcore/animation';
+import type { FadeInOutProps, SlideProps, Box, BoxProps, PortalProps } from '@semcore/base-components';
 import type Button from '@semcore/button';
-import type { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
-import type { Box, BoxProps } from '@semcore/flex-box';
-import type { PortalProps } from '@semcore/portal';
+import type { PropGetterFn, Intergalactic } from '@semcore/core';
 import type { TextProps } from '@semcore/typography';
 import type React from 'react';
 
-/** @deprecated */
-export interface IModalProps extends ModalProps, UnknownProperties {}
 export type ModalProps = PortalProps &
   BoxProps &
   FadeInOutProps & {
@@ -39,12 +35,8 @@ export type ModalProps = PortalProps &
     ghost?: boolean;
   };
 
-/** @deprecated */
-export interface IWindowProps extends WindowProps, UnknownProperties {}
 export type WindowProps = BoxProps & SlideProps & {};
 
-/** @deprecated */
-export interface IModalContext extends ModalContext, UnknownProperties {}
 export type ModalContext = {
   getOverlayProps: PropGetterFn;
   getWindowProps: PropGetterFn;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/modal",
   "description": "Semrush Modal Component",
-  "version": "16.1.13",
+  "version": "17.0.0-prerelease.17",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,16 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/button": "16.0.12",
-    "@semcore/icon": "16.7.3",
-    "@semcore/typography": "16.3.2",
-    "@semcore/animation": "16.0.7",
-    "@semcore/flex-box": "16.0.11",
-    "@semcore/outside-click": "16.0.11",
-    "@semcore/portal": "16.0.11"
+    "@semcore/button": "^16.0.13-prerelease.17",
+    "@semcore/typography": "^16.3.3-prerelease.17"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^17.0.0-prerelease.17",
+    "@semcore/icon": "^16.7.2-prerelease.17"
   },
   "repository": {
     "type": "git",
@@ -31,8 +27,10 @@
     "directory": "semcore/modal"
   },
   "devDependencies": {
+    "@semcore/core": "17.0.0-prerelease.17",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/core": "16.5.1"
+    "@semcore/base-components": "17.0.0-prerelease.17",
+    "@semcore/icon": "16.7.2-prerelease.17"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js && pnpm vite build"