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

package/dist/index.esm.js

@@ -1,6 +1,6 @@
-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 { faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
 import { v4 } from 'uuid';
 
 /******************************************************************************
@@ -239,8 +239,25 @@ 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__;
+// Simple chevron SVG to avoid FontAwesome dependency issues
+var ChevronIcon = function (_a) {
+  var isOpen = _a.isOpen;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    style: {
+      transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+      transition: 'transform 0.2s ease'
+    }
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M2 4L6 8L10 4",
+    stroke: "#C4262E",
+    strokeWidth: "2",
+    strokeLinecap: "round"
+  }));
+};
 var AccordionSection = function (_a) {
   var title = _a.title,
     children = _a.children,
@@ -253,29 +270,35 @@ 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];
-  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));
-    }
-    setIsOpen(function (prev) {
-      if (!prev && !hasBeenOpened) {
+  // Prevent rapid clicks
+  var isToggling = useRef(false);
+  var toggleAccordion = useCallback(function (e) {
+    // Stop event propagation to prevent AEM handlers
+    e.stopPropagation();
+    e.preventDefault();
+    // Prevent multiple rapid toggles
+    if (isToggling.current) return;
+    isToggling.current = true;
+    // Use requestAnimationFrame to defer state update
+    requestAnimationFrame(function () {
+      setIsOpen(function (prev) {
+        return !prev;
+      });
+      if (!hasBeenOpened) {
         setHasBeenOpened(true);
       }
-      if (DEBUG_ACCORDION) {
-        console.timeEnd("[AccordionSection] Toggle \"".concat(title, "\""));
-      }
-      return !prev;
+      // Reset toggle lock
+      setTimeout(function () {
+        isToggling.current = false;
+      }, 300);
     });
-  }, [hasBeenOpened, title, lazyLoad]);
+  }, [hasBeenOpened]);
   var handleKeyDown = useCallback(function (e) {
     if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      toggleAccordion();
+      toggleAccordion(e);
     }
   }, [toggleAccordion]);
   // Only render children if not lazy loading, or if accordion has been opened
@@ -292,12 +315,14 @@ var AccordionSection = function (_a) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "accordion-section__title"
   }, title), /*#__PURE__*/React.createElement("span", {
-    className: "accordion-section__icon ".concat(isOpen ? 'rotated' : '')
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faChevronDown,
-    color: "#C4262EFF"
+    className: "accordion-section__icon"
+  }, /*#__PURE__*/React.createElement(ChevronIcon, {
+    isOpen: isOpen
   }))), /*#__PURE__*/React.createElement("div", {
-    className: "accordion-section__content ".concat(isOpen ? 'open' : '')
+    className: "accordion-section__content",
+    style: {
+      display: isOpen ? 'block' : 'none'
+    }
   }, shouldRenderChildren ? children : null));
 };
 
@@ -438,10 +463,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 +474,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