react-core-ts 1.3.55 → 1.3.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/AutoCompleteWithTreeStructure.js +1 -1
  2. package/dist/styles/styles/components/autocomplete.css +632 -0
  3. package/dist/styles/styles/components/selectedautocomplete.css +130 -0
  4. package/dist/styles/styles/components/tooltip.css +497 -0
  5. package/dist/styles/styles/components/treedropdown.css +63 -0
  6. package/dist/styles/styles/global.css +8 -0
  7. package/dist/utilities/useDynamicHeight.js +31 -2
  8. package/dist/utilities/useDynamicHeight.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/AutoCompleteWithTreeStructure.tsx +1 -1
  11. package/src/utilities/useDynamicHeight.ts +39 -2
package/dist/utilities/useDynamicHeight.js CHANGED
@@ -1,13 +1,42 @@
1
1
  "use strict";
2
+ // import { useEffect } from 'react';
2
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
+ // const useDynamicHeight = (
5
+ // selector: string,
6
+ // offset: number,
7
+ // dropOpen: boolean
8
+ // ) => {
9
+ // useEffect(() => {
10
+ // const adjustHeight = () => {
11
+ // const element = document.querySelector(selector) as HTMLElement;
12
+ // if (element) {
13
+ // const newHeight = window.innerHeight - offset; // Adjust height dynamically
14
+ // element.style.maxHeight = `${newHeight}px`;
15
+ // }
16
+ // };
17
+ // adjustHeight(); // Initial call
18
+ // window.addEventListener('resize', adjustHeight);
19
+ // return () => window.removeEventListener('resize', adjustHeight);
20
+ // }, [selector, offset, dropOpen]);
21
+ // };
22
+ // export default useDynamicHeight;
3
23
  var react_1 = require("react");
4
24
  var useDynamicHeight = function (selector, offset, dropOpen) {
5
25
  (0, react_1.useEffect)(function () {
6
26
  var adjustHeight = function () {
7
27
  var element = document.querySelector(selector);
8
28
  if (element) {
9
- var newHeight = window.innerHeight - offset; // Adjust height dynamically
10
- element.style.maxHeight = "".concat(newHeight, "px");
29
+ var viewportHeight = window.innerHeight;
30
+ var rect = element.getBoundingClientRect(); // Get dropdown position
31
+ var availableSpaceBelow = viewportHeight - rect.top - offset; // Space below dropdown
32
+ var availableSpaceAbove = rect.top - offset; // Space above dropdown
33
+ var maxHeight = availableSpaceBelow;
34
+ // If there’s not enough space below, check above
35
+ if (availableSpaceBelow < element.scrollHeight &&
36
+ availableSpaceAbove > availableSpaceBelow) {
37
+ maxHeight = availableSpaceAbove; // Open upwards
38
+ }
39
+ element.style.maxHeight = "".concat(Math.max(0, maxHeight), "px !important");
11
40
  }
12
41
  };
13
42
  adjustHeight(); // Initial call
package/dist/utilities/useDynamicHeight.js.map CHANGED
@@ -1 +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"}
1
+ {"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,kBAAe,CAAC;aACpE;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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-core-ts",
3
- "version": "1.3.55",
3
+ "version": "1.3.56",
4
4
  "description": "React Components",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/AutoCompleteWithTreeStructure.tsx CHANGED
@@ -469,7 +469,7 @@ const AutoCompleteWithTreeStructure = forwardRef<
469
469
  };
470
470
  useDynamicHeight(
471
471
  '.qbs-autocomplete-suggestions-sub',
472
- customDropOffset ?? 300,
472
+ customDropOffset ?? 200,
473
473
  dropOpen
474
474
  );
475
475
 
package/src/utilities/useDynamicHeight.ts CHANGED
@@ -1,3 +1,26 @@
1
+ // import { useEffect } from 'react';
2
+
3
+ // const useDynamicHeight = (
4
+ // selector: string,
5
+ // offset: number,
6
+ // dropOpen: boolean
7
+ // ) => {
8
+ // useEffect(() => {
9
+ // const adjustHeight = () => {
10
+ // const element = document.querySelector(selector) as HTMLElement;
11
+ // if (element) {
12
+ // const newHeight = window.innerHeight - offset; // Adjust height dynamically
13
+ // element.style.maxHeight = `${newHeight}px`;
14
+ // }
15
+ // };
16
+
17
+ // adjustHeight(); // Initial call
18
+ // window.addEventListener('resize', adjustHeight);
19
+ // return () => window.removeEventListener('resize', adjustHeight);
20
+ // }, [selector, offset, dropOpen]);
21
+ // };
22
+
23
+ // export default useDynamicHeight;
1
24
  import { useEffect } from 'react';
2
25
 
3
26
  const useDynamicHeight = (
@@ -9,8 +32,22 @@ const useDynamicHeight = (
9
32
  const adjustHeight = () => {
10
33
  const element = document.querySelector(selector) as HTMLElement;
11
34
  if (element) {
12
- const newHeight = window.innerHeight - offset; // Adjust height dynamically
13
- element.style.maxHeight = `${newHeight}px`;
35
+ const viewportHeight = window.innerHeight;
36
+ const rect = element.getBoundingClientRect(); // Get dropdown position
37
+ const availableSpaceBelow = viewportHeight - rect.top - offset; // Space below dropdown
38
+ const availableSpaceAbove = rect.top - offset; // Space above dropdown
39
+
40
+ let maxHeight = availableSpaceBelow;
41
+
42
+ // If there’s not enough space below, check above
43
+ if (
44
+ availableSpaceBelow < element.scrollHeight &&
45
+ availableSpaceAbove > availableSpaceBelow
46
+ ) {
47
+ maxHeight = availableSpaceAbove; // Open upwards
48
+ }
49
+
50
+ element.style.maxHeight = `${Math.max(0, maxHeight)}px !important`;
14
51
  }
15
52
  };
16
53