funda-ui 1.0.600 → 1.0.605

package/Accordion/index.js

@@ -27,10 +27,12 @@ var _require = __webpack_require__(711),
  * 
  * @param  {HTMLElement} curElement      - Element of animation.
  * @param  {?JSON} config                - Configuration of animation
- * @param  {?string} easeType              - Types of easing animation.
+ * @param  {?string} easeType            - Types of easing animation.
+* @param  {?Function} callback           - Callback after animation ends
  */
 function animateStyles(curElement, config) {
   var easeType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear';
+  var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {};
   if (_typeof(curElement) === ( true ? "undefined" : 0)) return;
 
   // Set a default configuration
@@ -88,6 +90,7 @@ function animateStyles(curElement, config) {
     } else {
       // change height
       curElement.style.height = _endHeight + 'px';
+      if (typeof callback === 'function') callback();
 
       //
       window.cancelAnimationFrame(requestId);
@@ -440,7 +443,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 ;// CONCATENATED MODULE: ./src/AccordionItem.tsx
 
 var AccordionItem = function AccordionItem(props) {
-  var index = props.index,
+  var heightObserver = props.heightObserver,
+    index = props.index,
     itemClassName = props.itemClassName,
     itemContentWrapperClassName = props.itemContentWrapperClassName,
     itemContentClassName = props.itemContentClassName,
@@ -455,6 +459,27 @@ var AccordionItem = function AccordionItem(props) {
     triggerType = props.triggerType,
     children = props.children;
   var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? ' active' : '';
+  var observer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var contentWrapperRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var contentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (parseFloat(heightObserver) !== index) return;
+
+    // When the content height changes dynamically, change the height of the wrapper
+    if (contentRef.current && contentWrapperRef.current) {
+      var _contentPadding = window.getComputedStyle(contentRef.current).getPropertyValue('padding-bottom');
+      observer.current = new ResizeObserver(function (entries) {
+        entries.forEach(function (entry) {
+          contentWrapperRef.current.style.height = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+        });
+      });
+      observer.current.observe(contentRef.current);
+    }
+    return function () {
+      var _observer$current;
+      if (contentRef.current) (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.unobserve(contentRef.current);
+    };
+  }, [heightObserver]);
   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", {
     "data-index": index,
     className: "custom-accordion-item ".concat(itemClassName || itemClassName === '' ? itemClassName : "accordion-item", " ").concat(activedClassName),
@@ -471,6 +496,7 @@ var AccordionItem = function AccordionItem(props) {
     className: "custom-accordion-trigger ".concat(itemTriggerClassName || itemTriggerClassName === '' ? itemTriggerClassName : "accordion-button", " ").concat(activedClassName === '' ? 'collapsed' : 'active'),
     type: "button"
   }, title), itemTriggerIcon), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    ref: contentWrapperRef,
     className: "custom-accordion-content__wrapper ".concat(itemContentWrapperClassName || itemContentWrapperClassName === '' ? itemContentWrapperClassName : "accordion-collapse"),
     role: "tabpanel",
     style: {
@@ -478,7 +504,8 @@ var AccordionItem = function AccordionItem(props) {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "custom-accordion-content ".concat(itemContentClassName || itemContentClassName === '' ? itemContentClassName : "accordion-body")
+    className: "custom-accordion-content ".concat(itemContentClassName || itemContentClassName === '' ? itemContentClassName : "accordion-body"),
+    ref: contentRef
   }, children))));
 };
 /* harmony default export */ const src_AccordionItem = (AccordionItem);
@@ -515,6 +542,7 @@ var Accordion = function Accordion(props) {
   var wrapperClassName = props.wrapperClassName,
     triggerType = props.triggerType,
     displayTheFirstItem = props.displayTheFirstItem,
+    displayAllItems = props.displayAllItems,
     duration = props.duration,
     easing = props.easing,
     alternateCollapse = props.alternateCollapse,
@@ -527,10 +555,15 @@ var Accordion = function Accordion(props) {
     _useState2 = _slicedToArray(_useState, 2),
     animOK = _useState2[0],
     setAnimOK = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    heightObserver = _useState4[0],
+    setHeightObserver = _useState4[1];
   function handleClickItem(e) {
     e.preventDefault();
     //Prevents further propagation of the current event in the capturing and bubbling phases(if use `e.target`).
     e.stopPropagation();
+    if (e.target.closest('.custom-accordion-header') === null) return;
     if (animOK) return;
 
     //
@@ -577,7 +610,10 @@ var Accordion = function Accordion(props) {
         startHeight: 0,
         endHeight: $curContent.scrollHeight,
         speed: animSpeed
-      }, easeType);
+      }, easeType, function () {
+        // content height observer
+        setHeightObserver(curIndex);
+      });
     } else {
       if (e.type == 'click') {
         var _reactDomEl$querySele3, _reactDomEl$querySele4;
@@ -607,7 +643,8 @@ var Accordion = function Accordion(props) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_AccordionItem, _extends({
       key: "item" + i,
       index: i,
-      defaultActive: _defaultActive,
+      heightObserver: heightObserver,
+      defaultActive: typeof displayAllItems === 'undefined' ? _defaultActive : displayAllItems,
       triggerType: triggerType || 'click',
       onToggleEv: handleClickItem
     }, childProps));

package/lib/cjs/Accordion/index.js

@@ -27,10 +27,12 @@ var _require = __webpack_require__(711),
  * 
  * @param  {HTMLElement} curElement      - Element of animation.
  * @param  {?JSON} config                - Configuration of animation
- * @param  {?string} easeType              - Types of easing animation.
+ * @param  {?string} easeType            - Types of easing animation.
+* @param  {?Function} callback           - Callback after animation ends
  */
 function animateStyles(curElement, config) {
   var easeType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'linear';
+  var callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {};
   if (_typeof(curElement) === ( true ? "undefined" : 0)) return;
 
   // Set a default configuration
@@ -88,6 +90,7 @@ function animateStyles(curElement, config) {
     } else {
       // change height
       curElement.style.height = _endHeight + 'px';
+      if (typeof callback === 'function') callback();
 
       //
       window.cancelAnimationFrame(requestId);
@@ -440,7 +443,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 ;// CONCATENATED MODULE: ./src/AccordionItem.tsx
 
 var AccordionItem = function AccordionItem(props) {
-  var index = props.index,
+  var heightObserver = props.heightObserver,
+    index = props.index,
     itemClassName = props.itemClassName,
     itemContentWrapperClassName = props.itemContentWrapperClassName,
     itemContentClassName = props.itemContentClassName,
@@ -455,6 +459,27 @@ var AccordionItem = function AccordionItem(props) {
     triggerType = props.triggerType,
     children = props.children;
   var activedClassName = typeof defaultActive !== 'undefined' && defaultActive !== false ? ' active' : '';
+  var observer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var contentWrapperRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var contentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (parseFloat(heightObserver) !== index) return;
+
+    // When the content height changes dynamically, change the height of the wrapper
+    if (contentRef.current && contentWrapperRef.current) {
+      var _contentPadding = window.getComputedStyle(contentRef.current).getPropertyValue('padding-bottom');
+      observer.current = new ResizeObserver(function (entries) {
+        entries.forEach(function (entry) {
+          contentWrapperRef.current.style.height = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+        });
+      });
+      observer.current.observe(contentRef.current);
+    }
+    return function () {
+      var _observer$current;
+      if (contentRef.current) (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.unobserve(contentRef.current);
+    };
+  }, [heightObserver]);
   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", {
     "data-index": index,
     className: "custom-accordion-item ".concat(itemClassName || itemClassName === '' ? itemClassName : "accordion-item", " ").concat(activedClassName),
@@ -471,6 +496,7 @@ var AccordionItem = function AccordionItem(props) {
     className: "custom-accordion-trigger ".concat(itemTriggerClassName || itemTriggerClassName === '' ? itemTriggerClassName : "accordion-button", " ").concat(activedClassName === '' ? 'collapsed' : 'active'),
     type: "button"
   }, title), itemTriggerIcon), /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
+    ref: contentWrapperRef,
     className: "custom-accordion-content__wrapper ".concat(itemContentWrapperClassName || itemContentWrapperClassName === '' ? itemContentWrapperClassName : "accordion-collapse"),
     role: "tabpanel",
     style: {
@@ -478,7 +504,8 @@ var AccordionItem = function AccordionItem(props) {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
-    className: "custom-accordion-content ".concat(itemContentClassName || itemContentClassName === '' ? itemContentClassName : "accordion-body")
+    className: "custom-accordion-content ".concat(itemContentClassName || itemContentClassName === '' ? itemContentClassName : "accordion-body"),
+    ref: contentRef
   }, children))));
 };
 /* harmony default export */ const src_AccordionItem = (AccordionItem);
@@ -515,6 +542,7 @@ var Accordion = function Accordion(props) {
   var wrapperClassName = props.wrapperClassName,
     triggerType = props.triggerType,
     displayTheFirstItem = props.displayTheFirstItem,
+    displayAllItems = props.displayAllItems,
     duration = props.duration,
     easing = props.easing,
     alternateCollapse = props.alternateCollapse,
@@ -527,10 +555,15 @@ var Accordion = function Accordion(props) {
     _useState2 = _slicedToArray(_useState, 2),
     animOK = _useState2[0],
     setAnimOK = _useState2[1];
+  var _useState3 = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(-1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    heightObserver = _useState4[0],
+    setHeightObserver = _useState4[1];
   function handleClickItem(e) {
     e.preventDefault();
     //Prevents further propagation of the current event in the capturing and bubbling phases(if use `e.target`).
     e.stopPropagation();
+    if (e.target.closest('.custom-accordion-header') === null) return;
     if (animOK) return;
 
     //
@@ -577,7 +610,10 @@ var Accordion = function Accordion(props) {
         startHeight: 0,
         endHeight: $curContent.scrollHeight,
         speed: animSpeed
-      }, easeType);
+      }, easeType, function () {
+        // content height observer
+        setHeightObserver(curIndex);
+      });
     } else {
       if (e.type == 'click') {
         var _reactDomEl$querySele3, _reactDomEl$querySele4;
@@ -607,7 +643,8 @@ var Accordion = function Accordion(props) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_AccordionItem, _extends({
       key: "item" + i,
       index: i,
-      defaultActive: _defaultActive,
+      heightObserver: heightObserver,
+      defaultActive: typeof displayAllItems === 'undefined' ? _defaultActive : displayAllItems,
       triggerType: triggerType || 'click',
       onToggleEv: handleClickItem
     }, childProps));

package/lib/esm/Accordion/Accordion.tsx

@@ -29,6 +29,8 @@ type AccordionProps = {
 	triggerType?: string;
 	/** Display the only first item of a list */
 	displayTheFirstItem?: boolean;
+	/** Display all items */
+	displayAllItems?: boolean;
 	/** The number of milliseconds(ms) each iteration of the animation takes to complete */
 	duration?: number;
     /** Types of easing animation */
@@ -48,6 +50,7 @@ const Accordion = (props: AccordionProps) => {
         wrapperClassName,
         triggerType,
         displayTheFirstItem,
+        displayAllItems,
         duration,
         easing,
         alternateCollapse,
@@ -60,17 +63,18 @@ const Accordion = (props: AccordionProps) => {
     const ALTER = typeof alternateCollapse === 'undefined' ? true : alternateCollapse;
     const rootRef = useRef<any>(null);
     const [animOK, setAnimOK] = useState<boolean>(false);
+    const [heightObserver, setHeightObserver] = useState<number>(-1);
 
-   
-
+    
     function handleClickItem(e: React.MouseEvent) {
 		e.preventDefault();
 		//Prevents further propagation of the current event in the capturing and bubbling phases(if use `e.target`).
 		e.stopPropagation();
 
+     
+        if ((e.target as any).closest('.custom-accordion-header') === null) return;
 		if ( animOK ) return;
 
-
 		//
         const reactDomEl: any = e.currentTarget;
         const curIndex: any = reactDomEl.dataset.index;
@@ -121,7 +125,10 @@ const Accordion = (props: AccordionProps) => {
 				startHeight  : 0,
 				endHeight    : $curContent.scrollHeight,
 				speed        : animSpeed
-			} as  never, easeType);
+			} as  never, easeType, () => {
+                // content height observer
+                setHeightObserver(curIndex);
+            });
 			
 		} else {
 			
@@ -158,7 +165,8 @@ const Accordion = (props: AccordionProps) => {
                     return <Item
                         key={"item" + i}
                         index={i}
-                        defaultActive={_defaultActive}
+                        heightObserver={heightObserver}
+                        defaultActive={typeof displayAllItems === 'undefined' ? _defaultActive : displayAllItems}
                         triggerType={triggerType || 'click'}
                         onToggleEv={handleClickItem}
                         {...childProps}

package/lib/esm/Accordion/AccordionItem.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 
 type AccordionItemProps = {
+    heightObserver?: number;
     index?: number;
     /** Class of items */
     itemClassName?: string;
@@ -29,6 +30,7 @@ type AccordionItemProps = {
 const AccordionItem = (props: AccordionItemProps) => {
 	
     const { 
+        heightObserver,
         index,
         itemClassName,
         itemContentWrapperClassName,
@@ -45,8 +47,37 @@ const AccordionItem = (props: AccordionItemProps) => {
         children
     } = props;
     
+
+    
     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);
+    
+
+    useEffect(() => {
+
+        if (parseFloat(heightObserver as never) !== index) return;
+
+        // When the content height changes dynamically, change the height of the wrapper
+        if (contentRef.current && contentWrapperRef.current) {
+            const _contentPadding = window.getComputedStyle(contentRef.current as HTMLDivElement).getPropertyValue('padding-bottom');
+       
+            observer.current = new ResizeObserver(entries => {
+                entries.forEach(entry => {
+                    (contentWrapperRef.current as HTMLDivElement).style.height = entry.contentRect.bottom + parseFloat(_contentPadding) + 'px';
+                });
+            });
+            observer.current.observe(contentRef.current);
+
+        }
+
+        return () => {
+            if (contentRef.current) observer.current?.unobserve(contentRef.current);
+        };
+
 
+    }, [heightObserver]);
 
     return (
         <>
@@ -68,12 +99,12 @@ const AccordionItem = (props: AccordionItemProps) => {
 
                     {itemTriggerIcon}
                 </div>
-                <div className={`custom-accordion-content__wrapper ${itemContentWrapperClassName || itemContentWrapperClassName === '' ? itemContentWrapperClassName : "accordion-collapse"}`}
+                <div ref={contentWrapperRef} className={`custom-accordion-content__wrapper ${itemContentWrapperClassName || itemContentWrapperClassName === '' ? itemContentWrapperClassName : "accordion-collapse"}`}
                     role="tabpanel" style={{
                         height: defaultActive ? 'auto' : '0px',
                         overflow: 'hidden'
                     }}>
-                    <div className={`custom-accordion-content ${itemContentClassName || itemContentClassName === '' ? itemContentClassName : "accordion-body"}`}>
+                    <div className={`custom-accordion-content ${itemContentClassName || itemContentClassName === '' ? itemContentClassName : "accordion-body"}`} ref={contentRef} >
                         {children}
                     </div>
                 </div>

package/lib/esm/Accordion/utils/anim.js

@@ -13,9 +13,10 @@ const {
  * 
  * @param  {HTMLElement} curElement      - Element of animation.
  * @param  {?JSON} config                - Configuration of animation
- * @param  {?string} easeType              - Types of easing animation.
+ * @param  {?string} easeType            - Types of easing animation.
+* @param  {?Function} callback           - Callback after animation ends
  */
-function animateStyles(curElement, config, easeType = 'linear') {
+function animateStyles(curElement, config, easeType = 'linear', callback = () => {}) {
     if (typeof curElement === typeof undefined) return;
 
     // Set a default configuration
@@ -80,6 +81,8 @@ function animateStyles(curElement, config, easeType = 'linear') {
             // change height
             curElement.style.height = _endHeight + 'px';
             
+            if (typeof callback === 'function') callback();
+            
             //
             window.cancelAnimationFrame(requestId);
         }

package/package.json

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