@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.210

package/src/updateTheme.ts

@@ -0,0 +1,23 @@
+import { addTheme } from './addTheme'
+import { activeThemeManagers } from './hooks/useTheme'
+import { ThemeDefinition } from './types'
+
+export function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {
+  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,10 @@
+import React, { useMemo } from 'react'
+
+import { FontLanguageContext } from '../contexts/FontLanguageContext'
+import { FontLanguageProps } from './FontLanguage.types'
+
+export const FontLanguage = ({ children, ...props }: FontLanguageProps) => {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  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,147 @@
+// via radix
+
+import { composeRefs } from '@tamagui/compose-refs'
+import { isWeb } from '@tamagui/constants'
+import { Children, ReactElement, ReactNode, cloneElement, forwardRef, isValidElement } from 'react'
+
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/
+
+export type SlotProps = {
+  children?: ReactNode
+}
+
+export const Slot = forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props
+  const childrenArray = 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 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 (Children.count(newElement) > 1) return Children.only(null)
+        return isValidElement(newElement) ? (newElement.props.children as ReactNode) : null
+      } else {
+        return child
+      }
+    })
+
+    return (
+      <SlotClone {...slotProps} ref={forwardedRef}>
+        {isValidElement(newElement) ? cloneElement(newElement, undefined, newChildren) : null}
+      </SlotClone>
+    )
+  }
+
+  return (
+    <SlotClone {...slotProps} ref={forwardedRef}>
+      {children}
+    </SlotClone>
+  )
+})
+
+Slot.displayName = 'Slot'
+
+/* -------------------------------------------------------------------------------------------------
+ * SlotClone
+ * -----------------------------------------------------------------------------------------------*/
+
+interface SlotCloneProps {
+  children: ReactNode
+}
+
+const SlotClone = forwardRef<any, SlotCloneProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props
+
+  if (isValidElement(children)) {
+    const childProps = {
+      ...mergeSlotProps(children, slotProps),
+      ref: composeRefs(forwardedRef, (children as any).ref),
+    }
+    return cloneElement(children, childProps)
+  }
+
+  return Children.count(children) > 1 ? Children.only(null) : null
+})
+
+SlotClone.displayName = 'SlotClone'
+
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/
+
+export const Slottable = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>
+}
+
+/* ---------------------------------------------------------------------------------------------- */
+
+type AnyProps = Record<string, any>
+
+function isSlottable(child: ReactNode): child is ReactElement {
+  return 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 type { View } from '@tamagui/types-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,60 @@
+import { isClient, isRSC, isServer } from '@tamagui/constants'
+import * as React from 'react'
+
+import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
+import { TextAncestorContext } from '../contexts/TextAncestorContext'
+import { useMediaListeners } from '../hooks/useMedia'
+import type { TamaguiProviderProps } from '../types'
+import { ThemeProvider } from './ThemeProvider'
+import { getConfig } from '..'
+
+export function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  ...themePropsProvider
+}: TamaguiProviderProps) {
+  if (isRSC) {
+    const { themes } = getConfig()
+    return (
+      <span style={{ display: 'contents' }} className={`t_${Object.keys(themes)[0] || 'light'}`}>
+        {children}
+      </span>
+    )
+  }
+
+  if (!isServer) {
+    useMediaListeners(config)
+  }
+
+  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])
+  }
+
+  const { themes } = getConfig()
+
+  return (
+    <ButtonInsideButtonContext.Provider value={false}>
+      <TextAncestorContext.Provider value={false}>
+        <ThemeProvider
+          themeClassNameOnRoot={config.themeClassNameOnRoot}
+          disableRootThemeClass={config.disableRootThemeClass}
+          {...themePropsProvider}
+          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(themes)[0]}
+        >
+          {children}
+        </ThemeProvider>
+      </TextAncestorContext.Provider>
+    </ButtonInsideButtonContext.Provider>
+  )
+}

package/src/views/Text.tsx

@@ -0,0 +1,86 @@
+import { isWeb } from '@tamagui/constants'
+import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
+import type { Text as TextView } from '@tamagui/types-react-native'
+
+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',
+    }),
+  },
+
+  inlineWhenUnflattened: new Set(['fontFamily']),
+
+  variants: {
+    ...(isWeb && {
+      numberOfLines: {
+        1: ellipseStyle,
+
+        ':number': (numberOfLines) =>
+          numberOfLines >= 1
+            ? {
+                WebkitLineClamp: numberOfLines,
+                WebkitBoxOrient: 'vertical',
+                display: '-webkit-box',
+                overflow: 'hidden',
+              }
+            : null,
+      },
+    }),
+
+    // ??
+    ellipsizeMode: {
+      '...': () => null,
+    },
+
+    selectable: {
+      true: {
+        userSelect: 'text',
+        cursor: 'text',
+      },
+      false: {
+        userSelect: 'none',
+        cursor: 'default',
+      },
+    },
+
+    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 { isWeb } from '@tamagui/constants'
+import React, { memo, useMemo } from 'react'
+
+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 { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import React, { useState } from 'react'
+
+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,63 @@
+import { isClient } from '@tamagui/constants'
+import React, { useLayoutEffect, useMemo } from 'react'
+
+import { getConfig, getHasConfigured } from '../config'
+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
+  defaultTheme: string
+  disableRootThemeClass?: boolean
+  themeClassNameOnRoot?: boolean
+  children?: any
+  reset?: boolean
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  if (process.env.NODE_ENV === 'development') {
+    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 (isClient) {
+    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 {
+      get themes() {
+        return getConfig().themes
+      },
+      defaultTheme: props.defaultTheme,
+    }
+  }, [props.defaultTheme])
+
+  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 { isClient } from '@tamagui/constants'
+import React, { useContext, useLayoutEffect, useState } from 'react'
+
+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 manager = 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 (isClient) {
+    useLayoutEffect(() => {
+      if (!manager) return
+      if (name !== manager.parentName) {
+        setName(manager.parentName)
+      }
+    }, [name, manager, manager?.parentName])
+
+    useLayoutEffect(() => {
+      if (!manager) return
+      return manager.onChangeTheme(() => {
+        setName(manager.parentName)
+      })
+    }, [manager])
+  }
+
+  if (!manager || !props.children) {
+    return props.children || null
+  }
+
+  return (
+    <Theme className="tui-theme-reset" reset name={name}>
+      {props.children}
+    </Theme>
+  )
+}

package/types/Tamagui.d.ts

@@ -1,25 +1,25 @@
 import * as Helpers from '@tamagui/helpers';
-import { TamaguiInternalConfig } from './types';
 declare class TamaguiManager {
-    rnw: Record<string, any>;
     Helpers: typeof Helpers;
-    get config(): TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
+    get mediaState(): {
+        [x: `$${string}`]: boolean;
+        [x: `$${number}`]: boolean;
+    };
+    get config(): import("./types").TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
         [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
             [key: string]: import("./types").VariableVal;
         };
-    }, {}, {
-        [x: string]: {
+    }, import("./types").GenericShorthands, {
+        [key: string]: {
             [key: string]: string | number;
         };
     }, {
-        [key: string]: string | {
+        [key: string]: string | any[] | {
             [key: string]: any;
         };
-    }, {
-        [key: string]: import("./types").GenericFont<string | number>;
-    }>;
-    get insertedRules(): unknown[];
-    get allSelectors(): {};
+    }, import("./types").GenericFonts>;
+    get insertedRules(): (boolean | string[])[];
+    get allSelectors(): Record<string, string>;
     get allTransforms(): {};
     get identifierToValue(): Map<string, any>;
 }

package/types/addTheme.d.ts

@@ -0,0 +1,11 @@
+import { ThemeDefinition } from './types';
+export declare function addTheme({ name: themeName, theme: themeIn, insertCSS, update, }: {
+    name: string;
+    theme: ThemeDefinition;
+    insertCSS?: boolean;
+    update?: boolean;
+}): {
+    theme: any;
+    cssRules: string[];
+};
+//# sourceMappingURL=addTheme.d.ts.map