@semcore/modal 3.3.5 → 3.4.0

package/CHANGELOG.md

@@ -2,11 +2,19 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [3.3.5] - 2023-01-10
+## [3.4.0] - 2023-01-18
+
+### Added
+
+- Added `Modal.Title` component and `aria-labelledby` property for better a11y.
+
+## [3.3.6] - 2023-01-11
 
 ### Changed
 
-- Version patch update due to children dependencies update (`@semcore/icon` [3.5.2 ~> 3.6.0]).
+- Version patch update due to children dependencies update (`@semcore/animation` [1.8.7 ~> 1.8.8]).
+
+## [3.3.5] - 2023-01-11
 
 ## [3.3.4] - 2023-01-10
 

package/lib/cjs/Modal.js

@@ -55,6 +55,10 @@ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynam
 
 var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
 
+var _typography = require("@semcore/typography");
+
+var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
+
 var _excluded = ["tag"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -74,15 +78,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SWindow_1v2dg_gg_{position:relative;border-radius:var(--intergalactic-rounded-large,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_1v2dg_gg_:focus{outline:none}.___SOverlay_1v2dg_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x,40px);background:var(--intergalactic-overlay-primary,rgba(25,27,35,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_1v2dg_gg_ .___SOverlay_1v2dg_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_1v2dg_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1v2dg_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_1v2dg_gg_.__keyboardFocused_1v2dg_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_1v2dg_gg_{min-width:60%}.___SOverlay_1v2dg_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
+".___SWindow_19pry_gg_{position:relative;border-radius:var(--intergalactic-rounded-large,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_19pry_gg_:focus{outline:none}.___SOverlay_19pry_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x,40px);background:var(--intergalactic-overlay-primary,rgba(25,27,35,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_19pry_gg_ .___SOverlay_19pry_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_19pry_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_19pry_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_19pry_gg_.__keyboardFocused_19pry_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STitle_19pry_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)}@media (max-width:767px){.___SWindow_19pry_gg_{min-width:60%}.___SOverlay_19pry_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
 /*__inner_css_end__*/
-, "1v2dg_gg_")
+, "19pry_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SWindow": "___SWindow_1v2dg_gg_",
-  "__SOverlay": "___SOverlay_1v2dg_gg_",
-  "__SClose": "___SClose_1v2dg_gg_",
-  "_keyboardFocused": "__keyboardFocused_1v2dg_gg_"
+  "__SWindow": "___SWindow_19pry_gg_",
+  "__SOverlay": "___SOverlay_19pry_gg_",
+  "__SClose": "___SClose_19pry_gg_",
+  "_keyboardFocused": "__keyboardFocused_19pry_gg_",
+  "__STitle": "___STitle_19pry_gg_"
 });
 
 var ModalRoot = /*#__PURE__*/function (_Component) {
@@ -100,6 +105,9 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      hasTitle: false
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (e) {
       if (e.key === 'Escape') {
         e.stopPropagation();
@@ -133,12 +141,15 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
       var _this$asProps2 = this.asProps,
           visible = _this$asProps2.visible,
           closable = _this$asProps2.closable,
-          getI18nText = _this$asProps2.getI18nText;
+          getI18nText = _this$asProps2.getI18nText,
+          uid = _this$asProps2.uid;
+      var hasTitle = this.state.hasTitle;
       return {
         visible: visible,
         closable: closable,
         onKeyDown: this.handleKeyDown,
-        getI18nText: getI18nText
+        'aria-label': hasTitle ? undefined : getI18nText('title'),
+        'aria-labelledby': hasTitle ? "igc-".concat(uid, "-title") : undefined
       };
     }
   }, {
@@ -150,6 +161,24 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
         getI18nText: getI18nText
       };
     }
+  }, {
+    key: "getTitleProps",
+    value: function getTitleProps() {
+      var _this2 = this;
+
+      var uid = this.asProps.uid;
+
+      var setTitle = function setTitle() {
+        return _this2.setState({
+          hasTitle: true
+        });
+      };
+
+      return {
+        id: "igc-".concat(uid, "-title"),
+        setTitle: setTitle
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -168,7 +197,7 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
 
 (0, _defineProperty2["default"])(ModalRoot, "displayName", 'Modal');
 (0, _defineProperty2["default"])(ModalRoot, "style", style);
-(0, _defineProperty2["default"])(ModalRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2["default"])(ModalRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])()]);
 (0, _defineProperty2["default"])(ModalRoot, "defaultProps", {
   duration: 200,
   closable: true,
@@ -176,9 +205,9 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
   locale: 'en'
 });
 
-var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, ref) {
-  var tag = _ref8.tag,
-      other = (0, _objectWithoutProperties2["default"])(_ref8, _excluded);
+var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (_ref10, ref) {
+  var tag = _ref10.tag,
+      other = (0, _objectWithoutProperties2["default"])(_ref10, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], (0, _extends2["default"])({
     ref: ref,
     as: tag,
@@ -188,33 +217,31 @@ var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (_ref8
 
 function Window(props) {
   var _ref2 = arguments[0],
-      _ref5;
+      _ref6;
 
   var SWindow = FocusLockWrapper;
   var Children = props.Children,
       styles = props.styles,
       visible = props.visible,
-      closable = props.closable,
-      getI18nText = props.getI18nText;
+      closable = props.closable;
   var windowRef = (0, _react.useRef)(null);
   if (!visible) return null;
-  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SWindow, _ref5.cn("SWindow", _objectSpread({}, (0, _core.assignProps)({
+  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SWindow, _ref6.cn("SWindow", _objectSpread({}, (0, _core.assignProps)({
     "tag": _flexBox.Box,
     "ref": windowRef,
     "returnFocus": true,
     "tabIndex": -1,
     "autoFocus": true,
     "role": "dialog",
-    "aria-label": getI18nText('title'),
     "aria-modal": true
-  }, _ref2))), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref5.cn("PortalProvider", {
+  }, _ref2))), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref6.cn("PortalProvider", {
     "value": windowRef
-  }), closable && /*#__PURE__*/_react["default"].createElement(Modal.Close, null), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))));
+  }), closable && /*#__PURE__*/_react["default"].createElement(Modal.Close, null), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
 }
 
 function Overlay(props) {
   var _ref3 = arguments[0],
-      _ref6;
+      _ref7;
 
   var SOverlay = _animation.FadeInOut;
   var Children = props.Children,
@@ -223,36 +250,53 @@ function Overlay(props) {
       visible = props.visible;
   var overlayRef = (0, _react.useRef)(null);
   (0, _usePreventScroll["default"])(visible);
-  return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref6.cn("SOverlay", _objectSpread({}, (0, _core.assignProps)({
+  return _ref7 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SOverlay, _ref7.cn("SOverlay", _objectSpread({}, (0, _core.assignProps)({
     "ref": overlayRef
-  }, _ref3))), /*#__PURE__*/_react["default"].createElement(_outsideClick["default"], _ref6.cn("OutsideClick", {
+  }, _ref3))), /*#__PURE__*/_react["default"].createElement(_outsideClick["default"], _ref7.cn("OutsideClick", {
     "root": overlayRef,
     "onOutsideClick": onOutsideClick
-  }), /*#__PURE__*/_react["default"].createElement(Children, _ref6.cn("Children", {}))));
+  }), /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {}))));
 }
 
 function Close(props) {
   var _ref4 = arguments[0],
-      _ref7;
+      _ref8;
 
   var SClose = _flexBox.Box;
   var Children = props.Children,
       hasChildren = props.children,
       getI18nText = props.getI18nText;
-  return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref7.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
+  return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
     "tag": "button",
     "tabIndex": 0,
     "aria-label": getI18nText('close')
-  }, _ref4))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_l["default"], _ref7.cn("CloseIcon", {
+  }, _ref4))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref8.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_l["default"], _ref8.cn("CloseIcon", {
     "title": getI18nText('close')
   })));
 }
 
 Close.enhance = [(0, _keyboardFocusEnhance["default"])()];
+
+function Title(props) {
+  var _ref5 = arguments[0],
+      _ref9;
+
+  var setTitle = props.setTitle,
+      styles = props.styles;
+  var STitle = _typography.Text;
+  (0, _react.useEffect)(function () {
+    return setTitle();
+  });
+  return _ref9 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STitle, _ref9.cn("STitle", _objectSpread({}, (0, _core.assignProps)({
+    "tag": "h2"
+  }, _ref5))));
+}
+
 var Modal = (0, _core["default"])(ModalRoot, {
   Window: Window,
   Overlay: Overlay,
-  Close: Close
+  Close: Close,
+  Title: Title
 });
 var _default = Modal;
 exports["default"] = _default;

package/lib/cjs/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["ModalRoot","e","key","stopPropagation","fire","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","isAdvanceMode","Modal","Overlay","displayName","Window","Component","style","i18nEnhance","localizedMessages","i18n","locale","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","useRef","sstyled","Box","SOverlay","FadeInOut","overlayRef","usePreventScroll","Close","SClose","hasChildren","children","enhance","keyboardFocusEnhance","createComponent"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nclass ModalRoot extends Component {\n  static displayName = 'Modal';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable, getI18nText } = this.asProps;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n      getI18nText,\n    };\n  }\n\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n\n    return {\n      onClick: this.handleIconCloseClick,\n      getI18nText,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      Modal.Overlay.displayName,\n      Modal.Window.displayName,\n    ]);\n\n    return (\n      <Portal disablePortal={disablePortal}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Modal.Overlay>\n            <Root render={Modal.Window} />\n          </Modal.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nconst FocusLockWrapper = React.forwardRef(function ({ tag, ...other }, ref) {\n  return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n  const SWindow = Root;\n  const { Children, styles, visible, closable, getI18nText } = props;\n  const windowRef = useRef(null);\n\n  if (!visible) return null;\n\n  return sstyled(styles)(\n    <SWindow\n      render={FocusLockWrapper}\n      tag={Box}\n      ref={windowRef}\n      returnFocus={true}\n      tabIndex={-1}\n      autoFocus={true}\n      role=\"dialog\"\n      aria-label={getI18nText('title')}\n      aria-modal={true}\n    >\n      <PortalProvider value={windowRef}>\n        {closable && <Modal.Close />}\n        <Children />\n      </PortalProvider>\n    </SWindow>,\n  );\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const { Children, styles, onOutsideClick, visible } = props;\n  const overlayRef = useRef(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { Children, children: hasChildren, getI18nText } = props;\n  return sstyled(props.styles)(\n    <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n      {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n    </SClose>,\n  );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n});\n\nexport default Modal;\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["ModalRoot","hasTitle","e","key","stopPropagation","fire","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","uid","state","onKeyDown","handleKeyDown","undefined","onClick","handleIconCloseClick","setTitle","setState","id","Children","disablePortal","advanceMode","isAdvanceMode","Modal","Overlay","displayName","Window","Component","style","i18nEnhance","localizedMessages","uniqueIDEnhancement","i18n","locale","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","useRef","sstyled","Box","SOverlay","FadeInOut","overlayRef","usePreventScroll","Close","SClose","hasChildren","children","enhance","keyboardFocusEnhance","Title","STitle","Text","useEffect","createComponent"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Text } from '@semcore/typography';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nclass ModalRoot extends Component {\n  static displayName = 'Modal';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  state = { hasTitle: false };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable, getI18nText, uid } = this.asProps;\n    const { hasTitle } = this.state;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n      'aria-label': hasTitle ? undefined : getI18nText('title'),\n      'aria-labelledby': hasTitle ? `igc-${uid}-title` : undefined,\n    };\n  }\n\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n\n    return {\n      onClick: this.handleIconCloseClick,\n      getI18nText,\n    };\n  }\n\n  getTitleProps() {\n    const { uid } = this.asProps;\n    const setTitle = () => this.setState({ hasTitle: true });\n\n    return {\n      id: `igc-${uid}-title`,\n      setTitle,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      Modal.Overlay.displayName,\n      Modal.Window.displayName,\n    ]);\n\n    return (\n      <Portal disablePortal={disablePortal}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Modal.Overlay>\n            <Root render={Modal.Window} />\n          </Modal.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nconst FocusLockWrapper = React.forwardRef(function ({ tag, ...other }, ref) {\n  return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n  const SWindow = Root;\n  const { Children, styles, visible, closable } = props;\n  const windowRef = useRef(null);\n\n  if (!visible) return null;\n\n  return sstyled(styles)(\n    <SWindow\n      render={FocusLockWrapper}\n      tag={Box}\n      ref={windowRef}\n      returnFocus={true}\n      tabIndex={-1}\n      autoFocus={true}\n      role=\"dialog\"\n      aria-modal={true}\n    >\n      <PortalProvider value={windowRef}>\n        {closable && <Modal.Close />}\n        <Children />\n      </PortalProvider>\n    </SWindow>,\n  );\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const { Children, styles, onOutsideClick, visible } = props;\n  const overlayRef = useRef(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { Children, children: hasChildren, getI18nText } = props;\n  return sstyled(props.styles)(\n    <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n      {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n    </SClose>,\n  );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n  const { setTitle, styles } = props;\n  const STitle = Root;\n\n  useEffect(() => setTitle());\n\n  return sstyled(styles)(<STitle render={Text} tag=\"h2\" />);\n}\n\nconst Modal = createComponent(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n  Title,\n});\n\nexport default Modal;\n"],"mappings":"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"}

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n  /** Duration of animation, ms\n   * @default 200\n   */\n  duration?: number;\n  /** This property is responsible for the visibility of the modal window */\n  visible?: boolean;\n  /** Function called when the component is hidden */\n  onClose?: (\n    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n    e?: React.MouseEvent | React.KeyboardEvent,\n  ) => void;\n  /** Displaying the close button(x) in the upper-right corner of the modal dialog\n   * @default true\n   * */\n  closable?: boolean;\n  locale?: string;\n}\n\nexport interface IModalContext {\n  getOverlayProps: PropGetterFn;\n  getWindowProps: PropGetterFn;\n  getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n  Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n};\n\nexport default Modal;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { ITextProps } from '@semcore/typography';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n  /** Duration of animation, ms\n   * @default 200\n   */\n  duration?: number;\n  /** This property is responsible for the visibility of the modal window */\n  visible?: boolean;\n  /** Function called when the component is hidden */\n  onClose?: (\n    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n    e?: React.MouseEvent | React.KeyboardEvent,\n  ) => void;\n  /** Displaying the close button(x) in the upper-right corner of the modal dialog\n   * @default true\n   * */\n  closable?: boolean;\n  locale?: string;\n}\n\nexport interface IModalContext {\n  getOverlayProps: PropGetterFn;\n  getWindowProps: PropGetterFn;\n  getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n  Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Title: <T>(props: ITextProps & T) => ReturnEl;\n};\n\nexport default Modal;\n"],"mappings":""}

package/lib/cjs/modal.vo-test.js

@@ -68,7 +68,7 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 
           case 25:
             _context.t3 = _context.sent;
-            (0, _context.t2)(_context.t3).toBe('Modal window web dialog with 5 items Close button');
+            (0, _context.t2)(_context.t3).toBe('Do you want to save your changes? web dialog with 5 items Close button');
             _context.next = 29;
             return voiceOver.next();
 

package/lib/cjs/modal.vo-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vo-test.js","names":["test","page","pureVoiceOver","voiceOver","standPath","resolvePath","__dirname","reportPath","e2eStandToHtml","htmlContent","setContent","makeVoiceOverReporter","getReport","interact","expect","itemText","toBe","act","lastSpokenPhrase","next","getReportHeader","report","writeFile"],"sources":["../../src/modal.vo-test.ts"],"sourcesContent":["import { expect } from '@playwright/test';\nimport { voTest as test } from '@guidepup/playwright';\nimport { e2eStandToHtml } from '@semcore/jest-preset-ui/e2e-stand';\nimport { resolve as resolvePath } from 'path';\nimport { writeFile } from 'fs/promises';\nimport { getReportHeader, makeVoiceOverReporter } from '@semcore/jest-preset-ui/vo-reporter';\n\ntest('Users can interact with Modal via VoiceOver', async ({ page, voiceOver: pureVoiceOver }) => {\n  const standPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/examples/modal.jsx',\n  );\n  const reportPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/modal-a11y-report.md',\n  );\n  const htmlContent = await e2eStandToHtml(standPath, 'en');\n\n  await page.setContent(htmlContent);\n  const { voiceOver, getReport } = await makeVoiceOverReporter(pureVoiceOver);\n  await voiceOver.interact();\n\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n  await voiceOver.act();\n  expect(await voiceOver.lastSpokenPhrase()).toBe(\n    'Modal window web dialog with 5 items Close button',\n  );\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Do you want to save your changes? heading level 2');\n  await voiceOver.next();\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Save changes button');\n  await voiceOver.act();\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n\n  const report = (await getReportHeader()) + '\\n\\n' + (await getReport(standPath));\n\n  await writeFile(reportPath, report);\n});\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;+CAJA,oJ;;AAMA,IAAAA,kBAAA,EAAK,6CAAL;EAAA,wFAAoD;IAAA;;IAAA;MAAA;QAAA;UAAA;YAASC,IAAT,QAASA,IAAT,EAA0BC,aAA1B,QAAeC,SAAf;YAC5CC,SAD4C,GAChC,IAAAC,aAAA,EAChBC,SADgB,EAEhB,2DAFgB,CADgC;YAK5CC,UAL4C,GAK/B,IAAAF,aAAA,EACjBC,SADiB,EAEjB,6DAFiB,CAL+B;YAAA;YAAA,OASxB,IAAAE,wBAAA,EAAeJ,SAAf,EAA0B,IAA1B,CATwB;;UAAA;YAS5CK,WAT4C;YAAA;YAAA,OAW5CR,IAAI,CAACS,UAAL,CAAgBD,WAAhB,CAX4C;;UAAA;YAAA;YAAA,OAYX,IAAAE,iCAAA,EAAsBT,aAAtB,CAZW;;UAAA;YAAA;YAY1CC,SAZ0C,yBAY1CA,SAZ0C;YAY/BS,SAZ+B,yBAY/BA,SAZ+B;YAAA;YAAA,OAa5CT,SAAS,CAACU,QAAV,EAb4C;;UAAA;YAAA,cAelDC,YAfkD;YAAA;YAAA,OAerCX,SAAS,CAACY,QAAV,EAfqC;;UAAA;YAAA;YAAA,8BAefC,IAfe,CAeV,mBAfU;YAAA;YAAA,OAgB5Cb,SAAS,CAACc,GAAV,EAhB4C;;UAAA;YAAA,cAiBlDH,YAjBkD;YAAA;YAAA,OAiBrCX,SAAS,CAACe,gBAAV,EAjBqC;;UAAA;YAAA;YAAA,8BAiBPF,IAjBO,CAkBhD,mDAlBgD;YAAA;YAAA,OAoB5Cb,SAAS,CAACgB,IAAV,EApB4C;;UAAA;YAAA,cAqBlDL,YArBkD;YAAA;YAAA,OAqBrCX,SAAS,CAACY,QAAV,EArBqC;;UAAA;YAAA;YAAA,8BAqBfC,IArBe,CAqBV,mDArBU;YAAA;YAAA,OAsB5Cb,SAAS,CAACgB,IAAV,EAtB4C;;UAAA;YAAA;YAAA,OAuB5ChB,SAAS,CAACgB,IAAV,EAvB4C;;UAAA;YAAA,cAwBlDL,YAxBkD;YAAA;YAAA,OAwBrCX,SAAS,CAACY,QAAV,EAxBqC;;UAAA;YAAA;YAAA,8BAwBfC,IAxBe,CAwBV,qBAxBU;YAAA;YAAA,OAyB5Cb,SAAS,CAACc,GAAV,EAzB4C;;UAAA;YAAA,cA0BlDH,YA1BkD;YAAA;YAAA,OA0BrCX,SAAS,CAACY,QAAV,EA1BqC;;UAAA;YAAA;YAAA,8BA0BfC,IA1Be,CA0BV,mBA1BU;YAAA;YAAA,OA4B5B,IAAAI,2BAAA,GA5B4B;;UAAA;YAAA;YAAA,8BA4BP,MA5BO;YAAA;YAAA,OA4BSR,SAAS,CAACR,SAAD,CA5BlB;;UAAA;YAAA;YA4B5CiB,MA5B4C;YAAA;YAAA,OA8B5C,IAAAC,mBAAA,EAAUf,UAAV,EAAsBc,MAAtB,CA9B4C;;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA;EAAA,CAApD;;EAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"modal.vo-test.js","names":["test","page","pureVoiceOver","voiceOver","standPath","resolvePath","__dirname","reportPath","e2eStandToHtml","htmlContent","setContent","makeVoiceOverReporter","getReport","interact","expect","itemText","toBe","act","lastSpokenPhrase","next","getReportHeader","report","writeFile"],"sources":["../../src/modal.vo-test.ts"],"sourcesContent":["import { expect } from '@playwright/test';\nimport { voTest as test } from '@guidepup/playwright';\nimport { e2eStandToHtml } from '@semcore/jest-preset-ui/e2e-stand';\nimport { resolve as resolvePath } from 'path';\nimport { writeFile } from 'fs/promises';\nimport { getReportHeader, makeVoiceOverReporter } from '@semcore/jest-preset-ui/vo-reporter';\n\ntest('Users can interact with Modal via VoiceOver', async ({ page, voiceOver: pureVoiceOver }) => {\n  const standPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/examples/modal.jsx',\n  );\n  const reportPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/modal-a11y-report.md',\n  );\n  const htmlContent = await e2eStandToHtml(standPath, 'en');\n\n  await page.setContent(htmlContent);\n  const { voiceOver, getReport } = await makeVoiceOverReporter(pureVoiceOver);\n  await voiceOver.interact();\n\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n  await voiceOver.act();\n  expect(await voiceOver.lastSpokenPhrase()).toBe(\n    'Do you want to save your changes? web dialog with 5 items Close button',\n  );\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Do you want to save your changes? heading level 2');\n  await voiceOver.next();\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Save changes button');\n  await voiceOver.act();\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n\n  const report = (await getReportHeader()) + '\\n\\n' + (await getReport(standPath));\n\n  await writeFile(reportPath, report);\n});\n"],"mappings":";;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;+CAJA,oJ;;AAMA,IAAAA,kBAAA,EAAK,6CAAL;EAAA,wFAAoD;IAAA;;IAAA;MAAA;QAAA;UAAA;YAASC,IAAT,QAASA,IAAT,EAA0BC,aAA1B,QAAeC,SAAf;YAC5CC,SAD4C,GAChC,IAAAC,aAAA,EAChBC,SADgB,EAEhB,2DAFgB,CADgC;YAK5CC,UAL4C,GAK/B,IAAAF,aAAA,EACjBC,SADiB,EAEjB,6DAFiB,CAL+B;YAAA;YAAA,OASxB,IAAAE,wBAAA,EAAeJ,SAAf,EAA0B,IAA1B,CATwB;;UAAA;YAS5CK,WAT4C;YAAA;YAAA,OAW5CR,IAAI,CAACS,UAAL,CAAgBD,WAAhB,CAX4C;;UAAA;YAAA;YAAA,OAYX,IAAAE,iCAAA,EAAsBT,aAAtB,CAZW;;UAAA;YAAA;YAY1CC,SAZ0C,yBAY1CA,SAZ0C;YAY/BS,SAZ+B,yBAY/BA,SAZ+B;YAAA;YAAA,OAa5CT,SAAS,CAACU,QAAV,EAb4C;;UAAA;YAAA,cAelDC,YAfkD;YAAA;YAAA,OAerCX,SAAS,CAACY,QAAV,EAfqC;;UAAA;YAAA;YAAA,8BAefC,IAfe,CAeV,mBAfU;YAAA;YAAA,OAgB5Cb,SAAS,CAACc,GAAV,EAhB4C;;UAAA;YAAA,cAiBlDH,YAjBkD;YAAA;YAAA,OAiBrCX,SAAS,CAACe,gBAAV,EAjBqC;;UAAA;YAAA;YAAA,8BAiBPF,IAjBO,CAkBhD,wEAlBgD;YAAA;YAAA,OAoB5Cb,SAAS,CAACgB,IAAV,EApB4C;;UAAA;YAAA,cAqBlDL,YArBkD;YAAA;YAAA,OAqBrCX,SAAS,CAACY,QAAV,EArBqC;;UAAA;YAAA;YAAA,8BAqBfC,IArBe,CAqBV,mDArBU;YAAA;YAAA,OAsB5Cb,SAAS,CAACgB,IAAV,EAtB4C;;UAAA;YAAA;YAAA,OAuB5ChB,SAAS,CAACgB,IAAV,EAvB4C;;UAAA;YAAA,cAwBlDL,YAxBkD;YAAA;YAAA,OAwBrCX,SAAS,CAACY,QAAV,EAxBqC;;UAAA;YAAA;YAAA,8BAwBfC,IAxBe,CAwBV,qBAxBU;YAAA;YAAA,OAyB5Cb,SAAS,CAACc,GAAV,EAzB4C;;UAAA;YAAA,cA0BlDH,YA1BkD;YAAA;YAAA,OA0BrCX,SAAS,CAACY,QAAV,EA1BqC;;UAAA;YAAA;YAAA,8BA0BfC,IA1Be,CA0BV,mBA1BU;YAAA;YAAA,OA4B5B,IAAAI,2BAAA,GA5B4B;;UAAA;YAAA;YAAA,8BA4BP,MA5BO;YAAA;YAAA,OA4BSR,SAAS,CAACR,SAAD,CA5BlB;;UAAA;YAAA;YA4B5CiB,MA5B4C;YAAA;YAAA,OA8B5C,IAAAC,mBAAA,EAAUf,UAAV,EAAsBc,MAAtB,CA9B4C;;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA;EAAA,CAApD;;EAAA;IAAA;EAAA;AAAA"}

package/lib/cjs/style/modal.shadow.css

@@ -55,6 +55,14 @@ SClose[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
 }
 
+STitle {
+  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);
+}
+
 @media (max-width: 767px) {
   SWindow {
     min-width: 60%;

package/lib/es6/Modal.js

@@ -8,6 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps5 } from "@semcore/core";
 import { assignProps as _assignProps4 } from "@semcore/core";
 import { assignProps as _assignProps3 } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
@@ -22,7 +23,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React, { useRef } from 'react';
+import React, { useRef, useEffect } from 'react';
 import FocusLock from 'react-focus-lock';
 import { FadeInOut } from '@semcore/animation';
 import createComponent, { Component, sstyled, Root } from '@semcore/core';
@@ -40,18 +41,21 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SWindow_1v2dg_gg_{position:relative;border-radius:var(--intergalactic-rounded-large,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_1v2dg_gg_:focus{outline:none}.___SOverlay_1v2dg_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x,40px);background:var(--intergalactic-overlay-primary,rgba(25,27,35,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_1v2dg_gg_ .___SOverlay_1v2dg_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_1v2dg_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_1v2dg_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_1v2dg_gg_.__keyboardFocused_1v2dg_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_1v2dg_gg_{min-width:60%}.___SOverlay_1v2dg_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
+".___SWindow_19pry_gg_{position:relative;border-radius:var(--intergalactic-rounded-large,12px);background:var(--intergalactic-bg-primary-neutral,#fff);box-sizing:border-box;margin:auto;padding:var(--intergalactic-spacing-10x,40px);box-shadow:var(--intergalactic-box-shadow-modal,0 3px 8px 0 rgba(25,27,35,.2))}.___SWindow_19pry_gg_:focus{outline:none}.___SOverlay_19pry_gg_{position:fixed;top:0;bottom:0;left:0;right:0;margin:0;display:flex;justify-content:center;align-items:center;padding:var(--intergalactic-spacing-10x,40px);background:var(--intergalactic-overlay-primary,rgba(25,27,35,.7));overflow:auto;z-index:var(--intergalactic-z-index-modal,600);-webkit-overflow-scrolling:touch}.___SOverlay_19pry_gg_ .___SOverlay_19pry_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_19pry_gg_{display:inline-flex;position:absolute;right:0;top:0;padding:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-secondary-neutral,#a9abb6);cursor:pointer;z-index:1;border:none;background:none;outline:none}.___SClose_19pry_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_19pry_gg_.__keyboardFocused_19pry_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}.___STitle_19pry_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)}@media (max-width:767px){.___SWindow_19pry_gg_{min-width:60%}.___SOverlay_19pry_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
 /*__inner_css_end__*/
-, "1v2dg_gg_")
+, "19pry_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SWindow": "___SWindow_1v2dg_gg_",
-  "__SOverlay": "___SOverlay_1v2dg_gg_",
-  "__SClose": "___SClose_1v2dg_gg_",
-  "_keyboardFocused": "__keyboardFocused_1v2dg_gg_"
+  "__SWindow": "___SWindow_19pry_gg_",
+  "__SOverlay": "___SOverlay_19pry_gg_",
+  "__SClose": "___SClose_19pry_gg_",
+  "_keyboardFocused": "__keyboardFocused_19pry_gg_",
+  "__STitle": "___STitle_19pry_gg_"
 });
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
+import { Text } from '@semcore/typography';
+import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 
 var ModalRoot = /*#__PURE__*/function (_Component) {
   _inherits(ModalRoot, _Component);
@@ -69,6 +73,10 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      hasTitle: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
       if (e.key === 'Escape') {
         e.stopPropagation();
@@ -105,12 +113,15 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
       var _this$asProps2 = this.asProps,
           visible = _this$asProps2.visible,
           closable = _this$asProps2.closable,
-          getI18nText = _this$asProps2.getI18nText;
+          getI18nText = _this$asProps2.getI18nText,
+          uid = _this$asProps2.uid;
+      var hasTitle = this.state.hasTitle;
       return {
         visible: visible,
         closable: closable,
         onKeyDown: this.handleKeyDown,
-        getI18nText: getI18nText
+        'aria-label': hasTitle ? undefined : getI18nText('title'),
+        'aria-labelledby': hasTitle ? "igc-".concat(uid, "-title") : undefined
       };
     }
   }, {
@@ -122,6 +133,24 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
         getI18nText: getI18nText
       };
     }
+  }, {
+    key: "getTitleProps",
+    value: function getTitleProps() {
+      var _this2 = this;
+
+      var uid = this.asProps.uid;
+
+      var setTitle = function setTitle() {
+        return _this2.setState({
+          hasTitle: true
+        });
+      };
+
+      return {
+        id: "igc-".concat(uid, "-title"),
+        setTitle: setTitle
+      };
+    }
   }, {
     key: "render",
     value: function render() {
@@ -143,7 +172,7 @@ _defineProperty(ModalRoot, "displayName", 'Modal');
 
 _defineProperty(ModalRoot, "style", style);
 
-_defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement()]);
 
 _defineProperty(ModalRoot, "defaultProps", {
   duration: 200,
@@ -152,9 +181,9 @@ _defineProperty(ModalRoot, "defaultProps", {
   locale: 'en'
 });
 
-var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
-  var tag = _ref8.tag,
-      other = _objectWithoutProperties(_ref8, _excluded);
+var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (_ref10, ref) {
+  var tag = _ref10.tag,
+      other = _objectWithoutProperties(_ref10, _excluded);
 
   return /*#__PURE__*/React.createElement(FocusLock, _extends({
     ref: ref,
@@ -165,33 +194,31 @@ var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
 
 function Window(props) {
   var _ref2 = arguments[0],
-      _ref5;
+      _ref6;
 
   var SWindow = FocusLockWrapper;
   var Children = props.Children,
       styles = props.styles,
       visible = props.visible,
-      closable = props.closable,
-      getI18nText = props.getI18nText;
+      closable = props.closable;
   var windowRef = useRef(null);
   if (!visible) return null;
-  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SWindow, _ref5.cn("SWindow", _objectSpread({}, _assignProps2({
+  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SWindow, _ref6.cn("SWindow", _objectSpread({}, _assignProps2({
     "tag": Box,
     "ref": windowRef,
     "returnFocus": true,
     "tabIndex": -1,
     "autoFocus": true,
     "role": "dialog",
-    "aria-label": getI18nText('title'),
     "aria-modal": true
-  }, _ref2))), /*#__PURE__*/React.createElement(PortalProvider, _ref5.cn("PortalProvider", {
+  }, _ref2))), /*#__PURE__*/React.createElement(PortalProvider, _ref6.cn("PortalProvider", {
     "value": windowRef
-  }), closable && /*#__PURE__*/React.createElement(Modal.Close, null), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {}))));
+  }), closable && /*#__PURE__*/React.createElement(Modal.Close, null), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
 }
 
 function Overlay(props) {
   var _ref3 = arguments[0],
-      _ref6;
+      _ref7;
 
   var SOverlay = FadeInOut;
   var Children = props.Children,
@@ -200,36 +227,53 @@ function Overlay(props) {
       visible = props.visible;
   var overlayRef = useRef(null);
   usePreventScroll(visible);
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SOverlay, _ref6.cn("SOverlay", _objectSpread({}, _assignProps3({
+  return _ref7 = sstyled(styles), /*#__PURE__*/React.createElement(SOverlay, _ref7.cn("SOverlay", _objectSpread({}, _assignProps3({
     "ref": overlayRef
-  }, _ref3))), /*#__PURE__*/React.createElement(OutsideClick, _ref6.cn("OutsideClick", {
+  }, _ref3))), /*#__PURE__*/React.createElement(OutsideClick, _ref7.cn("OutsideClick", {
     "root": overlayRef,
     "onOutsideClick": onOutsideClick
-  }), /*#__PURE__*/React.createElement(Children, _ref6.cn("Children", {}))));
+  }), /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {}))));
 }
 
 function Close(props) {
   var _ref4 = arguments[0],
-      _ref7;
+      _ref8;
 
   var SClose = Box;
   var Children = props.Children,
       hasChildren = props.children,
       getI18nText = props.getI18nText;
-  return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SClose, _ref7.cn("SClose", _objectSpread({}, _assignProps4({
+  return _ref8 = sstyled(props.styles), /*#__PURE__*/React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, _assignProps4({
     "tag": "button",
     "tabIndex": 0,
     "aria-label": getI18nText('close')
-  }, _ref4))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})) : /*#__PURE__*/React.createElement(CloseIcon, _ref7.cn("CloseIcon", {
+  }, _ref4))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref8.cn("Children", {})) : /*#__PURE__*/React.createElement(CloseIcon, _ref8.cn("CloseIcon", {
     "title": getI18nText('close')
   })));
 }
 
 Close.enhance = [keyboardFocusEnhance()];
+
+function Title(props) {
+  var _ref5 = arguments[0],
+      _ref9;
+
+  var setTitle = props.setTitle,
+      styles = props.styles;
+  var STitle = Text;
+  useEffect(function () {
+    return setTitle();
+  });
+  return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(STitle, _ref9.cn("STitle", _objectSpread({}, _assignProps5({
+    "tag": "h2"
+  }, _ref5))));
+}
+
 var Modal = createComponent(ModalRoot, {
   Window: Window,
   Overlay: Overlay,
-  Close: Close
+  Close: Close,
+  Title: Title
 });
 export default Modal;
 //# sourceMappingURL=Modal.js.map

package/lib/es6/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["React","useRef","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseIcon","fire","usePreventScroll","isAdvanceMode","keyboardFocusEnhance","localizedMessages","i18nEnhance","ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","i18n","locale","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","hasChildren","children","enhance"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\n\nclass ModalRoot extends Component {\n  static displayName = 'Modal';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages)];\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable, getI18nText } = this.asProps;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n      getI18nText,\n    };\n  }\n\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n\n    return {\n      onClick: this.handleIconCloseClick,\n      getI18nText,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      Modal.Overlay.displayName,\n      Modal.Window.displayName,\n    ]);\n\n    return (\n      <Portal disablePortal={disablePortal}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Modal.Overlay>\n            <Root render={Modal.Window} />\n          </Modal.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nconst FocusLockWrapper = React.forwardRef(function ({ tag, ...other }, ref) {\n  return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n  const SWindow = Root;\n  const { Children, styles, visible, closable, getI18nText } = props;\n  const windowRef = useRef(null);\n\n  if (!visible) return null;\n\n  return sstyled(styles)(\n    <SWindow\n      render={FocusLockWrapper}\n      tag={Box}\n      ref={windowRef}\n      returnFocus={true}\n      tabIndex={-1}\n      autoFocus={true}\n      role=\"dialog\"\n      aria-label={getI18nText('title')}\n      aria-modal={true}\n    >\n      <PortalProvider value={windowRef}>\n        {closable && <Modal.Close />}\n        <Children />\n      </PortalProvider>\n    </SWindow>,\n  );\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const { Children, styles, onOutsideClick, visible } = props;\n  const overlayRef = useRef(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { Children, children: hasChildren, getI18nText } = props;\n  return sstyled(props.styles)(\n    <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n      {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n    </SClose>,\n  );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,QAA8B,OAA9B;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,OAAOC,MAAP,IAAiBC,cAAjB,QAAuC,iBAAvC;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,wBAAzB;AACA,OAAOC,SAAP,MAAsB,uBAAtB;AACA,OAAOC,IAAP,MAAiB,yBAAjB;AACA,OAAOC,gBAAP,MAA6B,yCAA7B;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;AAEA,SAASC,iBAAT,QAAkC,gDAAlC;AACA,OAAOC,WAAP,MAAwB,yCAAxB;;IAEMC,S;;;;;;;;;;;;;;;;oEAWY,UAACC,CAAD,EAAO;MACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;QACtBD,CAAC,CAACE,eAAF;QACAT,IAAI,gCAAO,SAAP,EAAkB,UAAlB,EAA8BO,CAA9B,CAAJ;MACD;IACF,C;;2EAEsB,UAACA,CAAD,EAAO;MAC5BP,IAAI,gCAAO,SAAP,EAAkB,cAAlB,EAAkCO,CAAlC,CAAJ;IACD,C;;yEAEoB,UAACA,CAAD,EAAO;MAC1BP,IAAI,gCAAO,SAAP,EAAkB,gBAAlB,EAAoCO,CAApC,CAAJ;IACD,C;;;;;;;WAED,2BAAkB;MAChB,oBAA8B,KAAKG,OAAnC;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,OAAlB,iBAAkBA,OAAlB;MACA,OAAO;QACLD,QAAQ,EAARA,QADK;QAELC,OAAO,EAAPA,OAFK;QAGLC,cAAc,EAAE,KAAKC;MAHhB,CAAP;IAKD;;;WAED,0BAAiB;MACf,qBAA2C,KAAKJ,OAAhD;MAAA,IAAQE,OAAR,kBAAQA,OAAR;MAAA,IAAiBG,QAAjB,kBAAiBA,QAAjB;MAAA,IAA2BC,WAA3B,kBAA2BA,WAA3B;MACA,OAAO;QACLJ,OAAO,EAAPA,OADK;QAELG,QAAQ,EAARA,QAFK;QAGLE,SAAS,EAAE,KAAKC,aAHX;QAILF,WAAW,EAAXA;MAJK,CAAP;IAMD;;;WAED,yBAAgB;MACd,IAAQA,WAAR,GAAwB,KAAKN,OAA7B,CAAQM,WAAR;MAEA,OAAO;QACLG,OAAO,EAAE,KAAKC,oBADT;QAELJ,WAAW,EAAXA;MAFK,CAAP;IAID;;;WAED,kBAAS;MAAA;MACP,qBAAoC,KAAKN,OAAzC;MAAA,IAAQW,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,aAAlB,kBAAkBA,aAAlB;MAEA,IAAMC,WAAW,GAAGrB,aAAa,CAACmB,QAAD,EAAW,CAC1CG,KAAK,CAACC,OAAN,CAAcC,WAD4B,EAE1CF,KAAK,CAACG,MAAN,CAAaD,WAF6B,CAAX,CAAjC;MAKA,oBACE,oBAAC,MAAD;QAAQ,aAAa,EAAEJ;MAAvB,GACGC,WAAW,gBACV,oBAAC,QAAD,OADU,gBAGV,oBAAC,KAAD,CAAO,OAAP,qBACE,oBAAcC,KAAK,CAACG,MAApB,yBADF,CAJJ,CADF;IAWD;;;;EAzEqBnC,S;;gBAAlBc,S,iBACiB,O;;gBADjBA,S,WAEWsB,K;;gBAFXtB,S,aAGa,CAACD,WAAW,CAACD,iBAAD,CAAZ,C;;gBAHbE,S,kBAIkB;EACpBK,QAAQ,EAAE,GADU;EAEpBI,QAAQ,EAAE,IAFU;EAGpBc,IAAI,EAAEzB,iBAHc;EAIpB0B,MAAM,EAAE;AAJY,C;;AAwExB,IAAMC,gBAAgB,gBAAG5C,KAAK,CAAC6C,UAAN,CAAiB,iBAA6BC,GAA7B,EAAkC;EAAA,IAAtBC,GAAsB,SAAtBA,GAAsB;EAAA,IAAdC,KAAc;;EAC1E,oBAAO,oBAAC,SAAD;IAAW,GAAG,EAAEF,GAAhB;IAAqB,EAAE,EAAEC,GAAzB;IAA8B,SAAS,EAAEC;EAAzC,GAAoDA,KAApD,EAAP;AACD,CAFwB,CAAzB;;AAIA,SAASR,MAAT,CAAgBS,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAMC,OAAO,GAQDN,gBARZ;EACA,IAAQV,QAAR,GAA6De,KAA7D,CAAQf,QAAR;EAAA,IAAkBiB,MAAlB,GAA6DF,KAA7D,CAAkBE,MAAlB;EAAA,IAA0B1B,OAA1B,GAA6DwB,KAA7D,CAA0BxB,OAA1B;EAAA,IAAmCG,QAAnC,GAA6DqB,KAA7D,CAAmCrB,QAAnC;EAAA,IAA6CC,WAA7C,GAA6DoB,KAA7D,CAA6CpB,WAA7C;EACA,IAAMuB,SAAS,GAAGnD,MAAM,CAAC,IAAD,CAAxB;EAEA,IAAI,CAACwB,OAAL,EAAc,OAAO,IAAP;EAEd,eAAOnB,OAAO,CAAC6C,MAAD,CAAd,eACE,oBAAC,OAAD;IAAA,OAEOzC,GAFP;IAAA,OAGO0C,SAHP;IAAA,eAIe,IAJf;IAAA,YAKY,CAAC,CALb;IAAA,aAMa,IANb;IAAA,QAOO,QAPP;IAAA,cAQcvB,WAAW,CAAC,OAAD,CARzB;IAAA,cASc;EATd,0BAWE,oBAAC,cAAD;IAAA,SAAuBuB;EAAvB,IACGxB,QAAQ,iBAAI,oBAAC,KAAD,CAAO,KAAP,OADf,eAEE,oBAAC,QAAD,2BAFF,CAXF,CADF;AAkBD;;AAED,SAASU,OAAT,CAAiBW,KAAjB,EAAwB;EAAA;EAAA;;EACtB,IAAMI,QAAQ,GAMMlD,SANpB;EACA,IAAQ+B,QAAR,GAAsDe,KAAtD,CAAQf,QAAR;EAAA,IAAkBiB,MAAlB,GAAsDF,KAAtD,CAAkBE,MAAlB;EAAA,IAA0BzB,cAA1B,GAAsDuB,KAAtD,CAA0BvB,cAA1B;EAAA,IAA0CD,OAA1C,GAAsDwB,KAAtD,CAA0CxB,OAA1C;EACA,IAAM6B,UAAU,GAAGrD,MAAM,CAAC,IAAD,CAAzB;EACAa,gBAAgB,CAACW,OAAD,CAAhB;EAEA,eAAOnB,OAAO,CAAC6C,MAAD,CAAd,eACE,oBAAC,QAAD;IAAA,OAAkCG;EAAlC,0BACE,oBAAC,YAAD;IAAA,QAAoBA,UAApB;IAAA,kBAAgD5B;EAAhD,iBACE,oBAAC,QAAD,2BADF,CADF,CADF;AAOD;;AAED,SAAS6B,KAAT,CAAeN,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMO,MAAM,GAGM9C,GAHlB;EACA,IAAQwB,QAAR,GAAyDe,KAAzD,CAAQf,QAAR;EAAA,IAA4BuB,WAA5B,GAAyDR,KAAzD,CAAkBS,QAAlB;EAAA,IAAyC7B,WAAzC,GAAyDoB,KAAzD,CAAyCpB,WAAzC;EACA,eAAOvB,OAAO,CAAC2C,KAAK,CAACE,MAAP,CAAd,eACE,oBAAC,MAAD;IAAA,OAAyB,QAAzB;IAAA,YAA4C,CAA5C;IAAA,cAA2DtB,WAAW,CAAC,OAAD;EAAtE,aACG4B,WAAW,gBAAG,oBAAC,QAAD,2BAAH,gBAAkB,oBAAC,SAAD;IAAA,SAAkB5B,WAAW,CAAC,OAAD;EAA7B,GADhC,CADF;AAKD;;AAED0B,KAAK,CAACI,OAAN,GAAgB,CAAC3C,oBAAoB,EAArB,CAAhB;AAEA,IAAMqB,KAAK,GAAGjC,eAAe,CAACe,SAAD,EAAY;EACvCqB,MAAM,EAANA,MADuC;EAEvCF,OAAO,EAAPA,OAFuC;EAGvCiB,KAAK,EAALA;AAHuC,CAAZ,CAA7B;AAMA,eAAelB,KAAf"}
+{"version":3,"file":"Modal.js","names":["React","useRef","useEffect","FocusLock","FadeInOut","createComponent","Component","sstyled","Root","Portal","PortalProvider","Box","OutsideClick","CloseIcon","fire","usePreventScroll","isAdvanceMode","keyboardFocusEnhance","localizedMessages","i18nEnhance","Text","uniqueIDEnhancement","ModalRoot","hasTitle","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","getI18nText","uid","state","onKeyDown","handleKeyDown","undefined","onClick","handleIconCloseClick","setTitle","setState","id","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","i18n","locale","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","hasChildren","children","enhance","Title","STitle"],"sources":["../../src/Modal.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport FocusLock from 'react-focus-lock';\nimport { FadeInOut } from '@semcore/animation';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport Portal, { PortalProvider } from '@semcore/portal';\nimport { Box } from '@semcore/flex-box';\nimport OutsideClick from '@semcore/outside-click';\nimport CloseIcon from '@semcore/icon/Close/l';\nimport fire from '@semcore/utils/lib/fire';\nimport usePreventScroll from '@semcore/utils/lib/use/usePreventScroll';\nimport { isAdvanceMode } from '@semcore/utils/lib/findComponent';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport style from './style/modal.shadow.css';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport { Text } from '@semcore/typography';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nclass ModalRoot extends Component {\n  static displayName = 'Modal';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n  static defaultProps = {\n    duration: 200,\n    closable: true,\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  state = { hasTitle: false };\n\n  handleKeyDown = (e) => {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      fire(this, 'onClose', 'onEscape', e);\n    }\n  };\n\n  handleIconCloseClick = (e) => {\n    fire(this, 'onClose', 'onCloseClick', e);\n  };\n\n  handleOutsideClick = (e) => {\n    fire(this, 'onClose', 'onOutsideClick', e);\n  };\n\n  getOverlayProps() {\n    const { duration, visible } = this.asProps;\n    return {\n      duration,\n      visible,\n      onOutsideClick: this.handleOutsideClick,\n    };\n  }\n\n  getWindowProps() {\n    const { visible, closable, getI18nText, uid } = this.asProps;\n    const { hasTitle } = this.state;\n    return {\n      visible,\n      closable,\n      onKeyDown: this.handleKeyDown,\n      'aria-label': hasTitle ? undefined : getI18nText('title'),\n      'aria-labelledby': hasTitle ? `igc-${uid}-title` : undefined,\n    };\n  }\n\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n\n    return {\n      onClick: this.handleIconCloseClick,\n      getI18nText,\n    };\n  }\n\n  getTitleProps() {\n    const { uid } = this.asProps;\n    const setTitle = () => this.setState({ hasTitle: true });\n\n    return {\n      id: `igc-${uid}-title`,\n      setTitle,\n    };\n  }\n\n  render() {\n    const { Children, disablePortal } = this.asProps;\n\n    const advanceMode = isAdvanceMode(Children, [\n      Modal.Overlay.displayName,\n      Modal.Window.displayName,\n    ]);\n\n    return (\n      <Portal disablePortal={disablePortal}>\n        {advanceMode ? (\n          <Children />\n        ) : (\n          <Modal.Overlay>\n            <Root render={Modal.Window} />\n          </Modal.Overlay>\n        )}\n      </Portal>\n    );\n  }\n}\n\nconst FocusLockWrapper = React.forwardRef(function ({ tag, ...other }, ref) {\n  return <FocusLock ref={ref} as={tag} lockProps={other} {...other} />;\n});\n\nfunction Window(props) {\n  const SWindow = Root;\n  const { Children, styles, visible, closable } = props;\n  const windowRef = useRef(null);\n\n  if (!visible) return null;\n\n  return sstyled(styles)(\n    <SWindow\n      render={FocusLockWrapper}\n      tag={Box}\n      ref={windowRef}\n      returnFocus={true}\n      tabIndex={-1}\n      autoFocus={true}\n      role=\"dialog\"\n      aria-modal={true}\n    >\n      <PortalProvider value={windowRef}>\n        {closable && <Modal.Close />}\n        <Children />\n      </PortalProvider>\n    </SWindow>,\n  );\n}\n\nfunction Overlay(props) {\n  const SOverlay = Root;\n  const { Children, styles, onOutsideClick, visible } = props;\n  const overlayRef = useRef(null);\n  usePreventScroll(visible);\n\n  return sstyled(styles)(\n    <SOverlay render={FadeInOut} ref={overlayRef}>\n      <OutsideClick root={overlayRef} onOutsideClick={onOutsideClick}>\n        <Children />\n      </OutsideClick>\n    </SOverlay>,\n  );\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { Children, children: hasChildren, getI18nText } = props;\n  return sstyled(props.styles)(\n    <SClose render={Box} tag=\"button\" tabIndex={0} aria-label={getI18nText('close')}>\n      {hasChildren ? <Children /> : <CloseIcon title={getI18nText('close')} />}\n    </SClose>,\n  );\n}\n\nClose.enhance = [keyboardFocusEnhance()];\n\nfunction Title(props) {\n  const { setTitle, styles } = props;\n  const STitle = Root;\n\n  useEffect(() => setTitle());\n\n  return sstyled(styles)(<STitle render={Text} tag=\"h2\" />);\n}\n\nconst Modal = createComponent(ModalRoot, {\n  Window,\n  Overlay,\n  Close,\n  Title,\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,SAAxB,QAAyC,OAAzC;AACA,OAAOC,SAAP,MAAsB,kBAAtB;AACA,SAASC,SAAT,QAA0B,oBAA1B;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,OAAOC,MAAP,IAAiBC,cAAjB,QAAuC,iBAAvC;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,wBAAzB;AACA,OAAOC,SAAP,MAAsB,uBAAtB;AACA,OAAOC,IAAP,MAAiB,yBAAjB;AACA,OAAOC,gBAAP,MAA6B,yCAA7B;AACA,SAASC,aAAT,QAA8B,kCAA9B;AACA,OAAOC,oBAAP,MAAiC,kDAAjC;;;;;;;;;;;;;;;;;;AAEA,SAASC,iBAAT,QAAkC,gDAAlC;AACA,OAAOC,WAAP,MAAwB,yCAAxB;AACA,SAASC,IAAT,QAAqB,qBAArB;AACA,OAAOC,mBAAP,MAAgC,6BAAhC;;IAEMC,S;;;;;;;;;;;;;;;;4DAUI;MAAEC,QAAQ,EAAE;IAAZ,C;;oEAEQ,UAACC,CAAD,EAAO;MACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;QACtBD,CAAC,CAACE,eAAF;QACAZ,IAAI,gCAAO,SAAP,EAAkB,UAAlB,EAA8BU,CAA9B,CAAJ;MACD;IACF,C;;2EAEsB,UAACA,CAAD,EAAO;MAC5BV,IAAI,gCAAO,SAAP,EAAkB,cAAlB,EAAkCU,CAAlC,CAAJ;IACD,C;;yEAEoB,UAACA,CAAD,EAAO;MAC1BV,IAAI,gCAAO,SAAP,EAAkB,gBAAlB,EAAoCU,CAApC,CAAJ;IACD,C;;;;;;;WAED,2BAAkB;MAChB,oBAA8B,KAAKG,OAAnC;MAAA,IAAQC,QAAR,iBAAQA,QAAR;MAAA,IAAkBC,OAAlB,iBAAkBA,OAAlB;MACA,OAAO;QACLD,QAAQ,EAARA,QADK;QAELC,OAAO,EAAPA,OAFK;QAGLC,cAAc,EAAE,KAAKC;MAHhB,CAAP;IAKD;;;WAED,0BAAiB;MACf,qBAAgD,KAAKJ,OAArD;MAAA,IAAQE,OAAR,kBAAQA,OAAR;MAAA,IAAiBG,QAAjB,kBAAiBA,QAAjB;MAAA,IAA2BC,WAA3B,kBAA2BA,WAA3B;MAAA,IAAwCC,GAAxC,kBAAwCA,GAAxC;MACA,IAAQX,QAAR,GAAqB,KAAKY,KAA1B,CAAQZ,QAAR;MACA,OAAO;QACLM,OAAO,EAAPA,OADK;QAELG,QAAQ,EAARA,QAFK;QAGLI,SAAS,EAAE,KAAKC,aAHX;QAIL,cAAcd,QAAQ,GAAGe,SAAH,GAAeL,WAAW,CAAC,OAAD,CAJ3C;QAKL,mBAAmBV,QAAQ,iBAAUW,GAAV,cAAwBI;MAL9C,CAAP;IAOD;;;WAED,yBAAgB;MACd,IAAQL,WAAR,GAAwB,KAAKN,OAA7B,CAAQM,WAAR;MAEA,OAAO;QACLM,OAAO,EAAE,KAAKC,oBADT;QAELP,WAAW,EAAXA;MAFK,CAAP;IAID;;;WAED,yBAAgB;MAAA;;MACd,IAAQC,GAAR,GAAgB,KAAKP,OAArB,CAAQO,GAAR;;MACA,IAAMO,QAAQ,GAAG,SAAXA,QAAW;QAAA,OAAM,MAAI,CAACC,QAAL,CAAc;UAAEnB,QAAQ,EAAE;QAAZ,CAAd,CAAN;MAAA,CAAjB;;MAEA,OAAO;QACLoB,EAAE,gBAAST,GAAT,WADG;QAELO,QAAQ,EAARA;MAFK,CAAP;IAID;;;WAED,kBAAS;MAAA;MACP,qBAAoC,KAAKd,OAAzC;MAAA,IAAQiB,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,aAAlB,kBAAkBA,aAAlB;MAEA,IAAMC,WAAW,GAAG9B,aAAa,CAAC4B,QAAD,EAAW,CAC1CG,KAAK,CAACC,OAAN,CAAcC,WAD4B,EAE1CF,KAAK,CAACG,MAAN,CAAaD,WAF6B,CAAX,CAAjC;MAKA,oBACE,oBAAC,MAAD;QAAQ,aAAa,EAAEJ;MAAvB,GACGC,WAAW,gBACV,oBAAC,QAAD,OADU,gBAGV,oBAAC,KAAD,CAAO,OAAP,qBACE,oBAAcC,KAAK,CAACG,MAApB,yBADF,CAJJ,CADF;IAWD;;;;EAtFqB5C,S;;gBAAlBgB,S,iBACiB,O;;gBADjBA,S,WAEW6B,K;;gBAFX7B,S,aAGa,CAACH,WAAW,CAACD,iBAAD,CAAZ,EAAiCG,mBAAmB,EAApD,C;;gBAHbC,S,kBAIkB;EACpBM,QAAQ,EAAE,GADU;EAEpBI,QAAQ,EAAE,IAFU;EAGpBoB,IAAI,EAAElC,iBAHc;EAIpBmC,MAAM,EAAE;AAJY,C;;AAqFxB,IAAMC,gBAAgB,gBAAGtD,KAAK,CAACuD,UAAN,CAAiB,kBAA6BC,GAA7B,EAAkC;EAAA,IAAtBC,GAAsB,UAAtBA,GAAsB;EAAA,IAAdC,KAAc;;EAC1E,oBAAO,oBAAC,SAAD;IAAW,GAAG,EAAEF,GAAhB;IAAqB,EAAE,EAAEC,GAAzB;IAA8B,SAAS,EAAEC;EAAzC,GAAoDA,KAApD,EAAP;AACD,CAFwB,CAAzB;;AAIA,SAASR,MAAT,CAAgBS,KAAhB,EAAuB;EAAA;EAAA;;EACrB,IAAMC,OAAO,GAQDN,gBARZ;EACA,IAAQV,QAAR,GAAgDe,KAAhD,CAAQf,QAAR;EAAA,IAAkBiB,MAAlB,GAAgDF,KAAhD,CAAkBE,MAAlB;EAAA,IAA0BhC,OAA1B,GAAgD8B,KAAhD,CAA0B9B,OAA1B;EAAA,IAAmCG,QAAnC,GAAgD2B,KAAhD,CAAmC3B,QAAnC;EACA,IAAM8B,SAAS,GAAG7D,MAAM,CAAC,IAAD,CAAxB;EAEA,IAAI,CAAC4B,OAAL,EAAc,OAAO,IAAP;EAEd,eAAOtB,OAAO,CAACsD,MAAD,CAAd,eACE,oBAAC,OAAD;IAAA,OAEOlD,GAFP;IAAA,OAGOmD,SAHP;IAAA,eAIe,IAJf;IAAA,YAKY,CAAC,CALb;IAAA,aAMa,IANb;IAAA,QAOO,QAPP;IAAA,cAQc;EARd,0BAUE,oBAAC,cAAD;IAAA,SAAuBA;EAAvB,IACG9B,QAAQ,iBAAI,oBAAC,KAAD,CAAO,KAAP,OADf,eAEE,oBAAC,QAAD,2BAFF,CAVF,CADF;AAiBD;;AAED,SAASgB,OAAT,CAAiBW,KAAjB,EAAwB;EAAA;EAAA;;EACtB,IAAMI,QAAQ,GAMM3D,SANpB;EACA,IAAQwC,QAAR,GAAsDe,KAAtD,CAAQf,QAAR;EAAA,IAAkBiB,MAAlB,GAAsDF,KAAtD,CAAkBE,MAAlB;EAAA,IAA0B/B,cAA1B,GAAsD6B,KAAtD,CAA0B7B,cAA1B;EAAA,IAA0CD,OAA1C,GAAsD8B,KAAtD,CAA0C9B,OAA1C;EACA,IAAMmC,UAAU,GAAG/D,MAAM,CAAC,IAAD,CAAzB;EACAc,gBAAgB,CAACc,OAAD,CAAhB;EAEA,eAAOtB,OAAO,CAACsD,MAAD,CAAd,eACE,oBAAC,QAAD;IAAA,OAAkCG;EAAlC,0BACE,oBAAC,YAAD;IAAA,QAAoBA,UAApB;IAAA,kBAAgDlC;EAAhD,iBACE,oBAAC,QAAD,2BADF,CADF,CADF;AAOD;;AAED,SAASmC,KAAT,CAAeN,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMO,MAAM,GAGMvD,GAHlB;EACA,IAAQiC,QAAR,GAAyDe,KAAzD,CAAQf,QAAR;EAAA,IAA4BuB,WAA5B,GAAyDR,KAAzD,CAAkBS,QAAlB;EAAA,IAAyCnC,WAAzC,GAAyD0B,KAAzD,CAAyC1B,WAAzC;EACA,eAAO1B,OAAO,CAACoD,KAAK,CAACE,MAAP,CAAd,eACE,oBAAC,MAAD;IAAA,OAAyB,QAAzB;IAAA,YAA4C,CAA5C;IAAA,cAA2D5B,WAAW,CAAC,OAAD;EAAtE,aACGkC,WAAW,gBAAG,oBAAC,QAAD,2BAAH,gBAAkB,oBAAC,SAAD;IAAA,SAAkBlC,WAAW,CAAC,OAAD;EAA7B,GADhC,CADF;AAKD;;AAEDgC,KAAK,CAACI,OAAN,GAAgB,CAACpD,oBAAoB,EAArB,CAAhB;;AAEA,SAASqD,KAAT,CAAeX,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAQlB,QAAR,GAA6BkB,KAA7B,CAAQlB,QAAR;EAAA,IAAkBoB,MAAlB,GAA6BF,KAA7B,CAAkBE,MAAlB;EACA,IAAMU,MAAM,GAI2BnD,IAJvC;EAEAlB,SAAS,CAAC;IAAA,OAAMuC,QAAQ,EAAd;EAAA,CAAD,CAAT;EAEA,eAAOlC,OAAO,CAACsD,MAAD,CAAd,eAAuB,oBAAC,MAAD;IAAA,OAA0B;EAA1B,YAAvB;AACD;;AAED,IAAMd,KAAK,GAAG1C,eAAe,CAACiB,SAAD,EAAY;EACvC4B,MAAM,EAANA,MADuC;EAEvCF,OAAO,EAAPA,OAFuC;EAGvCiB,KAAK,EAALA,KAHuC;EAIvCK,KAAK,EAALA;AAJuC,CAAZ,CAA7B;AAOA,eAAevB,KAAf"}

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n  /** Duration of animation, ms\n   * @default 200\n   */\n  duration?: number;\n  /** This property is responsible for the visibility of the modal window */\n  visible?: boolean;\n  /** Function called when the component is hidden */\n  onClose?: (\n    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n    e?: React.MouseEvent | React.KeyboardEvent,\n  ) => void;\n  /** Displaying the close button(x) in the upper-right corner of the modal dialog\n   * @default true\n   * */\n  closable?: boolean;\n  locale?: string;\n}\n\nexport interface IModalContext {\n  getOverlayProps: PropGetterFn;\n  getWindowProps: PropGetterFn;\n  getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n  Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n};\n\nexport default Modal;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React, { ComponentProps } from 'react';\nimport { IFadeInOutProps } from '@semcore/animation';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { IPortalProps } from '@semcore/portal';\nimport { Box, IBoxProps } from '@semcore/flex-box';\nimport { ITextProps } from '@semcore/typography';\n\nexport interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {\n  /** Duration of animation, ms\n   * @default 200\n   */\n  duration?: number;\n  /** This property is responsible for the visibility of the modal window */\n  visible?: boolean;\n  /** Function called when the component is hidden */\n  onClose?: (\n    trigger: 'onOutsideClick' | 'onCloseClick' | 'onEscape',\n    e?: React.MouseEvent | React.KeyboardEvent,\n  ) => void;\n  /** Displaying the close button(x) in the upper-right corner of the modal dialog\n   * @default true\n   * */\n  closable?: boolean;\n  locale?: string;\n}\n\nexport interface IModalContext {\n  getOverlayProps: PropGetterFn;\n  getWindowProps: PropGetterFn;\n  getCloseProps: PropGetterFn;\n}\n\ndeclare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => ReturnEl) & {\n  Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;\n  Title: <T>(props: ITextProps & T) => ReturnEl;\n};\n\nexport default Modal;\n"],"mappings":""}

package/lib/es6/modal.vo-test.js

@@ -57,7 +57,7 @@ test('Users can interact with Modal via VoiceOver', /*#__PURE__*/function () {
 
           case 25:
             _context.t3 = _context.sent;
-            (0, _context.t2)(_context.t3).toBe('Modal window web dialog with 5 items Close button');
+            (0, _context.t2)(_context.t3).toBe('Do you want to save your changes? web dialog with 5 items Close button');
             _context.next = 29;
             return voiceOver.next();
 

package/lib/es6/modal.vo-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vo-test.js","names":["expect","voTest","test","e2eStandToHtml","resolve","resolvePath","writeFile","getReportHeader","makeVoiceOverReporter","page","pureVoiceOver","voiceOver","standPath","__dirname","reportPath","htmlContent","setContent","getReport","interact","itemText","toBe","act","lastSpokenPhrase","next","report"],"sources":["../../src/modal.vo-test.ts"],"sourcesContent":["import { expect } from '@playwright/test';\nimport { voTest as test } from '@guidepup/playwright';\nimport { e2eStandToHtml } from '@semcore/jest-preset-ui/e2e-stand';\nimport { resolve as resolvePath } from 'path';\nimport { writeFile } from 'fs/promises';\nimport { getReportHeader, makeVoiceOverReporter } from '@semcore/jest-preset-ui/vo-reporter';\n\ntest('Users can interact with Modal via VoiceOver', async ({ page, voiceOver: pureVoiceOver }) => {\n  const standPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/examples/modal.jsx',\n  );\n  const reportPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/modal-a11y-report.md',\n  );\n  const htmlContent = await e2eStandToHtml(standPath, 'en');\n\n  await page.setContent(htmlContent);\n  const { voiceOver, getReport } = await makeVoiceOverReporter(pureVoiceOver);\n  await voiceOver.interact();\n\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n  await voiceOver.act();\n  expect(await voiceOver.lastSpokenPhrase()).toBe(\n    'Modal window web dialog with 5 items Close button',\n  );\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Do you want to save your changes? heading level 2');\n  await voiceOver.next();\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Save changes button');\n  await voiceOver.act();\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n\n  const report = (await getReportHeader()) + '\\n\\n' + (await getReport(standPath));\n\n  await writeFile(reportPath, report);\n});\n"],"mappings":";;;+CACA,oJ;;AADA,SAASA,MAAT,QAAuB,kBAAvB;AACA,SAASC,MAAM,IAAIC,IAAnB,QAA+B,sBAA/B;AACA,SAASC,cAAT,QAA+B,mCAA/B;AACA,SAASC,OAAO,IAAIC,WAApB,QAAuC,MAAvC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,eAAT,EAA0BC,qBAA1B,QAAuD,qCAAvD;AAEAN,IAAI,CAAC,6CAAD;EAAA,uEAAgD;IAAA;;IAAA;MAAA;QAAA;UAAA;YAASO,IAAT,QAASA,IAAT,EAA0BC,aAA1B,QAAeC,SAAf;YAC5CC,SAD4C,GAChCP,WAAW,CAC3BQ,SAD2B,EAE3B,2DAF2B,CADqB;YAK5CC,UAL4C,GAK/BT,WAAW,CAC5BQ,SAD4B,EAE5B,6DAF4B,CALoB;YAAA;YAAA,OASxBV,cAAc,CAACS,SAAD,EAAY,IAAZ,CATU;;UAAA;YAS5CG,WAT4C;YAAA;YAAA,OAW5CN,IAAI,CAACO,UAAL,CAAgBD,WAAhB,CAX4C;;UAAA;YAAA;YAAA,OAYXP,qBAAqB,CAACE,aAAD,CAZV;;UAAA;YAAA;YAY1CC,SAZ0C,yBAY1CA,SAZ0C;YAY/BM,SAZ+B,yBAY/BA,SAZ+B;YAAA;YAAA,OAa5CN,SAAS,CAACO,QAAV,EAb4C;;UAAA;YAAA,cAelDlB,MAfkD;YAAA;YAAA,OAerCW,SAAS,CAACQ,QAAV,EAfqC;;UAAA;YAAA;YAAA,8BAefC,IAfe,CAeV,mBAfU;YAAA;YAAA,OAgB5CT,SAAS,CAACU,GAAV,EAhB4C;;UAAA;YAAA,cAiBlDrB,MAjBkD;YAAA;YAAA,OAiBrCW,SAAS,CAACW,gBAAV,EAjBqC;;UAAA;YAAA;YAAA,8BAiBPF,IAjBO,CAkBhD,mDAlBgD;YAAA;YAAA,OAoB5CT,SAAS,CAACY,IAAV,EApB4C;;UAAA;YAAA,cAqBlDvB,MArBkD;YAAA;YAAA,OAqBrCW,SAAS,CAACQ,QAAV,EArBqC;;UAAA;YAAA;YAAA,8BAqBfC,IArBe,CAqBV,mDArBU;YAAA;YAAA,OAsB5CT,SAAS,CAACY,IAAV,EAtB4C;;UAAA;YAAA;YAAA,OAuB5CZ,SAAS,CAACY,IAAV,EAvB4C;;UAAA;YAAA,cAwBlDvB,MAxBkD;YAAA;YAAA,OAwBrCW,SAAS,CAACQ,QAAV,EAxBqC;;UAAA;YAAA;YAAA,8BAwBfC,IAxBe,CAwBV,qBAxBU;YAAA;YAAA,OAyB5CT,SAAS,CAACU,GAAV,EAzB4C;;UAAA;YAAA,cA0BlDrB,MA1BkD;YAAA;YAAA,OA0BrCW,SAAS,CAACQ,QAAV,EA1BqC;;UAAA;YAAA;YAAA,8BA0BfC,IA1Be,CA0BV,mBA1BU;YAAA;YAAA,OA4B5Bb,eAAe,EA5Ba;;UAAA;YAAA;YAAA,8BA4BP,MA5BO;YAAA;YAAA,OA4BSU,SAAS,CAACL,SAAD,CA5BlB;;UAAA;YAAA;YA4B5CY,MA5B4C;YAAA;YAAA,OA8B5ClB,SAAS,CAACQ,UAAD,EAAaU,MAAb,CA9BmC;;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA;EAAA,CAAhD;;EAAA;IAAA;EAAA;AAAA,IAAJ"}
+{"version":3,"file":"modal.vo-test.js","names":["expect","voTest","test","e2eStandToHtml","resolve","resolvePath","writeFile","getReportHeader","makeVoiceOverReporter","page","pureVoiceOver","voiceOver","standPath","__dirname","reportPath","htmlContent","setContent","getReport","interact","itemText","toBe","act","lastSpokenPhrase","next","report"],"sources":["../../src/modal.vo-test.ts"],"sourcesContent":["import { expect } from '@playwright/test';\nimport { voTest as test } from '@guidepup/playwright';\nimport { e2eStandToHtml } from '@semcore/jest-preset-ui/e2e-stand';\nimport { resolve as resolvePath } from 'path';\nimport { writeFile } from 'fs/promises';\nimport { getReportHeader, makeVoiceOverReporter } from '@semcore/jest-preset-ui/vo-reporter';\n\ntest('Users can interact with Modal via VoiceOver', async ({ page, voiceOver: pureVoiceOver }) => {\n  const standPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/examples/modal.jsx',\n  );\n  const reportPath = resolvePath(\n    __dirname,\n    '../../../website/docs/components/modal/modal-a11y-report.md',\n  );\n  const htmlContent = await e2eStandToHtml(standPath, 'en');\n\n  await page.setContent(htmlContent);\n  const { voiceOver, getReport } = await makeVoiceOverReporter(pureVoiceOver);\n  await voiceOver.interact();\n\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n  await voiceOver.act();\n  expect(await voiceOver.lastSpokenPhrase()).toBe(\n    'Do you want to save your changes? web dialog with 5 items Close button',\n  );\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Do you want to save your changes? heading level 2');\n  await voiceOver.next();\n  await voiceOver.next();\n  expect(await voiceOver.itemText()).toBe('Save changes button');\n  await voiceOver.act();\n  expect(await voiceOver.itemText()).toBe('Open modal button');\n\n  const report = (await getReportHeader()) + '\\n\\n' + (await getReport(standPath));\n\n  await writeFile(reportPath, report);\n});\n"],"mappings":";;;+CACA,oJ;;AADA,SAASA,MAAT,QAAuB,kBAAvB;AACA,SAASC,MAAM,IAAIC,IAAnB,QAA+B,sBAA/B;AACA,SAASC,cAAT,QAA+B,mCAA/B;AACA,SAASC,OAAO,IAAIC,WAApB,QAAuC,MAAvC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,eAAT,EAA0BC,qBAA1B,QAAuD,qCAAvD;AAEAN,IAAI,CAAC,6CAAD;EAAA,uEAAgD;IAAA;;IAAA;MAAA;QAAA;UAAA;YAASO,IAAT,QAASA,IAAT,EAA0BC,aAA1B,QAAeC,SAAf;YAC5CC,SAD4C,GAChCP,WAAW,CAC3BQ,SAD2B,EAE3B,2DAF2B,CADqB;YAK5CC,UAL4C,GAK/BT,WAAW,CAC5BQ,SAD4B,EAE5B,6DAF4B,CALoB;YAAA;YAAA,OASxBV,cAAc,CAACS,SAAD,EAAY,IAAZ,CATU;;UAAA;YAS5CG,WAT4C;YAAA;YAAA,OAW5CN,IAAI,CAACO,UAAL,CAAgBD,WAAhB,CAX4C;;UAAA;YAAA;YAAA,OAYXP,qBAAqB,CAACE,aAAD,CAZV;;UAAA;YAAA;YAY1CC,SAZ0C,yBAY1CA,SAZ0C;YAY/BM,SAZ+B,yBAY/BA,SAZ+B;YAAA;YAAA,OAa5CN,SAAS,CAACO,QAAV,EAb4C;;UAAA;YAAA,cAelDlB,MAfkD;YAAA;YAAA,OAerCW,SAAS,CAACQ,QAAV,EAfqC;;UAAA;YAAA;YAAA,8BAefC,IAfe,CAeV,mBAfU;YAAA;YAAA,OAgB5CT,SAAS,CAACU,GAAV,EAhB4C;;UAAA;YAAA,cAiBlDrB,MAjBkD;YAAA;YAAA,OAiBrCW,SAAS,CAACW,gBAAV,EAjBqC;;UAAA;YAAA;YAAA,8BAiBPF,IAjBO,CAkBhD,wEAlBgD;YAAA;YAAA,OAoB5CT,SAAS,CAACY,IAAV,EApB4C;;UAAA;YAAA,cAqBlDvB,MArBkD;YAAA;YAAA,OAqBrCW,SAAS,CAACQ,QAAV,EArBqC;;UAAA;YAAA;YAAA,8BAqBfC,IArBe,CAqBV,mDArBU;YAAA;YAAA,OAsB5CT,SAAS,CAACY,IAAV,EAtB4C;;UAAA;YAAA;YAAA,OAuB5CZ,SAAS,CAACY,IAAV,EAvB4C;;UAAA;YAAA,cAwBlDvB,MAxBkD;YAAA;YAAA,OAwBrCW,SAAS,CAACQ,QAAV,EAxBqC;;UAAA;YAAA;YAAA,8BAwBfC,IAxBe,CAwBV,qBAxBU;YAAA;YAAA,OAyB5CT,SAAS,CAACU,GAAV,EAzB4C;;UAAA;YAAA,cA0BlDrB,MA1BkD;YAAA;YAAA,OA0BrCW,SAAS,CAACQ,QAAV,EA1BqC;;UAAA;YAAA;YAAA,8BA0BfC,IA1Be,CA0BV,mBA1BU;YAAA;YAAA,OA4B5Bb,eAAe,EA5Ba;;UAAA;YAAA;YAAA,8BA4BP,MA5BO;YAAA;YAAA,OA4BSU,SAAS,CAACL,SAAD,CA5BlB;;UAAA;YAAA;YA4B5CY,MA5B4C;YAAA;YAAA,OA8B5ClB,SAAS,CAACQ,UAAD,EAAaU,MAAb,CA9BmC;;UAAA;UAAA;YAAA;QAAA;MAAA;IAAA;EAAA,CAAhD;;EAAA;IAAA;EAAA;AAAA,IAAJ"}

package/lib/es6/style/modal.shadow.css

@@ -55,6 +55,14 @@ SClose[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.3));
 }
 
+STitle {
+  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);
+}
+
 @media (max-width: 767px) {
   SWindow {
     min-width: 60%;

package/lib/types/index.d.ts

@@ -3,6 +3,7 @@ import { IFadeInOutProps } from '@semcore/animation';
 import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
 import { IPortalProps } from '@semcore/portal';
 import { Box, IBoxProps } from '@semcore/flex-box';
+import { ITextProps } from '@semcore/typography';
 
 export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
   /** Duration of animation, ms
@@ -33,6 +34,7 @@ declare const Modal: (<T>(props: CProps<IModalProps & T, IModalContext>) => Retu
   Window: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
   Overlay: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
   Close: <T>(props: ComponentProps<typeof Box> & T) => ReturnEl;
+  Title: <T>(props: ITextProps & T) => ReturnEl;
 };
 
 export default Modal;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/modal",
   "description": "Semrush Modal Component",
-  "version": "3.3.5",
+  "version": "3.4.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,6 +14,7 @@
     "@semcore/icon": "2.16 - 3",
     "@semcore/outside-click": "^2",
     "@semcore/portal": "^2",
+    "@semcore/typography": "^4",
     "@semcore/utils": "^3.31.2",
     "react-focus-lock": "2.9.1"
   },
@@ -31,10 +32,10 @@
     "directory": "semcore/modal"
   },
   "devDependencies": {
-    "@types/react": "18.0.21",
     "@guidepup/playwright": "0.6.1",
     "@playwright/test": "1.25.1",
-    "@semcore/jest-preset-ui": "1.0.0"
+    "@semcore/jest-preset-ui": "1.0.0",
+    "@types/react": "18.0.21"
   },
   "scripts": {
     "build": "pnpm semcore-builder --source=js",