tamagui 1.134.5 → 1.135.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.
@@ -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
  },
@@ -17930,26 +17949,27 @@ var require_SheetImplementationCustom_native = __commonJS({
17930
17949
  ...animationConfig
17931
17950
  }));
17932
17951
  }
17933
- }), isAbleToPosition = /* @__PURE__ */ function() {
17934
- return !(disableAnimation || !frameSize || !screenSize || isHidden || hasntMeasured && !open);
17935
- }();
17952
+ });
17936
17953
  (0, import_constants4.useIsomorphicLayoutEffect)(function() {
17937
- hasntMeasured && screenSize && frameSize && (at.current = screenSize, animatedNumber.setValue(screenSize, {
17938
- type: "timing",
17939
- duration: 0
17940
- }, function() {
17941
- setTimeout(function() {
17942
- setDisableAnimation(!1);
17943
- }, 10);
17944
- }));
17954
+ if (hasntMeasured && screenSize && frameSize) {
17955
+ at.current = screenSize, animatedNumber.setValue(screenSize, {
17956
+ type: "timing",
17957
+ duration: 0
17958
+ }, function() {
17959
+ setTimeout(function() {
17960
+ setDisableAnimation(!1);
17961
+ }, 10);
17962
+ });
17963
+ return;
17964
+ }
17965
+ disableAnimation || !frameSize || !screenSize || isHidden || hasntMeasured && !open || (animateTo(position), position === -1 && (scrollBridge.scrollLock = !1, scrollBridge.scrollStartY = -1));
17945
17966
  }, [
17946
17967
  hasntMeasured,
17968
+ disableAnimation,
17969
+ isHidden,
17970
+ frameSize,
17947
17971
  screenSize,
17948
- frameSize
17949
- ]), (0, import_constants4.useIsomorphicLayoutEffect)(function() {
17950
- isAbleToPosition && (animateTo(position), position === -1 && (scrollBridge.scrollLock = !1, scrollBridge.scrollStartY = -1));
17951
- }, [
17952
- isAbleToPosition,
17972
+ open,
17953
17973
  position
17954
17974
  ]);
17955
17975
  var _props_disableDrag, disableDrag = (_props_disableDrag = props.disableDrag) !== null && _props_disableDrag !== void 0 ? _props_disableDrag : controller == null ? void 0 : controller.disableDrag, themeName = (0, import_core12.useThemeName)(), [isDragging, setIsDragging] = import_react3.default.useState(!1), panResponder = import_react3.default.useMemo(function() {
@@ -18073,59 +18093,62 @@ var require_SheetImplementationCustom_native = __commonJS({
18073
18093
  ]);
18074
18094
  var forcedContentHeight = hasFit ? void 0 : snapPointsMode === "percent" ? `${maxSnapPoint}${import_constants4.isWeb ? "dvh" : "%"}` : maxSnapPoint, setHasScrollView = import_react3.default.useCallback(function(val) {
18075
18095
  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
- {
18096
+ }, []), contents = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.LayoutMeasurementController, {
18097
+ disable: !open,
18098
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_contexts.ParentSheetContext.Provider, {
18099
+ value: nextParentContext,
18100
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_SheetContext.SheetProvider, {
18101
+ ...providerProps,
18102
+ setHasScrollView,
18103
+ children: [
18104
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_animate_presence.AnimatePresence, {
18105
+ custom: {
18106
+ open
18107
+ },
18108
+ children: shouldHideParentSheet || !open ? null : overlayComponent
18109
+ }),
18110
+ snapPointsMode !== "percent" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native4.View, {
18111
+ style: {
18112
+ opacity: 0,
18111
18113
  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
- }
18114
+ top: 0,
18115
+ left: 0,
18116
+ right: 0,
18117
+ bottom: 0,
18118
+ pointerEvents: "none"
18120
18119
  },
18121
- animatedStyle
18122
- ],
18123
- children: (
18124
- /* <AdaptProvider>{props.children}</AdaptProvider> */
18125
- props.children
18126
- )
18127
- })
18128
- ]
18120
+ onLayout: handleMaxContentViewLayout
18121
+ }),
18122
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnimatedView, {
18123
+ ref,
18124
+ ...panResponder == null ? void 0 : panResponder.panHandlers,
18125
+ onLayout: handleAnimationViewLayout,
18126
+ // @ts-ignore for CSS driver this is necessary to attach the transition
18127
+ // also motion driver at least though i suspect all drivers?
18128
+ animation: isDragging || disableAnimation ? null : animation,
18129
+ // @ts-ignore
18130
+ disableClassName: !0,
18131
+ style: [
18132
+ {
18133
+ position: "absolute",
18134
+ zIndex,
18135
+ width: "100%",
18136
+ height: forcedContentHeight,
18137
+ minHeight: forcedContentHeight,
18138
+ opacity: shouldHideParentSheet ? 0 : opacity,
18139
+ ...(shouldHideParentSheet || !open) && {
18140
+ pointerEvents: "none"
18141
+ }
18142
+ },
18143
+ animatedStyle
18144
+ ],
18145
+ children: (
18146
+ /* <AdaptProvider>{props.children}</AdaptProvider> */
18147
+ props.children
18148
+ )
18149
+ })
18150
+ ]
18151
+ })
18129
18152
  })
18130
18153
  });
18131
18154
  if (!import_portal2.USE_NATIVE_PORTAL) {
@@ -19244,16 +19267,19 @@ var require_Dialog_native = __commonJS({
19244
19267
  // NOTE: we remove the inner frame, but not the portal itself
19245
19268
  // saw a bug when we removed and re-added portals that caused stale inner contents of the portal
19246
19269
  // 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
19270
+ isFullyHidden && !isAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.LayoutMeasurementController, {
19271
+ disable: !isMountedOrOpen,
19272
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogPortalFrame, {
19273
+ ref,
19274
+ ...import_constants4.isWeb && isMountedOrOpen && {
19275
+ "aria-modal": !0
19276
+ },
19277
+ // passThrough={isAdapted}
19278
+ pointerEvents: isMountedOrOpen ? "auto" : "none",
19279
+ ...frameProps,
19280
+ className: "_no_backdrop " + (frameProps.className || ""),
19281
+ children: contents
19282
+ })
19257
19283
  })
19258
19284
  );
19259
19285
  return import_constants4.isWeb ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_portal2.Portal, {
@@ -23794,13 +23820,13 @@ var require_Popper_native = __commonJS({
23794
23820
  Object.assign(setupOptions, options);
23795
23821
  }
23796
23822
  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,
23823
+ 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)({
23824
+ open: isOpen,
23799
23825
  strategy,
23800
23826
  placement,
23801
23827
  sameScrollView: !1,
23802
23828
  // this only takes effect on native
23803
- whileElementsMounted: passThrough || !open ? void 0 : import_floating.autoUpdate,
23829
+ whileElementsMounted: isOpen ? import_floating.autoUpdate : void 0,
23804
23830
  platform: disableRTL ?? setupOptions.disableRTL ? {
23805
23831
  ...import_floating.platform,
23806
23832
  isRTL(element) {
@@ -23858,10 +23884,13 @@ var require_Popper_native = __commonJS({
23858
23884
  JSON.stringify(middlewareData.arrow || null),
23859
23885
  floating.isPositioned
23860
23886
  ]);
23861
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopperProvider, {
23862
- scope,
23863
- ...popperContext,
23864
- children
23887
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core12.LayoutMeasurementController, {
23888
+ disable: !isOpen,
23889
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PopperProvider, {
23890
+ scope,
23891
+ ...popperContext,
23892
+ children
23893
+ })
23865
23894
  });
23866
23895
  }
23867
23896
  var PopperAnchor = import_stacks3.YStack.extractable(/* @__PURE__ */ React4.forwardRef(function(props, forwardedRef) {