funda-ui 1.0.580 → 1.0.605

package/Accordion/index.js

@@ -12,52 +12,91 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 710:
-/***/ ((module) => {
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _require = __webpack_require__(711),
+  easeLinear = _require.easeLinear,
+  easeInQuad = _require.easeInQuad,
+  easeOutQuad = _require.easeOutQuad,
+  easeInOutQuad = _require.easeInOutQuad;
+
 /**
  * Element Animate
  * @public
  * 
  * @param  {HTMLElement} curElement      - Element of animation.
  * @param  {?JSON} config                - Configuration of 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
   config = setDefaultOptions({
     "startHeight": 0,
+    // node.scrollHeight
     "endHeight": 0,
-    "speed": 200,
-    //ms
-    "fps": 1000 / 60 // 60FPS
+    "speed": 200 //ms
   }, config);
 
   //
   var _endHeight = config.endHeight,
-    _speed = config.speed,
-    _fps = config.fps;
+    _speed = config.speed;
   var _startHeight = config.startHeight;
-  var timer = null;
-  var startTime = Date.now();
-  var deltaHeight = curElement.clientHeight < _endHeight ? _endHeight / _speed * _fps : _startHeight / _speed * _fps;
-  timer = setInterval(function () {
-    var elapsed = Date.now() - startTime; //Work out the elapsed time
+  var duration = _speed;
+  var start = new Date().getTime();
+  var from = 0;
+  var to = 100;
+  var requestId;
+  var loop = function loop() {
+    //easing
+    var time = new Date().getTime() - start; //Work out the elapsed time
+    var 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
+    var percent = val / 100;
+
+    // change height
+    if (curElement.clientHeight < _endHeight) {
+      curElement.style.height = _endHeight * percent + 'px';
+    } else {
+      if (_startHeight > 0) curElement.style.height = _startHeight - _startHeight * percent + 'px';
+    }
 
     //If the elapsed time is less than the speed (ms)
-    if (elapsed < _speed) {
-      if (curElement.clientHeight < _endHeight) {
-        _startHeight = _startHeight + deltaHeight;
-      } else {
-        _startHeight = _startHeight - deltaHeight;
-      }
-      curElement.style.height = _startHeight + 'px';
+    if (time < duration) {
+      //
+      requestId = window.requestAnimationFrame(loop);
     } else {
+      // change height
       curElement.style.height = _endHeight + 'px';
-      clearInterval(timer);
+      if (typeof callback === 'function') callback();
+
+      //
+      window.cancelAnimationFrame(requestId);
     }
-  }, _fps);
+  };
+  requestId = window.requestAnimationFrame(loop);
 }
 
 /**
@@ -137,6 +176,178 @@ module.exports = animateStyles;
 
 /***/ }),
 
+/***/ 711:
+/***/ ((module) => {
+
+/*
+ * All easing functions
+ * @link: https://easings.net
+ * @param {Number} t   - time (Amount of time that has passed since the beginning of the animation. Usually starts at 0 and is slowly increased using a game loop or other update function.)
+ * @param {Number} b   - beginning value (The starting point of the animation. Usually it's a static value, you can start at 0 for example.)
+ * @param {Number} c   - change in value (The amount of change needed to go from starting point to end point. It's also usually a static value.)
+ * @param {Number} d   - duration (Amount of time the animation will take. Usually a static value aswell.)
+ * @return {Number}
+ */
+function easeLinear(t, b, c, d) {
+  return c * t / d + b;
+}
+function easeInQuad(t, b, c, d) {
+  return c * (t /= d) * t + b;
+}
+function easeOutQuad(t, b, c, d) {
+  return -c * (t /= d) * (t - 2) + b;
+}
+function easeInOutQuad(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+  return -c / 2 * (--t * (t - 2) - 1) + b;
+}
+function easeInSine(t, b, c, d) {
+  return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+}
+function easeOutSine(t, b, c, d) {
+  return c * Math.sin(t / d * (Math.PI / 2)) + b;
+}
+function easeInOutSine(t, b, c, d) {
+  return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+}
+function easeInExpo(t, b, c, d) {
+  return t == 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
+}
+function easeOutExpo(t, b, c, d) {
+  return t == d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+}
+function easeInOutExpo(t, b, c, d) {
+  if (t == 0) return b;
+  if (t == d) return b + c;
+  if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+  return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
+}
+function easeInCirc(t, b, c, d) {
+  return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+}
+function easeOutCirc(t, b, c, d) {
+  return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+}
+function easeInOutCirc(t, b, c, d) {
+  if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+  return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+}
+function easeInCubic(t, b, c, d) {
+  return c * (t /= d) * t * t + b;
+}
+function easeOutCubic(t, b, c, d) {
+  return c * ((t = t / d - 1) * t * t + 1) + b;
+}
+function easeInOutCubic(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
+  return c / 2 * ((t -= 2) * t * t + 2) + b;
+}
+function easeInQuart(t, b, c, d) {
+  return c * (t /= d) * t * t * t + b;
+}
+function easeOutQuart(t, b, c, d) {
+  return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+}
+function easeInOutQuart(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
+  return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
+}
+function easeInQuint(t, b, c, d) {
+  return c * (t /= d) * t * t * t * t + b;
+}
+function easeOutQuint(t, b, c, d) {
+  return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+}
+function easeInOutQuint(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
+  return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+}
+function easeInElastic(t, b, c, d) {
+  var s = 1.70158;
+  var p = 0;
+  var a = c;
+  if (t == 0) return b;
+  if ((t /= d) == 1) return b + c;
+  if (!p) p = d * .3;
+  if (a < Math.abs(c)) {
+    a = c;
+    var s = p / 4;
+  } else var s = p / (2 * Math.PI) * Math.asin(c / a);
+  return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+}
+function easeOutElastic(t, b, c, d) {
+  var s = 1.70158;
+  var p = 0;
+  var a = c;
+  if (t == 0) return b;
+  if ((t /= d) == 1) return b + c;
+  if (!p) p = d * .3;
+  if (a < Math.abs(c)) {
+    a = c;
+    var s = p / 4;
+  } else var s = p / (2 * Math.PI) * Math.asin(c / a);
+  return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
+}
+function easeInOutElastic(t, b, c, d) {
+  var s = 1.70158;
+  var p = 0;
+  var a = c;
+  if (t == 0) return b;
+  if ((t /= d / 2) == 2) return b + c;
+  if (!p) p = d * (.3 * 1.5);
+  if (a < Math.abs(c)) {
+    a = c;
+    var s = p / 4;
+  } else var s = p / (2 * Math.PI) * Math.asin(c / a);
+  if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+  return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
+}
+function easeInBack(t, b, c, d) {
+  if (s == undefined) s = 1.70158;
+  return c * (t /= d) * t * ((s + 1) * t - s) + b;
+}
+function easeOutBack(t, b, c, d) {
+  if (s == undefined) s = 1.70158;
+  return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+}
+function easeInOutBack(t, b, c, d) {
+  if (s == undefined) s = 1.70158;
+  if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
+  return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
+}
+module.exports = {
+  easeLinear: easeLinear,
+  easeInQuad: easeInQuad,
+  easeOutQuad: easeOutQuad,
+  easeInOutQuad: easeInOutQuad,
+  easeInSine: easeInSine,
+  easeOutSine: easeOutSine,
+  easeInOutSine: easeInOutSine,
+  easeInExpo: easeInExpo,
+  easeOutExpo: easeOutExpo,
+  easeInOutExpo: easeInOutExpo,
+  easeInCirc: easeInCirc,
+  easeOutCirc: easeOutCirc,
+  easeInOutCirc: easeInOutCirc,
+  easeInCubic: easeInCubic,
+  easeOutCubic: easeOutCubic,
+  easeInOutCubic: easeInOutCubic,
+  easeInQuart: easeInQuart,
+  easeOutQuart: easeOutQuart,
+  easeInOutQuart: easeInOutQuart,
+  easeInQuint: easeInQuint,
+  easeOutQuint: easeOutQuint,
+  easeInOutQuint: easeInOutQuint,
+  easeInElastic: easeInElastic,
+  easeOutElastic: easeOutElastic,
+  easeInOutElastic: easeInOutElastic,
+  easeInBack: easeInBack,
+  easeOutBack: easeOutBack,
+  easeInOutBack: easeInOutBack
+};
+
+/***/ }),
+
 /***/ 787:
 /***/ ((module) => {
 
@@ -232,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,
@@ -247,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),
@@ -263,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: {
@@ -270,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);
@@ -294,24 +529,41 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
+// Adapt the easing parameters of TweenMax
+var EasingList = /*#__PURE__*/function (EasingList) {
+  EasingList["linear"] = "linear";
+  EasingList["easeIn"] = "ease-in";
+  EasingList["easeOut"] = "ease-out";
+  EasingList["easeInOut"] = "ease-in-out";
+  return EasingList;
+}(EasingList || {});
 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,
     onChange = props.onChange,
     children = props.children;
+  var easeType = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing];
   var ALTER = typeof alternateCollapse === 'undefined' ? true : alternateCollapse;
   var rootRef = (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 = _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;
 
     //
@@ -336,7 +588,7 @@ var Accordion = function Accordion(props) {
               startHeight: node.scrollHeight,
               endHeight: 0,
               speed: animSpeed
-            });
+            }, easeType);
           }
         });
 
@@ -358,6 +610,9 @@ var Accordion = function Accordion(props) {
         startHeight: 0,
         endHeight: $curContent.scrollHeight,
         speed: animSpeed
+      }, easeType, function () {
+        // content height observer
+        setHeightObserver(curIndex);
       });
     } else {
       if (e.type == 'click') {
@@ -371,7 +626,7 @@ var Accordion = function Accordion(props) {
           startHeight: $curContent.scrollHeight,
           endHeight: 0,
           speed: animSpeed
-        });
+        }, easeType);
       }
     }
     if (typeof onChange === 'function') {
@@ -388,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

@@ -12,52 +12,91 @@ return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
 /***/ 710:
-/***/ ((module) => {
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _require = __webpack_require__(711),
+  easeLinear = _require.easeLinear,
+  easeInQuad = _require.easeInQuad,
+  easeOutQuad = _require.easeOutQuad,
+  easeInOutQuad = _require.easeInOutQuad;
+
 /**
  * Element Animate
  * @public
  * 
  * @param  {HTMLElement} curElement      - Element of animation.
  * @param  {?JSON} config                - Configuration of 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
   config = setDefaultOptions({
     "startHeight": 0,
+    // node.scrollHeight
     "endHeight": 0,
-    "speed": 200,
-    //ms
-    "fps": 1000 / 60 // 60FPS
+    "speed": 200 //ms
   }, config);
 
   //
   var _endHeight = config.endHeight,
-    _speed = config.speed,
-    _fps = config.fps;
+    _speed = config.speed;
   var _startHeight = config.startHeight;
-  var timer = null;
-  var startTime = Date.now();
-  var deltaHeight = curElement.clientHeight < _endHeight ? _endHeight / _speed * _fps : _startHeight / _speed * _fps;
-  timer = setInterval(function () {
-    var elapsed = Date.now() - startTime; //Work out the elapsed time
+  var duration = _speed;
+  var start = new Date().getTime();
+  var from = 0;
+  var to = 100;
+  var requestId;
+  var loop = function loop() {
+    //easing
+    var time = new Date().getTime() - start; //Work out the elapsed time
+    var 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
+    var percent = val / 100;
+
+    // change height
+    if (curElement.clientHeight < _endHeight) {
+      curElement.style.height = _endHeight * percent + 'px';
+    } else {
+      if (_startHeight > 0) curElement.style.height = _startHeight - _startHeight * percent + 'px';
+    }
 
     //If the elapsed time is less than the speed (ms)
-    if (elapsed < _speed) {
-      if (curElement.clientHeight < _endHeight) {
-        _startHeight = _startHeight + deltaHeight;
-      } else {
-        _startHeight = _startHeight - deltaHeight;
-      }
-      curElement.style.height = _startHeight + 'px';
+    if (time < duration) {
+      //
+      requestId = window.requestAnimationFrame(loop);
     } else {
+      // change height
       curElement.style.height = _endHeight + 'px';
-      clearInterval(timer);
+      if (typeof callback === 'function') callback();
+
+      //
+      window.cancelAnimationFrame(requestId);
     }
-  }, _fps);
+  };
+  requestId = window.requestAnimationFrame(loop);
 }
 
 /**
@@ -137,6 +176,178 @@ module.exports = animateStyles;
 
 /***/ }),
 
+/***/ 711:
+/***/ ((module) => {
+
+/*
+ * All easing functions
+ * @link: https://easings.net
+ * @param {Number} t   - time (Amount of time that has passed since the beginning of the animation. Usually starts at 0 and is slowly increased using a game loop or other update function.)
+ * @param {Number} b   - beginning value (The starting point of the animation. Usually it's a static value, you can start at 0 for example.)
+ * @param {Number} c   - change in value (The amount of change needed to go from starting point to end point. It's also usually a static value.)
+ * @param {Number} d   - duration (Amount of time the animation will take. Usually a static value aswell.)
+ * @return {Number}
+ */
+function easeLinear(t, b, c, d) {
+  return c * t / d + b;
+}
+function easeInQuad(t, b, c, d) {
+  return c * (t /= d) * t + b;
+}
+function easeOutQuad(t, b, c, d) {
+  return -c * (t /= d) * (t - 2) + b;
+}
+function easeInOutQuad(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+  return -c / 2 * (--t * (t - 2) - 1) + b;
+}
+function easeInSine(t, b, c, d) {
+  return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+}
+function easeOutSine(t, b, c, d) {
+  return c * Math.sin(t / d * (Math.PI / 2)) + b;
+}
+function easeInOutSine(t, b, c, d) {
+  return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+}
+function easeInExpo(t, b, c, d) {
+  return t == 0 ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
+}
+function easeOutExpo(t, b, c, d) {
+  return t == d ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+}
+function easeInOutExpo(t, b, c, d) {
+  if (t == 0) return b;
+  if (t == d) return b + c;
+  if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+  return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
+}
+function easeInCirc(t, b, c, d) {
+  return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+}
+function easeOutCirc(t, b, c, d) {
+  return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+}
+function easeInOutCirc(t, b, c, d) {
+  if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+  return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+}
+function easeInCubic(t, b, c, d) {
+  return c * (t /= d) * t * t + b;
+}
+function easeOutCubic(t, b, c, d) {
+  return c * ((t = t / d - 1) * t * t + 1) + b;
+}
+function easeInOutCubic(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
+  return c / 2 * ((t -= 2) * t * t + 2) + b;
+}
+function easeInQuart(t, b, c, d) {
+  return c * (t /= d) * t * t * t + b;
+}
+function easeOutQuart(t, b, c, d) {
+  return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+}
+function easeInOutQuart(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
+  return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
+}
+function easeInQuint(t, b, c, d) {
+  return c * (t /= d) * t * t * t * t + b;
+}
+function easeOutQuint(t, b, c, d) {
+  return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+}
+function easeInOutQuint(t, b, c, d) {
+  if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
+  return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+}
+function easeInElastic(t, b, c, d) {
+  var s = 1.70158;
+  var p = 0;
+  var a = c;
+  if (t == 0) return b;
+  if ((t /= d) == 1) return b + c;
+  if (!p) p = d * .3;
+  if (a < Math.abs(c)) {
+    a = c;
+    var s = p / 4;
+  } else var s = p / (2 * Math.PI) * Math.asin(c / a);
+  return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+}
+function easeOutElastic(t, b, c, d) {
+  var s = 1.70158;
+  var p = 0;
+  var a = c;
+  if (t == 0) return b;
+  if ((t /= d) == 1) return b + c;
+  if (!p) p = d * .3;
+  if (a < Math.abs(c)) {
+    a = c;
+    var s = p / 4;
+  } else var s = p / (2 * Math.PI) * Math.asin(c / a);
+  return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
+}
+function easeInOutElastic(t, b, c, d) {
+  var s = 1.70158;
+  var p = 0;
+  var a = c;
+  if (t == 0) return b;
+  if ((t /= d / 2) == 2) return b + c;
+  if (!p) p = d * (.3 * 1.5);
+  if (a < Math.abs(c)) {
+    a = c;
+    var s = p / 4;
+  } else var s = p / (2 * Math.PI) * Math.asin(c / a);
+  if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+  return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
+}
+function easeInBack(t, b, c, d) {
+  if (s == undefined) s = 1.70158;
+  return c * (t /= d) * t * ((s + 1) * t - s) + b;
+}
+function easeOutBack(t, b, c, d) {
+  if (s == undefined) s = 1.70158;
+  return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+}
+function easeInOutBack(t, b, c, d) {
+  if (s == undefined) s = 1.70158;
+  if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= 1.525) + 1) * t - s)) + b;
+  return c / 2 * ((t -= 2) * t * (((s *= 1.525) + 1) * t + s) + 2) + b;
+}
+module.exports = {
+  easeLinear: easeLinear,
+  easeInQuad: easeInQuad,
+  easeOutQuad: easeOutQuad,
+  easeInOutQuad: easeInOutQuad,
+  easeInSine: easeInSine,
+  easeOutSine: easeOutSine,
+  easeInOutSine: easeInOutSine,
+  easeInExpo: easeInExpo,
+  easeOutExpo: easeOutExpo,
+  easeInOutExpo: easeInOutExpo,
+  easeInCirc: easeInCirc,
+  easeOutCirc: easeOutCirc,
+  easeInOutCirc: easeInOutCirc,
+  easeInCubic: easeInCubic,
+  easeOutCubic: easeOutCubic,
+  easeInOutCubic: easeInOutCubic,
+  easeInQuart: easeInQuart,
+  easeOutQuart: easeOutQuart,
+  easeInOutQuart: easeInOutQuart,
+  easeInQuint: easeInQuint,
+  easeOutQuint: easeOutQuint,
+  easeInOutQuint: easeInOutQuint,
+  easeInElastic: easeInElastic,
+  easeOutElastic: easeOutElastic,
+  easeInOutElastic: easeInOutElastic,
+  easeInBack: easeInBack,
+  easeOutBack: easeOutBack,
+  easeInOutBack: easeInOutBack
+};
+
+/***/ }),
+
 /***/ 787:
 /***/ ((module) => {
 
@@ -232,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,
@@ -247,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),
@@ -263,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: {
@@ -270,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);
@@ -294,24 +529,41 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+
+// Adapt the easing parameters of TweenMax
+var EasingList = /*#__PURE__*/function (EasingList) {
+  EasingList["linear"] = "linear";
+  EasingList["easeIn"] = "ease-in";
+  EasingList["easeOut"] = "ease-out";
+  EasingList["easeInOut"] = "ease-in-out";
+  return EasingList;
+}(EasingList || {});
 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,
     onChange = props.onChange,
     children = props.children;
+  var easeType = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing];
   var ALTER = typeof alternateCollapse === 'undefined' ? true : alternateCollapse;
   var rootRef = (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 = _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;
 
     //
@@ -336,7 +588,7 @@ var Accordion = function Accordion(props) {
               startHeight: node.scrollHeight,
               endHeight: 0,
               speed: animSpeed
-            });
+            }, easeType);
           }
         });
 
@@ -358,6 +610,9 @@ var Accordion = function Accordion(props) {
         startHeight: 0,
         endHeight: $curContent.scrollHeight,
         speed: animSpeed
+      }, easeType, function () {
+        // content height observer
+        setHeightObserver(curIndex);
       });
     } else {
       if (e.type == 'click') {
@@ -371,7 +626,7 @@ var Accordion = function Accordion(props) {
           startHeight: $curContent.scrollHeight,
           endHeight: 0,
           speed: animSpeed
-        });
+        }, easeType);
       }
     }
     if (typeof onChange === 'function') {
@@ -388,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

@@ -4,6 +4,16 @@ import Item from './AccordionItem';
 
 import animateStyles from './utils/anim';
 
+
+// Adapt the easing parameters of TweenMax
+enum EasingList {
+    linear = 'linear',
+    easeIn = 'ease-in',
+    easeOut = 'ease-out',
+    easeInOut = 'ease-in-out'
+}
+
+
 declare module 'react' {
     interface ReactI18NextChildren<T> {
         children?: any;
@@ -19,8 +29,12 @@ 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 */
+    easing?: string;
     /**  Mutually exclusive alternate expansion between the levels */
     alternateCollapse?: boolean;
     /** This function is called whenever the data is updated.
@@ -36,24 +50,29 @@ const Accordion = (props: AccordionProps) => {
         wrapperClassName,
         triggerType,
         displayTheFirstItem,
+        displayAllItems,
         duration,
+        easing,
         alternateCollapse,
         onChange,
         children
     } = props;
 
 
+    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);
 
-   
-
+    
     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;
 
 		//
@@ -81,7 +100,7 @@ const Accordion = (props: AccordionProps) => {
                             startHeight  : node.scrollHeight,
                             endHeight    : 0,
                             speed        : animSpeed
-                        } as  never);				
+                        } as  never, easeType);				
                     }
 
                 });
@@ -106,7 +125,10 @@ const Accordion = (props: AccordionProps) => {
 				startHeight  : 0,
 				endHeight    : $curContent.scrollHeight,
 				speed        : animSpeed
-			} as  never);
+			} as  never, easeType, () => {
+                // content height observer
+                setHeightObserver(curIndex);
+            });
 			
 		} else {
 			
@@ -121,7 +143,7 @@ const Accordion = (props: AccordionProps) => {
 					startHeight  : $curContent.scrollHeight,
 					endHeight    : 0,
 					speed        : animSpeed
-				} as  never);
+				} as  never, easeType);
 			}
 			
 		}
@@ -143,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

@@ -1,48 +1,93 @@
 
+const {
+    easeLinear,
+    easeInQuad,
+    easeOutQuad,
+    easeInOutQuad
+}  = require('./easing');
+
+
 /**
  * Element Animate
  * @public
  * 
  * @param  {HTMLElement} curElement      - Element of animation.
  * @param  {?JSON} config                - Configuration of animation
+ * @param  {?string} easeType            - Types of easing animation.
+* @param  {?Function} callback           - Callback after animation ends
  */
-function animateStyles(curElement, config) {
+function animateStyles(curElement, config, easeType = 'linear', callback = () => {}) {
     if (typeof curElement === typeof undefined) return;
 
     // Set a default configuration
     config = setDefaultOptions({
-        "startHeight": 0,
+        "startHeight": 0,    // node.scrollHeight
         "endHeight": 0,
         "speed": 200, //ms
-        "fps": 1000 / 60 // 60FPS
     }, config);
 
     //
     const _endHeight = config.endHeight,
-        _speed = config.speed,
-        _fps = config.fps;
+          _speed = config.speed
 
     let _startHeight = config.startHeight;
-    let timer = null;
-    const startTime = Date.now();
-    const deltaHeight = curElement.clientHeight < _endHeight ? (_endHeight / _speed) * _fps : (_startHeight / _speed) * _fps;
+ 
+    const duration = _speed;
+    const start = new Date().getTime();
+    const from = 0;
+    const to = 100;
+    let requestId;
+    const loop = function () {
+
+        //easing
+        const time = new Date().getTime() - start; //Work out the elapsed time
+        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);
+        }
 
-    timer = setInterval(() => {
-        const elapsed = Date.now() - startTime; //Work out the elapsed time
+        // Elapsed time in miliseconds
+        const percent = val / 100;
+
+        
+        // change height
+        if (curElement.clientHeight < _endHeight) {
+            curElement.style.height = _endHeight * percent + 'px';
+        } else {
+            if (_startHeight > 0) curElement.style.height = _startHeight - (_startHeight * percent) + 'px';
+        }
 
+        
         //If the elapsed time is less than the speed (ms)
-        if (elapsed < _speed) {
-            if (curElement.clientHeight < _endHeight) {
-                _startHeight = _startHeight + deltaHeight;
-            } else {
-                _startHeight = _startHeight - deltaHeight;
-            }
-            curElement.style.height = _startHeight + 'px';
+        if (time < duration) {
+            //
+            requestId = window.requestAnimationFrame(loop);
         } else {
+            // change height
             curElement.style.height = _endHeight + 'px';
-            clearInterval(timer);
+            
+            if (typeof callback === 'function') callback();
+            
+            //
+            window.cancelAnimationFrame(requestId);
         }
-    }, _fps);
+    };
+    requestId = window.requestAnimationFrame(loop);
 
 }
 

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

@@ -0,0 +1,200 @@
+
+/*
+ * All easing functions
+ * @link: https://easings.net
+ * @param {Number} t   - time (Amount of time that has passed since the beginning of the animation. Usually starts at 0 and is slowly increased using a game loop or other update function.)
+ * @param {Number} b   - beginning value (The starting point of the animation. Usually it's a static value, you can start at 0 for example.)
+ * @param {Number} c   - change in value (The amount of change needed to go from starting point to end point. It's also usually a static value.)
+ * @param {Number} d   - duration (Amount of time the animation will take. Usually a static value aswell.)
+ * @return {Number}
+ */
+function easeLinear (t, b, c, d) {
+    return c * t / d + b;
+}
+
+function easeInQuad (t, b, c, d) {
+    return c * (t /= d) * t + b;
+}
+
+function easeOutQuad (t, b, c, d) {
+    return -c * (t /= d) * (t - 2) + b;
+}
+
+function easeInOutQuad (t, b, c, d) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
+    return -c / 2 * ((--t) * (t - 2) - 1) + b;
+}
+
+function easeInSine (t, b, c, d) {
+    return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
+}
+
+function easeOutSine (t, b, c, d) {
+    return c * Math.sin(t / d * (Math.PI / 2)) + b;
+}
+
+function easeInOutSine (t, b, c, d) {
+    return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
+}
+
+function easeInExpo (t, b, c, d) {
+    return (t == 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
+}
+
+function easeOutExpo (t, b, c, d) {
+    return (t == d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b;
+}
+
+function easeInOutExpo (t, b, c, d) {
+    if (t == 0) return b;
+    if (t == d) return b + c;
+    if ((t /= d / 2) < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
+    return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b;
+}
+
+function easeInCirc (t, b, c, d) {
+    return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b;
+}
+
+function easeOutCirc (t, b, c, d) {
+    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
+}
+
+function easeInOutCirc (t, b, c, d) {
+    if ((t /= d / 2) < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
+    return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b;
+}
+
+function easeInCubic (t, b, c, d) {
+    return c * (t /= d) * t * t + b;
+}
+
+function easeOutCubic (t, b, c, d) {
+    return c * ((t = t / d - 1) * t * t + 1) + b;
+}
+
+function easeInOutCubic (t, b, c, d) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
+    return c / 2 * ((t -= 2) * t * t + 2) + b;
+}
+
+function easeInQuart (t, b, c, d) {
+    return c * (t /= d) * t * t * t + b;
+}
+
+function easeOutQuart (t, b, c, d) {
+    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
+}
+
+function easeInOutQuart (t, b, c, d) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
+    return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
+}
+
+function easeInQuint (t, b, c, d) {
+    return c * (t /= d) * t * t * t * t + b;
+}
+
+function easeOutQuint (t, b, c, d) {
+    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+}
+
+
+function easeInOutQuint (t, b, c, d) {
+    if ((t /= d / 2) < 1) return c / 2 * t * t * t * t * t + b;
+    return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+}
+
+function easeInElastic (t, b, c, d) {
+    var s = 1.70158;
+    var p = 0;
+    var a = c;
+    if (t == 0) return b;
+    if ((t /= d) == 1) return b + c;
+    if (!p) p = d * .3;
+    if (a < Math.abs(c)) {
+        a = c;
+        var s = p / 4;
+    }
+    else var s = p / (2 * Math.PI) * Math.asin(c / a);
+    return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+}
+
+function easeOutElastic (t, b, c, d) {
+    var s = 1.70158;
+    var p = 0;
+    var a = c;
+    if (t == 0) return b;
+    if ((t /= d) == 1) return b + c;
+    if (!p) p = d * .3;
+    if (a < Math.abs(c)) {
+        a = c;
+        var s = p / 4;
+    }
+    else var s = p / (2 * Math.PI) * Math.asin(c / a);
+    return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
+}
+
+function easeInOutElastic (t, b, c, d) {
+    var s = 1.70158;
+    var p = 0;
+    var a = c;
+    if (t == 0) return b;
+    if ((t /= d / 2) == 2) return b + c;
+    if (!p) p = d * (.3 * 1.5);
+    if (a < Math.abs(c)) {
+        a = c;
+        var s = p / 4;
+    }
+    else var s = p / (2 * Math.PI) * Math.asin(c / a);
+    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
+}
+
+function easeInBack (t, b, c, d) {
+    if (s == undefined) s = 1.70158;
+    return c * (t /= d) * t * ((s + 1) * t - s) + b;
+}
+
+function easeOutBack (t, b, c, d) {
+    if (s == undefined) s = 1.70158;
+    return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+}
+
+function easeInOutBack (t, b, c, d) {
+    if (s == undefined) s = 1.70158;
+    if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+    return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+}
+
+
+module.exports = { 
+    easeLinear, 
+    easeInQuad, 
+    easeOutQuad, 
+    easeInOutQuad, 
+    easeInSine, 
+    easeOutSine, 
+    easeInOutSine, 
+    easeInExpo, 
+    easeOutExpo, 
+    easeInOutExpo, 
+    easeInCirc, 
+    easeOutCirc, 
+    easeInOutCirc, 
+    easeInCubic, 
+    easeOutCubic, 
+    easeInOutCubic, 
+    easeInQuart, 
+    easeOutQuart, 
+    easeInOutQuart, 
+    easeInQuint, 
+    easeOutQuint, 
+    easeInOutQuint, 
+    easeInElastic, 
+    easeOutElastic, 
+    easeInOutElastic, 
+    easeInBack, 
+    easeOutBack, 
+    easeInOutBack
+};

package/package.json

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