funda-ui 4.2.255 → 4.2.445

package/lib/esm/LiveSearch/index.scss

@@ -2,6 +2,20 @@
     <!-- Live Search -->
 /* ====================================================== */
 
+.livesearch__wrapper {
+
+    /*------ Search button ------*/
+    .livesearch__wrapper-searchbtn {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 5;
+        pointer-events: auto;
+    }
+
+}
+
 
 /*------ List ------*/
 .livesearch__options-wrapper  {
@@ -21,7 +35,6 @@
         display: block !important;
     }
 
-
     .livesearch__options-contentlist {
         overflow: hidden;
         overflow-y: auto;

package/lib/esm/LiveSearch/index.tsx

@@ -905,7 +905,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
                 {hideIcon ? null : <>
                     {!fetchTrigger ? <>
-                        <span className="livesearch__wrapper-searchbtn position-absolute top-0 end-0">
+                        <span className="livesearch__wrapper-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" style={{ pointerEvents: 'none' }}>
                                 <svg width="1em" height="1em" fill="#a5a5a5" viewBox="0 0 16 16">
                                     <path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" />

package/lib/esm/ModalDialog/index.tsx

@@ -145,7 +145,7 @@ const ModalDialog = forwardRef((props: ModalDialogProps, externalRef: React.Forw
     const DEPTH = depth || 1055;  // the default value same as bootstrap
     const M_WIDTH = fullscreen ? undefined : (typeof maxWidth === 'function' ? maxWidth() : maxWidth ? maxWidth : undefined);
     const M_HEIGHT = typeof minHeight === 'function' ? minHeight() : minHeight ? minHeight : undefined;
-    const LOCK_BODY_SCROLL = typeof lockBodyScroll === 'undefined' ? true : lockBodyScroll;
+    const LOCK_BODY_SCROLL = typeof lockBodyScroll === 'undefined' ? false : lockBodyScroll;
 
     const uniqueID = useComId();
     const modalRef = useRef<any>(null);

package/lib/esm/MultilevelDropdownMenu/{MenuList.tsx → ItemList.tsx}

@@ -8,7 +8,8 @@ import {
 
 /* Recursively nested components to traverse nodes
 -------------------------------------------------*/		
-type MenuListProps = {
+type ItemListProps = {
+    root: any;
     alternateCollapse?: boolean;
     first?: boolean;
     arrow?: React.ReactNode;
@@ -18,9 +19,10 @@ type MenuListProps = {
     onSelect?: (e: any, val: any) => void;
 };
 
-export default function MenuList(props: MenuListProps) {
+export default function ItemList(props: ItemListProps) {
 
     const {
+        root,
         alternateCollapse,
         first,
         arrow,
@@ -89,6 +91,7 @@ export default function MenuList(props: MenuListProps) {
 
     function handleClick(e: any) {
         e.preventDefault();
+        e.stopPropagation();
         const hyperlink = e.currentTarget;
         const url = hyperlink.getAttribute('href');
         const subElement = getNextSiblings(hyperlink, 'ul');
@@ -153,60 +156,63 @@ export default function MenuList(props: MenuListProps) {
 
     useEffect(() => {
 
+        if (root !== null && data.length > 0) {
+           // Activate current item
+            //=====================
+            const allItems = rootRef.current ? [].slice.call(root.querySelectorAll(`.${childClassName} a`)).map( (item: any) => {
+                return {
+                    href: item.getAttribute('href'),
+                    el: item,
+                    actived: item.parentNode.classList?.contains('active') ? true : false,
+                    expandedLink: document.body.contains(item.parentNode.parentNode.previousSibling) ? item.parentNode.parentNode.previousSibling : false
+                }
+            } ) : [];
 
-        // Activate current item
-        //=====================
-        const allItems = rootRef.current ? [].slice.call(document.querySelectorAll(`.${childClassName} a`)).map( (item: any) => {
-            return {
-                href: item.getAttribute('href'),
-                el: item,
-                actived: item.parentNode.classList?.contains('active') ? true : false,
-                expandedLink: document.body.contains(item.parentNode.parentNode.previousSibling) ? item.parentNode.parentNode.previousSibling : false
-            }
-        } ) : [];
-
-        
-        allItems.forEach( (hyperlink: any) => {
+            
+            allItems.forEach( (hyperlink: any) => {
 
-            // Expand the currently active item by default
-            if ( hyperlink.actived ) {
+                // Expand the currently active item by default
+                if ( hyperlink.actived ) {
 
-                hyperlink.el.setAttribute('aria-expanded', 'true');
+                    hyperlink.el.setAttribute('aria-expanded', 'true');
 
-                if ( hyperlink.expandedLink ) {
-                    const expandedLink: any = hyperlink.expandedLink;  // <a>
-                    activeClass(expandedLink.parentNode, 'add');
-                    expandedLink.setAttribute('aria-expanded', true);
-                }
+                    if ( hyperlink.expandedLink ) {
+                        const expandedLink: any = hyperlink.expandedLink;  // <a>
+                        activeClass(expandedLink.parentNode, 'add');
+                        expandedLink.setAttribute('aria-expanded', true);
+                    }
 
 
-                // init <ul> height
-                const ul = getNextSiblings(hyperlink.el, 'ul');
-                
-                [].slice.call(ul).forEach(function (_curUl: any) {
+                    // init <ul> height
+                    const ul = getNextSiblings(hyperlink.el, 'ul');
+                    
+                    [].slice.call(ul).forEach(function (_curUl: any) {
 
-                    const allHeight = [].slice.call(_curUl.querySelectorAll('li')).map((_curLi: any) => _curLi.scrollHeight);
+                        const allHeight = [].slice.call(_curUl.querySelectorAll('li')).map((_curLi: any) => _curLi.scrollHeight);
 
-                    // Prevent missing height, causing the last element to be clipped
-                    const maxHeight = Math.max(...allHeight);
-                    allHeight.push(maxHeight * 3);
+                        // Prevent missing height, causing the last element to be clipped
+                        const maxHeight = Math.max(...allHeight);
+                        allHeight.push(maxHeight * 3);
 
 
-                    // 
-                    const totalHeight = allHeight.reduce(
-                        (accumulator: number, currentValue: number) => accumulator + currentValue,
-                        0,
-                    );
-        
-                    // Prevent the use of iframe or other situations where the height is 0
-                    _curUl.style.maxHeight = `${totalHeight == 0 ? 999 : totalHeight}px`;
+                        // 
+                        const totalHeight = allHeight.reduce(
+                            (accumulator: number, currentValue: number) => accumulator + currentValue,
+                            0,
+                        );
+            
+                        // Prevent the use of iframe or other situations where the height is 0
+                        _curUl.style.maxHeight = `${totalHeight == 0 ? 999 : totalHeight}px`;
+                        
+                    });
                     
-                });
-                
-            }
+                }
 
-        });
+            });
+
+        }
 
+ 
     }, [data]);
 
 
@@ -232,9 +238,10 @@ export default function MenuList(props: MenuListProps) {
                         <li key={i} className={item.active ? `nav-item active` : (_matchPath ? `nav-item active` : 'nav-item')}>
                             <a tabIndex={-1} title={item.title} className={item.active ? `nav-link active` : (_matchPath ? `nav-link active` : 'nav-link')} href={item.link === '#' ? `${item.link}-${i}` : item.link} onClick={handleClick} data-router={item.link.indexOf('#') >= 0 || item.link.indexOf('http') >= 0 ? 'false' : 'true'} data-link={item.link} data-slug={item.slug}>
                                 {item.icon ? item.icon.indexOf('</svg>') < 0 ? <><i className={item.icon}></i> </> : <var dangerouslySetInnerHTML={{ __html: `${item.icon}` }} /> : null}<i dangerouslySetInnerHTML={{ __html: `${item.title}` }}></i>
-                                {item.children ? <span className="arrow">{arrowGenerator()}</span> : ''}
+                                {item.children && item.children.length > 0 ? <span className="arrow">{arrowGenerator()}</span> : ''}
                             </a>
-                            {item.children && <MenuList 
+                            {item.children && <ItemList 
+                                                root={root}
                                                 data={item.children} 
                                                 first={false} 
                                                 arrow={arrow} 

package/lib/esm/MultilevelDropdownMenu/index.scss

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

package/lib/esm/MultilevelDropdownMenu/index.tsx

@@ -1,10 +1,12 @@
-import React, { useState, useEffect, memo } from 'react';
+import React, { useRef, useState, useEffect, memo } from 'react';
 
 import {
     useComId
 } from 'funda-utils';
 
-import MenuList from './MenuList';
+
+
+import ItemList from './ItemList';
 
 
 type MultilevelDropdownMenuProps = {
@@ -38,6 +40,7 @@ const MultilevelDropdownMenu = (props: MultilevelDropdownMenuProps) => {
         onSelect
     } = props;
 
+    const rootRef = useRef<any>(null);
     const uniqueID = useComId();
     const idRes = id || uniqueID;
     const [val, setVal] = useState<any>(null);
@@ -50,8 +53,13 @@ const MultilevelDropdownMenu = (props: MultilevelDropdownMenuProps) => {
     return (
         <>
 
-            <nav id={idRes} className={navbarClassName ? navbarClassName : "navbar"}>
-                <MenuList 
+            <nav 
+                id={idRes} 
+                className={navbarClassName ? navbarClassName : "navbar"}
+                ref={rootRef}
+            >
+                <ItemList 
+                    root={rootRef.current}
                     alternateCollapse={alternateCollapse}
                     first={true}
                     arrow={arrow}

package/lib/esm/MultipleSelect/ItemList.tsx

@@ -0,0 +1,300 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+
+import {
+    getNextSiblings
+} from 'funda-utils';
+
+
+import { formatIndentVal, multiSelControlOptionExist } from './multiple-select-utils/func';
+
+/* Recursively nested components to traverse nodes
+-------------------------------------------------*/
+type ItemListProps = {
+    root: any;
+    listContainerClassName: string;
+    valSelected: any[];
+    indentStr: string;
+    iconAdd?: React.ReactNode | string;
+    iconRemove?: React.ReactNode | string;
+    selected?: boolean;
+    onSelect: (any) => void;
+    alternateCollapse?: boolean;
+    first?: boolean;
+    arrow?: React.ReactNode;
+    childClassName: string;
+    data: any[any];
+};
+
+const ItemList = forwardRef((props: ItemListProps, externalRef: any) => {
+
+    const {
+        root,
+        listContainerClassName,
+        valSelected,
+        indentStr,
+        iconAdd,
+        iconRemove,
+        selected,
+        onSelect,
+        alternateCollapse,
+        first,
+        arrow,
+        childClassName,
+        data,
+    } = props;
+
+    const listContainerRef = useRef<any>(null);
+
+    const activeClass = (el: any, mode: string, classname: string = 'active') => {
+        if ( mode === 'add' ) {
+            el.classList.add(classname);
+        } else {
+            el.classList.remove(classname);
+        }
+    };
+
+    const closeChild = (hyperlink: HTMLElement, ul: HTMLAllCollection) => {
+        if ( ul.length === 0 ) return;
+
+        activeClass(hyperlink, 'remove');
+        hyperlink.setAttribute('aria-expanded', 'false');
+        activeClass(hyperlink.parentNode, 'remove');
+
+        //to close
+        [].slice.call(ul).forEach(function(element: any){
+            element.style.maxHeight = 0;
+        });
+    };
+
+    const openChild = (hyperlink: HTMLElement, ul: HTMLAllCollection) => {
+        if ( ul.length === 0 ) return;
+
+        activeClass(hyperlink, 'add'); 
+        hyperlink.setAttribute('aria-expanded', 'true');
+        activeClass(hyperlink.parentNode, 'add');
+
+        // init <ul> height
+        [].slice.call(ul).forEach(function (_curUl: any) {
+
+            const allHeight = [].slice.call(_curUl.querySelectorAll('li')).map((_curLi: any) => _curLi.scrollHeight);
+
+            // Prevent missing height, causing the last element to be clipped
+            const maxHeight = Math.max(...allHeight);
+            allHeight.push(maxHeight*3);
+
+            //
+            const totalHeight = allHeight.reduce(
+                (accumulator: number, currentValue: number) => accumulator + currentValue,
+                0,
+            );
+
+            // Prevent the use of iframe or other situations where the height is 0
+            _curUl.style.maxHeight = `${totalHeight == 0 ? 999 : totalHeight}px`;
+            
+        });
+
+    };
+
+
+
+    function handleClick(e: any) {
+        e.preventDefault();
+        e.stopPropagation();
+        const hyperlink = e.currentTarget.querySelector('div');
+        const subElement = getNextSiblings(hyperlink, 'ul');
+
+
+
+        // hide child if expandedLink doesn't exist, on the contrary
+        //=====================
+        if ( hyperlink.getAttribute('aria-expanded') === 'false' || hyperlink.getAttribute('aria-expanded') === null ) {
+
+
+            //Hide all other siblings of the selected <ul>
+            if ( alternateCollapse ) {
+                [].slice.call(listContainerRef.current.children).forEach(function(li: any){
+
+                    activeClass(li, 'remove');
+        
+                    const _li = li.firstChild;
+                    activeClass(_li, 'remove');
+                    _li.setAttribute('aria-expanded', false);
+        
+                    [].slice.call(getNextSiblings(_li, 'ul')).forEach(function(element: any){
+                        element.style.maxHeight = 0;
+                    });
+                });
+            }
+
+
+            //open current
+            openChild(hyperlink, subElement as never);
+
+        } else {
+
+            //close current
+            closeChild(hyperlink, subElement as never);
+        }
+
+
+
+    }
+
+    
+    function arrowGenerator() {
+        return arrow ? arrow : <svg viewBox="0 0 22 22" width="8px"><path d="m345.44 248.29l-194.29 194.28c-12.359 12.365-32.397 12.365-44.75 0-12.354-12.354-12.354-32.391 0-44.744l171.91-171.91-171.91-171.9c-12.354-12.359-12.354-32.394 0-44.748 12.354-12.359 32.391-12.359 44.75 0l194.29 194.28c6.177 6.18 9.262 14.271 9.262 22.366 0 8.099-3.091 16.196-9.267 22.373" transform="matrix(.03541-.00013.00013.03541 2.98 3.02)" fill="#a5a5a5" /></svg>;
+    }
+
+    useEffect(() => {
+
+        if (root !== null && data.length > 0) {
+            // Activate current item
+             //=====================
+             const allItems = listContainerRef.current ? [].slice.call(root.querySelectorAll(`.${childClassName} div`)).map( (item: any) => {
+                 return {
+                     el: item,
+                     actived: item.parentNode.classList?.contains('active') ? true : false,
+                     expandedLink: document.body.contains(item.parentNode.parentNode.previousSibling) ? item.parentNode.parentNode.previousSibling : false
+                 }
+             } ) : [];
+ 
+             
+             allItems.forEach( (hyperlink: any) => {
+ 
+                 // Expand the currently active item by default
+                 if ( hyperlink.actived ) {
+ 
+                     hyperlink.el.setAttribute('aria-expanded', 'true');
+ 
+                     if ( hyperlink.expandedLink ) {
+                         const expandedLink: any = hyperlink.expandedLink;  // <a>
+                         activeClass(expandedLink.parentNode, 'add');
+                         expandedLink.setAttribute('aria-expanded', true);
+                     }
+ 
+ 
+                     // init <ul> height
+                     const ul = getNextSiblings(hyperlink.el, 'ul');
+                     
+                     [].slice.call(ul).forEach(function (_curUl: any) {
+ 
+                         const allHeight = [].slice.call(_curUl.querySelectorAll('li')).map((_curLi: any) => _curLi.scrollHeight);
+ 
+                         // Prevent missing height, causing the last element to be clipped
+                         const maxHeight = Math.max(...allHeight);
+                         allHeight.push(maxHeight * 3);
+ 
+ 
+                         // 
+                         const totalHeight = allHeight.reduce(
+                             (accumulator: number, currentValue: number) => accumulator + currentValue,
+                             0,
+                         );
+             
+                         // Prevent the use of iframe or other situations where the height is 0
+                         _curUl.style.maxHeight = `${totalHeight == 0 ? 999 : totalHeight}px`;
+                         
+                     });
+                     
+                 }
+ 
+             });
+ 
+         }
+ 
+
+
+    }, [data]);
+
+
+    if (data) {
+
+        return (
+            <>
+                <ul
+                    className={`${listContainerClassName || ''} ${childClassName}`}
+                    style={!first ? { maxHeight: '0px' } : {}}
+                    ref={(node) => {
+                        listContainerRef.current = node;
+                        if (typeof externalRef === 'function') {
+                            externalRef(node);
+                        } else if (externalRef) {
+                            externalRef.current = node;
+                        }
+                    }}
+                >
+
+
+                    {data ? data.map((item: any, i: number) => {
+
+                        return <li
+                            key={selected ? 'item-selected' + i : 'item' + i}
+                            className={selected ? 'selected' : `${item.disabled ? 'disabled' : ''} ${multiSelControlOptionExist(valSelected, item.value) ? 'hide' : ''}`}
+                            data-index={i}
+                            data-value={`${item.value}`}
+                            data-label={`${item.label}`}
+                            data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
+                            data-disabled={item.disabled || 'false'}
+                            data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`}
+                            data-itemdata={JSON.stringify(item)}
+                            onClick={selected ? () => void(0) : handleClick}
+                        >
+
+
+                            <div>
+                                <strong>
+                                    <span dangerouslySetInnerHTML={{
+                                        __html: selected ? (typeof item.listItemLabel === 'undefined' ? formatIndentVal(item.label, indentStr) : formatIndentVal(item.listItemLabel, indentStr)) : (typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel)
+                                    }}></span>
+                                    {item.children && item.children.length > 0 && !selected ? <span className="arrow">{arrowGenerator()}</span> : ''}
+                                </strong>
+
+                                <i
+                                    onClick={(e: React.MouseEvent) => {
+                                        e.stopPropagation();
+                                        onSelect((e.target as any).closest('li'));
+                                    }}>
+
+                                    {selected ? <>
+                                        {iconRemove ? <>{iconRemove}</> : <><svg width="15px" height="15px" viewBox="0 0 24 24" fill="none"><path fillRule="evenodd" clipRule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z" fill="#000" /></svg></>}
+                                    </> : <>
+                                        {iconAdd ? <>{iconAdd}</> : <><svg width="15px" height="15px" viewBox="0 0 24 24" fill="none"><path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16 12.75H12.75V16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16V12.75H8C7.59 12.75 7.25 12.41 7.25 12C7.25 11.59 7.59 11.25 8 11.25H11.25V8C11.25 7.59 11.59 7.25 12 7.25C12.41 7.25 12.75 7.59 12.75 8V11.25H16C16.41 11.25 16.75 11.59 16.75 12C16.75 12.41 16.41 12.75 16 12.75Z" fill="#000" /></svg></>}
+                                    </>}
+                                </i>
+
+
+                            </div>
+
+                            {item.children && <ItemList
+                                root={root}
+                                listContainerClassName={listContainerClassName}
+                                ref={externalRef}
+                                indentStr={indentStr}
+                                valSelected={valSelected}
+                                iconAdd={iconAdd}
+                                iconRemove={iconRemove}
+                                onSelect={onSelect}
+                                first={false}
+                                arrow={arrow}
+                                data={item.children}
+                                childClassName={childClassName}
+                            />}
+
+                        </li>;
+                    }) : null}
+
+                </ul>
+
+
+            </>
+        )
+    } else {
+        return (
+            <></>
+        )
+    }
+
+
+});
+
+export default ItemList;

package/lib/esm/MultipleSelect/index.scss

@@ -87,8 +87,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);
 
@@ -119,47 +118,51 @@
             &:last-child {
                 border-bottom: none;
             }
-            > span {
+            > div {
                 padding: .35rem .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;
-            }
 
-            > strong {
-                font-weight: normal;
-            }
-            
-            > i {
-                display: inline-block;
-                padding: .35rem .75rem;
-                cursor: pointer;
 
-                svg {
-                    path {
-                        fill: var(--m-select-options-item-icon-color);
+                > strong {
+                    font-weight: normal;
+                    display: flex;
+                    align-items: center;
+
+                    .arrow {
+                        display: inline-block;
+                        margin-left: .2rem;
+                    }
+
+                }
+
+                &.active {
+                    .arrow {
+                        transform: rotate(90deg);
                     }
                 }
-            }
 
 
+                > i {
+                    display: inline-block;
+                    cursor: pointer;
 
-            a {
-                color: #999;
-                text-decoration: none;
-                padding: 0;
-                display: block;
-                cursor: pointer;
-                &.m-select__item-action {
-                    position: absolute;
-                    right: 0.5rem;
-                    top: 0.5rem;
+                    svg {
+                        path {
+                            fill: var(--m-select-options-item-icon-color);
+                        }
+                    }
                 }
+
             }
+
         }
+
         div {
             &.m-select__selected__container {
                 .m-select__header {
@@ -232,8 +235,36 @@
     }
 
 
+    /*-------- Multilevel --------*/
+    ul.m-select__options-contentlist {
+
+        > li {
+
+            ul {
+                transition: max-height 0.25s ease;
+                overflow: hidden;
+                position: relative;
+                padding-left: 1rem;
+            }
+        }
+
+        > li:not(.active) {
+
+            ul {
+                max-height: 0;
+            }
+        }
+
+
+        > li ul ul {
+            margin-top: auto;
+        }
+
+    }
+
+
     /*-------- List --------*/
-    .m-select__options-contentlist {
+    ul.m-select__options-contentlist {
         position: relative;
         width: 100%;
         overflow: hidden;
@@ -252,7 +283,7 @@
             cursor: grab;
         }
     }
-    .m-select__options-contentlist--hide {
+    ul.m-select__options-contentlist--hide {
         overflow: hidden;
         height: auto;
     }