@mirai/ui 1.1.16 → 2.0.2

package/build/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isMobile","renderOptions","filter","option","map","index","testId","undefined","event","value","role","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n  const { isMobile } = useDevice();\n\n  const renderOptions = () =>\n    options\n      .filter((option) => !!option)\n      .map((option = {}, index) => (\n        <Template\n          testId={others.testId ? `${others.testId}-${index}` : undefined}\n          {...option}\n          key={index}\n          onPress={(event) => onPress(option.value, event)}\n        />\n      ));\n\n  return !isMobile ? (\n    <Layer\n      forceRender={false}\n      {...others}\n      visible={visible}\n      role={others.role || 'menu'}\n      className={styles(style.menu, visible && style.visible, others.className)}\n    >\n      {children}\n      <LayerContent>{renderOptions()}</LayerContent>\n    </Layer>\n  ) : (\n    <>\n      {children}\n      <Modal\n        title={title}\n        visible={visible}\n        onClose={(event) => onPress(undefined, event)}\n        onOverflow={(event) => onPress(undefined, event)}\n        className={styles(style.menu, others.className)}\n      >\n        {renderOptions()}\n      </Modal>\n    </>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.func,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    }),\n  ),\n  Template: PropTypes.any,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":"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"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","title","visible","onPress","others","useDevice","isMobile","renderOptions","filter","option","map","index","testId","undefined","event","value","role","tag","styles","style","menu","className","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, title, visible, onPress = () => {}, ...others }) => {\n  const { isMobile } = useDevice();\n\n  const renderOptions = () =>\n    options\n      .filter((option) => !!option)\n      .map((option = {}, index) => (\n        <Template\n          testId={others.testId ? `${others.testId}-${index}` : undefined}\n          {...option}\n          key={index}\n          onPress={(event) => onPress(option.value, event)}\n        />\n      ));\n\n  return !isMobile ? (\n    <Layer\n      forceRender={false}\n      {...others}\n      visible={visible}\n      role={others.role || 'menu'}\n      tag={others.tag || 'menu'}\n      className={styles(style.menu, visible && style.visible, others.className)}\n    >\n      {children}\n      <LayerContent>{renderOptions()}</LayerContent>\n    </Layer>\n  ) : (\n    <>\n      {children}\n      <Modal\n        title={title}\n        visible={visible}\n        onClose={(event) => onPress(undefined, event)}\n        onOverflow={(event) => onPress(undefined, event)}\n        className={styles(style.menu, others.className)}\n      >\n        {renderOptions()}\n      </Modal>\n    </>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.func,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n    }),\n  ),\n  Template: PropTypes.any,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":"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"}

package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap

@@ -2,7 +2,7 @@
 
 exports[`component:<Menu> inherit:className 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
   />
 </DocumentFragment>
@@ -10,70 +10,75 @@ exports[`component:<Menu> inherit:className 1`] = `
 
 exports[`component:<Menu> prop:Template 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
+  </ui_menu>
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> prop:children 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
+  </ui_menu>
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> prop:options & visible 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_menu>
+  <ui_menu_content
     class="layer"
     style="left: 0px; top: 0px;"
   >
     <div
       class="menu visible"
     >
-      <div
+      <ui_pressable
         class="pressable option divider"
+        tabindex="0"
       >
-        <div
+        <ui_view
           class="view row wide content"
         >
-          <span
+          <ui_text
             class="text paragraph label"
           >
             Lorem Ipsum...
-          </span>
-        </div>
-      </div>
-      <div
+          </ui_text>
+        </ui_view>
+      </ui_pressable>
+      <ui_pressable
         class="pressable option value"
+        tabindex="0"
       >
-        <div
+        <ui_view
           class="view row wide content"
         >
-          <span
+          <ui_icon
             class="icon headline-3 icon"
           >
             <svg
@@ -93,22 +98,23 @@ exports[`component:<Menu> prop:options & visible 1`] = `
                 d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
               />
             </svg>
-          </span>
-          <span
+          </ui_icon>
+          <ui_text
             class="text paragraph label"
           >
             Item 1
-          </span>
-        </div>
-      </div>
-      <div
+          </ui_text>
+        </ui_view>
+      </ui_pressable>
+      <ui_pressable
         class="pressable option value disabled"
         data-testid="two"
+        tabindex="0"
       >
-        <div
+        <ui_view
           class="view row wide content"
         >
-          <span
+          <ui_icon
             class="icon headline-3 icon"
           >
             <svg
@@ -128,102 +134,117 @@ exports[`component:<Menu> prop:options & visible 1`] = `
                 d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
               />
             </svg>
-          </span>
-          <span
+          </ui_icon>
+          <ui_text
             class="text paragraph label"
           >
             Item 2
-          </span>
-        </div>
-      </div>
-      <div
+          </ui_text>
+        </ui_view>
+      </ui_pressable>
+      <ui_pressable
         class="pressable option value divider"
+        tabindex="0"
       >
-        <div
+        <ui_view
           class="view row wide content"
         >
-          <span
+          <ui_text
             class="text paragraph label"
           >
             Item 3
-          </span>
-        </div>
-      </div>
-      <div
+          </ui_text>
+        </ui_view>
+      </ui_pressable>
+      <ui_pressable
         class="pressable option value"
+        tabindex="0"
       >
-        <div
+        <ui_view
           class="view row wide content"
         >
-          <span
+          <ui_text
             class="text paragraph label"
           >
             Item 4
-          </span>
+          </ui_text>
           <button
             class="pressable button small"
+            tabindex="0"
           >
             Add
           </button>
-        </div>
-      </div>
-      <div
+        </ui_view>
+      </ui_pressable>
+      <ui_pressable
         class="pressable option"
+        tabindex="0"
       >
-        <div
+        <ui_view
           class="view row wide content"
         >
           <button
             class="pressable button"
+            tabindex="0"
           >
             Add
           </button>
-        </div>
-      </div>
+        </ui_view>
+      </ui_pressable>
     </div>
-  </div>
+  </ui_menu_content>
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> prop:options 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
+  </ui_menu>
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> prop:title 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_menu>
+  <ui_menu_content
     class="layer"
     style="left: 0px; top: 0px;"
   >
     <div
       class="menu visible"
     />
-  </div>
+  </ui_menu_content>
 </DocumentFragment>
 `;
 
 exports[`component:<Menu> renders 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
+    class="container"
+  />
+</DocumentFragment>
+`;
+
+exports[`component:<Menu> tag 1`] = `
+<DocumentFragment>
+  <ui_tag
     class="container"
   />
 </DocumentFragment>
@@ -231,7 +252,7 @@ exports[`component:<Menu> renders 1`] = `
 
 exports[`component:<Menu> testId 1`] = `
 <DocumentFragment>
-  <span
+  <ui_menu
     class="container"
     data-testid="mirai"
   />

package/build/components/Modal/Modal.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modal = void 0;
-var _dataSources = require("@mirai/data-sources");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -16,7 +15,7 @@ var _primitives = require("../../primitives");
 var _theme = require("../../theme");
 var _Modal = require("./Modal.constants");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _excluded = ["blur", "children", "displayName", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow"];
+var _excluded = ["blur", "children", "displayName", "fit", "mobileBehavior", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow", "aria"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -34,6 +33,11 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+// import { Event } from '@mirai/data-sources';
+var Event = {
+  publish: function publish() {},
+  subscribe: function subscribe() {}
+};
 var Modal = function Modal(_ref) {
   var _ref$blur = _ref.blur,
     blur = _ref$blur === void 0 ? false : _ref$blur,
@@ -54,6 +58,12 @@ var Modal = function Modal(_ref) {
     onBack = _ref.onBack,
     onClose = _ref.onClose,
     onOverflow = _ref.onOverflow,
+    _ref$aria = _ref.aria;
+  _ref$aria = _ref$aria === void 0 ? {} : _ref$aria;
+  var _ref$aria$buttonBack = _ref$aria.buttonBack,
+    ariaBack = _ref$aria$buttonBack === void 0 ? 'Back' : _ref$aria$buttonBack,
+    _ref$aria$buttonClose = _ref$aria.buttonClose,
+    ariaClose = _ref$aria$buttonClose === void 0 ? 'Close' : _ref$aria$buttonClose,
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
     isDesktop = _useDevice.isDesktop,
@@ -66,7 +76,7 @@ var Modal = function Modal(_ref) {
     setDataset = _useState2[1];
   (0, _react.useEffect)(function () {
     if (!visible || !onClose) return;
-    _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+    Event.publish(_Modal.EVENT_VISIBLE, {
       visible: visible,
       displayName: displayName
     });
@@ -95,7 +105,7 @@ var Modal = function Modal(_ref) {
     var _ref$current;
     var target = event.target;
     if (onOverflow && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target))) {
-      _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+      Event.publish(_Modal.EVENT_VISIBLE, {
         visible: false,
         displayName: displayName
       });
@@ -103,7 +113,7 @@ var Modal = function Modal(_ref) {
     }
   };
   var handleClose = function handleClose(event) {
-    _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+    Event.publish(_Modal.EVENT_VISIBLE, {
       visible: false,
       displayName: displayName
     });
@@ -116,7 +126,8 @@ var Modal = function Modal(_ref) {
   var testId = others.testId;
   return renderer( /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     preventDefault: preventDefault,
-    role: others.role ? "".concat(others.role, "-overflow") : 'modal-overflow',
+    role: "".concat(others.role || 'modal', "-overflow"),
+    tag: "".concat(others.tag || 'modal', "_overflow"),
     onPress: visible && overflow ? handleOverflow : undefined,
     className: (0, _helpers.styles)(_ModalModule.default.container, isDesktop && mobileBehavior && _ModalModule.default.mobileBehavior, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible, onOverflow && _ModalModule.default.onOverflow),
     style: {
@@ -127,7 +138,8 @@ var Modal = function Modal(_ref) {
     fit: true,
     ref: ref,
     role: others.role || 'modal',
-    className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
+    className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className),
+    "aria-hidden": visible ? 'false' : 'true'
   }), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
     className: (0, _helpers.styles)(_ModalModule.default.header, !defaultDirection && _ModalModule.default.reverse, !onBack && _ModalModule.default.hideBack, !onClose && _ModalModule.default.hideClose)
@@ -136,6 +148,7 @@ var Modal = function Modal(_ref) {
     squared: true,
     transparent: true,
     onPress: onBack,
+    "aria-label": ariaBack,
     testId: testId ? "".concat(testId, "-button-back") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: _primitives.ICON.LEFT,
@@ -148,8 +161,9 @@ var Modal = function Modal(_ref) {
     squared: true,
     transparent: true,
     onPress: handleClose,
-    testId: testId ? "".concat(testId, "-button-close") : undefined,
-    className: _ModalModule.default.button
+    className: _ModalModule.default.button,
+    "aria-label": ariaClose,
+    testId: testId ? "".concat(testId, "-button-close") : undefined
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: isDesktop || title !== undefined ? _primitives.ICON.CLOSE : _primitives.ICON.EXPAND_MORE,
     className: _ModalModule.default.icon
@@ -176,6 +190,10 @@ Modal.propTypes = {
   visible: _propTypes.default.bool,
   onBack: _propTypes.default.func,
   onClose: _propTypes.default.func,
-  onOverflow: _propTypes.default.func
+  onOverflow: _propTypes.default.func,
+  aria: _propTypes.default.shape({
+    buttonBack: _propTypes.default.string,
+    buttonClose: _propTypes.default.string
+  })
 };
 //# sourceMappingURL=Modal.js.map

package/build/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button small squared transparent onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Event","publish","subscribe","Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","aria","buttonBack","ariaBack","buttonClose","ariaClose","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","tag","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func","shape"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["// import { Event } from '@mirai/data-sources';\nconst Event = {\n  publish: () => {},\n  subscribe: () => {},\n};\nimport PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  aria: { buttonBack: ariaBack = 'Back', buttonClose: ariaClose = 'Close' } = {},\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={`${others.role || 'modal'}-overflow`}\n      tag={`${others.tag || 'modal'}_overflow`}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n        aria-hidden={visible ? 'false' : 'true'}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onBack}\n                aria-label={ariaBack}\n                testId={testId ? `${testId}-button-back` : undefined}\n              >\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                className={style.button}\n                aria-label={ariaClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n  aria: PropTypes.shape({\n    buttonBack: PropTypes.string,\n    buttonClose: PropTypes.string,\n  }),\n};\n\nexport { Modal };\n"],"mappings":"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"}