funda-ui 3.8.821 → 3.9.14

package/lib/css/Table/index.css

@@ -79,9 +79,11 @@
   min-height: auto;
   margin-bottom: 0;
 }
-.table__wrapper .checkbox-trigger > div .form-check [type=checkbox]:indeterminate {
+.table__wrapper .checkbox-trigger > div .form-check [type=checkbox]:indeterminate,
+.table__wrapper .checkbox-trigger > div .form-check [type=checkbox].indeterminate {
   background-color: var(--table-checkbox-indeterminate-color);
   border-color: var(--table-checkbox-indeterminate-color);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
 }
 .table__wrapper .checkbox-trigger .radio-svg-btn svg,
 .table__wrapper .checkbox-trigger .radio-svg-btn path,

package/lib/css/Tree/index.css

@@ -84,14 +84,17 @@
 }
 .tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div {
   display: inline-block;
+  position: relative;
 }
 .tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check {
   min-height: auto;
   margin-bottom: 0;
 }
-.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check [type=checkbox]:indeterminate {
+.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check [type=checkbox]:indeterminate,
+.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check [type=checkbox].indeterminate {
   background-color: var(--tree-checkbox-indeterminate-color);
   border-color: var(--tree-checkbox-indeterminate-color);
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
 }
 .tree-diagram-default .tree-diagram-default-nav .arrow {
   cursor: pointer;

package/lib/esm/Checkbox/index.tsx

@@ -112,7 +112,7 @@ const Checkbox = forwardRef((props: CheckboxProps, ref: any) => {
     return (
         <>
 
-            <div className={`${wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ${val ? (itemSelectedClassName || 'item-selected') : ''}`} ref={rootRef}>
+            <div className={`form-check__wrapper ${wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ${val ? (itemSelectedClassName || 'item-selected') : ''}`} ref={rootRef}>
                 <div className="form-check">
                     <input
                         ref={(node) => {

package/lib/esm/Table/TableFieldRow.tsx

@@ -1,13 +1,9 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 
-import Checkbox from 'funda-checkbox';
-
-
-
-
+// HAS CHECKBOX
 
 import { getChildren } from './utils/dom';
-import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData, formatRowControlVal } from './table-utils';
+import { removeItemOnce, formatCheckboxControlVal, setCheckboxCheckedData, formatRowControlVal, getAllCheckboxInput } from './table-utils';
 
 
 
@@ -18,6 +14,7 @@ type TableFieldRowProps = {
     tableCheckRef?: React.RefObject<any>;
     rowActiveClassName?: string;
     fieldsChecked?: boolean[] | boolean;
+    fieldsCheckedAct?: any[];
     updateFirstInitCheckboxesClassName?: any;
     draggable?: boolean;
     useRadio?: boolean;
@@ -51,6 +48,7 @@ const TableFieldRow = (props: TableFieldRowProps) => {
         tableCheckRef,
         rowActiveClassName = 'active',
         fieldsChecked,
+        fieldsCheckedAct,
         updateFirstInitCheckboxesClassName,
         draggable,
         useRadio,
@@ -80,6 +78,9 @@ const TableFieldRow = (props: TableFieldRowProps) => {
     const contentRef = useRef<any>(null);
     const checkboxRef = useRef<any>(null);
     const [firstInitCheckboxes, setFirstInitCheckboxes] = useState<boolean>(false);
+    
+    //
+    const [fieldsCheckedUpdateDataPrint, setFieldsCheckedUpdateDataPrint] = fieldsCheckedAct || [null, null];
 
     const rowIndex = rowKey?.replace('row-', '');
 
@@ -243,6 +244,27 @@ const TableFieldRow = (props: TableFieldRowProps) => {
 
         let _res: any = getCheckedPrint;
 
+        
+        // STEP 1:
+        // Update checked print from "fieldsChecked"
+        // !!! Only one time is allowed
+        //-----------
+        if (!fieldsCheckedUpdateDataPrint) {
+            if (Array.isArray(fieldsChecked)) {
+                const _checkboxes: any[] = getAllCheckboxInput(el);
+                _checkboxes.forEach((node: any, rowIndex: number) => {
+                    if (fieldsChecked[Number(rowIndex)] === true) {
+                        _res.push(formatCheckboxControlVal(node));
+                    }
+                });
+            }
+
+            //
+            setFieldsCheckedUpdateDataPrint(true);
+        }
+
+
+
         // STEP 1:
         // Current checkbox
         //-----------
@@ -293,6 +315,8 @@ const TableFieldRow = (props: TableFieldRowProps) => {
         (e.target.closest('table') as any)?.querySelector('tbody').classList.add('drag-trigger-mousedown');
     }
 
+
+
     return (
         <>
             <th
@@ -398,19 +422,28 @@ const TableFieldRow = (props: TableFieldRowProps) => {
 
 
                     </> : <>
-                        <Checkbox
-                            ref={checkboxRef}
-                            wrapperClassName=""
-                            name={`checkbox-${checkboxNamePrefix}-${rowIndex}`}
-                            tabIndex={-1}
-                            data-index={`${rowIndex}`}
-                            data-key={`${rowKey}`}
-                            value={`${rowKey}`}
-                            checked={latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked}
-                            onChange={(e: any, val: any) => {
-                                checkedAct(e.target, val);
-                            }}
-                        />
+
+                        <div className="form-check__wrapper">
+                            <div className="form-check d-inline-block">
+                                <input
+                                    type="checkbox"
+                                    className="form-check-input"
+                                    name={`checkbox-${checkboxNamePrefix}-${rowIndex}`}
+                                    ref={checkboxRef}
+                                    tabIndex={-1}
+                                    data-index={`${rowIndex}`}
+                                    data-key={`${rowKey}`}
+                                    value={`${rowKey}`}
+                                    checked={latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked}
+                                    onChange={(e: any) => {
+                                        checkedAct(e.target, !latestCheckedData().filter((cur: any) => cur.key === rowKey)[0]?.checked);
+                                    }}
+                                />
+                            </div>
+
+                        </div>
+
+                        
                     </>}
 
                 </span>

package/lib/esm/Table/TableHeaders.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
 
-import Checkbox from 'funda-checkbox';
+// HAS CHECKBOX
 
 
 
 import { getChildren } from './utils/dom';
-import { formatCheckboxControlVal, setCheckboxCheckedData } from './table-utils';
+import { formatCheckboxControlVal, setCheckboxCheckedData, getAllCheckboxInput } from './table-utils';
 
 /* Table Headers
 -------------------------------------------------*/
@@ -78,8 +78,8 @@ const TableHeaders = (props: TableHeadersProps) => {
         // STEP 2:
         // All child checkboxes
         //-----------
-        const _checkboxes = getChildren(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
-        [].slice.call(_checkboxes).forEach((node: any) => {
+        const _checkboxes: any[] = getAllCheckboxInput(el);
+        _checkboxes.forEach((node: any) => {
             if (val === true) {
                 setCheckboxCheckedData(_checkedData, node.dataset.key, true);
                 _res.push(formatCheckboxControlVal(node));
@@ -143,16 +143,26 @@ const TableHeaders = (props: TableHeadersProps) => {
                             }}
                         >
                             {i === 0 ? <span className="checkbox-trigger" style={{visibility: useRadio ? 'hidden' : 'visible'}}>
-                                <Checkbox
-                                    wrapperClassName=""
-                                    name={`checkbox-${checkboxNamePrefix}-all`}
-                                    tabIndex={-1}
-                                    value={`row-all`}
-                                    checked={getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked}
-                                    onChange={(e: any, val: any) => {
-                                        checkedAct(e.target, val);
-                                    }}
-                                />
+
+                            <div className="form-check__wrapper">
+                                <div className="form-check d-inline-block">
+                                    <input
+                                        type="checkbox"
+                                        className="form-check-input"
+                                        name={`checkbox-${checkboxNamePrefix}-all`}
+                                        tabIndex={-1}
+                                        value={`row-all`}
+                                        checked={getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked}
+                                        onChange={(e: any) => {
+                                            checkedAct(e.target, !getCheckedRootData!.filter((cur: any) => cur.key === 'row-all')[0]?.checked);
+                                        }}
+                                    />
+
+                                </div>
+
+                            </div>
+                   
+
                             </span> : null}
                             <span dangerouslySetInnerHTML={{ __html: `${item.content}` }}></span>
                             {sortable && itemSortable ? <span className="sort-trigger" onClick={evSort}><svg width="1em" height="1em" viewBox="0 0 18 18">

package/lib/esm/Table/TableRow.tsx

@@ -14,6 +14,7 @@ type TableRowProps = {
     tableCheckRef?: React.RefObject<any>;
     rowActiveClassName?: string;
     fieldsChecked?: boolean[] | boolean;
+    fieldsCheckedAct?: any[];
     index: React.Key;
     data?: any[];
     headerLabel?: any[];
@@ -46,6 +47,7 @@ const TableRow = (props: TableRowProps) => {
         tableCheckRef,
         rowActiveClassName = 'active',
         fieldsChecked,
+        fieldsCheckedAct,
         index,
         data,
         headerLabel,
@@ -128,6 +130,7 @@ const TableRow = (props: TableRowProps) => {
                                     tableCheckRef={tableCheckRef}
                                     rowActiveClassName={rowActiveClassName}
                                     fieldsChecked={fieldsChecked}
+                                    fieldsCheckedAct={fieldsCheckedAct}
                                     updateFirstInitCheckboxesClassName={setFirstInitCheckboxesClassName}
                                     useRadio={useRadio}
                                     columnHeader={typeof headerItem.content === 'string' ? headerItem.content.replace(/(<([^>]+)>)/ig, '') : headerItem.content} 

package/lib/esm/Table/index.scss

@@ -101,9 +101,12 @@
                 min-height: auto;
                 margin-bottom: 0;
 
-                [type=checkbox]:indeterminate {
+                [type=checkbox]:indeterminate,
+                [type=checkbox].indeterminate {
                     background-color: var(--table-checkbox-indeterminate-color);
                     border-color: var(--table-checkbox-indeterminate-color);
+                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+
                 }
 
             }

package/lib/esm/Table/index.tsx

@@ -95,6 +95,7 @@ const Table = (props: TableProps) => {
     const [checkedRootData, setCheckedRootData] = useState<any[]>([]);
     const [sortData, setSortData] = useState<any[] | undefined>([]);
     const [mainUpdate, setMainUpdate] = useState<boolean>(false);
+    const [fieldsCheckedUpdateDataPrint, setFieldsCheckedUpdateDataPrint] = useState<boolean>(false);
 
     const windowResizeUpdate = debounce(handleWindowUpdate, 50);
 
@@ -104,6 +105,8 @@ const Table = (props: TableProps) => {
     let windowWidth = typeof window !== 'undefined' ? window.innerWidth : 0;
 
 
+    //
+
     //Set the class names of different styles
     //
     let tableClasses = '';
@@ -208,11 +211,24 @@ const Table = (props: TableProps) => {
             //get maxHeight of per row
             for (let i = 0; i < tbodyRef.current.querySelector('tr').children.length; i++ ) {
                 const tbodyRows = rootRef.current.querySelectorAll(`tbody tr [data-table-col="${i}"]`);
+                const curColDisplay = window.getComputedStyle(tbodyRows, null).display;
+
+                // default display attribute
+                let curColDisplayVal = curColDisplay;
+                if (typeof tbodyRows.dataset.show === 'undefined') {
+                    tbodyRows.dataset.show = curColDisplay;
+                } else {
+                    curColDisplayVal = tbodyRows.dataset.show;
+                }
+                tbodyRows.style.display = curColDisplayVal;
+                
+                //
                 const maxHeight = maxDimension(tbodyRows).height;
                 [].slice.call(tbodyRows).forEach((row: any) => {
                     row.style.height = maxHeight + 'px';
                 });
 
+
                 //
                 const theadRows = rootRef.current.querySelectorAll(`thead tr [data-table-col="${i}"]`);
                 [].slice.call(theadRows).forEach((row: any) => {
@@ -222,7 +238,19 @@ const Table = (props: TableProps) => {
 
         } else {
             [].slice.call(rootRef.current.querySelectorAll('tbody td, tbody th, thead th')).forEach((node: any, i: number) => {
-                node.removeAttribute('style');
+                const curColDisplay = window.getComputedStyle(node, null).display;
+
+                // default display attribute
+                let curColDisplayVal = curColDisplay;
+                if (typeof node.dataset.show === 'undefined') {
+                    node.dataset.show = curColDisplay;
+                } else {
+                    curColDisplayVal = node.dataset.show;
+                }
+                node.style.display = curColDisplayVal;
+
+                //
+                node.style.removeProperty('height');
             });
         }
 
@@ -582,6 +610,7 @@ const Table = (props: TableProps) => {
                                         tableCheckRef={tableCheckRef}
                                         rowActiveClassName={rowActiveClassName}
                                         fieldsChecked={_fieldsChecked}
+                                        fieldsCheckedAct={[fieldsCheckedUpdateDataPrint, setFieldsCheckedUpdateDataPrint]}
                                         rowKey={`row-${i}`} 
                                         headerLabel={_headers} 
                                         data={item} 

package/lib/esm/Table/table-utils.ts

@@ -1,3 +1,4 @@
+import { getChildren } from './utils/dom';
 
 export const removeItemOnce = (arr: any[], key: string) => {
     return arr.filter((item: any) => {
@@ -63,3 +64,10 @@ export const setCheckboxCheckedData = (arr: any[], key: string, val: boolean) =>
     });
 };
 
+
+export const getAllCheckboxInput = (el: any) => {
+    if (el === null) return [];
+    const _checkboxes = getChildren(el.closest('table').querySelector('tbody'), '[type="checkbox"]');
+    return [].slice.call(_checkboxes);
+
+};

package/lib/esm/Tree/TreeList.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 
-import Checkbox from 'funda-checkbox';
+// HAS CHECKBOX
 
 
-
-
-import { getNextSiblings, getParents, getChildren } from './utils/dom'; 
+import { getNextSiblings, getPreviousSiblings, getParents, getChildren } from './utils/dom'; 
 
 import { initUlHeight } from './init-height';
+import { removeItemOnce, activeClass } from './tree-utils';
 
 interface fetchConfig {
     fetchFuncAsync?: any | undefined;
@@ -71,13 +70,6 @@ export default function TreeList(props: TreeListProps) {
     const loadingIcon: React.ReactNode = <var className="loading-icon"><svg width="1em" height="1em" viewBox="0 0 512 512"><g><path fill="currentColor" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z"/><path fill="currentColor" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z"/><path fill="currentColor" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z"/><path fill="currentColor" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z"/><path fill="currentColor" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z"/><path fill="currentColor" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z"/><path fill="currentColor" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z"/><path fill="currentColor" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z"/></g></svg></var>;
 
 
-    const removeItemOnce = (arr: any[], key: string) => {
-        return arr.filter((item: any) => {
-            return item.key !== key;
-        });
-    };
-      
-
     const formatCheckboxControlVal = (el: HTMLFormElement) => {
         return {
             name: el.dataset.name?.replace(/-label$/, ''),
@@ -115,7 +107,7 @@ export default function TreeList(props: TreeListProps) {
         //---
         _parentsLi.forEach((node: any) => {
             const _checkboxes = getChildren(node, '[type="checkbox"]');
-            const parentKey = _checkboxes[0].dataset.key;
+            const parentKey = typeof _checkboxes[0] === 'undefined' ? '' : _checkboxes[0].dataset.key;
 
 
             //
@@ -158,13 +150,6 @@ export default function TreeList(props: TreeListProps) {
 
     };
 
-    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;
@@ -295,6 +280,84 @@ export default function TreeList(props: TreeListProps) {
 
     }
 
+    function checkedAct(el: any, val: any) {
+
+        if (el === null) return;
+
+        const _curKey: string = el.dataset.key;
+        const _checkedData: any = getCheckedData;
+
+        let _res: any = getCheckedPrint;
+
+        // STEP 1:
+        // Current checkbox
+        //-----------
+        if ( val === true ) {
+            _res.push(formatCheckboxControlVal(el));
+            setCheckboxIndeterminateData(_checkedData, _curKey, false);
+            setCheckboxCheckedData(_checkedData, _curKey, true);
+
+        } else {
+            setCheckboxCheckedData(_checkedData, _curKey, false);
+            _res = removeItemOnce(_res, _curKey);
+            
+        }
+
+
+        // STEP 2:
+        // All child checkboxes
+        //-----------
+        [].slice.call(getChildren(el.closest('li'), '[type="checkbox"]')).forEach((node: any) => {
+            if ( val === true ) {
+                if ( node.dataset.key !== _curKey ) {
+                    setCheckboxIndeterminateData(_checkedData, node.dataset.key, false);
+                    setCheckboxCheckedData(_checkedData, node.dataset.key, true);
+                    _res.push(formatCheckboxControlVal(node));
+                }
+            } else {
+                setCheckboxCheckedData(_checkedData, node.dataset.key, false);
+                _res = removeItemOnce(_res, node.dataset.key);
+
+            }
+
+        });
+
+  
+        // STEP 3:
+        // ALl parent checkboxes
+        //-----------
+        const [updatedCheckedData, updatedPrintData] = setCheckboxIndeterminateStatus(_checkedData, _res, el);
+        let _updatedCheckedData: any[] = updatedCheckedData;
+        let _updatedPrintData: any[] = updatedPrintData;
+
+
+        // STEP 4:
+        // Update checked data
+        //-----------
+        updategetCheckedData(_updatedCheckedData);
+        
+        
+        // STEP 5:
+        // Array deduplication
+        //-----------
+        _updatedPrintData = _updatedPrintData.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.key === item.key)))
+
+        
+        // STEP 6:
+        // Update checked print
+        //-----------
+        updateCheckedPrint(_updatedPrintData);
+
+
+        // STEP 7:
+        // callback
+        //----------- 
+        onCheck?.(_updatedPrintData);
+
+     
+    }
+    
+
 
     useEffect(() => {
 
@@ -335,10 +398,11 @@ export default function TreeList(props: TreeListProps) {
         // Initialize indeterminate status of all checkboxes 
         //=====================
         setCheckboxIndeterminateStatus(getCheckedData as never, getCheckedPrint as never, null);
-                                
-
+     
     }, [data]);
 
+    
+
 
     if ( data ) {
         
@@ -353,8 +417,19 @@ export default function TreeList(props: TreeListProps) {
                 
                     
                     if ( item.heading ) return (
-                        <li className={`nav-item ${first ? 'first' : ''}`} key={item.key}>
-                            <a tabIndex={-1} className="nav-link disabled" href="#" aria-disabled="true" data-link={item.link} data-slug={item.slug} data-key={item.key}>
+                        <li 
+                            className={`nav-item ${first ? 'first' : ''}`} 
+                            key={item.key}
+                        >
+                            <a 
+                                tabIndex={-1} 
+                                className="nav-link disabled" 
+                                href="#" 
+                                aria-disabled="true" 
+                                data-link={item.link} 
+                                data-slug={item.slug} 
+                                data-key={item.key}
+                            >
                                 <span>{item.icon ? item.icon.indexOf('</svg>') < 0 ? <><i className={item.icon}></i> </> : <var dangerouslySetInnerHTML={{ __html: `${item.icon}` }} /> : null}<i dangerouslySetInnerHTML={{ __html: `${item.title}` }}></i></span>
                             </a>
                         </li>
@@ -370,94 +445,33 @@ export default function TreeList(props: TreeListProps) {
                             {(item.children && item.children.length) || item.childrenAsync ? <span aria-expanded={item.active ? 'true' : 'false'} className={item.active ? `arrow active ${_async} ${_cusIcons}` : `arrow ${_async} ${_cusIcons}`} onClick={handleCollapse} data-link={item.link} data-slug={item.slug} data-key={item.key}>{arrowGenerator()}</span> : ''}
 
                             <span className="checkbox-trigger">
-                                <Checkbox
-                                    wrapperClassName=""
-                                    name={`checkbox-${checkboxNamePrefix}-${item.key}`}
-                                    tabIndex={-1}
-                                    data-key={item.key}
-                                    data-link={item.link}
-                                    value={item.slug}
-                                    indeterminate={getCheckedData!.filter((cur: any) => cur.key === item.key)[0]?.indeterminate}
-                                    checked={getCheckedData!.filter((cur: any) => cur.key === item.key)[0]?.checked}
-                                    onChange={(e: any, val: any) => {
-                                      
-                                        const _curKey: string = e.target.dataset.key;
-                                        const _checkedData: any = getCheckedData;
-
-                                        let _res: any = getCheckedPrint;
-
-                                        // STEP 1:
-                                        // Current checkbox
-                                        //-----------
-                                        if ( val === true ) {
-                                            _res.push(formatCheckboxControlVal(e.target));
-                                            setCheckboxIndeterminateData(_checkedData, _curKey, false);
-                                            setCheckboxCheckedData(_checkedData, _curKey, true);
-
-                                        } else {
-                                            setCheckboxCheckedData(_checkedData, _curKey, false);
-                                            _res = removeItemOnce(_res, _curKey);
-                                            
-                                        }
-
-
-                                        // STEP 2:
-                                        // All child checkboxes
-                                        //-----------
-                                        [].slice.call(getChildren(e.target.closest('li'), '[type="checkbox"]')).forEach((node: any) => {
-                                            if ( val === true ) {
-                                                if ( node.dataset.key !== _curKey ) {
-                                                    setCheckboxIndeterminateData(_checkedData, node.dataset.key, false);
-                                                    setCheckboxCheckedData(_checkedData, node.dataset.key, true);
-                                                    _res.push(formatCheckboxControlVal(node));
-                                                }
-                                            } else {
-                                                setCheckboxCheckedData(_checkedData, node.dataset.key, false);
-                                                _res = removeItemOnce(_res, node.dataset.key);
-
-                                            }
-
-                                        });
-
-
-                                        // STEP 3:
-                                        // ALl parent checkboxes
-                                        //-----------
-                                        const [updatedCheckedData, updatedPrintData] = setCheckboxIndeterminateStatus(_checkedData, _res, e.target);
-                                        let _updatedCheckedData: any[] = updatedCheckedData;
-                                        let _updatedPrintData: any[] = updatedPrintData;
-
-
-                                        // STEP 4:
-                                        // Update checked data
-                                        //-----------
-                                        updategetCheckedData(_updatedCheckedData);
-                                        
-                                        
-                                        // STEP 5:
-                                        // Array deduplication
-                                        //-----------
-                                        _updatedPrintData = _updatedPrintData.filter((item: any, index: number, self: any[]) => index === self.findIndex((t) => (t.key === item.key)))
-
-                                        
-                                        // STEP 6:
-                                        // Update checked print
-                                        //-----------
-                                        updateCheckedPrint(_updatedPrintData);
-
-
-                                        // STEP 7:
-                                        // callback
-                                        //----------- 
-                                        onCheck?.(_updatedPrintData);
-                                    }}
-                                />
-                            </span>
 
-                      
+                                <div className="form-check__wrapper">
+                                    <div className="form-check d-inline-block">
+                                        <input
+                                            type="checkbox"
+                                            className={`form-check-input ${getCheckedData!.filter((cur: any) => cur.key === item.key)[0]?.indeterminate ? 'indeterminate' : ''}`}
+                                            name={`checkbox-${checkboxNamePrefix}-${item.key}`}
+                                            tabIndex={-1}
+                                            data-name={`checkbox-${checkboxNamePrefix}-${item.key}`}
+                                            data-key={item.key}
+                                            data-link={item.link}
+                                            value={item.slug}
+                                            checked={getCheckedData!.filter((cur: any) => cur.key === item.key)[0]?.checked}
+                                            onChange={(e: any) => {
+                                                checkedAct(e.target, !getCheckedData!.filter((cur: any) => cur.key === item.key)[0]?.checked);
+                                            }}
+                                        />
+
+                                    </div>
+
+                                </div>
+
+                            </span>
+              
                             <a 
                                 tabIndex={-1} 
-                                className={item.active ? `nav-link active ${_async} ${item.selected ? 'selected' : ''}` : `nav-link ${_async} ${item.selected ? 'selected' : ''}`} 
+                                className={`nav-link ${_async} ${item.selected ? 'selected' : ''} ${item.active ? 'active': ''}`}
                                 href={item.link === '#' ? `${item.link}-${i}` : item.link} 
                                 aria-expanded="false" 
                                 onClick={handleSelect}