funda-ui 4.7.197 → 4.7.202

package/lib/esm/Accordion/Accordion.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useRef } from 'react';
+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',
@@ -15,23 +14,23 @@ export enum EasingList {
 }
 
 
-export type AccordionOptionChangeFnType = (arg1: any, arg2: any) => void;
+export type AccordionOptionChangeFnType = (element: HTMLDivElement, index: number) => void;
 
 
 export type AccordionProps = {
     wrapperClassName?: string;
-	/** One event type, such as `click` or `mouseover` */
-	triggerType?: string;
-	/** Display the only first item of a list */
-	displayTheFirstItem?: boolean;
-	/** Display all items */
-	displayAllItems?: boolean;
+	/** 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.
      */
@@ -43,142 +42,184 @@ export type AccordionProps = {
 const Accordion = (props: AccordionProps) => {
     const {
         wrapperClassName,
-        triggerType,
-        displayTheFirstItem,
-        displayAllItems,
+        defaultActiveIndex,
+        defaultActiveAll = false,
         duration,
         easing,
-        alternateCollapse,
+        alternateCollapse = true,
+        arrowOnly = false,
         onChange,
         children
     } = props;
 
-
+    const animSpeed = duration || 200;
     const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
-    const ALTER = typeof alternateCollapse === 'undefined' ? true : alternateCollapse;
     const rootRef = useRef<any>(null);
     const [animOK, setAnimOK] = useState<boolean>(false);
     const [heightObserver, setHeightObserver] = useState<number>(-1);
+    const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());  // Keep track of all expanded items
+    const animationInProgress = 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;
-
-        // DO NOT place it before the above code, otherwise it will cause the checkbox and radio controls to fail.
-        e.preventDefault();
-
-		//Prevents further propagation of the current event in the capturing and bubbling phases(if use `e.target`).
-		e.stopPropagation();
-
-
-		//
-        const reactDomEl: any = e.currentTarget;
-        const curIndex: any = reactDomEl.dataset.index;
-		const reactDomWrapperEl: HTMLElement = rootRef.current;
-		const animSpeed = duration || 200;
-		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  ) {
-
+        if (animOK) 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');
+        const $allContent = reactDomWrapperEl.querySelectorAll('.custom-accordion-content__wrapper');
+        const $curContent = reactDomEl.querySelector('.custom-accordion-content__wrapper');
+        const $trigger = reactDomEl.querySelector('.custom-accordion-trigger');
+
+        if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
             setAnimOK(true);
-			setTimeout( () => {
+            setTimeout(() => {
                 setAnimOK(false);
-			}, animSpeed);
+            }, animSpeed);
 
-            if (ALTER) {
-                //Hide other all sibling <dt> of the selected element
+            if (alternateCollapse) {
+                // Hide other all sibling content
                 Array.prototype.forEach.call($allContent, (node) => {
-                    if ( node.clientHeight > 0 ) {
+                    if (node.clientHeight > 0) {
                         animateStyles(node, {
-                            startHeight  : node.scrollHeight,
-                            endHeight    : 0,
-                            speed        : animSpeed
-                        } as  never, easeType);				
+                            startHeight: node.scrollHeight,
+                            endHeight: 0,
+                            speed: animSpeed
+                        } as never, easeType, () => {
+                            animationInProgress.current = false;
+                        });
                     }
-
                 });
 
-                //to open
+                // Update all items to collapsed state
                 Array.prototype.forEach.call($li, (node) => {
-                    node.classList.remove('active');
-                    node.querySelector('.custom-accordion-trigger')?.classList.remove('active');
-                    node.querySelector('.custom-accordion-trigger')?.classList.add('collapsed');
-                    node.setAttribute( 'aria-expanded', false );
+                    node.setAttribute('aria-expanded', 'false');
                 });
 
+                // Update expanded items state
+                setExpandedItems(new Set([curIndex]));
+            } else {
+                // Add current item to expanded items
+                setExpandedItems(prev => new Set([...(prev as never), curIndex]));
+            }
+
+            reactDomEl.setAttribute('aria-expanded', 'true');
 
+            // Call onTriggerChange if it exists in the child props
+            const childProps = (children as any[])[curIndex]?.props;
+            if (typeof childProps?.onTriggerChange === 'function' && $trigger) {
+                childProps.onTriggerChange($trigger, true);
             }
 
-			reactDomEl.classList.add('active');
-            reactDomEl.querySelector('.custom-accordion-trigger')?.classList.add('active');
-            reactDomEl.querySelector('.custom-accordion-trigger')?.classList.remove('collapsed');
-			reactDomEl.setAttribute( 'aria-expanded', true );
-			// When the height of the element is 0, the value of `offsetHeight` and `clientHeight` will be 0
-			animateStyles($curContent, {
-				startHeight  : 0,
-				endHeight    : $curContent.scrollHeight,
-				speed        : animSpeed
-			} as  never, easeType, () => {
-                // content height observer
+            animateStyles($curContent, {
+                startHeight: 0,
+                endHeight: $curContent.scrollHeight,
+                speed: animSpeed
+            } as never, easeType, () => {
                 setHeightObserver(curIndex);
+                animationInProgress.current = false;
             });
-			
-		} else {
-			
-			if ( e.type == 'click' ) {
-
-				//to close
-				reactDomEl.classList.remove('active');
-                reactDomEl.querySelector('.custom-accordion-trigger')?.classList.remove('active');
-                reactDomEl.querySelector('.custom-accordion-trigger')?.classList.add('collapsed');
-				reactDomEl.setAttribute( 'aria-expanded', false );
-				animateStyles($curContent, {
-					startHeight  : $curContent.scrollHeight,
-					endHeight    : 0,
-					speed        : animSpeed
-				} as  never, easeType);
-			}
-			
-		}
-
-        if (typeof (onChange) === 'function') {
-            onChange(reactDomEl, Number(curIndex));
-        }
+        } else {
+            reactDomEl.setAttribute('aria-expanded', 'false');
 
+            // Call onTriggerChange if it exists in the child props
+            const childProps = (children as any[])[curIndex]?.props;
+            if (typeof childProps?.onTriggerChange === 'function' && $trigger) {
+                childProps.onTriggerChange($trigger, 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;
+            });
+        }
+
+        onChange?.(reactDomEl, curIndex);
+    }
+
+
+    // Initialize expanded items based on defaultActiveIndex or defaultActiveAll
+    useEffect(() => {
+        if (defaultActiveAll && children && rootRef.current) {
+            const allIndices = Array.from({ length: (children as any[]).length }, (_, i) => i);
+            setExpandedItems(new Set(allIndices));
+            
+            // Actually expand all items without animation
+            const $allItems = rootRef.current.querySelectorAll('.custom-accordion-item');
+            
+            Array.prototype.forEach.call($allItems, (node, index) => {
+                node.setAttribute('aria-expanded', 'true');
+                const $curContent = node.querySelector('.custom-accordion-content__wrapper');
+                const $trigger = node.querySelector('.custom-accordion-trigger');
+                
+                // Call onTriggerChange if it exists in the child props
+                const childProps = (children as any[])[index]?.props;
+                if (typeof childProps?.onTriggerChange === 'function' && $trigger) {
+                    childProps.onTriggerChange($trigger, true);
+                }
+
+                // Directly set height without animation
+                if ($curContent) {
+                    $curContent.style.height = `${$curContent.scrollHeight}px`;
+                }
+            });
+        } else if (defaultActiveIndex !== undefined) {
+            const initialExpanded = new Set<number>();
+            if (Array.isArray(defaultActiveIndex)) {
+                defaultActiveIndex.forEach(index => initialExpanded.add(index));
+            } else if (typeof defaultActiveIndex === 'number') {
+                initialExpanded.add(defaultActiveIndex);
+            }
+            setExpandedItems(initialExpanded);
+        }
+    }, [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 };
-                    const _defaultActive = i === 0 && displayTheFirstItem ? true : false;
+                    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}
+                        animSpeed={animSpeed}
+                        arrowOnly={arrowOnly}
                         heightObserver={heightObserver}
-                        defaultActive={typeof displayAllItems === 'undefined' ? _defaultActive : displayAllItems}
-                        triggerType={triggerType || 'click'}
+                        defaultActive={_defaultActive}
                         onToggleEv={handleClickItem}
+                        isExpanded={expandedItems.has(i)}   // Both controlled and uncontrolled modes are implemented
                         {...childProps}
                     />;
-
                 }) : null}
-
             </div>
-
-
         </>
-    )
+    );
 };
 
 export default Accordion;

package/lib/esm/Accordion/AccordionItem.tsx

@@ -5,6 +5,9 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 export type AccordionItemProps = {
     heightObserver?: number;
     index?: number;
+    arrowOnly?: boolean;
+    animSpeed?: number;
+    easeType?: string;
     /** Class of items */
     itemClassName?: string;
     itemContentWrapperClassName?: string;
@@ -21,8 +24,10 @@ export type AccordionItemProps = {
 	onToggleEv?: React.MouseEventHandler<HTMLElement>;
 	/** Handling events when the animation execution is complete */
 	onTransitionEnd?: React.TransitionEventHandler<HTMLElement>;
-	/** One event type, such as `click` or `mouseover` */
-	triggerType?: string;
+    /** 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;
 };
@@ -31,10 +36,12 @@ export type AccordionItemProps = {
 
 
 const AccordionItem = (props: AccordionItemProps) => {
-	
     const { 
         heightObserver,
         index,
+        animSpeed,
+        easeType,
+        arrowOnly,
         itemClassName,
         itemContentWrapperClassName,
         itemContentClassName,
@@ -46,18 +53,60 @@ const AccordionItem = (props: AccordionItemProps) => {
         title,
         onToggleEv,
         onTransitionEnd,
-        triggerType,
+        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 activedClassName = typeof(defaultActive) !== 'undefined' && defaultActive !== false ? ' active' : '';
     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);
+    };
+
+    useEffect(() => {
+        if (triggerRef.current && typeof onItemCollapse === 'function') {
+            if (isFirstRender.current) {
+                isFirstRender.current = false;
+                return;
+            }
+            onItemCollapse(triggerRef.current, iconRef.current as HTMLElement, isExpanded);
+        }
+    }, [isExpanded, onItemCollapse]);
+
+    useEffect(() => {
+        if (contentWrapperRef.current && !initialHeightSet.current) {
+            initialHeightSet.current = true;
+            const shouldBeExpanded = typeof defaultActive !== 'undefined' && defaultActive !== false;
+            if (controlledExpanded === undefined) {
+                setInternalExpanded(shouldBeExpanded);
+            }
+            
+            // Set initial height when defaultActive is true
+            if (shouldBeExpanded && contentRef.current) {
+                const contentHeight = contentRef.current.offsetHeight;
+                contentWrapperRef.current.style.height = `${contentHeight}px`;
+            }
+        }
+    }, [defaultActive, controlledExpanded]);
 
     useEffect(() => {
 
@@ -88,6 +137,7 @@ const AccordionItem = (props: AccordionItemProps) => {
 
     }, [heightObserver]);
 
+
     return (
         <>
 
@@ -97,36 +147,72 @@ const AccordionItem = (props: AccordionItemProps) => {
                 className={combinedCls(
                     'custom-accordion-item',
                     clsWrite(itemClassName, 'accordion-item'),
-                    activedClassName
+                    isExpanded ? ' active' : ''
                 )}
-                onClick={triggerType === 'click' ? onToggleEv : () => {}}
-                onMouseOver={triggerType === 'click' ? () => {} : onToggleEv} 
-                onTransitionEnd={typeof onTransitionEnd === 'function' ? onTransitionEnd : () => {}}
-                aria-expanded={defaultActive ? 'true' : 'false'}
+                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"
                 >
 
-                <div className={combinedCls(
-                    'custom-accordion-header',
-                    clsWrite(itemHeaderClassName, 'accordion-header position-relative')
-                )} role="presentation">
-                    <button tabIndex={-1} className={combinedCls(
-                        'custom-accordion-trigger',
-                        clsWrite(itemTriggerClassName, 'accordion-button'),
-                        activedClassName === '' ? 'collapsed' : 'active'
-                    )}  type="button">
-                        {title}
-                    </button>
-
-                    {itemTriggerIcon}
+                    {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={{
-                        height: defaultActive ? 'auto' : '0px',
-                        overflow: 'hidden'   // “overflow” affects the width, so add `w-100` to `custom-accordion-content__wrapper`
+                <div 
+                    ref={contentWrapperRef} 
+                    className={combinedCls(
+                        'custom-accordion-content__wrapper w-100',
+                        clsWrite(itemContentWrapperClassName, 'accordion-collapse')
+                    )}
+                    role="tabpanel" 
+                    style={{
+                        height: '0',
+                        overflow: 'hidden'   // "overflow" affects the width, so add `w-100` to `custom-accordion-content__wrapper`
                     }}>
                     <div className={combinedCls(
                         'custom-accordion-content',
@@ -136,10 +222,8 @@ const AccordionItem = (props: AccordionItemProps) => {
                     </div>
                 </div>
             </div>
-
         </>
     )
-    
 }
 
 export default AccordionItem;

package/lib/esm/DragDropList/index.tsx

@@ -8,6 +8,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import useBoundedDrag from 'funda-utils/dist/cjs/useBoundedDrag';
 
 
+
 export interface ListItem {
     id: number;
     parentId?: number;
@@ -39,6 +40,7 @@ export interface DragDropListProps {
     doubleIndent?: boolean;
     alternateCollapse?: boolean;
     arrow?: React.ReactNode;
+    renderOption?: (item: ListItem, dragHandleClassName: string, index: number) => React.ReactNode;
     onUpdate?: (items: ListItem[], curId: number) => void;
 }
 
@@ -71,6 +73,7 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
         doubleIndent,
         alternateCollapse,
         arrow = <><svg viewBox="0 0 22 22" width="8px"><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#a5a5a5" /></svg></>,
+        renderOption,
         onUpdate,
         ...attributes
     } = props;
@@ -83,8 +86,6 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
     const [items, setItems] = useState<ListItem[]>([]);
     const [editingItem, setEditingItem] = useState<number | null>(null);
 
-    const dragHandle = useRef<HTMLSpanElement | null>(null);
-
 
     // Edit
     const [editValue, setEditValue] = useState<Record<string, string | number>>({});
@@ -433,55 +434,64 @@ const DragDropList = forwardRef((props: DragDropListProps, externalRef: any) =>
                     onDoubleClick={() => handleDoubleClick(item)}
                 >
                     <div className={`${prefix}-draggable-list__itemcontent`}>
+                        {renderOption ? (
+                            renderOption(
+                                item,
+                                `${prefix}-draggable-list__handle`,
+                                index
+                            )
+                        ) : (
+                            <>
+                                {/** DRAG HANDLE */}
+                                {/* Fix the problem that mobile terminals cannot be touched, DO NOT USE "<svg>" */}
+                                {draggable && !handleHide ? <span className={`${prefix}-draggable-list__handle ${handlePos ?? 'left'}`} draggable={dragMode === 'handle'} dangerouslySetInnerHTML={{
+                                    __html: `${handleIcon}`
+                                }}></span> : null}
+                                {/** /DRAG HANDLE */}
 
-                        {/** DRAG HANDLE */}
-                        {/* Fix the problem that mobile terminals cannot be touched, DO NOT USE "<svg>" */}
-                        {draggable && !handleHide ? <span ref={dragHandle} className={`${prefix}-draggable-list__handle ${handlePos ?? 'left'}`} draggable={dragMode === 'handle'} dangerouslySetInnerHTML={{
-                            __html: `${handleIcon}`
-                        }}></span> : null}
-                        {/** /DRAG HANDLE */}
+                                {editingItem === item.id ? (
+                                    renderEditForm(item)
+                                ) : (
+                                    <div className={`${prefix}-draggable-list__itemcontent-inner`}>
 
-                        {editingItem === item.id ? (
-                            renderEditForm(item)
-                        ) : (
-                            <div className={`${prefix}-draggable-list__itemcontent-inner`}>
+                                        <div className={`${prefix}-draggable-list__itemlabel`}>
 
-                                <div className={`${prefix}-draggable-list__itemlabel`}>
 
+                                            {/** LABEL */}
 
-                                    {/** LABEL */}
+                                            <span dangerouslySetInnerHTML={{
+                                                __html: `${getIndentStr(item)}${typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel}`
+                                            }} />
+                                            {/** /LABEL */}
 
-                                    <span dangerouslySetInnerHTML={{
-                                        __html: `${getIndentStr(item)}${typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel}`
-                                    }} />
-                                    {/** /LABEL */}
 
 
 
+                                            {/** COLLOPSE */}
+                                            {alternateCollapse && hasChildItems && (
+                                                <span
+                                                    className={`${prefix}-draggable-list__collapse-arrow`}
+                                                    onClick={(e) => handleCollapse(item.id, e)}
+                                                >
+                                                    {arrow || (isCollapsed ? '▶' : '▼')}
+                                                </span>
+                                            )}
+                                            {/** /COLLOPSE */}
 
-                                    {/** COLLOPSE */}
-                                    {alternateCollapse && hasChildItems && (
-                                        <span
-                                            className={`${prefix}-draggable-list__collapse-arrow`}
-                                            onClick={(e) => handleCollapse(item.id, e)}
-                                        >
-                                            {arrow || (isCollapsed ? '▶' : '▼')}
-                                        </span>
-                                    )}
-                                    {/** /COLLOPSE */}
+                                        </div>
 
-                                </div>
 
+                                        {/** EXTENDS */}
+                                        {item.appendControl ? <>
+                                            <div className={`${prefix}-draggable-list__itemext`} id={`${prefix}-draggable-list__itemext-${item.value}`}>
+                                                {item.appendControl}
+                                            </div>
+                                        </> : null}
+                                        {/** /EXTENDS */}
 
-                                {/** EXTENDS */}
-                                {item.appendControl ? <>
-                                    <div className={`${prefix}-draggable-list__itemext`} id={`${prefix}-draggable-list__itemext-${item.value}`}>
-                                        {item.appendControl}
                                     </div>
-                                </> : null}
-                                {/** /EXTENDS */}
-
-                            </div>
+                                )}
+                            </>
                         )}
                     </div>
                 </li>