funda-ui 4.6.111 → 4.6.222

package/lib/esm/Date/index.tsx

@@ -28,6 +28,8 @@ import {
 import { isNumeric } from 'funda-utils/dist/cjs/math';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
+
 import Calendar from './Calendar';
 
 
@@ -196,6 +198,9 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
         return typeof s === 'undefined' || s === null || s === 'null' || s === '';
     };
     
+    const propExist = (p: any) => {
+        return typeof p !== 'undefined' && p !== null && p !== '';
+    };
 
 
 
@@ -901,7 +906,52 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
         return [_res, v]
 
     }
-    
+
+    function tools() {
+        return <span className={combinedCls(
+            'date2d__control-tools',
+            {
+                'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
+            }
+
+        )}>
+
+            <a
+                tabIndex={-1}
+                href="#"
+                className={combinedCls(
+                    'date2d__control-tools__close',
+                    {
+                        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
+                    }
+                )} onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();  // Avoid triggering pop-ups
+
+                    clearAll();
+                    onClear?.(getFullTimeData(''));
+                }}
+            ><svg width="12px" height="12px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
+
+            <a
+                tabIndex={-1}
+                href="#"
+                className="date2d__control-tools__trigger"
+                onClick={(e: React.MouseEvent) => {
+                    e.preventDefault();
+                    e.stopPropagation();  // Avoid triggering pop-ups
+
+                    handleShow();
+                }}
+            >
+                <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none">
+                    <path d="M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+            </a>
+
+        </span>;
+    }
+
 
     useEffect(() => {
 
@@ -1309,54 +1359,21 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                                 */}
 
                             </div>
+
+
+
+                            {/* TOOLS */}
+                            {propExist(iconRight) ? tools() : null}
+                            {/* /TOOLS */}
+
+
                         </>}
                         style={style}
                         {...attributes}
                     />
 
                     {/* TOOLS */}
-                    <span className={combinedCls(
-                        'date2d__control-tools',
-                        {
-                            'date2d__control-tools--hover-show-tools': SHOW_TOOLS_ENABLED
-                        }
-
-                    )}>
-
-                        <a 
-                            tabIndex={-1} 
-                            href="#" 
-                            className={combinedCls(
-                                'date2d__control-tools__close',
-                                {
-                                    'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
-                                }
-                            )} onClick={(e: React.MouseEvent) => {
-                                e.preventDefault();
-                                e.stopPropagation();  // Avoid triggering pop-ups
-                                
-                                clearAll();
-                                onClear?.(getFullTimeData(''));
-                            }}
-                        ><svg width="12px" height="12px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
-                        
-                        <a
-                            tabIndex={-1}
-                            href="#"
-                            className="date2d__control-tools__trigger" 
-                            onClick={(e: React.MouseEvent) => {
-                                e.preventDefault();
-                                e.stopPropagation();  // Avoid triggering pop-ups
-
-                                handleShow();
-                            }}
-                        >
-                            <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none">
-                                <path d="M3 9H21M9 15L11 17L15 13M7 3V5M17 3V5M6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z" stroke="#000000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-                            </svg>
-                        </a>
-                        
-                    </span>
+                    {!propExist(iconRight) ? tools() : null}
                     {/* /TOOLS */}
 
                    

package/lib/esm/Input/index.tsx

@@ -6,6 +6,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalculation';
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
+
 export type InputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;

package/lib/esm/Select/index.tsx

@@ -50,7 +50,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-
 export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
 
 export interface MultiSelectDataConfig {
@@ -68,9 +67,9 @@ export interface OptionConfig {
     disabled?: boolean;
     optgroup?: any[];
     group?: boolean;
-    label: any;
-    listItemLabel?: any;
-    value: any;
+    label: string;
+    listItemLabel?: string;
+    value: string | number | boolean;
     queryString: string | number;
     callback?: () => void;
 }
@@ -109,7 +108,7 @@ export type SelectProps = {
     multiSelect?: MultiSelectConfig;
     multiSelectEntireAreaTrigger?: boolean;
     multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
-    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => void;
+    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     cleanTrigger?: CleanTriggerConfig;
     defaultValue?: string | OptionConfig;
     value?: string | OptionConfig;

package/lib/esm/TagInput/index.tsx

@@ -13,6 +13,12 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
+export interface TagValConfig {
+    content: string;
+    id: number;
+    [key: string]: string | boolean | number; // Allows dynamic attributes
+}
+
 export type TagInputProps = {
     contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
@@ -27,6 +33,7 @@ export type TagInputProps = {
     required?: any;
     readOnly?: any;
     placeholder?: string;
+    renderSelectedValue?: (selectedData: TagValConfig[], removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
     /** Whether to use square brackets to save result and initialize default value */
     extractValueByBrackets?: boolean;
     /** -- */
@@ -52,6 +59,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         disabled,
         required,
         placeholder,
+        renderSelectedValue,
         readOnly,
         value,
         requiredLabel,
@@ -82,7 +90,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
     const max = maxTags ? maxTags : 10;
     const [lastId, setLastId] = useState<number>(-1);
     const [userInput, setUserInput] = useState<string>('');
-    const [items, setItems] = useState<any[]>([]);
+    const [items, setItems] = useState<TagValConfig[]>([]);
     const [alreadyInItems, setAlreadyInItems] = useState<boolean>(false);
     const [onComposition, setOnComposition] = useState<boolean>(false);
 
@@ -115,7 +123,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         } else {
             const _val = VALUE_BY_BRACKETS ? extractContentsOfBrackets(defaultValue) : defaultValue.trim().replace(/^\,|\,$/g, '').split(',');
             if (Array.isArray(_val)) {
-                setItems(_val.map((item: any, index: number) => {
+                setItems(_val.map((item: string, index: number) => {
                     return {
                         content: item,
                         id: index
@@ -129,13 +137,15 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
     }
 
 
-    function handleRemove(e: MouseEvent<HTMLAnchorElement>) {
+    function handleRemove(e: any) {
         e.preventDefault();
+        e.stopPropagation();  /* REQUIRED */
 
         const idToRemove = Number(e.currentTarget.dataset.item);
         const newArray = items!.filter((item: any) => item.id !== idToRemove);
         setItems(newArray);
 
+
         //
         onChange?.(inputRef.current, newArray, VALUE_BY_BRACKETS ? convertArrToValByBrackets(newArray.map(v => v.content)) : newArray.map(v => v.content).join(','));
     }
@@ -270,13 +280,23 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
                 <div className="tag-input__control-wrapper">
                     <div>
                         <ul className="tag-input__list">
-                            {items ? items.map((item: any, index: number) => (
-                                <li key={index}>
-                                    {item.content}
-                                    
-                                    <a href="#" tabIndex={-1} onClick={handleRemove} data-item={item.id}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000"  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg></a>
-                                </li>
-                            )) : null}
+
+                             {/* ITEMS LIST */}
+                            {typeof renderSelectedValue === 'function' ? <>
+                                {renderSelectedValue(items, handleRemove)}
+                            </> : <>
+                                {items ? items.map((item: any, index: number) => (
+                                    <li key={index}>
+                                        {item.content}
+                                        
+                                        <a href="#" tabIndex={-1} onClick={handleRemove} data-item={item.id}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000"  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg></a>
+                                    </li>
+                                )) : null}
+                            </>}
+
+
+
+
                         </ul>
 
 

package/lib/esm/Textarea/index.tsx

@@ -7,8 +7,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import { actualPropertyValue, getTextTop } from 'funda-utils/dist/cjs/inputsCalculation';
 import useDebounce from 'funda-utils/dist/cjs/useDebounce';
 
-
-
 export type TextareaProps = {
     contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;

package/package.json

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