funda-ui 4.2.255 → 4.2.445

package/lib/esm/Select/index.tsx

@@ -81,6 +81,7 @@ type SelectProps = {
     controlExClassName?: string;
     exceededSidePosOffset?: number;
     multiSelect?: MultiSelectConfig;
+    multiSelectEntireAreaTrigger?: boolean;
     multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
     renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => void;
     cleanTrigger?: CleanTriggerConfig;
@@ -139,6 +140,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         controlExClassName,
         exceededSidePosOffset,
         multiSelect,
+        multiSelectEntireAreaTrigger,
         multiSelectSelectedItemOnlyStatus,
         renderSelectedValue,
         disabled,
@@ -189,7 +191,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     const INPUT_READONLY = LIVE_SEARCH_DISABLED ? true : (typeof readOnly === 'undefined' ? null : readOnly);
     const VALUE_BY_BRACKETS = typeof extractValueByBrackets === 'undefined' ? true : extractValueByBrackets;
-    const LOCK_BODY_SCROLL = typeof lockBodyScroll === 'undefined' ? true : lockBodyScroll;
+    const LOCK_BODY_SCROLL = typeof lockBodyScroll === 'undefined' ? false : lockBodyScroll;
     const WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
     const INDENT_PLACEHOLDER = doubleIndent ? `        ` : `    `;
     const INDENT_LAST_PLACEHOLDER = `${typeof indentation !== 'undefined' && indentation !== '' ? `${indentation}  ` : ''}`;
@@ -231,10 +233,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     const selectedSign = useRef<boolean>(false);
     const MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
+    const MULTI_SEL_ENTIRE_AREA_TRIGGER = typeof multiSelectEntireAreaTrigger === 'undefined' ? true : multiSelectEntireAreaTrigger;
     const MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all options';
     const MULTI_SEL_SELECTED_STATUS: Record<string, string> = {
         itemsLabel: '{num} Selected',
-        allItemsLabel: 'All Content',
+        allItemsLabel: 'All Content ({num})',
         noneLabel: 'No items selected',
     };
 
@@ -271,6 +274,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     useImperativeHandle(
         contentRef,
         () => ({
+            active: () => {
+                handleShowList();
+            },
+            focus: () => {
+                selectInputRef.current.select();
+            },
             clear: (cb?: any) => {
 
                 if (MULTI_SEL_VALID) {
@@ -1498,6 +1507,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     function handleMultiControlItemRemove(event: any) {
         event.preventDefault();
+        event.stopPropagation();  /* REQUIRED */
 
         const valueToRemove = String(event.currentTarget.dataset.value);
         const getCurrentIndex = controlArr.values.findIndex((item: any) => item.toString() === valueToRemove);
@@ -1817,6 +1827,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                 {!MULTI_SEL_VALID ? <>
+
+                    {/** INPUT */}
                     <div className="position-relative">
                         <input
                             ref={(node) => {
@@ -1942,7 +1954,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
                     {/* SEARCH BUTTON */}
                     {fetchTrigger ? <>
-                        <span className="custom-select-multi__control-searchbtn position-absolute top-0 end-0">
+                        <span className="custom-select-multi__control-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
                                 handleFetch().then((response: any) => {
 
@@ -1974,24 +1986,24 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                 // ++++++++++++++++++++
                 */}
                 {MULTI_SEL_VALID ? <div ref={rootMultiRef} className="custom-select-multi__inputplaceholder-wrapper">
-
+                
 
                     {/* PLACEHOLDER */}
                     <div className="custom-select-multi__inputplaceholder-inner">
-                        <div>
+                        <div style={MULTI_SEL_ENTIRE_AREA_TRIGGER ? {pointerEvents: 'auto', cursor: 'pointer'} : undefined} onClick={MULTI_SEL_ENTIRE_AREA_TRIGGER ? ( typeof readOnly === 'undefined' || !readOnly ? handleShowList : () => void (0) ) :  () => void (0)}>
                             <ul className="custom-select-multi__list">
 
                                 {typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? <>
 
-                                    <li className="custom-select-multi__list-item-statusstring">
+                                    <li className="custom-select-multi__list-item-statusstring" >
                                         {typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
                                         {typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null}
-                                        {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel : null}
+                                        {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
 
                                         {/*-----*/}
                                         {typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
                                         {typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null}
-                                        {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel : null}
+                                        {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
 
                                     </li>
                                 </> : <>
@@ -2005,9 +2017,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                                 key={'selected-item-' + index}
                                                 data-value={controlArr.values[index]}
                                                 data-label-full={item}
-                                                data-label-text={stripHTML(item)}
+                                                data-label-text={formatIndentVal(stripHTML(item), INDENT_LAST_PLACEHOLDER)}
                                             >
-                                                {stripHTML(item)}
+                                                {formatIndentVal(stripHTML(item), INDENT_LAST_PLACEHOLDER)}
 
                                                 <a 
                                                     href="#" 
@@ -2019,53 +2031,57 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                         ))}
                                     </>} 
 
-                                    <li  className="custom-select-multi__list-item-add">
-                                        <div className="position-relative">
-                                            {/*
+                                    
+                                </>}
+
+
+                                {/** INPUT */}
+                                <li className="custom-select-multi__list-item-add">
+                                    <div className="position-relative">
+                                        {/*
                                             // DO NOT USE following attributes in " Multiple selection Control":
                                                 a) data-select
                                                 b) value
                                             */}
-                                            <input
-                                                ref={(node) => {
-                                                    selectInputRef.current = node;
-                                                    if (typeof externalRef === 'function') {
-                                                        externalRef(node);
-                                                    } else if (externalRef) {
-                                                        externalRef.current = node;
-                                                    }
-                                                }}
-                                                tabIndex={tabIndex || 0}
-                                                type="text"
-                                                data-overlay-id={`custom-select__options-wrapper-${idRes}`}
-                                                id={`label-${idRes}`}
-
-                                                // Don't use "name", it's just a container to display the label
-                                                data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
-                                                className={`${controlClassName || controlClassName === '' ? controlClassName : "form-control"} ${controlExClassName || ''}`}
-                                                onFocus={handleFocus}
-                                                onBlur={handleBlur}
-                                                onClick={typeof readOnly === 'undefined' || !readOnly ? handleShowList : () => void (0)}
-                                                onChange={handleChange}
-                                                onCompositionStart={handleComposition}
-                                                onCompositionUpdate={handleComposition}
-                                                onCompositionEnd={handleComposition}
-                                                disabled={disabled || null}
-                                                required={required || null}
-                                                readOnly={INPUT_READONLY}
-                                                placeholder={placeholder}
-                                                style={style}
-                                                autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
-                                                autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
-                                                spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
-                                                {...attributes}
-                                            />
-
-                                        </div>
-
-
-                                    </li>
-                                </>}
+                                        <input
+                                            ref={(node) => {
+                                                selectInputRef.current = node;
+                                                if (typeof externalRef === 'function') {
+                                                    externalRef(node);
+                                                } else if (externalRef) {
+                                                    externalRef.current = node;
+                                                }
+                                            }}
+                                            tabIndex={tabIndex || 0}
+                                            type="text"
+                                            data-overlay-id={`custom-select__options-wrapper-${idRes}`}
+                                            id={`label-${idRes}`}
+
+                                            // Don't use "name", it's just a container to display the label
+                                            data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
+                                            className={`${controlClassName || controlClassName === '' ? controlClassName : "form-control"} ${controlExClassName || ''}`}
+                                            onFocus={handleFocus}
+                                            onBlur={handleBlur}
+                                            onClick={typeof readOnly === 'undefined' || !readOnly ? handleShowList : () => void (0)}
+                                            onChange={handleChange}
+                                            onCompositionStart={handleComposition}
+                                            onCompositionUpdate={handleComposition}
+                                            onCompositionEnd={handleComposition}
+                                            disabled={disabled || null}
+                                            required={required || null}
+                                            readOnly={INPUT_READONLY}
+                                            placeholder={placeholder}
+                                            style={style}
+                                            autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
+                                            autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
+                                            spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
+                                            {...attributes}
+                                        />
+
+                                    </div>
+
+
+                                </li>
 
                             </ul>
 
@@ -2096,7 +2112,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
                     {/* SEARCH BUTTON */}
                     {fetchTrigger ? <>
-                        <span className="custom-select-multi__control-searchbtn position-absolute top-0 end-0">
+                        <span className="custom-select-multi__control-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
                                 handleFetch().then((response: any) => {
 

package/lib/esm/Table/Table.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useState, forwardRef, useRef } from 'react';
 import {
     useComId
 } from 'funda-utils';
+
+
 import { TableProvider } from './TableContext';
 import useTableResponsive from './table-utils/hooks/useTableResponsive';
 import useTableDraggable from './table-utils/hooks/useTableDraggable';

package/lib/esm/Tabs/Tabs.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
 
 import {
     useComId
 } from 'funda-utils';
 
+
 //
 import TabList from './TabList';
 import TabPanel from './TabPanel';
@@ -24,8 +25,8 @@ type TabsProps = {
     
 };
 
-const Tabs = (props: TabsProps) => {
-    
+const Tabs = forwardRef((props: TabsProps, externalRef: any) => {
+
     const {
         wrapperClassName,
         navClassName,
@@ -44,6 +45,20 @@ const Tabs = (props: TabsProps) => {
     const speed = animTransitionDuration ? animTransitionDuration : 150;
 
 
+    // exposes the following methods
+    useImperativeHandle(
+        externalRef,
+        () => ({
+            go: (index: number) => {
+                const reactDomWrapperEl: any = rootRef.current;
+                const $li = [].slice.call(reactDomWrapperEl.querySelectorAll('ul > li'));
+                itemInit($li[index], false);
+            }
+        }),
+        [externalRef],
+    );
+
+
     
     const elDisplay = (type: string, node: HTMLElement) => {
         if (node === null) return;
@@ -257,7 +272,7 @@ const Tabs = (props: TabsProps) => {
         </>
     )
 
-}
+});
 
 
 

package/lib/esm/Tree/TreeList.tsx

@@ -1,11 +1,9 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
 
 // HAS CHECKBOX
 
 import {
     getNextSiblings, 
-    getPreviousSiblings, 
-    getParents, 
     getChildren
 } from 'funda-utils';
 
@@ -33,6 +31,7 @@ type TreeListProps = {
     arrow?: React.ReactNode;
     arrowIcons?: React.ReactNode[];
     childClassName?: string;
+    orginalData: any[any];
 	data: any[any];
     getCheckedPrint?: any[];
     updateCheckedPrint?: any;
@@ -56,6 +55,7 @@ export default function TreeList(props: TreeListProps) {
         arrow,
         arrowIcons,
         childClassName,
+        orginalData,
         data,
         getCheckedPrint,
         updateCheckedPrint,
@@ -90,66 +90,74 @@ export default function TreeList(props: TreeListProps) {
         });
     };
 
-    const setCheckboxIndeterminateData = (arr: any[], key: string, val: boolean) => {
-        arr.forEach((item: any, index: number) => {
-            if (item.key === key) arr[index].indeterminate = val;
-        });
-    };
-
-
-    
-    const setCheckboxIndeterminateStatus = (checkedData: any[], printData: any[], el: HTMLFormElement | null) => {
-        let _parentsLi: any = [];
-
-        if ( el !== null ) {
-            _parentsLi = [].slice.call(getParents(el,'li'));
-            _parentsLi.splice(0, 1);
-        } else {
-            _parentsLi = [].slice.call(document.querySelectorAll(`#${checkboxNamePrefix} li`));
+    // check whether the node is in the Indeterminate state
+    const isIndeterminate = (node: any) => {
+        if (!node.children || node.children.length === 0) {
+            return false;
         }
 
+        let hasChecked = false;
+        let hasUnchecked = false;
 
-        //---
-        _parentsLi.forEach((node: any) => {
-            const _checkboxes = getChildren(node, '[type="checkbox"]');
-            const parentKey = typeof _checkboxes[0] === 'undefined' ? '' : _checkboxes[0].dataset.key;
+        for (let child of node.children) {
+            if (isIndeterminate(child)) {
+                return true;
+            }
 
+            if (child.checked) {
+                hasChecked = true;
+            } else {
+                hasUnchecked = true;
+            }
 
-            //
-            let _checkedLengthCalcArr: any[] = [];
-            checkedData.forEach((oitem: any, oindex: number) => {
-                _checkboxes.forEach((el: any) => {
-                    if (el.dataset.key === oitem.key) _checkedLengthCalcArr.push(oitem);
-                });
-            });
-            _checkedLengthCalcArr = _checkedLengthCalcArr.filter((el: any) => {
-                return el.key !== parentKey;
-            })
+            // If there are some selected and some unchecked, the node is Indeterminate
+            if (hasChecked && hasUnchecked) {
+                return true;
+            }
+        }
 
-            //
-            const _checkedLength = _checkedLengthCalcArr.filter((el: any) => {
-                return el.checked === true;
-            }).length;
+        // If all child nodes are the same, it is not Indeterminate
+        return false;
+    };
 
-            if ( _checkedLength === 0 ) {
-                setCheckboxIndeterminateData(checkedData, parentKey, false);
-            } else {
 
-                if ( _checkedLength === _checkboxes.length-1 )  {
-                    setCheckboxIndeterminateData(checkedData, parentKey, false);
-                    setCheckboxCheckedData(checkedData, parentKey, true);
-                    printData.push(formatCheckboxControlVal(_checkboxes[0])); 
-                }
-                
-                if ( _checkedLength < _checkboxes.length-1 )  {
-                    setCheckboxIndeterminateData(checkedData, parentKey, true);
-                    setCheckboxCheckedData(checkedData, parentKey, false);
-                    printData = removeItemOnce(printData, parentKey);  
-                }
+    const updateTreeCheckedItems = (arr: any[], flatArr: any[]) => {
+        if (!Array.isArray(arr)) return;
 
+        for (let i = 0; i < arr.length; i++) {
+            const orginalDataKey: React.Key = arr[i].key;
+            const targetItem = flatArr.find((v: any) => v.key === orginalDataKey);
+            if (typeof targetItem !== 'undefined') {
+                // update value of checked
+                arr[i].checked = targetItem.checked;
+            }
+            
+            if (arr[i].children) updateTreeCheckedItems(arr[i].children, flatArr);
+        }
+    }
+        
+    const updateIndeterminateData = (arr: any[], flatArr: any[]) => {
+        if (!Array.isArray(arr)) return;
+
+        for (let i = 0; i < arr.length; i++) {
+            const orginalDataKey: React.Key = arr[i].key;
+            const targetItem = flatArr.find((v: any) => v.key === orginalDataKey);
+            if (typeof targetItem !== 'undefined') {
+                // update indeterminate of item
+                targetItem.indeterminate = isIndeterminate(arr[i]);
             }
+           
+            if (arr[i].children) updateIndeterminateData(arr[i].children, flatArr);
+        }
+    }
+        
+    const setCheckboxIndeterminateStatus = (checkedData: any[], printData: any[], el: HTMLFormElement | null) => {
 
-        });
+        // update checked items from orginal data
+        updateTreeCheckedItems(orginalData, checkedData);
+
+        // check whether the node is in the Indeterminate state
+        updateIndeterminateData(orginalData, checkedData);
 
         return [checkedData, printData];
 
@@ -301,7 +309,6 @@ export default function TreeList(props: TreeListProps) {
         //-----------
         if ( val === true ) {
             _res.push(formatCheckboxControlVal(el));
-            setCheckboxIndeterminateData(_checkedData, _curKey, false);
             setCheckboxCheckedData(_checkedData, _curKey, true);
 
         } else {
@@ -317,7 +324,6 @@ export default function TreeList(props: TreeListProps) {
         [].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));
                 }
@@ -509,6 +515,7 @@ export default function TreeList(props: TreeListProps) {
                             {item.children && item.children.length > 0 && <TreeList 
                                                 rootNode={rootNode}
                                                 checkboxNamePrefix={checkboxNamePrefix}
+                                                orginalData={orginalData}
                                                 data={item.children} 
                                                 first={false} 
                                                 arrow={arrow} 

package/lib/esm/Tree/index.tsx

@@ -7,6 +7,7 @@ import {
 } from 'funda-utils';
 
 
+
 import TreeList from './TreeList';
 import { initUlHeight, initAsyncItems } from './init-height';
 
@@ -102,6 +103,7 @@ const Tree = (props: TreeProps) => {
     const uniqueID = useComId();
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
+    const [orginalData, setOrginalData] = useState<DataNode[] | null>(null);
     const [list, setList] = useState<DataNode[] | null>(null);
     const [flatList, setFlatList] = useState<DataNode[]>([]);
     const [checkedPrint, setCheckedPrint] = useState<any[]>([]);
@@ -348,6 +350,7 @@ const Tree = (props: TreeProps) => {
 
     useEffect(() => {
         initDefaultValue(null, null, true, retrieveData);
+        setOrginalData(data);
     }, [data, retrieveData]);
 
 
@@ -367,6 +370,7 @@ const Tree = (props: TreeProps) => {
                     disableCollapse={disableCollapse}
                     arrow={arrow}
                     arrowIcons={arrowIcons}
+                    orginalData={orginalData}
                     data={Array.isArray(retrieveData) && retrieveData.length > 0 ? filterRetriveData(flatList, retrieveData) : list} 
                     childClassName={childClassName || 'tree-diagram-default-nav'} 
                     onSelect={onSelect} 

package/package.json

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