@tamagui/core 1.121.3 → 1.121.5

package/dist/native.js

@@ -1247,6 +1247,7 @@ var require_concatClassName_native = __commonJS({
       focus: "focusStyle",
       press: "pressStyle",
       focusVisible: "focusVisibleStyle",
+      focusWithin: "focusWithinStyle",
       disabled: "disabledStyle"
     };
   }
@@ -1821,7 +1822,8 @@ var require_validStyleProps_native = __commonJS({
       hoverStyle: !0,
       pressStyle: !0,
       focusStyle: !0,
-      disabledStyle: !0
+      disabledStyle: !0,
+      focusWithinStyle: !0
     }, validStyles = {
       ...validPseudoKeys,
       ...stylePropsView
@@ -2734,6 +2736,11 @@ var require_pseudoDescriptors_native = __commonJS({
         name: "focus",
         priority: 3
       },
+      focusWithinStyle: {
+        name: "focus-within",
+        priority: 3,
+        stateKey: "focusWithin"
+      },
       disabledStyle: {
         name: "disabled",
         priority: 4,
@@ -2744,6 +2751,7 @@ var require_pseudoDescriptors_native = __commonJS({
       press: 2,
       focus: 3,
       focusVisible: 3,
+      focusWithin: 3,
       disabled: 4
     }, pseudoDescriptors = {
       ...pseudoDescriptorsBase,
@@ -4502,6 +4510,7 @@ var require_ComponentContext_native = __commonJS({
       inText: !1,
       language: null,
       animationDriver: null,
+      setParentFocusState: null,
       groups: {
         emit: null,
         subscribe: null,
@@ -4566,6 +4575,7 @@ var require_defaultComponentState_native = __commonJS({
       pressIn: !1,
       focus: !1,
       focusVisible: !1,
+      focusWithin: !1,
       unmounted: !0,
       disabled: !1
     }, defaultComponentStateMounted = {
@@ -4739,7 +4749,9 @@ var require_createMediaStyle_native = __commonJS({
     });
     module2.exports = __toCommonJS2(createMediaStyle_exports);
     var import_config = require_config_native(), import_useMedia = require_useMedia_native(), import_getGroupPropParts = require_getGroupPropParts_native(), MEDIA_SEP = "_", prefixes = null, selectors = null, groupPseudoToPseudoCSSMap = {
-      press: "active"
+      press: "active",
+      focusVisible: "focus-visible",
+      focusWithin: "focus-within"
     }, specificities = new Array(5).fill(0).map(function(_, i) {
       return new Array(i).fill(":root").join("");
     });
@@ -4751,7 +4763,7 @@ var require_createMediaStyle_native = __commonJS({
       ];
     }
     var createMediaStyle = function(styleObject, mediaKeyIn, mediaQueries, type, negate, priority) {
-      var [property, , identifier, pseudoIn, rules] = styleObject, enableMediaPropOrder = (0, import_config.getSetting)("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
+      var [propertyIn, , identifier, pseudoIn, rules] = styleObject, property = propertyIn, enableMediaPropOrder = (0, import_config.getSetting)("mediaPropOrder"), isTheme = type === "theme", isPlatform = type === "platform", isGroup = type === "group", isNonWindowMedia = isTheme || isPlatform || isGroup, negKey = negate ? "0" : "", ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1), id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace("-", "")}${negKey}${MEDIA_SEP}`, styleRule = "", groupPriority = "", groupMediaKey, containerName, nextIdentifier = identifier.replace(ogPrefix, id), styleInner = rules.map(function(rule) {
         return rule.replace(identifier, nextIdentifier);
       }).join(";"), isHover = !1;
       if (isNonWindowMedia) {
@@ -7145,11 +7157,11 @@ var require_getSplitStyles_native = __commonJS({
               var _iteratorNormalCompletion12 = !0, _didIteratorError12 = !1, _iteratorError12 = void 0;
               try {
                 for (var _iterator12 = mediaStyles[Symbol.iterator](), _step12; !(_iteratorNormalCompletion12 = (_step12 = _iterator12.next()).done); _iteratorNormalCompletion12 = !0) {
-                  var style3 = _step12.value, property = style3[0];
-                  if (!(property[0] === "$" && !(0, import_isActivePlatform.isActivePlatform)(property))) {
+                  var style3 = _step12.value, property = style3[import_helpers.StyleObjectProperty], isSubStyle = property[0] === "$";
+                  if (!(isSubStyle && !(0, import_isActivePlatform.isActivePlatform)(property))) {
                     var out = (0, import_createMediaStyle.createMediaStyle)(style3, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
                     process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
-                    var fullKey1 = `${style3[import_helpers.StyleObjectProperty]}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers.StyleObjectPseudo] || ""}`;
+                    var subKey = isSubStyle ? style3[2] : "", fullKey1 = `${style3[import_helpers.StyleObjectProperty]}${subKey}${PROP_SPLIT}${mediaKeyShort}${style3[import_helpers.StyleObjectPseudo] || ""}`;
                     fullKey1 in usedKeys || (addStyleToInsertRules(rulesToInsert, out), mergeClassName(transforms, classNames, fullKey1, out[import_helpers.StyleObjectIdentifier], !0, !0));
                   }
                 }
@@ -7200,15 +7212,15 @@ var require_getSplitStyles_native = __commonJS({
                   importanceBump = priority1;
                 }
               }
-              for (var subKey in mediaStyle1) {
-                if (subKey === "space") {
+              for (var subKey1 in mediaStyle1) {
+                if (subKey1 === "space") {
                   space = valInit.space;
                   continue;
                 }
-                if (subKey[0] === "$") {
-                  if (!(0, import_isActivePlatform.isActivePlatform)(subKey) || !(0, import_isActiveTheme.isActiveTheme)(subKey, themeName)) continue;
-                  for (var subSubKey in mediaStyle1[subKey]) mergeMediaStyle2(subSubKey, mediaStyle1[subKey][subSubKey]);
-                } else mergeMediaStyle2(subKey, mediaStyle1[subKey]);
+                if (subKey1[0] === "$") {
+                  if (!(0, import_isActivePlatform.isActivePlatform)(subKey1) || !(0, import_isActiveTheme.isActiveTheme)(subKey1, themeName)) continue;
+                  for (var subSubKey in mediaStyle1[subKey1]) mergeMediaStyle2(subSubKey, mediaStyle1[subKey1][subSubKey]);
+                } else mergeMediaStyle2(subKey1, mediaStyle1[subKey1]);
               }
             }
             return "continue";
@@ -7257,8 +7269,14 @@ var require_getSplitStyles_native = __commonJS({
             if (0) var didUseKeyInit;
             var isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo1 = !!(isMedia || isPseudo);
             if (isMediaOrPseudo1 && keyInit.startsWith("$group-")) {
-              var name = keyInit.split("-")[1];
-              context != null && context.groups.subscribe && !(context != null && context.groups.state[name]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
+              var parts = keyInit.split("-");
+              if (
+                // check if its actually a simple group selector to avoid breaking selectors
+                parts.length === 2 || parts.length === 3 && import_pseudoDescriptors.pseudoPriorities[parts[parts.length - 1]]
+              ) {
+                var name = parts[1];
+                context != null && context.groups.subscribe && !(context != null && context.groups.state[name]) && (keyInit = keyInit.replace("$group-", "$group-true-"));
+              }
             }
             var isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !noExpand || isShorthand;
             if (!(isStyleProp && (asChild === "except-style" || asChild === "except-style-web"))) {
@@ -8641,7 +8659,7 @@ var require_createComponent_native = __commonJS({
         if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
           return stateRef.current.isListeningToTheme;
         }), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-          var name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
+          var name = `${componentName2 || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`, type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + ((presenceState == null ? void 0 : presenceState.isPresent) === !1 ? "(EXIT)" : ""), dataIs = propsIn["data-is"] || "", banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
           if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), import_constants2.isServer) (0, import_log.log)({
             noClass,
             isAnimated,
@@ -8755,7 +8773,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           return stateRef.current.host = x;
         }, forwardedRef, import_setElementProps.setElementProps)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants2.isWeb && !isHOC && import_react3.default.Children.toArray(props.children).forEach(function(item) {
           typeof item == "string" && item !== `
-` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
         }), process.env.NODE_ENV === "development" && time2 && time2`events-hooks`;
         var { pseudoGroups, mediaGroups } = splitStyles, unPress = function() {
           return setStateShallow({
@@ -8812,7 +8830,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             ...mediaGroups
           ]).join("") : 0
         ]);
-        var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants2.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
+        var runtimePressStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusStyle), runtimeFocusVisibleStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.focusVisibleStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || componentContext.setParentFocusState), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClass && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants2.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimePressStyle);
         process.env.NODE_ENV === "development" && time2 && time2`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("\u{1FAA9} events()", {
           runtimeFocusStyle,
           runtimePressStyle,
@@ -8854,7 +8872,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           },
           ...attachFocus && {
             onFocus: function(e) {
-              pseudos != null && pseudos.focusVisibleStyle ? setTimeout(function() {
+              componentContext.setParentFocusState && componentContext.setParentFocusState({
+                focusWithin: !0
+              }), pseudos != null && pseudos.focusVisibleStyle ? setTimeout(function() {
                 setStateShallow({
                   focus: !0,
                   focusVisible: !!lastInteractionWasKeyboard.value
@@ -8865,7 +8885,9 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               }), onFocus == null || onFocus(e);
             },
             onBlur: function(e) {
-              setStateShallow({
+              componentContext.setParentFocusState && componentContext.setParentFocusState({
+                focusWithin: !1
+              }), setStateShallow({
                 focus: !1,
                 focusVisible: !1
               }), onBlur == null || onBlur(e);
@@ -8935,9 +8957,10 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         }, [
           groupName
         ]);
-        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+        if ((groupName && subGroupContext || propsIn.focusWithinStyle) && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
           ...componentContext,
           groups: subGroupContext,
+          setParentFocusState: setStateShallow,
           children: content
         })), process.env.NODE_ENV === "development" && time2 && time2`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time2 && time2`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, {
           themeState,