funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/Accordion/Accordion.tsx

@@ -1,185 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-
-import Item from './AccordionItem';
-
-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'
-}
-
-
-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 */
-	defaultActiveIndex?: number | number[];
-    /** Whether to expand all items by default */
-    defaultActiveAll?: boolean;
-	/** The number of milliseconds(ms) each iteration of the animation takes to complete */
-	duration?: number;
-    /** Types of easing animation */
-    easing?: string;
-    /**  Mutually exclusive alternate expansion between the levels */
-    alternateCollapse?: boolean;
-    /** Only allow arrow to trigger the accordion */
-    arrowOnly?: boolean;
-    /** This function is called whenever the data is updated.
-     *  Exposes the JSON format data about the option as an argument.
-     */
-    onChange?: AccordionOptionChangeFnType | null;
-	/** -- */
-	children: React.ReactNode;
-};
-
-const Accordion = (props: AccordionProps) => {
-    const {
-        wrapperClassName,
-        defaultActiveIndex,
-        defaultActiveAll = false,
-        duration,
-        easing = 'ease',
-        alternateCollapse = true,
-        arrowOnly = false,
-        onChange,
-        children
-    } = props;
-
-    const animSpeed = duration || 200;
-    const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
-    const rootRef = useRef<any>(null);
-    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;
-        
-        animationInProgress.current = true;
-
-        const reactDomEl: any = arrowOnly ? e.currentTarget.closest('.custom-accordion-item') : e.currentTarget;
-        const curIndex: number = parseInt(reactDomEl.dataset.index);
-        const reactDomWrapperEl: HTMLElement = rootRef.current;
-        const $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
-
-        if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
-            if (alternateCollapse) {
-    
-                // Update expanded items state
-                setExpandedItems(new Set([curIndex]));
-            } else {
-                // Add current item to expanded items
-                setExpandedItems(prev => new Set([...(prev as never), curIndex]));
-            }
-
-        } else {
- 
-            // Remove current item from expanded items
-            setExpandedItems(prev => {
-                const newSet = new Set(prev);
-                newSet.delete(curIndex);
-                return newSet;
-            });
-        }
-
-        // Reset animation flag after transition duration
-        setTimeout(() => {
-            animationInProgress.current = false;
-        }, animSpeed);
-
-        onChange?.(reactDomEl, curIndex);
-    }
-
-
-    //Initialize expanded items based on defaultActiveIndex or defaultActiveAll
-    useEffect(() => {
-
-        // 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);
-            
-            //
-            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);
-                    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={combinedCls(
-                'custom-accordion-item',
-                clsWrite(wrapperClassName, 'accordion')
-            )} role="tablist" ref={rootRef}>
-                {(children != null) ? (children as any[]).map((item, i) => {
-                    const childProps = { ...item.props };
-                    let _defaultActive = false;
-                    
-                    if (Array.isArray(defaultActiveIndex)) {
-                        _defaultActive = defaultActiveIndex.includes(i);
-                    } else if (typeof defaultActiveIndex === 'number') {
-                        _defaultActive = defaultActiveIndex === i;
-                    }
-                    
-                    return <Item
-                        key={"item" + i}
-                        index={i}
-                        defaultActiveAll={defaultActiveAll}
-                        animSpeed={animSpeed}
-                        easing={easeType}
-                        arrowOnly={arrowOnly}
-                        heightObserver={heightObserver}
-                        activeItem={_defaultActive}
-                        onToggleEv={handleClickItem}
-                        isExpanded={expandedItems.has(i)}   // Both controlled and uncontrolled modes are implemented
-                        {...childProps}
-                    />;
-                }) : null}
-            </div>
-        </>
-    );
-};
-
-export default Accordion;

package/publish/lib/esm/Accordion/AccordionItem.tsx

@@ -1,248 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-export type AccordionItemProps = {
-    heightObserver?: number[];
-    index?: number;
-    arrowOnly?: boolean;
-    animSpeed?: number;
-    easing?: string;
-    /** Class of items */
-    itemClassName?: string;
-    itemContentWrapperClassName?: string;
-    itemContentClassName?: string;
-    itemTriggerClassName?: string;
-    itemHeaderClassName?: string;
-    itemStyle?: React.CSSProperties;
-    itemTriggerIcon?: React.ReactNode;
-	/** Set an item to activate by default */
-	activeItem?: string | boolean | undefined;
-	/** Specify a title */
-	title?: React.ReactNode;
-	/** Handling events for collapsing item */
-	onToggleEv?: React.MouseEventHandler<HTMLElement>;
-	/** Handling events when the animation execution is complete */
-	onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
-    /** Callback when trigger state changes, provides trigger element and expanded state */
-    onItemCollapse?: (trigger: HTMLElement,  icon: HTMLElement, isExpanded: boolean) => void;
-	/** Control expanded state from parent */
-	isExpanded?: boolean;
-	/** -- */
-	children: React.ReactNode;
-};
-
-
-
-
-const AccordionItem = (props: AccordionItemProps) => {
-    const { 
-        heightObserver,
-        index,
-        animSpeed,
-        easing,
-        arrowOnly,
-        itemClassName,
-        itemContentWrapperClassName,
-        itemContentClassName,
-        itemTriggerClassName,
-        itemHeaderClassName,
-        itemTriggerIcon,
-        itemStyle,
-        activeItem,
-        title,
-        onToggleEv,
-        onTransitionEnd,
-        onItemCollapse,
-        isExpanded: controlledExpanded,
-        children,
-        ...attributes
-    } = props;
-    
-    const [internalExpanded, setInternalExpanded] = useState<boolean>(false);
-    const isFirstRender = useRef<boolean>(true);
-    const initialHeightSet = useRef<boolean>(false);
-
-    // Use controlled or uncontrolled expanded state
-    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
-
-    const observer = useRef<ResizeObserver | null>(null);
-    const contentWrapperRef = useRef<HTMLDivElement | null>(null);
-    const contentRef = useRef<HTMLDivElement | null>(null);
-    const triggerRef = useRef<HTMLDivElement | HTMLButtonElement | null>(null);
-    const iconRef = useRef<HTMLSpanElement | null>(null);
-
-    const handleToggle = (e: React.MouseEvent<HTMLElement>) => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (controlledExpanded === undefined) {
-            setInternalExpanded(prev => !prev);
-        }
-        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) {
-                isFirstRender.current = false;
-                return;
-            }
-            onItemCollapse(triggerRef.current, iconRef.current as HTMLElement, isExpanded);
-        }
-    }, [isExpanded]);
-
-    useEffect(() => {
-        if (contentWrapperRef.current && !initialHeightSet.current) {
-            initialHeightSet.current = true;
-            const shouldBeExpanded = typeof activeItem !== 'undefined' && activeItem !== false;
-            if (controlledExpanded === undefined) {
-                setInternalExpanded(shouldBeExpanded);
-            }
-            
-            // Set initial maxHeight when activeItem is true
-            if (shouldBeExpanded && contentRef.current) {
-                const contentHeight = contentRef.current.offsetHeight;
-                contentWrapperRef.current.style.maxHeight = `${contentHeight}px`;
-            }
-        }
-    }, [activeItem, controlledExpanded]);
-
-    useEffect(() => {
-        if (!heightObserver || !Array.isArray(heightObserver) || !heightObserver.includes(index as number)) return;
-
-        // 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 && 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]);
-
-    // 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}
-                className={combinedCls(
-                    'custom-accordion-item',
-                    clsWrite(itemClassName, 'accordion-item'),
-                    isExpanded ? ' active' : ''
-                )}
-                onClick={arrowOnly ? undefined : handleToggle}
-                onTransitionEnd={typeof onTransitionEnd === 'function' ? onTransitionEnd : undefined}
-                aria-expanded={isExpanded ? 'true' : 'false'}
-                style={typeof itemStyle !== 'undefined' ? itemStyle : {}}
-            >
-
-                <div 
-                    className={combinedCls(
-                        'custom-accordion-header',
-                        clsWrite(itemHeaderClassName, 'accordion-header position-relative')
-                    )} 
-                    role="presentation"
-                >
-
-                    {arrowOnly ? (
-                        <div 
-                            ref={triggerRef as React.RefObject<HTMLDivElement>}
-                            tabIndex={-1} 
-                            className={combinedCls(
-                                'custom-accordion-trigger',
-                                clsWrite(itemTriggerClassName, 'accordion-button'),
-                                isExpanded ? 'active' : 'collapsed'
-                            )}  
-                        >
-                            {title}
-                        </div>
-                    ) : (
-                        <button 
-                            ref={triggerRef as React.RefObject<HTMLButtonElement>}
-                            tabIndex={-1} 
-                            className={combinedCls(
-                                'custom-accordion-trigger',
-                                clsWrite(itemTriggerClassName, 'accordion-button'),
-                                isExpanded ? 'active' : 'collapsed'
-                            )}  
-                            type="button"
-                        >
-                            {title}
-                        </button>
-                    )}
-                    
-
-                
-                    <span 
-                        ref={iconRef}
-                        onClick={!arrowOnly ? undefined : handleToggle}
-                        className="custom-accordion-trigger__icon"
-                        style={!arrowOnly ? {pointerEvents: 'none'} : {cursor: 'pointer'}}
-                    >
-                        {itemTriggerIcon}
-                    </span>
-        
-                    
-                </div>
-                <div 
-                    ref={contentWrapperRef} 
-                    className={combinedCls(
-                        'custom-accordion-content__wrapper w-100',
-                        clsWrite(itemContentWrapperClassName, 'accordion-collapse')
-                    )}
-                    role="tabpanel" 
-                    style={getTransitionStyle()}>
-                    <div className={combinedCls(
-                        'custom-accordion-content',
-                        clsWrite(itemContentClassName, 'accordion-body')
-                    )} ref={contentRef} >
-                        {children}
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default AccordionItem;

package/publish/lib/esm/Accordion/index.tsx

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

package/publish/lib/esm/BackToTop/index.scss

@@ -1,47 +0,0 @@
-/* ======================================================
-   <!-- Back to Top -->
-/* ====================================================== */
-
-.back-to-top {
-	button {
-		transform: scale(0);
-		position: fixed;
-		bottom: 12px;
-		right: 12px;
-		width: 50px;
-		height: 50px;
-		z-index: 99;
-		text-align: center;
-        transition: .1s ease-in-out;
-
-		display: block;
-		outline: none;
-		border: none;
-		background-color: transparent;
-        cursor: pointer;
-
-        svg {
-            transition: .1s ease-in-out;
-        }
-
-        &:hover {
-            svg {
-                opacity: .7;
-            }
-        }
-
-		&.active {
-			transform: scale(1);
-		}
-
-		&:active,
-		&:focus {
-			outline: none;
-		}	
-
-		i {
-			font-size: 1.5rem;
-		}	
-	}
-
-}

package/publish/lib/esm/BackToTop/index.tsx

@@ -1,177 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-
-
-import useWindowScroll from 'funda-utils/dist/cjs/useWindowScroll';
-import {
-    easeLinear,
-    easeInQuad,
-    easeOutQuad,
-    easeInOutQuad
-} from 'funda-utils/dist/cjs/easing';
-
-
-// Adapt the easing parameters of TweenMax
-export enum EasingList {
-    linear = 'linear',
-    easeIn = 'ease-in',
-    easeOut = 'ease-out',
-    easeInOut = 'ease-in-out'
-}
-
-
-export type BackToTopProps = {
-    /** Speed of scrolling up. Amount of time measured in milliseconds. */
-    speed?: number;
-    /** Types of easing animation */
-    easing: string;
-    /** Button Icon */
-    btnIcon?: React.ReactNode;
-};
-
-
-const BackToTop = (props: BackToTopProps) => {
-
-
-    const {
-        btnIcon,
-    } = props;
-
-    const easeType: string = EasingList[props.easing as never];
-    const speed: number = props.speed ? props.speed : 500;
-
-
-    const btnRef = useRef<any>(null);
-    const [isAtRange, setIsAtRange] = useState<boolean>(false);
-
-
-    // Add function to the element that should be used as the scrollable area.
-    const [scrollData, windowScrollUpdate] = useWindowScroll({
-        performance: ['throttle', 5],   // "['debounce', 500]" or "['throttle', 500]"
-        handle: (scrollData: any) => {
-            const scrollTop = scrollData.y;
-
-            if (scrollTop < window.innerHeight / 2) {
-                setIsAtRange(false);
-            } else {
-                setIsAtRange(true);
-            }
-        }
-    });
-
-
-
-    function moveToTop() {
-
-        const duration = speed;
-
-        const scrollToTarget = function (target: HTMLElement) {
-
-            const top = target.getBoundingClientRect().top;
-            const startPos = window.pageYOffset;
-            const diff = top;
-
-
-            const start = new Date().getTime();
-            const from = 0;
-            const to = 100;
-            let requestId: any;
-
-            const loop = function () {
-
-                //easing
-                const time = new Date().getTime() - start;
-                let val;
-
-                switch (easeType) {
-                    case "linear":
-                        val = easeLinear(time, from, to - from, duration);
-                        break;
-                    case "ease-in":
-                        val = easeInQuad(time, from, to - from, duration);
-                        break;
-                    case "ease-out":
-                        val = easeOutQuad(time, from, to - from, duration);
-                        break;
-                    case "ease-in-out":
-                        val = easeInOutQuad(time, from, to - from, duration);
-                        break;
-
-                    default:
-                        val = easeLinear(time, from, to - from, duration);
-                }
-
-                // Elapsed time in miliseconds
-                const percent = val / 100;
-
-                window.scrollTo(0, startPos + diff * percent);
-
-                if (time < duration) {
-                    // Continue moving
-                    requestId = window.requestAnimationFrame(loop);
-                } else {
-                    window.cancelAnimationFrame(requestId);
-                }
-            };
-            requestId = window.requestAnimationFrame(loop);
-        };
-
-        scrollToTarget(document.body);
-
-    }
-
-
-    function handleClick(e: any) {
-        e.preventDefault();
-        moveToTop();
-    }
-
-
-    useEffect(() => {
-
-
-        //Hide other pages button of back-to-top
-        btnRef.current?.classList.remove('active');
-
-
-        //
-        btnRef.current?.removeEventListener('pointerdown', handleClick);
-        btnRef.current?.addEventListener('pointerdown', handleClick);
-
-
-        return () => {
-            btnRef.current?.removeEventListener('pointerdown', handleClick);
-
-            //Hide other pages button of back-to-top
-            btnRef.current?.classList.remove('active');
-
-        }
-
-
-    }, []);
-
-    return (
-        <>
-            <div className="back-to-top" ref={btnRef}>
-                <button type="button" className={isAtRange ? 'active' : ''}>
-                    {btnIcon || <>
-                        <svg width="40px" fill="#000000" viewBox="0 0 96.522 96.522">
-                            <g>
-                                <path d="M74.692,65.181l-9.044-7.321c1.319-5.557,1.988-11.532,1.988-17.761c0-19.963-14.052-38.367-18.719-39.988
-		c-0.426-0.147-0.887-0.147-1.313,0c-4.667,1.621-18.719,20.025-18.719,39.988c0,6.229,0.669,12.205,1.99,17.761l-9.045,7.321
-		c-0.541,0.438-0.815,1.127-0.724,1.817l3.69,27.787c0.104,0.787,0.663,1.438,1.425,1.658c0.765,0.22,1.582-0.029,2.092-0.638
-		l14.413-17.225c3.543,2.163,7.527,2.163,11.07,0l14.411,17.225c0.387,0.461,0.951,0.717,1.534,0.717
-		c0.186,0,0.373-0.026,0.558-0.079c0.762-0.221,1.32-0.871,1.425-1.658l3.69-27.787C75.507,66.309,75.233,65.619,74.692,65.181z
-		 M48.262,39.619c-4.418,0-8-3.582-8-8s3.582-8,8-8s8,3.582,8,8S52.68,39.619,48.262,39.619z"/>
-                            </g>
-                        </svg>
-                    </>}
-                </button>
-            </div>
-
-        </>
-    )
-}
-
-
-
-export default BackToTop;