funda-ui 4.5.621 → 4.5.657

package/Date/index.js

@@ -1967,6 +1967,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           }, attributes)), appendControl || '', aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
             ref: aiInputRef,
             className: "position-absolute z-1",
+            "data-ai": "predict",
             style: {
               left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
               top: originInputComputedStyle.current.textTop + 'px',

package/Input/index.js

@@ -1413,6 +1413,7 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
   }, attributes)), appendControl || '', aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: aiInputRef,
     className: "position-absolute z-1",
+    "data-ai": "predict",
     style: {
       left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
       top: originInputComputedStyle.current.textTop + 'px',

package/RangeSlider/index.js

@@ -1933,6 +1933,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           }, attributes)), appendControl || '', aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
             ref: aiInputRef,
             className: "position-absolute z-1",
+            "data-ai": "predict",
             style: {
               left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
               top: originInputComputedStyle.current.textTop + 'px',

package/Select/index.js

@@ -4155,6 +4155,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     return _fetchData.apply(this, arguments);
   }
   function adjustMultiControlContainerHeight() {
+    var scrollbarInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     setTimeout(function () {
       // Sometimes you may get 0, you need to judge
       if (MULTI_SEL_VALID && rootMultiRef.current.clientHeight > 0) {
@@ -4164,11 +4165,23 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       // popwin position update
       var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));
       if (MULTI_SEL_VALID && _modalRef !== null && _modalRef.classList.contains('active')) {
-        popwinPosInit();
+        popwinPosInit(scrollbarInit);
       }
     }, 0);
   }
+  function syncListContentScrollBody() {
+    var el = listContentRef.current;
+    if (el === null) return;
+    var activedItem = el.querySelectorAll(".list-group-item.".concat(!MULTI_SEL_VALID ? 'active' : 'item-selected'))[0];
+    if (typeof activedItem !== 'undefined') {
+      var cleanItem = el.querySelector(".list-group-item.".concat(!MULTI_SEL_VALID ? 'custom-select-multi__control-option-item--clean' : 'custom-select-multi__control-option-item--select-all'));
+      var cleanItemHeight = cleanItem === null ? 0 : cleanItem.clientHeight;
+      var _latestScrollTop = activedItem.offsetTop - cleanItemHeight;
+      el.scrollTop = _latestScrollTop;
+    }
+  }
   function popwinPosInit() {
+    var scrollbarInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
     var contentHeightOffset = 80;
     var contentMaxHeight = 0;
@@ -4304,6 +4317,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // no data label
     popwinNoMatchInit();
+
+    // STEP 7:
+    //-----------
+    // Scrollbar position synchronization
+    if (scrollbarInit) syncListContentScrollBody();
   }
   function popwinPosHide() {
     var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));
@@ -4639,7 +4657,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
                 }
 
                 // Appropriate multi-item container height
-                adjustMultiControlContainerHeight();
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
 
                 // active current option
                 if (noCallback) {
@@ -4745,7 +4764,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
                 }
 
                 // Appropriate multi-item container height
-                adjustMultiControlContainerHeight();
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
 
                 // active current option
                 if (noCallback) {

package/Textarea/index.js

@@ -1702,6 +1702,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   }, attributes)), aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: aiInputRef,
     className: "position-absolute z-1",
+    "data-ai": "predict",
     style: {
       left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
       top: originInputComputedStyle.current.textTop + 'px',

package/lib/cjs/Date/index.js

@@ -1967,6 +1967,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           }, attributes)), appendControl || '', aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
             ref: aiInputRef,
             className: "position-absolute z-1",
+            "data-ai": "predict",
             style: {
               left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
               top: originInputComputedStyle.current.textTop + 'px',

package/lib/cjs/Input/index.js

@@ -1413,6 +1413,7 @@ var Input = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(funct
   }, attributes)), appendControl || '', aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: aiInputRef,
     className: "position-absolute z-1",
+    "data-ai": "predict",
     style: {
       left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
       top: originInputComputedStyle.current.textTop + 'px',

package/lib/cjs/RangeSlider/index.js

@@ -1933,6 +1933,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           }, attributes)), appendControl || '', aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
             ref: aiInputRef,
             className: "position-absolute z-1",
+            "data-ai": "predict",
             style: {
               left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
               top: originInputComputedStyle.current.textTop + 'px',

package/lib/cjs/Select/index.js

@@ -4155,6 +4155,7 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     return _fetchData.apply(this, arguments);
   }
   function adjustMultiControlContainerHeight() {
+    var scrollbarInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     setTimeout(function () {
       // Sometimes you may get 0, you need to judge
       if (MULTI_SEL_VALID && rootMultiRef.current.clientHeight > 0) {
@@ -4164,11 +4165,23 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       // popwin position update
       var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));
       if (MULTI_SEL_VALID && _modalRef !== null && _modalRef.classList.contains('active')) {
-        popwinPosInit();
+        popwinPosInit(scrollbarInit);
       }
     }, 0);
   }
+  function syncListContentScrollBody() {
+    var el = listContentRef.current;
+    if (el === null) return;
+    var activedItem = el.querySelectorAll(".list-group-item.".concat(!MULTI_SEL_VALID ? 'active' : 'item-selected'))[0];
+    if (typeof activedItem !== 'undefined') {
+      var cleanItem = el.querySelector(".list-group-item.".concat(!MULTI_SEL_VALID ? 'custom-select-multi__control-option-item--clean' : 'custom-select-multi__control-option-item--select-all'));
+      var cleanItemHeight = cleanItem === null ? 0 : cleanItem.clientHeight;
+      var _latestScrollTop = activedItem.offsetTop - cleanItemHeight;
+      el.scrollTop = _latestScrollTop;
+    }
+  }
   function popwinPosInit() {
+    var scrollbarInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
     if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
     var contentHeightOffset = 80;
     var contentMaxHeight = 0;
@@ -4304,6 +4317,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // no data label
     popwinNoMatchInit();
+
+    // STEP 7:
+    //-----------
+    // Scrollbar position synchronization
+    if (scrollbarInit) syncListContentScrollBody();
   }
   function popwinPosHide() {
     var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));
@@ -4639,7 +4657,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
                 }
 
                 // Appropriate multi-item container height
-                adjustMultiControlContainerHeight();
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
 
                 // active current option
                 if (noCallback) {
@@ -4745,7 +4764,8 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
                 }
 
                 // Appropriate multi-item container height
-                adjustMultiControlContainerHeight();
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
 
                 // active current option
                 if (noCallback) {

package/lib/cjs/Textarea/index.js

@@ -1702,6 +1702,7 @@ var Textarea = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(fu
   }, attributes)), aiPredict && remainingText && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     ref: aiInputRef,
     className: "position-absolute z-1",
+    "data-ai": "predict",
     style: {
       left: "".concat(originInputComputedStyle.current.fontSize + textWidth, "px"),
       top: originInputComputedStyle.current.textTop + 'px',

package/lib/esm/Input/index.tsx

@@ -561,6 +561,7 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
                             <div
                                 ref={aiInputRef}
                                 className="position-absolute z-1"
+                                data-ai="predict"
                                 style={{
                                     left: `${originInputComputedStyle.current.fontSize + textWidth}px`,
                                     top: originInputComputedStyle.current.textTop + 'px',

package/lib/esm/Select/index.tsx

@@ -285,7 +285,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         values: []
     });
 
-
     const listContainerHeightLimit = (num: number) => {
         let res = num;
         if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
@@ -675,6 +674,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             onFetch?.(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
 
 
+
             //
             return _ORGIN_DATA;
 
@@ -827,7 +827,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }
 
 
-    function adjustMultiControlContainerHeight() {
+    function adjustMultiControlContainerHeight(scrollbarInit: boolean = true) {
         setTimeout(() => {
 
 
@@ -839,7 +839,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             // popwin position update
             const _modalRef: any = document.querySelector(`#custom-select__options-wrapper-${idRes}`);
             if (MULTI_SEL_VALID && _modalRef !== null && _modalRef.classList.contains('active')) {
-                popwinPosInit();
+                popwinPosInit(scrollbarInit);
             }
 
 
@@ -847,8 +847,24 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }
 
 
+    function syncListContentScrollBody() {
+        const el: any = listContentRef.current;
+        if (el === null) return;
+
+        const activedItem = el.querySelectorAll(`.list-group-item.${!MULTI_SEL_VALID ? 'active' : 'item-selected'}`)[0];
+        if (typeof activedItem !== 'undefined') {
+            
+            const cleanItem = el.querySelector(`.list-group-item.${!MULTI_SEL_VALID ? 'custom-select-multi__control-option-item--clean' : 'custom-select-multi__control-option-item--select-all'}`);
+            const cleanItemHeight = cleanItem === null ? 0 : cleanItem.clientHeight;
+            const _latestScrollTop = activedItem.offsetTop - cleanItemHeight;
+            
+            el.scrollTop = _latestScrollTop;
+        }
+
+    }
+
 
-    function popwinPosInit() {
+    function popwinPosInit(scrollbarInit: boolean = true) {
         if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
 
         const contentHeightOffset = 80;
@@ -915,6 +931,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
                 // has scrollbar
                 listContentRef.current.dataset.hasScrollbar = 'true';
+                
 
             } else {
                 if (_contentOldHeight > 50) {
@@ -1017,6 +1034,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         popwinNoMatchInit();
 
 
+
+        // STEP 7:
+        //-----------
+        // Scrollbar position synchronization
+        if (scrollbarInit) syncListContentScrollBody();
+        
+
+
     }
 
 
@@ -1209,8 +1234,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // show list
         setIsOpen(true);
 
-
-
         // pop win initalization
         setTimeout(() => {
             popwinPosInit();
@@ -1226,7 +1249,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         }
 
 
-
         if (MANUAL_REQ) {
             // clean data
             setOptionsData([]);
@@ -1416,7 +1438,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                 }
 
                 // Appropriate multi-item container height
-                adjustMultiControlContainerHeight();
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
 
 
                 // active current option
@@ -1567,7 +1590,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                 // Appropriate multi-item container height
-                adjustMultiControlContainerHeight();
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
 
                 // active current option
                 if (noCallback) {

package/lib/esm/Textarea/index.tsx

@@ -548,6 +548,7 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
                             <div
                                 ref={aiInputRef}
                                 className="position-absolute z-1"
+                                data-ai="predict"
                                 style={{
                                     left: `${originInputComputedStyle.current.fontSize + textWidth}px`,
                                     top: originInputComputedStyle.current.textTop + 'px',

package/package.json

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