@mirai/ui 1.0.93 → 1.0.94

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

@@ -30,12 +30,11 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M24 24H0V0h24v24z"
+                d="M0 0h24v24H0V0z"
                 fill="none"
-                opacity=".87"
               />
               <path
-                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
           </span>
@@ -173,12 +172,11 @@ exports[`component:<Modal> prop:onClose 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M24 24H0V0h24v24z"
+                d="M0 0h24v24H0V0z"
                 fill="none"
-                opacity=".87"
               />
               <path
-                d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
               />
             </svg>
           </span>

package/build/hooks/helpers/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _getNavigator = require("./getNavigator");
+Object.keys(_getNavigator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getNavigator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getNavigator[key];
+    }
+  });
+});
 var _getResolution = require("./getResolution");
 Object.keys(_getResolution).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -14,14 +25,14 @@ Object.keys(_getResolution).forEach(function (key) {
     }
   });
 });
-var _getNavigator = require("./getNavigator");
-Object.keys(_getNavigator).forEach(function (key) {
+var _sanitizePx = require("./sanitizePx");
+Object.keys(_sanitizePx).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _getNavigator[key]) return;
+  if (key in exports && exports[key] === _sanitizePx[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _getNavigator[key];
+      return _sanitizePx[key];
     }
   });
 });

package/build/hooks/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/hooks/helpers/index.js"],"sourcesContent":["export * from './getResolution';\nexport * from './getNavigator';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/hooks/helpers/index.js"],"sourcesContent":["export * from './getNavigator';\nexport * from './getResolution';\nexport * from './sanitizePx';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/hooks/helpers/sanitizePx.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sanitizePx = void 0;
+var sanitizePx = function sanitizePx(text) {
+  return typeof text === 'string' && text.trim().length > 0 ? parseInt(text.replace('px')) : undefined;
+};
+exports.sanitizePx = sanitizePx;
+//# sourceMappingURL=sanitizePx.js.map

package/build/hooks/helpers/sanitizePx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitizePx.js","names":["sanitizePx","text","trim","length","parseInt","replace","undefined"],"sources":["../../../src/hooks/helpers/sanitizePx.js"],"sourcesContent":["export const sanitizePx = (text) =>\n  typeof text === 'string' && text.trim().length > 0 ? parseInt(text.replace('px')) : undefined;\n"],"mappings":";;;;;;AAAO,IAAMA,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAI;EAAA,OAC7B,OAAOA,IAAI,KAAK,QAAQ,IAAIA,IAAI,CAACC,IAAI,EAAE,CAACC,MAAM,GAAG,CAAC,GAAGC,QAAQ,CAACH,IAAI,CAACI,OAAO,CAAC,IAAI,CAAC,CAAC,GAAGC,SAAS;AAAA;AAAC"}

package/build/hooks/useDevice.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useDevice = void 0;
 var _react = require("react");
+var _theme = require("../theme");
 var _helpers = require("./helpers");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -33,14 +34,19 @@ var useDevice = function useDevice() {
     };
   }, []);
   return (0, _react.useMemo)(function () {
+    var _Theme$get = _theme.Theme.get(),
+      breakpointS = _Theme$get.breakpointS,
+      breakpointM = _Theme$get.breakpointM;
     var isLandscape = resolution.width >= resolution.height;
-    var isMobile = resolution.width <= 430;
+    var isMobile = resolution.width <= (0, _helpers.sanitizePx)(breakpointS);
+    var isTablet = !isMobile && resolution.width <= (0, _helpers.sanitizePx)(breakpointM);
     var navigator = (0, _helpers.getNavigator)();
     return _objectSpread(_objectSpread(_objectSpread({}, resolution), navigator), {}, {
       isLandscape: isLandscape,
       isPortrait: !isLandscape,
       isMobile: isMobile,
-      isDesktop: !isMobile
+      isTablet: isTablet,
+      isDesktop: !isMobile && !isTablet
     });
   }, [resolution]);
 };

package/build/hooks/useDevice.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","isLandscape","width","height","isMobile","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { getResolution, getNavigator } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= 430;\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isDesktop: !isMobile,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAwD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEjD,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,IAAMC,WAAW,GAAGR,UAAU,CAACS,KAAK,IAAIT,UAAU,CAACU,MAAM;IACzD,IAAMC,QAAQ,GAAGX,UAAU,CAACS,KAAK,IAAI,GAAG;IACxC,IAAMG,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKb,UAAU,GACVY,SAAS;MACZJ,WAAW,EAAXA,WAAW;MACXM,UAAU,EAAE,CAACN,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACJ;IAAQ;EAExB,CAAC,EAAE,CAACX,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}
+{"version":3,"file":"useDevice.js","names":["useDevice","useState","getResolution","resolution","setResolution","useEffect","handleResize","window","addEventListener","removeEventListener","useMemo","Theme","get","breakpointS","breakpointM","isLandscape","width","height","isMobile","sanitizePx","isTablet","navigator","getNavigator","isPortrait","isDesktop"],"sources":["../../src/hooks/useDevice.js"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { Theme } from '../theme';\nimport { getResolution, getNavigator, sanitizePx } from './helpers';\n\nexport const useDevice = () => {\n  const [resolution, setResolution] = useState(getResolution());\n\n  useEffect(() => {\n    const handleResize = () => setResolution(getResolution());\n\n    window.addEventListener('resize', handleResize);\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return useMemo(() => {\n    const { breakpointS, breakpointM } = Theme.get();\n    const isLandscape = resolution.width >= resolution.height;\n    const isMobile = resolution.width <= sanitizePx(breakpointS);\n    const isTablet = !isMobile && resolution.width <= sanitizePx(breakpointM);\n    const navigator = getNavigator();\n\n    return {\n      ...resolution,\n      ...navigator,\n      isLandscape,\n      isPortrait: !isLandscape,\n      isMobile,\n      isTablet,\n      isDesktop: !isMobile && !isTablet,\n    };\n  }, [resolution]);\n};\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7D,IAAMA,SAAS,GAAG,SAAZA,SAAS,GAAS;EAC7B,gBAAoC,IAAAC,eAAQ,EAAC,IAAAC,sBAAa,GAAE,CAAC;IAAA;IAAtDC,UAAU;IAAEC,aAAa;EAEhC,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAMC,YAAY,GAAG,SAAfA,YAAY;MAAA,OAASF,aAAa,CAAC,IAAAF,sBAAa,GAAE,CAAC;IAAA;IAEzDK,MAAM,CAACC,gBAAgB,CAAC,QAAQ,EAAEF,YAAY,CAAC;IAE/C,OAAO;MAAA,OAAMC,MAAM,CAACE,mBAAmB,CAAC,QAAQ,EAAEH,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAI,cAAO,EAAC,YAAM;IACnB,iBAAqCC,YAAK,CAACC,GAAG,EAAE;MAAxCC,WAAW,cAAXA,WAAW;MAAEC,WAAW,cAAXA,WAAW;IAChC,IAAMC,WAAW,GAAGZ,UAAU,CAACa,KAAK,IAAIb,UAAU,CAACc,MAAM;IACzD,IAAMC,QAAQ,GAAGf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACN,WAAW,CAAC;IAC5D,IAAMO,QAAQ,GAAG,CAACF,QAAQ,IAAIf,UAAU,CAACa,KAAK,IAAI,IAAAG,mBAAU,EAACL,WAAW,CAAC;IACzE,IAAMO,SAAS,GAAG,IAAAC,qBAAY,GAAE;IAEhC,qDACKnB,UAAU,GACVkB,SAAS;MACZN,WAAW,EAAXA,WAAW;MACXQ,UAAU,EAAE,CAACR,WAAW;MACxBG,QAAQ,EAARA,QAAQ;MACRE,QAAQ,EAARA,QAAQ;MACRI,SAAS,EAAE,CAACN,QAAQ,IAAI,CAACE;IAAQ;EAErC,CAAC,EAAE,CAACjB,UAAU,CAAC,CAAC;AAClB,CAAC;AAAC"}

package/build/theme/default.theme.css

@@ -78,7 +78,7 @@
 
   /* breakpoints */
   --mirai-ui-breakpoint-S: 430px;
-  --mirai-ui-breakpoint-M: 768px;
+  --mirai-ui-breakpoint-M: 820px;
   --mirai-ui-breakpoint-content: 1280px;
 
   /* motion */

package/package.json

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