@asantemedia-org/edwardsvacuum-design-system 1.6.30 → 1.6.31

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown, faChevronRight, faArrowRight } from '@fortawesome/pro-solid-svg-icons';
 import { v4 } from 'uuid';
@@ -245,13 +245,32 @@ var AccordionSection = function (_a) {
     _b = _a.className,
     className = _b === void 0 ? '' : _b,
     _c = _a.defaultOpen,
-    defaultOpen = _c === void 0 ? false : _c;
-  var _d = useState(defaultOpen),
-    isOpen = _d[0],
-    setIsOpen = _d[1];
-  var toggleAccordion = function () {
-    setIsOpen(!isOpen);
-  };
+    defaultOpen = _c === void 0 ? false : _c,
+    _d = _a.lazyLoad,
+    lazyLoad = _d === void 0 ? false : _d;
+  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 () {
+    setIsOpen(function (prev) {
+      if (!prev && !hasBeenOpened) {
+        setHasBeenOpened(true);
+      }
+      return !prev;
+    });
+  }, [hasBeenOpened]);
+  var handleKeyDown = useCallback(function (e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      toggleAccordion();
+    }
+  }, [toggleAccordion]);
+  // Only render children if not lazy loading, or if accordion has been opened
+  var shouldRenderChildren = !lazyLoad || hasBeenOpened;
   return /*#__PURE__*/React.createElement("div", {
     className: "accordion-section ".concat(className, " ").concat(isOpen ? 'open' : '')
   }, /*#__PURE__*/React.createElement("h4", {
@@ -259,12 +278,7 @@ var AccordionSection = function (_a) {
     onClick: toggleAccordion,
     role: "button",
     tabIndex: 0,
-    onKeyDown: function (e) {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        toggleAccordion();
-      }
-    },
+    onKeyDown: handleKeyDown,
     "aria-expanded": isOpen
   }, /*#__PURE__*/React.createElement("span", {
     className: "accordion-section__title"
@@ -275,7 +289,7 @@ var AccordionSection = function (_a) {
     color: "#C4262EFF"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "accordion-section__content ".concat(isOpen ? 'open' : '')
-  }, children));
+  }, shouldRenderChildren ? children : null));
 };
 
 // Utility function to retrieve correct SCSS module class names
@@ -299,22 +313,14 @@ var cardSizeMapping = function (size) {
   }
   return classSrting;
 };
-var getImageUrl = function (imageUrl) {
+// Static placeholder URL - avoid dynamic require() which freezes in AEM
+var PLACEHOLDER_IMAGE = "/assets/edwards-webshop-placeholder.png";
+var getImageUrl = function (imageUrl, placeholder) {
   if (imageUrl) {
-    return imageUrl; // If an image URL is provided, use it.
-  }
-  try {
-    // Try loading from local assets (works in Storybook)
-    return require("../../../assets/edwards-webshop-placeholder.png").default.src;
-  } catch (error) {
-    // If that fails, load from node_modules (works in host app)
-    try {
-      return require("@asantemedia-org/edwardsvacuum-design-system/dist/assets/edwards-webshop-placeholder.png").default;
-    } catch (error) {
-      console.error("Placeholder image not found in either local assets or node_modules.", error);
-      return ""; // Fallback empty string if no image is found
-    }
+    return imageUrl;
   }
+  // Use provided placeholder or default static path
+  return PLACEHOLDER_IMAGE;
 };
 var Card = function (_a) {
   var contentCategoryLabel = _a.contentCategoryLabel,
@@ -455,7 +461,8 @@ var ProductDetailsCard = function (_a) {
     className: "cmp-card--type-product_details__spares-list"
   }, hit.spares && hit.spares.length > 0 && /*#__PURE__*/React.createElement(AccordionSection, {
     title: "Spares & Parts",
-    className: "folding-spares-holder"
+    className: "folding-spares-holder",
+    lazyLoad: true
   }, /*#__PURE__*/React.createElement("ul", {
     className: "folding-spares-list"
   }, hit.spares.map(function (spare, index) {