@yamada-ui/use-breakpoint/dist/index.js

Yamada UI useBreakpoint custom hook

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  getBreakpointValue: () => getBreakpointValue,
  useBreakpoint: () => useBreakpoint,
  useBreakpointEffect: () => useBreakpointEffect,
  useBreakpointState: () => useBreakpointState,
  useBreakpointValue: () => useBreakpointValue,
  useUpdateBreakpointEffect: () => useUpdateBreakpointEffect
});
module.exports = __toCommonJS(index_exports);
var import_core = require("@yamada-ui/core");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var useBreakpoint = () => {
  var _a, _b;
  const animationFrameId = (0, import_react.useRef)(0);
  const { theme } = (0, import_core.useTheme)();
  const breakpoints = theme.__breakpoints;
  const {
    containerRef,
    direction = "down",
    identifier = "@media screen"
  } = (_b = (_a = theme.__config) == null ? void 0 : _a.breakpoint) != null ? _b : {};
  const hasContainer = !!containerRef;
  if (!breakpoints) {
    console.warn(
      "useBreakpoint: `breakpoints` is undefined. Seems you forgot to put theme in `breakpoints`"
    );
  }
  const queries = (0, import_react.useMemo)(() => {
    if (!breakpoints) return [];
    return breakpoints.queries.map(
      ({ breakpoint: breakpoint2, maxW, minMaxQuery, minW }) => {
        var _a2;
        const searchValue = identifier === "@media screen" ? "@media screen and " : `${identifier} `;
        const query = (_a2 = minMaxQuery == null ? void 0 : minMaxQuery.replace(searchValue, "")) != null ? _a2 : "";
        return {
          breakpoint: breakpoint2,
          maxW,
          minW,
          query
        };
      }
    );
  }, [breakpoints, identifier]);
  const hasQueries = !!queries.length;
  const [breakpoint, setBreakpoint] = (0, import_react.useState)(() => {
    if (!(0, import_utils.createdDom)() || hasContainer || !hasQueries) return "base";
    for (const { breakpoint: breakpoint2, query } of queries) {
      const mql = window.matchMedia(query);
      if (mql.matches) return breakpoint2;
    }
  });
  const getBreakpoint = (0, import_react.useCallback)(
    (width) => {
      for (const { breakpoint: breakpoint2, maxW, minW } of queries) {
        if (direction !== "up") {
          if ((minW != null ? minW : 0) <= width) return breakpoint2;
        } else {
          if (width <= (maxW != null ? maxW : Infinity)) return breakpoint2;
        }
      }
      return "base";
    },
    [queries, direction]
  );
  (0, import_react.useEffect)(() => {
    if (!hasContainer || !hasQueries) return;
    if (!(0, import_utils.createdDom)()) return;
    const observer = new ResizeObserver(([entry]) => {
      if (!entry) return;
      cancelAnimationFrame(animationFrameId.current);
      const { width } = entry.contentRect;
      animationFrameId.current = requestAnimationFrame(() => {
        const breakpoint2 = getBreakpoint(width);
        setBreakpoint(breakpoint2);
      });
    });
    if (containerRef.current) observer.observe(containerRef.current);
    return () => {
      observer.disconnect();
      if (process.env.NODE_ENV !== "test")
        cancelAnimationFrame(animationFrameId.current);
    };
  }, [hasQueries, hasContainer, containerRef, getBreakpoint]);
  (0, import_react.useEffect)(() => {
    if (hasContainer || !hasQueries) return;
    const observer = queries.map(({ breakpoint: breakpoint2, query }) => {
      const mql = window.matchMedia(query);
      const onChange = (e) => {
        if (e.matches) setBreakpoint(breakpoint2);
      };
      if (typeof mql.addEventListener === "function")
        mql.addEventListener("change", onChange);
      return () => {
        if (typeof mql.removeEventListener === "function")
          mql.removeEventListener("change", onChange);
      };
    });
    return () => {
      observer.forEach((unobserve) => unobserve());
    };
  }, [queries, hasQueries, hasContainer]);
  return breakpoint;
};
var useBreakpointValue = (values) => {
  const { theme } = (0, import_core.useTheme)();
  const breakpoint = useBreakpoint();
  return (0, import_react.useMemo)(
    () => getBreakpointValue(values)(theme, breakpoint),
    [values, theme, breakpoint]
  );
};
var getBreakpointValue = (values = {}) => (theme, breakpoint) => {
  var _a, _b;
  if (!theme) {
    console.warn("getBreakpointValue: `theme` is undefined.");
  }
  const breakpoints = (_b = (_a = theme == null ? void 0 : theme.__breakpoints) == null ? void 0 : _a.keys) != null ? _b : [];
  if (!breakpoints.length) {
    console.warn("getBreakpointValue: `breakpoints` is undefined.");
  }
  const currentIndex = breakpoints.indexOf(breakpoint);
  for (let i = currentIndex; 0 < i; i--) {
    const nextBreakpoint = breakpoints[i];
    if (nextBreakpoint && values.hasOwnProperty(nextBreakpoint)) {
      return values[nextBreakpoint];
    }
  }
  return values.base;
};
var useBreakpointState = (initialState) => {
  const state = useBreakpointValue(initialState);
  return (0, import_react.useState)(state);
};
var useBreakpointEffect = (callback, deps) => {
  const breakpoint = useBreakpoint();
  (0, import_react.useEffect)(() => {
    callback(breakpoint);
  }, [breakpoint, ...deps]);
};
var useUpdateBreakpointEffect = (callback, deps) => {
  const breakpoint = useBreakpoint();
  (0, import_utils.useUpdateEffect)(() => {
    callback(breakpoint);
  }, [breakpoint, ...deps]);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  getBreakpointValue,
  useBreakpoint,
  useBreakpointEffect,
  useBreakpointState,
  useBreakpointValue,
  useUpdateBreakpointEffect
});
//# sourceMappingURL=index.js.map