tamagui 1.79.6 → 1.79.8

package/dist/native.js

@@ -1261,7 +1261,7 @@ var require_useMedia_native = __commonJS({
       return listeners.add(subscriber), () => listeners.delete(subscriber);
     }
     function useMedia3(uid, componentContext) {
-      let internal = (0, import_react2.useRef)(), initialState = ((componentContext ? (0, import_useDisableSSR.getDisableSSR)(componentContext) : (0, import_useDisableSSR.useDisableSSR)()) ? mediaState3 : initState) || {}, state = (0, import_react2.useSyncExternalStore)(
+      let internal = (0, import_react2.useRef)(), initialState = ((componentContext ? (0, import_useDisableSSR.getDisableSSR)(componentContext) : (0, import_useDisableSSR.useDisableSSR)()) || !import_constants.isWeb ? mediaState3 : initState) || {}, state = (0, import_react2.useSyncExternalStore)(
         subscribe,
         () => {
           if (!internal.current)
@@ -3761,7 +3761,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         if (forceShouldChange || next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState)))
           return next;
       }
-      if (import_constants.isServer || ((0, import_react2.useLayoutEffect)(() => {
+      if (import_constants.isServer || ((0, import_react2.useEffect)(() => {
         if (!themeManager)
           return;
         if (props.inverse && !mounted) {
@@ -3777,7 +3777,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme(
           (name, manager, forced) => {
             let force = forced || (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], shouldTryUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
-            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, { force, shouldTryUpdate, props, name, manager, keys }), shouldTryUpdate && setThemeState(createState);
+            process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, { force, shouldTryUpdate, props, name, manager, keys }), shouldTryUpdate && setThemeState((prev) => createState(prev, force));
           },
           themeManager.id
         );
@@ -10407,7 +10407,7 @@ var require_SheetScrollView_native = __commonJS({
     });
     module2.exports = __toCommonJS2(SheetScrollView_exports);
     var import_core13 = require_index_native15(), import_scroll_view = require_index_native33(), import_react2 = require("react"), import_SheetContext = require_SheetContext_native(), import_jsx_runtime6 = require("react/jsx-runtime"), SHEET_SCROLL_VIEW_NAME = "SheetScrollView", SheetScrollView = (0, import_react2.forwardRef)(
-      ({ __scopeSheet, children, ...props }, ref) => {
+      ({ __scopeSheet, children, onScroll, ...props }, ref) => {
         let context = (0, import_SheetContext.useSheetContext)(SHEET_SCROLL_VIEW_NAME, __scopeSheet), { scrollBridge } = context, scrollRef = (0, import_react2.useRef)(null), state = (0, import_react2.useRef)({
           lastPageY: 0,
           dragAt: 0,
@@ -10437,7 +10437,7 @@ var require_SheetScrollView_native = __commonJS({
             scrollEventThrottle: 8,
             onScroll: (e) => {
               let { y } = e.nativeEvent.contentOffset;
-              scrollBridge.y = y, y > 0 && (scrollBridge.scrollStartY = -1);
+              scrollBridge.y = y, y > 0 && (scrollBridge.scrollStartY = -1), onScroll == null || onScroll(e);
             },
             onStartShouldSetResponder: () => (scrollBridge.scrollStartY = -1, state.current.isDragging = !0, !0),
             onMoveShouldSetResponder: () => !1,
@@ -17230,8 +17230,8 @@ var require_SliderImpl_native = __commonJS({
             onStartShouldSetResponder: () => !0,
             onResponderTerminationRequest: () => !1,
             onResponderGrant: (0, import_core13.composeEventHandlers)(props.onResponderGrant, (event) => {
-              let target = event.target, isStartingOnThumb = context.thumbs.has(target);
-              import_core13.isWeb && target instanceof HTMLElement && context.thumbs.has(target) && target.focus(), onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
+              let target = event.target, thumbIndex = context.thumbs.get(target), isStartingOnThumb = thumbIndex !== void 0;
+              import_core13.isWeb && target instanceof HTMLElement && context.thumbs.has(target) && target.focus(), !import_core13.isWeb && isStartingOnThumb && (context.valueIndexToChangeRef.current = thumbIndex), onSlideStart(event, isStartingOnThumb ? "thumb" : "track");
             }),
             onResponderMove: (0, import_core13.composeEventHandlers)(props.onResponderMove, (event) => {
               event.stopPropagation(), onSlideMove(event);
@@ -17518,10 +17518,10 @@ var require_Slider_native = __commonJS({
       ), value = context.values[index], percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max), label = (0, import_helpers2.getLabel)(index, context.values.length), sizeIn = sizeProp ?? context.size ?? "$true", [size2, setSize] = React2.useState(() => (0, import_core13.getVariableValue)(getThumbSize(sizeIn).width)), thumbInBoundsOffset = size2 ? (0, import_helpers2.getThumbInBoundsOffset)(size2, percent, orientation.direction) : 0;
       React2.useEffect(() => {
         if (thumb)
-          return context.thumbs.add(thumb), () => {
+          return context.thumbs.set(thumb, index), () => {
             context.thumbs.delete(thumb);
           };
-      }, [thumb, context.thumbs]);
+      }, [thumb, context.thumbs, index]);
       let positionalStyles = context.orientation === "horizontal" ? {
         x: thumbInBoundsOffset - size2 / 2,
         y: -size2 / 2,
@@ -17584,13 +17584,12 @@ var require_Slider_native = __commonJS({
           onSlideMove,
           onSlideStart,
           ...sliderProps
-        } = props, sliderRef = React2.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef), thumbRefs = React2.useRef(/* @__PURE__ */ new Set()), valueIndexToChangeRef = React2.useRef(0), isHorizontal = orientation === "horizontal", [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
+        } = props, sliderRef = React2.useRef(null), composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef), thumbRefs = React2.useRef(/* @__PURE__ */ new Map()), valueIndexToChangeRef = React2.useRef(0), isHorizontal = orientation === "horizontal", [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
           prop: value,
           defaultProp: defaultValue,
           transition: !0,
           onChange: (value2) => {
-            var _a;
-            import_core13.isWeb && ((_a = [...thumbRefs.current][valueIndexToChangeRef.current]) == null || _a.focus()), onValueChange(value2);
+            updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
           }
         });
         import_core13.isWeb && React2.useEffect(() => {
@@ -17604,6 +17603,15 @@ var require_Slider_native = __commonJS({
             node.removeEventListener("touchstart", preventDefault);
           };
         }, []);
+        function updateThumbFocus(focusIndex) {
+          if (import_core13.isWeb) {
+            for (let [node, index] of thumbRefs.current.entries())
+              if (index === focusIndex) {
+                node.focus();
+                return;
+              }
+          }
+        }
         function handleSlideMove(value2, event) {
           updateValues(value2, valueIndexToChangeRef.current), onSlideMove == null || onSlideMove(event, value2);
         }
@@ -17879,109 +17887,103 @@ var require_createSwitch_native = __commonJS({
             ref: forwardedRef
           }
         );
-      }), SwitchComponent = Frame.extractable(
-        React2.forwardRef(function(propsIn, forwardedRef) {
-          let styledContext = React2.useContext(import_SwitchContext.SwitchContext), props = (0, import_core13.useProps)(propsIn, {
-            noNormalize: !0,
-            noExpand: !0,
-            resolveValues: "none",
-            forComponent: Frame
-          }), {
-            labeledBy: ariaLabelledby,
-            name,
-            checked: checkedProp,
-            defaultChecked,
-            required,
-            disabled,
-            value = "on",
-            onCheckedChange,
-            size: size2 = styledContext.size ?? "$true",
-            unstyled = styledContext.unstyled ?? !1,
-            native: nativeProp,
-            nativeProps,
-            children,
-            ...switchProps
-          } = props, native = Array.isArray(nativeProp) ? nativeProp : [nativeProp], shouldRenderMobileNative = !import_core13.isWeb && nativeProp === !0 || !import_core13.isWeb && native.includes("mobile") || native.includes("android") && import_react_native4.Platform.OS === "android" || native.includes("ios") && import_react_native4.Platform.OS === "ios", [button, setButton] = React2.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(
-            forwardedRef,
-            // @ts-expect-error
-            setButton
-          ), labelId = (0, import_label.useLabelContext)(button), labelledBy = ariaLabelledby || labelId, hasConsumerStoppedPropagationRef = React2.useRef(!1), isFormControl = import_core13.isWeb ? button ? !!button.closest("form") : !0 : !1, [frameWidth, setFrameWidth] = React2.useState(0), [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
-            prop: checkedProp,
-            defaultProp: defaultChecked || !1,
-            onChange: onCheckedChange,
-            transition: !0
-          });
-          return shouldRenderMobileNative ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-            import_react_native4.Switch,
+      }), SwitchComponent = Frame.styleable(function(propsIn, forwardedRef) {
+        let styledContext = React2.useContext(import_SwitchContext.SwitchContext), props = (0, import_core13.useProps)(propsIn, {
+          noNormalize: !0,
+          noExpand: !0,
+          resolveValues: "none",
+          forComponent: Frame
+        }), {
+          labeledBy: ariaLabelledby,
+          name,
+          checked: checkedProp,
+          defaultChecked,
+          required,
+          disabled,
+          value = "on",
+          onCheckedChange,
+          size: size2 = styledContext.size ?? "$true",
+          unstyled = styledContext.unstyled ?? !1,
+          native: nativeProp,
+          nativeProps,
+          children,
+          ...switchProps
+        } = props, native = Array.isArray(nativeProp) ? nativeProp : [nativeProp], shouldRenderMobileNative = !import_core13.isWeb && nativeProp === !0 || !import_core13.isWeb && native.includes("mobile") || native.includes("android") && import_react_native4.Platform.OS === "android" || native.includes("ios") && import_react_native4.Platform.OS === "ios", [button, setButton] = React2.useState(null), composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setButton), labelId = (0, import_label.useLabelContext)(button), labelledBy = ariaLabelledby || labelId, hasConsumerStoppedPropagationRef = React2.useRef(!1), isFormControl = import_core13.isWeb ? button ? !!button.closest("form") : !0 : !1, [frameWidth, setFrameWidth] = React2.useState(0), [checked = !1, setChecked] = (0, import_use_controllable_state.useControllableState)({
+          prop: checkedProp,
+          defaultProp: defaultChecked || !1,
+          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 (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)(
+            Frame,
             {
-              value: checkedProp,
-              onValueChange: onCheckedChange,
-              ...nativeProps
-            }
-          ) : (import_core13.isWeb || React2.useEffect(() => {
-            if (props.id)
-              return (0, import_focusable2.registerFocusable)(props.id, {
-                focus: () => {
-                  setChecked((x) => !x);
+              tag: "button",
+              unstyled,
+              size: size2,
+              checked,
+              disabled,
+              frameWidth,
+              themeShallow: !0,
+              ...!disableActiveTheme && {
+                theme: checked ? "active" : null,
+                themeShallow: !0
+              },
+              role: "switch",
+              "aria-checked": checked,
+              "aria-labelledby": labelledBy,
+              "aria-required": required,
+              "data-state": getState(checked),
+              "data-disabled": disabled ? "" : void 0,
+              tabIndex: disabled ? void 0 : 0,
+              value,
+              ...switchProps,
+              ref: composedRefs,
+              onPress: (0, import_core13.composeEventHandlers)(props.onPress, (event) => {
+                setChecked((prevChecked) => !prevChecked), import_core13.isWeb && isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                import_stacks3.YStack,
+                {
+                  alignSelf: "stretch",
+                  flex: 1,
+                  onLayout: (e) => {
+                    setFrameWidth(e.nativeEvent.layout.width);
+                  },
+                  children: typeof children == "function" ? children(checked) : children
                 }
-              });
-          }, [props.id, setChecked]), /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              Frame,
-              {
-                tag: "button",
-                unstyled,
-                size: size2,
-                checked,
-                disabled,
-                frameWidth,
-                themeShallow: !0,
-                ...!disableActiveTheme && {
-                  theme: checked ? "active" : null,
-                  themeShallow: !0
-                },
-                role: "switch",
-                "aria-checked": checked,
-                "aria-labelledby": labelledBy,
-                "aria-required": required,
-                "data-state": getState(checked),
-                "data-disabled": disabled ? "" : void 0,
-                tabIndex: disabled ? void 0 : 0,
-                value,
-                ...switchProps,
-                ref: composedRefs,
-                onPress: (0, import_core13.composeEventHandlers)(props.onPress, (event) => {
-                  setChecked((prevChecked) => !prevChecked), import_core13.isWeb && isFormControl && (hasConsumerStoppedPropagationRef.current = event.isPropagationStopped(), hasConsumerStoppedPropagationRef.current || event.stopPropagation());
-                }),
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-                  import_stacks3.YStack,
-                  {
-                    alignSelf: "stretch",
-                    flex: 1,
-                    onLayout: (e) => {
-                      setFrameWidth(e.nativeEvent.layout.width);
-                    },
-                    children: typeof children == "function" ? children(checked) : children
-                  }
-                )
-              }
-            ),
-            import_core13.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              BubbleInput,
-              {
-                control: button,
-                bubbles: !hasConsumerStoppedPropagationRef.current,
-                name,
-                value,
-                checked,
-                required,
-                disabled,
-                style: { transform: "translateX(-100%)" }
-              }
-            )
-          ] }));
-        })
-      ), BubbleInput = (props) => {
+              )
+            }
+          ),
+          import_core13.isWeb && isFormControl && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            BubbleInput,
+            {
+              control: button,
+              bubbles: !hasConsumerStoppedPropagationRef.current,
+              name,
+              value,
+              checked,
+              required,
+              disabled,
+              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(() => {
           let input = ref.current, inputProto = window.HTMLInputElement.prototype, setChecked = Object.getOwnPropertyDescriptor(