@react-spectrum/utils - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/main.js

 var {
-  mergeProps
+  mergeProps,
+  useLayoutEffect
 } = require("@react-aria/utils");
@@ -13,2 +14,6 @@
 
+var {
+  useIsSSR
+} = require("@react-aria/ssr");
+
 var _react2 = require("react");
@@ -24,4 +29,3 @@
   useContext,
-  useMemo,
-  useLayoutEffect
+  useMemo
 } = _react2;
@@ -118,4 +122,7 @@
     };
-  }, [supportsMatchMedia, query]);
-  return matches;
+  }, [supportsMatchMedia, query]); // If in SSR, the media query should never match. Once the page hydrates,
+  // this will update and the real value will be returned.
+
+  let isSSR = useIsSSR();
+  return isSSR ? false : matches;
 }
@@ -531,2 +538,15 @@
 exports.useResizeObserver = useResizeObserver;
+const $dfba26b46b2b2f027a9d4ad19567e6fd$var$MOBILE_SCREEN_WIDTH = 700;
+
+function useIsMobileDevice() {
+  let isSSR = useIsSSR();
+
+  if (isSSR || typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.screen.width <= $dfba26b46b2b2f027a9d4ad19567e6fd$var$MOBILE_SCREEN_WIDTH;
+}
+
+exports.useIsMobileDevice = useIsMobileDevice;
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,6 +0,7 @@
-import { mergeProps } from "@react-aria/utils";
+import { mergeProps, useLayoutEffect } from "@react-aria/utils";
 import { useLocale } from "@react-aria/i18n";
 import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
-import _react, { useEffect, useState, useImperativeHandle, useRef, useContext, useMemo, useLayoutEffect } from "react";
+import { useIsSSR } from "@react-aria/ssr";
+import _react, { useEffect, useState, useImperativeHandle, useRef, useContext, useMemo } from "react";
 import _clsx from "clsx";
@@ -78,4 +79,7 @@ export let shouldKeepSpectrumClassNames = false;
     };
-  }, [supportsMatchMedia, query]);
-  return matches;
+  }, [supportsMatchMedia, query]); // If in SSR, the media query should never match. Once the page hydrates,
+  // this will update and the real value will be returned.
+
+  let isSSR = useIsSSR();
+  return isSSR ? false : matches;
 }
@@ -443,2 +447,12 @@ export function createDOMRef(ref) {
 }
+const $db7f8d67f553ae22a3f659d9cb2a$var$MOBILE_SCREEN_WIDTH = 700;
+export function useIsMobileDevice() {
+  let isSSR = useIsSSR();
+
+  if (isSSR || typeof window === 'undefined') {
+    return false;
+  }
+
+  return window.screen.width <= $db7f8d67f553ae22a3f659d9cb2a$var$MOBILE_SCREEN_WIDTH;
+}
 //# sourceMappingURL=module.js.map

dist/types.d.ts

@@ -38,3 +38,4 @@ import { ReactElement, ReactNode, RefObject, CSSProperties, HTMLAttributes } from "react";
 export function useResizeObserver<T extends HTMLElement>(options: useResizeObserverOptionsType<T>): void;
+export function useIsMobileDevice(): boolean;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-spectrum/utils",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Spectrum UI components in React",
@@ -23,4 +23,5 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.1.0",
-    "@react-aria/utils": "^3.2.0",
+    "@react-aria/i18n": "^3.1.1",
+    "@react-aria/ssr": "^3.0.0",
+    "@react-aria/utils": "^3.2.1",
     "@react-types/shared": "^3.2.0",
@@ -35,3 +36,3 @@ "clsx": "^1.1.1"
   },
-  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
+  "gitHead": "d050016e6876b20e4d8a95ba5fb5630d78e75a60"
 }

src/index.ts

@@ -14,2 +14,3 @@ /*
 /// <reference types="css-module-types" />
+/// <reference path="./ResizeObserver.d.ts" />
 
@@ -24,2 +25,3 @@ export * from './classNames';
 export * from './useResizeObserver';
+export * from './useIsMobileDevice';
 

src/useHasChild.ts

@@ -13,3 +13,4 @@ /*
 
-import {RefObject, useLayoutEffect, useState} from 'react';
+import {RefObject, useState} from 'react';
+import {useLayoutEffect} from '@react-aria/utils';
 
@@ -16,0 +17,0 @@ export function useHasChild(query: string, ref: RefObject<HTMLElement>) {

src/useMediaQuery.ts

@@ -14,2 +14,3 @@ /*
 import {useEffect, useState} from 'react';
+import {useIsSSR} from '@react-aria/ssr';
 
@@ -40,3 +41,6 @@ export function useMediaQuery(query: string) {
 
-  return matches;
+  // If in SSR, the media query should never match. Once the page hydrates,
+  // this will update and the real value will be returned.
+  let isSSR = useIsSSR();
+  return isSSR ? false : matches;
 }

src/useResizeObserver.ts

 import {RefObject, useEffect} from 'react';
-import './ResizeObserver.d.ts';
 
@@ -4,0 +3,0 @@ function hasResizeObserver() {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

162095

increased by3.61%

Number of package files

20

increased by5.26%

Lines of code

1630

increased by3.3%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Added@react-aria/ssr@^3.0.0

• Updated@react-aria/i18n@^3.1.1

• Updated@react-aria/utils@^3.2.1