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

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, 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';
@@ -589,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')
@@ -702,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,
@@ -720,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
     });
   }))));
 };