@tamagui/core 1.0.1-beta.140 → 1.0.1-beta.141

package/src/updateTheme.ts

@@ -0,0 +1,23 @@
+import { addTheme } from './addTheme'
+import { activeThemeManagers } from './hooks/useTheme'
+import { ThemeObject } from './types'
+
+export function updateTheme({ name, theme }: { name: string; theme: ThemeObject }) {
+  const next = addTheme({ name, theme, insertCSS: true, update: true })
+
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    activeThemeManagers.forEach((manager) => {
+      if (manager.name === name) {
+        manager.update(
+          {
+            name,
+            theme: next.theme,
+          },
+          true
+        )
+      }
+    })
+  }
+
+  return next
+}

package/src/vendor/Pressability.native.tsx

@@ -0,0 +1,3 @@
+export const Pressability = require('react-native/Libraries/Pressability/Pressability').default
+export const usePressability =
+  require('react-native/Libraries/Pressability/usePressability').default

package/src/vendor/Pressability.tsx

@@ -0,0 +1,2 @@
+export const Pressability = {} as any
+export const usePressability = {} as Function

package/src/views/FontLanguage.native.tsx

@@ -0,0 +1,9 @@
+import React, { useMemo } from 'react'
+
+import { FontLanguageContext } from '../contexts/FontLanguageContext'
+import { FontLanguageProps } from './FontLanguage.types'
+
+export const FontLanguage = ({ children, ...props }: FontLanguageProps) => {
+  const value = useMemo(() => props, [JSON.stringify(props)])
+  return <FontLanguageContext.Provider value={value}>{children}</FontLanguageContext.Provider>
+}

package/src/views/FontLanguage.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { FontLanguageProps } from './FontLanguage.types'
+
+export const FontLanguage = ({ children, ...props }: FontLanguageProps) => {
+  return (
+    <div
+      style={{
+        display: 'contents',
+      }}
+      className={Object.entries(props)
+        .map(([name, language]) => `t_lang-${name}-${language}`)
+        .join(' ')}
+    >
+      {children}
+    </div>
+  )
+}

package/src/views/FontLanguage.types.ts

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import { FontLanguages, FontTokens } from '../types'
+
+type FontFamilies = FontTokens extends `$${infer Token}` ? Token : never
+
+export type LanguageContextType = Partial<{
+  [key in FontFamilies]: FontLanguages | 'default'
+}>
+
+export type FontLanguageProps = LanguageContextType & {
+  children?: React.ReactNode
+}

package/src/views/Slot.tsx

@@ -0,0 +1,152 @@
+// via radix
+
+import { composeRefs } from '@tamagui/compose-refs'
+import * as React from 'react'
+
+import { isWeb } from '../constants/platform'
+
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+export type SlotProps = {
+  children?: React.ReactNode
+}
+
+export const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props
+  const childrenArray = React.Children.toArray(children)
+  const slottable = childrenArray.find(isSlottable)
+
+  if (slottable) {
+    // the new element to render is the one passed as a child of `Slottable`
+    const newElement = slottable.props.children as React.ReactNode
+
+    const newChildren = childrenArray.map((child) => {
+      if (child === slottable) {
+        // because the new element will be the one rendered, we are only interested
+        // in grabbing its children (`newElement.props.children`)
+        if (React.Children.count(newElement) > 1) return React.Children.only(null)
+        return React.isValidElement(newElement)
+          ? (newElement.props.children as React.ReactNode)
+          : null
+      } else {
+        return child
+      }
+    })
+
+    return (
+      <SlotClone {...slotProps} ref={forwardedRef}>
+        {React.isValidElement(newElement)
+          ? React.cloneElement(newElement, undefined, newChildren)
+          : null}
+      </SlotClone>
+    )
+  }
+
+  return (
+    <SlotClone {...slotProps} ref={forwardedRef}>
+      {children}
+    </SlotClone>
+  )
+})
+
+Slot.displayName = 'Slot'
+
+/* -------------------------------------------------------------------------------------------------
+ * SlotClone
+ * -----------------------------------------------------------------------------------------------*/
+
+interface SlotCloneProps {
+  children: React.ReactNode
+}
+
+const SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props
+
+  if (React.isValidElement(children)) {
+    const childProps = {
+      ...mergeSlotProps(children, slotProps),
+      ref: composeRefs(forwardedRef, (children as any).ref),
+    }
+    return React.cloneElement(children, childProps)
+  }
+
+  return React.Children.count(children) > 1 ? React.Children.only(null) : null
+})
+
+SlotClone.displayName = 'SlotClone'
+
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Slottable = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>
+}
+
+/* ---------------------------------------------------------------------------------------------- */
+
+type AnyProps = Record<string, any>
+
+function isSlottable(child: React.ReactNode): child is React.ReactElement {
+  return React.isValidElement(child) && child.type === Slottable
+}
+
+const pressMap = isWeb
+  ? {
+      onPress: 'onClick',
+      onPressOut: 'onMouseUp',
+      onPressIn: 'onMouseDown',
+    }
+  : {}
+
+function mergeSlotProps(child: any, slotProps: AnyProps) {
+  const childProps = child.props
+
+  // all child props should override
+  const overrideProps = { ...childProps }
+  const isHTMLChild = typeof child.type === 'string'
+
+  if (isHTMLChild) {
+    for (const key in pressMap) {
+      if (key in slotProps) {
+        slotProps[pressMap[key]] = slotProps[key]
+        delete slotProps[key]
+      }
+    }
+  }
+
+  for (let propName in childProps) {
+    const slotPropValue = slotProps[propName]
+    const childPropValue = childProps[propName]
+
+    if (isHTMLChild && pressMap[propName]) {
+      propName = pressMap[propName]
+      delete overrideProps[propName]
+    }
+
+    const isHandler = handleRegex.test(propName)
+    // if it's a handler, modify the override by composing the base handler
+    if (isHandler) {
+      overrideProps[propName] = mergeEvent(childPropValue, slotPropValue)
+    }
+    // if it's `style`, we merge them
+    else if (propName === 'style') {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue }
+    } else if (propName === 'className') {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')
+    }
+  }
+
+  return { ...slotProps, ...overrideProps }
+}
+
+const handleRegex = /^on[A-Z]/
+
+export function mergeEvent(a?: Function, b?: Function) {
+  return (...args: unknown[]) => {
+    a?.(...args)
+    b?.(...args)
+  }
+}

package/src/views/Stack.tsx

@@ -0,0 +1,24 @@
+import { View } from 'react-native'
+
+import { stackDefaultStyles } from '../constants/constants'
+import { createComponent } from '../createComponent'
+import { StackProps, StackPropsBase } from '../types'
+
+export const Stack = createComponent<StackProps, View, StackPropsBase>({
+  componentName: 'Stack',
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: 'column',
+  },
+})
+
+// test types
+// export const YStack = styled(Stack, {
+//   flexDirection: 'column',
+// })
+// // test types
+// const x00 = <Stack missing={0} /> // should err
+// const x0 = <YStack missing={0} /> // should err
+// const x1 = (props: StackProps) => <YStack {...props} />
+// type ys = typeof YStack
+// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown

package/src/views/TamaguiProvider.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+
+import { getConfig } from '../conf'
+import { isClient, isSSR } from '../constants/platform'
+import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
+import { TextAncestorProvider } from '../contexts/TextAncestorContext'
+import { useMediaQueryListeners } from '../hooks/useMedia'
+import { TamaguiProviderProps } from '../types'
+import { ThemeProvider } from './ThemeProvider'
+
+export function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  ...themePropsProvider
+}: TamaguiProviderProps) {
+  if (!isSSR) {
+    useMediaQueryListeners()
+  }
+
+  if (isClient) {
+    // inject CSS if asked to (not SSR compliant)
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useLayoutEffect(() => {
+      if (disableInjectCSS) return
+      const style = document.createElement('style')
+      style.appendChild(document.createTextNode(config.getCSS()))
+      document.head.appendChild(style)
+      return () => {
+        document.head.removeChild(style)
+      }
+    }, [config, disableInjectCSS])
+  }
+
+  return (
+    <ButtonInsideButtonContext.Provider value={false}>
+      <TextAncestorProvider>
+        <ThemeProvider
+          themes={config.themes}
+          defaultTheme={config.defaultTheme || 'light'}
+          themeClassNameOnRoot={config.themeClassNameOnRoot}
+          disableRootThemeClass={config.disableRootThemeClass}
+          {...themePropsProvider}
+        >
+          {children}
+        </ThemeProvider>
+      </TextAncestorProvider>
+    </ButtonInsideButtonContext.Provider>
+  )
+}

package/src/views/Text.tsx

@@ -0,0 +1,79 @@
+import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
+import { Text as TextView } from 'react-native'
+
+import { isWeb } from '../constants/platform'
+import { createComponent } from '../createComponent'
+import { TextProps, TextPropsBase } from '../types'
+
+const ellipseStyle = {
+  maxWidth: '100%',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+}
+
+export const Text = createComponent<TextProps, TextView, TextPropsBase>({
+  componentName: 'Text',
+  isText: true,
+
+  defaultProps: {
+    display: 'flex',
+    fontFamily: 'System',
+    ...(isWeb && {
+      display: 'inline',
+      boxSizing: 'border-box',
+      wordWrap: 'break-word',
+    }),
+  },
+
+  variants: {
+    ...(isWeb && {
+      numberOfLines: {
+        1: ellipseStyle,
+
+        ':number': (numberOfLines) =>
+          numberOfLines >= 1
+            ? {
+                WebkitLineClamp: numberOfLines,
+                WebkitBoxOrient: 'vertical',
+                display: '-webkit-box',
+                overflow: 'hidden',
+              }
+            : null,
+      },
+    }),
+
+    selectable: {
+      true: {
+        userSelect: 'text',
+        cursor: 'text',
+      },
+      false: {
+        userSelect: 'none',
+        cursor: 'inherit',
+      },
+    },
+
+    pressable: {
+      true: {
+        cursor: 'pointer',
+      },
+    },
+
+    ellipse: {
+      true: isWeb
+        ? ellipseStyle
+        : {
+            numberOfLines: 1,
+            lineBreakMode: 'clip',
+          },
+    },
+  },
+
+  deoptProps: new Set(isWeb ? [] : ['ellipse']),
+
+  validStyles: {
+    ...validStyles,
+    ...stylePropsTextOnly,
+  },
+})

package/src/views/Theme.tsx

@@ -0,0 +1,72 @@
+import React, { memo, useMemo } from 'react'
+
+import { isWeb } from '../constants/platform'
+import { variableToString } from '../createVariable'
+import { ThemeManager, ThemeManagerContext } from '../helpers/ThemeManager'
+import { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'
+
+// bugfix esbuild strips react jsx: 'preserve'
+React['createElement']
+
+export const Theme = memo(function Theme(props: ThemeProps) {
+  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(
+    props.name,
+    props.componentName,
+    props
+  )
+
+  const missingTheme = !themes || !name || !theme
+
+  // memo here, changing theme without re-rendering all children is a critical optimization
+  // may require some effort of end user to memoize but without this memo they'd have no option
+  const contents = useMemo(
+    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),
+    [missingTheme, props.children, themeManager]
+  )
+
+  if (missingTheme) {
+    if (name && !theme && process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.warn(`No theme found by name ${name}`)
+    }
+    return props.children
+  }
+
+  if (isWeb) {
+    return (
+      <span
+        className={(!props.disableThemeClass
+          ? [props.className, className].filter(Boolean)
+          : []
+        ).join(' ')}
+        style={{
+          display: 'contents',
+          // in order to provide currentColor, set color by default
+          color: variableToString(themes[name]?.color),
+        }}
+      >
+        {contents}
+      </span>
+    )
+  }
+
+  return contents
+})
+
+export function wrapThemeManagerContext(
+  children: any,
+  themeManager?: ThemeManager | null,
+  shouldSetChildrenThemeToParent?: boolean
+) {
+  return themeManager ? (
+    <ThemeManagerContext.Provider value={themeManager}>
+      {shouldSetChildrenThemeToParent ? (
+        <Theme name={themeManager.parentName}>{children}</Theme>
+      ) : (
+        children
+      )}
+    </ThemeManagerContext.Provider>
+  ) : (
+    children
+  )
+}

package/src/views/ThemeInverse.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
+import { Theme } from './Theme'
+
+export const ThemeInverse = ({
+  children,
+  disable,
+}: {
+  children: React.ReactNode
+  disable?: boolean
+}) => {
+  const themeName = useThemeName()
+  const defaultTheme = useDefaultThemeName()
+  const [name, setName] = useState<null | string>(null)
+
+  // ssr
+  useIsomorphicLayoutEffect(() => {
+    if (themeName.startsWith('dark')) {
+      setName('light')
+    }
+    if (themeName.startsWith('light')) {
+      setName('dark')
+    }
+  }, [defaultTheme, themeName])
+
+  if (disable) {
+    return children as JSX.Element
+  }
+
+  return <Theme name={name}>{children}</Theme>
+}

package/src/views/ThemeProvider.tsx

@@ -0,0 +1,59 @@
+import React, { useLayoutEffect, useMemo } from 'react'
+
+import { getHasConfigured } from '../conf'
+import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
+import { ThemeContext } from '../contexts/ThemeContext'
+import { Theme } from './Theme'
+
+// bugfix esbuild strips react jsx: 'preserve'
+React['createElement']
+
+export type ThemeProviderProps = {
+  className?: string
+  themes: any
+  defaultTheme: string
+  disableRootThemeClass?: boolean
+  themeClassNameOnRoot?: boolean
+  children?: any
+  reset?: boolean
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  if (!getHasConfigured()) {
+    throw new Error(`Missing configureThemes() call, add to your root file`)
+  }
+
+  // ensure theme is attached to root body node as well to work with modals by default
+  if (typeof document !== 'undefined') {
+    useLayoutEffect(() => {
+      if (props.disableRootThemeClass) {
+        return
+      }
+      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`
+      const target = props.themeClassNameOnRoot ? document.documentElement : document.body
+      target.classList.add(cn)
+      return () => {
+        target.classList.remove(cn)
+      }
+    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])
+  }
+
+  const themeContext = useMemo(() => {
+    return {
+      themes: props.themes,
+      defaultTheme: props.defaultTheme,
+    }
+  }, [props.defaultTheme, props.themes])
+
+  return (
+    <ThemeContext.Provider value={themeContext}>
+      <Theme
+        className={props.className}
+        name={props.defaultTheme}
+        disableThemeClass={props.disableRootThemeClass}
+      >
+        {props.children}
+      </Theme>
+    </ThemeContext.Provider>
+  )
+}

package/src/views/ThemeReset.tsx

@@ -0,0 +1,43 @@
+import React, { useContext, useLayoutEffect, useState } from 'react'
+
+import { isWeb } from '../constants/platform'
+import { ThemeManagerContext } from '../helpers/ThemeManager'
+import { Theme } from './Theme'
+
+// bugfix esbuild strips react jsx: 'preserve'
+React['createElement']
+
+// resets the theme to the parent theme
+export const ThemeReset = (props: { children?: any }) => {
+  const themeManager = useContext(ThemeManagerContext)
+  const [name, setName] = useState<string | null>(null)
+
+  // this component doesn't work with SSR, so must run only client side
+  // we could at least prevent more flickering by having the ssr head script
+  // that changes to dark initially also go through and change all of these
+  if (!isWeb || typeof document !== 'undefined') {
+    useLayoutEffect(() => {
+      if (!themeManager) return
+      if (name !== themeManager.parentName) {
+        setName(themeManager.parentName)
+      }
+    }, [themeManager?.parentName])
+
+    useLayoutEffect(() => {
+      if (!themeManager) return
+      return themeManager.onChangeTheme(() => {
+        setName(themeManager.parentName)
+      })
+    }, [])
+  }
+
+  if (!themeManager || !props.children) {
+    return props.children || null
+  }
+
+  return (
+    <Theme className="tui-theme-reset" reset name={name}>
+      {props.children}
+    </Theme>
+  )
+}

package/types/conf.d.ts

@@ -15,7 +15,7 @@ export declare const getConfig: () => TamaguiInternalConfig<import("./types").Cr
         [key: string]: any;
     };
 }, import("./types").GenericFonts>;
-export declare const getTokens: () => import("./types").CreateTokens<import("./createVariable").Variable<any>>;
+export declare const getTokens: () => import("./types").CreateTokens<import("./createVariable").Variable<import("./createVariable").VariableValue>>;
 export declare const getThemes: () => {
     [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
         [key: string]: import("./types").VariableVal;

package/types/constants/platform.d.ts

@@ -1,11 +1,11 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 export declare const isAndroid: boolean;
 export declare const isIOS: boolean;
 export declare const isWeb: boolean;
 export declare const isWindowDefined: boolean;
 export declare const isSSR: boolean;
 export declare const isClient: boolean;
-export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
 export declare const isChrome: boolean;
 export declare const isWebTouchable: boolean;
 export declare const isTouchable: boolean;

package/types/createTamagui.d.ts

@@ -1,3 +1,3 @@
 import { CreateTamaguiProps, InferTamaguiConfig } from './types';
-export declare function createTamagui<Conf extends CreateTamaguiProps>(config: Conf): InferTamaguiConfig<Conf>;
+export declare function createTamagui<Conf extends CreateTamaguiProps>(configIn: Conf): InferTamaguiConfig<Conf>;
 //# sourceMappingURL=createTamagui.d.ts.map

package/types/createTheme.d.ts

@@ -2,6 +2,6 @@ import { Variable } from './createVariable';
 declare type GenericTheme = {
     [key: string]: string | Variable;
 };
-export declare const createTheme: <Theme extends GenericTheme>(theme: Theme) => { [K in keyof Theme]: string | Variable<any> | Theme[K]; };
+export declare const createTheme: <Theme extends GenericTheme>(theme: Theme) => { [K in keyof Theme]: string | Variable<import("./createVariable").VariableValue> | Theme[K]; };
 export {};
 //# sourceMappingURL=createTheme.d.ts.map

package/types/createVariable.d.ts

@@ -1,21 +1,25 @@
-declare const IS_VARIABLE_SYMBOL = "__isVariable__";
-declare type VariableIn<A extends string | number = any> = {
+import { VariableColorVal } from './types';
+declare const IS_VAR = "__isVar__";
+export declare type VariableValue = string | number;
+declare type VariableIn<A extends VariableValue = VariableValue> = {
     val: A;
     name: string;
     key: string;
     isFloating?: boolean;
 };
-export declare class Variable<A extends string | number = any> {
-    [IS_VARIABLE_SYMBOL]: boolean;
-    key: string;
-    name: string;
-    val: A;
+export declare type Variable<A extends VariableValue = VariableValue> = VariableIn<A> & {
+    [IS_VAR]?: true;
+    variable?: string;
+};
+export declare const createVariable: <A extends string | number = any>(props: VariableIn<A>) => VariableIn<A> | {
     variable: string;
-    isFloating: boolean;
-    constructor(props: VariableIn);
-    toString(): string;
-}
-export declare const createVariable: <A extends string | number = any>(props: VariableIn<A>) => Variable<any>;
+    val: A;
+    name: string;
+    key: string;
+    isFloating?: boolean | undefined;
+    __isVar__: boolean;
+};
+export declare function variableToString(vrble?: Variable | VariableColorVal): string;
 export declare function isVariable(v: Variable | any): v is Variable;
 export declare function getVariableValue(v: Variable | any): any;
 export declare function getVariableName(v: Variable | any): any;

package/types/helpers/registerCSSVariable.d.ts

@@ -1,5 +1,5 @@
-import { Variable } from '../createVariable';
+import { Variable, VariableValue } from '../createVariable';
 export declare const registerCSSVariable: (v: Variable) => void;
 export declare const variableToCSS: (v: Variable) => string;
-export declare const tokensValueToVariable: Map<string, Variable<any>>;
+export declare const tokensValueToVariable: Map<VariableValue, any>;
 //# sourceMappingURL=registerCSSVariable.d.ts.map