braid-design-system/dist/lib/components/BraidProvider/BreakpointContext.cjs

Themeable design system for the SEEK Group

"use strict";
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const lib_css_breakpoints_cjs = require("../../css/breakpoints.cjs");
const minWidthQuery = (breakpoint) => window.matchMedia(`(min-width: ${breakpoint}px)`);
const getCurrentBreakpoint = (tabletQuery, desktopQuery, wideQuery) => {
  if (wideQuery.matches) {
    return "wide";
  }
  if (desktopQuery.matches) {
    return "desktop";
  }
  if (tabletQuery.matches) {
    return "tablet";
  }
  return "mobile";
};
const breakpointContext = react.createContext(null);
function BreakpointProvider({ children }) {
  const { tablet, desktop, wide } = lib_css_breakpoints_cjs.breakpoints;
  const [state, setState] = react.useState(null);
  react.useEffect(() => {
    let mounted = true;
    const tabletQuery = minWidthQuery(tablet);
    const desktopQuery = minWidthQuery(desktop);
    const wideQuery = minWidthQuery(wide);
    const onChange = () => {
      if (!mounted) {
        return;
      }
      const newBreakPoint = getCurrentBreakpoint(
        tabletQuery,
        desktopQuery,
        wideQuery
      );
      if (newBreakPoint !== state) {
        setState(newBreakPoint);
      }
    };
    tabletQuery.addListener(onChange);
    desktopQuery.addListener(onChange);
    wideQuery.addListener(onChange);
    onChange();
    return () => {
      mounted = false;
      tabletQuery.removeListener(onChange);
      desktopQuery.removeListener(onChange);
      wideQuery.removeListener(onChange);
    };
  }, [tablet, desktop, wide, state]);
  return /* @__PURE__ */ jsxRuntime.jsx(breakpointContext.Provider, { value: state, children });
}
exports.BreakpointProvider = BreakpointProvider;
exports.breakpointContext = breakpointContext;