@skyscanner/backpack-web 34.10.0 → 34.11.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-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
@@ -93,15 +94,15 @@ const BpkPopover = ({
     getFloatingProps,
     getReferenceProps
   } = useInteractions([click, dismiss]);
-  const targetClick = target.props.onClick;
-  const referenceProps = getReferenceProps({
+  const targetClick = target?.props?.onClick;
+  const referenceProps = targetClick ? getReferenceProps({
     onClick: event => {
       if (targetClick) {
         event.stopPropagation();
         targetClick(event);
       }
     }
-  });
+  }) : getReferenceProps();
   const targetElement = /*#__PURE__*/isValidElement(target) ? ( /*#__PURE__*/cloneElement(target, {
     ...referenceProps,
     // @ts-ignore - we're adding a popover ref to the target element so we can position the popover relative to it
@@ -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/package.json

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