funda-ui 4.7.624 → 4.7.701

package/lib/esm/TagInput/index.tsx

@@ -209,12 +209,6 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
     function handleChange(event: ChangeEvent<HTMLInputElement>) {
 
         const val = event.target.value;
-        
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
 
         //
         let _alreadyInItems = alreadyInItems;
@@ -239,7 +233,8 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
 
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
+        // tag style
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);
@@ -250,14 +245,9 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         const el = event.target;
         const val = event.target.value;
 
+        setUserInput('');
+        setAlreadyInItems(false);
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
-        //
         onBlur?.(event);
     }
 
@@ -277,16 +267,19 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
         <>
 
             <div className={combinedCls(
-                'tag-input__wrapper',
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
+                'taginput__wrapper',
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': userInput !== ''
+                }
             )} ref={rootRef}>
 
                 {label ? <>{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</> : null}
 
 
-                <div className="tag-input__control-wrapper">
+                <div className="taginput__control-wrapper">
                     <div>
-                        <ul className="tag-input__list">
+                        <ul className="taginput__list">
 
                              {/* ITEMS LIST */}
                             {typeof renderSelectedValue === 'function' ? <>
@@ -308,7 +301,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
 
 
                         <div className={combinedCls(
-                            'tag-input__control',
+                            'taginput__control',
                             {
                                 'disabled': disabled
                             }
@@ -321,7 +314,7 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
 
                                 // Don't use "name", it's just a container to display the label
                                 data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
-                                data-tag-input
+                                data-taginput
                                 autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
                                 autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
                                 spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}

package/lib/esm/Textarea/index.tsx

@@ -335,7 +335,6 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
 
     function handleFocus(event: FocusEvent<HTMLTextAreaElement>): void {
         const el = event.target;
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event, valRef.current as HTMLTextAreaElement);     
@@ -346,12 +345,6 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
 
         setChangedVal(curVal);
 
-        //----
-        //remove focus style
-        if (curVal === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onChange?.(event, valRef.current as HTMLTextAreaElement, curVal);
 
@@ -368,12 +361,6 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
         const val = el.value;
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onBlur?.(event, valRef.current as HTMLTextAreaElement);
 
@@ -516,7 +503,12 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
     return (
         <>
 
-            <div className={clsWrite(wrapperClassName, 'mb-3 position-relative')} ref={rootRef}>
+            <div className={combinedCls(
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
+            )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
 

package/lib/esm/Utils/hooks/useSSE.tsx

@@ -0,0 +1,109 @@
+/**
+ * SSE
+ * 
+ * @usage:
+ *
+ * const App = () => {
+ *     const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+ *
+ *     return (
+ *     <div>
+ *         <p>Status: {connected ? '✅ Connected' : '❌ Disconnected'}</p>
+ *         <button onClick={disconnect}>Disconnect</button>
+ *         <button onClick={reconnect}>Reconnect</button>
+ *         {messages.map((m, i) => <div key={i}>{m}</div>)}
+ *     </div>
+ *     );
+ * };
+ */
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+const useSSE = (url: string | null | undefined, retryDelay: number = 3000) => {
+    const [connected, setConnected] = useState<boolean>(false);
+    const [messages, setMessages] = useState<string[]>([]);
+    const sourceRef = useRef<EventSource | null>(null);
+    const reconnectTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const manuallyClosedRef = useRef<boolean>(false);
+
+    const internalCleanup = useCallback(() => {
+        if (reconnectTimerRef.current) {
+            clearTimeout(reconnectTimerRef.current);
+            reconnectTimerRef.current = null;
+        }
+
+        if (sourceRef.current) {
+            try {
+                sourceRef.current.close();
+            } catch (_) {
+                // Ignore errors during cleanup
+            }
+            sourceRef.current = null;
+        }
+
+        setConnected(false);
+    }, []);
+
+    const connect = useCallback(() => {
+        if (!url || manuallyClosedRef.current) return;
+
+        // Prevent duplicate connections
+        if (sourceRef.current) return;
+
+        const source = new EventSource(url);
+        sourceRef.current = source;
+
+        source.onopen = () => {
+            setConnected(true);
+        };
+
+        source.onmessage = (event: MessageEvent) => {
+            setMessages([event.data]);
+        };
+
+        source.onerror = (err: Event) => {
+            internalCleanup();
+
+            if (!manuallyClosedRef.current) {
+                reconnectTimerRef.current = setTimeout(() => {
+                    connect();
+                }, retryDelay);
+            }
+        };
+    }, [internalCleanup, retryDelay, url]);
+
+    const disconnect = useCallback(() => {
+        manuallyClosedRef.current = true;
+        internalCleanup();
+    }, [internalCleanup]);
+
+    const reconnect = useCallback(() => {
+        manuallyClosedRef.current = false;
+        internalCleanup();
+        connect();
+    }, [connect, internalCleanup]);
+
+    const resetMessages = useCallback(() => setMessages([]), []);
+
+    useEffect(() => {
+        if (!url) return;
+
+        manuallyClosedRef.current = false;
+        connect();
+
+        return () => {
+            // Cleanup on unmount (does not mark manual close)
+            internalCleanup();
+        };
+    }, [url, connect, internalCleanup]);
+
+    return { 
+        connected, 
+        messages, 
+        disconnect, 
+        reconnect, 
+        resetMessages 
+    } as const;
+};
+
+export default useSSE;
+export { useSSE };

package/lib/esm/index.js

@@ -25,6 +25,7 @@ export { default as MultipleSelect } from './MultipleSelect';
 export { default as NativeSelect } from './NativeSelect';
 export { default as NumberInput } from './NumberInput';
 export { default as Pagination } from './Pagination';
+export { default as Popover } from './Popover';
 export { default as Radio } from './Radio';
 export { default as RangeSlider } from './RangeSlider';
 export { default as Refresher } from './Refresher';