tamagui 1.79.9 → 1.79.11

package/dist/native.js

@@ -4175,7 +4175,8 @@ var require_createComponent_native = __commonJS({
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
       let component = (0, import_react2.forwardRef)((propsIn, forwardedRef) => {
-        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m;
+        var _a2, _b, _c, _d, _e, _f, _i, _j, _k, _l, _m, _n;
+        let internalID = process.env.NODE_ENV === "development" ? (0, import_react2.useId)() : "";
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           hasSetupBaseViews = !0;
           let baseViews = (_b = (_a2 = import_setupHooks.hooks).getBaseViews) == null ? void 0 : _b.call(_a2);
@@ -4266,32 +4267,29 @@ var require_createComponent_native = __commonJS({
         };
         typeof stateRef.current.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = () => stateRef.current.isListeningToTheme), themeStateProps.deopt = willBeAnimated;
         let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1;
-        if (process.env.NODE_ENV === "development") {
-          let id = (0, import_react2.useId)();
-          if (debugProp && debugProp !== "profile") {
-            let name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
-            console.group(
-              `%c ${banner} (unmounted: ${state.unmounted})${presence ? ` (presence: ${presence[0]})` : ""} ${isHydrated ? "\u{1F4A6}" : "\u{1F3DC}\uFE0F"}`,
-              "background: green; color: white;"
-            ), import_constants.isServer || (console.groupCollapsed(
-              `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
-            ), (0, import_log.log)({
-              propsIn,
-              props,
-              state,
-              staticConfig,
-              elementType,
-              themeStateProps,
-              styledContext: { contextProps: styledContextProps, overriddenContextProps },
-              presence,
-              isAnimated,
-              isHOC,
-              hasAnimationProp,
-              useAnimations,
-              propsInOrder: Object.keys(propsIn),
-              propsOrder: Object.keys(props)
-            }), console.groupEnd());
-          }
+        if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+          let name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${internalID}`;
+          console.group(
+            `%c ${banner} (unmounted: ${state.unmounted})${presence ? ` (presence: ${presence[0]})` : ""} ${isHydrated ? "\u{1F4A6}" : "\u{1F3DC}\uFE0F"}`,
+            "background: green; color: white;"
+          ), import_constants.isServer || (console.groupCollapsed(
+            `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
+          ), (0, import_log.log)({
+            propsIn,
+            props,
+            state,
+            staticConfig,
+            elementType,
+            themeStateProps,
+            styledContext: { contextProps: styledContextProps, overriddenContextProps },
+            presence,
+            isAnimated,
+            isHOC,
+            hasAnimationProp,
+            useAnimations,
+            propsInOrder: Object.keys(propsIn),
+            propsOrder: Object.keys(props)
+          }), console.groupEnd());
         }
         process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
         let [themeState, theme] = (0, import_useTheme.useThemeWithState)(themeStateProps);
@@ -4517,8 +4515,8 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           direction,
           isZStack,
           debug: debugProp
-        });
-        asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
+        }), ResetPresence = (_l = config == null ? void 0 : config.animations) == null ? void 0 : _l.ResetPresence;
+        willBeAnimated && presence && ResetPresence && (content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResetPresence, { children: content })), asChild && (elementType = import_Slot.Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
         let useChildrenResult;
         import_setupHooks.hooks.useChildren && (useChildrenResult = import_setupHooks.hooks.useChildren(
           elementType,
@@ -4556,7 +4554,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           content = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Provider, { ...contextValue, ...overriddenContextProps, children: content });
         }
         if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-          console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> with props`);
+          console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> (${internalID}) with props`);
           try {
             (0, import_log.log)("viewProps", viewProps), (0, import_log.log)("viewPropsOrder", Object.keys(viewProps));
             for (let key in viewProps)
@@ -4574,8 +4572,8 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               handlesPressEvents,
               willBeAnimated,
               isStringElement,
-              classNamesIn: (_l = props.className) == null ? void 0 : _l.split(" "),
-              classNamesOut: (_m = viewProps.className) == null ? void 0 : _m.split(" "),
+              classNamesIn: (_m = props.className) == null ? void 0 : _m.split(" "),
+              classNamesOut: (_n = viewProps.className) == null ? void 0 : _n.split(" "),
               events,
               shouldAttach,
               pseudos,
@@ -6189,10 +6187,11 @@ var require_PresenceContext_native = __commonJS({
       return to;
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), PresenceContext_exports = {};
     __export2(PresenceContext_exports, {
-      PresenceContext: () => PresenceContext
+      PresenceContext: () => PresenceContext,
+      ResetPresence: () => ResetPresence
     });
     module2.exports = __toCommonJS2(PresenceContext_exports);
-    var import_react2 = require("react"), PresenceContext = (0, import_react2.createContext)(null);
+    var import_react2 = require("react"), import_jsx_runtime6 = require("react/jsx-runtime"), PresenceContext = (0, import_react2.createContext)(null), ResetPresence = (props) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PresenceContext.Provider, { value: null, children: props.children });
   }
 });
 
@@ -8415,6 +8414,27 @@ var require_ThemeableStack_native = __commonJS({
   }
 });
 
+// ../stacks/dist/cjs/NestingContext.native.js
+var require_NestingContext_native = __commonJS({
+  "../stacks/dist/cjs/NestingContext.native.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty, __getOwnPropDesc2 = Object.getOwnPropertyDescriptor, __getOwnPropNames2 = Object.getOwnPropertyNames, __hasOwnProp2 = Object.prototype.hasOwnProperty, __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: !0 });
+    }, __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from == "object" || typeof from == "function")
+        for (let key of __getOwnPropNames2(from))
+          !__hasOwnProp2.call(to, key) && key !== except && __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      return to;
+    }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), NestingContext_exports = {};
+    __export2(NestingContext_exports, {
+      ButtonNestingContext: () => ButtonNestingContext
+    });
+    module2.exports = __toCommonJS2(NestingContext_exports);
+    var import_react2 = require("react"), ButtonNestingContext = (0, import_react2.createContext)(!1);
+  }
+});
+
 // ../stacks/dist/cjs/index.native.js
 var require_index_native19 = __commonJS({
   "../stacks/dist/cjs/index.native.js"(exports, module2) {
@@ -8429,6 +8449,7 @@ var require_index_native19 = __commonJS({
     __reExport2(src_exports2, require_Stacks_native(), module2.exports);
     __reExport2(src_exports2, require_SizableStack_native(), module2.exports);
     __reExport2(src_exports2, require_ThemeableStack_native(), module2.exports);
+    __reExport2(src_exports2, require_NestingContext_native(), module2.exports);
   }
 });
 
@@ -10883,11 +10904,11 @@ var require_Dialog_native = __commonJS({
       name: TRIGGER_NAME
     }), DialogTrigger = DialogTriggerFrame.styleable(
       (props, forwardedRef) => {
-        let { __scopeDialog, ...triggerProps } = props, context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        let { __scopeDialog, ...triggerProps } = props, isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext), context = useDialogContext(TRIGGER_NAME, __scopeDialog), composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           DialogTriggerFrame,
           {
-            tag: "button",
+            tag: isInsideButton ? "span" : "button",
             "aria-haspopup": "dialog",
             "aria-expanded": context.open,
             "aria-controls": context.contentId,
@@ -10896,7 +10917,7 @@ var require_Dialog_native = __commonJS({
             ref: composedTriggerRef,
             onPress: (0, import_core13.composeEventHandlers)(props.onPress, context.onOpenToggle)
           }
-        );
+        ) });
       }
     );
     DialogTrigger.displayName = TRIGGER_NAME;
@@ -11173,27 +11194,18 @@ var require_Dialog_native = __commonJS({
     DialogDescription.displayName = DESCRIPTION_NAME;
     var CLOSE_NAME = "DialogClose", DialogCloseFrame = (0, import_core13.styled)(import_core13.View, {
       name: CLOSE_NAME,
-      tag: "button",
-      variants: {
-        unstyled: {
-          false: {
-            zIndex: 100
-          }
-        }
-      },
-      defaultVariants: {
-        unstyled: process.env.TAMAGUI_HEADLESS === "1"
-      }
+      tag: "button"
     }), DialogClose = DialogCloseFrame.styleable(
       (props, forwardedRef) => {
         let { __scopeDialog, displayWhenAdapted, ...closeProps } = props, context = useDialogContext(CLOSE_NAME, __scopeDialog, {
           warn: !1,
           fallback: {}
-        });
-        return useShowDialogSheet(context) && !displayWhenAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        }), isSheet = useShowDialogSheet(context), isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext);
+        return isSheet && !displayWhenAdapted ? null : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           DialogCloseFrame,
           {
             accessibilityLabel: "Dialog Close",
+            tag: isInsideButton ? "span" : "button",
             ...closeProps,
             ref: forwardedRef,
             onPress: (0, import_core13.composeEventHandlers)(
@@ -12033,7 +12045,6 @@ var require_Button_native = __commonJS({
       ButtonContext: () => ButtonContext,
       ButtonFrame: () => ButtonFrame,
       ButtonIcon: () => ButtonIcon,
-      ButtonNestingContext: () => ButtonNestingContext,
       ButtonText: () => ButtonText,
       buttonStaticConfig: () => buttonStaticConfig,
       useButton: () => useButton
@@ -12151,9 +12162,9 @@ var require_Button_native = __commonJS({
     }, Button2 = (0, import_web.withStaticProperties)(ButtonComponent, {
       Text: ButtonText,
       Icon: ButtonIcon
-    }), ButtonNestingContext = (0, import_react2.createContext)(!1);
+    });
     function useButton({ textProps, ...propsIn }, { Text: Text3 = Button2.Text } = { Text: Button2.Text }) {
-      let isNested = (0, import_react2.useContext)(ButtonNestingContext), didFinishSSR = (0, import_web.useDidFinishSSR)(), propsActive = (0, import_web.useProps)(propsIn), {
+      let isNested = (0, import_react2.useContext)(import_stacks3.ButtonNestingContext), didFinishSSR = (0, import_web.useDidFinishSSR)(), propsActive = (0, import_web.useProps)(propsIn), {
         icon,
         iconAfter,
         space,
@@ -12163,7 +12174,8 @@ var require_Button_native = __commonJS({
         separator,
         noTextWrap,
         fontFamily,
-        fontSize
+        fontSize,
+        ...restProps
       } = propsActive, size2 = propsActive.size || (propsActive.unstyled ? void 0 : "$true"), color = propsActive.color, iconSize = (typeof size2 == "number" ? size2 * 0.5 : (0, import_font_size.getFontSize)(size2)) * scaleIcon, getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({
         size: iconSize,
         color
@@ -12185,7 +12197,7 @@ var require_Button_native = __commonJS({
         // defaults to <a /> when accessibilityRole = link
         // see https://github.com/tamagui/tamagui/issues/505
         propsActive.accessibilityRole === "link" ? "a" : void 0
-      ), { iconAfter: _1, icon: _2, noTextWrap: _3, ...restProps } = propsIn, props = {
+      ), props = {
         size: size2,
         ...propsIn.disabled && {
           // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
@@ -12199,7 +12211,7 @@ var require_Button_native = __commonJS({
           tag
         },
         ...restProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ButtonNestingContext.Provider, { value: !0, children: inner }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: inner }),
         // forces it to be a runtime pressStyle so it passes through context text colors
         disableClassName: didFinishSSR
       };
@@ -12808,7 +12820,7 @@ var require_Checkbox_native = __commonJS({
         native,
         scaleIcon,
         ...checkboxProps
-      } = props, [button, setButton] = React2.useState(null), composedRefs = (0, import_core13.useComposedRefs)(forwardedRef, (node) => setButton(node)), hasConsumerStoppedPropagationRef = React2.useRef(!1), propsActive = (0, import_core13.useProps)(props), isFormControl = import_core13.isWeb ? button ? !!button.closest("form") : !0 : !1, [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
+      } = props, isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext), [button, setButton] = React2.useState(null), composedRefs = (0, import_core13.useComposedRefs)(forwardedRef, (node) => setButton(node)), hasConsumerStoppedPropagationRef = React2.useRef(!1), propsActive = (0, import_core13.useProps)(props), isFormControl = import_core13.isWeb ? button ? !!button.closest("form") : !0 : !1, [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
         prop: checkedProp,
         defaultProp: defaultChecked,
         onChange: onCheckedChange
@@ -12844,7 +12856,7 @@ var require_Checkbox_native = __commonJS({
           {
             width: size2,
             height: size2,
-            tag: "button",
+            tag: isInsideButton ? "span" : "button",
             role: "checkbox",
             "aria-labelledby": labelledBy,
             "aria-checked": isIndeterminate(checked) ? "mixed" : checked,
@@ -16930,7 +16942,9 @@ var require_Select_native = __commonJS({
         });
         React2.useEffect(() => {
           open && emitValue(value);
-        }, [open]);
+        }, [open]), React2.useEffect(() => {
+          emitValue(value);
+        }, [value]);
         let [activeIndex, setActiveIndex] = React2.useState(0), [emitValue, valueSubscribe] = useEmitter(), [emitActiveIndex, activeIndexSubscribe] = useEmitter(), selectedIndexRef = React2.useRef(null), activeIndexRef = React2.useRef(null), listContentRef = React2.useRef([]), [selectedIndex, setSelectedIndex] = React2.useState(0), [valueNode, setValueNode] = React2.useState(null);
         (0, import_core13.useIsomorphicLayoutEffect)(() => {
           selectedIndexRef.current = selectedIndex, activeIndexRef.current = activeIndex;
@@ -17124,8 +17138,8 @@ var require_helpers_native2 = __commonJS({
       return distances.indexOf(closestDistance);
     }
     function getThumbInBoundsOffset(width, left, direction) {
-      let halfWidth = width / 2, offset2 = linearScale([0, 50], [0, halfWidth]);
-      return (halfWidth - offset2(left) * direction) * direction;
+      let quarterWidth = width / 4, offset2 = linearScale([0, 50], [0, quarterWidth]);
+      return (quarterWidth - offset2(left) * direction) * direction;
     }
     function getStepsBetweenValues(values) {
       return values.slice(0, -1).map((value, index) => values[index + 1] - value);
@@ -17917,25 +17931,29 @@ var require_createSwitch_native = __commonJS({
           onChange: onCheckedChange,
           transition: !0
         });
-        return shouldRenderMobileNative ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          import_react_native4.Switch,
-          {
-            value: checkedProp,
-            onValueChange: onCheckedChange,
-            ...nativeProps
-          }
-        ) : (import_core13.isWeb || React2.useEffect(() => {
+        if (shouldRenderMobileNative)
+          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            import_react_native4.Switch,
+            {
+              value: checkedProp,
+              onValueChange: onCheckedChange,
+              ...nativeProps
+            }
+          );
+        import_core13.isWeb || React2.useEffect(() => {
           if (props.id)
             return (0, import_focusable2.registerFocusable)(props.id, {
               focus: () => {
                 setChecked((x) => !x);
               }
             });
-        }, [props.id, setChecked]), /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        }, [props.id, setChecked]);
+        let isInsideButton = React2.useContext(import_stacks3.ButtonNestingContext);
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_stacks3.ButtonNestingContext.Provider, { value: !0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Frame,
             {
-              tag: "button",
+              tag: isInsideButton ? "span" : "button",
               unstyled,
               size: size2,
               checked,
@@ -17971,7 +17989,7 @@ var require_createSwitch_native = __commonJS({
                 }
               )
             }
-          ),
+          ) }),
           import_core13.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             BubbleInput,
             {
@@ -17985,7 +18003,7 @@ var require_createSwitch_native = __commonJS({
               style: { transform: "translateX(-100%)" }
             }
           )
-        ] }));
+        ] });
       }), BubbleInput = (props) => {
         let { control, checked, bubbles = !0, ...inputProps } = props, ref = React2.useRef(null), prevChecked = (0, import_use_previous.usePrevious)(checked);
         return React2.useEffect(() => {
@@ -19078,7 +19096,7 @@ var require_index_native67 = __commonJS({
       }, debounced;
     }
     var defaultOpts = { leading: !1 };
-    function useDebounce(fn, wait, options = defaultOpts, mountArgs = []) {
+    function useDebounce(fn, wait, options = defaultOpts, mountArgs = [fn]) {
       let dbEffect = (0, import_react2.useRef)(null);
       return (0, import_react2.useEffect)(() => () => {
         var _a;