react-core-ts 1.3.55 → 1.3.57

package/dist/utilities/useDynamicHeight.js

@@ -1,13 +1,42 @@
 "use strict";
+// import { useEffect } from 'react';
 Object.defineProperty(exports, "__esModule", { value: true });
+// const useDynamicHeight = (
+//   selector: string,
+//   offset: number,
+//   dropOpen: boolean
+// ) => {
+//   useEffect(() => {
+//     const adjustHeight = () => {
+//       const element = document.querySelector(selector) as HTMLElement;
+//       if (element) {
+//         const newHeight = window.innerHeight - offset; // Adjust height dynamically
+//         element.style.maxHeight = `${newHeight}px`;
+//       }
+//     };
+//     adjustHeight(); // Initial call
+//     window.addEventListener('resize', adjustHeight);
+//     return () => window.removeEventListener('resize', adjustHeight);
+//   }, [selector, offset, dropOpen]);
+// };
+// export default useDynamicHeight;
 var react_1 = require("react");
 var useDynamicHeight = function (selector, offset, dropOpen) {
     (0, react_1.useEffect)(function () {
         var adjustHeight = function () {
             var element = document.querySelector(selector);
             if (element) {
-                var newHeight = window.innerHeight - offset; // Adjust height dynamically
-                element.style.maxHeight = "".concat(newHeight, "px");
+                var viewportHeight = window.innerHeight;
+                var rect = element.getBoundingClientRect(); // Get dropdown position
+                var availableSpaceBelow = viewportHeight - rect.top - offset; // Space below dropdown
+                var availableSpaceAbove = rect.top - offset; // Space above dropdown
+                var maxHeight = availableSpaceBelow;
+                // If there’s not enough space below, check above
+                if (availableSpaceBelow < element.scrollHeight &&
+                    availableSpaceAbove > availableSpaceBelow) {
+                    maxHeight = availableSpaceAbove; // Open upwards
+                }
+                element.style.maxHeight = "".concat(Math.max(0, maxHeight), "px");
             }
         };
         adjustHeight(); // Initial call

package/dist/utilities/useDynamicHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDynamicHeight.js","sourceRoot":"","sources":["../../src/utilities/useDynamicHeight.ts"],"names":[],"mappings":";;AAAA,+BAAkC;AAElC,IAAM,gBAAgB,GAAG,UACvB,QAAgB,EAChB,MAAc,EACd,QAAiB;IAEjB,IAAA,iBAAS,EAAC;QACR,IAAM,YAAY,GAAG;YACnB,IAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC;YAChE,IAAI,OAAO,EAAE;gBACX,IAAM,SAAS,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC,4BAA4B;gBAC3E,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,UAAG,SAAS,OAAI,CAAC;aAC5C;QACH,CAAC,CAAC;QAEF,YAAY,EAAE,CAAC,CAAC,eAAe;QAC/B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAlD,CAAkD,CAAC;IAClE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useDynamicHeight.js","sourceRoot":"","sources":["../../src/utilities/useDynamicHeight.ts"],"names":[],"mappings":";AAAA,qCAAqC;;AAErC,6BAA6B;AAC7B,sBAAsB;AACtB,oBAAoB;AACpB,sBAAsB;AACtB,SAAS;AACT,sBAAsB;AACtB,mCAAmC;AACnC,yEAAyE;AACzE,uBAAuB;AACvB,sFAAsF;AACtF,sDAAsD;AACtD,UAAU;AACV,SAAS;AAET,sCAAsC;AACtC,uDAAuD;AACvD,uEAAuE;AACvE,sCAAsC;AACtC,KAAK;AAEL,mCAAmC;AACnC,+BAAkC;AAElC,IAAM,gBAAgB,GAAG,UACvB,QAAgB,EAChB,MAAc,EACd,QAAiB;IAEjB,IAAA,iBAAS,EAAC;QACR,IAAM,YAAY,GAAG;YACnB,IAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAgB,CAAC;YAChE,IAAI,OAAO,EAAE;gBACX,IAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC;gBAC1C,IAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,CAAC,wBAAwB;gBACtE,IAAM,mBAAmB,GAAG,cAAc,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,uBAAuB;gBACvF,IAAM,mBAAmB,GAAG,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,CAAC,uBAAuB;gBAEtE,IAAI,SAAS,GAAG,mBAAmB,CAAC;gBAEpC,iDAAiD;gBACjD,IACE,mBAAmB,GAAG,OAAO,CAAC,YAAY;oBAC1C,mBAAmB,GAAG,mBAAmB,EACzC;oBACA,SAAS,GAAG,mBAAmB,CAAC,CAAC,eAAe;iBACjD;gBAED,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,UAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,OAAI,CAAC;aACzD;QACH,CAAC,CAAC;QAEF,YAAY,EAAE,CAAC,CAAC,eAAe;QAC/B,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAChD,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAlD,CAAkD,CAAC;IAClE,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-core-ts",
-  "version": "1.3.55",
+  "version": "1.3.57",
   "description": "React Components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/AutoCompleteWithTreeStructure.tsx

@@ -59,7 +59,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
       errorFlag,
       handleUpdateParent,
       isSeachable = false,
-      customDropOffset=300
+      customDropOffset = 300,
     },
     ref
   ) => {
@@ -469,7 +469,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
     };
     useDynamicHeight(
       '.qbs-autocomplete-suggestions-sub',
-      customDropOffset ?? 300,
+      customDropOffset ?? 200,
       dropOpen
     );
 

package/src/utilities/useDynamicHeight.ts

@@ -1,3 +1,26 @@
+// import { useEffect } from 'react';
+
+// const useDynamicHeight = (
+//   selector: string,
+//   offset: number,
+//   dropOpen: boolean
+// ) => {
+//   useEffect(() => {
+//     const adjustHeight = () => {
+//       const element = document.querySelector(selector) as HTMLElement;
+//       if (element) {
+//         const newHeight = window.innerHeight - offset; // Adjust height dynamically
+//         element.style.maxHeight = `${newHeight}px`;
+//       }
+//     };
+
+//     adjustHeight(); // Initial call
+//     window.addEventListener('resize', adjustHeight);
+//     return () => window.removeEventListener('resize', adjustHeight);
+//   }, [selector, offset, dropOpen]);
+// };
+
+// export default useDynamicHeight;
 import { useEffect } from 'react';
 
 const useDynamicHeight = (
@@ -9,8 +32,22 @@ const useDynamicHeight = (
     const adjustHeight = () => {
       const element = document.querySelector(selector) as HTMLElement;
       if (element) {
-        const newHeight = window.innerHeight - offset; // Adjust height dynamically
-        element.style.maxHeight = `${newHeight}px`;
+        const viewportHeight = window.innerHeight;
+        const rect = element.getBoundingClientRect(); // Get dropdown position
+        const availableSpaceBelow = viewportHeight - rect.top - offset; // Space below dropdown
+        const availableSpaceAbove = rect.top - offset; // Space above dropdown
+
+        let maxHeight = availableSpaceBelow;
+
+        // If there’s not enough space below, check above
+        if (
+          availableSpaceBelow < element.scrollHeight &&
+          availableSpaceAbove > availableSpaceBelow
+        ) {
+          maxHeight = availableSpaceAbove; // Open upwards
+        }
+
+        element.style.maxHeight = `${Math.max(0, maxHeight)}px`;
       }
     };