funda-ui 4.7.545 → 4.7.555

package/lib/esm/Accordion/Accordion.tsx

@@ -2,13 +2,12 @@ import React, { useState, useRef, useEffect } from 'react';
 
 import Item from './AccordionItem';
 
-import animateStyles from 'funda-utils/dist/cjs/anim';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
 // Adapt the easing parameters of TweenMax
 export enum EasingList {
     linear = 'linear',
+    ease = 'ease',
     easeIn = 'ease-in',
     easeOut = 'ease-out',
     easeInOut = 'ease-in-out'
@@ -18,6 +17,7 @@ export enum EasingList {
 export type AccordionOptionChangeFnType = (element: HTMLDivElement, index: number) => void;
 
 
+
 export type AccordionProps = {
     wrapperClassName?: string;
 	/** The index of the item to be displayed by default. Set to -1 to display none, or an array of indices to display multiple items */
@@ -46,7 +46,7 @@ const Accordion = (props: AccordionProps) => {
         defaultActiveIndex,
         defaultActiveAll = false,
         duration,
-        easing,
+        easing = 'ease',
         alternateCollapse = true,
         arrowOnly = false,
         onChange,
@@ -56,17 +56,16 @@ const Accordion = (props: AccordionProps) => {
     const animSpeed = duration || 200;
     const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
     const rootRef = useRef<any>(null);
-    const animPlaceholderRef = useRef<HTMLDivElement>(null);
-    const [animOK, setAnimOK] = useState<boolean>(false);
-    const [heightObserver, setHeightObserver] = useState<number>(-1);
+    const [heightObserver, setHeightObserver] = useState<number[]>([]);
     const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());  // Keep track of all expanded items
     const animationInProgress = useRef<boolean>(false);
+    const initExpanded = useRef<boolean>(false);
+        
 
     
     function handleClickItem(e: React.MouseEvent) {
         if (animationInProgress.current) return;
         if ((e.target as any).closest('.custom-accordion-header') === null) return;
-        if (animOK) return;
         
         animationInProgress.current = true;
 
@@ -74,34 +73,10 @@ const Accordion = (props: AccordionProps) => {
         const curIndex: number = parseInt(reactDomEl.dataset.index);
         const reactDomWrapperEl: HTMLElement = rootRef.current;
         const $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
-        const $allContent = reactDomWrapperEl.querySelectorAll('.custom-accordion-content__wrapper');
-        const $curContent = reactDomEl.querySelector('.custom-accordion-content__wrapper');
 
         if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
-            setAnimOK(true);
-            setTimeout(() => {
-                setAnimOK(false);
-            }, animSpeed);
-
             if (alternateCollapse) {
-                // Hide other all sibling content
-                Array.prototype.forEach.call($allContent, (node) => {
-                    if (node.clientHeight > 0) {
-                        animateStyles(node, {
-                            startHeight: node.scrollHeight,
-                            endHeight: 0,
-                            speed: animSpeed
-                        } as never, easeType, () => {
-                            animationInProgress.current = false;
-                        });
-                    }
-                });
-
-                // Update all items to collapsed state
-                Array.prototype.forEach.call($li, (node) => {
-                    node.setAttribute('aria-expanded', 'false');
-                });
-
+    
                 // Update expanded items state
                 setExpandedItems(new Set([curIndex]));
             } else {
@@ -109,82 +84,71 @@ const Accordion = (props: AccordionProps) => {
                 setExpandedItems(prev => new Set([...(prev as never), curIndex]));
             }
 
-            reactDomEl.setAttribute('aria-expanded', 'true');
-
-     
-            animateStyles($curContent, {
-                startHeight: 0,
-                endHeight: $curContent.scrollHeight,
-                speed: animSpeed
-            } as never, easeType, () => {
-                setHeightObserver(curIndex);
-                animationInProgress.current = false;
-            });
         } else {
-            reactDomEl.setAttribute('aria-expanded', 'false');
-
+ 
             // Remove current item from expanded items
             setExpandedItems(prev => {
                 const newSet = new Set(prev);
                 newSet.delete(curIndex);
                 return newSet;
             });
-
-            animateStyles($curContent, {
-                startHeight: $curContent.scrollHeight,
-                endHeight: 0,
-                speed: animSpeed
-            } as never, easeType, () => {
-                animationInProgress.current = false;
-            });
         }
 
+        // Reset animation flag after transition duration
+        setTimeout(() => {
+            animationInProgress.current = false;
+        }, animSpeed);
+
         onChange?.(reactDomEl, curIndex);
     }
 
 
-    // Initialize expanded items based on defaultActiveIndex or defaultActiveAll
+    //Initialize expanded items based on defaultActiveIndex or defaultActiveAll
     useEffect(() => {
-        if (defaultActiveAll && children && rootRef.current && animPlaceholderRef.current) {
+
+        // Skip the default height initialization to prevent re-initialization. 
+        // This method is useful when you want to manually control when the accordion should 
+        // skip the automatic height initialization process, especially useful when `children` change frequently.
+        if (initExpanded.current === true) return;
+
+        if (defaultActiveAll && children && rootRef.current) {
             const allIndices = Array.from({ length: (children as any[]).length }, (_, i) => i);
             setExpandedItems(new Set(allIndices));
+            // Set heightObserver for all items to enable height monitoring
+            setHeightObserver(allIndices);
             
-            // Actually expand all items without animation
-            const $allItems = rootRef.current.querySelectorAll('.custom-accordion-item');
-            Array.prototype.forEach.call($allItems, (node, index) => {
-                const $curContent = node.querySelector('.custom-accordion-content__wrapper');
-                if ($curContent) {
-                    // !!! Don't use the .custom-accordion-contentwrapper height directly, it may be more than a dozen pixels
-                    $curContent.style.height = `${node.querySelector('.custom-accordion-content__wrapper > .custom-accordion-content').scrollHeight}px`;
-                }
-            });
-
-
-            animateStyles(animPlaceholderRef.current as HTMLDivElement, {
-                startHeight: 0,
-                endHeight: 10,
-                speed: animSpeed
-            } as never, easeType, () => {
-                setTimeout(() => {
-
-                }, animSpeed);
-            });
-
-
+            //
+            initExpanded.current = true;
         } else if (defaultActiveIndex !== undefined) {
             const initialExpanded = new Set<number>();
+            const observerIndices: number[] = [];
+            
             if (Array.isArray(defaultActiveIndex)) {
-                defaultActiveIndex.forEach(index => initialExpanded.add(index));
+                defaultActiveIndex.forEach(index => {
+                    initialExpanded.add(index);
+                    observerIndices.push(index);
+                });
             } else if (typeof defaultActiveIndex === 'number') {
                 initialExpanded.add(defaultActiveIndex);
+                observerIndices.push(defaultActiveIndex);
             }
+            
             setExpandedItems(initialExpanded);
+            // Set heightObserver for default active items to enable height monitoring
+            if (observerIndices.length > 0) {
+                setHeightObserver(observerIndices);
+            }
+
+            //
+            initExpanded.current = true;
+
         }
+        
     }, [defaultActiveIndex, defaultActiveAll, children]);
     
+    
     return (
         <>
-            <div className="custom-accordion-anim-placeholder" style={{display: 'none'}} ref={animPlaceholderRef}></div>
             <div className={combinedCls(
                 'custom-accordion-item',
                 clsWrite(wrapperClassName, 'accordion')
@@ -204,6 +168,7 @@ const Accordion = (props: AccordionProps) => {
                         index={i}
                         defaultActiveAll={defaultActiveAll}
                         animSpeed={animSpeed}
+                        easing={easeType}
                         arrowOnly={arrowOnly}
                         heightObserver={heightObserver}
                         activeItem={_defaultActive}

package/lib/esm/Accordion/AccordionItem.tsx

@@ -4,11 +4,11 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 export type AccordionItemProps = {
-    heightObserver?: number;
+    heightObserver?: number[];
     index?: number;
     arrowOnly?: boolean;
     animSpeed?: number;
-    easeType?: string;
+    easing?: string;
     /** Class of items */
     itemClassName?: string;
     itemContentWrapperClassName?: string;
@@ -41,7 +41,7 @@ const AccordionItem = (props: AccordionItemProps) => {
         heightObserver,
         index,
         animSpeed,
-        easeType,
+        easing,
         arrowOnly,
         itemClassName,
         itemContentWrapperClassName,
@@ -83,6 +83,19 @@ const AccordionItem = (props: AccordionItemProps) => {
         onToggleEv?.(e);
     };
 
+
+    // Generate CSS transition style
+    const getTransitionStyle = () => {
+        const transitionDuration = `${animSpeed}ms`;
+        const transitionTiming = easing;
+        
+        return {
+            transition: `max-height ${transitionDuration} ${transitionTiming}`,
+            overflow: 'hidden'
+        };
+    };
+
+
     useEffect(() => {
         if (triggerRef.current && typeof onItemCollapse === 'function') {
             if (isFirstRender.current) {
@@ -91,7 +104,7 @@ const AccordionItem = (props: AccordionItemProps) => {
             }
             onItemCollapse(triggerRef.current, iconRef.current as HTMLElement, isExpanded);
         }
-    }, [isExpanded, onItemCollapse]);
+    }, [isExpanded]);
 
     useEffect(() => {
         if (contentWrapperRef.current && !initialHeightSet.current) {
@@ -101,47 +114,55 @@ const AccordionItem = (props: AccordionItemProps) => {
                 setInternalExpanded(shouldBeExpanded);
             }
             
-            // Set initial height when activeItem is true
+            // Set initial maxHeight when activeItem is true
             if (shouldBeExpanded && contentRef.current) {
                 const contentHeight = contentRef.current.offsetHeight;
-                contentWrapperRef.current.style.height = `${contentHeight}px`;
+                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
             }
         }
     }, [activeItem, controlledExpanded]);
 
     useEffect(() => {
+        if (!heightObserver || !Array.isArray(heightObserver) || !heightObserver.includes(index as number)) return;
 
-        if (parseFloat(heightObserver as never) !== index) return;
-
-        // When the content height changes dynamically, change the height of the wrapper
+        // When the content height changes dynamically, change the maxHeight of the wrapper
         if (contentRef.current && contentWrapperRef.current) {
             const _contentPadding = window.getComputedStyle(contentRef.current as HTMLDivElement).getPropertyValue('padding-bottom');
        
             observer.current = new ResizeObserver(entries => {
-
                 if (!Array.isArray(entries) || !entries.length) {
                     return;
                 }
 
                 entries.forEach(entry => {
-                    if (contentWrapperRef.current !== null) (contentWrapperRef.current as HTMLDivElement).style.height = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+                    if (contentWrapperRef.current !== null && isExpanded) {
+                        (contentWrapperRef.current as HTMLDivElement).style.maxHeight = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+                    }
                 });
             });
             observer.current.observe(contentRef.current);
-
         }
 
         return () => {
             if (contentRef.current) observer.current?.unobserve(contentRef.current);
         };
 
+    }, [heightObserver, isExpanded]);
 
-    }, [heightObserver]);
-
+    // Update maxHeight when expanded state changes
+    useEffect(() => {
+        if (contentWrapperRef.current && contentRef.current) {
+            if (isExpanded) {
+                const contentHeight = contentRef.current.scrollHeight;
+                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
+            } else {
+                contentWrapperRef.current.style.maxHeight = '0px';
+            }
+        }
+    }, [isExpanded]);
 
     return (
         <>
-
             <div
                 {...attributes}
                 data-index={index}
@@ -211,10 +232,7 @@ const AccordionItem = (props: AccordionItemProps) => {
                         clsWrite(itemContentWrapperClassName, 'accordion-collapse')
                     )}
                     role="tabpanel" 
-                    style={{
-                        height: '0',
-                        overflow: 'hidden'   // "overflow" affects the width, so add `w-100` to `custom-accordion-content__wrapper`
-                    }}>
+                    style={getTransitionStyle()}>
                     <div className={combinedCls(
                         'custom-accordion-content',
                         clsWrite(itemContentClassName, 'accordion-body')

package/lib/esm/Accordion/index.tsx

@@ -1,2 +1,2 @@
 export { default as Accordion } from './Accordion';
-export { default as AccordionItem } from './AccordionItem';
+export { default as AccordionItem } from './AccordionItem';

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.545",
+  "version": "4.7.555",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",