@tamagui/web 1.90.15 → 1.91.0

package/package.json

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

package/src/config.ts

@@ -71,7 +71,8 @@ export const getToken = (value: Token, group?: keyof Tokens, useVariable = isWeb
   return useVariable ? token?.variable : token?.val
 }
 
-export const getTokenValue = (value: Token, group?: keyof Tokens) => {
+export const getTokenValue = (value: Token | 'unset' | 'auto', group?: keyof Tokens) => {
+  if (value === 'unset' || value === 'auto') return
   return getToken(value, group, false)
 }
 

package/src/createComponent.tsx

@@ -333,7 +333,9 @@ export function createComponent<
     // conditional but if ever true stays true
     // [animated, inversed]
     // HOOK
-    const stateRef = useRef<TamaguiComponentStateRef>({})
+    const stateRef = useRef<TamaguiComponentStateRef>({
+      handleFocusVisible: true,
+    })
     if (process.env.NODE_ENV === 'development' && time) time`stateref`
 
     /**
@@ -400,15 +402,33 @@ export function createComponent<
         : defaultComponentState
       : defaultComponentStateMounted
 
+    // will be nice to deprecate half of these:
+    const disabled =
+      props.disabled ||
+      props.accessibilityState?.disabled ||
+      props['aria-disabled'] ||
+      // @ts-expect-error (comes from core)
+      props.accessibilityDisabled ||
+      false
+
+    if (disabled != null) {
+      initialState.disabled = disabled
+    }
+
     // HOOK
     const states = useState<TamaguiComponentState>(initialState)
 
     const state = props.forceStyle
       ? { ...states[0], [props.forceStyle]: true }
       : states[0]
-
     const setState = states[1]
-    let setStateShallow = createShallowSetState(setState, debugProp)
+
+    // immediately update disabled state
+    if (disabled !== state.disabled) {
+      setState({ ...state, disabled })
+    }
+
+    let setStateShallow = createShallowSetState(setState, disabled, debugProp)
 
     if (isHydrated && state.unmounted === 'should-enter') {
       state.unmounted = true
@@ -491,7 +511,6 @@ export function createComponent<
     if (process.env.NODE_ENV === 'development' && time) time`use-state`
 
     const hasTextAncestor = !!(isWeb && isText ? componentContext.inText : false)
-    const isDisabled = props.disabled ?? props.accessibilityState?.disabled
 
     if (process.env.NODE_ENV === 'development' && time) time`use-context`
 
@@ -748,11 +767,6 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && time) time`destructure`
 
-    const disabled =
-      props.accessibilityState?.disabled ||
-      // @ts-expect-error (comes from core)
-      props.accessibilityDisabled
-
     if (groupName) {
       nonTamaguiProps.onLayout = composeEventHandlers(
         nonTamaguiProps.onLayout,
@@ -820,6 +834,10 @@ export function createComponent<
     const shouldEnter = state.unmounted
 
     useEffect(() => {
+      if (disabled) {
+        return
+      }
+
       if (shouldEnter) {
         setStateShallow({ unmounted: false })
         return
@@ -866,6 +884,7 @@ export function createComponent<
         mouseUps.delete(unPress)
       }
     }, [
+      disabled,
       shouldEnter,
       pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
       mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
@@ -887,7 +906,8 @@ export function createComponent<
         onMouseDown ||
         onMouseUp ||
         onLongPress ||
-        onClick
+        onClick ||
+        pseudos?.focusVisibleStyle
     )
     const runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle
     const needsHoverState = Boolean(
@@ -898,116 +918,132 @@ export function createComponent<
 
     // check presence rather than value to prevent reparenting bugs
     // allows for onPress={x ? function : undefined} without re-ordering dom
-    const shouldAttach = Boolean(
-      attachFocus ||
-        attachPress ||
-        attachHover ||
-        runtimePressStyle ||
-        runtimeHoverStyle ||
-        runtimeFocusStyle
-    )
+    const shouldAttach =
+      !disabled &&
+      !props.asChild &&
+      Boolean(
+        attachFocus ||
+          attachPress ||
+          attachHover ||
+          runtimePressStyle ||
+          runtimeHoverStyle ||
+          runtimeFocusStyle
+      )
     const needsPressState = Boolean(groupName || runtimeHoverStyle)
 
     if (process.env.NODE_ENV === 'development' && time) time`events-setup`
 
-    const events: TamaguiComponentEvents | null =
-      shouldAttach && !isDisabled && !props.asChild
-        ? {
-            onPressOut: attachPress
-              ? (e) => {
-                  unPress()
-                  onPressOut?.(e)
-                  onMouseUp?.(e)
+    const events: TamaguiComponentEvents | null = shouldAttach
+      ? {
+          onPressOut: attachPress
+            ? (e) => {
+                stateRef.current.handleFocusVisible = true
+                unPress()
+                onPressOut?.(e)
+                onMouseUp?.(e)
+              }
+            : undefined,
+          ...((attachHover || attachPress) && {
+            onMouseEnter: (e) => {
+              const next: Partial<typeof state> = {}
+              if (needsHoverState) {
+                next.hover = true
+              }
+              if (needsPressState) {
+                if (state.pressIn) {
+                  next.press = true
                 }
-              : undefined,
-            ...((attachHover || attachPress) && {
-              onMouseEnter: (e) => {
-                const next: Partial<typeof state> = {}
-                if (needsHoverState) {
-                  next.hover = true
+              }
+              setStateShallow(next)
+              onHoverIn?.(e)
+              onMouseEnter?.(e)
+            },
+            onMouseLeave: (e) => {
+              const next: Partial<typeof state> = {}
+              mouseUps.add(unPress)
+              if (needsHoverState) {
+                next.hover = false
+              }
+              if (needsPressState) {
+                if (state.pressIn) {
+                  next.press = false
+                  next.pressIn = false
                 }
-                if (needsPressState) {
-                  if (state.pressIn) {
-                    next.press = true
-                  }
+              }
+              setStateShallow(next)
+              onHoverOut?.(e)
+              onMouseLeave?.(e)
+            },
+          }),
+          onPressIn: attachPress
+            ? (e) => {
+                stateRef.current.handleFocusVisible = false
+                if (runtimePressStyle) {
+                  setStateShallow({
+                    press: true,
+                    pressIn: true,
+                  })
                 }
-                setStateShallow(next)
-                onHoverIn?.(e)
-                onMouseEnter?.(e)
-              },
-              onMouseLeave: (e) => {
-                const next: Partial<typeof state> = {}
-                mouseUps.add(unPress)
-                if (needsHoverState) {
-                  next.hover = false
+                onPressIn?.(e)
+                onMouseDown?.(e)
+                if (isWeb) {
+                  mouseUps.add(unPress)
                 }
-                if (needsPressState) {
-                  if (state.pressIn) {
-                    next.press = false
-                    next.pressIn = false
-                  }
+              }
+            : undefined,
+          onPress: attachPress
+            ? (e) => {
+                unPress()
+                // @ts-ignore
+                isWeb && onClick?.(e)
+                onPress?.(e)
+                if (process.env.TAMAGUI_TARGET === 'web') {
+                  onLongPress?.(e)
                 }
-                setStateShallow(next)
-                onHoverOut?.(e)
-                onMouseLeave?.(e)
+              }
+            : undefined,
+          ...(process.env.TAMAGUI_TARGET === 'native' &&
+            attachPress &&
+            onLongPress && {
+              onLongPress: (e) => {
+                unPress()
+                onLongPress?.(e)
               },
             }),
-            onPressIn: attachPress
-              ? (e) => {
-                  if (runtimePressStyle) {
-                    setStateShallow({
-                      press: true,
-                      pressIn: true,
-                    })
-                  }
-                  onPressIn?.(e)
-                  onMouseDown?.(e)
-                  if (isWeb) {
-                    mouseUps.add(unPress)
-                  }
-                }
-              : undefined,
-            onPress: attachPress
-              ? (e) => {
-                  unPress()
-                  // @ts-ignore
-                  isWeb && onClick?.(e)
-                  onPress?.(e)
-                  if (process.env.TAMAGUI_TARGET === 'web') {
-                    onLongPress?.(e)
-                  }
-                }
-              : undefined,
-            ...(process.env.TAMAGUI_TARGET === 'native' &&
-              attachPress &&
-              onLongPress && {
-                onLongPress: (e) => {
-                  unPress()
-                  onLongPress?.(e)
-                },
-              }),
-            ...(attachFocus && {
-              onFocus: (e) => {
+          ...(attachFocus && {
+            onFocus: (e) => {
+              if (pseudos?.focusVisibleStyle) {
+                setTimeout(() => {
+                  setStateShallow({
+                    focus: true,
+                    focusVisible: !!stateRef.current.handleFocusVisible,
+                  })
+                }, 0)
+              } else {
                 setStateShallow({
                   focus: true,
+                  focusVisible: false,
                 })
-                onFocus?.(e)
-              },
-              onBlur: (e) => {
-                setStateShallow({
-                  focus: false,
-                })
-                onBlur?.(e)
-              },
-            }),
-          }
-        : null
+              }
+              onFocus?.(e)
+            },
+            onBlur: (e) => {
+              stateRef.current.handleFocusVisible = true
+              setStateShallow({
+                focus: false,
+                focusVisible: false,
+              })
+              onBlur?.(e)
+            },
+          }),
+        }
+      : null
 
     if (process.env.TAMAGUI_TARGET === 'native' && events && !asChild) {
       // replicating TouchableWithoutFeedback
       Object.assign(events, {
         cancelable: !viewProps.rejectResponderTermination,
-        disabled: isDisabled,
+        disabled: disabled,
         hitSlop: viewProps.hitSlop,
         delayLongPress: viewProps.delayLongPress,
         delayPressIn: viewProps.delayPressIn,

package/src/defaultComponentState.tsx

@@ -5,7 +5,9 @@ export const defaultComponentState: TamaguiComponentState = {
   press: false,
   pressIn: false,
   focus: false,
+  focusVisible: false,
   unmounted: true,
+  disabled: false,
 }
 
 export const defaultComponentStateMounted: TamaguiComponentState = {

package/src/helpers/createShallowSetState.tsx

@@ -3,23 +3,29 @@ import type { DebugProp } from '../types'
 
 export function createShallowSetState<State extends Object>(
   setter: React.Dispatch<React.SetStateAction<State>>,
+  isDisabled?: boolean,
   debug?: DebugProp
 ) {
-  return (next: Partial<State>) =>
-    setter((prev) => mergeIfNotShallowEqual(prev, next, debug))
+  return (next?: Partial<State>) =>
+    setter((prev) => mergeIfNotShallowEqual(prev, next, isDisabled, debug))
 }
 
-export function mergeIfNotShallowEqual(prev: any, next: any, debug?: DebugProp) {
-  if (isEqualShallow(prev, next)) {
+export function mergeIfNotShallowEqual(
+  prev: any,
+  next: any,
+  isDisabled?: boolean,
+  debug?: DebugProp
+) {
+  if (isDisabled || !prev || !next || isEqualShallow(prev, next)) {
     return prev
   }
   if (process.env.NODE_ENV === 'development') {
     if (debug) {
       console.warn(`setStateShallow CHANGE`, { prev, next })
-      // if (debug === 'break') {
-      //   // biome-ignore lint/suspicious/noDebugger: <explanation>
-      //   debugger
-      // }
+      if (debug === 'break') {
+        // biome-ignore lint/suspicious/noDebugger: <explanation>
+        debugger
+      }
     }
   }
   return { ...prev, ...next }

package/src/helpers/getSplitStyles.tsx

@@ -127,7 +127,7 @@ function isValidStyleKey(key: string, staticConfig: StaticConfig) {
   const validStyleProps =
     staticConfig.validStyles ||
     (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles)
-  return validStyleProps[key] || staticConfig.acceptTokens?.[key]
+  return validStyleProps[key] || staticConfig.accept?.[key]
 }
 
 export const getSplitStyles: StyleSplitter = (
@@ -229,6 +229,22 @@ export const getSplitStyles: StyleSplitter = (
     let keyInit = keyOg
     let valInit = props[keyOg]
 
+    if (
+      staticConfig.accept &&
+      (staticConfig.accept[keyInit] === 'style' ||
+        staticConfig.accept[keyInit] === 'textStyle') &&
+      typeof valInit === 'object'
+    ) {
+      const styleObject = getSubStyle(
+        styleState,
+        keyInit,
+        valInit,
+        styleProps.noClassNames
+      )
+      viewProps[keyInit] = styleObject
+      continue
+    }
+
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
       // otherwise things just keep nesting - careful don't leave these around
       // they cause big performance dips in Chrome, only use them when debug prop set
@@ -1224,11 +1240,15 @@ export const getSplitStyles: StyleSplitter = (
   }
 
   // merge after the prop loop - and always keep it on style dont turn into className except if RN gives us
-  if (props.style) {
+  const styleProp = props.style
+  if (styleProp) {
     if (isHOC) {
-      viewProps.style = normalizeStyle(props.style)
+      viewProps.style = normalizeStyle(styleProp)
     } else {
-      for (const style of [].concat(props.style)) {
+      const isArray = Array.isArray(styleProp)
+      const len = isArray ? props.length : 1
+      for (let i = 0; i < len; i++) {
+        const style = isArray ? styleProp[i] : styleProp
         if (style) {
           if (style['$$css']) {
             Object.assign(styleState.classNames, style)
@@ -1420,9 +1440,9 @@ function mergeStyle(
     const shouldNormalize = isWeb && !disableNormalize && !styleProps.noNormalize
     const out = shouldNormalize ? normalizeValueWithProperty(val, key) : val
     if (
-      // acceptTokens are for props not styles
-      staticConfig.acceptTokens &&
-      key in staticConfig.acceptTokens
+      // accept is for props not styles
+      staticConfig.accept &&
+      key in staticConfig.accept
     ) {
       viewProps[key] = out
     } else {

package/src/helpers/getStylesAtomic.ts

@@ -7,12 +7,12 @@ import type { StyleObject } from '@tamagui/helpers'
 import { simpleHash } from '@tamagui/helpers'
 
 import { getConfig } from '../config'
-import type { DebugProp, TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
+import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
 import { defaultOffset } from './defaultOffset'
+import { normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import type { PseudoDescriptor } from './pseudoDescriptors'
-import { pseudoDescriptors, pseudoDescriptorsBase } from './pseudoDescriptors'
-import { normalizeColor } from './normalizeColor'
+import { pseudoDescriptors } from './pseudoDescriptors'
 import { transformsToString } from './transformsToString'
 
 // refactor this file away next...
@@ -148,10 +148,15 @@ function createAtomicRules(
   value: any,
   pseudo?: PseudoDescriptor
 ): string[] {
+  const pseudoSelector = pseudo
+    ? pseudo.name === 'disabled'
+      ? `[aria-disabled]`
+      : `:${pseudo.name}`
+    : ''
   const selector = pseudo
     ? pseudo?.selector
       ? `${pseudo?.selector} .${identifier}`
-      : `${selectorPriority[pseudo.name]} .${identifier}:${pseudo.name}`
+      : `${selectorPriority[pseudo.name]} .${identifier}${pseudoSelector}`
     : `:root .${identifier}`
   const important = !!pseudo
 

package/src/helpers/propMapper.ts

@@ -387,7 +387,7 @@ export const getTokenForKey = (
   let valOrVar: any
   let hasSet = false
 
-  const customTokenAccept = staticConfig?.acceptTokens?.[key]
+  const customTokenAccept = staticConfig?.accept?.[key]
   if (customTokenAccept) {
     const val = theme?.[value] ?? tokensParsed[customTokenAccept][value]
     if (val != null) {

package/src/helpers/pseudoDescriptors.ts

@@ -11,20 +11,37 @@ export const pseudoDescriptorsBase = {
     stateKey: 'press',
     priority: 2,
   },
+  focusVisibleStyle: {
+    name: 'focus-visible',
+    priority: 3,
+    stateKey: 'focusVisible',
+  },
   focusStyle: {
     name: 'focus',
     priority: 3,
   },
+  disabledStyle: {
+    name: 'disabled',
+    priority: 4,
+    stateKey: 'disabled',
+  },
 } as const
 
 export const pseudoPriorities = {
   hover: 1,
   press: 2,
   focus: 3,
+  focusVisible: 3,
+  disabled: 4,
 }
 
 export const pseudoDescriptors: Record<
-  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
+  | 'hoverStyle'
+  | 'pressStyle'
+  | 'focusStyle'
+  | 'focusVisibleStyle'
+  | 'enterStyle'
+  | 'exitStyle',
   PseudoDescriptor
 > = {
   ...pseudoDescriptorsBase,

package/src/interfaces/TamaguiComponentState.tsx

@@ -1,10 +1,12 @@
 import type { GroupState } from '../types'
 
 export type TamaguiComponentState = {
+  disabled: boolean
   hover: boolean
   press: boolean
   pressIn: boolean
   focus: boolean
+  focusVisible: boolean
   unmounted: boolean | 'should-enter'
   animation?: null | {
     style?: any

package/src/styled.tsx

@@ -8,7 +8,6 @@ import type {
   GetNonStyledProps,
   GetStaticConfig,
   GetStyledVariants,
-  GetTokenPropsFromAcceptedTokens,
   GetVariantValues,
   InferStyledProps,
   StaticConfig,
@@ -16,9 +15,11 @@ import type {
   StylableComponent,
   TamaDefer,
   TamaguiComponent,
+  ThemeValueGet,
   VariantDefinitions,
   VariantSpreadFunction,
 } from './types'
+import type { Text } from './views/Text'
 
 type AreVariantsUndefined<Variants> =
   // because we pass in the Generic variants which for some reason has this :)
@@ -70,8 +71,18 @@ export function styled<
             | (Key extends keyof OurVariantProps ? OurVariantProps[Key] : undefined)
         }
 
-  type AcceptedTokens = StyledStaticConfig['acceptTokens']
-  type CustomTokenProps = GetTokenPropsFromAcceptedTokens<AcceptedTokens>
+  type Accepted = StyledStaticConfig['accept']
+  type CustomTokenProps = Accepted extends Record<string, any>
+    ? {
+        [Key in keyof Accepted]?:
+          | (Key extends keyof ParentStylesBase ? ParentStylesBase[Key] : never)
+          | (Accepted[Key] extends 'style'
+              ? Partial<InferStyledProps<ParentComponent, StyledStaticConfig>>
+              : Accepted[Key] extends 'textStyle'
+                ? Partial<InferStyledProps<typeof Text, StyledStaticConfig>>
+                : Omit<ThemeValueGet<Accepted[Key]>, 'unset'>)
+      }
+    : {}
 
   /**
    * de-opting a bit of type niceness because were hitting depth issues too soon
@@ -87,7 +98,7 @@ export function styled<
     TamaDefer,
     GetRef<ParentComponent>,
     ParentNonStyledProps,
-    AcceptedTokens extends Record<string, any>
+    Accepted extends Record<string, any>
       ? ParentStylesBase & CustomTokenProps
       : ParentStylesBase,
     MergedVariants,