@tamagui/web 1.88.13 → 1.89.0-1706308641099

package/dist/esm/views/Text.mjs

@@ -0,0 +1,64 @@
+import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
+import { createComponent } from "../createComponent.mjs";
+const ellipseStyle = {
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  defaultWebStyle = {
+    display: "inline",
+    boxSizing: "border-box",
+    wordWrap: "break-word",
+    margin: 0
+  },
+  ellipsisStyle = ellipseStyle,
+  Text = createComponent({
+    acceptsClassName: !0,
+    isText: !0,
+    defaultProps: {
+      fontFamily: "unset",
+      ...defaultWebStyle
+    },
+    inlineWhenUnflattened: /* @__PURE__ */new Set(["fontFamily"]),
+    variants: {
+      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"
+        }
+      },
+      /**
+       * @deprecated Use ellipsis instead
+       */
+      ellipse: {
+        true: ellipsisStyle
+      },
+      ellipsis: {
+        true: ellipsisStyle
+      }
+    },
+    validStyles: {
+      ...validStyles,
+      ...stylePropsTextOnly
+    }
+  });
+Text.displayName = "Text";
+export { Text };

package/dist/esm/views/Theme.mjs

@@ -0,0 +1,104 @@
+import { isWeb } from "@tamagui/constants";
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from "react";
+import { variableToString } from "../createVariable.mjs";
+import { ThemeManagerIDContext } from "../helpers/ThemeManagerContext.mjs";
+import { useChangeThemeEffect } from "../hooks/useTheme.mjs";
+import { ThemeDebug } from "./ThemeDebug.mjs";
+import { jsx } from "react/jsx-runtime";
+const Theme = forwardRef(function ({
+  children,
+  ...props
+}, ref) {
+  if (props.disable) return children;
+  const isRoot = !!props._isRoot,
+    themeState = useChangeThemeEffect(props, isRoot);
+  let finalChildren = props["disable-child-theme"] ? Children.map(children, child => cloneElement(child, {
+    "data-disable-theme": !0
+  })) : children;
+  if (ref) try {
+    React.Children.only(finalChildren), finalChildren = cloneElement(finalChildren, {
+      ref
+    });
+  } catch {}
+  return process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */jsx(ThemeDebug, {
+    themeState,
+    themeProps: props,
+    children: finalChildren
+  })), getThemedChildren(themeState, finalChildren, props, isRoot);
+});
+Theme.displayName = "Theme";
+Theme.avoidForwardRef = !0;
+function getThemedChildren(themeState, children, props, isRoot = !1) {
+  const {
+    themeManager,
+    isNewTheme
+  } = themeState;
+  if (!themeManager) throw new Error(process.env.NODE_ENV === "development" ? "\u274C No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes." : "\u274C 005");
+  const {
+      shallow,
+      forceClassName
+    } = props,
+    hasEverThemed = useRef(!1),
+    shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
+  if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme) return children;
+  let next = children;
+  shallow && (next = Children.toArray(children).map(child => isValidElement(child) ? cloneElement(child, void 0, /* @__PURE__ */jsx(Theme, {
+    name: themeManager.state.parentName,
+    children: child.props.children
+  })) : child));
+  const elementsWithContext = /* @__PURE__ */jsx(ThemeManagerIDContext.Provider, {
+    value: themeManager.id,
+    children: next
+  });
+  return forceClassName === !1 ? elementsWithContext : isWeb ? wrapThemeElements({
+    children: elementsWithContext,
+    themeState,
+    forceClassName,
+    isRoot
+  }) : elementsWithContext;
+}
+function wrapThemeElements({
+  children,
+  themeState,
+  forceClassName,
+  isRoot
+}) {
+  if (isRoot && forceClassName === !1) return children;
+  const inverse = themeState.inversed,
+    requiresExtraWrapper = inverse != null || forceClassName,
+    {
+      className,
+      style
+    } = getThemeClassNameAndStyle(themeState, isRoot);
+  let themedChildren = /* @__PURE__ */jsx("span", {
+    className: `${className} _dsp_contents is_Theme`,
+    style,
+    children
+  });
+  if (requiresExtraWrapper) {
+    const name = themeState.state?.name || "",
+      inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
+    themedChildren = /* @__PURE__ */jsx("span", {
+      className: `${inverse ? inverseClassName : ""} _dsp_contents`,
+      children: themedChildren
+    });
+  }
+  return themedChildren;
+}
+const emptyObj = {};
+function getThemeClassNameAndStyle(themeState, isRoot = !1) {
+  if (!themeState.isNewTheme) return {
+    className: "",
+    style: emptyObj
+  };
+  const themeColor = themeState.state?.theme && themeState.isNewTheme ? variableToString(themeState.state.theme.color) : "",
+    style = themeColor ? {
+      color: themeColor
+    } : void 0;
+  let className = themeState.state?.className || "";
+  return isRoot && (className = className.replace("t_sub_theme", "")), {
+    style,
+    className
+  };
+}
+export { Theme, getThemedChildren };

package/dist/esm/views/ThemeDebug.mjs

@@ -0,0 +1,57 @@
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
+import { useForceUpdate } from "@tamagui/use-force-update";
+import { useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+let node;
+function ThemeDebug({
+  themeState,
+  themeProps,
+  children
+}) {
+  if (process.env.NODE_ENV === "development") {
+    const isHydrated = useDidFinishSSR(),
+      [onChangeCount, setOnChangeCount] = useState(0),
+      rerender = useForceUpdate(),
+      id = useId();
+    return process.env.NODE_ENV === "development" && typeof document < "u" && (node || (node = document.createElement("div"), node.style.height = "200px", node.style.overflowY = "scroll", node.style.position = "fixed", node.style.zIndex = 1e7, node.style.bottom = "30px", node.style.left = "30px", node.style.right = "30px", node.style.display = "flex", node.style.border = "1px solid #888", node.style.flexDirection = "row", node.style.background = "var(--background)", document.body.appendChild(node))), useEffect(() => {
+      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
+        setOnChangeCount(p => ++p), console.warn(`theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`, name);
+      });
+    }, [themeState.themeManager]), useEffect(() => {
+      const tm = setInterval(rerender, 1e3);
+      return () => clearTimeout(tm);
+    }, []), themeProps["disable-child-theme"] || !isHydrated ? children : /* @__PURE__ */jsxs(Fragment, {
+      children: [createPortal( /* @__PURE__ */jsxs("code", {
+        style: {
+          whiteSpace: "pre",
+          maxWidth: 250,
+          overflow: "auto",
+          padding: 5
+        },
+        children: ["<Theme ", id, " />\xA0", JSON.stringify({
+          propsName: themeProps.name,
+          name: themeState?.state?.name,
+          className: themeState?.state?.className,
+          inverse: themeProps.inverse,
+          forceClassName: themeProps.forceClassName,
+          parent: themeState.themeManager?.state.parentName,
+          id: themeState.themeManager?.id,
+          parentId: themeState.themeManager?.parentManager?.id,
+          isNew: themeState.isNewTheme,
+          onChangeCount,
+          listening: [...(themeState.themeManager?._listeningIds || [])].join(","),
+          _numChangeEventsSent: themeState.themeManager?._numChangeEventsSent
+        }, null, 2)]
+      }), node), /* @__PURE__ */jsx("div", {
+        style: {
+          color: "red"
+        },
+        children: id
+      }), children]
+    });
+  }
+  return children;
+}
+ThemeDebug.displayName = "ThemeDebug";
+export { ThemeDebug };

package/dist/esm/views/ThemeProvider.mjs

@@ -0,0 +1,20 @@
+import { isClient } from "@tamagui/constants";
+import { useLayoutEffect } from "react";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.mjs";
+import { Theme } from "./Theme.mjs";
+import { jsx } from "react/jsx-runtime";
+const ThemeProvider = props => (isClient && useLayoutEffect(() => {
+  if (props.disableRootThemeClass) return;
+  const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`,
+    target = props.themeClassNameOnRoot ? document.documentElement : document.body;
+  return target.classList.add(cn), () => {
+    target.classList.remove(cn);
+  };
+}, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]), /* @__PURE__ */jsx(Theme, {
+  className: props.className,
+  name: props.defaultTheme,
+  forceClassName: !props.disableRootThemeClass,
+  _isRoot: !0,
+  children: props.children
+}));
+export { ThemeProvider };

package/dist/esm/views/View.mjs

@@ -0,0 +1,9 @@
+import { validStyles } from "@tamagui/helpers";
+import { stackDefaultStyles } from "../constants/constants.mjs";
+import { createComponent } from "../createComponent.mjs";
+const View = createComponent({
+  acceptsClassName: !0,
+  defaultProps: stackDefaultStyles,
+  validStyles
+});
+export { View };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.88.13",
+  "version": "1.89.0-1706308641099",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.88.13",
-    "@tamagui/constants": "1.88.13",
-    "@tamagui/helpers": "1.88.13",
-    "@tamagui/normalize-css-color": "1.88.13",
-    "@tamagui/timer": "1.88.13",
-    "@tamagui/use-did-finish-ssr": "1.88.13",
-    "@tamagui/use-event": "1.88.13",
-    "@tamagui/use-force-update": "1.88.13",
+    "@tamagui/compose-refs": "1.89.0-1706308641099",
+    "@tamagui/constants": "1.89.0-1706308641099",
+    "@tamagui/helpers": "1.89.0-1706308641099",
+    "@tamagui/normalize-css-color": "1.89.0-1706308641099",
+    "@tamagui/timer": "1.89.0-1706308641099",
+    "@tamagui/use-did-finish-ssr": "1.89.0-1706308641099",
+    "@tamagui/use-event": "1.89.0-1706308641099",
+    "@tamagui/use-force-update": "1.89.0-1706308641099",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.88.13",
+    "@tamagui/build": "1.89.0-1706308641099",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "typescript": "^5.3.3",

package/src/createComponent.tsx

@@ -1192,7 +1192,7 @@ export function createComponent<
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (isReactNative && !asChild && !isHOC) {
+      if (isReactNative && !asChild) {
         content = (
           <span
             {...(!isHydrated

package/src/helpers/getSplitStyles.tsx

@@ -530,6 +530,11 @@ export const getSplitStyles: StyleSplitter = (
     const shouldPassThrough = shouldPassProp || isHOCShouldPassThrough
 
     if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
+      // fix native group nesting issues
+      console.groupEnd()
+      console.groupEnd()
+      // fix native group nesting issues
+
       console.groupCollapsed(
         `  🔑 ${keyOg}${keyInit !== keyOg ? ` (shorthand for ${keyInit})` : ''} ${
           shouldPassThrough ? '(pass)' : ''

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAGZ,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AA4BhF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAgC7B,eAAO,MAAM,cAAc,EAAE,aAqoC5B,CAAA;AA2DD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,cA2BF,CAAA;AAqBD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAGZ,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AA4BhF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAgC7B,eAAO,MAAM,cAAc,EAAE,aA0oC5B,CAAA;AA2DD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,cA2BF,CAAA;AAqBD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}