@evolve.ui/core-components 1.0.0

package/windowSizeProvider-sYwAqaOy.mjs

@@ -0,0 +1,64 @@
+import { useEffect, useMemo } from "react";
+import { breakpoints } from "@evolve.ui/theme-system/themes/common";
+import { atom, useAtomValue, useStore } from "jotai";
+import { useThrottledCallback } from "use-debounce";
+//#region src/utils/isClientSide.ts
+const isClientSide = typeof window !== "undefined";
+//#endregion
+//#region src/providers/windowSizeProvider.tsx
+const heightAtom = atom(isClientSide ? window.innerHeight : 0);
+const widthAtom = atom(isClientSide ? window.innerWidth : 0);
+const desktopAtom = atom((get) => get(widthAtom) >= breakpoints.smMinValue);
+const mobileAtom = atom((get) => get(widthAtom) <= breakpoints.xsMaxValue);
+const tabletAtom = atom((get) => get(widthAtom) >= breakpoints.smMinValue && get(widthAtom) <= breakpoints.smMaxValue);
+const tabletOrMobileAtom = atom((get) => get(widthAtom) <= breakpoints.smMaxValue);
+const WindowSizeProvider = ({ children, defaultHeight: givenDefaultHeight, defaultWidth: givenDefaultWidth, windowSizeThrottle = 0 }) => {
+	const store = useStore();
+	useMemo(() => {
+		if (!isClientSide) {
+			if (givenDefaultHeight) store.set(heightAtom, givenDefaultHeight);
+			if (givenDefaultWidth) store.set(widthAtom, givenDefaultWidth);
+			return;
+		}
+		const initialHeight = window.innerHeight === 0 && givenDefaultHeight ? givenDefaultHeight : window.innerHeight;
+		const initialWidth = window.innerWidth === 0 && givenDefaultWidth ? givenDefaultWidth : window.innerWidth;
+		if (initialHeight !== 0 && store.get(heightAtom) !== initialHeight) store.set(heightAtom, initialHeight);
+		if (initialWidth !== 0 && store.get(widthAtom) !== initialWidth) store.set(widthAtom, initialWidth);
+	}, []);
+	useEffect(() => {
+		if (!isClientSide) return;
+		const currentHeight = window.innerHeight === 0 && givenDefaultHeight ? givenDefaultHeight : window.innerHeight;
+		const currentWidth = window.innerWidth === 0 && givenDefaultWidth ? givenDefaultWidth : window.innerWidth;
+		if (store.get(heightAtom) !== currentHeight && currentHeight !== 0) store.set(heightAtom, currentHeight);
+		if (store.get(widthAtom) !== currentWidth && currentWidth !== 0) store.set(widthAtom, currentWidth);
+	}, [
+		givenDefaultHeight,
+		givenDefaultWidth,
+		store
+	]);
+	const handleResize = useThrottledCallback(() => {
+		store.set(heightAtom, window.innerHeight);
+		store.set(widthAtom, window.innerWidth);
+	}, windowSizeThrottle, { trailing: true });
+	useEffect(() => {
+		if (!isClientSide) return;
+		window.addEventListener("resize", handleResize);
+		window.addEventListener("orientationchange", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+			window.removeEventListener("orientationchange", handleResize);
+		};
+	}, [handleResize]);
+	return children;
+};
+WindowSizeProvider.displayName = "WindowSizeProvider";
+const useWindowIsDesktop = () => useAtomValue(desktopAtom);
+const useWindowIsMobile = () => useAtomValue(mobileAtom);
+const useWindowIsTablet = () => useAtomValue(tabletAtom);
+const useWindowIsTabletOrMobile = () => useAtomValue(tabletOrMobileAtom);
+const useWindowHeight = () => useAtomValue(heightAtom);
+const useWindowWidth = () => useAtomValue(widthAtom);
+//#endregion
+export { tabletAtom as a, useWindowIsDesktop as c, useWindowIsTabletOrMobile as d, useWindowWidth as f, mobileAtom as i, useWindowIsMobile as l, isClientSide as m, desktopAtom as n, tabletOrMobileAtom as o, widthAtom as p, heightAtom as r, useWindowHeight as s, WindowSizeProvider as t, useWindowIsTablet as u };
+
+//# sourceMappingURL=windowSizeProvider-sYwAqaOy.mjs.map

package/windowSizeProvider-sYwAqaOy.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"windowSizeProvider-sYwAqaOy.mjs","names":[],"sources":["../src/utils/isClientSide.ts","../src/providers/windowSizeProvider.tsx"],"sourcesContent":["export const isClientSide = typeof window !== 'undefined';\n","import { breakpoints } from '@evolve.ui/theme-system/themes/common';\nimport { atom, useAtomValue, useStore } from 'jotai';\nimport { type ReactNode, useEffect, useMemo } from 'react';\nimport { useThrottledCallback } from 'use-debounce';\n\nimport { isClientSide } from '../utils/isClientSide';\n\nexport const heightAtom = atom(isClientSide ? window.innerHeight : 0);\n// Use window.innerWidth for accurate viewport width, including the scrollbar measurement area.\nexport const widthAtom = atom(isClientSide ? window.innerWidth : 0);\n\nexport const desktopAtom = atom((get) => get(widthAtom) >= breakpoints.smMinValue);\nexport const mobileAtom = atom((get) => get(widthAtom) <= breakpoints.xsMaxValue);\nexport const tabletAtom = atom(\n    (get) => get(widthAtom) >= breakpoints.smMinValue && get(widthAtom) <= breakpoints.smMaxValue\n);\nexport const tabletOrMobileAtom = atom((get) => get(widthAtom) <= breakpoints.smMaxValue);\n\ntype WindowSizeProviderProps = {\n    children: ReactNode;\n    /**\n     * Only applies to first render. Useful for SSR when the screen height is known.\n     *\n     * @default window.innerHeight ?? 0\n     */\n    defaultHeight?: number;\n    /**\n     * Only applies to first render. Useful for SSR when the screen width is known.\n     *\n     * @default window.innerWidth ?? 0\n     */\n    defaultWidth?: number;\n    /**\n     * How often to refresh window size while resizing.\n     *\n     * Set this to milliseconds to wait, or `0` for per-animation-frame updates.\n     */\n    windowSizeThrottle?: number;\n};\n\nexport const WindowSizeProvider = ({\n    children,\n    defaultHeight: givenDefaultHeight,\n    defaultWidth: givenDefaultWidth,\n    windowSizeThrottle = 0,\n}: WindowSizeProviderProps) => {\n    const store = useStore();\n\n    useMemo(() => {\n        if (!isClientSide) {\n            // SSR: use provided defaults when available.\n            if (givenDefaultHeight) {\n                store.set(heightAtom, givenDefaultHeight);\n            }\n            if (givenDefaultWidth) {\n                store.set(widthAtom, givenDefaultWidth);\n            }\n            return;\n        }\n\n        // Client-side: use provided defaults only when the browser reports zero.\n        const initialHeight = window.innerHeight === 0 && givenDefaultHeight ? givenDefaultHeight : window.innerHeight;\n        const initialWidth = window.innerWidth === 0 && givenDefaultWidth ? givenDefaultWidth : window.innerWidth;\n\n        if (initialHeight !== 0 && store.get(heightAtom) !== initialHeight) {\n            store.set(heightAtom, initialHeight);\n        }\n        if (initialWidth !== 0 && store.get(widthAtom) !== initialWidth) {\n            store.set(widthAtom, initialWidth);\n        }\n        // No need to rerender since we only want to allow initial values.\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []);\n\n    useEffect(() => {\n        if (!isClientSide) {\n            return;\n        }\n\n        // Update from window if different and not using defaults.\n        const currentHeight = window.innerHeight === 0 && givenDefaultHeight ? givenDefaultHeight : window.innerHeight;\n        const currentWidth = window.innerWidth === 0 && givenDefaultWidth ? givenDefaultWidth : window.innerWidth;\n\n        if (store.get(heightAtom) !== currentHeight && currentHeight !== 0) {\n            store.set(heightAtom, currentHeight);\n        }\n        if (store.get(widthAtom) !== currentWidth && currentWidth !== 0) {\n            store.set(widthAtom, currentWidth);\n        }\n    }, [givenDefaultHeight, givenDefaultWidth, store]);\n\n    const handleResize = useThrottledCallback(\n        () => {\n            store.set(heightAtom, window.innerHeight);\n            store.set(widthAtom, window.innerWidth);\n        },\n        windowSizeThrottle,\n        { trailing: true }\n    );\n\n    useEffect(() => {\n        if (!isClientSide) {\n            return;\n        }\n\n        window.addEventListener('resize', handleResize);\n        window.addEventListener('orientationchange', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n            window.removeEventListener('orientationchange', handleResize);\n        };\n    }, [handleResize]);\n\n    return children;\n};\n\nWindowSizeProvider.displayName = 'WindowSizeProvider';\n\nexport const useWindowIsDesktop = () => useAtomValue(desktopAtom);\nexport const useWindowIsMobile = () => useAtomValue(mobileAtom);\nexport const useWindowIsTablet = () => useAtomValue(tabletAtom);\nexport const useWindowIsTabletOrMobile = () => useAtomValue(tabletOrMobileAtom);\nexport const useWindowHeight = () => useAtomValue(heightAtom);\nexport const useWindowWidth = () => useAtomValue(widthAtom);\n"],"mappings":";;;;;AAAA,MAAa,eAAe,OAAO,WAAW;;;ACO9C,MAAa,aAAa,KAAK,eAAe,OAAO,cAAc,CAAC;AAEpE,MAAa,YAAY,KAAK,eAAe,OAAO,aAAa,CAAC;AAElE,MAAa,cAAc,MAAM,QAAQ,IAAI,SAAS,KAAK,YAAY,UAAU;AACjF,MAAa,aAAa,MAAM,QAAQ,IAAI,SAAS,KAAK,YAAY,UAAU;AAChF,MAAa,aAAa,MACrB,QAAQ,IAAI,SAAS,KAAK,YAAY,cAAc,IAAI,SAAS,KAAK,YAAY,UACvF;AACA,MAAa,qBAAqB,MAAM,QAAQ,IAAI,SAAS,KAAK,YAAY,UAAU;AAwBxF,MAAa,sBAAsB,EAC/B,UACA,eAAe,oBACf,cAAc,mBACd,qBAAqB,QACM;CAC3B,MAAM,QAAQ,SAAS;CAEvB,cAAc;EACV,IAAI,CAAC,cAAc;GAEf,IAAI,oBACA,MAAM,IAAI,YAAY,kBAAkB;GAE5C,IAAI,mBACA,MAAM,IAAI,WAAW,iBAAiB;GAE1C;EACJ;EAGA,MAAM,gBAAgB,OAAO,gBAAgB,KAAK,qBAAqB,qBAAqB,OAAO;EACnG,MAAM,eAAe,OAAO,eAAe,KAAK,oBAAoB,oBAAoB,OAAO;EAE/F,IAAI,kBAAkB,KAAK,MAAM,IAAI,UAAU,MAAM,eACjD,MAAM,IAAI,YAAY,aAAa;EAEvC,IAAI,iBAAiB,KAAK,MAAM,IAAI,SAAS,MAAM,cAC/C,MAAM,IAAI,WAAW,YAAY;CAIzC,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACZ,IAAI,CAAC,cACD;EAIJ,MAAM,gBAAgB,OAAO,gBAAgB,KAAK,qBAAqB,qBAAqB,OAAO;EACnG,MAAM,eAAe,OAAO,eAAe,KAAK,oBAAoB,oBAAoB,OAAO;EAE/F,IAAI,MAAM,IAAI,UAAU,MAAM,iBAAiB,kBAAkB,GAC7D,MAAM,IAAI,YAAY,aAAa;EAEvC,IAAI,MAAM,IAAI,SAAS,MAAM,gBAAgB,iBAAiB,GAC1D,MAAM,IAAI,WAAW,YAAY;CAEzC,GAAG;EAAC;EAAoB;EAAmB;CAAK,CAAC;CAEjD,MAAM,eAAe,2BACX;EACF,MAAM,IAAI,YAAY,OAAO,WAAW;EACxC,MAAM,IAAI,WAAW,OAAO,UAAU;CAC1C,GACA,oBACA,EAAE,UAAU,KAAK,CACrB;CAEA,gBAAgB;EACZ,IAAI,CAAC,cACD;EAGJ,OAAO,iBAAiB,UAAU,YAAY;EAC9C,OAAO,iBAAiB,qBAAqB,YAAY;EAEzD,aAAa;GACT,OAAO,oBAAoB,UAAU,YAAY;GACjD,OAAO,oBAAoB,qBAAqB,YAAY;EAChE;CACJ,GAAG,CAAC,YAAY,CAAC;CAEjB,OAAO;AACX;AAEA,mBAAmB,cAAc;AAEjC,MAAa,2BAA2B,aAAa,WAAW;AAChE,MAAa,0BAA0B,aAAa,UAAU;AAC9D,MAAa,0BAA0B,aAAa,UAAU;AAC9D,MAAa,kCAAkC,aAAa,kBAAkB;AAC9E,MAAa,wBAAwB,aAAa,UAAU;AAC5D,MAAa,uBAAuB,aAAa,SAAS"}