@yamada-ui/react/dist/cjs/hooks/use-breakpoint/use-breakpoint.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-breakpoint.cjs","names":["useSystem","useEnvironment"],"sources":["../../../../src/hooks/use-breakpoint/use-breakpoint.ts"],"sourcesContent":["\"use client\"\n\nimport type { Breakpoint } from \"../../core\"\nimport { useCallback, useMemo, useRef, useSyncExternalStore } from \"react\"\nimport { useEnvironment, useSystem } from \"../../core\"\nimport { createdDom, isUndefined, noop } from \"../../utils\"\n\n/**\n * `useBreakpoint` is a custom hook that returns the current breakpoint.\n * This hook monitors changes in the window size and returns the appropriate value.\n *\n * @see https://yamada-ui.com/docs/hooks/use-breakpoint\n */\nexport const useBreakpoint = () => {\n  const animationFrameId = useRef(0)\n  const { breakpoints, config } = useSystem()\n  const { getWindow } = useEnvironment()\n  const {\n    containerRef,\n    direction = \"down\",\n    identifier = \"@media screen\",\n  } = config.breakpoint ?? {}\n  const hasContainer = !!containerRef\n\n  const queries = useMemo(() => {\n    return breakpoints.queries.map(\n      ({ breakpoint, maxW, minMaxQuery, minW }) => {\n        const searchValue =\n          identifier === \"@media screen\"\n            ? \"@media screen and \"\n            : `${identifier} `\n        const query = minMaxQuery?.replace(searchValue, \"\") ?? \"\"\n\n        return {\n          breakpoint,\n          maxW,\n          minW,\n          query,\n        }\n      },\n    )\n  }, [breakpoints, identifier])\n\n  const hasQueries = !!queries.length\n\n  const getBreakpoint = useCallback(\n    (width?: number) => {\n      if (isUndefined(width)) {\n        const win = getWindow()\n\n        if (hasContainer || !hasQueries) return \"base\"\n\n        for (const { breakpoint, query } of queries) {\n          const mql = win?.matchMedia(query)\n\n          if (mql?.matches) return breakpoint\n        }\n      } else {\n        for (const { breakpoint, maxW, minW } of queries) {\n          if (direction !== \"up\") {\n            if ((minW ?? 0) <= width) return breakpoint\n          } else {\n            if (width <= (maxW ?? Infinity)) return breakpoint\n          }\n        }\n      }\n\n      return \"base\"\n    },\n    [direction, getWindow, hasContainer, hasQueries, queries],\n  )\n\n  const breakpointRef = useRef<Breakpoint>(getBreakpoint())\n\n  const subscribe = useCallback(\n    (listener: () => void) => {\n      if (!hasContainer || !hasQueries) {\n        const observer = queries.map(({ breakpoint, query }): (() => void) => {\n          const mql = getWindow()?.matchMedia(query)\n\n          const onChange = (e: MediaQueryListEvent) => {\n            if (e.matches) breakpointRef.current = breakpoint\n\n            listener()\n          }\n\n          mql?.addEventListener(\"change\", onChange)\n\n          return () => {\n            mql?.removeEventListener(\"change\", onChange)\n          }\n        })\n\n        return () => {\n          observer.forEach((unobserve) => unobserve())\n        }\n      } else if (createdDom()) {\n        const observer = new ResizeObserver(([entry]) => {\n          if (!entry) return\n\n          cancelAnimationFrame(animationFrameId.current)\n\n          const { width } = entry.contentRect\n\n          breakpointRef.current = getBreakpoint(width)\n\n          animationFrameId.current = requestAnimationFrame(listener)\n        })\n\n        if (containerRef.current) observer.observe(containerRef.current)\n\n        return () => {\n          observer.disconnect()\n\n          if (process.env.NODE_ENV !== \"test\")\n            cancelAnimationFrame(animationFrameId.current)\n        }\n      } else {\n        return noop\n      }\n    },\n    [containerRef, getBreakpoint, getWindow, hasContainer, hasQueries, queries],\n  )\n\n  const getSnapshot = useCallback(() => {\n    return breakpointRef.current\n  }, [])\n\n  const breakpoint = useSyncExternalStore(subscribe, getSnapshot, getSnapshot)\n\n  return breakpoint\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAa,sBAAsB;CACjC,MAAM,qCAA0B,EAAE;CAClC,MAAM,EAAE,aAAa,WAAWA,mCAAW;CAC3C,MAAM,EAAE,cAAcC,6CAAgB;CACtC,MAAM,EACJ,cACA,YAAY,QACZ,aAAa,oBACX,OAAO,cAAc,EAAE;CAC3B,MAAM,eAAe,CAAC,CAAC;CAEvB,MAAM,mCAAwB;AAC5B,SAAO,YAAY,QAAQ,KACxB,EAAE,YAAY,MAAM,aAAa,WAAW;GAC3C,MAAM,cACJ,eAAe,kBACX,uBACA,GAAG,WAAW;AAGpB,UAAO;IACL;IACA;IACA;IACA,OANY,aAAa,QAAQ,aAAa,GAAG,IAAI;IAOtD;IAEJ;IACA,CAAC,aAAa,WAAW,CAAC;CAE7B,MAAM,aAAa,CAAC,CAAC,QAAQ;CAE7B,MAAM,wCACH,UAAmB;AAClB,yDAAgB,MAAM,EAAE;GACtB,MAAM,MAAM,WAAW;AAEvB,OAAI,gBAAgB,CAAC,WAAY,QAAO;AAExC,QAAK,MAAM,EAAE,YAAY,WAAW,QAGlC,MAFY,KAAK,WAAW,MAAM,GAEzB,QAAS,QAAO;QAG3B,MAAK,MAAM,EAAE,YAAY,MAAM,UAAU,QACvC,KAAI,cAAc,MAChB;QAAK,QAAQ,MAAM,MAAO,QAAO;aAE7B,UAAU,QAAQ,UAAW,QAAO;AAK9C,SAAO;IAET;EAAC;EAAW;EAAW;EAAc;EAAY;EAAQ,CAC1D;CAED,MAAM,kCAAmC,eAAe,CAAC;CAEzD,MAAM,oCACH,aAAyB;AACxB,MAAI,CAAC,gBAAgB,CAAC,YAAY;GAChC,MAAM,WAAW,QAAQ,KAAK,EAAE,YAAY,YAA0B;IACpE,MAAM,MAAM,WAAW,EAAE,WAAW,MAAM;IAE1C,MAAM,YAAY,MAA2B;AAC3C,SAAI,EAAE,QAAS,eAAc,UAAU;AAEvC,eAAU;;AAGZ,SAAK,iBAAiB,UAAU,SAAS;AAEzC,iBAAa;AACX,UAAK,oBAAoB,UAAU,SAAS;;KAE9C;AAEF,gBAAa;AACX,aAAS,SAAS,cAAc,WAAW,CAAC;;gEAEzB,EAAE;GACvB,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;AAC/C,QAAI,CAAC,MAAO;AAEZ,yBAAqB,iBAAiB,QAAQ;IAE9C,MAAM,EAAE,UAAU,MAAM;AAExB,kBAAc,UAAU,cAAc,MAAM;AAE5C,qBAAiB,UAAU,sBAAsB,SAAS;KAC1D;AAEF,OAAI,aAAa,QAAS,UAAS,QAAQ,aAAa,QAAQ;AAEhE,gBAAa;AACX,aAAS,YAAY;AAErB,QAAI,QAAQ,IAAI,aAAa,OAC3B,sBAAqB,iBAAiB,QAAQ;;QAGlD,0CAAO;IAGX;EAAC;EAAc;EAAe;EAAW;EAAc;EAAY;EAAQ,CAC5E;CAED,MAAM,2CAAgC;AACpC,SAAO,cAAc;IACpB,EAAE,CAAC;AAIN,wCAFwC,WAAW,aAAa,YAAY"}