@skyscanner/backpack-web 33.2.0 → 33.3.1

package/bpk-component-breakpoint/index.js

@@ -17,5 +17,6 @@
  */
 
 import BpkBreakpoint, { BREAKPOINTS } from "./src/BpkBreakpoint";
-export { BREAKPOINTS };
+import useMediaQuery from "./src/useMediaQuery";
+export { BREAKPOINTS, useMediaQuery };
 export default BpkBreakpoint;

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

@@ -18,26 +18,33 @@
 
 import type { ReactNode } from 'react';
 declare const BREAKPOINTS: {
-    readonly SMALL_MOBILE: any;
-    readonly MOBILE: any;
-    readonly SMALL_TABLET: any;
-    readonly SMALL_TABLET_ONLY: any;
-    readonly TABLET: any;
-    readonly TABLET_ONLY: any;
-    readonly ABOVE_MOBILE: any;
-    readonly ABOVE_TABLET: any;
-    readonly ABOVE_DESKTOP: any;
-    readonly DESKTOP_ONLY: any;
+  readonly SMALL_MOBILE: any;
+  readonly MOBILE: any;
+  readonly SMALL_TABLET: any;
+  readonly SMALL_TABLET_ONLY: any;
+  readonly TABLET: any;
+  readonly TABLET_ONLY: any;
+  readonly ABOVE_MOBILE: any;
+  readonly ABOVE_TABLET: any;
+  readonly ABOVE_DESKTOP: any;
+  readonly DESKTOP_ONLY: any;
 };
 type Props = {
-    /**
-     * The content to render when the breakpoint matches.
-     */
-    children: ReactNode | ((matches: boolean) => ReactNode | null);
-    query: string | (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
-    legacy?: boolean;
-    matchSSR?: boolean;
+  /**
+   * The content to render when the breakpoint matches.
+   */
+  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 };
+declare const BpkBreakpoint: ({
+  children,
+  legacy,
+  query,
+}: Props) => JSX.Element;
+
+declare const useMediaQuery: (query: string) => boolean;
+
+export { BREAKPOINTS, useMediaQuery };
 export default BpkBreakpoint;

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

@@ -17,10 +17,9 @@
  */
 
 import { useState, useEffect } from 'react';
-import MediaQuery from "react-responsive/dist/react-responsive";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { jsx as _jsx } from "react/jsx-runtime";
+import useMediaQuery from "./useMediaQuery";
 const BREAKPOINTS = {
   SMALL_MOBILE: breakpoints.breakpointQuerySmallMobile,
   MOBILE: breakpoints.breakpointQueryMobile,
@@ -40,6 +39,7 @@ const BpkBreakpoint = ({
   query
 }) => {
   const [isClient, setIsClient] = useState(false);
+  const matches = useMediaQuery(query);
   useEffect(() => {
     setIsClient(true);
   }, []);
@@ -47,10 +47,10 @@ const BpkBreakpoint = ({
     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 (typeof children === 'function') {
+      return children(matches);
+    }
+    return matches ? children : null;
   }
 
   // Below code is executed when running in SSR mode

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

@@ -0,0 +1,36 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState, useEffect } from 'react';
+const useMediaQuery = query => {
+  const [matches, setMatches] = useState(window.matchMedia ? window.matchMedia(query).matches : false);
+  useEffect(() => {
+    if (window.matchMedia) {
+      const media = window.matchMedia(query);
+      setMatches(media.matches);
+      const listener = () => {
+        setMatches(media.matches);
+      };
+      media.addEventListener('change', listener);
+      return () => media.removeEventListener('change', listener);
+    }
+    return undefined;
+  }, [query]);
+  return matches;
+};
+export default useMediaQuery;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.2.0",
+  "version": "33.3.1",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -25,7 +25,7 @@
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^17.5.3",
-    "@skyscanner/bpk-svgs": "^19.0.1",
+    "@skyscanner/bpk-svgs": "^19.1.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",
@@ -39,7 +39,6 @@
     "object-assign": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3",
-    "react-responsive": "^9.0.2",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-virtualized-auto-sizer": "1.0.20",
@@ -47,11 +46,11 @@
   },
   "peerDependencies": {
     "node-sass": ">= 7",
-    "sass": "^1",
-    "sass-embedded": "^1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-transition-group": "^4.4.5"
+    "react-transition-group": "^4.4.5",
+    "sass": "^1",
+    "sass-embedded": "^1"
   },
   "peerDependenciesMeta": {
     "node-sass": {