funda-ui 4.5.512 → 4.5.522

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/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/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/LiveSearch/index.scss

@@ -23,7 +23,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;

package/lib/esm/MultipleSelect/index.scss

@@ -10,7 +10,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/esm/Select/index.scss

@@ -380,7 +380,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;
 

package/lib/esm/Select/index.tsx

@@ -50,6 +50,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
+
 export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
 
 export interface MultiSelectDataConfig {
@@ -240,6 +241,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     const listRef = useRef<any>(null);
     const listContentRef = useRef<any>(null);
     const optionsRes = options ? (isJSON(options) ? JSON.parse(options as string) : options) : [];
+    const LIST_CONTAINER_MAX_HEIGHT = 350;
 
     const keyboardSelectedItem = useRef<any>(null);
 
@@ -284,6 +286,16 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     });
 
 
+    const listContainerHeightLimit = (num: number) => {
+        let 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;
+    };
+
     const multiSelControlOptionExist = (arr: any[], val: any) => {
         const _data = arr.filter(Boolean);
         return _data.map((v: any) => v.toString()).includes(val.toString());
@@ -864,10 +876,20 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         _modalRef.classList.add('active');
 
 
+
+
         // STEP 2:
         //-----------
-        // Detect position
-        if (window.innerHeight - _triggerBox.top > 100) {
+        // Detect content MAX HEIGHT and ACTUAL HEIGHT
+        const _contentBox = listContentRef.current.getBoundingClientRect();
+        let _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';
@@ -879,13 +901,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
         // STEP 3:
         //-----------
-        // Detect content height
-        const _contentBox = listContentRef.current.getBoundingClientRect();
-        const _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;
@@ -908,6 +931,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         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;
@@ -988,6 +1016,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // no data label
         popwinNoMatchInit();
 
+
     }
 
 
@@ -1077,9 +1106,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     function popwinContainerHeightAdjust() {
         if (listContentRef.current === null) return;
 
-        const oldHeight = listContentRef.current.dataset.height;
+        let oldHeight = listContentRef.current.dataset.height;
         const pos = listContentRef.current.dataset.pos;
-        const filteredHeight = listContentRef.current.firstChild.clientHeight;
+        let filteredHeight = listContentRef.current.firstChild.clientHeight;
+
+        // height restrictions
+        oldHeight = listContainerHeightLimit(oldHeight);
+        filteredHeight = listContainerHeightLimit(filteredHeight);
+
 
         if (parseFloat(oldHeight) > filteredHeight) {
             listContentRef.current.style.height = filteredHeight + 'px';

package/lib/esm/Table/index.scss

@@ -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/package.json

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