funda-ui 4.7.735 → 4.7.743

package/EventCalendarTimeline/index.css

@@ -243,6 +243,9 @@
   /* cell */
   /* scroller */
 }
+.custom-event-tl-table__timeline-table__wrapper.invisible {
+  visibility: hidden;
+}
 .custom-event-tl-table__timeline-table__wrapper[tabindex]:focus-visible {
   outline: none;
 }

package/EventCalendarTimeline/index.js

@@ -4238,10 +4238,45 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   //================================================================
   // Weekly calendar
   //================================================================
+  var hasInitializedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+
+  // Helper function to calculate offset from a specific date
+  var calculateWeekOffset = function calculateWeekOffset(targetDate) {
+    var _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+    // 1. Get the current selected date (from customTodayDate or user selection)
+    var selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+
+    // 2. Get the reference Monday of the "actual current week" (offset 0)
+    var currentWeekDates = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.getWeekDatesFromMon)(0);
+    var currentMonday = new Date(currentWeekDates[0]);
+    currentMonday.setHours(0, 0, 0, 0);
+
+    // 3. Calculate the difference in days
+    var diffTime = selected.getTime() - currentMonday.getTime();
+    var diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+    // 4. Update the week offset automatically
+    var offset = Math.floor(diffDays / 7);
+    setWeekOffset(offset);
+  };
+  // Initialize weekOffset based on customTodayDate instead of default 0
   var _useState39 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
     _useState40 = _slicedToArray(_useState39, 2),
     weekOffset = _useState40[0],
     setWeekOffset = _useState40[1];
+
+  // Sync weekOffset whenever date changes or mode switches to 'week'
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!hasInitializedRef.current) {
+      var customDateValid = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.isValidDate)(customTodayDate);
+      if (customDateValid) {
+        calculateWeekOffset(new Date(customTodayDate));
+        setDate(new Date(customTodayDate));
+        hasInitializedRef.current = true;
+      }
+    }
+  }, [date, appearanceMode, customTodayDate]);
   var handleNextWeek = function handleNextWeek() {
     setWeekOffset(weekOffset + 1);
     return weekOffset + 1;
@@ -5071,7 +5106,8 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     var _mode = e.target.dataset.mode;
     setAppearanceMode(_mode);
 
-    //
+    // The useEffect above will handle the weekOffset calculation 
+    // as soon as appearanceMode becomes 'week'
     onChangeAppearanceMode === null || onChangeAppearanceMode === void 0 ? void 0 : onChangeAppearanceMode(_mode);
   }
   function handleShowWinYear() {
@@ -5161,8 +5197,11 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
               colSpan: 1,
               "data-date": _dateShow,
               "data-day": _dateDayShow,
-              "data-week": weekDay,
-              style: {
+              "data-week": weekDay
+
+              // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+              ,
+              style: appearanceMode === 'week' ? undefined : {
                 minWidth: CELL_MIN_W + 'px'
               },
               onMouseEnter: function onMouseEnter(e) {
@@ -5794,10 +5833,10 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
       //****************
       // display wrapper
       //--------------
-      tableGridEl.classList.remove('invisible');
+      setGridReady(true);
 
       //****************
-      // STEP 1-1: 
+      // STEP 7-1: 
       //****************
       // calculate min width (MODE: WEEK)
       //--------------
@@ -5852,6 +5891,49 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     }
   }
 
+  // Dual RAF survival test
+  /*
+      A single RAF only guarantees "moving to the next frame." 
+      Only dual RAFs can guarantee "DOM is mounted + layout is stable."
+  */
+  var _useState51 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState52 = _slicedToArray(_useState51, 2),
+    gridReady = _useState52[0],
+    setGridReady = _useState52[1];
+  var rafRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({});
+  function safeShowGrid() {
+    // 
+    setGridReady(false);
+    rafRef.current.r1 = requestAnimationFrame(function () {
+      rafRef.current.r2 = requestAnimationFrame(function () {
+        var el = tableGridRef.current;
+        if (!el) return;
+
+        // 
+        tableGridInit();
+
+        // Do only one thing: notify React that it’s ready to be displayed.
+        setGridReady(true);
+      });
+    });
+  }
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    safeShowGrid();
+    return function () {
+      if (rafRef.current.r1) {
+        cancelAnimationFrame(rafRef.current.r1);
+      }
+      if (rafRef.current.r2) {
+        cancelAnimationFrame(rafRef.current.r2);
+      }
+    };
+  }, [appearanceMode]);
+
+  // Make sure the left side is highly synchronized with the right side.
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    tableGridInitHeadertitle();
+  }, [orginalData, appearanceMode]);
+
   // 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 = [];
@@ -6104,7 +6186,9 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     onClick: handleAppearanceChange
   }, langAppearanceLabelWeek || 'Week')) : null)), orginalData.length === 0 ? null : /*#__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", {
     ref: tableGridRef,
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)("custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--".concat(appearanceMode, " invisible"), tableWrapperClassName),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)("custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--".concat(appearanceMode), tableWrapperClassName, {
+      'invisible': !gridReady
+    }),
     onKeyDown: function onKeyDown(e) {
       onKeyPressed === null || onKeyPressed === void 0 ? void 0 : onKeyPressed(e, selectedCells);
 

package/lib/cjs/EventCalendarTimeline/index.js

@@ -4238,10 +4238,45 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   //================================================================
   // Weekly calendar
   //================================================================
+  var hasInitializedRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(false);
+
+  // Helper function to calculate offset from a specific date
+  var calculateWeekOffset = function calculateWeekOffset(targetDate) {
+    var _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+    // 1. Get the current selected date (from customTodayDate or user selection)
+    var selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+
+    // 2. Get the reference Monday of the "actual current week" (offset 0)
+    var currentWeekDates = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.getWeekDatesFromMon)(0);
+    var currentMonday = new Date(currentWeekDates[0]);
+    currentMonday.setHours(0, 0, 0, 0);
+
+    // 3. Calculate the difference in days
+    var diffTime = selected.getTime() - currentMonday.getTime();
+    var diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+    // 4. Update the week offset automatically
+    var offset = Math.floor(diffDays / 7);
+    setWeekOffset(offset);
+  };
+  // Initialize weekOffset based on customTodayDate instead of default 0
   var _useState39 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0),
     _useState40 = _slicedToArray(_useState39, 2),
     weekOffset = _useState40[0],
     setWeekOffset = _useState40[1];
+
+  // Sync weekOffset whenever date changes or mode switches to 'week'
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    if (!hasInitializedRef.current) {
+      var customDateValid = (0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.isValidDate)(customTodayDate);
+      if (customDateValid) {
+        calculateWeekOffset(new Date(customTodayDate));
+        setDate(new Date(customTodayDate));
+        hasInitializedRef.current = true;
+      }
+    }
+  }, [date, appearanceMode, customTodayDate]);
   var handleNextWeek = function handleNextWeek() {
     setWeekOffset(weekOffset + 1);
     return weekOffset + 1;
@@ -5071,7 +5106,8 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     var _mode = e.target.dataset.mode;
     setAppearanceMode(_mode);
 
-    //
+    // The useEffect above will handle the weekOffset calculation 
+    // as soon as appearanceMode becomes 'week'
     onChangeAppearanceMode === null || onChangeAppearanceMode === void 0 ? void 0 : onChangeAppearanceMode(_mode);
   }
   function handleShowWinYear() {
@@ -5161,8 +5197,11 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
               colSpan: 1,
               "data-date": _dateShow,
               "data-day": _dateDayShow,
-              "data-week": weekDay,
-              style: {
+              "data-week": weekDay
+
+              // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+              ,
+              style: appearanceMode === 'week' ? undefined : {
                 minWidth: CELL_MIN_W + 'px'
               },
               onMouseEnter: function onMouseEnter(e) {
@@ -5794,10 +5833,10 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
       //****************
       // display wrapper
       //--------------
-      tableGridEl.classList.remove('invisible');
+      setGridReady(true);
 
       //****************
-      // STEP 1-1: 
+      // STEP 7-1: 
       //****************
       // calculate min width (MODE: WEEK)
       //--------------
@@ -5852,6 +5891,49 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     }
   }
 
+  // Dual RAF survival test
+  /*
+      A single RAF only guarantees "moving to the next frame." 
+      Only dual RAFs can guarantee "DOM is mounted + layout is stable."
+  */
+  var _useState51 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
+    _useState52 = _slicedToArray(_useState51, 2),
+    gridReady = _useState52[0],
+    setGridReady = _useState52[1];
+  var rafRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({});
+  function safeShowGrid() {
+    // 
+    setGridReady(false);
+    rafRef.current.r1 = requestAnimationFrame(function () {
+      rafRef.current.r2 = requestAnimationFrame(function () {
+        var el = tableGridRef.current;
+        if (!el) return;
+
+        // 
+        tableGridInit();
+
+        // Do only one thing: notify React that it’s ready to be displayed.
+        setGridReady(true);
+      });
+    });
+  }
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    safeShowGrid();
+    return function () {
+      if (rafRef.current.r1) {
+        cancelAnimationFrame(rafRef.current.r1);
+      }
+      if (rafRef.current.r2) {
+        cancelAnimationFrame(rafRef.current.r2);
+      }
+    };
+  }, [appearanceMode]);
+
+  // Make sure the left side is highly synchronized with the right side.
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
+    tableGridInitHeadertitle();
+  }, [orginalData, appearanceMode]);
+
   // 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 = [];
@@ -6104,7 +6186,9 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     onClick: handleAppearanceChange
   }, langAppearanceLabelWeek || 'Week')) : null)), orginalData.length === 0 ? null : /*#__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", {
     ref: tableGridRef,
-    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)("custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--".concat(appearanceMode, " invisible"), tableWrapperClassName),
+    className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)("custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--".concat(appearanceMode), tableWrapperClassName, {
+      'invisible': !gridReady
+    }),
     onKeyDown: function onKeyDown(e) {
       onKeyPressed === null || onKeyPressed === void 0 ? void 0 : onKeyPressed(e, selectedCells);
 

package/lib/css/EventCalendarTimeline/index.css

@@ -243,6 +243,9 @@
   /* cell */
   /* scroller */
 }
+.custom-event-tl-table__timeline-table__wrapper.invisible {
+  visibility: hidden;
+}
 .custom-event-tl-table__timeline-table__wrapper[tabindex]:focus-visible {
   outline: none;
 }

package/lib/esm/EventCalendarTimeline/index.scss

@@ -297,6 +297,9 @@
     position: relative;
     z-index: 2;
 
+    &.invisible {
+        visibility: hidden;
+    }
 
     /* Required when using onKeyDown */
     &[tabindex]:focus-visible {

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -14,7 +14,6 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 import getOs from 'funda-utils//dist/cjs/os';
 
 
-
 export interface EventsValueConfig {
     id: string | number;
     date: string,
@@ -252,6 +251,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const [month, setMonth] = useState<number>(date.getMonth());
     const [year, setYear] = useState<number>(date.getFullYear());
     const [startDay, setStartDay] = useState<number>(getStartDayOfMonth(date));
+    
 
 
     // selection tab
@@ -323,6 +323,8 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         return tableCellMinWidth;
     }, [tableCellMinWidth, appearanceMode, headerShowWeek]);
 
+    
+
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));
         // Find the first Monday in the sequence
@@ -388,7 +390,45 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     //================================================================
     // Weekly calendar
     //================================================================
+    const hasInitializedRef = useRef<boolean>(false);
+
+    // Helper function to calculate offset from a specific date
+    const calculateWeekOffset = (targetDate?: Date) => {
+        const _curDate = typeof targetDate === 'undefined' ? date : targetDate;
+
+        // 1. Get the current selected date (from customTodayDate or user selection)
+        const selected = new Date(_curDate.getFullYear(), _curDate.getMonth(), _curDate.getDate());
+        
+        // 2. Get the reference Monday of the "actual current week" (offset 0)
+        const currentWeekDates = getWeekDatesFromMon(0);
+        const currentMonday = new Date(currentWeekDates[0]);
+        currentMonday.setHours(0, 0, 0, 0);
+
+        // 3. Calculate the difference in days
+        const diffTime = selected.getTime() - currentMonday.getTime();
+        const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
+
+        // 4. Update the week offset automatically
+        const offset = Math.floor(diffDays / 7);
+        setWeekOffset(offset);
+    }
+    // Initialize weekOffset based on customTodayDate instead of default 0
     const [weekOffset, setWeekOffset] = useState<number>(0);
+
+    // Sync weekOffset whenever date changes or mode switches to 'week'
+    useEffect(() => {
+        if (!hasInitializedRef.current) {
+            const customDateValid = isValidDate(customTodayDate as never);
+            if (customDateValid) {
+                calculateWeekOffset(new Date(customTodayDate as string));
+                setDate(new Date(customTodayDate as string));
+                hasInitializedRef.current = true;
+            }
+        } 
+    }, [date, appearanceMode, customTodayDate]);
+
+
+
     const handleNextWeek = () => {
         setWeekOffset(weekOffset + 1);
         return weekOffset + 1;
@@ -1168,7 +1208,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
     }
-    function handleDayChange(e: React.MouseEvent, currentDay: number) {
+    function handleDayChange(e: React.MouseEvent | null, currentDay: number) {
         // Avoid triggering a full table re-render when the clicked cell is already
         // the active day; this becomes expensive with large datasets.
         if (
@@ -1259,14 +1299,14 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     function handleAppearanceChange(e: React.MouseEvent) {
         const _mode = (e.target as any).dataset.mode;
         setAppearanceMode(_mode);
-
-        //
+        
+        // The useEffect above will handle the weekOffset calculation 
+        // as soon as appearanceMode becomes 'week'
         onChangeAppearanceMode?.(_mode);
     }
 
 
 
-
     function handleShowWinYear() {
         setWinYear((prevState: boolean) => !prevState);
     }
@@ -1355,7 +1395,9 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                             data-date={_dateShow}
                             data-day={_dateDayShow}
                             data-week={weekDay}
-                            style={{ minWidth: CELL_MIN_W + 'px' }}
+
+                            // FIX: In 'week' mode, we don't want a hardcoded minWidth 
+                            style={appearanceMode === 'week' ? undefined : { minWidth: CELL_MIN_W + 'px' }}  
                             onMouseEnter={(e: React.MouseEvent) => {
                                 onCellMouseEnter?.(e);
                             }}
@@ -1922,6 +1964,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
     function tableGridInitHeadertitle() {
+
         //
         if (tableGridRef.current === null) return;
 
@@ -2171,10 +2214,10 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
             //****************
             // display wrapper
             //--------------
-            tableGridEl.classList.remove('invisible');
+            setGridReady(true);
 
             //****************
-            // STEP 1-1: 
+            // STEP 7-1: 
             //****************
             // calculate min width (MODE: WEEK)
             //--------------
@@ -2240,6 +2283,53 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
 
+
+    // Dual RAF survival test
+    /*
+        A single RAF only guarantees "moving to the next frame." 
+        Only dual RAFs can guarantee "DOM is mounted + layout is stable."
+    */
+    const [gridReady, setGridReady] = useState<boolean>(false);
+    const rafRef = useRef<{ r1?: number; r2?: number }>({});
+
+    function safeShowGrid() {
+        // 
+        setGridReady(false);
+
+        rafRef.current.r1 = requestAnimationFrame(() => {
+            rafRef.current.r2 = requestAnimationFrame(() => {
+                const el = tableGridRef.current;
+                if (!el) return;
+
+                // 
+                tableGridInit();
+
+                // Do only one thing: notify React that it’s ready to be displayed.
+                setGridReady(true);
+            });
+        });
+    }
+
+    useEffect(() => {
+        safeShowGrid();
+
+        return () => {
+            if (rafRef.current.r1) {
+                cancelAnimationFrame(rafRef.current.r1);
+            }
+            if (rafRef.current.r2) {
+                cancelAnimationFrame(rafRef.current.r2);
+            }
+        };
+    }, [appearanceMode]);
+
+
+    // Make sure the left side is highly synchronized with the right side.
+    useEffect(() => {
+        tableGridInitHeadertitle();
+    }, [orginalData, appearanceMode]);
+
+
     // if user change the selectedYear, then udate the years array that is displayed on year tab view
     useEffect(() => {
         const years: number[] = [];
@@ -2567,8 +2657,11 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                 <div
                     ref={tableGridRef}
                     className={combinedCls(
-                        `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode} invisible`,
-                        tableWrapperClassName
+                        `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode}`,
+                        tableWrapperClassName,
+                        { 
+                            'invisible': !gridReady 
+                        }
                     )}
                     onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
                         onKeyPressed?.(e, selectedCells);

package/lib/esm/ModalDialog/index.tsx

@@ -13,6 +13,7 @@ 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.735","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.743","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"}}