funda-ui 4.7.735 → 4.7.740

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

@@ -5794,10 +5794,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 +5852,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 +6147,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

@@ -5794,10 +5794,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 +5852,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 +6147,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

@@ -252,6 +252,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
@@ -1922,6 +1923,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
 
     function tableGridInitHeadertitle() {
+
         //
         if (tableGridRef.current === null) return;
 
@@ -2171,10 +2173,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 +2242,52 @@ 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 +2615,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.740","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"}}