@tamagui/core 1.0.1-beta.98 → 1.0.1-rc.0

package/src/updateTheme.ts

@@ -0,0 +1,26 @@
+import { addTheme } from './addTheme'
+import { activeThemeManagers } from './hooks/useTheme'
+import { ThemeDefinition } from './types'
+
+export function updateTheme({
+  name,
+  theme,
+}: {
+  name: string
+  theme: Partial<Record<keyof ThemeDefinition, any>>
+}) {
+  const next = addTheme({ name, theme, insertCSS: true, update: true })
+
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    activeThemeManagers.forEach((manager) => {
+      if (manager.state.name === name) {
+        manager.updateState({
+          name,
+          forceTheme: next.theme,
+        })
+      }
+    })
+  }
+
+  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,59 @@
+import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
+import * as React from 'react'
+
+import { ButtonNestingContext } from '../contexts/ButtonNestingContext'
+import { TextAncestorContext } from '../contexts/TextAncestorContext'
+import { useMediaListeners } from '../hooks/useMedia'
+import type { TamaguiProviderProps } from '../types'
+import { ThemeProvider } from './ThemeProvider'
+
+export function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  ...themePropsProvider
+}: TamaguiProviderProps) {
+  if (isRSC) {
+    return (
+      <span
+        style={{ display: 'contents' }}
+        className={`t_${Object.keys(config.themes)[0] || 'light'}`}
+      >
+        {children}
+      </span>
+    )
+  }
+
+  if (!isWeb || !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])
+  }
+
+  return (
+    <ButtonNestingContext.Provider value={false}>
+      <TextAncestorContext.Provider value={false}>
+        <ThemeProvider
+          themeClassNameOnRoot={config.themeClassNameOnRoot}
+          disableRootThemeClass={config.disableRootThemeClass}
+          {...themePropsProvider}
+          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}
+        >
+          {children}
+        </ThemeProvider>
+      </TextAncestorContext.Provider>
+    </ButtonNestingContext.Provider>
+  )
+}

package/src/views/Text.tsx

@@ -0,0 +1,87 @@
+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',
+      margin: 0,
+    }),
+  },
+
+  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,77 @@
+import { isWeb } from '@tamagui/constants'
+import React, { useMemo } from 'react'
+
+import { variableToString } from '../createVariable'
+import { ThemeManager } from '../helpers/ThemeManager'
+import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
+import { useChangeThemeEffect } from '../hooks/useTheme'
+import { ThemeProps } from '../types'
+
+export function Theme(props: ThemeProps) {
+  // @ts-expect-error its a permanent prop meant for internal views
+  if (props.disable) {
+    return props.children
+  }
+
+  const isRoot = !!props['_isRoot']
+  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(props, isRoot)
+
+  const disableThemeClass = props.disableThemeClass
+  const missingTheme = !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
+  let contents = useMemo(() => {
+    const next = props['data-themeable']
+      ? React.cloneElement(props.children, { ['data-themeable']: true })
+      : props.children
+
+    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)
+  }, [missingTheme, props.children, themeManager])
+
+  if (process.env.NODE_ENV === 'development' && missingTheme) {
+    // eslint-disable-next-line no-console
+    name && !theme && console.warn(`No theme found by name ${name}`)
+    return props.children
+  }
+
+  if (disableThemeClass || missingTheme) {
+    return contents
+  }
+
+  if (isWeb) {
+    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')
+    contents = (
+      <span
+        className={cn}
+        style={{
+          // in order to provide currentColor, set color by default
+          color: variableToString(theme?.color),
+        }}
+      >
+        {contents}
+      </span>
+    )
+  }
+
+  return contents
+}
+
+export function wrapThemeManagerContext(
+  children: any,
+  themeManager?: ThemeManager | null,
+  shouldReset?: boolean
+) {
+  // be sure to memoize themeManager to avoid reparenting
+  if (!themeManager) {
+    return children
+  }
+  // be sure to memoize shouldReset to avoid reparenting
+  let next = children
+  // TODO likely not necessary if we do reset logic now in useTheme?
+  // reset to parent theme
+  if (shouldReset && themeManager) {
+    next = <Theme name={themeManager.state.parentName}>{next}</Theme>
+  }
+  return <ThemeManagerContext.Provider value={themeManager}>{next}</ThemeManagerContext.Provider>
+}

package/src/views/ThemeProvider.tsx

@@ -0,0 +1,41 @@
+import { isClient } from '@tamagui/constants'
+import { useLayoutEffect } from 'react'
+
+import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
+import { Theme } from './Theme'
+
+export type ThemeProviderProps = {
+  className?: string
+  defaultTheme: string
+  disableRootThemeClass?: boolean
+  themeClassNameOnRoot?: boolean
+  children?: any
+  reset?: boolean
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  // 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])
+  }
+
+  return (
+    <Theme
+      className={props.className}
+      name={props.defaultTheme}
+      disableThemeClass={props.disableRootThemeClass}
+      // @ts-expect-error
+      _isRoot
+    >
+      {props.children}
+    </Theme>
+  )
+}

package/types/Tamagui.d.ts

@@ -1,23 +1,25 @@
 import * as Helpers from '@tamagui/helpers';
-import * as rnw from '@tamagui/rnw';
 declare class TamaguiManager {
-    rnw: typeof rnw;
     Helpers: typeof Helpers;
+    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;
         };
     }, import("./types").GenericFonts>;
-    get insertedRules(): unknown[];
-    get allSelectors(): {};
+    get insertedRules(): string[];
+    get allSelectors(): Record<string, string>;
     get allTransforms(): {};
     get identifierToValue(): Map<string, any>;
 }

package/types/addTheme.d.ts

@@ -0,0 +1,32 @@
+import { ThemeDefinition } from './types';
+export declare function addTheme(props: {
+    name: string;
+    theme: Partial<Record<keyof ThemeDefinition, any>>;
+    insertCSS?: boolean;
+    update?: boolean;
+}): {
+    theme: {
+        [x: string]: import("./createVariable").Variable<any>;
+        background?: import("./createVariable").Variable<any> | undefined;
+        backgroundHover?: import("./createVariable").Variable<any> | undefined;
+        backgroundPress?: import("./createVariable").Variable<any> | undefined;
+        backgroundFocus?: import("./createVariable").Variable<any> | undefined;
+        color?: import("./createVariable").Variable<any> | undefined;
+        colorHover?: import("./createVariable").Variable<any> | undefined;
+        colorPress?: import("./createVariable").Variable<any> | undefined;
+        colorFocus?: import("./createVariable").Variable<any> | undefined;
+        borderColor?: import("./createVariable").Variable<any> | undefined;
+        borderColorHover?: import("./createVariable").Variable<any> | undefined;
+        borderColorPress?: import("./createVariable").Variable<any> | undefined;
+        borderColorFocus?: import("./createVariable").Variable<any> | undefined;
+        shadowColor?: import("./createVariable").Variable<any> | undefined;
+        shadowColorHover?: import("./createVariable").Variable<any> | undefined;
+        shadowColorPress?: import("./createVariable").Variable<any> | undefined;
+        shadowColorFocus?: import("./createVariable").Variable<any> | undefined;
+    };
+    cssRules?: undefined;
+} | {
+    theme: any;
+    cssRules: string[];
+};
+//# sourceMappingURL=addTheme.d.ts.map

package/types/config.d.ts

@@ -0,0 +1,46 @@
+import { ConfigListener, TamaguiInternalConfig, Tokens } from './types';
+export declare const setConfig: (next: TamaguiInternalConfig) => void;
+export declare const setConfigFont: (name: string, font: any, fontParsed: any) => void;
+export declare const getConfig: () => TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
+    [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
+        [key: string]: import("./types").VariableVal;
+    };
+}, import("./types").GenericShorthands, {
+    [key: string]: {
+        [key: string]: string | number;
+    };
+}, {
+    [key: string]: string | any[] | {
+        [key: string]: any;
+    };
+}, import("./types").GenericFonts>;
+export declare const getTokens: (prefixed?: boolean) => Tokens;
+/**
+ * Note: this is the same as `getTokens`
+ */
+export declare const useTokens: (prefixed?: boolean) => Tokens;
+export declare const getThemes: () => {
+    [x: string]: {
+        [x: string]: import("./createVariable").Variable<any>;
+        background?: import("./createVariable").Variable<any> | undefined;
+        backgroundHover?: import("./createVariable").Variable<any> | undefined;
+        backgroundPress?: import("./createVariable").Variable<any> | undefined;
+        backgroundFocus?: import("./createVariable").Variable<any> | undefined;
+        color?: import("./createVariable").Variable<any> | undefined;
+        colorHover?: import("./createVariable").Variable<any> | undefined;
+        colorPress?: import("./createVariable").Variable<any> | undefined;
+        colorFocus?: import("./createVariable").Variable<any> | undefined;
+        borderColor?: import("./createVariable").Variable<any> | undefined;
+        borderColorHover?: import("./createVariable").Variable<any> | undefined;
+        borderColorPress?: import("./createVariable").Variable<any> | undefined;
+        borderColorFocus?: import("./createVariable").Variable<any> | undefined;
+        shadowColor?: import("./createVariable").Variable<any> | undefined;
+        shadowColorHover?: import("./createVariable").Variable<any> | undefined;
+        shadowColorPress?: import("./createVariable").Variable<any> | undefined;
+        shadowColorFocus?: import("./createVariable").Variable<any> | undefined;
+    };
+};
+export declare const configListeners: Set<ConfigListener>;
+export declare const onConfiguredOnce: (cb: ConfigListener) => void;
+export declare const updateConfig: (key: string, value: any) => void;
+//# sourceMappingURL=config.d.ts.map

package/types/constants/constants.d.ts

@@ -1,9 +1,20 @@
 export declare const THEME_NAME_SEPARATOR = "_";
 export declare const THEME_CLASSNAME_PREFIX = "t_";
+export declare const webOnlyDefaultStyles: {
+    display: string;
+    flexBasis: string;
+    boxSizing: string;
+    position: string;
+    minHeight: number;
+    minWidth: number;
+};
 export declare const stackDefaultStyles: {
-    display?: string | undefined;
-    flexBasis?: string | undefined;
-    boxSizing?: string | undefined;
+    display: string;
+    flexBasis: string;
+    boxSizing: string;
+    position: string;
+    minHeight: number;
+    minWidth: number;
     alignItems: string;
     flexShrink: number;
 };

package/types/constants/isDevTools.d.ts

@@ -0,0 +1,2 @@
+export declare const isDevTools: any;
+//# sourceMappingURL=isDevTools.d.ts.map

package/types/contexts/ButtonNestingContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ButtonNestingContext: import("react").Context<boolean>;
+//# sourceMappingURL=ButtonNestingContext.d.ts.map

package/types/contexts/FontLanguageContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FontLanguageContext: import("react").Context<Partial<{
+    [x: string]: import("..").FontLanguages;
+}> | null>;
+//# sourceMappingURL=FontLanguageContext.d.ts.map

package/types/contexts/TextAncestorContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const TextAncestorContext: React.Context<boolean>;
+//# sourceMappingURL=TextAncestorContext.d.ts.map