colibri-ui 0.8.78 → 0.8.80

package/README.md

@@ -190,6 +190,12 @@ const css = `@media ${media.down("sm")} { … }`;
 
 `BREAKPOINTS` and `media` are also exported from `colibri-ui/Theme`.
 
+### useMediaSizes
+
+`useMediaSizes(query)` takes a query string or a function that receives `media`, and returns whether the query matches. It updates when the viewport crosses the edge.
+
+Returns `false` on the server and during hydration. Use it to decide whether to mount a heavy component; to show/hide markup use CSS media queries, otherwise the wrong variant renders until hydration.
+
 ## License
 
 MIT

package/esm/Autocomplete/index.js

@@ -0,0 +1 @@
+export { Autocomplete } from './Autocomplete.js';

package/esm/Calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from './Calendar.js';

package/esm/Card/index.js

@@ -0,0 +1 @@
+export { Card, CardContent, CardInnerContent } from './Card.js';

package/esm/CodeField/index.js

@@ -0,0 +1 @@
+export { CodeField, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN, ONLY_DIGITS_PATTERN } from './CodeField.js';

package/esm/Drawer/index.js

@@ -0,0 +1 @@
+export { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer.js';

package/esm/Dropzone/index.js

@@ -0,0 +1 @@
+export { Dropzone } from './Dropzone.js';

package/esm/Editable/index.js

@@ -0,0 +1 @@
+export { Editable } from './Editable.js';

package/esm/Icons/index.js

@@ -0,0 +1,21 @@
+export { ArrowNext } from './ArrowNext.js';
+export { Cart } from './Cart.js';
+export { Check } from './Check.js';
+export { Chevron } from './Chevron.js';
+export { Close } from './Close.js';
+export { Copy } from './Copy.js';
+export { Cross } from './Cross.js';
+export { CrossFill } from './CrossFill.js';
+export { Edit } from './Edit.js';
+export { Exit } from './Exit.js';
+export { EyeOpen } from './EyeOpen.js';
+export { EyeClosed } from './EyeClosed.js';
+export { Help } from './Help.js';
+export { Info } from './Info.js';
+export { Minus } from './Minus.js';
+export { More } from './More.js';
+export { Plus } from './Plus.js';
+export { Setting } from './Setting.js';
+export { Shield } from './Shield.js';
+export { Trash } from './Trash.js';
+export { User } from './User.js';

package/esm/List/index.js

@@ -0,0 +1 @@
+export { List, ListItem, ListSection } from './List.js';

package/esm/NumberInput/index.js

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput.js';

package/esm/Progress/index.js

@@ -0,0 +1 @@
+export { Progress } from './Progress.js';

package/esm/Rating/index.js

@@ -0,0 +1 @@
+export { Rating } from './Rating.js';

package/esm/Slider/index.js

@@ -0,0 +1 @@
+export { Slider } from './Slider.js';

package/esm/Theme/index.js

@@ -1,6 +1,7 @@
 import { BUTTON_TOKENS } from '../Button/tokens.js';
 import theme_jaipur from './themes/jaipur.js';
 import THEME_BA from './themes/buenos_aires.js';
+export { BREAKPOINTS, media } from './breakpoints.js';
 
 var THEMES = {
   JAIPUR: Object.assign(Object.assign({}, theme_jaipur), BUTTON_TOKENS),

package/esm/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,9 @@
 import type { Media } from "../../Theme/breakpoints";
 export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/esm/hooks/useMediaSizes/index.js

@@ -1,38 +1,32 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useEffect } from 'react';
+import { useCallback, useSyncExternalStore } from 'react';
 import { media } from '../../Theme/breakpoints.js';
 
-var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+var getMediaQueryList = function getMediaQueryList(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+};
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(media) : queryInput;
-  query = query.replace(/^@media( ?)/m, "");
-  var matchMedia = supportMatchMedia ? window.matchMedia : null;
-  var _useState = useState(function () {
-      if (matchMedia) {
-        return matchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[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);
+  // A function input is a new function every render: memoize on the query string.
+  var query = (typeof queryInput === "function" ? queryInput(media) : queryInput).replace(/^\s*@media\s*/, "");
+  var subscribe = useCallback(function (onChange) {
+    var queryList = getMediaQueryList(query);
+    if (!queryList) return function () {};
+    queryList.addEventListener("change", onChange);
     return function () {
-      active = false;
-      queryList.removeEventListener("change", updateMatch);
+      return queryList.removeEventListener("change", onChange);
     };
-  });
-  return match;
+  }, [query]);
+  var getSnapshot = useCallback(function () {
+    var _a, _b;
+    return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+  }, [query]);
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 export { useMediaSizes };

package/hooks/useMediaSizes/index.d.ts

@@ -1,5 +1,9 @@
 import type { Media } from "../../Theme/breakpoints";
 export type QueryInputFunction = (breakpoints: Media) => string;
 type QueryInput = QueryInputFunction | string;
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 export declare const useMediaSizes: (queryInput: QueryInput) => boolean;
 export {};

package/hooks/useMediaSizes/index.js

@@ -1,44 +1,34 @@
 'use strict';
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var breakpoints = require('../../Theme/breakpoints.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
-
-var supportMatchMedia = typeof window !== "undefined" && typeof window.matchMedia !== "undefined";
+var getServerSnapshot = function getServerSnapshot() {
+  return false;
+};
+var getMediaQueryList = function getMediaQueryList(query) {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query) : null;
+};
+/**
+ * Returns whether the media query matches.
+ * Returns `false` on the server and during hydration, the real value right after.
+ */
 var useMediaSizes = function useMediaSizes(queryInput) {
-  var query = typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput;
-  query = query.replace(/^@media( ?)/m, "");
-  var matchMedia = supportMatchMedia ? window.matchMedia : null;
-  var _useState = React.useState(function () {
-      if (matchMedia) {
-        return matchMedia(query).matches;
-      }
-      return false;
-    }),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    match = _useState2[0],
-    setMatch = _useState2[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);
+  // A function input is a new function every render: memoize on the query string.
+  var query = (typeof queryInput === "function" ? queryInput(breakpoints.media) : queryInput).replace(/^\s*@media\s*/, "");
+  var subscribe = React.useCallback(function (onChange) {
+    var queryList = getMediaQueryList(query);
+    if (!queryList) return function () {};
+    queryList.addEventListener("change", onChange);
     return function () {
-      active = false;
-      queryList.removeEventListener("change", updateMatch);
+      return queryList.removeEventListener("change", onChange);
     };
-  });
-  return match;
+  }, [query]);
+  var getSnapshot = React.useCallback(function () {
+    var _a, _b;
+    return (_b = (_a = getMediaQueryList(query)) === null || _a === void 0 ? void 0 : _a.matches) !== null && _b !== void 0 ? _b : false;
+  }, [query]);
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 exports.useMediaSizes = useMediaSizes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.78",
+  "version": "0.8.80",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",