@tamagui/use-element-layout 2.7.7 → 3.0.0-beta.1093.1

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.
@@ -3,358 +3,305 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
3
  var __getOwnPropNames = Object.getOwnPropertyNames;
4
4
  var __hasOwnProp = Object.prototype.hasOwnProperty;
5
5
  var __export = (target, all) => {
6
- for (var name in all) __defProp(target, name, {
7
- get: all[name],
8
- enumerable: true
9
- });
6
+ for (var name in all) __defProp(target, name, {
7
+ get: all[name],
8
+ enumerable: true
9
+ });
10
10
  };
11
11
  var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
14
- get: () => from[key],
15
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
16
- });
17
- }
18
- return to;
12
+ if (from && typeof from === "object" || typeof from === "function") {
13
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
14
+ get: () => from[key],
15
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
16
+ });
17
+ }
18
+ return to;
19
19
  };
20
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
21
- value: true
22
- }), mod);
20
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
23
21
  var index_exports = {};
24
22
  __export(index_exports, {
25
- LayoutMeasurementController: () => LayoutMeasurementController,
26
- createMeasure: () => createMeasure,
27
- createMeasureInWindow: () => createMeasureInWindow,
28
- createMeasureLayout: () => createMeasureLayout,
29
- enable: () => enable,
30
- getBoundingClientRectAsync: () => getBoundingClientRectAsync,
31
- getElementLayoutEvent: () => getElementLayoutEvent,
32
- measure: () => measure,
33
- measureInWindow: () => measureInWindow,
34
- measureLayout: () => measureLayout,
35
- measureNode: () => measureNode,
36
- registerLayoutNode: () => registerLayoutNode,
37
- setOnLayoutStrategy: () => setOnLayoutStrategy,
38
- useElementLayout: () => useElementLayout
23
+ LayoutMeasurementController: () => LayoutMeasurementController,
24
+ createMeasure: () => createMeasure,
25
+ createMeasureInWindow: () => createMeasureInWindow,
26
+ createMeasureLayout: () => createMeasureLayout,
27
+ enable: () => enable,
28
+ getBoundingClientRectAsync: () => getBoundingClientRectAsync,
29
+ getElementLayoutEvent: () => getElementLayoutEvent,
30
+ measure: () => measure,
31
+ measureInWindow: () => measureInWindow,
32
+ measureLayout: () => measureLayout,
33
+ measureNode: () => measureNode,
34
+ registerLayoutNode: () => registerLayoutNode,
35
+ useElementLayout: () => useElementLayout
39
36
  });
40
37
  module.exports = __toCommonJS(index_exports);
41
38
  var import_constants = require("@tamagui/constants");
42
39
  var import_react = require("react");
43
40
  var import_jsx_runtime = require("react/jsx-runtime");
44
- const LayoutHandlers = /* @__PURE__ */new WeakMap();
45
- const LayoutDisableKey = /* @__PURE__ */new WeakMap();
46
- const Nodes = /* @__PURE__ */new Set();
41
+ const LayoutHandlers = /* @__PURE__ */ new WeakMap();
42
+ const LayoutDisableKey = /* @__PURE__ */ new WeakMap();
43
+ const Nodes = /* @__PURE__ */ new Set();
44
+ const NodeRectCache = /* @__PURE__ */ new WeakMap();
45
+ const PrevHostNode = /* @__PURE__ */ new WeakMap();
47
46
  const usePretransformDimensions = () => globalThis.__TAMAGUI_ONLAYOUT_PRETRANSFORM === true || process.env.TAMAGUI_ONLAYOUT_PRETRANSFORM === "1";
48
- let _debugLayout;
49
- function isDebugLayout() {
50
- if (_debugLayout === void 0) _debugLayout = typeof window !== "undefined" && new URLSearchParams(window.location.search).has("__tamaDebugLayout");
51
- return _debugLayout;
52
- }
47
+ const isDebugLayout = () => typeof window !== "undefined" && window.location?.search?.includes("__tamaDebugLayout");
53
48
  const DisableLayoutContextValues = {};
54
49
  const DisableLayoutContextKey = (0, import_react.createContext)("");
55
50
  const ENABLE = typeof IntersectionObserver !== "undefined";
56
- const LayoutMeasurementController = ({
57
- disable,
58
- children
59
- }) => {
60
- const id = (0, import_react.useId)();
61
- (0, import_constants.useIsomorphicLayoutEffect)(() => {
62
- const wasDisabled = DisableLayoutContextValues[id] === true;
63
- DisableLayoutContextValues[id] = disable;
64
- if (wasDisabled && !disable) measureOnNextFrame?.();
65
- }, [disable, id]);
66
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
67
- value: id,
68
- children
69
- });
51
+ const LayoutMeasurementController = ({ disable, children }) => {
52
+ const id = (0, import_react.useId)();
53
+ (0, import_constants.useIsomorphicLayoutEffect)(() => {
54
+ const wasDisabled = DisableLayoutContextValues[id] === true;
55
+ DisableLayoutContextValues[id] = disable;
56
+ if (wasDisabled && !disable) measureOnNextFrame?.();
57
+ }, [disable, id]);
58
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DisableLayoutContextKey.Provider, {
59
+ value: id,
60
+ children
61
+ });
70
62
  };
71
63
  let strategy = "async";
72
64
  let resumeLayoutLoop;
73
65
  let measureOnNextFrame;
74
- function setOnLayoutStrategy(state) {
75
- strategy = state;
76
- resumeLayoutLoop?.();
77
- }
78
- const NodeRectCache = /* @__PURE__ */new WeakMap();
79
66
  let avoidUpdates = true;
80
- const queuedUpdates = /* @__PURE__ */new Map();
67
+ const queuedUpdates = /* @__PURE__ */ new Map();
81
68
  function enable() {
82
- if (avoidUpdates) {
83
- avoidUpdates = false;
84
- if (queuedUpdates) {
85
- queuedUpdates.forEach(cb => cb());
86
- queuedUpdates.clear();
87
- }
88
- }
69
+ if (avoidUpdates) {
70
+ avoidUpdates = false;
71
+ if (queuedUpdates) {
72
+ queuedUpdates.forEach((cb) => cb());
73
+ queuedUpdates.clear();
74
+ }
75
+ }
89
76
  }
90
77
  function rectsEqual(a, b) {
91
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
78
+ return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
92
79
  }
93
80
  if (ENABLE) {
94
- let ensureRectFetchObserver = function () {
95
- if (rectFetchObserver) return rectFetchObserver;
96
- rectFetchObserver = new IntersectionObserver(entries => {
97
- lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
98
- for (let i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
99
- if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
100
- if (rectFetchResolve) {
101
- rectFetchResolve(true);
102
- rectFetchResolve = null;
103
- }
104
- }, {
105
- threshold: 0
106
- });
107
- return rectFetchObserver;
108
- },
109
- scheduleLayoutFrame = function () {
110
- if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
111
- frameScheduled = true;
112
- rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
113
- };
114
- const BoundingRects = /* @__PURE__ */new WeakMap();
115
- let rectFetchObserver = null;
116
- let rectFetchResolve = null;
117
- let rectFetchStartTime = 0;
118
- let lastCallbackDelay = 0;
119
- async function updateLayoutIfChanged(node) {
120
- if (typeof LayoutHandlers.get(node) !== "function") return;
121
- const parentNode = node.parentElement;
122
- if (!parentNode) return;
123
- let nodeRect;
124
- let parentRect;
125
- if (strategy === "async") {
126
- nodeRect = BoundingRects.get(node);
127
- parentRect = BoundingRects.get(parentNode);
128
- if (!nodeRect || !parentRect) return;
129
- } else {
130
- nodeRect = node.getBoundingClientRect();
131
- parentRect = parentNode.getBoundingClientRect();
132
- }
133
- emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
134
- }
135
- const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
136
- const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
137
- const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
138
- const MAX_SKIP_FRAMES = 20;
139
- let skipFrames = BASE_SKIP_FRAMES;
140
- let frameCount = 0;
141
- let frameScheduled = false;
142
- async function layoutOnAnimationFrame() {
143
- if (frameCount++ % skipFrames !== 0) {
144
- frameScheduled = false;
145
- scheduleLayoutFrame();
146
- return;
147
- }
148
- if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
149
- if (strategy !== "off") {
150
- const activeNodes = [];
151
- const parentsToObserve = /* @__PURE__ */new Set();
152
- for (const node of Nodes) {
153
- const parentElement = node.parentElement;
154
- if (!(parentElement instanceof HTMLElement)) {
155
- cleanupNode(node);
156
- continue;
157
- }
158
- const disableKey = LayoutDisableKey.get(node);
159
- if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
160
- activeNodes.push(node);
161
- parentsToObserve.add(parentElement);
162
- }
163
- if (activeNodes.length > 0) {
164
- const io = ensureRectFetchObserver();
165
- rectFetchStartTime = performance.now();
166
- for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
167
- for (const parent of parentsToObserve) io.observe(parent);
168
- await new Promise(res => {
169
- rectFetchResolve = res;
170
- });
171
- for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
172
- for (const parent of parentsToObserve) io.unobserve(parent);
173
- if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
174
- for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
175
- }
176
- }
177
- frameScheduled = false;
178
- scheduleLayoutFrame();
179
- }
180
- resumeLayoutLoop = scheduleLayoutFrame;
181
- measureOnNextFrame = () => {
182
- frameCount = 0;
183
- scheduleLayoutFrame();
184
- };
185
- document.addEventListener("visibilitychange", scheduleLayoutFrame);
186
- scheduleLayoutFrame();
81
+ let ensureRectFetchObserver = function() {
82
+ if (rectFetchObserver) return rectFetchObserver;
83
+ rectFetchObserver = new IntersectionObserver((entries) => {
84
+ lastCallbackDelay = Math.round(performance.now() - rectFetchStartTime);
85
+ for (let i = 0; i < entries.length; i++) BoundingRects.set(entries[i].target, entries[i].boundingClientRect);
86
+ if (process.env.NODE_ENV === "development" && isDebugLayout() && lastCallbackDelay > 50) console.warn("[onLayout-io-delay]", lastCallbackDelay + "ms", entries.length, "entries");
87
+ if (rectFetchResolve) {
88
+ rectFetchResolve(true);
89
+ rectFetchResolve = null;
90
+ }
91
+ }, { threshold: 0 });
92
+ return rectFetchObserver;
93
+ }, updateLayoutIfChanged = function(node) {
94
+ if (typeof LayoutHandlers.get(node) !== "function") return;
95
+ const parentNode = node.parentElement;
96
+ if (!parentNode) return;
97
+ let nodeRect;
98
+ let parentRect;
99
+ if (strategy === "async") {
100
+ nodeRect = BoundingRects.get(node);
101
+ parentRect = BoundingRects.get(parentNode);
102
+ if (!nodeRect || !parentRect) return;
103
+ } else {
104
+ nodeRect = node.getBoundingClientRect();
105
+ parentRect = parentNode.getBoundingClientRect();
106
+ }
107
+ emitLayoutIfChanged(node, parentNode, nodeRect, parentRect);
108
+ }, scheduleLayoutFrame = function() {
109
+ if (frameScheduled || strategy === "off" || Nodes.size === 0 || document.hidden) return;
110
+ frameScheduled = true;
111
+ rAF ? rAF(layoutOnAnimationFrame) : setTimeout(layoutOnAnimationFrame, 16);
112
+ };
113
+ const BoundingRects = /* @__PURE__ */ new WeakMap();
114
+ let rectFetchObserver = null;
115
+ let rectFetchResolve = null;
116
+ let rectFetchStartTime = 0;
117
+ let lastCallbackDelay = 0;
118
+ const rAF = typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : void 0;
119
+ const userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP;
120
+ const BASE_SKIP_FRAMES = userSkipVal ? +userSkipVal : 10;
121
+ const MAX_SKIP_FRAMES = 20;
122
+ let skipFrames = BASE_SKIP_FRAMES;
123
+ let frameCount = 0;
124
+ let frameScheduled = false;
125
+ async function layoutOnAnimationFrame() {
126
+ if (frameCount++ % skipFrames !== 0) {
127
+ frameScheduled = false;
128
+ scheduleLayoutFrame();
129
+ return;
130
+ }
131
+ if (frameCount >= Number.MAX_SAFE_INTEGER) frameCount = 0;
132
+ if (strategy !== "off") {
133
+ const activeNodes = [];
134
+ const parentsToObserve = /* @__PURE__ */ new Set();
135
+ for (const node of Nodes) {
136
+ const parentElement = node.parentElement;
137
+ if (!(parentElement instanceof HTMLElement)) {
138
+ cleanupNode(node);
139
+ continue;
140
+ }
141
+ const disableKey = LayoutDisableKey.get(node);
142
+ if (disableKey && DisableLayoutContextValues[disableKey] === true) continue;
143
+ activeNodes.push(node);
144
+ parentsToObserve.add(parentElement);
145
+ }
146
+ if (activeNodes.length > 0) {
147
+ const io = ensureRectFetchObserver();
148
+ rectFetchStartTime = performance.now();
149
+ for (let i = 0; i < activeNodes.length; i++) io.observe(activeNodes[i]);
150
+ for (const parent of parentsToObserve) io.observe(parent);
151
+ await new Promise((res) => {
152
+ rectFetchResolve = res;
153
+ });
154
+ for (let i = 0; i < activeNodes.length; i++) io.unobserve(activeNodes[i]);
155
+ for (const parent of parentsToObserve) io.unobserve(parent);
156
+ if (lastCallbackDelay > 50) skipFrames = Math.min(skipFrames + 2, MAX_SKIP_FRAMES);
157
+ else if (lastCallbackDelay < 20) skipFrames = Math.max(skipFrames - 1, BASE_SKIP_FRAMES);
158
+ for (let i = 0; i < activeNodes.length; i++) updateLayoutIfChanged(activeNodes[i]);
159
+ }
160
+ }
161
+ frameScheduled = false;
162
+ scheduleLayoutFrame();
163
+ }
164
+ resumeLayoutLoop = scheduleLayoutFrame;
165
+ measureOnNextFrame = () => {
166
+ frameCount = 0;
167
+ scheduleLayoutFrame();
168
+ };
169
+ document.addEventListener("visibilitychange", scheduleLayoutFrame);
170
+ scheduleLayoutFrame();
187
171
  }
188
- const getElementLayoutEvent = (nodeRect, parentRect, node) => {
189
- return {
190
- nativeEvent: {
191
- layout: getRelativeDimensions(nodeRect, parentRect, node),
192
- target: nodeRect
193
- },
194
- timeStamp: Date.now()
195
- };
196
- };
197
- const getPreTransformDimensions = node => {
198
- return {
199
- width: node.offsetWidth,
200
- height: node.offsetHeight
201
- };
202
- };
172
+ const getElementLayoutEvent = (nodeRect, parentRect, node) => ({
173
+ nativeEvent: {
174
+ layout: getRelativeDimensions(nodeRect, parentRect, node),
175
+ target: nodeRect
176
+ },
177
+ timeStamp: Date.now()
178
+ });
179
+ const getPreTransformDimensions = (node) => ({
180
+ width: node.offsetWidth,
181
+ height: node.offsetHeight
182
+ });
203
183
  const getRelativeDimensions = (a, b, aNode) => {
204
- const {
205
- left,
206
- top
207
- } = a;
208
- const x = left - b.left;
209
- const y = top - b.top;
210
- const {
211
- width,
212
- height
213
- } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
214
- width: a.width,
215
- height: a.height
216
- };
217
- return {
218
- x,
219
- y,
220
- width,
221
- height,
222
- pageX: a.left,
223
- pageY: a.top
224
- };
184
+ const left = a.left - b.left;
185
+ const top = a.top - b.top;
186
+ const { width, height } = usePretransformDimensions() && aNode ? getPreTransformDimensions(aNode) : {
187
+ width: a.width,
188
+ height: a.height
189
+ };
190
+ return {
191
+ x: left,
192
+ y: top,
193
+ width,
194
+ height,
195
+ pageX: a.left,
196
+ pageY: a.top
197
+ };
225
198
  };
226
199
  function emitLayoutIfChanged(node, parentNode, nodeRect, parentRect) {
227
- const onLayout = LayoutHandlers.get(node);
228
- if (typeof onLayout !== "function") return;
229
- const cachedRect = NodeRectCache.get(node);
230
- const cachedParentRect = NodeRectCache.get(parentNode);
231
- const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
232
- const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
233
- if (!nodeChanged && !parentChanged) return;
234
- NodeRectCache.set(node, nodeRect);
235
- NodeRectCache.set(parentNode, parentRect);
236
- const event = getElementLayoutEvent(nodeRect, parentRect, node);
237
- if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] change", {
238
- tag: node.tagName,
239
- id: node.id || void 0,
240
- className: (node.className || "").slice(0, 60) || void 0,
241
- layout: event.nativeEvent.layout,
242
- first: !cachedRect
243
- });
244
- if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));else onLayout(event);
200
+ const onLayout = LayoutHandlers.get(node);
201
+ if (typeof onLayout !== "function") return;
202
+ const cachedRect = NodeRectCache.get(node);
203
+ const cachedParentRect = NodeRectCache.get(parentNode);
204
+ const nodeChanged = !cachedRect || !rectsEqual(cachedRect, nodeRect);
205
+ const parentChanged = !cachedParentRect || !rectsEqual(cachedParentRect, parentRect);
206
+ if (!nodeChanged && !parentChanged) return;
207
+ NodeRectCache.set(node, nodeRect);
208
+ NodeRectCache.set(parentNode, parentRect);
209
+ const event = getElementLayoutEvent(nodeRect, parentRect, node);
210
+ if (avoidUpdates) queuedUpdates.set(node, () => onLayout(event));
211
+ else onLayout(event);
245
212
  }
246
213
  function observeLayoutNode(node, disableKey) {
247
- Nodes.add(node);
248
- if (disableKey) LayoutDisableKey.set(node, disableKey);else LayoutDisableKey.delete(node);
249
- resumeLayoutLoop?.();
214
+ Nodes.add(node);
215
+ if (disableKey) LayoutDisableKey.set(node, disableKey);
216
+ else LayoutDisableKey.delete(node);
217
+ resumeLayoutLoop?.();
250
218
  }
251
219
  function registerLayoutNode(node, onChange, disableKey) {
252
- LayoutHandlers.set(node, onChange);
253
- observeLayoutNode(node, disableKey);
254
- return () => cleanupNode(node);
220
+ LayoutHandlers.set(node, onChange);
221
+ observeLayoutNode(node, disableKey);
222
+ return () => cleanupNode(node);
255
223
  }
256
224
  function cleanupNode(node) {
257
- Nodes.delete(node);
258
- LayoutHandlers.delete(node);
259
- LayoutDisableKey.delete(node);
260
- NodeRectCache.delete(node);
225
+ Nodes.delete(node);
226
+ LayoutHandlers.delete(node);
227
+ LayoutDisableKey.delete(node);
228
+ NodeRectCache.delete(node);
261
229
  }
262
- const PrevHostNode = /* @__PURE__ */new WeakMap();
263
230
  function emitLayoutSync(node) {
264
- const onLayout = LayoutHandlers.get(node);
265
- if (typeof onLayout !== "function") return;
266
- const parentNode = node.parentElement;
267
- if (!parentNode) return;
268
- const nodeRect = node.getBoundingClientRect();
269
- const parentRect = parentNode.getBoundingClientRect();
270
- NodeRectCache.set(node, nodeRect);
271
- NodeRectCache.set(parentNode, parentRect);
272
- onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
231
+ const onLayout = LayoutHandlers.get(node);
232
+ if (typeof onLayout !== "function") return;
233
+ const parentNode = node.parentElement;
234
+ if (!parentNode) return;
235
+ const nodeRect = node.getBoundingClientRect();
236
+ const parentRect = parentNode.getBoundingClientRect();
237
+ NodeRectCache.set(node, nodeRect);
238
+ NodeRectCache.set(parentNode, parentRect);
239
+ onLayout(getElementLayoutEvent(nodeRect, parentRect, node));
273
240
  }
274
241
  function useElementLayout(ref, onLayout) {
275
- const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
276
- const node = ensureWebElement(ref.current?.host);
277
- if (node && onLayout) {
278
- LayoutHandlers.set(node, onLayout);
279
- LayoutDisableKey.set(node, disableKey);
280
- }
281
- (0, import_constants.useIsomorphicLayoutEffect)(() => {
282
- if (!onLayout) return;
283
- const nextNode = ensureWebElement(ref.current?.host);
284
- const prevNode = PrevHostNode.get(ref);
285
- if (nextNode === prevNode) return;
286
- if (prevNode) cleanupNode(prevNode);
287
- PrevHostNode.set(ref, nextNode);
288
- if (!nextNode) return;
289
- LayoutHandlers.set(nextNode, onLayout);
290
- observeLayoutNode(nextNode, disableKey);
291
- emitLayoutSync(nextNode);
292
- });
293
- (0, import_constants.useIsomorphicLayoutEffect)(() => {
294
- if (!onLayout) return;
295
- const node2 = ref.current?.host;
296
- if (!node2) return;
297
- LayoutHandlers.set(node2, onLayout);
298
- observeLayoutNode(node2, disableKey);
299
- if (process.env.NODE_ENV === "development" && isDebugLayout()) console.log("[useElementLayout] register", {
300
- tag: node2.tagName,
301
- id: node2.id || void 0,
302
- className: (node2.className || "").slice(0, 60) || void 0,
303
- totalNodes: Nodes.size
304
- });
305
- return () => {
306
- cleanupNode(node2);
307
- const swappedNode = PrevHostNode.get(ref);
308
- if (swappedNode && swappedNode !== node2) cleanupNode(swappedNode);
309
- PrevHostNode.delete(ref);
310
- };
311
- }, [ref, !!onLayout]);
242
+ const disableKey = (0, import_react.useContext)(DisableLayoutContextKey);
243
+ const node = ensureWebElement(ref.current?.host);
244
+ if (node && onLayout) {
245
+ LayoutHandlers.set(node, onLayout);
246
+ LayoutDisableKey.set(node, disableKey);
247
+ }
248
+ (0, import_constants.useIsomorphicLayoutEffect)(() => {
249
+ if (!onLayout) return;
250
+ const nextNode = ensureWebElement(ref.current?.host);
251
+ const prevNode = PrevHostNode.get(ref);
252
+ if (nextNode !== prevNode) {
253
+ if (prevNode) cleanupNode(prevNode);
254
+ PrevHostNode.set(ref, nextNode);
255
+ if (nextNode) {
256
+ LayoutHandlers.set(nextNode, onLayout);
257
+ observeLayoutNode(nextNode, disableKey);
258
+ emitLayoutSync(nextNode);
259
+ }
260
+ }
261
+ return () => {
262
+ const activeNode = ensureWebElement(ref.current?.host);
263
+ if (activeNode) cleanupNode(activeNode);
264
+ const swapped = PrevHostNode.get(ref);
265
+ if (swapped && swapped !== activeNode) cleanupNode(swapped);
266
+ PrevHostNode.delete(ref);
267
+ };
268
+ }, [ref, !!onLayout]);
312
269
  }
313
270
  function ensureWebElement(x) {
314
- if (typeof HTMLElement === "undefined") return;
315
- return x instanceof HTMLElement ? x : void 0;
271
+ if (typeof HTMLElement === "undefined") return void 0;
272
+ return x instanceof HTMLElement ? x : void 0;
316
273
  }
317
- const getBoundingClientRectAsync = node => {
318
- return new Promise(res => {
319
- if (!node || node.nodeType !== 1) return res(false);
320
- const io = new IntersectionObserver(entries => {
321
- io.disconnect();
322
- return res(entries[0].boundingClientRect);
323
- }, {
324
- threshold: 0
325
- });
326
- io.observe(node);
327
- });
328
- };
274
+ const getBoundingClientRectAsync = (node) => new Promise((res) => {
275
+ if (!node || node.nodeType !== 1) return res(false);
276
+ const io = new IntersectionObserver((entries) => {
277
+ io.disconnect();
278
+ res(entries[0].boundingClientRect);
279
+ });
280
+ io.observe(node);
281
+ });
329
282
  const measureNode = async (node, relativeTo) => {
330
- const relativeNode = relativeTo || node?.parentElement;
331
- if (relativeNode instanceof HTMLElement) {
332
- const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
333
- if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
334
- }
335
- return null;
283
+ const relativeNode = relativeTo || node?.parentElement;
284
+ if (relativeNode instanceof HTMLElement) {
285
+ const [nodeDim, relativeNodeDim] = await Promise.all([getBoundingClientRectAsync(node), getBoundingClientRectAsync(relativeNode)]);
286
+ if (relativeNodeDim && nodeDim) return getRelativeDimensions(nodeDim, relativeNodeDim, node);
287
+ }
288
+ return null;
336
289
  };
337
290
  const measure = async (node, callback) => {
338
- const out = await measureNode(node, node.parentNode instanceof HTMLElement ? node.parentNode : null);
339
- if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
340
- return out;
291
+ const out = await measureNode(node, node.parentElement);
292
+ if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
293
+ return out;
341
294
  };
342
- function createMeasure(node) {
343
- return callback => measure(node, callback);
344
- }
295
+ const createMeasure = (node) => (callback) => measure(node, callback);
345
296
  const measureInWindow = async (node, callback) => {
346
- const out = await measureNode(node, null);
347
- if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
348
- return out;
349
- };
350
- const createMeasureInWindow = node => {
351
- return callback => measureInWindow(node, callback);
297
+ const out = await measureNode(node, null);
298
+ if (out) callback?.(out.pageX, out.pageY, out.width, out.height);
299
+ return out;
352
300
  };
301
+ const createMeasureInWindow = (node) => (callback) => measureInWindow(node, callback);
353
302
  const measureLayout = async (node, relativeNode, callback) => {
354
- const out = await measureNode(node, relativeNode);
355
- if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
356
- return out;
303
+ const out = await measureNode(node, relativeNode);
304
+ if (out) callback?.(out.x, out.y, out.width, out.height, out.pageX, out.pageY);
305
+ return out;
357
306
  };
358
- function createMeasureLayout(node) {
359
- return (relativeTo, callback) => measureLayout(node, relativeTo, callback);
360
- }
307
+ const createMeasureLayout = (node) => (relativeTo, callback) => measureLayout(node, relativeTo, callback);