@crystaldesign/widget-library 26.11.0-beta.3 → 26.11.0-beta.30

package/build/esm/index.js

@@ -823,7 +823,8 @@ function useGallery(_ref) {
     add3DImageAsFallback = _ref$config.add3DImageAsFallback,
     currentProductId = _ref.currentProductId,
     setCurrentProductId = _ref.setCurrentProductId,
-    disableAnimation = _ref.disableAnimation;
+    disableAnimation = _ref.disableAnimation,
+    initialRenderJobId = _ref.initialRenderJobId;
   var _useDivaCore = useDivaCore(),
     baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
   var _useState = useState(null),
@@ -834,7 +835,18 @@ function useGallery(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     swiper = _useState4[0],
     setSwiper = _useState4[1];
-  var _useState5 = useState(0),
+  var medias = useMedia({
+    products: products,
+    functionTypes: functionTypes,
+    add2DImage: add2DImage,
+    add3DImageAsFallback: add3DImageAsFallback
+  });
+  var _useState5 = useState(function () {
+      var index = initialRenderJobId ? medias.findIndex(function (media) {
+        return media.renderJob === initialRenderJobId;
+      }) : -1;
+      return index === -1 ? 0 : index;
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
     currentMediaIndex = _useState6[0],
     setCurrentMediaIndex = _useState6[1];
@@ -842,12 +854,30 @@ function useGallery(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     swiperIsInitialized = _useState8[0],
     setSwiperIsInitialized = _useState8[1];
-  var medias = useMedia({
-    products: products,
-    functionTypes: functionTypes,
-    add2DImage: add2DImage,
-    add3DImageAsFallback: add3DImageAsFallback
-  });
+
+  // Re-sync currentMediaIndex to the media matching initialRenderJobId whenever medias or
+  // initialRenderJobId change, including the empty-to-populated transition (the initial useState
+  // above only runs once and can't find a match if medias hasn't loaded yet).
+  useEffect(function () {
+    if (!initialRenderJobId) return;
+    var mediaIndex = medias.findIndex(function (media) {
+      return media.renderJob === initialRenderJobId;
+    });
+    if (mediaIndex === -1) return;
+    if (mediaIndex !== currentMediaIndex) {
+      setCurrentMediaIndex(mediaIndex);
+    }
+    [swiper, thumbsSwiper].forEach(function (swiperInstance) {
+      if (swiperInstance && swiperInstance.realIndex !== mediaIndex) {
+        var _swiperInstance$param;
+        if ((_swiperInstance$param = swiperInstance.params) !== null && _swiperInstance$param !== void 0 && _swiperInstance$param.loop) {
+          swiperInstance.slideToLoop(mediaIndex, 0);
+        } else {
+          swiperInstance.slideTo(mediaIndex, 0);
+        }
+      }
+    });
+  }, [medias, initialRenderJobId, swiper, thumbsSwiper]);
 
   // Update currentMediaIndex when currentProductIndex changes from outside
   useEffect(function () {
@@ -1441,6 +1471,7 @@ var Gallery = function Gallery(props) {
       className: classNames('gallery-main', props.nestedSwiper ? 'gallery-main-popup-swiper' : ''),
       speed: props.disableAnimation ? 0 : 500
     }, props.config.sliderProp), {}, {
+      initialSlide: currentIndex,
       loop: true,
       children: medias.map(function (media, i) {
         return /*#__PURE__*/jsx(SwiperSlide, {
@@ -1463,6 +1494,7 @@ var Gallery = function Gallery(props) {
       modules: [Navigation, Thumbs],
       className: "gallery-thumb"
     }, props.config.thumbSliderProp), {}, {
+      initialSlide: currentIndex,
       children: medias.map(function (media, i) {
         var _media$url;
         return /*#__PURE__*/jsx(SwiperSlide, {

package/build/types/widget-library/src/components/Gallery/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,cAAc,SAAS,CAAC;AAKxB,eAAO,MAAM,OAAO,UAAW,YAAY,sBA8D1C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AASvC,cAAc,SAAS,CAAC;AAKxB,eAAO,MAAM,OAAO,UAAW,YAAY,sBAgE1C,CAAC"}

package/build/types/widget-library/src/components/Gallery/types.d.ts

@@ -26,6 +26,8 @@ export interface GalleryProps {
     disableAnimation?: boolean;
     setCurrentMedia?: (m: MediaWithProductIndex) => void;
     nestedSwiper?: boolean;
+    /** Id of the render job whose media item to open on, instead of the first one. Falls back to the first item if no media matches. */
+    initialRenderJobId?: string;
 }
 export interface MediaWithProductIndex extends Media {
     productIndex: number;

package/build/types/widget-library/src/components/Gallery/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aAAc,SAAQ,iBAAiB,EAAE,eAAe;IACvE,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oIAAoI;IACpI,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/build/types/widget-library/src/components/Gallery/useGallery.d.ts

@@ -1,6 +1,6 @@
 import { GalleryProps, MediaWithProductIndex } from './types';
 import { SwiperClass } from 'swiper/react';
-export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductId, setCurrentProductId, disableAnimation, }: GalleryProps): {
+export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductId, setCurrentProductId, disableAnimation, initialRenderJobId, }: GalleryProps): {
     medias: MediaWithProductIndex[];
     sirvLoaded: boolean;
     thumbsSwiper: SwiperClass | null;

package/build/types/widget-library/src/components/Gallery/useGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/useGallery.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,MAAM,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAC3D,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,GACjB,EAAE,YAAY;;;;;;;;4BAoDkB,WAAW;uCAoBA,GAAG;EA8B9C"}
+{"version":3,"file":"useGallery.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gallery/useGallery.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAI9D,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,MAAM,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,oBAAoB,EAAE,EAC3D,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,kBAAkB,GACnB,EAAE,YAAY;;;;;;;;4BA+EkB,WAAW;uCAoBA,GAAG;EA8B9C"}

package/build/types/widget-library/src/tests/components/Gallery/useGallery.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useGallery.test.d.ts.map

package/build/types/widget-library/src/tests/components/Gallery/useGallery.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGallery.test.d.ts","sourceRoot":"","sources":["../../../../../../../src/tests/components/Gallery/useGallery.test.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@crystaldesign/widget-library",
-  "version": "26.11.0-beta.3",
+  "version": "26.11.0-beta.30",
+  "description": "Shared infrastructure for the embeddable widgets: components, hooks, types and utils.",
   "license": "MIT",
   "scripts": {
     "storybook": "storybook dev -p 6006",
@@ -35,5 +36,5 @@
     "suiteName": "widget-library",
     "outputDirectory": "./test-reports"
   },
-  "gitHead": "ae30511f2c6a75c3f34786d056cbd7dfac42d07a"
+  "gitHead": "0f17b060ab8f4ca1d352c74be15ead945a89fd6c"
 }