@semcore/modal 3.2.1 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/lib/cjs/Modal.js +31 -19
  3. package/lib/cjs/Modal.js.map +1 -1
  4. package/lib/cjs/index.d.js.map +1 -1
  5. package/lib/cjs/translations/__intergalactic-dynamic-locales.js +46 -0
  6. package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map +1 -0
  7. package/lib/cjs/translations/de.json +4 -0
  8. package/lib/cjs/translations/en.json +4 -0
  9. package/lib/cjs/translations/es.json +4 -0
  10. package/lib/cjs/translations/fr.json +4 -0
  11. package/lib/cjs/translations/it.json +4 -0
  12. package/lib/cjs/translations/ja.json +4 -0
  13. package/lib/cjs/translations/ko.json +4 -0
  14. package/lib/cjs/translations/pt.json +4 -0
  15. package/lib/cjs/translations/tr.json +4 -0
  16. package/lib/cjs/translations/vi.json +4 -0
  17. package/lib/cjs/translations/zh.json +4 -0
  18. package/lib/es6/Modal.js +30 -19
  19. package/lib/es6/Modal.js.map +1 -1
  20. package/lib/es6/index.d.js.map +1 -1
  21. package/lib/es6/translations/__intergalactic-dynamic-locales.js +25 -0
  22. package/lib/es6/translations/__intergalactic-dynamic-locales.js.map +1 -0
  23. package/lib/es6/translations/de.json +4 -0
  24. package/lib/es6/translations/en.json +4 -0
  25. package/lib/es6/translations/es.json +4 -0
  26. package/lib/es6/translations/fr.json +4 -0
  27. package/lib/es6/translations/it.json +4 -0
  28. package/lib/es6/translations/ja.json +4 -0
  29. package/lib/es6/translations/ko.json +4 -0
  30. package/lib/es6/translations/pt.json +4 -0
  31. package/lib/es6/translations/tr.json +4 -0
  32. package/lib/es6/translations/vi.json +4 -0
  33. package/lib/es6/translations/zh.json +4 -0
  34. package/lib/types/index.d.ts +1 -0
  35. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [3.3.1] - 2022-12-19
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/animation` [1.8.4 ~> 1.8.5], `@semcore/flex-box` [4.7.2 ~> 4.7.3], `@semcore/icon` [3.4.2 ~> 3.4.3], `@semcore/utils` [3.44.0 ~> 3.44.1]).
10
+
11
+ ## [3.3.0] - 2022-12-14
12
+
13
+ ### Added
14
+
15
+ - Added internationalization of aria attributes.
16
+
5
17
  ## [3.2.1] - 2022-12-13
6
18
 
7
19
  ### Changed
package/lib/cjs/Modal.js CHANGED
@@ -51,6 +51,10 @@ var _findComponent = require("@semcore/utils/lib/findComponent");
51
51
 
52
52
  var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
53
53
 
54
+ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynamic-locales");
55
+
56
+ var _i18nEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/i18nEnhance"));
57
+
54
58
  var _excluded = ["tag"];
55
59
 
56
60
  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); }
@@ -70,15 +74,15 @@ var style = (
70
74
  /*__reshadow_css_start__*/
71
75
  _core.sstyled.insert(
72
76
  /*__inner_css_start__*/
73
- ".___SWindow_1lydh_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_1lydh_gg_:focus{outline:none}.___SOverlay_1lydh_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_1lydh_gg_ .___SOverlay_1lydh_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_1lydh_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_1lydh_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_1lydh_gg_.__keyboardFocused_1lydh_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_1lydh_gg_{min-width:60%}.___SOverlay_1lydh_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
77
+ ".___SWindow_b6m2p_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_b6m2p_gg_:focus{outline:none}.___SOverlay_b6m2p_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_b6m2p_gg_ .___SOverlay_b6m2p_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_b6m2p_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_b6m2p_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_b6m2p_gg_.__keyboardFocused_b6m2p_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_b6m2p_gg_{min-width:60%}.___SOverlay_b6m2p_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
74
78
  /*__inner_css_end__*/
75
- , "1lydh_gg_")
79
+ , "b6m2p_gg_")
76
80
  /*__reshadow_css_end__*/
77
81
  , {
78
- "__SWindow": "___SWindow_1lydh_gg_",
79
- "__SOverlay": "___SOverlay_1lydh_gg_",
80
- "__SClose": "___SClose_1lydh_gg_",
81
- "_keyboardFocused": "__keyboardFocused_1lydh_gg_"
82
+ "__SWindow": "___SWindow_b6m2p_gg_",
83
+ "__SOverlay": "___SOverlay_b6m2p_gg_",
84
+ "__SClose": "___SClose_b6m2p_gg_",
85
+ "_keyboardFocused": "__keyboardFocused_b6m2p_gg_"
82
86
  });
83
87
 
84
88
  var ModalRoot = /*#__PURE__*/function (_Component) {
@@ -128,18 +132,22 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
128
132
  value: function getWindowProps() {
129
133
  var _this$asProps2 = this.asProps,
130
134
  visible = _this$asProps2.visible,
131
- closable = _this$asProps2.closable;
135
+ closable = _this$asProps2.closable,
136
+ getI18nText = _this$asProps2.getI18nText;
132
137
  return {
133
138
  visible: visible,
134
139
  closable: closable,
135
- onKeyDown: this.handleKeyDown
140
+ onKeyDown: this.handleKeyDown,
141
+ getI18nText: getI18nText
136
142
  };
137
143
  }
138
144
  }, {
139
145
  key: "getCloseProps",
140
146
  value: function getCloseProps() {
147
+ var getI18nText = this.asProps.getI18nText;
141
148
  return {
142
- onClick: this.handleIconCloseClick
149
+ onClick: this.handleIconCloseClick,
150
+ getI18nText: getI18nText
143
151
  };
144
152
  }
145
153
  }, {
@@ -160,9 +168,12 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
160
168
 
161
169
  (0, _defineProperty2["default"])(ModalRoot, "displayName", 'Modal');
162
170
  (0, _defineProperty2["default"])(ModalRoot, "style", style);
171
+ (0, _defineProperty2["default"])(ModalRoot, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
163
172
  (0, _defineProperty2["default"])(ModalRoot, "defaultProps", {
164
173
  duration: 200,
165
- closable: true
174
+ closable: true,
175
+ i18n: _intergalacticDynamicLocales.localizedMessages,
176
+ locale: 'en'
166
177
  });
167
178
 
168
179
  var FocusLockWrapper = /*#__PURE__*/_react["default"].forwardRef(function (_ref8, ref) {
@@ -183,7 +194,8 @@ function Window(props) {
183
194
  var Children = props.Children,
184
195
  styles = props.styles,
185
196
  visible = props.visible,
186
- closable = props.closable;
197
+ closable = props.closable,
198
+ getI18nText = props.getI18nText;
187
199
  var windowRef = (0, _react.useRef)(null);
188
200
  if (!visible) return null;
189
201
  return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SWindow, _ref5.cn("SWindow", _objectSpread({}, (0, _core.assignProps)({
@@ -193,7 +205,7 @@ function Window(props) {
193
205
  "tabIndex": -1,
194
206
  "autoFocus": true,
195
207
  "role": "dialog",
196
- "aria-label": "Modal window",
208
+ "aria-label": getI18nText('title'),
197
209
  "aria-modal": true
198
210
  }, _ref2))), /*#__PURE__*/_react["default"].createElement(_portal.PortalProvider, _ref5.cn("PortalProvider", {
199
211
  "value": windowRef
@@ -224,18 +236,18 @@ function Close(props) {
224
236
  _ref7;
225
237
 
226
238
  var SClose = _flexBox.Box;
239
+ var Children = props.Children,
240
+ hasChildren = props.children,
241
+ getI18nText = props.getI18nText;
227
242
  return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref7.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
228
243
  "tag": "button",
229
244
  "tabIndex": 0,
230
- "aria-label": "Close"
231
- }, _ref4))));
245
+ "aria-label": getI18nText('close')
246
+ }, _ref4))), hasChildren ? /*#__PURE__*/_react["default"].createElement(Children, _ref7.cn("Children", {})) : /*#__PURE__*/_react["default"].createElement(_l["default"], _ref7.cn("CloseIcon", {
247
+ "title": getI18nText('close')
248
+ })));
232
249
  }
233
250
 
234
- Close.defaultProps = {
235
- children: /*#__PURE__*/_react["default"].createElement(_l["default"], {
236
- title: "Close"
237
- })
238
- };
239
251
  Close.enhance = [(0, _keyboardFocusEnhance["default"])()];
240
252
  var Modal = (0, _core["default"])(ModalRoot, {
241
253
  Window: Window,
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","names":["ModalRoot","e","key","stopPropagation","fire","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","isAdvanceMode","Modal","Overlay","displayName","Window","Component","style","FocusLockWrapper","React","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","useRef","sstyled","Box","SOverlay","FadeInOut","overlayRef","usePreventScroll","Close","SClose","defaultProps","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';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static defaultProps = {\n duration: 200,\n closable: true,\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 } = this.asProps;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n };\n }\n\n getCloseProps() {\n return {\n onClick: this.handleIconCloseClick,\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-label=\"Modal window\"\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 return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label=\"Close\" />,\n );\n}\n\nClose.defaultProps = {\n children: <CloseIcon title=\"Close\" />,\n};\n\nClose.enhance = [keyboardFocusEnhance()];\n\nconst Modal = createComponent(ModalRoot, {\n Window,\n Overlay,\n Close,\n});\n\nexport default Modal;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA;;AAHA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAGMA,S;;;;;;;;;;;;;;;sGAQY,UAACC,CAAD,EAAO;MACrB,IAAIA,CAAC,CAACC,GAAF,KAAU,QAAd,EAAwB;QACtBD,CAAC,CAACE,eAAF;QACA,IAAAC,gBAAA,kDAAW,SAAX,EAAsB,UAAtB,EAAkCH,CAAlC;MACD;IACF,C;6GAEsB,UAACA,CAAD,EAAO;MAC5B,IAAAG,gBAAA,kDAAW,SAAX,EAAsB,cAAtB,EAAsCH,CAAtC;IACD,C;2GAEoB,UAACA,CAAD,EAAO;MAC1B,IAAAG,gBAAA,kDAAW,SAAX,EAAsB,gBAAtB,EAAwCH,CAAxC;IACD,C;;;;;;WAED,2BAAkB;MAChB,oBAA8B,KAAKI,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,qBAA8B,KAAKJ,OAAnC;MAAA,IAAQE,OAAR,kBAAQA,OAAR;MAAA,IAAiBG,QAAjB,kBAAiBA,QAAjB;MACA,OAAO;QACLH,OAAO,EAAPA,OADK;QAELG,QAAQ,EAARA,QAFK;QAGLC,SAAS,EAAE,KAAKC;MAHX,CAAP;IAKD;;;WAED,yBAAgB;MACd,OAAO;QACLC,OAAO,EAAE,KAAKC;MADT,CAAP;IAGD;;;WAED,kBAAS;MAAA;MACP,qBAAoC,KAAKT,OAAzC;MAAA,IAAQU,QAAR,kBAAQA,QAAR;MAAA,IAAkBC,aAAlB,kBAAkBA,aAAlB;MAEA,IAAMC,WAAW,GAAG,IAAAC,4BAAA,EAAcH,QAAd,EAAwB,CAC1CI,KAAK,CAACC,OAAN,CAAcC,WAD4B,EAE1CF,KAAK,CAACG,MAAN,CAAaD,WAF6B,CAAxB,CAApB;MAKA,oBACE,gCAAC,kBAAD;QAAQ,aAAa,EAAEL;MAAvB,GACGC,WAAW,gBACV,gCAAC,QAAD,OADU,gBAGV,gCAAC,KAAD,CAAO,OAAP,qBACE,gCAAcE,KAAK,CAACG,MAApB,mCADF,CAJJ,CADF;IAWD;;;EAlEqBC,e;;iCAAlBvB,S,iBACiB,O;iCADjBA,S,WAEWwB,K;iCAFXxB,S,kBAGkB;EACpBM,QAAQ,EAAE,GADU;EAEpBI,QAAQ,EAAE;AAFU,C;;AAkExB,IAAMe,gBAAgB,gBAAGC,iBAAA,CAAMC,UAAN,CAAiB,iBAA6BC,GAA7B,EAAkC;EAAA,IAAtBC,GAAsB,SAAtBA,GAAsB;EAAA,IAAdC,KAAc;EAC1E,oBAAO,gCAAC,0BAAD;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,GAQDP,gBARZ;EACA,IAAQV,QAAR,GAAgDgB,KAAhD,CAAQhB,QAAR;EAAA,IAAkBkB,MAAlB,GAAgDF,KAAhD,CAAkBE,MAAlB;EAAA,IAA0B1B,OAA1B,GAAgDwB,KAAhD,CAA0BxB,OAA1B;EAAA,IAAmCG,QAAnC,GAAgDqB,KAAhD,CAAmCrB,QAAnC;EACA,IAAMwB,SAAS,GAAG,IAAAC,aAAA,EAAO,IAAP,CAAlB;EAEA,IAAI,CAAC5B,OAAL,EAAc,OAAO,IAAP;EAEd,eAAO,IAAA6B,aAAA,EAAQH,MAAR,CAAP,eACE,gCAAC,OAAD;IAAA,OAEOI,YAFP;IAAA,OAGOH,SAHP;IAAA,eAIe,IAJf;IAAA,YAKY,CAAC,CALb;IAAA,aAMa,IANb;IAAA,QAOO,QAPP;IAAA,cAQa,cARb;IAAA,cASc;EATd,0BAWE,gCAAC,sBAAD;IAAA,SAAuBA;EAAvB,IACGxB,QAAQ,iBAAI,gCAAC,KAAD,CAAO,KAAP,OADf,eAEE,gCAAC,QAAD,2BAFF,CAXF,CADF;AAkBD;;AAED,SAASU,OAAT,CAAiBW,KAAjB,EAAwB;EAAA;EAAA;;EACtB,IAAMO,QAAQ,GAMMC,oBANpB;EACA,IAAQxB,QAAR,GAAsDgB,KAAtD,CAAQhB,QAAR;EAAA,IAAkBkB,MAAlB,GAAsDF,KAAtD,CAAkBE,MAAlB;EAAA,IAA0BzB,cAA1B,GAAsDuB,KAAtD,CAA0BvB,cAA1B;EAAA,IAA0CD,OAA1C,GAAsDwB,KAAtD,CAA0CxB,OAA1C;EACA,IAAMiC,UAAU,GAAG,IAAAL,aAAA,EAAO,IAAP,CAAnB;EACA,IAAAM,4BAAA,EAAiBlC,OAAjB;EAEA,eAAO,IAAA6B,aAAA,EAAQH,MAAR,CAAP,eACE,gCAAC,QAAD;IAAA,OAAkCO;EAAlC,0BACE,gCAAC,wBAAD;IAAA,QAAoBA,UAApB;IAAA,kBAAgDhC;EAAhD,iBACE,gCAAC,QAAD,2BADF,CADF,CADF;AAOD;;AAED,SAASkC,KAAT,CAAeX,KAAf,EAAsB;EAAA;EAAA;;EACpB,IAAMY,MAAM,GAEMN,YAFlB;EACA,eAAO,IAAAD,aAAA,EAAQL,KAAK,CAACE,MAAd,CAAP,eACE,gCAAC,MAAD;IAAA,OAAyB,QAAzB;IAAA,YAA4C,CAA5C;IAAA,cAA0D;EAA1D,YADF;AAGD;;AAEDS,KAAK,CAACE,YAAN,GAAqB;EACnBC,QAAQ,eAAE,gCAAC,aAAD;IAAW,KAAK,EAAC;EAAjB;AADS,CAArB;AAIAH,KAAK,CAACI,OAAN,GAAgB,CAAC,IAAAC,gCAAA,GAAD,CAAhB;AAEA,IAAM5B,KAAK,GAAG,IAAA6B,gBAAA,EAAgBhD,SAAhB,EAA2B;EACvCsB,MAAM,EAANA,MADuC;EAEvCF,OAAO,EAAPA,OAFuC;EAGvCsB,KAAK,EAALA;AAHuC,CAA3B,CAAd;eAMevB,K"}
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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"}
@@ -1 +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}\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":""}
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":""}
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.localizedMessages = void 0;
9
+
10
+ var _de = _interopRequireDefault(require("./de.json"));
11
+
12
+ var _en = _interopRequireDefault(require("./en.json"));
13
+
14
+ var _es = _interopRequireDefault(require("./es.json"));
15
+
16
+ var _fr = _interopRequireDefault(require("./fr.json"));
17
+
18
+ var _it = _interopRequireDefault(require("./it.json"));
19
+
20
+ var _ja = _interopRequireDefault(require("./ja.json"));
21
+
22
+ var _ko = _interopRequireDefault(require("./ko.json"));
23
+
24
+ var _pt = _interopRequireDefault(require("./pt.json"));
25
+
26
+ var _tr = _interopRequireDefault(require("./tr.json"));
27
+
28
+ var _vi = _interopRequireDefault(require("./vi.json"));
29
+
30
+ var _zh = _interopRequireDefault(require("./zh.json"));
31
+
32
+ var localizedMessages = {
33
+ de: _de["default"],
34
+ en: _en["default"],
35
+ es: _es["default"],
36
+ fr: _fr["default"],
37
+ it: _it["default"],
38
+ ja: _ja["default"],
39
+ ko: _ko["default"],
40
+ pt: _pt["default"],
41
+ tr: _tr["default"],
42
+ vi: _vi["default"],
43
+ zh: _zh["default"]
44
+ };
45
+ exports.localizedMessages = localizedMessages;
46
+ //# sourceMappingURL=__intergalactic-dynamic-locales.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"__intergalactic-dynamic-locales.js","names":["localizedMessages","de","en","es","fr","it","ja","ko","pt","tr","vi","zh"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n de,\n en,\n es,\n fr,\n it,\n ja,\n ko,\n pt,\n tr,\n vi,\n zh,\n};\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEO,IAAMA,iBAAiB,GAAG;EAC/BC,EAAE,EAAFA,cAD+B;EAE/BC,EAAE,EAAFA,cAF+B;EAG/BC,EAAE,EAAFA,cAH+B;EAI/BC,EAAE,EAAFA,cAJ+B;EAK/BC,EAAE,EAAFA,cAL+B;EAM/BC,EAAE,EAAFA,cAN+B;EAO/BC,EAAE,EAAFA,cAP+B;EAQ/BC,EAAE,EAAFA,cAR+B;EAS/BC,EAAE,EAAFA,cAT+B;EAU/BC,EAAE,EAAFA,cAV+B;EAW/BC,EAAE,EAAFA;AAX+B,CAA1B"}
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Dialogfenster",
3
+ "close": "Schließen"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Modal window",
3
+ "close": "Close"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Ventana modal",
3
+ "close": "Cerrar"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Fenêtre modale",
3
+ "close": "Fermer"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Finestra modale",
3
+ "close": "Chiudi"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "モーダルウィンドウ",
3
+ "close": "閉じる"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "대화상자 창",
3
+ "close": "닫기"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Janela modal",
3
+ "close": "Fechar"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Modal pencere",
3
+ "close": "Kapat"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Cửa sổ phương thức",
3
+ "close": "Đóng"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "模态窗口",
3
+ "close": "关闭"
4
+ }
package/lib/es6/Modal.js CHANGED
@@ -40,16 +40,18 @@ var style = (
40
40
  /*__reshadow_css_start__*/
41
41
  _sstyled.insert(
42
42
  /*__inner_css_start__*/
43
- ".___SWindow_1lydh_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_1lydh_gg_:focus{outline:none}.___SOverlay_1lydh_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_1lydh_gg_ .___SOverlay_1lydh_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_1lydh_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_1lydh_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_1lydh_gg_.__keyboardFocused_1lydh_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_1lydh_gg_{min-width:60%}.___SOverlay_1lydh_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
43
+ ".___SWindow_b6m2p_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_b6m2p_gg_:focus{outline:none}.___SOverlay_b6m2p_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_b6m2p_gg_ .___SOverlay_b6m2p_gg_{background:var(--intergalactic-overlay-secondary,rgba(25,27,35,.4))}.___SClose_b6m2p_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_b6m2p_gg_:hover{color:var(--intergalactic-icon-secondary-neutral-hover-active,#8a8e9b)}.___SClose_b6m2p_gg_.__keyboardFocused_b6m2p_gg_{box-shadow:var(--intergalactic-keyboard-focus,0 0 0 3px rgba(0,143,248,.3))}@media (max-width:767px){.___SWindow_b6m2p_gg_{min-width:60%}.___SOverlay_b6m2p_gg_{padding:var(--intergalactic-spacing-3x,12px)}}"
44
44
  /*__inner_css_end__*/
45
- , "1lydh_gg_")
45
+ , "b6m2p_gg_")
46
46
  /*__reshadow_css_end__*/
47
47
  , {
48
- "__SWindow": "___SWindow_1lydh_gg_",
49
- "__SOverlay": "___SOverlay_1lydh_gg_",
50
- "__SClose": "___SClose_1lydh_gg_",
51
- "_keyboardFocused": "__keyboardFocused_1lydh_gg_"
48
+ "__SWindow": "___SWindow_b6m2p_gg_",
49
+ "__SOverlay": "___SOverlay_b6m2p_gg_",
50
+ "__SClose": "___SClose_b6m2p_gg_",
51
+ "_keyboardFocused": "__keyboardFocused_b6m2p_gg_"
52
52
  });
53
+ import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
54
+ import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
53
55
 
54
56
  var ModalRoot = /*#__PURE__*/function (_Component) {
55
57
  _inherits(ModalRoot, _Component);
@@ -102,18 +104,22 @@ var ModalRoot = /*#__PURE__*/function (_Component) {
102
104
  value: function getWindowProps() {
103
105
  var _this$asProps2 = this.asProps,
104
106
  visible = _this$asProps2.visible,
105
- closable = _this$asProps2.closable;
107
+ closable = _this$asProps2.closable,
108
+ getI18nText = _this$asProps2.getI18nText;
106
109
  return {
107
110
  visible: visible,
108
111
  closable: closable,
109
- onKeyDown: this.handleKeyDown
112
+ onKeyDown: this.handleKeyDown,
113
+ getI18nText: getI18nText
110
114
  };
111
115
  }
112
116
  }, {
113
117
  key: "getCloseProps",
114
118
  value: function getCloseProps() {
119
+ var getI18nText = this.asProps.getI18nText;
115
120
  return {
116
- onClick: this.handleIconCloseClick
121
+ onClick: this.handleIconCloseClick,
122
+ getI18nText: getI18nText
117
123
  };
118
124
  }
119
125
  }, {
@@ -137,9 +143,13 @@ _defineProperty(ModalRoot, "displayName", 'Modal');
137
143
 
138
144
  _defineProperty(ModalRoot, "style", style);
139
145
 
146
+ _defineProperty(ModalRoot, "enhance", [i18nEnhance(localizedMessages)]);
147
+
140
148
  _defineProperty(ModalRoot, "defaultProps", {
141
149
  duration: 200,
142
- closable: true
150
+ closable: true,
151
+ i18n: localizedMessages,
152
+ locale: 'en'
143
153
  });
144
154
 
145
155
  var FocusLockWrapper = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
@@ -161,7 +171,8 @@ function Window(props) {
161
171
  var Children = props.Children,
162
172
  styles = props.styles,
163
173
  visible = props.visible,
164
- closable = props.closable;
174
+ closable = props.closable,
175
+ getI18nText = props.getI18nText;
165
176
  var windowRef = useRef(null);
166
177
  if (!visible) return null;
167
178
  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SWindow, _ref5.cn("SWindow", _objectSpread({}, _assignProps2({
@@ -171,7 +182,7 @@ function Window(props) {
171
182
  "tabIndex": -1,
172
183
  "autoFocus": true,
173
184
  "role": "dialog",
174
- "aria-label": "Modal window",
185
+ "aria-label": getI18nText('title'),
175
186
  "aria-modal": true
176
187
  }, _ref2))), /*#__PURE__*/React.createElement(PortalProvider, _ref5.cn("PortalProvider", {
177
188
  "value": windowRef
@@ -202,18 +213,18 @@ function Close(props) {
202
213
  _ref7;
203
214
 
204
215
  var SClose = Box;
216
+ var Children = props.Children,
217
+ hasChildren = props.children,
218
+ getI18nText = props.getI18nText;
205
219
  return _ref7 = sstyled(props.styles), /*#__PURE__*/React.createElement(SClose, _ref7.cn("SClose", _objectSpread({}, _assignProps4({
206
220
  "tag": "button",
207
221
  "tabIndex": 0,
208
- "aria-label": "Close"
209
- }, _ref4))));
222
+ "aria-label": getI18nText('close')
223
+ }, _ref4))), hasChildren ? /*#__PURE__*/React.createElement(Children, _ref7.cn("Children", {})) : /*#__PURE__*/React.createElement(CloseIcon, _ref7.cn("CloseIcon", {
224
+ "title": getI18nText('close')
225
+ })));
210
226
  }
211
227
 
212
- Close.defaultProps = {
213
- children: /*#__PURE__*/React.createElement(CloseIcon, {
214
- title: "Close"
215
- })
216
- };
217
228
  Close.enhance = [keyboardFocusEnhance()];
218
229
  var Modal = createComponent(ModalRoot, {
219
230
  Window: Window,
@@ -1 +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","ModalRoot","e","key","stopPropagation","asProps","duration","visible","onOutsideClick","handleOutsideClick","closable","onKeyDown","handleKeyDown","onClick","handleIconCloseClick","Children","disablePortal","advanceMode","Modal","Overlay","displayName","Window","style","FocusLockWrapper","forwardRef","ref","tag","other","props","SWindow","styles","windowRef","SOverlay","overlayRef","Close","SClose","defaultProps","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';\n\nclass ModalRoot extends Component {\n static displayName = 'Modal';\n static style = style;\n static defaultProps = {\n duration: 200,\n closable: true,\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 } = this.asProps;\n return {\n visible,\n closable,\n onKeyDown: this.handleKeyDown,\n };\n }\n\n getCloseProps() {\n return {\n onClick: this.handleIconCloseClick,\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-label=\"Modal window\"\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 return sstyled(props.styles)(\n <SClose render={Box} tag=\"button\" tabIndex={0} aria-label=\"Close\" />,\n );\n}\n\nClose.defaultProps = {\n children: <CloseIcon title=\"Close\" />,\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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"}
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":"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"}
@@ -1 +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}\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":""}
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":""}
@@ -0,0 +1,25 @@
1
+ import de from './de.json';
2
+ import en from './en.json';
3
+ import es from './es.json';
4
+ import fr from './fr.json';
5
+ import it from './it.json';
6
+ import ja from './ja.json';
7
+ import ko from './ko.json';
8
+ import pt from './pt.json';
9
+ import tr from './tr.json';
10
+ import vi from './vi.json';
11
+ import zh from './zh.json';
12
+ export var localizedMessages = {
13
+ de: de,
14
+ en: en,
15
+ es: es,
16
+ fr: fr,
17
+ it: it,
18
+ ja: ja,
19
+ ko: ko,
20
+ pt: pt,
21
+ tr: tr,
22
+ vi: vi,
23
+ zh: zh
24
+ };
25
+ //# sourceMappingURL=__intergalactic-dynamic-locales.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","pt","tr","vi","zh","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\n\nexport const localizedMessages = {\n de,\n en,\n es,\n fr,\n it,\n ja,\n ko,\n pt,\n tr,\n vi,\n zh,\n};\n"],"mappings":"AAAA,OAAOA,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AACA,OAAOC,EAAP,MAAe,WAAf;AAEA,OAAO,IAAMC,iBAAiB,GAAG;EAC/BX,EAAE,EAAFA,EAD+B;EAE/BC,EAAE,EAAFA,EAF+B;EAG/BC,EAAE,EAAFA,EAH+B;EAI/BC,EAAE,EAAFA,EAJ+B;EAK/BC,EAAE,EAAFA,EAL+B;EAM/BC,EAAE,EAAFA,EAN+B;EAO/BC,EAAE,EAAFA,EAP+B;EAQ/BC,EAAE,EAAFA,EAR+B;EAS/BC,EAAE,EAAFA,EAT+B;EAU/BC,EAAE,EAAFA,EAV+B;EAW/BC,EAAE,EAAFA;AAX+B,CAA1B"}
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Dialogfenster",
3
+ "close": "Schließen"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Modal window",
3
+ "close": "Close"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Ventana modal",
3
+ "close": "Cerrar"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Fenêtre modale",
3
+ "close": "Fermer"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Finestra modale",
3
+ "close": "Chiudi"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "モーダルウィンドウ",
3
+ "close": "閉じる"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "대화상자 창",
3
+ "close": "닫기"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Janela modal",
3
+ "close": "Fechar"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Modal pencere",
3
+ "close": "Kapat"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "Cửa sổ phương thức",
3
+ "close": "Đóng"
4
+ }
@@ -0,0 +1,4 @@
1
+ {
2
+ "title": "模态窗口",
3
+ "close": "关闭"
4
+ }
@@ -20,6 +20,7 @@ export interface IModalProps extends IPortalProps, IBoxProps, IFadeInOutProps {
20
20
  * @default true
21
21
  * */
22
22
  closable?: boolean;
23
+ locale?: string;
23
24
  }
24
25
 
25
26
  export interface IModalContext {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/modal",
3
3
  "description": "Semrush Modal Component",
4
- "version": "3.2.1",
4
+ "version": "3.3.1",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",