@hyphen/hyphen-components 2.21.0 → 2.22.0

package/dist/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export * from './useBreakpoint/useBreakpoint';
+export * from './useIsMobile/useIsMobile';
 export * from './useIsomorphicLayoutEffect/useIsomorphicLayouEffect';
 export * from './useOpenClose/useOpenClose';
 export * from './useTheme/useTheme';

package/dist/hooks/useIsMobile/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): Boolean;

package/dist/hooks/useIsMobile/useIsMobile.stories.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { useIsMobile } from '../useIsMobile/useIsMobile';
+declare const meta: Meta<typeof useIsMobile>;
+export default meta;
+export declare const BasicUsage: () => React.JSX.Element;

package/dist/hyphen-components.cjs.development.js

@@ -23,6 +23,25 @@ var AsyncSelect = require('react-select/async');
 var CreatableSelect = require('react-select/creatable');
 var uuid = require('uuid');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return n;
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -4652,6 +4671,28 @@ var useBreakpoint = function useBreakpoint() {
   };
 };
 
+var desktopBreakpoint = /*#__PURE__*/BREAKPOINTS.find(function (b) {
+  return b.name === 'desktop';
+});
+var MOBILE_BREAKPOINT = desktopBreakpoint ? desktopBreakpoint.minWidth : 0; // min width in pixels
+function useIsMobile() {
+  var _React$useState = React__namespace.useState(undefined),
+    isMobile = _React$useState[0],
+    setIsMobile = _React$useState[1];
+  React__namespace.useEffect(function () {
+    var mql = window.matchMedia("(max-width: " + (MOBILE_BREAKPOINT - 1) + "px)");
+    var onChange = function onChange() {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return function () {
+      return mql.removeEventListener('change', onChange);
+    };
+  }, []);
+  return !!isMobile;
+}
+
 var useOpenClose = function useOpenClose(props) {
   if (props === void 0) {
     props = {};
@@ -4762,6 +4803,7 @@ exports.boxPropsKeys = boxPropsKeys;
 exports.createRectRef = createRectRef;
 exports.toast = toast;
 exports.useBreakpoint = useBreakpoint;
+exports.useIsMobile = useIsMobile;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useOpenClose = useOpenClose;
 exports.useTheme = useTheme;