@tamagui/web 1.84.2 → 1.85.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.84.2",
+  "version": "1.85.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,21 +27,21 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.84.2",
-    "@tamagui/constants": "1.84.2",
-    "@tamagui/helpers": "1.84.2",
-    "@tamagui/normalize-css-color": "1.84.2",
-    "@tamagui/timer": "1.84.2",
-    "@tamagui/use-did-finish-ssr": "1.84.2",
-    "@tamagui/use-event": "1.84.2",
-    "@tamagui/use-force-update": "1.84.2"
+    "@tamagui/compose-refs": "1.85.0",
+    "@tamagui/constants": "1.85.0",
+    "@tamagui/helpers": "1.85.0",
+    "@tamagui/normalize-css-color": "1.85.0",
+    "@tamagui/timer": "1.85.0",
+    "@tamagui/use-did-finish-ssr": "1.85.0",
+    "@tamagui/use-event": "1.85.0",
+    "@tamagui/use-force-update": "1.85.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.84.2",
+    "@tamagui/build": "1.85.0",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -145,7 +145,7 @@ let hasSetupBaseViews = false
 export function createComponent<
   ComponentPropTypes extends StackProps | TextProps = {},
   Ref = TamaguiElement,
-  BaseProps = never
+  BaseProps = never,
 >(staticConfig: StaticConfig) {
   let config: TamaguiInternalConfig | null = null
   let defaultProps = staticConfig.defaultProps
@@ -361,6 +361,7 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`stateref`
 
+    // TODO can remove and fold into stateRef
     const hostRef = useRef<TamaguiElement>(null)
 
     /**
@@ -371,7 +372,7 @@ export function createComponent<
 
     // after we get states mount we need to turn off isAnimated for server side
     const hasAnimationProp = Boolean(
-      props.animation || (props.style && hasAnimatedStyleValue(props.style))
+      'animation' in props || (props.style && hasAnimatedStyleValue(props.style))
     )
 
     // disable for now still ssr issues
@@ -464,8 +465,8 @@ export function createComponent<
     const componentClassName = props.asChild
       ? ''
       : props.componentName
-      ? `is_${props.componentName}`
-      : defaultComponentClassName
+        ? `is_${props.componentName}`
+        : defaultComponentClassName
 
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
     const isDisabled = props.disabled ?? props.accessibilityState?.disabled
@@ -554,8 +555,11 @@ export function createComponent<
       if (debugProp && debugProp !== 'profile') {
         // prettier-ignore
         const name = `${
-          componentName || Component?.displayName || Component?.name || "[Unnamed Component]"
-        }`;
+          componentName ||
+          Component?.displayName ||
+          Component?.name ||
+          '[Unnamed Component]'
+        }`
         const type = isAnimatedReactNative ? '(animated)' : isReactNative ? '(rnw)' : ''
         const dataIs = propsIn['data-is'] || ''
         const banner = `${name}${dataIs ? ` ${dataIs}` : ''} ${type} id ${internalID}`

package/src/createTamagui.ts

@@ -322,14 +322,16 @@ function getThemesDeduped(themes: ThemesLikeObject): DedupedThemes {
     const darkOrLightSpecificPrefix = themeName.startsWith('dark')
       ? 'dark'
       : themeName.startsWith('light')
-      ? 'light'
-      : ''
+        ? 'light'
+        : ''
 
     const rawTheme = themes[themeName]
 
     // dont force referential equality but may need something more consistent than JSON.stringify
     // separate between dark/light
-    const key = darkOrLightSpecificPrefix + JSON.stringify(rawTheme)
+    const key =
+      darkOrLightSpecificPrefix +
+      JSON.stringify(Object.entries(rawTheme).sort((a, b) => (a[0] > b[0] ? -1 : 1)))
 
     // if existing, avoid
     if (existing.has(key)) {

package/src/createVariables.ts

@@ -10,8 +10,8 @@ export type DeepVariableObject<A extends DeepTokenObject> = {
   [Key in keyof A]: A[Key] extends string | number
     ? Variable<A[Key]>
     : A[Key] extends DeepTokenObject
-    ? DeepVariableObject<A[Key]>
-    : never
+      ? DeepVariableObject<A[Key]>
+      : never
 }
 
 const cache = new WeakMap()

package/src/helpers/ThemeManager.tsx

@@ -308,8 +308,9 @@ function getState(
       const pre = THEME_CLASSNAME_PREFIX
       const className = !isWeb
         ? ''
-        : `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join('_')
-        }`
+        : `${pre}sub_theme ${pre}${
+            !scheme || !restNames.length ? firstName : restNames.join('_')
+          }`
 
       // because its a new theme the baseManager is now the parent
       const parentState = (baseManager || parentManager)?.state

package/src/helpers/ThemeManagerContext.tsx

@@ -1,4 +1,3 @@
 import { createContext } from 'react'
 
-
 export const ThemeManagerIDContext = createContext<number>(1)

package/src/helpers/createMediaStyle.ts

@@ -98,10 +98,12 @@ export const createMediaStyle = (
     const precedenceImportancePrefix = groupMediaKey
       ? ''
       : enableMediaPropOrder
-      ? // this new array should be cached
-        new Array(priority).fill(':root').join('')
-      : // @ts-ignore
-        prefixes[mediaKey]
+        ? // this new array should be cached
+          new Array(priority)
+            .fill(':root')
+            .join('')
+        : // @ts-ignore
+          prefixes[mediaKey]
     const prefix = groupMediaKey ? `@container ${containerName}` : '@media'
 
     if (groupMediaKey) {

package/src/helpers/getSplitStyles.tsx

@@ -352,7 +352,8 @@ export const getSplitStyles: StyleSplitter = (
           }
           viewProps[nativeA11yProp] = valInit
           continue
-        } else if (nativeAccessibilityValue[keyInit]) {
+        }
+        if (nativeAccessibilityValue[keyInit]) {
           let field = nativeAccessibilityValue[keyInit]
           if (viewProps['accessibilityValue']) {
             viewProps['accessibilityValue'][field] = valInit
@@ -441,61 +442,60 @@ export const getSplitStyles: StyleSplitter = (
           if (keyInit in accessibilityDirectMap) {
             viewProps[accessibilityDirectMap[keyInit]] = valInit
             continue
-          } else {
-            switch (keyInit) {
-              case 'accessibilityRole': {
-                if (valInit === 'none') {
-                  viewProps.role = 'presentation'
-                } else {
-                  viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
-                }
-                continue
-              }
-              case 'accessibilityLabelledBy':
-              case 'accessibilityFlowTo':
-              case 'accessibilityControls':
-              case 'accessibilityDescribedBy': {
-                viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
-                  processIDRefList(valInit)
-                continue
-              }
-              case 'accessibilityKeyShortcuts': {
-                if (Array.isArray(valInit)) {
-                  viewProps['aria-keyshortcuts'] = valInit.join(' ')
-                }
-                continue
-              }
-              case 'accessibilityLiveRegion': {
-                viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
-                continue
+          }
+          switch (keyInit) {
+            case 'accessibilityRole': {
+              if (valInit === 'none') {
+                viewProps.role = 'presentation'
+              } else {
+                viewProps.role = accessibilityRoleToWebRole[valInit] || valInit
               }
-              case 'accessibilityReadOnly': {
-                viewProps['aria-readonly'] = valInit
-                // Enhance with native semantics
-                if (
-                  elementType === 'input' ||
-                  elementType === 'select' ||
-                  elementType === 'textarea'
-                ) {
-                  viewProps.readOnly = true
-                }
-                continue
+              continue
+            }
+            case 'accessibilityLabelledBy':
+            case 'accessibilityFlowTo':
+            case 'accessibilityControls':
+            case 'accessibilityDescribedBy': {
+              viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
+                processIDRefList(valInit)
+              continue
+            }
+            case 'accessibilityKeyShortcuts': {
+              if (Array.isArray(valInit)) {
+                viewProps['aria-keyshortcuts'] = valInit.join(' ')
               }
-              case 'accessibilityRequired': {
-                viewProps['aria-required'] = valInit
-                // Enhance with native semantics
-                if (
-                  elementType === 'input' ||
-                  elementType === 'select' ||
-                  elementType === 'textarea'
-                ) {
-                  viewProps.required = valInit
-                }
-                continue
+              continue
+            }
+            case 'accessibilityLiveRegion': {
+              viewProps['aria-live'] = valInit === 'none' ? 'off' : valInit
+              continue
+            }
+            case 'accessibilityReadOnly': {
+              viewProps['aria-readonly'] = valInit
+              // Enhance with native semantics
+              if (
+                elementType === 'input' ||
+                elementType === 'select' ||
+                elementType === 'textarea'
+              ) {
+                viewProps.readOnly = true
               }
-              default: {
-                didUseKeyInit = false
+              continue
+            }
+            case 'accessibilityRequired': {
+              viewProps['aria-required'] = valInit
+              // Enhance with native semantics
+              if (
+                elementType === 'input' ||
+                elementType === 'select' ||
+                elementType === 'textarea'
+              ) {
+                viewProps.required = valInit
               }
+              continue
+            }
+            default: {
+              didUseKeyInit = false
             }
           }
         }
@@ -741,21 +741,6 @@ export const getSplitStyles: StyleSplitter = (
         const isEnter = key === 'enterStyle'
         const isExit = key === 'exitStyle'
 
-        // dev-time warning that helps clear confusion around need for animation  when using enter/exit style
-        if (
-          process.env.NODE_ENV === 'development' &&
-          !styleProps.isAnimated &&
-          !componentState.unmounted &&
-          (isEnter || isExit)
-        ) {
-          console.warn(
-            `No animation prop given to component ${staticConfig.componentName || ''} ${
-              props['data-at'] || ''
-            } with enterStyle / exitStyle, these styles will be ignored`,
-            { props }
-          )
-        }
-
         // don't continue here on isEnter && !state.unmounted because we need to merge defaults
         if (!descriptor || (isExit && !styleProps.isExiting)) {
           continue
@@ -776,7 +761,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed("pseudo (classes)", key);
+            console.groupCollapsed('pseudo (classes)', key)
 
             log({ pseudoStyleObject, pseudoStyles })
             console.groupEnd()
@@ -815,7 +800,7 @@ export const getSplitStyles: StyleSplitter = (
 
           if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
             // prettier-ignore
-            console.groupCollapsed("pseudo", key, { isDisabled });
+            console.groupCollapsed('pseudo', key, { isDisabled })
 
             log(pseudoStyleObject, {
               isDisabled,
@@ -874,7 +859,7 @@ export const getSplitStyles: StyleSplitter = (
         continue
       }
       // media
-      else if (isMedia) {
+      if (isMedia) {
         if (!val) continue
 
         if (isMedia === 'platform') {
@@ -1338,7 +1323,7 @@ export const getSplitStyles: StyleSplitter = (
           viewPropsOrder: Object.keys(viewProps),
           rulesToInsert,
           parentSplitStyles,
-        };
+        }
         for (const key in logs) {
           log(key, logs[key])
         }

package/src/helpers/getThemeCSSRules.ts

@@ -15,7 +15,8 @@ export function getThemeCSSRules(props: {
 
   if (process.env.TAMAGUI_TARGET === 'native') {
     return cssRuleSets
-  } else if (
+  }
+  if (
     !process.env.TAMAGUI_DOES_SSR_CSS ||
     process.env.TAMAGUI_DOES_SSR_CSS === 'mutates-themes' ||
     process.env.TAMAGUI_DOES_SSR_CSS === 'false'
@@ -46,7 +47,7 @@ export function getThemeCSSRules(props: {
     const isDarkBase = themeName === 'dark'
     const isLightBase = themeName === 'light'
     const baseSelectors = names.map((name) => `${CNP}${name}`)
-    const selectorsSet = new Set(baseSelectors)
+    const selectorsSet = new Set(isDarkBase || isLightBase ? baseSelectors : [])
 
     // since we dont specify dark/light in classnames we have to do an awkward specificity war
     // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
@@ -94,9 +95,9 @@ export function getThemeCSSRules(props: {
 
           // for light/dark/light:
           selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())
-          selectorsSet.add(
-            `${parentSelectors.join(' ')} ${nextChildSelector}.is_inversed`.trim()
-          )
+          // selectorsSet.add(
+          //   `${parentSelectors.join(' ')} ${nextChildSelector}.is_inversed`.trim()
+          // )
         }
       }
     }

package/src/helpers/insertStyleRule.tsx

@@ -265,8 +265,8 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
     let scheme = selector.includes('t_dark')
       ? 'dark'
       : selector.includes('t_light')
-      ? 'light'
-      : ''
+        ? 'light'
+        : ''
     let name = selector.slice(selector.lastIndexOf('.t_') + 3)
 
     if (name.startsWith(scheme)) {

package/src/helpers/normalizeValueWithProperty.ts

@@ -68,7 +68,7 @@ export function reverseMapClassNameToValue(key: string, className: string) {
   rcache[cssRule] = res
   if (process.env.NODE_ENV === 'development') {
     // ensure we are parsing properly
-    if (typeof res === 'number' && isNaN(res)) {
+    if (typeof res === 'number' && Number.isNaN(res)) {
       console.info('Tamagui invalid parsed value, NaN:', {
         res,
         cssVal,

package/src/helpers/propMapper.ts

@@ -54,17 +54,17 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
 
   // prettier-ignore
   if (
-    process.env.NODE_ENV === "development" &&
+    process.env.NODE_ENV === 'development' &&
     fontFamily &&
-    fontFamily[0] === "$" &&
+    fontFamily[0] === '$' &&
     !(fontFamily in conf.fontsParsed)
   ) {
     // prettier-ignore
     console.warn(
-      `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(conf.fontsParsed).join(
-        ", ",
-      )}`,
-    );
+      `Warning: no fontFamily "${fontFamily}" found in config: ${Object.keys(
+        conf.fontsParsed
+      ).join(', ')}`
+    )
   }
 
   if (!styleProps.noExpand) {

package/src/hooks/useTheme.tsx

@@ -57,12 +57,12 @@ export type ThemeGettable<Val> = Val & {
   ) =>
     | string
     | (Val extends Variable<infer X>
-      ? X extends VariableValGeneric
-      ? any
-      : Exclude<X, Variable>
-      : Val extends VariableVal
-      ? string | number
-      : unknown)
+        ? X extends VariableValGeneric
+          ? any
+          : Exclude<X, Variable>
+        : Val extends VariableVal
+          ? string | number
+          : unknown)
 }
 
 export type UseThemeResult = {
@@ -86,21 +86,21 @@ export const useThemeWithState = (
     keys.current,
     !isServer
       ? () => {
-        const next =
-          props.shouldUpdate?.() ?? (keys.current.length > 0 ? true : undefined)
-
-        if (
-          process.env.NODE_ENV === 'development' &&
-          props.debug &&
-          props.debug !== 'profile'
-        ) {
-          console.info(`  🎨 useTheme() shouldUpdate?`, next, {
-            shouldUpdateProp: props.shouldUpdate?.(),
-            keys: [...keys.current],
-          })
+          const next =
+            props.shouldUpdate?.() ?? (keys.current.length > 0 ? true : undefined)
+
+          if (
+            process.env.NODE_ENV === 'development' &&
+            props.debug &&
+            props.debug !== 'profile'
+          ) {
+            console.info(`  🎨 useTheme() shouldUpdate?`, next, {
+              shouldUpdateProp: props.shouldUpdate?.(),
+              keys: [...keys.current],
+            })
+          }
+          return next
         }
-        return next
-      }
       : undefined
   )
 
@@ -273,7 +273,7 @@ export const getThemeManager = (id: number) => {
 
 const registerThemeManager = (t: ThemeManager) => {
   if (!_idToUID[t.id]) {
-    const id = _idToUID[t.id] = {}
+    const id = (_idToUID[t.id] = {})
     _uidToManager.set(id, t)
   }
 }
@@ -377,7 +377,14 @@ export const useChangeThemeEffect = (
 
           if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
             // prettier-ignore
-            console.info(` 🔸 onChange`, themeManager.id, { force, shouldTryUpdate, props, name, manager, keys, })
+            console.info(` 🔸 onChange`, themeManager.id, {
+              force,
+              shouldTryUpdate,
+              props,
+              name,
+              manager,
+              keys,
+            })
           }
 
           if (shouldTryUpdate) {

package/src/interfaces/GetRef.tsx

@@ -6,18 +6,22 @@ import { TamaguiComponent } from '../types'
 
 export type GetRef<C> = C extends TamaguiComponent<any, infer Ref>
   ? Ref
-  : C extends new (props: any) => Component
-  ? InstanceType<C>
-  : C extends abstract new (...args: any) => any
-  ? InstanceType<C>
-  : C extends Component
-  ? C
-  : (
-      C extends JSXElementConstructor<{ ref?: infer R }>
-        ? R
-        : C extends keyof JSX.IntrinsicElements
-        ? JSX.IntrinsicElements[C]['ref']
-        : unknown
-    ) extends Ref<infer T> | string | undefined
-  ? T
-  : unknown
+  : C extends new (
+        props: any
+      ) => Component
+    ? InstanceType<C>
+    : C extends abstract new (
+          ...args: any
+        ) => any
+      ? InstanceType<C>
+      : C extends Component
+        ? C
+        : (
+              C extends JSXElementConstructor<{ ref?: infer R }>
+                ? R
+                : C extends keyof JSX.IntrinsicElements
+                  ? JSX.IntrinsicElements[C]['ref']
+                  : unknown
+            ) extends Ref<infer T> | string | undefined
+          ? T
+          : unknown

package/src/setupReactNative.ts

@@ -20,22 +20,21 @@ export function getReactNativeConfig(Component: any) {
 
     // can assume everything else is react native on native
     return RNConfigs.default
-  } else {
-    if (Component.getSize && Component.prefetch) {
-      return RNConfigs.Image
-    }
-    if (Component.displayName === 'Text' && Component.render) {
-      return RNConfigs.Text
-    }
-    if (
-      Component.render &&
-      (Component.displayName === 'ScrollView' || Component.displayName === 'View')
-    ) {
-      return RNConfigs.default
-    }
-    if (Component.State?.blurTextInput) {
-      return RNConfigs.TextInput
-    }
+  }
+  if (Component.getSize && Component.prefetch) {
+    return RNConfigs.Image
+  }
+  if (Component.displayName === 'Text' && Component.render) {
+    return RNConfigs.Text
+  }
+  if (
+    Component.render &&
+    (Component.displayName === 'ScrollView' || Component.displayName === 'View')
+  ) {
+    return RNConfigs.default
+  }
+  if (Component.State?.blurTextInput) {
+    return RNConfigs.TextInput
   }
 
   return ReactNativeStaticConfigs.get(Component)

package/src/styled.tsx

@@ -48,13 +48,13 @@ type ValueOf<T> = T[keyof T]
 type AreVariantsUndefined<V> = V extends undefined
   ? true
   : ValueOf<V> extends undefined
-  ? true
-  : false
+    ? true
+    : false
 
 export function styled<
   ParentComponent extends StylableComponent,
   Variants extends VariantDefinitions<ParentComponent> | void,
-  StyledStaticConfig extends Partial<StaticConfig>
+  StyledStaticConfig extends Partial<StaticConfig>,
 >(
   ComponentIn: ParentComponent,
   // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues
@@ -81,12 +81,12 @@ export function styled<
   type MergedVariants = AreVariantsUndefined<OurVariantProps> extends true
     ? ParentVariants
     : AreVariantsUndefined<ParentVariants> extends true
-    ? OurVariantProps
-    : {
-        [Key in keyof ParentVariants | keyof OurVariantProps]?:
-          | (Key extends keyof ParentVariants ? ParentVariants[Key] : undefined)
-          | (Key extends keyof OurVariantProps ? OurVariantProps[Key] : undefined)
-      }
+      ? OurVariantProps
+      : {
+          [Key in keyof ParentVariants | keyof OurVariantProps]?:
+            | (Key extends keyof ParentVariants ? ParentVariants[Key] : undefined)
+            | (Key extends keyof OurVariantProps ? OurVariantProps[Key] : undefined)
+        }
 
   type AcceptedTokens = StyledStaticConfig['acceptTokens']
   type CustomTokenProps = AcceptedTokens extends Object