@tamagui/core 1.0.2 → 1.0.4

package/dist/esm/views/Theme.js

@@ -3,59 +3,63 @@ import { isWeb } from "@tamagui/constants";
 import { Children, cloneElement } from "react";
 import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
+import { useServerRef } from "../hooks/useServerHooks";
 import { useChangeThemeEffect } from "../hooks/useTheme";
 function Theme(props) {
-  if (props.disable) {
+  if (props.disable)
     return props.children;
-  }
   const isRoot = !!props["_isRoot"];
-  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot);
-  const disableThemeClass = props.disableThemeClass;
-  const missingTheme = !(name && theme);
-  let contents = useThemeManagerContext(
-    props["data-themeable"] ? Children.map(
-      props.children,
-      (child) => cloneElement(child, { ["data-themeable"]: true })
-    ) : props.children,
-    themeManager
-  );
-  if (process.env.NODE_ENV === "development" && missingTheme) {
-    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 = /* @__PURE__ */ jsx("span", {
-      className: cn,
-      style: {
-        color: variableToString(theme == null ? void 0 : theme.color)
-      },
-      children: contents
-    });
-  }
-  return contents;
+  const themeState = useChangeThemeEffect(props, isRoot);
+  const children = props["data-themeable"] ? Children.map(
+    props.children,
+    (child) => cloneElement(child, { ["data-themeable"]: true })
+  ) : props.children;
+  return useThemedChildren(themeState, children, props);
 }
-function useThemeManagerContext(children, themeManager, shouldReset) {
-  const value = themeManager;
-  if (!value)
+function useThemedChildren(themeState, children, options) {
+  const { themeManager, isNewTheme, className, theme } = themeState;
+  const { shallow, forceClassName } = options;
+  const hasEverThemed = useServerRef(false);
+  if (isNewTheme) {
+    hasEverThemed.current = true;
+  }
+  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {
     return children;
+  }
   let next = children;
-  if (shouldReset && themeManager) {
-    next = /* @__PURE__ */ jsx(Theme, {
-      name: themeManager.state.parentName,
-      children: next
+  if (shallow && themeManager) {
+    next = Children.map(next, (child) => {
+      return cloneElement(
+        child,
+        void 0,
+        /* @__PURE__ */ jsx(Theme, {
+          name: themeManager.state.parentName,
+          children: child.props.children
+        })
+      );
     });
   }
-  return /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
-    value,
+  next = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
+    value: themeManager,
     children: next
   });
+  if (isWeb) {
+    const enableClassName = forceClassName === true || forceClassName !== false && isNewTheme;
+    return /* @__PURE__ */ jsx("span", {
+      className: "_dsp_contents",
+      ...theme && enableClassName && {
+        className: `${className} ${forceClassName ? "forced1" : ""} _dsp_contents`,
+        style: {
+          color: variableToString(theme.color)
+        }
+      },
+      children: next
+    });
+  }
+  return next;
 }
 export {
   Theme,
-  useThemeManagerContext
+  useThemedChildren
 };
 //# sourceMappingURL=Theme.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { Children, cloneElement, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot)\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !(name && theme)\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  let contents = useThemeManagerContext(\n    props['data-themeable']\n      ? Children.map(props.children, (child) =>\n          cloneElement(child, { ['data-themeable']: true })\n        )\n      : props.children,\n    themeManager\n  )\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || missingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function useThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // disabled super memoize it - listener first strategy\n  const value = themeManager // useMemo(() => themeManager, [!!themeManager])\n  // be sure to memoize themeManager to avoid reparenting\n  if (!value) return children\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return <ThemeManagerContext.Provider value={value}>{next}</ThemeManagerContext.Provider>\n}\n"],
-  "mappings": "AA4CM;AA5CN,SAAS,aAAa;AACtB,SAAgB,UAAU,oBAA6B;AAEvD,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,UAAU,IAAI,qBAAqB,OAAO,MAAM;AACnF,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,EAAE,QAAQ;AAI/B,MAAI,WAAW;AAAA,IACb,MAAM,oBACF,SAAS;AAAA,MAAI,MAAM;AAAA,MAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,mBAAmB,KAAK,CAAC;AAAA,IAClD,IACA,MAAM;AAAA,IACV;AAAA,EACF;AAEA,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,OAAO,iBAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,uBACd,UACA,cACA,aACA;AAEA,QAAM,QAAQ;AAEd,MAAI,CAAC;AAAO,WAAO;AAEnB,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,oBAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SAAO,oBAAC,oBAAoB,UAApB;AAAA,IAA6B;AAAA,IAAe;AAAA,GAAK;AAC3D;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName =\n      forceClassName === true || (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} ${forceClassName ? 'forced1' : ''} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
+  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,oBACnB,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,mBAAmB,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC;AAAA,UAAM,MAAM,aAAa,MAAM;AAAA,UAAa,gBAAM,MAAM;AAAA,SAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAClC;AAAA,GACH;AAGF,MAAI,OAAO;AACT,UAAM,kBACJ,mBAAmB,QAAS,mBAAmB,SAAS;AAC1D,WACE,oBAAC;AAAA,MACC,WAAU;AAAA,MACT,GAAI,SACH,mBAAmB;AAAA,QACjB,WAAW,GAAG,aAAa,iBAAiB,YAAY;AAAA,QACxD,OAAO;AAAA,UAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,QACrC;AAAA,MACF;AAAA,MAED;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -26,7 +26,7 @@ const ThemeProvider = (props) => {
     children: /* @__PURE__ */ jsx(Theme, {
       className: props.className,
       name: props.defaultTheme,
-      disableThemeClass: props.disableRootThemeClass,
+      forceClassName: props.disableRootThemeClass ? false : void 0,
       _isRoot: true,
       children: props.children
     })

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
-  "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE,oBAAC,yBAAyB,UAAzB;AAAA,IACC,OAAO,QAAQ,MAAM;AACnB,aAAO;AAAA,QACL,cAAc,MAAM;AAAA,MACtB;AAAA,IAEF,GAAG,CAAC,CAAC;AAAA,IAEL,8BAAC;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MAEzB,SAAO;AAAA,MAEN,gBAAM;AAAA,KACT;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        forceClassName={props.disableRootThemeClass ? false : undefined}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
+  "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE,oBAAC,yBAAyB,UAAzB;AAAA,IACC,OAAO,QAAQ,MAAM;AACnB,aAAO;AAAA,QACL,cAAc,MAAM;AAAA,MACtB;AAAA,IAEF,GAAG,CAAC,CAAC;AAAA,IAEL,8BAAC;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,gBAAgB,MAAM,wBAAwB,QAAQ;AAAA,MAEtD,SAAO;AAAA,MAEN,gBAAM;AAAA,KACT;AAAA,GACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,14 +28,14 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.2",
-    "@tamagui/constants": "^1.0.2",
-    "@tamagui/helpers": "^1.0.2",
-    "@tamagui/react-native-use-pressable": "^1.0.2",
-    "@tamagui/react-native-use-responder-events": "^1.0.2",
-    "@tamagui/use-did-finish-ssr": "^1.0.2",
-    "@tamagui/use-event": "^1.0.2",
-    "@tamagui/use-force-update": "^1.0.2",
+    "@tamagui/compose-refs": "^1.0.4",
+    "@tamagui/constants": "^1.0.4",
+    "@tamagui/helpers": "^1.0.4",
+    "@tamagui/react-native-use-pressable": "^1.0.4",
+    "@tamagui/react-native-use-responder-events": "^1.0.4",
+    "@tamagui/use-did-finish-ssr": "^1.0.4",
+    "@tamagui/use-event": "^1.0.4",
+    "@tamagui/use-force-update": "^1.0.4",
     "normalize-css-color": "^1.0.2"
   },
   "peerDependencies": {
@@ -43,13 +43,13 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.2",
+    "@tamagui/build": "^1.0.4",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.7.4",
-    "vitest": "^0.26.2"
+    "vitest": "^0.26.3"
   },
   "exports": {
     "./package.json": "./package.json",

package/reset.css

@@ -23,6 +23,10 @@ li, select, input, button, [role="slider"], [role="listbox"] {
   outline: none;
 }
 
+.is_Fieldset {
+  all: unset;
+}
+
 p, input, textarea, button, ul, ol, li, pre, dialog {
   all: unset;
   box-sizing: border-box;