@diwauhris/ui 1.7.33 → 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 -25
  2. package/lib/index.mjs +30 -25
  3. package/package.json +1 -1
package/lib/index.cjs CHANGED
@@ -1229,39 +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
- });
1248
- };
1249
- const closeOnScroll = (e) => {
1250
- if (listRef.current && listRef.current.contains(e.target)) return;
1251
- setIsOpen(false);
1253
+ const raf = requestAnimationFrame(doUpdatePosition);
1254
+ return () => cancelAnimationFrame(raf);
1255
+ }, [isOpen, doUpdatePosition]);
1256
+ (0, react.useEffect)(() => {
1257
+ const onScrollOrResize = () => {
1258
+ if (isOpenRef.current) doUpdatePosition();
1252
1259
  };
1253
- const raf = requestAnimationFrame(updatePosition);
1254
- window.addEventListener("scroll", closeOnScroll, {
1260
+ window.addEventListener("scroll", onScrollOrResize, {
1255
1261
  capture: true,
1256
1262
  passive: true
1257
1263
  });
1258
- window.addEventListener("resize", updatePosition);
1264
+ window.addEventListener("resize", onScrollOrResize);
1259
1265
  return () => {
1260
- cancelAnimationFrame(raf);
1261
- window.removeEventListener("scroll", closeOnScroll, { capture: true });
1262
- window.removeEventListener("resize", updatePosition);
1266
+ window.removeEventListener("scroll", onScrollOrResize, { capture: true });
1267
+ window.removeEventListener("resize", onScrollOrResize);
1263
1268
  };
1264
- }, [isOpen]);
1269
+ }, [doUpdatePosition]);
1265
1270
  (0, react.useEffect)(() => {
1266
1271
  if (!isOpen) setHighlightIndex(-1);
1267
1272
  }, [isOpen]);
package/lib/index.mjs CHANGED
@@ -1205,39 +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
- });
1224
- };
1225
- const closeOnScroll = (e) => {
1226
- if (listRef.current && listRef.current.contains(e.target)) return;
1227
- setIsOpen(false);
1229
+ const raf = requestAnimationFrame(doUpdatePosition);
1230
+ return () => cancelAnimationFrame(raf);
1231
+ }, [isOpen, doUpdatePosition]);
1232
+ useEffect(() => {
1233
+ const onScrollOrResize = () => {
1234
+ if (isOpenRef.current) doUpdatePosition();
1228
1235
  };
1229
- const raf = requestAnimationFrame(updatePosition);
1230
- window.addEventListener("scroll", closeOnScroll, {
1236
+ window.addEventListener("scroll", onScrollOrResize, {
1231
1237
  capture: true,
1232
1238
  passive: true
1233
1239
  });
1234
- window.addEventListener("resize", updatePosition);
1240
+ window.addEventListener("resize", onScrollOrResize);
1235
1241
  return () => {
1236
- cancelAnimationFrame(raf);
1237
- window.removeEventListener("scroll", closeOnScroll, { capture: true });
1238
- window.removeEventListener("resize", updatePosition);
1242
+ window.removeEventListener("scroll", onScrollOrResize, { capture: true });
1243
+ window.removeEventListener("resize", onScrollOrResize);
1239
1244
  };
1240
- }, [isOpen]);
1245
+ }, [doUpdatePosition]);
1241
1246
  useEffect(() => {
1242
1247
  if (!isOpen) setHighlightIndex(-1);
1243
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.33",
4
+ "version": "1.7.35",
5
5
  "type": "module",
6
6
  "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
7
7
  "keywords": [