funda-ui 4.7.711 → 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

@@ -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

@@ -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,
@@ -4117,12 +4118,18 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   var AUTO_SCROLL = autoScroll || 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),
@@ -5783,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++) {
@@ -5840,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", {
@@ -5985,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", {
@@ -6024,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/lib/cjs/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/lib/cjs/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/lib/cjs/EventCalendarTimeline/index.d.ts

@@ -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/lib/cjs/EventCalendarTimeline/index.js

@@ -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,
@@ -4117,12 +4118,18 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   var AUTO_SCROLL = autoScroll || 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),
@@ -5783,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++) {
@@ -5840,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", {
@@ -5985,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", {
@@ -6024,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/lib/css/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/lib/esm/DynamicFields/index.tsx

@@ -20,6 +20,7 @@ export type DynamicFieldsProps = {
     label?: React.ReactNode | string;
     data: DynamicFieldsValueProps | null;
     maxFields?: any;
+    defaultRows?: number;
     confirmText?: string;
     doNotRemoveDom?: boolean;
     iconAddBefore?: React.ReactNode | string;
@@ -55,6 +56,7 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         label,
         data,
         maxFields,
+        defaultRows,
         iconAddBefore,
         iconAddAfter,
         iconAdd,
@@ -96,6 +98,10 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     const [tmpl, setTmpl] = useState<React.ReactNode>([]);
     const addBtnIdRef = useRef<string>('');
     addBtnIdRef.current = `dynamic-fields-add-${idRes}`;
+    const defaultRowsInitializedRef = useRef<boolean>(false);
+    const isInitializingDefaultRowsRef = useRef<boolean>(false);
+    const rafIdRef = useRef<number | null>(null);
+    const timeoutIdsRef = useRef<ReturnType<typeof setTimeout>[]>([]);
 
     // exposes the following methods
     useImperativeHandle(
@@ -169,17 +175,12 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         }
     }
 
-
-    function handleClickAdd(event: any = null) {
-        if (event !== null) {
-            if (typeof event !== 'undefined') event.preventDefault();
-        }
-        
+    function addRowWithTemplate(template: React.ReactNode) {
         //button status
         checkMaxStatus();
 
         //
-        setVal((prevState: any[]) => [...prevState, ...generateGroup(tmpl)]);
+        setVal((prevState: any[]) => [...prevState, ...generateGroup(template)]);
 
 
         //
@@ -209,6 +210,14 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         }, 0);
     }
 
+    function handleClickAdd(event: any = null) {
+        if (event !== null) {
+            if (typeof event !== 'undefined') event.preventDefault();
+        }
+        
+        addRowWithTemplate(tmpl);
+    }
+
 
     function handleClickRemove(e: React.MouseEvent) {
         if (e !== null && typeof e !== 'undefined') e.preventDefault();
@@ -331,6 +340,96 @@ const DynamicFields = (props: DynamicFieldsProps) => {
 
         //
         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
+            const initDataLength = Array.isArray(data.init) ? data.init.length : 0;
+            
+            // Calculate how many rows need to be added
+            const maxRows = typeof maxFields !== 'undefined' ? parseFloat(maxFields) : Infinity;
+            const targetRows = Math.min(defaultRows, maxRows);
+            const 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(id => clearTimeout(id));
+                timeoutIdsRef.current = [];
+                
+                // Use requestAnimationFrame to ensure DOM is ready and state is updated
+                rafIdRef.current = requestAnimationFrame(() => {
+                    // Check if component is still mounted
+                    if (!rootRef.current) {
+                        isInitializingDefaultRowsRef.current = false;
+                        return;
+                    }
+                    
+                    const timeoutId1 = setTimeout(() => {
+                        // 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
+                        let addedCount = 0;
+                        const 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) {
+                                    const 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 () => {
+            // 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(id => clearTimeout(id));
+            timeoutIdsRef.current = [];
+        };
     }, [data]);
 
 
@@ -406,4 +505,4 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     )
 };
 
-export default DynamicFields;
+export default DynamicFields;

package/lib/esm/EventCalendarTimeline/index.scss

@@ -470,7 +470,7 @@
         word-break: break-word;
     }
 
-    /* header */
+    /* The width of the left column header */
     .custom-event-tl-table__cell-cushion-headertitle {
         width: var(--custom-event-tl-table-header-w);
     }
@@ -614,10 +614,24 @@
         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;
 
         > div {
             width: var(--custom-event-tl-table-divider-w);
         }
+        
+        &--resizable {
+            cursor: col-resize;
+            user-select: none;
+            
+            &:hover {
+                background-color: rgba(0, 0, 0, 0.05);
+            }
+            
+            &:active {
+                background-color: rgba(0, 0, 0, 0.1);
+            }
+        }
     }
 
     /* cell */

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -14,6 +14,7 @@ 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,
@@ -79,7 +80,7 @@ export type EventCalendarTimelineProps = {
     onChangeWeek?: (startDate: string, endDate: string) => void;
     onListRenderComplete?: () => void;
     onChangeAppearanceMode?: (mode: string) => void;
-
+    enableHeaderResize?: boolean; 
 
 
     // modal dialog
@@ -169,6 +170,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         onChangeWeek,
         onListRenderComplete,
         onChangeAppearanceMode,
+        enableHeaderResize,
 
         //
         modalMaskOpacity,
@@ -273,11 +275,17 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const AUTO_SCROLL = autoScroll || false;
     const HEADER_SHOW_WEEK = headerShowWeek || false;
     const BODY_DRAG = draggable || false;
+    const ENABLE_HEADER_RESIZE = enableHeaderResize || false;
     const tableGridRef = useRef<any>(null);
     const tableGridHeaderRef = useRef<any>(null);
     const scrollHeaderRef = useRef(null);
     const scrollBodyRef = useRef(null);
     const scrollListRef = useRef(null);
+    
+    // header resize drag
+    const isResizingRef = useRef<boolean>(false);
+    const resizeStartXRef = useRef<number>(0);
+    const resizeStartWidthRef = useRef<number>(0);
 
     // Temporary date
     const [tempDate, setTempDate] = useState<string>('');
@@ -2121,7 +2129,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
-
     function tableGridReset() {
         if (tableGridRef.current === null) return;
 
@@ -2153,13 +2160,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
-
-
-
-    // ================================================================
-    // 
-    // ================================================================
-    //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
     useEffect(() => {
         const years: number[] = [];
         for (let y = selectedYear - 10; y < selectedYear + 10; y++) {
@@ -2230,6 +2231,102 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         }
 
     }, []);
+
+    
+    // ================================================================
+    // Handle header resize drag
+    // ================================================================
+    const handleHeaderResizeMove = useCallback((e: MouseEvent | TouchEvent) => {
+        if (!isResizingRef.current || !tableGridRef.current) return;
+        
+        const tableGridEl: any = tableGridRef.current;
+        // Find the header title element that should have the CSS variable
+        const headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle') as HTMLElement;
+        if (!headerTitleEl) return;
+        
+        // Get clientX from either MouseEvent or TouchEvent
+        const clientX = 'touches' in e ? e.touches[0]?.clientX : e.clientX;
+        if (clientX === undefined) return;
+        
+        const deltaX = clientX - resizeStartXRef.current;
+        const 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', `${newWidth}px`);
+    }, []);
+
+    const handleHeaderResizeEnd = useCallback(() => {
+        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]);
+
+    const handleHeaderResizeStart = useCallback((e: React.MouseEvent) => {
+        if (!ENABLE_HEADER_RESIZE || !tableGridRef.current) return;
+        
+        e.preventDefault();
+        e.stopPropagation();
+        
+        isResizingRef.current = true;
+        resizeStartXRef.current = e.clientX;
+        
+        const tableGridEl: any = tableGridRef.current;
+        const headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle') as HTMLElement;
+        if (headerTitleEl) {
+            resizeStartWidthRef.current = headerTitleEl.clientWidth;
+        }
+        
+        document.addEventListener('mousemove', handleHeaderResizeMove);
+        document.addEventListener('mouseup', handleHeaderResizeEnd);
+    }, [ENABLE_HEADER_RESIZE, handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+    const handleHeaderResizeTouchStart = useCallback((e: React.TouchEvent) => {
+        if (!ENABLE_HEADER_RESIZE || !tableGridRef.current) return;
+        
+        e.preventDefault();
+        e.stopPropagation();
+        
+        isResizingRef.current = true;
+        const touch = e.touches[0];
+        if (touch) {
+            resizeStartXRef.current = touch.clientX;
+        }
+        
+        const tableGridEl: any = tableGridRef.current;
+        const headerTitleEl = tableGridEl.querySelector('.custom-event-tl-table__cell-cushion-headertitle') as HTMLElement;
+        if (headerTitleEl) {
+            resizeStartWidthRef.current = headerTitleEl.clientWidth;
+        }
+        
+        document.addEventListener('touchmove', handleHeaderResizeMove, { passive: false });
+        document.addEventListener('touchend', handleHeaderResizeEnd);
+    }, [ENABLE_HEADER_RESIZE, handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+
+    
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            document.removeEventListener('mousemove', handleHeaderResizeMove);
+            document.removeEventListener('mouseup', handleHeaderResizeEnd);
+            document.removeEventListener('touchmove', handleHeaderResizeMove);
+            document.removeEventListener('touchend', handleHeaderResizeEnd);
+        };
+    }, [handleHeaderResizeMove, handleHeaderResizeEnd]);
+
+
+
+
+  
     return (
         <>
 
@@ -2417,6 +2514,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                             <thead role="presentation">
                                                 <tr role="row">
                                                     <th role="columnheader">
+                                                        {/**
+                                                         * The width of the left column header is set using ".custom-event-tl-table__cell-cushion-headertitle".
+                                                         */}
                                                         <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
                                                             {tableListSectionTitle || ''}
                                                         </div>
@@ -2431,7 +2531,18 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
                                 </th>
-                                <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
+                                <th 
+                                    role="presentation" 
+                                    className={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}
+                                >
+                                    <div></div>
+                                </th>
                                 <th role="presentation">
                                     <div
                                         ref={scrollHeaderRef}
@@ -2507,12 +2618,20 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
                                 </td>
+
+                                {/**
+                                 * The dividing line between the left title column and the right content
+                                 */}
                                 <td
                                     role="presentation"
                                     className={combinedCls(
                                         'custom-event-tl-table__timeline-divider',
-                                        tableListDividerClassName
+                                        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}
                                 >
                                     <div></div>
                                 </td>

package/lib/esm/ModalDialog/index.tsx

@@ -13,7 +13,6 @@ import {
 } from 'funda-utils/dist/cjs/bodyScrollLock';
 
 
-
 declare global {
     interface Window {
         curVideo?: any;

package/package.json

@@ -1 +1 @@
-{"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"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.723","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"}}