@skyscanner/backpack-web 41.10.0-beta-v1 → 41.11.1-beta

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

@@ -17,7 +17,7 @@
  */
 
 import { createContext } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkAccordion.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -41,6 +41,7 @@ const BpkAccordion = props => {
     },
     children: /*#__PURE__*/_jsx("div", {
       className: classNames,
+      ...getDataComponentAttribute('Accordion'),
       ...rest,
       children: children
     })

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

@@ -22,7 +22,7 @@ import AnimateHeight from "../../bpk-animate-height";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
@@ -88,6 +88,7 @@ const BpkAccordionItem = props => {
     _jsxs("div", {
       id: id,
       className: itemClassNames.join(' '),
+      ...getDataComponentAttribute('AccordionItem'),
       ...rest,
       children: [/*#__PURE__*/_jsx("div", {
         className: titleClassNames.join(' '),

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkAriaLive.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -35,6 +35,7 @@ const BpkAriaLive = ({
   return /*#__PURE__*/_jsx("div", {
     "aria-live": politenessSetting,
     className: classNames,
+    ...getDataComponentAttribute('AriaLive'),
     ...rest
   });
 };

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js

@@ -21,7 +21,7 @@ import { useFloating, offset, shift, size, arrow as floatingArrow, FloatingArrow
 import { useCombobox } from 'downshift';
 import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkInput from "../../../bpk-component-input";
-import { cssModules } from "../../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -536,6 +536,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/_jsxs("div", {
     ref: containerWrapperRef,
     className: getClassName(theme.container, suggestionsCount && theme.containerOpen),
+    ...getDataComponentAttribute('Autosuggest'),
     children: [renderInput(), showSuggestions && (isDesktop ? /*#__PURE__*/_jsx(FloatingPortal, {
       children: /*#__PURE__*/_jsxs("div", {
         ref: refs.setFloating,

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

@@ -23,9 +23,10 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import BpkLink from "../../bpk-component-link";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
 import { BpkDialogWrapper, cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkBottomSheet.module.css";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 export const PADDING_TYPE = {
   none: 'none',
@@ -93,6 +94,8 @@ const BpkBottomSheet = ({
     }, timeoutDuration);
   }, [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 dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
   const contentStyle = getContentStyles(paddingStyles);
   return /*#__PURE__*/_jsx(BpkDialogWrapper, {
@@ -115,10 +118,10 @@ const BpkBottomSheet = ({
     },
     ...getDataComponentAttribute('BottomSheet'),
     children: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx("header", {
+      children: [/*#__PURE__*/_jsxs("header", {
         className: getClassName('bpk-bottom-sheet--header-wrapper'),
-        children: /*#__PURE__*/_jsx(BpkNavigationBar, {
-          id: headingId,
+        children: [/*#__PURE__*/_jsx(BpkNavigationBar, {
+          id: showHiddenTitle ? hiddenTitleId : headingId,
           title: title,
           titleTextStyle: TEXT_STYLES.label1,
           titleTagName: title ? 'h2' : 'span',
@@ -132,7 +135,13 @@ const BpkBottomSheet = ({
             onClick: onAction,
             children: actionText
           }) : null
-        })
+        }), showHiddenTitle && /*#__PURE__*/_jsx(BpkVisuallyHidden, {
+          as: "h2",
+          children: /*#__PURE__*/_jsx("span", {
+            id: hiddenTitleId,
+            children: ariaProps.ariaLabel
+          })
+        })]
       }), /*#__PURE__*/_jsx("div", {
         className: contentStyle,
         children: children

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/bpk-component-breakpoint/src/useMediaQuery.js

@@ -17,28 +17,41 @@
  */
 
 import { useEffect, useState } from 'react';
-const useMediaQuery = (query, matchSSR = false) => {
+const useMediaQuery = (query, matchSSR) => {
   const isClient = typeof window !== 'undefined' && !!window.matchMedia;
+
+  // When matchSSR is provided, we need hydration protection
+  const needsHydrationProtection = matchSSR !== undefined;
+  const [isHydrated, setIsHydrated] = useState(!needsHydrationProtection);
   const [matches, setMatches] = useState(() => {
-    // When matchSSR=true: use matchSSR value to match server-rendered HTML
-    // This prevents hydration errors when User-Agent (server) != viewport size (client)
-    if (!isClient || matchSSR) {
+    if (!isClient) {
+      return matchSSR ?? false;
+    }
+    if (needsHydrationProtection) {
       return matchSSR;
     }
     return window.matchMedia(query).matches;
   });
+
+  // Mark hydration as complete
   useEffect(() => {
-    if (isClient) {
-      const media = window.matchMedia(query);
-      setMatches(media.matches);
-      const listener = () => {
-        setMatches(media.matches);
-      };
-      media.addEventListener('change', listener);
-      return () => media.removeEventListener('change', listener);
+    if (needsHydrationProtection && !isHydrated) {
+      setIsHydrated(true);
     }
-    return () => {};
-  }, [query, isClient]);
+  }, [needsHydrationProtection, isHydrated]);
+  useEffect(() => {
+    // Wait for hydration to complete
+    if (!isClient || !isHydrated) {
+      return () => {};
+    }
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [query, isClient, isHydrated]);
   return matches;
 };
 export default useMediaQuery;

package/bpk-component-bubble/src/BpkBubble.js

@@ -17,7 +17,7 @@
  */
 
 import BpkText, { TEXT_COLORS, TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBubbleArrow from "../icons/BpkBubbleArrow";
 import STYLES from "./BpkBubble.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,6 +26,7 @@ const BpkBubble = ({
   children
 }) => /*#__PURE__*/_jsxs("span", {
   className: getClassName('bpk-bubble'),
+  ...getDataComponentAttribute('Bubble'),
   children: [/*#__PURE__*/_jsx(BpkText, {
     textStyle: TEXT_STYLES.label3,
     tagName: "span",

package/bpk-component-calendar/src/BpkCalendarDate.js

@@ -17,7 +17,7 @@
  */
 
 import { PureComponent } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkCalendarDate.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -125,6 +125,7 @@ class BpkCalendarDate extends PureComponent {
       type: "button",
       style: style,
       className: classNames.join(' '),
+      ...getDataComponentAttribute('CalendarDate'),
       "aria-label": `${date.getDate()}`,
       disabled: isBlocked,
       tabIndex: isKeyboardFocusable && isFocused ? 0 : -1,

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -17,7 +17,7 @@
  */
 
 import { Component } from 'react';
-import { cssModules, isDeviceIos } from "../../bpk-react-utils";
+import { cssModules, isDeviceIos, getDataComponentAttribute } from "../../bpk-react-utils";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
@@ -105,6 +105,7 @@ class BpkCalendarGrid extends Component {
     const classNames = getClassName('bpk-calendar-grid', className);
     return /*#__PURE__*/_jsx("div", {
       className: classNames,
+      ...getDataComponentAttribute('CalendarGrid'),
       "aria-hidden": !isKeyboardFocusable,
       role: "grid",
       "aria-label": formatMonth(month),

package/bpk-component-calendar/src/BpkCalendarGridHeader.js

@@ -17,7 +17,7 @@
  */
 
 import { PureComponent } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { orderDaysOfWeek } from "./date-utils";
 import STYLES from "./BpkCalendarGridHeader.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -57,6 +57,7 @@ class BpkCalendarGridHeader extends PureComponent {
     }
     return /*#__PURE__*/_jsx("header", {
       className: classNames.join(' '),
+      ...getDataComponentAttribute('CalendarGridHeader'),
       "aria-hidden": true,
       children: /*#__PURE__*/_jsx("ol", {
         className: getClassName('bpk-calendar-header__week'),

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

@@ -17,7 +17,7 @@
  */
 
 import { Component, createElement as _createElement } from 'react';
-import { cssModules, isRTL } from "../../bpk-react-utils";
+import { cssModules, isRTL, getDataComponentAttribute } from "../../bpk-react-utils";
 import { addMonths, isSameMonth, formatIsoMonth, differenceInCalendarMonths, dateToBoundaries, startOfDay, setMonthYear, isWithinRange, getMonthRange } from "./date-utils";
 import { getCalendarGridWidth, getTransformStyles, isTransitionEndSupported } from "./utils";
 import STYLES from "./BpkCalendarGridTransition.module.css";
@@ -132,6 +132,7 @@ class BpkCalendarGridTransition extends Component {
         className: stripClassNames,
         style: getTransformStyles(transitionValue),
         onTransitionEnd: this.onMonthTransitionEnd,
+        ...getDataComponentAttribute('CalendarGridTransition'),
         children: this.state.months.map((m, index) => min && max && isWithinRange(m, {
           start: min,
           end: max

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -22,7 +22,7 @@ import ArrowLeftIcon from "../../bpk-component-icon/lg/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/lg/arrow-right";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { addMonths, formatIsoMonth, getMonthRange, getMonthsInRange, isWithinRange, parseIsoDate, startOfMonth } from "./date-utils";
 import STYLES from "./BpkCalendarNav.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -69,6 +69,7 @@ const BpkCalendarNav = ({
   const nextMonth = addMonths(baseMonth, 1);
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-calendar-nav'),
+    ...getDataComponentAttribute('CalendarNav'),
     children: /*#__PURE__*/_jsxs("div", {
       style: {
         display: 'table-row'

package/bpk-component-calendar/src/BpkCalendarWeek.js

@@ -17,7 +17,7 @@
  */
 
 import { Component } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { SELECTION_TYPES } from "./BpkCalendarDate";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
@@ -267,6 +267,7 @@ class BpkCalendarWeek extends Component {
     }
     return /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-calendar-week'),
+      ...getDataComponentAttribute('CalendarWeek'),
       role: "row",
       children: this.props.dates.map(date => {
         const isBlocked = minDate && maxDate ? !isWithinRange(date.val, {

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -23,7 +23,7 @@ accessory view of a close icon.
 */
 import { chipColors } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import CloseCircleIconSm from "../../bpk-component-icon/sm/close-circle";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
@@ -48,7 +48,8 @@ const BpkDismissibleChip = ({
     type: type,
     role: "button" // Override role="checkbox" because this chip is not selectable.
     ,
-    className: classNames
+    className: classNames,
+    ...getDataComponentAttribute('DismissibleChip')
   });
 };
 export default BpkDismissibleChip;

package/bpk-component-chip/src/BpkDropdownChip.js

@@ -22,6 +22,7 @@ with a trailing accessory view of a chevron down icon.
 */
 
 import ChevronDownIconSm from "../../bpk-component-icon/sm/chevron-down";
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -36,6 +37,7 @@ const BpkDropdownChip = ({
   leadingAccessoryView: leadingAccessoryView,
   selected: selected,
   type: type,
+  ...getDataComponentAttribute('DropdownChip'),
   ...rest,
   trailingAccessoryView: /*#__PURE__*/_jsx(ChevronDownIconSm, {})
 });

package/bpk-component-chip/src/BpkIconChip.js

@@ -22,9 +22,11 @@ been hard coded to have no text or trailing icon and padding/margin
 to match.
 */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { jsx as _jsx } from "react/jsx-runtime";
 const BpkIconChip = props => /*#__PURE__*/_jsx(BpkSelectableChip, {
+  ...getDataComponentAttribute('IconChip'),
   ...props,
   children: null
 });

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -17,7 +17,7 @@
  */
 
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,6 +39,7 @@ const BpkSelectableChip = ({
   return /*#__PURE__*/_jsxs("button", {
     "aria-checked": role === 'button' || role === 'tab' ? undefined : selected,
     className: classNames,
+    ...getDataComponentAttribute('SelectableChip'),
     disabled: disabled,
     role: role,
     title: accessibilityLabel,

package/bpk-component-chip-group/src/BpkMultiSelectChipGroup.js

@@ -22,7 +22,7 @@ import BpkSelectableChip, { BpkDismissibleChip, BpkIconChip, BpkDropdownChip, CH
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import BpkVisuallyHidden from "../../bpk-component-visually-hidden";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkStickyChip from "./BpkStickyChip";
 import Nudger, { POSITION } from "./Nudger";
 import STYLES from "./BpkChipGroup.module.css";
@@ -164,6 +164,7 @@ const WrapChipGroup = ({
 });
 const BpkMultiSelectChipGroup = props => /*#__PURE__*/_jsx("div", {
   className: getClassName('bpk-chip-group-container'),
+  ...getDataComponentAttribute('MultiSelectChipGroup'),
   children: props.type === CHIP_GROUP_TYPES.rail ? /*#__PURE__*/_jsx(RailChipGroup, {
     ...props
   }) : /*#__PURE__*/_jsx(WrapChipGroup, {

package/bpk-component-chip-group/src/BpkStickyChip.js

@@ -25,7 +25,7 @@ import { useEffect, useState } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 import BpkSelectableChip from "../../bpk-component-chip";
 import FilterIconSm from "../../bpk-component-icon/sm/filter";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkStickyChip.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -52,6 +52,7 @@ const BpkStickyChip = ({
   const containerClassNames = getClassName('bpk-sticky-chip-container', `bpk-sticky-chip-container--${chipStyle}`);
   return /*#__PURE__*/_jsx("div", {
     className: containerClassNames,
+    ...getDataComponentAttribute('StickyChip'),
     children: /*#__PURE__*/_jsx(BpkBreakpoint, {
       query: BREAKPOINTS.ABOVE_TABLET,
       children: isDesktop => {

package/bpk-component-map/src/BpkBasicMapMarker.js

@@ -17,6 +17,8 @@
  */
 
 import PropTypes from 'prop-types';
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkOverlayView from "./BpkOverlayView";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -35,6 +37,7 @@ const BpkBasicMapMarker = props => {
   return /*#__PURE__*/_jsx(BpkOverlayView, {
     position: position,
     getPixelPositionOffset: getPixelPositionOffset,
+    ...getDataComponentAttribute('BasicMapMarker'),
     ...rest,
     children: children
   });

package/bpk-component-map/src/BpkPriceMarker.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import { getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkBasicMapMarker from "./BpkBasicMapMarker";
 import BpkPriceMarkerButton, { MARKER_STATUSES } from "./BpkPriceMarkerButton";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,6 +43,7 @@ const BpkPriceMarker = props => {
   return /*#__PURE__*/_jsx(BpkBasicMapMarker, {
     position: position,
     "aria-label": accessibilityLabel,
+    ...getDataComponentAttribute('PriceMarker'),
     ...rest,
     children: /*#__PURE__*/_jsx(BpkPriceMarkerButton, {
       ...allButtonProps

package/bpk-component-price-range/src/BpkPriceMarker.js

@@ -18,7 +18,7 @@
 
 import { forwardRef } from 'react';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkPriceMarker.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -28,6 +28,7 @@ const BpkPriceMarker = ({
 }, ref) => /*#__PURE__*/_jsxs("div", {
   className: getClassName('bpk-price-marker', `bpk-price-marker--${type}`),
   ref: ref,
+  ...getDataComponentAttribute('PriceMarker'),
   children: [/*#__PURE__*/_jsx(BpkText, {
     textStyle: TEXT_STYLES.label2,
     children: priceLabel

package/bpk-component-price-range/src/BpkPriceRange.js

@@ -19,7 +19,7 @@
 import { useEffect, useRef, useState } from 'react';
 import clamp from 'lodash/clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkPriceMarker from "./BpkPriceMarker";
 import { MARKER_DISPLAY_TYPES, MARKER_TYPES } from "./common-types";
 import STYLES from "./BpkPriceRange.module.css";
@@ -102,6 +102,7 @@ const BpkPriceRange = ({
     },
     className: getClassName('bpk-price-range', shouldShowPriceOnBoundaries && 'bpk-price-range--large'),
     ref: linesRef,
+    ...getDataComponentAttribute('PriceRange'),
     children: [shouldShowBubble && /*#__PURE__*/_jsx("div", {
       className: getClassName('bpk-price-range__marker'),
       children: /*#__PURE__*/_jsx(BpkPriceMarker, {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -18,7 +18,7 @@
 
 import { BpkCalendarGrid } from "../../bpk-component-calendar";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkScrollableCalendarGrid.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -32,6 +32,7 @@ const BpkScrollableCalendarGrid = ({
   const classNames = getClassName('bpk-scrollable-calendar-grid', className);
   return /*#__PURE__*/_jsxs("div", {
     className: classNames,
+    ...getDataComponentAttribute('ScrollableCalendarGrid'),
     children: [/*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
       children: /*#__PURE__*/_jsx(BpkText, {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -21,7 +21,7 @@ import { startOfDay, startOfMonth } from 'date-fns';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import { CALENDAR_SELECTION_TYPE, DateUtils } from "../../bpk-component-calendar";
-import { cssModules } from "../../bpk-react-utils";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
@@ -102,6 +102,7 @@ const BpkScrollableCalendarGridList = props => {
   const selectedDate = focusedDate || date;
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
+    ...getDataComponentAttribute('ScrollableCalendarGridList'),
     children: /*#__PURE__*/_jsx(AutoSizer, {
       onResize: onResize,
       defaultHeight: estimatedMonthItemHeight,

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -25,7 +25,7 @@ The actual component that developers create (i.e. the default export from this p
 import { cloneElement, useRef, useState, useEffect } from 'react';
 import { arrow, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useFloating, useFocus, useHover, useInteractions, useRole } from '@floating-ui/react';
 import { surfaceHighlightDay, onePixelRem } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { TransitionInitialMount, cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -118,6 +118,7 @@ const BpkTooltip = ({
             tabIndex: -1,
             role: "dialog",
             className: classNames,
+            ...getDataComponentAttribute('Tooltip'),
             ...rest,
             children: [/*#__PURE__*/_jsx(FloatingArrow, {
               ref: arrowRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.10.0-beta-v1",
+  "version": "41.11.1-beta",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,7 +22,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@chakra-ui/react": "^3.30.0",
     "@floating-ui/react": "^0.26.12",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-compose-refs": "^1.1.1",

package/bpk-component-layout/index.d.ts

@@ -1,18 +0,0 @@
-export { BpkProvider } from './src/BpkProvider';
-export { BpkBox } from './src/BpkBox';
-export { BpkVessel } from './src/BpkVessel';
-export { BpkFlex } from './src/BpkFlex';
-export { BpkGrid } from './src/BpkGrid';
-export { BpkGridItem } from './src/BpkGridItem';
-export type { BpkProviderProps } from './src/BpkProvider';
-export type { BpkBoxProps } from './src/BpkBox';
-export type { BpkVesselProps } from './src/BpkVessel';
-export type { BpkFlexProps } from './src/BpkFlex';
-export type { BpkGridProps } from './src/BpkGrid';
-export type { BpkGridItemProps } from './src/BpkGridItem';
-export { BpkStack, BpkHStack, BpkVStack } from './src/BpkStack';
-export type { BpkStackProps } from './src/BpkStack';
-export type { BpkCommonLayoutProps, BpkBoxSpecificProps, BpkFlexSpecificProps, BpkGridSpecificProps, BpkGridItemSpecificProps, } from './src/types';
-export type { BpkStackSpecificProps } from './src/types';
-export type { BpkSpacingToken, BpkBreakpointToken, BpkSpacingValue, BpkBreakpointValue, } from './src/tokens';
-export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage, } from './src/tokens';

package/bpk-component-layout/index.js

@@ -1,29 +0,0 @@
-/*
- * 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.
- */
-
-export { BpkProvider } from "./src/BpkProvider";
-export { BpkBox } from "./src/BpkBox";
-export { BpkVessel } from "./src/BpkVessel";
-export { BpkFlex } from "./src/BpkFlex";
-export { BpkGrid } from "./src/BpkGrid";
-export { BpkGridItem } from "./src/BpkGridItem";
-export { BpkStack, BpkHStack, BpkVStack } from "./src/BpkStack";
-
-// Export token types and utilities
-
-export { BpkSpacing, BpkBreakpoint, isValidSpacingValue, isPercentage } from "./src/tokens";

package/bpk-component-layout/src/BpkBox.d.ts

@@ -1,3 +0,0 @@
-import type { BpkBoxProps } from './types';
-export declare const BpkBox: ({ children, ...props }: BpkBoxProps) => import("react/jsx-runtime").JSX.Element;
-export type { BpkBoxProps };