funda-ui 4.7.625 → 4.7.701

package/README.md

@@ -60,6 +60,7 @@ Here is a table of the components and their status.
 | [Event Calendar Timeline ✅🔥](packages/EventCalendarTimeline/README.md) |  |  |  |  |
 | [Chatbox ✅🔥🤖](packages/Chatbox/README.md) |  |  |  |  |
 | [Stepper ✅](packages/Stepper/README.md) |  |  |  |  |
+| [Popover ✅](packages/Popover/README.md) |  |  |  |  |
 
 
 ## Usage

package/Radio/index.js

@@ -1587,7 +1587,7 @@ var Radio = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
   }
   function handleFocus(event) {
     var _rootRef$current;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
+    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
@@ -1606,7 +1606,7 @@ var Radio = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
 
     //----
     //remove focus style
-    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
+    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus-floating');
 
     //
     if (typeof onChange === 'function') {
@@ -1620,7 +1620,7 @@ var Radio = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
     var _rootRef$current3;
     //----
     //remove focus style
-    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus-floating');
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/RangeSlider/index.js

@@ -1764,9 +1764,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             }
           }
           function handleFocus(event) {
-            var _rootRef$current;
-            (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
-
             //
             if (valRef.current) {
               onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, onComposition, valRef.current);
@@ -1775,13 +1772,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           function handleChange(event, curVal) {
             setChangedVal(curVal);
 
-            //----
-            //remove focus style
-            if (curVal === '') {
-              var _rootRef$current2;
-              (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
-            }
-
             //
             if (valRef.current) {
               onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition, valRef.current, curVal);
@@ -1798,13 +1788,6 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             var el = event.target;
             var val = event.target.value;
 
-            //----
-            //remove focus style
-            if (val === '') {
-              var _rootRef$current3;
-              (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-            }
-
             //
             if (valRef.current) {
               onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition, valRef.current);
@@ -1902,7 +1885,9 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             }
           }, []);
           return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-            className: (0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
+            className: (0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0, funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+              'focus-floating': changedVal !== ''
+            }),
             ref: rootRef
           }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0___default().Fragment, null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
             htmlFor: idRes,

package/SearchBar/index.js

@@ -573,9 +573,6 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
   }
   function handleFocus(event) {
-    var _rootRef$current;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
-
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, onComposition);
   }
@@ -583,13 +580,6 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     var val = event.target.value;
     setChangedVal(val);
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current2;
-      (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
-    }
-
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, onComposition);
   }
@@ -597,13 +587,6 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     var el = event.target;
     var val = event.target.value;
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current3;
-      (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-    }
-
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, onComposition);
   }
@@ -624,7 +607,9 @@ var SearchBar = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(f
     setChangedVal(value || '');
   }, [value]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+      'focus-floating': changedVal !== ''
+    }),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,

package/Select/index.js

@@ -4975,12 +4975,13 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     filteredHeight = listContainerHeightLimit(filteredHeight);
     if (parseFloat(oldHeight) > filteredHeight) {
       listContentRef.current.style.height = filteredHeight + 'px';
-      console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
+      // console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
     } else {
       listContentRef.current.style.height = oldHeight + 'px';
-      console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
+      //  console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
     }
   }
+
   function popwinNoMatchInit() {
     if (listContentRef.current === null) return;
     var _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');

package/Switch/index.js

@@ -540,7 +540,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
 
   function handleFocus(event) {
     var _rootRef$current;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
+    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
@@ -552,7 +552,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
 
     //----
     //remove focus style
-    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
+    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus-floating');
 
     //
     if (typeof onChange === 'function') {
@@ -563,7 +563,7 @@ var Switch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(func
     var _rootRef$current3;
     //----
     //remove focus style
-    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
+    (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus-floating');
 
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);

package/TagInput/index.css

@@ -1,46 +1,46 @@
 /* ======================================================
     <!-- Tag Input -->
 /* ====================================================== */
-.tag-input__wrapper {
-  --tag-input-control-border-radius: 0.375rem;
-  --tag-input-control-wrapper-bg: #fff;
-  --tag-input-control-wrapper-border-color: #dee2e6;
-  --tag-input-control-color: #adb5bd;
-  --tag-input-list-bg: #efefef;
-  --tag-input-removebtn-fill: #000;
-  --tag-input-removebtn-hover-fill: #f00;
-  --tag-input-focus-border-color:#86b7fe;
-  --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+.taginput__wrapper {
+  --taginput-control-border-radius: 0.375rem;
+  --taginput-control-wrapper-bg: #fff;
+  --taginput-control-wrapper-border-color: #dee2e6;
+  --taginput-control-color: #adb5bd;
+  --taginput-list-bg: #efefef;
+  --taginput-removebtn-fill: #000;
+  --taginput-removebtn-hover-fill: #f00;
+  --taginput-focus-border-color:#86b7fe;
+  --taginput-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
   display: flex;
 }
-.tag-input__wrapper ul,
-.tag-input__wrapper li {
+.taginput__wrapper ul,
+.taginput__wrapper li {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.tag-input__wrapper .tag-input__control-wrapper {
+.taginput__wrapper .taginput__control-wrapper {
   display: flex;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div {
+.taginput__wrapper .taginput__control-wrapper > div {
   position: relative;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   /* bootstrap style that match ".form-control" */
   padding: 0.375rem;
-  background-color: var(--tag-input-control-wrapper-bg);
+  background-color: var(--taginput-control-wrapper-bg);
   background-clip: padding-box;
-  border: 1px solid var(--tag-input-control-wrapper-border-color);
+  border: 1px solid var(--taginput-control-wrapper-border-color);
   appearance: none;
-  border-radius: var(--tag-input-control-border-radius);
+  border-radius: var(--taginput-control-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   padding-bottom: 1px;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control {
   margin-bottom: 0.375rem;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control input {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input {
   background: transparent;
   border: none;
   outline: none;
@@ -51,25 +51,25 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--tag-input-control-color);
+  color: var(--taginput-control-color);
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control input:focus {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input:focus {
   outline: none;
   box-shadow: none;
 }
-.tag-input__wrapper ul.tag-input__list li {
+.taginput__wrapper ul.taginput__list li {
   display: inline-block;
   margin: 5px;
   margin-bottom: 0;
   padding: 0.1rem 1.5rem 0.1rem 1rem;
   font-size: 0.875rem;
-  background: var(--tag-input-list-bg);
+  background: var(--taginput-list-bg);
   border-radius: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
 }
-.tag-input__wrapper ul.tag-input__list li > a {
+.taginput__wrapper ul.taginput__list li > a {
   font-weight: 400;
   opacity: 0.6;
   font-size: 18px;
@@ -79,13 +79,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.tag-input__wrapper ul.tag-input__list li > a path {
-  fill: var(--tag-input-removebtn-fill);
+.taginput__wrapper ul.taginput__list li > a path {
+  fill: var(--taginput-removebtn-fill);
 }
-.tag-input__wrapper ul.tag-input__list li > a:hover path {
-  fill: var(--tag-input-removebtn-hover-fill);
+.taginput__wrapper ul.taginput__list li > a:hover path {
+  fill: var(--taginput-removebtn-hover-fill);
 }
-.tag-input__wrapper.focus .tag-input__control-wrapper > div {
-  box-shadow: var(--tag-input-focus-box-shadow);
-  border-color: var(--tag-input-focus-border-color);
+.taginput__wrapper.focus-floating .taginput__control-wrapper > div {
+  box-shadow: var(--taginput-focus-box-shadow);
+  border-color: var(--taginput-focus-border-color);
 }

package/TagInput/index.js

@@ -1075,13 +1075,6 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   function handleChange(event) {
     var val = event.target.value;
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current;
-      (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.remove('focus');
-    }
-
     //
     var _alreadyInItems = alreadyInItems;
     if (items && items.length > 0) {
@@ -1098,8 +1091,9 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     setUserInput(val);
   }
   function handleFocus(event) {
-    var _rootRef$current2;
-    (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.add('focus');
+    var _rootRef$current;
+    // tag style
+    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus-floating');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
@@ -1107,15 +1101,8 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   function handleBlur(event) {
     var el = event.target;
     var val = event.target.value;
-
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current3;
-      (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-    }
-
-    //
+    setUserInput('');
+    setAlreadyInItems(false);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
@@ -1124,7 +1111,9 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     initDefaultValue(value);
   }, [value]);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('tag-input__wrapper', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.clsWrite)(wrapperClassName, 'mb-3 position-relative')),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('taginput__wrapper', (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+      'focus-floating': userInput !== ''
+    }),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: "label-".concat(idRes),
@@ -1136,9 +1125,9 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     htmlFor: "label-".concat(idRes),
     className: "form-label"
   }, label)) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: "tag-input__control-wrapper"
+    className: "taginput__control-wrapper"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
-    className: "tag-input__list"
+    className: "taginput__list"
   }, typeof renderSelectedValue === 'function' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, renderSelectedValue(items, handleRemove)) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, items ? items.map(function (item, index) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
       key: index
@@ -1156,7 +1145,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
       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"
     }))));
   }) : null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('tag-input__control', {
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_4__.combinedCls)('taginput__control', {
       'disabled': disabled
     }),
     style: {
@@ -1171,7 +1160,7 @@ var TagInput = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     // Don't use "name", it's just a container to display the label
     ,
     "data-name": name !== null && name !== void 0 && name.match(/(\[.*?\])/gi) ? "".concat(name.split('[')[0], "-label[]") : "".concat(name, "-label"),
-    "data-tag-input": true,
+    "data-taginput": true,
     autoComplete: typeof autoComplete === 'undefined' ? 'off' : autoComplete,
     autoCapitalize: typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize,
     spellCheck: typeof spellCheck === 'undefined' ? false : spellCheck,

package/Textarea/index.js

@@ -1561,9 +1561,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     return typeof p !== 'undefined' && p !== null && p !== '';
   };
   function handleFocus(event) {
-    var _rootRef$current;
     var el = event.target;
-    (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.classList.add('focus');
 
     //
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, valRef.current);
@@ -1571,13 +1569,6 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   function handleChange(event, curVal) {
     setChangedVal(curVal);
 
-    //----
-    //remove focus style
-    if (curVal === '') {
-      var _rootRef$current2;
-      (_rootRef$current2 = rootRef.current) === null || _rootRef$current2 === void 0 ? void 0 : _rootRef$current2.classList.remove('focus');
-    }
-
     //
     onChange === null || onChange === void 0 ? void 0 : onChange(event, valRef.current, curVal);
 
@@ -1592,13 +1583,6 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     var el = event.target;
     var val = el.value;
 
-    //----
-    //remove focus style
-    if (val === '') {
-      var _rootRef$current3;
-      (_rootRef$current3 = rootRef.current) === null || _rootRef$current3 === void 0 ? void 0 : _rootRef$current3.classList.remove('focus');
-    }
-
     //
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event, valRef.current);
 
@@ -1705,7 +1689,9 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
     }
   }, []);
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_3__.clsWrite)(wrapperClassName, 'mb-3 position-relative'),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_3__.combinedCls)((0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_3__.clsWrite)(wrapperClassName, 'mb-3 position-relative'), {
+      'focus-floating': changedVal !== ''
+    }),
     ref: rootRef
   }, label ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, typeof label === 'string' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     htmlFor: idRes,

package/Utils/useSSE.d.ts

@@ -0,0 +1,9 @@
+declare const useSSE: (url: string | null | undefined, retryDelay?: number) => {
+    readonly connected: boolean;
+    readonly messages: string[];
+    readonly disconnect: () => void;
+    readonly reconnect: () => void;
+    readonly resetMessages: () => void;
+};
+export default useSSE;
+export { useSSE };

package/Utils/useSSE.js

@@ -0,0 +1,211 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("react"));
+	else if(typeof define === 'function' && define.amd)
+		define(["react"], factory);
+	else if(typeof exports === 'object')
+		exports["RPB"] = factory(require("react"));
+	else
+		root["RPB"] = factory(root["React"]);
+})(this, (__WEBPACK_EXTERNAL_MODULE__787__) => {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ 787:
+/***/ ((module) => {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__787__;
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/compat get default export */
+/******/ 	(() => {
+/******/ 		// getDefaultExport function for compatibility with non-harmony modules
+/******/ 		__webpack_require__.n = (module) => {
+/******/ 			var getter = module && module.__esModule ?
+/******/ 				() => (module['default']) :
+/******/ 				() => (module);
+/******/ 			__webpack_require__.d(getter, { a: getter });
+/******/ 			return getter;
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__),
+/* harmony export */   "useSSE": () => (/* binding */ useSSE)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(787);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 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>
+ *     );
+ * };
+ */
+
+var useSSE = function useSSE(url) {
+  var retryDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3000;
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    connected = _useState2[0],
+    setConnected = _useState2[1];
+  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    messages = _useState4[0],
+    setMessages = _useState4[1];
+  var sourceRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var reconnectTimerRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var manuallyClosedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var internalCleanup = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    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);
+  }, []);
+  var connect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    if (!url || manuallyClosedRef.current) return;
+
+    // Prevent duplicate connections
+    if (sourceRef.current) return;
+    var source = new EventSource(url);
+    sourceRef.current = source;
+    source.onopen = function () {
+      setConnected(true);
+    };
+    source.onmessage = function (event) {
+      setMessages([event.data]);
+    };
+    source.onerror = function (err) {
+      internalCleanup();
+      if (!manuallyClosedRef.current) {
+        reconnectTimerRef.current = setTimeout(function () {
+          connect();
+        }, retryDelay);
+      }
+    };
+  }, [internalCleanup, retryDelay, url]);
+  var disconnect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    manuallyClosedRef.current = true;
+    internalCleanup();
+  }, [internalCleanup]);
+  var reconnect = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    manuallyClosedRef.current = false;
+    internalCleanup();
+    connect();
+  }, [connect, internalCleanup]);
+  var resetMessages = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    return setMessages([]);
+  }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!url) return;
+    manuallyClosedRef.current = false;
+    connect();
+    return function () {
+      // Cleanup on unmount (does not mark manual close)
+      internalCleanup();
+    };
+  }, [url, connect, internalCleanup]);
+  return {
+    connected: connected,
+    messages: messages,
+    disconnect: disconnect,
+    reconnect: reconnect,
+    resetMessages: resetMessages
+  };
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (useSSE);
+
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});