@blocz/react-responsive 3.0.3 → 4.0.0-beta.0

package/README.md

@@ -10,7 +10,6 @@ If you need a responsive layout and adaptive components, `@blocz/react-responsiv
 
 ## Table of contents <!-- omit in toc -->
 
-
 1. [How to use](#how-to-use)
    1. [`<Only>`](#only)
       1. [Default breakpoints](#default-breakpoints)
@@ -20,26 +19,22 @@ If you need a responsive layout and adaptive components, `@blocz/react-responsiv
    2. [Hooks](#hooks)
       1. [`useBreakpoint()`](#usebreakpoint)
       2. [`useMediaQuery()`](#usemediaquery)
-   3. [`<Match>`](#match)
-      1. [`only` and `matchMedia` props](#only-and-matchmedia-props)
-      2. [Use a custom component in Match](#use-a-custom-component-in-match)
-   4. [`<BreakpointsProvider>`](#breakpointsprovider)
+   3. [`<BreakpointsProvider>`](#breakpointsprovider)
       1. [Add more breakpoints](#add-more-breakpoints)
       2. [Change default breakpoints](#change-default-breakpoints)
       3. [Units](#units)
       4. [Direction](#direction)
-   5. [CSS in JS](#css-in-js)
+   4. [CSS in JS](#css-in-js)
       1. [`toJSON`](#tojson)
       2. [`toCSS`](#tocss)
-   6. [Comparison to other libraries](#comparison-to-other-libraries)
-   7. [`matchMedia` polyfill](#matchmedia-polyfill)
+   5. [Comparison to other libraries](#comparison-to-other-libraries)
+   6. [`matchMedia` polyfill](#matchmedia-polyfill)
       1. [Browser](#browser)
       2. [Node](#node)
-   8. [FAQ](#faq)
+   7. [FAQ](#faq)
 
 ## How to use
 
-
 ### `<Only>`
 
 #### Default breakpoints
@@ -216,96 +211,6 @@ const App = () => {
 };
 ```
 
-### `<Match>`
-
-#### `only` and `matchMedia` props
-
-The `Match` will look into every props of its children (and event nested children) to detect `only` and `matchMedia` props. If one of those is found, it will wrap the child in a `Only` component will those props auto-set.
-
-```javascript
-import React from "react";
-import { Only, Match } from "@blocz/react-responsive";
-
-const App = () => (
-  <Match>
-    <div only="xs">xs</div>
-    <div only="sm">sm</div>
-    <div only="md">md</div>
-    <div only="sm lg">sm and lg</div>
-    <div only="xl">xl</div>
-    <div>
-      <div>
-        <div>
-          <div only="smDown">nested smDown</div>
-        </div>
-      </div>
-    </div>
-    <div matchMedia="(min-width:768px) and (max-width:992px),(max-width:576px)">
-      {"(min-width:768px) and (max-width:992px),(max-width:576px)"}
-    </div>
-  </Match>
-);
-```
-
-#### Use a custom component in Match
-
-You can also render the `Match` component as another one:
-
-```javascript
-import React from "react";
-import { Only, Match } from "@blocz/react-responsive";
-
-const App = () => (
-  <Match as="ul">
-    <li only="xs">xs</li>
-    <li only="sm">sm</li>
-    <li only="md">md</li>
-    <li only="lg">lg</li>
-    <li only="xl">xl</li>
-  </Match>
-);
-```
-
-If you’re using TypeScript, `Match` will work out of the box for native DOM elements.
-But if you want to use it for custom components, you’ll have to use the type `MatchChildProps`:
-
-```tsx
-import * as React from "react";
-import { Match, MatchChildProps } from "@blocz/react-responsive";
-
-// MatchChildProps includes the props `only` and `matchMedia`
-interface CustomProps extends MatchChildProps {
-  title: string;
-}
-
-const Custom: React.FunctionComponent<CustomProps> = ({ title, children }) => (
-  <React.Fragment>
-    <h3>{title}</h3>
-    <p>{children}</p>
-  </React.Fragment>
-);
-
-const App = () => (
-  <Match>
-    <Custom only="xs" title="xs">
-      xs
-    </Custom>
-    <Custom only="sm" title="sm">
-      sm
-    </Custom>
-    <Custom only="md" title="md">
-      md
-    </Custom>
-    <Custom only="lg" title="lg">
-      lg
-    </Custom>
-    <Custom only="xl" title="xl">
-      xl
-    </Custom>
-  </Match>
-);
-```
-
 ### `<BreakpointsProvider>`
 
 `BreakpointsProvider` defines the values of every breakpoints.
@@ -502,5 +407,3 @@ And if you need an example with `Jest`, `@testing-library/react`, `React` and `@
 ### FAQ
 
 For other questions, please take a look at our [FAQ document](https://github.com/bloczjs/react-responsive/blob/master/FAQ.md).
-
-

package/lib/BreakpointsContext.d.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { ExposedBreakpoints, Breakpoints } from "./sanitize";
-export declare const BreakpointsContext: React.Context<Breakpoints>;
-interface BreakpointsProviderProps {
-    breakpoints?: ExposedBreakpoints;
-    additionalBreakpoints?: ExposedBreakpoints;
-}
-export declare const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>>;
-export {};
+import * as React from "react";
+import { ExposedBreakpoints, Breakpoints } from "./sanitize";
+export declare const BreakpointsContext: React.Context<Breakpoints>;
+interface BreakpointsProviderProps {
+    breakpoints?: ExposedBreakpoints;
+    additionalBreakpoints?: ExposedBreakpoints;
+}
+export declare const BreakpointsProvider: React.FunctionComponent<React.PropsWithChildren<BreakpointsProviderProps>>;
+export {};

package/lib/Only.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-export declare type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {
-    matchMedia?: string;
-    on?: string;
-    as?: string | React.ComponentType<OtherProps>;
-};
-export declare function Only<OtherProps = Record<string, never>>({ matchMedia, on, as, children, ...props }: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null;
-export declare namespace Only {
-    var displayName: string;
-}
+import * as React from "react";
+export type OnlyProps<OtherProps = Record<string, never>> = OtherProps & {
+    matchMedia?: string;
+    on?: string;
+    as?: string | React.ComponentType<OtherProps>;
+};
+export declare function Only<OtherProps = Record<string, never>>({ matchMedia, on, as, children, ...props }: React.PropsWithChildren<OnlyProps<OtherProps>>): React.ReactElement | null;
+export declare namespace Only {
+    var displayName: string;
+}

package/lib/css-in-js.d.ts

@@ -1,12 +1,12 @@
-import { CSSProperties } from "react";
-import { Breakpoints } from "./sanitize";
-declare type CSSinJSProperties = CSSProperties | {
-    [key: string]: CSSProperties;
-};
-interface Points {
-    [breakpoint: string]: CSSinJSProperties;
-}
-declare type CSSinJS = Record<string, CSSinJSProperties>;
-export declare const toJSON: (breakpoints: Breakpoints) => (points: Points) => CSSinJS;
-export declare const toCSS: (breakpoints: Breakpoints) => (points: Points) => string;
-export {};
+import { CSSProperties } from "react";
+import { Breakpoints } from "./sanitize";
+type CSSinJSProperties = CSSProperties | {
+    [key: string]: CSSProperties;
+};
+interface Points {
+    [breakpoint: string]: CSSinJSProperties;
+}
+type CSSinJS = Record<string, CSSinJSProperties>;
+export declare const toJSON: (breakpoints: Breakpoints) => (points: Points) => CSSinJS;
+export declare const toCSS: (breakpoints: Breakpoints) => (points: Points) => string;
+export {};

package/lib/fromBreakpointToMedia.d.ts

@@ -1,2 +1,2 @@
-import { Breakpoint } from "./sanitize";
-export declare const fromBreakpointToMedia: (breakpoint: Breakpoint) => string;
+import { Breakpoint } from "./sanitize";
+export declare const fromBreakpointToMedia: (breakpoint: Breakpoint) => string;

package/lib/index.d.ts

@@ -1,7 +1,6 @@
-export { BreakpointsProvider, BreakpointsContext } from "./BreakpointsContext";
-export { Match, MatchChildProps } from "./Match";
-export { Only } from "./Only";
-export { useBreakpoint } from "./useBreakpoint";
-export { useMediaQuery } from "./useMediaQuery";
-export { Units } from "./sanitize";
-export { toJSON, toCSS } from "./css-in-js";
+export { BreakpointsProvider, BreakpointsContext } from "./BreakpointsContext";
+export { Only } from "./Only";
+export { useBreakpoint } from "./useBreakpoint";
+export { useMediaQuery } from "./useMediaQuery";
+export { Units } from "./sanitize";
+export { toJSON, toCSS } from "./css-in-js";

package/lib/mediaQueryBuilder.d.ts

@@ -1,2 +1,2 @@
-import { Breakpoints } from "./sanitize";
-export declare const mediaQueryBuilder: (breakpoints: Breakpoints) => (on?: string) => string;
+import { Breakpoints } from "./sanitize";
+export declare const mediaQueryBuilder: (breakpoints: Breakpoints) => (on?: string) => string;

package/lib/react-responsive.js

@@ -1,2 +1,2 @@
-function e(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,t.get?t:{enumerable:!0,get:function(){return e[n]}})}}),r.default=e,r}var r=/*#__PURE__*/e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var n=arguments[r];for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&(e[t]=n[t])}return e},n.apply(this,arguments)}function t(e,r){if(null==e)return{};var n,t,i={},a=Object.keys(e);for(t=0;t<a.length;t++)r.indexOf(n=a[t])>=0||(i[n]=e[n]);return i}var i=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],a=["width","height"],o=function(e){return Object.keys(e).reduce(function(r,n){var t=e[n];if(!Array.isArray(t)||t.length<=1)return r;var o,u,c=t[0],f=t[1],s=t[2],l=t.slice(3);if(l.length>0){var p=new Error('The following fields "'+l+'" have been ignored');console.error(p)}if("number"!=typeof c||"number"!=typeof f)return r;"string"==typeof s?o=s:"object"==typeof s&&(u=s.direction,o=s.unit);var d=Math.min(c,f),v=Math.max(c,f),m=o&&i.includes(o)?o:"px",h=u&&a.includes(u)?u:"width";return r[n]=[d,v,m,h],r[n+"Up"]=[d,Infinity,m,h],r[n+"Down"]=[0,v,m,h],r},{})},u={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},c=r.createContext(o(u)),f=function(e){var t=e.breakpoints,i=e.additionalBreakpoints,a=e.children;return r.createElement(c.Provider,{value:o(n({},void 0===t?u:t,void 0===i?{}:i))},a)};f.displayName="BreakpointsProvider";var s=function(e){var r=[],n=e[0],t=e[1],i=e[2],a=e[3];return 0!==n&&r.push("(min-"+a+":"+n+i+")"),Infinity!==t&&r.push("(max-"+a+":"+t+i+")")," "+r.join(" and ")},l=function(e){var n=r.useMemo(function(){return matchMedia(e)},[e]),t=r.useState(n.matches),i=t[0],a=t[1];return r.useLayoutEffect(function(){a(n.matches);var e=function(e){a(e.matches)};return n.addListener(e),function(){n.removeListener(e)}},[n]),i},p=function(e){var n=r.useContext(c),t=r.useMemo(function(){return function(e){return function(r){if(void 0===r&&(r=""),!r)return"";var n=r.split(" "),t=n.map(function(r){return e[r]}).filter(Boolean).map(function(e){return s(e)}).filter(Boolean).join(",");if(!t){var i=1===n.length;console.error('"'+n.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(n)},[n]),i=r.useMemo(function(){return t(e)},[t,e]);return l(i||"-")},d=["matchMedia","on","as","children"];function v(e){var n=e.matchMedia,i=e.on,a=e.as,o=e.children,u=t(e,d),c=p(i),f=l(n||"-");return c||f?r.createElement(a||r.Fragment,a?u:void 0,o):null}v.displayName="Only";var m=["only","matchMedia"],h=["children","as"],y=function e(n){if(!n||!n.props)return n;var i=n.props.children;if(!i)return null;var a=r.Children.map(i,e),o=n.props,u=o.only,c=o.matchMedia,f=t(o,m),s=r.createElement(n.type,f,a);return u||c?r.createElement(v,{on:u||"",matchMedia:c||""},s):s},x=function(e){var n=e.children,i=e.as,a=t(e,h),o=r.Children.map(n,y);return i?r.createElement(i,a,o):r.createElement(r.Fragment,null,o)};x.displayName="Match";var b=function(e){return function(r){var n={};return Object.keys(r).forEach(function(t){var i=e[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(e));n["@media "+s(i)]=r[t]}),n}},O=function e(r){var n="";return Object.entries(r).forEach(function(r){var t=r[0],i=r[1];n+="object"==typeof i?t+" {\n"+e(i)+"}\n":t+": "+i+";\n"}),n};exports.BreakpointsContext=c,exports.BreakpointsProvider=f,exports.Match=x,exports.Only=v,exports.toCSS=function(e){return function(r){return O(b(e)(r))}},exports.toJSON=b,exports.useBreakpoint=p,exports.useMediaQuery=l;
+function e(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,t.get?t:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var n=/*#__PURE__*/e(require("react"));function r(){return r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var t in r)({}).hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(null,arguments)}var t=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],i=["width","height"],o=function(e){return Object.keys(e).reduce(function(n,r){var o=e[r];if(!Array.isArray(o)||o.length<=1)return n;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var p=new Error('The following fields "'+l+'" have been ignored');console.error(p)}if("number"!=typeof c||"number"!=typeof f)return n;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var v=Math.min(c,f),d=Math.max(c,f),m=a&&t.includes(a)?a:"px",h=u&&i.includes(u)?u:"width";return n[r]=[v,d,m,h],n[r+"Up"]=[v,Infinity,m,h],n[r+"Down"]=[0,d,m,h],n},{})},a={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(o(a)),c=function(e){var t=e.breakpoints,i=e.additionalBreakpoints,c=e.children;return n.createElement(u.Provider,{value:o(r({},void 0===t?a:t,void 0===i?{}:i))},c)};c.displayName="BreakpointsProvider";var f=function(e){var n=[],r=e[0],t=e[1],i=e[2],o=e[3];return 0!==r&&n.push("(min-"+o+":"+r+i+")"),Infinity!==t&&n.push("(max-"+o+":"+t+i+")")," "+n.join(" and ")},s=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(r.matches);var e=function(e){o(e.matches)};return r.addListener(e),function(){r.removeListener(e)}},[r]),i},l=function(e){var r=n.useContext(u),t=n.useMemo(function(){return function(e){return function(n){if(void 0===n&&(n=""),!n)return"";var r=n.split(" "),t=r.map(function(n){return e[n]}).filter(Boolean).map(function(e){return f(e)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return s(i||"-")},p=["matchMedia","on","as","children"];function v(e){var r=e.matchMedia,t=e.on,i=e.as,o=e.children,a=function(e,n){if(null==e)return{};var r={};for(var t in e)if({}.hasOwnProperty.call(e,t)){if(n.includes(t))continue;r[t]=e[t]}return r}(e,p),u=l(t),c=s(r||"-");return u||c?n.createElement(i||n.Fragment,i?a:void 0,o):null}v.displayName="Only";var d=function(e){return function(n){var r={};return Object.keys(n).forEach(function(t){var i=e[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(e));r["@media "+f(i)]=n[t]}),r}},m=function(e){var n="";return Object.entries(e).forEach(function(e){var r=e[0],t=e[1];n+="object"==typeof t?r+" {\n"+m(t)+"}\n":r+": "+t+";\n"}),n};exports.BreakpointsContext=u,exports.BreakpointsProvider=c,exports.Only=v,exports.toCSS=function(e){return function(n){return m(d(e)(n))}},exports.toJSON=d,exports.useBreakpoint=l,exports.useMediaQuery=s;
 //# sourceMappingURL=react-responsive.js.map

package/lib/react-responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-responsive.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/Match.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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(as || React.Fragment, as ? (props as OtherProps) : undefined, children);\n}\n\nOnly.displayName = \"Only\";\n","import * as React from \"react\";\n\nimport { Only } from \"./Only\";\n\nexport interface MatchChildProps {\n  matchMedia?: string;\n  only?: string;\n}\n\ndeclare module \"react\" {\n  interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T>, MatchChildProps {}\n}\n\ntype Element = React.ReactElement<MatchChildProps & any, string | React.ComponentType<MatchChildProps & any>> | null;\n\nconst parseChildren = (element: Element): Element => {\n  if (!element || !element.props) {\n    return element;\n  }\n\n  const _children: Element | Element[] | null = element.props.children;\n  if (!_children) {\n    return null;\n  }\n  const children = React.Children.map(_children, parseChildren);\n  const { only, matchMedia, ...props } = element.props;\n  const clone = React.createElement(element.type, props, children);\n  if (!only && !matchMedia) {\n    return clone;\n  }\n  return (\n    <Only on={only || \"\"} matchMedia={matchMedia || \"\"}>\n      {clone}\n    </Only>\n  );\n};\n\ninterface MatchProps {\n  [key: string]: any;\n  children: Element | Element[] | null;\n  as?: string;\n}\n\nexport const Match: React.FunctionComponent<MatchProps> = ({ children, as, ...props }) => {\n  const computedChildren = React.Children.map(children, parseChildren);\n  if (as) {\n    return React.createElement(as, props, computedChildren);\n  }\n  return React.createElement(React.Fragment, null, computedChildren);\n};\n\nMatch.displayName = \"Match\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","Array","isArray","breakpoint","length","supposedUnit","supposedDirection","supposedMax","options","rest","slice","error","Error","console","supposedMin","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","additionalBreakpoints","children","Provider","value","_ref$additionalBreakp","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","Only","as","props","matchOn","useBreakpoint","matchQuery","createElement","Fragment","undefined","parseChildren","element","_children","Children","only","_objectWithoutPropertiesLoose","_element$props","_excluded","type","clone","_excluded2","computedChildren","Match","toJSON","points","css","forEach","point","stringify","object","string","entries","key"],"mappings":"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"}
+{"version":3,"file":"react-responsive.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","_ref$additionalBreakp","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key"],"mappings":"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"}

package/lib/react-responsive.modern.js

@@ -1,2 +1,2 @@
-import*as n from"react";function e(){return e=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},e.apply(this,arguments)}function r(n,e){if(null==n)return{};var r,t,i={},a=Object.keys(n);for(t=0;t<a.length;t++)e.indexOf(r=a[t])>=0||(i[r]=n[r]);return i}var t=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],i=["width","height"],a=function(n){return Object.keys(n).reduce(function(e,r){var a=n[r];if(!Array.isArray(a)||a.length<=1)return e;var o,u,c=a[0],f=a[1],l=a[2],s=a.slice(3);if(s.length>0){var m=new Error('The following fields "'+s+'" have been ignored');console.error(m)}if("number"!=typeof c||"number"!=typeof f)return e;"string"==typeof l?o=l:"object"==typeof l&&(u=l.direction,o=l.unit);var p=Math.min(c,f),d=Math.max(c,f),v=o&&t.includes(o)?o:"px",h=u&&i.includes(u)?u:"width";return e[r]=[p,d,v,h],e[r+"Up"]=[p,Infinity,v,h],e[r+"Down"]=[0,d,v,h],e},{})},o={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(a(o)),c=function(r){var t=r.breakpoints,i=r.additionalBreakpoints,c=r.children;return n.createElement(u.Provider,{value:a(e({},void 0===t?o:t,void 0===i?{}:i))},c)};c.displayName="BreakpointsProvider";var f=function(n){var e=[],r=n[0],t=n[1],i=n[2],a=n[3];return 0!==r&&e.push("(min-"+a+":"+r+i+")"),Infinity!==t&&e.push("(max-"+a+":"+t+i+")")," "+e.join(" and ")},l=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],a=t[1];return n.useLayoutEffect(function(){a(r.matches);var n=function(n){a(n.matches)};return r.addListener(n),function(){r.removeListener(n)}},[r]),i},s=function(e){var r=n.useContext(u),t=n.useMemo(function(){return function(n){return function(e){if(void 0===e&&(e=""),!e)return"";var r=e.split(" "),t=r.map(function(e){return n[e]}).filter(Boolean).map(function(n){return f(n)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return l(i||"-")},m=["matchMedia","on","as","children"];function p(e){var t=e.matchMedia,i=e.on,a=e.as,o=e.children,u=r(e,m),c=s(i),f=l(t||"-");return c||f?n.createElement(a||n.Fragment,a?u:void 0,o):null}p.displayName="Only";var d=["only","matchMedia"],v=["children","as"],h=function e(t){if(!t||!t.props)return t;var i=t.props.children;if(!i)return null;var a=n.Children.map(i,e),o=t.props,u=o.only,c=o.matchMedia,f=r(o,d),l=n.createElement(t.type,f,a);return u||c?n.createElement(p,{on:u||"",matchMedia:c||""},l):l},y=function(e){var t=e.children,i=e.as,a=r(e,v),o=n.Children.map(t,h);return i?n.createElement(i,a,o):n.createElement(n.Fragment,null,o)};y.displayName="Match";var b=function(n){return function(e){var r={};return Object.keys(e).forEach(function(t){var i=n[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(n));r["@media "+f(i)]=e[t]}),r}},x=function n(e){var r="";return Object.entries(e).forEach(function(e){var t=e[0],i=e[1];r+="object"==typeof i?t+" {\n"+n(i)+"}\n":t+": "+i+";\n"}),r},g=function(n){return function(e){return x(b(n)(e))}};export{u as BreakpointsContext,c as BreakpointsProvider,y as Match,p as Only,g as toCSS,b as toJSON,s as useBreakpoint,l as useMediaQuery};
+import*as n from"react";function r(){return r=Object.assign?Object.assign.bind():function(n){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var t in e)({}).hasOwnProperty.call(e,t)&&(n[t]=e[t])}return n},r.apply(null,arguments)}var e=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],t=["width","height"],i=function(n){return Object.keys(n).reduce(function(r,i){var o=n[i];if(!Array.isArray(o)||o.length<=1)return r;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var v=new Error('The following fields "'+l+'" have been ignored');console.error(v)}if("number"!=typeof c||"number"!=typeof f)return r;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var m=Math.min(c,f),d=Math.max(c,f),p=a&&e.includes(a)?a:"px",h=u&&t.includes(u)?u:"width";return r[i]=[m,d,p,h],r[i+"Up"]=[m,Infinity,p,h],r[i+"Down"]=[0,d,p,h],r},{})},o={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},a=n.createContext(i(o)),u=function(e){var t=e.breakpoints,u=e.additionalBreakpoints,c=e.children;return n.createElement(a.Provider,{value:i(r({},void 0===t?o:t,void 0===u?{}:u))},c)};u.displayName="BreakpointsProvider";var c=function(n){var r=[],e=n[0],t=n[1],i=n[2],o=n[3];return 0!==e&&r.push("(min-"+o+":"+e+i+")"),Infinity!==t&&r.push("(max-"+o+":"+t+i+")")," "+r.join(" and ")},f=function(r){var e=n.useMemo(function(){return matchMedia(r)},[r]),t=n.useState(e.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(e.matches);var n=function(n){o(n.matches)};return e.addListener(n),function(){e.removeListener(n)}},[e]),i},s=function(r){var e=n.useContext(a),t=n.useMemo(function(){return function(n){return function(r){if(void 0===r&&(r=""),!r)return"";var e=r.split(" "),t=e.map(function(r){return n[r]}).filter(Boolean).map(function(n){return c(n)}).filter(Boolean).join(",");if(!t){var i=1===e.length;console.error('"'+e.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(e)},[e]),i=n.useMemo(function(){return t(r)},[t,r]);return f(i||"-")},l=["matchMedia","on","as","children"];function v(r){var e=r.matchMedia,t=r.on,i=r.as,o=r.children,a=function(n,r){if(null==n)return{};var e={};for(var t in n)if({}.hasOwnProperty.call(n,t)){if(r.includes(t))continue;e[t]=n[t]}return e}(r,l),u=s(t),c=f(e||"-");return u||c?n.createElement(i||n.Fragment,i?a:void 0,o):null}v.displayName="Only";var m=function(n){return function(r){var e={};return Object.keys(r).forEach(function(t){var i=n[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(n));e["@media "+c(i)]=r[t]}),e}},d=function(n){var r="";return Object.entries(n).forEach(function(n){var e=n[0],t=n[1];r+="object"==typeof t?e+" {\n"+d(t)+"}\n":e+": "+t+";\n"}),r},p=function(n){return function(r){return d(m(n)(r))}};export{a as BreakpointsContext,u as BreakpointsProvider,v as Only,p as toCSS,m as toJSON,s as useBreakpoint,f as useMediaQuery};
 //# sourceMappingURL=react-responsive.modern.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"react-responsive.modern.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/Match.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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(as || React.Fragment, as ? (props as OtherProps) : undefined, children);\n}\n\nOnly.displayName = \"Only\";\n","import * as React from \"react\";\n\nimport { Only } from \"./Only\";\n\nexport interface MatchChildProps {\n  matchMedia?: string;\n  only?: string;\n}\n\ndeclare module \"react\" {\n  interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T>, MatchChildProps {}\n}\n\ntype Element = React.ReactElement<MatchChildProps & any, string | React.ComponentType<MatchChildProps & any>> | null;\n\nconst parseChildren = (element: Element): Element => {\n  if (!element || !element.props) {\n    return element;\n  }\n\n  const _children: Element | Element[] | null = element.props.children;\n  if (!_children) {\n    return null;\n  }\n  const children = React.Children.map(_children, parseChildren);\n  const { only, matchMedia, ...props } = element.props;\n  const clone = React.createElement(element.type, props, children);\n  if (!only && !matchMedia) {\n    return clone;\n  }\n  return (\n    <Only on={only || \"\"} matchMedia={matchMedia || \"\"}>\n      {clone}\n    </Only>\n  );\n};\n\ninterface MatchProps {\n  [key: string]: any;\n  children: Element | Element[] | null;\n  as?: string;\n}\n\nexport const Match: React.FunctionComponent<MatchProps> = ({ children, as, ...props }) => {\n  const computedChildren = React.Children.map(children, parseChildren);\n  if (as) {\n    return React.createElement(as, props, computedChildren);\n  }\n  return React.createElement(React.Fragment, null, computedChildren);\n};\n\nMatch.displayName = \"Match\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","Array","isArray","breakpoint","length","supposedUnit","supposedDirection","supposedMax","options","rest","slice","error","Error","console","supposedMin","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","additionalBreakpoints","children","Provider","value","_ref$additionalBreakp","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","Only","as","props","matchOn","useBreakpoint","matchQuery","createElement","Fragment","undefined","parseChildren","element","_children","Children","only","_objectWithoutPropertiesLoose","_element$props","_excluded","type","clone","_excluded2","computedChildren","Match","toJSON","points","css","forEach","point","stringify","object","string","entries","key","toCSS"],"mappings":"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"}
+{"version":3,"file":"react-responsive.modern.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","_ref$additionalBreakp","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key","toCSS"],"mappings":"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"}

package/lib/react-responsive.modern.mjs

@@ -1,2 +1,2 @@
-import*as n from"react";function e(){return e=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},e.apply(this,arguments)}function r(n,e){if(null==n)return{};var r,t,i={},a=Object.keys(n);for(t=0;t<a.length;t++)e.indexOf(r=a[t])>=0||(i[r]=n[r]);return i}var t=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],i=["width","height"],a=function(n){return Object.keys(n).reduce(function(e,r){var a=n[r];if(!Array.isArray(a)||a.length<=1)return e;var o,u,c=a[0],f=a[1],l=a[2],s=a.slice(3);if(s.length>0){var m=new Error('The following fields "'+s+'" have been ignored');console.error(m)}if("number"!=typeof c||"number"!=typeof f)return e;"string"==typeof l?o=l:"object"==typeof l&&(u=l.direction,o=l.unit);var p=Math.min(c,f),d=Math.max(c,f),v=o&&t.includes(o)?o:"px",h=u&&i.includes(u)?u:"width";return e[r]=[p,d,v,h],e[r+"Up"]=[p,Infinity,v,h],e[r+"Down"]=[0,d,v,h],e},{})},o={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},u=n.createContext(a(o)),c=function(r){var t=r.breakpoints,i=r.additionalBreakpoints,c=r.children;return n.createElement(u.Provider,{value:a(e({},void 0===t?o:t,void 0===i?{}:i))},c)};c.displayName="BreakpointsProvider";var f=function(n){var e=[],r=n[0],t=n[1],i=n[2],a=n[3];return 0!==r&&e.push("(min-"+a+":"+r+i+")"),Infinity!==t&&e.push("(max-"+a+":"+t+i+")")," "+e.join(" and ")},l=function(e){var r=n.useMemo(function(){return matchMedia(e)},[e]),t=n.useState(r.matches),i=t[0],a=t[1];return n.useLayoutEffect(function(){a(r.matches);var n=function(n){a(n.matches)};return r.addListener(n),function(){r.removeListener(n)}},[r]),i},s=function(e){var r=n.useContext(u),t=n.useMemo(function(){return function(n){return function(e){if(void 0===e&&(e=""),!e)return"";var r=e.split(" "),t=r.map(function(e){return n[e]}).filter(Boolean).map(function(n){return f(n)}).filter(Boolean).join(",");if(!t){var i=1===r.length;console.error('"'+r.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(r)},[r]),i=n.useMemo(function(){return t(e)},[t,e]);return l(i||"-")},m=["matchMedia","on","as","children"];function p(e){var t=e.matchMedia,i=e.on,a=e.as,o=e.children,u=r(e,m),c=s(i),f=l(t||"-");return c||f?n.createElement(a||n.Fragment,a?u:void 0,o):null}p.displayName="Only";var d=["only","matchMedia"],v=["children","as"],h=function e(t){if(!t||!t.props)return t;var i=t.props.children;if(!i)return null;var a=n.Children.map(i,e),o=t.props,u=o.only,c=o.matchMedia,f=r(o,d),l=n.createElement(t.type,f,a);return u||c?n.createElement(p,{on:u||"",matchMedia:c||""},l):l},y=function(e){var t=e.children,i=e.as,a=r(e,v),o=n.Children.map(t,h);return i?n.createElement(i,a,o):n.createElement(n.Fragment,null,o)};y.displayName="Match";var b=function(n){return function(e){var r={};return Object.keys(e).forEach(function(t){var i=n[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(n));r["@media "+f(i)]=e[t]}),r}},x=function n(e){var r="";return Object.entries(e).forEach(function(e){var t=e[0],i=e[1];r+="object"==typeof i?t+" {\n"+n(i)+"}\n":t+": "+i+";\n"}),r},g=function(n){return function(e){return x(b(n)(e))}};export{u as BreakpointsContext,c as BreakpointsProvider,y as Match,p as Only,g as toCSS,b as toJSON,s as useBreakpoint,l as useMediaQuery};
+import*as n from"react";function r(){return r=Object.assign?Object.assign.bind():function(n){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var t in e)({}).hasOwnProperty.call(e,t)&&(n[t]=e[t])}return n},r.apply(null,arguments)}var e=["em","ex","%","px","cm","mm","in","pt","pc","ch","rem","vh","vw","vmin","vmax"],t=["width","height"],i=function(n){return Object.keys(n).reduce(function(r,i){var o=n[i];if(!Array.isArray(o)||o.length<=1)return r;var a,u,c=o[0],f=o[1],s=o[2],l=o.slice(3);if(l.length>0){var v=new Error('The following fields "'+l+'" have been ignored');console.error(v)}if("number"!=typeof c||"number"!=typeof f)return r;"string"==typeof s?a=s:"object"==typeof s&&(u=s.direction,a=s.unit);var m=Math.min(c,f),d=Math.max(c,f),p=a&&e.includes(a)?a:"px",h=u&&t.includes(u)?u:"width";return r[i]=[m,d,p,h],r[i+"Up"]=[m,Infinity,p,h],r[i+"Down"]=[0,d,p,h],r},{})},o={xs:[0,575,"px"],sm:[576,767,"px"],md:[768,991,"px"],lg:[992,1199,"px"],xl:[1200,Infinity,"px"]},a=n.createContext(i(o)),u=function(e){var t=e.breakpoints,u=e.additionalBreakpoints,c=e.children;return n.createElement(a.Provider,{value:i(r({},void 0===t?o:t,void 0===u?{}:u))},c)};u.displayName="BreakpointsProvider";var c=function(n){var r=[],e=n[0],t=n[1],i=n[2],o=n[3];return 0!==e&&r.push("(min-"+o+":"+e+i+")"),Infinity!==t&&r.push("(max-"+o+":"+t+i+")")," "+r.join(" and ")},f=function(r){var e=n.useMemo(function(){return matchMedia(r)},[r]),t=n.useState(e.matches),i=t[0],o=t[1];return n.useLayoutEffect(function(){o(e.matches);var n=function(n){o(n.matches)};return e.addListener(n),function(){e.removeListener(n)}},[e]),i},s=function(r){var e=n.useContext(a),t=n.useMemo(function(){return function(n){return function(r){if(void 0===r&&(r=""),!r)return"";var e=r.split(" "),t=e.map(function(r){return n[r]}).filter(Boolean).map(function(n){return c(n)}).filter(Boolean).join(",");if(!t){var i=1===e.length;console.error('"'+e.join('", "')+'" '+(i?"is":"are")+"n't "+(i?"a ":"")+"valid breakpoint"+(i?"":"s"))}return t}}(e)},[e]),i=n.useMemo(function(){return t(r)},[t,r]);return f(i||"-")},l=["matchMedia","on","as","children"];function v(r){var e=r.matchMedia,t=r.on,i=r.as,o=r.children,a=function(n,r){if(null==n)return{};var e={};for(var t in n)if({}.hasOwnProperty.call(n,t)){if(r.includes(t))continue;e[t]=n[t]}return e}(r,l),u=s(t),c=f(e||"-");return u||c?n.createElement(i||n.Fragment,i?a:void 0,o):null}v.displayName="Only";var m=function(n){return function(r){var e={};return Object.keys(r).forEach(function(t){var i=n[t];if(!i)throw new Error(t+" is not a valid breakpoint\nValid breakpoints are: "+Object.keys(n));e["@media "+c(i)]=r[t]}),e}},d=function(n){var r="";return Object.entries(n).forEach(function(n){var e=n[0],t=n[1];r+="object"==typeof t?e+" {\n"+d(t)+"}\n":e+": "+t+";\n"}),r},p=function(n){return function(r){return d(m(n)(r))}};export{a as BreakpointsContext,u as BreakpointsProvider,v as Only,p as toCSS,m as toJSON,s as useBreakpoint,f as useMediaQuery};
 //# sourceMappingURL=react-responsive.modern.js.map

package/lib/react-responsive.modern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-responsive.modern.mjs","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedMin","supposedMax","options","rest","error","Error","console","supposedUnit","supposedDirection","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","str","push","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","isShown","setIsShown","useState","matches","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","_ref","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key","toCSS"],"mappings":"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"}

package/lib/react-responsive.umd.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"react-responsive.umd.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/Match.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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(as || React.Fragment, as ? (props as OtherProps) : undefined, children);\n}\n\nOnly.displayName = \"Only\";\n","import * as React from \"react\";\n\nimport { Only } from \"./Only\";\n\nexport interface MatchChildProps {\n  matchMedia?: string;\n  only?: string;\n}\n\ndeclare module \"react\" {\n  interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T>, MatchChildProps {}\n}\n\ntype Element = React.ReactElement<MatchChildProps & any, string | React.ComponentType<MatchChildProps & any>> | null;\n\nconst parseChildren = (element: Element): Element => {\n  if (!element || !element.props) {\n    return element;\n  }\n\n  const _children: Element | Element[] | null = element.props.children;\n  if (!_children) {\n    return null;\n  }\n  const children = React.Children.map(_children, parseChildren);\n  const { only, matchMedia, ...props } = element.props;\n  const clone = React.createElement(element.type, props, children);\n  if (!only && !matchMedia) {\n    return clone;\n  }\n  return (\n    <Only on={only || \"\"} matchMedia={matchMedia || \"\"}>\n      {clone}\n    </Only>\n  );\n};\n\ninterface MatchProps {\n  [key: string]: any;\n  children: Element | Element[] | null;\n  as?: string;\n}\n\nexport const Match: React.FunctionComponent<MatchProps> = ({ children, as, ...props }) => {\n  const computedChildren = React.Children.map(children, parseChildren);\n  if (as) {\n    return React.createElement(as, props, computedChildren);\n  }\n  return React.createElement(React.Fragment, null, computedChildren);\n};\n\nMatch.displayName = \"Match\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","Array","isArray","breakpoint","length","supposedUnit","supposedDirection","supposedMax","options","rest","slice","error","Error","console","supposedMin","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","additionalBreakpoints","children","Provider","value","_ref$additionalBreakp","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","Only","as","props","matchOn","useBreakpoint","matchQuery","createElement","Fragment","undefined","parseChildren","element","_children","Children","only","_objectWithoutPropertiesLoose","_element$props","_excluded","type","clone","_excluded2","computedChildren","Match","toJSON","points","css","forEach","point","stringify","object","string","entries","key"],"mappings":"q6BAiBA,IAA0BA,EAAY,CACpC,KACA,KACA,IACA,KACA,KACA,KACA,KACA,KACA,KACA,KACA,MACA,KACA,KACA,OACA,QAK6BC,EAAiB,CAAC,QAAS,UAiB7CC,EAAW,SAACC,GACvB,OAAOC,OAAOC,KAAKF,GAAeG,OAAoB,SAACC,EAAaC,GAClE,MAAmBL,EAAcK,GAEjC,IAAKC,MAAMC,QAAQC,IAAeA,EAAWC,QAAU,EACrD,OAAOL,EAGT,IAUIM,EACAC,IAXiDH,EAAjCI,GAAAA,EAAiCJ,EAArD,GAAiCK,EAAoBL,EAARM,GAAAA,EAAQN,EACrDO,MAAA,GAAA,GAAID,EAAKL,OAAS,EAAG,CACnB,IAAWO,EAAG,IAAIC,+BAA+BH,EAAnC,uBACdI,QAAQF,MAAMA,GAGhB,GAA2B,iBAAhBG,GAAmD,iBAAhBP,EAC5C,OACDR,EAIsB,iBAAZS,EACTH,EAAeG,EACa,qBAC5BF,EAAoBE,EAAQO,UAC5BV,EAAeG,EAAQQ,MAGzB,IAAMC,EAAMC,KAAKD,IAAIH,EAAaP,GACzBY,EAAGD,KAAKC,IAAIL,EAAaP,GAC5BS,EAAOX,GAAgBb,EAAqB4B,SAASf,GAAgBA,EAAe,KAC3EU,EACbT,GAAqBb,EAA0B2B,SAASd,GAAqBA,EAAoB,QAMnG,OAJAP,EAAYC,GAAkB,CAACiB,EAAKE,EAAKH,EAAMD,GAC/ChB,EAAeC,EAAJ,MAA0B,CAACiB,EAAKI,SAAUL,EAAMD,GAC3DhB,EAAeC,EAAJ,QAA4B,CAAC,EAAGmB,EAAKH,EAAMD,GAGvDhB,GAAE,KCxFCuB,EAAyC,CAC7CC,GAAI,CAAC,EAAG,IAAK,MACbC,GAAI,CAAC,IAAK,IAAK,MACfC,GAAI,CAAC,IAAK,IAAK,MACfC,GAAI,CAAC,IAAK,KAAM,MAChBC,GAAI,CAAC,KAAMN,SAAU,OAGQO,EAAGC,EAAMC,cAA2BpC,EAAS4B,IAO/DS,EAAkG,SAAAC,GAC7GjC,IAAAA,EAAAA,EAAAA,YACAkC,EAAAA,EAAAA,sBACAC,EACGF,EADHE,SAEA,OACEL,gBAACD,EAAmBO,SAClB,CAAAC,MAAO1C,EACFK,EAAAA,QAPKuB,IAAAA,EAAAA,EACdW,aAAwB,GAErBI,KAQEH,IAKPH,EAAoBO,YAAc,0BClCAC,EAAG,SAACpC,GACpC,IAAMqC,EAAsB,GAC5BC,EAA8CtC,EAA7BuC,GAAAA,EAA6BvC,KAAnBa,EAAmBb,EAAbY,GAAAA,EAAaZ,EAA9C,GAeA,OAXiB,IAAbsC,GAEFD,EAAUG,KAAV,QAAuB5B,EAAa6B,IAD3BH,EAAWzB,EAErB,KAGgBK,WAAbqB,GAEFF,EAAUG,KAAa5B,QAAAA,MADd2B,EAAW1B,EACpB,KAGK,IAAMwB,EAAUK,KAAK,UCbJC,EAAG,SAACC,GAC5B,IAAMC,EAAiBnB,EAAMoB,QAAQ,WAAMC,OAAAA,WAAWH,IAAa,CAACA,IACpEI,EAA8BtB,EAAMuB,SAAkBJ,EAAeK,SAA9DC,EAASC,EAAAA,GAAAA,EAEhB1B,EAAAA,GAgBA,OAhBAA,EAAM2B,gBAAgB,WACpBD,EAAWP,EAAeK,SAC1B,IAAcI,EAAG,SAACC,GAGhBH,EAAWG,EAAML,UAMnB,OADAL,EAAeW,YAAYF,GACpB,WACLT,EAAeY,eAAeH,KAE/B,CAACT,IAEGM,KClBoB,SAACO,GAC5B,MAAoBhC,EAAMiC,WAAWlC,GACnBmC,EAAGlC,EAAMoB,QAAQ,WAAA,OCNnC,SAAClD,UACA8D,SAAAA,GACC,QADkB,IAAnBA,IAAAA,EAAK,KACCA,EACH,MAAO,GAET,IAAwBG,EAAGH,EAAGI,MAAM,KAE9BlB,EADsBiB,EAAmBE,IAAI,SAAClE,GAAD,OAA+BD,EAACC,KAAiBmE,OAAOC,SAExGF,IAAI,SAAC/D,GAAeoC,OAAAA,EAAsBpC,KAC1CgE,OAAOC,SACPvB,KAAK,KACR,IAAKE,EAAY,CACf,IAAMsB,EAAiD,IAA9BL,EAAmB5D,OAC5CS,QAAQF,MAAR,IACMqD,EAAmBnB,KAAK,QAAYwB,MAAAA,EAAmB,KAAO,OADpE,QAEIA,EAAmB,KAAO,IAF9B,oBAGqBA,EAAmB,GAAK,MAG/C,OAAOtB,IDbkDhD,IAAc,CAACA,MAEvD8B,EAAMoB,QAAQ,WAAMc,OAAAA,EAAaF,IAAK,CAACE,EAAcF,IAExE,OAAoBf,EAACC,GAAc,qDEHrBuB,EAAAtC,OAMiCkB,EAAAlB,EAL/CkB,WACAW,IAAAA,GACAU,EAAAA,EAAAA,GACArC,EAE+CF,EAF/CE,SACGsC,SAEGC,EAAUC,EAAcb,KACXf,EAAcI,GAAc,KAG/C,OAFgBuB,GAAWE,IAMdC,cAAcL,GAAM1C,EAAMgD,SAAUN,EAAMC,OAAuBM,EAAW5C,GAHhF,KAMXoC,EAAKhC,YAAc,uDCdAyC,EAAG,SAAAA,EAACC,GACrB,IAAKA,IAAYA,EAAQR,MACvB,OACDQ,EAED,IAAeC,EAA+BD,EAAQR,MAAMtC,SAC5D,IAAK+C,EACH,OAAO,KAET,IAAM/C,EAAWL,EAAMqD,SAAShB,IAAIe,EAAWF,KACRC,EAAQR,MAAvCW,EAAAA,EAAAA,KAAMjC,IAAAA,WAAesB,EAC7BY,EAAAC,EAAAC,KAAczD,EAAM+C,cAAcI,EAAQO,KAAMf,EAAOtC,GACvD,OAAKiD,GAASjC,EAIZrB,EAAC+C,cAAAN,GAAKT,GAAIsB,GAAQ,GAAIjC,WAAYA,GAAc,IAC7CsC,GAJIA,KAe+C,SAA+BxD,GAAA,MAA5BE,EAAAA,SAAUqC,EAAkBvC,EAAlBuC,GAAOC,EAAWY,EAAApD,EAAAyD,GACjEC,EAAG7D,EAAMqD,SAAShB,IAAIhC,EAAU6C,GACtD,OAAIR,EACU1C,EAAC+C,cAAcL,EAAIC,EAAOkB,KAE3Bd,cAAc/C,EAAMgD,SAAU,KAAMa,IAGnDC,EAAMrD,YAAc,QCpCPsD,IAAMA,EACjB,SAAC7F,GAAD,OACC8F,SAAAA,GACC,IAASC,EAAY,GAQrB,OAPAlG,OAAOC,KAAKgG,GAAQE,QAAQ,SAACC,GAC3B,IAAM7F,EAAaJ,EAAYiG,GAC/B,IAAK7F,EACH,MAAM,IAAAS,MAAaoF,EAA2DpG,sDAAAA,OAAOC,KAAKE,IAE5F+F,YAAcvD,EAAsBpC,IAAiB0F,EAAOG,KAG/DF,IAEYG,EAAG,SAAAA,EAACC,GACjB,IAAIC,EAAS,GAQb,OAPAvG,OAAOwG,QAAQF,GAAQH,QAAQ,SAAA/D,OAAiBqE,EAAArE,EAAA,GAAVI,EAAUJ,EAAA,GAK9CmE,GAJqB,iBAAV/D,EAIEiE,EAAUJ,OAAAA,EAAU7D,GAClC,MAJgBiE,EAAP,KAAejE,EAArB,QAKG+D,6EAIP,SAACpG,GAAD,OACC8F,SAAAA,UACUI,EAACL,EAAO7F,EAAP6F,CAAoBC"}
+{"version":3,"file":"react-responsive.umd.js","sources":["../src/sanitize.ts","../src/BreakpointsContext.tsx","../src/fromBreakpointToMedia.ts","../src/useMediaQuery.ts","../src/useBreakpoint.ts","../src/mediaQueryBuilder.ts","../src/Only.tsx","../src/css-in-js.ts"],"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.createContext<Breakpoints>(sanitize(defaultBreakpoints));\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 * as React from \"react\";\n\n// const startTransitionFallbackForReact17AndBellow = (cb: () => void) => cb();\n// // @ts-expect-error not supported yet\n// const startTransition = React.startTransition || startTransitionFallbackForReact17AndBellow;\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      // We use startTransition as those update aren't urgent\n      // startTransition(() => {\n      setIsShown(event.matches);\n      // });\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 { 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\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\nOnly.displayName = \"Only\";\n","import { CSSProperties } from \"react\";\nimport { Breakpoints } from \"./sanitize\";\nimport { fromBreakpointToMedia } from \"./fromBreakpointToMedia\";\n\ntype CSSinJSProperties =\n  | CSSProperties\n  | {\n      [key: string]: CSSProperties;\n    };\n\ninterface Points {\n  [breakpoint: string]: CSSinJSProperties;\n}\n\ntype CSSinJS = Record<string, CSSinJSProperties>;\nexport const toJSON =\n  (breakpoints: Breakpoints) =>\n  (points: Points): CSSinJS => {\n    const css: CSSinJS = {};\n    Object.keys(points).forEach((point) => {\n      const breakpoint = breakpoints[point];\n      if (!breakpoint) {\n        throw new Error(`${point} is not a valid breakpoint\\nValid breakpoints are: ${Object.keys(breakpoints)}`);\n      }\n      css[`@media ${fromBreakpointToMedia(breakpoint)}`] = points[point];\n    });\n    return css;\n  };\n\nconst stringify = (object: CSSinJSProperties) => {\n  let string = \"\";\n  Object.entries(object).forEach(([key, value]) => {\n    if (typeof value !== \"object\") {\n      string += `${key}: ${value};\\n`;\n      return;\n    }\n    string += `${key} {\\n${stringify(value)}}\\n`;\n  });\n  return string;\n};\n\nexport const toCSS =\n  (breakpoints: Breakpoints) =>\n  (points: Points): string =>\n    stringify(toJSON(breakpoints)(points));\n"],"names":["listOfSupportedUnits","listOfSupportedDirections","sanitize","inBreakpoints","Object","keys","reduce","breakpoints","breakpointName","breakpoint","Array","isArray","length","supposedUnit","supposedDirection","supposedMin","supposedMax","options","rest","slice","error","Error","console","direction","unit","min","Math","max","includes","Infinity","defaultBreakpoints","xs","sm","md","lg","xl","BreakpointsContext","React","createContext","BreakpointsProvider","_ref","_ref$breakpoints","_ref$additionalBreakp","additionalBreakpoints","children","Provider","value","_extends","displayName","fromBreakpointToMedia","mediaList","minValue","maxValue","push","str","join","useMediaQuery","mediaQuery","mediaQueryList","useMemo","matchMedia","_React$useState","useState","matches","isShown","setIsShown","useLayoutEffect","listener","event","addListener","removeListener","useBreakpoint","on","useContext","toMediaQuery","rawBreakpointNames","split","map","filter","Boolean","isUniqBreakpoint","mediaQueryBuilder","Only","as","props","_objectWithoutPropertiesLoose","_excluded","matchOn","matchQuery","createElement","Fragment","undefined","toJSON","points","css","forEach","point","stringify","object","string","entries","key"],"mappings":"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"}

package/lib/sanitize.d.ts

@@ -1,15 +1,15 @@
-export declare type Units = "em" | "ex" | "%" | "px" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "rem" | "vh" | "vw" | "vmin" | "vmax";
-declare type Directions = "width" | "height";
-export declare type ExposedBreakpoint = [number, number] | [number, number, Units] | [number, number, {
-    unit?: Units;
-    direction?: Directions;
-}];
-export interface ExposedBreakpoints {
-    [key: string]: ExposedBreakpoint;
-}
-export declare type Breakpoint = [number, number, Units, Directions];
-export interface Breakpoints {
-    [breakpoint: string]: Breakpoint;
-}
-export declare const sanitize: (inBreakpoints: ExposedBreakpoints) => Breakpoints;
-export {};
+export type Units = "em" | "ex" | "%" | "px" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "rem" | "vh" | "vw" | "vmin" | "vmax";
+type Directions = "width" | "height";
+export type ExposedBreakpoint = [number, number] | [number, number, Units] | [number, number, {
+    unit?: Units;
+    direction?: Directions;
+}];
+export interface ExposedBreakpoints {
+    [key: string]: ExposedBreakpoint;
+}
+export type Breakpoint = [number, number, Units, Directions];
+export interface Breakpoints {
+    [breakpoint: string]: Breakpoint;
+}
+export declare const sanitize: (inBreakpoints: ExposedBreakpoints) => Breakpoints;
+export {};

package/lib/useBreakpoint.d.ts

@@ -1 +1 @@
-export declare const useBreakpoint: (on?: string) => boolean;
+export declare const useBreakpoint: (on?: string) => boolean;

package/lib/useMediaQuery.d.ts

@@ -1 +1 @@
-export declare const useMediaQuery: (mediaQuery: string) => boolean;
+export declare const useMediaQuery: (mediaQuery: string) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocz/react-responsive",
-  "version": "3.0.3",
+  "version": "4.0.0-beta.0",
   "description": "🔍 <Only /> displays some contents for a specific screen size",
   "source": "src/index.ts",
   "sideEffects": false,
@@ -18,7 +18,9 @@
     },
     "./package.json": "./package.json"
   },
-  "repository": "git@github.com:bloczjs/react-responsive.git",
+  "repository": {
+    "url": "git+ssh://git@github.com/bloczjs/react-responsive.git"
+  },
   "keywords": [
     "adaptive",
     "breakpoint",
@@ -40,10 +42,10 @@
   },
   "homepage": "https://github.com/bloczjs/react-responsive#readme",
   "devDependencies": {
-    "@types/react": "^18.0.12",
-    "microbundle": "^0.15.0"
+    "@types/react": "^19.0.1",
+    "microbundle": "^0.15.1"
   },
   "peerDependencies": {
-    "react": "16.8.0 - 18.x.x"
+    "react": "16.8.0 - 19.x.x"
   }
 }

package/lib/Match.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-export interface MatchChildProps {
-    matchMedia?: string;
-    only?: string;
-}
-declare module "react" {
-    interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T>, MatchChildProps {
-    }
-}
-declare type Element = React.ReactElement<MatchChildProps & any, string | React.ComponentType<MatchChildProps & any>> | null;
-interface MatchProps {
-    [key: string]: any;
-    children: Element | Element[] | null;
-    as?: string;
-}
-export declare const Match: React.FunctionComponent<MatchProps>;
-export {};