funda-ui 4.7.701 → 4.7.723

package/DynamicFields/index.d.ts

@@ -12,6 +12,7 @@ export declare type DynamicFieldsProps = {
     label?: React.ReactNode | string;
     data: DynamicFieldsValueProps | null;
     maxFields?: any;
+    defaultRows?: number;
     confirmText?: string;
     doNotRemoveDom?: boolean;
     iconAddBefore?: React.ReactNode | string;

package/DynamicFields/index.js

@@ -495,7 +495,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_useComId__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(188);
 /* harmony import */ var funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__);
-var _excluded = ["contentRef", "wrapperClassName", "btnAddWrapperClassName", "btnRemoveWrapperClassName", "label", "data", "maxFields", "iconAddBefore", "iconAddAfter", "iconAdd", "iconAddPosition", "iconRemove", "doNotRemoveDom", "id", "confirmText", "innerAppendClassName", "innerAppendCellClassName", "innerAppendLastCellClassName", "innerAppendHideClassName", "innerAppendBodyClassName", "innerAppendHeadData", "innerAppendHeadRowShowFirst", "innerAppendHeadRowClassName", "innerAppendHeadCellClassName", "innerAppendHeadCellStyles", "innerAppendEmptyContent", "onAdd", "onRemove", "onLoad"];
+var _excluded = ["contentRef", "wrapperClassName", "btnAddWrapperClassName", "btnRemoveWrapperClassName", "label", "data", "maxFields", "defaultRows", "iconAddBefore", "iconAddAfter", "iconAdd", "iconAddPosition", "iconRemove", "doNotRemoveDom", "id", "confirmText", "innerAppendClassName", "innerAppendCellClassName", "innerAppendLastCellClassName", "innerAppendHideClassName", "innerAppendBodyClassName", "innerAppendHeadData", "innerAppendHeadRowShowFirst", "innerAppendHeadRowClassName", "innerAppendHeadCellClassName", "innerAppendHeadCellStyles", "innerAppendEmptyContent", "onAdd", "onRemove", "onLoad"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -520,6 +520,7 @@ var DynamicFields = function DynamicFields(props) {
     label = props.label,
     data = props.data,
     maxFields = props.maxFields,
+    defaultRows = props.defaultRows,
     iconAddBefore = props.iconAddBefore,
     iconAddAfter = props.iconAddAfter,
     iconAdd = props.iconAdd,
@@ -564,6 +565,10 @@ var DynamicFields = function DynamicFields(props) {
     setTmpl = _useState4[1];
   var addBtnIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)('');
   addBtnIdRef.current = "dynamic-fields-add-".concat(idRes);
+  var defaultRowsInitializedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var isInitializingDefaultRowsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var rafIdRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+  var timeoutIdsRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)([]);
 
   // exposes the following methods
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
@@ -629,18 +634,13 @@ var DynamicFields = function DynamicFields(props) {
       addBtnRef.current.style.setProperty('display', 'none', 'important');
     }
   }
-  function handleClickAdd() {
-    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (event !== null) {
-      if (typeof event !== 'undefined') event.preventDefault();
-    }
-
+  function addRowWithTemplate(template) {
     //button status
     checkMaxStatus();
 
     //
     setVal(function (prevState) {
-      return [].concat(_toConsumableArray(prevState), _toConsumableArray(generateGroup(tmpl)));
+      return [].concat(_toConsumableArray(prevState), _toConsumableArray(generateGroup(template)));
     });
 
     //
@@ -667,6 +667,13 @@ var DynamicFields = function DynamicFields(props) {
       onAdd === null || onAdd === void 0 ? void 0 : onAdd(perRow, rootRef.current, addBtnRef.current, PER_ROW_DOM_STRING);
     }, 0);
   }
+  function handleClickAdd() {
+    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (event !== null) {
+      if (typeof event !== 'undefined') event.preventDefault();
+    }
+    addRowWithTemplate(tmpl);
+  }
   function handleClickRemove(e) {
     if (e !== null && typeof e !== 'undefined') e.preventDefault();
     var $target = e.currentTarget.closest('.dynamic-fields__data__wrapper');
@@ -778,6 +785,99 @@ var DynamicFields = function DynamicFields(props) {
 
     //
     onLoad === null || onLoad === void 0 ? void 0 : onLoad(addBtnIdRef.current, rootRef.current, PER_ROW_DOM_STRING);
+
+    // Reset initialization flag when data becomes null
+    if (!data) {
+      defaultRowsInitializedRef.current = false;
+      isInitializingDefaultRowsRef.current = false;
+    }
+
+    // Add default rows if specified (only initialize once per data setup)
+    if (!defaultRowsInitializedRef.current && typeof defaultRows === 'number' && defaultRows > 0 && data && data.tmpl) {
+      // Get the initial data length
+      var initDataLength = Array.isArray(data.init) ? data.init.length : 0;
+
+      // Calculate how many rows need to be added
+      var maxRows = typeof maxFields !== 'undefined' ? parseFloat(maxFields) : Infinity;
+      var targetRows = Math.min(defaultRows, maxRows);
+      var rowsToAdd = Math.max(0, targetRows - initDataLength);
+
+      // Mark as initialized immediately to prevent re-adding
+      defaultRowsInitializedRef.current = true;
+
+      // Only add rows if needed
+      if (rowsToAdd > 0) {
+        // Mark that we're initializing default rows
+        isInitializingDefaultRowsRef.current = true;
+
+        // Clear any existing timeouts
+        timeoutIdsRef.current.forEach(function (id) {
+          return clearTimeout(id);
+        });
+        timeoutIdsRef.current = [];
+
+        // Use requestAnimationFrame to ensure DOM is ready and state is updated
+        rafIdRef.current = requestAnimationFrame(function () {
+          // Check if component is still mounted
+          if (!rootRef.current) {
+            isInitializingDefaultRowsRef.current = false;
+            return;
+          }
+          var timeoutId1 = setTimeout(function () {
+            // Check if component is still mounted
+            if (!rootRef.current) {
+              isInitializingDefaultRowsRef.current = false;
+              return;
+            }
+
+            // Add rows one by one with a small delay to ensure state updates
+            var addedCount = 0;
+            var addNextRow = function addNextRow() {
+              // Check if component is still mounted before each operation
+              if (addedCount < rowsToAdd && rootRef.current) {
+                // Use data.tmpl directly to avoid dependency on state
+                addRowWithTemplate(data.tmpl);
+                addedCount++;
+                // Wait a bit before adding the next row to ensure state updates
+                if (addedCount < rowsToAdd) {
+                  var timeoutId2 = setTimeout(addNextRow, 10);
+                  timeoutIdsRef.current.push(timeoutId2);
+                } else {
+                  // All rows added, mark initialization as complete
+                  isInitializingDefaultRowsRef.current = false;
+                }
+              } else {
+                // No more rows to add or component unmounted
+                isInitializingDefaultRowsRef.current = false;
+              }
+            };
+            addNextRow();
+          }, 50);
+          timeoutIdsRef.current.push(timeoutId1);
+        });
+      }
+    }
+
+    // Cleanup function to cancel requestAnimationFrame and timeouts
+    return function () {
+      // Don't cleanup if we're in the middle of initializing defaultRows
+      // This prevents the cleanup from canceling the async operations before they complete
+      if (isInitializingDefaultRowsRef.current) {
+        // Allow defaultRows initialization to complete
+        // The cleanup will happen naturally when initialization finishes
+        return;
+      }
+
+      // Normal cleanup for other cases
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+      timeoutIdsRef.current.forEach(function (id) {
+        return clearTimeout(id);
+      });
+      timeoutIdsRef.current = [];
+    };
   }, [data]);
   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'),

package/EventCalendarTimeline/index.css

@@ -235,7 +235,7 @@
   } 
   */
   /* cell */
-  /* header */
+  /* The width of the left column header */
   /* event container */
   /* days container */
   /* remove empty cells */
@@ -466,10 +466,21 @@
   background-color: var(--custom-event-tl-table-divider-bg);
   border-left: var(--custom-event-tl-table-divider-border);
   border-right: var(--custom-event-tl-table-divider-border);
+  position: relative;
 }
 .custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider > div {
   width: var(--custom-event-tl-table-divider-w);
 }
+.custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider--resizable {
+  cursor: col-resize;
+  user-select: none;
+}
+.custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider--resizable:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__timeline-divider--resizable:active {
+  background-color: rgba(0, 0, 0, 0.1);
+}
 .custom-event-tl-table__timeline-table__wrapper .custom-event-tl-table__cell-cushion {
   padding: var(--custom-event-tl-table-cell-padding);
 }

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;
@@ -60,6 +60,7 @@ export declare type EventCalendarTimelineProps = {
     onChangeWeek?: (startDate: string, endDate: string) => void;
     onListRenderComplete?: () => void;
     onChangeAppearanceMode?: (mode: string) => void;
+    enableHeaderResize?: boolean;
     modalMaskOpacity?: string;
     modalMaxWidth?: number | string;
     modalMinHeight?: number | string;

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,
@@ -3986,6 +3986,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     onChangeWeek = props.onChangeWeek,
     onListRenderComplete = props.onListRenderComplete,
     onChangeAppearanceMode = props.onChangeAppearanceMode,
+    enableHeaderResize = props.enableHeaderResize,
     modalMaskOpacity = props.modalMaskOpacity,
     modalMaxWidth = props.modalMaxWidth,
     modalMinHeight = props.modalMinHeight,
@@ -4115,14 +4116,20 @@ 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 ENABLE_HEADER_RESIZE = enableHeaderResize || false;
   var tableGridRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var tableGridHeaderRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var scrollHeaderRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var scrollBodyRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
   var scrollListRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
 
+  // header resize drag
+  var isResizingRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+  var resizeStartXRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);
+  var resizeStartWidthRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);
+
   // Temporary date
   var _useState27 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''),
     _useState28 = _slicedToArray(_useState27, 2),
@@ -4161,13 +4168,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 +5083,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 +5554,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;
@@ -5775,10 +5790,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     }
   }
 
-  // ================================================================
-  // 
-  // ================================================================
-  //if user change the selectedYear, then udate the years array that is displayed on year tab view
+  // if user change the selectedYear, then udate the years array that is displayed on year tab view
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
     var years = [];
     for (var y = selectedYear - 10; y < selectedYear + 10; y++) {
@@ -5832,6 +5844,83 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
       setCopiedCells(null);
     };
   }, []);
+
+  // ================================================================
+  // Handle header resize drag
+  // ================================================================
+  var handleHeaderResizeMove = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    var _e$touches$;
+    if (!isResizingRef.current || !tableGridRef.current) return;
+    var tableGridEl = tableGridRef.current;
+    // Find the header title element that should have the CSS variable
+    var headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle');
+    if (!headerTitleEl) return;
+
+    // Get clientX from either MouseEvent or TouchEvent
+    var clientX = 'touches' in e ? (_e$touches$ = e.touches[0]) === null || _e$touches$ === void 0 ? void 0 : _e$touches$.clientX : e.clientX;
+    if (clientX === undefined) return;
+    var deltaX = clientX - resizeStartXRef.current;
+    var newWidth = Math.max(100, resizeStartWidthRef.current + deltaX); // Minimum width 100px
+
+    // Update CSS variable on the header title element
+    headerTitleEl.style.setProperty('--custom-event-tl-table-header-w', "".concat(newWidth, "px"));
+  }, []);
+  var handleHeaderResizeEnd = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function () {
+    if (!isResizingRef.current) return;
+    isResizingRef.current = false;
+    document.removeEventListener('mousemove', handleHeaderResizeMove);
+    document.removeEventListener('mouseup', handleHeaderResizeEnd);
+    document.removeEventListener('touchmove', handleHeaderResizeMove);
+    document.removeEventListener('touchend', handleHeaderResizeEnd);
+
+    // Recalculate table grid after resize
+    if (tableGridRef.current) {
+      tableGridInit();
+    }
+  }, [handleHeaderResizeMove]);
+  var handleHeaderResizeStart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!ENABLE_HEADER_RESIZE || !tableGridRef.current) return;
+    e.preventDefault();
+    e.stopPropagation();
+    isResizingRef.current = true;
+    resizeStartXRef.current = e.clientX;
+    var tableGridEl = tableGridRef.current;
+    var headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle');
+    if (headerTitleEl) {
+      resizeStartWidthRef.current = headerTitleEl.clientWidth;
+    }
+    document.addEventListener('mousemove', handleHeaderResizeMove);
+    document.addEventListener('mouseup', handleHeaderResizeEnd);
+  }, [ENABLE_HEADER_RESIZE, handleHeaderResizeMove, handleHeaderResizeEnd]);
+  var handleHeaderResizeTouchStart = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(function (e) {
+    if (!ENABLE_HEADER_RESIZE || !tableGridRef.current) return;
+    e.preventDefault();
+    e.stopPropagation();
+    isResizingRef.current = true;
+    var touch = e.touches[0];
+    if (touch) {
+      resizeStartXRef.current = touch.clientX;
+    }
+    var tableGridEl = tableGridRef.current;
+    var headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle');
+    if (headerTitleEl) {
+      resizeStartWidthRef.current = headerTitleEl.clientWidth;
+    }
+    document.addEventListener('touchmove', handleHeaderResizeMove, {
+      passive: false
+    });
+    document.addEventListener('touchend', handleHeaderResizeEnd);
+  }, [ENABLE_HEADER_RESIZE, handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+  // Cleanup on unmount
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    return function () {
+      document.removeEventListener('mousemove', handleHeaderResizeMove);
+      document.removeEventListener('mouseup', handleHeaderResizeEnd);
+      document.removeEventListener('touchmove', handleHeaderResizeMove);
+      document.removeEventListener('touchend', handleHeaderResizeEnd);
+    };
+  }, [handleHeaderResizeMove, handleHeaderResizeEnd]);
   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_7__.combinedCls)("custom-event-tl__wrapper custom-event-tl__wrapper--".concat(appearanceMode), calendarWrapperClassName)
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -5977,7 +6066,13 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     className: "custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle"
   }, tableListSectionTitle || ''))))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", {
     role: "presentation",
-    className: "custom-event-tl-table__timeline-divider"
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)('custom-event-tl-table__timeline-divider', ENABLE_HEADER_RESIZE ? 'custom-event-tl-table__timeline-divider--resizable' : ''),
+    onMouseDown: ENABLE_HEADER_RESIZE ? handleHeaderResizeStart : undefined,
+    onTouchStart: ENABLE_HEADER_RESIZE ? handleHeaderResizeTouchStart : undefined,
+    style: ENABLE_HEADER_RESIZE ? {
+      cursor: 'col-resize',
+      userSelect: 'none'
+    } : undefined
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("th", {
     role: "presentation"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -6016,7 +6111,13 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     role: "presentation"
   }, generateListSectionUi()))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {
     role: "presentation",
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)('custom-event-tl-table__timeline-divider', tableListDividerClassName)
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)('custom-event-tl-table__timeline-divider', tableListDividerClassName, ENABLE_HEADER_RESIZE ? 'custom-event-tl-table__timeline-divider--resizable' : ''),
+    onMouseDown: ENABLE_HEADER_RESIZE ? handleHeaderResizeStart : undefined,
+    onTouchStart: ENABLE_HEADER_RESIZE ? handleHeaderResizeTouchStart : undefined,
+    style: ENABLE_HEADER_RESIZE ? {
+      cursor: 'col-resize',
+      userSelect: 'none'
+    } : undefined
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null)), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("td", {
     role: "presentation",
     className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)(tableListEndClassName)

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[];