@skyscanner/backpack-web 41.15.0 → 41.15.2

package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts

@@ -24,7 +24,7 @@ interface CommonProps {
     onClose: (arg0?: TouchEvent | MouseEvent | KeyboardEvent | SyntheticEvent<HTMLDialogElement, Event>, arg1?: {
         source: 'ESCAPE' | 'DOCUMENT_CLICK';
     }) => void;
-    title?: string;
+    title?: string | ReactNode;
     wide?: boolean;
     isOpen: boolean;
     paddingStyles?: PaddingStyles;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, isValidElement, cloneElement } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
@@ -95,9 +95,16 @@ const BpkBottomSheet = ({
   }, [isAboveMobile, onClose]);
   const headingId = `bpk-bottom-sheet-heading-${id}`;
   const hiddenTitleId = `bpk-bottom-sheet-title-hidden-${id}`;
-  const showHiddenTitle = !title && 'ariaLabel' in ariaProps && ariaProps.ariaLabel;
+  const hasTitle = !!title;
+  const showHiddenTitle = !hasTitle && 'ariaLabel' in ariaProps && ariaProps.ariaLabel;
   const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
   const contentStyle = getContentStyles(paddingStyles);
+
+  // For custom title (ReactNode), wrap it with an element that has the correct id
+  // so BpkNavigationBar's aria-labelledby reference is valid
+  const titleWithId = hasTitle && typeof title !== 'string' && /*#__PURE__*/isValidElement(title) ? /*#__PURE__*/cloneElement(title, {
+    id: showHiddenTitle ? hiddenTitleId : headingId
+  }) : title;
   return /*#__PURE__*/_jsx(BpkDialogWrapper, {
     ...ariaProps,
     dialogClassName: dialogClassName,
@@ -122,9 +129,9 @@ const BpkBottomSheet = ({
         className: getClassName('bpk-bottom-sheet--header-wrapper'),
         children: [/*#__PURE__*/_jsx(BpkNavigationBar, {
           id: showHiddenTitle ? hiddenTitleId : headingId,
-          title: title,
+          title: titleWithId,
           titleTextStyle: TEXT_STYLES.label1,
-          titleTagName: title ? 'h2' : 'span',
+          titleTagName: hasTitle ? 'h2' : 'span',
           className: getClassName('bpk-bottom-sheet--header'),
           leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
             label: closeLabel,

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

@@ -42,7 +42,7 @@ const useLegacyWarning = (query, legacy, isClient) => useMemo(() => {
 const BpkBreakpoint = ({
   children,
   legacy = false,
-  matchSSR = false,
+  matchSSR,
   query
 }) => {
   /**
@@ -64,7 +64,7 @@ const BpkBreakpoint = ({
     return matches ? children : null;
   }
   if (typeof children === 'function') {
-    return children(matchSSR);
+    return children(!!matchSSR);
   }
   return matchSSR ? children : null;
 };

package/package.json

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