@nok-integration/storefront-react 0.19.26 → 0.19.27

package/dist/index.d.ts

@@ -3537,11 +3537,23 @@ export declare interface Market {
  * Swipeable image gallery with dot indicators. Reduced-motion aware (smooth-scroll is
  * disabled globally under prefers-reduced-motion). Keyboard: dots are real buttons.
  */
-export declare function MediaGallery({ media, alt }: MediaGalleryProps): JSX.Element;
+export declare function MediaGallery({ media, alt, focus }: MediaGalleryProps): JSX.Element;
 
 export declare interface MediaGalleryProps {
     media: string[];
     alt: string;
+    /**
+     * Jump to this slide whenever the value changes.
+     *
+     * How the PDP's colour tiles move the gallery: the set of images does not change when a
+     * colour is picked, so the gallery is not rebuilt and nothing is hidden — it simply
+     * lands on the shot of the colour that was chosen.
+     *
+     * Instant rather than animated, deliberately. Animating means scrolling THROUGH the
+     * other colourways' photographs to reach the chosen one, so picking White would sweep
+     * past the black shirts on the way. That is the very thing this is here to stop.
+     */
+    focus?: number;
 }
 
 export declare function minorUnitExponent(currency: string): number;

package/dist/index.mjs

@@ -9316,7 +9316,7 @@ const styles$i = {
   dot: dot$2,
   dotActive: dotActive$2
 };
-function MediaGallery({ media: media2, alt }) {
+function MediaGallery({ media: media2, alt, focus }) {
   const t = useT();
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
@@ -9339,6 +9339,13 @@ function MediaGallery({ media: media2, alt }) {
     track2.scrollLeft = 0;
     setActive(0);
   }, [mediaKey]);
+  useEffect(() => {
+    if (focus === void 0 || focus < 0) return;
+    const track2 = trackRef.current;
+    if (!track2) return;
+    track2.scrollLeft = focus * track2.clientWidth;
+    setActive(focus);
+  }, [focus]);
   function goTo(index) {
     const track2 = trackRef.current;
     if (!track2) return;
@@ -10037,14 +10044,15 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const colourSoldOut = hasColours && selectedColour ? !colours.find((c) => c.value === selectedColour)?.available : false;
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
-  const shootColour = baseColours[0]?.value;
   const media2 = useMemo(() => {
-    if (!colourImage) return product.media;
-    if (selectedColour === shootColour) {
-      return [colourImage, ...product.media.filter((m) => m !== colourImage)];
-    }
-    return [colourImage];
-  }, [colourImage, product.media, selectedColour, shootColour]);
+    const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
+    return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
+  }, [baseColours, product.media]);
+  const focus = useMemo(() => {
+    if (!colourImage) return void 0;
+    const at = media2.indexOf(colourImage);
+    return at >= 0 ? at : void 0;
+  }, [colourImage, media2]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);
@@ -10191,7 +10199,10 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     className: styles$a.page,
     children: [jsx(MediaGallery, {
       media: media2,
-      alt: product.title
+      alt: product.title,
+      ...focus !== void 0 ? {
+        focus
+      } : {}
     }), jsxs("div", {
       className: styles$a.content,
       children: [jsxs("div", {

package/dist/standalone/storefront.mjs

@@ -9316,7 +9316,7 @@ const styles$i = {
   dot: dot$2,
   dotActive: dotActive$2
 };
-function MediaGallery({ media: media2, alt }) {
+function MediaGallery({ media: media2, alt, focus }) {
   const t = useT();
   const trackRef = useRef(null);
   const [active, setActive] = useState(0);
@@ -9339,6 +9339,13 @@ function MediaGallery({ media: media2, alt }) {
     track2.scrollLeft = 0;
     setActive(0);
   }, [mediaKey]);
+  useEffect(() => {
+    if (focus === void 0 || focus < 0) return;
+    const track2 = trackRef.current;
+    if (!track2) return;
+    track2.scrollLeft = focus * track2.clientWidth;
+    setActive(focus);
+  }, [focus]);
   function goTo(index) {
     const track2 = trackRef.current;
     if (!track2) return;
@@ -10037,14 +10044,15 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
   const colourSoldOut = hasColours && selectedColour ? !colours.find((c) => c.value === selectedColour)?.available : false;
   const purchasable = anyInStock && !colourSoldOut;
   const colourImage = useMemo(() => selectedColour ? baseColours.find((c) => c.value === selectedColour)?.image : void 0, [baseColours, selectedColour]);
-  const shootColour = baseColours[0]?.value;
   const media2 = useMemo(() => {
-    if (!colourImage) return product.media;
-    if (selectedColour === shootColour) {
-      return [colourImage, ...product.media.filter((m) => m !== colourImage)];
-    }
-    return [colourImage];
-  }, [colourImage, product.media, selectedColour, shootColour]);
+    const swatches2 = baseColours.map((c) => c.image).filter((src) => typeof src === "string" && src.length > 0);
+    return [...swatches2, ...product.media.filter((m) => !swatches2.includes(m))];
+  }, [baseColours, product.media]);
+  const focus = useMemo(() => {
+    if (!colourImage) return void 0;
+    const at = media2.indexOf(colourImage);
+    return at >= 0 ? at : void 0;
+  }, [colourImage, media2]);
   function selectSize(value2) {
     setSelectedSize(value2);
     setSizeError(false);
@@ -10191,7 +10199,10 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [] })
     className: styles$a.page,
     children: [jsx(MediaGallery, {
       media: media2,
-      alt: product.title
+      alt: product.title,
+      ...focus !== void 0 ? {
+        focus
+      } : {}
     }), jsxs("div", {
       className: styles$a.content,
       children: [jsxs("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.26",
+  "version": "0.19.27",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "publishConfig": {