@diwauhris/ui 1.7.34 → 1.7.35

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 +30 -21
  2. package/lib/index.mjs +30 -21
  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);
1233
+ (0, react.useEffect)(() => {
1234
+ isOpenRef.current = isOpen;
1235
+ });
1236
+ const doUpdatePosition = (0, react.useCallback)(() => {
1237
+ if (!wrapperRef.current) return;
1238
+ const rect = wrapperRef.current.getBoundingClientRect();
1239
+ const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
1240
+ setPanelStyle({
1241
+ position: "fixed",
1242
+ top: dropUp ? void 0 : rect.bottom + 4,
1243
+ bottom: dropUp ? window.innerHeight - rect.top + 4 : void 0,
1244
+ left: rect.left,
1245
+ zIndex: 9999,
1246
+ width: rect.width,
1247
+ pointerEvents: "auto",
1248
+ overscrollBehavior: "contain"
1249
+ });
1250
+ }, []);
1232
1251
  (0, react.useEffect)(() => {
1233
1252
  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
- });
1253
+ const raf = requestAnimationFrame(doUpdatePosition);
1254
+ return () => cancelAnimationFrame(raf);
1255
+ }, [isOpen, doUpdatePosition]);
1256
+ (0, react.useEffect)(() => {
1257
+ const onScrollOrResize = () => {
1258
+ if (isOpenRef.current) doUpdatePosition();
1248
1259
  };
1249
- const raf = requestAnimationFrame(updatePosition);
1250
- window.addEventListener("scroll", updatePosition, {
1260
+ window.addEventListener("scroll", onScrollOrResize, {
1251
1261
  capture: true,
1252
1262
  passive: true
1253
1263
  });
1254
- window.addEventListener("resize", updatePosition);
1264
+ window.addEventListener("resize", onScrollOrResize);
1255
1265
  return () => {
1256
- cancelAnimationFrame(raf);
1257
- window.removeEventListener("scroll", updatePosition, { capture: true });
1258
- window.removeEventListener("resize", updatePosition);
1266
+ window.removeEventListener("scroll", onScrollOrResize, { capture: true });
1267
+ window.removeEventListener("resize", onScrollOrResize);
1259
1268
  };
1260
- }, [isOpen]);
1269
+ }, [doUpdatePosition]);
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);
1209
+ useEffect(() => {
1210
+ isOpenRef.current = isOpen;
1211
+ });
1212
+ const doUpdatePosition = useCallback(() => {
1213
+ if (!wrapperRef.current) return;
1214
+ const rect = wrapperRef.current.getBoundingClientRect();
1215
+ const dropUp = window.innerHeight - rect.bottom < 240 && rect.top > 240;
1216
+ setPanelStyle({
1217
+ position: "fixed",
1218
+ top: dropUp ? void 0 : rect.bottom + 4,
1219
+ bottom: dropUp ? window.innerHeight - rect.top + 4 : void 0,
1220
+ left: rect.left,
1221
+ zIndex: 9999,
1222
+ width: rect.width,
1223
+ pointerEvents: "auto",
1224
+ overscrollBehavior: "contain"
1225
+ });
1226
+ }, []);
1208
1227
  useEffect(() => {
1209
1228
  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
- });
1229
+ const raf = requestAnimationFrame(doUpdatePosition);
1230
+ return () => cancelAnimationFrame(raf);
1231
+ }, [isOpen, doUpdatePosition]);
1232
+ useEffect(() => {
1233
+ const onScrollOrResize = () => {
1234
+ if (isOpenRef.current) doUpdatePosition();
1224
1235
  };
1225
- const raf = requestAnimationFrame(updatePosition);
1226
- window.addEventListener("scroll", updatePosition, {
1236
+ window.addEventListener("scroll", onScrollOrResize, {
1227
1237
  capture: true,
1228
1238
  passive: true
1229
1239
  });
1230
- window.addEventListener("resize", updatePosition);
1240
+ window.addEventListener("resize", onScrollOrResize);
1231
1241
  return () => {
1232
- cancelAnimationFrame(raf);
1233
- window.removeEventListener("scroll", updatePosition, { capture: true });
1234
- window.removeEventListener("resize", updatePosition);
1242
+ window.removeEventListener("scroll", onScrollOrResize, { capture: true });
1243
+ window.removeEventListener("resize", onScrollOrResize);
1235
1244
  };
1236
- }, [isOpen]);
1245
+ }, [doUpdatePosition]);
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.35",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [