@asantemedia-org/edwardsvacuum-design-system 1.6.34 → 1.6.35

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
 import { v4 } from 'uuid';
@@ -239,8 +239,6 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-// Debug mode - set to true to enable console logging
-var DEBUG_ACCORDION = typeof window !== 'undefined' && window.__DEBUG_ACCORDION__;
 var AccordionSection = function (_a) {
   var title = _a.title,
     children = _a.children,
@@ -253,25 +251,26 @@ var AccordionSection = function (_a) {
   var _e = useState(defaultOpen),
     isOpen = _e[0],
     setIsOpen = _e[1];
-  // Track if accordion has ever been opened (for lazy loading)
   var _f = useState(defaultOpen),
     hasBeenOpened = _f[0],
     setHasBeenOpened = _f[1];
+  // Prevent rapid clicks / infinite loops
+  var isToggling = useRef(false);
   var toggleAccordion = useCallback(function () {
-    if (DEBUG_ACCORDION) {
-      console.time("[AccordionSection] Toggle \"".concat(title, "\""));
-      console.log("[AccordionSection] Toggle clicked for \"".concat(title, "\", lazyLoad=").concat(lazyLoad, ", hasBeenOpened=").concat(hasBeenOpened));
-    }
+    // Prevent multiple rapid toggles
+    if (isToggling.current) return;
+    isToggling.current = true;
     setIsOpen(function (prev) {
-      if (!prev && !hasBeenOpened) {
-        setHasBeenOpened(true);
-      }
-      if (DEBUG_ACCORDION) {
-        console.timeEnd("[AccordionSection] Toggle \"".concat(title, "\""));
-      }
       return !prev;
     });
-  }, [hasBeenOpened, title, lazyLoad]);
+    if (!hasBeenOpened) {
+      setHasBeenOpened(true);
+    }
+    // Reset toggle lock after animation
+    setTimeout(function () {
+      isToggling.current = false;
+    }, 350);
+  }, [hasBeenOpened]);
   var handleKeyDown = useCallback(function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
@@ -438,10 +437,9 @@ var ProductCard = function (_a) {
     icon: faArrowRight
   }))))));
 };
-// Debug mode - set to true to enable console logging
-var DEBUG_CARD = typeof window !== 'undefined' && window.__DEBUG_ACCORDION__;
+// Maximum spares to render to prevent browser freeze
+var MAX_SPARES_TO_RENDER = 20;
 var ProductDetailsCard = function (_a) {
-  var _b;
   var className = _a.className,
     title = _a.title;
     _a.imageUrl;
@@ -450,39 +448,32 @@ var ProductDetailsCard = function (_a) {
     _a.onClick;
     var hit = _a.hit,
     facets = _a.facets;
-  if (DEBUG_CARD) {
-    console.log("[ProductDetailsCard] Rendering, spares count: ".concat(((_b = hit === null || hit === void 0 ? void 0 : hit.spares) === null || _b === void 0 ? void 0 : _b.length) || 0));
-  }
-  // Memoize spares rendering to prevent re-computation
+  // Memoize spares rendering with a limit to prevent freeze
   var renderSpares = function () {
-    if (!(hit === null || hit === void 0 ? void 0 : hit.spares) || hit.spares.length === 0) return null;
-    if (DEBUG_CARD) {
-      console.time('[ProductDetailsCard] Rendering spares');
-    }
-    var result = /*#__PURE__*/React.createElement("ul", {
+    if (!(hit === null || hit === void 0 ? void 0 : hit.spares) || !Array.isArray(hit.spares) || hit.spares.length === 0) return null;
+    // Limit the number of spares to prevent freeze
+    var sparesToRender = hit.spares.slice(0, MAX_SPARES_TO_RENDER);
+    return /*#__PURE__*/React.createElement("ul", {
       className: "folding-spares-list"
-    }, hit.spares.map(function (spare, index) {
-      if (DEBUG_CARD && index === 0) {
-        console.log("[ProductDetailsCard] First spare:", spare);
-      }
+    }, sparesToRender.map(function (spare, index) {
+      // Safety check - skip if spare is not a valid object
+      if (!spare || typeof spare !== 'object') return null;
       return /*#__PURE__*/React.createElement("li", {
-        key: spare.objectID || spare.code || index
+        key: spare.objectID || spare.code || "spare-".concat(index)
       }, /*#__PURE__*/React.createElement(ProductCard, {
         cardStyle: "type-card-product",
         className: "cmp-card",
-        title: spare.name,
-        imageUrl: spare['img-product'] || spare.image,
-        imageAlt: spare.name,
-        productPrice: spare.priceValue || spare.price,
+        title: spare.name || 'Spare Part',
+        imageUrl: spare['img-product'] || spare.image || '',
+        imageAlt: spare.name || 'Spare Part',
+        productPrice: spare.priceValue || spare.price || '',
         showProductPrice: false,
-        cardLink: spare.url || spare.link,
+        cardLink: spare.url || spare.link || '#',
         cta: "Go to webshop"
       }));
-    }));
-    if (DEBUG_CARD) {
-      console.timeEnd('[ProductDetailsCard] Rendering spares');
-    }
-    return result;
+    }), hit.spares.length > MAX_SPARES_TO_RENDER && /*#__PURE__*/React.createElement("li", {
+      className: "folding-spares-list__more"
+    }, "+", hit.spares.length - MAX_SPARES_TO_RENDER, " more items"));
   };
   return /*#__PURE__*/React.createElement("div", {
     className: className