funda-ui 4.7.103 → 4.7.107

package/lib/css/Stepper/index.css

@@ -29,8 +29,7 @@
 }
 .stepper-container .stepper-header {
   display: flex;
-  align-items: center;
-  margin-bottom: 1.5rem;
+  align-items: flex-start;
   flex-wrap: nowrap;
   position: relative;
   /* background line */
@@ -38,18 +37,18 @@
 .stepper-container .stepper-header::before {
   content: "";
   position: absolute;
-  top: calc(50% - 0.875rem); /* Subtract the height of the title */
+  top: 16px; /* Subtract the height of the title */
   left: 14px;
   right: 0;
   height: 2px;
   background-color: var(--stepper-line-default);
   z-index: 1;
-  width: calc(100% - var(--stepper-indicator-offset) / 2);
+  width: calc(100% - 32px);
 }
 .stepper-container .stepper-header::after {
   content: "";
   position: absolute;
-  top: calc(50% - 0.875rem); /* Subtract the height of the title */
+  top: 16px; /* Subtract the height of the title */
   left: 14px;
   height: 2px;
   background-color: var(--stepper-line-complete);
@@ -59,7 +58,7 @@
 }
 .stepper-container .stepper-header::after {
   width: var(--stepper-progress-width, 0%);
-  max-width: calc(100% - var(--stepper-indicator-offset) / 2);
+  max-width: calc(100% - 32px);
 }
 .stepper-container .step-item {
   flex: none;
@@ -174,7 +173,7 @@
   top: 20px;
   left: 24px;
   width: 2px;
-  height: calc(100% - var(--stepper-indicator-offset));
+  height: calc(100% - 32px);
   background-color: var(--stepper-line-default);
   z-index: 1;
 }
@@ -191,7 +190,7 @@
 }
 .stepper-container.stepper-container--vertical::after {
   height: var(--stepper-progress-height, 0%);
-  max-height: calc(100% - var(--stepper-indicator-offset));
+  max-height: calc(100% - 32px);
 }
 .stepper-container.stepper-container--vertical .vertical-step-row {
   display: flex;

package/lib/css/Toast/index.css

@@ -9,8 +9,8 @@
   --toasts-offset-bothsides: 15px;
   --toasts-container-gap: 0.5rem;
   --toasts-container-width: 350px;
-  --toasts-progress-height: 5px;
-  --toasts-progress-bg: rgba(255,255,255,.6);
+  --toasts-progress-height: 3px;
+  --toasts-progress-bg: rgba(228, 228, 228, 0.6);
   width: var(--toasts-container-width);
   position: fixed;
   left: 50%;
@@ -72,34 +72,28 @@
 }
 .toasts__wrapper .toast-container {
   margin-bottom: var(--toasts-container-gap);
+  /* Use clip-path instead of opacity to achieve a fade effect, avoiding the problem of transparency overlay */
+  clip-path: inset(0 0 0 0);
+  transform: translateY(0);
+  /* Rendering of 3D transformations */
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  /* init animation */
+  /* enter animation */
+  /* exit animation */
+}
+.toasts__wrapper .toast-container.animate-ready {
+  pointer-events: none;
+  clip-path: inset(0 0 100% 0);
+  transform: translateY(10px);
 }
-.toasts__wrapper .toast-container.auto-anim-switch--initfirst {
-  transform: translateY(-20px);
-  opacity: 0;
+.toasts__wrapper .toast-container.animate-in {
+  clip-path: inset(0 0 0 0);
+  transform: translateY(0);
 }
-.toasts__wrapper .toast-container.auto-anim-switch--first {
-  animation-name: toast-anim-show-first;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-delay: 0;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-}
-.toasts__wrapper .toast-container.auto-anim-switch:not(.only-one) {
-  animation-name: toast-anim-hide;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-delay: 0;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-}
-.toasts__wrapper .toast-container.only-one.auto-anim-switch {
-  animation-name: toast-anim-hide--onlyone;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-delay: 0;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
+.toasts__wrapper .toast-container.hide-start {
+  clip-path: inset(0 0 100% 0);
+  transform: translateY(-10px);
 }
 .toasts__wrapper.toasts__wrapper--cascading .toast-container {
   margin-bottom: 0;
@@ -120,6 +114,7 @@
 .toasts__wrapper .toast-progress .progress-bar {
   background: var(--toasts-progress-bg);
   width: 100%;
+  height: 100%;
   transition: all 0.1s;
 }
 
@@ -152,50 +147,3 @@
 .toast-container.hide-end {
   display: none;
 }
-
-@keyframes toast-anim-initfirst {
-  0% {
-    transform: translateY(-20px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-}
-@keyframes toast-anim-show-first {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes toast-anim-hide {
-  0% {
-    transform: translateY(-100%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(10px);
-    opacity: 0;
-    /* prevent auto-close's item */
-    display: block;
-  }
-}
-@keyframes toast-anim-hide--onlyone {
-  0% {
-    transform: translateY(-100%);
-    opacity: 1;
-    /* prevent auto-close's item */
-    display: block;
-  }
-  100% {
-    transform: translateY(10px);
-    opacity: 0;
-    /* prevent auto-close's item */
-    display: block;
-  }
-}

package/lib/esm/Chatbox/index.tsx

@@ -1496,8 +1496,8 @@ const Chatbox = (props: ChatboxProps) => {
                             }
 
                         }}
-                        onChange={(e) => {
-                            args().onInputChange?.(inputContentRef.current, e.target.value);
+                        onChange={(e: React.MouseEvent, el: any, value: string) => {
+                            args().onInputChange?.(inputContentRef.current, value);
                         }}
                         onFocus={() => {
                             setFocused(true);

package/lib/esm/Checkbox/index.tsx

@@ -67,16 +67,27 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return val;
+            },
             clear: (cb?: any) => {
                 setVal(false);
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    onChange(null, false);
+                }
             },
             set: (value: string, cb?: any) => {
                 setVal(value);
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    onChange(null, value);
+                }
             }
         }),
-        [contentRef],
+        [contentRef, val],
     );
 
 

package/lib/esm/Date/index.tsx

@@ -342,9 +342,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
             control: () => {
                 return getAllSplittingInputs();
             },
+            getLatestVal: () => {
+                return !dateDefaultValueExist ? `` : valueResConverter(changedVal);
+            },
             clear: (cb?: any) => {
                 clearAll();
                 cb?.();
+
+                onChange?.(inputRef.current, '', false, getAllSplittingInputs());
             },
             blur: (cb?: any) => {
                 getAllSplittingInputs().forEach((el: any) => {
@@ -364,9 +369,11 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                 initValue(curTargetVal);
                 
                 cb?.();
+
+                onChange?.(inputRef.current, value, isValidDate(value), getAllSplittingInputs());
             }
         }),
-        [contentRef],
+        [contentRef, dateDefaultValueExist, changedVal],
     );
 
 

package/lib/esm/Input/index.tsx

@@ -308,13 +308,20 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(null, onComposition, valRef.current, '');
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(null, onComposition, valRef.current, `${value}`);
             },
             aiPredictReset: () => {
                 setTimeout(() => { // Avoid conflicts with other asynchronous states, resulting in invalid clearing
@@ -322,7 +329,7 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
                 }, 0);
             },
         }),
-        [contentRef],
+        [contentRef, onComposition, changedVal],
     );
 
     const propExist = (p: any) => {

package/lib/esm/LiveSearch/index.tsx

@@ -196,13 +196,20 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
             control: () => {
                 return inputRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(inputRef.current, [], '', listRef.current);
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(inputRef.current, [], '', listRef.current);
             }
         }),
         [contentRef],

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -150,16 +150,34 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
             control: () => {
                 return getAllControls();
             },
+            getLatestVal: () => {
+                return VALUE_BY_BRACKETS ? convertArrToValByBrackets(valRes(selectedItems)) : valRes(selectedItems).join(',');
+            },
             clear: (cb?: any) => {
                 initDefaultValue('', dataInit);
                 cb?.();
+
+                onChange?.(null, null, '', null, null, null, null);
             },
             set: (value: any, cb?: any) => {
                 initDefaultValue(value, dataInit);
                 cb?.();
+
+                if (Array.isArray(value)) {
+                    const _resDataCollection = value;
+                    const _value = value.map((k: any) => k.value);
+                    const _valueStr = VALUE_BY_BRACKETS ? value.map((k: any) => `[${k.value}]`).join('') : value.map((k: any) => k.value).join(',');
+                    const _label = value.map((k: any) => k.label);
+                    const _labelStr = VALUE_BY_BRACKETS ? value.map((k: any) => `[${k.label}]`).join('') : value.map((k: any) => k.label).join(',');
+
+                    onChange?.(null, _value, _valueStr, _label, _labelStr, null, _resDataCollection);
+                } else {
+                    onChange?.(null, null, value, null, null, null, null);
+                }
+                
             }
         }),
-        [dataInit, contentRef],
+        [dataInit, contentRef, selectedItems],
     );
 
 

package/lib/esm/NumberInput/index.tsx

@@ -105,13 +105,20 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(null, valRef.current, Number(''));
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(null, valRef.current, Number(formatValue(`${value}`)));
             },
             increment: (cb?: any) => {
                 handleIncrement(null);
@@ -123,7 +130,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
             }
 
         }),
-        [contentRef],
+        [contentRef, changedVal],
     );
 
     const propExist = (p: any) => {

package/lib/esm/Radio/index.tsx

@@ -162,16 +162,32 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
             control: () => {
                 return getAllControls();
             },
+            getLatestVal: () => {
+                return controlValue || '';
+            },
             clear: (cb?: any) => {
                 setControlValue('');
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    const curData: Record<string, unknown> = optionsFlat(dataInit).find((v: any) => v.value == value);
+                    const currentIndex: number = optionsFlat(dataInit).findIndex((v: any) => v.value == value);
+                    onChange(null, '', null, null);
+                }
+
             },
             set: (value: string, cb?: any) => {
                 setControlValue(`${value}`);
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    const curData: Record<string, unknown> = optionsFlat(dataInit).find((v: any) => v.value == value);
+                    const currentIndex: number = optionsFlat(dataInit).findIndex((v: any) => v.value == value);
+                    onChange(null, `${value}`, curData, currentIndex);
+                }
             }
         }),
-        [dataInit, contentRef],
+        [dataInit, contentRef, controlValue],
     );
 
 

package/lib/esm/Stepper/index.scss

@@ -28,8 +28,7 @@
     /* Navigation Header (only horizontal) */
     .stepper-header {
         display: flex;
-        align-items: center;
-        margin-bottom: 1.5rem;
+        align-items: flex-start;
         flex-wrap: nowrap;
         position: relative;
 
@@ -37,19 +36,19 @@
         &::before {
             content: '';
             position: absolute;
-            top: calc(50% - 0.875rem);  /* Subtract the height of the title */
+            top: 16px;  /* Subtract the height of the title */
             left: 14px;
             right: 0;
             height: 2px;
             background-color: var(--stepper-line-default);
             z-index: 1;
-            width: calc(100% - calc(var(--stepper-indicator-offset)/2));
+            width: calc(100% - 32px);
         }
 
         &::after {
             content: '';
             position: absolute;
-            top: calc(50% - 0.875rem); /* Subtract the height of the title */
+            top: 16px; /* Subtract the height of the title */
             left: 14px;
             height: 2px;
             background-color: var(--stepper-line-complete);
@@ -60,7 +59,7 @@
 
         &::after {
             width: var(--stepper-progress-width, 0%);
-            max-width: calc(100% - calc(var(--stepper-indicator-offset)/2));
+            max-width: calc(100% - 32px);
         }
     }
 
@@ -215,7 +214,7 @@
         top: 20px;
         left: 24px;
         width: 2px;
-        height: calc(100% - calc(var(--stepper-indicator-offset)));
+        height: calc(100% - 32px);
         background-color: var(--stepper-line-default);
         z-index: 1;
     }
@@ -234,7 +233,7 @@
 
     &::after {
         height: var(--stepper-progress-height, 0%);
-        max-height: calc(100% - calc(var(--stepper-indicator-offset)));
+        max-height: calc(100% - 32px);
     }
 
 

package/lib/esm/Stepper/index.tsx

@@ -4,7 +4,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 interface StepperPanelProps {
-    header: React.ReactNode;
+    header?: React.ReactNode;
     children?: React.ReactNode;
     style?: React.CSSProperties;
 }
@@ -29,7 +29,7 @@ interface StepperRef {
 
 const StepperPanel: React.FC<StepperPanelProps> = (props) => {
     const {
-        header, 
+        header = <><svg width="1rem" height="1rem"><rect fill="none"/></svg></>, 
         children, 
         style
     } = props;

package/lib/esm/TagInput/index.tsx

@@ -102,16 +102,23 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map((item: any) => item.content)) : items.map((item: any) => item.content).join(',');
+            },
             clear: (cb?: any) => {
                 initDefaultValue('');
                 cb?.();
+
+                onChange?.(inputRef.current, items, '');
             },
             set: (value: string, cb?: any) => {
                 initDefaultValue(`${value}`);
                 cb?.();
+
+                onChange?.(inputRef.current, items, `${value}`);
             }
         }),
-        [contentRef],
+        [contentRef, items],
     );
 
 

package/lib/esm/Textarea/index.tsx

@@ -297,13 +297,20 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(null, valRef.current, '');
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(null, valRef.current, `${value}`);
             },
             resetHeight: () => {
                 reset();
@@ -314,7 +321,7 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
                 }, 0);
             },
         }),
-        [contentRef, reset]
+        [contentRef, reset, changedVal]
     );
 
     const propExist = (p: any) => {

package/lib/esm/Toast/Item.tsx

@@ -1,13 +1,20 @@
 import React, { useRef, forwardRef } from 'react';
 
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
 export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
-    onlyOne?: boolean;
+    depth: number;
     index: number;
+    isNew: boolean;
+    uniqueID: string;
+
+    //
+    onlyOne?: boolean;
     title?: string | React.ReactNode | boolean;
     note?: string | React.ReactNode | boolean;
     theme?: string | undefined;
     message?: string | React.ReactNode;
-    depth: number;
     schemeBody?: string;
     schemeHeader?: string;
     closeBtnColor?: string;
@@ -24,13 +31,17 @@ export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
 const Item = forwardRef((props: ItemProps, externalRef: any) => {
 
     const {
-        onlyOne,
+        depth,
         index,
+        isNew,
+        uniqueID,
+
+        //
+        onlyOne,
         title,
         note,
         theme,
         message,
-        depth,
         lock,
         cascading,
         schemeBody,
@@ -43,16 +54,25 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
         evClose
     } = props;
 
-
+    
     const containerRef = useRef<HTMLDivElement>(null);
+    const hideTitle: boolean = (title === '' || title === false) && (note === '' || note === false);
 
     return (
         <>
 
             <div
                 ref={containerRef}
-                className={`toast-container ${onlyOne ? 'only-one' : ''}`}
+                id={`toast-${uniqueID}`}
+                data-toast-id={uniqueID}
+                data-new={isNew}
                 data-index={index}
+                className={combinedCls(
+                    'toast-container',
+                    {
+                        'only-one': onlyOne
+                    }
+                )} 
                 style={cascading ? {
                     transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
                     zIndex: depth
@@ -64,9 +84,20 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
             >
 
                 {/* Bootstrap toast */}
-                <div className={`toast fade show ${schemeBody ? schemeBody : ''} ${theme ? `bg-${theme}` : ''}`} role="alert">
-                    {(title === '' || title === false) && (note === '' || note === false) ? null : <>
-                        <div className={`toast-header ${schemeHeader ? schemeHeader : ''}`}>
+                <div 
+                    className={combinedCls(
+                        `toast fade show ${theme ? `bg-${theme}` : ''}`,
+                        clsWrite(schemeBody, '')
+                    )} 
+                    role="alert"
+                >
+                    {hideTitle ? null : <>
+                        <div 
+                            className={combinedCls(
+                                'toast-header',
+                                clsWrite(schemeHeader, '')
+                            )}
+                        >
                             <strong className="me-auto">{title === '' || title === false ? '' : <>{title}</>}</strong>
                             <small className="text-muted">{note === '' || note === false ? '' : <>{note}</>}</small>
                             {!lock ? <>{!closeDisabled ? <button 
@@ -88,7 +119,7 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
                     <div className="toast-body">
                         {message}
 
-                        {(title === '' || title === false) && (note === '' || note === false) ? <>
+                        {hideTitle ? <>
                             {!closeDisabled ? <button 
                                 data-close="1" 
                                 data-index={index} 
@@ -105,7 +136,17 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
 
 
                         {/* PROGRESS */}
-                        <div ref={externalRef} data-progress-index={index} className={`progress active toast-progress ${autoCloseTime === false ? 'd-none' : ''}`} role="progressbar">
+                        <div 
+                            ref={externalRef} 
+                            data-progress-index={index} 
+                            className={combinedCls(
+                                'progress active toast-progress',
+                                {
+                                    'd-none': autoCloseTime === false
+                                }
+                            )}
+                            role="progressbar"
+                        >
                             <div className="progress-bar"></div>
                         </div>
                         {/* /PROGRESS */}