funda-ui 4.5.512 → 4.5.575

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/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/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.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%;
-        }
-    }
-
-}