funda-ui 4.2.255 → 4.2.445

package/lib/esm/MultipleSelect/index.tsx

@@ -13,6 +13,10 @@ import {
 
 
 
+import { multiSelControlOptionExist } from './multiple-select-utils/func';
+import ItemList from './ItemList';
+
+
 export interface OptionConfig {
     [propName: string]: string | number | boolean;
 }
@@ -20,6 +24,7 @@ export interface OptionConfig {
 
 type MultipleSelectProps = {
     wrapperClassName?: string;
+    childClassName?: string;
     wrapperMinHeight?: string;
     wrapperMinWidth?: string;
     availableHeaderTitle?: string;
@@ -32,6 +37,8 @@ type MultipleSelectProps = {
     hierarchical?: boolean;
     indentation?: string;
     doubleIndent?: boolean;
+    alternateCollapse?: boolean;
+    arrow?: React.ReactNode;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;
@@ -59,6 +66,7 @@ type MultipleSelectProps = {
 const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any) => {
     const {
         wrapperClassName,
+        childClassName,
         wrapperMinHeight,
         wrapperMinWidth,
         availableHeaderTitle,
@@ -71,6 +79,8 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         hierarchical,
         indentation,
         doubleIndent,
+        alternateCollapse,
+        arrow,
         options,
         disabled,
         required,
@@ -117,12 +127,6 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
     const [hasErr, setHasErr] = useState<boolean>(false);
 
 
-    const multiSelControlOptionExist = (arr: any[], val: any) => {
-        const _data = arr.filter(Boolean);
-        return _data.map((v: any) => v.toString()).includes(val.toString());
-    };
-    
-
     async function fetchData(params: any) {
         
         // set default value
@@ -170,6 +174,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');
@@ -460,49 +470,26 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
                             <a href="#" className="m-select__btn--add-all" onClick={handleSelectAll}>{addAllBtnLabel || 'Add all'}</a>
                         </div>
-                        <ul className="m-select__available m-select__options-contentlist" ref={availableListRef}>
-
-                            {/* OPTIONS LIST */}
-                            {dataInit ? dataInit.map((item: any, i: number) => {
-
-                                
-                                return <li
-                                    key={'item' + i}
-                                    className={`${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)} 
-                                >
-                                   
-                                    <span>
-                                        <strong dangerouslySetInnerHTML={{
-                                            __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
-                                        }}></strong>
-                                        <a
-                                            href="#"
-                                            className="m-select__item-action"
-                                        ></a>
-                                    </span>
-                                    <i
-                                        onClick={(e: React.MouseEvent) => {
-                                            selectItem((e.target as  any).closest('li'));
-                                        }}>
-                                        {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>
-
-                                </li>;
-                            }) : null}
-
-                            {/* /OPTIONS LIST */}
-
-                         
-                        </ul>
+
+
+
+                        {/* OPTIONS LIST */}
+                        <ItemList
+                            root={rootRef.current}
+                            listContainerClassName="m-select__available m-select__options-contentlist"
+                            ref={availableListRef}
+                            indentStr={INDENT_LAST_PLACEHOLDER}
+                            valSelected={valSelected}
+                            iconAdd={iconAdd}
+                            onSelect={selectItem}
+                            alternateCollapse={alternateCollapse}
+                            first={true}
+                            arrow={arrow}
+                            data={dataInit}
+                            childClassName={childClassName || 'm-select__options-contentlist-custom'}
+                        />
+                        {/* /OPTIONS LIST */}
+
                     </div>
 
 
@@ -517,44 +504,26 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                             <span className="m-select__title" dangerouslySetInnerHTML={{__html: `${selectedHeaderTitle || ''}`}}></span>
                             <a href="#" className="m-select__btn--remove-all" onClick={handleRemoveAll}>{removeAllBtnLabel || 'Remove all'}</a>
                         </div>
-                        <ul className="m-select__selected m-select__options-contentlist--sortable m-select__options-contentlist" ref={selectedListRef}>
-
-                            {/* OPTIONS LIST */}
-                            {valSelectedData ? valSelectedData.map((item: any, i: number) => {
-                                return <li
-                                    key={'item-selected' + i}
-                                    className="selected"
-                                    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)} 
-                                >
-                                   
-                                    <span>
-                                        <strong dangerouslySetInnerHTML={{
-                                            __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
-                                        }}></strong>
-                                        <a
-                                            href="#"
-                                            className="m-select__item-action"
-                                        ></a>
-                                    </span>
-                                    <i
-                                        onClick={(e: React.MouseEvent) => {
-                                            removeItem((e.target as  any).closest('li'));
-                                        }}>
-                                        {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></>}
-                                        
-                                    </i>
-
-                                </li>;
-                            }) : null}
-                            {/* /OPTIONS LIST */}
-
-                        </ul>
+
+
+                        {/* OPTIONS LIST */}
+                        <ItemList
+                            root={rootRef.current}
+                            listContainerClassName="m-select__selected m-select__options-contentlist--sortable m-select__options-contentlist"
+                            ref={selectedListRef}
+                            indentStr={INDENT_LAST_PLACEHOLDER}
+                            valSelected={valSelected}
+                            iconRemove={iconRemove}
+                            onSelect={removeItem}
+                            alternateCollapse={alternateCollapse}
+                            first={true}
+                            arrow={arrow}
+                            data={valSelectedData}
+                            childClassName={childClassName || 'm-select__options-contentlist--custom'}
+                            selected
+                        />
+                        {/* /OPTIONS LIST */}
+
                     </div>
 
 

package/lib/esm/MultipleSelect/multiple-select-utils/func.ts

@@ -0,0 +1,29 @@
+
+/**
+ * Format indent value
+ * @param {String|Array} inputData 
+ * @param {String} placeholder 
+ * @returns {String|Array}
+ */
+export function formatIndentVal(inputData: any, placeholder: string) {
+    const reVar = new RegExp(placeholder, 'g');
+    if (Array.isArray(inputData)) {
+        return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
+    } else {
+        const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
+        return _txt.replace(reVar, '').replace(/\ /ig, '');
+    }
+
+}
+
+
+/**
+ * Determine whether the option exists
+ * @param val 
+ * @returns 
+ */
+export function multiSelControlOptionExist(arr: any[], val: any) {
+    const _data = arr.filter(Boolean);
+    return _data.map((v: any) => v.toString()).includes(val.toString());
+
+}

package/lib/esm/NativeSelect/index.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState, useRef, forwardRef } from 'react';
 
+import { optionsFlat } from './native-select-utils/func';
+
 import {
     useComId,
     isJSON,
@@ -157,23 +159,6 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
     }
 
-
-    /**
-     * Format indent value
-     * @param {String|Array} str 
-     * @returns {String|Array}
-     */
-    function formatIndentVal(str: any) {
-        const reVar = new RegExp(INDENT_LAST_PLACEHOLDER, 'g');
-        if (Array.isArray(str)) {
-            return str.map((s: string) => s.replace(reVar,'').replace(/\ /ig,''));
-        } else {
-            return str.replace(reVar,'').replace(/\ /ig,'');
-        }
-        
-    }
-
-
     //
     function handleFocus(event: any) {
         rootRef.current?.classList.add('focus');
@@ -197,7 +182,8 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
 
         //
 		if ( typeof(onChange) === 'function' ) {
-			onChange(event, dataInit[event.target.selectedIndex].value, dataInit[event.target.selectedIndex], event.target.selectedIndex);
+            console.log('---', event.target.selectedIndex)
+			onChange(event, optionsFlat(dataInit)[event.target.selectedIndex].value, optionsFlat(dataInit)[event.target.selectedIndex], event.target.selectedIndex);
 
             event.target.blur();
 		}

package/lib/esm/NativeSelect/native-select-utils/func.ts

@@ -0,0 +1,40 @@
+
+/**
+ * Format indent value
+ * @param {String|Array} inputData 
+ * @param {String} placeholder 
+ * @returns {String|Array}
+ */
+export function formatIndentVal(inputData: any, placeholder: string) {
+    const reVar = new RegExp(placeholder, 'g');
+    if (Array.isArray(inputData)) {
+        return inputData.map((s: any) => String(s).replace(reVar, '').replace(/\ /ig, ''));
+    } else {
+        const _txt: any = typeof inputData === 'string' ? inputData : inputData.toString();
+        return _txt.replace(reVar, '').replace(/\ /ig, '');
+    }
+
+}
+
+/**
+ * Flat options
+ * @param {Array}allData 
+ * @returns {Array} 
+ */
+export function optionsFlat(allData: any[]) {
+
+    const flatItems: any[] = [];
+
+    allData.forEach((item: any) => {
+        if (typeof item.optgroup !== 'undefined') {
+            item.optgroup.forEach((opt: any) => {
+                flatItems.push(opt);
+            });
+        } else {
+            flatItems.push(item);
+        }
+    });
+
+    return flatItems;
+}
+

package/lib/esm/Pagination/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
 import { paginationNavigators } from './pagination-navigators';
 
 
@@ -7,6 +7,8 @@ type PaginationProps = {
     wrapperClassName?: string;
     /** The class name of the navigation */
     navClassName?: string;
+    /** The class name of each item */
+    navItemClassName?: string;
     /** An API URL Path. Use `{page}` characters to place a placeholder. such as `/mypage/{page}` */
     apiUrl: string;
     /** The range of pages displayed */
@@ -56,6 +58,7 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
     const {
         wrapperClassName,
         navClassName,
+        navItemClassName,
         apiUrl,
         pageRangeDisplayed,
         activePage,
@@ -79,6 +82,11 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
     } = props;
 
 
+    const rootRef = useRef<any>(null);
+    const visibleNavigators = pageRangeDisplayed ? pageRangeDisplayed : 3;
+
+
+
 
     // exposes the following methods
     useImperativeHandle(
@@ -105,11 +113,10 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
                 });
             }
         }),
-        [externalRef, activePage],
+        [externalRef, totalPages, activePage],
     );
 
 
-    const visibleNavigators = pageRangeDisplayed ? pageRangeDisplayed : 3;
 
     let alignClassName = '';
     switch (align) {
@@ -124,12 +131,13 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
             break;
     }
 
-    const _activeClassNameName = activeClassName ? activeClassName : 'active',
-        _previousClassNameName = previousClassName ? previousClassName : 'prev',
-        _nextClassNameName = nextClassName ? nextClassName : 'next',
-        _firstClassNameName = firstClassName ? firstClassName : 'first',
-        _lastClassNameName = lastClassName ? lastClassName : 'last',
-        _disabledClassNameName = disabledClassName ? disabledClassName : 'disabled',
+    const _activeClassName = activeClassName || 'active',
+        _previousClassName = previousClassName || 'prev',
+        _nextClassName = nextClassName || 'next',
+        _firstClassName = firstClassName || 'first',
+        _lastClassName = lastClassName || 'last',
+        _disabledClassName = disabledClassName || 'disabled',
+        _itemClassName = navItemClassName || 'page-item',
         _onlyPrevNextButtons = typeof (onlyPrevNext) === 'undefined' ? false : onlyPrevNext,
         _symmetry = typeof (symmetry) === 'undefined' ? false : symmetry;
 
@@ -158,8 +166,8 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
                 _ellipsisEnabled = true;
 
                 return (
-                    <li key={i} className={activePage === item ? `page-item ${_activeClassNameName}` : `page-item`}>
-                        <a className="page-link" data-page={item} href={apiUrl.replace('{page}', item)} onClick={(e) => {
+                    <li key={i} className={activePage === item ? `${_itemClassName} ${_activeClassName}` : `${_itemClassName}`}>
+                        <a className="page-link" data-page={item} href={apiUrl?.replace('{page}', item)} onClick={(e) => {
                             e.preventDefault();
                             onChange?.(Number(item), Number(totalPages));
                         }}>{item}</a>
@@ -203,21 +211,22 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
         <>
 
             <nav
+                ref={rootRef}
                 className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"}
                 style={style}
             >
                 <ul className={navClassName || navClassName === '' ? `${navClassName} ${alignClassName}` : `pagination ${alignClassName}`}>
                     {firstLabel ? (
-                        <li className={activePage > 1 ? `page-item ${_firstClassNameName}` : `page-item ${_firstClassNameName} ${_disabledClassNameName}`}>
-                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'} className="page-link" data-page={1} href={apiUrl.replace('{page}', '1')} onClick={(e) => { e.preventDefault(); handleClick('first'); }}>
+                        <li className={activePage > 1 ? `${_itemClassName} ${_firstClassName}` : `${_itemClassName} ${_firstClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'} className="page-link" data-page={1} href={apiUrl?.replace('{page}', '1')} onClick={(e) => { e.preventDefault(); handleClick('first'); }}>
                                 {firstLabel || null}
                             </a>
                         </li>
                     ) : ''}
 
                     {previousLabel ? (
-                        <li className={activePage > 1 ? `page-item ${_previousClassNameName}` : `page-item ${_previousClassNameName} ${_disabledClassNameName}`}>
-                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'} className="page-link" data-page={activePage - 1} href={apiUrl.replace('{page}', (activePage - 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('prev'); }}>
+                        <li className={activePage > 1 ? `${_itemClassName} ${_previousClassName}` : `${_itemClassName} ${_previousClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage > 1 ? 0 : -1} aria-disabled={activePage > 1 ? 'false' : 'true'} className="page-link" data-page={activePage - 1} href={apiUrl?.replace('{page}', (activePage - 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('prev'); }}>
                                 {previousLabel || null}
                             </a>
                         </li>
@@ -228,8 +237,8 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
                         navArr.map((item: any, i: number) => {
                             if (item > 0 && item <= totalPages && !_onlyPrevNextButtons) {
                                 return (
-                                    <li key={i} className={activePage === item ? `page-item ${_activeClassNameName}` : `page-item`}>
-                                        <a className="page-link" data-page={item} href={apiUrl.replace('{page}', item)} onClick={(e) => {
+                                    <li key={i} className={activePage === item ? `${_itemClassName} ${_activeClassName}` : `${_itemClassName}`}>
+                                        <a className="page-link" data-page={item} href={apiUrl?.replace('{page}', item)} onClick={(e) => {
                                             e.preventDefault();
                                             onChange?.(Number(item), Number(totalPages));
                                         }}>{item}</a>
@@ -241,12 +250,12 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
                     }
 
 
-                    {_ellipsis !== '' && _ellipsisEnabled ? <><li className="page-item"><span className="page-link">{_ellipsis}</span></li></> : ''}
+                    {_ellipsis !== '' && _ellipsisEnabled ? <><li className={_itemClassName}><span className="page-link">{_ellipsis}</span></li></> : ''}
                     {_ellipsisElements}
 
                     {nextLabel ? (
-                        <li className={activePage < totalPages ? `page-item ${_nextClassNameName}` : `page-item ${_nextClassNameName} ${_disabledClassNameName}`}>
-                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" data-page={activePage + 1} href={apiUrl.replace('{page}', (activePage + 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('next'); }}>
+                        <li className={activePage < totalPages ? `${_itemClassName} ${_nextClassName}` : `${_itemClassName} ${_nextClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" data-page={activePage + 1} href={apiUrl?.replace('{page}', (activePage + 1) as any)} onClick={(e) => { e.preventDefault(); handleClick('next'); }}>
                                 {nextLabel || null}
                             </a>
                         </li>
@@ -254,8 +263,8 @@ const Pagination = forwardRef((props: PaginationProps, externalRef: any) => {
 
 
                     {lastLabel ? (
-                        <li className={activePage < totalPages ? `page-item ${_lastClassNameName}` : `page-item ${_lastClassNameName} ${_disabledClassNameName}`}>
-                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" data-page={totalPages} href={apiUrl.replace('{page}', totalPages as any)} onClick={(e) => { e.preventDefault(); handleClick('last'); }}>
+                        <li className={activePage < totalPages ? `${_itemClassName} ${_lastClassName}` : `${_itemClassName} ${_lastClassName} ${_disabledClassName}`}>
+                            <a tabIndex={activePage < totalPages ? 0 : -1} aria-disabled={activePage < totalPages ? 'false' : 'true'} className="page-link" data-page={totalPages} href={apiUrl?.replace('{page}', totalPages as any)} onClick={(e) => { e.preventDefault(); handleClick('last'); }}>
                                 {lastLabel || null}
                             </a>
                         </li>

package/lib/esm/Radio/index.tsx

@@ -8,6 +8,7 @@ import {
 } from 'funda-utils';
 
 
+
 export interface OptionConfig {
     [propName: string]: string | number | React.ReactNode | boolean;
 }
@@ -358,6 +359,12 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
         return Array.isArray(dataInit) ? dataInit.map((item: any, index: number) => {
             const requiredVal = index === 0 ? required || null : null;
 
+            const _formatItem = {};
+            Object.keys(item).forEach((key: string) => {
+                if (key !== 'extends') _formatItem[key] = item[key];
+            });
+
+      
             const _groupEl = () => {
                 return <>
                     {/* GROUP LABEL */}
@@ -366,6 +373,12 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
                     {item.optgroup.map((opt: any, optIndex: number) => {
 
+                        const _formatOpt = {};
+                        Object.keys(item).forEach((key: string) => {
+                            if (key !== 'extends') _formatOpt[key] = item[key];
+                        });
+            
+
                         return <div key={'option-' + optIndex} className={`${inline ? `form-check form-check-inline` : `form-check`} ${controlValue == opt.value ? (itemSelectedClassName || 'item-selected') : ''}`}>
                             <div className="d-inline-block">
                                 <input
@@ -382,7 +395,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                                     data-list-item-label={`${typeof opt.listItemLabel === 'undefined' ? '' : opt.listItemLabel}`}
                                     data-value={opt.value}
                                     data-disabled={disabled || (typeof opt.disabled !== 'undefined' ? `${opt.disabled}` : 'false')}
-                                    data-optiondata={JSON.stringify(opt)}
+                                    data-optiondata={JSON.stringify(_formatOpt)}
                                     value={`${opt.value}`}
                                     required={requiredVal}
                                     disabled={disabled || (typeof opt.disabled !== 'undefined' ? opt.disabled : null)}
@@ -424,7 +437,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                             data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
                             data-value={item.value}
                             data-disabled={disabled || (typeof item.disabled !== 'undefined' ? `${item.disabled}` : 'false')}
-                            data-optiondata={JSON.stringify(item)}
+                            data-optiondata={JSON.stringify(_formatItem)}
                             value={`${item.value}`}
                             required={requiredVal}
                             disabled={disabled || (typeof item.disabled !== 'undefined' ? item.disabled : null)}
@@ -456,7 +469,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                         colSpan={1}
                         className={`radio-group__wrapper ${groupWrapperClassName || ''} ${tableLayoutCellClassName || ''}`}
                         key={'optgroup-' + index}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_formatItem)}
                     >
                         {_groupEl()}
                     </td>;
@@ -466,7 +479,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                         colSpan={1}
                         className={`${inline ? `form-check form-check-inline` : `form-check`} ${controlValue == item.value ? (itemSelectedClassName || 'item-selected') : ''} ${tableLayoutCellClassName || ''}`}
                         key={'option-' + index}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_formatItem)}
                     >
                         {_normalEl()}
                     </td>;
@@ -477,7 +490,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                     return <div
                         className={`radio-group__wrapper ${groupWrapperClassName || ''}`}
                         key={'optgroup-' + index}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_formatItem)}
                     >
                         {_groupEl()}
                     </div>;
@@ -486,7 +499,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
                     return <div
                         className={`${inline ? `form-check form-check-inline` : `form-check`} ${controlValue == item.value ? (itemSelectedClassName || 'item-selected') : ''}`}
                         key={'option-' + index}
-                        data-optiondata={JSON.stringify(item)}
+                        data-optiondata={JSON.stringify(_formatItem)}
                     >
                         {_normalEl()}
                     </div>;

package/lib/esm/RangeSlider/index.scss

@@ -33,7 +33,9 @@ $control-height: 0.75rem;
     --range-slider-rail: #e9ecef;
     --range-slider-inner-rail: #0d6efd;
     
+    position: relative; /* Required */
 
+    
     > div:not(.range-slider__control-wrapper) {
         width: 49% !important;
         display: inline-block !important;

package/lib/esm/Select/index.scss

@@ -4,7 +4,6 @@
 
 .custom-select__wrapper {
 
-    
     --cus-sel-focus-border-color:#86b7fe;
     --cus-sel-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
     --cus-sel-placeholder-color: rgba(33, 37, 41, 0.75);
@@ -18,6 +17,8 @@
     --cus-sel-removebtn-fill: #000;
     --cus-sel-removebtn-hover-fill: #f00;
 
+    position: relative; /* Required */
+
 
 
     /*------ Placeholder for input ------*/
@@ -306,6 +307,10 @@
 
     /*------ Search button ------*/
     .custom-select-multi__control-searchbtn {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
         z-index: 5;
         pointer-events: auto;