funda-ui 4.5.522 → 4.5.575

package/EventCalendar/index.js

@@ -3025,6 +3025,15 @@ var EventCalendar = function EventCalendar(props) {
   // exposes the following methods
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
     return {
+      today: function today() {
+        handleTodayChange();
+      },
+      next: function next() {
+        handleNextChange();
+      },
+      prev: function prev() {
+        handlePrevChange();
+      },
       closeModal: function closeModal() {
         if (modalEditHandleRef.current) modalEditHandleRef.current.close();
         if (modalDeleteHandleRef.current) modalDeleteHandleRef.current.close();

package/EventCalendarTimeline/index.js

@@ -3990,10 +3990,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   //
   var FILL_BLANK_DATE_DISABLD = typeof forwardAndBackFillDisabled === 'undefined' ? true : forwardAndBackFillDisabled;
 
-  // root
-  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var rootWidth = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);
-
   //
   var now = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return new Date();
@@ -4121,6 +4117,15 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   // exposes the following methods
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
     return {
+      today: function today() {
+        handleTodayChange();
+      },
+      next: function next() {
+        handleNextChange();
+      },
+      prev: function prev() {
+        handlePrevChange();
+      },
       gridInit: function gridInit() {
         tableGridInit();
       },
@@ -4936,6 +4941,16 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
 
     // restore table grid init status
     restoreTableGridInitStatus();
+
+    // The scrollbar position is horizontal
+    setTimeout(function () {
+      if (scrollBodyRef.current && tableGridRef.current) {
+        var targetPos = tableGridRef.current.querySelector('.custom-event-tl-table__datagrid-header__content tbody .today.selected');
+        if (targetPos !== null) {
+          scrollBodyRef.current.scrollLeft = targetPos.offsetLeft;
+        }
+      }
+    }, 0);
   }
   function handleAppearanceChange(e) {
     var _mode = e.target.dataset.mode;
@@ -5021,7 +5036,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
               className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)('custom-event-tl-table__cell-cushion-headercontent__container', {
                 'empty': !isInteractive,
                 'today': d === now.getDate(),
-                'selected': d === day,
+                'selected': "".concat(year, "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(month + 1), "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(day)) === "".concat(year, "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(month + 1), "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(d)),
                 'last-cell': isLastCol
               }),
               key: "col" + i,
@@ -5444,28 +5459,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
       trElements[i].style.height = tdOHeight;
     }
   }
-  function outerWrapperInit() {
-    var _rootRef$current$pare;
-    if (rootRef.current === null) return;
-    var hasInlineHeightOrMaxHeight = function hasInlineHeightOrMaxHeight(element) {
-      if (!element) return false;
-      return element.style.height !== '' || element.style.maxHeight !== '';
-    };
-
-    // calculate wrapper width & height
-    var wrapperWidth = ((_rootRef$current$pare = rootRef.current.parentElement) === null || _rootRef$current$pare === void 0 ? void 0 : _rootRef$current$pare.offsetWidth) || 0;
-    if (rootRef.current && wrapperWidth > 0 && rootWidth.current === 0) {
-      var _rootRef$current$pare2;
-      rootWidth.current = wrapperWidth;
-      rootRef.current.style.width = wrapperWidth + 'px';
-
-      // height
-      var wrapperHeight = ((_rootRef$current$pare2 = rootRef.current.parentElement) === null || _rootRef$current$pare2 === void 0 ? void 0 : _rootRef$current$pare2.offsetHeight) || 0;
-      if (hasInlineHeightOrMaxHeight(rootRef.current.parentElement) && wrapperHeight > 0) {
-        rootRef.current.style.height = wrapperHeight + 'px';
-      }
-    }
-  }
   function tableGridInit() {
     //
     if (tableGridRef.current === null) return;
@@ -5731,10 +5724,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     onListRenderComplete === null || onListRenderComplete === void 0 ? void 0 : onListRenderComplete();
   }, [eventsValue, customTodayDate, appearanceMode]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    // calculate wrapper width (!!!FIRST!!!)
-    //--------------
-    outerWrapperInit();
-
     // !!!Please do not use dependencies
     //--------------
     return function () {
@@ -5747,9 +5736,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     };
   }, []);
   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", {
-    ref: rootRef,
-    className: "custom-event-tl__outerwrapper"
-  }, /*#__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", {
     className: "custom-event-tl__header bg-body-tertiary"
@@ -5961,7 +5947,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {
       key: i
     }, generateDaysUi(item.eventSources, item.listSection, i, true));
-  }))))))))))))), EVENTS_ENABLED ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_modaldialog__WEBPACK_IMPORTED_MODULE_2___default()), {
+  })))))))))))), EVENTS_ENABLED ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_modaldialog__WEBPACK_IMPORTED_MODULE_2___default()), {
     ref: modalDeleteHandleRef,
     show: showDelete,
     maskOpacity: modalMaskOpacity,

package/MasonryLayout/index.js

@@ -476,6 +476,17 @@ var MasonryLayout = function MasonryLayout(props) {
 
     // STEP 3:
     //=================
+    // Calculate the wrapper width based on the gap
+    var wrapperTotalGap = 0;
+    for (var _i2 = 0; _i2 < colCount; _i2++) {
+      if (_i2 > 0) {
+        wrapperTotalGap += GAP;
+      }
+    }
+    if (rootRef.current) rootRef.current.style.width = "calc(100% - ".concat(wrapperTotalGap, "px)");
+
+    // STEP 4:
+    //=================
     // Divide the children into columns
     var items = [];
     if (children && !Array.isArray(children)) {
@@ -493,32 +504,31 @@ var MasonryLayout = function MasonryLayout(props) {
       var columnIndex = i % colCount;
       columnWrapper["".concat(itemWrapperKey).concat(columnIndex)].push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         key: i,
-        className: "masonry-item",
         style: {
           marginBottom: "".concat(GAP, "px")
         }
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         style: perBrickWidth > 0 ? {
-          maxWidth: perBrickWidth + 'px'
+          width: perBrickWidth + 'px'
         } : undefined
       }, el)));
     });
 
-    // STEP 4:
+    // STEP 5:
     //=================
     // Wrapping the items in each column with a div and pushing it into the result array
-    for (var _i2 = 0; _i2 < colCount; _i2++) {
+    for (var _i3 = 0; _i3 < colCount; _i3++) {
       result.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-        key: _i2,
+        key: _i3,
         className: "masonry-item",
         style: {
-          marginLeft: "".concat(_i2 > 0 ? GAP : 0, "px"),
-          flex: 1
+          marginLeft: "".concat(_i3 > 0 ? GAP : 0, "px"),
+          flex: '0 1 auto'
         }
-      }, columnWrapper["".concat(itemWrapperKey).concat(_i2)]));
+      }, columnWrapper["".concat(itemWrapperKey).concat(_i3)]));
     }
 
-    // STEP 5:
+    // STEP 6:
     //=================
     setItems(result);
   }, [children]);

package/lib/cjs/EventCalendar/index.js

@@ -3025,6 +3025,15 @@ var EventCalendar = function EventCalendar(props) {
   // exposes the following methods
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
     return {
+      today: function today() {
+        handleTodayChange();
+      },
+      next: function next() {
+        handleNextChange();
+      },
+      prev: function prev() {
+        handlePrevChange();
+      },
       closeModal: function closeModal() {
         if (modalEditHandleRef.current) modalEditHandleRef.current.close();
         if (modalDeleteHandleRef.current) modalDeleteHandleRef.current.close();

package/lib/cjs/EventCalendarTimeline/index.js

@@ -3990,10 +3990,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   //
   var FILL_BLANK_DATE_DISABLD = typeof forwardAndBackFillDisabled === 'undefined' ? true : forwardAndBackFillDisabled;
 
-  // root
-  var rootRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
-  var rootWidth = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(0);
-
   //
   var now = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return new Date();
@@ -4121,6 +4117,15 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
   // exposes the following methods
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
     return {
+      today: function today() {
+        handleTodayChange();
+      },
+      next: function next() {
+        handleNextChange();
+      },
+      prev: function prev() {
+        handlePrevChange();
+      },
       gridInit: function gridInit() {
         tableGridInit();
       },
@@ -4936,6 +4941,16 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
 
     // restore table grid init status
     restoreTableGridInitStatus();
+
+    // The scrollbar position is horizontal
+    setTimeout(function () {
+      if (scrollBodyRef.current && tableGridRef.current) {
+        var targetPos = tableGridRef.current.querySelector('.custom-event-tl-table__datagrid-header__content tbody .today.selected');
+        if (targetPos !== null) {
+          scrollBodyRef.current.scrollLeft = targetPos.offsetLeft;
+        }
+      }
+    }, 0);
   }
   function handleAppearanceChange(e) {
     var _mode = e.target.dataset.mode;
@@ -5021,7 +5036,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
               className: (0,funda_utils_dist_cjs_cls__WEBPACK_IMPORTED_MODULE_7__.combinedCls)('custom-event-tl-table__cell-cushion-headercontent__container', {
                 'empty': !isInteractive,
                 'today': d === now.getDate(),
-                'selected': d === day,
+                'selected': "".concat(year, "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(month + 1), "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(day)) === "".concat(year, "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(month + 1), "-").concat((0,funda_utils_dist_cjs_date__WEBPACK_IMPORTED_MODULE_6__.padZero)(d)),
                 'last-cell': isLastCol
               }),
               key: "col" + i,
@@ -5444,28 +5459,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
       trElements[i].style.height = tdOHeight;
     }
   }
-  function outerWrapperInit() {
-    var _rootRef$current$pare;
-    if (rootRef.current === null) return;
-    var hasInlineHeightOrMaxHeight = function hasInlineHeightOrMaxHeight(element) {
-      if (!element) return false;
-      return element.style.height !== '' || element.style.maxHeight !== '';
-    };
-
-    // calculate wrapper width & height
-    var wrapperWidth = ((_rootRef$current$pare = rootRef.current.parentElement) === null || _rootRef$current$pare === void 0 ? void 0 : _rootRef$current$pare.offsetWidth) || 0;
-    if (rootRef.current && wrapperWidth > 0 && rootWidth.current === 0) {
-      var _rootRef$current$pare2;
-      rootWidth.current = wrapperWidth;
-      rootRef.current.style.width = wrapperWidth + 'px';
-
-      // height
-      var wrapperHeight = ((_rootRef$current$pare2 = rootRef.current.parentElement) === null || _rootRef$current$pare2 === void 0 ? void 0 : _rootRef$current$pare2.offsetHeight) || 0;
-      if (hasInlineHeightOrMaxHeight(rootRef.current.parentElement) && wrapperHeight > 0) {
-        rootRef.current.style.height = wrapperHeight + 'px';
-      }
-    }
-  }
   function tableGridInit() {
     //
     if (tableGridRef.current === null) return;
@@ -5731,10 +5724,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     onListRenderComplete === null || onListRenderComplete === void 0 ? void 0 : onListRenderComplete();
   }, [eventsValue, customTodayDate, appearanceMode]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(function () {
-    // calculate wrapper width (!!!FIRST!!!)
-    //--------------
-    outerWrapperInit();
-
     // !!!Please do not use dependencies
     //--------------
     return function () {
@@ -5747,9 +5736,6 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     };
   }, []);
   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", {
-    ref: rootRef,
-    className: "custom-event-tl__outerwrapper"
-  }, /*#__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", {
     className: "custom-event-tl__header bg-body-tertiary"
@@ -5961,7 +5947,7 @@ var EventCalendarTimeline = function EventCalendarTimeline(props) {
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("tr", {
       key: i
     }, generateDaysUi(item.eventSources, item.listSection, i, true));
-  }))))))))))))), EVENTS_ENABLED ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_modaldialog__WEBPACK_IMPORTED_MODULE_2___default()), {
+  })))))))))))), EVENTS_ENABLED ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_modaldialog__WEBPACK_IMPORTED_MODULE_2___default()), {
     ref: modalDeleteHandleRef,
     show: showDelete,
     maskOpacity: modalMaskOpacity,

package/lib/cjs/MasonryLayout/index.js

@@ -476,6 +476,17 @@ var MasonryLayout = function MasonryLayout(props) {
 
     // STEP 3:
     //=================
+    // Calculate the wrapper width based on the gap
+    var wrapperTotalGap = 0;
+    for (var _i2 = 0; _i2 < colCount; _i2++) {
+      if (_i2 > 0) {
+        wrapperTotalGap += GAP;
+      }
+    }
+    if (rootRef.current) rootRef.current.style.width = "calc(100% - ".concat(wrapperTotalGap, "px)");
+
+    // STEP 4:
+    //=================
     // Divide the children into columns
     var items = [];
     if (children && !Array.isArray(children)) {
@@ -493,32 +504,31 @@ var MasonryLayout = function MasonryLayout(props) {
       var columnIndex = i % colCount;
       columnWrapper["".concat(itemWrapperKey).concat(columnIndex)].push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         key: i,
-        className: "masonry-item",
         style: {
           marginBottom: "".concat(GAP, "px")
         }
       }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
         style: perBrickWidth > 0 ? {
-          maxWidth: perBrickWidth + 'px'
+          width: perBrickWidth + 'px'
         } : undefined
       }, el)));
     });
 
-    // STEP 4:
+    // STEP 5:
     //=================
     // Wrapping the items in each column with a div and pushing it into the result array
-    for (var _i2 = 0; _i2 < colCount; _i2++) {
+    for (var _i3 = 0; _i3 < colCount; _i3++) {
       result.push( /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
-        key: _i2,
+        key: _i3,
         className: "masonry-item",
         style: {
-          marginLeft: "".concat(_i2 > 0 ? GAP : 0, "px"),
-          flex: 1
+          marginLeft: "".concat(_i3 > 0 ? GAP : 0, "px"),
+          flex: '0 1 auto'
         }
-      }, columnWrapper["".concat(itemWrapperKey).concat(_i2)]));
+      }, columnWrapper["".concat(itemWrapperKey).concat(_i3)]));
     }
 
-    // STEP 5:
+    // STEP 6:
     //=================
     setItems(result);
   }, [children]);

package/lib/esm/EventCalendar/index.tsx

@@ -187,6 +187,15 @@ const EventCalendar = (props: EventCalendarProps) => {
     useImperativeHandle(
         contentRef,
         () => ({
+            today: () => {
+                handleTodayChange();
+            },
+            next: () => {
+                handleNextChange();
+            },
+            prev: () => {
+                handlePrevChange();
+            },
             closeModal: () => {
                 if (modalEditHandleRef.current) modalEditHandleRef.current.close();
                 if (modalDeleteHandleRef.current) modalDeleteHandleRef.current.close();

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -242,9 +242,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     //
     const FILL_BLANK_DATE_DISABLD = typeof forwardAndBackFillDisabled === 'undefined' ? true : forwardAndBackFillDisabled;
 
-    // root
-    const rootRef = useRef<any>(null);
-    const rootWidth = useRef<number>(0);
 
     //
     const now = useMemo(() => new Date(), []);
@@ -325,6 +322,15 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     useImperativeHandle(
         contentRef,
         () => ({
+            today: () => {
+                handleTodayChange();
+            },
+            next: () => {
+                handleNextChange();
+            },
+            prev: () => {
+                handlePrevChange();
+            },
             gridInit: () => {
                 tableGridInit();
             },
@@ -1170,6 +1176,18 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
         // restore table grid init status
         restoreTableGridInitStatus();
 
+        // The scrollbar position is horizontal
+        setTimeout(() => {
+            if (scrollBodyRef.current && tableGridRef.current) {
+                const targetPos = tableGridRef.current.querySelector('.custom-event-tl-table__datagrid-header__content tbody .today.selected');
+                if (targetPos !== null) {
+                    (scrollBodyRef.current as any).scrollLeft = targetPos.offsetLeft;
+                }
+            }
+        }, 0);
+
+
+
     }
 
     function handleAppearanceChange(e: React.MouseEvent) {
@@ -1259,7 +1277,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                 {
                                     'empty': !isInteractive,
                                     'today': d === now.getDate(),
-                                    'selected': d === day,
+                                    'selected': `${year}-${padZero(month + 1)}-${padZero(day)}` === `${year}-${padZero(month + 1)}-${padZero(d)}`,
                                     'last-cell': isLastCol
                                 }
                             )}
@@ -1320,8 +1338,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                 onCellMouseUp?.(e, selectedCells);
                             }}
                         >
-
-
                             {/* forward fill & day & back fill */}
                             <div
                                 className={combinedCls(
@@ -1332,6 +1348,7 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
                                 )}
                                 style={{ width: (CELL_MIN_W - 1) + 'px' }}
                             >
+                                
                                 {d}
                                 {_weekDayStr}
                             </div>
@@ -1822,31 +1839,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     }
    
-
-    function outerWrapperInit() {
-        if (rootRef.current === null) return;
-
-        const hasInlineHeightOrMaxHeight = (element: HTMLElement) => {
-            if (!element) return false;
-            return element.style.height !== '' || element.style.maxHeight !== '';
-        };
-
-        // calculate wrapper width & height
-        const wrapperWidth = rootRef.current.parentElement?.offsetWidth || 0;
-        if (rootRef.current && wrapperWidth > 0 && rootWidth.current === 0) {
-            rootWidth.current = wrapperWidth;
-            rootRef.current.style.width = wrapperWidth + 'px';
- 
-            // height
-            const wrapperHeight = rootRef.current.parentElement?.offsetHeight || 0;
-            if (hasInlineHeightOrMaxHeight(rootRef.current.parentElement) && wrapperHeight > 0) {
-                rootRef.current.style.height = wrapperHeight + 'px';
-            }
-            
-        }
-    }
-
-
     function tableGridInit() {
 
         //
@@ -2177,11 +2169,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
 
     useEffect(() => {
 
-
-        // calculate wrapper width (!!!FIRST!!!)
-        //--------------
-        outerWrapperInit();
-
         // !!!Please do not use dependencies
         //--------------
         return () => {
@@ -2198,364 +2185,357 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     return (
         <>
 
-            <div
-                ref={rootRef}
-                className="custom-event-tl__outerwrapper"
-            >
-
-                {/*/////////////////////////////////////////////////// */}
-                {/*//////////////////// Calendar //////////////////// */}
-                {/*////////////////////////////////////////////////// */}
-
-                <div className={combinedCls(
-                    `custom-event-tl__wrapper custom-event-tl__wrapper--${appearanceMode}`,
-                    calendarWrapperClassName
-                )}>
-
-                    {/*++++++++++++++++ MAIN ++++++++++++++++*/}
-                    <div className="custom-event-tl__header bg-body-tertiary">
-                        <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--prev" onClick={handlePrevChange}>
-                            <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
-                                <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
-                            </svg>
-                        </button>
+            {/*/////////////////////////////////////////////////// */}
+            {/*//////////////////// Calendar //////////////////// */}
+            {/*////////////////////////////////////////////////// */}
+
+            <div className={combinedCls(
+                `custom-event-tl__wrapper custom-event-tl__wrapper--${appearanceMode}`,
+                calendarWrapperClassName
+            )}>
+
+                {/*++++++++++++++++ MAIN ++++++++++++++++*/}
+                <div className="custom-event-tl__header bg-body-tertiary">
+                    <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--prev" onClick={handlePrevChange}>
+                        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
+                            <path d="M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z" fill="#000" />
+                        </svg>
+                    </button>
+
+                    {/* //########## MODE: WEEK ############# */}
+                    {appearanceMode === 'week' ? <>
+                        <div className="custom-event-tl__header__info">
+                            {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
+                        </div>
+                    </> : null}
+                    {/* //########## /MODE: WEEK ############# */}
 
-                        {/* //########## MODE: WEEK ############# */}
-                        {appearanceMode === 'week' ? <>
-                            <div className="custom-event-tl__header__info">
-                                {typeof appearanceWeekTmpl === 'function' ? <>{appearanceWeekTmpl(displayWeekForHeader[0], displayWeekForHeader[1])}</> : <>{displayWeekForHeader[0]} - {displayWeekForHeader[1]}</>}
-                            </div>
-                        </> : null}
-                        {/* //########## /MODE: WEEK ############# */}
-
-
-                        {/* //########## MODE: MONTH ############# */}
-                        {appearanceMode === 'month' ? <>
-                            <div className="custom-event-tl__header__btns">
-                                <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
-                                    {MONTHS[month]}
-                                    <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
-                                </button>
-                                <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
-                                    {year}
-                                    <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
-                                </button>
-                            </div>
-                        </> : null}
-                        {/* //########## /MODE: MONTH ############# */}
 
+                    {/* //########## MODE: MONTH ############# */}
+                    {appearanceMode === 'month' ? <>
+                        <div className="custom-event-tl__header__btns">
+                            <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winMonth ? 'active' : ''}`} onClick={handleShowWinMonth}>
+                                {MONTHS[month]}
+                                <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
+                            </button>
+                            <button tabIndex={-1} type="button" className={`custom-event-tl__btn ${winYear ? 'active' : ''}`} onClick={handleShowWinYear}>
+                                {year}
+                                <svg width="12px" height="12px" viewBox="0 0 24 24"><path d="M11.178 19.569a.998.998 0 0 0 1.644 0l9-13A.999.999 0 0 0 21 5H3a1.002 1.002 0 0 0-.822 1.569l9 13z" fill="#000000" /></svg>
+                            </button>
+                        </div>
+                    </> : null}
+                    {/* //########## /MODE: MONTH ############# */}
 
 
-                        <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--next" onClick={handleNextChange}>
-                            <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
-                                <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
-                            </svg>
-                        </button>
-                    </div>
 
+                    <button tabIndex={-1} type="button" className="custom-event-tl__btn custom-event-tl__btn--next" onClick={handleNextChange}>
+                        <svg width="20px" height="20px" viewBox="0 0 24 24" fill="none">
+                            <path d="M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z" fill="#000" />
+                        </svg>
+                    </button>
+                </div>
 
 
-                    <div className="custom-event-tl__body">
 
+                <div className="custom-event-tl__body">
 
-                        <div className="custom-event-tl__row">
-                            {/* day */}
 
-                            {/* /day */}
-                        </div>
+                    <div className="custom-event-tl__row">
+                        {/* day */}
 
+                        {/* /day */}
                     </div>
-                    {/*++++++++++++++++ /MAIN ++++++++++++++++*/}
-
-
-                    {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
-                    <div className={`custom-event-tl__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
-                        <div className="custom-event-tl__month-container">
-                            {MONTHS_FULL.map((month, index) => {
-                                return <div
-                                    data-month={padZero(index + 1)}
-                                    className={`custom-event-tl__month ${selectedMonth === index ? ' selected' : ''}`}
-                                    key={month + index}
-                                    onClick={() => { handleMonthChange(index) }}
-                                >{month}</div>
-                            })}
-                        </div>
+
+                </div>
+                {/*++++++++++++++++ /MAIN ++++++++++++++++*/}
+
+
+                {/*++++++++++++++++ MONTH SELECTION TAB ++++++++++++++++*/}
+                <div className={`custom-event-tl__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winMonth ? 'active' : ''}`}>
+                    <div className="custom-event-tl__month-container">
+                        {MONTHS_FULL.map((month, index) => {
+                            return <div
+                                data-month={padZero(index + 1)}
+                                className={`custom-event-tl__month ${selectedMonth === index ? ' selected' : ''}`}
+                                key={month + index}
+                                onClick={() => { handleMonthChange(index) }}
+                            >{month}</div>
+                        })}
                     </div>
-                    {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}
-
-                    {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
-                    <div className={`custom-event-tl__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
-                        <div className="custom-event-tl__year-container bg-body-tertiary">
-                            {yearsArray.map((year, index) => {
-                                return <div
-                                    data-year={year}
-                                    className={`custom-event-tl__year ${selectedYear === year ? ' selected' : ''}`}
-                                    key={year + index}
-                                    onClick={() => { handleYearChange(year) }}
-                                >{year}</div>
-                            })}
-                        </div>
+                </div>
+                {/*++++++++++++++++ /MONTH SELECTION TAB ++++++++++++++++*/}
 
+                {/*++++++++++++++++ YEAR SELECTION TAB ++++++++++++++++*/}
+                <div className={`custom-event-tl__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ${winYear ? 'active' : ''}`}>
+                    <div className="custom-event-tl__year-container bg-body-tertiary">
+                        {yearsArray.map((year, index) => {
+                            return <div
+                                data-year={year}
+                                className={`custom-event-tl__year ${selectedYear === year ? ' selected' : ''}`}
+                                key={year + index}
+                                onClick={() => { handleYearChange(year) }}
+                            >{year}</div>
+                        })}
                     </div>
-                    {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}
+
+                </div>
+                {/*++++++++++++++++ /YEAR SELECTION TAB ++++++++++++++++*/}
 
 
 
-                    {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
-                    <div className="custom-event-tl__today-wrapper p-2">
+                {/*++++++++++++++++ TODAY SELECTION TAB ++++++++++++++++*/}
+                <div className="custom-event-tl__today-wrapper p-2">
+                    <button
+                        tabIndex={-1}
+                        type="button"
+                        className="custom-event-tl__btn custom-event-tl__btn--today"
+                        onClick={handleTodayChange}
+                    >
+                        {langToday || 'Today'}
+                    </button>
+
+                    {appearanceToggle ? <>
                         <button
                             tabIndex={-1}
                             type="button"
-                            className="custom-event-tl__btn custom-event-tl__btn--today"
-                            onClick={handleTodayChange}
+                            className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'month' ? 'active' : ''}`}
+                            data-mode="month"
+                            onClick={handleAppearanceChange}
                         >
-                            {langToday || 'Today'}
+                            {langAppearanceLabelMonth || 'Month'}
                         </button>
+                        <button
+                            tabIndex={-1}
+                            type="button"
+                            className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'week' ? 'active' : ''}`}
+                            data-mode="week"
+                            onClick={handleAppearanceChange}
+                        >
+                            {langAppearanceLabelWeek || 'Week'}
+                        </button>
+                    </> : null}
 
-                        {appearanceToggle ? <>
-                            <button
-                                tabIndex={-1}
-                                type="button"
-                                className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'month' ? 'active' : ''}`}
-                                data-mode="month"
-                                onClick={handleAppearanceChange}
-                            >
-                                {langAppearanceLabelMonth || 'Month'}
-                            </button>
-                            <button
-                                tabIndex={-1}
-                                type="button"
-                                className={`custom-event-tl__btn custom-event-tl__btn--appearance ${appearanceMode === 'week' ? 'active' : ''}`}
-                                data-mode="week"
-                                onClick={handleAppearanceChange}
-                            >
-                                {langAppearanceLabelWeek || 'Week'}
-                            </button>
-                        </> : null}
-
-                    </div>
-                    {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}
+                </div>
+                {/*++++++++++++++++ /TODAY SELECTION TAB ++++++++++++++++*/}
 
 
-                </div>{/* /.custom-event-tl__wrapper */}
+            </div>{/* /.custom-event-tl__wrapper */}
 
 
 
-                {/*/////////////////////////////////////////////////// */}
-                {/*//////////////////// Table Grid //////////////////// */}
-                {/*////////////////////////////////////////////////// */}
-                {orginalData.length === 0 ? null : <>
-                    <div
-                        ref={tableGridRef}
-                        className={combinedCls(
-                            `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode} invisible`,
-                            tableWrapperClassName
+            {/*/////////////////////////////////////////////////// */}
+            {/*//////////////////// Table Grid //////////////////// */}
+            {/*////////////////////////////////////////////////// */}
+            {orginalData.length === 0 ? null : <>
+                <div
+                    ref={tableGridRef}
+                    className={combinedCls(
+                        `custom-event-tl-table__timeline-table__wrapper custom-event-tl-table__timeline-table__wrapper--${appearanceMode} invisible`,
+                        tableWrapperClassName
+                    )}
+                    onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
+                        onKeyPressed?.(e, selectedCells);
+
+                        // Copy & Paste
+                        handleWrapperKeyDown(e);
+                    }}
+                    tabIndex={-1} // require "tabIndex" attribute
+                >
+                    <table role="grid" className={combinedCls(
+                        "custom-event-tl-table__timeline-table",
+                        tableClassName
+                    )}>
+                        <colgroup>
+                            <col className="custom-event-tl-table__datagrid-header" />
+                            <col />
+                            <col />
+                        </colgroup>
+
+                        <thead className={combinedCls(
+                            tableHeadClassName
                         )}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {
-                            onKeyPressed?.(e, selectedCells);
+                            ref={tableGridHeaderRef}
+                            role="rowgroup"
+                        >
+                            <tr role="presentation">
+                                <th role="presentation">
+                                    {/*<!--///// HEADER LEFT //////-->*/}
+                                    <div className="custom-event-tl-table__timeline-header custom-event-tl-table__timeline-headertitle">
+
+                                        <table role="presentation" className="custom-event-tl-table__datagrid-header__title">
+                                            <colgroup>
+                                                <col />
+                                            </colgroup>
+                                            <thead role="presentation">
+                                                <tr role="row">
+                                                    <th role="columnheader">
+                                                        <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
+                                                            {tableListSectionTitle || ''}
+                                                        </div>
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                        </table>
 
-                            // Copy & Paste
-                            handleWrapperKeyDown(e);
-                        }}
-                        tabIndex={-1} // require "tabIndex" attribute
-                    >
-                        <table role="grid" className={combinedCls(
-                            "custom-event-tl-table__timeline-table",
-                            tableClassName
-                        )}>
-                            <colgroup>
-                                <col className="custom-event-tl-table__datagrid-header" />
-                                <col />
-                                <col />
-                            </colgroup>
-
-                            <thead className={combinedCls(
-                                tableHeadClassName
-                            )}
-                                ref={tableGridHeaderRef}
-                                role="rowgroup"
-                            >
-                                <tr role="presentation">
-                                    <th role="presentation">
-                                        {/*<!--///// HEADER LEFT //////-->*/}
-                                        <div className="custom-event-tl-table__timeline-header custom-event-tl-table__timeline-headertitle">
+                                    </div>
+                                    {/*<!--///// /HEADER LEFT //////-->*/}
 
-                                            <table role="presentation" className="custom-event-tl-table__datagrid-header__title">
-                                                <colgroup>
-                                                    <col />
-                                                </colgroup>
-                                                <thead role="presentation">
-                                                    <tr role="row">
-                                                        <th role="columnheader">
-                                                            <div className="custom-event-tl-table__cell-cushion custom-event-tl-table__cell-cushion-headertitle">
-                                                                {tableListSectionTitle || ''}
-                                                            </div>
-                                                        </th>
-                                                    </tr>
-                                                </thead>
-                                            </table>
 
-                                        </div>
-                                        {/*<!--///// /HEADER LEFT //////-->*/}
 
+                                </th>
+                                <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
+                                <th role="presentation">
+                                    <div
+                                        ref={scrollHeaderRef}
+                                        className="custom-event-tl-table__scroller-harness custom-event-tl-table__scroller-harness--hide"
+                                        data-scroll="header"
+                                        onScroll={syncTableScrollHeader}
+                                    >
+                                        <div className="custom-event-tl-table__scroller">
 
+                                            {/*<!--///// HEADER RIGHT //////-->*/}
+                                            <div className="custom-event-tl-table__timeline-header">
 
-                                    </th>
-                                    <th role="presentation" className="custom-event-tl-table__timeline-divider"><div></div></th>
-                                    <th role="presentation">
-                                        <div
-                                            ref={scrollHeaderRef}
-                                            className="custom-event-tl-table__scroller-harness custom-event-tl-table__scroller-harness--hide"
-                                            data-scroll="header"
-                                            onScroll={syncTableScrollHeader}
-                                        >
-                                            <div className="custom-event-tl-table__scroller">
-
-                                                {/*<!--///// HEADER RIGHT //////-->*/}
-                                                <div className="custom-event-tl-table__timeline-header">
-
-                                                    <table className="custom-event-tl-table__datagrid-header__content custom-event-tl-table__scrollgrid-sync-table" >
-                                                        <tbody>
-                                                            <tr>
-                                                                {generateDaysUi()}
-                                                            </tr>
-                                                        </tbody>
-                                                    </table>
-                                                </div>
-                                                {/*<!--///// /HEADER RIGHT //////-->*/}
+                                                <table className="custom-event-tl-table__datagrid-header__content custom-event-tl-table__scrollgrid-sync-table" >
+                                                    <tbody>
+                                                        <tr>
+                                                            {generateDaysUi()}
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
                                             </div>
+                                            {/*<!--///// /HEADER RIGHT //////-->*/}
                                         </div>
-                                    </th>
-                                </tr>
-                            </thead>
+                                    </div>
+                                </th>
+                            </tr>
+                        </thead>
 
 
 
-                            <tbody className={combinedCls(
-                                tableBodyClassName
-                            )}
-                                role="rowgroup"
-                            >
-                                <tr role="presentation" className="custom-event-tl-table__list-section">
-                                    <td
-                                        role="presentation"
+                        <tbody className={combinedCls(
+                            tableBodyClassName
+                        )}
+                            role="rowgroup"
+                        >
+                            <tr role="presentation" className="custom-event-tl-table__list-section">
+                                <td
+                                    role="presentation"
+                                    className={combinedCls(
+                                        tableListStartClassName
+                                    )}
+
+                                >
+
+                                    <div
+                                        ref={scrollListRef}
                                         className={combinedCls(
-                                            tableListStartClassName
+                                            'custom-event-tl-table__scroller-harness',
+                                            {
+                                                'autoscroll': AUTO_SCROLL
+                                            }
                                         )}
-
+                                        data-scroll="list"
+                                        onScroll={syncTableScrollList}
                                     >
+                                        <div className="custom-event-tl-table__scroller">
 
-                                        <div
-                                            ref={scrollListRef}
-                                            className={combinedCls(
-                                                'custom-event-tl-table__scroller-harness',
-                                                {
-                                                    'autoscroll': AUTO_SCROLL
-                                                }
-                                            )}
-                                            data-scroll="list"
-                                            onScroll={syncTableScrollList}
-                                        >
-                                            <div className="custom-event-tl-table__scroller">
-
-                                                {/*<!--///// RESOURCE LEFT //////-->*/}
-                                                <table role="presentation" className="custom-event-tl-table__datagrid-body__title custom-event-tl-table__scrollgrid-sync-table">
-                                                    <colgroup>
-                                                        <col />
-                                                    </colgroup>
-                                                    <tbody role="presentation">
+                                            {/*<!--///// RESOURCE LEFT //////-->*/}
+                                            <table role="presentation" className="custom-event-tl-table__datagrid-body__title custom-event-tl-table__scrollgrid-sync-table">
+                                                <colgroup>
+                                                    <col />
+                                                </colgroup>
+                                                <tbody role="presentation">
 
-                                                        {/*<!-- per row -->*/}
-                                                        {generateListSectionUi()}
-                                                        {/*<!-- /per row -->*/}
+                                                    {/*<!-- per row -->*/}
+                                                    {generateListSectionUi()}
+                                                    {/*<!-- /per row -->*/}
 
-                                                    </tbody>
-                                                </table>
-                                                {/*<!--///// /RESOURCE LEFT //////-->*/}
-                                            </div>
+                                                </tbody>
+                                            </table>
+                                            {/*<!--///// /RESOURCE LEFT //////-->*/}
                                         </div>
+                                    </div>
 
 
-                                    </td>
-                                    <td
-                                        role="presentation"
-                                        className={combinedCls(
-                                            'custom-event-tl-table__timeline-divider',
-                                            tableListDividerClassName
-                                        )}
-                                    >
-                                        <div></div>
-                                    </td>
-                                    <td
-                                        role="presentation"
+                                </td>
+                                <td
+                                    role="presentation"
+                                    className={combinedCls(
+                                        'custom-event-tl-table__timeline-divider',
+                                        tableListDividerClassName
+                                    )}
+                                >
+                                    <div></div>
+                                </td>
+                                <td
+                                    role="presentation"
+                                    className={combinedCls(
+                                        tableListEndClassName
+                                    )}
+                                >
+
+
+                                    <div
+                                        ref={scrollBodyRef}
                                         className={combinedCls(
-                                            tableListEndClassName
+                                            'custom-event-tl-table__scroller-harness',
+                                            {
+                                                'autoscroll': AUTO_SCROLL
+                                            }
                                         )}
+                                        data-scroll="body"
+                                        onScroll={syncTableScrollBody}
+                                        onMouseMove={BODY_DRAG ? handleTableMove : () => { }}
+                                        onMouseDown={BODY_DRAG ? handleTableDragStart : () => { }}
+                                        onMouseUp={BODY_DRAG ? handleTableDragEnd : () => { }}
+                                        onMouseLeave={BODY_DRAG ? handleTableDragEnd : () => { }}
                                     >
+                                        <div className="custom-event-tl-table__scroller">
+                                            {/*<!--///// RESOURCE RIGHT //////-->*/}
+                                            <div className="custom-event-tl-table__timeline-body">
+                                                <table
+                                                    className="custom-event-tl-table__datagrid-body__content custom-event-tl-table__scrollgrid-sync-table"
+                                                    /* Drag to activate the selection area */
+                                                    onMouseLeave={multipleCells ? handleTableMainMouseUp : undefined}
+                                                    onMouseUp={multipleCells ? handleTableMainMouseUp : undefined}
+
+                                                >
+                                                    <colgroup>
+                                                        {generateColUi()}
+                                                    </colgroup>
+                                                    <tbody>
+                                                        {/*<!-- per row -->*/}
+                                                        {orginalData.map((item: any, i: number) => {
 
+                                                            return (
+                                                                <tr key={i}>
+                                                                    {generateDaysUi(item.eventSources, item.listSection, i, true)}
+                                                                </tr>
+                                                            )
 
-                                        <div
-                                            ref={scrollBodyRef}
-                                            className={combinedCls(
-                                                'custom-event-tl-table__scroller-harness',
-                                                {
-                                                    'autoscroll': AUTO_SCROLL
-                                                }
-                                            )}
-                                            data-scroll="body"
-                                            onScroll={syncTableScrollBody}
-                                            onMouseMove={BODY_DRAG ? handleTableMove : () => { }}
-                                            onMouseDown={BODY_DRAG ? handleTableDragStart : () => { }}
-                                            onMouseUp={BODY_DRAG ? handleTableDragEnd : () => { }}
-                                            onMouseLeave={BODY_DRAG ? handleTableDragEnd : () => { }}
-                                        >
-                                            <div className="custom-event-tl-table__scroller">
-                                                {/*<!--///// RESOURCE RIGHT //////-->*/}
-                                                <div className="custom-event-tl-table__timeline-body">
-                                                    <table
-                                                        className="custom-event-tl-table__datagrid-body__content custom-event-tl-table__scrollgrid-sync-table"
-                                                        /* Drag to activate the selection area */
-                                                        onMouseLeave={multipleCells ? handleTableMainMouseUp : undefined}
-                                                        onMouseUp={multipleCells ? handleTableMainMouseUp : undefined}
-
-                                                    >
-                                                        <colgroup>
-                                                            {generateColUi()}
-                                                        </colgroup>
-                                                        <tbody>
-                                                            {/*<!-- per row -->*/}
-                                                            {orginalData.map((item: any, i: number) => {
-
-                                                                return (
-                                                                    <tr key={i}>
-                                                                        {generateDaysUi(item.eventSources, item.listSection, i, true)}
-                                                                    </tr>
-                                                                )
-
-                                                            })}
-
-                                                        </tbody>
-                                                    </table>
-
-                                                </div>
-                                                {/*<!--///// /RESOURCE RIGHT //////-->*/}
+                                                        })}
 
+                                                    </tbody>
+                                                </table>
 
                                             </div>
-                                        </div>
+                                            {/*<!--///// /RESOURCE RIGHT //////-->*/}
 
 
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
+                                        </div>
+                                    </div>
+
 
-                    </div>{/* /.custom-event-tl-table__timeline-table__wrapper */}
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
 
+                </div>{/* /.custom-event-tl-table__timeline-table__wrapper */}
 
-                </>}
-            </div>
 
+            </>}
 
 
             {/*/////////////////////////////////////////////////// */}

package/lib/esm/MasonryLayout/index.tsx

@@ -8,9 +8,9 @@ import {
 
 
 export type MasonryLayoutProps = {
-    columns?: number,
-    gap?: number,
-    breakPoints?: Record<number, number>
+    columns?: number;
+    gap?: number;
+    breakPoints?: Record<number, number>;
     /** -- */
     id?: string;
     tabIndex?: number;
@@ -75,8 +75,21 @@ const MasonryLayout = (props: MasonryLayoutProps) => {
             columnWrapper[`${itemWrapperKey}${i}`] = [];
         }
 
+
         // STEP 3:
         //=================
+        // Calculate the wrapper width based on the gap
+        let wrapperTotalGap: number = 0;
+        for (let i = 0; i < colCount; i++) {
+            if (i > 0) {
+                wrapperTotalGap += GAP;
+            }
+        }
+        if (rootRef.current) rootRef.current.style.width = `calc(100% - ${wrapperTotalGap}px)`;
+
+
+        // STEP 4:
+        //=================
         // Divide the children into columns
         let items: React.ReactNode[] = [];
 
@@ -94,21 +107,21 @@ const MasonryLayout = (props: MasonryLayoutProps) => {
 
         items.forEach((el: React.ReactNode, i: number) => {
             const columnIndex = i % colCount;
+  
             columnWrapper[`${itemWrapperKey}${columnIndex}`].push(
                 <div 
                     key={i} 
-                    className="masonry-item"
                     style={{ 
                         marginBottom: `${GAP}px`
                     }}
                 >
-                    <div style={perBrickWidth > 0 ? {maxWidth: perBrickWidth + 'px'} : undefined}>{el}</div>
+                    <div style={perBrickWidth > 0 ? {width: perBrickWidth + 'px'} : undefined}>{el}</div>
                 </div>
             );
         });
 
 
-        // STEP 4:
+        // STEP 5:
         //=================
         // Wrapping the items in each column with a div and pushing it into the result array
         for (let i = 0; i < colCount; i++) {
@@ -118,14 +131,14 @@ const MasonryLayout = (props: MasonryLayoutProps) => {
                     className="masonry-item"
                     style={{
                         marginLeft: `${i > 0 ? GAP : 0}px`,
-                        flex: 1
+                        flex: '0 1 auto'
                     }}>
                     {columnWrapper[`${itemWrapperKey}${i}`]}
                 </div>
             );
         }
         
-        // STEP 5:
+        // STEP 6:
         //=================
         setItems(result);
         

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.5.522",
+  "version": "4.5.575",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",

package/MasonryLayout/index.css

@@ -1,6 +0,0 @@
-/* ======================================================
-    <!-- Masonry Layout -->
-/* ====================================================== */
-.masonry__wrapper .masonry-item > * {
-  width: 100%;
-}

package/lib/css/MasonryLayout/index.css

@@ -1,6 +0,0 @@
-/* ======================================================
-    <!-- Masonry Layout -->
-/* ====================================================== */
-.masonry__wrapper .masonry-item > * {
-  width: 100%;
-}

package/lib/esm/MasonryLayout/index.scss

@@ -1,13 +0,0 @@
-/* ======================================================
-    <!-- Masonry Layout -->
-/* ====================================================== */
-
-.masonry__wrapper {
-
-    .masonry-item {
-        > * {
-            width: 100%;
-        }
-    }
-
-}