@blocz/react-responsive 4.0.2 → 5.0.0

package/README.md

@@ -6,7 +6,7 @@ It allows you to display component only for particular screen sizes.
 
 If you need a responsive layout and adaptive components, `@blocz/react-responsive` is here for you!
 
-[See changelog](https://github.com/bloczjs/react-responsive/blob/master/CHANGELOG.md)
+[See changelog](https://github.com/bloczjs/react-responsive/blob/main/CHANGELOG.md)
 
 ## Table of contents <!-- omit in toc -->
 
@@ -28,7 +28,8 @@ If you need a responsive layout and adaptive components, `@blocz/react-responsiv
    5. [`matchMedia` polyfill](#matchmedia-polyfill)
       1. [Browser](#browser)
       2. [Node](#node)
-   6. [FAQ](#faq)
+   6. [React 16 / 17 support](#react-16--17-support)
+   7. [FAQ](#faq)
 
 ## How to use
 
@@ -317,8 +318,13 @@ If you are on want to use matchMedia on browser that don’t support it, I’d r
 
 If you want to mock `matchMedia` on Node to execute tests for instance, you can use [`mock-match-media`](https://github.com/Ayc0/mock-match-media/).
 
-And if you need an example with `Jest`, `@testing-library/react`, `React` and `@blocz/react-responsive`, you can take a look at [these tests](https://github.com/bloczjs/react-responsive/blob/master/packages/tests/src/__tests__/ssr.ts).
+And if you need an example with `Jest`, `@testing-library/react`, `React` and `@blocz/react-responsive`, you can take a look at [these tests](https://github.com/bloczjs/react-responsive/blob/main/packages/tests/src/__tests__/ssr.ts).
+
+### React 16 / 17 support
+
+`@blocz/react-responsive` relies on `useSyncExternalStore`. This function was added in React 18.
+If you are on React 16.8+ / React 17, you'll need to use [use-sync-external-store](https://npmx.dev/package/use-sync-external-store) to polyfill `useSyncExternalStore`.
 
 ### FAQ
 
-For other questions, please take a look at our [FAQ document](https://github.com/bloczjs/react-responsive/blob/master/FAQ.md).
+For other questions, please take a look at our [FAQ document](https://github.com/bloczjs/react-responsive/blob/main/FAQ.md).

package/lib/react-responsive.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);const l=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],u=[`width`,`height`],d=e=>Object.keys(e).reduce((t,n)=>{let r=e[n];if(!Array.isArray(r)||r.length<=1)return t;let[i,a,o,...s]=r;if(s.length>0){let e=Error(`The following fields "${s}" have been ignored`);console.error(e)}if(typeof i!=`number`||typeof a!=`number`)return t;let c,d;typeof o==`string`?c=o:typeof o==`object`&&(d=o.direction,c=o.unit);let f=Math.min(i,a),p=Math.max(i,a),m=c&&l.includes(c)?c:`px`,h=d&&u.includes(d)?d:`width`;return t[n]=[f,p,m,h],t[`${n}Up`]=[f,1/0,m,h],t[`${n}Down`]=[0,p,m,h],t},{}),f={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},p=c.createContext(d(f)),m=({breakpoints:e=f,additionalBreakpoints:t,children:n})=>c.createElement(p.Provider,{value:d({...e,...t})},n);m.displayName=`BreakpointsProvider`;const h=e=>{let t=[],[n,r,i,a]=e,o;return n!==0&&(o=`${n}${i}`,t.push(`(min-${a}:${o})`)),r!==1/0&&(o=`${r}${i}`,t.push(`(max-${a}:${o})`)),` `+t.join(` and `)},g=e=>(t=``)=>{if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>h(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid breakpoint${e?``:`s`}`)}return r},_=e=>{let t=c.useMemo(()=>matchMedia(e),[e]),[n,r]=c.useState(t.matches);return c.useLayoutEffect(()=>{r(t.matches);let e=e=>{r(e.matches)};return t.addListener(e),()=>{t.removeListener(e)}},[t]),n},v=e=>{let t=c.useContext(p),n=c.useMemo(()=>g(t),[t]);return _(c.useMemo(()=>n(e),[n,e])||`-`)};function y({matchMedia:e,on:t,as:n,children:r,...i}){let a=v(t),o=_(e||`-`);return a||o?c.createElement(n||c.Fragment,n?i:void 0,r):null}exports.BreakpointsContext=p,exports.BreakpointsProvider=m,exports.Only=y,exports.useBreakpoint=v,exports.useMediaQuery=_;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);const l=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],u=[`width`,`height`];function d(e){return Object.keys(e).reduce((t,n)=>{let r=e[n];if(!Array.isArray(r)||r.length<=1)return t;let[i,a,o,...s]=r;if(s.length>0){let e=Error(`The following fields "${s}" have been ignored`);console.error(e)}if(typeof i!=`number`||typeof a!=`number`)return t;let c,d;typeof o==`string`?c=o:typeof o==`object`&&(d=o.direction,c=o.unit);let f=Math.min(i,a),p=Math.max(i,a),m=c&&l.includes(c)?c:`px`,h=d&&u.includes(d)?d:`width`;return t[n]=[f,p,m,h],t[`${n}Up`]=[f,1/0,m,h],t[`${n}Down`]=[0,p,m,h],t},{})}const f={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},p=c.createContext(d(f));function m({breakpoints:e=f,additionalBreakpoints:t,children:n}){return c.createElement(p.Provider,{value:d({...e,...t})},n)}function h(e){let t=[],[n,r,i,a]=e,o;return n!==0&&(o=`${n}${i}`,t.push(`(min-${a}:${o})`)),r!==1/0&&(o=`${r}${i}`,t.push(`(max-${a}:${o})`)),` `+t.join(` and `)}function g(e){return function(t=``){if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>h(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid breakpoint${e?``:`s`}`)}return r}}function _(e){let t=c.useMemo(()=>matchMedia(e),[e]);return c.useSyncExternalStore(c.useCallback(e=>(t.addListener(e),()=>t.removeListener(e)),[t]),()=>t.matches,()=>t.matches)}function v(e){let t=c.useContext(p),n=c.useMemo(()=>g(t),[t]);return _(c.useMemo(()=>n(e),[n,e])||`-`)}function y({matchMedia:e,on:t,as:n,children:r,...i}){let a=v(t),o=_(e||`-`);return a||o?c.createElement(n||c.Fragment,n?i:void 0,r):null}exports.BreakpointsContext=p,exports.BreakpointsProvider=m,exports.Only=y,exports.useBreakpoint=v,exports.useMediaQuery=_;
 //# sourceMappingURL=react-responsive.cjs.map

package/lib/react-responsive.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"react-responsive.cjs","names":["React","React","React","React"],"sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/mediaQueryBuilder.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n  | \"em\"\n  | \"ex\"\n  | \"%\"\n  | \"px\"\n  | \"cm\"\n  | \"mm\"\n  | \"in\"\n  | \"pt\"\n  | \"pc\"\n  | \"ch\"\n  | \"rem\"\n  | \"vh\"\n  | \"vw\"\n  | \"vmin\"\n  | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n  \"em\",\n  \"ex\",\n  \"%\",\n  \"px\",\n  \"cm\",\n  \"mm\",\n  \"in\",\n  \"pt\",\n  \"pc\",\n  \"ch\",\n  \"rem\",\n  \"vh\",\n  \"vw\",\n  \"vmin\",\n  \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n  | [number, number]\n  | [number, number, Units]\n  | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n  [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n  [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n  return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n    const breakpoint = inBreakpoints[breakpointName];\n\n    if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n      return breakpoints;\n    }\n\n    const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n    if (rest.length > 0) {\n      const error = new Error(`The following fields \"${rest}\" have been ignored`);\n      console.error(error);\n    }\n\n    if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n      return breakpoints;\n    }\n\n    let supposedUnit: Units | undefined;\n    let supposedDirection: Directions | undefined;\n    if (typeof options === \"string\") {\n      supposedUnit = options;\n    } else if (typeof options === \"object\") {\n      supposedDirection = options.direction;\n      supposedUnit = options.unit;\n    }\n\n    const min = Math.min(supposedMin, supposedMax);\n    const max = Math.max(supposedMin, supposedMax);\n    const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n    const direction =\n      supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n    breakpoints[breakpointName] = [min, max, unit, direction];\n    breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n    breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n    return breakpoints;\n  }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n  xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n  sm: [576, 767, \"px\"], // Small devices (landscape phones)\n  md: [768, 991, \"px\"], // Medium devices (tablets)\n  lg: [992, 1199, \"px\"], // Large devices (desktops)\n  xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n  sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n  breakpoints?: ExposedBreakpoints;\n  additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n  breakpoints = defaultBreakpoints,\n  additionalBreakpoints,\n  children,\n}) => {\n  return (\n    <BreakpointsContext.Provider\n      value={sanitize({\n        ...breakpoints,\n        ...additionalBreakpoints,\n      })}\n    >\n      {children}\n    </BreakpointsContext.Provider>\n  );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n  const mediaList: string[] = [];\n  const [minValue, maxValue, unit, direction] = breakpoint;\n  let str;\n\n  // Min value\n  if (minValue !== 0) {\n    str = `${minValue}${unit}`;\n    mediaList.push(`(min-${direction}:${str})`);\n  }\n\n  // Max value\n  if (maxValue !== Infinity) {\n    str = `${maxValue}${unit}`;\n    mediaList.push(`(max-${direction}:${str})`);\n  }\n\n  return \" \" + mediaList.join(\" and \");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n  (breakpoints: Breakpoints) =>\n  (on = \"\"): string => {\n    if (!on) {\n      return \"\";\n    }\n    const rawBreakpointNames = on.split(\" \");\n    const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n    const mediaQuery = filteredBreakpoints\n      .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n      .filter(Boolean)\n      .join(\",\");\n    if (!mediaQuery) {\n      const isUniqBreakpoint = rawBreakpointNames.length === 1;\n      console.error(\n        `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n          isUniqBreakpoint ? \"a \" : \"\"\n        }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n      );\n    }\n    return mediaQuery;\n  };\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n  const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n  const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n  React.useLayoutEffect(() => {\n    setIsShown(mediaQueryList.matches);\n    const listener = (event: MediaQueryListEvent) => {\n      // Those are important updates, so we don't want to use transitions on them\n      setIsShown(event.matches);\n    };\n\n    // cannot use addEventListener for IE 11 and safari 13-\n    mediaQueryList.addListener(listener);\n    return () => {\n      mediaQueryList.removeListener(listener);\n    };\n  }, [mediaQueryList]);\n\n  return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n  const breakpoints = React.useContext(BreakpointsContext);\n  const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n  const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n  return useMediaQuery(mediaQuery || \"-\");\n};\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n  matchMedia?: string;\n  on?: string;\n  as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n  matchMedia,\n  on,\n  as,\n  children,\n  ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n  const matchOn = useBreakpoint(on);\n  const matchQuery = useMediaQuery(matchMedia || \"-\");\n  const isShown = matchOn || matchQuery;\n\n  if (!isShown) {\n    return null;\n  }\n\n  return React.createElement(\n    // @ts-expect-error – this is a complex type\n    as || React.Fragment,\n    as ? (props as OtherProps) : undefined,\n    children,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"react-responsive.cjs","names":["React","React","React","React"],"sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/mediaQueryBuilder.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n  | \"em\"\n  | \"ex\"\n  | \"%\"\n  | \"px\"\n  | \"cm\"\n  | \"mm\"\n  | \"in\"\n  | \"pt\"\n  | \"pc\"\n  | \"ch\"\n  | \"rem\"\n  | \"vh\"\n  | \"vw\"\n  | \"vmin\"\n  | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n  \"em\",\n  \"ex\",\n  \"%\",\n  \"px\",\n  \"cm\",\n  \"mm\",\n  \"in\",\n  \"pt\",\n  \"pc\",\n  \"ch\",\n  \"rem\",\n  \"vh\",\n  \"vw\",\n  \"vmin\",\n  \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n  | [number, number]\n  | [number, number, Units]\n  | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n  [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n  [breakpoint: string]: Breakpoint;\n}\n\nexport function sanitize(inBreakpoints: ExposedBreakpoints): Breakpoints {\n  return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n    const breakpoint = inBreakpoints[breakpointName];\n\n    if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n      return breakpoints;\n    }\n\n    const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n    if (rest.length > 0) {\n      const error = new Error(`The following fields \"${rest}\" have been ignored`);\n      console.error(error);\n    }\n\n    if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n      return breakpoints;\n    }\n\n    let supposedUnit: Units | undefined;\n    let supposedDirection: Directions | undefined;\n    if (typeof options === \"string\") {\n      supposedUnit = options;\n    } else if (typeof options === \"object\") {\n      supposedDirection = options.direction;\n      supposedUnit = options.unit;\n    }\n\n    const min = Math.min(supposedMin, supposedMax);\n    const max = Math.max(supposedMin, supposedMax);\n    const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n    const direction =\n      supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n    breakpoints[breakpointName] = [min, max, unit, direction];\n    breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n    breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n    return breakpoints;\n  }, {});\n}\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n  xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n  sm: [576, 767, \"px\"], // Small devices (landscape phones)\n  md: [768, 991, \"px\"], // Medium devices (tablets)\n  lg: [992, 1199, \"px\"], // Large devices (desktops)\n  xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n  sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n  breakpoints?: ExposedBreakpoints;\n  additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport function BreakpointsProvider({\n  breakpoints = defaultBreakpoints,\n  additionalBreakpoints,\n  children,\n}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement {\n  return (\n    <BreakpointsContext.Provider\n      value={sanitize({\n        ...breakpoints,\n        ...additionalBreakpoints,\n      })}\n    >\n      {children}\n    </BreakpointsContext.Provider>\n  );\n}\n","import { Breakpoint } from \"./sanitize\";\n\nexport function fromBreakpointToMedia(breakpoint: Breakpoint): string {\n  const mediaList: string[] = [];\n  const [minValue, maxValue, unit, direction] = breakpoint;\n  let str;\n\n  // Min value\n  if (minValue !== 0) {\n    str = `${minValue}${unit}`;\n    mediaList.push(`(min-${direction}:${str})`);\n  }\n\n  // Max value\n  if (maxValue !== Infinity) {\n    str = `${maxValue}${unit}`;\n    mediaList.push(`(max-${direction}:${str})`);\n  }\n\n  return \" \" + mediaList.join(\" and \");\n}\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport function mediaQueryBuilder(breakpoints: Breakpoints) {\n  return function toMediaQuery(on = \"\"): string {\n    if (!on) {\n      return \"\";\n    }\n    const rawBreakpointNames = on.split(\" \");\n    const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n    const mediaQuery = filteredBreakpoints\n      .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n      .filter(Boolean)\n      .join(\",\");\n    if (!mediaQuery) {\n      const isUniqBreakpoint = rawBreakpointNames.length === 1;\n      console.error(\n        `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n          isUniqBreakpoint ? \"a \" : \"\"\n        }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n      );\n    }\n    return mediaQuery;\n  };\n}\n","import * as React from \"react\";\n\nexport function useMediaQuery(mediaQuery: string): boolean {\n  const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n\n  // Those are important updates, so we don't want to use transitions on them\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (callback) => {\n        // cannot use addEventListener for IE 11 and safari 13-\n        mediaQueryList.addListener(callback);\n        return () => mediaQueryList.removeListener(callback);\n      },\n      [mediaQueryList],\n    ),\n    () => mediaQueryList.matches,\n    () => mediaQueryList.matches,\n  );\n}\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport function useBreakpoint(on?: string): boolean {\n  const breakpoints = React.useContext(BreakpointsContext);\n  const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n  const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n  return useMediaQuery(mediaQuery || \"-\");\n}\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n  matchMedia?: string;\n  on?: string;\n  as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n  matchMedia,\n  on,\n  as,\n  children,\n  ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n  const matchOn = useBreakpoint(on);\n  const matchQuery = useMediaQuery(matchMedia || \"-\");\n  const isShown = matchOn || matchQuery;\n\n  if (!isShown) {\n    return null;\n  }\n\n  return React.createElement(\n    // @ts-expect-error – this is a complex type\n    as || React.Fragment,\n    as ? (props as OtherProps) : undefined,\n    children,\n  );\n}\n"],"mappings":"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"}

package/lib/react-responsive.d.cts

@@ -21,7 +21,11 @@ interface BreakpointsProviderProps {
   breakpoints?: ExposedBreakpoints;
   additionalBreakpoints?: ExposedBreakpoints;
 }
-declare const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>>;
+declare function BreakpointsProvider({
+  breakpoints,
+  additionalBreakpoints,
+  children
+}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement;
 //#endregion
 //#region src/Only.d.ts
 type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {
@@ -38,10 +42,10 @@ declare function Only<OtherProps = Record<string, never>>({
 }: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null;
 //#endregion
 //#region src/useBreakpoint.d.ts
-declare const useBreakpoint: (on?: string) => boolean;
+declare function useBreakpoint(on?: string): boolean;
 //#endregion
 //#region src/useMediaQuery.d.ts
-declare const useMediaQuery: (mediaQuery: string) => boolean;
+declare function useMediaQuery(mediaQuery: string): boolean;
 //#endregion
 export { BreakpointsContext, BreakpointsProvider, Only, type Units, useBreakpoint, useMediaQuery };
 //# sourceMappingURL=react-responsive.d.cts.map

package/lib/react-responsive.d.mts

@@ -21,7 +21,11 @@ interface BreakpointsProviderProps {
   breakpoints?: ExposedBreakpoints;
   additionalBreakpoints?: ExposedBreakpoints;
 }
-declare const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>>;
+declare function BreakpointsProvider({
+  breakpoints,
+  additionalBreakpoints,
+  children
+}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement;
 //#endregion
 //#region src/Only.d.ts
 type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {
@@ -38,10 +42,10 @@ declare function Only<OtherProps = Record<string, never>>({
 }: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null;
 //#endregion
 //#region src/useBreakpoint.d.ts
-declare const useBreakpoint: (on?: string) => boolean;
+declare function useBreakpoint(on?: string): boolean;
 //#endregion
 //#region src/useMediaQuery.d.ts
-declare const useMediaQuery: (mediaQuery: string) => boolean;
+declare function useMediaQuery(mediaQuery: string): boolean;
 //#endregion
 export { BreakpointsContext, BreakpointsProvider, Only, type Units, useBreakpoint, useMediaQuery };
 //# sourceMappingURL=react-responsive.d.mts.map

package/lib/react-responsive.mjs

@@ -1,2 +1,2 @@
-import*as e from"react";const t=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],n=[`width`,`height`],r=e=>Object.keys(e).reduce((r,i)=>{let a=e[i];if(!Array.isArray(a)||a.length<=1)return r;let[o,s,c,...l]=a;if(l.length>0){let e=Error(`The following fields "${l}" have been ignored`);console.error(e)}if(typeof o!=`number`||typeof s!=`number`)return r;let u,d;typeof c==`string`?u=c:typeof c==`object`&&(d=c.direction,u=c.unit);let f=Math.min(o,s),p=Math.max(o,s),m=u&&t.includes(u)?u:`px`,h=d&&n.includes(d)?d:`width`;return r[i]=[f,p,m,h],r[`${i}Up`]=[f,1/0,m,h],r[`${i}Down`]=[0,p,m,h],r},{}),i={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},a=e.createContext(r(i)),o=({breakpoints:t=i,additionalBreakpoints:n,children:o})=>e.createElement(a.Provider,{value:r({...t,...n})},o);o.displayName=`BreakpointsProvider`;const s=e=>{let t=[],[n,r,i,a]=e,o;return n!==0&&(o=`${n}${i}`,t.push(`(min-${a}:${o})`)),r!==1/0&&(o=`${r}${i}`,t.push(`(max-${a}:${o})`)),` `+t.join(` and `)},c=e=>(t=``)=>{if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>s(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid breakpoint${e?``:`s`}`)}return r},l=t=>{let n=e.useMemo(()=>matchMedia(t),[t]),[r,i]=e.useState(n.matches);return e.useLayoutEffect(()=>{i(n.matches);let e=e=>{i(e.matches)};return n.addListener(e),()=>{n.removeListener(e)}},[n]),r},u=t=>{let n=e.useContext(a),r=e.useMemo(()=>c(n),[n]);return l(e.useMemo(()=>r(t),[r,t])||`-`)};function d({matchMedia:t,on:n,as:r,children:i,...a}){let o=u(n),s=l(t||`-`);return o||s?e.createElement(r||e.Fragment,r?a:void 0,i):null}export{a as BreakpointsContext,o as BreakpointsProvider,d as Only,u as useBreakpoint,l as useMediaQuery};
+import*as e from"react";const t=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],n=[`width`,`height`];function r(e){return Object.keys(e).reduce((r,i)=>{let a=e[i];if(!Array.isArray(a)||a.length<=1)return r;let[o,s,c,...l]=a;if(l.length>0){let e=Error(`The following fields "${l}" have been ignored`);console.error(e)}if(typeof o!=`number`||typeof s!=`number`)return r;let u,d;typeof c==`string`?u=c:typeof c==`object`&&(d=c.direction,u=c.unit);let f=Math.min(o,s),p=Math.max(o,s),m=u&&t.includes(u)?u:`px`,h=d&&n.includes(d)?d:`width`;return r[i]=[f,p,m,h],r[`${i}Up`]=[f,1/0,m,h],r[`${i}Down`]=[0,p,m,h],r},{})}const i={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},a=e.createContext(r(i));function o({breakpoints:t=i,additionalBreakpoints:n,children:o}){return e.createElement(a.Provider,{value:r({...t,...n})},o)}function s(e){let t=[],[n,r,i,a]=e,o;return n!==0&&(o=`${n}${i}`,t.push(`(min-${a}:${o})`)),r!==1/0&&(o=`${r}${i}`,t.push(`(max-${a}:${o})`)),` `+t.join(` and `)}function c(e){return function(t=``){if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>s(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid breakpoint${e?``:`s`}`)}return r}}function l(t){let n=e.useMemo(()=>matchMedia(t),[t]);return e.useSyncExternalStore(e.useCallback(e=>(n.addListener(e),()=>n.removeListener(e)),[n]),()=>n.matches,()=>n.matches)}function u(t){let n=e.useContext(a),r=e.useMemo(()=>c(n),[n]);return l(e.useMemo(()=>r(t),[r,t])||`-`)}function d({matchMedia:t,on:n,as:r,children:i,...a}){let o=u(n),s=l(t||`-`);return o||s?e.createElement(r||e.Fragment,r?a:void 0,i):null}export{a as BreakpointsContext,o as BreakpointsProvider,d as Only,u as useBreakpoint,l as useMediaQuery};
 //# sourceMappingURL=react-responsive.mjs.map

package/lib/react-responsive.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"react-responsive.mjs","names":[],"sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/mediaQueryBuilder.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n  | \"em\"\n  | \"ex\"\n  | \"%\"\n  | \"px\"\n  | \"cm\"\n  | \"mm\"\n  | \"in\"\n  | \"pt\"\n  | \"pc\"\n  | \"ch\"\n  | \"rem\"\n  | \"vh\"\n  | \"vw\"\n  | \"vmin\"\n  | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n  \"em\",\n  \"ex\",\n  \"%\",\n  \"px\",\n  \"cm\",\n  \"mm\",\n  \"in\",\n  \"pt\",\n  \"pc\",\n  \"ch\",\n  \"rem\",\n  \"vh\",\n  \"vw\",\n  \"vmin\",\n  \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n  | [number, number]\n  | [number, number, Units]\n  | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n  [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n  [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n  return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n    const breakpoint = inBreakpoints[breakpointName];\n\n    if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n      return breakpoints;\n    }\n\n    const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n    if (rest.length > 0) {\n      const error = new Error(`The following fields \"${rest}\" have been ignored`);\n      console.error(error);\n    }\n\n    if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n      return breakpoints;\n    }\n\n    let supposedUnit: Units | undefined;\n    let supposedDirection: Directions | undefined;\n    if (typeof options === \"string\") {\n      supposedUnit = options;\n    } else if (typeof options === \"object\") {\n      supposedDirection = options.direction;\n      supposedUnit = options.unit;\n    }\n\n    const min = Math.min(supposedMin, supposedMax);\n    const max = Math.max(supposedMin, supposedMax);\n    const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n    const direction =\n      supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n    breakpoints[breakpointName] = [min, max, unit, direction];\n    breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n    breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n    return breakpoints;\n  }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n  xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n  sm: [576, 767, \"px\"], // Small devices (landscape phones)\n  md: [768, 991, \"px\"], // Medium devices (tablets)\n  lg: [992, 1199, \"px\"], // Large devices (desktops)\n  xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n  sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n  breakpoints?: ExposedBreakpoints;\n  additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n  breakpoints = defaultBreakpoints,\n  additionalBreakpoints,\n  children,\n}) => {\n  return (\n    <BreakpointsContext.Provider\n      value={sanitize({\n        ...breakpoints,\n        ...additionalBreakpoints,\n      })}\n    >\n      {children}\n    </BreakpointsContext.Provider>\n  );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n  const mediaList: string[] = [];\n  const [minValue, maxValue, unit, direction] = breakpoint;\n  let str;\n\n  // Min value\n  if (minValue !== 0) {\n    str = `${minValue}${unit}`;\n    mediaList.push(`(min-${direction}:${str})`);\n  }\n\n  // Max value\n  if (maxValue !== Infinity) {\n    str = `${maxValue}${unit}`;\n    mediaList.push(`(max-${direction}:${str})`);\n  }\n\n  return \" \" + mediaList.join(\" and \");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n  (breakpoints: Breakpoints) =>\n  (on = \"\"): string => {\n    if (!on) {\n      return \"\";\n    }\n    const rawBreakpointNames = on.split(\" \");\n    const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n    const mediaQuery = filteredBreakpoints\n      .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n      .filter(Boolean)\n      .join(\",\");\n    if (!mediaQuery) {\n      const isUniqBreakpoint = rawBreakpointNames.length === 1;\n      console.error(\n        `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n          isUniqBreakpoint ? \"a \" : \"\"\n        }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n      );\n    }\n    return mediaQuery;\n  };\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n  const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n  const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n  React.useLayoutEffect(() => {\n    setIsShown(mediaQueryList.matches);\n    const listener = (event: MediaQueryListEvent) => {\n      // Those are important updates, so we don't want to use transitions on them\n      setIsShown(event.matches);\n    };\n\n    // cannot use addEventListener for IE 11 and safari 13-\n    mediaQueryList.addListener(listener);\n    return () => {\n      mediaQueryList.removeListener(listener);\n    };\n  }, [mediaQueryList]);\n\n  return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n  const breakpoints = React.useContext(BreakpointsContext);\n  const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n  const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n  return useMediaQuery(mediaQuery || \"-\");\n};\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n  matchMedia?: string;\n  on?: string;\n  as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n  matchMedia,\n  on,\n  as,\n  children,\n  ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n  const matchOn = useBreakpoint(on);\n  const matchQuery = useMediaQuery(matchMedia || \"-\");\n  const isShown = matchOn || matchQuery;\n\n  if (!isShown) {\n    return null;\n  }\n\n  return React.createElement(\n    // @ts-expect-error – this is a complex type\n    as || React.Fragment,\n    as ? (props as OtherProps) : undefined,\n    children,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"react-responsive.mjs","names":[],"sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/mediaQueryBuilder.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n  | \"em\"\n  | \"ex\"\n  | \"%\"\n  | \"px\"\n  | \"cm\"\n  | \"mm\"\n  | \"in\"\n  | \"pt\"\n  | \"pc\"\n  | \"ch\"\n  | \"rem\"\n  | \"vh\"\n  | \"vw\"\n  | \"vmin\"\n  | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n  \"em\",\n  \"ex\",\n  \"%\",\n  \"px\",\n  \"cm\",\n  \"mm\",\n  \"in\",\n  \"pt\",\n  \"pc\",\n  \"ch\",\n  \"rem\",\n  \"vh\",\n  \"vw\",\n  \"vmin\",\n  \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n  | [number, number]\n  | [number, number, Units]\n  | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n  [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n  [breakpoint: string]: Breakpoint;\n}\n\nexport function sanitize(inBreakpoints: ExposedBreakpoints): Breakpoints {\n  return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n    const breakpoint = inBreakpoints[breakpointName];\n\n    if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n      return breakpoints;\n    }\n\n    const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n    if (rest.length > 0) {\n      const error = new Error(`The following fields \"${rest}\" have been ignored`);\n      console.error(error);\n    }\n\n    if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n      return breakpoints;\n    }\n\n    let supposedUnit: Units | undefined;\n    let supposedDirection: Directions | undefined;\n    if (typeof options === \"string\") {\n      supposedUnit = options;\n    } else if (typeof options === \"object\") {\n      supposedDirection = options.direction;\n      supposedUnit = options.unit;\n    }\n\n    const min = Math.min(supposedMin, supposedMax);\n    const max = Math.max(supposedMin, supposedMax);\n    const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n    const direction =\n      supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n    breakpoints[breakpointName] = [min, max, unit, direction];\n    breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n    breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n    return breakpoints;\n  }, {});\n}\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n  xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n  sm: [576, 767, \"px\"], // Small devices (landscape phones)\n  md: [768, 991, \"px\"], // Medium devices (tablets)\n  lg: [992, 1199, \"px\"], // Large devices (desktops)\n  xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n  sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n  breakpoints?: ExposedBreakpoints;\n  additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport function BreakpointsProvider({\n  breakpoints = defaultBreakpoints,\n  additionalBreakpoints,\n  children,\n}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement {\n  return (\n    <BreakpointsContext.Provider\n      value={sanitize({\n        ...breakpoints,\n        ...additionalBreakpoints,\n      })}\n    >\n      {children}\n    </BreakpointsContext.Provider>\n  );\n}\n","import { Breakpoint } from \"./sanitize\";\n\nexport function fromBreakpointToMedia(breakpoint: Breakpoint): string {\n  const mediaList: string[] = [];\n  const [minValue, maxValue, unit, direction] = breakpoint;\n  let str;\n\n  // Min value\n  if (minValue !== 0) {\n    str = `${minValue}${unit}`;\n    mediaList.push(`(min-${direction}:${str})`);\n  }\n\n  // Max value\n  if (maxValue !== Infinity) {\n    str = `${maxValue}${unit}`;\n    mediaList.push(`(max-${direction}:${str})`);\n  }\n\n  return \" \" + mediaList.join(\" and \");\n}\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport function mediaQueryBuilder(breakpoints: Breakpoints) {\n  return function toMediaQuery(on = \"\"): string {\n    if (!on) {\n      return \"\";\n    }\n    const rawBreakpointNames = on.split(\" \");\n    const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n    const mediaQuery = filteredBreakpoints\n      .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n      .filter(Boolean)\n      .join(\",\");\n    if (!mediaQuery) {\n      const isUniqBreakpoint = rawBreakpointNames.length === 1;\n      console.error(\n        `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n          isUniqBreakpoint ? \"a \" : \"\"\n        }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n      );\n    }\n    return mediaQuery;\n  };\n}\n","import * as React from \"react\";\n\nexport function useMediaQuery(mediaQuery: string): boolean {\n  const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n\n  // Those are important updates, so we don't want to use transitions on them\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (callback) => {\n        // cannot use addEventListener for IE 11 and safari 13-\n        mediaQueryList.addListener(callback);\n        return () => mediaQueryList.removeListener(callback);\n      },\n      [mediaQueryList],\n    ),\n    () => mediaQueryList.matches,\n    () => mediaQueryList.matches,\n  );\n}\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport function useBreakpoint(on?: string): boolean {\n  const breakpoints = React.useContext(BreakpointsContext);\n  const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n  const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n  return useMediaQuery(mediaQuery || \"-\");\n}\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n  matchMedia?: string;\n  on?: string;\n  as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n  matchMedia,\n  on,\n  as,\n  children,\n  ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n  const matchOn = useBreakpoint(on);\n  const matchQuery = useMediaQuery(matchMedia || \"-\");\n  const isShown = matchOn || matchQuery;\n\n  if (!isShown) {\n    return null;\n  }\n\n  return React.createElement(\n    // @ts-expect-error – this is a complex type\n    as || React.Fragment,\n    as ? (props as OtherProps) : undefined,\n    children,\n  );\n}\n"],"mappings":"wBAiBA,MAAM,EAAgC,CACpC,KACA,KACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,MACA,KACA,KACA,OACA,OACD,CAIK,EAA0C,CAAC,QAAS,SAAS,CAiBnE,SAAgB,EAAS,EAAgD,CACvE,OAAO,OAAO,KAAK,EAAc,CAAC,QAAqB,EAAa,IAAmB,CACrF,IAAM,EAAa,EAAc,GAEjC,GAAI,CAAC,MAAM,QAAQ,EAAW,EAAI,EAAW,QAAU,EACrD,OAAO,EAGT,GAAM,CAAC,EAAa,EAAa,EAAS,GAAG,GAAQ,EACrD,GAAI,EAAK,OAAS,EAAG,CACnB,IAAM,EAAY,MAAM,yBAAyB,EAAK,qBAAqB,CAC3E,QAAQ,MAAM,EAAM,CAGtB,GAAI,OAAO,GAAgB,UAAY,OAAO,GAAgB,SAC5D,OAAO,EAGT,IAAI,EACA,EACA,OAAO,GAAY,SACrB,EAAe,EACN,OAAO,GAAY,WAC5B,EAAoB,EAAQ,UAC5B,EAAe,EAAQ,MAGzB,IAAM,EAAM,KAAK,IAAI,EAAa,EAAY,CACxC,EAAM,KAAK,IAAI,EAAa,EAAY,CACxC,EAAO,GAAgB,EAAqB,SAAS,EAAa,CAAG,EAAe,KACpF,EACJ,GAAqB,EAA0B,SAAS,EAAkB,CAAG,EAAoB,QAMnG,MAJA,GAAY,GAAkB,CAAC,EAAK,EAAK,EAAM,EAAU,CACzD,EAAY,GAAG,EAAe,KAAO,CAAC,EAAK,IAAU,EAAM,EAAU,CACrE,EAAY,GAAG,EAAe,OAAS,CAAC,EAAG,EAAK,EAAM,EAAU,CAEzD,GACN,EAAE,CAAC,CCxFR,MAAM,EAAyC,CAC7C,GAAI,CAAC,EAAG,IAAK,KAAK,CAClB,GAAI,CAAC,IAAK,IAAK,KAAK,CACpB,GAAI,CAAC,IAAK,IAAK,KAAK,CACpB,GAAI,CAAC,IAAK,KAAM,KAAK,CACrB,GAAI,CAAC,KAAM,IAAU,KAAK,CAC3B,CAEY,EAAiD,EAAM,cAClE,EAAS,EAAmB,CAC7B,CAOD,SAAgB,EAAoB,CAClC,cAAc,EACd,wBACA,YACwE,CACxE,OACE,EAAA,cAAC,EAAmB,SAApB,CACE,MAAO,EAAS,CACd,GAAG,EACH,GAAG,EACJ,CAAC,CAG0B,CAD3B,EAC2B,CChClC,SAAgB,EAAsB,EAAgC,CACpE,IAAM,EAAsB,EAAE,CACxB,CAAC,EAAU,EAAU,EAAM,GAAa,EAC1C,EAcJ,OAXI,IAAa,IACf,EAAM,GAAG,IAAW,IACpB,EAAU,KAAK,QAAQ,EAAU,GAAG,EAAI,GAAG,EAIzC,IAAa,MACf,EAAM,GAAG,IAAW,IACpB,EAAU,KAAK,QAAQ,EAAU,GAAG,EAAI,GAAG,EAGtC,IAAM,EAAU,KAAK,QAAQ,CChBtC,SAAgB,EAAkB,EAA0B,CAC1D,OAAO,SAAsB,EAAK,GAAY,CAC5C,GAAI,CAAC,EACH,MAAO,GAET,IAAM,EAAqB,EAAG,MAAM,IAAI,CAElC,EADsB,EAAmB,IAAK,GAAmB,EAAY,GAAgB,CAAC,OAAO,QACrE,CACnC,IAAK,GAAe,EAAsB,EAAW,CAAC,CACtD,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,CAAC,EAAY,CACf,IAAM,EAAmB,EAAmB,SAAW,EACvD,QAAQ,MACN,IAAI,EAAmB,KAAK,OAAO,CAAC,IAAI,EAAmB,KAAO,MAAM,MACtE,EAAmB,KAAO,GAC3B,kBAAkB,EAAmB,GAAK,MAC5C,CAEH,OAAO,GCpBX,SAAgB,EAAc,EAA6B,CACzD,IAAM,EAAiB,EAAM,YAAc,WAAW,EAAW,CAAE,CAAC,EAAW,CAAC,CAGhF,OAAO,EAAM,qBACX,EAAM,YACH,IAEC,EAAe,YAAY,EAAS,KACvB,EAAe,eAAe,EAAS,EAEtD,CAAC,EAAe,CACjB,KACK,EAAe,YACf,EAAe,QACtB,CCTH,SAAgB,EAAc,EAAsB,CAClD,IAAM,EAAc,EAAM,WAAW,EAAmB,CAClD,EAAe,EAAM,YAAc,EAAkB,EAAY,CAAE,CAAC,EAAY,CAAC,CAIvF,OAAO,EAFY,EAAM,YAAc,EAAa,EAAG,CAAE,CAAC,EAAc,EAAG,CAE5C,EAAI,IAAI,CCHzC,SAAgB,EAAyC,CACvD,aACA,KACA,KACA,WACA,GAAG,GACyE,CAC5E,IAAM,EAAU,EAAc,EAAG,CAC3B,EAAa,EAAc,GAAc,IAAI,CAOnD,OANgB,GAAW,EAMpB,EAAM,cAEX,GAAM,EAAM,SACZ,EAAM,EAAuB,IAAA,GAC7B,EACD,CARQ"}

package/lib/react-responsive.umd.js

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`@blocz/react-responsive`]={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);let l=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],u=[`width`,`height`],d=e=>Object.keys(e).reduce((t,n)=>{let r=e[n];if(!Array.isArray(r)||r.length<=1)return t;let[i,a,o,...s]=r;if(s.length>0){let e=Error(`The following fields "${s}" have been ignored`);console.error(e)}if(typeof i!=`number`||typeof a!=`number`)return t;let c,d;typeof o==`string`?c=o:typeof o==`object`&&(d=o.direction,c=o.unit);let f=Math.min(i,a),p=Math.max(i,a),m=c&&l.includes(c)?c:`px`,h=d&&u.includes(d)?d:`width`;return t[n]=[f,p,m,h],t[`${n}Up`]=[f,1/0,m,h],t[`${n}Down`]=[0,p,m,h],t},{}),f={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},p=t.createContext(d(f)),m=({breakpoints:e=f,additionalBreakpoints:n,children:r})=>t.createElement(p.Provider,{value:d({...e,...n})},r);m.displayName=`BreakpointsProvider`;let h=e=>{let t=[],[n,r,i,a]=e,o;return n!==0&&(o=`${n}${i}`,t.push(`(min-${a}:${o})`)),r!==1/0&&(o=`${r}${i}`,t.push(`(max-${a}:${o})`)),` `+t.join(` and `)},g=e=>(t=``)=>{if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>h(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid breakpoint${e?``:`s`}`)}return r},_=e=>{let n=t.useMemo(()=>matchMedia(e),[e]),[r,i]=t.useState(n.matches);return t.useLayoutEffect(()=>{i(n.matches);let e=e=>{i(e.matches)};return n.addListener(e),()=>{n.removeListener(e)}},[n]),r},v=e=>{let n=t.useContext(p),r=t.useMemo(()=>g(n),[n]);return _(t.useMemo(()=>r(e),[r,e])||`-`)};function y({matchMedia:e,on:n,as:r,children:i,...a}){let o=v(n),s=_(e||`-`);return o||s?t.createElement(r||t.Fragment,r?a:void 0,i):null}e.BreakpointsContext=p,e.BreakpointsProvider=m,e.Only=y,e.useBreakpoint=v,e.useMediaQuery=_});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`)):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`@blocz/react-responsive`]={},e.React))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=Object.create,r=Object.defineProperty,i=Object.getOwnPropertyDescriptor,a=Object.getOwnPropertyNames,o=Object.getPrototypeOf,s=Object.prototype.hasOwnProperty,c=(e,t,n,o)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var c=a(t),l=0,u=c.length,d;l<u;l++)d=c[l],!s.call(e,d)&&d!==n&&r(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(o=i(t,d))||o.enumerable});return e};t=((e,t,i)=>(i=e==null?{}:n(o(e)),c(t||!e||!e.__esModule?r(i,`default`,{value:e,enumerable:!0}):i,e)))(t);let l=[`em`,`ex`,`%`,`px`,`cm`,`mm`,`in`,`pt`,`pc`,`ch`,`rem`,`vh`,`vw`,`vmin`,`vmax`],u=[`width`,`height`];function d(e){return Object.keys(e).reduce((t,n)=>{let r=e[n];if(!Array.isArray(r)||r.length<=1)return t;let[i,a,o,...s]=r;if(s.length>0){let e=Error(`The following fields "${s}" have been ignored`);console.error(e)}if(typeof i!=`number`||typeof a!=`number`)return t;let c,d;typeof o==`string`?c=o:typeof o==`object`&&(d=o.direction,c=o.unit);let f=Math.min(i,a),p=Math.max(i,a),m=c&&l.includes(c)?c:`px`,h=d&&u.includes(d)?d:`width`;return t[n]=[f,p,m,h],t[`${n}Up`]=[f,1/0,m,h],t[`${n}Down`]=[0,p,m,h],t},{})}let f={xs:[0,575,`px`],sm:[576,767,`px`],md:[768,991,`px`],lg:[992,1199,`px`],xl:[1200,1/0,`px`]},p=t.createContext(d(f));function m({breakpoints:e=f,additionalBreakpoints:n,children:r}){return t.createElement(p.Provider,{value:d({...e,...n})},r)}function h(e){let t=[],[n,r,i,a]=e,o;return n!==0&&(o=`${n}${i}`,t.push(`(min-${a}:${o})`)),r!==1/0&&(o=`${r}${i}`,t.push(`(max-${a}:${o})`)),` `+t.join(` and `)}function g(e){return function(t=``){if(!t)return``;let n=t.split(` `),r=n.map(t=>e[t]).filter(Boolean).map(e=>h(e)).filter(Boolean).join(`,`);if(!r){let e=n.length===1;console.error(`"${n.join(`", "`)}" ${e?`is`:`are`}n't ${e?`a `:``}valid breakpoint${e?``:`s`}`)}return r}}function _(e){let n=t.useMemo(()=>matchMedia(e),[e]);return t.useSyncExternalStore(t.useCallback(e=>(n.addListener(e),()=>n.removeListener(e)),[n]),()=>n.matches,()=>n.matches)}function v(e){let n=t.useContext(p),r=t.useMemo(()=>g(n),[n]);return _(t.useMemo(()=>r(e),[r,e])||`-`)}function y({matchMedia:e,on:n,as:r,children:i,...a}){let o=v(n),s=_(e||`-`);return o||s?t.createElement(r||t.Fragment,r?a:void 0,i):null}e.BreakpointsContext=p,e.BreakpointsProvider=m,e.Only=y,e.useBreakpoint=v,e.useMediaQuery=_});
 //# sourceMappingURL=react-responsive.umd.js.map

package/lib/react-responsive.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-responsive.umd.js","names":["React","React","React","React"],"sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/mediaQueryBuilder.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n  | \"em\"\n  | \"ex\"\n  | \"%\"\n  | \"px\"\n  | \"cm\"\n  | \"mm\"\n  | \"in\"\n  | \"pt\"\n  | \"pc\"\n  | \"ch\"\n  | \"rem\"\n  | \"vh\"\n  | \"vw\"\n  | \"vmin\"\n  | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n  \"em\",\n  \"ex\",\n  \"%\",\n  \"px\",\n  \"cm\",\n  \"mm\",\n  \"in\",\n  \"pt\",\n  \"pc\",\n  \"ch\",\n  \"rem\",\n  \"vh\",\n  \"vw\",\n  \"vmin\",\n  \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n  | [number, number]\n  | [number, number, Units]\n  | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n  [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n  [breakpoint: string]: Breakpoint;\n}\n\nexport const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => {\n  return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n    const breakpoint = inBreakpoints[breakpointName];\n\n    if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n      return breakpoints;\n    }\n\n    const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n    if (rest.length > 0) {\n      const error = new Error(`The following fields \"${rest}\" have been ignored`);\n      console.error(error);\n    }\n\n    if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n      return breakpoints;\n    }\n\n    let supposedUnit: Units | undefined;\n    let supposedDirection: Directions | undefined;\n    if (typeof options === \"string\") {\n      supposedUnit = options;\n    } else if (typeof options === \"object\") {\n      supposedDirection = options.direction;\n      supposedUnit = options.unit;\n    }\n\n    const min = Math.min(supposedMin, supposedMax);\n    const max = Math.max(supposedMin, supposedMax);\n    const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n    const direction =\n      supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n    breakpoints[breakpointName] = [min, max, unit, direction];\n    breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n    breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n    return breakpoints;\n  }, {});\n};\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n  xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n  sm: [576, 767, \"px\"], // Small devices (landscape phones)\n  md: [768, 991, \"px\"], // Medium devices (tablets)\n  lg: [992, 1199, \"px\"], // Large devices (desktops)\n  xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n  sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n  breakpoints?: ExposedBreakpoints;\n  additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>> = ({\n  breakpoints = defaultBreakpoints,\n  additionalBreakpoints,\n  children,\n}) => {\n  return (\n    <BreakpointsContext.Provider\n      value={sanitize({\n        ...breakpoints,\n        ...additionalBreakpoints,\n      })}\n    >\n      {children}\n    </BreakpointsContext.Provider>\n  );\n};\n\nBreakpointsProvider.displayName = \"BreakpointsProvider\";\n","import { Breakpoint } from \"./sanitize\";\n\nexport const fromBreakpointToMedia = (breakpoint: Breakpoint): string => {\n  const mediaList: string[] = [];\n  const [minValue, maxValue, unit, direction] = breakpoint;\n  let str;\n\n  // Min value\n  if (minValue !== 0) {\n    str = `${minValue}${unit}`;\n    mediaList.push(`(min-${direction}:${str})`);\n  }\n\n  // Max value\n  if (maxValue !== Infinity) {\n    str = `${maxValue}${unit}`;\n    mediaList.push(`(max-${direction}:${str})`);\n  }\n\n  return \" \" + mediaList.join(\" and \");\n};\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport const mediaQueryBuilder =\n  (breakpoints: Breakpoints) =>\n  (on = \"\"): string => {\n    if (!on) {\n      return \"\";\n    }\n    const rawBreakpointNames = on.split(\" \");\n    const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n    const mediaQuery = filteredBreakpoints\n      .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n      .filter(Boolean)\n      .join(\",\");\n    if (!mediaQuery) {\n      const isUniqBreakpoint = rawBreakpointNames.length === 1;\n      console.error(\n        `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n          isUniqBreakpoint ? \"a \" : \"\"\n        }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n      );\n    }\n    return mediaQuery;\n  };\n","import * as React from \"react\";\n\nexport const useMediaQuery = (mediaQuery: string): boolean => {\n  const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n  const [isShown, setIsShown] = React.useState<boolean>(mediaQueryList.matches);\n\n  React.useLayoutEffect(() => {\n    setIsShown(mediaQueryList.matches);\n    const listener = (event: MediaQueryListEvent) => {\n      // Those are important updates, so we don't want to use transitions on them\n      setIsShown(event.matches);\n    };\n\n    // cannot use addEventListener for IE 11 and safari 13-\n    mediaQueryList.addListener(listener);\n    return () => {\n      mediaQueryList.removeListener(listener);\n    };\n  }, [mediaQueryList]);\n\n  return isShown;\n};\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport const useBreakpoint = (on?: string): boolean => {\n  const breakpoints = React.useContext(BreakpointsContext);\n  const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n  const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n  return useMediaQuery(mediaQuery || \"-\");\n};\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n  matchMedia?: string;\n  on?: string;\n  as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n  matchMedia,\n  on,\n  as,\n  children,\n  ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n  const matchOn = useBreakpoint(on);\n  const matchQuery = useMediaQuery(matchMedia || \"-\");\n  const isShown = matchOn || matchQuery;\n\n  if (!isShown) {\n    return null;\n  }\n\n  return React.createElement(\n    // @ts-expect-error – this is a complex type\n    as || React.Fragment,\n    as ? (props as OtherProps) : undefined,\n    children,\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"react-responsive.umd.js","names":["React","React","React","React"],"sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/mediaQueryBuilder.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/Only.tsx"],"sourcesContent":["export type Units =\n  | \"em\"\n  | \"ex\"\n  | \"%\"\n  | \"px\"\n  | \"cm\"\n  | \"mm\"\n  | \"in\"\n  | \"pt\"\n  | \"pc\"\n  | \"ch\"\n  | \"rem\"\n  | \"vh\"\n  | \"vw\"\n  | \"vmin\"\n  | \"vmax\";\n\nconst listOfSupportedUnits: Units[] = [\n  \"em\",\n  \"ex\",\n  \"%\",\n  \"px\",\n  \"cm\",\n  \"mm\",\n  \"in\",\n  \"pt\",\n  \"pc\",\n  \"ch\",\n  \"rem\",\n  \"vh\",\n  \"vw\",\n  \"vmin\",\n  \"vmax\",\n];\n\ntype Directions = \"width\" | \"height\";\n\nconst listOfSupportedDirections: Directions[] = [\"width\", \"height\"];\n\nexport type ExposedBreakpoint =\n  | [number, number]\n  | [number, number, Units]\n  | [number, number, { unit?: Units; direction?: Directions }];\n\nexport interface ExposedBreakpoints {\n  [key: string]: ExposedBreakpoint;\n}\n\nexport type Breakpoint = [number, number, Units, Directions];\n\nexport interface Breakpoints {\n  [breakpoint: string]: Breakpoint;\n}\n\nexport function sanitize(inBreakpoints: ExposedBreakpoints): Breakpoints {\n  return Object.keys(inBreakpoints).reduce<Breakpoints>((breakpoints, breakpointName) => {\n    const breakpoint = inBreakpoints[breakpointName];\n\n    if (!Array.isArray(breakpoint) || breakpoint.length <= 1) {\n      return breakpoints;\n    }\n\n    const [supposedMin, supposedMax, options, ...rest] = breakpoint;\n    if (rest.length > 0) {\n      const error = new Error(`The following fields \"${rest}\" have been ignored`);\n      console.error(error);\n    }\n\n    if (typeof supposedMin !== \"number\" || typeof supposedMax !== \"number\") {\n      return breakpoints;\n    }\n\n    let supposedUnit: Units | undefined;\n    let supposedDirection: Directions | undefined;\n    if (typeof options === \"string\") {\n      supposedUnit = options;\n    } else if (typeof options === \"object\") {\n      supposedDirection = options.direction;\n      supposedUnit = options.unit;\n    }\n\n    const min = Math.min(supposedMin, supposedMax);\n    const max = Math.max(supposedMin, supposedMax);\n    const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : \"px\";\n    const direction =\n      supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : \"width\";\n\n    breakpoints[breakpointName] = [min, max, unit, direction];\n    breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction];\n    breakpoints[`${breakpointName}Down`] = [0, max, unit, direction];\n\n    return breakpoints;\n  }, {});\n}\n","import * as React from \"react\";\n\nimport { sanitize, ExposedBreakpoints, Breakpoints } from \"./sanitize\";\n\nconst defaultBreakpoints: ExposedBreakpoints = {\n  xs: [0, 575, \"px\"], // Extra small devices (portrait phones)\n  sm: [576, 767, \"px\"], // Small devices (landscape phones)\n  md: [768, 991, \"px\"], // Medium devices (tablets)\n  lg: [992, 1199, \"px\"], // Large devices (desktops)\n  xl: [1200, Infinity, \"px\"], // Extra large devices (large desktops)\n};\n\nexport const BreakpointsContext: React.Context<Breakpoints> = React.createContext<Breakpoints>(\n  sanitize(defaultBreakpoints),\n);\n\ninterface BreakpointsProviderProps {\n  breakpoints?: ExposedBreakpoints;\n  additionalBreakpoints?: ExposedBreakpoints;\n}\n\nexport function BreakpointsProvider({\n  breakpoints = defaultBreakpoints,\n  additionalBreakpoints,\n  children,\n}: React.PropsWithChildren<BreakpointsProviderProps>): React.ReactElement {\n  return (\n    <BreakpointsContext.Provider\n      value={sanitize({\n        ...breakpoints,\n        ...additionalBreakpoints,\n      })}\n    >\n      {children}\n    </BreakpointsContext.Provider>\n  );\n}\n","import { Breakpoint } from \"./sanitize\";\n\nexport function fromBreakpointToMedia(breakpoint: Breakpoint): string {\n  const mediaList: string[] = [];\n  const [minValue, maxValue, unit, direction] = breakpoint;\n  let str;\n\n  // Min value\n  if (minValue !== 0) {\n    str = `${minValue}${unit}`;\n    mediaList.push(`(min-${direction}:${str})`);\n  }\n\n  // Max value\n  if (maxValue !== Infinity) {\n    str = `${maxValue}${unit}`;\n    mediaList.push(`(max-${direction}:${str})`);\n  }\n\n  return \" \" + mediaList.join(\" and \");\n}\n","import { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\nexport function mediaQueryBuilder(breakpoints: Breakpoints) {\n  return function toMediaQuery(on = \"\"): string {\n    if (!on) {\n      return \"\";\n    }\n    const rawBreakpointNames = on.split(\" \");\n    const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean);\n    const mediaQuery = filteredBreakpoints\n      .map((breakpoint) => fromBreakpointToMedia(breakpoint))\n      .filter(Boolean)\n      .join(\",\");\n    if (!mediaQuery) {\n      const isUniqBreakpoint = rawBreakpointNames.length === 1;\n      console.error(\n        `\"${rawBreakpointNames.join('\", \"')}\" ${isUniqBreakpoint ? \"is\" : \"are\"}n't ${\n          isUniqBreakpoint ? \"a \" : \"\"\n        }valid breakpoint${isUniqBreakpoint ? \"\" : \"s\"}`,\n      );\n    }\n    return mediaQuery;\n  };\n}\n","import * as React from \"react\";\n\nexport function useMediaQuery(mediaQuery: string): boolean {\n  const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]);\n\n  // Those are important updates, so we don't want to use transitions on them\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (callback) => {\n        // cannot use addEventListener for IE 11 and safari 13-\n        mediaQueryList.addListener(callback);\n        return () => mediaQueryList.removeListener(callback);\n      },\n      [mediaQueryList],\n    ),\n    () => mediaQueryList.matches,\n    () => mediaQueryList.matches,\n  );\n}\n","import * as React from \"react\";\n\nimport { BreakpointsContext } from \"./BreakpointsContext\";\n\nimport { mediaQueryBuilder } from \"./mediaQueryBuilder\";\n\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport function useBreakpoint(on?: string): boolean {\n  const breakpoints = React.useContext(BreakpointsContext);\n  const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]);\n\n  const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]);\n\n  return useMediaQuery(mediaQuery || \"-\");\n}\n","import * as React from \"react\";\n\nimport { useBreakpoint } from \"./useBreakpoint\";\nimport { useMediaQuery } from \"./useMediaQuery\";\n\nexport type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {\n  matchMedia?: string;\n  on?: string;\n  as?: string | React.ComponentType<OtherProps>;\n};\n\nexport function Only<OtherProps = Record<string, never>>({\n  matchMedia,\n  on,\n  as,\n  children,\n  ...props\n}: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null {\n  const matchOn = useBreakpoint(on);\n  const matchQuery = useMediaQuery(matchMedia || \"-\");\n  const isShown = matchOn || matchQuery;\n\n  if (!isShown) {\n    return null;\n  }\n\n  return React.createElement(\n    // @ts-expect-error – this is a complex type\n    as || React.Fragment,\n    as ? (props as OtherProps) : undefined,\n    children,\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocz/react-responsive",
-  "version": "4.0.2",
+  "version": "5.0.0",
   "description": "🔍 <Only /> displays some contents for a specific screen size",
   "source": "src/index.ts",
   "sideEffects": false,
@@ -43,6 +43,6 @@
     "tsdown": "^0.22.0"
   },
   "peerDependencies": {
-    "react": "16.8.0 - 19.x.x"
+    "react": "18.0.0 - 19.x.x"
   }
 }