funda-ui 4.7.711 → 4.7.730

package/DragDropList/index.d.ts

@@ -9,6 +9,7 @@ export interface ListItem {
     depth?: number;
     children?: ListItem[];
     disabled?: boolean;
+    itemDraggable?: boolean;
     appendControl?: React.ReactNode;
     [key: string]: any;
 }

package/DragDropList/index.js

@@ -895,6 +895,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             dragHandleSelector = _options$dragHandleSe === void 0 ? '.custom-draggable-list__handle' : _options$dragHandleSe,
             onDragStart = options.onDragStart,
             onDragOver = options.onDragOver,
+            onDragUpdate = options.onDragUpdate,
             onDragEnd = options.onDragEnd;
           var _useState = (0, react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
             _useState2 = _slicedToArray(_useState, 2),
@@ -903,11 +904,35 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           var dragItem = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
           var dragOverItem = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
           var dragNode = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+          var draggedElement = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+          var boundaryElement = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
           var touchOffset = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)({
             x: 0,
             y: 0
           });
           var currentHoverItem = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+          var rafId = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+          var lastUpdateDragIndex = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+          var lastUpdateDropIndex = (0, react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
+
+          /**
+           * Performance Note:
+           *
+           * Drag-over events can fire at a very high frequency, especially on touch devices
+           * or when dragging quickly. Directly performing DOM read/write operations in the
+           * event handler (e.g. `getBoundingClientRect`, `classList` changes, style updates)
+           * can easily cause layout thrashing and frame drops when there are many items.
+           *
+           * To mitigate this, we:
+           * - Collect the pointer coordinates synchronously in the event handler.
+           * - Schedule all DOM-intensive work inside `requestAnimationFrame`, so the browser
+           *   batches these operations before the next paint.
+           * - Cancel any pending frame (`cancelAnimationFrame`) before scheduling a new one,
+           *   ensuring there is at most one pending DOM update per frame.
+           *
+           * This keeps drag interactions smooth even with large lists.
+           */
+
           var handleDragStart = function handleDragStart(e, position) {
             var isTouch = ('touches' in e);
             var target = e.target;
@@ -960,69 +985,127 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
                 opacity: '0.9'
               });
               document.body.appendChild(dragNode.current);
+
+              // Keep track of the original element (acts as a placeholder inside the list)
+              draggedElement.current = listItem;
+              boundaryElement.current = boundary;
               setIsDragging(true);
               listItem.classList.add('dragging-placeholder');
             } else {
-              // ... desktop drag logic remains the same ...
+              // Desktop: use native drag image, but still record dragged element / boundary
+              draggedElement.current = listItem;
+              boundaryElement.current = boundary;
+              setIsDragging(true);
+              var dragEvent = e;
+              if (dragEvent.dataTransfer) {
+                dragEvent.dataTransfer.effectAllowed = 'move';
+                // Optional: customize drag preview if needed
+                dragEvent.dataTransfer.setData('text/plain', '');
+              }
+              listItem.classList.add('dragging-placeholder');
             }
           };
           var handleDragOver = function handleDragOver(e) {
+            // Always prevent default synchronously
             e.preventDefault();
             var isTouch = ('touches' in e);
             if (!isTouch) {
               e.dataTransfer.dropEffect = 'move';
             }
 
-            // Get the current pointer/touch position
-            var point = isTouch ? e.touches[0] : {
-              clientX: e.clientX,
-              clientY: e.clientY
-            };
+            // Extract primitive coordinates synchronously to avoid using pooled events in async callbacks
+            var clientX;
+            var clientY;
+            if (isTouch) {
+              var touch = e.touches[0];
+              clientX = touch.clientX;
+              clientY = touch.clientY;
+            } else {
+              clientX = e.clientX;
+              clientY = e.clientY;
+            }
 
-            // Update dragged element position for touch events
-            if (isTouch && isDragging && dragNode.current) {
-              dragNode.current.style.left = "".concat(point.clientX - touchOffset.current.x, "px");
-              dragNode.current.style.top = "".concat(point.clientY - touchOffset.current.y, "px");
+            // Cancel any pending frame to avoid stacking DOM operations
+            if (rafId.current !== null) {
+              cancelAnimationFrame(rafId.current);
             }
+            rafId.current = requestAnimationFrame(function () {
+              // Update dragged element position for touch events
+              if (isTouch && isDragging && dragNode.current) {
+                dragNode.current.style.left = "".concat(clientX - touchOffset.current.x, "px");
+                dragNode.current.style.top = "".concat(clientY - touchOffset.current.y, "px");
+              }
 
-            // Find the element below the pointer/touch
-            var elemBelow = document.elementFromPoint(point.clientX, point.clientY);
-            if (!elemBelow) return;
+              // Find the element below the pointer/touch
+              var elemBelow = document.elementFromPoint(clientX, clientY);
+              if (!elemBelow) return;
 
-            // Find the closest list item
-            var listItem = elemBelow.closest(itemSelector);
-            if (!listItem || listItem === currentHoverItem.current) return;
+              // Find the closest list item
+              var listItem = elemBelow.closest(itemSelector);
+              if (!listItem) return;
 
-            // Check boundary
-            var boundary = listItem.closest(boundarySelector);
-            if (!boundary) return;
+              // Check boundary
+              var boundary = boundaryElement.current || listItem.closest(boundarySelector);
+              if (!boundary) return;
 
-            // Update hover states
-            if (currentHoverItem.current) {
-              currentHoverItem.current.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
-            }
-            currentHoverItem.current = listItem;
-            listItem.classList.add('drag-over');
-
-            // Calculate position in list
-            var position = Array.from(listItem.parentNode.children).indexOf(listItem);
-            dragOverItem.current = position;
-
-            // Determine drop position (top/bottom)
-            var rect = listItem.getBoundingClientRect();
-            var middleY = rect.top + rect.height / 2;
-            if (point.clientY < middleY) {
-              listItem.classList.add('drag-over-top');
-            } else {
-              listItem.classList.add('drag-over-bottom');
-            }
-            onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(dragItem.current, dragOverItem.current);
+              // Update hover states
+              if (currentHoverItem.current && currentHoverItem.current !== listItem) {
+                currentHoverItem.current.classList.remove('drag-over', 'drag-over-top', 'drag-over-bottom');
+              }
+              currentHoverItem.current = listItem;
+              listItem.classList.add('drag-over');
+              var dragEl = draggedElement.current;
+              if (!dragEl || !dragEl.parentNode) return;
+              var container = boundary;
+
+              // Collect current ordered items in the container
+              var children = Array.from(container.querySelectorAll(itemSelector));
+              var currentIndex = children.indexOf(dragEl);
+              var targetIndex = children.indexOf(listItem);
+              if (currentIndex === -1 || targetIndex === -1) return;
+
+              // Determine drop position (top/bottom)
+              var rect = listItem.getBoundingClientRect();
+              var middleY = rect.top + rect.height / 2;
+              listItem.classList.remove('drag-over-top', 'drag-over-bottom');
+              var insertBefore = clientY < middleY ? listItem : listItem.nextElementSibling;
+              if (clientY < middleY) {
+                listItem.classList.add('drag-over-top');
+              } else {
+                listItem.classList.add('drag-over-bottom');
+              }
+
+              // Only move in DOM when the effective position changes
+              if (insertBefore !== dragEl && container.contains(dragEl)) {
+                container.insertBefore(dragEl, insertBefore);
+              }
+
+              // Recompute index after DOM move
+              var reorderedChildren = Array.from(container.querySelectorAll(itemSelector));
+              var newIndex = reorderedChildren.indexOf(dragEl);
+              dragOverItem.current = newIndex;
+              onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(dragItem.current, dragOverItem.current);
+
+              // Only fire onDragUpdate when the (dragIndex, dropIndex) pair actually changes.
+              if (onDragUpdate && (dragItem.current !== lastUpdateDragIndex.current || dragOverItem.current !== lastUpdateDropIndex.current)) {
+                lastUpdateDragIndex.current = dragItem.current;
+                lastUpdateDropIndex.current = dragOverItem.current;
+                onDragUpdate(dragItem.current, dragOverItem.current);
+              }
+              rafId.current = null;
+            });
           };
           var handleDragEnd = function handleDragEnd(e) {
             var isTouch = ('touches' in e);
             if (isTouch && !isDragging) return;
             onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(dragItem.current, dragOverItem.current);
 
+            // Cancel any pending animation frame
+            if (rafId.current !== null) {
+              cancelAnimationFrame(rafId.current);
+              rafId.current = null;
+            }
+
             // Cleanup
             if (dragNode.current) {
               dragNode.current.remove();
@@ -1036,6 +1119,8 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
             currentHoverItem.current = null;
             dragItem.current = null;
             dragOverItem.current = null;
+            draggedElement.current = null;
+            boundaryElement.current = null;
           };
           return {
             isDragging: isDragging,
@@ -1366,6 +1451,9 @@ var DragDropList = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
       onDragOver: function onDragOver(dragIndex, dropIndex) {
         // Additional drag over logic if needed
       },
+      onDragUpdate: function onDragUpdate(dragIndex, dropIndex) {
+        // console.log(dragIndex, dropIndex);
+      },
       onDragEnd: function onDragEnd(dragIndex, dropIndex) {
         if (dragIndex !== null && dropIndex !== null && dragIndex !== dropIndex) {
           var _newItems$dragIndex, _newItems$dragIndex2, _newItems$dropIndex;
@@ -1398,12 +1486,12 @@ var DragDropList = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
           });
 
           // Calculate new insert position
+          // Directly use dropIndex as the insertion position to avoid items snapping back
+          // when dragging an item from above to directly below its neighbor.
           var insertIndex = dropIndex;
-          if (dropIndex > dragIndex) {
-            insertIndex -= itemsToMove.length;
-          }
 
-          // Insert all items
+          // Insert all items (remove first, then insert at the target index;
+          // JavaScript's splice will handle index shifting automatically).
           newItems.splice.apply(newItems, [insertIndex, 0].concat(_toConsumableArray(itemsBeingMoved)));
 
           // Rebuild tree structure
@@ -1516,6 +1604,9 @@ var DragDropList = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
     // If the item should be hidden, the rendering is skipped
     if (!shouldShowItem(item)) return null;
 
+    // Item level draggable control, default true when not specified
+    var isItemDraggable = draggable && item.itemDraggable !== false;
+
     // collapse
     var hasChildItems = hasChildren(item.id);
     var isCollapsed = collapsedItems.has(item.id);
@@ -1529,30 +1620,30 @@ var DragDropList = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef
       "data-listitemlabel": item.listItemLabel,
       className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.combinedCls)("".concat(prefix, "-draggable-list__item"), (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_2__.clsWrite)(dragMode, 'handle'), {
         'disabled': item.disabled,
-        'draggable': draggable,
+        'draggable': isItemDraggable,
         'editing': editingItem === item.id,
         // collapse
         'has-children': hasChildItems,
         'collapsed': isCollapsed
       }),
-      draggable: !draggable ? undefined : editingItem !== item.id && "true",
-      onDragStart: !draggable ? undefined : function (e) {
+      draggable: !isItemDraggable ? undefined : editingItem !== item.id && "true",
+      onDragStart: !isItemDraggable ? undefined : function (e) {
         return dragHandlers.handleDragStart(e, index);
       },
-      onDragOver: !draggable ? undefined : dragHandlers.handleDragOver,
-      onDragEnd: !draggable ? undefined : dragHandlers.handleDragEnd,
-      onTouchStart: !draggable ? undefined : function (e) {
+      onDragOver: !isItemDraggable ? undefined : dragHandlers.handleDragOver,
+      onDragEnd: !isItemDraggable ? undefined : dragHandlers.handleDragEnd,
+      onTouchStart: !isItemDraggable ? undefined : function (e) {
         return dragHandlers.handleDragStart(e, index);
       },
-      onTouchMove: !draggable ? undefined : dragHandlers.handleDragOver,
-      onTouchEnd: !draggable ? undefined : dragHandlers.handleDragEnd,
+      onTouchMove: !isItemDraggable ? undefined : dragHandlers.handleDragOver,
+      onTouchEnd: !isItemDraggable ? undefined : dragHandlers.handleDragEnd,
       style: itemStyle,
       onDoubleClick: function onDoubleClick() {
         return handleDoubleClick(item);
       }
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "".concat(prefix, "-draggable-list__itemcontent")
-    }, renderOption ? renderOption(item, "".concat(prefix, "-draggable-list__handle"), index) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, draggable && !handleHide ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    }, renderOption ? renderOption(item, isItemDraggable ? "".concat(prefix, "-draggable-list__handle") : '', index) : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, isItemDraggable && !handleHide ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "".concat(prefix, "-draggable-list__handle ").concat(handlePos !== null && handlePos !== void 0 ? handlePos : 'left'),
       draggable: dragMode === 'handle',
       dangerouslySetInnerHTML: {

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;