@skyscanner/backpack-web 34.10.1 → 34.12.0

package/bpk-component-accordion/src/BpkAccordion.js

@@ -38,7 +38,7 @@ const BpkAccordion = props => {
       onDark,
       divider
     },
-    children: /*#__PURE__*/_jsx("dl", {
+    children: /*#__PURE__*/_jsx("div", {
       className: classNames,
       ...rest,
       children: children

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -86,7 +86,7 @@ const BpkAccordionItem = props => {
     _jsxs("div", {
       id: id,
       ...rest,
-      children: [/*#__PURE__*/_jsx("dt", {
+      children: [/*#__PURE__*/_jsx("div", {
         className: titleClassNames.join(' '),
         children: /*#__PURE__*/_jsx("button", {
           type: "button",
@@ -109,7 +109,7 @@ const BpkAccordionItem = props => {
             })]
           })
         })
-      }), /*#__PURE__*/_jsx("dd", {
+      }), /*#__PURE__*/_jsx("div", {
         id: contentId,
         className: contentClassNames.join(' '),
         children: /*#__PURE__*/_jsx(AnimateHeight, {

package/bpk-component-carousel/src/utils.js

@@ -18,15 +18,25 @@
 
 import { useEffect, useMemo, useRef } from 'react';
 export function useScrollToInitialImage(initialImageIndex, imagesRef) {
-  useEffect(() => {
-    const element = imagesRef.current[initialImageIndex];
+  const handleIntersecting = index => {
+    const element = imagesRef.current[index];
     if (element) {
       element.scrollIntoView({
         block: 'nearest',
         inline: 'start'
       });
     }
-  }, [initialImageIndex, imagesRef]);
+  };
+  const observe = useIntersectionObserver(handleIntersecting, {
+    root: null,
+    threshold: 0.1
+  });
+  useEffect(() => {
+    const element = imagesRef.current[initialImageIndex];
+    if (element) {
+      observe(element);
+    }
+  }, [initialImageIndex, imagesRef, observe]);
 }
 export function useIntersectionObserver(onIntersecting, {
   root,

package/bpk-component-carousel/src/utils.test.js

@@ -0,0 +1,12 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useScrollToInitialImage } from "./utils";
+describe('useScrollToInitialImage', () => {
+  it('should scroll to initial image on mount', () => {
+    const imagesRef = {
+      current: [document.createElement('div'), document.createElement('div')]
+    };
+    const initialImageIndex = 0;
+    renderHook(() => useScrollToInitialImage(initialImageIndex, imagesRef));
+    expect(imagesRef.current[initialImageIndex].scrollIntoView).toHaveBeenCalledTimes(1);
+  });
+});

package/bpk-component-inset-banner/index.d.ts

@@ -0,0 +1,4 @@
+import BpkInsetBanner, { type Props as BpkInsetBannerProps, VARIANT } from './src/BpkInsetBanner';
+export type { BpkInsetBannerProps };
+export { VARIANT };
+export default BpkInsetBanner;

package/bpk-component-inset-banner/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 BpkInsetBanner, { VARIANT } from "./src/BpkInsetBanner";
+export { VARIANT };
+export default BpkInsetBanner;

package/bpk-component-inset-banner/src/BpkInsetBanner.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const VARIANT: {
+    onLight: string;
+    onDark: string;
+};
+export type Props = {
+    accessibilityLabel?: string;
+    backgroundColor?: string;
+    body?: {
+        text: string;
+        link?: string;
+        linkText?: string;
+    };
+    callToAction?: {
+        text?: string;
+    };
+    logo?: string;
+    subheadline?: string;
+    title?: string;
+    variant?: (typeof VARIANT)[keyof typeof VARIANT];
+};
+declare const BpkInsetBanner: ({ accessibilityLabel, backgroundColor, body, callToAction, logo, subheadline, title, variant, }: Props) => JSX.Element;
+export default BpkInsetBanner;

package/bpk-component-inset-banner/src/BpkInsetBanner.js

@@ -0,0 +1,86 @@
+/*
+ * 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 { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkInsetBanner.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const VARIANT = {
+  onLight: 'on-light',
+  onDark: 'on-dark'
+};
+const BpkInsetBanner = ({
+  accessibilityLabel,
+  backgroundColor = surfaceHighlightDay,
+  body,
+  callToAction,
+  logo,
+  subheadline,
+  title,
+  variant = VARIANT.onLight
+}) => {
+  const classNames = getClassName('bpk-inset-banner', `bpk-inset-banner--${variant}`, body && 'bpk-inset-banner--with-body');
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
+      "aria-label": accessibilityLabel,
+      className: classNames,
+      style: {
+        backgroundColor
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: getClassName('bpk-inset-banner--content-container'),
+        children: [logo && /*#__PURE__*/_jsx("img", {
+          className: getClassName('bpk-inset-banner--image'),
+          src: logo,
+          alt: "",
+          "aria-hidden": true
+        }), /*#__PURE__*/_jsxs("div", {
+          className: getClassName('bpk-inset-banner--text-container'),
+          children: [/*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.label2,
+            children: title
+          }), /*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.caption,
+            children: subheadline
+          })]
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-inset-banner--cta-container'),
+        children: callToAction?.text && /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.caption,
+          children: callToAction.text
+        })
+      })]
+    }), body && /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-inset-banner-body-container'),
+      children: [/*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.caption,
+        children: body.text
+      }), body.link && body.linkText && /*#__PURE__*/_jsx("a", {
+        href: body.link,
+        className: getClassName('bpk-inset-banner-body-container--link-text'),
+        children: /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.caption,
+          children: body.linkText
+        })
+      })]
+    })]
+  });
+};
+export default BpkInsetBanner;

package/bpk-component-inset-banner/src/BpkInsetBanner.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-inset-banner{display:flex;padding:.5rem 1rem;justify-content:space-between;border-radius:.5rem}.bpk-inset-banner--with-body{border-radius:.5rem .5rem 0 0}.bpk-inset-banner--on-light{color:#161616;fill:#161616}.bpk-inset-banner--on-dark{color:#fff;fill:#fff}.bpk-inset-banner--content-container{display:flex;align-items:center}.bpk-inset-banner--image{max-height:2rem;object-fit:contain;padding-inline-end:1rem}@media(max-width: 32rem){.bpk-inset-banner--image{max-height:1.5rem}}.bpk-inset-banner--text-container{display:flex;flex-direction:column}.bpk-inset-banner--cta-container{display:flex;align-items:center}.bpk-inset-banner-body-container{display:flex;padding:1rem;flex-direction:column;border-radius:0 0 .5rem .5rem;background-color:#eff3f8;color:#161616}.bpk-inset-banner-body-container--link-text{color:#0062e3;text-decoration:none}.bpk-no-touch-support .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}:global(.bpk-no-touch-support) .bpk-inset-banner-body-container--link-text:hover:not(:active):not(:disabled){color:#024daf}

package/bpk-component-map/src/BpkIconMarker.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#fff;color:var(--bpk-icon-marker-default-selected-color, rgb(255, 255, 255))}
+.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}html[dir=rtl] .bpk-icon-marker__icon{transform:scaleX(-1)}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#fff;color:var(--bpk-icon-marker-default-selected-color, rgb(255, 255, 255))}html[dir=rtl] .bpk-icon-marker__icon--selected{transform:scaleX(-1)}

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

@@ -94,25 +94,29 @@ class BpkMobileScrollContainer extends Component {
     this.setScrollIndicatorClassName();
   }, 100);
   setScrollIndicatorClassName = () => {
-    const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
-    if (!classNames) {
-      return;
-    }
-    this.setState(() => ({
-      scrollIndicatorClassName: classNames.join(' ')
-    }));
+    requestAnimationFrame(() => {
+      const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
+      if (!classNames) {
+        return;
+      }
+      this.setState(() => ({
+        scrollIndicatorClassName: classNames.join(' ')
+      }));
+    });
   };
   setScrollBarAwareHeight = () => {
     if (this.props.showScrollbar) {
       return;
     }
-    const computedHeight = computeScrollBarAwareHeight(this.scrollerEl, this.innerEl);
-    if (!computedHeight) {
-      return;
-    }
-    this.setState(() => ({
-      computedHeight
-    }));
+    requestAnimationFrame(() => {
+      const computedHeight = computeScrollBarAwareHeight(this.scrollerEl, this.innerEl);
+      if (!computedHeight) {
+        return;
+      }
+      this.setState(() => ({
+        computedHeight
+      }));
+    });
   };
   render() {
     const classNames = [getClassName('bpk-mobile-scroll-container')];

package/bpk-component-popover/src/BpkPopover.d.ts

@@ -31,6 +31,7 @@ export type Props = CloseButtonProps & {
     closeButtonLabel?: string;
     actionText?: string;
     onAction?: () => void;
+    renderTarget?: () => HTMLElement | HTMLElement | null;
 };
-declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, showArrow, target, ...rest }: Props) => JSX.Element;
+declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, renderTarget, showArrow, target, ...rest }: Props) => JSX.Element;
 export default BpkPopover;

package/bpk-component-popover/src/BpkPopover.js

@@ -61,6 +61,7 @@ const BpkPopover = ({
   onClose,
   padded = true,
   placement = 'bottom',
+  renderTarget = () => null,
   showArrow = true,
   target,
   ...rest
@@ -114,8 +115,10 @@ const BpkPopover = ({
   const classNames = getClassName('bpk-popover', className);
   const bodyClassNames = getClassName(padded && 'bpk-popover__body--padded');
   const labelId = `bpk-popover-label-${id}`;
+  const renderElement = typeof renderTarget === 'function' ? renderTarget() : renderTarget;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [targetElement, isOpenState && /*#__PURE__*/_jsx(FloatingPortal, {
+      root: renderElement,
       children: /*#__PURE__*/_jsx(FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/_jsx("div", {

package/bpk-component-segmented-control/src/BpkSegmentedControl.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:rgba(255,255,255,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-left:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-left:.0625rem solid rgba(255,255,255,.5)}.bpk-segmented-control[class*=rightOfOption]{border-left:none}
+.bpk-segmented-control-group{display:flex;flex-wrap:nowrap;overflow:hidden;border-radius:.5rem}.bpk-segmented-control-group-shadow{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-segmented-control{min-height:2rem;padding:.5rem 1rem;flex:1;border:none;text-overflow:ellipsis;cursor:pointer;overflow:hidden;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-segmented-control--canvas-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--canvas-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--canvas-contrast{background-color:#fff;color:#161616}.bpk-segmented-control--canvas-contrast-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-default{background-color:#eff3f8;color:#161616}.bpk-segmented-control--surface-default-selected{background-color:#05203c;color:#fff}.bpk-segmented-control--surface-contrast{background-color:rgba(255,255,255,.1);color:#fff}.bpk-segmented-control--surface-contrast-selected{background-color:#024daf;color:#fff}.bpk-segmented-control:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid #c1c7cf}.bpk-segmented-control--surface-contrast:not(:first-of-type,[class*=selected]){border-inline-start:.0625rem solid rgba(255,255,255,.5)}.bpk-segmented-control[class*=rightOfOption]{border-inline-start:none}

package/package.json

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