funda-ui 4.2.375 → 4.2.445

package/MultilevelDropdownMenu/index.css

@@ -12,8 +12,8 @@
   display: inline-block;
   text-align: center;
   position: absolute;
-  right: 0.5em;
-  top: 1.5em;
+  right: -1em;
+  top: 50%;
   transform: translateY(-50%) rotate(0deg);
 }
 .navbar-nav li {

package/MultilevelDropdownMenu/index.js

@@ -4199,7 +4199,7 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_ = __webpack_re
 var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__PURE__*/__webpack_require__.n(external_root_React_commonjs2_react_commonjs_react_amd_react_);
 // EXTERNAL MODULE: ../Utils/dist/cjs/index.js
 var cjs = __webpack_require__(456);
-;// CONCATENATED MODULE: ./src/MenuList.tsx
+;// CONCATENATED MODULE: ./src/ItemList.tsx
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -4212,8 +4212,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 /* Recursively nested components to traverse nodes
 -------------------------------------------------*/
 
-function MenuList(props) {
-  var alternateCollapse = props.alternateCollapse,
+function ItemList(props) {
+  var root = props.root,
+    alternateCollapse = props.alternateCollapse,
     first = props.first,
     arrow = props.arrow,
     childClassName = props.childClassName,
@@ -4268,6 +4269,7 @@ function MenuList(props) {
   };
   function handleClick(e) {
     e.preventDefault();
+    e.stopPropagation();
     var hyperlink = e.currentTarget;
     var url = hyperlink.getAttribute('href');
     var subElement = (0,cjs.getNextSiblings)(hyperlink, 'ul');
@@ -4321,48 +4323,50 @@ function MenuList(props) {
     }));
   }
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    // Activate current item
-    //=====================
-    var allItems = rootRef.current ? [].slice.call(document.querySelectorAll(".".concat(childClassName, " a"))).map(function (item) {
-      var _item$parentNode$clas;
-      return {
-        href: item.getAttribute('href'),
-        el: item,
-        actived: (_item$parentNode$clas = item.parentNode.classList) !== null && _item$parentNode$clas !== void 0 && _item$parentNode$clas.contains('active') ? true : false,
-        expandedLink: document.body.contains(item.parentNode.parentNode.previousSibling) ? item.parentNode.parentNode.previousSibling : false
-      };
-    }) : [];
-    allItems.forEach(function (hyperlink) {
-      // Expand the currently active item by default
-      if (hyperlink.actived) {
-        hyperlink.el.setAttribute('aria-expanded', 'true');
-        if (hyperlink.expandedLink) {
-          var expandedLink = hyperlink.expandedLink; // <a>
-          activeClass(expandedLink.parentNode, 'add');
-          expandedLink.setAttribute('aria-expanded', true);
-        }
-
-        // init <ul> height
-        var ul = (0,cjs.getNextSiblings)(hyperlink.el, 'ul');
-        [].slice.call(ul).forEach(function (_curUl) {
-          var allHeight = [].slice.call(_curUl.querySelectorAll('li')).map(function (_curLi) {
-            return _curLi.scrollHeight;
-          });
+    if (root !== null && data.length > 0) {
+      // Activate current item
+      //=====================
+      var allItems = rootRef.current ? [].slice.call(root.querySelectorAll(".".concat(childClassName, " a"))).map(function (item) {
+        var _item$parentNode$clas;
+        return {
+          href: item.getAttribute('href'),
+          el: item,
+          actived: (_item$parentNode$clas = item.parentNode.classList) !== null && _item$parentNode$clas !== void 0 && _item$parentNode$clas.contains('active') ? true : false,
+          expandedLink: document.body.contains(item.parentNode.parentNode.previousSibling) ? item.parentNode.parentNode.previousSibling : false
+        };
+      }) : [];
+      allItems.forEach(function (hyperlink) {
+        // Expand the currently active item by default
+        if (hyperlink.actived) {
+          hyperlink.el.setAttribute('aria-expanded', 'true');
+          if (hyperlink.expandedLink) {
+            var expandedLink = hyperlink.expandedLink; // <a>
+            activeClass(expandedLink.parentNode, 'add');
+            expandedLink.setAttribute('aria-expanded', true);
+          }
 
-          // Prevent missing height, causing the last element to be clipped
-          var maxHeight = Math.max.apply(Math, _toConsumableArray(allHeight));
-          allHeight.push(maxHeight * 3);
+          // init <ul> height
+          var ul = (0,cjs.getNextSiblings)(hyperlink.el, 'ul');
+          [].slice.call(ul).forEach(function (_curUl) {
+            var allHeight = [].slice.call(_curUl.querySelectorAll('li')).map(function (_curLi) {
+              return _curLi.scrollHeight;
+            });
 
-          // 
-          var totalHeight = allHeight.reduce(function (accumulator, currentValue) {
-            return accumulator + currentValue;
-          }, 0);
+            // Prevent missing height, causing the last element to be clipped
+            var maxHeight = Math.max.apply(Math, _toConsumableArray(allHeight));
+            allHeight.push(maxHeight * 3);
 
-          // Prevent the use of iframe or other situations where the height is 0
-          _curUl.style.maxHeight = "".concat(totalHeight == 0 ? 999 : totalHeight, "px");
-        });
-      }
-    });
+            // 
+            var totalHeight = allHeight.reduce(function (accumulator, currentValue) {
+              return accumulator + currentValue;
+            }, 0);
+
+            // Prevent the use of iframe or other situations where the height is 0
+            _curUl.style.maxHeight = "".concat(totalHeight == 0 ? 999 : totalHeight, "px");
+          });
+        }
+      });
+    }
   }, [data]);
   if (data) {
     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("ul", {
@@ -4417,9 +4421,10 @@ function MenuList(props) {
         dangerouslySetInnerHTML: {
           __html: "".concat(item.title)
         }
-      }), item.children ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
+      }), item.children && item.children.length > 0 ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {
         className: "arrow"
-      }, arrowGenerator()) : ''), item.children && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(MenuList, {
+      }, arrowGenerator()) : ''), item.children && /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(ItemList, {
+        root: root,
         data: item.children,
         first: false,
         arrow: arrow,
@@ -4450,6 +4455,7 @@ var MultilevelDropdownMenu = function MultilevelDropdownMenu(props) {
     data = props.data,
     id = props.id,
     onSelect = props.onSelect;
+  var rootRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var uniqueID = (0,cjs.useComId)();
   var idRes = id || uniqueID;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(null),
@@ -4461,8 +4467,10 @@ var MultilevelDropdownMenu = function MultilevelDropdownMenu(props) {
   }, [data]);
   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("nav", {
     id: idRes,
-    className: navbarClassName ? navbarClassName : "navbar"
-  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(MenuList, {
+    className: navbarClassName ? navbarClassName : "navbar",
+    ref: rootRef
+  }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement(ItemList, {
+    root: rootRef.current,
     alternateCollapse: alternateCollapse,
     first: true,
     arrow: arrow,

package/MultipleSelect/index.css

@@ -30,6 +30,7 @@
   border-radius: 0.35rem;
   position: relative;
   background: var(--m-select-body-bg);
+  /*-------- Multilevel --------*/
   /*-------- List --------*/
 }
 .m-select__wrapper .m-select-diving-line {
@@ -74,8 +75,7 @@
   cursor: default;
   position: relative;
   font-size: var(--m-select-body-font-size);
-  display: flex;
-  justify-content: space-between;
+  display: block;
   background: var(--m-select-options-item-bg);
   border-bottom: 1px solid var(--m-select-options-item-dividingline-color);
 }
@@ -99,37 +99,34 @@
 .m-select__wrapper .m-select-inner li:last-child {
   border-bottom: none;
 }
-.m-select__wrapper .m-select-inner li > span {
+.m-select__wrapper .m-select-inner li > div {
   padding: 0.35rem 0.75rem;
-  display: inline-block;
-  max-width: 100%;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   word-wrap: break-word;
   word-break: break-word;
 }
-.m-select__wrapper .m-select-inner li > strong {
+.m-select__wrapper .m-select-inner li > div > strong {
   font-weight: normal;
+  display: flex;
+  align-items: center;
 }
-.m-select__wrapper .m-select-inner li > i {
+.m-select__wrapper .m-select-inner li > div > strong .arrow {
   display: inline-block;
-  padding: 0.35rem 0.75rem;
-  cursor: pointer;
+  margin-left: 0.2rem;
 }
-.m-select__wrapper .m-select-inner li > i svg path {
-  fill: var(--m-select-options-item-icon-color);
+.m-select__wrapper .m-select-inner li > div.active .arrow {
+  transform: rotate(90deg);
 }
-.m-select__wrapper .m-select-inner li a {
-  color: #999;
-  text-decoration: none;
-  padding: 0;
-  display: block;
+.m-select__wrapper .m-select-inner li > div > i {
+  display: inline-block;
   cursor: pointer;
 }
-.m-select__wrapper .m-select-inner li a.m-select__item-action {
-  position: absolute;
-  right: 0.5rem;
-  top: 0.5rem;
+.m-select__wrapper .m-select-inner li > div > i svg path {
+  fill: var(--m-select-options-item-icon-color);
 }
 .m-select__wrapper .m-select-inner div.m-select__selected__container .m-select__header {
   border-radius: 0 0.35rem 0 0;
@@ -186,26 +183,38 @@
 .m-select__wrapper .m-select-inner .m-select__search__container i svg {
   fill: var(--m-select-search-icon-color);
 }
-.m-select__wrapper .m-select__options-contentlist {
+.m-select__wrapper ul.m-select__options-contentlist > li ul {
+  transition: max-height 0.25s ease;
+  overflow: hidden;
+  position: relative;
+  padding-left: 1rem;
+}
+.m-select__wrapper ul.m-select__options-contentlist > li:not(.active) ul {
+  max-height: 0;
+}
+.m-select__wrapper ul.m-select__options-contentlist > li ul ul {
+  margin-top: auto;
+}
+.m-select__wrapper ul.m-select__options-contentlist {
   position: relative;
   width: 100%;
   overflow: hidden;
   overflow-y: auto;
   max-height: calc(315px - 1.75rem);
 }
-.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar {
+.m-select__wrapper ul.m-select__options-contentlist::-webkit-scrollbar {
   width: var(--m-select-scrollbar-w);
 }
-.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar-thumb {
+.m-select__wrapper ul.m-select__options-contentlist::-webkit-scrollbar-thumb {
   background: var(--m-select-scrollbar-color);
 }
-.m-select__wrapper .m-select__options-contentlist::-webkit-scrollbar-track {
+.m-select__wrapper ul.m-select__options-contentlist::-webkit-scrollbar-track {
   background: var(--m-select-scrollbar-track);
 }
-.m-select__wrapper .m-select__options-contentlist.dragging {
+.m-select__wrapper ul.m-select__options-contentlist.dragging {
   cursor: grab;
 }
-.m-select__wrapper .m-select__options-contentlist--hide {
+.m-select__wrapper ul.m-select__options-contentlist--hide {
   overflow: hidden;
   height: auto;
 }

package/MultipleSelect/index.d.ts

@@ -4,6 +4,7 @@ export interface OptionConfig {
 }
 declare type MultipleSelectProps = {
     wrapperClassName?: string;
+    childClassName?: string;
     wrapperMinHeight?: string;
     wrapperMinWidth?: string;
     availableHeaderTitle?: string;
@@ -16,6 +17,8 @@ declare type MultipleSelectProps = {
     hierarchical?: boolean;
     indentation?: string;
     doubleIndent?: boolean;
+    alternateCollapse?: boolean;
+    arrow?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;