@skyscanner/backpack-web 30.0.0 → 30.1.0

package/bpk-component-breakpoint/src/BpkBreakpoint.d.ts

@@ -36,6 +36,7 @@ type Props = {
     children: ReactNode | ((matches: boolean) => ReactNode | null);
     query: string | (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
     legacy?: boolean;
+    matchSSR?: boolean;
 };
 declare const BpkBreakpoint: ({ children, legacy, query }: Props) => JSX.Element;
 export { BREAKPOINTS };

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -35,15 +35,26 @@ const BREAKPOINTS = {
 const BpkBreakpoint = ({
   children,
   legacy = false,
+  matchSSR = false,
   query
 }) => {
+  const isSSR = () => !(typeof window !== 'undefined' && window.document && window.document.createElement);
   if (!legacy && !Object.values(BREAKPOINTS).includes(query)) {
     console.warn(`Invalid query ${query}. Use one of the supported queries or pass the legacy prop.`);
   }
-  return /*#__PURE__*/_jsx(MediaQuery, {
-    query: query,
-    children: children
-  });
+  if (!isSSR()) {
+    return /*#__PURE__*/_jsx(MediaQuery, {
+      query: query,
+      children: children
+    });
+  }
+
+  // Below code is executed when running in SSR mode
+
+  if (typeof children === 'function') {
+    return children(matchSSR);
+  }
+  return matchSSR ? children : null;
 };
 export { BREAKPOINTS };
 export default BpkBreakpoint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "30.0.0",
+  "version": "30.1.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",