funuicss 3.10.3 → 3.10.4

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 (3) hide show
  1. package/package.json +1 -1
  2. package/ui/accordion/Accordion.js +1 -1
  3. package/ui/drop/Dropdown.js +79 -21
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "3.10.3",
2
+ "version": "3.10.4",
3
3
  "name": "funuicss",
4
4
  "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
5
5
  "main": "index.js",
package/ui/accordion/Accordion.js CHANGED
@@ -313,7 +313,7 @@ var AccordionItem = function (_a) {
313
313
  react_1.default.createElement("div", { style: { lineHeight: 0 } },
314
314
  react_1.default.createElement(AccordionIcon, { isExpandIcon: true, expandIcon: expandIcon, expandIconColor: expandIconColor, expandIconSize: expandIconSize, expandIconClassName: expandIconClassName, isOpen: isOpen, rotate: expandIconRotate }))),
315
315
  react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass || '', " ").concat(isOpen ? 'open' : ''), style: {
316
- maxHeight: isOpen ? '10000px' : '0',
316
+ maxHeight: isOpen ? '999999999999999px' : '0',
317
317
  overflow: 'visible',
318
318
  opacity: isOpen ? 1 : 0,
319
319
  visibility: isOpen ? 'visible' : 'hidden',
package/ui/drop/Dropdown.js CHANGED
@@ -50,9 +50,8 @@ var Dropdown = function (_a) {
50
50
  return;
51
51
  }
52
52
  var calculatePosition = function () {
53
+ var _a;
53
54
  var rect = triggerRef.current.getBoundingClientRect();
54
- var scrollY = window.scrollY;
55
- var scrollX = window.scrollX;
56
55
  var styles = {
57
56
  width: width || undefined,
58
57
  minWidth: minWidth || undefined,
@@ -64,44 +63,103 @@ var Dropdown = function (_a) {
64
63
  };
65
64
  if (usePortal) {
66
65
  styles.position = 'fixed';
67
- // Calculate position for portal mode
66
+ // Use viewport‑relative coordinates – NO scrollY/scrollX added
68
67
  switch (position) {
69
68
  case 'top':
70
- styles.top = rect.top + scrollY;
71
- styles.left = rect.left + scrollX + (rect.width / 2);
72
- styles.transform = 'translateX(-50%)';
69
+ styles.top = rect.top;
70
+ styles.left = rect.left + rect.width / 2;
71
+ styles.transform = 'translateX(-50%) translateY(-100%)'; // place above, centered
73
72
  break;
74
73
  case 'bottom':
75
- styles.top = rect.bottom + scrollY;
76
- styles.left = rect.left + scrollX + (rect.width / 2);
74
+ styles.top = rect.bottom;
75
+ styles.left = rect.left + rect.width / 2;
77
76
  styles.transform = 'translateX(-50%)';
78
77
  break;
79
78
  case 'top-left':
80
- styles.top = rect.top + scrollY;
81
- styles.left = rect.left + scrollX;
79
+ styles.top = rect.top;
80
+ styles.left = rect.left;
81
+ styles.transform = 'translateY(-100%)'; // place above
82
82
  break;
83
83
  case 'top-right':
84
- styles.top = rect.top + scrollY;
85
- styles.left = rect.right + scrollX;
84
+ styles.top = rect.top;
85
+ styles.left = rect.right;
86
+ styles.transform = 'translateY(-100%)'; // place above
86
87
  break;
87
88
  case 'bottom-left':
88
- styles.top = rect.bottom + scrollY;
89
- styles.left = rect.left + scrollX;
89
+ styles.top = rect.bottom;
90
+ styles.left = rect.left;
90
91
  break;
91
92
  case 'bottom-right':
92
- styles.top = rect.bottom + scrollY;
93
- styles.left = rect.right + scrollX;
93
+ styles.top = rect.bottom;
94
+ styles.left = rect.right;
94
95
  break;
95
96
  case 'left':
96
- styles.top = rect.top + scrollY;
97
- styles.left = rect.left + scrollX;
97
+ styles.top = rect.top;
98
+ styles.left = rect.left;
99
+ styles.transform = 'translateX(-100%)'; // place to the left
98
100
  break;
99
101
  case 'right':
100
- styles.top = rect.top + scrollY;
101
- styles.left = rect.right + scrollX;
102
+ styles.top = rect.top;
103
+ styles.left = rect.right;
102
104
  break;
103
105
  }
104
106
  }
107
+ else {
108
+ // Non‑portal mode: use absolute positioning inside the (assumed) relative container
109
+ // You might need to ensure the container has position: relative.
110
+ styles.position = 'absolute';
111
+ // Here you would use offset values relative to the container.
112
+ // For simplicity, we'll just copy the same logic without scroll offsets,
113
+ // but note that getBoundingClientRect gives viewport coordinates,
114
+ // which are not directly usable with absolute positioning unless the container is fixed/absolute.
115
+ // A production version would need a more robust approach.
116
+ // For now, we keep the original (flawed) logic, but you should consider
117
+ // using a proper positioning library or always using the portal.
118
+ var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
119
+ if (containerRect) {
120
+ var relativeTop = rect.top - containerRect.top;
121
+ var relativeLeft = rect.left - containerRect.left;
122
+ switch (position) {
123
+ case 'top':
124
+ styles.top = relativeTop;
125
+ styles.left = relativeLeft + rect.width / 2;
126
+ styles.transform = 'translateX(-50%) translateY(-100%)';
127
+ break;
128
+ case 'bottom':
129
+ styles.top = rect.bottom - containerRect.top;
130
+ styles.left = relativeLeft + rect.width / 2;
131
+ styles.transform = 'translateX(-50%)';
132
+ break;
133
+ case 'top-left':
134
+ styles.top = relativeTop;
135
+ styles.left = relativeLeft;
136
+ styles.transform = 'translateY(-100%)';
137
+ break;
138
+ case 'top-right':
139
+ styles.top = relativeTop;
140
+ styles.left = rect.right - containerRect.left;
141
+ styles.transform = 'translateY(-100%)';
142
+ break;
143
+ case 'bottom-left':
144
+ styles.top = rect.bottom - containerRect.top;
145
+ styles.left = relativeLeft;
146
+ break;
147
+ case 'bottom-right':
148
+ styles.top = rect.bottom - containerRect.top;
149
+ styles.left = rect.right - containerRect.left;
150
+ break;
151
+ case 'left':
152
+ styles.top = relativeTop;
153
+ styles.left = relativeLeft;
154
+ styles.transform = 'translateX(-100%)';
155
+ break;
156
+ case 'right':
157
+ styles.top = relativeTop;
158
+ styles.left = rect.right - containerRect.left;
159
+ break;
160
+ }
161
+ }
162
+ }
105
163
  return styles;
106
164
  };
107
165
  setMenuStyle(calculatePosition());
@@ -135,7 +193,7 @@ var Dropdown = function (_a) {
135
193
  }
136
194
  return undefined;
137
195
  }, [open]);
138
- // Handle scroll to hide dropdown
196
+ // Handle scroll to hide dropdown (optional – you may remove this if you want it to stay open)
139
197
  (0, react_1.useEffect)(function () {
140
198
  var handleScroll = function () {
141
199
  if (open) {