tamagui 1.134.5 → 1.135.0

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.
@@ -12785,6 +12785,9 @@ var require_index_native19 = __commonJS({
12785
12785
  }), mod);
12786
12786
  }, index_exports2 = {};
12787
12787
  __export2(index_exports2, {
12788
+ LayoutMeasurementController: function() {
12789
+ return LayoutMeasurementController2;
12790
+ },
12788
12791
  createMeasure: function() {
12789
12792
  return createMeasure;
12790
12793
  },
@@ -12823,18 +12826,29 @@ var require_index_native19 = __commonJS({
12823
12826
  }
12824
12827
  });
12825
12828
  module2.exports = __toCommonJS2(index_exports2);
12826
- var import_constants4 = require_index_native(), import_is_equal_shallow = require_index_native12(), LayoutHandlers = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), IntersectionState = /* @__PURE__ */ new WeakMap(), globalIntersectionObserver = null, strategy = "async";
12829
+ var import_jsx_runtime6 = require("react/jsx-runtime"), import_constants4 = require_index_native(), import_is_equal_shallow = require_index_native12(), import_react3 = require("react"), LayoutHandlers = /* @__PURE__ */ new WeakMap(), LayoutDisableKey = /* @__PURE__ */ new WeakMap(), Nodes = /* @__PURE__ */ new Set(), IntersectionState = /* @__PURE__ */ new WeakMap(), DisableLayoutContextValues = {}, DisableLayoutContextKey = /* @__PURE__ */ (0, import_react3.createContext)(""), ENABLE = import_constants4.isClient && typeof IntersectionObserver < "u", LayoutMeasurementController2 = function(param) {
12830
+ var { disable, children } = param, id = (0, import_react3.useId)();
12831
+ return (0, import_constants4.useIsomorphicLayoutEffect)(function() {
12832
+ DisableLayoutContextValues[id] = disable;
12833
+ }, [
12834
+ disable,
12835
+ id
12836
+ ]), /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DisableLayoutContextKey.Provider, {
12837
+ value: id,
12838
+ children
12839
+ });
12840
+ }, globalIntersectionObserver = null, strategy = "async";
12827
12841
  function setOnLayoutStrategy3(state) {
12828
12842
  strategy = state;
12829
12843
  }
12830
- var NodeRectCache = /* @__PURE__ */ new WeakMap(), ParentRectCache = /* @__PURE__ */ new WeakMap(), LastChangeTime = /* @__PURE__ */ new WeakMap(), rAF = typeof window < "u" ? window.requestAnimationFrame : void 0, avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map();
12844
+ var NodeRectCache = /* @__PURE__ */ new WeakMap(), LastChangeTime = /* @__PURE__ */ new WeakMap(), avoidUpdates = !0, queuedUpdates = /* @__PURE__ */ new Map();
12831
12845
  function enable() {
12832
12846
  avoidUpdates && (avoidUpdates = !1, queuedUpdates && (queuedUpdates.forEach(function(cb) {
12833
12847
  return cb();
12834
12848
  }), queuedUpdates.clear()));
12835
12849
  }
12836
12850
  function startGlobalObservers() {
12837
- !import_constants4.isClient || globalIntersectionObserver || (globalIntersectionObserver = new IntersectionObserver(function(entries) {
12851
+ !ENABLE || globalIntersectionObserver || (globalIntersectionObserver = new IntersectionObserver(function(entries) {
12838
12852
  entries.forEach(function(entry) {
12839
12853
  var node = entry.target;
12840
12854
  IntersectionState.get(node) !== entry.isIntersecting && IntersectionState.set(node, entry.isIntersecting);
@@ -12843,29 +12857,29 @@ var require_index_native19 = __commonJS({
12843
12857
  threshold: 0
12844
12858
  }));
12845
12859
  }
12846
- if (import_constants4.isClient && rAF) {
12847
- supportsCheckVisibility = "checkVisibility" in document.body, BoundingRects = /* @__PURE__ */ new WeakMap();
12860
+ if (ENABLE) {
12861
+ BoundingRects = /* @__PURE__ */ new WeakMap();
12848
12862
  async function updateLayoutIfChanged(node) {
12849
- if (IntersectionState.get(node) !== !1 && !(process.env.TAMAGUI_ONLAYOUT_VISIBILITY_CHECK === "1" && supportsCheckVisibility && !node.checkVisibility())) {
12850
- var onLayout = LayoutHandlers.get(node);
12851
- if (typeof onLayout == "function") {
12852
- var parentNode = node.parentElement;
12853
- if (parentNode) {
12854
- var nodeRect, parentRect;
12855
- if (strategy === "async") {
12856
- var [nr, pr] = await Promise.all([
12857
- BoundingRects.get(node) || getBoundingClientRectAsync(node),
12858
- BoundingRects.get(parentNode) || getBoundingClientRectAsync(parentNode)
12859
- ]);
12860
- if (nr === !1 || pr === !1) return;
12861
- nodeRect = nr, parentRect = pr;
12862
- } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
12863
+ var onLayout = LayoutHandlers.get(node);
12864
+ if (typeof onLayout == "function") {
12865
+ var parentNode = node.parentElement;
12866
+ if (parentNode) {
12867
+ var nodeRect, parentRect;
12868
+ if (strategy === "async") {
12869
+ var [nr, pr] = await Promise.all([
12870
+ BoundingRects.get(node),
12871
+ BoundingRects.get(parentNode)
12872
+ ]);
12873
+ if (!nr || !pr) return;
12874
+ nodeRect = nr, parentRect = pr;
12875
+ } else nodeRect = node.getBoundingClientRect(), parentRect = parentNode.getBoundingClientRect();
12876
+ if (!(!nodeRect || !parentRect)) {
12863
12877
  var cachedRect = NodeRectCache.get(node), cachedParentRect = NodeRectCache.get(parentNode);
12864
- if (!cachedRect || // has changed one rect
12878
+ if (!cachedRect || !cachedParentRect || // has changed one rect
12865
12879
  // @ts-expect-error DOMRectReadOnly can go into object
12866
- !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) && // @ts-expect-error DOMRectReadOnly can go into object
12867
- (!cachedParentRect || !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect))) {
12868
- NodeRectCache.set(node, nodeRect), ParentRectCache.set(parentNode, parentRect);
12880
+ !(0, import_is_equal_shallow.isEqualShallow)(cachedRect, nodeRect) || // @ts-expect-error DOMRectReadOnly can go into object
12881
+ !(0, import_is_equal_shallow.isEqualShallow)(cachedParentRect, parentRect)) {
12882
+ NodeRectCache.set(node, nodeRect), NodeRectCache.set(parentNode, parentRect);
12869
12883
  var event = getElementLayoutEvent(nodeRect, parentRect);
12870
12884
  avoidUpdates ? queuedUpdates.set(node, function() {
12871
12885
  return onLayout(event);
@@ -12875,14 +12889,10 @@ var require_index_native19 = __commonJS({
12875
12889
  }
12876
12890
  }
12877
12891
  }
12878
- rAF(layoutOnAnimationFrame), frameCount = 0, userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP, RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 10;
12892
+ userSkipVal = process.env.TAMAGUI_LAYOUT_FRAME_SKIP, RUN_EVERY_X_FRAMES = userSkipVal ? +userSkipVal : 14;
12879
12893
  async function layoutOnAnimationFrame() {
12880
12894
  if (strategy !== "off") {
12881
- if (!Nodes.size || frameCount++ % RUN_EVERY_X_FRAMES !== 0) {
12882
- rAF(layoutOnAnimationFrame);
12883
- return;
12884
- }
12885
- frameCount === Number.MAX_SAFE_INTEGER && (frameCount = 0), await new Promise(function(res) {
12895
+ var visibleNodes = [], didRun = await new Promise(function(res) {
12886
12896
  var io = new IntersectionObserver(function(entries) {
12887
12897
  io.disconnect();
12888
12898
  var _iteratorNormalCompletion2 = !0, _didIteratorError2 = !1, _iteratorError2 = void 0;
@@ -12900,14 +12910,17 @@ var require_index_native19 = __commonJS({
12900
12910
  if (_didIteratorError2) throw _iteratorError2;
12901
12911
  }
12902
12912
  }
12903
- res();
12913
+ res(!0);
12904
12914
  }, {
12905
12915
  threshold: 0
12906
- }), _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
12916
+ }), didObserve = !1, _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
12907
12917
  try {
12908
12918
  for (var _iterator = Nodes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
12909
12919
  var node = _step.value;
12910
- node.parentElement instanceof HTMLElement && (io.observe(node), io.observe(node.parentElement));
12920
+ if (node.parentElement instanceof HTMLElement) {
12921
+ var disableKey = LayoutDisableKey.get(node);
12922
+ disableKey && DisableLayoutContextValues[disableKey] === !0 || IntersectionState.get(node) !== !1 && (didObserve = !0, io.observe(node), io.observe(node.parentElement), visibleNodes.push(node));
12923
+ }
12911
12924
  }
12912
12925
  } catch (err) {
12913
12926
  _didIteratorError = !0, _iteratorError = err;
@@ -12918,14 +12931,17 @@ var require_index_native19 = __commonJS({
12918
12931
  if (_didIteratorError) throw _iteratorError;
12919
12932
  }
12920
12933
  }
12921
- }), Nodes.forEach(function(node) {
12934
+ didObserve || res(!1);
12935
+ });
12936
+ didRun && visibleNodes.forEach(function(node) {
12922
12937
  updateLayoutIfChanged(node);
12923
12938
  });
12924
12939
  }
12925
- rAF(layoutOnAnimationFrame);
12940
+ setTimeout(layoutOnAnimationFrame, 16.6667 * RUN_EVERY_X_FRAMES);
12926
12941
  }
12942
+ layoutOnAnimationFrame();
12927
12943
  }
12928
- var supportsCheckVisibility, BoundingRects, frameCount, userSkipVal, RUN_EVERY_X_FRAMES, getElementLayoutEvent = function(nodeRect, parentRect) {
12944
+ var BoundingRects, userSkipVal, RUN_EVERY_X_FRAMES, getElementLayoutEvent = function(nodeRect, parentRect) {
12929
12945
  return {
12930
12946
  nativeEvent: {
12931
12947
  layout: getRelativeDimensions(nodeRect, parentRect),
@@ -12945,8 +12961,8 @@ var require_index_native19 = __commonJS({
12945
12961
  };
12946
12962
  };
12947
12963
  function useElementLayout(ref, onLayout) {
12948
- var _ref_current, node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
12949
- node && onLayout && LayoutHandlers.set(node, onLayout), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
12964
+ var _ref_current, disableKey = (0, import_react3.useContext)(DisableLayoutContextKey), node = ensureWebElement((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.host);
12965
+ node && onLayout && (LayoutHandlers.set(node, onLayout), LayoutDisableKey.set(node, disableKey)), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
12950
12966
  var _ref_current2;
12951
12967
  if (onLayout) {
12952
12968
  var node2 = (_ref_current2 = ref.current) === null || _ref_current2 === void 0 ? void 0 : _ref_current2.host;
@@ -13537,6 +13553,9 @@ var require_index_native20 = __commonJS({
13537
13553
  }), mod);
13538
13554
  }, index_exports2 = {};
13539
13555
  __export2(index_exports2, {
13556
+ LayoutMeasurementController: function() {
13557
+ return import_use_element_layout2.LayoutMeasurementController;
13558
+ },
13540
13559
  Stack: function() {
13541
13560
  return Stack2;
13542
13561
  },
@@ -18073,59 +18092,62 @@ var require_SheetImplementationCustom_native = __commonJS({
18073
18092
  ]);
18074
18093
  var forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${import_constants4.isWeb ? "dvh" : "%"}` : maxSnapPoint, setHasScrollView = import_react3.default.useCallback(function(val) {
18075
18094
  hasScrollView.current = val;
18076
- }, []), contents = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_contexts.ParentSheetContext.Provider, {
18077
- value: nextParentContext,
18078
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_SheetContext.SheetProvider, {
18079
- ...providerProps,
18080
- setHasScrollView,
18081
- children: [
18082
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_animate_presence.AnimatePresence, {
18083
- custom: {
18084
- open
18085
- },
18086
- children: shouldHideParentSheet || !open ? null : overlayComponent
18087
- }),
18088
- snapPointsMode !== "percent" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, {
18089
- style: {
18090
- opacity: 0,
18091
- position: "absolute",
18092
- top: 0,
18093
- left: 0,
18094
- right: 0,
18095
- bottom: 0,
18096
- pointerEvents: "none"
18097
- },
18098
- onLayout: handleMaxContentViewLayout
18099
- }),
18100
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnimatedView, {
18101
- ref,
18102
- ...panResponder == null ? void 0 : panResponder.panHandlers,
18103
- onLayout: handleAnimationViewLayout,
18104
- // @ts-ignore for CSS driver this is necessary to attach the transition
18105
- // also motion driver at least though i suspect all drivers?
18106
- animation: isDragging || disableAnimation ? null : animation,
18107
- // @ts-ignore
18108
- disableClassName: !0,
18109
- style: [
18110
- {
18095
+ }, []), contents = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.LayoutMeasurementController, {
18096
+ disable: !open,
18097
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_contexts.ParentSheetContext.Provider, {
18098
+ value: nextParentContext,
18099
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_SheetContext.SheetProvider, {
18100
+ ...providerProps,
18101
+ setHasScrollView,
18102
+ children: [
18103
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_animate_presence.AnimatePresence, {
18104
+ custom: {
18105
+ open
18106
+ },
18107
+ children: shouldHideParentSheet || !open ? null : overlayComponent
18108
+ }),
18109
+ snapPointsMode !== "percent" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, {
18110
+ style: {
18111
+ opacity: 0,
18111
18112
  position: "absolute",
18112
- zIndex,
18113
- width: "100%",
18114
- height: forcedContentHeight,
18115
- minHeight: forcedContentHeight,
18116
- opacity: shouldHideParentSheet ? 0 : opacity,
18117
- ...(shouldHideParentSheet || !open) && {
18118
- pointerEvents: "none"
18119
- }
18113
+ top: 0,
18114
+ left: 0,
18115
+ right: 0,
18116
+ bottom: 0,
18117
+ pointerEvents: "none"
18120
18118
  },
18121
- animatedStyle
18122
- ],
18123
- children: (
18124
- /* <AdaptProvider>{props.children}</AdaptProvider> */
18125
- props.children
18126
- )
18127
- })
18128
- ]
18119
+ onLayout: handleMaxContentViewLayout
18120
+ }),
18121
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnimatedView, {
18122
+ ref,
18123
+ ...panResponder == null ? void 0 : panResponder.panHandlers,
18124
+ onLayout: handleAnimationViewLayout,
18125
+ // @ts-ignore for CSS driver this is necessary to attach the transition
18126
+ // also motion driver at least though i suspect all drivers?
18127
+ animation: isDragging || disableAnimation ? null : animation,
18128
+ // @ts-ignore
18129
+ disableClassName: !0,
18130
+ style: [
18131
+ {
18132
+ position: "absolute",
18133
+ zIndex,
18134
+ width: "100%",
18135
+ height: forcedContentHeight,
18136
+ minHeight: forcedContentHeight,
18137
+ opacity: shouldHideParentSheet ? 0 : opacity,
18138
+ ...(shouldHideParentSheet || !open) && {
18139
+ pointerEvents: "none"
18140
+ }
18141
+ },
18142
+ animatedStyle
18143
+ ],
18144
+ children: (
18145
+ /* <AdaptProvider>{props.children}</AdaptProvider> */
18146
+ props.children
18147
+ )
18148
+ })
18149
+ ]
18150
+ })
18129
18151
  })
18130
18152
  });
18131
18153
  if (!import_portal2.USE_NATIVE_PORTAL) {
@@ -19244,16 +19266,19 @@ var require_Dialog_native = __commonJS({
19244
19266
  // NOTE: we remove the inner frame, but not the portal itself
19245
19267
  // saw a bug when we removed and re-added portals that caused stale inner contents of the portal
19246
19268
  // seems like a React bug itself but leaving this for now as it fixes
19247
- isFullyHidden && !isAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPortalFrame, {
19248
- ref,
19249
- ...import_constants4.isWeb && isMountedOrOpen && {
19250
- "aria-modal": !0
19251
- },
19252
- // passThrough={isAdapted}
19253
- pointerEvents: isMountedOrOpen ? "auto" : "none",
19254
- ...frameProps,
19255
- className: "_no_backdrop " + (frameProps.className || ""),
19256
- children: contents
19269
+ isFullyHidden && !isAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.LayoutMeasurementController, {
19270
+ disable: !isMountedOrOpen,
19271
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPortalFrame, {
19272
+ ref,
19273
+ ...import_constants4.isWeb && isMountedOrOpen && {
19274
+ "aria-modal": !0
19275
+ },
19276
+ // passThrough={isAdapted}
19277
+ pointerEvents: isMountedOrOpen ? "auto" : "none",
19278
+ ...frameProps,
19279
+ className: "_no_backdrop " + (frameProps.className || ""),
19280
+ children: contents
19281
+ })
19257
19282
  })
19258
19283
  );
19259
19284
  return import_constants4.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal2.Portal, {
@@ -23794,13 +23819,13 @@ var require_Popper_native = __commonJS({
23794
23819
  Object.assign(setupOptions, options);
23795
23820
  }
23796
23821
  function Popper(props) {
23797
- var { children, size: size2, strategy = "absolute", placement = "bottom", stayInFrame, allowFlip, offset: offset2, disableRTL, resize, passThrough, open, scope } = props, [arrowEl, setArrow] = React4.useState(null), [arrowSize, setArrowSize] = React4.useState(0), offsetOptions = offset2 ?? arrowSize, floatingStyle = React4.useRef({}), floating = (0, import_floating.useFloating)({
23798
- open: passThrough ? !1 : open || !0,
23822
+ var { children, size: size2, strategy = "absolute", placement = "bottom", stayInFrame, allowFlip, offset: offset2, disableRTL, resize, passThrough, open, scope } = props, [arrowEl, setArrow] = React4.useState(null), [arrowSize, setArrowSize] = React4.useState(0), offsetOptions = offset2 ?? arrowSize, floatingStyle = React4.useRef({}), isOpen = passThrough ? !1 : open || !0, floating = (0, import_floating.useFloating)({
23823
+ open: isOpen,
23799
23824
  strategy,
23800
23825
  placement,
23801
23826
  sameScrollView: !1,
23802
23827
  // this only takes effect on native
23803
- whileElementsMounted: passThrough || !open ? void 0 : import_floating.autoUpdate,
23828
+ whileElementsMounted: isOpen ? import_floating.autoUpdate : void 0,
23804
23829
  platform: disableRTL ?? setupOptions.disableRTL ? {
23805
23830
  ...import_floating.platform,
23806
23831
  isRTL(element) {
@@ -23858,10 +23883,13 @@ var require_Popper_native = __commonJS({
23858
23883
  JSON.stringify(middlewareData.arrow || null),
23859
23884
  floating.isPositioned
23860
23885
  ]);
23861
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopperProvider, {
23862
- scope,
23863
- ...popperContext,
23864
- children
23886
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.LayoutMeasurementController, {
23887
+ disable: !isOpen,
23888
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopperProvider, {
23889
+ scope,
23890
+ ...popperContext,
23891
+ children
23892
+ })
23865
23893
  });
23866
23894
  }
23867
23895
  var PopperAnchor = import_stacks3.YStack.extractable(/* @__PURE__ */ React4.forwardRef(function(props, forwardedRef) {