@skyscanner/backpack-web 41.5.0 → 41.7.0-beta-layout

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

@@ -19,7 +19,14 @@
 import { useEffect, useState } from 'react';
 const useMediaQuery = (query, matchSSR = false) => {
   const isClient = typeof window !== 'undefined' && !!window.matchMedia;
-  const [matches, setMatches] = useState(isClient ? window.matchMedia(query).matches : matchSSR);
+  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) {
+      return matchSSR;
+    }
+    return window.matchMedia(query).matches;
+  });
   useEffect(() => {
     if (isClient) {
       const media = window.matchMedia(query);

package/bpk-component-slider/src/BpkSlider.js

@@ -15,13 +15,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { forwardRef, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect, useCallback } from 'react';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as Slider from '@radix-ui/react-slider';
 import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+
+// Pure utility function to normalize slider values for callbacks
+// Returns single number for single-thumb slider, array for range slider
+const processSliderValues = (sliderValues, callback) => {
+  const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
+  if (callback) {
+    callback(val);
+  }
+};
 const BpkSlider = ({
   ariaLabel,
   ariaValuetext,
@@ -37,19 +46,72 @@ const BpkSlider = ({
 }) => {
   const invert = isRTL();
   const currentValue = Array.isArray(value) ? value : [value];
-  const processSliderValues = (sliderValues, callback) => {
-    const val = sliderValues.length === 1 ? sliderValues[0] : sliderValues;
-    if (callback) {
-      callback(val);
+
+  // Track the latest value and callback for the Chrome workaround
+  // Using refs to avoid re-registering document event listeners when these change
+  const latestValueRef = useRef(currentValue);
+  const onAfterChangeRef = useRef(onAfterChange);
+  const isDraggingRef = useRef(false);
+  const hasCommittedRef = useRef(false);
+  // Store cleanup function to prevent memory leaks if component unmounts during drag
+  const cleanupRef = useRef(null);
+
+  // Keep refs updated
+  useEffect(() => {
+    latestValueRef.current = currentValue;
+  }, [currentValue]);
+  useEffect(() => {
+    onAfterChangeRef.current = onAfterChange;
+  }, [onAfterChange]);
+
+  // Cleanup on unmount to prevent memory leaks
+  useEffect(() => () => {
+    if (cleanupRef.current) {
+      cleanupRef.current();
     }
-  };
+  }, []);
   const thumbRefs = [useRef(null), useRef(null)];
-  const handleOnChange = sliderValues => {
+  const handleOnChange = useCallback(sliderValues => {
+    latestValueRef.current = sliderValues;
     processSliderValues(sliderValues, onChange);
-  };
-  const handleOnAfterChange = sliderValues => {
+  }, [onChange]);
+  const handleOnAfterChange = useCallback(sliderValues => {
+    hasCommittedRef.current = true;
+    isDraggingRef.current = false;
     processSliderValues(sliderValues, onAfterChange);
-  };
+  }, [onAfterChange]);
+
+  // Chrome workaround: Listen for pointerup/pointercancel on document as safety net
+  // This ensures onAfterChange fires even when Radix's onValueCommit doesn't
+  // See: https://github.com/radix-ui/primitives/issues/1760
+  const handlePointerDown = useCallback(() => {
+    // Clean up any previous listener still hanging around (edge case)
+    if (cleanupRef.current) {
+      cleanupRef.current();
+    }
+    isDraggingRef.current = true;
+    hasCommittedRef.current = false;
+    const handlePointerEnd = () => {
+      document.removeEventListener('pointerup', handlePointerEnd);
+      document.removeEventListener('pointercancel', handlePointerEnd);
+      cleanupRef.current = null;
+
+      // Use requestAnimationFrame to defer the check, allowing Radix's onValueCommit
+      // to fire first and set hasCommittedRef.current = true. This prevents the race
+      // condition where both handlers could fire onAfterChange for the same interaction.
+      requestAnimationFrame(() => {
+        if (isDraggingRef.current && !hasCommittedRef.current && onAfterChangeRef.current) {
+          // Radix didn't fire onValueCommit, so we fire it manually
+          processSliderValues(latestValueRef.current, onAfterChangeRef.current);
+        }
+        isDraggingRef.current = false;
+        hasCommittedRef.current = false;
+      });
+    };
+    cleanupRef.current = handlePointerEnd;
+    document.addEventListener('pointerup', handlePointerEnd);
+    document.addEventListener('pointercancel', handlePointerEnd);
+  }, []);
   return /*#__PURE__*/_jsxs(Slider.Root, {
     className: getClassName('bpk-slider'),
     defaultValue: currentValue,
@@ -58,6 +120,7 @@ const BpkSlider = ({
     step: step || 1,
     onValueChange: handleOnChange,
     onValueCommit: handleOnAfterChange,
+    onPointerDown: handlePointerDown,
     inverted: invert,
     minStepsBetweenThumbs: minDistance,
     ...rest,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.5.0",
+  "version": "41.7.0-beta-layout",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",