funda-ui 4.7.701 → 4.7.711

package/EventCalendarTimeline/index.d.ts

@@ -51,7 +51,7 @@ export declare type EventCalendarTimelineProps = {
     cellAddBtnLabel?: string | React.ReactNode;
     forwardAndBackFillDisabled?: boolean;
     draggable?: boolean;
-    showWeek?: boolean;
+    headerShowWeek?: boolean;
     autoScroll?: boolean;
     onChangeDate?: (e: any, currentData: any) => void;
     onChangeMonth?: (currentData: any) => void;

package/EventCalendarTimeline/index.js

@@ -3977,7 +3977,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     cellAddBtnLabel = props.cellAddBtnLabel,
     forwardAndBackFillDisabled = props.forwardAndBackFillDisabled,
     draggable = props.draggable,
-    showWeek = props.showWeek,
+    headerShowWeek = props.headerShowWeek,
     autoScroll = props.autoScroll,
     onChangeDate = props.onChangeDate,
     onChangeMonth = props.onChangeMonth,
@@ -4115,7 +4115,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
 
   // table grid
   var AUTO_SCROLL = autoScroll || false;
-  var SHOW_WEEK = showWeek || false;
+  var HEADER_SHOW_WEEK = headerShowWeek || false;
   var BODY_DRAG = draggable || false;
   var tableGridRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var tableGridHeaderRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
@@ -4161,13 +4161,13 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   // Calculate CELL_MIN_W based on appearanceMode and tableCellMinWidth
   var CELL_MIN_W = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     if (typeof tableCellMinWidth === 'undefined') {
-      return appearanceMode === 'week' ? 100 : 50;
+      return headerShowWeek || false ? 100 : 50;
     }
     if (typeof tableCellMinWidth === 'function') {
       return tableCellMinWidth(appearanceMode);
     }
     return tableCellMinWidth;
-  }, [tableCellMinWidth, appearanceMode]);
+  }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
   var findMondayAndTruncate = function findMondayAndTruncate(dates) {
     var _res = dates.map(function (s) {
       return new Date(s);
@@ -5076,7 +5076,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
 
         // week day
         var weekDay = item.week[i];
-        var _weekDayStr = SHOW_WEEK ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+        var _weekDayStr = HEADER_SHOW_WEEK ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
           dangerouslySetInnerHTML: {
             __html: item.weekDisplay[i]
           }
@@ -5547,9 +5547,17 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     var tableGridEl = tableGridRef.current;
 
     // initialize cell height
-    var headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
-    var trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
+    var headerTitleTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody');
+    var contentTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody');
+    if (!headerTitleTbody || !contentTbody) return;
+    var headerTitleTrElements = headerTitleTbody.getElementsByTagName('tr');
+    var trElements = contentTbody.getElementsByTagName('tr');
+
+    // Reset any previously set inline heights so we measure natural heights.
     for (var i = 0; i < headerTitleTrElements.length; i++) {
+      // set to 'auto' (or remove inline style) to allow shrink
+      headerTitleTrElements[i].style.height = 'auto';
+      if (trElements[i]) trElements[i].style.height = 'auto';
       var targetElement = headerTitleTrElements[i].offsetHeight > trElements[i].offsetHeight ? headerTitleTrElements[i] : trElements[i];
       var tdOHeight = window.getComputedStyle(targetElement).height;
       headerTitleTrElements[i].style.height = tdOHeight;

package/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/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/Utils/useSSE.d.ts

@@ -1,3 +1,44 @@
+/**
+ * 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[];

package/Utils/useSSE.js

@@ -108,20 +108,44 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * 
  * @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>
- *     );
- * };
+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 '';
+};
+
  */
 
+
 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),

package/lib/cjs/EventCalendarTimeline/index.d.ts

@@ -51,7 +51,7 @@ export declare type EventCalendarTimelineProps = {
     cellAddBtnLabel?: string | React.ReactNode;
     forwardAndBackFillDisabled?: boolean;
     draggable?: boolean;
-    showWeek?: boolean;
+    headerShowWeek?: boolean;
     autoScroll?: boolean;
     onChangeDate?: (e: any, currentData: any) => void;
     onChangeMonth?: (currentData: any) => void;

package/lib/cjs/EventCalendarTimeline/index.js

@@ -3977,7 +3977,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     cellAddBtnLabel = props.cellAddBtnLabel,
     forwardAndBackFillDisabled = props.forwardAndBackFillDisabled,
     draggable = props.draggable,
-    showWeek = props.showWeek,
+    headerShowWeek = props.headerShowWeek,
     autoScroll = props.autoScroll,
     onChangeDate = props.onChangeDate,
     onChangeMonth = props.onChangeMonth,
@@ -4115,7 +4115,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
 
   // table grid
   var AUTO_SCROLL = autoScroll || false;
-  var SHOW_WEEK = showWeek || false;
+  var HEADER_SHOW_WEEK = headerShowWeek || false;
   var BODY_DRAG = draggable || false;
   var tableGridRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var tableGridHeaderRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
@@ -4161,13 +4161,13 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   // Calculate CELL_MIN_W based on appearanceMode and tableCellMinWidth
   var CELL_MIN_W = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     if (typeof tableCellMinWidth === 'undefined') {
-      return appearanceMode === 'week' ? 100 : 50;
+      return headerShowWeek || false ? 100 : 50;
     }
     if (typeof tableCellMinWidth === 'function') {
       return tableCellMinWidth(appearanceMode);
     }
     return tableCellMinWidth;
-  }, [tableCellMinWidth, appearanceMode]);
+  }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
   var findMondayAndTruncate = function findMondayAndTruncate(dates) {
     var _res = dates.map(function (s) {
       return new Date(s);
@@ -5076,7 +5076,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
 
         // week day
         var weekDay = item.week[i];
-        var _weekDayStr = SHOW_WEEK ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+        var _weekDayStr = HEADER_SHOW_WEEK ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
           dangerouslySetInnerHTML: {
             __html: item.weekDisplay[i]
           }
@@ -5547,9 +5547,17 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     var tableGridEl = tableGridRef.current;
 
     // initialize cell height
-    var headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
-    var trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
+    var headerTitleTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody');
+    var contentTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody');
+    if (!headerTitleTbody || !contentTbody) return;
+    var headerTitleTrElements = headerTitleTbody.getElementsByTagName('tr');
+    var trElements = contentTbody.getElementsByTagName('tr');
+
+    // Reset any previously set inline heights so we measure natural heights.
     for (var i = 0; i < headerTitleTrElements.length; i++) {
+      // set to 'auto' (or remove inline style) to allow shrink
+      headerTitleTrElements[i].style.height = 'auto';
+      if (trElements[i]) trElements[i].style.height = 'auto';
       var targetElement = headerTitleTrElements[i].offsetHeight > trElements[i].offsetHeight ? headerTitleTrElements[i] : trElements[i];
       var tdOHeight = window.getComputedStyle(targetElement).height;
       headerTitleTrElements[i].style.height = tdOHeight;

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

@@ -1,3 +1,44 @@
+/**
+ * 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[];

package/lib/cjs/Utils/useSSE.js

@@ -108,20 +108,44 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * 
  * @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>
- *     );
- * };
+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 '';
+};
+
  */
 
+
 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),

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -14,7 +14,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import getOs from 'funda-utils//dist/cjs/os';
 
 
-
 export interface EventsValueConfig {
     id: string | number;
     date: string,
@@ -71,7 +70,7 @@ export type EventCalendarTimelineProps = {
     cellAddBtnLabel?: string | React.ReactNode;
     forwardAndBackFillDisabled?: boolean;
     draggable?: boolean;
-    showWeek?: boolean;
+    headerShowWeek?: boolean;
     autoScroll?: boolean;
     onChangeDate?: (e: any, currentData: any) => void;
     onChangeMonth?: (currentData: any) => void;
@@ -161,7 +160,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         cellAddBtnLabel,
         forwardAndBackFillDisabled,
         draggable,
-        showWeek,
+        headerShowWeek,
         autoScroll,
         onChangeDate,
         onChangeMonth,
@@ -272,7 +271,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     // table grid
     const AUTO_SCROLL = autoScroll || false;
-    const SHOW_WEEK = showWeek || false;
+    const HEADER_SHOW_WEEK = headerShowWeek || false;
     const BODY_DRAG = draggable || false;
     const tableGridRef = useRef<any>(null);
     const tableGridHeaderRef = useRef<any>(null);
@@ -303,13 +302,13 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     // Calculate CELL_MIN_W based on appearanceMode and tableCellMinWidth
     const CELL_MIN_W = useMemo(() => {
         if (typeof tableCellMinWidth === 'undefined') {
-            return appearanceMode === 'week' ? 100 : 50;
+            return (headerShowWeek || false) ? 100 : 50;
         }
         if (typeof tableCellMinWidth === 'function') {
             return tableCellMinWidth(appearanceMode as 'week' | 'month');
         }
         return tableCellMinWidth;
-    }, [tableCellMinWidth, appearanceMode]);
+    }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
 
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));
@@ -1255,7 +1254,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                 // week day
                 const weekDay = item.week[i];
-                const _weekDayStr = SHOW_WEEK ? <span dangerouslySetInnerHTML={{
+                const _weekDayStr = HEADER_SHOW_WEEK ? <span dangerouslySetInnerHTML={{
                     __html: item.weekDisplay[i]
                 }} /> : null;
 
@@ -1355,7 +1354,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                         'disabled': !isInteractive
                                     }
                                 )}
-                                style={{ width: (CELL_MIN_W - 1) + 'px' }}
+                                style={{ width: (CELL_MIN_W as number - 1) + 'px' }}
                             >
                                 
                                 {d}
@@ -1633,7 +1632,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                         'disabled': !isInteractive
                                     }
                                 )}
-                                style={{ width: (CELL_MIN_W - 1) + 'px' }}
+                                style={{ width: (CELL_MIN_W as number - 1) + 'px' }}
                             >
 
                                 {/*++++++++++++++++ EVENT ++++++++++++++++*/}
@@ -1865,18 +1864,26 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         const tableGridEl: any = tableGridRef.current;
 
         // initialize cell height
-        const headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
-        const trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
+        const headerTitleTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody');
+        const contentTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody');
+        if (!headerTitleTbody || !contentTbody) return;
+
+        const headerTitleTrElements = headerTitleTbody.getElementsByTagName('tr');
+        const trElements = contentTbody.getElementsByTagName('tr');
 
+        // Reset any previously set inline heights so we measure natural heights.
         for (let i = 0; i < headerTitleTrElements.length; i++) {
+            // set to 'auto' (or remove inline style) to allow shrink
+            headerTitleTrElements[i].style.height = 'auto';
+            if (trElements[i]) trElements[i].style.height = 'auto';
 
             const targetElement = headerTitleTrElements[i].offsetHeight > trElements[i].offsetHeight ? headerTitleTrElements[i] : trElements[i];
             const tdOHeight = window.getComputedStyle(targetElement).height;
             headerTitleTrElements[i].style.height = tdOHeight;
             trElements[i].style.height = tdOHeight;
-
         }
 
+
     }
    
     function tableGridInit() {
@@ -1886,7 +1893,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
         const { forwardFillTotal, list: cellsList } = getCells();
         const tableGridEl: any = tableGridRef.current;
-        let _curCellMinWidth: number = CELL_MIN_W;
+        let _curCellMinWidth: number = CELL_MIN_W as number;
         let _curColCount: number = FILL_BLANK_DATE_DISABLD ? days[month] : 7 * cellsList.length;
 
 
@@ -2203,6 +2210,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // Call a function when the list has been rendered completely
         onListRenderComplete?.();
 
+
     }, [eventsValue, customTodayDate, appearanceMode]);
 
 

package/lib/esm/ModalDialog/index.tsx

@@ -14,7 +14,6 @@ import {
 
 
 
-
 declare global {
     interface Window {
         curVideo?: any;

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

@@ -0,0 +1,84 @@
+/**
+ * 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>;
+};
+
+*/
+import { useEffect, useRef } from "react";
+
+type VisibilityCallback = () => void;
+
+type UsePageVisibility = (
+    onVisible?: VisibilityCallback,
+    onHidden?: VisibilityCallback,
+    onPageInit?: VisibilityCallback
+) => void;
+
+const usePageVisibility: UsePageVisibility = (
+    onVisible,
+    onHidden,
+    onPageInit
+) => {
+    const visibleRef = useRef<boolean>(document.visibilityState === "visible");
+    const onVisibleRef = useRef<VisibilityCallback | undefined>(onVisible);
+    const onHiddenRef = useRef<VisibilityCallback | undefined>(onHidden);
+    const initialVisibleTriggeredRef = useRef<boolean>(false);
+    const onPageInitRef = useRef<VisibilityCallback | undefined>(onPageInit);
+
+    useEffect(() => {
+        onVisibleRef.current = onVisible;
+    }, [onVisible]);
+
+    useEffect(() => {
+        onHiddenRef.current = onHidden;
+    }, [onHidden]);
+
+    useEffect(() => {
+        onPageInitRef.current = onPageInit;
+    }, [onPageInit]);
+
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            const 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 () => {
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, []);
+};
+
+
+export default usePageVisibility;
+export { usePageVisibility };

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

@@ -3,19 +3,44 @@
  * 
  * @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>
- *     );
- * };
+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 '';
+};
+
  */
+
+
 import { useEffect, useRef, useState, useCallback } from 'react';
 
 const useSSE = (url: string | null | undefined, retryDelay: number = 3000) => {

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.701","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.711","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}