funda-ui 4.7.701 → 4.7.723

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

@@ -1,3 +1,44 @@
+/**
+ * SSE
+ *
+ * @usage:
+ *
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    return (
+    <div>
+        <p>Status: {connected ? '✅ Connected' : '❌ Disconnected'}</p>
+        <button onClick={disconnect}>Disconnect</button>
+        <button onClick={reconnect}>Reconnect</button>
+        {messages.map((m, i) => <div key={i}>{m}</div>)}
+    </div>
+    );
+};
+
+ * It is recommended to use it in conjunction with usePageVisibility, because in HTTP mode,
+ * browsers allow a maximum of 6 connections; otherwise, other normal interfaces will be suspended and inaccessible.
+
+ import usePageVisibility from 'funda-ui/Utils/usePageVisibility';
+
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    // add new
+    usePageVisibility(
+        () => {
+            reconnect();
+        },
+        () => {
+            disconnect();
+        },
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return '';
+};
+
+ */
 declare const useSSE: (url: string | null | undefined, retryDelay?: number) => {
     readonly connected: boolean;
     readonly messages: string[];

package/lib/cjs/Utils/useSSE.js

@@ -108,20 +108,44 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * 
  * @usage:
  *
- * const App = () => {
- *     const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
- *
- *     return (
- *     <div>
- *         <p>Status: {connected ? '✅ Connected' : '❌ Disconnected'}</p>
- *         <button onClick={disconnect}>Disconnect</button>
- *         <button onClick={reconnect}>Reconnect</button>
- *         {messages.map((m, i) => <div key={i}>{m}</div>)}
- *     </div>
- *     );
- * };
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    return (
+    <div>
+        <p>Status: {connected ? '✅ Connected' : '❌ Disconnected'}</p>
+        <button onClick={disconnect}>Disconnect</button>
+        <button onClick={reconnect}>Reconnect</button>
+        {messages.map((m, i) => <div key={i}>{m}</div>)}
+    </div>
+    );
+};
+
+ * It is recommended to use it in conjunction with usePageVisibility, because in HTTP mode, 
+ * browsers allow a maximum of 6 connections; otherwise, other normal interfaces will be suspended and inaccessible.
+
+ import usePageVisibility from 'funda-ui/Utils/usePageVisibility';
+
+const App = () => {
+    const { connected, messages, disconnect, reconnect } = useSSE('http://localhost:3000/sse');
+
+    // add new
+    usePageVisibility(
+        () => {
+            reconnect();
+        },
+        () => {
+            disconnect();
+        },
+        () => console.log("🎬 Page initialized while visible.")
+    );
+
+    return '';
+};
+
  */
 
+
 var useSSE = function useSSE(url) {
   var retryDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3000;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),

package/lib/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

@@ -71,7 +71,7 @@ export type EventCalendarTimelineProps = {
     cellAddBtnLabel?: string | React.ReactNode;
     forwardAndBackFillDisabled?: boolean;
     draggable?: boolean;
-    showWeek?: boolean;
+    headerShowWeek?: boolean;
     autoScroll?: boolean;
     onChangeDate?: (e: any, currentData: any) => void;
     onChangeMonth?: (currentData: any) => void;
@@ -80,7 +80,7 @@ export type EventCalendarTimelineProps = {
     onChangeWeek?: (startDate: string, endDate: string) => void;
     onListRenderComplete?: () => void;
     onChangeAppearanceMode?: (mode: string) => void;
-
+    enableHeaderResize?: boolean; 
 
 
     // modal dialog
@@ -161,7 +161,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         cellAddBtnLabel,
         forwardAndBackFillDisabled,
         draggable,
-        showWeek,
+        headerShowWeek,
         autoScroll,
         onChangeDate,
         onChangeMonth,
@@ -170,6 +170,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         onChangeWeek,
         onListRenderComplete,
         onChangeAppearanceMode,
+        enableHeaderResize,
 
         //
         modalMaskOpacity,
@@ -272,13 +273,19 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     // table grid
     const AUTO_SCROLL = autoScroll || false;
-    const SHOW_WEEK = showWeek || false;
+    const HEADER_SHOW_WEEK = headerShowWeek || false;
     const BODY_DRAG = draggable || false;
+    const 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>('');
@@ -303,13 +310,13 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     // Calculate CELL_MIN_W based on appearanceMode and tableCellMinWidth
     const CELL_MIN_W = useMemo(() => {
         if (typeof tableCellMinWidth === 'undefined') {
-            return appearanceMode === 'week' ? 100 : 50;
+            return (headerShowWeek || false) ? 100 : 50;
         }
         if (typeof tableCellMinWidth === 'function') {
             return tableCellMinWidth(appearanceMode as 'week' | 'month');
         }
         return tableCellMinWidth;
-    }, [tableCellMinWidth, appearanceMode]);
+    }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
 
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));
@@ -1255,7 +1262,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
                 // week day
                 const weekDay = item.week[i];
-                const _weekDayStr = SHOW_WEEK ? <span dangerouslySetInnerHTML={{
+                const _weekDayStr = HEADER_SHOW_WEEK ? <span dangerouslySetInnerHTML={{
                     __html: item.weekDisplay[i]
                 }} /> : null;
 
@@ -1355,7 +1362,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                         'disabled': !isInteractive
                                     }
                                 )}
-                                style={{ width: (CELL_MIN_W - 1) + 'px' }}
+                                style={{ width: (CELL_MIN_W as number - 1) + 'px' }}
                             >
                                 
                                 {d}
@@ -1633,7 +1640,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                         'disabled': !isInteractive
                                     }
                                 )}
-                                style={{ width: (CELL_MIN_W - 1) + 'px' }}
+                                style={{ width: (CELL_MIN_W as number - 1) + 'px' }}
                             >
 
                                 {/*++++++++++++++++ EVENT ++++++++++++++++*/}
@@ -1865,18 +1872,26 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         const tableGridEl: any = tableGridRef.current;
 
         // initialize cell height
-        const headerTitleTrElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody').getElementsByTagName('tr');
-        const trElements = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody').getElementsByTagName('tr');
+        const headerTitleTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__title tbody');
+        const contentTbody = tableGridEl.querySelector('.custom-event-tl-table__datagrid-body__content tbody');
+        if (!headerTitleTbody || !contentTbody) return;
+
+        const headerTitleTrElements = headerTitleTbody.getElementsByTagName('tr');
+        const trElements = contentTbody.getElementsByTagName('tr');
 
+        // Reset any previously set inline heights so we measure natural heights.
         for (let i = 0; i < headerTitleTrElements.length; i++) {
+            // set to 'auto' (or remove inline style) to allow shrink
+            headerTitleTrElements[i].style.height = 'auto';
+            if (trElements[i]) trElements[i].style.height = 'auto';
 
             const targetElement = headerTitleTrElements[i].offsetHeight > trElements[i].offsetHeight ? headerTitleTrElements[i] : trElements[i];
             const tdOHeight = window.getComputedStyle(targetElement).height;
             headerTitleTrElements[i].style.height = tdOHeight;
             trElements[i].style.height = tdOHeight;
-
         }
 
+
     }
    
     function tableGridInit() {
@@ -1886,7 +1901,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
         const { forwardFillTotal, list: cellsList } = getCells();
         const tableGridEl: any = tableGridRef.current;
-        let _curCellMinWidth: number = CELL_MIN_W;
+        let _curCellMinWidth: number = CELL_MIN_W as number;
         let _curColCount: number = FILL_BLANK_DATE_DISABLD ? days[month] : 7 * cellsList.length;
 
 
@@ -2114,7 +2129,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
-
     function tableGridReset() {
         if (tableGridRef.current === null) return;
 
@@ -2146,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++) {
@@ -2203,6 +2211,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // Call a function when the list has been rendered completely
         onListRenderComplete?.();
 
+
     }, [eventsValue, customTodayDate, appearanceMode]);
 
 
@@ -2222,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 (
         <>
 
@@ -2409,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>
@@ -2423,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}
@@ -2499,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,8 +13,6 @@ import {
 } from 'funda-utils/dist/cjs/bodyScrollLock';
 
 
-
-
 declare global {
     interface Window {
         curVideo?: any;