funda-ui 1.0.400 → 1.0.405

package/MultiFuncSelect/index.js

@@ -67,6 +67,9 @@ module.exports = {
 /***/ ((module) => {
 
 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 _excluded = ["children"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -135,28 +138,44 @@ function flatTree(arr) {
 }
 
 /**
- * Add depth to each item in the tree
- * @param {Array} arr                    - Hierarchical array
- * @param  {?String | ?Number} parentId  - Parent id
- * @param  {?String} keyId               - Key value of id.
- * @param  {?String} keyParentId         - Key value of parent id.
- * @param  {?Number} depth               - Depth of the item.
- * @returns 
+ * Get all depth
+ * @param {Object} node 
+ * @returns Number
  */
+function getAllDepth(arr) {
+  var count = function count(children) {
+    return children.reduce(function (depth, child) {
+      return Math.max(depth, 1 + count(child.children)); // increment depth of children by 1, and compare it with accumulated depth of other children within the same element
+    }, 0); //default value 0 that's returned if there are no children
+  };
+
+  return count(arr);
+}
+
+/**
+* Add depth to each item in the tree
+* @param {Array} arr       - Hierarchical array
+* @param  {?String} keyId               - Key value of id.
+* @param  {?String} keyParentId         - Key value of parent id.
+* @param  {?Number} depth               - Depth of the item.
+* @returns Number
+*/
 function addTreeDepth(arr) {
-  var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var keyId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'id';
-  var keyParentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'parent_id';
-  var depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  arr.forEach(function (item) {
-    item.depth = depth;
-    // Query all child nodes by parent node ID
-    if (item.children && item.children.length > 0) {
-      addTreeDepth(item.children, item[keyId], keyId, keyParentId, ++depth);
-    } else {
-      depth = 0;
+  var keyId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  var parentItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return arr.reduce(function (acc, el) {
+    var children = el.children,
+      otherProps = _objectWithoutProperties(el, _excluded);
+    acc.push(_objectSpread(_objectSpread({}, otherProps), {}, {
+      parentItem: parentItem,
+      depth: depth
+    }));
+    if (children) {
+      return acc.concat(addTreeDepth(children, keyId, el[keyId], depth + 1));
     }
-  });
+    return acc;
+  }, []);
 }
 
 /**
@@ -173,6 +192,7 @@ function addTreeIndent(arr) {
   var keyName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'label';
   arr.forEach(function (item) {
     var indent = '';
+    console.log(item.depth);
     if (item.depth) {
       Array(item.depth).fill(0).forEach(function (k, i) {
         indent += placeholder;
@@ -184,6 +204,7 @@ function addTreeIndent(arr) {
   });
 }
 module.exports = {
+  getAllDepth: getAllDepth,
   convertTree: convertTree,
   flatTree: flatTree,
   addTreeDepth: addTreeDepth,
@@ -739,8 +760,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if (hierarchical) {
-              (0,tree.addTreeDepth)(_ORGIN_DATA);
-              _ORGIN_DATA = (0,tree.flatTree)(_ORGIN_DATA);
+              _ORGIN_DATA = (0,tree.addTreeDepth)(_ORGIN_DATA);
               (0,tree.addTreeIndent)(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
@@ -855,8 +875,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if (hierarchical) {
-              (0,tree.addTreeDepth)(optionsDataInit);
-              optionsDataInit = (0,tree.flatTree)(optionsDataInit);
+              optionsDataInit = (0,tree.addTreeDepth)(optionsDataInit);
               (0,tree.addTreeIndent)(optionsDataInit, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 

package/Toast/index.css

@@ -69,6 +69,34 @@
 .toasts__wrapper .toast-container {
   margin-bottom: var(--toasts-container-gap);
 }
+.toasts__wrapper .toast-container.auto-anim-switch--initfirst {
+  transform: translateY(-20);
+  opacity: 0;
+}
+.toasts__wrapper .toast-container.auto-anim-switch--first {
+  animation-name: toast-anim-show-first;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.toasts__wrapper .toast-container.auto-anim-switch:not(.only-one) {
+  animation-name: toast-anim-hide;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.toasts__wrapper .toast-container.only-one.auto-anim-switch {
+  animation-name: toast-anim-hide--onlyone;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
 .toasts__wrapper.toasts__wrapper--cascading .toast-container {
   margin-bottom: 0;
 }
@@ -105,3 +133,50 @@
 .toast-container.hide-end {
   display: none;
 }
+
+@keyframes toast-anim-initfirst {
+  0% {
+    transform: translateY(-20px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+@keyframes toast-anim-show-first {
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes toast-anim-hide {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+    /* prevent auto-close's item */
+    display: block;
+  }
+}
+@keyframes toast-anim-hide--onlyone {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+    /* prevent auto-close's item */
+    display: block;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+    /* prevent auto-close's item */
+    display: block;
+  }
+}

package/Toast/index.d.ts

@@ -7,8 +7,8 @@ declare global {
 declare type ToastProps = {
     /** Specify data of toasts as a JSON string format. */
     data: any[any];
-    /** Use asynchronous triggering */
-    async?: boolean;
+    /** Automatically hide multiple items */
+    autoHideMultiple?: boolean;
     /** The direction of the toast. */
     direction?: string;
     /** Set an automatic closing time, multiple items will be accumulated in order.
@@ -29,6 +29,8 @@ declare type ToastProps = {
     closeBtnColor?: string;
     /** Disable the close button. */
     closeDisabled?: boolean;
+    /**  */
+    async?: boolean;
     /** -- */
     id?: string;
     onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;

package/Toast/index.js

@@ -105,7 +105,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 
 ;
 var Item = function Item(props) {
-  var index = props.index,
+  var onlyOne = props.onlyOne,
+    index = props.index,
     title = props.title,
     note = props.note,
     message = props.message,
@@ -117,7 +118,7 @@ var Item = function Item(props) {
     closeBtnColor = props.closeBtnColor,
     closeDisabled = props.closeDisabled;
   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: "toast-container",
+    className: "toast-container ".concat(onlyOne ? 'only-one' : ''),
     "data-index": index,
     style: cascading ? {
       transform: "perspective(100px) translateZ(-".concat(2 * index, "px) translateY(").concat(35 * index, "px)"),
@@ -172,6 +173,7 @@ var Item = function Item(props) {
 
 var Toast = function Toast(props) {
   var async = props.async,
+    autoHideMultiple = props.autoHideMultiple,
     direction = props.direction,
     autoCloseTime = props.autoCloseTime,
     autoCloseReverse = props.autoCloseReverse,
@@ -187,7 +189,7 @@ var Toast = function Toast(props) {
   var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)().replace(/\:/g, "-");
   var idRes = id || uniqueID;
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var depth = data.length + 1;
+  var depth = autoHideMultiple ? data.slice(-2).length + 1 : data.length + 1;
   var cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
   function init() {
     // Move HTML templates to tag end body </body>
@@ -203,6 +205,20 @@ var Toast = function Toast(props) {
           handleClose(index, currentItem);
         });
       });
+
+      // Automatically hide multiple items
+      // It creates a transition animation effect with multiple records and only one displayed.
+      if (autoHideMultiple) {
+        var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        _list.forEach(function (node, i) {
+          if (i !== _list.length - 1) {
+            node.classList.add('auto-anim-switch');
+          } else {
+            node.classList.add('auto-anim-switch--initfirst');
+            node.classList.add('auto-anim-switch--first');
+          }
+        });
+      }
     }
 
     // Initialize data
@@ -210,8 +226,8 @@ var Toast = function Toast(props) {
     var $toast = document.querySelector("#".concat(rootRef.current.id));
     if ($toast !== null) {
       if ($toast.dataset.async == 'true') {
-        var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
-        _list.forEach(function (node, i) {
+        var _list2 = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        _list2.forEach(function (node, i) {
           node.classList.remove('hide-end');
           // rearrange
           if (cascadingEnabled) node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
@@ -264,9 +280,11 @@ var Toast = function Toast(props) {
     window.setCloseToast = setTimeout(function () {
       var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
       if (autoCloseReverse) {
-        _list[items.length - index].classList.add('hide-start');
+        var _list3;
+        (_list3 = _list[items.length - index]) === null || _list3 === void 0 ? void 0 : _list3.classList.add('hide-start');
       } else {
-        _list[index - 1].classList.add('hide-start');
+        var _list4;
+        (_list4 = _list[index - 1]) === null || _list4 === void 0 ? void 0 : _list4.classList.add('hide-start');
       }
 
       //Let the removed animation show
@@ -284,7 +302,8 @@ var Toast = function Toast(props) {
             return !node.classList.contains('hide-end');
           }));
         } else {
-          _list[index - 1].classList.add('hide-end');
+          var _list5;
+          (_list5 = _list[index - 1]) === null || _list5 === void 0 ? void 0 : _list5.classList.add('hide-end');
           //
           onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(index - 1), _list.filter(function (node) {
             return !node.classList.contains('hide-end');
@@ -336,8 +355,9 @@ var Toast = function Toast(props) {
     ref: rootRef
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toasts"
-  }, data.map(function (item, i) {
+  }, (autoHideMultiple ? data.slice(-2) : data).map(function (item, i) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_Item, {
+      onlyOne: data.length === 1 ? true : false,
       depth: depth - i,
       key: i,
       index: i,

package/lib/cjs/MultiFuncSelect/index.js

@@ -67,6 +67,9 @@ module.exports = {
 /***/ ((module) => {
 
 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 _excluded = ["children"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -135,28 +138,44 @@ function flatTree(arr) {
 }
 
 /**
- * Add depth to each item in the tree
- * @param {Array} arr                    - Hierarchical array
- * @param  {?String | ?Number} parentId  - Parent id
- * @param  {?String} keyId               - Key value of id.
- * @param  {?String} keyParentId         - Key value of parent id.
- * @param  {?Number} depth               - Depth of the item.
- * @returns 
+ * Get all depth
+ * @param {Object} node 
+ * @returns Number
  */
+function getAllDepth(arr) {
+  var count = function count(children) {
+    return children.reduce(function (depth, child) {
+      return Math.max(depth, 1 + count(child.children)); // increment depth of children by 1, and compare it with accumulated depth of other children within the same element
+    }, 0); //default value 0 that's returned if there are no children
+  };
+
+  return count(arr);
+}
+
+/**
+* Add depth to each item in the tree
+* @param {Array} arr       - Hierarchical array
+* @param  {?String} keyId               - Key value of id.
+* @param  {?String} keyParentId         - Key value of parent id.
+* @param  {?Number} depth               - Depth of the item.
+* @returns Number
+*/
 function addTreeDepth(arr) {
-  var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-  var keyId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'id';
-  var keyParentId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'parent_id';
-  var depth = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
-  arr.forEach(function (item) {
-    item.depth = depth;
-    // Query all child nodes by parent node ID
-    if (item.children && item.children.length > 0) {
-      addTreeDepth(item.children, item[keyId], keyId, keyParentId, ++depth);
-    } else {
-      depth = 0;
+  var keyId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'id';
+  var parentItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+  var depth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return arr.reduce(function (acc, el) {
+    var children = el.children,
+      otherProps = _objectWithoutProperties(el, _excluded);
+    acc.push(_objectSpread(_objectSpread({}, otherProps), {}, {
+      parentItem: parentItem,
+      depth: depth
+    }));
+    if (children) {
+      return acc.concat(addTreeDepth(children, keyId, el[keyId], depth + 1));
     }
-  });
+    return acc;
+  }, []);
 }
 
 /**
@@ -173,6 +192,7 @@ function addTreeIndent(arr) {
   var keyName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'label';
   arr.forEach(function (item) {
     var indent = '';
+    console.log(item.depth);
     if (item.depth) {
       Array(item.depth).fill(0).forEach(function (k, i) {
         indent += placeholder;
@@ -184,6 +204,7 @@ function addTreeIndent(arr) {
   });
 }
 module.exports = {
+  getAllDepth: getAllDepth,
   convertTree: convertTree,
   flatTree: flatTree,
   addTreeDepth: addTreeDepth,
@@ -739,8 +760,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if (hierarchical) {
-              (0,tree.addTreeDepth)(_ORGIN_DATA);
-              _ORGIN_DATA = (0,tree.flatTree)(_ORGIN_DATA);
+              _ORGIN_DATA = (0,tree.addTreeDepth)(_ORGIN_DATA);
               (0,tree.addTreeIndent)(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
@@ -855,8 +875,7 @@ var MultiFuncSelect = /*#__PURE__*/(0,external_root_React_commonjs2_react_common
             // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if (hierarchical) {
-              (0,tree.addTreeDepth)(optionsDataInit);
-              optionsDataInit = (0,tree.flatTree)(optionsDataInit);
+              optionsDataInit = (0,tree.addTreeDepth)(optionsDataInit);
               (0,tree.addTreeIndent)(optionsDataInit, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 

package/lib/cjs/Toast/index.d.ts

@@ -7,8 +7,8 @@ declare global {
 declare type ToastProps = {
     /** Specify data of toasts as a JSON string format. */
     data: any[any];
-    /** Use asynchronous triggering */
-    async?: boolean;
+    /** Automatically hide multiple items */
+    autoHideMultiple?: boolean;
     /** The direction of the toast. */
     direction?: string;
     /** Set an automatic closing time, multiple items will be accumulated in order.
@@ -29,6 +29,8 @@ declare type ToastProps = {
     closeBtnColor?: string;
     /** Disable the close button. */
     closeDisabled?: boolean;
+    /**  */
+    async?: boolean;
     /** -- */
     id?: string;
     onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;

package/lib/cjs/Toast/index.js

@@ -105,7 +105,8 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 
 ;
 var Item = function Item(props) {
-  var index = props.index,
+  var onlyOne = props.onlyOne,
+    index = props.index,
     title = props.title,
     note = props.note,
     message = props.message,
@@ -117,7 +118,7 @@ var Item = function Item(props) {
     closeBtnColor = props.closeBtnColor,
     closeDisabled = props.closeDisabled;
   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: "toast-container",
+    className: "toast-container ".concat(onlyOne ? 'only-one' : ''),
     "data-index": index,
     style: cascading ? {
       transform: "perspective(100px) translateZ(-".concat(2 * index, "px) translateY(").concat(35 * index, "px)"),
@@ -172,6 +173,7 @@ var Item = function Item(props) {
 
 var Toast = function Toast(props) {
   var async = props.async,
+    autoHideMultiple = props.autoHideMultiple,
     direction = props.direction,
     autoCloseTime = props.autoCloseTime,
     autoCloseReverse = props.autoCloseReverse,
@@ -187,7 +189,7 @@ var Toast = function Toast(props) {
   var uniqueID = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useId)().replace(/\:/g, "-");
   var idRes = id || uniqueID;
   var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
-  var depth = data.length + 1;
+  var depth = autoHideMultiple ? data.slice(-2).length + 1 : data.length + 1;
   var cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
   function init() {
     // Move HTML templates to tag end body </body>
@@ -203,6 +205,20 @@ var Toast = function Toast(props) {
           handleClose(index, currentItem);
         });
       });
+
+      // Automatically hide multiple items
+      // It creates a transition animation effect with multiple records and only one displayed.
+      if (autoHideMultiple) {
+        var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        _list.forEach(function (node, i) {
+          if (i !== _list.length - 1) {
+            node.classList.add('auto-anim-switch');
+          } else {
+            node.classList.add('auto-anim-switch--initfirst');
+            node.classList.add('auto-anim-switch--first');
+          }
+        });
+      }
     }
 
     // Initialize data
@@ -210,8 +226,8 @@ var Toast = function Toast(props) {
     var $toast = document.querySelector("#".concat(rootRef.current.id));
     if ($toast !== null) {
       if ($toast.dataset.async == 'true') {
-        var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
-        _list.forEach(function (node, i) {
+        var _list2 = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+        _list2.forEach(function (node, i) {
           node.classList.remove('hide-end');
           // rearrange
           if (cascadingEnabled) node.style.transform = "perspective(100px) translateZ(-".concat(2 * i, "px) translateY(").concat(35 * i, "px)");
@@ -264,9 +280,11 @@ var Toast = function Toast(props) {
     window.setCloseToast = setTimeout(function () {
       var _list = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
       if (autoCloseReverse) {
-        _list[items.length - index].classList.add('hide-start');
+        var _list3;
+        (_list3 = _list[items.length - index]) === null || _list3 === void 0 ? void 0 : _list3.classList.add('hide-start');
       } else {
-        _list[index - 1].classList.add('hide-start');
+        var _list4;
+        (_list4 = _list[index - 1]) === null || _list4 === void 0 ? void 0 : _list4.classList.add('hide-start');
       }
 
       //Let the removed animation show
@@ -284,7 +302,8 @@ var Toast = function Toast(props) {
             return !node.classList.contains('hide-end');
           }));
         } else {
-          _list[index - 1].classList.add('hide-end');
+          var _list5;
+          (_list5 = _list[index - 1]) === null || _list5 === void 0 ? void 0 : _list5.classList.add('hide-end');
           //
           onClose === null || onClose === void 0 ? void 0 : onClose(rootRef.current, Number(index - 1), _list.filter(function (node) {
             return !node.classList.contains('hide-end');
@@ -336,8 +355,9 @@ var Toast = function Toast(props) {
     ref: rootRef
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "toasts"
-  }, data.map(function (item, i) {
+  }, (autoHideMultiple ? data.slice(-2) : data).map(function (item, i) {
     return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(src_Item, {
+      onlyOne: data.length === 1 ? true : false,
       depth: depth - i,
       key: i,
       index: i,

package/lib/css/Toast/index.css

@@ -69,6 +69,34 @@
 .toasts__wrapper .toast-container {
   margin-bottom: var(--toasts-container-gap);
 }
+.toasts__wrapper .toast-container.auto-anim-switch--initfirst {
+  transform: translateY(-20);
+  opacity: 0;
+}
+.toasts__wrapper .toast-container.auto-anim-switch--first {
+  animation-name: toast-anim-show-first;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.toasts__wrapper .toast-container.auto-anim-switch:not(.only-one) {
+  animation-name: toast-anim-hide;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+.toasts__wrapper .toast-container.only-one.auto-anim-switch {
+  animation-name: toast-anim-hide--onlyone;
+  animation-duration: 0.3s;
+  animation-timing-function: linear;
+  animation-delay: 0;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
 .toasts__wrapper.toasts__wrapper--cascading .toast-container {
   margin-bottom: 0;
 }
@@ -105,3 +133,50 @@
 .toast-container.hide-end {
   display: none;
 }
+
+@keyframes toast-anim-initfirst {
+  0% {
+    transform: translateY(-20px);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+}
+@keyframes toast-anim-show-first {
+  0% {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes toast-anim-hide {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+    /* prevent auto-close's item */
+    display: block;
+  }
+}
+@keyframes toast-anim-hide--onlyone {
+  0% {
+    transform: translateY(-100%);
+    opacity: 1;
+    /* prevent auto-close's item */
+    display: block;
+  }
+  100% {
+    transform: translateY(10px);
+    opacity: 0;
+    /* prevent auto-close's item */
+    display: block;
+  }
+}

package/lib/esm/MultiFuncSelect/index.tsx

@@ -5,7 +5,6 @@ import useThrottle from './utils/useThrottle';
 
 
 import {
-    flatTree,
     addTreeDepth,
     addTreeIndent
 } from './utils/tree';
@@ -479,13 +478,12 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
                 // set value if the attribute `data-options` of component exists, only valid for single selection (it may be an empty array)
                 if (typeof defaultValue !== 'undefined' && defaultValue !== '') valueInputRef.current.dataset.value = defaultValue;
             }
-
+            
             
             // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if ( hierarchical ) {
-                addTreeDepth(_ORGIN_DATA);
-                _ORGIN_DATA = flatTree(_ORGIN_DATA);
+                _ORGIN_DATA = addTreeDepth(_ORGIN_DATA);
                 addTreeIndent(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
@@ -630,8 +628,7 @@ const MultiFuncSelect = forwardRef((props: MultiFuncSelectProps, ref: any) => {
             // STEP 2: ===========
             // Set hierarchical categories ( with sub-categories )
             if ( hierarchical ) {
-                addTreeDepth(optionsDataInit);
-                optionsDataInit = flatTree(optionsDataInit);
+                optionsDataInit = addTreeDepth(optionsDataInit);
                 addTreeIndent(optionsDataInit, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 

package/lib/esm/MultiFuncSelect/utils/tree.js

@@ -48,26 +48,40 @@ function flatTree(arr) {
     return result;
 }
 
-
 /**
- * Add depth to each item in the tree
- * @param {Array} arr                    - Hierarchical array
- * @param  {?String | ?Number} parentId  - Parent id
- * @param  {?String} keyId               - Key value of id.
- * @param  {?String} keyParentId         - Key value of parent id.
- * @param  {?Number} depth               - Depth of the item.
- * @returns 
+ * Get all depth
+ * @param {Object} node 
+ * @returns Number
  */
-function addTreeDepth(arr, parentId = '', keyId = 'id', keyParentId = 'parent_id', depth = 0) {
-    arr.forEach((item) => {
-        item.depth = depth;
-        // Query all child nodes by parent node ID
-        if (item.children && item.children.length > 0) {
-            addTreeDepth(item.children, item[keyId], keyId, keyParentId, ++depth);
-        } else {
-            depth = 0;
-        }
-    });
+function getAllDepth(arr) {
+    const count = (children) => {
+        return children.reduce((depth, child) => {
+            return Math.max(depth, 1 + count(child.children)); // increment depth of children by 1, and compare it with accumulated depth of other children within the same element
+        }, 0); //default value 0 that's returned if there are no children
+    }
+   return count(arr);
+}
+
+
+
+
+/**
+* Add depth to each item in the tree
+* @param {Array} arr       - Hierarchical array
+* @param  {?String} keyId               - Key value of id.
+* @param  {?String} keyParentId         - Key value of parent id.
+* @param  {?Number} depth               - Depth of the item.
+* @returns Number
+*/
+function addTreeDepth(arr, keyId = 'id', parentItem = '', depth = 0) {
+   return arr.reduce((acc, el) => {
+       const { children, ...otherProps } = el;
+       acc.push({ ...otherProps, parentItem, depth });
+       if (children) {
+           return acc.concat(addTreeDepth(children, keyId, el[keyId], depth + 1));
+       }
+       return acc;
+   }, []);
 }
 
 
@@ -81,8 +95,10 @@ function addTreeDepth(arr, parentId = '', keyId = 'id', keyParentId = 'parent_id
  * @returns Array
  */
 function addTreeIndent(arr, placeholder = '    ', lastPlaceholder = '', keyName = 'label') {
+
     arr.forEach((item) => {
         let indent = ''; 
+        console.log(item.depth);
         if (item.depth) {
             Array(item.depth).fill(0).forEach((k, i) => {
                 indent += placeholder;
@@ -95,6 +111,7 @@ function addTreeIndent(arr, placeholder = '    ', lastPlaceh
 }
 
 module.exports = {
+    getAllDepth,
     convertTree,
     flatTree,
     addTreeDepth,

package/lib/esm/Toast/Item.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 interface ItemProps extends React.ComponentPropsWithoutRef<any> {
+    onlyOne?: boolean;
     index: number;
     title?: string | React.ReactNode | boolean;
     note?: string | React.ReactNode | boolean;
@@ -17,6 +18,7 @@ interface ItemProps extends React.ComponentPropsWithoutRef<any> {
 const Item = (props: ItemProps) => {
 
     const {
+        onlyOne,
         index,
         title,
         note,
@@ -36,7 +38,7 @@ const Item = (props: ItemProps) => {
         <>
 
             <div
-                className={`toast-container`}
+                className={`toast-container ${onlyOne ? 'only-one' : ''}`}
                 data-index={index}
                 style={cascading ? {
                     transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,

package/lib/esm/Toast/index.scss

@@ -83,6 +83,40 @@
 
     .toast-container {
         margin-bottom: var(--toasts-container-gap);
+        
+        &.auto-anim-switch--initfirst {
+            transform: translateY(-20);
+            opacity: 0;
+        }
+        &.auto-anim-switch--first {
+            animation-name: toast-anim-show-first;
+            animation-duration: .3s;
+            animation-timing-function: linear;
+            animation-delay: 0;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+
+        &.auto-anim-switch:not(.only-one) {
+            animation-name: toast-anim-hide;
+            animation-duration: .3s;
+            animation-timing-function: linear;
+            animation-delay: 0;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }
+
+
+        &.only-one.auto-anim-switch {
+            animation-name: toast-anim-hide--onlyone;
+            animation-duration: .3s;
+            animation-timing-function: linear;
+            animation-delay: 0;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards;
+        }  
+
+        
     }
 
     /* cascading divs */
@@ -140,3 +174,64 @@
     }
 
 }
+
+@keyframes toast-anim-initfirst {
+    0% {
+        transform: translateY(-20px);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(20px);
+        opacity: 0;
+    }
+}
+
+@keyframes toast-anim-show-first {
+    0% {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes toast-anim-hide {
+    0% {
+        transform: translateY(-100%);
+        opacity: 1;
+    }
+
+    100% {
+        transform: translateY(10px);
+        opacity: 0;
+
+        /* prevent auto-close's item */
+        display: block;
+       
+    }
+}
+
+
+@keyframes toast-anim-hide--onlyone {
+    0% {
+        transform: translateY(-100%);
+        opacity: 1;
+
+
+        /* prevent auto-close's item */
+        display: block;
+    }
+
+    100% {
+        transform: translateY(10px);
+        opacity: 0;
+
+        /* prevent auto-close's item */
+        display: block;
+       
+    }
+}

package/lib/esm/Toast/index.tsx

@@ -1,7 +1,8 @@
-import React, { useId, useEffect, useState, useRef } from 'react';
+import React, { useId, useEffect, useRef } from 'react';
 
 import Item from './Item';
 
+
 declare global {
     interface Window {
         setCloseToast?: any;
@@ -12,8 +13,8 @@ declare global {
 type ToastProps = {
     /** Specify data of toasts as a JSON string format. */
     data: any[any];
-    /** Use asynchronous triggering */
-    async?: boolean;
+    /** Automatically hide multiple items */
+    autoHideMultiple?: boolean;
     /** The direction of the toast. */
     direction?: string;
     /** Set an automatic closing time, multiple items will be accumulated in order. 
@@ -34,6 +35,8 @@ type ToastProps = {
     closeBtnColor?: string;
     /** Disable the close button. */
     closeDisabled?: boolean;
+    /**  */
+    async?: boolean;
     /** -- */
     id?: string;
     onClose?: (e: HTMLDivElement, currentIndex: number, data: HTMLDivElement[]) => void;
@@ -43,6 +46,7 @@ type ToastProps = {
 const Toast = (props: ToastProps) => {
     const {
         async,
+        autoHideMultiple,
         direction,
         autoCloseTime,
         autoCloseReverse,
@@ -61,11 +65,11 @@ const Toast = (props: ToastProps) => {
     const uniqueID = useId().replace(/\:/g, "-");
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
-    let depth: number = data.length + 1;
+    let depth: number = autoHideMultiple ? data.slice(-2).length + 1 : data.length + 1;
     const cascadingEnabled = typeof cascading === 'undefined' ? true : cascading;
 
     function init() {
-
+        
 
         // Move HTML templates to tag end body </body>
         // render() don't use "Fragment", in order to avoid error "Failed to execute 'insertBefore' on 'Node'"
@@ -79,7 +83,25 @@ const Toast = (props: ToastProps) => {
                     const currentItem = node.closest('.toast-container');
                     handleClose(index as never, currentItem as never);
                 });
-            });       
+            });      
+            
+            
+            // Automatically hide multiple items
+            // It creates a transition animation effect with multiple records and only one displayed.
+            if (autoHideMultiple) {
+                const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
+                _list.forEach((node: any, i: number) => {
+                    if (i !== _list.length - 1) {
+                        node.classList.add('auto-anim-switch');
+                    } else {
+                        node.classList.add('auto-anim-switch--initfirst');
+                        node.classList.add('auto-anim-switch--first');
+                    }
+                });
+            }
+
+
+
         }
 
 
@@ -110,6 +132,7 @@ const Toast = (props: ToastProps) => {
         const _autoCloseTime: any = typeof (autoCloseTime) === 'undefined' || autoCloseTime === false ? false : autoCloseTime;
         if (_autoCloseTime !== false) {
             const items = JSON.parse(JSON.stringify(data));
+
             autoClose(0, items, _autoCloseTime);
 
         }
@@ -158,9 +181,9 @@ const Toast = (props: ToastProps) => {
             const _list: HTMLDivElement[] = [].slice.call(rootRef.current.querySelectorAll('.toast-container'));
 
             if ( autoCloseReverse ) {
-                _list[items.length-index].classList.add('hide-start');
+                _list[items.length-index]?.classList.add('hide-start');
             } else {
-                _list[index-1].classList.add('hide-start');
+                _list[index-1]?.classList.add('hide-start');
             }
             
 
@@ -179,7 +202,7 @@ const Toast = (props: ToastProps) => {
                     onClose?.(rootRef.current, Number(items.length-index), _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end') ));
 
                 } else {
-                    _list[index-1].classList.add('hide-end');
+                    _list[index-1]?.classList.add('hide-end');
                     //
                     onClose?.(rootRef.current, Number(index-1), _list.filter((node: HTMLDivElement) => !node.classList.contains('hide-end') ));
                 }
@@ -205,6 +228,7 @@ const Toast = (props: ToastProps) => {
 
     useEffect(() => {
 
+
         // Initialize 
         //------------------------------------------
         init();
@@ -238,8 +262,9 @@ const Toast = (props: ToastProps) => {
 
             <div id={`toasts__wrapper-${idRes}`} data-async={async ? async : false} className={`toasts__wrapper toasts__wrapper--${direction ? direction : 'bottom-center'} ${cascadingEnabled ? 'toasts__wrapper--cascading' : ''}`} ref={rootRef}>
                 <div className="toasts">
-                    {data.map((item: any, i: number) => {
+                    {(autoHideMultiple ? data.slice(-2) : data).map((item: any, i: number) => {
                         return <Item
+                            onlyOne={data.length === 1 ? true : false}
                             depth={depth - i}
                             key={i}
                             index={i}

package/package.json

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