@nok-integration/storefront-react 0.19.26 → 0.19.28

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

@@ -7094,6 +7094,21 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     }));
     if (items2.length > 0) onSubmit(items2);
   }
+  if (returnable.length === 0) {
+    return jsx("div", {
+      className: styles$B.page,
+      children: jsxs("div", {
+        className: styles$B.titles,
+        children: [jsx("h1", {
+          className: styles$B.title,
+          children: "Nothing left to return"
+        }), jsx("p", {
+          className: styles$B.subtitle,
+          children: "Every item on this order has already been returned or cancelled."
+        })]
+      })
+    });
+  }
   return jsxs("div", {
     className: styles$B.page,
     children: [jsxs("div", {
@@ -9298,14 +9313,14 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_nv2a9_1";
-const track$2 = "_track_nv2a9_8";
-const slide$1 = "_slide_nv2a9_32";
-const image$4 = "_image_nv2a9_39";
-const placeholder$1 = "_placeholder_nv2a9_43";
-const dots$2 = "_dots_nv2a9_49";
-const dot$2 = "_dot_nv2a9_49";
-const dotActive$2 = "_dotActive_nv2a9_88";
+const gallery = "_gallery_16d26_1";
+const track$2 = "_track_16d26_5";
+const slide$1 = "_slide_16d26_29";
+const image$4 = "_image_16d26_36";
+const placeholder$1 = "_placeholder_16d26_40";
+const dots$2 = "_dots_16d26_58";
+const dot$2 = "_dot_16d26_58";
+const dotActive$2 = "_dotActive_16d26_109";
 const styles$i = {
   gallery,
   track: track$2,
@@ -9316,7 +9331,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 +9354,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 +10059,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 +10214,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", {
@@ -10521,12 +10547,12 @@ function ExploreList({ title: title2, links }) {
     })]
   });
 }
-const pcp = "_pcp_6gy3c_6";
-const blocks = "_blocks_6gy3c_25";
-const featured = "_featured_6gy3c_38";
-const gridBlock = "_gridBlock_6gy3c_39";
-const blockTitle = "_blockTitle_6gy3c_46";
-const grid = "_grid_6gy3c_39";
+const pcp = "_pcp_yu17f_6";
+const blocks = "_blocks_yu17f_25";
+const featured = "_featured_yu17f_38";
+const gridBlock = "_gridBlock_yu17f_39";
+const blockTitle = "_blockTitle_yu17f_46";
+const grid = "_grid_yu17f_39";
 const styles$3 = {
   pcp,
   blocks,
@@ -11547,4 +11573,4 @@ export {
   useToast,
   variantLabel
 };
-//# sourceMappingURL=index.mjs.map
+

package/dist/standalone/storefront.mjs

@@ -7094,6 +7094,21 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
     }));
     if (items2.length > 0) onSubmit(items2);
   }
+  if (returnable.length === 0) {
+    return jsx("div", {
+      className: styles$B.page,
+      children: jsxs("div", {
+        className: styles$B.titles,
+        children: [jsx("h1", {
+          className: styles$B.title,
+          children: "Nothing left to return"
+        }), jsx("p", {
+          className: styles$B.subtitle,
+          children: "Every item on this order has already been returned or cancelled."
+        })]
+      })
+    });
+  }
   return jsxs("div", {
     className: styles$B.page,
     children: [jsxs("div", {
@@ -9298,14 +9313,14 @@ function CartSheetProvider({ children }) {
     })]
   });
 }
-const gallery = "_gallery_nv2a9_1";
-const track$2 = "_track_nv2a9_8";
-const slide$1 = "_slide_nv2a9_32";
-const image$4 = "_image_nv2a9_39";
-const placeholder$1 = "_placeholder_nv2a9_43";
-const dots$2 = "_dots_nv2a9_49";
-const dot$2 = "_dot_nv2a9_49";
-const dotActive$2 = "_dotActive_nv2a9_88";
+const gallery = "_gallery_16d26_1";
+const track$2 = "_track_16d26_5";
+const slide$1 = "_slide_16d26_29";
+const image$4 = "_image_16d26_36";
+const placeholder$1 = "_placeholder_16d26_40";
+const dots$2 = "_dots_16d26_58";
+const dot$2 = "_dot_16d26_58";
+const dotActive$2 = "_dotActive_16d26_109";
 const styles$i = {
   gallery,
   track: track$2,
@@ -9316,7 +9331,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 +9354,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 +10059,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 +10214,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", {
@@ -10521,12 +10547,12 @@ function ExploreList({ title: title2, links }) {
     })]
   });
 }
-const pcp = "_pcp_6gy3c_6";
-const blocks = "_blocks_6gy3c_25";
-const featured = "_featured_6gy3c_38";
-const gridBlock = "_gridBlock_6gy3c_39";
-const blockTitle = "_blockTitle_6gy3c_46";
-const grid = "_grid_6gy3c_39";
+const pcp = "_pcp_yu17f_6";
+const blocks = "_blocks_yu17f_25";
+const featured = "_featured_yu17f_38";
+const gridBlock = "_gridBlock_yu17f_39";
+const blockTitle = "_blockTitle_yu17f_46";
+const grid = "_grid_yu17f_39";
 const styles$3 = {
   pcp,
   blocks,
@@ -11547,4 +11573,4 @@ export {
   useToast,
   variantLabel
 };
-//# sourceMappingURL=storefront.mjs.map
+

package/dist/standalone/styles.css

@@ -2429,13 +2429,10 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._gallery_nv2a9_1 {
+._gallery_16d26_1 {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-12);
 }
-._track_nv2a9_8 {
+._track_16d26_5 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2444,45 +2441,50 @@
   background: var(--color-surface-soft);
   scrollbar-width: none;
 }
-._track_nv2a9_8::-webkit-scrollbar {
+._track_16d26_5::-webkit-scrollbar {
   display: none;
 }
-._slide_nv2a9_32 {
+._slide_16d26_29 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
-._image_nv2a9_39 {
+._image_16d26_36 {
   object-fit: cover;
 }
-._placeholder_nv2a9_43 {
+._placeholder_16d26_40 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
-._dots_nv2a9_49 {
+._dots_16d26_58 {
+  position: absolute;
+  right: 0;
+  bottom: 16px;
+  left: 0;
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
-._dot_nv2a9_49 {
+._dot_16d26_58 {
   width: 8px;
   height: 8px;
   padding: 0;
   border: none;
   border-radius: var(--radius-full);
-  background: var(--color-border-default);
+  background: rgba(255, 255, 255, 0.5);
+  filter: drop-shadow(0 1px 2px rgba(8, 14, 18, 0.45));
   cursor: pointer;
   position: relative;
 }
-._dot_nv2a9_49::after {
+._dot_16d26_58::after {
   content: "";
   position: absolute;
   inset: -18px -3px;
 }
-._dotActive_nv2a9_88 {
-  background: var(--color-surface-max);
+._dotActive_16d26_109 {
+  background: #ffffff;
 }
 ._scrim_ddqa4_8 {
   position: fixed;
@@ -3381,37 +3383,37 @@
   flex-shrink: 0;
   color: var(--color-text-default);
 }
-._pcp_6gy3c_6 {
+._pcp_yu17f_6 {
   display: flex;
   flex-direction: column;
 }
-._blocks_6gy3c_25 {
+._blocks_yu17f_25 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._featured_6gy3c_38,
-._gridBlock_6gy3c_39 {
+._featured_yu17f_38,
+._gridBlock_yu17f_39 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0;
 }
-._blockTitle_6gy3c_46 {
+._blockTitle_yu17f_46 {
   padding: 0 var(--space-16);
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._grid_6gy3c_39 {
+._grid_yu17f_39 {
   list-style: none;
   margin: 0;
   padding: 0 var(--space-16);
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: var(--space-12);
-  row-gap: var(--space-24);
+  row-gap: var(--space-12);
 }
 ._showcase_1qnt2_44 {
   background: #080e12;

package/dist/styles.css

@@ -2429,13 +2429,10 @@
   flex-direction: column;
   gap: var(--space-20);
 }
-._gallery_nv2a9_1 {
+._gallery_16d26_1 {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-12);
 }
-._track_nv2a9_8 {
+._track_16d26_5 {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
@@ -2444,45 +2441,50 @@
   background: var(--color-surface-soft);
   scrollbar-width: none;
 }
-._track_nv2a9_8::-webkit-scrollbar {
+._track_16d26_5::-webkit-scrollbar {
   display: none;
 }
-._slide_nv2a9_32 {
+._slide_16d26_29 {
   position: relative;
   flex: 0 0 100%;
   scroll-snap-align: center;
   aspect-ratio: 375 / 475;
 }
-._image_nv2a9_39 {
+._image_16d26_36 {
   object-fit: cover;
 }
-._placeholder_nv2a9_43 {
+._placeholder_16d26_40 {
   width: 100%;
   aspect-ratio: 375 / 475;
   background: var(--color-surface-soft);
 }
-._dots_nv2a9_49 {
+._dots_16d26_58 {
+  position: absolute;
+  right: 0;
+  bottom: 16px;
+  left: 0;
   display: flex;
   justify-content: center;
   gap: var(--space-6);
 }
-._dot_nv2a9_49 {
+._dot_16d26_58 {
   width: 8px;
   height: 8px;
   padding: 0;
   border: none;
   border-radius: var(--radius-full);
-  background: var(--color-border-default);
+  background: rgba(255, 255, 255, 0.5);
+  filter: drop-shadow(0 1px 2px rgba(8, 14, 18, 0.45));
   cursor: pointer;
   position: relative;
 }
-._dot_nv2a9_49::after {
+._dot_16d26_58::after {
   content: "";
   position: absolute;
   inset: -18px -3px;
 }
-._dotActive_nv2a9_88 {
-  background: var(--color-surface-max);
+._dotActive_16d26_109 {
+  background: #ffffff;
 }
 ._scrim_ddqa4_8 {
   position: fixed;
@@ -3381,37 +3383,37 @@
   flex-shrink: 0;
   color: var(--color-text-default);
 }
-._pcp_6gy3c_6 {
+._pcp_yu17f_6 {
   display: flex;
   flex-direction: column;
 }
-._blocks_6gy3c_25 {
+._blocks_yu17f_25 {
   position: relative;
   display: flex;
   flex-direction: column;
 }
-._featured_6gy3c_38,
-._gridBlock_6gy3c_39 {
+._featured_yu17f_38,
+._gridBlock_yu17f_39 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: var(--space-24) 0;
 }
-._blockTitle_6gy3c_46 {
+._blockTitle_yu17f_46 {
   padding: 0 var(--space-16);
   font-size: var(--type-heading-md-size);
   line-height: 1.38;
   font-weight: var(--font-weight-bold);
   color: var(--color-text-default);
 }
-._grid_6gy3c_39 {
+._grid_yu17f_39 {
   list-style: none;
   margin: 0;
   padding: 0 var(--space-16);
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   column-gap: var(--space-12);
-  row-gap: var(--space-24);
+  row-gap: var(--space-12);
 }
 ._showcase_1qnt2_44 {
   background: #080e12;

package/package.json

@@ -1,14 +1,11 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.19.26",
+  "version": "0.19.28",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
   "type": "module",
   "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -23,34 +20,18 @@
     "dist",
     "!dist/**/*.map"
   ],
-  "scripts": {
-    "build": "pnpm build:package && pnpm build:standalone",
-    "build:package": "vite build",
-    "build:standalone": "BUILD_TARGET=standalone vite build",
-    "typecheck": "tsc --noEmit",
-    "build:partner": "PARTNER_DROP=1 pnpm build && pnpm pack"
-  },
+  "sideEffects": [
+    "*.css"
+  ],
   "peerDependencies": {
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
-  "devDependencies": {
-    "@microsoft/api-extractor": "^7.58.12",
-    "@raqmix/contracts": "^2.0.0",
-    "@types/react": "^19.1.0",
-    "@types/react-dom": "^19.1.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "esbuild": "^0.28.1",
-    "terser": "^5.50.0",
-    "typescript": "^5.7.3",
-    "vite": "^7.0.0",
-    "vite-plugin-dts": "^5.0.3"
-  },
-  "module": "./dist/index.mjs",
-  "sideEffects": [
-    "*.css"
-  ],
   "dependencies": {
     "zod": "^3.24.1"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
   }
 }