@crystaldesign/widget-library 25.8.0-beta.29 → 25.8.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { useEffect, useMemo, useCallback, useState, useRef, forwardRef } from 'react';
1
+ import { useEffect, useMemo, useState, forwardRef, useRef } from 'react';
2
2
  import { useDivaCore, getLogger, DivaError, useTranslation } from '@crystaldesign/diva-core';
3
3
  import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
@@ -31,12 +31,10 @@ import { flatten } from 'flat';
31
31
  *
32
32
  * @param url an url to a css file
33
33
  * @param css the css content as text
34
- * @param widgetId the id of the element to update
35
34
  */
36
35
  function updateCssInDom (url, css) {
37
- var widgetType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
38
36
  if (url) {
39
- var element = document.getElementById('DIVA-WIDGET-STYLE-URL' + widgetType);
37
+ var element = document.getElementById('DIVA-WIDGET-STYLE-URL');
40
38
  if (element) {
41
39
  var _element$parentNode;
42
40
  (_element$parentNode = element.parentNode) === null || _element$parentNode === void 0 || _element$parentNode.removeChild(element);
@@ -44,30 +42,30 @@ function updateCssInDom (url, css) {
44
42
  element = document.createElement('link');
45
43
  element.rel = 'stylesheet';
46
44
  element.type = 'text/css';
47
- element.id = 'DIVA-WIDGET-STYLE-URL' + widgetType;
45
+ element.id = 'DIVA-WIDGET-STYLE-URL';
48
46
  element.href = url;
49
47
  document.head.appendChild(element);
50
48
  }
51
49
  if (css) {
52
50
  var finalCss = Array.isArray(css) ? css.join(' ') : css;
53
- var _element = document.getElementById('DIVA-WIDGET-STYLE' + widgetType);
51
+ var _element = document.getElementById('DIVA-WIDGET-STYLE');
54
52
  if (_element) {
55
53
  var _element$parentNode2;
56
54
  (_element$parentNode2 = _element.parentNode) === null || _element$parentNode2 === void 0 || _element$parentNode2.removeChild(_element);
57
55
  }
58
56
  _element = document.createElement('style');
59
57
  _element.type = 'text/css';
60
- _element.id = 'DIVA-WIDGET-STYLE' + widgetType;
58
+ _element.id = 'DIVA-WIDGET-STYLE';
61
59
  _element.appendChild(document.createTextNode(finalCss));
62
60
  document.head.appendChild(_element);
63
61
  }
64
62
  }
65
63
 
66
- function useCss(settings, defaultCss, widgetType) {
64
+ function useCss(settings, defaultCss) {
67
65
  useEffect(function () {
68
66
  var _settings$css;
69
- updateCssInDom(settings === null || settings === void 0 ? void 0 : settings.cssUrl, (_settings$css = settings === null || settings === void 0 ? void 0 : settings.css) !== null && _settings$css !== void 0 ? _settings$css : defaultCss, widgetType);
70
- }, [settings === null || settings === void 0 ? void 0 : settings.cssUrl, settings === null || settings === void 0 ? void 0 : settings.css, widgetType]);
67
+ updateCssInDom(settings === null || settings === void 0 ? void 0 : settings.cssUrl, (_settings$css = settings === null || settings === void 0 ? void 0 : settings.css) !== null && _settings$css !== void 0 ? _settings$css : defaultCss);
68
+ }, [settings === null || settings === void 0 ? void 0 : settings.cssUrl, settings === null || settings === void 0 ? void 0 : settings.css]);
71
69
  }
72
70
 
73
71
  function useConfiguration(type, componentSettings) {
@@ -82,523 +80,142 @@ function useConfiguration(type, componentSettings) {
82
80
  return settings;
83
81
  }
84
82
 
85
- var LOG$2 = getLogger('DivaWidget', 'useGlobalCache');
86
-
87
- // Global cache for shared data between widgets
88
-
89
- // Initialize global cache if not exists
90
- if (typeof window !== 'undefined' && !window.__divaWidgetCache) {
91
- window.__divaWidgetCache = {
92
- cache: new Map()
93
- };
94
- }
95
-
96
- /**
97
- * Global cache for shared data between widgets of a website
98
- * Simple implementation with request deduplication
99
- */
100
- function useGlobalCache(_ref) {
101
- var uniqueWidgetId = _ref.uniqueWidgetId,
102
- widgetType = _ref.widgetType;
103
- var getOrFetch = useCallback(function (key, fetcher) {
104
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] getOrFetch called for key: ").concat(key));
105
- if (typeof window === 'undefined' || !window.__divaWidgetCache) {
106
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] No global cache available, fetching directly for key: ").concat(key));
107
- return fetcher();
108
- }
109
- var cache = window.__divaWidgetCache.cache;
110
- var entry = cache.get(key);
111
-
112
- // If we have cached data, return it immediately
113
- if (entry !== null && entry !== void 0 && entry.data) {
114
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache hit for key: ").concat(key, ", returning cached data"));
115
- return Promise.resolve(entry.data);
116
- }
117
-
118
- // If there's already a pending request, return that promise (deduplication)
119
- if (entry !== null && entry !== void 0 && entry.promise) {
120
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache hit for pending request, returning existing promise for key: ").concat(key));
121
- return entry.promise;
122
- }
123
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache miss for key: ").concat(key, ", creating new request"));
124
-
125
- // Create new entry or reset existing one
126
- var newEntry = {
127
- data: null,
128
- promise: null,
129
- error: null,
130
- timestamp: Date.now()
131
- };
132
-
133
- // Create new request
134
- var promise = fetcher().then(function (data) {
135
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Request successful for key: ").concat(key, ", updating cache with ").concat(data.length, " items"));
136
- var currentEntry = cache.get(key);
137
- if (currentEntry) {
138
- currentEntry.data = data;
139
- currentEntry.promise = null;
140
- currentEntry.error = null;
141
- currentEntry.timestamp = Date.now();
142
- }
143
- return data;
144
- })["catch"](function (error) {
145
- LOG$2.error(new DivaError("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Request failed for key: ").concat(key), {
146
- cause: error
147
- }));
148
- var currentEntry = cache.get(key);
149
- if (currentEntry) {
150
- currentEntry.promise = null;
151
- currentEntry.error = error;
152
- currentEntry.timestamp = Date.now();
153
- }
154
- throw error;
155
- });
156
- newEntry.promise = promise;
157
- cache.set(key, newEntry);
158
- return promise;
159
- }, [uniqueWidgetId, widgetType]);
160
- var clear = useCallback(function (key) {
161
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Clearing cache entry for key: ").concat(key));
162
- if (typeof window !== 'undefined' && window.__divaWidgetCache) {
163
- var deleted = window.__divaWidgetCache.cache["delete"](key);
164
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cache entry ").concat(deleted ? 'deleted' : 'not found', " for key: ").concat(key));
165
- }
166
- }, [uniqueWidgetId, widgetType]);
167
- var clearAll = useCallback(function () {
168
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Clearing all cache entries"));
169
- if (typeof window !== 'undefined' && window.__divaWidgetCache) {
170
- var size = window.__divaWidgetCache.cache.size;
171
- window.__divaWidgetCache.cache.clear();
172
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Cleared ").concat(size, " cache entries"));
173
- }
174
- }, [uniqueWidgetId, widgetType]);
175
- var setCache = useCallback(function (key, data) {
176
- LOG$2.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Setting cache entry for key: ").concat(key));
177
- if (typeof window !== 'undefined' && window.__divaWidgetCache) {
178
- window.__divaWidgetCache.cache.set(key, data);
179
- }
180
- }, [uniqueWidgetId, widgetType]);
181
- return useMemo(function () {
182
- return {
183
- getOrFetch: getOrFetch,
184
- clear: clear,
185
- clearAll: clearAll,
186
- setCache: setCache
187
- };
188
- }, [getOrFetch, clear, clearAll, setCache]);
189
- }
190
-
191
- var LOG$1 = getLogger('DivaWidget', 'useGlobalSelectedProduct');
192
- var EVENT_NAME_PRODUCT_SELECTED = 'diva:widget:product-selected';
193
-
194
- /**
195
- * Hook to get the globally selected product
196
- *
197
- * Initially and when the product changes, it gets selected.
198
- * When ever the selected product is changed, an event is dispatched to notify other widgets, so they can also set the new product as selected.
199
- * The hook also listens for product selection events from other widgets and updates the selected product accordingly.
200
- *
201
- * @param product - The product to select initially
202
- * @returns The selected product and a function to set the selected product
203
- */
204
- function useGlobalSelectedProduct(_ref) {
205
- var selectedProduct = _ref.selectedProduct,
206
- uniqueWidgetId = _ref.uniqueWidgetId,
207
- widgetType = _ref.widgetType,
208
- handleSelectedProductChange = _ref.handleSelectedProductChange;
209
- // Listen to product selection events from other widgets
210
- var handleProductSelection = useCallback(function (event) {
211
- var customEvent = event;
212
- var _customEvent$detail = customEvent.detail,
213
- product = _customEvent$detail.product,
214
- sourceId = _customEvent$detail.sourceId;
215
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Received product selection event from ").concat(sourceId, ", product: ").concat(product._id));
216
-
217
- // Ignore our own events
218
- if (sourceId === uniqueWidgetId) {
219
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring own event"));
220
- return;
221
- }
222
-
223
- // Ignore if product hasn't actually changed
224
- if ((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === product._id) {
225
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Ignoring event - product already selected: ").concat(product._id));
226
- return;
227
- }
228
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Updating selected product from ").concat((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) || 'none', " to ").concat(product._id));
229
- handleSelectedProductChange(product);
230
- }, [uniqueWidgetId, selectedProduct, widgetType]);
231
-
232
- // Stable event listener setup
233
- useEffect(function () {
234
- window.addEventListener(EVENT_NAME_PRODUCT_SELECTED, handleProductSelection);
235
- return function () {
236
- window.removeEventListener(EVENT_NAME_PRODUCT_SELECTED, handleProductSelection);
237
- };
238
- }, [handleProductSelection]);
239
- var notifyProductChanged = useCallback(function (product) {
240
- // Dispatch event to notify other widgets
241
- LOG$1.debug("[".concat(widgetType, ":").concat(uniqueWidgetId, "] Dispatching product selection event to notify other widgets"));
242
- window.dispatchEvent(new CustomEvent(EVENT_NAME_PRODUCT_SELECTED, {
243
- detail: {
244
- product: product,
245
- sourceId: uniqueWidgetId
246
- }
247
- }));
248
- }, [uniqueWidgetId, widgetType]);
249
- return {
250
- notifyProductChanged: notifyProductChanged
251
- };
252
- }
253
-
83
+ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
84
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
85
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
254
86
  var LOG = getLogger('DivaWidget', 'useProductData');
255
- // Generate unique widget instance ID
256
- var generateWidgetId = function generateWidgetId() {
257
- return "widget-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
258
- };
259
87
  function useProductData(_ref) {
260
88
  var productIds = _ref.productIds,
261
89
  variants = _ref.variants,
262
- widgetType = _ref.widgetType;
263
- // Generate stable widget ID that persists for the lifetime of this hook instance
264
- // Function to handle selectedProduct changes
265
-
266
- var widgetId = useMemo(function () {
267
- return generateWidgetId();
268
- }, []);
90
+ onProductLoaded = _ref.onProductLoaded;
269
91
  var _useDivaCore = useDivaCore(),
270
92
  handler = _useDivaCore.handler;
271
- var _useGlobalCache = useGlobalCache({
272
- uniqueWidgetId: widgetId,
273
- widgetType: widgetType
274
- }),
275
- getOrFetch = _useGlobalCache.getOrFetch,
276
- setCache = _useGlobalCache.setCache;
277
- var _useState = useState([]),
93
+ var _useState = useState(variants !== null && variants !== void 0 ? variants : []),
278
94
  _useState2 = _slicedToArray(_useState, 2),
279
95
  productVariants = _useState2[0],
280
96
  setProductVariants = _useState2[1];
281
- var _useState3 = useState(),
97
+ var _useState3 = useState(false),
282
98
  _useState4 = _slicedToArray(_useState3, 2),
283
- selectedProduct = _useState4[0],
284
- setSelectedProduct = _useState4[1];
285
- var _useState5 = useState(false),
99
+ error = _useState4[0],
100
+ setError = _useState4[1];
101
+ var _useState5 = useState(true),
286
102
  _useState6 = _slicedToArray(_useState5, 2),
287
103
  loading = _useState6[0],
288
104
  setLoading = _useState6[1];
289
- var _useState7 = useState(false),
290
- _useState8 = _slicedToArray(_useState7, 2),
291
- error = _useState8[0],
292
- setError = _useState8[1];
293
- var fetchProducts = useCallback(/*#__PURE__*/function () {
294
- var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(ids) {
295
- var productPromises, results, flattenedResults;
296
- return _regeneratorRuntime.wrap(function _callee2$(_context2) {
297
- while (1) switch (_context2.prev = _context2.next) {
298
- case 0:
299
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] fetchProducts called with ids: ").concat(ids.join(', ')));
300
- if (!variants) {
301
- _context2.next = 4;
105
+ useEffect(function () {
106
+ setError(false);
107
+ setLoading(true);
108
+ if (!(productIds !== null && productIds !== void 0 && productIds.length)) {
109
+ LOG.error(new DivaError('productIds array is required and cannot be empty'));
110
+ setError(true);
111
+ setLoading(false);
112
+ return;
113
+ }
114
+ (function () {
115
+ var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(ids) {
116
+ var newVariants, productsPromises, productsResults, allProducts, _iterator, _step, _loop;
117
+ return _regeneratorRuntime.wrap(function _callee$(_context2) {
118
+ while (1) switch (_context2.prev = _context2.next) {
119
+ case 0:
120
+ _context2.prev = 0;
121
+ if (!variants) {
122
+ _context2.next = 6;
123
+ break;
124
+ }
125
+ setProductVariants(variants);
126
+ newVariants = variants;
127
+ _context2.next = 13;
302
128
  break;
303
- }
304
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Using provided variants instead of fetching"));
305
- return _context2.abrupt("return", variants);
306
- case 4:
307
- // Create promises for all products (cached or to be fetched) to preserve order
308
- productPromises = ids.map(/*#__PURE__*/function () {
309
- var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
310
- return _regeneratorRuntime.wrap(function _callee$(_context) {
129
+ case 6:
130
+ // Fetch all products in parallel
131
+ productsPromises = ids.map(function (id) {
132
+ return handler.productHandler.apiGetProductVariants(id, true);
133
+ });
134
+ _context2.next = 9;
135
+ return Promise.all(productsPromises);
136
+ case 9:
137
+ productsResults = _context2.sent;
138
+ // Flatten the array of arrays into a single array of variants
139
+ allProducts = productsResults.flat();
140
+ setProductVariants(allProducts);
141
+ newVariants = allProducts;
142
+ case 13:
143
+ // Log business events for loaded products
144
+ _iterator = _createForOfIteratorHelper(newVariants);
145
+ _context2.prev = 14;
146
+ _loop = /*#__PURE__*/_regeneratorRuntime.mark(function _loop() {
147
+ var product, matchingProductId;
148
+ return _regeneratorRuntime.wrap(function _loop$(_context) {
311
149
  while (1) switch (_context.prev = _context.next) {
312
150
  case 0:
313
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Fetching product variants for id: ").concat(id));
314
- return _context.abrupt("return", getOrFetch(id, function () {
315
- return handler.productHandler.apiGetProductVariants(id, true);
316
- }));
317
- case 2:
151
+ product = _step.value;
152
+ matchingProductId = ids.find(function (id) {
153
+ return product._id === id;
154
+ });
155
+ if (matchingProductId) {
156
+ LOG.businessEvent('onLoadProductPDP', 'ProductDetailPage', 'Neues Product in PDP geladen.', {
157
+ productId: matchingProductId,
158
+ catalogName: product.modelName,
159
+ catalogCodex: product.catCodex
160
+ });
161
+ }
162
+ case 3:
318
163
  case "end":
319
164
  return _context.stop();
320
165
  }
321
- }, _callee);
322
- }));
323
- return function (_x2) {
324
- return _ref3.apply(this, arguments);
325
- };
326
- }());
327
- _context2.next = 7;
328
- return Promise.all(productPromises);
329
- case 7:
330
- results = _context2.sent;
331
- flattenedResults = results.flat();
332
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Fetched ").concat(flattenedResults.length, " total product variants"));
333
- return _context2.abrupt("return", flattenedResults);
334
- case 11:
335
- case "end":
336
- return _context2.stop();
337
- }
338
- }, _callee2);
339
- }));
340
- return function (_x) {
341
- return _ref2.apply(this, arguments);
342
- };
343
- }(), [handler.productHandler, getOrFetch, variants, widgetId, widgetType]);
344
-
345
- // Function to handle selectedProduct changes
346
- var handleSelectedProductChange = useCallback(/*#__PURE__*/function () {
347
- var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(newProduct) {
348
- var _variants;
349
- return _regeneratorRuntime.wrap(function _callee3$(_context3) {
350
- while (1) switch (_context3.prev = _context3.next) {
351
- case 0:
352
- if (!(!newProduct || productVariants.find(function (p) {
353
- return p._id === newProduct._id;
354
- }))) {
355
- _context3.next = 4;
356
- break;
357
- }
358
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Selected product ").concat(newProduct._id, " already in current variants, setting as selected"));
359
- setSelectedProduct(newProduct);
360
- return _context3.abrupt("return");
361
- case 4:
362
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Selected product ").concat(newProduct._id, " not in current variants, fetching variants for it"));
363
- setLoading(true);
364
- setError(false);
365
- _context3.prev = 7;
366
- _context3.next = 10;
367
- return fetchProducts([newProduct._id]);
368
- case 10:
369
- _variants = _context3.sent;
370
- setProductVariants(_variants);
371
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] New ").concat(_variants.length, " variants to productVariants"));
372
- setLoading(false);
373
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Setting product ").concat(newProduct._id, " as selected after fetching"));
374
- setSelectedProduct(newProduct);
375
- _context3.next = 23;
376
- break;
377
- case 18:
378
- _context3.prev = 18;
379
- _context3.t0 = _context3["catch"](7);
380
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
381
- cause: _context3.t0
382
- }));
383
- setError(true);
384
- setLoading(false);
385
- case 23:
386
- case "end":
387
- return _context3.stop();
388
- }
389
- }, _callee3, null, [[7, 18]]);
390
- }));
391
- return function (_x3) {
392
- return _ref4.apply(this, arguments);
393
- };
394
- }(), [selectedProduct, productVariants, fetchProducts, widgetId, widgetType]);
395
- var _useGlobalSelectedPro = useGlobalSelectedProduct({
396
- selectedProduct: selectedProduct,
397
- uniqueWidgetId: widgetId,
398
- widgetType: widgetType,
399
- handleSelectedProductChange: handleSelectedProductChange
400
- }),
401
- notifyProductChanged = _useGlobalSelectedPro.notifyProductChanged;
402
- var normalizedProductIds = useMemo(function () {
403
- if (!productIds) return [];
404
- return Array.isArray(productIds) ? productIds : [productIds];
405
- }, [productIds]);
406
-
407
- // Main effect for loading products when productIds or variants change
408
- useEffect(function () {
409
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Main effect triggered with normalizedProductIds: ").concat(normalizedProductIds.join(', ')));
410
- if (!normalizedProductIds.length) {
411
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] ProductIds array is required and cannot be empty")));
412
- setError(true);
413
- setLoading(false);
414
- setProductVariants([]);
415
- return;
416
- }
417
- setError(false);
418
- setLoading(true);
419
- fetchProducts(normalizedProductIds).then(function (variants) {
420
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Successfully loaded ").concat(variants.length, " product variants"));
421
- setProductVariants(variants);
422
- var variantToUse = variants.find(function (v) {
423
- return v._id === normalizedProductIds[0];
424
- });
425
- setSelectedProduct(variantToUse !== null && variantToUse !== void 0 ? variantToUse : variants[0]);
426
- setLoading(false);
427
- })["catch"](function (error) {
428
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading products"), {
429
- cause: error
430
- }));
431
- setError(true);
432
- setLoading(false);
433
- setProductVariants([]);
434
- });
435
- }, [normalizedProductIds]);
436
- var setSelectedProductId = useCallback(/*#__PURE__*/function () {
437
- var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(productId) {
438
- var product, _variants2, _product;
439
- return _regeneratorRuntime.wrap(function _callee4$(_context4) {
440
- while (1) switch (_context4.prev = _context4.next) {
441
- case 0:
442
- if (!((selectedProduct === null || selectedProduct === void 0 ? void 0 : selectedProduct._id) === productId)) {
443
- _context4.next = 3;
166
+ }, _loop);
167
+ });
168
+ _iterator.s();
169
+ case 17:
170
+ if ((_step = _iterator.n()).done) {
171
+ _context2.next = 21;
172
+ break;
173
+ }
174
+ return _context2.delegateYield(_loop(), "t0", 19);
175
+ case 19:
176
+ _context2.next = 17;
444
177
  break;
445
- }
446
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " already selected, skipping"));
447
- return _context4.abrupt("return");
448
- case 3:
449
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] setSelectedProductId called with productId: ").concat(productId));
450
-
451
- // If a product is selected that is not in the productVariants list,
452
- // fetch the variants for that product and append them to the productVariants list
453
- product = productVariants.find(function (p) {
454
- return p._id === productId;
455
- });
456
- if (!product) {
457
- _context4.next = 10;
178
+ case 21:
179
+ _context2.next = 26;
458
180
  break;
459
- }
460
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " found in current variants, setting as selected"));
461
- setSelectedProduct(product);
462
- notifyProductChanged(product);
463
- return _context4.abrupt("return");
464
- case 10:
465
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found in current variants, fetching variants for it"));
466
- _context4.prev = 11;
467
- setError(false);
468
- setLoading(true);
469
- _context4.next = 16;
470
- return fetchProducts([productId]);
471
- case 16:
472
- _variants2 = _context4.sent;
473
- setProductVariants(_variants2);
474
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] New ").concat(_variants2.length, " variants to productVariants"));
475
- _product = _variants2.find(function (p) {
476
- return p._id === productId;
477
- });
478
- if (!_product) {
479
- _context4.next = 26;
181
+ case 23:
182
+ _context2.prev = 23;
183
+ _context2.t1 = _context2["catch"](14);
184
+ _iterator.e(_context2.t1);
185
+ case 26:
186
+ _context2.prev = 26;
187
+ _iterator.f();
188
+ return _context2.finish(26);
189
+ case 29:
190
+ onProductLoaded === null || onProductLoaded === void 0 || onProductLoaded(newVariants);
191
+ _context2.next = 36;
480
192
  break;
481
- }
482
- LOG.debug("[".concat(widgetType, ":").concat(widgetId, "] Setting product ").concat(productId, " as selected after fetching"));
483
- setSelectedProduct(_product);
484
- notifyProductChanged(_product);
485
- _context4.next = 27;
486
- break;
487
- case 26:
488
- throw new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Product ").concat(productId, " not found"));
489
- case 27:
490
- _context4.next = 33;
491
- break;
492
- case 29:
493
- _context4.prev = 29;
494
- _context4.t0 = _context4["catch"](11);
495
- LOG.error(new DivaError("[".concat(widgetType, ":").concat(widgetId, "] Error loading product"), {
496
- cause: _context4.t0
497
- }));
498
- setError(true);
499
- case 33:
500
- _context4.prev = 33;
501
- setLoading(false);
502
- return _context4.finish(33);
503
- case 36:
504
- case "end":
505
- return _context4.stop();
506
- }
507
- }, _callee4, null, [[11, 29, 33, 36]]);
508
- }));
509
- return function (_x4) {
510
- return _ref5.apply(this, arguments);
511
- };
512
- }(), [selectedProduct, productVariants, fetchProducts, setSelectedProduct, widgetId, widgetType]);
513
- function getProductsByDivaNrs(_x5) {
514
- return _getProductsByDivaNrs.apply(this, arguments);
515
- }
516
- function _getProductsByDivaNrs() {
517
- _getProductsByDivaNrs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5(divaNrs) {
518
- var products;
519
- return _regeneratorRuntime.wrap(function _callee5$(_context5) {
520
- while (1) switch (_context5.prev = _context5.next) {
521
- case 0:
522
- // Sort divaNrs array to ensure consistent cache keys
523
- divaNrs.sort();
524
- _context5.next = 3;
525
- return getOrFetch('divaNrs' + divaNrs.join(','), function () {
526
- return handler.productHandler.apiGetProductByQuery([{
527
- id: 'divaNr',
528
- op: 'in',
529
- value: divaNrs.join(',').replaceAll('"', '')
530
- }, {
531
- id: 'baseProduct',
532
- op: 'eq',
533
- value: false
534
- }], 1000, false);
535
- });
536
- case 3:
537
- products = _context5.sent;
538
- return _context5.abrupt("return", products);
539
- case 5:
540
- case "end":
541
- return _context5.stop();
542
- }
543
- }, _callee5);
544
- }));
545
- return _getProductsByDivaNrs.apply(this, arguments);
546
- }
547
- function getProductByDivaNrAndVariantId(_x6, _x7) {
548
- return _getProductByDivaNrAndVariantId.apply(this, arguments);
549
- }
550
- function _getProductByDivaNrAndVariantId() {
551
- _getProductByDivaNrAndVariantId = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6(divaNr, variantId) {
552
- var filter, product;
553
- return _regeneratorRuntime.wrap(function _callee6$(_context6) {
554
- while (1) switch (_context6.prev = _context6.next) {
555
- case 0:
556
- filter = [{
557
- id: 'divaNr',
558
- op: 'eq',
559
- value: divaNr
560
- }, {
561
- id: 'baseProduct',
562
- op: 'eq',
563
- value: false
564
- }];
565
- if (variantId) {
566
- filter.push({
567
- id: 'variantId',
568
- op: 'eq',
569
- value: parseInt(variantId)
570
- });
571
- }
572
- _context6.next = 4;
573
- return getOrFetch('divaNr' + divaNr + 'variantId' + variantId, function () {
574
- return handler.productHandler.apiGetProductByQuery(filter, 1, false);
575
- });
576
- case 4:
577
- product = _context6.sent;
578
- return _context6.abrupt("return", product);
579
- case 6:
580
- case "end":
581
- return _context6.stop();
582
- }
583
- }, _callee6);
584
- }));
585
- return _getProductByDivaNrAndVariantId.apply(this, arguments);
586
- }
587
- function setProductCache(key, data) {
588
- setCache(key, {
589
- data: data,
590
- timestamp: Date.now()
591
- });
592
- }
193
+ case 32:
194
+ _context2.prev = 32;
195
+ _context2.t2 = _context2["catch"](0);
196
+ LOG.error(new DivaError('Error loading products', {
197
+ cause: _context2.t2
198
+ }));
199
+ setError(true);
200
+ case 36:
201
+ _context2.prev = 36;
202
+ setLoading(false);
203
+ return _context2.finish(36);
204
+ case 39:
205
+ case "end":
206
+ return _context2.stop();
207
+ }
208
+ }, _callee, null, [[0, 32, 36, 39], [14, 23, 26, 29]]);
209
+ }));
210
+ return function (_x) {
211
+ return _ref2.apply(this, arguments);
212
+ };
213
+ })()(productIds);
214
+ }, [variants, productIds]);
593
215
  return {
594
216
  productVariants: productVariants,
595
217
  error: error,
596
- loading: loading,
597
- getProductsByDivaNrs: getProductsByDivaNrs,
598
- getProductByDivaNrAndVariantId: getProductByDivaNrAndVariantId,
599
- selectedProduct: selectedProduct,
600
- setSelectedProductId: setSelectedProductId,
601
- setProductCache: setProductCache
218
+ loading: loading
602
219
  };
603
220
  }
604
221
 
@@ -668,8 +285,7 @@ function useMedia(_ref) {
668
285
  }
669
286
  newMedias = [].concat(_toConsumableArray(newMedias), _toConsumableArray(filteredMedia.map(function (media) {
670
287
  return _objectSpread$3(_objectSpread$3({}, media), {}, {
671
- productIndex: productIndex,
672
- productId: product._id
288
+ productIndex: productIndex
673
289
  });
674
290
  })));
675
291
  }
@@ -682,8 +298,7 @@ function useMedia(_ref) {
682
298
  if (add3DImageAsFallback && product.image && !hasAddedMediaForProduct) {
683
299
  newMedias.unshift({
684
300
  url: product.image,
685
- productIndex: productIndex,
686
- productId: product._id
301
+ productIndex: productIndex
687
302
  });
688
303
  }
689
304
 
@@ -691,8 +306,7 @@ function useMedia(_ref) {
691
306
  if (add2DImage && product.image2D) {
692
307
  newMedias.push({
693
308
  url: product.image2D,
694
- productIndex: productIndex,
695
- productId: product._id
309
+ productIndex: productIndex
696
310
  });
697
311
  }
698
312
  });
@@ -706,8 +320,8 @@ function useGallery(_ref) {
706
320
  functionTypes = _ref$config.functionTypes,
707
321
  add2DImage = _ref$config.add2DImage,
708
322
  add3DImageAsFallback = _ref$config.add3DImageAsFallback,
709
- currentProductId = _ref.currentProductId,
710
- setCurrentProductId = _ref.setCurrentProductId;
323
+ currentProductIndex = _ref.currentProductIndex,
324
+ setCurrentProductIndex = _ref.setCurrentProductIndex;
711
325
  var _useDivaCore = useDivaCore(),
712
326
  baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
713
327
  var _useState = useState(null),
@@ -722,37 +336,27 @@ function useGallery(_ref) {
722
336
  _useState6 = _slicedToArray(_useState5, 2),
723
337
  currentMediaIndex = _useState6[0],
724
338
  setCurrentMediaIndex = _useState6[1];
725
- var _useState7 = useState(false),
726
- _useState8 = _slicedToArray(_useState7, 2),
727
- swiperIsInitialized = _useState8[0],
728
- setSwiperIsInitialized = _useState8[1];
729
339
  var medias = useMedia({
730
340
  products: products,
731
341
  functionTypes: functionTypes,
732
342
  add2DImage: add2DImage,
733
343
  add3DImageAsFallback: add3DImageAsFallback
734
344
  });
735
- useRef(false);
736
345
 
737
346
  // Update currentMediaIndex when currentProductIndex changes from outside
738
347
  useEffect(function () {
739
348
  var _medias$currentMediaI;
740
- if (currentProductId !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productId) !== currentProductId) {
349
+ if (currentProductIndex !== undefined && ((_medias$currentMediaI = medias[currentMediaIndex]) === null || _medias$currentMediaI === void 0 ? void 0 : _medias$currentMediaI.productIndex) !== currentProductIndex) {
741
350
  // Find the first media index that corresponds to this product index
742
351
  var mediaIndex = medias.findIndex(function (media) {
743
- return media.productId === currentProductId;
352
+ return media.productIndex === currentProductIndex;
744
353
  });
745
354
  if (mediaIndex !== -1 && mediaIndex !== currentMediaIndex) {
746
- var _swiper$params;
747
355
  setCurrentMediaIndex(mediaIndex);
748
- if (swiper !== null && swiper !== void 0 && (_swiper$params = swiper.params) !== null && _swiper$params !== void 0 && _swiper$params.loop) {
749
- swiper === null || swiper === void 0 || swiper.slideToLoop(mediaIndex);
750
- } else {
751
- swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex);
752
- }
356
+ swiper === null || swiper === void 0 || swiper.slideTo(mediaIndex);
753
357
  }
754
358
  }
755
- }, [currentProductId]);
359
+ }, [currentProductIndex]);
756
360
  var hasSirvMedia = useMemo(function () {
757
361
  var _loop = function _loop(i) {
758
362
  if (medias.find(function (m) {
@@ -775,29 +379,29 @@ function useGallery(_ref) {
775
379
  }),
776
380
  sirvLoaded = _useSirv.sirvLoaded;
777
381
  var onSlideChange = function onSlideChange(swiper) {
778
- if (swiper.el.classList.contains('gallery-main-nested-swiper')) return;
779
-
780
- // Ensure the onSlideChange logic is not executed during the initial setup of the Swiper instance.
781
- if (!swiperIsInitialized) {
782
- setSwiperIsInitialized(true);
783
- return;
784
- }
785
382
  var newMediaIndex = swiper.realIndex;
786
- var media = medias[newMediaIndex];
787
383
  setCurrentMediaIndex(newMediaIndex);
788
- if (setCurrentProductId && media) {
789
- setCurrentProductId(media.productId);
384
+
385
+ // Get the product index corresponding to this media index
386
+ var media = medias[newMediaIndex];
387
+
388
+ // Call the external setCurrentProductIndex if provided
389
+ if (setCurrentProductIndex && media) {
390
+ setCurrentProductIndex(media.productIndex);
790
391
  }
791
392
  };
792
393
 
793
394
  // Get the current product index based on the current media index
794
- medias[currentMediaIndex];
395
+ var currentMedia = medias[currentMediaIndex];
396
+ var derivedCurrentProductIndex = currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.productIndex;
795
397
  return {
796
398
  medias: medias,
797
399
  sirvLoaded: sirvLoaded,
798
400
  thumbsSwiper: thumbsSwiper,
799
401
  swiper: swiper,
800
402
  currentIndex: currentMediaIndex,
403
+ currentProductIndex: currentProductIndex !== null && currentProductIndex !== void 0 ? currentProductIndex : derivedCurrentProductIndex,
404
+ setCurrentProductIndex: setCurrentProductIndex,
801
405
  setThumbsSwiper: setThumbsSwiper,
802
406
  setSwiper: setSwiper,
803
407
  onSlideChange: onSlideChange
@@ -909,7 +513,6 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
909
513
  videoAutolay = _ref.videoAutolay,
910
514
  config = _ref.config;
911
515
  _ref.isCurrentlyVisible;
912
- var onClick = _ref.onClick;
913
516
  var useSirv = false;
914
517
  var _useDivaCore = useDivaCore(),
915
518
  baseSirvUrls = _useDivaCore.state.apiConfig.baseSirvUrls;
@@ -940,11 +543,7 @@ var MediaItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
940
543
  }, media.url);
941
544
  return /*#__PURE__*/jsx("img", {
942
545
  className: "diva-widget-mediaitem",
943
- src: url,
944
- onClick: onClick,
945
- style: {
946
- cursor: onClick ? 'pointer' : 'default'
947
- }
546
+ src: url
948
547
  }, url);
949
548
  });
950
549
 
@@ -997,7 +596,7 @@ var css_248z$1 = ".gallery-XR09O .gallery-thumb .swiper-slide {\n opacity: 0.4;
997
596
  styleInject(css_248z$1);
998
597
 
999
598
  var galleryAdditional = "gallery-additional-oIgEY";
1000
- var css_248z = ".gallery-additional-oIgEY.diva-widget-gallery {\n width: 100%;\n height: 100%;\n --swiper-navigation-color: #bbb;\n --swiper-navigation-sides-offset: 4px;\n}\n\n.gallery-additional-oIgEY .gallery-main {\n height: 85%;\n}\n\n.gallery-additional-oIgEY .gallery-thumb {\n height: 15%;\n}\n\n.gallery-additional-oIgEY .diva-widget-mediaitem,\n.gallery-additional-oIgEY .gallery-image-thumb {\n width: 100%;\n height: 100%;\n -o-object-fit: scale-down;\n object-fit: scale-down;\n}\n\n.gallery-additional-oIgEY .gallery-image-thumb {\n cursor: pointer;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-main {\n height: 100%;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-thumb {\n display: none;\n}\n\n.gallery-additional-oIgEY .gallery-page-number {\n position: absolute;\n bottom: 16px;\n left: 16px;\n border-radius: 15px;\n z-index: 1000;\n padding: 0 16px;\n}\n";
599
+ var css_248z = ".gallery-additional-oIgEY.diva-widget-gallery {\n width: 100%;\n height: 100%;\n --swiper-navigation-color: #bbb;\n --swiper-navigation-sides-offset: 4px;\n}\n\n.gallery-additional-oIgEY .gallery-main {\n height: 85%;\n}\n\n.gallery-additional-oIgEY .gallery-thumb {\n height: 15%;\n}\n\n.gallery-additional-oIgEY .gallery-image,\n.gallery-additional-oIgEY .gallery-image-thumb {\n width: 100%;\n height: 100%;\n -o-object-fit: scale-down;\n object-fit: scale-down;\n}\n\n.gallery-additional-oIgEY .gallery-image-thumb {\n cursor: pointer;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-main {\n height: 100%;\n}\n\n.gallery-additional-oIgEY .mobile .gallery-thumb {\n display: none;\n}\n\n.gallery-additional-oIgEY .gallery-page-number {\n position: absolute;\n bottom: 16px;\n left: 16px;\n border-radius: 15px;\n z-index: 1000;\n padding: 0 16px;\n}\n";
1001
600
  styleInject(css_248z);
1002
601
 
1003
602
  function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -1087,7 +686,7 @@ var focusable = '.smv-cursor-zoom-in, .sirv-zoom-wrapper, .sirv-zoom-map-lens ,.
1087
686
  var noSwiping = 'canvas, model-viewer, .sirv-zoom-map, .zoom-controls, .smv-icon';
1088
687
  var Gallery = function Gallery(props) {
1089
688
  var _medias$find, _props$config$arIconP;
1090
- var _useGallery = useGallery(_objectSpread({}, props)),
689
+ var _useGallery = useGallery(props),
1091
690
  medias = _useGallery.medias,
1092
691
  thumbsSwiper = _useGallery.thumbsSwiper,
1093
692
  swiper = _useGallery.swiper,
@@ -1112,8 +711,6 @@ var Gallery = function Gallery(props) {
1112
711
  url: arUrl,
1113
712
  htmlArElement: htmlArElement === null || htmlArElement === void 0 ? void 0 : htmlArElement.current
1114
713
  }), /*#__PURE__*/jsx(Swiper, _objectSpread(_objectSpread({
1115
- nested: props.nestedSwiper // for popup
1116
- ,
1117
714
  onSwiper: setSwiper,
1118
715
  resizeObserver: false,
1119
716
  onSlideChange: onSlideChange,
@@ -1124,14 +721,12 @@ var Gallery = function Gallery(props) {
1124
721
  swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
1125
722
  },
1126
723
  modules: [Navigation, Thumbs, Pagination],
1127
- className: classNames('gallery-main', props.nestedSwiper ? 'gallery-main-popup-swiper' : ''),
724
+ className: "gallery-main",
1128
725
  speed: props.disableAnimation ? 0 : 500
1129
726
  }, props.config.sliderProp), {}, {
1130
- loop: true,
1131
727
  children: medias.map(function (media, i) {
1132
728
  return /*#__PURE__*/jsx(SwiperSlide, {
1133
729
  id: 'gallery media index ' + i,
1134
- "data-product-id": media.productId,
1135
730
  children: /*#__PURE__*/jsx(MediaItem, {
1136
731
  media: media,
1137
732
  config: props.config,
@@ -1 +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,sBAwD1C,CAAC"}
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,sBAqD1C,CAAC"}
@@ -19,14 +19,12 @@ export interface ArActionIconConfig extends BaseElementConfig {
19
19
  export interface GalleryProps {
20
20
  config: GalleryConfig;
21
21
  products: ProductData[];
22
- currentProductId?: string;
23
- setCurrentProductId?: (id: string) => void;
22
+ currentProductIndex?: number;
23
+ setCurrentProductIndex?: (index: number) => void;
24
24
  disableAnimation?: boolean;
25
25
  setCurrentMedia?: (m: MediaWithProductIndex) => void;
26
- nestedSwiper?: boolean;
27
26
  }
28
27
  export interface MediaWithProductIndex extends Media {
29
28
  productIndex: number;
30
- productId: string;
31
29
  }
32
30
  //# sourceMappingURL=types.d.ts.map
@@ -1 +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;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"}
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;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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK;IAClD,YAAY,EAAE,MAAM,CAAC;CACtB"}
@@ -1,11 +1,13 @@
1
1
  import { GalleryProps, MediaWithProductIndex } from './types';
2
2
  import { SwiperClass } from 'swiper/react';
3
- export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductId, setCurrentProductId, }: GalleryProps): {
3
+ export default function useGallery({ products, config: { functionTypes, add2DImage, add3DImageAsFallback }, currentProductIndex, setCurrentProductIndex, }: GalleryProps): {
4
4
  medias: MediaWithProductIndex[];
5
5
  sirvLoaded: boolean;
6
6
  thumbsSwiper: SwiperClass | null;
7
7
  swiper: SwiperClass | null;
8
8
  currentIndex: number;
9
+ currentProductIndex: number;
10
+ setCurrentProductIndex: ((index: number) => void) | undefined;
9
11
  setThumbsSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
10
12
  setSwiper: import("react").Dispatch<import("react").SetStateAction<SwiperClass | null>>;
11
13
  onSlideChange: (swiper: SwiperClass) => void;
@@ -1 +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,GACpB,EAAE,YAAY;;;;;;;;4BAsCkB,WAAW;EAgC3C"}
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,mBAAmB,EACnB,sBAAsB,GACvB,EAAE,YAAY;;;;;;;;;;4BA+BkB,WAAW;EA6B3C"}
@@ -8,7 +8,6 @@ type Props = {
8
8
  config: MediaItemConfig;
9
9
  isCurrentlyVisible: boolean;
10
10
  videoAutolay?: boolean;
11
- onClick?: () => void;
12
11
  };
13
12
  export declare const MediaItem: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLArViewerElement>>;
14
13
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MediaItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,mFAiCpB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/MediaItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAe,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAiB,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,eAAe,CAAC;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,SAAS,mFAiCpB,CAAC"}
@@ -1,3 +1,3 @@
1
1
  import { CssConfiguration } from '../types';
2
- export declare function useCss(settings?: CssConfiguration, defaultCss?: any, widgetType?: string): void;
2
+ export declare function useCss(settings?: CssConfiguration, defaultCss?: any): void;
3
3
  //# sourceMappingURL=useCss.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useCss.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useCss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,wBAAgB,MAAM,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,UAAU,CAAC,EAAE,GAAG,EAAE,UAAU,CAAC,EAAE,MAAM,QAIxF"}
1
+ {"version":3,"file":"useCss.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useCss.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAG5C,wBAAgB,MAAM,CAAC,QAAQ,CAAC,EAAE,gBAAgB,EAAE,UAAU,CAAC,EAAE,GAAG,QAInE"}
@@ -1,20 +1,12 @@
1
1
  import { ProductData } from '@crystaldesign/diva-core';
2
2
  export interface UseProductDataProps {
3
- productIds?: string[] | string;
3
+ productIds?: string[];
4
4
  variants?: ProductData[];
5
- /**
6
- * Widget type, used for logging
7
- */
8
- widgetType: string;
5
+ onProductLoaded?: (variants: ProductData[]) => void;
9
6
  }
10
- export declare function useProductData({ productIds, variants, widgetType }: UseProductDataProps): {
7
+ export declare function useProductData({ productIds, variants, onProductLoaded }: UseProductDataProps): {
11
8
  productVariants: ProductData[];
12
9
  error: boolean;
13
10
  loading: boolean;
14
- getProductsByDivaNrs: (divaNrs: string[]) => Promise<any>;
15
- getProductByDivaNrAndVariantId: (divaNr: string, variantId?: string) => Promise<any>;
16
- selectedProduct: ProductData | undefined;
17
- setSelectedProductId: (productId: string) => Promise<void>;
18
- setProductCache: (key: string, data: any) => void;
19
11
  };
20
12
  //# sourceMappingURL=useProductData.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useProductData.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductData.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAA0B,MAAM,0BAA0B,CAAC;AAM1F,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAKD,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,mBAAmB;;;;oCA2JzC,MAAM,EAAE,KAAG,OAAO,CAAC,GAAG,CAAC;6CAyBd,MAAM,cAAc,MAAM,KAAG,OAAO,CAAC,GAAG,CAAC;;sCAxE3E,MAAM;2BAmGI,MAAM,QAAQ,GAAG;EAiBhD"}
1
+ {"version":3,"file":"useProductData.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useProductData.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAA0B,MAAM,0BAA0B,CAAC;AAI1F,MAAM,WAAW,mBAAmB;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,EAAE,mBAAmB;;;;EAyD5F"}
@@ -3,7 +3,6 @@
3
3
  *
4
4
  * @param url an url to a css file
5
5
  * @param css the css content as text
6
- * @param widgetId the id of the element to update
7
6
  */
8
- export default function (url?: string, css?: string | string[], widgetType?: string): void;
7
+ export default function (url?: string, css?: string | string[]): void;
9
8
  //# sourceMappingURL=updateCssInDom.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"updateCssInDom.d.ts","sourceRoot":"","sources":["../../../../../src/utils/updateCssInDom.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,UAAU,GAAE,MAAW,QA0BtF"}
1
+ {"version":3,"file":"updateCssInDom.d.ts","sourceRoot":"","sources":["../../../../../src/utils/updateCssInDom.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,WAAW,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,QA0B7D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@crystaldesign/widget-library",
3
- "version": "25.8.0-beta.29",
3
+ "version": "25.8.0-beta.3",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "storybook": "storybook dev -p 6006",
@@ -36,5 +36,5 @@
36
36
  "suiteName": "widget-library",
37
37
  "outputDirectory": "./test-reports"
38
38
  },
39
- "gitHead": "009208a55a7216cb5d6957c5bbd161287f25607d"
39
+ "gitHead": "5f4e87c7ba35c27ebba26cc057cd39631f5df443"
40
40
  }
@@ -1,68 +0,0 @@
1
- interface CacheEntry<T> {
2
- /**
3
- * The actual data after the request is resolved
4
- */
5
- data: T[] | null;
6
- /**
7
- * The promise for the request
8
- */
9
- promise: Promise<T[]> | null;
10
- /**
11
- * The error if the request failed
12
- */
13
- error: Error | null;
14
- /**
15
- * Timestamp when the entry was last updated
16
- */
17
- timestamp: number;
18
- }
19
- interface DivaWidgetCache {
20
- /**
21
- * Get data from cache or fetch if not available
22
- * Implements request deduplication - multiple components requesting the same data
23
- * will share the same promise
24
- * @param key - Cache key (product ID)
25
- * @param fetcher - Function to fetch data
26
- * @returns Promise that resolves to the data
27
- */
28
- getOrFetch: <T>(key: string, fetcher: () => Promise<T[]>) => Promise<T[]>;
29
- /**
30
- * Clear a specific cache entry
31
- * @param key - Cache key to clear
32
- */
33
- clear: (key: string) => void;
34
- /**
35
- * Clear all cache entries
36
- */
37
- clearAll: () => void;
38
- /**
39
- * Set a cache entry
40
- * @param key - Cache key
41
- * @param data - Data to set
42
- */
43
- setCache: (key: string, data: any) => void;
44
- }
45
- interface UseGlobalCacheProps {
46
- /**
47
- * Unique widget instance ID, used for events and logging
48
- */
49
- uniqueWidgetId: string;
50
- /**
51
- * Widget type, used for events and logging
52
- */
53
- widgetType: string;
54
- }
55
- declare global {
56
- interface Window {
57
- __divaWidgetCache: {
58
- cache: Map<string, CacheEntry<any>>;
59
- };
60
- }
61
- }
62
- /**
63
- * Global cache for shared data between widgets of a website
64
- * Simple implementation with request deduplication
65
- */
66
- export declare function useGlobalCache({ uniqueWidgetId, widgetType }: UseGlobalCacheProps): DivaWidgetCache;
67
- export {};
68
- //# sourceMappingURL=useGlobalCache.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useGlobalCache.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useGlobalCache.ts"],"names":[],"mappings":"AAKA,UAAU,UAAU,CAAC,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAC7B;;OAEG;IACH,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,eAAe;IACvB;;;;;;;OAOG;IACH,UAAU,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;IAC1E;;;OAGG;IACH,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B;;OAEG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB;;;;OAIG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC3B;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,iBAAiB,EAAE;YACjB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;SACrC,CAAC;KACH;CACF;AASD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,EAAE,mBAAmB,GAAG,eAAe,CAkGnG"}
@@ -1,32 +0,0 @@
1
- import { ProductData } from '@crystaldesign/diva-core';
2
- interface UseGlobalSelectedProductProps {
3
- selectedProduct?: ProductData;
4
- /**
5
- * Unique widget instance ID, used for events and logging
6
- */
7
- uniqueWidgetId: string;
8
- /**
9
- * Widget type, used for events and logging
10
- */
11
- widgetType: string;
12
- /**
13
- * Function to handle selected product changes
14
- */
15
- handleSelectedProductChange: (product: ProductData) => void;
16
- }
17
- interface UseGlobalSelectedProductReturn {
18
- notifyProductChanged: (product: ProductData) => void;
19
- }
20
- /**
21
- * Hook to get the globally selected product
22
- *
23
- * Initially and when the product changes, it gets selected.
24
- * When ever the selected product is changed, an event is dispatched to notify other widgets, so they can also set the new product as selected.
25
- * The hook also listens for product selection events from other widgets and updates the selected product accordingly.
26
- *
27
- * @param product - The product to select initially
28
- * @returns The selected product and a function to set the selected product
29
- */
30
- export declare function useGlobalSelectedProduct({ selectedProduct, uniqueWidgetId, widgetType, handleSelectedProductChange, }: UseGlobalSelectedProductProps): UseGlobalSelectedProductReturn;
31
- export {};
32
- //# sourceMappingURL=useGlobalSelectedProduct.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useGlobalSelectedProduct.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/useGlobalSelectedProduct.ts"],"names":[],"mappings":"AACA,OAAO,EAAa,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAIlE,UAAU,6BAA6B;IACrC,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B;;OAEG;IACH,cAAc,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,2BAA2B,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC7D;AAED,UAAU,8BAA8B;IACtC,oBAAoB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACtD;AAWD;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,eAAe,EACf,cAAc,EACd,UAAU,EACV,2BAA2B,GAC5B,EAAE,6BAA6B,GAAG,8BAA8B,CAsDhE"}