@diwauhris/ui 1.7.34 → 1.7.36

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/lib/index.cjs +36 -27
  2. package/lib/index.mjs +36 -27
  3. package/package.json +1 -1
package/lib/index.cjs CHANGED
@@ -1229,35 +1229,44 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
1229
1229
  document.addEventListener("mousedown", handleClickOutside);
1230
1230
  return () => document.removeEventListener("mousedown", handleClickOutside);
1231
1231
  }, []);
1232
+ const isOpenRef = (0, react.useRef)(isOpen);
1232
1233
  (0, react.useEffect)(() => {
1233
- if (!isOpen) return;
1234
- const updatePosition = () => {
1235
- if (!wrapperRef.current) return;
1236
- const rect = wrapperRef.current.getBoundingClientRect();
1237
- const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
1238
- setPanelStyle({
1239
- position: "fixed",
1240
- top: dropUp ? void 0 : rect.bottom + 4,
1241
- bottom: dropUp ? window.innerHeight - rect.top + 4 : void 0,
1242
- left: rect.left,
1243
- zIndex: 9999,
1244
- width: rect.width,
1245
- pointerEvents: "auto",
1246
- overscrollBehavior: "contain"
1247
- });
1248
- };
1249
- const raf = requestAnimationFrame(updatePosition);
1250
- window.addEventListener("scroll", updatePosition, {
1251
- capture: true,
1252
- passive: true
1253
- });
1254
- window.addEventListener("resize", updatePosition);
1255
- return () => {
1256
- cancelAnimationFrame(raf);
1257
- window.removeEventListener("scroll", updatePosition, { capture: true });
1258
- window.removeEventListener("resize", updatePosition);
1234
+ isOpenRef.current = isOpen;
1235
+ });
1236
+ (0, react.useEffect)(() => {
1237
+ let prevTop;
1238
+ let prevBottom;
1239
+ let prevLeft = 0;
1240
+ let prevWidth = 0;
1241
+ let rafId;
1242
+ const loop = () => {
1243
+ if (isOpenRef.current && wrapperRef.current) {
1244
+ const rect = wrapperRef.current.getBoundingClientRect();
1245
+ const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
1246
+ const nextTop = dropUp ? void 0 : rect.bottom + 4;
1247
+ const nextBottom = dropUp ? window.innerHeight - rect.top + 4 : void 0;
1248
+ if (nextTop !== prevTop || nextBottom !== prevBottom || rect.left !== prevLeft || rect.width !== prevWidth) {
1249
+ prevTop = nextTop;
1250
+ prevBottom = nextBottom;
1251
+ prevLeft = rect.left;
1252
+ prevWidth = rect.width;
1253
+ setPanelStyle({
1254
+ position: "fixed",
1255
+ top: nextTop,
1256
+ bottom: nextBottom,
1257
+ left: rect.left,
1258
+ zIndex: 9999,
1259
+ width: rect.width,
1260
+ pointerEvents: "auto",
1261
+ overscrollBehavior: "contain"
1262
+ });
1263
+ }
1264
+ }
1265
+ rafId = requestAnimationFrame(loop);
1259
1266
  };
1260
- }, [isOpen]);
1267
+ rafId = requestAnimationFrame(loop);
1268
+ return () => cancelAnimationFrame(rafId);
1269
+ }, []);
1261
1270
  (0, react.useEffect)(() => {
1262
1271
  if (!isOpen) setHighlightIndex(-1);
1263
1272
  }, [isOpen]);
package/lib/index.mjs CHANGED
@@ -1205,35 +1205,44 @@ function Combobox({ value: controlledValue, defaultValue = "", onChange, options
1205
1205
  document.addEventListener("mousedown", handleClickOutside);
1206
1206
  return () => document.removeEventListener("mousedown", handleClickOutside);
1207
1207
  }, []);
1208
+ const isOpenRef = useRef(isOpen);
1208
1209
  useEffect(() => {
1209
- if (!isOpen) return;
1210
- const updatePosition = () => {
1211
- if (!wrapperRef.current) return;
1212
- const rect = wrapperRef.current.getBoundingClientRect();
1213
- const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
1214
- setPanelStyle({
1215
- position: "fixed",
1216
- top: dropUp ? void 0 : rect.bottom + 4,
1217
- bottom: dropUp ? window.innerHeight - rect.top + 4 : void 0,
1218
- left: rect.left,
1219
- zIndex: 9999,
1220
- width: rect.width,
1221
- pointerEvents: "auto",
1222
- overscrollBehavior: "contain"
1223
- });
1224
- };
1225
- const raf = requestAnimationFrame(updatePosition);
1226
- window.addEventListener("scroll", updatePosition, {
1227
- capture: true,
1228
- passive: true
1229
- });
1230
- window.addEventListener("resize", updatePosition);
1231
- return () => {
1232
- cancelAnimationFrame(raf);
1233
- window.removeEventListener("scroll", updatePosition, { capture: true });
1234
- window.removeEventListener("resize", updatePosition);
1210
+ isOpenRef.current = isOpen;
1211
+ });
1212
+ useEffect(() => {
1213
+ let prevTop;
1214
+ let prevBottom;
1215
+ let prevLeft = 0;
1216
+ let prevWidth = 0;
1217
+ let rafId;
1218
+ const loop = () => {
1219
+ if (isOpenRef.current && wrapperRef.current) {
1220
+ const rect = wrapperRef.current.getBoundingClientRect();
1221
+ const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
1222
+ const nextTop = dropUp ? void 0 : rect.bottom + 4;
1223
+ const nextBottom = dropUp ? window.innerHeight - rect.top + 4 : void 0;
1224
+ if (nextTop !== prevTop || nextBottom !== prevBottom || rect.left !== prevLeft || rect.width !== prevWidth) {
1225
+ prevTop = nextTop;
1226
+ prevBottom = nextBottom;
1227
+ prevLeft = rect.left;
1228
+ prevWidth = rect.width;
1229
+ setPanelStyle({
1230
+ position: "fixed",
1231
+ top: nextTop,
1232
+ bottom: nextBottom,
1233
+ left: rect.left,
1234
+ zIndex: 9999,
1235
+ width: rect.width,
1236
+ pointerEvents: "auto",
1237
+ overscrollBehavior: "contain"
1238
+ });
1239
+ }
1240
+ }
1241
+ rafId = requestAnimationFrame(loop);
1235
1242
  };
1236
- }, [isOpen]);
1243
+ rafId = requestAnimationFrame(loop);
1244
+ return () => cancelAnimationFrame(rafId);
1245
+ }, []);
1237
1246
  useEffect(() => {
1238
1247
  if (!isOpen) setHighlightIndex(-1);
1239
1248
  }, [isOpen]);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@diwauhris/ui",
3
3
  "private": false,
4
- "version": "1.7.34",
4
+ "version": "1.7.36",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [