@tamagui/web 1.53.2 → 1.54.0

package/src/hooks/useMedia.tsx

@@ -42,7 +42,10 @@ export const mediaKeys = new Set<string>() // with $ prefix
 
 export const isMediaKey = (key: string) =>
   mediaKeys.has(key) ||
-  (key[0] === '$' && (key.startsWith('$platform-') || key.startsWith('$theme-')))
+  (key[0] === '$' &&
+    (key.startsWith('$platform-') ||
+      key.startsWith('$theme-') ||
+      key.startsWith('$group-')))
 
 // for SSR capture it at time of startup
 let initState: MediaQueryState
@@ -304,14 +307,18 @@ export function mergeMediaByImportance(
   key: string,
   value: any,
   importancesUsed: Record<string, number>,
-  isSizeMedia: boolean
+  isSizeMedia: boolean,
+  importanceBump?: number
 ) {
-  const importance = getMediaImportanceIfMoreImportant(
+  let importance = getMediaImportanceIfMoreImportant(
     mediaKey,
     key,
     importancesUsed,
     isSizeMedia
   )
+  if (importanceBump) {
+    importance = (importance || 0) + importanceBump
+  }
   if (importance === null) {
     return false
   }

package/src/hooks/useStyle.tsx

@@ -1,8 +1,6 @@
-import { isWeb } from '@tamagui/constants'
 import { useContext } from 'react'
 
-import { FontLanguageContext } from '../contexts/FontLanguageContext'
-import { TextAncestorContext } from '../contexts/TextAncestorContext'
+import { ComponentContext } from '../contexts/ComponentContext'
 import { defaultComponentState } from '../createComponent'
 import { useSplitStyles } from '../helpers/getSplitStyles'
 import {
@@ -24,8 +22,7 @@ export function useStyle<
   options?: Partial<SplitStyleProps> & { debug?: DebugProp }
 ) {
   const isText = base.staticConfig.isText
-  const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false)
-  const languageContext = useContext(FontLanguageContext)
+  const componentContext = useContext(ComponentContext)
   const [themeState] = useThemeWithState({})
   const media = useMedia()
   const out = useSplitStyles(
@@ -37,11 +34,10 @@ export function useStyle<
     {
       ...(options as any),
       mediaState: media,
-      hasTextAncestor,
       resolveVariablesAs: 'auto',
     },
     null,
-    languageContext || undefined,
+    componentContext,
     isText ? 'span' : 'div',
     options?.debug
   )

package/src/index.ts

@@ -9,9 +9,11 @@ export * from './createVariable'
 export * from './createVariables'
 export * from './insertFont'
 export * from './styled'
-export * from './types'
 export * from './setupReactNative'
 
+export * from './types'
+export * from './interfaces/GetRef'
+
 export {
   getConfig,
   getThemes,
@@ -23,6 +25,8 @@ export {
 
 export * from './constants/constants'
 
+export * from './contexts/ComponentContext'
+
 export * from './helpers/createStyledContext'
 export * from './helpers/expandStyles'
 export * from './helpers/propMapper'
@@ -42,16 +46,14 @@ export * from './helpers/proxyThemeToParents'
 export * from './helpers/pseudoDescriptors'
 export * from './helpers/themeable'
 export * from './helpers/themes'
-export * from './helpers/useShallowSetState'
+export * from './helpers/createShallowSetState'
 export * from './helpers/withStaticProperties'
 
-export * from './contexts/ButtonNestingContext'
-
 export {
   configureMedia,
-  getMedia,
   mediaState,
   useMedia,
+  getMedia,
   useMediaPropsActive,
   mediaObjectToString,
   mediaQueryConfig,
@@ -67,7 +69,6 @@ export * from './views/Slot'
 export * from './views/Stack'
 export * from './views/View'
 export * from './views/Text'
-export * from './contexts/TextAncestorContext'
 export * from './views/Theme'
 export * from './views/ThemeProvider'
 export * from './views/FontLanguage'

package/src/interfaces/CSSColorNames.tsx

@@ -0,0 +1,141 @@
+export type CSSColorNames =
+  | 'aliceblue'
+  | 'antiquewhite'
+  | 'aqua'
+  | 'aquamarine'
+  | 'azure'
+  | 'beige'
+  | 'bisque'
+  | 'black'
+  | 'blanchedalmond'
+  | 'blue'
+  | 'blueviolet'
+  | 'brown'
+  | 'burlywood'
+  | 'cadetblue'
+  | 'chartreuse'
+  | 'chocolate'
+  | 'coral'
+  | 'cornflowerblue'
+  | 'cornsilk'
+  | 'crimson'
+  | 'cyan'
+  | 'darkblue'
+  | 'darkcyan'
+  | 'darkgoldenrod'
+  | 'darkgray'
+  | 'darkgreen'
+  | 'darkkhaki'
+  | 'darkmagenta'
+  | 'darkolivegreen'
+  | 'darkorange'
+  | 'darkorchid'
+  | 'darkred'
+  | 'darksalmon'
+  | 'darkseagreen'
+  | 'darkslateblue'
+  | 'darkslategray'
+  | 'darkturquoise'
+  | 'darkviolet'
+  | 'deeppink'
+  | 'deepskyblue'
+  | 'dimgray'
+  | 'dodgerblue'
+  | 'firebrick'
+  | 'floralwhite'
+  | 'forestgreen'
+  | 'fuchsia'
+  | 'gainsboro'
+  | 'ghostwhite'
+  | 'gold'
+  | 'goldenrod'
+  | 'gray'
+  | 'green'
+  | 'greenyellow'
+  | 'honeydew'
+  | 'hotpink'
+  | 'indianred '
+  | 'indigo  '
+  | 'ivory'
+  | 'khaki'
+  | 'lavender'
+  | 'lavenderblush'
+  | 'lawngreen'
+  | 'lemonchiffon'
+  | 'lightblue'
+  | 'lightcoral'
+  | 'lightcyan'
+  | 'lightgoldenrodyellow'
+  | 'lightgrey'
+  | 'lightgreen'
+  | 'lightpink'
+  | 'lightsalmon'
+  | 'lightseagreen'
+  | 'lightskyblue'
+  | 'lightslategray'
+  | 'lightsteelblue'
+  | 'lightyellow'
+  | 'lime'
+  | 'limegreen'
+  | 'linen'
+  | 'magenta'
+  | 'maroon'
+  | 'mediumaquamarine'
+  | 'mediumblue'
+  | 'mediumorchid'
+  | 'mediumpurple'
+  | 'mediumseagreen'
+  | 'mediumslateblue'
+  | 'mediumspringgreen'
+  | 'mediumturquoise'
+  | 'mediumvioletred'
+  | 'midnightblue'
+  | 'mintcream'
+  | 'mistyrose'
+  | 'moccasin'
+  | 'navajowhite'
+  | 'navy'
+  | 'oldlace'
+  | 'olive'
+  | 'olivedrab'
+  | 'orange'
+  | 'orangered'
+  | 'orchid'
+  | 'palegoldenrod'
+  | 'palegreen'
+  | 'paleturquoise'
+  | 'palevioletred'
+  | 'papayawhip'
+  | 'peachpuff'
+  | 'peru'
+  | 'pink'
+  | 'plum'
+  | 'powderblue'
+  | 'purple'
+  | 'red'
+  | 'rosybrown'
+  | 'royalblue'
+  | 'saddlebrown'
+  | 'salmon'
+  | 'sandybrown'
+  | 'seagreen'
+  | 'seashell'
+  | 'sienna'
+  | 'silver'
+  | 'skyblue'
+  | 'slateblue'
+  | 'slategray'
+  | 'snow'
+  | 'springgreen'
+  | 'steelblue'
+  | 'tan'
+  | 'teal'
+  | 'thistle'
+  | 'tomato'
+  | 'turquoise'
+  | 'violet'
+  | 'wheat'
+  | 'white'
+  | 'whitesmoke'
+  | 'yellow'
+  | 'yellowgreen'

package/src/interfaces/GetRef.tsx

@@ -0,0 +1,23 @@
+import { Component, JSXElementConstructor, Ref } from 'react'
+
+import { TamaguiComponent } from '../types'
+
+// gets the ref type of any type of react component
+
+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

package/src/interfaces/Role.tsx

@@ -0,0 +1,68 @@
+// from react-native Accessibility.d.ts
+
+export type Role =
+  | 'alert'
+  | 'alertdialog'
+  | 'application'
+  | 'article'
+  | 'banner'
+  | 'button'
+  | 'cell'
+  | 'checkbox'
+  | 'columnheader'
+  | 'combobox'
+  | 'complementary'
+  | 'contentinfo'
+  | 'definition'
+  | 'dialog'
+  | 'directory'
+  | 'document'
+  | 'feed'
+  | 'figure'
+  | 'form'
+  | 'grid'
+  | 'group'
+  | 'heading'
+  | 'img'
+  | 'link'
+  | 'list'
+  | 'listitem'
+  | 'log'
+  | 'main'
+  | 'marquee'
+  | 'math'
+  | 'menu'
+  | 'menubar'
+  | 'menuitem'
+  | 'meter'
+  | 'navigation'
+  | 'none'
+  | 'note'
+  | 'option'
+  | 'presentation'
+  | 'progressbar'
+  | 'radio'
+  | 'radiogroup'
+  | 'region'
+  | 'row'
+  | 'rowgroup'
+  | 'rowheader'
+  | 'scrollbar'
+  | 'searchbox'
+  | 'separator'
+  | 'slider'
+  | 'spinbutton'
+  | 'status'
+  | 'summary'
+  | 'switch'
+  | 'tab'
+  | 'table'
+  | 'tablist'
+  | 'tabpanel'
+  | 'term'
+  | 'timer'
+  | 'toolbar'
+  | 'tooltip'
+  | 'tree'
+  | 'treegrid'
+  | 'treeitem'

package/src/styled.tsx

@@ -3,10 +3,10 @@ import { stylePropsAll } from '@tamagui/helpers'
 import { createComponent } from './createComponent'
 import { StyledContext } from './helpers/createStyledContext'
 import { mergeVariants } from './helpers/mergeVariants'
+import type { GetRef } from './interfaces/GetRef'
 import { getReactNativeConfig } from './setupReactNative'
 import type {
   GetProps,
-  GetRef,
   GetVariantValues,
   MediaProps,
   PseudoProps,