funda-ui 4.7.255 → 4.7.275

package/Accordion/index.js

@@ -895,7 +895,7 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/AccordionItem.tsx
-var _excluded = ["heightObserver", "index", "animSpeed", "easeType", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "defaultActive", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "children"];
+var _excluded = ["heightObserver", "index", "animSpeed", "easeType", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "activeItem", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -920,7 +920,7 @@ var AccordionItem = function AccordionItem(props) {
     itemHeaderClassName = props.itemHeaderClassName,
     itemTriggerIcon = props.itemTriggerIcon,
     itemStyle = props.itemStyle,
-    defaultActive = props.defaultActive,
+    activeItem = props.activeItem,
     title = props.title,
     onToggleEv = props.onToggleEv,
     onTransitionEnd = props.onTransitionEnd,
@@ -964,18 +964,18 @@ var AccordionItem = function AccordionItem(props) {
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (contentWrapperRef.current && !initialHeightSet.current) {
       initialHeightSet.current = true;
-      var shouldBeExpanded = typeof defaultActive !== 'undefined' && defaultActive !== false;
+      var shouldBeExpanded = typeof activeItem !== 'undefined' && activeItem !== false;
       if (controlledExpanded === undefined) {
         setInternalExpanded(shouldBeExpanded);
       }
 
-      // Set initial height when defaultActive is true
+      // Set initial height when activeItem is true
       if (shouldBeExpanded && contentRef.current) {
         var contentHeight = contentRef.current.offsetHeight;
         contentWrapperRef.current.style.height = "".concat(contentHeight, "px");
       }
     }
-  }, [defaultActive, controlledExpanded]);
+  }, [activeItem, controlledExpanded]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (parseFloat(heightObserver) !== index) return;
 
@@ -1089,6 +1089,7 @@ var Accordion = function Accordion(props) {
   var animSpeed = duration || 200;
   var easeType = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing];
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var animPlaceholderRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = Accordion_slicedToArray(_useState, 2),
     animOK = _useState2[0],
@@ -1113,9 +1114,7 @@ var Accordion = function Accordion(props) {
     var $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
     var $allContent = reactDomWrapperEl.querySelectorAll('.custom-accordion-content__wrapper');
     var $curContent = reactDomEl.querySelector('.custom-accordion-content__wrapper');
-    var $trigger = reactDomEl.querySelector('.custom-accordion-trigger');
     if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
-      var _curIndex;
       setAnimOK(true);
       setTimeout(function () {
         setAnimOK(false);
@@ -1148,12 +1147,6 @@ var Accordion = function Accordion(props) {
         });
       }
       reactDomEl.setAttribute('aria-expanded', 'true');
-
-      // Call onTriggerChange if it exists in the child props
-      var childProps = (_curIndex = children[curIndex]) === null || _curIndex === void 0 ? void 0 : _curIndex.props;
-      if (typeof (childProps === null || childProps === void 0 ? void 0 : childProps.onTriggerChange) === 'function' && $trigger) {
-        childProps.onTriggerChange($trigger, true);
-      }
       anim_default()($curContent, {
         startHeight: 0,
         endHeight: $curContent.scrollHeight,
@@ -1163,15 +1156,8 @@ var Accordion = function Accordion(props) {
         animationInProgress.current = false;
       });
     } else {
-      var _curIndex2;
       reactDomEl.setAttribute('aria-expanded', 'false');
 
-      // Call onTriggerChange if it exists in the child props
-      var _childProps = (_curIndex2 = children[curIndex]) === null || _curIndex2 === void 0 ? void 0 : _curIndex2.props;
-      if (typeof (_childProps === null || _childProps === void 0 ? void 0 : _childProps.onTriggerChange) === 'function' && $trigger) {
-        _childProps.onTriggerChange($trigger, false);
-      }
-
       // Remove current item from expanded items
       setExpandedItems(function (prev) {
         var newSet = new Set(prev);
@@ -1191,7 +1177,7 @@ var Accordion = function Accordion(props) {
 
   // Initialize expanded items based on defaultActiveIndex or defaultActiveAll
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (defaultActiveAll && children && rootRef.current) {
+    if (defaultActiveAll && children && rootRef.current && animPlaceholderRef.current) {
       var allIndices = Array.from({
         length: children.length
       }, function (_, i) {
@@ -1202,22 +1188,19 @@ var Accordion = function Accordion(props) {
       // Actually expand all items without animation
       var $allItems = rootRef.current.querySelectorAll('.custom-accordion-item');
       Array.prototype.forEach.call($allItems, function (node, index) {
-        var _index;
-        node.setAttribute('aria-expanded', 'true');
         var $curContent = node.querySelector('.custom-accordion-content__wrapper');
-        var $trigger = node.querySelector('.custom-accordion-trigger');
-
-        // Call onTriggerChange if it exists in the child props
-        var childProps = (_index = children[index]) === null || _index === void 0 ? void 0 : _index.props;
-        if (typeof (childProps === null || childProps === void 0 ? void 0 : childProps.onTriggerChange) === 'function' && $trigger) {
-          childProps.onTriggerChange($trigger, true);
-        }
-
-        // Directly set height without animation
         if ($curContent) {
-          $curContent.style.height = "".concat($curContent.scrollHeight, "px");
+          // !!! Don't use the .custom-accordion-contentwrapper height directly, it may be more than a dozen pixels
+          $curContent.style.height = "".concat(node.querySelector('.custom-accordion-content__wrapper > .custom-accordion-content').scrollHeight, "px");
         }
       });
+      anim_default()(animPlaceholderRef.current, {
+        startHeight: 0,
+        endHeight: 10,
+        speed: animSpeed
+      }, easeType, function () {
+        setTimeout(function () {}, animSpeed);
+      });
     } else if (defaultActiveIndex !== undefined) {
       var initialExpanded = new Set();
       if (Array.isArray(defaultActiveIndex)) {
@@ -1231,6 +1214,12 @@ var Accordion = function Accordion(props) {
     }
   }, [defaultActiveIndex, defaultActiveAll, children]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: "custom-accordion-anim-placeholder",
+    style: {
+      display: 'none'
+    },
+    ref: animPlaceholderRef
+  }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: (0,cls.combinedCls)('custom-accordion-item', (0,cls.clsWrite)(wrapperClassName, 'accordion')),
     role: "tablist",
     ref: rootRef
@@ -1245,10 +1234,11 @@ var Accordion = function Accordion(props) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_AccordionItem, Accordion_extends({
       key: "item" + i,
       index: i,
+      defaultActiveAll: defaultActiveAll,
       animSpeed: animSpeed,
       arrowOnly: arrowOnly,
       heightObserver: heightObserver,
-      defaultActive: _defaultActive,
+      activeItem: _defaultActive,
       onToggleEv: handleClickItem,
       isExpanded: expandedItems.has(i) // Both controlled and uncontrolled modes are implemented
     }, childProps));

package/MultipleSelect/index.js

@@ -3063,6 +3063,7 @@ function formatIndentVal(inputData, placeholder) {
       return String(s).replace(reVar, '').replace(/\ /ig, '');
     });
   } else {
+    if (inputData === null) return '';
     var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
     return _txt.replace(reVar, '').replace(/\ /ig, '');
   }

package/NativeSelect/index.js

@@ -1265,6 +1265,7 @@ function formatIndentVal(inputData, placeholder) {
       return String(s).replace(reVar, '').replace(/\ /ig, '');
     });
   } else {
+    if (inputData === null) return '';
     var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
     return _txt.replace(reVar, '').replace(/\ /ig, '');
   }

package/Select/index.js

@@ -3461,6 +3461,7 @@ function formatIndentVal(inputData, placeholder) {
       return String(s).replace(reVar, '').replace(/\ /ig, '');
     });
   } else {
+    if (inputData === null) return '';
     var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
     return _txt.replace(reVar, '').replace(/\ /ig, '');
   }

package/lib/cjs/Accordion/index.js

@@ -895,7 +895,7 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/AccordionItem.tsx
-var _excluded = ["heightObserver", "index", "animSpeed", "easeType", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "defaultActive", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "children"];
+var _excluded = ["heightObserver", "index", "animSpeed", "easeType", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "activeItem", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -920,7 +920,7 @@ var AccordionItem = function AccordionItem(props) {
     itemHeaderClassName = props.itemHeaderClassName,
     itemTriggerIcon = props.itemTriggerIcon,
     itemStyle = props.itemStyle,
-    defaultActive = props.defaultActive,
+    activeItem = props.activeItem,
     title = props.title,
     onToggleEv = props.onToggleEv,
     onTransitionEnd = props.onTransitionEnd,
@@ -964,18 +964,18 @@ var AccordionItem = function AccordionItem(props) {
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (contentWrapperRef.current && !initialHeightSet.current) {
       initialHeightSet.current = true;
-      var shouldBeExpanded = typeof defaultActive !== 'undefined' && defaultActive !== false;
+      var shouldBeExpanded = typeof activeItem !== 'undefined' && activeItem !== false;
       if (controlledExpanded === undefined) {
         setInternalExpanded(shouldBeExpanded);
       }
 
-      // Set initial height when defaultActive is true
+      // Set initial height when activeItem is true
       if (shouldBeExpanded && contentRef.current) {
         var contentHeight = contentRef.current.offsetHeight;
         contentWrapperRef.current.style.height = "".concat(contentHeight, "px");
       }
     }
-  }, [defaultActive, controlledExpanded]);
+  }, [activeItem, controlledExpanded]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (parseFloat(heightObserver) !== index) return;
 
@@ -1089,6 +1089,7 @@ var Accordion = function Accordion(props) {
   var animSpeed = duration || 200;
   var easeType = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing];
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var animPlaceholderRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = Accordion_slicedToArray(_useState, 2),
     animOK = _useState2[0],
@@ -1113,9 +1114,7 @@ var Accordion = function Accordion(props) {
     var $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
     var $allContent = reactDomWrapperEl.querySelectorAll('.custom-accordion-content__wrapper');
     var $curContent = reactDomEl.querySelector('.custom-accordion-content__wrapper');
-    var $trigger = reactDomEl.querySelector('.custom-accordion-trigger');
     if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
-      var _curIndex;
       setAnimOK(true);
       setTimeout(function () {
         setAnimOK(false);
@@ -1148,12 +1147,6 @@ var Accordion = function Accordion(props) {
         });
       }
       reactDomEl.setAttribute('aria-expanded', 'true');
-
-      // Call onTriggerChange if it exists in the child props
-      var childProps = (_curIndex = children[curIndex]) === null || _curIndex === void 0 ? void 0 : _curIndex.props;
-      if (typeof (childProps === null || childProps === void 0 ? void 0 : childProps.onTriggerChange) === 'function' && $trigger) {
-        childProps.onTriggerChange($trigger, true);
-      }
       anim_default()($curContent, {
         startHeight: 0,
         endHeight: $curContent.scrollHeight,
@@ -1163,15 +1156,8 @@ var Accordion = function Accordion(props) {
         animationInProgress.current = false;
       });
     } else {
-      var _curIndex2;
       reactDomEl.setAttribute('aria-expanded', 'false');
 
-      // Call onTriggerChange if it exists in the child props
-      var _childProps = (_curIndex2 = children[curIndex]) === null || _curIndex2 === void 0 ? void 0 : _curIndex2.props;
-      if (typeof (_childProps === null || _childProps === void 0 ? void 0 : _childProps.onTriggerChange) === 'function' && $trigger) {
-        _childProps.onTriggerChange($trigger, false);
-      }
-
       // Remove current item from expanded items
       setExpandedItems(function (prev) {
         var newSet = new Set(prev);
@@ -1191,7 +1177,7 @@ var Accordion = function Accordion(props) {
 
   // Initialize expanded items based on defaultActiveIndex or defaultActiveAll
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    if (defaultActiveAll && children && rootRef.current) {
+    if (defaultActiveAll && children && rootRef.current && animPlaceholderRef.current) {
       var allIndices = Array.from({
         length: children.length
       }, function (_, i) {
@@ -1202,22 +1188,19 @@ var Accordion = function Accordion(props) {
       // Actually expand all items without animation
       var $allItems = rootRef.current.querySelectorAll('.custom-accordion-item');
       Array.prototype.forEach.call($allItems, function (node, index) {
-        var _index;
-        node.setAttribute('aria-expanded', 'true');
         var $curContent = node.querySelector('.custom-accordion-content__wrapper');
-        var $trigger = node.querySelector('.custom-accordion-trigger');
-
-        // Call onTriggerChange if it exists in the child props
-        var childProps = (_index = children[index]) === null || _index === void 0 ? void 0 : _index.props;
-        if (typeof (childProps === null || childProps === void 0 ? void 0 : childProps.onTriggerChange) === 'function' && $trigger) {
-          childProps.onTriggerChange($trigger, true);
-        }
-
-        // Directly set height without animation
         if ($curContent) {
-          $curContent.style.height = "".concat($curContent.scrollHeight, "px");
+          // !!! Don't use the .custom-accordion-contentwrapper height directly, it may be more than a dozen pixels
+          $curContent.style.height = "".concat(node.querySelector('.custom-accordion-content__wrapper > .custom-accordion-content').scrollHeight, "px");
         }
       });
+      anim_default()(animPlaceholderRef.current, {
+        startHeight: 0,
+        endHeight: 10,
+        speed: animSpeed
+      }, easeType, function () {
+        setTimeout(function () {}, animSpeed);
+      });
     } else if (defaultActiveIndex !== undefined) {
       var initialExpanded = new Set();
       if (Array.isArray(defaultActiveIndex)) {
@@ -1231,6 +1214,12 @@ var Accordion = function Accordion(props) {
     }
   }, [defaultActiveIndex, defaultActiveAll, children]);
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    className: "custom-accordion-anim-placeholder",
+    style: {
+      display: 'none'
+    },
+    ref: animPlaceholderRef
+  }), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: (0,cls.combinedCls)('custom-accordion-item', (0,cls.clsWrite)(wrapperClassName, 'accordion')),
     role: "tablist",
     ref: rootRef
@@ -1245,10 +1234,11 @@ var Accordion = function Accordion(props) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_AccordionItem, Accordion_extends({
       key: "item" + i,
       index: i,
+      defaultActiveAll: defaultActiveAll,
       animSpeed: animSpeed,
       arrowOnly: arrowOnly,
       heightObserver: heightObserver,
-      defaultActive: _defaultActive,
+      activeItem: _defaultActive,
       onToggleEv: handleClickItem,
       isExpanded: expandedItems.has(i) // Both controlled and uncontrolled modes are implemented
     }, childProps));

package/lib/cjs/MultipleSelect/index.js

@@ -3063,6 +3063,7 @@ function formatIndentVal(inputData, placeholder) {
       return String(s).replace(reVar, '').replace(/\ /ig, '');
     });
   } else {
+    if (inputData === null) return '';
     var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
     return _txt.replace(reVar, '').replace(/\ /ig, '');
   }

package/lib/cjs/NativeSelect/index.js

@@ -1265,6 +1265,7 @@ function formatIndentVal(inputData, placeholder) {
       return String(s).replace(reVar, '').replace(/\ /ig, '');
     });
   } else {
+    if (inputData === null) return '';
     var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
     return _txt.replace(reVar, '').replace(/\ /ig, '');
   }

package/lib/cjs/Select/index.js

@@ -3461,6 +3461,7 @@ function formatIndentVal(inputData, placeholder) {
       return String(s).replace(reVar, '').replace(/\ /ig, '');
     });
   } else {
+    if (inputData === null) return '';
     var _txt = typeof inputData === 'string' ? inputData : inputData.toString();
     return _txt.replace(reVar, '').replace(/\ /ig, '');
   }

package/lib/esm/Accordion/Accordion.tsx

@@ -5,6 +5,7 @@ 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',
@@ -55,6 +56,7 @@ 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 [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());  // Keep track of all expanded items
@@ -74,7 +76,6 @@ const Accordion = (props: AccordionProps) => {
         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);
@@ -110,12 +111,7 @@ const Accordion = (props: AccordionProps) => {
 
             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);
-            }
-
+     
             animateStyles($curContent, {
                 startHeight: 0,
                 endHeight: $curContent.scrollHeight,
@@ -127,12 +123,6 @@ const Accordion = (props: AccordionProps) => {
         } 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);
@@ -155,29 +145,32 @@ const Accordion = (props: AccordionProps) => {
 
     // Initialize expanded items based on defaultActiveIndex or defaultActiveAll
     useEffect(() => {
-        if (defaultActiveAll && children && rootRef.current) {
+        if (defaultActiveAll && children && rootRef.current && animPlaceholderRef.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`;
+                    // !!! 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);
+            });
+
+
         } else if (defaultActiveIndex !== undefined) {
             const initialExpanded = new Set<number>();
             if (Array.isArray(defaultActiveIndex)) {
@@ -191,6 +184,7 @@ const Accordion = (props: AccordionProps) => {
     
     return (
         <>
+            <div className="custom-accordion-anim-placeholder" style={{display: 'none'}} ref={animPlaceholderRef}></div>
             <div className={combinedCls(
                 'custom-accordion-item',
                 clsWrite(wrapperClassName, 'accordion')
@@ -208,10 +202,11 @@ const Accordion = (props: AccordionProps) => {
                     return <Item
                         key={"item" + i}
                         index={i}
+                        defaultActiveAll={defaultActiveAll}
                         animSpeed={animSpeed}
                         arrowOnly={arrowOnly}
                         heightObserver={heightObserver}
-                        defaultActive={_defaultActive}
+                        activeItem={_defaultActive}
                         onToggleEv={handleClickItem}
                         isExpanded={expandedItems.has(i)}   // Both controlled and uncontrolled modes are implemented
                         {...childProps}

package/lib/esm/Accordion/AccordionItem.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
 export type AccordionItemProps = {
     heightObserver?: number;
     index?: number;
@@ -17,7 +18,7 @@ export type AccordionItemProps = {
     itemStyle?: React.CSSProperties;
     itemTriggerIcon?: React.ReactNode;
 	/** Set an item to activate by default */
-	defaultActive?: string | boolean | undefined;
+	activeItem?: string | boolean | undefined;
 	/** Specify a title */
 	title?: React.ReactNode;
 	/** Handling events for collapsing item */
@@ -49,7 +50,7 @@ const AccordionItem = (props: AccordionItemProps) => {
         itemHeaderClassName,
         itemTriggerIcon,
         itemStyle,
-        defaultActive,
+        activeItem,
         title,
         onToggleEv,
         onTransitionEnd,
@@ -95,18 +96,18 @@ const AccordionItem = (props: AccordionItemProps) => {
     useEffect(() => {
         if (contentWrapperRef.current && !initialHeightSet.current) {
             initialHeightSet.current = true;
-            const shouldBeExpanded = typeof defaultActive !== 'undefined' && defaultActive !== false;
+            const shouldBeExpanded = typeof activeItem !== 'undefined' && activeItem !== false;
             if (controlledExpanded === undefined) {
                 setInternalExpanded(shouldBeExpanded);
             }
             
-            // Set initial height when defaultActive is true
+            // Set initial height when activeItem is true
             if (shouldBeExpanded && contentRef.current) {
                 const contentHeight = contentRef.current.offsetHeight;
                 contentWrapperRef.current.style.height = `${contentHeight}px`;
             }
         }
-    }, [defaultActive, controlledExpanded]);
+    }, [activeItem, controlledExpanded]);
 
     useEffect(() => {
 

package/lib/esm/MultipleSelect/utils/func.ts

@@ -10,6 +10,8 @@ export function formatIndentVal(inputData: any, placeholder: string) {
     if (Array.isArray(inputData)) {
         return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
     } else {
+        if (inputData === null) return '';
+        
         const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
         return _txt.replace(reVar, '').replace(/\ /ig, '');
     }

package/lib/esm/NativeSelect/utils/func.ts

@@ -10,6 +10,8 @@ export function formatIndentVal(inputData: any, placeholder: string) {
     if (Array.isArray(inputData)) {
         return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
     } else {
+        if (inputData === null) return '';
+        
         const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
         return _txt.replace(reVar, '').replace(/\ /ig, '');
     }

package/lib/esm/Select/utils/func.ts

@@ -10,6 +10,8 @@ export function formatIndentVal(inputData: any, placeholder: string) {
     if (Array.isArray(inputData)) {
         return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
     } else {
+        if (inputData === null) return '';
+
         const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
         return _txt.replace(reVar, '').replace(/\ /ig, '');
     }

package/package.json

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