@skyscanner/backpack-web 42.0.0 → 42.1.0

package/bpk-component-checkbox-card/src/common-types.js

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+
+/**
+ * Variant types for visual presentation based on canvas/surface background
+ * - onCanvasDefault: For use on default/white backgrounds (selected: dark blue #05203C)
+ * - onCanvasContrast: For use on contrast/colored backgrounds (selected: dark blue #05203C)
+ * - onSurfaceContrast: For use on contrast surfaces (selected: accent blue #0062E3)
+ * - cars: For use in cars product context — same styling as onCanvasDefault but with
+ *   the corner Indicator automatically rendered (no need to add <BpkCheckboxCard.Indicator />)
+ */
+export const CHECKBOX_CARD_VARIANTS = {
+  onCanvasDefault: 'on-canvas-default',
+  onCanvasContrast: 'on-canvas-contrast',
+  onSurfaceContrast: 'on-surface-contrast',
+  cars: 'cars'
+};
+/**
+ * Radius types for border-radius
+ */
+export const CHECKBOX_CARD_RADIUS = {
+  square: 'square',
+  rounded: 'rounded'
+};
+
+/**
+ * Change handler signature for checkbox card
+ */

package/bpk-component-checkbox-card/src/themeAttributes.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Theme attributes for BpkCheckboxCard component.
+ *
+ * These attributes can be customized using BpkThemeProvider to override
+ * the default colors and styles of the checkbox card.
+ *
+ * Use `createCheckboxCardTheme` to build a partial theme — only specify
+ * the attributes you want to change; the rest fall back to design tokens.
+ *
+ * @example
+ * import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ * import {
+ *   BpkCheckboxCard,
+ *   CHECKBOX_CARD_THEME_ATTRIBUTES,
+ *   createCheckboxCardTheme,
+ * } from '@skyscanner/backpack-web/bpk-component-checkbox-card';
+ *
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedTextColor: '#111236',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ *
+ * <BpkThemeProvider theme={theme} themeAttributes={CHECKBOX_CARD_THEME_ATTRIBUTES}>
+ *   <BpkCheckboxCard.Root>
+ *     ...
+ *   </BpkCheckboxCard.Root>
+ * </BpkThemeProvider>
+ */
+declare const CHECKBOX_CARD_THEME_ATTRIBUTES: readonly ["checkboxCardDefaultBackgroundColor", "checkboxCardDefaultTextColor", "checkboxCardSecondaryTextColor", "checkboxCardHoverBackgroundColor", "checkboxCardDefaultBorderColor", "checkboxCardHoverBorderColor", "checkboxCardCheckedBackgroundColor", "checkboxCardCheckedTextColor", "checkboxCardCheckedBorderColor", "checkboxCardDisabledBackgroundColor", "checkboxCardDisabledTextColor", "checkboxCardIndicatorBackgroundColor", "checkboxCardIndicatorTextColor"];
+type CheckboxCardThemeKey = (typeof CHECKBOX_CARD_THEME_ATTRIBUTES)[number];
+type CheckboxCardTheme = Record<CheckboxCardThemeKey, string>;
+/**
+ * Creates a complete BpkCheckboxCard theme by merging your overrides with the
+ * default design-token values. Pass only the attributes you want to change.
+ *
+ * @example
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ */
+export declare function createCheckboxCardTheme(overrides?: Partial<CheckboxCardTheme>): CheckboxCardTheme;
+export default CHECKBOX_CARD_THEME_ATTRIBUTES;

package/bpk-component-checkbox-card/src/themeAttributes.js

@@ -0,0 +1,87 @@
+/*
+ * 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 { canvasDay, coreAccentDay, colorWhite, lineDay, surfaceContrastDay, surfaceLowContrastDay, textDisabledDay, textOnDarkDay, textPrimaryDay, textSecondaryDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+/**
+ * Theme attributes for BpkCheckboxCard component.
+ *
+ * These attributes can be customized using BpkThemeProvider to override
+ * the default colors and styles of the checkbox card.
+ *
+ * Use `createCheckboxCardTheme` to build a partial theme — only specify
+ * the attributes you want to change; the rest fall back to design tokens.
+ *
+ * @example
+ * import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+ * import {
+ *   BpkCheckboxCard,
+ *   CHECKBOX_CARD_THEME_ATTRIBUTES,
+ *   createCheckboxCardTheme,
+ * } from '@skyscanner/backpack-web/bpk-component-checkbox-card';
+ *
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedTextColor: '#111236',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ *
+ * <BpkThemeProvider theme={theme} themeAttributes={CHECKBOX_CARD_THEME_ATTRIBUTES}>
+ *   <BpkCheckboxCard.Root>
+ *     ...
+ *   </BpkCheckboxCard.Root>
+ * </BpkThemeProvider>
+ */
+const CHECKBOX_CARD_THEME_ATTRIBUTES = ['checkboxCardDefaultBackgroundColor', 'checkboxCardDefaultTextColor', 'checkboxCardSecondaryTextColor', 'checkboxCardHoverBackgroundColor', 'checkboxCardDefaultBorderColor', 'checkboxCardHoverBorderColor', 'checkboxCardCheckedBackgroundColor', 'checkboxCardCheckedTextColor', 'checkboxCardCheckedBorderColor', 'checkboxCardDisabledBackgroundColor', 'checkboxCardDisabledTextColor', 'checkboxCardIndicatorBackgroundColor', 'checkboxCardIndicatorTextColor'];
+/** Default theme values matching the SCSS token fallbacks */
+const CHECKBOX_CARD_DEFAULT_THEME = {
+  checkboxCardDefaultBackgroundColor: canvasDay,
+  checkboxCardDefaultTextColor: textPrimaryDay,
+  checkboxCardSecondaryTextColor: textSecondaryDay,
+  checkboxCardHoverBackgroundColor: surfaceLowContrastDay,
+  checkboxCardDefaultBorderColor: lineDay,
+  checkboxCardHoverBorderColor: lineDay,
+  checkboxCardCheckedBackgroundColor: surfaceContrastDay,
+  checkboxCardCheckedTextColor: textOnDarkDay,
+  checkboxCardCheckedBorderColor: 'transparent',
+  checkboxCardDisabledBackgroundColor: canvasDay,
+  checkboxCardDisabledTextColor: textDisabledDay,
+  checkboxCardIndicatorBackgroundColor: coreAccentDay,
+  checkboxCardIndicatorTextColor: colorWhite
+};
+
+/**
+ * Creates a complete BpkCheckboxCard theme by merging your overrides with the
+ * default design-token values. Pass only the attributes you want to change.
+ *
+ * @example
+ * const theme = createCheckboxCardTheme({
+ *   checkboxCardCheckedBackgroundColor: '#FFFFFF',
+ *   checkboxCardCheckedBorderColor: '#111236',
+ *   checkboxCardIndicatorBackgroundColor: '#111236',
+ * });
+ */
+
+export function createCheckboxCardTheme(overrides = {}) {
+  return {
+    ...CHECKBOX_CARD_DEFAULT_THEME,
+    ...overrides
+  };
+}
+export default CHECKBOX_CARD_THEME_ATTRIBUTES;

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

@@ -25,7 +25,7 @@ import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import BpkScrollableCalendarGrid from "./BpkScrollableCalendarGrid";
 import { getMonthsArray, getMonthItemHeights } from "./utils";
 import STYLES from "./BpkScrollableCalendarGridList.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 
 // These constants are here to facilitate calculating the height
@@ -46,6 +46,7 @@ const BpkScrollableCalendarGridList = props => {
     ...rest
   } = props;
   const listRef = useRef(null);
+  const sentinelRef = useRef(null);
   const startDate = startOfDay(startOfMonth(minDate));
   const endDate = startOfDay(startOfMonth(rest.maxDate));
   const monthsCount = DateUtils.differenceInCalendarMonths(endDate, startDate);
@@ -54,11 +55,13 @@ const BpkScrollableCalendarGridList = props => {
   const rowHeight = customRowHeight;
   // Most calendar grids have 5 rows. Calculate height in px as this is what react-window expects.
   const estimatedMonthItemHeight = (BASE_MONTH_ITEM_HEIGHT + 5 * rowHeight) * DEFAULT_ROOT_FONT_SIZE;
-  const getInitialRootFontSize = () => parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
 
   // The `react-window` API requires the height in pixels to be specified
   // To be able to scale text size, we use rem and then we get the root font size so that we can calculate the final value in px
-  const [rootFontSize, setRootFontSize] = useState(getInitialRootFontSize);
+  // Initialise to the default; the sentinel ResizeObserver corrects this to the true rendered
+  // value immediately on mount, so we never rely on getComputedStyle which can be stale under
+  // browser font scaling.
+  const [rootFontSize, setRootFontSize] = useState(DEFAULT_ROOT_FONT_SIZE);
   const months = useMemo(() => getMonthsArray(startDate, monthsCount), [minDate, monthsCount]);
   const monthItemHeights = useMemo(() => getMonthItemHeights(months, rest.weekStartsOn, COLUMN_COUNT, rowHeight * rootFontSize, BASE_MONTH_ITEM_HEIGHT * rootFontSize), [rootFontSize, months, rest.weekStartsOn]);
   useEffect(() => {
@@ -67,8 +70,35 @@ const BpkScrollableCalendarGridList = props => {
       listRef.current.resetAfterIndex(0);
     }
   }, [monthItemHeights]);
+  useEffect(() => {
+    // Some browsers apply font scaling at the rendering level without updating getComputedStyle.
+    // A sentinel element sized to 1rem lets us measure the true rendered px-per-rem directly,
+    // so that react-window item heights stay accurate regardless of browser font scaling.
+    const sentinel = sentinelRef.current;
+    if (!sentinel || typeof ResizeObserver === 'undefined') return undefined;
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        const newRootFontSize = entry.contentRect.width || DEFAULT_ROOT_FONT_SIZE;
+        setRootFontSize(newRootFontSize);
+      }
+    });
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, []);
   const getHtmlElement = () => typeof document !== 'undefined' ? document.querySelector('html') : {};
   const getItemSize = index => monthItemHeights[index] || estimatedMonthItemHeight;
+  const calculateOffsetInPixels = numberOfMonths => {
+    // The `react-window` API requires the scroll offset to be provided in pixels.
+    // Here we use the pre-calculated item heights to find the correct pixel offset
+    let result = 0;
+    for (let i = 0; i < numberOfMonths; i += 1) {
+      result += getItemSize(i);
+    }
+    return result;
+  };
+  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
+  const selectedDate = focusedDate || date;
   const rowRenderer = ({
     index,
     style
@@ -85,26 +115,14 @@ const BpkScrollableCalendarGridList = props => {
       "aria-hidden": index !== 1
     })
   });
-  const calculateOffsetInPixels = numberOfMonths => {
-    // The `react-window` API requires the scroll offset to be provided in pixels.
-    // Here we use the pre-calculated item heights to find the correct pixel offset
-    let result = 0;
-    for (let i = 0; i < numberOfMonths; i += 1) {
-      result += getItemSize(i);
-    }
-    return result;
-  };
-  const onResize = () => {
-    const newRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || DEFAULT_ROOT_FONT_SIZE;
-    setRootFontSize(newRootFontSize);
-  };
-  const date = selectionConfiguration?.type === CALENDAR_SELECTION_TYPE.single ? selectionConfiguration?.date : selectionConfiguration?.startDate;
-  const selectedDate = focusedDate || date;
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-scrollable-calendar-grid-list', className),
     ...getDataComponentAttribute('ScrollableCalendarGridList'),
-    children: /*#__PURE__*/_jsx(AutoSizer, {
-      onResize: onResize,
+    children: [/*#__PURE__*/_jsx("div", {
+      ref: sentinelRef,
+      className: getClassName('bpk-scrollable-calendar-grid-list__font-sentinel'),
+      "aria-hidden": "true"
+    }), /*#__PURE__*/_jsx(AutoSizer, {
       defaultHeight: estimatedMonthItemHeight,
       defaultWidth: ESTIMATED_MONTH_ITEM_WIDTH,
       children: ({
@@ -124,7 +142,7 @@ const BpkScrollableCalendarGridList = props => {
         ref: listRef,
         children: rowRenderer
       })
-    })
+    })]
   });
 };
 export default BpkScrollableCalendarGridList;

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}
+.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__font-sentinel{position:absolute;visibility:hidden;width:1rem;height:1rem;overflow:hidden;pointer-events:none}

package/package.json

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