@mirai/ui 1.0.73 → 1.0.75

package/README.md

@@ -669,6 +669,7 @@ const MyComponent = () => {
 
 A modal component receiving the following props:
 
+- `blur:bool` if you want use a _glashmorphism_ effect in the overflow
 - `children:node`
 - `fit:bool` if you want use fit width with the content
 - `overflow:bool` wraps all modal in a semi-transparent layer

package/build/components/Modal/Modal.js

@@ -1,23 +1,28 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modal = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _excluded = ["children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose"];
+var _excluded = ["blur", "children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose"];
+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 }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 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; }
 var Modal = function Modal(_ref) {
-  var children = _ref.children,
+  var _ref$blur = _ref.blur,
+    blur = _ref$blur === void 0 ? false : _ref$blur,
+    children = _ref.children,
     _ref$fit = _ref.fit,
     fit = _ref$fit === void 0 ? false : _ref$fit,
     _ref$overflow = _ref.overflow,
@@ -31,13 +36,16 @@ var Modal = function Modal(_ref) {
     others = _objectWithoutProperties(_ref, _excluded);
   var _useDevice = (0, _hooks.useDevice)(),
     isDesktop = _useDevice.isDesktop;
+  (0, _react.useEffect)(function () {
+    document.body.style.overflow = visible ? 'hidden' : 'inherit';
+  }, [visible]);
   var renderer = _helpers.IS_JEST || !portal ? function (jsx) {
     return jsx;
   } : _reactDom.default.createPortal;
   var testId = others['data-testid'];
   return renderer( /*#__PURE__*/_react.default.createElement(_primitives.View, {
     row: true,
-    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, visible && _ModalModule.default.visible)
+    className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible)
   }, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
     fit: true,
     className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
@@ -63,10 +71,11 @@ var Modal = function Modal(_ref) {
 };
 exports.Modal = Modal;
 Modal.propTypes = {
+  blur: _propTypes.default.bool,
   children: _propTypes.default.node,
   fit: _propTypes.default.bool,
-  portal: _propTypes.default.bool,
   overflow: _propTypes.default.bool,
+  portal: _propTypes.default.bool,
   title: _propTypes.default.string,
   visible: _propTypes.default.bool,
   onBack: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","children","fit","overflow","portal","title","visible","onBack","onClose","others","useDevice","isDesktop","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","document","body","propTypes","PropTypes","node","bool","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View row className={styles(style.container, overflow && style.overflow, visible && style.visible)}>\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  portal: PropTypes.bool,\n  overflow: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","others","useDevice","isDesktop","useEffect","document","body","style","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","container","modal","calcWidth","className","header","undefined","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n\n  useEffect(() => {\n    document.body.style.overflow = visible ? 'hidden' : 'inherit';\n  }, [visible]);\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <View\n      row\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n      )}\n    >\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </View>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Modal/Modal.module.css

@@ -9,6 +9,10 @@
   z-index: var(--mirai-ui-modal-layer);
 }
 
+.container.visible {
+  pointer-events: all;
+}
+
 .header {
   align-items: center;
   border-bottom: solid var(--mirai-ui-border-width) var(--mirai-ui-content-border);
@@ -53,14 +57,18 @@
 .overflow {
   background-color: var(--mirai-ui-modal-overflow);
   opacity: 0;
-  pointer-events: none;
-  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  transition: backdrop-filter var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
 }
 
-.container.visible {
+.overflow.visible {
   opacity: 1;
 }
 
+.overflow.blur.visible {
+  backdrop-filter: blur(4px);
+}
+
 /* S */
 @media only screen and (max-width: 430px) {
   .container {
@@ -73,6 +81,8 @@
   }
 
   .modal {
+    border-top-left-radius: var(--mirai-ui-modal-border-radius);
+    border-top-right-radius: var(--mirai-ui-modal-border-radius);
     transform: translateY(100%);
     width: 100%;
   }
@@ -90,7 +100,7 @@
   }
 }
 
-/* M */
+/* M & L */
 @media only screen and (min-width: 431px) {
   .container {
     align-items: center;

package/build/components/Modal/Modal.stories.js

@@ -24,6 +24,7 @@ var Story = function Story(props) {
 exports.Story = Story;
 Story.storyName = 'Modal';
 Story.args = _defineProperty({
+  blur: false,
   fit: false,
   overflow: true,
   portal: false,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","fit","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,YAAK,EAAKA,KAAK,eACd;IAAM,SAAS,EAAC;EAAU,cAAgB,CACpC;AAAA,CACT;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbP,KAAK,EAAE,OAAO;EACdQ,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDP,KAAK,CAACQ,QAAQ,GAAG;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Modal.stories.js","names":["title","Story","props","storyName","args","blur","fit","overflow","portal","visible","argTypes","onBack","action","onClose"],"sources":["../../../src/components/Modal/Modal.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Modal } from './Modal';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n  <Modal {...props}>\n    <span className=\"children\">children</span>\n  </Modal>\n);\n\nStory.storyName = 'Modal';\n\nStory.args = {\n  blur: false,\n  fit: false,\n  overflow: true,\n  portal: false,\n  title: 'title',\n  visible: true,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onBack: { action: 'onBack' },\n  onClose: { action: 'onClose' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,oBAAC,YAAK,EAAKA,KAAK,eACd;IAAM,SAAS,EAAC;EAAU,cAAgB,CACpC;AAAA,CACT;AAAC;AAEFD,KAAK,CAACE,SAAS,GAAG,OAAO;AAEzBF,KAAK,CAACG,IAAI;EACRC,IAAI,EAAE,KAAK;EACXC,GAAG,EAAE,KAAK;EACVC,QAAQ,EAAE,IAAI;EACdC,MAAM,EAAE,KAAK;EACbR,KAAK,EAAE,OAAO;EACdS,OAAO,EAAE;AAAI,GACZ,aAAa,EAAG,YAAY,CAC9B;AAEDR,KAAK,CAACS,QAAQ,GAAG;EACfC,MAAM,EAAE;IAAEC,MAAM,EAAE;EAAS,CAAC;EAC5BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU;AAC/B,CAAC"}

package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -220,6 +220,18 @@ exports[`component:<Modal> prop:title 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Modal> prop:visible & prop:blur 1`] = `
+<DocumentFragment>
+  <div
+    class="view row container overflow blur visible"
+  >
+    <div
+      class="view fit modal calcWidth visible"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
 <DocumentFragment>
   <div
@@ -232,7 +244,7 @@ exports[`component:<Modal> prop:visible & prop:overflow (false) 1`] = `
 </DocumentFragment>
 `;
 
-exports[`component:<Modal> prop:visible 1`] = `
+exports[`component:<Modal> prop:visible renders 1`] = `
 <DocumentFragment>
   <div
     class="view row container overflow visible"

package/build/theme/default.theme.css

@@ -94,7 +94,7 @@
   --mirai-ui-border-width: 1px;
 
   /* shadow */
-  --mirai-ui-shadow: 0 0 var(--mirai-ui-space-XS) var(--mirai-ui-content-border);
+  --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
 }
 
 /* -------------------------------------------------------------------------- */
@@ -224,11 +224,11 @@
 
   /* Modal */
   --mirai-ui-modal-background: var(--mirai-ui-base);
-  --mirai-ui-modal-border-radius: var(--mirai-ui-border-radius);
+  --mirai-ui-modal-border-radius: calc(var(--mirai-ui-border-radius) * 2);
   --mirai-ui-modal-header-padding: var(--mirai-ui-space-M);
   --mirai-ui-modal-icon: var(--mirai-ui-font-size-headline-2);
   --mirai-ui-modal-layer: var(--mirai-ui-layer-L);
-  --mirai-ui-modal-overflow: rgba(72, 72, 72, 0.15);
+  --mirai-ui-modal-overflow: rgba(72, 72, 72, 0.2);
   --mirai-ui-modal-shadow: var(--mirai-ui-shadow);
 
   /* Notification */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",