@megha-ui/react 1.3.35 → 1.3.37

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 (2) hide show
  1. package/dist/components/dropdown/index.js +36 -29
  2. package/package.json +1 -1
package/dist/components/dropdown/index.js CHANGED
@@ -28,31 +28,21 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
28
28
  });
29
29
  const [collapsed, setCollapsed] = useState("");
30
30
  const [height, setHeight] = useState(0);
31
- const getOverflowParentHeight = (element, fallback) => {
32
- var _a, _b;
31
+ const getLayoutBoundaryParent = (element) => {
33
32
  if (!element)
34
- return fallback;
33
+ return null;
35
34
  let parent = element.parentElement;
36
35
  while (parent) {
37
- const style = window.getComputedStyle(parent);
38
- const overflowY = style.overflowY;
39
- const overflow = style.overflow;
40
- if (overflowY === "auto" ||
41
- overflowY === "scroll" ||
42
- overflow === "auto" ||
43
- overflow === "scroll") {
44
- const parentRect = parent.getBoundingClientRect();
45
- const elementRect = element.getBoundingClientRect();
46
- const searchOptionRect = (_a = searchOptionRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
47
- return (parentRect.height -
48
- elementRect.height -
49
- 8 -
50
- ((_b = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _b !== void 0 ? _b : 0));
36
+ const styles = window.getComputedStyle(parent);
37
+ const overflowY = styles.overflowY;
38
+ const overflow = styles.overflow;
39
+ const hasClippingOverflow = [overflowY, overflow].some((value) => ["hidden", "clip", "auto", "scroll", "overlay"].includes(value));
40
+ if (hasClippingOverflow) {
41
+ return parent;
51
42
  }
52
43
  parent = parent.parentElement;
53
- console.log({ parent });
54
44
  }
55
- return fallback;
45
+ return null;
56
46
  };
57
47
  const calculateAutoPosition = () => {
58
48
  if (!wrapperRef.current)
@@ -77,21 +67,38 @@ const Dropdown = ({ options, selectedValues, onChange, placeholder = "Select..."
77
67
  var _a, _b, _c, _d, _e;
78
68
  if (isOpen && searchEnabled) {
79
69
  (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
80
- if (typeof maxDropdownHeight === "undefined") {
81
- const rect = (_b = wrapperRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
82
- const searchOptionRect = (_c = searchOptionRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
83
- const viewportSpace = document.body.clientHeight -
84
- ((_d = rect === null || rect === void 0 ? void 0 : rect.bottom) !== null && _d !== void 0 ? _d : 0) -
85
- 8 -
86
- ((_e = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _e !== void 0 ? _e : 0);
87
- const overflowSpace = getOverflowParentHeight(wrapperRef.current, viewportSpace);
88
- setHeight(overflowSpace);
70
+ if (typeof maxDropdownHeight === "undefined" &&
71
+ wrapperRef.current) {
72
+ const rect = wrapperRef.current.getBoundingClientRect();
73
+ const searchOptionRect = (_b = searchOptionRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
74
+ const searchHeight = (_c = searchOptionRect === null || searchOptionRect === void 0 ? void 0 : searchOptionRect.height) !== null && _c !== void 0 ? _c : 0;
75
+ const boundaryParent = getLayoutBoundaryParent(wrapperRef.current);
76
+ const containerRect = boundaryParent === null || boundaryParent === void 0 ? void 0 : boundaryParent.getBoundingClientRect();
77
+ const containerTop = (_d = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _d !== void 0 ? _d : 0;
78
+ const containerBottom = (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _e !== void 0 ? _e : document.documentElement.clientHeight;
79
+ const viewportPadding = 8;
80
+ const menuGap = 8;
81
+ const rawSpaceBelow = containerBottom -
82
+ rect.bottom -
83
+ viewportPadding -
84
+ menuGap -
85
+ searchHeight;
86
+ const rawSpaceAbove = rect.top -
87
+ containerTop -
88
+ viewportPadding -
89
+ menuGap -
90
+ searchHeight;
91
+ const spaceBelow = Math.max(0, Math.floor(rawSpaceBelow));
92
+ const spaceAbove = Math.max(0, Math.floor(rawSpaceAbove));
93
+ const opensUpwards = typeof clickStyle.bottom !== "undefined";
94
+ const available = opensUpwards ? spaceAbove : spaceBelow;
95
+ setHeight(available);
89
96
  }
90
97
  }
91
98
  if (isOpen) {
92
99
  setHighlightIndex(0);
93
100
  }
94
- }, [isOpen, searchEnabled]);
101
+ }, [isOpen, searchEnabled, maxDropdownHeight, clickStyle]);
95
102
  useEffect(() => {
96
103
  if (isOpen) {
97
104
  setHighlightIndex(0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megha-ui/react",
3
- "version": "1.3.35",
3
+ "version": "1.3.37",
4
4
  "description": "A collection of reusable UI components for React applications, built with TypeScript.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",