@tamagui/core 1.0.1-beta.197 → 1.0.1-beta.199

package/dist/esm/views/Text.js

@@ -19,6 +19,7 @@ const Text = createComponent({
       wordWrap: "break-word"
     }
   },
+  inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
   variants: {
     ...isWeb && {
       numberOfLines: {

package/dist/esm/views/Text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from '@tamagui/types-react-native'\n\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  isText: true,\n\n  defaultProps: {\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb && {\n      display: 'inline',\n      boxSizing: 'border-box',\n      wordWrap: 'break-word',\n    }),\n  },\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,SAAS;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport type { Text as TextView } from '@tamagui/types-react-native'\n\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  isText: true,\n\n  defaultProps: {\n    display: 'flex',\n    fontFamily: 'System',\n    ...(isWeb && {\n      display: 'inline',\n      boxSizing: 'border-box',\n      wordWrap: 'break-word',\n    }),\n  },\n\n  inlineWhenUnflattened: new Set(['fontFamily']),\n\n  variants: {\n    ...(isWeb && {\n      numberOfLines: {\n        1: ellipseStyle,\n\n        ':number': (numberOfLines) =>\n          numberOfLines >= 1\n            ? {\n                WebkitLineClamp: numberOfLines,\n                WebkitBoxOrient: 'vertical',\n                display: '-webkit-box',\n                overflow: 'hidden',\n              }\n            : null,\n      },\n    }),\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n        cursor: 'default',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n  },\n})\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAGhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,QAAQ;AAAA,EAER,cAAc;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,GAAI,SAAS;AAAA,MACX,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,EAE7C,UAAU;AAAA,IACR,GAAI,SAAS;AAAA,MACX,eAAe;AAAA,QACb,GAAG;AAAA,QAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,UACE,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,SAAS;AAAA,UACT,UAAU;AAAA,QACZ,IACA;AAAA,MACR;AAAA,IACF;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAE5C,aAAa;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACF,CAAC;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.197",
+  "version": "1.0.1-beta.199",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,24 +28,23 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.197",
-    "@tamagui/constants": "^1.0.1-beta.197",
-    "@tamagui/helpers": "^1.0.1-beta.197",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.197",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.197",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.197",
-    "@tamagui/types-react-native": "^1.0.1-beta.197",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.197",
-    "@tamagui/use-event": "^1.0.1-beta.197",
-    "@tamagui/use-force-update": "^1.0.1-beta.197",
-    "ts-toolbelt": "^9.6.0"
+    "@tamagui/compose-refs": "^1.0.1-beta.199",
+    "@tamagui/constants": "^1.0.1-beta.199",
+    "@tamagui/helpers": "^1.0.1-beta.199",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.199",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.199",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.199",
+    "@tamagui/types-react-native": "^1.0.1-beta.199",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.199",
+    "@tamagui/use-event": "^1.0.1-beta.199",
+    "@tamagui/use-force-update": "^1.0.1-beta.199"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.197",
+    "@tamagui/build": "^1.0.1-beta.199",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",
@@ -54,7 +53,7 @@
     "react": "*",
     "react-dom": "*",
     "typescript": "^4.7.4",
-    "vitest": "^0.20.3"
+    "vitest": "^0.24.3"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -63,9 +62,13 @@
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js"
     },
-    "./injectStyles": {
-      "import": "./dist/esm/injectStyles.js",
-      "require": "./dist/cjs/injectStyles.js"
+    "./inject-styles": {
+      "import": "./dist/esm/inject-styles.js",
+      "require": "./dist/cjs/inject-styles.js"
+    },
+    "./react-native": {
+      "import": "./dist/esm/react-native.js",
+      "require": "./dist/cjs/react-native.js"
     }
   },
   "repository": {

package/src/createComponent.tsx

@@ -618,15 +618,15 @@ export function createComponent<
     }
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
+    const classList = [
+      componentName ? componentClassName : '',
+      fontFamilyClassName,
+      theme.className,
+      classNames ? Object.values(classNames).join(' ') : '',
+    ]
+    const className = classList.join(' ')
+
     if (process.env.TAMAGUI_TARGET === 'web') {
-      const classList = [
-        componentName ? componentClassName : '',
-        fontFamilyClassName,
-        theme.className,
-        classNames ? Object.values(classNames).join(' ') : '',
-      ]
-
-      const className = classList.join(' ')
       const style = animationStyles ?? splitStyles.style
 
       if (isAnimatedReactNativeWeb) {
@@ -884,17 +884,20 @@ export function createComponent<
     content = createElement(elementType, viewProps, childEls)
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (events) {
+      if (events || isAnimatedReactNativeWeb) {
         content = (
           <span
             style={styleDisplayContents}
-            onMouseEnter={events.onMouseEnter}
-            onMouseLeave={events.onMouseLeave}
-            onClick={events.onPress}
-            onMouseDown={events.onPressIn}
-            onMouseUp={events.onPressOut}
-            onTouchStart={events.onPressIn}
-            onTouchEnd={events.onPressOut}
+            className={isAnimatedReactNativeWeb ? className : undefined}
+            {...(events && {
+              onMouseEnter: events.onMouseEnter,
+              onMouseLeave: events.onMouseLeave,
+              onClick: events.onPress,
+              onMouseDown: events.onPressIn,
+              onMouseUp: events.onPressOut,
+              onTouchStart: events.onPressIn,
+              onTouchEnd: events.onPressOut,
+            })}
           >
             {content}
           </span>
@@ -928,7 +931,7 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
+          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
         }
         // eslint-disable-next-line no-console
         console.groupEnd()

package/src/index.ts

@@ -12,6 +12,7 @@ export * from './addTheme'
 export * from './updateTheme'
 export * from './styled'
 export * from './types'
+export * from './setupReactNative'
 
 // for type portability
 export type { RNWTextProps, RNWViewProps } from './types-rnw'

package/src/setupReactNative.ts

@@ -0,0 +1,9 @@
+let rn
+
+export function getReactNative() {
+  return rn
+}
+
+export function setupReactNative(_) {
+  rn = _
+}

package/src/styled.tsx

@@ -1,5 +1,6 @@
 import { getConfig } from './config'
 import { createComponent } from './createComponent'
+import { getReactNative } from './setupReactNative'
 import {
   GetProps,
   GetVariantValues,
@@ -34,6 +35,8 @@ type GetVariantProps<A extends StylableComponent> =
   //   :
   A extends TamaguiComponent<any, any, any, infer V> ? V : {}
 
+let RNComponentConfigs: WeakMap<any, Partial<StaticConfig>> | null = null
+
 export function styled<
   ParentComponent extends StylableComponent,
   Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
@@ -59,6 +62,21 @@ export function styled<
   //   }
   // }
 
+  const RN = getReactNative()
+  if (RN && typeof RN === 'object' && !RNComponentConfigs) {
+    RNComponentConfigs = new WeakMap()
+    for (const key in RN) {
+      const val = RN[key]
+      if (!val) continue
+      if (key[0].toLowerCase() === key[0]) continue
+      RNComponentConfigs.set(val, {
+        isReactNative: true,
+        isText: key === 'Text' || key === 'TextInput',
+        inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,
+      })
+    }
+  }
+
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
@@ -87,13 +105,17 @@ export function styled<
         Object.assign(defaultProps, defaultVariants)
       }
       const isReactNative = Boolean(
-        parentStaticConfig?.isReactNative || staticExtractionOptions?.isReactNative
+        (RNComponentConfigs &&
+          (RNComponentConfigs.has(Component) ||
+            RNComponentConfigs.has(parentStaticConfig?.Component))) ||
+          parentStaticConfig?.isReactNative ||
+          staticExtractionOptions?.isReactNative
       )
-      const reactNativeWebComponent = isReactNative
-        ? parentStaticConfig?.reactNativeWebComponent || Component
-        : null
       const isTamagui = !isReactNative && !!parentStaticConfig
-      const Comp = reactNativeWebComponent || (Component as any)
+
+      const Comp = isReactNative ? parentStaticConfig?.Component || Component : (Component as any)
+      const nativeConf = (isReactNative && RNComponentConfigs?.get(Comp)) || null
+
       const isText = Boolean(staticExtractionOptions?.isText || parentStaticConfig?.isText)
       const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)
 
@@ -109,10 +131,9 @@ export function styled<
         defaultVariants,
         componentName: name,
         isReactNative,
-        // for nesting multiple levels of rnw styled() need keep use the OG component
-        reactNativeWebComponent,
         isText,
         acceptsClassName,
+        ...nativeConf,
       }
 
       // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)

package/src/types.tsx

@@ -794,11 +794,6 @@ export type StaticConfig = StaticConfigPublic & {
    */
   defaultVariants?: { [key: string]: any }
 
-  /**
-   * Used internally to keep reference to the original rnw component
-   */
-  reactNativeWebComponent?: any
-
   /**
    * Memoize the component
    */

package/src/views/Text.tsx

@@ -26,6 +26,8 @@ export const Text = createComponent<TextProps, TextView, TextPropsBase>({
     }),
   },
 
+  inlineWhenUnflattened: new Set(['fontFamily']),
+
   variants: {
     ...(isWeb && {
       numberOfLines: {

package/types/index.d.ts

@@ -12,6 +12,7 @@ export * from './addTheme';
 export * from './updateTheme';
 export * from './styled';
 export * from './types';
+export * from './setupReactNative';
 export type { RNWTextProps, RNWViewProps } from './types-rnw';
 export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config';
 export * from './constants/constants';

package/types/inject-styles.d.ts

@@ -0,0 +1,7 @@
+interface InjectStylesOptions {
+    filePath: string;
+    css: string;
+}
+export declare const injectStyles: ({ filePath, css }: InjectStylesOptions) => void;
+export {};
+//# sourceMappingURL=inject-styles.d.ts.map

package/types/react-native.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `@tamagui/core/react-native`
+ *
+ * Only import for easier React Native detection
+ *
+ */
+export {};
+//# sourceMappingURL=react-native.d.ts.map

package/types/setupReactNative.d.ts

@@ -0,0 +1,3 @@
+export declare function getReactNative(): any;
+export declare function setupReactNative(_: any): void;
+//# sourceMappingURL=setupReactNative.d.ts.map

package/types/types.d.ts

@@ -468,10 +468,6 @@ export declare type StaticConfig = StaticConfigPublic & {
     defaultVariants?: {
         [key: string]: any;
     };
-    /**
-     * Used internally to keep reference to the original rnw component
-     */
-    reactNativeWebComponent?: any;
     /**
      * Memoize the component
      */

package/dist/cjs/hooks/useMedia.test.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=useMedia.test.js.map