@homebound/beam 2.202.0 → 2.203.0

package/dist/Css.d.ts

@@ -3033,6 +3033,17 @@ declare type Brand<K, T> = K & {
     __brand: T;
 };
 declare type Breakpoint = Brand<string, "Breakpoint">;
+export declare type BreakpointKey = "print" | "sm" | "md" | "smOrMd" | "mdAndUp" | "mdAndDown" | "lg" | "mdOrLg";
+export declare enum Breakpoints {
+    print = "@media print",
+    sm = "@media screen and (max-width:599px)",
+    md = "@media screen and (min-width:600px) and (max-width:1024px)",
+    smOrMd = "@media screen and (max-width:1024px)",
+    mdAndUp = "@media screen and (min-width:600px)",
+    mdAndDown = "@media screen and (max-width:1024px)",
+    lg = "@media screen and (min-width:1025px)",
+    mdOrLg = "@media screen and (min-width:600px)"
+}
 export declare const print: Breakpoint;
 export declare const sm: Breakpoint;
 export declare const md: Breakpoint;

package/dist/Css.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mdOrLg = exports.lg = exports.mdAndDown = exports.mdAndUp = exports.smOrMd = exports.md = exports.sm = exports.print = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
+exports.mdOrLg = exports.lg = exports.mdAndDown = exports.mdAndUp = exports.smOrMd = exports.md = exports.sm = exports.print = exports.Breakpoints = exports.Css = exports.Palette = exports.px = exports.increment = exports.maybeInc = void 0;
 // prettier-ignore
 class CssBuilder {
     constructor(opts) {
@@ -998,6 +998,17 @@ var Palette;
 })(Palette = exports.Palette || (exports.Palette = {}));
 /** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
 exports.Css = new CssBuilder({ rules: {}, enabled: true, important: false, selector: undefined });
+var Breakpoints;
+(function (Breakpoints) {
+    Breakpoints["print"] = "@media print";
+    Breakpoints["sm"] = "@media screen and (max-width:599px)";
+    Breakpoints["md"] = "@media screen and (min-width:600px) and (max-width:1024px)";
+    Breakpoints["smOrMd"] = "@media screen and (max-width:1024px)";
+    Breakpoints["mdAndUp"] = "@media screen and (min-width:600px)";
+    Breakpoints["mdAndDown"] = "@media screen and (max-width:1024px)";
+    Breakpoints["lg"] = "@media screen and (min-width:1025px)";
+    Breakpoints["mdOrLg"] = "@media screen and (min-width:600px)";
+})(Breakpoints = exports.Breakpoints || (exports.Breakpoints = {}));
 exports.print = "@media print";
 exports.sm = "@media screen and (max-width:599px)";
 exports.md = "@media screen and (min-width:600px) and (max-width:1024px)";

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./useBreakpoint";
 export * from "./useComputed";
 export * from "./useGroupBy";
 export * from "./useHover";

package/dist/hooks/index.js

@@ -10,6 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useBreakpoint"), exports);
 __exportStar(require("./useComputed"), exports);
 __exportStar(require("./useGroupBy"), exports);
 __exportStar(require("./useHover"), exports);

package/dist/hooks/useBreakpoint.d.ts

@@ -0,0 +1,11 @@
+import { BreakpointKey } from "../Css";
+/**
+ * A React hook to return a record of responsive breakpoints that updates on resize.
+ *
+ * @example
+ * const { breakpoints } = useBreakpoint();
+ * if(breakpoints.mdAndDown) {...do something cool}
+ */
+declare type BreakpointsType = Record<BreakpointKey, boolean>;
+export declare const useBreakpoint: () => BreakpointsType;
+export {};

package/dist/hooks/useBreakpoint.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreakpoint = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
+const react_1 = require("react");
+const use_debounce_1 = require("use-debounce");
+const Css_1 = require("../Css");
+const useBreakpoint = () => {
+    const [breakpoints, setBreakpoints] = (0, react_1.useState)(matchMediaBreakpoints());
+    const handleResize = (0, use_debounce_1.useDebouncedCallback)(() => {
+        const newBps = matchMediaBreakpoints();
+        if ((0, fast_deep_equal_1.default)(breakpoints, newBps))
+            return;
+        setBreakpoints(newBps);
+    }, 1000);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("resize", handleResize);
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []);
+    return breakpoints;
+};
+exports.useBreakpoint = useBreakpoint;
+function matchMediaBreakpoints() {
+    let bps = {};
+    Object.entries(Css_1.Breakpoints).forEach(([name, bp]) => {
+        bps[name] = window.matchMedia(bp.replace("@media ", "")).matches;
+    });
+    return bps;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.202.0",
+  "version": "2.203.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
     "@homebound/eslint-config": "1.5.1",
     "@homebound/rtl-react-router-utils": "^1.0.3",
     "@homebound/rtl-utils": "^2.59.3",
-    "@homebound/truss": "^1.113.0",
+    "@homebound/truss": "^1.115.0",
     "@homebound/tsconfig": "^1.0.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@semantic-release/exec": "^6.0.3",