colibri-ui 0.7.33 → 0.7.34

package/esm/hooks/useMediaSizes/index.js

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import Breakpoints from '../../Theme/breakpoints.js';
+
+var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var useMediaSizes = function useMediaSizes(queryInput) {
+  var query = typeof queryInput === "function" ? queryInput(Breakpoints) : queryInput;
+  query = query.replace(/^@media( ?)/m, "");
+  var matchMedia = supportMatchMedia ? window.matchMedia : null;
+  var _a = useState(function () {
+      if (matchMedia) {
+        return matchMedia(query).matches;
+      }
+      return false;
+    }),
+    match = _a[0],
+    setMatch = _a[1];
+  useEffect(function () {
+    if (!matchMedia) return undefined;
+    var active = true;
+    var queryList = matchMedia(query);
+    var updateMatch = function updateMatch() {
+      if (active) {
+        setMatch(queryList.matches);
+      }
+    };
+    updateMatch();
+    queryList.addEventListener("change", updateMatch);
+    return function () {
+      active = false;
+      queryList.removeEventListener("change", updateMatch);
+    };
+  });
+  return match;
+};
+
+export { useMediaSizes as default };

package/esm/index.d.ts

@@ -15,4 +15,5 @@ export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";
 export { default as Typography } from "./Typography";
+export { default as useMediaSizes } from "./hooks/useMediaSizes";
 export * from "./Icons";

package/esm/index.js

@@ -15,6 +15,7 @@ export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';
 export { THEMES, ThemeProvider } from './Theme/index.js';
 export { default as Typography } from './Typography/index.js';
+export { default as useMediaSizes } from './hooks/useMediaSizes/index.js';
 import './Icons/index.js';
 export { default as Cart } from './Icons/Cart.js';
 export { default as Chevron } from './Icons/Chevron.js';

package/hooks/useMediaSizes/index.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var breakpoints = require('../../Theme/breakpoints.js');
+
+var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var useMediaSizes = function useMediaSizes(queryInput) {
+  var query = typeof queryInput === "function" ? queryInput(breakpoints.default) : queryInput;
+  query = query.replace(/^@media( ?)/m, "");
+  var matchMedia = supportMatchMedia ? window.matchMedia : null;
+  var _a = React.useState(function () {
+      if (matchMedia) {
+        return matchMedia(query).matches;
+      }
+      return false;
+    }),
+    match = _a[0],
+    setMatch = _a[1];
+  React.useEffect(function () {
+    if (!matchMedia) return undefined;
+    var active = true;
+    var queryList = matchMedia(query);
+    var updateMatch = function updateMatch() {
+      if (active) {
+        setMatch(queryList.matches);
+      }
+    };
+    updateMatch();
+    queryList.addEventListener("change", updateMatch);
+    return function () {
+      active = false;
+      queryList.removeEventListener("change", updateMatch);
+    };
+  });
+  return match;
+};
+
+exports.default = useMediaSizes;

package/index.d.ts

@@ -15,4 +15,5 @@ export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";
 export { default as Typography } from "./Typography";
+export { default as useMediaSizes } from "./hooks/useMediaSizes";
 export * from "./Icons";

package/index.js

@@ -17,6 +17,7 @@ var index$d = require('./Skeleton/index.js');
 var index$e = require('./Switch/index.js');
 var index$f = require('./Theme/index.js');
 var index$g = require('./Typography/index.js');
+var index$h = require('./hooks/useMediaSizes/index.js');
 require('./Icons/index.js');
 var Cart = require('./Icons/Cart.js');
 var Chevron = require('./Icons/Chevron.js');
@@ -52,6 +53,7 @@ exports.Switch = index$e.default;
 exports.THEMES = index$f.THEMES;
 exports.ThemeProvider = index$f.ThemeProvider;
 exports.Typography = index$g.default;
+exports.useMediaSizes = index$h.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.33",
+  "version": "0.7.34",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},