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

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 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,6 +239,25 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classnames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+// 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,
@@ -254,27 +273,32 @@ var AccordionSection = function (_a) {
   var _f = useState(defaultOpen),
     hasBeenOpened = _f[0],
     setHasBeenOpened = _f[1];
-  // Prevent rapid clicks / infinite loops
+  // Prevent rapid clicks
   var isToggling = useRef(false);
-  var toggleAccordion = useCallback(function () {
+  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;
-    setIsOpen(function (prev) {
-      return !prev;
+    // Use requestAnimationFrame to defer state update
+    requestAnimationFrame(function () {
+      setIsOpen(function (prev) {
+        return !prev;
+      });
+      if (!hasBeenOpened) {
+        setHasBeenOpened(true);
+      }
+      // Reset toggle lock
+      setTimeout(function () {
+        isToggling.current = false;
+      }, 300);
     });
-    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();
-      toggleAccordion();
+      toggleAccordion(e);
     }
   }, [toggleAccordion]);
   // Only render children if not lazy loading, or if accordion has been opened
@@ -291,12 +315,16 @@ 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',
+      maxHeight: isOpen ? 'none' : '0',
+      overflow: isOpen ? 'visible' : 'hidden'
+    }
   }, shouldRenderChildren ? children : null));
 };