funda-ui 4.7.625 → 4.7.711

package/lib/cjs/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/lib/cjs/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/lib/cjs/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/lib/cjs/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/lib/cjs/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/lib/cjs/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/lib/cjs/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/lib/cjs/Utils/usePageVisibility.d.ts

@@ -0,0 +1,5 @@
+declare type VisibilityCallback = () => void;
+declare type UsePageVisibility = (onVisible?: VisibilityCallback, onHidden?: VisibilityCallback, onPageInit?: VisibilityCallback) => void;
+declare const usePageVisibility: UsePageVisibility;
+export default usePageVisibility;
+export { usePageVisibility };

package/lib/cjs/Utils/usePageVisibility.js

@@ -0,0 +1,166 @@
+(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 */   "usePageVisibility": () => (/* binding */ usePageVisibility)
+/* 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__);
+/**
+ * Watch for to know when a document becomes visible or hidden
+ * @param onVisible 
+ * @param onHidden  
+ * @param onPageInit executed once when the page first loads visibly
+ */
+/* 
+@usage:
+
+const App = () => {
+    usePageVisibility(
+        () => console.log("🍏 Page is now visible — current tab is active."),
+        () => console.log("🍎 Page is hidden — switched to another tab or minimized."),
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return <div>Try switching tabs to see the console output.</div>;
+};
+
+*/
+
+var usePageVisibility = function usePageVisibility(onVisible, onHidden, onPageInit) {
+  var visibleRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(document.visibilityState === "visible");
+  var onVisibleRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(onVisible);
+  var onHiddenRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(onHidden);
+  var initialVisibleTriggeredRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var onPageInitRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(onPageInit);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    onVisibleRef.current = onVisible;
+  }, [onVisible]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    onHiddenRef.current = onHidden;
+  }, [onHidden]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    onPageInitRef.current = onPageInit;
+  }, [onPageInit]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    var handleVisibilityChange = function handleVisibilityChange() {
+      var isVisible = document.visibilityState === "visible";
+      if (isVisible && !visibleRef.current) {
+        onVisibleRef.current && onVisibleRef.current();
+      }
+      if (!isVisible && visibleRef.current) {
+        onHiddenRef.current && onHiddenRef.current();
+      }
+      visibleRef.current = isVisible;
+    };
+
+    // It retains the original switching monitor, and can ensure that onPageInit will run when the first screen is loaded.
+    if (visibleRef.current && !initialVisibleTriggeredRef.current) {
+      initialVisibleTriggeredRef.current = true;
+      onPageInitRef.current && onPageInitRef.current();
+    }
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return function () {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (usePageVisibility);
+
+})();
+
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});

package/lib/cjs/Utils/useSSE.d.ts

@@ -0,0 +1,50 @@
+/**
+ * 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>
+    );
+};
+
+ * It is recommended to use it in conjunction with usePageVisibility, because in HTTP mode,
+ * browsers allow a maximum of 6 connections; otherwise, other normal interfaces will be suspended and inaccessible.
+
+ import usePageVisibility from 'funda-ui/Utils/usePageVisibility';
+
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    // add new
+    usePageVisibility(
+        () => {
+            reconnect();
+        },
+        () => {
+            disconnect();
+        },
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return '';
+};
+
+ */
+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 };