@skyscanner/backpack-web 33.1.0 → 33.3.0

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/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -78,6 +78,7 @@ class BpkHorizontalNav extends Component {
   };
   render() {
     const {
+      ariaLabel,
       autoScrollToSelected,
       children: rawChildren,
       className,
@@ -113,6 +114,7 @@ class BpkHorizontalNav extends Component {
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
       _jsx(BpkMobileScrollContainer, {
+        ariaLabel: ariaLabel,
         innerContainerTagName: "nav",
         className: classNames,
         leadingIndicatorClassName: leadingScrollIndicatorClassName,
@@ -131,6 +133,7 @@ class BpkHorizontalNav extends Component {
   }
 }
 BpkHorizontalNav.propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   /**
    * Ensures that the selected item is within view when loaded on narrow-screened devices.
@@ -139,7 +142,7 @@ BpkHorizontalNav.propTypes = {
   className: PropTypes.string,
   leadingScrollIndicatorClassName: PropTypes.string,
   /**
-   * When set to "false", the bottom border on the component isn't included. This refers 
+   * When set to "false", the bottom border on the component isn't included. This refers
    * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
    */
   showUnderline: PropTypes.bool,
@@ -147,6 +150,7 @@ BpkHorizontalNav.propTypes = {
   type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
 };
 BpkHorizontalNav.defaultProps = {
+  ariaLabel: null,
   autoScrollToSelected: false,
   className: null,
   leadingScrollIndicatorClassName: null,

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -59,6 +59,7 @@ const computeScrollIndicatorClassName = (scrollerEl, leadingIndicatorClassName =
   return classNames;
 };
 const propTypes = {
+  ariaLabel: PropTypes.string,
   children: PropTypes.node.isRequired,
   scrollerRef: PropTypes.func,
   innerContainerTagName: PropTypes.string,
@@ -69,6 +70,7 @@ const propTypes = {
   showScrollbar: PropTypes.bool
 };
 const defaultProps = {
+  ariaLabel: null,
   scrollerRef: null,
   innerContainerTagName: 'div',
   className: null,
@@ -121,6 +123,7 @@ class BpkMobileScrollContainer extends Component {
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];
     const {
+      ariaLabel,
       children,
       className,
       innerContainerTagName,
@@ -156,6 +159,7 @@ class BpkMobileScrollContainer extends Component {
         onScroll: this.setScrollIndicatorClassName,
         className: scrollerClassNames,
         children: /*#__PURE__*/_jsx(InnerContainer, {
+          "aria-label": ariaLabel,
           ref: el => {
             this.innerEl = el;
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.1.0",
+  "version": "33.3.0",
   "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": {