funda-ui 4.5.611 → 4.5.635

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

@@ -2933,19 +2933,18 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     windowScrollUpdate = _useWindowScroll2[1];
   function popwinPosInit() {
     var showAct = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    if (listContentRef.current === null || rootRef.current === null || inputRef.current === null) return;
+    if (listContentRef.current === null || inputRef.current === null) return;
     var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
     // update modal position
     var _modalRef = document.querySelector("#livesearch__options-wrapper-".concat(idRes));
     var _triggerRef = inputRef.current;
-    var _triggerXaxisRef = rootRef.current;
 
     // console.log(getAbsolutePositionOfStage(_triggerRef));
 
     if (_modalRef === null) return;
-    var _getAbsolutePositionO = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__.getAbsolutePositionOfStage)(_triggerXaxisRef),
+    var _getAbsolutePositionO = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__.getAbsolutePositionOfStage)(_triggerRef),
       x = _getAbsolutePositionO.x;
     var _getAbsolutePositionO2 = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__.getAbsolutePositionOfStage)(_triggerRef),
       y = _getAbsolutePositionO2.y,

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

@@ -4168,6 +4168,17 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }, 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() {
     if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
     var contentHeightOffset = 80;
@@ -4304,6 +4315,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // no data label
     popwinNoMatchInit();
+
+    // STEP 7:
+    //-----------
+    // Scrollbar position synchronization
+    syncListContentScrollBody();
   }
   function popwinPosHide() {
     var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));

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

@@ -2933,19 +2933,18 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
     windowScrollUpdate = _useWindowScroll2[1];
   function popwinPosInit() {
     var showAct = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    if (listContentRef.current === null || rootRef.current === null || inputRef.current === null) return;
+    if (listContentRef.current === null || inputRef.current === null) return;
     var contentHeightOffset = 80;
     var contentMaxHeight = 0;
 
     // update modal position
     var _modalRef = document.querySelector("#livesearch__options-wrapper-".concat(idRes));
     var _triggerRef = inputRef.current;
-    var _triggerXaxisRef = rootRef.current;
 
     // console.log(getAbsolutePositionOfStage(_triggerRef));
 
     if (_modalRef === null) return;
-    var _getAbsolutePositionO = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__.getAbsolutePositionOfStage)(_triggerXaxisRef),
+    var _getAbsolutePositionO = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__.getAbsolutePositionOfStage)(_triggerRef),
       x = _getAbsolutePositionO.x;
     var _getAbsolutePositionO2 = (0,funda_utils_dist_cjs_getElementProperty__WEBPACK_IMPORTED_MODULE_8__.getAbsolutePositionOfStage)(_triggerRef),
       y = _getAbsolutePositionO2.y,

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

@@ -4168,6 +4168,17 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
       }
     }, 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() {
     if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
     var contentHeightOffset = 80;
@@ -4304,6 +4315,11 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
     //-----------
     // no data label
     popwinNoMatchInit();
+
+    // STEP 7:
+    //-----------
+    // Scrollbar position synchronization
+    syncListContentScrollBody();
   }
   function popwinPosHide() {
     var _modalRef = document.querySelector("#custom-select__options-wrapper-".concat(idRes));

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

@@ -242,7 +242,7 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
 
 
     function popwinPosInit(showAct: boolean = true) {
-        if (listContentRef.current === null || rootRef.current === null || inputRef.current === null) return;
+        if (listContentRef.current === null || inputRef.current === null) return;
 
         const contentHeightOffset = 80;
         let contentMaxHeight = 0;
@@ -250,13 +250,12 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
         // update modal position
         const _modalRef: any = document.querySelector(`#livesearch__options-wrapper-${idRes}`);
         const _triggerRef: any = inputRef.current;
-        const _triggerXaxisRef: any = rootRef.current;
 
         // console.log(getAbsolutePositionOfStage(_triggerRef));
 
         if (_modalRef === null) return;
 
-        const { x } = getAbsolutePositionOfStage(_triggerXaxisRef);
+        const { x } = getAbsolutePositionOfStage(_triggerRef);
         const { y, width, height } = getAbsolutePositionOfStage(_triggerRef);
         const _triggerBox = _triggerRef.getBoundingClientRect();
         let targetPos = '';

package/lib/esm/Select/index.tsx

@@ -49,8 +49,6 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
-
 export type SelectOptionChangeFnType = (arg1: any, arg2: any, arg3: any) => void;
 
 export interface MultiSelectDataConfig {
@@ -285,7 +283,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 +672,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             onFetch?.(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
 
 
+
             //
             return _ORGIN_DATA;
 
@@ -847,6 +845,22 @@ 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() {
         if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
@@ -915,6 +929,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
                 // has scrollbar
                 listContentRef.current.dataset.hasScrollbar = 'true';
+                
 
             } else {
                 if (_contentOldHeight > 50) {
@@ -1017,6 +1032,13 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         popwinNoMatchInit();
 
 
+
+        // STEP 7:
+        //-----------
+        // Scrollbar position synchronization
+        syncListContentScrollBody();
+
+
     }
 
 
@@ -1209,8 +1231,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // show list
         setIsOpen(true);
 
-
-
         // pop win initalization
         setTimeout(() => {
             popwinPosInit();
@@ -1226,7 +1246,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         }
 
 
-
         if (MANUAL_REQ) {
             // clean data
             setOptionsData([]);

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.611",
+  "version": "4.5.635",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",