@x-plat/design-system 0.14.6 → 0.14.7

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 (14) hide show
  1. package/dist/components/Dropdown/index.cjs +41 -13
  2. package/dist/components/Dropdown/index.js +41 -13
  3. package/dist/components/PopOver/index.cjs +41 -13
  4. package/dist/components/PopOver/index.js +41 -13
  5. package/dist/components/Select/index.cjs +41 -13
  6. package/dist/components/Select/index.js +41 -13
  7. package/dist/components/TimePicker/index.cjs +41 -13
  8. package/dist/components/TimePicker/index.js +41 -13
  9. package/dist/components/index.cjs +44 -13
  10. package/dist/components/index.js +44 -13
  11. package/dist/index.cjs +44 -13
  12. package/dist/index.js +44 -13
  13. package/guidelines/MIGRATION.md +37 -0
  14. package/package.json +1 -1
package/dist/components/Dropdown/index.cjs CHANGED
@@ -51,15 +51,21 @@ var import_react = __toESM(require("react"), 1);
51
51
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
52
52
  const [direction, setDirection] = import_react.default.useState("bottom");
53
53
  const directionRef = import_react.default.useRef("bottom");
54
- const calculatePosition = import_react.default.useCallback(() => {
54
+ const sizeRef = import_react.default.useRef(null);
55
+ const calculatePosition = import_react.default.useCallback((remeasure = false) => {
55
56
  const pop = popRef.current;
56
57
  if (!triggerRef.current || !pop) return;
58
+ if (remeasure || !sizeRef.current) {
59
+ sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
60
+ }
61
+ const { w: popW, h: popH } = sizeRef.current;
57
62
  const triggerRect = triggerRef.current.getBoundingClientRect();
58
- const popW = pop.offsetWidth;
59
- const popH = pop.offsetHeight;
60
63
  const viewportHeight = window.innerHeight;
61
64
  const viewportWidth = window.innerWidth;
62
- if (popH === 0 || popW === 0) return;
65
+ if (popH === 0 || popW === 0) {
66
+ sizeRef.current = null;
67
+ return;
68
+ }
63
69
  let next = "bottom";
64
70
  let top;
65
71
  let left;
@@ -82,27 +88,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
82
88
  }
83
89
  }, [triggerRef, popRef]);
84
90
  import_react.default.useLayoutEffect(() => {
85
- if (!enabled) return;
86
- calculatePosition();
87
- const raf = requestAnimationFrame(calculatePosition);
91
+ if (!enabled) {
92
+ sizeRef.current = null;
93
+ return;
94
+ }
95
+ calculatePosition(true);
96
+ const raf = requestAnimationFrame(() => calculatePosition(true));
88
97
  return () => cancelAnimationFrame(raf);
89
98
  }, [calculatePosition, enabled]);
90
99
  import_react.default.useEffect(() => {
91
100
  if (!enabled || !popRef.current) return;
92
101
  const observer = new ResizeObserver(() => {
93
- calculatePosition();
102
+ calculatePosition(true);
94
103
  });
95
104
  observer.observe(popRef.current);
96
105
  return () => observer.disconnect();
97
106
  }, [calculatePosition, enabled, popRef]);
98
107
  import_react.default.useEffect(() => {
99
108
  if (!enabled) return;
100
- const onScrollOrResize = () => calculatePosition();
101
- window.addEventListener("resize", onScrollOrResize, { passive: true });
102
- window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
109
+ const onScroll = () => calculatePosition();
110
+ const onResize = () => calculatePosition(true);
111
+ window.addEventListener("resize", onResize, { passive: true });
112
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
103
113
  return () => {
104
- window.removeEventListener("resize", onScrollOrResize);
105
- window.removeEventListener("scroll", onScrollOrResize, true);
114
+ window.removeEventListener("resize", onResize);
115
+ window.removeEventListener("scroll", onScroll, true);
106
116
  };
107
117
  }, [calculatePosition, enabled]);
108
118
  return { direction };
@@ -157,6 +167,23 @@ var useEscapeKey = (enabled, onEscape) => {
157
167
  return () => document.removeEventListener("keydown", onKey);
158
168
  }, [enabled, onEscape]);
159
169
  };
170
+ var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
171
+ const onCloseRef = import_react3.default.useRef(onClose);
172
+ onCloseRef.current = onClose;
173
+ import_react3.default.useEffect(() => {
174
+ if (!enabled) return;
175
+ const onScroll = (e) => {
176
+ const target = e.target;
177
+ if (target === document || target === document.documentElement || target === document.body) {
178
+ return;
179
+ }
180
+ if (target instanceof Node && popRef.current?.contains(target)) return;
181
+ onCloseRef.current();
182
+ };
183
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
184
+ return () => window.removeEventListener("scroll", onScroll, true);
185
+ }, [enabled, popRef]);
186
+ };
160
187
 
161
188
  // ../../node_modules/clsx/dist/clsx.mjs
162
189
  function r(e) {
@@ -185,6 +212,7 @@ var Dropdown = (props) => {
185
212
  const menuRef = import_react4.default.useRef(null);
186
213
  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
187
214
  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
215
+ useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
188
216
  useEscapeKey(isOpen, () => {
189
217
  setIsOpen(false);
190
218
  triggerRef.current?.focus({ preventScroll: true });
package/dist/components/Dropdown/index.js CHANGED
@@ -15,15 +15,21 @@ import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
16
  const [direction, setDirection] = React.useState("bottom");
17
17
  const directionRef = React.useRef("bottom");
18
- const calculatePosition = React.useCallback(() => {
18
+ const sizeRef = React.useRef(null);
19
+ const calculatePosition = React.useCallback((remeasure = false) => {
19
20
  const pop = popRef.current;
20
21
  if (!triggerRef.current || !pop) return;
22
+ if (remeasure || !sizeRef.current) {
23
+ sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
24
+ }
25
+ const { w: popW, h: popH } = sizeRef.current;
21
26
  const triggerRect = triggerRef.current.getBoundingClientRect();
22
- const popW = pop.offsetWidth;
23
- const popH = pop.offsetHeight;
24
27
  const viewportHeight = window.innerHeight;
25
28
  const viewportWidth = window.innerWidth;
26
- if (popH === 0 || popW === 0) return;
29
+ if (popH === 0 || popW === 0) {
30
+ sizeRef.current = null;
31
+ return;
32
+ }
27
33
  let next = "bottom";
28
34
  let top;
29
35
  let left;
@@ -46,27 +52,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
46
52
  }
47
53
  }, [triggerRef, popRef]);
48
54
  React.useLayoutEffect(() => {
49
- if (!enabled) return;
50
- calculatePosition();
51
- const raf = requestAnimationFrame(calculatePosition);
55
+ if (!enabled) {
56
+ sizeRef.current = null;
57
+ return;
58
+ }
59
+ calculatePosition(true);
60
+ const raf = requestAnimationFrame(() => calculatePosition(true));
52
61
  return () => cancelAnimationFrame(raf);
53
62
  }, [calculatePosition, enabled]);
54
63
  React.useEffect(() => {
55
64
  if (!enabled || !popRef.current) return;
56
65
  const observer = new ResizeObserver(() => {
57
- calculatePosition();
66
+ calculatePosition(true);
58
67
  });
59
68
  observer.observe(popRef.current);
60
69
  return () => observer.disconnect();
61
70
  }, [calculatePosition, enabled, popRef]);
62
71
  React.useEffect(() => {
63
72
  if (!enabled) return;
64
- const onScrollOrResize = () => calculatePosition();
65
- window.addEventListener("resize", onScrollOrResize, { passive: true });
66
- window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
73
+ const onScroll = () => calculatePosition();
74
+ const onResize = () => calculatePosition(true);
75
+ window.addEventListener("resize", onResize, { passive: true });
76
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
67
77
  return () => {
68
- window.removeEventListener("resize", onScrollOrResize);
69
- window.removeEventListener("scroll", onScrollOrResize, true);
78
+ window.removeEventListener("resize", onResize);
79
+ window.removeEventListener("scroll", onScroll, true);
70
80
  };
71
81
  }, [calculatePosition, enabled]);
72
82
  return { direction };
@@ -121,6 +131,23 @@ var useEscapeKey = (enabled, onEscape) => {
121
131
  return () => document.removeEventListener("keydown", onKey);
122
132
  }, [enabled, onEscape]);
123
133
  };
134
+ var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
135
+ const onCloseRef = React3.useRef(onClose);
136
+ onCloseRef.current = onClose;
137
+ React3.useEffect(() => {
138
+ if (!enabled) return;
139
+ const onScroll = (e) => {
140
+ const target = e.target;
141
+ if (target === document || target === document.documentElement || target === document.body) {
142
+ return;
143
+ }
144
+ if (target instanceof Node && popRef.current?.contains(target)) return;
145
+ onCloseRef.current();
146
+ };
147
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
148
+ return () => window.removeEventListener("scroll", onScroll, true);
149
+ }, [enabled, popRef]);
150
+ };
124
151
 
125
152
  // ../../node_modules/clsx/dist/clsx.mjs
126
153
  function r(e) {
@@ -149,6 +176,7 @@ var Dropdown = (props) => {
149
176
  const menuRef = React4.useRef(null);
150
177
  const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
151
178
  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
179
+ useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
152
180
  useEscapeKey(isOpen, () => {
153
181
  setIsOpen(false);
154
182
  triggerRef.current?.focus({ preventScroll: true });
package/dist/components/PopOver/index.cjs CHANGED
@@ -51,15 +51,21 @@ var import_react = __toESM(require("react"), 1);
51
51
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
52
52
  const [direction, setDirection] = import_react.default.useState("bottom");
53
53
  const directionRef = import_react.default.useRef("bottom");
54
- const calculatePosition = import_react.default.useCallback(() => {
54
+ const sizeRef = import_react.default.useRef(null);
55
+ const calculatePosition = import_react.default.useCallback((remeasure = false) => {
55
56
  const pop = popRef.current;
56
57
  if (!triggerRef.current || !pop) return;
58
+ if (remeasure || !sizeRef.current) {
59
+ sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
60
+ }
61
+ const { w: popW, h: popH } = sizeRef.current;
57
62
  const triggerRect = triggerRef.current.getBoundingClientRect();
58
- const popW = pop.offsetWidth;
59
- const popH = pop.offsetHeight;
60
63
  const viewportHeight = window.innerHeight;
61
64
  const viewportWidth = window.innerWidth;
62
- if (popH === 0 || popW === 0) return;
65
+ if (popH === 0 || popW === 0) {
66
+ sizeRef.current = null;
67
+ return;
68
+ }
63
69
  let next = "bottom";
64
70
  let top;
65
71
  let left;
@@ -82,27 +88,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
82
88
  }
83
89
  }, [triggerRef, popRef]);
84
90
  import_react.default.useLayoutEffect(() => {
85
- if (!enabled) return;
86
- calculatePosition();
87
- const raf = requestAnimationFrame(calculatePosition);
91
+ if (!enabled) {
92
+ sizeRef.current = null;
93
+ return;
94
+ }
95
+ calculatePosition(true);
96
+ const raf = requestAnimationFrame(() => calculatePosition(true));
88
97
  return () => cancelAnimationFrame(raf);
89
98
  }, [calculatePosition, enabled]);
90
99
  import_react.default.useEffect(() => {
91
100
  if (!enabled || !popRef.current) return;
92
101
  const observer = new ResizeObserver(() => {
93
- calculatePosition();
102
+ calculatePosition(true);
94
103
  });
95
104
  observer.observe(popRef.current);
96
105
  return () => observer.disconnect();
97
106
  }, [calculatePosition, enabled, popRef]);
98
107
  import_react.default.useEffect(() => {
99
108
  if (!enabled) return;
100
- const onScrollOrResize = () => calculatePosition();
101
- window.addEventListener("resize", onScrollOrResize, { passive: true });
102
- window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
109
+ const onScroll = () => calculatePosition();
110
+ const onResize = () => calculatePosition(true);
111
+ window.addEventListener("resize", onResize, { passive: true });
112
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
103
113
  return () => {
104
- window.removeEventListener("resize", onScrollOrResize);
105
- window.removeEventListener("scroll", onScrollOrResize, true);
114
+ window.removeEventListener("resize", onResize);
115
+ window.removeEventListener("scroll", onScroll, true);
106
116
  };
107
117
  }, [calculatePosition, enabled]);
108
118
  return { direction };
@@ -157,6 +167,23 @@ var useEscapeKey = (enabled, onEscape) => {
157
167
  return () => document.removeEventListener("keydown", onKey);
158
168
  }, [enabled, onEscape]);
159
169
  };
170
+ var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
171
+ const onCloseRef = import_react3.default.useRef(onClose);
172
+ onCloseRef.current = onClose;
173
+ import_react3.default.useEffect(() => {
174
+ if (!enabled) return;
175
+ const onScroll = (e) => {
176
+ const target = e.target;
177
+ if (target === document || target === document.documentElement || target === document.body) {
178
+ return;
179
+ }
180
+ if (target instanceof Node && popRef.current?.contains(target)) return;
181
+ onCloseRef.current();
182
+ };
183
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
184
+ return () => window.removeEventListener("scroll", onScroll, true);
185
+ }, [enabled, popRef]);
186
+ };
160
187
 
161
188
  // ../../node_modules/clsx/dist/clsx.mjs
162
189
  function r(e) {
@@ -183,6 +210,7 @@ var PopOver = (props) => {
183
210
  const [localOpen, setLocalOpen] = import_react4.default.useState(false);
184
211
  const [eventTrigger, setEventTrigger] = import_react4.default.useState(false);
185
212
  useClickOutside_default([popRef, triggerRef], onClose, isOpen);
213
+ useCloseOnContainerScroll(isOpen, popRef, onClose);
186
214
  useEscapeKey(isOpen, () => {
187
215
  onClose();
188
216
  triggerRef.current?.focus({ preventScroll: true });
package/dist/components/PopOver/index.js CHANGED
@@ -15,15 +15,21 @@ import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
16
  const [direction, setDirection] = React.useState("bottom");
17
17
  const directionRef = React.useRef("bottom");
18
- const calculatePosition = React.useCallback(() => {
18
+ const sizeRef = React.useRef(null);
19
+ const calculatePosition = React.useCallback((remeasure = false) => {
19
20
  const pop = popRef.current;
20
21
  if (!triggerRef.current || !pop) return;
22
+ if (remeasure || !sizeRef.current) {
23
+ sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
24
+ }
25
+ const { w: popW, h: popH } = sizeRef.current;
21
26
  const triggerRect = triggerRef.current.getBoundingClientRect();
22
- const popW = pop.offsetWidth;
23
- const popH = pop.offsetHeight;
24
27
  const viewportHeight = window.innerHeight;
25
28
  const viewportWidth = window.innerWidth;
26
- if (popH === 0 || popW === 0) return;
29
+ if (popH === 0 || popW === 0) {
30
+ sizeRef.current = null;
31
+ return;
32
+ }
27
33
  let next = "bottom";
28
34
  let top;
29
35
  let left;
@@ -46,27 +52,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
46
52
  }
47
53
  }, [triggerRef, popRef]);
48
54
  React.useLayoutEffect(() => {
49
- if (!enabled) return;
50
- calculatePosition();
51
- const raf = requestAnimationFrame(calculatePosition);
55
+ if (!enabled) {
56
+ sizeRef.current = null;
57
+ return;
58
+ }
59
+ calculatePosition(true);
60
+ const raf = requestAnimationFrame(() => calculatePosition(true));
52
61
  return () => cancelAnimationFrame(raf);
53
62
  }, [calculatePosition, enabled]);
54
63
  React.useEffect(() => {
55
64
  if (!enabled || !popRef.current) return;
56
65
  const observer = new ResizeObserver(() => {
57
- calculatePosition();
66
+ calculatePosition(true);
58
67
  });
59
68
  observer.observe(popRef.current);
60
69
  return () => observer.disconnect();
61
70
  }, [calculatePosition, enabled, popRef]);
62
71
  React.useEffect(() => {
63
72
  if (!enabled) return;
64
- const onScrollOrResize = () => calculatePosition();
65
- window.addEventListener("resize", onScrollOrResize, { passive: true });
66
- window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
73
+ const onScroll = () => calculatePosition();
74
+ const onResize = () => calculatePosition(true);
75
+ window.addEventListener("resize", onResize, { passive: true });
76
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
67
77
  return () => {
68
- window.removeEventListener("resize", onScrollOrResize);
69
- window.removeEventListener("scroll", onScrollOrResize, true);
78
+ window.removeEventListener("resize", onResize);
79
+ window.removeEventListener("scroll", onScroll, true);
70
80
  };
71
81
  }, [calculatePosition, enabled]);
72
82
  return { direction };
@@ -121,6 +131,23 @@ var useEscapeKey = (enabled, onEscape) => {
121
131
  return () => document.removeEventListener("keydown", onKey);
122
132
  }, [enabled, onEscape]);
123
133
  };
134
+ var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
135
+ const onCloseRef = React3.useRef(onClose);
136
+ onCloseRef.current = onClose;
137
+ React3.useEffect(() => {
138
+ if (!enabled) return;
139
+ const onScroll = (e) => {
140
+ const target = e.target;
141
+ if (target === document || target === document.documentElement || target === document.body) {
142
+ return;
143
+ }
144
+ if (target instanceof Node && popRef.current?.contains(target)) return;
145
+ onCloseRef.current();
146
+ };
147
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
148
+ return () => window.removeEventListener("scroll", onScroll, true);
149
+ }, [enabled, popRef]);
150
+ };
124
151
 
125
152
  // ../../node_modules/clsx/dist/clsx.mjs
126
153
  function r(e) {
@@ -147,6 +174,7 @@ var PopOver = (props) => {
147
174
  const [localOpen, setLocalOpen] = React4.useState(false);
148
175
  const [eventTrigger, setEventTrigger] = React4.useState(false);
149
176
  useClickOutside_default([popRef, triggerRef], onClose, isOpen);
177
+ useCloseOnContainerScroll(isOpen, popRef, onClose);
150
178
  useEscapeKey(isOpen, () => {
151
179
  onClose();
152
180
  triggerRef.current?.focus({ preventScroll: true });
package/dist/components/Select/index.cjs CHANGED
@@ -52,15 +52,21 @@ var import_react = __toESM(require("react"), 1);
52
52
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
53
53
  const [direction, setDirection] = import_react.default.useState("bottom");
54
54
  const directionRef = import_react.default.useRef("bottom");
55
- const calculatePosition = import_react.default.useCallback(() => {
55
+ const sizeRef = import_react.default.useRef(null);
56
+ const calculatePosition = import_react.default.useCallback((remeasure = false) => {
56
57
  const pop = popRef.current;
57
58
  if (!triggerRef.current || !pop) return;
59
+ if (remeasure || !sizeRef.current) {
60
+ sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
61
+ }
62
+ const { w: popW, h: popH } = sizeRef.current;
58
63
  const triggerRect = triggerRef.current.getBoundingClientRect();
59
- const popW = pop.offsetWidth;
60
- const popH = pop.offsetHeight;
61
64
  const viewportHeight = window.innerHeight;
62
65
  const viewportWidth = window.innerWidth;
63
- if (popH === 0 || popW === 0) return;
66
+ if (popH === 0 || popW === 0) {
67
+ sizeRef.current = null;
68
+ return;
69
+ }
64
70
  let next = "bottom";
65
71
  let top;
66
72
  let left;
@@ -83,27 +89,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
83
89
  }
84
90
  }, [triggerRef, popRef]);
85
91
  import_react.default.useLayoutEffect(() => {
86
- if (!enabled) return;
87
- calculatePosition();
88
- const raf = requestAnimationFrame(calculatePosition);
92
+ if (!enabled) {
93
+ sizeRef.current = null;
94
+ return;
95
+ }
96
+ calculatePosition(true);
97
+ const raf = requestAnimationFrame(() => calculatePosition(true));
89
98
  return () => cancelAnimationFrame(raf);
90
99
  }, [calculatePosition, enabled]);
91
100
  import_react.default.useEffect(() => {
92
101
  if (!enabled || !popRef.current) return;
93
102
  const observer = new ResizeObserver(() => {
94
- calculatePosition();
103
+ calculatePosition(true);
95
104
  });
96
105
  observer.observe(popRef.current);
97
106
  return () => observer.disconnect();
98
107
  }, [calculatePosition, enabled, popRef]);
99
108
  import_react.default.useEffect(() => {
100
109
  if (!enabled) return;
101
- const onScrollOrResize = () => calculatePosition();
102
- window.addEventListener("resize", onScrollOrResize, { passive: true });
103
- window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
110
+ const onScroll = () => calculatePosition();
111
+ const onResize = () => calculatePosition(true);
112
+ window.addEventListener("resize", onResize, { passive: true });
113
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
104
114
  return () => {
105
- window.removeEventListener("resize", onScrollOrResize);
106
- window.removeEventListener("scroll", onScrollOrResize, true);
115
+ window.removeEventListener("resize", onResize);
116
+ window.removeEventListener("scroll", onScroll, true);
107
117
  };
108
118
  }, [calculatePosition, enabled]);
109
119
  return { direction };
@@ -158,6 +168,23 @@ var useEscapeKey = (enabled, onEscape) => {
158
168
  return () => document.removeEventListener("keydown", onKey);
159
169
  }, [enabled, onEscape]);
160
170
  };
171
+ var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
172
+ const onCloseRef = import_react3.default.useRef(onClose);
173
+ onCloseRef.current = onClose;
174
+ import_react3.default.useEffect(() => {
175
+ if (!enabled) return;
176
+ const onScroll = (e) => {
177
+ const target = e.target;
178
+ if (target === document || target === document.documentElement || target === document.body) {
179
+ return;
180
+ }
181
+ if (target instanceof Node && popRef.current?.contains(target)) return;
182
+ onCloseRef.current();
183
+ };
184
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
185
+ return () => window.removeEventListener("scroll", onScroll, true);
186
+ }, [enabled, popRef]);
187
+ };
161
188
 
162
189
  // src/tokens/svg/action/CopyIcon.tsx
163
190
  var import_jsx_runtime = require("react/jsx-runtime");
@@ -1314,6 +1341,7 @@ var SelectRoot = (props) => {
1314
1341
  }, []);
1315
1342
  const toggle = import_react6.default.useCallback(() => setOpen((prev) => !prev), []);
1316
1343
  useClickOutside_default([contentRef, triggerRef], close, isOpen);
1344
+ useCloseOnContainerScroll(isOpen, contentRef, close);
1317
1345
  useEscapeKey(isOpen, () => {
1318
1346
  close();
1319
1347
  triggerRef.current?.focus({ preventScroll: true });
package/dist/components/Select/index.js CHANGED
@@ -15,15 +15,21 @@ import React from "react";
15
15
  var useAutoPosition = (triggerRef, popRef, enabled = true) => {
16
16
  const [direction, setDirection] = React.useState("bottom");
17
17
  const directionRef = React.useRef("bottom");
18
- const calculatePosition = React.useCallback(() => {
18
+ const sizeRef = React.useRef(null);
19
+ const calculatePosition = React.useCallback((remeasure = false) => {
19
20
  const pop = popRef.current;
20
21
  if (!triggerRef.current || !pop) return;
22
+ if (remeasure || !sizeRef.current) {
23
+ sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
24
+ }
25
+ const { w: popW, h: popH } = sizeRef.current;
21
26
  const triggerRect = triggerRef.current.getBoundingClientRect();
22
- const popW = pop.offsetWidth;
23
- const popH = pop.offsetHeight;
24
27
  const viewportHeight = window.innerHeight;
25
28
  const viewportWidth = window.innerWidth;
26
- if (popH === 0 || popW === 0) return;
29
+ if (popH === 0 || popW === 0) {
30
+ sizeRef.current = null;
31
+ return;
32
+ }
27
33
  let next = "bottom";
28
34
  let top;
29
35
  let left;
@@ -46,27 +52,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
46
52
  }
47
53
  }, [triggerRef, popRef]);
48
54
  React.useLayoutEffect(() => {
49
- if (!enabled) return;
50
- calculatePosition();
51
- const raf = requestAnimationFrame(calculatePosition);
55
+ if (!enabled) {
56
+ sizeRef.current = null;
57
+ return;
58
+ }
59
+ calculatePosition(true);
60
+ const raf = requestAnimationFrame(() => calculatePosition(true));
52
61
  return () => cancelAnimationFrame(raf);
53
62
  }, [calculatePosition, enabled]);
54
63
  React.useEffect(() => {
55
64
  if (!enabled || !popRef.current) return;
56
65
  const observer = new ResizeObserver(() => {
57
- calculatePosition();
66
+ calculatePosition(true);
58
67
  });
59
68
  observer.observe(popRef.current);
60
69
  return () => observer.disconnect();
61
70
  }, [calculatePosition, enabled, popRef]);
62
71
  React.useEffect(() => {
63
72
  if (!enabled) return;
64
- const onScrollOrResize = () => calculatePosition();
65
- window.addEventListener("resize", onScrollOrResize, { passive: true });
66
- window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
73
+ const onScroll = () => calculatePosition();
74
+ const onResize = () => calculatePosition(true);
75
+ window.addEventListener("resize", onResize, { passive: true });
76
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
67
77
  return () => {
68
- window.removeEventListener("resize", onScrollOrResize);
69
- window.removeEventListener("scroll", onScrollOrResize, true);
78
+ window.removeEventListener("resize", onResize);
79
+ window.removeEventListener("scroll", onScroll, true);
70
80
  };
71
81
  }, [calculatePosition, enabled]);
72
82
  return { direction };
@@ -121,6 +131,23 @@ var useEscapeKey = (enabled, onEscape) => {
121
131
  return () => document.removeEventListener("keydown", onKey);
122
132
  }, [enabled, onEscape]);
123
133
  };
134
+ var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
135
+ const onCloseRef = React3.useRef(onClose);
136
+ onCloseRef.current = onClose;
137
+ React3.useEffect(() => {
138
+ if (!enabled) return;
139
+ const onScroll = (e) => {
140
+ const target = e.target;
141
+ if (target === document || target === document.documentElement || target === document.body) {
142
+ return;
143
+ }
144
+ if (target instanceof Node && popRef.current?.contains(target)) return;
145
+ onCloseRef.current();
146
+ };
147
+ window.addEventListener("scroll", onScroll, { passive: true, capture: true });
148
+ return () => window.removeEventListener("scroll", onScroll, true);
149
+ }, [enabled, popRef]);
150
+ };
124
151
 
125
152
  // src/tokens/svg/action/CopyIcon.tsx
126
153
  import { jsx, jsxs } from "react/jsx-runtime";
@@ -1277,6 +1304,7 @@ var SelectRoot = (props) => {
1277
1304
  }, []);
1278
1305
  const toggle = React6.useCallback(() => setOpen((prev) => !prev), []);
1279
1306
  useClickOutside_default([contentRef, triggerRef], close, isOpen);
1307
+ useCloseOnContainerScroll(isOpen, contentRef, close);
1280
1308
  useEscapeKey(isOpen, () => {
1281
1309
  close();
1282
1310
  triggerRef.current?.focus({ preventScroll: true });