@tamagui/core 1.126.18 → 1.127.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.
Files changed (33) hide show
  1. package/dist/cjs/helpers/getBoundingClientRect.cjs +16 -3
  2. package/dist/cjs/helpers/getBoundingClientRect.js +17 -2
  3. package/dist/cjs/helpers/getBoundingClientRect.js.map +1 -1
  4. package/dist/cjs/helpers/getBoundingClientRect.native.js +20 -2
  5. package/dist/cjs/helpers/getBoundingClientRect.native.js.map +2 -2
  6. package/dist/cjs/hooks/useElementLayout.cjs +90 -22
  7. package/dist/cjs/hooks/useElementLayout.js +72 -16
  8. package/dist/cjs/hooks/useElementLayout.js.map +1 -1
  9. package/dist/cjs/hooks/useElementLayout.native.js +82 -20
  10. package/dist/cjs/hooks/useElementLayout.native.js.map +2 -2
  11. package/dist/esm/helpers/getBoundingClientRect.js +17 -2
  12. package/dist/esm/helpers/getBoundingClientRect.js.map +1 -1
  13. package/dist/esm/helpers/getBoundingClientRect.mjs +15 -3
  14. package/dist/esm/helpers/getBoundingClientRect.mjs.map +1 -1
  15. package/dist/esm/helpers/getBoundingClientRect.native.js +22 -4
  16. package/dist/esm/helpers/getBoundingClientRect.native.js.map +1 -1
  17. package/dist/esm/hooks/useElementLayout.js +72 -16
  18. package/dist/esm/hooks/useElementLayout.js.map +1 -1
  19. package/dist/esm/hooks/useElementLayout.mjs +89 -23
  20. package/dist/esm/hooks/useElementLayout.mjs.map +1 -1
  21. package/dist/esm/hooks/useElementLayout.native.js +101 -36
  22. package/dist/esm/hooks/useElementLayout.native.js.map +1 -1
  23. package/dist/native.js +81 -22
  24. package/dist/native.js.map +2 -2
  25. package/dist/test.native.js +81 -22
  26. package/dist/test.native.js.map +2 -2
  27. package/package.json +7 -7
  28. package/src/helpers/getBoundingClientRect.tsx +26 -0
  29. package/src/hooks/useElementLayout.tsx +107 -8
  30. package/types/helpers/getBoundingClientRect.d.ts +1 -0
  31. package/types/helpers/getBoundingClientRect.d.ts.map +1 -1
  32. package/types/hooks/useElementLayout.d.ts +4 -2
  33. package/types/hooks/useElementLayout.d.ts.map +1 -1
package/dist/native.js CHANGED
@@ -393,6 +393,9 @@ var require_constants_native = __commonJS({
393
393
  }), mod);
394
394
  }, constants_native_exports = {};
395
395
  __export2(constants_native_exports, {
396
+ IS_REACT_19: function() {
397
+ return IS_REACT_19;
398
+ },
396
399
  currentPlatform: function() {
397
400
  return currentPlatform;
398
401
  },
@@ -428,7 +431,7 @@ var require_constants_native = __commonJS({
428
431
  }
429
432
  });
430
433
  module2.exports = __toCommonJS2(constants_native_exports);
431
- var import_react3 = require("react"), import_react_native = require("react-native"), isWeb = !1, isWindowDefined = !1, isServer = !1, isClient2 = !1, useIsomorphicLayoutEffect2 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = import_react_native.Platform.OS === "android" || process.env.TEST_NATIVE_PLATFORM === "android", isIos = import_react_native.Platform.OS === "ios" || process.env.TEST_NATIVE_PLATFORM === "ios", platforms = {
434
+ var import_react3 = require("react"), import_react22 = require("react"), import_react_native = require("react-native"), IS_REACT_19 = !!import_react22.use, isWeb = !1, isWindowDefined = !1, isServer = !1, isClient2 = !1, useIsomorphicLayoutEffect2 = import_react3.useLayoutEffect, isChrome = !1, isWebTouchable = !1, isTouchable = !0, isAndroid = import_react_native.Platform.OS === "android" || process.env.TEST_NATIVE_PLATFORM === "android", isIos = import_react_native.Platform.OS === "ios" || process.env.TEST_NATIVE_PLATFORM === "ios", platforms = {
432
435
  ios: "ios",
433
436
  android: "android"
434
437
  }, currentPlatform = platforms[import_react_native.Platform.OS] || "native";
@@ -12351,42 +12354,66 @@ var getRect = function(node) {
12351
12354
  };
12352
12355
 
12353
12356
  // src/hooks/useElementLayout.tsx
12354
- var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), status = "active";
12357
+ var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
12355
12358
  function setOnLayoutStrategy(state) {
12356
- status = state;
12359
+ strategy = state;
12357
12360
  }
12358
- var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0;
12361
+ var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), DebounceTimers = /* @__PURE__ */ new WeakMap(), LastChangeTime = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0, DEBOUNCE_DELAY = 32;
12359
12362
  if (import_constants.isClient)
12360
12363
  if (rAF) {
12361
- let updateLayoutIfChanged = function(node) {
12362
- var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
12363
- if (typeof onLayout == "function") {
12364
- var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
12365
- if (!cachedRect || // has changed one rect
12366
- !(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect))) {
12367
- NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect);
12368
- var event = getElementLayoutEvent(node);
12369
- avoidUpdates ? queuedUpdates.set(node, function() {
12370
- return onLayout(event);
12371
- }) : onLayout(event);
12372
- }
12373
- }
12374
- }, layoutOnAnimationFrame = function() {
12364
+ let layoutOnAnimationFrame = function() {
12375
12365
  var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
12376
- if (lastFrameAt = now, status !== "inactive") {
12366
+ if (lastFrameAt = now, strategy !== "off") {
12377
12367
  var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
12378
12368
  hasRecentSyncWork || Nodes.forEach(updateLayoutIfChanged);
12379
12369
  }
12380
12370
  rAF(layoutOnAnimationFrame);
12381
12371
  };
12382
- updateLayoutIfChanged2 = updateLayoutIfChanged, layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
12372
+ layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
12383
12373
  avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function(cb) {
12384
12374
  return cb();
12385
12375
  }), queuedUpdates.clear());
12386
- }), rAF(layoutOnAnimationFrame);
12376
+ });
12377
+ async function updateLayoutIfChanged(node) {
12378
+ var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
12379
+ if (typeof onLayout == "function") {
12380
+ var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
12381
+ if (!cachedRect || // has changed one rect
12382
+ !(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect)))
12383
+ if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
12384
+ var event = getElementLayoutEvent(node);
12385
+ queuedUpdates.set(node, function() {
12386
+ return onLayout(event);
12387
+ });
12388
+ } else if (strategy === "async") {
12389
+ var now = Date.now();
12390
+ LastChangeTime.set(node, now);
12391
+ var existingTimer = DebounceTimers.get(node);
12392
+ existingTimer && clearTimeout(existingTimer);
12393
+ var timer = setTimeout(async function() {
12394
+ var lastChange = LastChangeTime.get(node) || 0, timeSinceChange = Date.now() - lastChange;
12395
+ if (timeSinceChange >= DEBOUNCE_DELAY) {
12396
+ var event2 = await getElementLayoutEventAsync(node);
12397
+ onLayout(event2), DebounceTimers.delete(node);
12398
+ } else {
12399
+ var remainingDelay = DEBOUNCE_DELAY - timeSinceChange, newTimer = setTimeout(async function() {
12400
+ var event3 = await getElementLayoutEventAsync(node);
12401
+ onLayout(event3), DebounceTimers.delete(node);
12402
+ }, remainingDelay);
12403
+ DebounceTimers.set(node, newTimer);
12404
+ }
12405
+ }, DEBOUNCE_DELAY);
12406
+ DebounceTimers.set(node, timer);
12407
+ } else {
12408
+ var event1 = getElementLayoutEvent(node);
12409
+ onLayout(event1);
12410
+ }
12411
+ }
12412
+ }
12413
+ rAF(layoutOnAnimationFrame);
12387
12414
  } else
12388
12415
  process.env.NODE_ENV === "development" && console.warn("No requestAnimationFrame - please polyfill for onLayout to work correctly");
12389
- var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, updateLayoutIfChanged2, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
12416
+ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
12390
12417
  var res = null;
12391
12418
  if (measureLayout(target, null, function(x, y, width, height, left, top) {
12392
12419
  res = {
@@ -12415,6 +12442,38 @@ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, update
12415
12442
  callback(x, y, width, height, left, top);
12416
12443
  }
12417
12444
  }
12445
+ }, getElementLayoutEventAsync = async function(target) {
12446
+ var res = null;
12447
+ if (await measureLayoutAsync(target, null, function(x, y, width, height, left, top) {
12448
+ res = {
12449
+ nativeEvent: {
12450
+ layout: {
12451
+ x,
12452
+ y,
12453
+ width,
12454
+ height,
12455
+ left,
12456
+ top
12457
+ },
12458
+ target
12459
+ },
12460
+ timeStamp: Date.now()
12461
+ };
12462
+ }), !res)
12463
+ throw new Error("\u203C\uFE0F");
12464
+ return res;
12465
+ }, measureLayoutAsync = async function(node, relativeTo, callback) {
12466
+ var relativeNode = relativeTo || (node == null ? void 0 : node.parentElement);
12467
+ if (relativeNode instanceof HTMLElement) {
12468
+ var [nodeDim, relativeNodeDim] = await Promise.all([
12469
+ node.getBoundingClientRect(),
12470
+ relativeNode.getBoundingClientRect()
12471
+ ]);
12472
+ if (relativeNodeDim && nodeDim) {
12473
+ var { x, y, width, height, left, top } = getRelativeDimensions(nodeDim, relativeNodeDim);
12474
+ callback(x, y, width, height, left, top);
12475
+ }
12476
+ }
12418
12477
  }, getRelativeDimensions = function(a, b) {
12419
12478
  var { height, left, top, width } = a, x = left - b.left, y = top - b.top;
12420
12479
  return {