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

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, 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';
@@ -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) {
@@ -582,48 +589,46 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
     placeholder = _a.placeholder,
     analytics = _a.analytics,
     facets = _a.facets;
-  var _g = useState(isLoading),
-    isLoadingState = _g[0],
-    setIsLoadingState = _g[1];
-  useEffect(function () {
-    if (isLoading !== isLoadingState) {
-      setIsLoadingState(isLoading);
-    }
-  }, [isLoading]);
   // Helper to resolve CSS module class names properly
-  var getClass = function (suffix) {
+  var getClass = useCallback(function (suffix) {
     var fullClassName = "cmpAlgoliaDynamicSearchWidget".concat(suffix);
     return useScopedStyles && styles ? styles[fullClassName] : fullClassName;
-  };
+  }, [useScopedStyles, styles]);
   // Helper for modifier classes (without the base prefix)
-  var getModifierClass = function (modifier) {
+  var getModifierClass = useCallback(function (modifier) {
     return useScopedStyles && styles ? styles[modifier] : modifier;
-  };
-  // Background styling mapping
-  var backgroundStyles = {
-    "dark-grey": {
-      buttonStyle: "outlineWhite",
-      containerBackground: getModifierClass('hasStyleGreyBackground'),
-      textColour: "white"
-    },
-    "silver": {
+  }, [useScopedStyles, styles]);
+  // Memoize background styling to prevent re-renders
+  var widgetStyleProps = useMemo(function () {
+    var backgroundStyles = {
+      "dark-grey": {
+        buttonStyle: "outlineWhite",
+        containerBackground: getModifierClass('hasStyleGreyBackground'),
+        textColour: "white"
+      },
+      "silver": {
+        buttonStyle: "primary",
+        containerBackground: getModifierClass('hasStyleSilverGradientBackground'),
+        textColour: "black"
+      }
+    };
+    return backgroundStyles[backgroundColour.toLowerCase()] || {
       buttonStyle: "primary",
-      containerBackground: getModifierClass('hasStyleSilverGradientBackground'),
+      containerBackground: "",
       textColour: "black"
-    }
-  };
-  var widgetStyleProps = backgroundStyles[backgroundColour.toLowerCase()] || {
-    buttonStyle: "primary",
-    containerBackground: ""};
+    };
+  }, [backgroundColour, getModifierClass]);
   if (!hits || hits.length === 0) {
     return null;
   }
   var baseClass = getClass('');
-  // Build wrapper class names
-  var wrapperClasses = [baseClass, widgetStyleProps.containerBackground, isLoadingState ? getModifierClass('isLoading') : '', queryType === 'content' ? getModifierClass('isQueryContent') : ''].filter(Boolean).join(' ');
+  // Memoize wrapper class names
+  var wrapperClasses = useMemo(function () {
+    return [baseClass, widgetStyleProps.containerBackground, isLoading ? getModifierClass('isLoading') : '', queryType === 'content' ? getModifierClass('isQueryContent') : ''].filter(Boolean).join(' ');
+  }, [baseClass, widgetStyleProps.containerBackground, isLoading, queryType, getModifierClass]);
   return /*#__PURE__*/React.createElement("div", {
     className: wrapperClasses
-  }, isLoadingState && /*#__PURE__*/React.createElement("div", {
+  }, isLoading && /*#__PURE__*/React.createElement("div", {
     className: getClass('__placeholder')
   }, /*#__PURE__*/React.createElement("div", {
     className: getClass('__placeholder__loading')
@@ -695,6 +700,13 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
       default:
         return null;
     }
+    // Only create onClick handler if analytics is provided
+    var handleClick = analytics ? function () {
+      var objectID = hit.objectID,
+        __position = hit.__position,
+        __queryID = hit.__queryID;
+      analytics(objectID, __queryID, __position);
+    } : undefined;
     return /*#__PURE__*/React.createElement(Component, {
       key: hit.objectID || index,
       className: cardClassName,
@@ -713,13 +725,7 @@ var AlgoliaDynamicSearch = function (_a, useScopedStyles, styles) {
       cardLink: cardLink,
       city: hit.city,
       country: hit.country,
-      onClick: function () {
-        if (!analytics) return;
-        var objectID = hit.objectID,
-          __position = hit.__position,
-          __queryID = hit.__queryID;
-        analytics(objectID, __queryID, __position);
-      }
+      onClick: handleClick
     });
   }))));
 };