@peculiar/react-components 1.8.2 → 1.8.3

package/dist/cjs/hooks/use_enhanced_effect.js

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useEnhancedEffect = void 0;
+exports.useEnhancedEffect = exports.IS_SERVER = void 0;
 var react_1 = __importDefault(require("react"));
-exports.useEnhancedEffect = typeof window !== 'undefined' ? react_1.default.useLayoutEffect : react_1.default.useEffect;
+exports.IS_SERVER = typeof window === 'undefined';
+exports.useEnhancedEffect = exports.IS_SERVER ? react_1.default.useEffect : react_1.default.useLayoutEffect;
 //# sourceMappingURL=use_enhanced_effect.js.map

package/dist/cjs/hooks/use_enhanced_effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_enhanced_effect.js","sourceRoot":"","sources":["../../../src/hooks/use_enhanced_effect.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAEb,QAAA,iBAAiB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,eAAK,CAAC,eAAe,CAAC,CAAC,CAAC,eAAK,CAAC,SAAS,CAAC"}
+{"version":3,"file":"use_enhanced_effect.js","sourceRoot":"","sources":["../../../src/hooks/use_enhanced_effect.ts"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAEb,QAAA,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE1C,QAAA,iBAAiB,GAAG,iBAAS,CAAC,CAAC,CAAC,eAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAK,CAAC,eAAe,CAAC"}

package/dist/cjs/hooks/use_media_query.js

@@ -12,21 +12,30 @@ var use_enhanced_effect_1 = require("./use_enhanced_effect");
  *
  * @param query The media query you want to match against e.g. `"only screen and (min-width: 12em)"`
  */
-function useMediaQuery(query) {
-    var _a = react_1.default.useState(false), matches = _a[0], setMatches = _a[1];
-    (0, use_enhanced_effect_1.useEnhancedEffect)(function () {
-        var media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
+function useMediaQuery(query, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    var _a = react_1.default.useState(function () {
+        // Prevent a React hydration mismatch when a default value is provided
+        // by not defaulting to window.matchMedia(query).matches.
+        if (defaultValue !== undefined) {
+            return defaultValue;
+        }
+        if (use_enhanced_effect_1.IS_SERVER) {
+            return false;
         }
-        var listener = function () {
-            setMatches(media.matches);
+        return window.matchMedia(query).matches;
+    }), matches = _a[0], setMatches = _a[1];
+    (0, use_enhanced_effect_1.useEnhancedEffect)(function () {
+        var matchMedia = window.matchMedia(query);
+        var onChange = function () {
+            setMatches(matchMedia.matches);
         };
-        media.addListener(listener);
+        onChange();
+        matchMedia.addListener(onChange);
         return function () {
-            media.removeListener(listener);
+            matchMedia.removeListener(onChange);
         };
-    }, [matches, query]);
+    }, [query]);
     return matches;
 }
 //# sourceMappingURL=use_media_query.js.map

package/dist/cjs/hooks/use_media_query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.js","sourceRoot":"","sources":["../../../src/hooks/use_media_query.ts"],"names":[],"mappings":";;;;;AASA,sCAsBC;AA/BD,gDAA0B;AAC1B,6DAA0D;AAE1D;;;;;GAKG;AACH,SAAgB,aAAa,CAAC,KAAa;IACnC,IAAA,KAAwB,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA5C,OAAO,QAAA,EAAE,UAAU,QAAyB,CAAC;IAEpD,IAAA,uCAAiB,EAAC;QAChB,IAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEvC,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC;QAED,IAAM,QAAQ,GAAG;YACf,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE5B,OAAO;YACL,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"use_media_query.js","sourceRoot":"","sources":["../../../src/hooks/use_media_query.ts"],"names":[],"mappings":";;;;;AASA,sCA+BC;AAxCD,gDAA0B;AAC1B,6DAAqE;AAErE;;;;;GAKG;AACH,SAAgB,aAAa,CAAC,KAAa,EAAE,YAAoB;IAApB,6BAAA,EAAA,oBAAoB;IACzD,IAAA,KAAwB,eAAK,CAAC,QAAQ,CAAC;QAC3C,sEAAsE;QACtE,yDAAyD;QACzD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,IAAI,+BAAS,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC,EAZK,OAAO,QAAA,EAAE,UAAU,QAYxB,CAAC;IAEH,IAAA,uCAAiB,EAAC;QAChB,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAE5C,IAAM,QAAQ,GAAG;YACf,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,QAAQ,EAAE,CAAC;QACX,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEjC,OAAO;YACL,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/esm/hooks/use_enhanced_effect.js

@@ -1,3 +1,4 @@
 import React from 'react';
-export var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export var IS_SERVER = typeof window === 'undefined';
+export var useEnhancedEffect = IS_SERVER ? React.useEffect : React.useLayoutEffect;
 //# sourceMappingURL=use_enhanced_effect.js.map

package/dist/esm/hooks/use_enhanced_effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_enhanced_effect.js","sourceRoot":"","sources":["../../../src/hooks/use_enhanced_effect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,iBAAiB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC"}
+{"version":3,"file":"use_enhanced_effect.js","sourceRoot":"","sources":["../../../src/hooks/use_enhanced_effect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAEvD,MAAM,CAAC,IAAM,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC"}

package/dist/esm/hooks/use_media_query.js

@@ -1,26 +1,35 @@
 import React from 'react';
-import { useEnhancedEffect } from './use_enhanced_effect';
+import { IS_SERVER, useEnhancedEffect } from './use_enhanced_effect';
 /**
  * A hook that returns `true` if the media query matched and `false` if not. This
  * hook will always return `false` when rendering on the server.
  *
  * @param query The media query you want to match against e.g. `"only screen and (min-width: 12em)"`
  */
-export function useMediaQuery(query) {
-    var _a = React.useState(false), matches = _a[0], setMatches = _a[1];
-    useEnhancedEffect(function () {
-        var media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
+export function useMediaQuery(query, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = false; }
+    var _a = React.useState(function () {
+        // Prevent a React hydration mismatch when a default value is provided
+        // by not defaulting to window.matchMedia(query).matches.
+        if (defaultValue !== undefined) {
+            return defaultValue;
+        }
+        if (IS_SERVER) {
+            return false;
         }
-        var listener = function () {
-            setMatches(media.matches);
+        return window.matchMedia(query).matches;
+    }), matches = _a[0], setMatches = _a[1];
+    useEnhancedEffect(function () {
+        var matchMedia = window.matchMedia(query);
+        var onChange = function () {
+            setMatches(matchMedia.matches);
         };
-        media.addListener(listener);
+        onChange();
+        matchMedia.addListener(onChange);
         return function () {
-            media.removeListener(listener);
+            matchMedia.removeListener(onChange);
         };
-    }, [matches, query]);
+    }, [query]);
     return matches;
 }
 //# sourceMappingURL=use_media_query.js.map

package/dist/esm/hooks/use_media_query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.js","sourceRoot":"","sources":["../../../src/hooks/use_media_query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAAa;IACnC,IAAA,KAAwB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA5C,OAAO,QAAA,EAAE,UAAU,QAAyB,CAAC;IAEpD,iBAAiB,CAAC;QAChB,IAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEvC,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC;QAED,IAAM,QAAQ,GAAG;YACf,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE5B,OAAO;YACL,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"use_media_query.js","sourceRoot":"","sources":["../../../src/hooks/use_media_query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAAa,EAAE,YAAoB;IAApB,6BAAA,EAAA,oBAAoB;IACzD,IAAA,KAAwB,KAAK,CAAC,QAAQ,CAAC;QAC3C,sEAAsE;QACtE,yDAAyD;QACzD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC,EAZK,OAAO,QAAA,EAAE,UAAU,QAYxB,CAAC;IAEH,iBAAiB,CAAC;QAChB,IAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAE5C,IAAM,QAAQ,GAAG;YACf,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,QAAQ,EAAE,CAAC;QACX,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEjC,OAAO;YACL,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/esnext/hooks/use_enhanced_effect.js

@@ -1,3 +1,4 @@
 import React from 'react';
-export const useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export const IS_SERVER = typeof window === 'undefined';
+export const useEnhancedEffect = IS_SERVER ? React.useEffect : React.useLayoutEffect;
 //# sourceMappingURL=use_enhanced_effect.js.map

package/dist/esnext/hooks/use_enhanced_effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_enhanced_effect.js","sourceRoot":"","sources":["../../../src/hooks/use_enhanced_effect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC"}
+{"version":3,"file":"use_enhanced_effect.js","sourceRoot":"","sources":["../../../src/hooks/use_enhanced_effect.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAEvD,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC"}

package/dist/esnext/hooks/use_media_query.js

@@ -1,26 +1,34 @@
 import React from 'react';
-import { useEnhancedEffect } from './use_enhanced_effect';
+import { IS_SERVER, useEnhancedEffect } from './use_enhanced_effect';
 /**
  * A hook that returns `true` if the media query matched and `false` if not. This
  * hook will always return `false` when rendering on the server.
  *
  * @param query The media query you want to match against e.g. `"only screen and (min-width: 12em)"`
  */
-export function useMediaQuery(query) {
-    const [matches, setMatches] = React.useState(false);
-    useEnhancedEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
+export function useMediaQuery(query, defaultValue = false) {
+    const [matches, setMatches] = React.useState(() => {
+        // Prevent a React hydration mismatch when a default value is provided
+        // by not defaulting to window.matchMedia(query).matches.
+        if (defaultValue !== undefined) {
+            return defaultValue;
+        }
+        if (IS_SERVER) {
+            return false;
         }
-        const listener = () => {
-            setMatches(media.matches);
+        return window.matchMedia(query).matches;
+    });
+    useEnhancedEffect(() => {
+        const matchMedia = window.matchMedia(query);
+        const onChange = () => {
+            setMatches(matchMedia.matches);
         };
-        media.addListener(listener);
+        onChange();
+        matchMedia.addListener(onChange);
         return () => {
-            media.removeListener(listener);
+            matchMedia.removeListener(onChange);
         };
-    }, [matches, query]);
+    }, [query]);
     return matches;
 }
 //# sourceMappingURL=use_media_query.js.map

package/dist/esnext/hooks/use_media_query.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_media_query.js","sourceRoot":"","sources":["../../../src/hooks/use_media_query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAAa;IACzC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,iBAAiB,CAAC,GAAG,EAAE;QACrB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEvC,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC5B,CAAC,CAAC;QAEF,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAE5B,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAErB,OAAO,OAAO,CAAC;AACjB,CAAC"}
+{"version":3,"file":"use_media_query.js","sourceRoot":"","sources":["../../../src/hooks/use_media_query.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAErE;;;;;GAKG;AACH,MAAM,UAAU,aAAa,CAAC,KAAa,EAAE,YAAY,GAAG,KAAK;IAC/D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAChD,sEAAsE;QACtE,yDAAyD;QACzD,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,YAAY,CAAC;QACtB,CAAC;QAED,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,KAAK,CAAC;QACf,CAAC;QAED,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,iBAAiB,CAAC,GAAG,EAAE;QACrB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAE5C,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,QAAQ,EAAE,CAAC;QACX,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAEjC,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/types/hooks/use_enhanced_effect.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
-export declare const useEnhancedEffect: typeof React.useLayoutEffect;
+export declare const IS_SERVER: boolean;
+export declare const useEnhancedEffect: typeof React.useEffect;

package/dist/types/hooks/use_media_query.d.ts

@@ -4,4 +4,4 @@
  *
  * @param query The media query you want to match against e.g. `"only screen and (min-width: 12em)"`
  */
-export declare function useMediaQuery(query: string): boolean;
+export declare function useMediaQuery(query: string, defaultValue?: boolean): boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "1.8.2",
+  "version": "1.8.3",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -79,5 +79,5 @@
     "node": ">=18.x"
   },
   "license": "MIT",
-  "gitHead": "921155ef94b2d0151d67b36e1e4cea6ef4397d35"
+  "gitHead": "93c1a2219bb2de67609606f0bbb8c36cf9c1043b"
 }