@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
@@ -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";
@@ -11771,40 +11774,64 @@ var getRect = function(node) {
11771
11774
  };
11772
11775
 
11773
11776
  // src/hooks/useElementLayout.tsx
11774
- var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), status = "active";
11777
+ var import_constants = __toESM(require_index_native2()), import_web = __toESM(require_index_native8()), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), strategy = "async";
11775
11778
  function setOnLayoutStrategy(state) {
11776
- status = state;
11779
+ strategy = state;
11777
11780
  }
11778
- var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0;
11781
+ 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;
11779
11782
  if (import_constants.isClient && rAF) {
11780
- let updateLayoutIfChanged = function(node) {
11781
- var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
11782
- if (typeof onLayout == "function") {
11783
- var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
11784
- if (!cachedRect || // has changed one rect
11785
- !(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect))) {
11786
- NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect);
11787
- var event = getElementLayoutEvent(node);
11788
- avoidUpdates ? queuedUpdates.set(node, function() {
11789
- return onLayout(event);
11790
- }) : onLayout(event);
11791
- }
11792
- }
11793
- }, layoutOnAnimationFrame = function() {
11783
+ let layoutOnAnimationFrame = function() {
11794
11784
  var now = Date.now(), timeSinceLastFrame = now - lastFrameAt;
11795
- if (lastFrameAt = now, status !== "inactive") {
11785
+ if (lastFrameAt = now, strategy !== "off") {
11796
11786
  var expectedFrameTime = 16.67, hasRecentSyncWork = timeSinceLastFrame > expectedFrameTime * numDroppedFramesUntilPause;
11797
11787
  hasRecentSyncWork || Nodes.forEach(updateLayoutIfChanged);
11798
11788
  }
11799
11789
  rAF(layoutOnAnimationFrame);
11800
11790
  };
11801
- updateLayoutIfChanged2 = updateLayoutIfChanged, layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
11791
+ layoutOnAnimationFrame2 = layoutOnAnimationFrame, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map(), lastFrameAt = Date.now(), numDroppedFramesUntilPause = 2, (0, import_web.___onDidFinishClientRender)(function() {
11802
11792
  avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function(cb) {
11803
11793
  return cb();
11804
11794
  }), queuedUpdates.clear());
11805
- }), rAF(layoutOnAnimationFrame);
11795
+ });
11796
+ async function updateLayoutIfChanged(node) {
11797
+ var nodeRect = node.getBoundingClientRect(), parentNode = node.parentElement, parentRect = parentNode == null ? void 0 : parentNode.getBoundingClientRect(), onLayout = LayoutHandlers.get(node);
11798
+ if (typeof onLayout == "function") {
11799
+ var cachedRect = NodeRectCache.get(node), cachedParentRect = parentNode ? NodeRectCache.get(parentNode) : null;
11800
+ if (!cachedRect || // has changed one rect
11801
+ !(0, import_web.isEqualShallow)(cachedRect, nodeRect) && (!cachedParentRect || !(0, import_web.isEqualShallow)(cachedParentRect, parentRect)))
11802
+ if (NodeRectCache.set(node, nodeRect), parentRect && parentNode && ParentRectCache.set(parentNode, parentRect), avoidUpdates) {
11803
+ var event = getElementLayoutEvent(node);
11804
+ queuedUpdates.set(node, function() {
11805
+ return onLayout(event);
11806
+ });
11807
+ } else if (strategy === "async") {
11808
+ var now = Date.now();
11809
+ LastChangeTime.set(node, now);
11810
+ var existingTimer = DebounceTimers.get(node);
11811
+ existingTimer && clearTimeout(existingTimer);
11812
+ var timer = setTimeout(async function() {
11813
+ var lastChange = LastChangeTime.get(node) || 0, timeSinceChange = Date.now() - lastChange;
11814
+ if (timeSinceChange >= DEBOUNCE_DELAY) {
11815
+ var event2 = await getElementLayoutEventAsync(node);
11816
+ onLayout(event2), DebounceTimers.delete(node);
11817
+ } else {
11818
+ var remainingDelay = DEBOUNCE_DELAY - timeSinceChange, newTimer = setTimeout(async function() {
11819
+ var event3 = await getElementLayoutEventAsync(node);
11820
+ onLayout(event3), DebounceTimers.delete(node);
11821
+ }, remainingDelay);
11822
+ DebounceTimers.set(node, newTimer);
11823
+ }
11824
+ }, DEBOUNCE_DELAY);
11825
+ DebounceTimers.set(node, timer);
11826
+ } else {
11827
+ var event1 = getElementLayoutEvent(node);
11828
+ onLayout(event1);
11829
+ }
11830
+ }
11831
+ }
11832
+ rAF(layoutOnAnimationFrame);
11806
11833
  }
11807
- var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, updateLayoutIfChanged2, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
11834
+ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, layoutOnAnimationFrame2, getElementLayoutEvent = function(target) {
11808
11835
  var res = null;
11809
11836
  if (measureLayout(target, null, function(x, y, width, height, left, top) {
11810
11837
  res = {
@@ -11833,6 +11860,38 @@ var avoidUpdates, queuedUpdates, lastFrameAt, numDroppedFramesUntilPause, update
11833
11860
  callback(x, y, width, height, left, top);
11834
11861
  }
11835
11862
  }
11863
+ }, getElementLayoutEventAsync = async function(target) {
11864
+ var res = null;
11865
+ if (await measureLayoutAsync(target, null, function(x, y, width, height, left, top) {
11866
+ res = {
11867
+ nativeEvent: {
11868
+ layout: {
11869
+ x,
11870
+ y,
11871
+ width,
11872
+ height,
11873
+ left,
11874
+ top
11875
+ },
11876
+ target
11877
+ },
11878
+ timeStamp: Date.now()
11879
+ };
11880
+ }), !res)
11881
+ throw new Error("\u203C\uFE0F");
11882
+ return res;
11883
+ }, measureLayoutAsync = async function(node, relativeTo, callback) {
11884
+ var relativeNode = relativeTo || (node == null ? void 0 : node.parentElement);
11885
+ if (relativeNode instanceof HTMLElement) {
11886
+ var [nodeDim, relativeNodeDim] = await Promise.all([
11887
+ node.getBoundingClientRect(),
11888
+ relativeNode.getBoundingClientRect()
11889
+ ]);
11890
+ if (relativeNodeDim && nodeDim) {
11891
+ var { x, y, width, height, left, top } = getRelativeDimensions(nodeDim, relativeNodeDim);
11892
+ callback(x, y, width, height, left, top);
11893
+ }
11894
+ }
11836
11895
  }, getRelativeDimensions = function(a, b) {
11837
11896
  var { height, left, top, width } = a, x = left - b.left, y = top - b.top;
11838
11897
  return {