funda-ui 4.5.512 → 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/LiveSearch/index.css

@@ -19,7 +19,7 @@
   --livesearch-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
   --livesearch-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
   --livesearch-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
-  --livesearch-listgroup-content-scrollbar-w: 3px;
+  --livesearch-listgroup-content-scrollbar-w: 10px;
   display: none;
   min-width: var(--livesearch-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */

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/MultipleSelect/index.css

@@ -8,7 +8,7 @@
   --m-select-body-font-size: 0.75rem;
   --m-select-scrollbar-color: rgba(0, 0, 0, 0.2);
   --m-select-scrollbar-track: rgba(0, 0, 0, 0);
-  --m-select-scrollbar-w: 3px;
+  --m-select-scrollbar-w: 10px;
   --m-select-search-icon-color: #333;
   --m-select-body-bg: #fff;
   --m-select-header-bg: #dee2e6;

package/Select/index.css

@@ -266,7 +266,7 @@
   --cus-sel-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
   --cus-sel-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
   --cus-sel-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
-  --cus-sel-listgroup-content-scrollbar-w: 3px;
+  --cus-sel-listgroup-content-scrollbar-w: 10px;
   --cus-sel-listgroup-grouptitle-color: #a2a2a2;
   --cus-sel-listgroup-groupborder-color: #d8d8d8;
   display: none;

package/Select/index.js

@@ -3591,6 +3591,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var optionsRes = options ? (0,initDefaultOptions.isJSON)(options) ? JSON.parse(options) : options : [];
+  var LIST_CONTAINER_MAX_HEIGHT = 350;
   var keyboardSelectedItem = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
 
   // return a array of options
@@ -3659,6 +3660,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _useState22 = _slicedToArray(_useState21, 2),
     controlArr = _useState22[0],
     setControlArr = _useState22[1];
+  var listContainerHeightLimit = function listContainerHeightLimit(num) {
+    var res = num;
+    if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
+
+    // Avoid the height of the child div containing decimal points and scrollbars
+    res = res + 1;
+    return res;
+  };
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
     var _data = arr.filter(Boolean);
     return _data.map(function (v) {
@@ -4188,8 +4197,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     // STEP 2:
     //-----------
-    // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    // Detect content MAX HEIGHT and ACTUAL HEIGHT
+    var _contentBox = listContentRef.current.getBoundingClientRect();
+    var _contentOldHeight = listContentRef.current.clientHeight;
+
+    // height restrictions
+    _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
+
+    // You need to wait for the height of the pop-up container to be set
+    // Detect position、
+    if (window.innerHeight - _triggerBox.top > _contentOldHeight) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -4198,11 +4215,12 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     // STEP 3:
     //-----------
-    // Detect content height
-    var _contentBox = listContentRef.current.getBoundingClientRect();
-    var _contentOldHeight = listContentRef.current.clientHeight;
+    // Set the pop-up height
     if (targetPos === 'top') {
       contentMaxHeight = _triggerBox.top;
+
+      // height restrictions
+      contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
       if (_contentBox.height > contentMaxHeight) {
         listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
         if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
@@ -4221,6 +4239,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     }
     if (targetPos === 'bottom') {
       contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+
+      // height restrictions
+      contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
       if (_contentBox.height > contentMaxHeight) {
         listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
         if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
@@ -4346,6 +4367,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     var oldHeight = listContentRef.current.dataset.height;
     var pos = listContentRef.current.dataset.pos;
     var filteredHeight = listContentRef.current.firstChild.clientHeight;
+
+    // height restrictions
+    oldHeight = listContainerHeightLimit(oldHeight);
+    filteredHeight = listContainerHeightLimit(filteredHeight);
     if (parseFloat(oldHeight) > filteredHeight) {
       listContentRef.current.style.height = filteredHeight + 'px';
     } else {

package/Table/index.css

@@ -8,7 +8,7 @@
   --syntable-scrollbar-color: rgba(0, 0, 0, 0.2);
   --syntable-scrollbar-track: rgba(0, 0, 0, 0);
   --syntable-scrollbar-h: 3px;
-  --syntable-scrollbar-w: 3px;
+  --syntable-scrollbar-w: 10px;
   --syntable-padding-x: 1rem;
   --syntable-padding-y: 0.5rem;
   --syntable-cell-focus-shadow: inset 0px 0px 2px 0px rgba(13, 110, 253, 2.25);

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/cjs/Select/index.js

@@ -3591,6 +3591,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
   var listRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var listContentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var optionsRes = options ? (0,initDefaultOptions.isJSON)(options) ? JSON.parse(options) : options : [];
+  var LIST_CONTAINER_MAX_HEIGHT = 350;
   var keyboardSelectedItem = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
 
   // return a array of options
@@ -3659,6 +3660,14 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     _useState22 = _slicedToArray(_useState21, 2),
     controlArr = _useState22[0],
     setControlArr = _useState22[1];
+  var listContainerHeightLimit = function listContainerHeightLimit(num) {
+    var res = num;
+    if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
+
+    // Avoid the height of the child div containing decimal points and scrollbars
+    res = res + 1;
+    return res;
+  };
   var multiSelControlOptionExist = function multiSelControlOptionExist(arr, val) {
     var _data = arr.filter(Boolean);
     return _data.map(function (v) {
@@ -4188,8 +4197,16 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     // STEP 2:
     //-----------
-    // Detect position
-    if (window.innerHeight - _triggerBox.top > 100) {
+    // Detect content MAX HEIGHT and ACTUAL HEIGHT
+    var _contentBox = listContentRef.current.getBoundingClientRect();
+    var _contentOldHeight = listContentRef.current.clientHeight;
+
+    // height restrictions
+    _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
+
+    // You need to wait for the height of the pop-up container to be set
+    // Detect position、
+    if (window.innerHeight - _triggerBox.top > _contentOldHeight) {
       targetPos = 'bottom';
     } else {
       targetPos = 'top';
@@ -4198,11 +4215,12 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
     // STEP 3:
     //-----------
-    // Detect content height
-    var _contentBox = listContentRef.current.getBoundingClientRect();
-    var _contentOldHeight = listContentRef.current.clientHeight;
+    // Set the pop-up height
     if (targetPos === 'top') {
       contentMaxHeight = _triggerBox.top;
+
+      // height restrictions
+      contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
       if (_contentBox.height > contentMaxHeight) {
         listContentRef.current.style.height = contentMaxHeight - contentHeightOffset + 'px';
         if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - contentHeightOffset;
@@ -4221,6 +4239,9 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     }
     if (targetPos === 'bottom') {
       contentMaxHeight = window.innerHeight - _triggerBox.bottom;
+
+      // height restrictions
+      contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
       if (_contentBox.height > contentMaxHeight) {
         listContentRef.current.style.height = contentMaxHeight - 10 + 'px';
         if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = contentMaxHeight - 10;
@@ -4346,6 +4367,10 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     var oldHeight = listContentRef.current.dataset.height;
     var pos = listContentRef.current.dataset.pos;
     var filteredHeight = listContentRef.current.firstChild.clientHeight;
+
+    // height restrictions
+    oldHeight = listContainerHeightLimit(oldHeight);
+    filteredHeight = listContainerHeightLimit(filteredHeight);
     if (parseFloat(oldHeight) > filteredHeight) {
       listContentRef.current.style.height = filteredHeight + 'px';
     } else {

package/lib/css/LiveSearch/index.css

@@ -19,7 +19,7 @@
   --livesearch-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
   --livesearch-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
   --livesearch-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
-  --livesearch-listgroup-content-scrollbar-w: 3px;
+  --livesearch-listgroup-content-scrollbar-w: 10px;
   display: none;
   min-width: var(--livesearch-listgroup-popwin-min-width);
   z-index: 1055; /* --bs-modal-zindex */

package/lib/css/MultipleSelect/index.css

@@ -8,7 +8,7 @@
   --m-select-body-font-size: 0.75rem;
   --m-select-scrollbar-color: rgba(0, 0, 0, 0.2);
   --m-select-scrollbar-track: rgba(0, 0, 0, 0);
-  --m-select-scrollbar-w: 3px;
+  --m-select-scrollbar-w: 10px;
   --m-select-search-icon-color: #333;
   --m-select-body-bg: #fff;
   --m-select-header-bg: #dee2e6;

package/lib/css/Select/index.css

@@ -266,7 +266,7 @@
   --cus-sel-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
   --cus-sel-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
   --cus-sel-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
-  --cus-sel-listgroup-content-scrollbar-w: 3px;
+  --cus-sel-listgroup-content-scrollbar-w: 10px;
   --cus-sel-listgroup-grouptitle-color: #a2a2a2;
   --cus-sel-listgroup-groupborder-color: #d8d8d8;
   display: none;

package/lib/css/Table/index.css

@@ -8,7 +8,7 @@
   --syntable-scrollbar-color: rgba(0, 0, 0, 0.2);
   --syntable-scrollbar-track: rgba(0, 0, 0, 0);
   --syntable-scrollbar-h: 3px;
-  --syntable-scrollbar-w: 3px;
+  --syntable-scrollbar-w: 10px;
   --syntable-padding-x: 1rem;
   --syntable-padding-y: 0.5rem;
   --syntable-cell-focus-shadow: inset 0px 0px 2px 0px rgba(13, 110, 253, 2.25);

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();