funda-ui 4.5.677 → 4.5.682

package/lib/esm/MultipleSelect/index.tsx

@@ -1,14 +1,12 @@
 import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 
+import DragDropList from 'funda-dragdrop-list';
+
 
 import useComId from 'funda-utils/dist/cjs/useComId';
 import {
     isJSON
 } from 'funda-utils/dist/cjs/initDefaultOptions';
-import {
-    addTreeDepth,
-    addTreeIndent,
-} from 'funda-utils/dist/cjs/tree';
 import {
     extractContentsOfBrackets
 } from 'funda-utils/dist/cjs/extract';
@@ -22,12 +20,20 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-import { multiSelControlOptionExist, uniqueArr } from './utils/func';
-import ItemList from './ItemList';
+import { multiSelControlOptionExist, uniqueArr, uniqueOpt } from './utils/func';
 
 
 export interface OptionConfig {
-    [propName: string]: string | number | boolean | Function;
+    id: number;
+    parentId?: number;
+    label: string;
+    listItemLabel: string;
+    value: string;
+    queryString: string;
+    depth?: number;
+    children?: OptionConfig[];
+    disabled?: boolean;
+    extendedContent?: React.ReactNode;
 }
 
 
@@ -46,11 +52,6 @@ export type MultipleSelectProps = {
     iconAdd?: React.ReactNode | string;
     iconRemove?: React.ReactNode | string;
     unattachedSelect?: boolean;
-    hierarchical?: boolean;
-    indentation?: string;
-    doubleIndent?: boolean;
-    alternateCollapse?: boolean;
-    arrow?: React.ReactNode;
     defaultValue?: string;
     value?: string;
     label?: React.ReactNode | string;
@@ -58,7 +59,16 @@ export type MultipleSelectProps = {
     options?: OptionConfig[] | string;
     disabled?: any;
     required?: any;
-    appendControl?: React.ReactNode;
+    /** DragDrop List */
+    draggable?: boolean;
+    handleHide?: boolean;
+    handleIcon?: string;
+    handlePos?: 'left' | 'right';
+    dragMode?: 'handle' | 'block';
+    indentation?: string;
+    doubleIndent?: boolean;
+    alternateCollapse?: boolean;
+    arrow?: React.ReactNode;
     /** Whether to use square brackets to save result and initialize default value */
     extractValueByBrackets?: boolean;
     /** Incoming data, you can set the third parameter of `onFetch` */
@@ -72,9 +82,9 @@ export type MultipleSelectProps = {
     fetchFuncMethodParams?: any[];
     fetchCallback?: (data: any) => void;
     onFetch?: (data: any) => void;
-    onAddAll?: (e: any, data: any, dataStr: any) => void;
-    onRemoveAll?: (e: any, data: any, dataStr: any) => void;
-    onChange?: (e: any, data: any, dataStr: any, currentData: any, type: string) => void;
+    onAddAll?: (e: HTMLElement | null, data: any[], dataStr: string, res: any[]) => void;
+    onRemoveAll?: (e: HTMLElement | null, data: any[], dataStr: string, res: any[]) => void;
+    onChange?: (e: HTMLElement | null, data: any[], dataStr: string, currentData: any, type: string, res: any[]) => void;
 
 };
 
@@ -95,20 +105,23 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         iconAdd,
         iconRemove,
         unattachedSelect,
-        hierarchical,
-        indentation,
-        doubleIndent,
-        alternateCollapse,
-        arrow,
         options,
         disabled,
         required,
-        appendControl,
         defaultValue,
         value,
         label,
         name,
         id,
+        draggable = true,
+        handleHide = false,
+        handleIcon = '☰',
+        handlePos = 'left',
+        dragMode = 'handle',
+        indentation,
+        doubleIndent,
+        alternateCollapse,
+        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></>,
         extractValueByBrackets,
         style,
         data,
@@ -124,58 +137,137 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
     } = props;
 
 
-    const UN_ATTACHED_SELECT = typeof unattachedSelect === 'undefined' || unattachedSelect === false ? false : true;
+    const UNATTACHED_SELECT = typeof unattachedSelect === 'undefined' || unattachedSelect === false ? false : true;
     const WRAPPER_MIN_H = typeof wrapperMinHeight === 'undefined' ? '' : wrapperMinHeight;
     const WRAPPER_MIN_W = typeof wrapperMinWidth === 'undefined' ? '' : wrapperMinWidth;
-    const INDENT_PLACEHOLDER = doubleIndent ? `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` : `&nbsp;&nbsp;&nbsp;&nbsp;`;
-    const INDENT_LAST_PLACEHOLDER = `${typeof indentation !== 'undefined' && indentation !== '' ? `${indentation}&nbsp;&nbsp;` : ''}`;
     const VALUE_BY_BRACKETS = typeof extractValueByBrackets === 'undefined' ? true : extractValueByBrackets;
     const uniqueID = useComId();
     const idRes = id || uniqueID;
     const rootRef = useRef<any>(null);
     const inputRef = useRef<any>(null);
     const availableListRef = useRef<any>(null);
-    const selectedListRef = useRef<any>(null);
     const optionsRes = options ? isJSON(options) ? JSON.parse(options as string) : options : [];
     const [valSelectedData, setValSelectedData] = useState<any[]>([]);
     const [valSelected, setValSelected] = useState<any[]>([]);
 
+    // temp default value
+    const [tempDefaultValue, setTempDefaultValue] = useState<string | undefined>(undefined);
 
     // return a array of options
     let optionsDataInit: OptionConfig[] = optionsRes;
 
-
     //
     const [changedSearchVal, setChangedSearchVal] = useState<string>('');
 
     //
     const [dataInit, setDataInit] = useState<OptionConfig[]>(optionsDataInit);
     const [hasErr, setHasErr] = useState<boolean>(false);
+
     
 
     // exposes the following methods
-
     useImperativeHandle(
         contentRef,
         () => ({
             clear: (cb?: any) => {
-                initDefaultValue('', dataInit);
+           
+                const _params: any[] = fetchFuncMethodParams || [];
+                fetchData((_params).join(','), '');
+
                 cb?.();
             },
-            /*
-            set([{"label": "Option 1","listItemLabel":"Option 1 (No: 001)","value": "value-1","queryString": "option1"}], () => { console.log('callback') }])
-            */
             set: (inputData: any[], cb?: any) => {
                 if (! Array.isArray(inputData)) return;
-                
-                initDefaultValue(inputData.map((v: any) => `[${v.value}]`).join(''), dataInit);
+
+                const _params: any[] = fetchFuncMethodParams || [];
+                fetchData((_params).join(','), inputData.map((v: any) => `[${v.value}]`).join(''));
 
                 cb?.();
             }
         }),
-        [contentRef, dataInit],
+        [contentRef],
     );
 
+    const getExtControll = (index: number, id: number, value: number | string, extendedContent: React.ReactNode, defaultValue: any, forceItemSelected: boolean | undefined = undefined) => {
+
+  
+        let itemSelected: boolean = false;
+        if (typeof defaultValue !== 'undefined' && defaultValue !== '') {
+            const _val = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
+
+            if (Array.isArray(_val) && _val.includes(String(value))) {
+                itemSelected = true;
+            }
+        }
+        
+        if (typeof forceItemSelected !== 'undefined') itemSelected = forceItemSelected;
+        
+
+        return <>
+
+            <div style={{
+                paddingLeft: '1rem',
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'end'
+            }}>
+
+                {extendedContent ? <>
+                    <span className="m-select-v2__ext" id={`m-select-v2__ext-${id}${itemSelected ? '-selected' : ''}`}>
+                        {extendedContent}
+                    </span>
+                </> : null}
+
+
+                {itemSelected ? <>
+                    <a href="#" onClick={(e: React.MouseEvent) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        // remove
+                        removeItem(id);
+                    }}>
+                        {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></>}
+                    </a>
+
+                </> : <>
+                    <a href="#" onClick={(e: React.MouseEvent) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        // add
+                        selectItem(id);
+                    }}>
+                        {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></>}
+                    </a>
+                </>}
+
+
+            </div>
+
+        </>
+    };
+    
+    const dragdropListDataInit = (data: any[]) => {
+        // Add appendControl to list
+        data.forEach((item: any, index: number) => {
+            item.appendControl = getExtControll(index, item.id, item.value, item.extendedContent, tempDefaultValue);
+        });
+
+
+        return data;
+    };
+    const dragdropListDefaultDataInit = (data: any[]) => {
+        // Update appendControl to list
+        data.forEach((item: any, index: number) => {
+            item.appendControl = getExtControll(index, item.id, item.value, item.extendedContent, tempDefaultValue, false);
+        });
+
+
+        return data;
+    };
+
 
     async function fetchData(params: any, inputDefault: any) {
 
@@ -201,16 +293,12 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             }
 
 
-            // Set hierarchical categories ( with sub-categories )
-            if (hierarchical) {
-                _ORGIN_DATA = addTreeDepth(_ORGIN_DATA);
-                addTreeIndent(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
-            }
-
-
             // remove Duplicate objects from JSON Array
             _ORGIN_DATA = removeArrDuplicateItems(_ORGIN_DATA, 'value');
 
+            // save temporary default value
+            setTempDefaultValue(inputDefault);
+
             //
             setDataInit(_ORGIN_DATA); // data must be initialized
 
@@ -224,16 +312,12 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             return _ORGIN_DATA;
         } else {
 
-            // Set hierarchical categories ( with sub-categories )
-            if (hierarchical) {
-                optionsDataInit = addTreeDepth(optionsDataInit);
-                addTreeIndent(optionsDataInit, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
-            }
-
-
+      
             // remove Duplicate objects from JSON Array
             optionsDataInit = removeArrDuplicateItems(optionsDataInit, 'value');
 
+            // save temporary default value
+            setTempDefaultValue(inputDefault);
 
             //
             setDataInit(optionsDataInit); // data must be initialized
@@ -270,10 +354,12 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             if (Array.isArray(_val)) {
 
                 const _initVal = _val.filter((v: any) => v !== '');
+
                 setValSelected(_initVal);
 
+         
                 // Initialize selected options
-                if (UN_ATTACHED_SELECT) {
+                if (UNATTACHED_SELECT) {
                     setValSelectedData((prevState: OptionConfig[]) => {
 
                         let _data = [...prevState, ...options.filter((item: any) => {
@@ -282,12 +368,19 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
                         return uniqueArr(_data);
                     });
+
+
                 } else {
                     setValSelectedData(options.filter((item: any) => {
                         return multiSelControlOptionExist(_initVal, item.value);
                     }));
                 }
 
+                // Initialize default options
+                setDataInit(options.filter((item: any) => {
+                    return !multiSelControlOptionExist(_initVal, item.value);
+                }));
+
 
             } else {
                 setValSelected([]);
@@ -299,127 +392,161 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
     }
 
 
-    function selectItem(el: HTMLElement) {
-        if (el === null) return;
+    function selectItem(curId: number) {
+
 
+        // update default options
+        setDataInit((prevState) => {
+            const newDefaultData = prevState.filter((item: any) => item.id != curId);
 
-        const _li = el;
-        const _val = _li.dataset.value;
-        const _listItemLabel = _li.dataset.listItemLabel;
-        const _label = _listItemLabel === '' ? _li.dataset.label : _listItemLabel;
-        const _data = typeof _li.dataset.itemdata !== 'undefined' ? JSON.parse(_li.dataset.itemdata) : {};
 
+            const targetData = prevState.find((v: any) => v.id == curId);  // !!!from old "dataInit"
+            const _data = typeof targetData !== 'undefined' ? targetData : {};
 
-        // set selected items
-        setValSelected((prevState) => {
-            const newData = JSON.parse(JSON.stringify(prevState));
-            const index = newData.findIndex((item: string | number) => item == _val);
-            if (index !== -1) newData.splice(index, 1);
+            // update selected data
+            setValSelectedData((prevState2: any[]) => {
+                const newSelectedData = dragdropListDataInit([...prevState2, _data]);
 
-            const _res = (_val) ? Array.from(new Set([...newData, _val])) : newData;
-            onChange?.(_li, _res, VALUE_BY_BRACKETS ? convertArrToValByBrackets(_res) : _res.join(','), _data, 'add');
+                // update selected items
+                setValSelected((prevState3) => {
+                    const newValueData = newSelectedData.map((v: any) => v.value);
+                    const newValueStr = VALUE_BY_BRACKETS ? convertArrToValByBrackets(newValueData) : newValueData.join(',');
+            
+                    onChange?.(document.querySelector(`[data-id="${curId}"]`), newValueData, newValueStr, _data, 'add', newSelectedData);
 
-            // hide current item
-            _li.classList.add('hide');
+                    // update temporary default value
+                    setTempDefaultValue(newValueStr);
 
-            return _res;
+                    return newValueData;
+                });
+
+                return uniqueArr(newSelectedData);
+            });
+
+            return uniqueArr(newDefaultData);
         });
 
 
-        // update selected data
-        setValSelectedData((prevState) => {
-            const newData = JSON.parse(JSON.stringify(prevState));
-            const index = newData.findIndex((item: any) => item.value == _val);
-            if (index !== -1) newData.splice(index, 1);
 
-            const _res = (_val) ? Array.from(new Set([...newData, _data])) : newData;
 
 
-            return _res;
-        });
     }
 
-    function removeItem(el: HTMLElement) {
-        if (el === null) return;
+    function removeItem(curId: number) {
 
-        const _li = el;
-        const _val = _li.dataset.value;
-        const _data = typeof _li.dataset.itemdata !== 'undefined' ? JSON.parse(_li.dataset.itemdata) : {};
+        // update selected data
+        setValSelectedData((prevState: any[]) => {
+            const newSelectedData = prevState.filter((item: any) => item.id != curId);
 
+            const targetData = prevState.find((v: any) => v.id == curId); // !!!from old "valSelectedData"
+            const _data = typeof targetData !== 'undefined' ? targetData : {};
 
-        // set selected items
-        setValSelected((prevState) => {
-            const newData = JSON.parse(JSON.stringify(prevState));
-            const index = newData.findIndex((item: string | number) => item == _val);
-            if (index !== -1) newData.splice(index, 1);
+            // update default options
+            setDataInit((prevState2) => {
+                const newDefaultData = dragdropListDefaultDataInit([...prevState2, _data]);
+                return uniqueArr(newDefaultData);
+            });
 
-            const _res = newData;
+            // update selected items
+            setValSelected((prevState3) => {
+                const newValueData = newSelectedData.map((v: any) => v.value);
+                const newValueStr = VALUE_BY_BRACKETS ? convertArrToValByBrackets(newValueData) : newValueData.join(',');
+            
+                onChange?.(document.querySelector(`[data-id="${curId}"]`), newValueData, newValueStr, _data, 'remove', newSelectedData);
 
-            onChange?.(_li, _res, VALUE_BY_BRACKETS ? convertArrToValByBrackets(_res) : _res.join(','), _data, 'remove');
+                // update temporary default value
+                setTempDefaultValue(newValueStr);
 
-            // show current item
-            if (availableListRef.current) {
-                const removedItem = availableListRef.current.querySelector(`li[data-value="${_val}"]`);
-                if (removedItem !== null) removedItem.classList.remove('hide');
-            }
 
+                return newValueData;
+            });
 
-            return _res;
+            return uniqueArr(newSelectedData);
         });
 
 
-        // update selected data
-        setValSelectedData((prevState) => {
-            const newData = JSON.parse(JSON.stringify(prevState));
-            const index = newData.findIndex((item: any) => item.value == _val);
-            if (index !== -1) newData.splice(index, 1);
+    }
 
-            const _res = newData;
 
-            return _res;
-        });
 
 
-    }
+    function handleSelectAll(event: any) {
+        event.preventDefault();
+        event.stopPropagation();
+
+
+        // update default options
+        setDataInit((prevState) => {
+            const newDefaultData: any[] = [];
+
+            // filter the "disabled" option
+            const disabledData = prevState.filter((v: any) => v.disabled === true);  // !!!from old "dataInit"
+            const targetData = prevState.filter((v: any) => typeof v.disabled === 'undefined' || v.disabled === false);  // !!!from old "dataInit"
+            
+         
+            // update selected data
+            setValSelectedData((prevState2: any[]) => {
+                const newSelectedData = dragdropListDataInit([...prevState2, ...targetData]);
+
+                // update selected items
+                setValSelected((prevState3) => {
+                    const newValueData = newSelectedData.map((v: any) => v.value);
+                    const newValueStr = VALUE_BY_BRACKETS ? convertArrToValByBrackets(newValueData) : newValueData.join(',');
+            
+                    onChange?.(null, newValueData, newValueStr, null, 'add-all', newSelectedData);
+
+                    // update temporary default value
+                    setTempDefaultValue(newValueStr);
+
+                    return newValueData;
+                });
+
+                return uniqueArr(newSelectedData);
+            });
+            
+            return uniqueArr([...newDefaultData, ...disabledData]);
+        });
 
 
+    }
 
 
-    function handleSelectAll(event: any) {
+    function handleRemoveAll(event: any) {
         event.preventDefault();
-        if (availableListRef.current === null) return;
+        event.stopPropagation();
 
-        const items = [].slice.call(availableListRef.current.querySelectorAll('li[data-value]'));
-        items.forEach((item: any) => {
 
-            if (!item.classList.contains('disabled')) {
-                selectItem(item);
-            }
+        // update selected data
+        setValSelectedData((prevState: any[]) => {
+            const newSelectedData: any[] = [];
 
-        });
+            const targetData = prevState; // !!!from old "valSelectedData"
 
-        //
-        onAddAll?.(event, dataInit.map((v: any) => `${v.value}`), VALUE_BY_BRACKETS ? dataInit.map((v: any) => `[${v.value}]`).join('') : dataInit.map((v: any) => v.value).join(''));
+            // update default options
+            setDataInit((prevState2) => {
+                const newDefaultData = dragdropListDefaultDataInit([...prevState2, ...targetData]);
 
-        
+                return uniqueArr(newDefaultData);
+            });
 
+            // update selected items
+            setValSelected((prevState3) => {
+                const newValueData = newSelectedData.map((v: any) => v.value);
+                const newValueStr = VALUE_BY_BRACKETS ? convertArrToValByBrackets(newValueData) : newValueData.join(',');
+            
+                onChange?.(null, newValueData, newValueStr, null, 'remove-all', newSelectedData);
+                onRemoveAll?.(event, newValueData, newValueStr, newSelectedData);
 
-    }
+                // update temporary default value
+                setTempDefaultValue(newValueStr);
 
 
-    function handleRemoveAll(event: any) {
-        event.preventDefault();
-        if (selectedListRef.current === null) return;
+                return newValueData;
+            });
 
-        const items = [].slice.call(selectedListRef.current.querySelectorAll('li[data-value]'));
-        items.forEach((item: any) => {
-            removeItem(item);
+            return uniqueArr(newSelectedData);
         });
 
-        //
-        onRemoveAll?.(event, [], '');
-
-        
 
     }
 
@@ -465,7 +592,6 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
     useEffect(() => {
 
-
         // data init
         //--------------
         const _params: any[] = fetchFuncMethodParams || [];
@@ -490,18 +616,18 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
             <div
                 className={combinedCls(
-                    'm-select__wrapper',
+                    'm-select-v2__wrapper',
                     clsWrite(wrapperClassName, 'mb-3')
                 )}
                 ref={rootRef}
                 style={{
-                    minWidth: WRAPPER_MIN_W === '' ? 'var(--m-select-wrapper-min-w)' : WRAPPER_MIN_W,
-                    minHeight: WRAPPER_MIN_H === '' ? 'var(--m-select-wrapper-min-h)' : WRAPPER_MIN_H
+                    minWidth: WRAPPER_MIN_W === '' ? 'var(--m-select-v2-wrapper-min-w)' : WRAPPER_MIN_W,
+                    minHeight: WRAPPER_MIN_H === '' ? 'var(--m-select-v2-wrapper-min-h)' : WRAPPER_MIN_H
                 }}
             >
 
                 {/* DIVIDING LINE */}
-                <div className="m-select-diving-line"></div>
+                <div className="m-select-v2-diving-line"></div>
                 {/* /DIVIDING LINE */}
 
                 {/* VALUE INPUT */}
@@ -526,22 +652,22 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                 {/* /VALUE INPUT */}
 
 
-                <div className="m-select-inner">
+                <div className="m-select-v2-inner">
 
                     {/*
                     // ++++++++++++++++++++
                     // Available Container
                     // ++++++++++++++++++++
                     */}
-                    <div className="m-select__available__container">
-                        <div className="m-select__m-select__item-actions m-select__header">
+                    <div className="m-select-v2__available__container">
+                        <div className="m-select-v2__m-select-v2__item-actions m-select-v2__header">
 
                             {/* SEARCH */}
-                            <div className="m-select__search__container">
+                            <div className="m-select-v2__search__container">
                                 <input
                                     type="text"
                                     value={changedSearchVal}
-                                    className="m-select__search"
+                                    className="m-select-v2__search"
                                     onChange={handleChangeSearch}
                                 />
                                 <i><svg width="0.8em" height="0.8em" fill="#ddd" viewBox="0 0 16 16">
@@ -550,28 +676,28 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                             </div>
                             {/* /SEARCH */}
 
-                            <span className="m-select__title" dangerouslySetInnerHTML={{ __html: `${availableHeaderTitle || ''}` }}></span>
+                            <span className="m-select-v2__title" dangerouslySetInnerHTML={{ __html: `${availableHeaderTitle || ''}` }}></span>
 
-                            <a href="#" className="m-select__btn--add-all" onClick={handleSelectAll}>{addAllBtnLabel || 'Add all'}</a>
+                            <a href="#" className="m-select-v2__btn--add-all" onClick={handleSelectAll}>{addAllBtnLabel || 'Add all'}</a>
                         </div>
 
 
 
                         {/* OPTIONS LIST */}
-                        <ItemList
-                            appendControl={appendControl}
-                            root={rootRef.current}
-                            listContainerClassName="m-select__available m-select__options-contentlist"
+                        <DragDropList
+                            data={dragdropListDefaultDataInit(dataInit as [])}
+                            wrapperClassName=""
                             ref={availableListRef}
-                            indentStr={INDENT_LAST_PLACEHOLDER}
-                            valSelected={valSelected}
-                            iconAdd={iconAdd}
-                            onSelect={selectItem}
+                            prefix="m-select-v2"
+                            draggable={false}
+                            handleHide={handleHide}
+                            handleIcon={handleIcon}
+                            handlePos={handlePos}
+                            dragMode={dragMode}
+                            indentation={indentation}
+                            doubleIndent={doubleIndent}
                             alternateCollapse={alternateCollapse}
-                            first={true}
                             arrow={arrow}
-                            data={dataInit}
-                            childClassName={childClassName || 'm-select__options-contentlist-custom'}
                         />
                         {/* /OPTIONS LIST */}
 
@@ -583,30 +709,42 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                     // Selected  Container
                     // ++++++++++++++++++++
                     */}
-                    <div className="m-select__selected__container">
-                        <div className="m-select__m-select__item-actions m-select__header">
-                            <span className="m-select__count" dangerouslySetInnerHTML={{ __html: `${typeof selectedHeaderNote !== 'undefined' ? selectedHeaderNote.replace('{items_num}', valSelectedData.length as never) : ''}` }}></span>
-                            <span className="m-select__title" dangerouslySetInnerHTML={{ __html: `${selectedHeaderTitle || ''}` }}></span>
-                            <a href="#" className="m-select__btn--remove-all" onClick={handleRemoveAll}>{removeAllBtnLabel || 'Remove all'}</a>
+                    <div className="m-select-v2__selected__container">
+                        <div className="m-select-v2__m-select-v2__item-actions m-select-v2__header">
+                            <span className="m-select-v2__count" dangerouslySetInnerHTML={{ __html: `${typeof selectedHeaderNote !== 'undefined' ? selectedHeaderNote.replace('{items_num}', valSelectedData.length as never) : ''}` }}></span>
+                            <span className="m-select-v2__title" dangerouslySetInnerHTML={{ __html: `${selectedHeaderTitle || ''}` }}></span>
+                            <a href="#" className="m-select-v2__btn--remove-all" onClick={handleRemoveAll}>{removeAllBtnLabel || 'Remove all'}</a>
                         </div>
 
 
                         {/* OPTIONS LIST */}
-                        <ItemList
-                            appendControl={appendControl}
-                            root={rootRef.current}
-                            listContainerClassName="m-select__selected m-select__options-contentlist--sortable m-select__options-contentlist"
-                            ref={selectedListRef}
-                            indentStr={INDENT_LAST_PLACEHOLDER}
-                            valSelected={selectedResultReverse ? valSelected.reverse() : valSelected}
-                            iconRemove={iconRemove}
-                            onSelect={removeItem}
-                            alternateCollapse={alternateCollapse}
-                            first={true}
+                        <DragDropList
+                            data={dragdropListDataInit(selectedResultReverse ? valSelectedData.reverse() : valSelectedData)}
+                            onUpdate={(newData: any[], curId: number) => {
+                                setValSelectedData(newData);
+
+                                const newValueData = newData.map((v: any) => v.value);
+                                const newValueStr = VALUE_BY_BRACKETS ? convertArrToValByBrackets(newValueData) : newValueData.join(',');
+                                const targetData = newData.find((v: any) => v.id == curId);  // !!!from old "dataInit"
+                                const _data = typeof targetData !== 'undefined' ? targetData : {};
+
+                                setValSelected(newData.map((v: any) => v.value));
+                
+                                onChange?.(document.querySelector(`[data-id="${curId}"]`), newValueData, newValueStr, _data, 'update', newData);
+
+                            }}
+                            wrapperClassName=""
+                            prefix="m-select-v2"
+                            draggable={draggable}
+                            handleHide={handleHide}
+                            handleIcon={handleIcon}
+                            handlePos={handlePos}
+                            dragMode={dragMode}
+                            indentation={indentation}
+                            doubleIndent={doubleIndent}
+                            alternateCollapse={false}
                             arrow={arrow}
-                            data={selectedResultReverse ? valSelectedData.reverse() : valSelectedData}
-                            childClassName={clsWrite(childClassName, 'm-select__options-contentlist--custom')}
-                            selected
+                            hierarchical={false}
                         />
                         {/* /OPTIONS LIST */}